的背景图必须靠 background-size/position。
缩略图是按比例缩下来的一张图，尺寸和卡片不一致 —— 不写 cover 就会按原尺寸铺、右边露底色，
看起来就是「图片错位」。这三行不能省。 */
.plaza-card-img {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
background-size: cover;
background-position: center 18%;
background-repeat: no-repeat;
}
/* 缩略图还没到的过渡态：铺底色 + 首字，不留空白。
⚠️ 这里只能用 background-color，不能用 background 简写 —— 简写会把上面
background-size/position/repeat 一起重置回 auto/repeat/0% 0%（这个坑踩过：图铺成原尺寸、错位）。
图铺上后由 JS 把首字 hidden 掉 —— 不用 CSS :has()，旧安卓 WebView 不支持。 */
.plaza-thumb-poster {
display: flex; align-items: flex-start; justify-content: center; padding-top: 18%;
background-color: #1b1512;
background-image: linear-gradient(160deg, #6f4535 0%, #16110e 100%);
font-family: var(--font-display); font-size: 72px; color: rgba(255, 255, 255, .18);
}
.plaza-thumb-ch { line-height: 1; }
.plaza-card-poster {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2;
display: flex; align-items: flex-start; justify-content: center; padding-top: 18%;
background: linear-gradient(160deg, #6f4535 0%, #16110e 100%);
font-family: var(--font-display); font-size: 72px; color: rgba(255, 255, 255, .18);
}
.plaza-card-fade {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(10, 8, 6, 0) 38%, rgba(10, 8, 6, .86) 100%);
}
.plaza-card-info {
position: absolute; left: 12px; right: 12px; bottom: 12px;
display: flex; flex-direction: column; gap: 5px;
}
.plaza-card-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plaza-card-nm {
font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2;
text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plaza-card-name.solo {
font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25;
}
.plaza-card-sep { display: none; }
.plaza-card-role {
font-size: 11px; color: rgba(255, 255, 255, .78);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plaza-card-tagline {
font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .86);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chip.plaza-take {
position: absolute; top: 10px; right: 10px;
min-height: 28px; padding: 0 12px;
border: 0; border-radius: 999px;
background: var(--primary); color: var(--on-primary);
font-size: 12px; font-weight: 600;
}
.chip.plaza-take.adopted, .chip.plaza-take:disabled {
background: rgba(10, 8, 6, .55); color: rgba(255, 255, 255, .9); font-weight: 400; opacity: 1;
}
.plaza-empty {
grid-column: 1 / -1; padding: 40px 16px; text-align: center;
border: 1.5px dashed var(--outline); border-radius: var(--r-card);
font-size: 15px; color: var(--on-bg);
}
.plaza-empty p + p { margin-top: 6px; }
.plaza-pager { display: flex; justify-content: center; }
.chip.plaza-more { min-height: var(--tap); padding: 0 24px; font-size: 13px; }
.plaza-end { font-size: 12px; color: var(--on-surface-variant); opacity: .7; padding: 6px 0; }
/* ---------- 角色广场：角色小传与人物档案抽屉 ---------- */
.plaza-detail-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 12, 17, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: modal-fade 0.2s ease-out;
}
.plaza-detail-modal {
position: relative;
width: 100%;
max-width: 480px;
max-height: 86vh;
background: var(--bg);
border: 1px solid var(--outline);
border-radius: 20px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
.plaza-detail-overlay {
align-items: flex-end;
padding: 0;
}
.plaza-detail-modal {
max-width: 100%;
max-height: 88vh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
}
@media (prefers-reduced-motion: reduce) {
.plaza-detail-overlay,
.plaza-detail-modal {
animation: none;
}
}
.plaza-detail-hero {
position: relative;
width: 100%;
height: 210px;
flex-shrink: 0;
overflow: hidden;
background: #0d1017;
}
.plaza-detail-cover {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
.plaza-detail-hero-fade {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: linear-gradient(
to top,
var(--bg) 0%,
rgba(10, 12, 17, 0.85) 45%,
rgba(10, 12, 17, 0.25) 75%,
rgba(10, 12, 17, 0.45) 100%
);
pointer-events: none;
}
.plaza-detail-hero-top {
position: absolute;
top: 12px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 3;
}
.plaza-detail-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(10, 12, 17, 0.6);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.15s, transform 0.1s;
}
.plaza-detail-close:hover {
background: rgba(10, 12, 17, 0.85);
}
.plaza-detail-close:active {
transform: scale(0.92);
}
.plaza-detail-close-ghost {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--outline);
background: var(--surface-variant);
color: var(--on-surface);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.plaza-detail-close-ghost:hover {
background: var(--surface);
}
.plaza-detail-close-ghost:active {
transform: scale(0.92);
}
.plaza-detail-art-zoom {
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(10, 12, 17, 0.6);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.15s, transform 0.1s;
}
.plaza-detail-art-zoom:hover {
background: rgba(10, 12, 17, 0.85);
}
.plaza-detail-art-zoom:active {
transform: scale(0.95);
}
.plaza-detail-hero-info {
position: absolute;
left: 18px;
right: 18px;
bottom: 12px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.plaza-detail-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.plaza-detail-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
line-height: 1.3;
}
.plaza-detail-gender {
font-size: 10.5px;
padding: 2px 7px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.5px;
}
.plaza-detail-gender.male {
background: rgba(56, 125, 240, 0.35);
color: #a8cdfc;
border: 1px solid rgba(56, 125, 240, 0.45);
}
.plaza-detail-gender.female {
background: rgba(230, 80, 140, 0.35);
color: #fcb1d0;
border: 1px solid rgba(230, 80, 140, 0.45);
}
.plaza-detail-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.plaza-detail-tag {
font-size: 10.5px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.plaza-detail-noart-header {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--outline);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.plaza-detail-noart-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.plaza-detail-noart-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--on-surface);
}
.plaza-detail-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 20px;
display: block;
}
.plaza-detail-body > * + * { margin-top: 14px; }
.plaza-detail-quote {
padding: 10px 14px;
border-left: 3px solid var(--primary);
background: var(--surface-variant);
border-radius: 0 10px 10px 0;
font-size: 13px;
line-height: 1.65;
color: var(--on-surface);
font-style: italic;
font-family: var(--font-serif, var(--font-display));
}
.plaza-detail-slot { display: block; }
.plaza-detail-slot > * + * { margin-top: 14px; }
.plaza-detail-sec { display: block; }
.plaza-detail-sec > * + * { margin-top: 6px; }
.plaza-detail-sec-head {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
color: var(--primary);
letter-spacing: 0.5px;
}
.plaza-detail-sec-body {
font-size: 13px;
line-height: 1.75;
color: var(--on-surface);
white-space: pre-wrap;
word-break: break-word;
}
.plaza-detail-firstmes {
padding: 12px 14px;
border-radius: 12px;
background: var(--surface-variant);
border: 1px solid var(--outline);
display: block;
}
.plaza-detail-firstmes > * + * { margin-top: 6px; }
.plaza-firstmes-line {
font-size: 13px;
line-height: 1.75;
color: var(--on-surface);
word-break: break-word;
}
.plaza-firstmes-line.action {
font-style: italic;
color: var(--on-surface-variant);
font-size: 12.5px;
}
.plaza-memory-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.plaza-memory-chip {
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(197, 160, 89, 0.12);
color: var(--primary);
border: 1px solid rgba(197, 160, 89, 0.28);
display: inline-flex;
align-items: center;
gap: 4px;
}
.plaza-detail-footer {
padding: 12px 20px;
border-top: 1px solid var(--outline);
background: var(--bg);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-shrink: 0;
}
.plaza-detail-btn {
min-height: 38px;
padding: 7px 18px;
font-size: 13px;
font-weight: 500;
border-radius: 999px;
}
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
white-space: nowrap;
background: var(--surface-variant); color: var(--on-surface);
border: 1px solid var(--outline); border-radius: 999px;
padding: 7px 14px; font-size: 13px;
}
.chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* ---------- 加载骨架屏（聊天卷宗：消息气泡占位） ---------- */
.skeleton-thread, .skeleton-hall {
display: flex; flex-direction: column; gap: 14px;
padding: 8px 0 16px; pointer-events: none;
}
.skeleton-hall .sk-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.skeleton-hall .sk-card {
height: 216px; border-radius: 14px; border: 1px solid var(--outline);
background: linear-gradient(160deg, var(--surface-variant), var(--surface));
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.skeleton-hall .sk-avatar { width: 72px; height: 72px; border-radius: 50%; }
.skeleton-hall .sk-name { width: 60px; height: 12px; }
.sk-avatar, .sk-name, .sk-line, .sk-bubble {
background: linear-gradient(90deg, var(--surface-variant) 25%, var(--surface) 37%, var(--surface-variant) 63%);
background-size: 400% 100%;
animation: sk-shimmer 1.4s ease infinite;
}
.sk-msg { display: flex; flex-direction: column; gap: 6px; max-width: 86%; }
.sk-msg.user { align-self: flex-end; align-items: flex-end; }
.sk-msg.assistant { align-self: flex-start; }
.sk-line { height: 14px; border-radius: 8px; }
.sk-bubble { border-radius: 14px; }
.sk-bubble.long { width: 78%; height: 34px; }
.sk-bubble.mid { width: 58%; height: 34px; }
.sk-bubble.short { width: 40%; height: 26px; }
.sk-bubble.user { background: color-mix(in srgb, var(--primary) 22%, var(--surface-variant)); }
.sk-name { width: 64px; height: 10px; }
@keyframes sk-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.sk-avatar, .sk-name, .sk-line, .sk-bubble { animation: none; }
}
/* ---------- 对话线程 ---------- */
.thread { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 16px; }
/* 长卷宗的分页入口（窗口化渲染配套，见 chat.js 2026-09-27）。
:empty 必须藏起来：.thread 是 gap:14px 的 flex 列，空占位会凭空多一道缝。 */
.thread-more:empty, .thread-win-end { display: none; }
.thread-more { display: flex; justify-content: center; align-items: center; }
.thread-more-btn { font-size: 12px; padding: 6px 14px; }
.thread-more-note { font-size: 11px; color: var(--on-surface-variant); opacity: .65; }
/* 整窗重画出来的气泡不走入场动画：一次滑窗 200 个节点同时 msg-in 既费帧又像整页在抖；
真正新产生的消息（发送 / 收尾）不加这个类，入场动画照旧。 */
.msg-group.no-anim { animation: none; }
.msg-group { display: flex; flex-direction: column; gap: 6px; max-width: 86%; animation: msg-in .22s ease-out; }
.msg-live .msg-group { animation: none; }
@keyframes msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.msg-group { animation: none; }
}
.msg-group.user { align-self: flex-end; }
.msg-group.assistant { align-self: flex-start; }
.msg-role {
font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 2px; color: var(--on-surface-variant); opacity: .9;
}
.msg-role.user { color: var(--primary); text-align: right; }
.msg-bubble {
font-family: var(--bubble-font);
font-size: calc(15px * var(--chat-scale, 1)); line-height: 1.7; white-space: pre-wrap; word-break: break-word;
padding: 12px 16px; border-radius: var(--bub-r); border: var(--bub-bw) solid var(--outline);
background: var(--surface); color: var(--on-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.msg-group.user .msg-bubble {
background: var(--bub-user-bg); color: var(--bub-user-color); border-color: var(--primary);
border-bottom-right-radius: var(--bub-tail);
/* 一条消息拆成几段时，每段气泡各自贴着自己的文字、靠右；以前竖列里全被拉到最长那段的宽度（工单 7332d2da「跟着最下面那句的长短变化」） */
align-self: flex-end;
}
.msg-group.assistant .msg-bubble {
/* 纸感：纵向极淡的纸页明暗，替代平涂 */
background: linear-gradient(180deg, var(--surface), var(--surface-variant));
border-color: var(--outline);
border-bottom-left-radius: var(--bub-tail);
}
.msg-meta {
font-family: var(--font-mono); font-size: 10px; color: var(--on-surface-variant); opacity: .7;
margin-top: 2px; padding: 0 4px;
}
.msg-group.user .msg-meta { text-align: right; }
/* ---------- 消息气泡快捷操作（重新生成 / 撤回重编 / 复制） ---------- */
.msg-actions {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 3px;
padding: 0 4px;
user-select: none;
transition: opacity 0.15s;
}
.msg-group.user .msg-actions {
justify-content: flex-end;
}
/* 仅最新消息默认展示；历史消息在 hover / 聚焦时显现，避免长列表过度杂乱 */
.msg-group:not(.is-latest) .msg-actions {
opacity: 0;
pointer-events: none;
}
.msg-group:not(.is-latest):hover .msg-actions,
.msg-group:not(.is-latest):focus-within .msg-actions {
opacity: 0.85;
pointer-events: auto;
}
.msg-act-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono, sans-serif);
font-size: 11px;
color: var(--on-surface-variant);
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
padding: 2px 7px;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.msg-act-btn:hover {
opacity: 1;
color: var(--on-bg);
background: var(--surface-variant);
border-color: var(--outline);
}
.msg-act-btn:active {
transform: scale(0.96);
}
.msg-act-btn.is-busy {
pointer-events: none;
opacity: 0.4;
}
/* ---------- 旁白场景块（对话/旁白分离渲染） ---------- */
.msg-live { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.scene-block {
width: 100%;
padding: 1px 22px;
text-align: center;
}
.scene-text {
font-family: var(--font-display);
font-size: calc(13px * var(--chat-scale, 1));
line-height: 1.9;
letter-spacing: .04em;
color: var(--on-surface-variant);
opacity: .85;
}
.scene-text::before { content: "✦ "; font-style: normal; font-size: 9px; opacity: .5; vertical-align: 2px; }
/* 用户侧的旁白块（2026-09-25 工单「分不清括号里面和括号外面内容」）
上面那套排版是给助手列（左对齐、整行居中像舞台提示）写的；用户列靠右，
直接套用会让 TA 自己写的动作看起来像系统提示。这里只改对齐与留白，
字号/字体/✦ 标记/透明度与助手侧保持一致——同一套约定要在两侧长成一个样子
（曾试过再压一档 opacity .72，实测对比度掉到 2.56:1，比助手侧还淡，已回退）。 */
.msg-group.user .scene-block {
width: auto;
max-width: 100%;
align-self: flex-end;
padding: 0 6px 0 12px;
text-align: right;
}
.msg-live-empty { min-height: 24px; display: block; }
.composer {
display: flex; gap: 10px; align-items: flex-end;
padding: 12px 12px max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--outline);
background: var(--bg);
position: relative; bottom: auto; z-index: 2;
}
.composer textarea {
flex: 1; resize: none;
background: var(--surface);
border: 1px solid var(--outline); border-radius: 20px;
padding: 12px 16px; font-size: calc(15px * var(--chat-input-scale, 1)); line-height: 1.5; color: var(--on-bg);
outline: none; min-height: 46px; max-height: 140px;
transition: border-color .15s, box-shadow .15s;
/* 输入框内不显示滚动条（内容超长时仍可滚动） */
scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea::placeholder { color: var(--on-surface-variant); opacity: .55; }
.composer textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(204,120,92,.12); }
@supports (color: color-mix(in srgb, red 12%, transparent)) {
.composer textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
}
.send-btn {
width: 46px; height: 46px; border-radius: 50%; border: none; flex-shrink: 0;
background: var(--primary); color: var(--on-primary); font-size: 18px; display: flex; align-items: center; justify-content: center;
transition: transform .12s, opacity .15s;
}
.send-btn:active { transform: scale(.96); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; }
.send-btn.is-stop { background: var(--on-surface-variant); }
.send-btn.is-advance {
background: var(--surface-variant);
color: var(--primary);
border: 1px solid var(--outline);
font-size: 15px;
cursor: pointer;
opacity: .9;
}
.send-btn.is-advance:hover {
opacity: 1;
transform: scale(1.05);
}
/* ---------- 相遇大厅 · 案头续卷（Plan A 横滑微卡架） ---------- */
.hall-wrap {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* ---------- 入梦世界书 ---------- */
.dream-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 560px) {
.dream-grid { grid-template-columns: 1fr 1fr; }
}
.dream-book-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
}
.dream-book-head {
display: flex;
gap: 6px;
align-items: center;
}
.dream-book-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
}
.dream-book-tagline {
font-size: 12.5px;
color: var(--on-surface-variant);
line-height: 1.7;
}
.dream-book-meta {
font-size: 11px;
color: var(--on-surface-variant);
font-family: var(--font-mono);
letter-spacing: .05em;
}
/* 自己的书：一眼能从官方书里分出来（左边一道主色竖线 + 「我的」小签） */
.dream-book-mine { border-left: 3px solid var(--primary); }
.dream-book-ops {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 2px;
}
/* 自定义入口卡：虚线边框，与"已经有的世界"区分开 */
.dream-book-new {
border: 1px dashed var(--outline, rgba(128, 128, 128, .5));
background: transparent;
}
/* 编辑器里的可增删行（NPC / 事件） */
.dream-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.dream-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 12px;
background: var(--surface-variant);
}
.dream-row-head {
display: flex;
gap: 8px;
align-items: center;
}
.dream-row-head .field { flex: 1; min-width: 0; }
.dream-row-head .chip { flex-shrink: 0; }
/* ---------- 入梦沉浸剧本流 ---------- */
/* ---------- 梦境会话（openDreamSession，2026-09-27 重做外观；IM 骨架不动） ----------
整页是一个纵向 flex：顶栏 / 记忆条 / 剧本流（自己滚）/ 事件条 / 输入区（固定在底） */
.dream-stage { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.dream-top { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.dream-top-back {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--outline); background: var(--surface); color: var(--on-bg); cursor: pointer;
}
.dream-top-back:active { background: var(--surface-variant); }
.dream-top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dream-top-name {
font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dream-top-act { font-size: 12px; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dream-script {
display: flex; flex-direction: column; gap: 14px;
flex: 1; min-height: 0; /* 覆盖 flex 子项的自动最小尺寸，允许收缩 */
overflow-y: auto; /* 剧本流自身滚动——此前外溢出盒子，把输入区盖住 */
padding: 6px 2px 8px;
overscroll-behavior: contain;
}
.dream-line { font-size: calc(14px * var(--chat-scale, 1)); line-height: 1.8; }
/* 旁白 = 舞台指示：不带底框的衬线正文 */
.dream-line.narrator {
font-family: var(--font-display); font-size: calc(15px * var(--chat-scale, 1)); line-height: 1.95;
color: var(--on-surface);
padding: 0 6px;
white-space: pre-wrap;
}
.dream-line.narrator.dream-opening { color: var(--on-surface-variant); text-align: center; font-size: calc(14px * var(--chat-scale, 1)); padding: 24px 12px; }
.dream-line.narrator.pending { color: var(--on-surface-variant); letter-spacing: .3em; animation: dream-pulse 1.2s ease-in-out infinite; }
@keyframes dream-pulse { 50% { opacity: .35; } }
.dream-line.player { align-self: flex-end; max-width: 82%; }
.dream-line.player .dream-line-body {
background: var(--primary); color: var(--on-primary);
border-radius: 18px 6px 18px 18px;
padding: 10px 14px; white-space: pre-wrap;
}
.dream-line.npc { align-self: flex-start; max-width: 88%; display: flex; align-items: flex-start; gap: 8px; }
.dream-npc-avatar {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--surface-variant); border: 1px solid var(--outline);
font-family: var(--font-display); font-size: 14px; color: var(--primary);
}
.dream-npc-main { min-width: 0; }
.dream-line.npc .dream-line-body {
background: var(--surface); border: 1px solid var(--outline);
border-radius: 6px 18px 18px 18px;
padding: 10px 14px; white-space: pre-wrap;
}
.dream-line-label { font-size: 11px; color: var(--on-surface-variant); margin: 0 0 4px 2px; }
.dream-event {
flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
font-size: 12px; padding: 8px 14px; border-radius: 999px;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary); letter-spacing: .05em;
}
.dream-event[hidden] { display: none; }
/* 记忆折叠条：默认收起一行；展开体内部滚动（上限 40vh），不吃对话区 */
.dream-memory {
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--outline));
border-radius: var(--r-ctl);
background: color-mix(in srgb, var(--primary) 5%, var(--surface));
padding: 0 14px;
}
.dream-memory summary {
display: flex; align-items: center; justify-content: space-between;
min-height: 40px;
cursor: pointer; list-style: none; user-select: none;
}
.dream-memory summary::-webkit-details-marker { display: none; }
.dream-memory-t { font-size: 13px; color: var(--primary); }
.dream-memory-chev { color: var(--primary); font-size: 16px; transition: transform .15s; }
.dream-memory[open] .dream-memory-chev { transform: rotate(90deg); }
.dream-memory-body {
max-height: 40vh; overflow-y: auto;
padding: 10px 0 12px;
border-top: 1px dashed var(--outline);
font-size: 13px; color: var(--on-surface); line-height: 1.8; white-space: pre-wrap;
}
/* 输入区固定在剧本流底部，不随内容滚走（IM 骨架） */
.dream-input {
flex-shrink: 0;
display: flex; flex-direction: column; gap: 8px;
border-top: 1px solid var(--outline);
padding-top: 10px;
}
.dream-input-row { display: flex; align-items: flex-end; gap: 8px; }
.dream-input-field {
flex: 1; min-width: 0; resize: none;
min-height: 44px; max-height: 30vh; overflow-y: auto;
padding: 11px 16px; border-radius: 22px;
border: 1px solid var(--outline); background: var(--surface); color: var(--on-bg);
font: inherit; font-size: calc(16px * var(--chat-input-scale, 1)); line-height: 1.5; outline: none;
}
.dream-input-field:focus { border-color: var(--primary); }
.dream-input-field::placeholder { color: var(--on-surface-variant); }
.dream-send {
width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer;
}
.dream-send:disabled { opacity: .5; }
.dream-send:active:not(:disabled) { transform: scale(.94); }
.dream-status { font-size: 12px; color: var(--error); min-height: 0; }
.dream-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
.dream-line.narrator.pending { animation: none; }
}
.char-card {
position: relative; overflow: hidden;
border-radius: 14px; /* 画框收紧，退后成框 */
border: 1px solid var(--outline); cursor: pointer;
background: linear-gradient(160deg, var(--surface-variant), var(--surface));
transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
/* backwards：下面是 nth-child 阶梯延迟入场，both 会让每张卡都常驻一个合成层（几十张卡 = 几十个层） */
animation: msg-in .28s ease-out backwards;
}
.char-card:hover {
transform: translateY(-2px);
border-color: rgba(204, 120, 92, .45);
box-shadow: 0 8px 20px rgba(0, 0, 0, .13);
}
.char-card:active { transform: scale(.985); }
.char-card-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-size: cover; background-position: center 15%; }
.char-banner {
position: relative; height: 128px; border-radius: 16px; overflow: hidden;
border: 1px solid var(--outline); background: var(--surface-variant);
animation: msg-in .3s ease-out;
}
.char-banner-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-size: cover; background-position: center 20%; }
.char-banner-fade {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: linear-gradient(180deg, transparent 30%, var(--bg) 100%);
}
.char-banner.no-art .char-banner-fade { background: linear-gradient(160deg, var(--surface-variant), var(--surface)); }
.char-banner-info { position: absolute; left: 14px; right: 40px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.char-banner-info .char-banner-name-row { display: flex; align-items: baseline; gap: 8px; max-width: 100%; }
.char-banner-info strong { font-family: var(--font-display); font-size: 20px; letter-spacing: .03em; color: var(--on-bg); }
.char-banner-status { font-size: 11px; color: var(--tertiary); letter-spacing: .08em; }
.char-banner-recall {
background: none; border: none; padding: 0;
font-family: var(--font-display); font-size: 11px; letter-spacing: .06em;
color: var(--on-surface-variant); cursor: pointer; white-space: nowrap;
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.char-banner-recall:hover { color: var(--primary); }
.cavatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background-size: cover; background-position: center 20%;
border: 1px solid var(--outline);
display: inline-flex; align-items: center; justify-content: center;
}
.cavatar.fallback {
background: var(--surface-variant); color: var(--primary);
font-family: var(--font-display); font-size: 15px;
}
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.msg-head.user { justify-content: flex-end; }
/* 立绘预览（2026-10-02 从 72×72 方框改成 3:4 大图）：
原来那么小一块，站在那儿根本看不清 AI 画成了什么样，只能反复生成。
现在按立绘本身的 3:4 竖构图铺满弹窗宽度，点一下还能开全屏 + 保存。 */
.art-preview {
width: 100%; aspect-ratio: 3 / 4; max-width: 260px; border-radius: 14px; flex-shrink: 0;
background-color: var(--surface-variant); background-size: cover; background-position: center 18%;
border: 1px dashed var(--outline);
display: block; padding: 0; cursor: zoom-in;
position: relative; overflow: hidden;
}
.art-preview:disabled { cursor: default; opacity: .6; }
.art-preview:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 有图时提示「点得开」：靠 hover 提亮边框，不用图标（emoji 的 🔍 各平台长得都不一样，
上一版挂在缩略图上就是因为这个被否掉了）。 */
.art-preview.has { border-style: solid; cursor: zoom-in; }
.art-preview.has:hover { border-color: var(--primary); }
@media (hover: hover) { .art-preview.has:hover { filter: brightness(1.06); } }
.art-preview.generating { border-style: solid; border-color: var(--primary); }
.art-preview.generating::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(204, 120, 92, .28) 50%, transparent 70%);
animation: art-sweep 1.4s ease-in-out infinite;
}
@keyframes art-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.art-preview.generating::after { animation: none; }
}
.sec-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--tertiary);
margin-bottom: 8px;
}
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.style-tile {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 14px 6px 11px; border-radius: 12px;
background: var(--surface); border: 1.5px solid var(--outline);
color: inherit; transition: border-color .15s ease, background-color .15s ease;
}
.style-tile.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-variant); }
.style-tile .st-icon { font-size: 22px; line-height: 1; }
.style-tile .st-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.style-tile .st-sub { font-size: 10.5px; color: var(--on-surface-variant); }
.chip.mini {
padding: 3px 9px; font-size: 11px;
background: rgba(10, 12, 17, .5); color: #fff;
border-color: rgba(255, 255, 255, .28);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.chip.mini.danger { color: #ffb4a0; }
/* VN 沉浸模式 */
.vn-wrap { gap: 0 !important; min-height: 0; }
.vn-stage {
position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, var(--surface-variant), var(--surface));
border: 1px solid var(--outline);
display: flex; flex-direction: column; justify-content: flex-end;
}
.vn-stage.has-art { background: #0d0f14; }
.vn-backdrop {
position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; inset: -20px;
background-size: cover; background-position: center 15%;
filter: blur(18px) brightness(.55); opacity: .8;
}
.vn-figure {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background-size: contain; background-repeat: no-repeat; background-position: center bottom;
animation: msg-in .4s ease-out;
}
.vn-top {
position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 3;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.vn-top .chip { background: rgba(10, 12, 17, .45); color: #f0efea; border-color: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vn-top .chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.vn-top .mono-label { color: rgba(240,239,234,.75); }
.vn-box {
position: relative; z-index: 2;
margin: 12px; padding: 14px 16px 10px;
border-radius: 14px;
background: rgba(250, 249, 245, .88);
border: 1px solid var(--outline);
box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
min-height: 120px;
max-height: min(42vh, 380px);
overflow: hidden;
display: flex; flex-direction: column; gap: 8px;
}
@supports (color: color-mix(in srgb, red 88%, transparent)) {
.vn-box { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}
.vn-box::-webkit-scrollbar { width: 4px; }
.vn-box::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 999px; }
.vn-box::-webkit-scrollbar-track { background: transparent; }
.vn-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vn-name-row .cavatar { width: 26px; height: 26px; font-size: 13px; }
.vn-nameplate { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--primary); }
.vn-nameplate.user { color: var(--tertiary); }
.vn-counter { font-family: var(--font-mono); font-size: 10px; color: var(--on-surface-variant); }
.vn-content { flex: 1; min-height: 0; font-size: calc(15px * var(--chat-scale, 1)); line-height: 1.8; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.vn-line { white-space: pre-wrap; word-break: break-word; }
.vn-line.error { color: var(--error); font-size: 13px; }
.vn-narr { font-family: var(--font-display); font-size: calc(13px * var(--chat-scale, 1)); letter-spacing: .04em; color: var(--on-surface-variant); margin: 4px 0; }
.vn-steppers { display: flex; justify-content: space-between; }
.vn-steppers .chip { padding: 8px 14px; min-height: 36px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
.char-banner, .vn-figure { animation: none; }
}
.typing-dots::after {
content: "▍";
animation: blink 1s steps(2) infinite;
color: var(--primary);
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.typing-dots::after { animation: none; }
}
/* ---------- 长按操作单 / Toast / 下拉刷新 ---------- */
.sheet-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 110;
background: rgba(10, 12, 17, .4);
animation: modal-fade .18s ease-out;
}
.sheet {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--bg);
border-radius: 18px 18px 0 0;
padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 4px;
animation: sheet-up .22s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-btn {
border: none; background: none; text-align: left;
padding: 14px 16px; min-height: 48px; border-radius: 10px;
font-size: 15px; color: var(--on-bg);
}
.sheet-btn:active { background: var(--surface-variant); }
.sheet-btn.danger { color: var(--error); }
.sheet-btn.cancel {
text-align: center; color: var(--on-surface-variant);
border-top: 1px solid var(--outline); border-radius: 0;
}
.toast {
position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(8px);
background: rgba(10, 12, 17, .85); color: #f0efea;
padding: 9px 18px; border-radius: 999px;
font-size: 13px; z-index: 120; pointer-events: none;
opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- 上下文水位环：conic-gradient 圆环 + 中心镂空。
--pct 由 JS 写入（0-100）；≥70% 琥珀、≥90% 红。token 越多，彩色弧越长，顺时针填满一圈 ---------- */
.ctx-ring {
width: 24px; height: 24px; border-radius: 50%;
flex-shrink: 0; cursor: pointer; position: relative;
background: conic-gradient(var(--ctx-color, var(--primary)) calc(var(--pct, 0) * 1%), var(--outline) 0);
transition: background .35s cubic-bezier(.4,0,.2,1);
}
.ctx-ring::after {
content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; inset: 3px;
border-radius: 50%; background: var(--bg);
}
/* 圆心读数：已知显示水位百分比数字，未知显示 ? */
.ctx-ring-txt {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 8px; line-height: 1;
color: var(--on-surface-variant);
}
.ctx-ring.warn .ctx-ring-txt { color: #d97706; }
.ctx-ring.danger .ctx-ring-txt { color: var(--error); }
.ctx-ring.unknown { cursor: help; }
.ctx-ring.unknown .ctx-ring-txt { font-size: 11px; color: var(--on-surface-variant); }
.ctx-ring.warn { --ctx-color: #d97706; }
.ctx-ring.danger { --ctx-color: var(--error); }
/* 圆环右侧的 token 消耗小字——不挤进圆心，圆环本职保持不变 */
.ctx-tokens {
flex-shrink: 0;
background: none; border: none; padding: 0;
font-family: var(--font-mono);
font-size: 10px;
color: var(--on-surface-variant);
letter-spacing: .02em;
cursor: pointer;
min-width: 28px;
text-align: left;
}
.ctx-tokens:hover { color: var(--primary); }
.ctx-ring:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.ctx-ring { transition: none; }
}
/* ---------- 水位弹窗 ---------- */
.ctx-pop-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 90;
background: rgba(10, 12, 17, .25);
display: flex; align-items: flex-end; justify-content: center;
padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
animation: overlay-in .15s ease-out backwards;
}
.ctx-pop {
width: 100%; max-width: 360px;
background: var(--bg);
border: 1px solid var(--outline);
border-radius: 16px;
padding: 16px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
animation: card-in .18s ease-out backwards;
}
.ctx-pop-status {
min-height: 18px; margin-top: 8px;
font-size: 12px; color: var(--on-surface-variant);
white-space: pre-wrap;
}
.ctx-pop-usage {
margin-top: 14px;
padding: 12px 14px;
background: var(--surface-variant);
border-radius: 10px;
border: 1px solid var(--outline);
}
.ctx-pop-usage-title {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: .12em;
color: var(--primary);
margin-bottom: 8px;
}
.ctx-pop-usage-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
text-align: center;
}
.ctx-pop-usage-num {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.ctx-pop-usage-cap {
font-size: 10.5px;
color: var(--on-surface-variant);
margin-top: 2px;
letter-spacing: .08em;
}
.ctx-pop-usage-split {
display: flex; justify-content: space-around;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--outline);
font-size: 11px;
color: var(--on-surface-variant);
}
@media (prefers-reduced-motion: reduce) {
.ctx-pop-overlay, .ctx-pop { animation: none; }
}
/* ---------- 页面与弹窗过渡（克制：淡入 + 轻位移，尊重系统减少动态） ---------- */
@keyframes view-in {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
@keyframes overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes card-in {
from { opacity: 0; transform: scale(.96) translateY(6px); }
to { opacity: 1; transform: none; }
}
.app-shell, .conn-shell, .auth-wrap, .thread-wrap, .view-in {
animation: view-in .22s ease-out backwards;
}
/* ⛔ 为什么这里是 backwards —— 2026-09-19「composerband」热修的教训：
上一轮只把 fill-mode 改在 .thread-wrap 上（.thread-wrap{animation-fill-mode:backwards}），
结果**完全无效**：页节点同时还命中文件上方 #app-body > * { animation: page-in … both }，
那条特异性 (1,0,0) 压过 .thread-wrap 的 (0,1,0)，与先后顺序无关。实测该元素 computed 仍是
matrix(1,0,0,1,0,0)、fill-mode 仍是 both —— 等于没修，线上照旧偶发白条
（当时 --verify 只 grep 了「字符串在不在」，没量 computed，这是漏网的原因）。
⇒ 摘「常驻合成层」必须改**真正生效的那条规则**，改完要用脚本量 computed transform
（scripts/guard-repaint.mjs），不能只 grep。
⇒ 新增任何入场动画时，若终帧（opacity:1 / transform:none）与元素自然基态一致，一律用 backwards。 */
/* 弹窗入场同理：终帧（opacity:1 / transform:none）与基态一致 → 一律 backwards。
注：下面第 2096/2105 行还有一组同选择器的声明且更靠后，实际生效的是那一组；
这里改成 backwards 是为了不给「常驻元素 + both」留下任何可被后人抄走的样本。 */
.modal-overlay { animation: overlay-in .15s ease-out backwards; }
.modal-card { animation: card-in .18s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
.app-shell, .conn-shell, .auth-wrap, .thread-wrap, .view-in,
.modal-overlay, .modal-card { animation: none; }
}
/* ---------- 梦茧页「破茧」入场：羁绊先落定，星屑如微尘次第浮现。
仅 transform/opacity；子项阶梯延迟封顶 0.3s；reduced-motion 退为轻淡入 ---------- */
@keyframes cocoon-unfurl {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
.cocoon-unfurl > * {
/* backwards：阶梯延迟期间照样不可见（from 态），但跑完不留恒等 transform */
animation: cocoon-unfurl .45s cubic-bezier(.16, 1, .3, 1) backwards;
}
.cocoon-unfurl > *:nth-child(2) { animation-delay: .06s; }
.cocoon-unfurl > *:nth-child(3) { animation-delay: .12s; }
.cocoon-unfurl > *:nth-child(4) { animation-delay: .18s; }
.cocoon-unfurl > *:nth-child(5) { animation-delay: .24s; }
.cocoon-unfurl > *:nth-child(n+6) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.cocoon-unfurl > * { animation-duration: .22s; animation-delay: 0s; }
}
.ptr-ind {
height: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
color: var(--on-surface-variant); font-size: 12px; font-family: var(--font-mono);
transition: height .2s ease;
}
/* ---------- 应用内弹窗 ---------- */
.modal-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(10, 12, 17, .45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: modal-fade .18s ease-out;
}
.modal-card {
width: 100%; max-width: 320px;
background: var(--bg);
border: 1px solid var(--outline);
border-radius: 16px;
padding: 20px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
animation: modal-pop .2s cubic-bezier(.2, .9, .3, 1);
max-height: 85vh;
max-height: min(85vh, 85dvh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
box-sizing: border-box;
}
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
.modal-overlay, .modal-card { animation: none; }
}
.modal-title {
font-family: var(--font-display);
font-size: 16px; font-weight: 600;
margin-bottom: 6px;
}
.modal-msg {
font-size: 13.5px; line-height: 1.75;
color: var(--on-surface);
white-space: pre-wrap;
word-break: break-word;
}
.modal-card .field { margin-top: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-btn { min-width: 76px; min-height: 44px; padding: 10px 16px; }
.modal-danger { background: var(--error); border-color: var(--error); }
/* 移动端：通用轻弹窗居中并自适应剩余高度，支持局部滚动避免软键盘遮挡操作按钮 */
@media (max-width: 767px) {
.modal-overlay {
align-items: center;
justify-content: center;
padding: 16px;
padding-top: max(16px, env(safe-area-inset-top));
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.modal-card {
max-width: min(340px, calc(100vw - 32px));
max-height: 80vh;
max-height: min(80vh, 80dvh);
}
}
/* ---------- 角色创建/编辑大弹窗（支持移动端抽屉与大表单顺滑滚动） ---------- */
.char-modal-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(10, 12, 17, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: modal-fade .18s ease-out;
overscroll-behavior: contain;
}
.char-modal-card {
width: 100%;
max-width: 520px;
max-height: 88vh;
max-height: min(88vh, 760px);
background: var(--bg);
border: 1px solid var(--outline);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modal-pop .2s cubic-bezier(.2, .9, .3, 1);
}
.char-modal-header {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--outline);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
background: var(--bg);
}
.char-modal-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--on-bg);
}
.char-modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--outline);
background: var(--surface);
color: var(--on-surface-variant);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
line-height: 1;
transition: all .15s ease;
}
.char-modal-close:hover {
background: var(--surface-variant);
color: var(--on-surface);
}
.char-modal-close:active {
transform: scale(.92);
}
.char-modal-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 16px 20px 20px;
}
.char-modal-body .sec-label {
margin-top: 14px;
margin-bottom: 4px;
}
.char-modal-body .sec-label:first-child {
margin-top: 0;
}
.char-modal-body .field {
margin-top: 10px;
touch-action: pan-y;
overscroll-behavior-y: auto;
}
.char-modal-footer {
padding: 14px 20px;
border-top: 1px solid var(--outline);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
background: var(--bg);
}
@media (max-width: 640px) {
.char-modal-overlay {
align-items: flex-end;
padding: 0;
}
.char-modal-card {
max-width: 100%;
max-height: 90vh;
max-height: 90dvh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
.char-modal-body {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.char-modal-footer {
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
}
@media (prefers-reduced-motion: reduce) {
.char-modal-overlay, .char-modal-card { animation: none; }
}
/* ---------- 角色编辑器 v2（2026-09-27 反馈「完善角色时框太小」） ----------
桌面：卡片加宽加高；手机：直接铺满可见区域（不再是 90vh 抽屉 + 键盘再吃掉一半）。 */
.char-modal-card { max-width: 680px; max-height: min(92vh, 960px); }
/* 底栏次要操作组：桌面不参与布局（保持原来一行），手机在下面的媒体查询里改成独占一行 */
.char-modal-secondary { display: contents; }
@media (max-width: 640px) {
.char-modal-card {
height: 100%;
max-height: none;
border-radius: 0;
border: none;
}
.char-modal-header { padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.char-modal-body { padding: 0 16px 24px; }
.char-modal-footer { padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.char-modal-footer { flex-wrap: wrap; gap: 8px; }
.char-modal-footer .modal-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.char-modal-footer > .modal-btn:last-child { flex: 1; }
.char-modal-secondary { display: flex; flex: 0 0 100%; gap: 8px; }
.char-modal-secondary .cm-ico { display: none; }
@media (min-width: 361px) { .char-modal-secondary .cm-ico { display: inline; } }
.char-modal-secondary .modal-btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
}
.char-modal-body { padding-top: 0; scroll-behavior: smooth; }
/* 分段条：粘在正文顶部，只做跳转 + 高亮 */
.cm-tabs {
position: sticky; top: 0; z-index: 2;
display: flex; gap: 6px;
margin: 0 -20px 4px; padding: 10px 20px;
background: var(--bg);
border-bottom: 1px solid var(--outline);
}
@media (max-width: 640px) { .cm-tabs { margin: 0 -16px 4px; padding: 8px 16px; } }
.cm-tab {
border: 1px solid var(--outline); background: var(--surface);
color: var(--on-surface-variant);
padding: 6px 14px; border-radius: 999px;
font-size: 13px; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.cm-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cm-form { gap: 0; margin-top: 0; }
.cm-sec { padding: 16px 0 8px; }
.cm-sec + .cm-sec { border-top: 1px dashed var(--outline); }
.char-modal-body .cm-sec > .sec-label { margin-top: 0; }
/* 头部：立绘与名字并排 */
.cm-hero { display: flex; gap: 14px; align-items: flex-start; }
.cm-hero-fields { flex: 1; min-width: 0; }
.cm-hero-fields .cf:first-child { margin-top: 0; }
/* 立绘区：预览占主位，「上传」缩成一条小按钮挂在旁边（2026-10-02）。
以前预览被套在上传按钮里（嵌套 button，非法），点击全被上传抢走。 */
.cm-hero-art { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 200px; flex-shrink: 0; }
.cm-art-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 38px; padding: 0 12px; border: 1px dashed var(--outline);
border-radius: 10px; background: none; color: var(--on-surface-variant);
font: inherit; font-size: 13px; cursor: pointer;
}
.cm-art-btn:hover { border-color: var(--primary); color: var(--primary); }
.cm-art-up { font-size: 14px; }
/* 没有立绘时，预览框本身提示「点这里上传」 */
.cm-hero-art .art-preview:not(.has) { cursor: pointer; }
.cm-hero-art .art-preview:not(.has)::before {
content: "还没有立绘\A点这里上传"; white-space: pre;
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
display: flex; align-items: center; justify-content: center; text-align: center;
font-size: 12px; line-height: 1.7; color: var(--on-surface-variant);
}
.cm-sec .chips { margin-top: 10px; }
/* 字段：标签在上、计数与「展开」在右 */
.cf { margin-top: 14px; }
.cf-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cf-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--on-bg); }
.cf-count { font-size: 11px; color: var(--on-surface-variant); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-count.warn { color: var(--tertiary); }
.cf-count.full { color: var(--error); }
.cf-expand {
border: 0; background: none; cursor: pointer;
font-size: 12px; color: var(--primary);
padding: 4px 2px; margin: -4px 0;
}
.cf-hint { font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; }
.cf-over { font-size: 11px; color: var(--tertiary); margin-top: 2px; }
.char-modal-body .cf .field { margin-top: 0; }
textarea.field { resize: vertical; line-height: 1.7; display: block; }
textarea.field.autogrow { resize: none; overflow-y: auto; max-height: 55vh; max-height: 55dvh; }
/* 「我在故事里」折叠段 */
.cm-fold > summary {
list-style: none; cursor: pointer;
display: flex; align-items: baseline; gap: 10px;
}
.cm-fold > summary::-webkit-details-marker { display: none; }
.cm-fold > summary .sec-label { margin: 0; }
.cm-fold > summary::after {
content: "›"; margin-left: auto; font-size: 18px; line-height: 1;
color: var(--on-surface-variant); transition: transform .2s;
}
.cm-fold[open] > summary::after { transform: rotate(90deg); }
.cm-fold-sub { font-size: 12px; color: var(--on-surface-variant); }
/* 全屏写作面板 */
.cm-focus {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 120;
display: flex; flex-direction: column;
background: var(--bg);
animation: modal-fade .15s ease-out;
}
.cm-focus-head {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
border-bottom: 1px solid var(--outline);
}
.cm-focus-title { flex: 1; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--on-bg); }
.cm-focus-done { min-height: 36px; padding: 6px 18px; }
.cm-focus-input {
flex: 1; width: 100%; max-width: 760px; margin: 0 auto;
border: 0; outline: none; resize: none;
background: transparent; color: var(--on-bg);
font-size: 16px; line-height: 1.85;
padding: 16px;
}
.cm-focus-input::placeholder { color: var(--on-surface-variant); }
.cm-focus-note {
font-size: 12px; color: var(--on-surface-variant);
padding: 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom));
border-top: 1px solid var(--outline);
}
.cm-focus-note:empty { display: none; }
.cm-focus-note.over { color: var(--tertiary); }
@media (prefers-reduced-motion: reduce) {
.cm-focus { animation: none; }
.char-modal-body { scroll-behavior: auto; }
}
/* ---------- 世界 ---------- */
.world-clock {
text-align: center; padding: 22px;
background: var(--surface-variant);
border: 1px solid var(--outline); border-radius: 12px;
}
.world-day {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
color: var(--primary);
}
.world-time {
font-family: var(--font-display); font-size: 42px; margin: 8px 0 6px;
}
/* ---------- 表单卡 ---------- */
.form-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* ---------- 设置页 ---------- */
.setting-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 16px; font-size: 14px;
}
.setting-group {
background: var(--surface-variant);
border: 1px solid var(--outline); border-radius: 12px;
overflow: hidden;
}
.setting-group .setting-row + .setting-row { border-top: 1px solid var(--outline); }
/* 心动开关：粉渐变小爱心（纯爱模式的加料项） */
.heart-ic {
width: 36px; height: 36px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
color: #fff;
background: linear-gradient(135deg, #ff9eb5 0%, #f43f6e 100%);
box-shadow: 0 4px 12px rgba(244, 63, 110, .35);
}
.heart-row.on .heart-ic { animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
12% { transform: scale(1.14); }
24% { transform: scale(1); }
36% { transform: scale(1.08); }
48% { transform: scale(1); }
}
.heart-row .switch.on { background: linear-gradient(135deg, #ff7ba9, #f43f6e); }
.setting-row.heart-row.disabled { opacity: .6; }
/* 生日三段输入：年月日横排，各端长相一致（不用原生 date 控件） */
.bdate-row { display: flex; align-items: center; gap: 6px; }
.bdate-row .field { padding-left: 8px; padding-right: 8px; }
.bdate-unit { flex: none; font-size: 13px; color: var(--on-surface-variant); }
/* 心动确认弹窗：顶部粉光带 + 跳动大爱心 + 渐变确认钮 */
.modal-card.heart-modal { position: relative; overflow: hidden; border: none; padding: 26px 22px 20px; text-align: center; }
.modal-card.heart-modal::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 84px;
background: linear-gradient(135deg, #ffe3ec 0%, #ffc9da 45%, #f6a9c6 100%);
}
.heart-modal-hero {
position: relative; z-index: 1;
width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: #fff;
background: linear-gradient(135deg, #ff9eb5 0%, #f43f6e 100%);
box-shadow: 0 10px 24px rgba(244, 63, 110, .45), 0 0 0 8px rgba(244, 63, 110, .12);
animation: heartbeat 1.6s ease-in-out infinite;
}
.heart-modal-title { font-size: 18px; }
.heart-modal .modal-msg { font-size: 12.5px; }
.heart-modal .conn-label { justify-content: center; margin-top: 14px; }
.heart-modal .bdate-row .field { border-radius: 12px; padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
.heart-modal .modal-actions { justify-content: stretch; margin-top: 20px; }
.heart-modal .modal-actions .btn { flex: 1; }
.btn.heart-go {
background: linear-gradient(135deg, #ff7ba9, #f43f6e);
border: none; color: #fff;
box-shadow: 0 6px 16px rgba(244, 63, 110, .4);
}
.btn.heart-go:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
.heart-modal-hero { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.heart-row.on .heart-ic { animation: none; }
}
.avatar {
width: 64px; height: 64px; border-radius: 50%;
background: var(--primary); color: var(--on-primary);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 26px;
margin: 0 auto 12px;
}
/* ==========================================================================
编辑连接（LLM 配置页）
========================================================================== */
.conn-header {
display: flex; align-items: center; flex-shrink: 0;
padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
border-bottom: 1px solid var(--outline);
}
.conn-back {
width: 42px; height: 42px;
background: none; border: none;
font-size: 20px; color: var(--on-bg);
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background .15s ease;
}
.conn-back:hover, .conn-back:active {
background: var(--surface-variant);
}
.conn-title {
flex: 1; text-align: center;
font-family: var(--font-display); font-size: 17px; font-weight: 600;
margin-right: 42px; /* 平衡左侧返回键宽度 */
}
.conn-label {
display: flex; justify-content: space-between; align-items: baseline;
margin: 20px 2px 8px;
font-size: 13px; color: var(--on-bg);
}
.conn-hint { font-size: 11px; color: var(--on-surface-variant); }
.vendor-row {
display: flex; gap: 10px;
overflow-x: auto; padding: 2px 2px 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.vendor-row::-webkit-scrollbar { display: none; }
.vendor-tile {
min-width: 84px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: var(--surface);
border: 1px solid var(--outline); border-radius: 14px;
padding: 13px 8px 11px;
color: inherit;
cursor: pointer;
transition: all .15s ease;
}
.vendor-tile:hover {
border-color: var(--primary);
background: var(--surface-variant);
}
.vendor-tile.active {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary);
background: var(--surface-variant);
}
.vendor-logo {
width: 38px; height: 38px; border-radius: 10px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .08);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.vendor-logo img {
width: 22px; height: 22px;
object-fit: contain;
display: block;
-webkit-user-drag: none;
}
.vendor-name { font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--on-bg); }
/* ---- 滚动可见性提示（scanScrollHints）：边缘渐隐 + 细进度条，横竖通用 ---- */
.shint-host {
position: relative;
}
.shint {
position: absolute;
pointer-events: none;
z-index: 2;
}
.shfade {
position: absolute;
opacity: 0;
transition: opacity .15s ease;
}
.shfade.l { left: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, var(--bg) 15%, transparent); }
.shfade.r { right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(270deg, var(--bg) 15%, transparent); }
.shfade.t { top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(180deg, var(--bg) 15%, transparent); }
.shfade.b { bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(0deg, var(--bg) 15%, transparent); }
.shfade.show { opacity: 1; }
.shrail {
position: absolute;
display: none;
border-radius: 3px;
background: var(--surface-variant);
}
.shrail.x { left: 6px; right: 6px; bottom: 2px; height: 3px; }
.shrail.y { top: 6px; bottom: 6px; right: 2px; width: 3px; }
.shint.has-x .shrail.x { display: block; }
.shint.has-y .shrail.y { display: block; }
.shthumb {
position: absolute;
border-radius: 3px;
background: var(--on-surface-variant);
opacity: .45;
}
.shrail.x .shthumb { top: 0; left: 0; height: 100%; min-width: 24px; }
.shrail.y .shthumb { left: 0; top: 0; width: 100%; min-height: 24px; }
.conn-card {
margin-top: 16px;
background: var(--surface);
border: 1px solid var(--outline);
border-radius: 14px;
padding: 16px;
}
.input-wrap { position: relative; display: flex; }
.input-wrap .field { padding-right: 46px; }
.input-adorn {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: none; border: none;
color: var(--on-surface-variant); font-size: 15px;
pointer-events: none;
}
button.input-adorn { pointer-events: auto; cursor: pointer; }
.warn-line {
font-size: 12px; color: #C77E1F;
margin-top: 10px; min-height: 16px;
}
.test-btn {
width: 100%; justify-content: center;
margin-top: 20px;
background: transparent;
border: 1.5px solid var(--primary); color: var(--primary);
}
.test-result {
text-align: center;
font-family: var(--font-mono); font-size: 12px;
margin-top: 8px; min-height: 16px;
}
.conn-footer {
display: flex; gap: 12px;
padding: 12px 16px max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--outline);
background: var(--bg);
}
/* ==========================================================================
全新设置页与 LLM 连接页样式（Notion / Apple 质感）
========================================================================== */
/* 设置分区小标题 */
.settings-section-title {
font-size: 12px;
font-weight: 600;
color: var(--on-surface-variant);
letter-spacing: 0.5px;
margin: 22px 6px 8px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.settings-section-title:first-child {
margin-top: 6px;
}
/* 设置卡片容器 */
.settings-card {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: 16px;
overflow: hidden;
margin-bottom: 8px;
}
.settings-card .setting-row + .setting-row,
.settings-card .settings-item + .settings-item,
.settings-card .setting-row + .settings-item,
.settings-card .settings-item + .setting-row,
.settings-card .setting-theme-row + .setting-row,
.settings-card .setting-row + .setting-theme-row {
border-top: 1px solid var(--outline);
}
/* 主题分段选择行 */
.setting-theme-row {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.setting-theme-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
color: var(--on-bg);
}
/* 点击型设置行（关于、教程、导出、退出等） */
.settings-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
font-size: 14px;
color: var(--on-bg);
background: transparent;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.settings-item:hover {
background: var(--surface-variant);
}
.settings-item:active {
background: var(--surface-variant);
opacity: 0.85;
}
.settings-item-icon {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--surface-variant);
color: var(--on-surface-variant);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease;
}
.settings-item-main {
flex: 1;
min-width: 0;
}
.settings-item-title {
font-size: 14px;
font-weight: 500;
color: var(--on-bg);
}
.settings-item-sub {
font-size: 11px;
color: var(--on-surface-variant);
margin-top: 2px;
line-height: 1.45;
}
.settings-item-right {
display: flex;
align-items: center;
gap: 6px;
color: var(--on-surface-variant);
font-size: 13px;
flex-shrink: 0;
}
.settings-item.danger .settings-item-title {
color: var(--error);
}
.settings-item.danger .settings-item-icon {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
}
/* LLM 连接页提示条 */
.conn-banner {
background: var(--surface-variant);
border: 1px solid var(--outline);
border-radius: 14px;
padding: 12px 14px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--on-surface-variant);
line-height: 1.6;
margin: 6px 0 16px;
}
.conn-banner-icon {
flex-shrink: 0;
margin-top: 2px;
color: var(--primary);
}
/* LLM 表单分组卡片 */
.conn-field-group {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: 16px;
overflow: hidden;
margin-bottom: 8px;
}
.conn-field-row {
display: flex;
align-items: center;
padding: 11px 16px;
min-height: 52px;
gap: 12px;
}
.conn-field-row + .conn-field-row {
border-top: 1px solid var(--outline);
}
.conn-field-label {
width: 76px;
flex-shrink: 0;
font-size: 14px;
font-weight: 500;
color: var(--on-surface-variant);
}
.conn-field-input-wrap {
flex: 1;
display: flex;
align-items: center;
position: relative;
min-width: 0;
}
.conn-field-input {
width: 100%;
border: none;
background: transparent;
padding: 6px 0;
font-size: 15px;
color: var(--on-bg);
outline: none;
font-family: inherit;
}
.conn-field-input::placeholder {
color: var(--on-surface-variant);
opacity: 0.5;
}
.conn-field-adorn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--on-surface-variant);
flex-shrink: 0;
padding: 0;
border-radius: 8px;
}
button.conn-field-adorn {
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
button.conn-field-adorn:hover {
background: var(--surface-variant);
color: var(--on-bg);
}
/* 模型管理卡片 */
.conn-model-card {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: 16px;
padding: 16px;
margin-bottom: 8px;
}
.conn-model-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.conn-model-title {
font-size: 14px;
font-weight: 500;
color: var(--on-bg);
}
.conn-model-sub {
font-size: 11px;
color: var(--on-surface-variant);
margin-top: 2px;
}
.conn-model-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 8px;
background: var(--surface-variant);
border: 1px solid var(--outline);
font-family: var(--font-mono);
font-size: 12px;
color: var(--primary);
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.conn-model-chips {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 连通性测试卡片 */
.conn-test-card {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 8px;
}
.conn-test-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.conn-test-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 10px;
border: 1px solid var(--primary);
background: transparent;
color: var(--primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.conn-test-btn:hover {
background: var(--surface-variant);
}
.conn-test-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.conn-test-pill {
font-size: 12px;
font-family: var(--font-mono);
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 8px;
background: var(--surface-variant);
border: 1px solid var(--outline);
}
/* 安全隐私说明条 */
.conn-security-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: var(--on-surface-variant);
line-height: 1.6;
margin: 14px 4px 10px;
opacity: 0.85;
}
.conn-security-note svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--on-surface-variant);
}
/* 底部文学寄语页脚 */
.profile-quote-foot {
text-align: center; margin-top: 20px; padding: 0 16px 8px;
}
.profile-quote-text {
font-size: 12px; color: var(--on-surface-variant); opacity: .7; letter-spacing: .04em;
}
.profile-quote-ver {
font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); opacity: .45; margin-top: 4px;
}
/* 性别徽标：极简素雅微标签，与字标和暗色/亮色背景协调 */
.gender-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 500;
padding: 1px 7px;
border-radius: 999px;
background: var(--surface-variant);
color: var(--on-surface-variant);
border: 1px solid var(--outline);
line-height: 1.4;
letter-spacing: .02em;
vertical-align: middle;
}
/* ---------- 组件库 · ui-*（js/modules/ui-kit.js；2026-09-27 起） ----------
只吃令牌。分组 = 小标题 + 一张卡；行 ≥ 56px 高、整行可点；数字条 = 一张卡里横排。 */
.ui-group { display: flex; flex-direction: column; gap: 8px; }
.ui-group-title {
font-size: var(--fs-meta); font-weight: 500;
color: var(--on-surface-variant);
letter-spacing: .06em;
padding: 0 4px;
}
.ui-group-body {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: var(--r-card);
overflow: hidden;
}
.ui-row {
display: flex; align-items: center; gap: 12px;
width: 100%; min-height: 56px;
padding: 10px 16px;
background: none; border: 0; text-align: left;
font: inherit; color: var(--on-bg);
-webkit-user-select: none; user-select: none;
}
button.ui-row, summary.ui-row { cursor: pointer; transition: background-color .12s ease; }
button.ui-row:active, summary.ui-row:active { background: var(--surface-variant); }
@media (hover: hover) {
button.ui-row:hover, summary.ui-row:hover { background: var(--surface-variant); }
}
.ui-row + .ui-row { border-top: 1px solid var(--outline); }
.ui-row-icon {
width: 32px; height: 32px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: var(--r-ctl);
background: var(--surface-variant);
color: var(--on-surface);
}
.ui-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-row-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.35; }
.ui-row-sub {
font-size: var(--fs-meta); color: var(--on-surface-variant); line-height: 1.4;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-row-value {
flex-shrink: 0; max-width: 40%;
font-size: 13px; color: var(--on-surface-variant);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-row-chev { flex-shrink: 0; display: flex; color: var(--on-surface-variant); opacity: .7; margin-right: -4px; }
.ui-row.danger .ui-row-title, .ui-row.danger .ui-row-icon { color: var(--error); }
.ui-stats {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: var(--surface);
border: 1px solid var(--outline);
border-radius: var(--r-card);
overflow: hidden;
}
.ui-stat {
display: flex; flex-direction: column; align-items: center; gap: 2px;
min-height: 64px; padding: 12px 4px;
background: none; border: 0; font: inherit; color: var(--on-bg);
justify-content: center;
}
.ui-stat + .ui-stat { border-left: 1px solid var(--outline); }
button.ui-stat { cursor: pointer; transition: background-color .12s ease; }
button.ui-stat:active { background: var(--surface-variant); }
.ui-stat-num {
font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.ui-stat-label { font-size: 11px; color: var(--on-surface-variant); letter-spacing: .04em; }
/* 骨架占位：与真实版面同形，数据回来不跳版 */
.me-skel {
display: block;
background: linear-gradient(90deg, var(--surface-variant) 0%, var(--surface) 50%, var(--surface-variant) 100%);
background-size: 200% 100%;
animation: me-skel 1.2s ease-in-out infinite;
border-radius: var(--r-ctl);
}
@keyframes me-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* ---------- 我的页 v2（样板页 · 2026-09-27） ----------
上半「扉页」讲你是谁（大字名字、人设引语、四个数字），下半是能做的事。 */
.me-shell #app-body { padding: 0; }
.me-page { display: flex; flex-direction: column; min-height: 100%; }
.me-hero {
padding: calc(20px + env(safe-area-inset-top)) 20px 0;
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--outline);
}
.me-hero-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.me-kicker {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
color: var(--primary);
}
.me-edit {
border: 1px solid var(--outline); background: var(--bg);
color: var(--on-surface); font: inherit; font-size: var(--fs-meta);
padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.me-edit:active { background: var(--surface-variant); }
.me-id {
display: flex; align-items: center; gap: 16px;
width: 100%; margin-top: 18px; padding: 0;
border: 0; background: none; text-align: left; font: inherit; color: var(--on-bg);
cursor: pointer;
}
.me-avatar {
width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--surface-variant) center / cover no-repeat;
border: 1px solid var(--outline);
font-family: var(--font-display); font-size: 28px; color: var(--on-surface-variant);
}
.me-id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.me-name {
font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15;
letter-spacing: .02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-tags { display: flex; align-items: center; gap: 6px; min-width: 0; }
.me-tag {
flex-shrink: 0;
font-size: 11px; line-height: 1.6; padding: 0 8px;
border-radius: 999px;
background: var(--surface-variant); color: var(--on-surface-variant);
}
.me-tag.accent { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.me-mail {
min-width: 0; font-size: var(--fs-meta); color: var(--on-surface-variant);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 人设引语：茧丝竖线（本页唯一的装饰手势） */
.me-quote {
display: block; width: 100%; margin-top: 18px;
padding: 2px 0 2px 14px;
border: 0; border-left: 3px solid var(--primary);
background: none; text-align: left; cursor: pointer;
font-family: var(--font-display); font-size: 15px; line-height: 1.7;
color: var(--on-surface);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.me-quote.empty { color: var(--primary); }
.me-numbers {
display: grid; grid-template-columns: repeat(4, 1fr);
margin: 22px -20px 0;
border-top: 1px solid var(--outline);
}
.me-num {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 14px 0 16px;
border: 0; background: none; font: inherit; color: var(--on-bg); cursor: pointer;
}
.me-num + .me-num { border-left: 1px solid var(--outline); }
.me-num:active { background: var(--surface-variant); }
.me-num-n {
font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums;
}
.me-num-l { font-size: 11px; letter-spacing: .12em; color: var(--on-surface-variant); }
.me-sections { display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 8px; }
/* 字数：一个大数字当题眼 */
.me-words {
background: var(--surface);
border: 1px solid var(--outline);
border-radius: var(--r-card);
overflow: hidden;
}
.me-words > summary {
list-style: none; cursor: pointer;
display: flex; flex-direction: column; gap: 4px;
padding: 18px 18px 16px;
}
.me-words > summary::-webkit-details-marker { display: none; }
.me-words-kicker { font-size: var(--fs-meta); color: var(--on-surface-variant); }
.me-words-big { display: flex; align-items: baseline; gap: 2px; }
.me-words-n {
font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.1;
color: var(--on-bg); font-variant-numeric: tabular-nums;
}
.me-words-u { font-family: var(--font-display); font-size: 17px; color: var(--on-surface); }
.me-words-sub {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-meta); color: var(--on-surface-variant);
}
.me-words-more { margin-left: auto; color: var(--primary); }
.me-words-more::after { content: " ›"; display: inline-block; transition: transform .2s ease; }
.me-words[open] .me-words-more::after { transform: rotate(90deg); }
.me-words-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--outline);
}
.me-words-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; }
.me-words-cell:nth-child(n + 4) { border-top: 1px solid var(--outline); }
.me-words-cell:not(:nth-child(3n + 1)) { border-left: 1px solid var(--outline); }
.me-words-cell-n { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.me-words-cell-l { font-size: 11px; color: var(--on-surface-variant); }
/* ---------- 星尘织茧榜：卡片 + 榜单页 ---------- */
.dust-medal {
width: 52px; height: 52px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1.5px solid var(--primary);
box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 60px color-mix(in srgb, var(--primary) 12%, transparent);
font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--primary);
}
.dust-medal.lg { width: 88px; height: 88px; font-size: 38px; border-width: 2px; box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 80px color-mix(in srgb, var(--primary) 12%, transparent); }
.dust-bar {
display: block; height: 4px; border-radius: 2px;
background: var(--surface-variant); overflow: hidden;
}
.dust-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--primary); }
.dust-card {
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--outline));
border-radius: var(--r-card);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)) 0%, var(--surface) 60%);
overflow: hidden;
}
.dust-card-main {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 18px 14px 16px 16px;
border: 0; background: none; text-align: left; font: inherit; color: var(--on-bg); cursor: pointer;
}
.dust-card-main:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.dust-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dust-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--primary); }
.dust-tier { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.dust-card-body .dust-bar { margin-top: 4px; }
.dust-next { font-size: var(--fs-meta); color: var(--on-surface-variant); }
.dust-rank { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.dust-rank b { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--on-bg); }
.dust-rank small { font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; }
.dust-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 10px 8px 16px;
border-top: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--outline));
}
.dust-foot-stat { font-size: var(--fs-meta); color: var(--on-surface-variant); }
.dust-cta {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 0 14px;
border: 0; border-radius: 999px;
background: var(--primary); color: var(--on-primary);
font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.dust-cta:active { opacity: .85; }
.app-body.dust-page { padding: 0; }
.dust-wrap { display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 28px; max-width: 560px; margin: 0 auto; }
.dust-hero {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 28px 20px 22px;
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--outline));
border-radius: var(--r-card);
background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--primary) 10%, var(--surface)) 0%, var(--surface) 70%);
}
.dust-hero-tier { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 14px; }
.dust-hero-rank { font-size: 13px; color: var(--on-surface-variant); margin-top: 4px; letter-spacing: .06em; }
.dust-hero-prog { width: 100%; margin-top: 20px; text-align: left; }
.dust-hero-prog-head {
display: flex; justify-content: space-between; gap: 12px;
font-size: var(--fs-meta); color: var(--on-surface); margin-bottom: 8px;
}
.dust-hero-count { font-family: var(--font-mono); color: var(--primary); flex-shrink: 0; }
.dust-cta-lg { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; }
.dust-steps {
list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dust-steps li {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
padding: 12px 6px;
border: 1px solid var(--outline); border-radius: var(--r-ctl);
background: var(--surface);
}
.dust-step-n {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 11px;
background: var(--surface-variant); color: var(--primary);
margin-bottom: 4px;
}
.dust-step-t { font-size: 13px; font-weight: 600; }
.dust-step-s { font-size: 11px; color: var(--on-surface-variant); }
.dust-board { list-style: none; }
.dust-board-row {
display: flex; align-items: center; gap: 12px;
min-height: 56px; padding: 8px 16px;
}
.dust-board-row + .dust-board-row { border-top: 1px solid var(--outline); }
.dust-board-rank {
width: 28px; flex-shrink: 0; text-align: center;
font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--on-surface-variant);
}
.dust-board-row.top .dust-board-rank { color: var(--primary); font-size: 22px; }
.dust-board-row.me { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.dust-board-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dust-board-name {
display: flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dust-board-tier { font-size: 11px; color: var(--on-surface-variant); }
.dust-board-score { flex-shrink: 0; font-size: 12px; color: var(--on-surface-variant); }
.dust-board-score b { font-family: var(--font-display); font-size: 17px; color: var(--on-bg); }
.dust-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--on-surface-variant); }
.dust-ladder { list-style: none; padding: 6px 0; position: relative; }
.dust-ladder::before {
content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px;
width: 2px; background: var(--outline);
}
.dust-ladder li {
position: relative;
display: flex; align-items: center; gap: 10px;
min-height: 48px; padding: 6px 16px;
}
.dust-ladder-dot {
width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
border: 2px solid var(--outline); background: var(--bg);
position: relative; z-index: 1;
}
.dust-ladder li.reached .dust-ladder-dot { border-color: var(--primary); background: var(--primary); }
.dust-ladder li.cur .dust-ladder-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.dust-ladder-roman { width: 22px; font-family: var(--font-display); font-size: 15px; color: var(--on-surface-variant); }
.dust-ladder-name { font-size: 14px; }
.dust-ladder li.cur .dust-ladder-name { font-weight: 700; color: var(--primary); }
.dust-ladder li:not(.reached) .dust-ladder-name { color: var(--on-surface-variant); }
.dust-ladder-min { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); }
.dust-contact { text-align: center; font-size: 11px; color: var(--on-surface-variant); opacity: .8; }
.dust-error { align-items: center; text-align: center; padding-top: 60px; }
/* ---------- 个人资料页 v2（2026-09-27，与「我的」页同一套视觉） ---------- */
.app-body.acc-body { padding: 0; }
.acc-hero {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 24px 20px 20px;
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--outline);
}
.acc-avatar-btn { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.acc-avatar {
width: 96px; height: 96px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--surface-variant) center / cover no-repeat;
border: 1px solid var(--outline);
font-family: var(--font-display); font-size: 36px; color: var(--on-surface-variant);
}
.acc-avatar-badge {
position: absolute; right: 2px; bottom: 2px;
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--primary); color: var(--on-primary);
border: 2px solid var(--bg);
}
.acc-avatar-actions { display: flex; gap: 16px; }
.acc-link {
border: 0; background: none; font: inherit; font-size: 13px; color: var(--primary);
padding: 6px 2px; cursor: pointer;
}
.acc-link.muted { color: var(--on-surface-variant); }
.acc-sections { display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 24px; max-width: 640px; margin: 0 auto; width: 100%; }
.acc-fields { padding: 2px 16px 16px; }
.acc-fields > .cf:first-child { margin-top: 12px; }
.acc-seg { display: flex; }
.acc-seg .seg-btn { min-height: 38px; }
.acc-note { font-size: var(--fs-meta); line-height: 1.6; color: var(--on-surface-variant); padding: 0 4px; }
.acc-email {
display: flex; align-items: center; gap: 12px;
min-height: 56px; padding: 10px 16px;
border-top: 1px solid var(--outline);
}
.acc-email .cf-label { flex: 0 0 auto; }
.acc-email-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.acc-email-addr {
min-width: 0; font-size: 13px; color: var(--on-surface);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-email-status { flex-shrink: 0; font-size: 11px; color: var(--on-surface-variant); }
.acc-email-status.ok { color: var(--tertiary); }
.acc-email-status.warn { color: var(--error); }
.acc-chip {
flex-shrink: 0; min-height: 32px; padding: 0 12px;
border: 1px solid var(--primary); border-radius: 999px;
background: none; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer;
}
/* 「角色会这样认识你」：茧丝竖线（本页唯一的装饰手势） */
.acc-preview {
padding: 14px 16px 14px 18px;
border-left: 3px solid var(--primary);
border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.acc-preview-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--primary); margin-bottom: 8px; }
.acc-preview-body { display: flex; flex-direction: column; gap: 6px; }
.acc-preview-body p { font-family: var(--font-display); font-size: 14px; line-height: 1.7; color: var(--on-bg); overflow-wrap: anywhere; }
.acc-preview-k {
display: inline-block; margin-right: 8px;
font-family: var(--font-sans); font-size: 11px; color: var(--on-surface-variant);
}
.acc-preview-body p.acc-preview-empty { color: var(--on-surface-variant); }
.acc-footer {
flex-shrink: 0;
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom));
border-top: 1px solid var(--outline);
background: var(--bg);
}
.acc-dirty { flex: 1; font-size: var(--fs-meta); color: var(--on-surface-variant); }
.acc-dirty.on { color: var(--primary); }
.acc-dirty.on::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.acc-save { min-width: 132px; min-height: var(--tap); }
.acc-save:disabled { opacity: .45; }
/* ---------- 相遇大厅 v2 视觉（hall-legacy.js，2026-09-27 重做） ----------
问候 → 一张大的「继续上次」→ 另外两卷 → 伙伴墙。底部留出 Ta 悬浮球的位置。 */
.stack.hl { gap: 22px; padding-bottom: 80px; }
.hl-offline {
font-size: var(--fs-meta); color: var(--on-surface-variant);
padding: 8px 12px; border-radius: var(--r-ctl); background: var(--surface-variant);
}
.hl-head { padding-top: 2px; }
.hl-head-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.hl-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--primary); }
.hl-daily {
display: inline-flex; align-items: center; gap: 5px;
min-height: 32px; padding: 0 12px;
border: 1px solid var(--outline); border-radius: 999px;
background: var(--surface); color: var(--on-surface);
font: inherit; font-size: 12px; cursor: pointer;
}
.hl-daily:active { background: var(--surface-variant); }
.hl-daily-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.hl-greet {
margin-top: 12px;
font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.25;
color: var(--on-bg); letter-spacing: .01em;
}
.hl-sub { margin-top: 6px; font-size: 14px; color: var(--on-surface-variant); line-height: 1.6; }
.hl-feature {
position: relative; display: block; width: 100%;
height: 208px; padding: 0; overflow: hidden;
border: 0; border-radius: var(--r-card);
background: var(--surface-variant);
text-align: left; font: inherit; color: #fff; cursor: pointer;
isolation: isolate;
}
.hl-feature-art {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2;
background-size: cover; background-position: center 22%;
}
.hl-feature-art.none {
background: linear-gradient(135deg, #7d4838 0%, #1b1512 100%);
}
.hl-feature-shade {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(10, 8, 6, 0) 30%, rgba(10, 8, 6, .78) 100%);
}
.hl-feature-tag {
position: absolute; top: 14px; left: 14px;
font-size: 11px; letter-spacing: .08em;
padding: 3px 10px; border-radius: 999px;
background: rgba(20, 16, 12, .55); color: #fff;
}
.hl-feature-body {
position: absolute; left: 18px; right: 76px; bottom: 16px;
display: flex; flex-direction: column; gap: 4px;
}
.hl-feature-name {
font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15;
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-feature-meta {
font-size: 13px; color: rgba(255, 255, 255, .86);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-feature-go {
position: absolute; right: 16px; bottom: 16px;
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--primary); color: var(--on-primary);
font-size: 20px;
}
.hl-feature:active .hl-feature-go { transform: scale(.94); }
.hl-sec { display: flex; flex-direction: column; gap: 10px; }
.hl-sec-head { display: flex; align-items: baseline; gap: 8px; }
.hl-sec-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--on-bg); }
.hl-sec-count { font-size: var(--fs-meta); color: var(--on-surface-variant); }
.hl-sec-link {
margin-left: auto; border: 0; background: none; font: inherit;
font-size: 13px; color: var(--primary); cursor: pointer; padding: 4px 0;
}
.hl-recents {
background: var(--surface); border: 1px solid var(--outline);
border-radius: var(--r-card); overflow: hidden;
}
.hl-recent {
display: flex; align-items: center; gap: 12px;
width: 100%; min-height: 60px; padding: 10px 14px;
border: 0; background: none; text-align: left; font: inherit; color: var(--on-bg); cursor: pointer;
}
.hl-recent + .hl-recent { border-top: 1px solid var(--outline); }
.hl-recent:active { background: var(--surface-variant); }
.cavatar.hl-recent-avatar { width: 40px; height: 40px; }
.hl-recent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hl-recent-name { font-size: var(--fs-title); font-weight: 600; }
.hl-recent-title {
font-size: var(--fs-meta); color: var(--on-surface-variant);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-recent-time { flex-shrink: 0; font-size: 11px; color: var(--on-surface-variant); }
.hl-chev { flex-shrink: 0; color: var(--on-surface-variant); opacity: .6; font-size: 18px; }
.hl-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.hl-card.char-card {
display: block; width: 100%; padding: 0;
height: 216px; aspect-ratio: auto;
border-radius: var(--r-card);
text-align: left; font: inherit; color: #fff;
animation: none;
}
@supports (aspect-ratio: 1 / 1) {
.hl-card.char-card { height: auto; aspect-ratio: 3 / 4; }
}
.hl-card.char-card:hover { transform: none; }
.hl-card.char-card:active { transform: scale(.98); }
.hl-card.no-art { background: linear-gradient(160deg, #6a4233 0%, #1b1512 100%); }
.hl-card-initial {
position: absolute; top: 0; right: 0; bottom: 30%; left: 0; inset: 0 0 30% 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 64px; color: rgba(255, 255, 255, .22);
}
.hl-card-shade {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: linear-gradient(180deg, rgba(10, 8, 6, 0) 45%, rgba(10, 8, 6, .8) 100%);
}
.hl-card-new {
position: absolute; top: 10px; left: 10px;
font-size: 10px; letter-spacing: .06em;
padding: 2px 8px; border-radius: 999px;
background: var(--primary); color: var(--on-primary);
}
.hl-card-body {
position: absolute; left: 12px; right: 12px; bottom: 12px;
display: flex; flex-direction: column; gap: 3px;
}
.hl-card-name {
font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2;
text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-card-meta { font-size: 11px; color: rgba(255, 255, 255, .85); }
.hl-card-add {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
height: 216px; padding: 12px;
border: 1.5px dashed var(--outline); border-radius: var(--r-card);
background: none; font: inherit; color: var(--on-surface-variant); cursor: pointer;
}
@supports (aspect-ratio: 1 / 1) {
.hl-card-add { height: auto; aspect-ratio: 3 / 4; }
}
.hl-card-add:active { background: var(--surface-variant); }
.hl-card-add-plus {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--primary); color: var(--primary);
font-size: 24px; line-height: 1; margin-bottom: 6px;
}
.hl-card-add-t { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--on-bg); }
.hl-card-add-s { font-size: 11px; }
.hl-empty {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
padding: 40px 20px;
border: 1.5px dashed var(--outline); border-radius: var(--r-card);
}
.hl-empty-mark { font-size: 28px; color: var(--primary); }
.hl-empty-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.hl-empty-sub { font-size: 13px; color: var(--on-surface-variant); margin-bottom: 8px; }
/* ---------- 角色页 · 群像（characters.js redraw，2026-09-27 重做） ----------
大厅是"去见谁"（大立绘墙），这里是"管理谁"：一行一位，缩略立绘 + 标签 + 性格摘要。 */
.stack.cast { gap: 18px; padding-bottom: 80px; }
.cast-head { padding-top: 2px; }
.cast-title-row { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.cast-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--on-bg); }
.cast-count { font-size: 14px; color: var(--on-surface-variant); }
.cast-sub { margin-top: 6px; font-size: 14px; color: var(--on-surface-variant); line-height: 1.6; }
.cast-actions { display: flex; gap: 10px; }
.cast-create.char-card {
flex: 1; height: auto; min-height: 48px;
display: flex; align-items: center; justify-content: center; gap: 8px;
border: 0; border-radius: var(--r-ctl);
background: var(--primary); color: var(--on-primary);
font: inherit; font-size: 15px; font-weight: 600;
animation: none;
}
.cast-create.char-card:hover { transform: none; box-shadow: none; }
.cast-create.char-card:active { opacity: .88; transform: none; }
.cast-create-plus { font-size: 20px; line-height: 1; }
.cast-import { min-height: 48px; padding: 0 22px; flex-shrink: 0; }
.cast-search { margin-bottom: 2px; }
.cast-list {
background: var(--surface); border: 1px solid var(--outline);
border-radius: var(--r-card); overflow: hidden;
}
.cast-item.char-card {
display: flex; align-items: center; gap: 14px;
width: 100%; height: auto; padding: 12px 14px;
border: 0; border-radius: 0; background: none;
text-align: left; font: inherit; color: var(--on-bg);
animation: none;
/* 「看大图」角标要绝对定位到缩略图上（见 .cast-zoom） */
position: relative;
}
.cast-item.char-card + .cast-item.char-card { border-top: 1px solid var(--outline); }
.cast-item.char-card:hover { transform: none; box-shadow: none; }
@media (hover: hover) { .cast-item.char-card:hover { background: var(--surface-variant); } }
.cast-item.char-card:active { background: var(--surface-variant); transform: none; }
.cast-item.char-card[hidden] { display: none; }
.cast-item.ta { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cast-thumb {
width: 60px; height: 80px; flex-shrink: 0; border-radius: var(--r-ctl);
background: var(--surface-variant) center 18% / cover no-repeat;
border: 1px solid var(--outline);
}
.cast-thumb.none {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #6a4233 0%, #1b1512 100%);
font-family: var(--font-display); font-size: 26px; color: rgba(255, 255, 255, .5);
}
.cast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cast-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cast-name {
font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cast-traits { display: flex; gap: 5px; flex-wrap: wrap; }
.cast-trait {
font-size: 11px; line-height: 1.6; padding: 0 7px;
border-radius: var(--r-ctl); border: 1px solid var(--outline);
color: var(--on-surface-variant);
}
.cast-blurb {
font-size: 12.5px; line-height: 1.55; color: var(--on-surface);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cast-blurb.empty { color: var(--primary); }
.cast-nomatch { padding: 20px; text-align: center; font-size: 13px; color: var(--on-surface-variant); }
/* 导入弹层：底部抽屉 */
.cast-sheet-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100;
display: flex; align-items: flex-end; justify-content: center;
background: rgba(10, 12, 17, .45);
animation: modal-fade .15s ease-out;
}
.cast-sheet {
width: 100%; max-width: 520px;
display: flex; flex-direction: column; gap: 12px;
padding: 8px 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
background: var(--bg); border-radius: var(--r-card) var(--r-card) 0 0;
border: 1px solid var(--outline); border-bottom: 0;
}
.cast-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--outline); margin: 2px auto 4px; }
/* 弹层内容滚到头不再把手势传给页面（手机浏览器的下拉刷新 / 页面回弹会把整个弹层带没） */
.ui-sheet-body { overscroll-behavior: contain; }
.cast-sheet-overlay { overscroll-behavior: contain; }
.cast-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cast-sheet-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; padding: 0 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-sheet-x { flex-shrink: 0; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-surface-variant); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cast-sheet-x:hover { background: var(--surface-variant); }
.cast-sheet-x:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cast-sheet .ui-group-body .ui-row-sub { white-space: normal; }
.cast-sheet-cancel { min-height: var(--tap); }
@media (min-width: 641px) {
.cast-sheet-overlay { align-items: center; }
.cast-sheet { border-radius: var(--r-card); border-bottom: 1px solid var(--outline); }
}
/* ---------- 世界 · 入口 / 纪元 / 入梦书墙（worlds.js，2026-09-27 重做） ----------
入口两扇门代替每次进 tab 都弹的选择窗；列表沿用大厅的问候页头与列表行。 */
.stack.wd { gap: 18px; padding-bottom: 80px; }
.wd-back {
align-self: flex-start; margin-bottom: -6px;
border: 0; background: none; padding: 6px 0;
font: inherit; font-size: 13px; color: var(--on-surface-variant); cursor: pointer;
}
.wd-head { padding-top: 2px; }
.wd-title {
margin-top: 12px;
font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--on-bg);
}
.cast-title-row .wd-title { margin-top: 0; }
.wd-sub { margin-top: 6px; font-size: 14px; color: var(--on-surface-variant); line-height: 1.6; }
.wd-door {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
width: 100%; min-height: 168px; padding: 20px 76px 20px 20px;
border: 0; border-radius: var(--r-card);
text-align: left; font: inherit; color: #fff; cursor: pointer;
}
.wd-door.aeon { background: radial-gradient(120% 140% at 85% 0%, #3b3a63 0%, #1d1c33 45%, #0f0e1a 100%); }
/* 深底白字的装饰渐变一律用定值：color-mix()+var() 在老 WebView 上会整条失效成透明（不是回退到上一条），白字就看不见了 */
.wd-door.dream { background: radial-gradient(120% 140% at 85% 0%, #a3614b 0%, #2a1812 50%, #140c09 100%); }
/* 星点：纯 CSS，两扇门各一层，不加图片 */
.wd-door::before {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; opacity: .5;
background-image:
radial-gradient(1px 1px at 18% 30%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 62% 18%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 78% 62%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 40% 78%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent 51%);
}
.wd-door.dream::before { opacity: .25; }
.wd-door:active { transform: scale(.99); }
.wd-door-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; color: rgba(255, 255, 255, .6); }
.wd-door-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; }
.wd-door-sub { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.wd-door-meta {
margin-top: 6px; font-size: 11px; padding: 2px 10px; border-radius: 999px;
background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9);
}
.wd-door-meta:empty { display: none; }
.wd-door-go {
position: absolute; right: 18px; bottom: 18px;
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .14); font-size: 18px;
}
.wd-door.dream .wd-door-go { background: var(--primary); color: var(--on-primary); }
/* 纪元功能锁（worlds.js lockEraDoor）：整扇压暗、不给按压反馈、右侧换成锁图标。
与 .feat-card 的锁定卡同一套语言（opacity 降 + 锁），但门是深底白字，
所以降透明度而不改字色——改色会在两套渐变背景上出现不可控的对比度。 */
.wd-door.is-locked { opacity: .5; cursor: default; }
.wd-door.is-locked:active { transform: none; }
.wd-door.is-locked .wd-door-go { background: rgba(255, 255, 255, .1); }
.wd-kind {
flex-shrink: 0; min-width: 40px; text-align: center;
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: color-mix(in srgb, #3b3a63 18%, var(--surface-variant)); color: var(--on-surface);
}
.wd-kind.dream { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
/* 纪元：生成 / 创造 */
.wd-gen { flex: 1; min-height: 48px; font-size: 15px; }
.wd-create-toggle { min-height: 48px; padding: 0 18px; flex-shrink: 0; }
.wd-create {
padding: 4px 16px 16px;
border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface);
display: flex; flex-direction: column;
}
.wd-create[hidden] { display: none; }
.wd-create-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-top: 14px; }
.wd-create > .btn { margin-top: 16px; min-height: var(--tap); }
.wd-seg { display: flex; }
.wd-seg .seg-btn { min-height: 36px; }
.wd-empty-note { font-size: 13px; color: var(--on-surface-variant); text-align: center; padding: 12px; }
.wd-list { display: flex; flex-direction: column; gap: 10px; }
.wd-world {
position: relative; display: flex; flex-direction: column; gap: 4px;
width: 100%; padding: 16px 40px 16px 16px;
border: 1px solid var(--outline); border-left: 3px solid #5b5a8f; border-radius: var(--r-card);
background: var(--surface); text-align: left; font: inherit; color: var(--on-bg); cursor: pointer;
}
.wd-world:active { background: var(--surface-variant); }
.wd-world-top { display: flex; align-items: center; gap: 8px; }
.wd-world-day { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--primary); }
.wd-world-mode { font-size: 11px; color: var(--on-surface-variant); }
.wd-world-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.wd-world-desc {
font-size: 13px; line-height: 1.6; color: var(--on-surface);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wd-world-desc.empty { color: var(--on-surface-variant); }
.wd-world-time { font-size: 11px; color: var(--on-surface-variant); margin-top: 2px; }
.wd-world-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
/* 入梦书墙 */
.wd-quota { margin-left: auto; font-size: 12px; color: var(--primary); }
.wd-quota.full { color: var(--on-surface-variant); }
.dream-book-new.wd-book-new {
display: flex; align-items: center; gap: 14px;
padding: 16px; border: 1.5px dashed var(--outline); border-radius: var(--r-card);
}
.wd-book-new .hl-card-add-plus { margin-bottom: 0; flex-shrink: 0; }
.wd-book-new.full .hl-card-add-plus { border-color: var(--outline); color: var(--on-surface-variant); }
.wd-book-new-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wd-book-new-t { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.wd-book-new-s { font-size: 12px; color: var(--on-surface-variant); line-height: 1.5; }
.dream-book-card.wd-book {
padding: 18px 16px 14px;
border: 1px solid var(--outline); border-radius: var(--r-card);
background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 5%, var(--surface)) 0%, var(--surface) 55%);
gap: 8px;
}
.dream-book-card.wd-book.dream-book-mine { border-left: 3px solid var(--primary); }
.wd-book .dream-book-name { font-size: 20px; font-weight: 700; line-height: 1.3; }
.wd-book .dream-book-tagline { font-size: 13px; color: var(--on-surface); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wd-book-cat {
font-size: 11px; padding: 1px 9px; border-radius: 999px;
border: 1px solid var(--primary); color: var(--primary);
}
.wd-book-src { font-size: 11px; color: var(--on-surface-variant); }
.wd-book-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.wd-book-enter { min-height: 40px; padding: 0 22px; flex-shrink: 0; }
.wd-book .dream-book-ops { justify-content: flex-start; padding-top: 8px; border-top: 1px dashed var(--outline); }
/* ---------- 世界详情（openWorld，2026-09-27 重做）：扉页 + 居民 / 日志 / 记忆 三段 ---------- */
.stack.wd-detail { gap: 16px; }
.wd-hero {
position: relative; overflow: hidden; isolation: isolate;
min-height: 240px; padding: 14px 16px 20px;
border-radius: var(--r-card); color: #fff;
display: flex; flex-direction: column; justify-content: space-between;
background: radial-gradient(120% 140% at 85% 0%, #3b3a63 0%, #1d1c33 45%, #0f0e1a 100%);
}
.wd-hero::before {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; opacity: .5;
background-image:
radial-gradient(1px 1px at 18% 30%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 62% 18%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 78% 62%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 40% 78%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent 51%);
}
.wd-hero.has-scene::before { background: linear-gradient(180deg, rgba(8, 8, 12, .35) 0%, rgba(8, 8, 12, .15) 40%, rgba(8, 8, 12, .8) 100%); opacity: 1; }
.wd-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; background: center / cover no-repeat; }
.wd-hero-top { display: flex; justify-content: space-between; gap: 8px; }
.wd-hero-btn {
display: inline-flex; align-items: center; gap: 5px;
min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .14); color: #fff;
font: inherit; font-size: 13px; cursor: pointer;
}
.wd-hero-btn:active { background: rgba(255, 255, 255, .24); }
.wd-hero-body { margin-top: 24px; }
.wd-hero-name {
font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.2;
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.wd-hero-clock { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.wd-hero .world-day { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .75); }
.wd-hero .world-time { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.wd-hero-sub { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.wd-desc { font-family: var(--font-display); font-size: 15px; line-height: 1.9; color: var(--on-surface); padding: 0 4px; }
.wd-tabs {
position: sticky; top: -14px; z-index: 2;
display: flex; gap: 4px; padding: 4px;
border: 1px solid var(--outline); border-radius: 999px; background: var(--bg);
}
.wd-tab {
flex: 1; min-height: 38px; border: 0; border-radius: 999px;
background: none; color: var(--on-surface-variant);
font: inherit; font-size: 14px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.wd-tab.on { background: var(--on-bg); color: var(--bg); font-weight: 600; }
.wd-tab-n { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.wd-pane { display: flex; flex-direction: column; gap: 12px; }
.wd-pane-note { font-size: 12px; color: var(--on-surface-variant); line-height: 1.6; padding: 0 4px; }
.btn.wd-wide { width: 100%; min-height: var(--tap); }
.wd-resident { cursor: default; }
.wd-resident .hl-recent-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wd-pull { display: flex; flex-direction: column; gap: 8px; }
.wd-pull-title { font-size: 12px; color: var(--on-surface-variant); padding: 0 4px; }
.wd-pull-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-pull-chip {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 0 12px 0 4px;
border: 1px dashed var(--outline); border-radius: 999px; background: none;
font: inherit; font-size: 13px; color: var(--on-surface); cursor: pointer;
}
.wd-pull-chip:active { background: var(--surface-variant); }
.cavatar.wd-pull-avatar { width: 28px; height: 28px; font-size: 12px; }
/* 日志：一根竖线串起来的时间线（茧丝竖线的变体） */
.wd-timeline { list-style: none; position: relative; padding-left: 18px; }
.wd-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--outline); }
.wd-timeline li { position: relative; padding: 0 0 16px; }
.wd-timeline li::before {
content: ""; position: absolute; left: -18px; top: 7px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--primary);
}
.wd-timeline-text { font-family: var(--font-display); font-size: 14px; line-height: 1.8; color: var(--on-bg); }
.wd-timeline-time { font-size: 11px; color: var(--on-surface-variant); }
/* 记忆碎片 */
.wd-mem {
padding: 12px 14px 14px;
border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface);
}
.wd-mem.pinned { border-left: 3px solid var(--primary); }
.wd-mem-new { border-style: dashed; }
.wd-mem-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.wd-mem-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--on-surface-variant); text-transform: uppercase; }
.wd-mem-time { margin-left: auto; font-size: 11px; color: var(--on-surface-variant); }
.wd-mem-op {
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: none; color: var(--on-surface-variant); cursor: pointer;
}
.wd-mem-op:active { background: var(--surface-variant); }
.wd-mem-op.danger { color: var(--error); }
.wd-mem-text { font-family: var(--font-display); font-size: 15px; line-height: 1.75; margin-top: 4px; color: var(--on-bg); }
.wd-kws { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wd-kw {
font-size: 11px; padding: 1px 8px; border-radius: var(--r-ctl);
background: var(--surface-variant); color: var(--on-surface-variant);
}
.wd-kw::before { content: "#"; opacity: .6; margin-right: 1px; }
.wd-memform .cf:first-child { margin-top: 4px; }
.wd-memform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wd-memform-actions .btn { min-height: 40px; padding: 0 20px; }
/* 设置弹层 */
.ui-sheet-body { display: flex; flex-direction: column; max-height: 70vh; max-height: min(70vh, 70dvh); max-height: min(70vh, 70dvh, calc(var(--vvh, 100vh) - 150px)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 2px 4px; }
/* 旧 WebView 兜底：这块是滚动区，子项本就该"装不下就滚"，绝不允许被压得比内容还矮
（老引擎会把 flex 子项压扁，内容溢出后互相叠——另一条「字跑到上面去了」的来源）。
flex-shrink:0 在现代引擎上是空操作（自动最小尺寸本来就保着）。 */
.ui-sheet-body > * { flex-shrink: 0; }
.ui-sheet-body > .cf:first-child { margin-top: 0; }
.wd-sheet-actions { margin-top: 16px; }
.wd-sheet-actions .btn { width: 100%; min-height: var(--tap); }
.wd-sheet-sub { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--outline); }
.wd-sheet-sub .btn { flex: 1; min-height: 40px; font-size: 13px; }
.btn.wd-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--outline)); }
/* ---------- 梦境书编辑器（renderDreamBookEditor，2026-09-27 重做版面；字段用 ui-kit 的 uiField） ---------- */
.stack.wdb { padding-bottom: 12px; }
.wdb-form { display: flex; flex-direction: column; gap: 14px; }
.wdb-sec {
padding: 4px 16px 16px;
border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface);
}
.wdb-sec-title {
display: flex; align-items: baseline; gap: 8px;
margin-top: 14px;
font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--on-bg);
}
.wdb-sec-sub { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--on-surface-variant); }
.wdb-sec-meta {
display: flex; justify-content: space-between; align-items: baseline;
margin: 8px 0 10px; font-size: 12px; color: var(--on-surface-variant);
}
.wdb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 380px) { .wdb-grid { grid-template-columns: 1fr; } }
.wdb .dream-rows { margin-bottom: 10px; gap: 12px; }
.wdb .dream-row {
gap: 0; padding: 12px 12px 14px;
border: 1px solid var(--outline); border-radius: var(--r-ctl);
background: var(--bg);
}
.wdb .dream-row .cf { margin-top: 10px; }
.wdb .dream-row-head .field { font-weight: 600; }
.wdb .dream-npc-here { min-height: 34px; padding: 0 12px; font-size: 12px; }
.wdb .dream-npc-here.active { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: var(--primary); }
.wdb-danger:empty { display: none; }
.wdb-danger .btn { width: 100%; min-height: 40px; font-size: 13px; }
/* 固定保存栏：贴在滚动区底部，长表单写到哪都够得着 */
.wdb-savebar {
position: sticky; bottom: -14px; z-index: 3;
display: flex; align-items: center; gap: 12px;
margin: 0 -14px -14px; padding: 10px 14px;
background: var(--bg); border-top: 1px solid var(--outline);
}
@media (min-width: 768px) {
.wdb-savebar { bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px; }
}
.wdb-savebar .dream-status { flex: 1; color: var(--on-surface-variant); }
.wdb-savebar .dream-status:empty { display: block; }
.btn.wdb-save { min-height: var(--tap); padding: 0 24px; }
/* ---------- 记忆 · 梦茧（cocoon.js，2026-09-27 重做） ---------- */
.cc-layers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.cc-layer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; text-align: center; }
.cc-layer + .cc-layer { border-left: 1px solid var(--outline); }
.cc-layer-ic { color: var(--primary); margin-bottom: 4px; display: flex; }
.cc-layer-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.cc-layer-desc { font-size: 11px; color: var(--on-surface-variant); }
.cc-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-card); overflow: hidden; }
.cc-row {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px; border: 0; background: none;
text-align: left; font: inherit; color: var(--on-bg); cursor: pointer;
}
.cc-row + .cc-row { border-top: 1px solid var(--outline); }
.cc-row:active { background: var(--surface-variant); }
.cavatar.cc-row-avatar { width: 48px; height: 48px; font-size: 18px; }
.cc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-row-name { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.cc-row-stat { margin-left: auto; font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--on-surface-variant); white-space: nowrap; }
.cc-row-bond {
font-family: var(--font-display); font-size: 13px; line-height: 1.6; color: var(--on-surface);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-row-bond.empty { color: var(--on-surface-variant); }
.cc-row-note { font-size: 11px; color: var(--on-surface-variant); line-height: 1.5; }
/* 详情扉页：立绘 + 名字 + 织茧 */
.cc-back { margin-bottom: -6px; }
.stack.cc-unfurl { gap: 14px; margin-top: 0; }
.cc-hero {
position: relative; overflow: hidden; isolation: isolate;
min-height: 220px; border-radius: var(--r-card);
display: flex; align-items: flex-end;
background: #1b1512; color: #fff;
}
.cc-hero-art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; background: center 18% / cover no-repeat; }
.cc-hero-art.none { background: radial-gradient(120% 140% at 85% 0%, #955845 0%, #1b1512 70%); }
.cc-hero-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, .1) 20%, rgba(10, 8, 6, .85) 100%); }
.cc-hero-body { width: 100%; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.cc-hero-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
.cc-hero-name { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.cc-hero-stat { font-size: 13px; color: rgba(255, 255, 255, .85); }
.cc-hero-act { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 44px; }
.cc-weave {
flex-shrink: 0; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
background: var(--primary); color: var(--on-primary);
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.cc-weave:disabled { opacity: .7; }
.cc-hero .weave-status { font-size: 12px; color: rgba(255, 255, 255, .9); line-height: 1.5; }
.cc-hero .weave-status.error { color: #ffb4a2; }
.cc-body { display: flex; flex-direction: column; gap: 14px; }
.cc-card, .cc-bond {
padding: 14px 16px 16px;
border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface);
}
.cc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.cc-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--primary); letter-spacing: .04em; }
.cc-card-note { font-size: 11px; color: var(--on-surface-variant); }
.cc-edit {
min-height: 32px; padding: 0 12px; border: 1px solid var(--outline); border-radius: 999px;
background: var(--bg); font: inherit; font-size: 12px; color: var(--on-surface); cursor: pointer;
}
.cc-edit:active { background: var(--surface-variant); }
/* 羁绊引语：茧丝竖线（本页唯一的装饰手势） */
.cc-bond .bond-text {
margin-top: 10px; padding: 2px 0 2px 14px;
border-left: 3px solid var(--primary);
font-family: var(--font-display); font-size: 16px; line-height: 1.85; color: var(--on-bg);
}
.cc-bond .bond-text.empty { color: var(--on-surface-variant); font-size: 14px; }
.cc-bond .field, .cc-mind-row .field { margin-top: 10px; }
.cc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cc-actions .btn { min-height: 40px; padding: 0 20px; }
.cc-mind { display: flex; flex-direction: column; gap: 14px; }
.cc-mind-row + .cc-mind-row { padding-top: 14px; border-top: 1px dashed var(--outline); }
.cc-mind-head { display: flex; align-items: center; gap: 8px; }
.cc-mind-label { flex: 1; font-size: 14px; font-weight: 600; }
.cc-mind-text { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--on-surface); }
.cc-mind-text.empty { color: var(--on-surface-variant); }
.cc-mind-bar { height: 3px; margin-top: 10px; border-radius: 2px; background: var(--surface-variant); overflow: hidden; }
.cc-mind-bar > span { display: block; height: 100%; background: var(--primary); }
.cc-branch-seg { margin: 10px 0 8px; }
.cc-note { font-size: 12px; line-height: 1.6; color: var(--on-surface-variant); padding: 0 4px; }
.cc-pane { display: flex; flex-direction: column; gap: 10px; }
.cc-atom-new { display: flex; gap: 8px; }
.cc-atom-new .field { flex: 1; min-width: 0; border-radius: 999px; padding-left: 16px; }
.cc-atom-add {
width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer;
}
.cc-atom-add:disabled { opacity: .5; }
.cc-atom {
display: flex; align-items: flex-start; gap: 4px;
padding: 12px 8px 12px 14px;
border: 1px solid var(--outline); border-radius: var(--r-ctl); background: var(--surface);
}
.cc-atom.fading { opacity: .72; border-style: dashed; }
.cc-atom-main { flex: 1; min-width: 0; }
.cc-atom-text { font-size: 14px; line-height: 1.7; color: var(--on-bg); }
.cc-atom-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--on-surface-variant); }
.cc-fading { padding: 0 6px; border-radius: var(--r-ctl); background: var(--surface-variant); }
.cc-chapter { padding: 14px 10px 14px 16px; border: 1px solid var(--outline); border-radius: var(--r-card); background: var(--surface); }
.cc-chapter-head { display: flex; align-items: center; gap: 8px; }
.cc-chapter-title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.cc-chapter .chapter-summary { margin-top: 6px; padding-right: 6px; font-size: 13.5px; line-height: 1.8; color: var(--on-surface); }
.cc-reset {
align-self: center; margin-top: 8px; min-height: 36px; padding: 0 14px;
border: 0; background: none; font: inherit; font-size: 12px; color: var(--error); opacity: .8; cursor: pointer;
}
/* ---------- 角色名：「名字 · 身份」拆成大字名 + 小字身份（ui-kit 的 uiName） ---------- */
.ui-name { display: flex; flex-direction: column; min-width: 0; }
.ui-name-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-name-sep { display: none; }
.ui-name-role {
font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 1.45;
opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-feature-name .ui-name-role { font-size: 13px; margin-top: 2px; }
.hl-card-name .ui-name-role { font-size: 11px; }
.hl-recent-name .ui-name-role, .cast-name .ui-name-role, .cc-row-name .ui-name-role { color: var(--on-surface-variant); opacity: 1; }
.cc-hero-name .ui-name-role { font-size: 13px; margin-top: 4px; }
.cast-name, .cc-row-name .ui-name { min-width: 0; }
.cc-row-name { align-items: flex-start; }
.cc-row-name .ui-name { flex: 1; }
.cc-row-stat { margin-top: 4px; }
/* ---------- 应用设置（renderSettings，2026-09-27 换皮：分组 = ui-group，行 = ui-row） ---------- */
.stack.st-page { gap: 22px; padding-bottom: 24px; }
.ui-row.ui-switch-row { cursor: default; }
.ui-row.ui-switch-row .setting-sub { font-size: var(--fs-meta); margin-top: 2px; }
.ui-row.setting-row.heart-row { gap: 12px; }
.ui-row.ui-seg-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.ui-seg-row .setting-theme-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-seg-row .seg-control { display: flex; }
.ui-seg-row .seg-btn { min-height: 36px; }
.ui-group-note {
padding: 10px 16px 14px; border-top: 1px solid var(--outline);
font-size: var(--fs-meta); line-height: 1.6; color: var(--on-surface-variant);
}
.st-foot { text-align: center; font-size: 12px; color: var(--on-surface-variant); padding: 0 16px; }
/* 梦境会话里 *……* 的动作 / 旁白描写：去掉星号、颜色退一档 */
.dream-act { color: var(--on-surface-variant); }
.dream-line.npc .dream-act::before { content: "（"; }
.dream-line.npc .dream-act::after { content: "）"; }
@media (prefers-reduced-motion: reduce) {
button.ui-row, button.ui-stat, .me-words-more::after { transition: none; }
.cast-sheet-overlay { animation: none; }
.me-skel { animation: none; }
}
/* 分段选择器：iOS 灵感分段控制，无 emoji，素雅精致 */
.seg-control {
display: inline-flex;
background: var(--surface-variant);
border: 1px solid var(--outline);
border-radius: 10px;
padding: 2.5px;
gap: 2px;
width: 100%;
}
.seg-btn {
flex: 1;
background: transparent;
border: none;
border-radius: 7.5px;
padding: 6.5px 0;
font-size: 13px;
font-weight: 500;
color: var(--on-surface-variant);
cursor: pointer;
text-align: center;
transition: all .15s ease;
}
.seg-btn:active {
transform: scale(0.97);
}
.seg-btn.active {
background: var(--surface);
color: var(--on-bg);
font-weight: 600;
box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.feat-card {
display: flex; align-items: center; gap: 13px;
width: 100%; text-align: left; color: inherit;
background: var(--surface);
border: 1px solid var(--outline); border-radius: 14px;
padding: 15px 16px;
}
.feat-icon {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
background: var(--surface-variant);
display: flex; align-items: center; justify-content: center;
font-size: 17px;
}
.feat-main { flex: 1; min-width: 0; }
.feat-title { font-weight: 600; font-size: 15px; }
.feat-sub {
font-size: 12px; color: var(--on-surface-variant); margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feat-arrow { color: var(--on-surface-variant); }
.ver-foot {
text-align: center;
font-family: var(--font-mono); font-size: 11px;
color: var(--on-surface-variant);
padding: 8px 0 4px;
}
/* 设置宫格 */
.tile-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.tile {
display: flex; flex-direction: column; align-items: center; gap: 9px;
background: var(--surface);
border: 1px solid var(--outline); border-radius: 14px;
padding: 20px 4px 13px;
color: inherit; font-size: 11px;
}
.tile .t-icon { font-size: 20px; line-height: 1; }
.tile:disabled { opacity: .5; }
/* 开关行 */
.setting-main { flex: 1; min-width: 0; }
.setting-sub {
font-size: 11px; color: var(--on-surface-variant);
margin-top: 3px; line-height: 1.55;
}
.switch {
position: relative; flex-shrink: 0;
width: 46px; height: 26px; border-radius: 999px;
background: #C9CFDA; border: none;
transition: background .2s ease;
}
.switch::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
transition: transform .2s ease;
}
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(20px); }
/* ==========================================================================
移动端适配（手机优先的触控体验）
========================================================================== */
@media (max-width: 767px) {
/* 输入类 16px 起，彻底杜绝 iOS Safari 聚焦时强制放大视口导致界面错位 */
input,
textarea,
select,
.field,
.composer textarea,
.ta-composer textarea,
.conn-field-input,
.profile-input,
.plaza-search,
.wx-search input,
.wx-ds-field-input,
.wx-detail-input,
.wx-tr-amount-input,
.wx-tr-note-input,
.wx-rp-amount-input,
.wx-rp-note-input,
.wx-mic-input {
font-size: 16px !important;
}
/* 对话输入框（四套）：在上面「≥16px」的基础上随「对话字号」放大（只放大不缩小：--chat-input-scale = max(1, 缩放)），
写在上一条之后，同为 !important 时后写的赢。 */
.composer textarea,
.ta-composer textarea,
.wx-input,
.dream-input-field {
font-size: calc(16px * var(--chat-input-scale, 1)) !important;
}
.app-header { padding: calc(12px + env(safe-area-inset-top)) 16px 10px; }
.conn-header { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.app-title { font-size: 18px; }
.app-body { padding: 14px 14px 20px; }
.card { padding: 15px 16px; border-radius: 10px; }
/* 触控目标放大 */
.chip { padding: 9px 16px; font-size: 13px; }
.btn { padding: 12px 18px; }
.send-btn { width: 46px; height: 46px; flex-shrink: 0; }
.composer {
position: relative;
bottom: auto;
background: var(--bg);
padding: 10px 12px max(12px, env(safe-area-inset-bottom));
}
body.kb-open .composer,
body.kb-open .ta-composer {
padding-bottom: 8px;
}
/* 小屏输入栏一行 5 控件太挤（水位环+token 小字+图+输入框+发送）：
隐藏 token 小字，点击水位环弹窗照样看完整明细 */
.composer .ctx-tokens { display: none; }
.auth-wrap { padding: 16px; align-items: flex-start; padding-top: calc(12vh + env(safe-area-inset-top)); }
.auth-logo { font-size: 34px; }
.world-time { font-size: 36px; }
}
/* 横屏矮窗口：压缩头部留白（仍保留安全区以避开侧边刘海） */
@media (max-height: 520px) {
.app-header { padding: calc(8px + env(safe-area-inset-top)) 20px 6px; }
.conn-header { padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
}
/* ==========================================================================
桌面网页版（2026-10-10，工单「电脑打开网页，界面小就算了；这个显示问题我直接
没办法选中编辑」）
旧做法：≥768px 且有鼠标时，把整个手机界面塞进一个 390×844 的假手机壳、居中摆在
星空背景上 —— 电脑上内容只剩屏幕中间一小条（1912 宽视口左右各空 761px），
「长按一行可删」只剩右键一个入口，鼠标用户根本不知道怎么管，看起来就是"坏了"。
新做法：**真桌面不套壳**，整站按网页排——左侧导航栏 + 顶部品牌条 + 右侧内容区，
列表转多列、输入区限宽居中、弹层贴着内容区右边走。
判定沿用原来的三重条件（≥768px + hover:hover + pointer:fine）：
iPad 竖屏与手机横屏宽度也 ≥768px，但它们指针粗糙，继续走原来的满屏移动布局。
（display-mode: standalone 的满屏兜底在下面那条 @media 里，保持不变。）
========================================================================== */
/* 三层包装（stage / phone / caption）现在永远只是 display: contents：
桌面上不套壳，手机上等于没有这层。caption 那行说明文字已在 mount() 里删掉。 */
.phone-stage { display: contents; }
.phone { display: contents; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
/* 侧栏宽度。它同时是下面几个"贴内容区右边走"的浮层的左偏移量 */
:root { --side-w: 216px; }
/* ---------- 外壳：左侧导航 + 顶部品牌条 + 右侧内容 ----------
原来的假手机壳（390×844、圆角、星空背景）整个撤掉：桌面上内容只该受
视口宽度约束，不该被一个手机的宽度约束。 */
.app-shell {
display: grid;
grid-template-columns: var(--side-w) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
max-width: 1480px;
margin: 0 auto;
background: var(--bg);
border-left: 1px solid var(--outline);
border-right: 1px solid var(--outline);
}
.app-header {
grid-area: 1 / 1 / 2 / 3;
padding: 16px 26px 14px;
border-bottom: 1px solid var(--outline);
}
.app-title { font-size: 20px; }
.app-body {
grid-area: 2 / 2 / 3 / 3;
padding: 28px 36px 48px;
}
/* 底部 tab 栏 → 左侧导航栏（同一份 DOM，只改排法） */
.app-nav {
grid-area: 2 / 1 / 3 / 2;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 4px;
padding: 20px 14px;
border-top: 0;
border-right: 1px solid var(--outline);
background: var(--surface);
overflow-y: auto;
}
.nav-btn {
flex: 0 0 auto;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
min-height: 44px;
padding: 10px 14px;
border-radius: 10px;
font-size: 14.5px;
letter-spacing: .06em;
}
.nav-btn:hover { background: var(--surface-variant); }
.nav-btn.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* 「我的」上的未读红点：从图标右上角挪到行尾 */
.nav-btn .nav-dot { position: static; margin-left: auto; top: auto; }
/* Ta 沉浸态、卷宗对话满屏（thread-mode，chat.js markThreadShell）：这两种状态都会把
页眉与导航藏起来（display:none），grid 留着就空出那 216px 左列——聊天内容会整体
偏右、左边一条死区。这两种状态下退回单列满宽（对话自己限宽 860 居中）。 */
.app-shell.ta-mode,
.app-shell.thread-mode { display: flex; flex-direction: column; max-width: none; border: 0; }
/* ---------- 内容宽度：别把一行文字拉到 1400px ---------- */
.app-body .stack { max-width: 1080px; margin-inline: auto; width: 100%; }
/* 对话页：消息与输入框限宽居中（阅读行宽） */
.app-body.body-thread .thread-wrap { max-width: 860px; margin: 0 auto; width: 100%; }
/* 入梦会话页：剧本流同样限宽——1190px 一行旁白没法读 */
.app-body .dream-stage { max-width: 860px; margin: 0 auto; width: 100%; }
/* ---------- 列表：一行一条 → 多列卡片 ---------- */
.cast-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
.cast-item.char-card {
border: 1px solid var(--outline);
border-radius: var(--r-card);
background: var(--surface);
}
.cast-item.char-card + .cast-item.char-card { border-top: 1px solid var(--outline); }
.dream-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.acc-sections { max-width: 900px; }
.dust-wrap { max-width: 900px; }
/* ---------- 悬停反馈：手机上只有 :active，桌面补上 ---------- */
.hl-recent:hover { background: var(--surface-variant); }
.dream-book-card:hover { border-color: var(--primary); }
.wd-door:hover { filter: brightness(1.06); }
.sheet-btn:hover { background: var(--surface-variant); }
/* ---------- 弹层与全屏页：贴着内容区右边走，别压住左侧导航 ----------
只在"侧栏可见"时成立：Ta/梦信沉浸页（body[data-ta-mode="1"]）里侧栏是藏掉的，
浮层再缩进 216px 会和内容错开，所以用 body 状态把沉浸态摘出去（回落到默认的 left:0）。 */
body:not([data-ta-mode='1']) .sheet-overlay { left: var(--side-w); }
body:not([data-ta-mode='1']) .wx-as-root { left: var(--side-w); }
body:not([data-ta-mode='1']) .wx-rp-page,
body:not([data-ta-mode='1']) .wx-tr-page { left: var(--side-w); border-radius: 0; box-shadow: none; }
/* ---------- 梦信系沉浸页（keepShell）：微信 UI 按手机宽度设计 ----------
壳还在的时候它们是 390px 框；壳撤了不能跟着拉到 1262px——桌面下居中一条窄列，
两侧留沉浸底色（桌面版微信本来也就是窄列）。ta-fullscreen 的真全屏页（Ta 单聊）
不管：它以前就是全宽，现在也全宽。 */
body:not(.ta-fullscreen)[data-ta-mode='1'] .app-shell.ta-mode .app-body .ta-wechat {
max-width: 430px; margin: 0 auto; width: 100%; height: 100%;
border-left: 1px solid var(--wx-sep); border-right: 1px solid var(--wx-sep);
}
/* 沉浸列里的全屏页（转账/红包）：跟着缩成同一条窄列，别满屏 */
body:not(.ta-fullscreen)[data-ta-mode='1'] .wx-tr-page,
body:not(.ta-fullscreen)[data-ta-mode='1'] .wx-rp-page {
left: 50%; right: auto; transform: translateX(-50%);
width: min(430px, 100%); top: 0; bottom: 0; height: auto;
border-radius: 0; box-shadow: none;
}
/* 沉浸列里的底部动作面板：同样居中收窄（动画要带着 translateX(-50%) 一起走，
否则弹出瞬间会横跳——以前 wx-as-in-desk 就是干这个的，壳撤时误删了，这次补回来，
但只在沉浸列里用；主站的面板已经跟着 .wx-as-root 走了，不需要它） */
@keyframes wx-as-in-desk {
from { transform: translateX(-50%) translateY(40%); opacity: .6; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
body:not(.ta-fullscreen)[data-ta-mode='1'] .wx-action-sheet {
left: 50%; right: auto; width: min(430px, 100%);
transform: translateX(-50%);
animation-name: wx-as-in-desk;
}
/* 通用底部 sheet（梦信「我 → 性别」那类小选择器）：同样居中收窄。
它的动画 sheet-up 只动 translateY，这里要带着 translateX(-50%) 一起走，
否则弹出瞬间会横跳——跟上面 wx-as-in-desk 同一个道理。遮罩本身不用动：
沉浸态下侧栏是藏掉的，全屏遮罩正好当调暗。 */
@keyframes sheet-up-desk {
from { transform: translateX(-50%) translateY(40%); opacity: 0; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
body:not(.ta-fullscreen)[data-ta-mode='1'] .sheet {
left: 50%; right: auto; width: min(430px, 100%);
transform: translateX(-50%);
animation-name: sheet-up-desk;
}
/* Ta / 梦信的悬浮圆：默认位（JS 内联 right:16px）是相对**视口**算的，壳撤掉之后
在超宽屏上它会飘到外壳外面去（1912 宽时悬在内容区右边 136px 的画廊空白里）。
这里贴回内容区右边。用 !important 压内联样式是必须的：这个位置是 JS 内联写的。
拖过之后 JS 会写 left/top + right:auto，left 与 right 同时存在又定宽 ⇒ right 被忽略
（LTR 过约束的标准行为），所以拖拽定位不受影响。
⛔ 必须再套一层 min-width：1480 是外壳宽度上限，比它窄时 (100vw - 1480px)
是负数，直接把球推出屏幕右边。1560 起才有 ≥40px 的画廊值得让。 */
@media (min-width: 1560px) {
.ta-fab { right: calc((100vw - 1480px) / 2 + 16px) !important; }
}
/* Ta 全屏（沉浸态）：外侧留的边距全部让位 */
body.ta-fullscreen .app-shell { border: 0; max-width: none; }
body.ta-fullscreen .app-body { padding: 0; }
}
/* PWA「添加到主屏幕」：无论屏幕多宽一律满屏，绝不套手机壳。
这条是给 iPad / 横屏手机准备的兜底——它们是触屏但带上鼠标（妙控键盘/台前调度）时
可能报 hover:hover，指针条件就兜不住了；而"从主屏幕打开"本来就是 App 形态，不该有壳。 */
@media (display-mode: standalone) {
.phone, .phone-stage { display: contents !important; }
}
/* 每日小记半屏（dailies.js，新旧大厅共用，样式只放这里一份） */
.dailies-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: rgba(38, 34, 42, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 90;
}
.dailies-sheet {
width: 100%;
max-width: 560px;
max-height: 86vh;
display: flex;
flex-direction: column;
background: #FBF7EF;
border-radius: 18px 18px 0 0;
overflow: hidden;
}
.dailies-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 16px 10px 16px;
border-bottom: 1px solid #EBDFC9;
}
.dailies-title { font-size: 16px; font-weight: 700; color: #26222A; }
.dailies-sub { font-size: 11px; color: #8A7B6E; margin-top: 2px; }
.dailies-close { flex-shrink: 0; }
.dailies-body { overflow-y: auto; padding: 12px 14px 20px 14px; -webkit-overflow-scrolling: touch; }
.dailies-loading, .dailies-empty {
padding: 22px 6px;
text-align: center;
font-size: 13px;
line-height: 1.7;
color: #8A7B6E;
}
.dailies-list { display: flex; flex-direction: column; gap: 8px; }
.dailies-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 1px solid #EBDFC9;
border-radius: 12px;
background: #FFFDF8;
cursor: pointer;
text-align: left;
font-family: inherit;
}
.dailies-row:active { transform: scale(0.985); }
.dailies-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
background: #E8DCCB;
flex-shrink: 0;
}
.dailies-avatar-ph {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #8A7B6E;
}
.dailies-row-name { flex: 1; font-size: 14px; font-weight: 600; color: #26222A; }
.dailies-badge {
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
white-space: nowrap;
}
.dailies-badge.on { background: #E7F6E9; color: #2E7D43; }
.dailies-badge.wait { background: #FFF3DC; color: #9A6B1F; }
.dailies-badge.mute { background: #F1EDE6; color: #9A938A; }
.dailies-back { align-self: flex-start; margin-bottom: 8px; }
.dailies-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dailies-detail-name { font-size: 16px; font-weight: 700; color: #26222A; }
.dailies-sec { margin-top: 12px; }
.dailies-sec-title { font-size: 12px; letter-spacing: 2px; color: #9A6B1F; margin-bottom: 8px; }
.dailies-card {
border: 1px solid #EBDFC9;
border-radius: 12px;
background: #FFFDF8;
padding: 12px 13px;
margin-bottom: 10px;
}
.dailies-card-date { font-size: 11px; color: #9A938A; }
.dailies-card-title { font-size: 15px; font-weight: 700; color: #26222A; margin: 2px 0 6px 0; }
.dailies-card-body { font-size: 13.5px; line-height: 1.75; color: #3D3742; }
.dailies-card-quote { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: #7D5A2E; }
.dailies-jump { margin-top: 4px; width: 100%; }
.dailies-lock {
border: 1px dashed #D8BE8E;
border-radius: 12px;
background: #FFF9EE;
padding: 14px 13px;
text-align: center;
}
.dailies-lock-title { font-size: 14px; font-weight: 700; color: #26222A; }
.dailies-lock-sub { font-size: 12px; line-height: 1.7; color: #8A7B6E; margin: 6px 0 10px 0; }
.dailies-invite-btn { width: 100%; }
.bond-text {
margin-top: 10px;
font-family: var(--font-display);
font-size: 15px; line-height: 1.9;
color: var(--on-bg);
}
.weave-status {
font-size: 12px; line-height: 1.6;
color: var(--on-surface-variant);
min-height: 16px;
}
.weave-status.ok { color: var(--tertiary); }
.weave-status.error { color: var(--error); }
/* ---------- 聊天图片（附件选择 + 消息气泡渲染）---------- */
.attach-btn {
flex-shrink: 0; align-self: center;
width: 38px; height: 38px; border: none; border-radius: 50%;
background: transparent; color: var(--on-surface-variant);
font-size: 18px; line-height: 1; cursor: pointer;
}
.attach-btn:hover { background: var(--surface); }
.attach-btn:disabled { opacity: .5; cursor: default; }
/* ---------- 按住说话（语音输入）---------- */
/* touch-action:user-select 全压掉：长按默认会弹系统选择菜单并触发页面滚动，录音会中途断 */
.voice-btn {
flex-shrink: 0; align-self: center;
width: 38px; height: 38px; border: none; border-radius: 50%;
background: transparent; color: var(--on-surface-variant);
font-size: 18px; line-height: 1; cursor: pointer;
touch-action: none; -webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
font-variant-numeric: tabular-nums;
transition: background .15s, color .15s, transform .12s;
}
.voice-btn:hover { background: var(--surface); }
.voice-btn.is-rec {
background: var(--error); color: #fff; font-size: 13px; font-weight: 600;
animation: voice-pulse 1.1s ease-in-out infinite;
}
/* 手指滑出按钮 = 取消：先变灰给反馈，不直接停，滑回来还能继续录 */
.voice-btn.is-cancel { filter: grayscale(1); transform: scale(.92); }
.voice-btn.is-busy { opacity: .55; cursor: progress; }
@keyframes voice-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(179, 86, 62, .45); }
50% { box-shadow: 0 0 0 7px rgba(179, 86, 62, 0); }
}
@media (prefers-reduced-motion: reduce) {
.voice-btn.is-rec { animation: none; }
}
.img-preview {
position: absolute; bottom: calc(100% + 8px); left: 12px;
display: flex; align-items: flex-end; gap: 6px; z-index: 5;
}
.img-thumb {
max-width: 120px; max-height: 120px; border-radius: 10px;
border: 1px solid var(--outline); box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.img-remove {
width: 22px; height: 22px; border-radius: 50%; border: none;
background: rgba(0,0,0,.65); color: #fff;
font-size: 14px; line-height: 1; cursor: pointer;
}
.msg-img {
display: block; max-width: min(260px, 72%);
border-radius: 12px; margin: 2px 0; cursor: zoom-in;
border: 1px solid var(--outline);
}
.msg-group.user .msg-img { margin-left: auto; }
/* ---------- Ta 悬浮圆（仅角色页，可拖动） ---------- */
.ta-fab {
position: fixed;
width: 64px; height: 64px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 22px; font-weight: 600;
color: #fff;
background: radial-gradient(120% 120% at 30% 20%, #ffcfb0 0%, #e8a090 18%, #c97a6a 42%, #8a4a5a 100%);
border: 1.5px solid rgba(255,255,255,.9);
box-shadow: 0 8px 22px rgba(80,40,40,.32), 0 2px 8px rgba(0,0,0,.18);
cursor: grab; user-select: none; touch-action: none;
z-index: 45;
transition: box-shadow .18s ease, transform .12s ease;
}
.ta-fab:active { cursor: grabbing; }
.ta-fab.dragging { transition: none; box-shadow: 0 12px 28px rgba(80,40,40,.38); }
.ta-fab.male { background: radial-gradient(120% 120% at 30% 20%, #cfe8ff 0%, #a8c8f0 20%, #6b8ec0 50%, #3a5a8a 100%); }
.ta-fab.female { background: radial-gradient(120% 120% at 30% 20%, #ffd6e8 0%, #f0a8c8 20%, #c97a9a 50%, #8a4a6a 100%); }
.ta-fab.neutral { background: radial-gradient(120% 120% at 30% 20%, #e8e0f0 0%, #d4c8e8 18%, #b8a8d0 42%, #8a7aa8 100%); }
/* 微信悬浮球：微信绿 + 白色双气泡图标（对齐微信入口样式） */
.ta-fab.wechat {
background: #07C160;
border-color: rgba(255, 255, 255, .95);
box-shadow: 0 8px 22px rgba(7, 193, 96, .35), 0 2px 8px rgba(0, 0, 0, .18);
font-size: 0; /* 隐藏文字占位（图标用 SVG） */
color: #fff;
}
.ta-fab.wechat svg { width: 34px; height: 34px; display: block; }
.ta-fab.wechat .ta-fab-dot { background: #fff; top: 8px; right: 12px; }
.ta-fab.wechat.dragging { box-shadow: 0 12px 28px rgba(7, 193, 96, .42); }
/* 桌面手机壳内：悬浮球改相对手机壳绝对定位，避免 fixed 相对视口飞到壳外右下角 */
.phone .ta-fab { position: absolute; }
.ta-fab-label { font-size: 11px; letter-spacing: .12em; opacity: .92; margin-top: 2px; }
.ta-fab-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; position: absolute; top: 10px; right: 14px; box-shadow: 0 0 8px rgba(255,255,255,.9); }
.ta-fab.male .ta-fab-dot { background: #7ec8ff; }
.ta-fab.female .ta-fab-dot { background: #ff8ec0; }
.ta-gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ta-gender-btn {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 10px 14px; border-radius: 14px;
background: var(--surface); border: 1.5px solid var(--outline);
cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
}
.ta-gender-btn.active { border-color: var(--primary); background: var(--surface-variant); box-shadow: inset 0 0 0 1px var(--primary); }
.ta-gender-btn:active { transform: scale(.97); }
.ta-gender-icon { font-size: 28px; line-height: 1; }
.ta-gender-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.ta-gender-sub { font-size: 11px; color: var(--on-surface-variant); }
@media (prefers-reduced-motion: reduce) { .ta-fab { transition: none; } }
/* ---------- Ta 微信式单会话（沉浸全屏，对齐微信官方 WeUI 设计令牌） ---------- */
.app-shell.ta-mode .app-nav,
.app-shell.ta-mode .app-header { display: none; }
/* Ta 沉浸态：壳内背景与聊天区对齐，避免顶部听筒让位区（padding-top 34px）透出页面底色形成"白边"；
同时切断 overscroll 链（滚动到消息顶/底不再回弹出底色） */
.app-shell.ta-mode { background: #EDEDED; }
.app-shell.ta-mode .app-body { padding: 0; overflow: hidden; min-height: 0; }
@media (prefers-color-scheme: dark) {
.app-shell.ta-mode { background: #111111; }
}
.ta-wechat {
position: relative;
display: flex; flex-direction: column; height: 100%; min-height: 0;
background: var(--wx-bg);
}
@media (prefers-color-scheme: dark) {
.ta-wechat { background: #111111; }
}
/* ---------- 梦信配色令牌（微信式）：深色模式由「我 → 深色模式」独立控制 ----------
data-wx-theme=dark/light 显式设置；auto（无标记）走系统 prefers-color-scheme。
与半梦主题（data-theme）互不影响。
令牌同时挂 body：action sheet / 搜索弹层等挂在 document.body 的面板不在
.ta-wechat 子树内，只在容器上定义会令 var() 全部失效（面板透明裸文本）。 */
.ta-wechat,
body {
--wx-bg: #EDEDED; --wx-page: #FFFFFF; --wx-bar: #F7F7F7; --wx-bar-alpha: rgba(247, 247, 247, 0.94);
--wx-cell: #FFFFFF; --wx-text: #191919; --wx-text2: #999999; --wx-text3: #B2B2B2;
--wx-sep: rgba(0, 0, 0, 0.06); --wx-press: #E5E5E5; --wx-avatar-ph: #C8C8CC;
--wx-bubble-ta: #FFFFFF; --wx-bubble-user: #95EC69; --wx-bubble-user-text: rgba(0, 0, 0, 0.9);
--wx-link: #576B95; color-scheme: light;
}
html[data-wx-theme='dark'] .ta-wechat,
html[data-wx-theme='dark'] body {
--wx-bg: #111111; --wx-page: #111111; --wx-bar: #1E1E1E; --wx-bar-alpha: rgba(30, 30, 30, 0.94);
--wx-cell: #1E1E1E; --wx-text: rgba(255, 255, 255, 0.92); --wx-text2: #8D8D8D; --wx-text3: #6E6E6E;
--wx-sep: rgba(255, 255, 255, 0.08); --wx-press: rgba(255, 255, 255, 0.08); --wx-avatar-ph: #3A3A3A;
--wx-bubble-ta: #2C2C2C; --wx-bubble-user: #3EB575; --wx-bubble-user-text: rgba(255, 255, 255, 0.95);
--wx-link: #7D90B5; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
html:not([data-wx-theme='light']) .ta-wechat,
html:not([data-wx-theme='light']) body {
--wx-bg: #111111; --wx-page: #111111; --wx-bar: #1E1E1E; --wx-bar-alpha: rgba(30, 30, 30, 0.94);
--wx-cell: #1E1E1E; --wx-text: rgba(255, 255, 255, 0.92); --wx-text2: #8D8D8D; --wx-text3: #6E6E6E;
--wx-sep: rgba(255, 255, 255, 0.08); --wx-press: rgba(255, 255, 255, 0.08); --wx-avatar-ph: #3A3A3A;
--wx-bubble-ta: #2C2C2C; --wx-bubble-user: #3EB575; --wx-bubble-user-text: rgba(255, 255, 255, 0.95);
--wx-link: #7D90B5; color-scheme: dark;
}
}
/* 壳底色跟随 wx 主题（overscroll 透出时不穿帮） */
html[data-wx-theme='dark'] .app-shell.ta-mode { background: #111111; }
html[data-wx-theme='light'] .app-shell.ta-mode { background: #EDEDED; }
/* 梦信顶栏/时间胶囊/头像底：跟随 wx 主题 */
.wx-light .ta-wechat-header {
background: var(--wx-bar-alpha); border-bottom-color: var(--wx-sep);
}
.wx-light .ta-wechat-header .ta-wx-name,
.wx-light .ta-wechat-header .ta-wx-back,
.wx-light .ta-wechat-header .ta-wx-more { color: var(--wx-text); }
.wx-light .ta-time { color: var(--wx-text3); }
.wx-light .ta-avatar { background-color: var(--wx-avatar-ph); }
.ta-wechat-header {
position: absolute; top: 0; left: 0; right: 0; z-index: 10;
display: flex; align-items: center; gap: 0;
/* 顶部安全区：min-height 吸收 env，内容下移至安全区下方；桌面 env 为 0 保持 50px */
min-height: 50px;
min-height: calc(50px + env(safe-area-inset-top));
padding: 0 8px;
padding: env(safe-area-inset-top) 8px 0;
/* 微信导航栏材质（WeUI MATERIAL_NAVIGATIONBAR）：半透明 + 毛玻璃，消息从其下滚过 */
background: rgba(237, 237, 237, 0.94);
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
.ta-wechat-header { background: rgba(18, 18, 18, 0.9); border-color: rgba(255, 255, 255, 0.15); }
}
/* 微信聊天页顶栏只有居中标题（无头像/副标题）：两侧按钮各 44px，flex:1 标题几何居中 */
.ta-wechat-header .ta-wx-name {
flex: 1; min-width: 0; text-align: center;
font-weight: 600; font-size: 17px; line-height: 1.2;
color: rgba(0, 0, 0, 0.9);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.ta-wechat-header .ta-wx-name { color: rgba(255, 255, 255, 0.8); }
}
/* 微信聊天页右上角「⋯」与左上角返回键：44px 触区、图标居中 */
.ta-wechat-header .ta-wx-more,
.ta-wechat-header .ta-wx-back {
width: 44px; height: 44px; margin: 0 -6px; border-radius: 8px;
border: none; background: transparent;
display: flex; align-items: center; justify-content: center; color: #1F2329;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ta-wechat-header .ta-wx-more:active,
.ta-wechat-header .ta-wx-back:active { background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) {
.ta-wechat-header .ta-wx-more,
.ta-wechat-header .ta-wx-back { color: rgba(255, 255, 255, 0.8); }
.ta-wechat-header .ta-wx-more:active,
.ta-wechat-header .ta-wx-back:active { background: rgba(255,255,255,.08); }
}
.ta-thread {
flex: 1; min-height: 0; overflow-y: auto;
/* 顶栏改为覆盖式毛玻璃：滚动区从其下穿过，这里补出内容起始位 */
padding: 58px 12px 20px;
padding: calc(58px + env(safe-area-inset-top)) 12px 20px;
background: #EDEDED; background-size: cover; background-position: center; background-repeat: no-repeat;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* 滚到顶/底不回弹外层，消除"滑滑的"橡皮筋感 */
}
@media (prefers-color-scheme: dark) {
.ta-thread { background-color: #111111; } /* 只改底色：写 background 简写会把下面的 size / position 重置回 auto（聊天背景因此不再铺满居中） */
}
.ta-thread.has-bg { background-color: #EDEDED; }
/* 微信式消息时间胶囊：居中灰字（无边框，微信原生样式，FG-2 令牌） */
.ta-time {
text-align: center; font-size: 11px; color: rgba(0, 0, 0, 0.3); line-height: 1.4;
margin: 16px auto 8px; max-width: 80%;
white-space: pre-wrap; word-break: break-word;
}
@media (prefers-color-scheme: dark) {
.ta-time { color: rgba(255, 255, 255, 0.3); }
}
/* 旁白/系统条：微信系统消息同款——去斜体，小号灰字 */
.ta-system {
text-align: center; font-size: 12px; color: rgba(0, 0, 0, 0.3); margin: 12px auto 6px;
line-height: 1.6; max-width: 80%; letter-spacing: .01em;
}
@media (prefers-color-scheme: dark) {
.ta-system { color: rgba(255, 255, 255, 0.3); }
}
/* 消息行：换方间距 16px，同方连续（.cont）收紧到 4px——微信分组节奏 */
.ta-msg { display: flex; gap: 8px; margin: 16px 0 0; width: 100%; align-items: flex-start; }
.ta-msg.cont { margin-top: 4px; }
/* 用户消息：row-reverse 主轴起点在视觉右侧，flex-start 才能把头像贴右缘（flex-end 会推到左边） */
.ta-msg.user { justify-content: flex-start; flex-direction: row-reverse; }
.ta-msg.ta { justify-content: flex-start; }
.ta-msg .ta-bubble .msg-img {
max-height: 320px; /* 超长截图限高，避免撑爆气泡 */
}
.ta-msg .ta-bubble {
position: relative; max-width: 68%; min-width: 0;
padding: 9px 12px; border-radius: var(--ta-r); font-size: calc(17px * var(--chat-scale, 1)); line-height: 1.5;
white-space: pre-wrap; word-break: break-word;
/* 禁长按选择/系统菜单：长按已让位给微信式胶囊菜单 */
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.ta-msg.user .ta-bubble { background: #95EC69; color: rgba(0, 0, 0, 0.9); border-radius: var(--ta-r) var(--ta-tail) var(--ta-r) var(--ta-r); margin-left: 12px; }
.ta-msg.user .ta-bubble::after {
content: ""; position: absolute; right: -5px; top: 13px; width: 0; height: 0;
border: 5px solid transparent; border-left-color: #95EC69; border-right: none;
}
.ta-msg.ta .ta-bubble { background: #FFFFFF; color: rgba(0, 0, 0, 0.9); border-radius: var(--ta-tail) var(--ta-r) var(--ta-r) var(--ta-r); margin-right: 12px; }
/* 表情包气泡：透明背景，图片居中（Ta 和用户共用；提高特异性压过明暗气泡底色） */
.ta-msg.user .ta-bubble.ta-sticker,
.ta-msg.ta .ta-bubble.ta-sticker { background: transparent; padding: 4px; text-align: center; }
.ta-msg .ta-bubble.ta-sticker .ta-sticker-img { width: 64px; height: 64px; display: block; margin: 0 auto; object-fit: contain; }
.ta-msg.ta .ta-bubble::after {
content: ""; position: absolute; left: -5px; top: 13px; width: 0; height: 0;
border: 5px solid transparent; border-right-color: #FFFFFF; border-left: none;
}
/* 表情包气泡去掉小尾巴箭头（透明背景不需要） */
.ta-msg .ta-bubble.ta-sticker::after { display: none; }
@media (prefers-color-scheme: dark) {
.ta-msg.user .ta-bubble { background: #3EB575; color: rgba(0, 0, 0, 0.9); }
.ta-msg.user .ta-bubble::after { border-left-color: #3EB575; }
.ta-msg.ta .ta-bubble { background: #2C2C2C; color: rgba(255, 255, 255, 0.8); }
.ta-msg.ta .ta-bubble::after { border-right-color: #2C2C2C; }
}
/* 新消息到达：整条淡入（微信式），替代逐字流式 */
.ta-msg.arrive { animation: ta-bubble-in .18s ease-out; }
@keyframes ta-bubble-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ta-msg.arrive { animation: none; }
}
/* 对方正在输入：三点跳动（替代静态文字） */
.ta-bubble.ta-typing {
display: flex; align-items: center; justify-content: center;
gap: 5px; min-width: 44px; min-height: 20px; padding: 11px 14px;
}
.ta-typing span {
width: 7px; height: 7px; border-radius: 50%; background: #C9C9C9;
animation: ta-typing-bounce 1.2s ease-in-out infinite;
}
.ta-typing span:nth-child(2) { animation-delay: .15s; }
.ta-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ta-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .45; }
30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ta-typing span { animation: none; opacity: .6; }
}
/* 头像：微信 40px 方形 5px 圆角 */
.ta-msg .ta-avatar {
width: 40px; height: 40px; border-radius: 5px; flex-shrink: 0; margin-top: 0;
background-size: cover; background-position: center top; background-color: #D9D9D9;
border: none; display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.ta-msg .ta-avatar svg { width: 100%; height: 100%; display: block; }
.ta-msg.user .ta-avatar { background-color: #07C160; }
.ta-msg.ta .ta-avatar { background-color: #C9B99A; }
/* 输入区：微信布局——白底圆角输入框 + ＋号 + 内容出现时绿色「发送」 */
/* 待发送图片预览：在 Ta 页内随文档流显示在输入区上方（微信同款位置） */
.ta-wechat > .img-preview { position: static; padding: 6px 12px 0; background: transparent; }
.ta-composer {
position: relative;
display: flex; gap: 6px; align-items: flex-end; padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
background: #F7F7F7; border-top: 1px solid rgba(0, 0, 0, 0.1); flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
.ta-composer { background: rgba(35, 35, 35, 0.93); border-color: rgba(255, 255, 255, 0.15); }
}
.ta-composer textarea {
flex: 1; min-height: 38px; max-height: 110px; padding: 8px 10px;
border: none; border-radius: 6px; background: #fff;
font-size: calc(16px * var(--chat-input-scale, 1)); line-height: 1.4; resize: none; outline: none;
font-family: inherit; color: rgba(0, 0, 0, 0.9);
}
.ta-composer textarea::placeholder { color: rgba(0, 0, 0, 0.3); }
@media (prefers-color-scheme: dark) {
.ta-composer textarea { background: #2C2C2C; color: rgba(255, 255, 255, 0.8); }
.ta-composer textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
}
.ta-composer .ta-wx-plus {
width: 38px; height: 38px; border-radius: 6px; background: transparent; border: none; color: #1F2329;
flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ta-composer .ta-wx-plus:active { background: rgba(0,0,0,.06); }
.ta-composer .ta-wx-emoji {
width: 38px; height: 38px; border-radius: 6px; background: transparent; border: none; color: #1F2329;
flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
font-size: 22px; line-height: 1;
-webkit-tap-highlight-color: transparent;
}
.ta-composer .ta-wx-emoji:active { background: rgba(0,0,0,.06); }
/* 梦信 / Ta 悬浮球里的「按住说话」：贴齐微信式按钮尺寸（聊天页那套是 38px 圆底） */
.ta-composer .voice-btn.ta-wx-voice {
width: 38px; height: 38px; border-radius: 6px; background: transparent; border: none; color: #1F2329;
flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
font-size: 21px; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.ta-composer .voice-btn.ta-wx-voice:active { background: rgba(0,0,0,.06); }
.ta-composer .voice-btn.ta-wx-voice.is-rec {
background: var(--error); color: #fff; font-size: 13px; font-weight: 600; border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
.ta-composer .ta-wx-plus { color: rgba(255, 255, 255, 0.8); }
.ta-composer .ta-wx-plus:active { background: rgba(255,255,255,.08); }
.ta-composer .ta-wx-emoji { color: rgba(255, 255, 255, 0.8); }
.ta-composer .ta-wx-emoji:active { background: rgba(255,255,255,.08); }
}
/* 绿色「发送」/红色「停止」按钮（微信发送键样式） */
.ta-composer .ta-wx-send {
height: 34px; padding: 0 14px; border-radius: 5px; background: #07C160; color: #fff;
border: none; font-size: 14px; font-weight: 500; font-family: inherit;
flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent; margin-bottom: 2px;
}
.ta-composer .ta-wx-send:active { background: #06AD56; }
.ta-composer .ta-wx-send.is-stop { background: #FA5151; }
.ta-composer .ta-wx-send.is-stop:active { background: #E04848; }
/* ＋号面板：微信安卓版底部九宫格（只放真实功能），＋号键弹出 */
.ta-plus-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 29; background: transparent; }
.ta-plus-panel {
position: absolute; left: 0; right: 0; bottom: 100%; z-index: 30;
background: #F7F7F7; border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 18px 14px calc(16px + env(safe-area-inset-bottom));
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 280px;
margin: 0 auto;
animation: ta-sheet-in .18s ease-out;
}
@keyframes ta-sheet-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ta-plus-panel { animation: none; }
}
@media (prefers-color-scheme: dark) {
.ta-plus-panel { background: #1E1E1E; border-color: rgba(255, 255, 255, 0.1); }
}
.ta-plus-item {
display: flex; flex-direction: column; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer; padding: 0;
-webkit-tap-highlight-color: transparent;
}
.ta-plus-item .ta-plus-ico {
width: 60px; height: 60px; border-radius: 12px; background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex; align-items: center; justify-content: center; color: #1F2329;
}
@media (prefers-color-scheme: dark) {
.ta-plus-item .ta-plus-ico { background: #2C2C2C; border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }
}
.ta-plus-item:active .ta-plus-ico { background: #E5E5E5; }
@media (prefers-color-scheme: dark) {
.ta-plus-item:active .ta-plus-ico { background: #404040; }
}
.ta-plus-item .ta-plus-txt { font-size: 12px; color: rgba(0, 0, 0, 0.55); font-family: inherit; margin-top: 2px; }
@media (prefers-color-scheme: dark) {
.ta-plus-item .ta-plus-txt { color: rgba(255, 255, 255, 0.5); }
}
/* 表情面板：微信式底部网格，遮罩 + 弹层 */
.ta-sticker-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 29; background: transparent; }
.ta-sticker-panel {
position: absolute; left: 0; right: 0; bottom: 100%; z-index: 30;
background: #F7F7F7; border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 16px 12px calc(14px + env(safe-area-inset-bottom));
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 340px;
margin: 0 auto;
/* 贴纸多（100+）：面板限高内部滚动，不再把输入条顶出屏幕 */
max-height: min(45vh, 320px); overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
animation: ta-sheet-in .18s ease-out;
}
.ta-sticker-item {
width: 100%; aspect-ratio: 1; padding: 0; border: none; background: transparent;
display: flex; align-items: center; justify-content: center; cursor: pointer;
border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.ta-sticker-item:active { background: rgba(0, 0, 0, 0.06); }
.ta-sticker-item img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-color-scheme: dark) {
.ta-sticker-panel { background: #1E1E1E; border-color: rgba(255, 255, 255, 0.1); }
.ta-sticker-item:active { background: rgba(255, 255, 255, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
.ta-sticker-panel { animation: none; }
}
/* 语音键与按住说话条（安卓微信语法） */
.ta-wx-voice {
width: 38px; height: 38px; border-radius: 6px; background: transparent; border: none; color: #1F2329;
flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ta-wx-voice:active { background: rgba(0, 0, 0, 0.06); }
@media (prefers-color-scheme: dark) {
.ta-wx-voice { color: rgba(255, 255, 255, 0.8); }
.ta-wx-voice:active { background: rgba(255, 255, 255, 0.08); }
}
.ta-hold-bar {
flex: 1; min-height: 38px;
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 6px;
font-size: 16px; font-weight: 500; color: rgba(0, 0, 0, 0.9);
user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer;
transition: background .12s ease;
}
.ta-hold-bar.holding { background: #C9C9C9; }
@media (prefers-color-scheme: dark) {
.ta-hold-bar { background: #2C2C2C; color: rgba(255, 255, 255, 0.8); }
.ta-hold-bar.holding { background: #404040; }
}
/* 按住说话浮层：中央黑色毛玻璃卡片（松开发送/上滑取消/识别中） */
.ta-hold-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.ta-hold-card {
background: rgba(0, 0, 0, 0.75);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 14px; padding: 24px 28px;
display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 210px;
}
.ta-hold-main { color: #fff; font-size: 16px; font-weight: 600; }
.ta-hold-sub { color: rgba(255, 255, 255, 0.6); font-size: 12px; min-height: 14px; }
.ta-hold-txt { color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.ta-hold-card .ta-typing span { background: rgba(255, 255, 255, 0.7); }
.ta-menu {
position: fixed; z-index: 90;
display: flex; overflow: hidden;
background: rgba(0, 0, 0, 0.75);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 8px;
}
.ta-menu button {
border: none; background: transparent; cursor: pointer;
color: #fff; font-size: 14px; font-family: inherit;
padding: 10px 18px; display: flex; align-items: center; gap: 5px;
-webkit-tap-highlight-color: transparent;
}
.ta-menu button + button { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.ta-menu button:active { background: rgba(255, 255, 255, 0.1); }
.ta-menu-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 89; background: transparent; }
/* Ta 个人页：微信「个人信息」版式——#EDEDED 底 + 通栏白色分组块 + 行内右对齐值 */
.ta-profile-page {
position: relative;
display: flex; flex-direction: column; height: 100%; min-height: 0;
background: #EDEDED;
}
@media (prefers-color-scheme: dark) {
.ta-profile-page { background: #111111; }
}
.ta-profile-scroll {
flex: 1; min-height: 0; overflow-y: auto;
padding: calc(58px + env(safe-area-inset-top)) 0 24px;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ta-wx-group { background: #fff; margin-top: 8px; }
@media (prefers-color-scheme: dark) {
.ta-wx-group { background: #1E1E1E; }
}
.ta-wx-cell {
display: flex; align-items: center; gap: 10px;
min-height: 54px; padding: 8px 16px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ta-wx-cell + .ta-wx-cell { border-top: 1px solid rgba(0, 0, 0, 0.05); }
@media (prefers-color-scheme: dark) {
.ta-wx-cell + .ta-wx-cell { border-color: rgba(255, 255, 255, 0.08); }
}
.ta-wx-cell:active { background: rgba(0, 0, 0, 0.04); }
@media (prefers-color-scheme: dark) {
.ta-wx-cell:active { background: rgba(255, 255, 255, 0.06); }
}
.ta-wx-cell-label { font-size: 17px; color: rgba(0, 0, 0, 0.9); }
@media (prefers-color-scheme: dark) {
.ta-wx-cell-label { color: rgba(255, 255, 255, 0.8); }
}
.ta-wx-cell-value {
margin-left: auto; display: flex; align-items: center; gap: 8px;
font-size: 14px; color: rgba(0, 0, 0, 0.55);
max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
.ta-wx-cell-value { color: rgba(255, 255, 255, 0.5); }
}
.ta-wx-chev { color: rgba(0, 0, 0, 0.3); font-size: 16px; }
@media (prefers-color-scheme: dark) {
.ta-wx-chev { color: rgba(255, 255, 255, 0.3); }
}
.ta-wx-cell.danger { justify-content: center; color: #FA5151; font-size: 17px; }
.ta-wx-avatar-cell {
width: 56px; height: 56px; border-radius: 5px; flex-shrink: 0;
background-size: cover; background-position: center; background-color: #D9D9D9;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.ta-wx-avatar-cell svg { width: 100%; height: 100%; display: block; }
.ta-wx-thumb {
width: 44px; height: 30px; border-radius: 4px; flex-shrink: 0;
background-size: cover; background-position: center; background-color: var(--surface-variant);
display: flex; align-items: center; justify-content: center;
}
/* ---------- 微信模块·皮肤（微信 iOS 版式；颜色全部走 --wx-* 令牌，深色由 data-wx-theme 切换） ---------- */
.ta-wechat.wx-light { background: var(--wx-bg); }
.wx-light .ta-wechat-header { background: var(--wx-bar-alpha); border-bottom-color: var(--wx-sep); }
.wx-light .ta-wechat-header .ta-wx-name { color: var(--wx-text); }
.wx-light .ta-wechat-header .ta-wx-more,
.wx-light .ta-wechat-header .ta-wx-back { color: var(--wx-text); }
.wx-light .ta-wechat-header .ta-wx-more:active,
.wx-light .ta-wechat-header .ta-wx-back:active { background: var(--wx-press); }
/* 同上：只改底色。以前这里写成简写，梦信的聊天背景图被重置成 auto / 左上角 / 平铺，大图只露出左上角一块（2026-10-01 工单「聊天背景总是显示不全」） */
.wx-light .ta-thread { background-color: var(--wx-bg); }
.wx-light .ta-time { color: var(--wx-text3); }
.wx-light .ta-system { color: var(--wx-text3); }
.wx-light .ta-composer { background: var(--wx-bar); border-top-color: var(--wx-sep); }
.wx-light .ta-composer textarea { background: var(--wx-cell); color: var(--wx-text); }
.wx-light .ta-composer textarea::placeholder { color: var(--wx-text3); }
.wx-light .ta-composer .ta-wx-plus,
.wx-light .ta-composer .ta-wx-emoji,
.wx-light .ta-wx-voice { color: var(--wx-text); }
.wx-light .ta-composer .ta-wx-plus:active,
.wx-light .ta-composer .ta-wx-emoji:active,
.wx-light .ta-wx-voice:active { background: var(--wx-sep); }
.wx-light .ta-msg.user .ta-bubble { background: var(--wx-bubble-user); color: var(--wx-bubble-user-text); }
.wx-light .ta-msg.user .ta-bubble::after { border-left-color: var(--wx-bubble-user); }
.wx-light .ta-msg.ta .ta-bubble { background: var(--wx-cell); color: var(--wx-bubble-user-text); }
.wx-light .ta-msg.ta .ta-bubble::after { border-right-color: var(--wx-bubble-ta); }
.wx-light .ta-plus-panel,
.wx-light .ta-sticker-panel { background: var(--wx-bar); border-top-color: var(--wx-sep); }
.wx-light .ta-plus-item .ta-plus-ico { background: var(--wx-cell); border-color: var(--wx-sep); color: var(--wx-text); }
.wx-light .ta-plus-item:active .ta-plus-ico { background: var(--wx-press); }
.wx-light .ta-plus-item .ta-plus-txt { color: var(--wx-text2); }
.wx-light .ta-sticker-item:active { background: var(--wx-sep); }
.wx-light .ta-hold-bar { background: var(--wx-cell); color: var(--wx-bubble-user-text); }
.wx-light .ta-hold-bar.holding { background: var(--wx-text3); }
.wx-light .ta-profile-page { background: var(--wx-bg); }
.wx-light .ta-wx-group { background: var(--wx-cell); }
.wx-light .ta-wx-cell + .ta-wx-cell { border-top-color: var(--wx-sep); }
.wx-light .ta-wx-cell:active { background: var(--wx-press); }
.wx-light .ta-wx-cell-label { color: var(--wx-bubble-user-text); }
.wx-light .ta-wx-cell-value { color: var(--wx-text2); }
.wx-light .ta-wx-chev { color: var(--wx-text3); }
/* ---------- 微信主界面·会话列表（微信 iOS 版式：搜索条 + 白色分组块） ---------- */
.wx-search-bar {
position: absolute; top: 50px; top: calc(50px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 9;
padding: 7px 16px; background: var(--wx-bg);
}
.wx-search {
display: flex; align-items: center; gap: 6px; height: 32px;
background: var(--wx-cell); border-radius: 8px; padding: 0 10px;
}
.wx-search svg { flex-shrink: 0; color: var(--wx-text3); }
.wx-search input {
flex: 1; min-width: 0; height: 100%;
border: none; outline: none; background: transparent;
font-size: 14px; color: var(--wx-text); font-family: inherit;
}
.wx-search input::placeholder { color: var(--wx-text3); }
.wx-sheet { background: var(--wx-cell); }
.wx-sheet + .wx-sheet { margin-top: 8px; }
.wx-entry-cell {
display: flex; align-items: center; gap: 12px;
padding: 9px 16px; min-height: 56px; background: var(--wx-cell); cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-entry-cell.danger { color: #FA5151; font-size: 16px; justify-content: center; }
.wx-entry-cell:active { background: var(--wx-press); }
.wx-entry-icon {
width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
background: #07C160; color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
}
.wx-entry-label { flex: 1; min-width: 0; font-size: 17px; color: var(--wx-text); }
.wx-chat-cell {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 0 16px; min-height: 64px; background: var(--wx-cell); cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .18s ease;
user-select: none; -webkit-user-select: none; /* 左滑拖拽时防止选中文本 */
}
.wx-chat-cell:active { background: var(--wx-press); }
/* 左滑动作层：行底下的置顶/取消置顶按钮 */
.wx-swipe-item { position: relative; background: var(--wx-cell); overflow: hidden; }
.wx-swipe-item + .wx-swipe-item::before {
content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px;
background: var(--wx-sep); z-index: 2;
}
.wx-swipe-btn {
position: absolute; top: 0; right: 0; bottom: 0; width: 76px;
border: none; cursor: pointer; font-family: inherit;
background: #C8C9CD; color: #FFFFFF; font-size: 13px; line-height: 1.4;
padding: 0 8px;
-webkit-tap-highlight-color: transparent;
}
.wx-swipe-btn.is-pin { background: #FA9D3B; }
.wx-avatar48 {
width: 48px; height: 48px; border-radius: 5px; flex-shrink: 0;
background-size: cover; background-position: center top; background-color: var(--wx-avatar-ph);
display: flex; align-items: center; justify-content: center; overflow: hidden;
position: relative; color: #FFFFFF; font-size: 18px;
}
.wx-avatar48 svg { width: 100%; height: 100%; display: block; }
.wx-chat-main { flex: 1; min-width: 0; }
.wx-chat-name {
font-size: 17px; color: var(--wx-text); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-chat-preview {
font-size: 14px; color: var(--wx-text2); margin-top: 2px; line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-chat-side {
flex-shrink: 0; align-self: flex-start; padding-top: 16px;
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.wx-chat-time { font-size: 12px; color: var(--wx-text3); }
.wx-badge {
position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px;
box-sizing: border-box; padding: 0 4px;
background: #FA5151; color: #FFFFFF; font-size: 11px; line-height: 17px;
border-radius: 9px; text-align: center;
}
/* 头像角标 wrapper：不裁剪（avatar48 overflow:hidden 会裁掉悬出角外的红点） */
.wx-avatar-box { position: relative; flex-shrink: 0; }
.wx-empty {
padding: 90px 24px 0; text-align: center;
font-size: 14px; color: var(--wx-text3); line-height: 1.9; white-space: pre-wrap;
}
.wx-friend-cell {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 10px 16px; min-height: 64px; background: var(--wx-cell);
-webkit-tap-highlight-color: transparent;
}
.wx-friend-cell + .wx-friend-cell::before {
content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px;
background: var(--wx-sep);
}
.wx-friend-name { font-size: 16px; color: var(--wx-text); line-height: 1.3; }
.wx-friend-status { font-size: 12px; color: var(--wx-text2); margin-top: 2px; }
.wx-btn-accept {
flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
background: #07C160; color: #FFFFFF; font-size: 13px;
padding: 6px 14px; border-radius: 4px; -webkit-tap-highlight-color: transparent;
}
.wx-btn-accept:active { background: #06AD56; }
.wx-btn-accept:disabled { opacity: 0.5; cursor: default; }
.wx-btn-ghost {
flex-shrink: 0; cursor: pointer; font-family: inherit;
background: var(--wx-cell); color: var(--wx-link); font-size: 13px;
padding: 5px 12px; border-radius: 4px; border: 1px solid var(--wx-sep);
-webkit-tap-highlight-color: transparent;
}
.wx-btn-ghost:active { background: var(--wx-sep); }
.wx-btn-text {
flex-shrink: 0; cursor: pointer; font-family: inherit;
background: transparent; border: none; color: var(--wx-link); font-size: 13px; padding: 6px 8px;
-webkit-tap-highlight-color: transparent;
}
.wx-btn-text.danger { color: #FA5151; }
/* ---------- 导入聊天记录（蒸馏角色 · 记忆蒸馏舱） ---------- */
.wx-ds-container {
max-width: 580px;
margin: 0 auto;
padding: 0 16px 36px;
box-sizing: border-box;
}
/* 顶部头图 / 导言区 */
.wx-ds-hero {
margin: 12px 0 16px;
padding: 20px 18px 18px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(7, 193, 96, 0.08) 0%, rgba(87, 107, 149, 0.05) 100%), var(--wx-cell);
border: 1px solid rgba(7, 193, 96, 0.16);
position: relative;
overflow: hidden;
}
.wx-ds-hero-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.wx-ds-hero-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #07C160 0%, #10A37F 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(7, 193, 96, 0.28);
flex-shrink: 0;
}
.wx-ds-hero-title {
font-size: 17px;
font-weight: 600;
color: var(--wx-text);
letter-spacing: -0.2px;
}
.wx-ds-hero-sub {
font-size: 13px;
line-height: 1.6;
color: var(--wx-text2);
}
.wx-ds-privacy-pill {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
color: #07C160;
background: rgba(7, 193, 96, 0.1);
}
/* 分段切换器 (Tabs) */
.wx-ds-tabs {
display: flex;
background: rgba(0, 0, 0, 0.04);
padding: 4px;
border-radius: 10px;
margin-bottom: 16px;
border: 1px solid var(--wx-sep);
}
.wx-dark .wx-ds-tabs {
background: rgba(255, 255, 255, 0.05);
}
.wx-ds-tab {
flex: 1;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
text-align: center;
border-radius: 8px;
cursor: pointer;
color: var(--wx-text2);
border: none;
background: transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.wx-ds-tab.active {
background: var(--wx-cell);
color: var(--wx-text);
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* 文件上传拖拽区 */
.wx-ds-dropzone {
border: 1.5px dashed var(--wx-sep);
border-radius: 14px;
padding: 28px 16px;
text-align: center;
background: var(--wx-cell);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.wx-ds-dropzone:hover, .wx-ds-dropzone.dragover {
border-color: #07C160;
background: rgba(7, 193, 96, 0.03);
}
.wx-ds-drop-icon {
font-size: 36px;
margin-bottom: 8px;
display: block;
}
.wx-ds-drop-title {
font-size: 14px;
font-weight: 600;
color: var(--wx-text);
margin-bottom: 4px;
}
.wx-ds-drop-sub {
font-size: 12px;
color: var(--wx-text3);
}
.wx-ds-formats {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 6px;
}
.wx-ds-format-badge {
padding: 2px 7px;
border-radius: 4px;
background: var(--wx-page);
border: 1px solid var(--wx-sep);
font-size: 10px;
color: var(--wx-text2);
font-family: monospace;
}
/* 已选文件卡片 */
.wx-ds-file-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.wx-ds-file-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(7, 193, 96, 0.12);
color: #07C160;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.wx-ds-file-meta {
flex: 1;
min-width: 0;
}
.wx-ds-file-title {
font-size: 14px;
font-weight: 600;
color: var(--wx-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wx-ds-file-details {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 11px;
color: var(--wx-text3);
}
.wx-ds-enc-tag {
padding: 1px 6px;
border-radius: 4px;
background: rgba(7, 193, 96, 0.1);
color: #07C160;
font-weight: 500;
}
.wx-ds-clear-btn {
padding: 6px 10px;
font-size: 12px;
color: #FA5151;
background: transparent;
border: none;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s;
}
.wx-ds-clear-btn:active {
background: rgba(250, 81, 81, 0.1);
}
/* 文本粘贴区 */
.wx-ds-text-box {
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
border-radius: 12px;
padding: 12px;
transition: border-color 0.2s;
}
.wx-ds-text-box:focus-within {
border-color: #07C160;
}
.wx-ds-textarea {
width: 100%;
box-sizing: border-box;
min-height: 120px;
max-height: 280px;
border: none;
background: transparent;
color: var(--wx-text);
font-family: inherit;
font-size: 13px;
line-height: 1.6;
resize: vertical;
outline: none;
}
.wx-ds-textarea::placeholder {
color: var(--wx-text3);
}
.wx-ds-text-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--wx-sep);
font-size: 11px;
color: var(--wx-text3);
}
/* 预检简报卡片 */
.wx-ds-preview {
margin-top: 14px;
padding: 14px;
border-radius: 12px;
background: rgba(7, 193, 96, 0.05);
border: 1px solid rgba(7, 193, 96, 0.18);
animation: wxDsFadeIn 0.3s ease;
}
.wx-ds-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: #07C160;
}
.wx-ds-preview-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.wx-ds-stat-pill {
padding: 3px 8px;
border-radius: 6px;
background: var(--wx-cell);
border: 1px solid rgba(7, 193, 96, 0.15);
font-size: 11px;
color: var(--wx-text);
}
.wx-ds-speaker-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
color: var(--wx-text2);
}
.wx-ds-speaker-tag {
padding: 2px 7px;
border-radius: 10px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
cursor: pointer;
transition: all 0.15s;
}
.wx-ds-speaker-tag:hover {
border-color: #07C160;
color: #07C160;
}
.wx-ds-sample-box {
margin-top: 8px;
padding: 8px 10px;
border-radius: 6px;
background: var(--wx-cell);
font-size: 11px;
line-height: 1.5;
color: var(--wx-text2);
border: 1px dashed var(--wx-sep);
}
.wx-ds-sample-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 表单字段 */
.wx-ds-card {
background: var(--wx-cell);
border-radius: 12px;
border: 1px solid var(--wx-sep);
padding: 16px;
margin-top: 14px;
}
.wx-ds-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--wx-text);
margin-bottom: 6px;
}
.wx-ds-field-input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--wx-sep);
background: var(--wx-page);
color: var(--wx-text);
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.wx-ds-field-input:focus {
border-color: #07C160;
}
.wx-ds-field-input::placeholder {
color: var(--wx-text3);
}
/* 合规声明 */
.wx-ds-consent-card {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.wx-ds-consent-card input[type="checkbox"] {
width: 17px;
height: 17px;
accent-color: #07C160;
margin-top: 2px;
cursor: pointer;
flex-shrink: 0;
}
.wx-ds-consent-text {
font-size: 12px;
line-height: 1.55;
color: var(--wx-text2);
user-select: none;
}
/* 状态信息与操作按钮 */
.wx-ds-error-bar {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(250, 81, 81, 0.08);
border: 1px solid rgba(250, 81, 81, 0.2);
color: #FA5151;
font-size: 13px;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wx-ds-btn-submit {
width: 100%;
margin-top: 16px;
padding: 13px 0;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
background: #07C160;
color: #FFFFFF;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(7, 193, 96, 0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
-webkit-tap-highlight-color: transparent;
}
.wx-ds-btn-submit:active {
background: #06AD56;
transform: scale(0.985);
}
.wx-ds-btn-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* ---------- 导出指引按钮与弹窗 (方案 2) ---------- */
.wx-ds-guide-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
color: #576B95;
background: rgba(87, 107, 149, 0.08);
border: 1px solid rgba(87, 107, 149, 0.18);
padding: 4px 10px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
margin-top: 8px;
}
.wx-ds-guide-trigger:hover {
background: rgba(87, 107, 149, 0.16);
color: #3b5078;
}
.wx-dark .wx-ds-guide-trigger {
color: #7d96c8;
background: rgba(125, 150, 200, 0.12);
border-color: rgba(125, 150, 200, 0.2);
}
.wx-eg-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
animation: wxDsFadeIn 0.2s ease;
}
.wx-eg-modal {
width: 100%;
max-width: 520px;
max-height: 85vh;
display: flex;
flex-direction: column;
background: var(--wx-cell);
border-radius: 16px;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
overflow: hidden;
border: 1px solid var(--wx-sep);
}
.wx-eg-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--wx-sep);
}
.wx-eg-title {
font-size: 16px;
font-weight: 600;
color: var(--wx-text);
display: flex;
align-items: center;
gap: 8px;
}
.wx-eg-close {
background: transparent;
border: none;
font-size: 18px;
color: var(--wx-text3);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.wx-eg-close:hover {
background: var(--wx-page);
color: var(--wx-text);
}
.wx-eg-tabs {
display: flex;
padding: 8px 16px;
background: var(--wx-page);
gap: 8px;
border-bottom: 1px solid var(--wx-sep);
}
.wx-eg-tab-btn {
flex: 1;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--wx-text2);
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.wx-eg-tab-btn.active {
background: var(--wx-cell);
color: #07C160;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.wx-eg-body {
padding: 18px 20px;
overflow-y: auto;
font-size: 13px;
line-height: 1.6;
color: var(--wx-text);
}
.wx-eg-step-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.wx-eg-step-badge {
width: 22px;
height: 22px;
border-radius: 50%;
background: #07C160;
color: #fff;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.wx-eg-step-content {
flex: 1;
}
.wx-eg-step-title {
font-weight: 600;
color: var(--wx-text);
margin-bottom: 2px;
}
.wx-eg-step-desc {
font-size: 12px;
color: var(--wx-text2);
}
.wx-eg-tip-box {
padding: 10px 12px;
border-radius: 8px;
background: rgba(7, 193, 96, 0.08);
border: 1px solid rgba(7, 193, 96, 0.16);
font-size: 12px;
color: var(--wx-text2);
margin-top: 14px;
line-height: 1.55;
}
/* ---------- 前置 API Key 状态指示条 (方案 3) ---------- */
.wx-ds-key-status {
padding: 12px 14px;
border-radius: 12px;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
transition: all 0.2s ease;
}
.wx-ds-key-status.ready {
background: rgba(7, 193, 96, 0.08);
border: 1px solid rgba(7, 193, 96, 0.22);
}
.wx-ds-key-status.warning {
background: rgba(255, 154, 0, 0.09);
border: 1px solid rgba(255, 154, 0, 0.28);
}
.wx-ds-key-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.wx-ds-key-title {
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.wx-ds-key-status.ready .wx-ds-key-title {
color: #07C160;
}
.wx-ds-key-status.warning .wx-ds-key-title {
color: #E68200;
}
.wx-dark .wx-ds-key-status.warning .wx-ds-key-title {
color: #F89C26;
}
.wx-ds-key-desc {
color: var(--wx-text2);
font-size: 11px;
}
.wx-ds-key-action {
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
border: none;
white-space: nowrap;
}
.wx-ds-key-status.warning .wx-ds-key-action {
background: #E68200;
color: #fff;
}
.wx-ds-key-status.ready .wx-ds-key-action {
background: rgba(7, 193, 96, 0.15);
color: #07C160;
}
/* ---------- 角色认领双选器 (方案 4) ---------- */
.wx-ds-role-picker {
margin-top: 14px;
padding: 14px;
border-radius: 12px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
}
.wx-ds-role-header {
margin-bottom: 12px;
}
.wx-ds-role-title {
font-size: 13px;
font-weight: 600;
color: var(--wx-text);
display: flex;
align-items: center;
gap: 6px;
}
.wx-ds-role-sub {
font-size: 11px;
color: var(--wx-text3);
margin-top: 2px;
}
.wx-ds-role-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) {
.wx-ds-role-cols {
grid-template-columns: 1fr;
}
}
.wx-ds-role-col {
padding: 10px 12px;
border-radius: 10px;
background: var(--wx-page);
border: 1px solid var(--wx-sep);
}
.wx-ds-role-label {
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 5px;
color: var(--wx-text);
}
.wx-ds-role-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.wx-ds-role-pill {
padding: 3px 9px;
font-size: 11px;
border-radius: 12px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
color: var(--wx-text2);
cursor: pointer;
transition: all 0.15s;
}
.wx-ds-role-pill:hover {
border-color: #07C160;
color: #07C160;
}
.wx-ds-role-pill.active {
background: #07C160;
color: #FFFFFF;
border-color: #07C160;
font-weight: 600;
}
/* ---------- 隐私脱敏与机制 (方案 5) ---------- */
.wx-ds-privacy-section {
margin-top: 14px;
}
.wx-ds-privacy-card {
padding: 12px 14px;
border-radius: 10px;
background: var(--wx-cell);
border: 1px solid var(--wx-sep);
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.wx-ds-privacy-card input[type="checkbox"] {
width: 17px;
height: 17px;
accent-color: #07C160;
margin-top: 2px;
cursor: pointer;
flex-shrink: 0;
}
.wx-ds-privacy-text {
flex: 1;
}
.wx-ds-privacy-title {
font-size: 12px;
font-weight: 600;
color: var(--wx-text);
}
.wx-ds-privacy-desc {
font-size: 11px;
color: var(--wx-text3);
margin-top: 2px;
line-height: 1.45;
}
.wx-ds-privacy-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
background: rgba(7, 193, 96, 0.1);
color: #07C160;
font-weight: 500;
}
/* 蒸馏运行中：仪表盘 Stepper */
.wx-ds-stage-panel {
background: var(--wx-cell);
border-radius: 16px;
border: 1px solid var(--wx-sep);
padding: 26px 20px;
margin-top: 14px;
text-align: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
}
.wx-ds-pulse-wrap {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
}
.wx-ds-pulse-ring {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; inset: 0;
border-radius: 50%;
border: 2px solid #07C160;
opacity: 0.7;
animation: wxDsRingPulse 2s infinite ease-out;
}
.wx-ds-pulse-center {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #07C160 0%, #10A37F 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.35);
}
.wx-ds-stage-title {
font-size: 17px;
font-weight: 600;
color: var(--wx-text);
margin-bottom: 6px;
}
.wx-ds-stage-desc {
font-size: 13px;
color: var(--wx-text2);
margin-bottom: 24px;
}
.wx-ds-stepper {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
max-width: 380px;
margin: 0 auto;
}
.wx-ds-step-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--wx-page);
border: 1px solid var(--wx-sep);
transition: all 0.25s ease;
}
.wx-ds-step-item.is-done {
border-color: rgba(7, 193, 96, 0.3);
background: rgba(7, 193, 96, 0.05);
}
.wx-ds-step-item.is-current {
border-color: #07C160;
background: rgba(7, 193, 96, 0.08);
box-shadow: 0 2px 10px rgba(7, 193, 96, 0.12);
}
.wx-ds-step-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wx-sep);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
flex-shrink: 0;
}
.wx-ds-step-item.is-done .wx-ds-step-dot {
background: #07C160;
}
.wx-ds-step-item.is-current .wx-ds-step-dot {
background: #07C160;
box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.25);
animation: wxDsDotPulse 1.5s infinite;
}
.wx-ds-step-info {
flex: 1;
}
.wx-ds-step-name {
font-size: 13px;
font-weight: 600;
color: var(--wx-text);
}
.wx-ds-step-detail {
font-size: 11px;
color: var(--wx-text3);
margin-top: 2px;
}
.wx-ds-stage-tip {
margin-top: 20px;
font-size: 11px;
color: var(--wx-text3);
}
/* 蒸馏成功结果卡片 */
.wx-ds-result-panel {
background: var(--wx-cell);
border-radius: 20px;
border: 1px solid var(--wx-sep);
padding: 28px 20px;
margin-top: 14px;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
animation: wxDsFadeIn 0.4s ease;
}
.wx-ds-avatar-halo {
width: 76px;
height: 76px;
border-radius: 50%;
margin: 0 auto 14px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #10A37F 0%, #07C160 100%);
color: #FFFFFF;
font-size: 32px;
font-weight: 600;
box-shadow: 0 6px 20px rgba(7, 193, 96, 0.35);
}
.wx-ds-avatar-badge {
position: absolute;
bottom: 0;
right: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #07C160;
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--wx-cell);
}
.wx-ds-result-name {
font-size: 20px;
font-weight: 700;
color: var(--wx-text);
margin-bottom: 6px;
}
.wx-ds-result-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
color: #07C160;
background: rgba(7, 193, 96, 0.1);
font-weight: 500;
margin-bottom: 16px;
}
.wx-ds-traits-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-bottom: 16px;
}
.wx-ds-trait-tag {
padding: 4px 10px;
border-radius: 12px;
background: var(--wx-page);
border: 1px solid var(--wx-sep);
font-size: 12px;
color: var(--wx-text2);
}
.wx-ds-greeting-bubble {
background: var(--wx-page);
border: 1px solid var(--wx-sep);
border-radius: 12px;
padding: 14px;
text-align: left;
margin-bottom: 18px;
position: relative;
}
.wx-ds-greeting-label {
font-size: 11px;
font-weight: 600;
color: var(--wx-text3);
margin-bottom: 6px;
}
.wx-ds-greeting-text {
font-size: 13px;
line-height: 1.6;
color: var(--wx-text);
white-space: pre-wrap;
}
.wx-ds-mem-stats {
padding: 10px;
border-radius: 10px;
background: rgba(7, 193, 96, 0.05);
font-size: 12px;
color: var(--wx-text2);
margin-bottom: 20px;
}
.wx-ds-status-notice {
padding: 10px 14px;
border-radius: 10px;
background: rgba(87, 107, 149, 0.08);
font-size: 12px;
line-height: 1.5;
color: var(--wx-text2);
margin-bottom: 20px;
text-align: left;
}
.wx-ds-result-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
@keyframes wxDsRingPulse {
0% { transform: scale(0.9); opacity: 0.8; }
50% { transform: scale(1.15); opacity: 0.2; }
100% { transform: scale(1.3); opacity: 0; }
}
@keyframes wxDsDotPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
@keyframes wxDsFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- 新手引导（梦信「我」页 · 分页卡片） ---------- */
.wx-guide-card { margin: 16px; border-radius: 12px; overflow: hidden; }
.wx-guide-body { padding: 30px 24px 8px; text-align: center; }
.wx-guide-emoji { font-size: 46px; line-height: 1.15; margin-bottom: 12px; }
.wx-guide-title { font-size: 20px; font-weight: 600; color: var(--wx-text); margin-bottom: 14px; }
.wx-guide-text { font-size: 14px; line-height: 1.9; color: var(--wx-text2); text-align: left; }
.wx-guide-text > div:empty { min-height: 0.9em; }
.wx-guide-link { color: var(--wx-link); cursor: pointer; font-size: 13px; text-align: left; margin-top: 4px; }
.wx-guide-link:active { opacity: .7; }
.wx-guide-dots { display: flex; justify-content: center; gap: 7px; padding: 16px 0 4px; }
.wx-guide-dot {
width: 7px; height: 7px; border-radius: 4px; background: var(--wx-text3);
opacity: .45; transition: all .2s ease;
}
.wx-guide-dot.on { opacity: 1; background: #07C160; width: 20px; }
.wx-guide-btns { display: flex; gap: 12px; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); }
.wx-guide-btn {
flex: 1; padding: 11px 0; border-radius: 8px; font-size: 15px; font-family: inherit;
cursor: pointer; border: none; -webkit-tap-highlight-color: transparent;
}
.wx-guide-btn.primary { background: #07C160; color: #FFFFFF; }
.wx-guide-btn.primary:active { background: #06AD56; }
.wx-guide-btn.ghost {
background: var(--wx-cell); color: var(--wx-link); border: 1px solid var(--wx-sep);
}
.wx-guide-btn.ghost:active { background: var(--wx-sep); }
.wx-guide-btn:disabled { opacity: .4; cursor: default; }
/* ---------- 转账页面（极简 · 高端 · 微信原生质感） ---------- */
.wx-transfer { background: #F0F7FF; border: 1px solid rgba(87, 107, 149, 0.18); }
.wx-tr-top { display: flex; align-items: center; gap: 8px; }
.wx-tr-icon { font-size: 22px; }
.wx-tr-note {
font-size: 14px; color: var(--wx-text); max-width: 150px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-tr-sub { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wx-sep); font-size: 12px; color: var(--wx-text2); }
.wx-tr-page {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 140;
background: var(--wx-bg);
display: flex; flex-direction: column;
color: var(--wx-text);
}
.wx-tr-page .ta-wechat-header {
background: var(--wx-bar-alpha);
border-bottom: 1px solid var(--wx-sep);
color: var(--wx-text);
}
.wx-tr-page .ta-wechat-header .ta-wx-name {
color: var(--wx-text);
font-weight: 600;
}
.wx-tr-page .ta-wechat-header .ta-wx-back {
color: var(--wx-text);
}
/* 桌面网页版（2026-10-10）：转账页不再镜像"假手机壳"（壳已撤掉）——改成贴着
内容区右边满高显示，别压住左侧导航。仍受三重条件约束：触屏宽屏（iPad）不生效。 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.wx-tr-page { left: var(--side-w); }
}
.wx-tr-body {
flex: 1;
display: flex;
flex-direction: column;
padding: calc(58px + env(safe-area-inset-top)) 20px 24px;
overflow-y: auto;
}
/* 顶部收款人信息 */
.wx-tr-recipient {
display: flex;
flex-direction: column;
align-items: center;
margin: 12px 0 22px;
text-align: center;
}
.wx-tr-avatar {
width: 54px;
height: 54px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--wx-sep);
background: var(--wx-avatar-ph);
margin-bottom: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.wx-tr-avatar-fallback {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--wx-cell);
color: var(--wx-text);
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--wx-sep);
margin-bottom: 10px;
}
.wx-tr-name {
font-size: 16px;
font-weight: 600;
color: var(--wx-text);
}
.wx-tr-sub-hint {
font-size: 12px;
color: var(--wx-text3);
margin-top: 3px;
}
/* 金额卡片 */
.wx-tr-card {
width: 100%;
background: var(--wx-cell);
border-radius: 16px;
padding: 20px 20px 16px;
border: 1px solid var(--wx-sep);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.wx-tr-card-label {
font-size: 13px;
font-weight: 500;
color: var(--wx-text2);
margin-bottom: 12px;
}
.wx-tr-amount-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.wx-tr-yen {
font-size: 28px;
font-weight: 600;
color: var(--wx-text);
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.wx-tr-amount-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 38px;
font-weight: 700;
font-family: "JetBrains Mono", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
color: var(--wx-text);
background: transparent;
line-height: 1.1;
}
.wx-tr-amount-input::placeholder {
color: var(--wx-text3);
}
.wx-tr-divider {
height: 1px;
background: var(--wx-sep);
margin: 16px 0 12px;
}
.wx-tr-note-input {
width: 100%;
border: none;
outline: none;
font-size: 14px;
color: var(--wx-text);
background: transparent;
padding: 4px 0;
}
.wx-tr-note-input::placeholder {
color: var(--wx-text3);
}
/* 卡片下方说明与限额 */
.wx-tr-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 4px 0;
font-size: 12px;
color: var(--wx-text3);
}
.wx-tr-err {
min-height: 20px;
font-size: 12px;
color: #FA5151;
text-align: center;
margin: 8px 0 4px;
}
/* 按钮 */
.wx-tr-go {
width: 100%;
margin-top: 8px;
min-height: 48px;
border: none;
border-radius: 12px;
background: #07C160;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(7, 193, 96, 0.25);
transition: transform 0.15s, opacity 0.15s, filter 0.15s;
-webkit-tap-highlight-color: transparent;
}
.wx-tr-go:active {
transform: scale(0.985);
filter: brightness(0.95);
}
.wx-tr-go:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ---- 转账详情页 ---- */
.wx-tr-detail-body {
padding-top: calc(58px + env(safe-area-inset-top));
display: flex;
flex-direction: column;
align-items: center;
padding-left: 24px;
padding-right: 24px;
}
.wx-tr-detail-icon-wrap {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(7, 193, 96, 0.12);
color: #07C160;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
margin-bottom: 14px;
}
.wx-tr-detail-status {
font-size: 16px;
font-weight: 600;
color: var(--wx-text);
margin-bottom: 8px;
}
.wx-tr-detail-amount {
font-size: 40px;
font-weight: 700;
color: var(--wx-text);
font-family: "JetBrains Mono", -apple-system, sans-serif;
margin-bottom: 12px;
display: flex;
align-items: baseline;
gap: 4px;
}
.wx-tr-detail-yen {
font-size: 26px;
font-weight: 500;
}
.wx-tr-detail-note {
font-size: 13px;
color: var(--wx-text2);
margin-top: 6px;
padding: 6px 14px;
background: var(--wx-cell);
border-radius: 20px;
border: 1px solid var(--wx-sep);
}
/* ---------- 梦信私享金库（高端黑金 / 琉璃星穹卡面 & 奢华流水） ---------- */
.wx-wallet-container {
padding: 0 14px 32px;
}
.wx-wallet-card {
position: relative;
overflow: hidden;
padding: 22px 20px 18px;
border-radius: 18px;
background:
radial-gradient(130% 120% at 90% -10%, rgba(212, 175, 55, 0.22) 0%, transparent 60%),
radial-gradient(90% 90% at 10% 110%, rgba(87, 107, 149, 0.25) 0%, transparent 70%),
linear-gradient(145deg, #181B24 0%, #1F2430 45%, #13151D 100%);
border: 1px solid rgba(212, 175, 55, 0.28);
box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15);
color: #FFFFFF;
margin: 0 0 16px;
user-select: none;
}
.wx-wallet-card::before {
content: '';
position: absolute;
top: -40%;
right: -20%;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(230, 194, 128, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.wx-wallet-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.wx-wallet-label-group {
display: flex;
align-items: center;
gap: 8px;
}
.wx-wallet-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.72);
}
.wx-wallet-eye-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s, transform 0.1s;
}
.wx-wallet-eye-btn:hover, .wx-wallet-eye-btn:active {
background: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
transform: scale(0.95);
}
.wx-wallet-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 20px;
background: rgba(212, 175, 55, 0.12);
border: 1px solid rgba(212, 175, 55, 0.3);
font-size: 10px;
font-weight: 600;
color: #F3D995;
letter-spacing: 1px;
}
.wx-wallet-balance-wrap {
margin: 4px 0 16px;
min-height: 48px;
display: flex;
align-items: baseline;
}
.wx-wallet-cur {
font-size: 20px;
font-weight: 400;
color: #F3D995;
margin-right: 6px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wx-wallet-balance-int {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.5px;
color: #FFFFFF;
font-family: "JetBrains Mono", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.wx-wallet-balance-dec {
font-size: 22px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
font-family: "JetBrains Mono", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.wx-wallet-balance-masked {
font-size: 30px;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.85);
font-family: -apple-system, sans-serif;
line-height: 1;
}
.wx-wallet-card-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.wx-wallet-meta {
display: flex;
flex-direction: column;
gap: 3px;
}
.wx-wallet-cardno {
font-size: 12px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.45);
font-family: "JetBrains Mono", monospace;
}
.wx-wallet-closed-badge {
font-size: 11px;
color: rgba(255, 255, 255, 0.42);
}
.wx-wallet-daily-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 20px;
font-size: 11px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
}
.wx-wallet-daily-pill.granted {
background: rgba(7, 193, 96, 0.14);
border-color: rgba(7, 193, 96, 0.32);
color: #57E389;
}
.wx-wallet-daily-pill .pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #F3D995;
}
.wx-wallet-daily-pill.granted .pill-dot {
background: #07C160;
box-shadow: 0 0 6px rgba(7, 193, 96, 0.7);
}
/* 角色小金库板块（视窗与卡片） */
.wx-wallet-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 4px 8px;
}
.wx-wallet-section-title {
font-size: 13px;
font-weight: 600;
color: var(--wx-text2);
letter-spacing: 0.5px;
}
.wx-wallet-section-subtitle {
font-size: 11px;
color: var(--wx-text3);
}
.wx-vault-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.wx-vault-card {
display: flex;
align-items: center;
padding: 12px 14px;
background: var(--wx-cell);
border-radius: 14px;
border: 1px solid var(--wx-sep);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-vault-card:active {
transform: scale(0.985);
background: var(--wx-press);
}
.wx-vault-avatar-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
margin-right: 12px;
}
.wx-vault-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid rgba(212, 175, 55, 0.35);
background: var(--wx-avatar-ph);
display: block;
}
.wx-vault-avatar-fallback {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #4A5568, #2D3748);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
border: 1.5px solid rgba(212, 175, 55, 0.35);
}
.wx-vault-info {
flex: 1;
min-width: 0;
}
.wx-vault-name-row {
display: flex;
align-items: center;
gap: 6px;
}
.wx-vault-name {
font-size: 15px;
font-weight: 600;
color: var(--wx-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-vault-tag {
font-size: 10px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(87, 107, 149, 0.1);
color: var(--wx-link);
font-weight: 500;
}
.wx-vault-sub {
margin-top: 3px;
font-size: 12px;
color: var(--wx-text2);
}
.wx-vault-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
margin-left: 10px;
}
.wx-vault-balance {
font-size: 16px;
font-weight: 700;
color: #D48806;
font-family: "JetBrains Mono", -apple-system, monospace;
}
.wx-vault-action-pill {
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
background: rgba(87, 107, 149, 0.08);
color: var(--wx-link);
border: 1px solid rgba(87, 107, 149, 0.15);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 2px;
}
/* 账单流水板块 */
.wx-txns-group {
background: var(--wx-cell);
border-radius: 14px;
border: 1px solid var(--wx-sep);
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.wx-txns-day-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px 8px;
font-size: 12px;
color: var(--wx-text2);
border-bottom: 1px solid var(--wx-sep);
background: rgba(0, 0, 0, 0.015);
}
.wx-txns-day-stat {
font-size: 11px;
color: var(--wx-text3);
}
.wx-txn-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--wx-sep);
transition: background 0.15s;
}
.wx-txn-row:first-of-type {
border-top: none;
}
.wx-txn-icon-wrap {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}
.wx-txn-icon-wrap.redpacket {
background: linear-gradient(135deg, #FA5151, #FF7875);
color: #FFFFFF;
}
.wx-txn-icon-wrap.transfer-in {
background: rgba(7, 193, 96, 0.12);
color: #07C160;
}
.wx-txn-icon-wrap.transfer-out {
background: rgba(87, 107, 149, 0.12);
color: var(--wx-link);
}
.wx-txn-icon-wrap.daily {
background: rgba(212, 175, 55, 0.15);
color: #D48806;
}
.wx-txn-body {
flex: 1;
min-width: 0;
}
.wx-txn-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wx-txn-title {
font-size: 15px;
font-weight: 500;
color: var(--wx-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-txn-amount {
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: var(--wx-text);
font-family: "JetBrains Mono", -apple-system, monospace;
}
.wx-txn-amount.in {
color: #07C160;
}
.wx-txn-sub-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 3px;
font-size: 12px;
color: var(--wx-text2);
}
.wx-txn-desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-txn-time {
flex-shrink: 0;
color: var(--wx-text3);
font-size: 11px;
}
/* 空状态卡片 */
.wx-wallet-empty-card {
padding: 24px 16px;
text-align: center;
background: var(--wx-cell);
border-radius: 14px;
border: 1px dashed var(--wx-sep);
color: var(--wx-text2);
font-size: 13px;
line-height: 1.7;
white-space: pre-line;
margin-bottom: 16px;
}
/* 兼容老 class */
.wx-wallet-balance { display: none; }
.wx-wallet-empty { padding: 20px 16px; font-size: 13px; line-height: 1.7; color: var(--wx-text2); white-space: pre-line; }
.wx-wallet-section { margin: 4px 16px 8px; font-size: 13px; color: var(--wx-text2); }
.wx-wallet-day { padding: 10px 16px 4px; font-size: 12px; color: var(--wx-text2); }
.wx-wallet-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--wx-sep); }
.wx-wallet-row:first-of-type { border-top: none; }
.wx-wallet-row-main { flex: 1; min-width: 0; }
.wx-wallet-row-title { font-size: 15px; color: var(--wx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-wallet-row-sub { margin-top: 2px; font-size: 12px; color: var(--wx-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-wallet-row-amt { flex-shrink: 0; font-size: 16px; font-weight: 600; color: var(--wx-text); }
.wx-wallet-row-amt.in { color: #07C160; }
/* ---------- 快速上手指南（半梦「帮助与关于」· 分页弹层） ---------- */
.guide-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 950;
background: var(--scene-veil);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.guide-card {
width: 100%; max-width: 360px;
background: var(--surface); border: 1px solid var(--outline); border-radius: 20px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
padding: 28px 24px 20px;
}
.guide-body { text-align: center; min-height: 218px; }
.guide-emoji { font-size: 44px; line-height: 1.2; margin-bottom: 12px; }
.guide-title {
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--on-bg); margin-bottom: 14px; letter-spacing: .02em;
}
.guide-text { font-size: 13.5px; line-height: 1.9; color: var(--on-surface-variant); text-align: left; }
.guide-text > div:empty { min-height: 0.9em; }
.guide-dots { display: flex; justify-content: center; gap: 7px; padding: 16px 0 14px; }
.guide-dot {
width: 7px; height: 7px; border-radius: 4px; background: var(--on-surface-variant);
opacity: .35; transition: all .2s ease;
}
.guide-dot.on { opacity: 1; background: var(--primary); width: 20px; }
.guide-btns { display: flex; gap: 12px; }
.guide-btn {
flex: 1; padding: 11px 0; border-radius: 10px; font-size: 15px; font-family: inherit;
cursor: pointer; border: none; -webkit-tap-highlight-color: transparent;
}
.guide-btn.primary { background: var(--primary); color: var(--on-primary); }
.guide-btn.primary:active { transform: scale(.98); }
.guide-btn.ghost {
background: transparent; color: var(--on-surface); border: 1px solid var(--outline);
}
.guide-btn.ghost:active { background: var(--surface-variant); }
.guide-btn:disabled { opacity: .4; cursor: default; }
/* ---------- 微信主框架：底部四 Tab ---------- */
.wx-main-scroll { padding-left: 0; padding-right: 0; }
.wx-tabbar {
flex-shrink: 0; display: flex;
background: var(--wx-bar);
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-bottom: 4px;
padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.wx-tab {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 52px; padding: 4px 0 2px;
border: none; background: transparent; cursor: pointer;
color: var(--wx-text2); font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.wx-tab.active { color: #07C160; }
.wx-tab-label { font-size: 10px; line-height: 1.2; }
.wx-entry-hint { flex-shrink: 0; font-size: 13px; color: var(--wx-text3); }
.wx-danger-cell {
color: #FA5151; font-size: 16px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-danger-cell:active { background: var(--wx-press); }
.wx-btn-send {
display: block; width: calc(100% - 32px); margin: 12px 16px 14px;
padding: 11px 0; border: none; border-radius: 6px; cursor: pointer;
background: #07C160; color: #FFFFFF; font-size: 16px; font-weight: 500; font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.wx-btn-send:active { background: #06AD56; }
.wx-light .switch.on { background: #07C160; }
.wx-light .switch { background: var(--wx-press); }
/* + 菜单：微信式深色圆角弹出层（右上角） */
.wx-plus-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 39; background: transparent; }
.wx-plus-menu {
position: fixed; z-index: 40; min-width: 148px;
background: rgba(20, 22, 28, 0.96);
border-radius: 8px; padding: 4px 0;
animation: wx-pop-in .15s ease-out;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}
@keyframes wx-pop-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .wx-plus-menu { animation: none; } }
.wx-plus-item {
display: flex; align-items: center; gap: 10px; width: 100%;
border: none; background: transparent; cursor: pointer;
color: #FFFFFF; font-size: 15px; font-family: inherit;
padding: 11px 18px; -webkit-tap-highlight-color: transparent;
text-align: left;
}
.wx-plus-item:active { background: rgba(255, 255, 255, 0.08); }
/* 梦信设置页：表单行与分割线 */
.wx-cell-divider { height: 1px; background: var(--wx-sep); margin-left: 16px; }
.wx-field-row {
display: flex; align-items: center; gap: 10px;
min-height: 52px; padding: 6px 16px;
}
.wx-field-label { flex-shrink: 0; width: 72px; font-size: 15px; color: var(--wx-text); }
.wx-field {
flex: 1; min-width: 0; border: none; outline: none; background: transparent;
font-size: 15px; color: var(--wx-text); font-family: inherit;
text-align: right;
}
.wx-field::placeholder { color: var(--wx-avatar-ph); }
/* 梦信底部动作面板（ActionSheet）：微信式弹层，选项带勾选态 */
.wx-as-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 130; }
.wx-as-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0, 0, 0, 0.45); }
.wx-action-sheet {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--wx-bar);
border-radius: 14px 14px 0 0;
padding: 8px 0 max(10px, env(safe-area-inset-bottom));
animation: wx-as-in .2s ease-out;
}
@keyframes wx-as-in {
from { transform: translateY(40%); opacity: .6; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .wx-action-sheet { animation: none; } }
.wx-as-title {
text-align: center; font-size: 13px; color: var(--wx-text2);
padding: 10px 16px 8px; line-height: 1.4;
}
.wx-as-options { background: var(--wx-cell); }
.wx-as-item {
position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
border: none; background: transparent; cursor: pointer; font-family: inherit;
min-height: 57px; padding: 8px 16px;
-webkit-tap-highlight-color: transparent;
text-align: center;
}
.wx-as-item:active { background: var(--wx-press); }
.wx-as-item + .wx-as-item::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: var(--wx-sep);
}
.wx-as-check {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
font-size: 15px; color: #07C160;
}
.wx-as-item-main { flex: 1; min-width: 0; }
.wx-as-label { display: block; font-size: 17px; color: var(--wx-text); line-height: 1.4; text-align: center; }
.wx-as-item.active .wx-as-label { color: #07C160; }
.wx-as-sub { display: block; font-size: 12px; color: var(--wx-text2); margin-top: 2px; line-height: 1.4; text-align: center; }
.wx-as-cancel {
display: block; width: 100%; margin-top: 8px;
border: none; background: var(--wx-cell); cursor: pointer; font-family: inherit;
min-height: 52px; font-size: 16px; color: var(--wx-text);
-webkit-tap-highlight-color: transparent;
}
.wx-as-cancel:active { background: var(--wx-press); }
/* 桌面网页版（2026-10-10）：ActionSheet 不再镜像"假手机壳"（壳已撤掉）。
它挂在 .wx-as-root 里，桌面块已把 root 的左边收到侧栏右边，面板自然满内容区宽，
原来那条 390px 居中 + 专用 keyframes 整块删除。 */
/* ---------- 个人信息页：右侧取值（微信式右对齐灰字） ---------- */
.wx-entry-value {
flex: 1; min-width: 0; text-align: right;
font-size: 15px; color: var(--wx-text2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---------- 梦圈（二期壳：封面头图 + 动态流；发布/点赞/评论三期接） ---------- */
/* 顶栏透明浮在封面头上（默认毛玻璃条在封面场景穿帮），按钮改白色 */
.wx-moments-page { position: relative; background: var(--wx-page); }
.wx-moments-page .ta-wechat-header {
background: transparent; border-bottom: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.wx-moments-page .ta-wechat-header .ta-wx-back,
.wx-moments-page .ta-wechat-header .ta-wx-more { color: #FFFFFF; }
.wx-moments-page .ta-wechat-header .ta-wx-back:active,
.wx-moments-page .ta-wechat-header .ta-wx-more:active { background: rgba(0, 0, 0, 0.12); }
.wx-moments-cover {
position: relative; height: 264px;
background: linear-gradient(165deg, #6E809B 0%, #93A5BC 55%, #BFCBD8 100%);
}
/* 封面右下：我的名字 + 头像（头像压过封面下缘，微信同款） */
.wx-moment-me {
position: absolute; right: 16px; bottom: -22px; z-index: 2;
display: flex; align-items: flex-end; gap: 12px;
}
.wx-moment-me-name {
color: #FFFFFF; font-size: 16px; font-weight: 500;
margin-bottom: 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wx-moment-me .wx-avatar48 {
width: 64px; height: 64px; border-radius: 8px;
border: 2px solid #FFFFFF; box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.wx-moments-feed { background: var(--wx-page); padding-top: 34px; }
.wx-moment-item { display: flex; gap: 10px; padding: 12px 16px 0; }
.wx-moment-item .wx-avatar48 { width: 42px; height: 42px; border-radius: 6px; }
.wx-moment-body {
flex: 1; min-width: 0;
border-bottom: 1px solid var(--wx-sep);
padding-bottom: 12px;
}
.wx-moment-name { color: var(--wx-link); font-weight: 600; font-size: 15px; line-height: 1.35; }
.wx-moment-text {
font-size: 15px; color: var(--wx-text); line-height: 1.5; margin-top: 2px;
white-space: pre-wrap; word-break: break-word;
}
.wx-moment-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.wx-moment-imgs img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
border-radius: 4px; display: block; cursor: zoom-in;
}
.wx-moment-time { font-size: 12px; color: var(--wx-text3); margin-top: 8px; }
.wx-moment-hint {
padding: 80px 24px 0; text-align: center;
font-size: 14px; color: var(--wx-text3); line-height: 1.9; white-space: pre-wrap;
}
/* ==========================================================================
图片查看器（应用内全屏看图：单击关闭 / 双击缩放 / 捏合缩放 / 拖拽平移）
========================================================================== */
.img-viewer {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999;
background: rgba(8, 10, 14, 0.94);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s ease;
touch-action: none; /* 手势全交 JS，避免浏览器默认滚动/缩放 */
cursor: zoom-out;
}
.img-viewer.show { opacity: 1; }
.img-viewer-img {
max-width: 94vw; max-height: 90vh;
object-fit: contain; border-radius: 6px;
user-select: none; -webkit-user-drag: none;
touch-action: none; will-change: transform;
cursor: zoom-in;
}
/* 保存按钮（2026-10-02，工单 d06dca3：想存下来）。
放右下角、拇指够得到的位置；半透明玻璃底，压在暗色看图器上不刺眼。 */
.img-viewer-dl {
position: absolute; right: 14px; bottom: 14px; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px; background: rgba(20, 24, 32, .68);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.img-viewer-dl:active { background: rgba(20, 24, 32, .9); }
.img-viewer-dl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 420px) { .img-viewer-dl-t { display: none; } .img-viewer-dl { padding: 0 14px; } }
/* 聊天页立绘横幅：可点开大图 */
.char-banner-img.zoomable { cursor: zoom-in; }
.char-banner-img.zoomable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* 缩略图可点开大图（2026-10-02）：不给角标，用 hover / focus 暗示「这是一张能放大的图」，
不新增视觉元素——之前挂了个 🔍 角标，每张卡都挂，等于给列表加了一列噪声，
而且 emoji 放大镜各平台渲染还不一样。 */
.cast-thumb[data-cast-zoom] { cursor: zoom-in; transition: transform .15s ease; }
.cast-thumb[data-cast-zoom]:active { transform: scale(.96); }
.cast-thumb[data-cast-zoom]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .cast-thumb[data-cast-zoom]:hover { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .cast-thumb[data-cast-zoom] { transition: none; } }
/* ========== 梦信一期扩展：拍一拍 / 红包 / 引用回复 / 免打扰 / 聊内搜索 ========== */
/* 拍一拍：系统灰字行 + 头像抖动 */
.wx-pat-row {
text-align: center; font-size: 12.5px; color: var(--wx-text2);
padding: 3px 16px; user-select: none;
}
.wx-pat-shake { animation: wx-pat-shake .6s ease-in-out; }
/* 梦信「显示 TA 没说出口的部分」开关打开后的旁白条（2026-09-25，方案 A：纯显示层）。
灰字与拍一拍/撤回同一档（--wx-text2），不写死 rgba、不压 opacity：
2026-09-23「消息被撤回、而且看不到」事故的根因就是灰字只认系统深色，
guard:wxcontrast 现在会把 #wx-narr 一起量（四种主题组合）。 */
.wx-narr {
text-align: center; font-size: calc(12.5px * var(--chat-scale, 1)); line-height: 1.7;
color: var(--wx-text2); padding: 2px 16px;
}
/* 群聊里旁白挂在发言人自己的消息盒内（.wx-msg-box），居中会读成系统提示 ⇒ 靠左 */
.wx-msg-box .wx-narr { text-align: left; padding: 1px 6px 0 4px; }
@keyframes wx-pat-shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-5px) rotate(-4deg); }
30% { transform: translateX(5px) rotate(4deg); }
45% { transform: translateX(-4px) rotate(-3deg); }
60% { transform: translateX(4px) rotate(3deg); }
75% { transform: translateX(-2px) rotate(-2deg); }
90% { transform: translateX(2px) rotate(1deg); }
}
/* 撤回提示：微信同款居中灰字。
⚠️ 2026-09-23 修：此前写死 rgba(0,0,0,.34) + 一条只认**系统** prefers-color-scheme 的深色覆盖，
于是「App 深色 + 系统浅色」下是黑字落在深色底上——实测对比度 **1.11**（等于隐形）。
用户反馈的「消息被撤回、而且看不到的那种」就是这个：灰字看不见，但那一行仍然占位，
后面的气泡看着就像"错位"。改用主题变量（--wx-text3 三级文字，随 data-wx-theme 走）。 */
.wx-recall-row {
text-align: center; font-size: 12.5px; color: var(--wx-text2);
padding: 3px 16px; user-select: none;
}
.wx-reedit-btn {
color: var(--wx-text2); margin-left: 6px; cursor: pointer; user-select: none;
font-weight: 500; text-decoration: none; display: inline-block;
}
.wx-reedit-btn:hover { text-decoration: underline; }
.wx-reedit-btn:active { opacity: .75; }
/* 深色模式：上面已走主题变量，这里不再重复覆盖（重复覆盖会盖掉 data-wx-theme 的口径） */
/* 扮演红包：橙色卡片气泡 */
.ta-bubble.wx-redpacket {
background: linear-gradient(160deg, #F7D28B 0%, #EFAE5C 100%);
color: #7A4A12; min-width: 168px; padding: 10px 14px; cursor: pointer;
border-radius: 8px;
}
.ta-bubble.wx-redpacket:active { filter: brightness(.96); }
.ta-bubble.wx-redpacket .wx-rp-top {
display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500;
}
.ta-bubble.wx-redpacket .wx-rp-icon { font-size: 22px; line-height: 1; }
.ta-bubble.wx-redpacket .wx-rp-note {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px;
}
.ta-bubble.wx-redpacket .wx-rp-sub {
margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(122, 74, 18, .25);
font-size: 11px; opacity: .75;
}
/* 引用块：气泡内左竖线小字 */
.ta-bubble .wx-quote {
display: block;
margin: 0 0 4px; padding: 4px 8px; border-left: 2px solid #07C160;
background: rgba(0, 0, 0, 0.05); border-radius: 4px;
font-size: calc(12px * var(--chat-scale, 1)); color: rgba(0, 0, 0, 0.45); line-height: 1.5;
max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ta-bubble .wx-quote .wx-quote-name { color: rgba(0, 0, 0, 0.6); }
/* 引用条：composer 上方待引用提示 */
.wx-quote-bar {
display: flex; align-items: center; gap: 8px;
margin: 0 8px; padding: 6px 10px;
background: #F2F2F2; border-radius: 8px 8px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.wx-quote-bar .wx-quote-hint {
flex: 1; min-width: 0; font-size: 12.5px; color: rgba(0, 0, 0, 0.5);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-quote-bar .wx-quote-close {
flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%;
background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.5);
font-size: 16px; line-height: 1; cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.wx-quote-bar { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.wx-quote-bar .wx-quote-hint { color: rgba(255, 255, 255, 0.45); }
.wx-quote-bar .wx-quote-close { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
}
/* 免打扰未读：灰色圆点 */
/* 免打扰未读：实色灰点（半透明叠在头像上会出现两色断层，像裁剪坏了） */
.wx-badge.wx-badge-muted { background: #B2B2B2; min-width: 10px; width: 10px; height: 10px; padding: 0; right: -2px; top: -2px; border: 1.5px solid var(--wx-cell); box-sizing: content-box; }
/* 聊内搜索覆盖层 */
.wx-search-overlay-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 94; background: rgba(0, 0, 0, 0.35); }
.wx-search-overlay {
position: fixed; z-index: 95; left: 50%; transform: translateX(-50%);
top: 8vh; width: min(92vw, 420px); max-height: 76vh;
background: #F7F7F7; border-radius: 12px; overflow: hidden;
display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}
.wx-sr-head {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0;
}
.wx-sr-head input {
flex: 1; min-width: 0; height: 34px; padding: 0 12px;
border: none; border-radius: 8px; background: #FFFFFF;
font-size: 14px; outline: none; color: rgba(0, 0, 0, 0.85);
}
.wx-sr-count { flex-shrink: 0; font-size: 12px; color: rgba(0, 0, 0, 0.4); }
.wx-sr-close {
flex-shrink: 0; border: none; background: transparent; color: #576B95;
font-size: 14px; cursor: pointer; padding: 4px 2px;
}
.wx-sr-list { overflow-y: auto; flex: 1; padding: 6px 0; }
.wx-sr-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 14px; border: none; background: transparent; text-align: left; cursor: pointer;
}
.wx-sr-item:active { background: rgba(0, 0, 0, 0.05); }
.wx-sr-avatar { width: 36px; height: 36px; flex-shrink: 0; background-size: cover; background-position: center; background-color: #E5E5E5; }
.wx-sr-main { flex: 1; min-width: 0; }
.wx-sr-name { font-size: 13px; color: rgba(0, 0, 0, 0.45); }
.wx-sr-text {
font-size: 14.5px; color: rgba(0, 0, 0, 0.85); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-sr-time { flex-shrink: 0; font-size: 11px; color: rgba(0, 0, 0, 0.35); }
.wx-sr-empty { padding: 36px 0; text-align: center; font-size: 13px; color: rgba(0, 0, 0, 0.35); }
/* 搜索命中高亮 */
.wx-sr-hit .ta-bubble, .wx-sr-hit.ta-bubble { outline: 2px solid #07C160; outline-offset: 1px; border-radius: 6px; }
.wx-sr-hit { border-radius: 8px; }
@media (prefers-color-scheme: dark) {
.wx-search-overlay { background: #2C2C2C; }
.wx-sr-head { border-color: rgba(255, 255, 255, 0.1); }
.wx-sr-head input { background: #3A3A3A; color: rgba(255, 255, 255, 0.85); }
.wx-sr-count { color: rgba(255, 255, 255, 0.4); }
.wx-sr-item:active { background: rgba(255, 255, 255, 0.06); }
.wx-sr-avatar { background-color: #3A3A3A; }
.wx-sr-name { color: rgba(255, 255, 255, 0.45); }
.wx-sr-text { color: rgba(255, 255, 255, 0.85); }
.wx-sr-time { color: rgba(255, 255, 255, 0.35); }
.wx-sr-empty { color: rgba(255, 255, 255, 0.35); }
.wx-badge.wx-badge-muted { background: #5C5C5C; }
}
/* ========== 红包封面页（东方美学 · 鎏金朱砂奢华全屏） ========== */
.wx-rp-page {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 140;
background:
radial-gradient(120% 85% at 50% -8%, rgba(255, 185, 120, 0.28) 0%, transparent 60%),
radial-gradient(90% 60% at 50% 115%, rgba(26, 4, 3, 0.65) 0%, transparent 70%),
linear-gradient(172deg, #A8241D 0%, #8A1A14 45%, #64110C 100%);
display: flex; flex-direction: column;
color: #FFFFFF;
}
.wx-rp-page .ta-wechat-header {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
.wx-rp-page .ta-wechat-header .ta-wx-name {
color: #FFFFFF;
font-weight: 600;
letter-spacing: 0.5px;
}
.wx-rp-page .ta-wechat-header .ta-wx-back {
color: #FFFFFF;
}
/* 桌面网页版（2026-10-10）：红包封面页不再镜像"假手机壳"（壳已撤掉）——贴着
内容区右边满高显示，别压住左侧导航。仍受三重条件约束：触屏宽屏（iPad）不生效。 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
.wx-rp-page { left: var(--side-w); }
}
.wx-rp-body {
flex: 1; display: flex; flex-direction: column; align-items: center;
padding: calc(58px + env(safe-area-inset-top)) 18px 24px;
overflow-y: auto;
}
/* 顶部伴侣专属礼遇封章 */
.wx-rp-recipient-card {
display: flex;
flex-direction: column;
align-items: center;
margin: 6px 0 18px;
text-align: center;
}
.wx-rp-avatar-halo {
position: relative;
width: 66px;
height: 66px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #FFF0CC 0%, #F4CE75 45%, #D49326 100%);
box-shadow: 0 10px 24px rgba(24, 3, 2, 0.38), 0 0 16px rgba(244, 206, 117, 0.3);
margin-bottom: 10px;
}
.wx-rp-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.wx-rp-avatar-fallback {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, #5C1D17, #360E0A);
color: #FFF0CC;
font-size: 24px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wx-rp-recipient-title {
font-size: 16px;
font-weight: 500;
color: #FFF6E5;
letter-spacing: 0.5px;
}
.wx-rp-recipient-name {
font-weight: 700;
color: #FFE199;
}
.wx-rp-recipient-sub {
margin-top: 4px;
font-size: 11.5px;
color: rgba(255, 230, 205, 0.68);
letter-spacing: 1px;
}
/* 暖玉白柔光卡片 */
.wx-rp-input-card {
width: 100%;
background: rgba(255, 253, 248, 0.95);
border-radius: 18px;
padding: 16px 18px 14px;
box-shadow: 0 12px 30px rgba(25, 3, 2, 0.22);
border: 1px solid rgba(255, 235, 215, 0.6);
margin-bottom: 12px;
}
.wx-rp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.wx-rp-card-title {
font-size: 13.5px;
font-weight: 600;
color: #4A3324;
}
.wx-rp-balance-hint {
font-size: 11.5px;
color: #9C7E6A;
font-family: "JetBrains Mono", -apple-system, sans-serif;
}
.wx-rp-amount-row {
display: flex;
align-items: baseline;
gap: 6px;
border-bottom: 1px solid rgba(74, 51, 36, 0.1);
padding-bottom: 8px;
}
.wx-rp-yen {
font-size: 28px;
font-weight: 700;
color: #B5741E;
}
.wx-rp-amount-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 32px;
font-weight: 700;
font-family: "JetBrains Mono", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
color: #2F1B10;
background: transparent;
}
.wx-rp-amount-input::placeholder {
color: #D6C5B5;
}
/* 快捷选额胶囊 */
.wx-rp-presets {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.wx-rp-preset-chip {
flex: 1;
min-width: 58px;
padding: 5px 6px;
border-radius: 12px;
border: 1px solid rgba(181, 116, 30, 0.22);
background: rgba(181, 116, 30, 0.06);
color: #8A5313;
font-size: 12px;
font-weight: 600;
font-family: "JetBrains Mono", monospace;
cursor: pointer;
text-align: center;
transition: all 0.15s;
}
.wx-rp-preset-chip:active {
background: #B5741E;
color: #FFFFFF;
transform: scale(0.96);
}
/* 祝福语卡片 */
.wx-rp-note-card {
padding: 14px 18px 12px;
}
.wx-rp-note-input {
width: 100%;
border: none;
outline: none;
font-size: 15px;
font-weight: 500;
color: #352115;
background: transparent;
padding: 2px 0 8px;
border-bottom: 1px solid rgba(74, 51, 36, 0.08);
}
.wx-rp-note-input::placeholder {
color: #BBA999;
}
.wx-rp-note-presets {
display: flex;
gap: 6px;
margin-top: 10px;
flex-wrap: wrap;
}
.wx-rp-note-chip {
padding: 4px 10px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.03);
color: #6C5544;
font-size: 11.5px;
cursor: pointer;
transition: all 0.15s;
}
.wx-rp-note-chip:active {
background: rgba(0, 0, 0, 0.08);
color: #2F1B10;
}
.wx-rp-err {
min-height: 20px;
font-size: 12px;
color: #FFD4D0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin: 2px 4px 6px;
align-self: stretch;
text-align: center;
}
/* 鎏金封签大按钮 */
.wx-rp-go {
width: 100%;
margin-top: 6px;
border: none;
cursor: pointer;
min-height: 50px;
border-radius: 16px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
background: linear-gradient(135deg, #FFE49E 0%, #FFB535 50%, #EE8000 100%);
color: #582A00;
box-shadow: 0 10px 26px rgba(180, 50, 10, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
transition: transform 0.15s, filter 0.15s;
-webkit-tap-highlight-color: transparent;
}
.wx-rp-go:active {
transform: scale(0.98);
filter: brightness(0.95);
}
.wx-rp-go:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.wx-rp-tip {
margin-top: 14px;
font-size: 11.5px;
color: rgba(255, 230, 205, 0.72);
letter-spacing: 0.5px;
text-align: center;
}
/* ---- 拆红包详情页 ---- */
.wx-rp-detail-back { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 8px; z-index: 2; background: rgba(0, 0, 0, 0.14); border-radius: 8px; padding: 6px 10px 6px 6px; border: none; }
.wx-rp-detail-body {
position: relative; flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 0 30px 8vh;
}
/* 红包封：正红卡纸 + 上盖 + 金色「開」印 */
.wx-rp-cover {
position: relative; width: 262px; height: 360px; border-radius: 16px;
background: linear-gradient(168deg, #E8432A 0%, #CE3413 60%, #B92A10 100%);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 214, 140, 0.4);
perspective: 900px; transition: transform .5s ease, opacity .45s .35s;
}
/* 翻开后红包封缩小上移让位给金额 */
.wx-rp-page.is-open .wx-rp-cover { transform: translateY(-70px) scale(.72); }
.wx-rp-cover-circle {
position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
width: 92px; height: 92px; border-radius: 50%;
background: radial-gradient(circle at 36% 28%, #FFF3D6 0%, #F6CF7A 42%, #D9982E 76%, #B87C1E 100%);
box-shadow: inset 0 0 0 3px rgba(126, 66, 0, 0.32), inset 0 0 0 4px rgba(255, 228, 168, 0.45), 0 4px 14px rgba(0, 0, 0, 0.2);
display: flex; align-items: center; justify-content: center;
font-size: 42px; font-weight: 600; color: #8A4B00; font-family: var(--font-display);
}
.wx-rp-cover-note {
position: absolute; left: 0; right: 0; top: 60%;
text-align: center; font-size: 17px; color: #FFE9C4;
padding: 0 24px; line-height: 1.5; transition: opacity .3s;
}
.wx-rp-page.is-open .wx-rp-cover .wx-rp-cover-note { opacity: 0; }
.wx-rp-reveal .wx-rp-reveal-note { position: static; color: #FFFFFF; opacity: 1; }
.wx-rp-flap {
position: absolute; top: 0; left: 0; right: 0; height: 55%;
background: linear-gradient(180deg, #F04E30 0%, #D63317 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
border-radius: 16px 16px 0 0;
transform-origin: top center;
transition: transform .55s cubic-bezier(.6, .05, .3, 1), opacity .45s .1s;
box-shadow: inset 0 -3px 0 rgba(255, 214, 140, 0.35);
z-index: 2; border: none; padding: 0; cursor: pointer;
}
.wx-rp-open-btn {
position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
width: 88px; height: 88px; border-radius: 50%; border: none; cursor: pointer;
background: radial-gradient(circle at 36% 28%, #FFF3D6 0%, #F6CF7A 42%, #D9982E 76%, #B87C1E 100%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(126, 66, 0, 0.35);
font-size: 36px; font-weight: 600; color: #8A4B00; font-family: var(--font-display);
-webkit-tap-highlight-color: transparent; z-index: 3;
animation: wx-rp-pulse 1.6s ease-in-out infinite;
}
.wx-rp-open-btn:active { filter: brightness(.94); }
@keyframes wx-rp-pulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.06); }
}
/* 翻盖动画 + 揭晓金额 */
.wx-rp-page.is-open .wx-rp-flap { transform: rotateX(-168deg); opacity: 0; pointer-events: none; }
.wx-rp-page.is-open .wx-rp-open-btn { opacity: 0; pointer-events: none; transition: opacity .3s; }
.wx-rp-reveal {
position: absolute; left: 0; right: 0; bottom: 6vh;
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center; opacity: 0; transform: translateY(36px);
transition: opacity .45s .32s, transform .5s .32s; pointer-events: none;
}
.wx-rp-page.is-open .wx-rp-reveal { opacity: 1; transform: none; }
.wx-rp-detail-who { font-size: 15px; color: rgba(255, 255, 255, 0.88); margin-bottom: 12px; letter-spacing: .5px; }
.wx-rp-detail-amount {
font-size: 48px; font-weight: 700; color: #FFE3B8; line-height: 1.1;
display: flex; align-items: baseline; gap: 5px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.wx-rp-detail-cur { font-size: 22px; font-weight: 600; }
/* ========== 梦圈发布页 + 动态互动区（点赞/评论） ========== */
/* ⛔ 底色必须用 --wx-page，不许写死 #FFFFFF：梦信有独立主题（data-wx-theme=dark 或系统深色），
那种情况下 --wx-text 是近白的 rgba(255,255,255,.92)，写死白底就是**白底白字**。
2026-09-22 用户报「梦圈打字看不到文字」——实测梦信深色时 .wx-mc-text
文字 rgb(255,255,255) / 背景 rgb(255,255,255)，对比度 1.00；
而占位符用 --wx-text3（深色下 #6E6E6E 中灰）在白底上看得见，
所以现象正是「占位符看得见、自己打的字看不见」。防线见 scripts/guard-wx-contrast.mjs：
量的是「文字色 vs 往上第一个不透明背景色」的对比度，四种主题组合都要过。 */
.wx-mc-page { background: var(--wx-page); }
.wx-mc-page .ta-thread { background: var(--wx-page); }
.wx-mc-body { padding: calc(58px + env(safe-area-inset-top)) 16px 14px; }
.wx-mc-text {
width: 100%; min-height: 120px; border: none; outline: none; resize: none;
font-size: 17px; line-height: 1.55; font-family: inherit; color: var(--wx-text);
background: transparent;
}
.wx-mc-text::placeholder { color: var(--wx-text3); }
.wx-mc-err { min-height: 18px; font-size: 12px; color: #FA5151; margin: 6px 0; }
.wx-mc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.wx-mc-cell {
position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
background: var(--wx-press); border: none; padding: 0; cursor: pointer;
}
.wx-mc-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-mc-add {
display: flex; align-items: center; justify-content: center;
font-size: 40px; color: var(--wx-text2); font-weight: 200; background: var(--wx-bar);
}
.wx-mc-add:active { background: var(--wx-press); }
.wx-mc-del {
position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55);
color: #FFFFFF; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.wx-mc-submit {
border: none; background: #07C160; color: #FFFFFF; font-size: 14px; font-weight: 500;
font-family: inherit; padding: 6px 16px; border-radius: 5px; cursor: pointer;
margin-right: 44px; flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.wx-mc-submit:disabled { background: #A8E6BE; }
/* 动态互动区：微信式灰底圆角块 */
.wx-moment-social {
margin-top: 8px; background: rgba(0, 0, 0, 0.045); border-radius: 4px;
padding: 6px 10px; font-size: 13.5px; line-height: 1.6;
}
.wx-social-likes { color: var(--wx-text); }
.wx-social-heart { color: #576B95; font-size: 12px; margin-right: 6px; }
.wx-social-comma { color: var(--wx-text3); margin-right: 2px; }
.wx-social-name { color: #576B95; font-weight: 500; }
.wx-social-comment { color: var(--wx-text); }
.wx-social-comment .wx-social-name { margin-right: 2px; }
.wx-social-comment + .wx-social-comment { border-top: 1px solid rgba(0, 0, 0, 0.05); margin-top: 4px; padding-top: 4px; }
@media (prefers-color-scheme: dark) {
.wx-moment-social { background: rgba(255, 255, 255, 0.06); }
.wx-social-comment + .wx-social-comment { border-color: rgba(255, 255, 255, 0.06); }
}
/* ========== 梦圈三期：互动面板 / 详情页 / 互动消息 ========== */
.wx-moment-item { cursor: pointer; }
.wx-entry-badge { position: static; flex-shrink: 0; min-width: 16px; width: 16px; height: 16px; padding: 0; font-size: 10px; line-height: 16px; text-align: center; }
.wx-notifs-badge { position: static; flex-shrink: 0; margin-left: auto; }
.wx-moments-notifs-bar {
display: flex; align-items: center; gap: 6px;
margin: 10px 16px 0; padding: 11px 14px; border-radius: 8px;
background: var(--wx-cell); font-size: 15px; color: var(--wx-text); cursor: pointer;
}
/* 时间线：透明顶栏浮在封面上，封面必须顶到页面顶部（覆盖 ta-thread 的顶部预留） */
.wx-moments-page .ta-thread { padding-top: 0; }
.wx-moment-detail-page,
.wx-moment-notifs-page { background: var(--wx-page); }
.wx-moment-detail-scroll {
padding: calc(58px + env(safe-area-inset-top)) 16px 20px;
background: var(--wx-page);
}
.wx-moment-detail-head { display: flex; align-items: center; gap: 10px; }
.wx-moment-detail-head .wx-avatar48 { width: 42px; height: 42px; border-radius: 6px; }
.wx-moment-detail-meta { display: flex; flex-direction: column; gap: 2px; }
.wx-moment-detail-text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--wx-text); white-space: pre-wrap; }
.wx-moment-detail-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.wx-moment-detail-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; }
.wx-moment-detail-scroll .wx-moment-social { margin-top: 12px; max-width: 100%; }
.wx-detail-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: flex; align-items: center; gap: 8px;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
background: var(--wx-cell); border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wx-detail-input {
flex: 1; min-width: 0; height: 36px; padding: 0 12px;
border: none; border-radius: 18px; background: var(--wx-bg); font-size: 15px;
color: var(--wx-text); outline: none; font-family: inherit;
}
.wx-detail-send { border: none; background: none; color: #4D9AF0; font-size: 15px; padding: 6px 4px; cursor: pointer; }
.wx-detail-send:disabled { color: #B2B2B2; }
.wx-detail-like { border: none; background: none; font-size: 24px; line-height: 1; color: #7F7F7F; padding: 0 6px; cursor: pointer; }
.wx-detail-like.liked { color: #07C160; }
.wx-notifs-list { padding: 8px 0; }
.wx-notif-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--wx-cell); cursor: pointer; }
.wx-notif-item:active { background: var(--wx-press); }
.wx-notif-avatar {
width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
background: #4D9AF0; color: #FFFFFF; font-size: 18px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.wx-notif-body { flex: 1; min-width: 0; }
.wx-notif-text { font-size: 14px; color: var(--wx-text); line-height: 1.45; }
.wx-notif-actor { color: #576B95; font-weight: 600; }
.wx-notif-time { margin-top: 2px; font-size: 12px; color: var(--wx-text3); }
.wx-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #FA5151; flex-shrink: 0; margin-left: auto; }
@media (prefers-color-scheme: dark) {
.wx-moment-detail-scroll .wx-moment-social { background: rgba(255, 255, 255, 0.06); }
}
/* ========== 梦圈四期：微信式气泡菜单 + 就地评论 + 右下角两点图标 ========== */
.wx-moment-meta {
display: flex; align-items: center; justify-content: space-between;
}
.wx-moment-meta .wx-moment-time { margin-top: 0; }
.wx-moment-dots {
display: flex; align-items: center; gap: 3px;
padding: 8px 2px 6px 10px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-moment-dots span {
width: 4px; height: 4px; border-radius: 50%;
background: var(--wx-text3);
}
/* 顶栏两点（右上角消息入口）：点击区加大，圆点稍大，跟随透明顶栏的白色按钮 */
.wx-header-dots { padding: 10px 12px; }
.wx-header-dots span { width: 5px; height: 5px; }
.wx-moments-page .wx-header-dots span { background: #FFFFFF; opacity: 0.95; }
.wx-moment-me-link { cursor: pointer; }
/* 个人梦圈：封面略深色渐变做区分，标题白字浮在封面上 */
.wx-moments-cover.me-cover {
background: linear-gradient(165deg, #4A5A78 0%, #6E8098 55%, #A7B4C4 100%);
}
.wx-moments-page .ta-wechat-header .ta-wx-name { color: #FFFFFF; }
.wx-moment-menu {
position: fixed; z-index: 120;
display: flex; gap: 2px;
background: var(--wx-cell);
border-radius: 8px; padding: 4px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.wx-moment-menu::before {
content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px;
border-left: 6px solid transparent; border-right: 6px solid transparent;
border-bottom: 6px solid var(--wx-cell);
}
.wx-moment-menu.up::before {
top: auto; bottom: -6px;
border-bottom: none; border-top: 6px solid var(--wx-cell);
}
.wx-mm-item {
background: none; border: none; padding: 9px 16px;
font-size: 14.5px; color: var(--wx-text); cursor: pointer;
border-radius: 6px; font-family: inherit;
}
.wx-mm-item:active { background: var(--wx-press); }
.wx-moment-comment-row {
display: flex; align-items: center; gap: 8px;
margin-top: 8px;
}
.wx-mic-input {
flex: 1; min-width: 0; height: 34px;
border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 17px;
padding: 0 14px; font-size: 14px; outline: none;
background: var(--wx-page); color: var(--wx-text); font-family: inherit;
}
.wx-mic-send {
border: none; background: none; color: #4D9AF0;
font-size: 14px; padding: 6px 2px; cursor: pointer; font-family: inherit;
}
.wx-mic-send:disabled { color: #B2B2B2; }
/* ---------- 抖音群悬浮球（全局左上、可拖动，44px 比梦信球小一号） ---------- */
.promo-fab {
position: fixed;
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
background: linear-gradient(135deg, #1a1a1a 0%, #000 60%, #161616 100%);
border: 1.5px solid rgba(255,255,255,.9);
box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
cursor: grab; user-select: none; touch-action: none;
z-index: 45;
transition: box-shadow .18s ease, transform .12s ease;
padding: 0;
}
.promo-fab:active { cursor: grabbing; }
.promo-fab.dragging { transition: none; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.promo-fab .promo-note svg { width: 22px; height: 22px; display: block; }
.promo-fab .promo-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #fe2c55; position: absolute; top: 5px; right: 6px;
box-shadow: 0 0 8px rgba(254,44,85,.9); border: 1.5px solid #fff;
}
.phone .promo-fab { position: absolute; }
.promo-card {
position: fixed;
width: 260px; max-width: calc(100vw - 32px);
background: var(--surface); color: inherit;
border: 1px solid var(--outline); border-radius: 16px;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
padding: 14px 14px 12px; z-index: 60;
}
.phone .promo-card { position: absolute; }
.promo-card[hidden] { display: none; }
.promo-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.promo-hook { font-size: 13px; line-height: 1.5; opacity: .92; margin-bottom: 4px; }
.promo-hook.sub { opacity: .7; font-size: 12px; margin-bottom: 10px; }
.promo-copy {
width: 100%; border: none; border-radius: 10px; padding: 10px 0;
background: var(--primary); color: #fff; font-size: 14px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.promo-copy:active { transform: scale(.98); }
.promo-hint { font-size: 11px; opacity: .6; text-align: center; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .promo-fab { transition: none; } }
/* ==========================================================================
梦信群聊（modules/group.js）
单聊的样式全在 app.css 的 .ta-wechat/.ta-msg/.ta-bubble 系列里，群聊直接复用；
这里只补群聊**独有**的东西：群头像拼图、发言人名字、@ chip、建群选择器、群记忆面板。
为什么不开新文件：index.html 只引 app.css（messages 那份是未发版的），
新开一份 css 不引进来等于没写。
========================================================================== */
/* ---------- 会话列表：群头像 2×2 拼图 ---------- */
.wx-group-avatar {
width: 48px; height: 48px; border-radius: 8px; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 1px; background: var(--wx-line, #e5e5e5); flex: 0 0 auto;
}
.wx-group-avatar-cell {
background-size: cover; background-position: center; background-color: var(--wx-avatar-bg, #ddd);
display: flex; align-items: center; justify-content: center;
font-size: 10px; color: #fff; overflow: hidden;
}
.wx-group-avatar-cell.is-empty { background-color: var(--wx-avatar-bg, #e8e8e8); }
.wx-group-avatar-cell.is-more { background-color: #9aa0a6; font-weight: 600; }
/* 列表分组小标题（群 / 单聊之间） */
.wx-list-section {
font-size: 12px; color: var(--wx-text3, #9a9a9a);
padding: 10px 16px 4px; background: transparent;
}
/* ---------- 群聊页顶栏：名字 + 成员一行 ---------- */
.wx-group-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.wx-group-title .ta-wx-name { max-width: 100%; }
/* ---------- 群聊消息：发言人名字 + 头像占位 ---------- */
/* 外层盒子做三件事：名字在上气泡在下的纵向排列、宽度受行宽约束、不被 flex 压缩挤没。
为什么必须显式给 min-width:0 —— .ta-msg .ta-bubble 上写着 max-width:68%，
百分比是**相对这个盒子**解析的。盒子若也是收缩宽度，68% 会相对一个很小的基准算，
气泡被压窄成窄条。所以这里把盒子的宽度基准钉在"行宽减去头像"，气泡的 68% 才有意义。
同时盒子自身要收缩到内容宽（align-items 决定），否则气泡会被撑满、头像与文字之间空一大段。 */
.wx-msg-box {
display: flex; flex-direction: column; align-items: flex-start;
flex: 0 1 auto; min-width: 0; max-width: calc(100% - 48px);
}
.wx-msg-name { font-size: 11px; color: var(--wx-text3, #9a9a9a); margin: 0 0 2px 2px; }
.ta-msg.user .wx-msg-box { align-items: flex-end; }
/* 连发合并时补一个等宽空位，保持气泡左边缘对齐 */
.ta-avatar-spacer { visibility: hidden; }
.ta-avatar-fallback, .wx-avatar-fallback {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff; background: #b9b2ad;
}
/* ---------- 输入区：@ chip ---------- */
.wx-input-wrap { flex: 0 0 auto; background: var(--wx-bg, #f7f7f7); border-top: 1px solid var(--wx-line, #e5e5e5); }
.wx-mention-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.wx-mention-chip {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(7,193,96,.12); color: #07c160;
border-radius: 12px; padding: 2px 8px; font-size: 13px;
}
.wx-mention-x {
border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1;
cursor: pointer; padding: 0 0 0 2px;
}
.wx-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
/* ⛔ 白底输入框必须自带主题文字色，不能用 color: inherit：
半梦主题（data-theme=dark）与梦信主题互相独立，App 深色时 inherit 会拿到近白的正文色，
叠在写死的白底上就是白底白字（2026-09-22 实测对比度 1.15，同样是"打字看不见"）。 */
.wx-input {
flex: 1; min-height: 36px; max-height: 120px; resize: none;
border: 1px solid var(--wx-line, #e5e5e5); border-radius: 6px;
padding: 8px 10px; font-size: calc(15px * var(--chat-input-scale, 1)); font-family: inherit; line-height: 1.4;
background: var(--wx-cell); color: var(--wx-text);
}
.wx-input:focus { outline: none; border-color: rgba(7,193,96,.6); }
/* @ 选人入口：长按头像只能 @ 到已经说过话的人（头像才在屏幕上），
而"点名让沉默的人开口"恰恰最需要 @——所以输入区必须有一个不依赖历史的入口。 */
.wx-at-btn {
flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--wx-line, #e5e5e5);
border-radius: 6px; background: #fff; color: #07c160;
font-size: 18px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.wx-at-btn:active { background: var(--wx-press); }
.wx-at-mask {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0,0,0,.35); z-index: 60;
display: flex; align-items: flex-end; justify-content: center;
}
.wx-at-sheet {
width: 100%; max-width: 540px; background: var(--wx-cell); color: var(--wx-text);
border-radius: 12px 12px 0 0;
padding-bottom: env(safe-area-inset-bottom); max-height: 70vh; overflow-y: auto;
}
.wx-at-title { font-size: 13px; color: var(--wx-text3, #9a9a9a); padding: 14px 16px 6px; }
.wx-at-cancel {
display: block; width: 100%; height: 48px; border: 0; border-top: 1px solid var(--wx-sep, #f2f2f2);
background: transparent; font-size: 15px; font-family: inherit; cursor: pointer; color: inherit;
}
.wx-send {
flex: 0 0 auto; height: 36px; padding: 0 16px; border: 0; border-radius: 6px;
background: #07c160; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
}
.wx-send:disabled { background: #c8c9cc; cursor: default; }
/* ---------- 建群页 ---------- */
.wx-pick-count { font-size: 13px; color: var(--wx-text3, #9a9a9a); }
.wx-pick-cell { position: relative; }
.wx-pick-cell.picked { background: rgba(7,193,96,.06); }
.wx-pick-check {
width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--wx-line, #ddd);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px; flex: 0 0 auto;
}
.wx-pick-cell.picked .wx-pick-check { background: #07c160; border-color: #07c160; }
.wx-pick-footer {
flex: 0 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--wx-line, #e5e5e5); background: var(--wx-bg, #f7f7f7);
}
.wx-pick-ok {
width: 100%; height: 44px; border: 0; border-radius: 6px;
background: #07c160; color: #fff; font-size: 16px; font-family: inherit; cursor: pointer;
}
.wx-pick-ok:disabled { background: #c8c9cc; cursor: default; }
/* ---------- 群设置 / 群记忆 ---------- */
.wx-entry-value { flex: 1; text-align: right; color: var(--wx-text3, #9a9a9a); font-size: 15px; }
.wx-entry-cell.wx-danger .wx-entry-label { color: #fa5151; }
.wx-group-section { font-size: 12px; color: var(--wx-text3, #9a9a9a); padding: 10px 16px 6px; }
.wx-mem-scroll { padding-bottom: 32px; }
.wx-mem-intro {
font-size: 13px; line-height: 1.6; color: var(--wx-text3, #8a8a8a);
padding: 14px 16px 6px;
}
/* ⛔ 同 .wx-input：白卡要自带主题文字色，否则 App 深色时卡内文字继承到近白色 = 白底白字 */
.wx-mem-card {
background: var(--wx-cell); color: var(--wx-text);
margin: 10px 12px; border-radius: 10px; padding: 12px 14px;
}
.wx-mem-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wx-mem-title { font-size: 14px; font-weight: 600; }
.wx-mem-edit {
border: 1px solid rgba(7,193,96,.5); background: transparent; color: #07c160;
border-radius: 12px; padding: 2px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.wx-mem-text { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.wx-mem-empty { font-size: 13px; color: var(--wx-text3, #9a9a9a); padding: 4px 0; }
.wx-mem-atom { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid #f2f2f2; }
.wx-mem-atom:first-of-type { border-top: 0; }
.wx-mem-cat {
flex: 0 0 auto; font-size: 11px; color: #07c160; background: rgba(7,193,96,.1);
border-radius: 8px; padding: 1px 6px; margin-top: 2px;
}
.wx-mem-atom-text { flex: 1; font-size: 14px; line-height: 1.55; word-break: break-word; }
.wx-mem-ops { flex: 0 0 auto; display: flex; gap: 6px; }
.wx-mem-op {
border: 1px solid var(--wx-line, #ddd); background: transparent; color: inherit;
border-radius: 10px; padding: 1px 8px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.wx-mem-op-danger { color: #fa5151; border-color: rgba(250,81,81,.4); }
.wx-mem-weave {
display: block; width: calc(100% - 24px); margin: 16px 12px 0; height: 44px;
border: 0; border-radius: 10px; background: var(--primary, #6b5b8e); color: #fff;
font-size: 15px; font-family: inherit; cursor: pointer;
}
.wx-mem-weave:disabled { opacity: .6; cursor: default; }
/* ==========================================================================
卷宗对话 · 2026-09-28 改版（chat.js openThread：流式 = 小说排版，沉浸 = 全屏舞台）
只动外观；消息 DOM（.msg-group / .scene-block / .msg-bubble）与流式增量渲染器一概未改。
========================================================================== */
/* 满屏：聊天时收起「半梦」页眉与底部标签（chat.js markThreadShell / main.js refreshBody 摘除） */
.app-shell.thread-mode .app-header,
.app-shell.thread-mode .app-nav { display: none; }
.app-body.body-thread .thread-wrap { padding: 0; gap: 0; }
/* 顶栏：← 头像 名字/在哪 ⋯ */
.th-top {
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
min-height: 56px;
padding: calc(6px + env(safe-area-inset-top)) 6px 6px;
background: var(--bg);
border-bottom: 1px solid var(--outline);
position: relative; z-index: 3;
}
.th-top-btn {
width: 42px; height: 42px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 50%; background: transparent; color: var(--on-bg);
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.th-top-btn:active { background: var(--surface-variant); }
.th-top-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cavatar.th-top-av { width: 34px; height: 34px; font-size: 14px; }
.th-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.th-top-name { flex-direction: row; align-items: baseline; gap: 6px; line-height: 1.25; }
.th-top-name .ui-name-main { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--on-bg); flex-shrink: 0; max-width: 100%; }
.th-top-name .ui-name-role { font-size: 12px; margin: 0; color: var(--on-surface-variant); opacity: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-top-sub { font-size: 11.5px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-top-sub:empty { display: none; }
/* ⋯ 弹层 */
.th-sheet { gap: 18px; }
.th-sheet .th-world-chips { flex-wrap: wrap; padding: 12px 14px; gap: 8px; }
.th-sheet .th-world-chips .chip { padding: 7px 14px; font-size: 13px; }
/* ---------- 流式：小说排版 ---------- */
.th-stream .thread-scroll { padding: 0 18px; scrollbar-width: none; }
.th-stream .thread-scroll::-webkit-scrollbar { display: none; }
.th-stream .thread { gap: 26px; padding-top: 16px; }
.th-stream .char-banner { height: 168px; border-radius: 18px; }
.th-stream .char-banner-info strong { font-size: 22px; }
/* 角色一侧整栏排：旁白是正文，台词是带引线的对白——不再是「灰色小字 + 聊天气泡」 */
.th-stream .msg-group.assistant { max-width: 100%; align-self: stretch; gap: 10px; }
.th-stream .msg-group.assistant .msg-live { gap: 10px; align-items: stretch; }
.th-stream .msg-group.assistant .scene-block { padding: 0; text-align: left; }
.th-stream .msg-group.assistant .scene-text {
font-size: calc(15px * var(--chat-scale, 1)); line-height: 1.95; letter-spacing: .02em;
/* 正文色降一档而不是 --on-surface-variant：深色主题下后者只剩约 3:1，旁白是正文、不能读着费劲 */
color: var(--on-bg); opacity: .74;
}
.th-stream .msg-group.assistant .scene-text::before { content: none; }
.th-stream .msg-group.assistant .msg-bubble {
background: none; border: none; border-radius: 0; box-shadow: none;
padding: 1px 0 1px 14px;
border-left: 2px solid var(--primary);
font-size: calc(16px * var(--chat-scale, 1)); line-height: 1.85; color: var(--on-bg);
}
.th-stream .msg-group.assistant .msg-head { margin-bottom: 0; }
.th-stream .msg-head .cavatar { width: 26px; height: 26px; font-size: 12px; }
.th-stream .msg-role { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--on-bg); opacity: 1; }
.th-stream .msg-role.user { color: var(--primary); }
/* 你这一侧保持紧凑的右侧气泡：一眼分清「我写的」与「故事本身」。
圆角必须走 --bub-* 令牌：流式是默认皮肤，用户侧气泡是唯一还在的「气泡」，
写死 18px 的话气泡样式预设在默认皮肤下完全看不见（2026-10-09 守卫抓到的漏接）。 */
.th-stream .msg-group.user { max-width: 82%; }
.th-stream .msg-group.user .msg-head { display: none; }
.th-stream .msg-group.user .msg-bubble {
border-radius: var(--bub-r) var(--bub-r) var(--bub-tail) var(--bub-r);
padding: 10px 15px;
}
.th-stream .msg-actions { margin-top: 0; padding: 0; }
.th-stream .msg-group.assistant .msg-actions { margin-left: 10px; }
/* 输入区：更紧的间距；图片按钮用线性图标 */
.th-stream .composer, .vn-wrap .composer { gap: 6px; padding-left: 10px; padding-right: 10px; }
.composer .attach-btn { display: inline-flex; align-items: center; justify-content: center; }
.send-btn.is-advance { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
/* ---------- 沉浸：全屏舞台 ---------- */
.vn-wrap { position: relative; background: #0d0f14; }
.vn-wrap .vn-stage {
border: none; border-radius: 0;
background: linear-gradient(180deg, #23252d 0%, #0d0f14 100%);
cursor: pointer;
}
/* 手机竖屏：立绘铺满（旧版 contain 两侧是大片暗边）；宽屏仍 contain，免得脸被裁掉 */
.vn-wrap .vn-figure { background-size: cover; background-position: center 12%; }
@media (min-aspect-ratio: 4/5) {
.vn-wrap .vn-figure { background-size: contain; background-position: center bottom; }
}
/* 上下两道暗角：顶栏与对话框压在画面上也看得清 */
.vn-wrap .vn-stage::before,
.vn-wrap .vn-stage::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.vn-wrap .vn-stage::before { top: 0; height: 140px; background: linear-gradient(rgba(8, 9, 12, .7), rgba(8, 9, 12, 0)); }
.vn-wrap .vn-stage::after { bottom: 0; height: 58%; background: linear-gradient(rgba(8, 9, 12, 0), rgba(8, 9, 12, .88)); }
.vn-wrap .th-top {
position: absolute; top: 0; left: 0; right: 0;
background: none; border-bottom: none; color: #f3efe8;
}
.vn-wrap .th-top-btn { color: #f3efe8; }
.vn-wrap .th-top-btn:active { background: rgba(255, 255, 255, .12); }
.vn-wrap .th-top-name .ui-name-main { color: #f3efe8; }
.vn-wrap .th-top-name .ui-name-role, .vn-wrap .th-top-sub { color: rgba(243, 239, 232, .7); }
.vn-wrap .cavatar.th-top-av { border-color: rgba(255, 255, 255, .25); }
/* 对话框：深色半透明压在舞台下方（不用 backdrop-filter：大面积模糊层在安卓 WebView 上易漏绘） */
.vn-wrap .vn-box {
z-index: 2; margin: 0 12px 14px; padding: 14px 16px 10px;
border-radius: 16px;
background: rgba(16, 17, 22, .78);
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
color: #f3efe8;
max-height: min(46%, 380px);
}
.vn-wrap .vn-nameplate { color: #f0a88c; font-size: 16px; }
.vn-wrap .vn-nameplate.user { color: #a9c7b4; }
.vn-wrap .vn-counter { color: rgba(243, 239, 232, .5); }
.vn-wrap .vn-content { font-size: calc(16px * var(--chat-scale, 1)); line-height: 1.85; }
.vn-wrap .vn-line { color: #f3efe8; }
.vn-wrap .vn-narr { font-size: calc(14px * var(--chat-scale, 1)); line-height: 1.85; color: rgba(243, 239, 232, .66); }
.vn-wrap .vn-line.error { color: #ffb4a0; }
.vn-wrap .vn-steppers .chip {
min-height: 32px; padding: 5px 12px; font-size: 12px;
background: rgba(255, 255, 255, .08); color: rgba(243, 239, 232, .85);
border-color: rgba(255, 255, 255, .14);
}
.vn-wrap .vn-name-row .cavatar { border-color: rgba(255, 255, 255, .25); }
/* 水位环 24px、按钮 46px，都贴底对齐时环会比同行低半截：垫到与单行输入框同一条中线（多行时仍贴底） */
.th-stream .composer .ctx-ring, .vn-wrap .composer .ctx-ring { margin: 0 2px 11px 4px; }
.th-stream .composer .attach-btn, .vn-wrap .composer .attach-btn { align-self: flex-end; margin-bottom: 4px; }
/* 没立绘的角色：舞台中央一枚大号首字（有立绘 / 世界场景图时藏掉） */
.vn-initial { display: none; }
.vn-wrap .vn-stage:not(.has-art) .vn-initial {
display: flex; align-items: center; justify-content: center;
position: absolute; left: 0; right: 0; top: 0; bottom: 34%;
font-family: var(--font-display); font-size: 148px; line-height: 1;
color: rgba(240, 168, 140, .16); pointer-events: none; user-select: none;
}
/* ---------- 卷宗对话 · 细节二轮（2026-09-28） ---------- */
/* 消息头 / 沉浸名牌只显示名字：身份已经在顶栏写了，每条都重复一遍是噪音（uiName 保留完整 textContent） */
.msg-role .ui-name, .vn-nameplate .ui-name { display: inline; }
.th-stream .msg-role .ui-name-role, .vn-nameplate .ui-name-role { display: none; }
/* 旧消息的操作栏：以前只是 opacity:0，位置还占着 ⇒ 每条消息底下一块空白。
触屏上（没有悬停）直接不占位——长按菜单里同样有这些操作；桌面端保留悬停显现 */
@media (hover: none) {
.th-stream .msg-group:not(.is-latest) .msg-actions { display: none; }
}
/* 你写的动作（括号 / 星号）：与 TA 那侧同一套正文排版，只是靠右——不再是灰色小字 + ✦ */
.th-stream .msg-group.user .scene-block { padding: 0 2px; }
.th-stream .msg-group.user .scene-text {
font-size: calc(14px * var(--chat-scale, 1)); line-height: 1.8; letter-spacing: .02em;
color: var(--on-bg); opacity: .62;
}
.th-stream .msg-group.user .scene-text::before { content: none; }
/* 「续」是空输入时最常看到的键：别淡到看不出能点 */
.th-stream .send-btn.is-advance, .vn-wrap .send-btn.is-advance { opacity: 1; border-color: var(--primary); }
/* 沉浸：输入栏跟舞台连成一片（以前是一条浅色横在深色画面底下）。只改颜色，不动尺寸与层 */
.vn-wrap .composer { background: #0d0f14; border-top-color: rgba(255, 255, 255, .08); }
.vn-wrap .composer textarea {
background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #f3efe8;
}
.vn-wrap .composer textarea::placeholder { color: rgba(243, 239, 232, .5); opacity: 1; }
.vn-wrap .composer textarea:focus { border-color: #f0a88c; box-shadow: none; }
.vn-wrap .composer .attach-btn { color: rgba(243, 239, 232, .75); }
.vn-wrap .composer .attach-btn:hover { background: rgba(255, 255, 255, .08); }
.vn-wrap .ctx-ring::after { background: #0d0f14; }
.vn-wrap .ctx-ring { --outline: rgba(255, 255, 255, .18); }
.vn-wrap .ctx-ring-txt { color: rgba(243, 239, 232, .6); }
.vn-wrap .send-btn.is-advance { background: rgba(255, 255, 255, .06); color: #f0a88c; border-color: rgba(240, 168, 140, .6); }
.vn-wrap .send-btn.is-disabled { background: rgba(255, 255, 255, .1); color: rgba(243, 239, 232, .6); }
/* ==========================================================================
梦信 · 输入区对齐微信（2026-09-28）：面板嵌在输入栏下方、表情内嵌进文字
wechat.js openWechatChat：.wx-panel-box 跟在 .ta-composer 后面、随文档流撑开，
.ta-wechat 是 flex 列、.ta-thread flex:1 ⇒ 面板打开时聊天区自动上移，不遮挡、无遮罩。
========================================================================== */
.ta-composer .ta-wx-emoji svg, .ta-composer .ta-wx-plus svg { width: 27px; height: 27px; display: block; }
.ta-composer .ta-wx-emoji { font-size: 0; }
/* 面板打开时安全区交给面板：输入栏不再垫底部安全区 */
.ta-wechat.wx-panel-open .ta-composer { padding-bottom: 7px; }
.wx-panel-box {
flex-shrink: 0; position: relative;
height: calc(258px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--wx-bar, #F7F7F7); border-top: 1px solid var(--wx-sep, rgba(0, 0, 0, 0.06));
overflow: hidden;
}
/* 表情面板：8 列网格可滚动；右下角「⌫ / 发送」浮在网格上（微信同款） */
.wx-emoji-panel { position: relative; height: 100%; }
.wx-emoji-grid {
height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
display: grid; grid-template-columns: repeat(8, 1fr); align-content: start;
gap: 6px 2px; padding: 14px 10px 64px;
}
.wx-emoji-item {
aspect-ratio: 1; border: none; background: transparent; padding: 0; border-radius: 6px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-emoji-item img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; }
.wx-emoji-item:active { background: var(--wx-press, #E5E5E5); }
.wx-emoji-actions {
position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px;
padding: 8px 0 0 16px;
background: linear-gradient(to right, transparent, var(--wx-bar, #F7F7F7) 16px);
}
.wx-emoji-del, .wx-emoji-send {
height: 38px; border: none; border-radius: 6px; font-family: inherit; cursor: pointer;
display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.wx-emoji-del { width: 52px; background: var(--wx-cell, #fff); color: var(--wx-text, #191919); }
.wx-emoji-del svg { width: 24px; height: 24px; }
.wx-emoji-del:active { background: var(--wx-press, #E5E5E5); }
.wx-emoji-send { min-width: 62px; padding: 0 14px; background: #07C160; color: #fff; font-size: 15px; font-weight: 500; }
.wx-emoji-send:active { background: #06AD56; }
/* ＋ 面板：4 列图标网格（微信安卓 / iOS 同款的白色圆角方块 + 灰字） */
.wx-plus-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 8px;
padding: 22px 18px; align-content: start;
}
.wx-plus-item {
display: flex; flex-direction: column; align-items: center; gap: 8px;
border: none; background: transparent; padding: 0; cursor: pointer; font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.wx-plus-ico {
width: 60px; height: 60px; border-radius: 14px;
background: var(--wx-cell, #fff); color: var(--wx-text, #191919);
display: flex; align-items: center; justify-content: center;
}
.wx-plus-ico svg { width: 30px; height: 30px; }
.wx-plus-item:active .wx-plus-ico { background: var(--wx-press, #E5E5E5); }
.wx-plus-txt { font-size: 12px; color: var(--wx-text2, #999); }
/* 气泡里的内嵌小黄脸：跟字号走、与文字基线对齐；整条只有一个表情时稍放大（微信单发一个小黄脸也这样） */
.ta-bubble .wx-emoji { width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 1px; object-fit: contain; }
.ta-bubble.wx-emoji-only .wx-emoji { width: 30px; height: 30px; vertical-align: middle; margin: 0; }
/* 聊天顶栏状态：以前没有样式，继承了名字的 17px 粗体（「● 正醒着」比名字还抢眼）。
现在是微信副标题那一档：11px 常规灰字 + 一个小色点（醒着绿、在梦里浅灰、在别处空心） */
.ta-wechat-header .ta-wx-name .ta-wx-state {
display: flex; align-items: center; justify-content: center; gap: 4px;
margin-top: 1px; font-size: 11px; font-weight: 400; line-height: 1.2;
color: var(--wx-text2, #999);
}
.ta-wechat-header .ta-wx-name .ta-wx-state::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--wx-text3, #B2B2B2);
}
.ta-wechat-header .ta-wx-name .ta-wx-state.on::before { background: #07C160; }
.ta-wechat-header .ta-wx-name .ta-wx-state.away::before { background: transparent; box-shadow: inset 0 0 0 1px var(--wx-text3, #B2B2B2); }
.ta-wechat-header .ta-wx-name .ta-wx-state.writing::before { display: none; }
/* 「我」页入口图标（微信同款：每个入口左侧一枚着色图标） */
.wx-me-ico { width: 24px; height: 24px; margin-right: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wx-me-ico svg { width: 24px; height: 24px; }
.wx-me-ico.tone-green { color: #07C160; }
.wx-me-ico.tone-blue { color: #3E8EEF; }
.wx-me-ico.tone-orange { color: #F2A33A; }
.wx-me-ico.tone-gray { color: var(--wx-text2, #999); }
/* 设置页分组小标题（微信设置页分组上方的灰字） */
.wx-sec-title { padding: 14px 16px 6px; font-size: 13px; color: var(--wx-text2, #999); }
/* 列表行：左侧标题永不折行、右侧灰字提示放不下就省略（微信设置页同款）。
以前反过来——标题可缩可折、提示不缩，于是「显示没说出口的部分」被右侧长提示挤成两行（「分」单独一行） */
.wx-entry-cell .wx-entry-label { flex: 1 0 auto; white-space: nowrap; }
.wx-entry-cell .wx-entry-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⛔ 群聊气泡被提前折行（2026-09-28 体检发现，上面那段注释想修但没修住）：
.wx-msg-box 是收缩宽度（flex: 0 1 auto），气泡的 max-width:68% 是相对这个**已经按内容收缩过的盒子**算的
⇒ 盒子先按内容定宽、气泡再缩到它的 68% ⇒ 每条消息都在自然宽度的三分之二处被强行折行
（实测「今天雨好大😭」5 个字折成两行、「来书店躲雨吧，我给你 / 们留了热茶」右边空着一大块）。
改为：68% 上限挂在盒子上（相对行宽，行宽是确定的），气泡在盒子里占满 100% ⇒ 与单聊同一个折行宽度。 */
.ta-msg .wx-msg-box { max-width: 68%; }
.ta-msg .wx-msg-box .ta-bubble { max-width: 100%; }
/* 群聊输入栏与单聊对齐（2026-09-28）：@ 与表情都是无框图标键，发送键有字才出现（group.js syncSend） */
.wx-input-row { gap: 6px; align-items: flex-end; }
.wx-at-btn {
width: 38px; height: 38px; border: none; background: transparent; color: var(--wx-text, #191919);
font-size: 22px; font-weight: 400; display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.wx-emoji-btn {
flex: 0 0 auto; width: 38px; height: 38px; border: none; background: transparent; padding: 0;
color: var(--wx-text, #191919); display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-emoji-btn svg { width: 27px; height: 27px; }
.wx-at-btn:active, .wx-emoji-btn:active { background: var(--wx-press); border-radius: 6px; }
.wx-input-wrap.wx-panel-open .wx-input-row { padding-bottom: 8px; }
/* 内嵌小黄脸通用尺寸（梦圈正文 / 评论等非气泡处；气泡里另有同名规则） */
img.wx-emoji { width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 1px; object-fit: contain; }
/* 深色模式下自己的绿气泡用黑字（2026-09-28 体检：白字压 #3EB575 对比度只有 2.49）。
真微信深色模式也是绿底黑字（约 8:1）。--wx-bubble-user-text 同时管着 TA 气泡的字色，不能改令牌，
所以只对自己的气泡单独覆盖；浅色主题本来就是这个值，行为不变。 */
.wx-light .ta-msg.user .ta-bubble { color: rgba(0, 0, 0, 0.9); }
/* 左滑出来的「取消置顶」：白字压 #C8C9CD 只有 1.65，换 iOS 系统灰（约 3.3:1） */
.wx-swipe-btn:not(.is-pin):not(.is-del) { background: #8E8E93; }
/* ===== 入梦 · 重新生成这一幕（2026-09-29） ===== */
.dream-regen { display: flex; justify-content: flex-start; margin: -2px 0 4px; }
.dream-regen-btn {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
border: 1px solid var(--outline); border-radius: 999px; background: transparent;
color: var(--on-surface-variant); font-size: 12px; cursor: pointer;
}
.dream-regen-btn:hover { color: var(--on-surface); background: var(--surface-variant); }
.dream-line.regen-old { opacity: .35; transition: opacity .2s; }
/* ===== 入梦 · 点按改行动（2026-10-04 工单） =====
只有最新一次行动可改（后面至多跟一条没被接话的旁白）：细虚线描一圈 + 指针，
克制地示意「可以点」，不抢戏；点旧行由 JS toast 提示。 */
.dream-line.player.editable { cursor: pointer; }
.dream-line.player.editable .dream-line-body {
outline: 1px dashed var(--outline);
outline-offset: 3px;
}
@media (hover: hover) {
.dream-line.player.editable:hover .dream-line-body { filter: brightness(1.12); }
}
/* 入梦：玩家自己的括号 / 星号动作（2026-09-29）——在主色气泡里独占一行、斜体退一档，与台词分开 */
.dream-line.player .dream-act { display: block; color: inherit; opacity: .8; font-style: italic; }
.dream-line.player .dream-act + .dream-act { margin-top: 2px; }
/* 用户自己发的（动作）灰字条：靠右，挨着他自己的气泡（头像 40 + 边距），与 TA 的居中旁白区分（2026-09-29） */
.wx-narr.wx-narr-user { text-align: right; padding: 2px 62px 0 16px; }
/* 聊天详情里开关下面的一行说明（2026-09-29 同步现实时间） */
.wx-entry-note { padding: 0 16px 12px; font-size: 12px; line-height: 1.6; color: var(--wx-text3); }
/* 搜索聊天记录（msg-search.js）：普通对话用应用主题色；命中词高亮；定位后的高亮圈 */
.wx-search-overlay.ms-app { background: var(--bg); color: var(--on-bg); border: 1px solid var(--outline); }
.ms-app .wx-sr-head { border-color: var(--outline); }
.ms-app .wx-sr-head input { background: var(--surface-variant); color: var(--on-bg); border: 1px solid var(--outline); }
.ms-app .wx-sr-count, .ms-app .wx-sr-time, .ms-app .wx-sr-name, .ms-app .wx-sr-empty { color: var(--on-surface-variant); }
.ms-app .wx-sr-text { color: var(--on-bg); }
.ms-app .wx-sr-close { color: var(--primary); }
.ms-app .wx-sr-item:active { background: var(--surface-variant); }
.ms-app .wx-sr-avatar { display: none; }
.wx-sr-text .ms-mark { background: rgba(7, 193, 96, 0.25); color: inherit; border-radius: 3px; padding: 0 1px; }
.ms-app .wx-sr-text .ms-mark { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.ms-hit { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 12px; transition: outline-color 0.4s; }
/* ===== 创作者社区（modules/community.js；广场页第二分段） ===== */
.plaza-official[hidden], .plaza-community[hidden] { display: none !important; }
.plaza-seg { display: flex; gap: 6px; padding: 4px; margin: 4px 0 14px; background: var(--surface-variant); border-radius: 999px; }
.plaza-seg-btn { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--on-surface-variant); font-size: 14px; cursor: pointer; }
.plaza-seg-btn.active { background: var(--bg); color: var(--on-bg); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.cm-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 排序下拉（自绘，不用原生