@import url('/fonts/style.css'); @import url('https://fonts.font.im/css2?family=Noto+Serif+SC:wght@400;600&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* 背景设到 根元素 —— iOS PWA 下能可靠铺满到物理屏幕边缘（含 safe-area / home indicator 区） */ html{background:var(--app-bg,#000);background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100vh;min-height:100lvh;margin:0;padding:0;color-scheme:dark} body{min-height:100vh;min-height:100lvh;overflow:hidden;background:var(--app-bg,#000);background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--text,#e8e8e8);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;margin:0;padding:0} /* 保留一个 fixed 背景层作为后备（万一 html 背景有 bug，这层接管） */ #bg-layer{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:-1;background:var(--app-bg,#000);background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none} html::before{content:'';position:fixed;top:calc(0px - env(safe-area-inset-top, 0px));left:calc(0px - env(safe-area-inset-left, 0px));right:calc(0px - env(safe-area-inset-right, 0px));bottom:calc(0px - env(safe-area-inset-bottom, 0px));background:var(--app-bg,#000);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-10;pointer-events:none} textarea,input,select{background:transparent;color:inherit} ::-webkit-scrollbar{display:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} button:active{opacity:.7} input,textarea{font-family:inherit;color:var(--text,#e8e8e8);-webkit-appearance:none} input:focus,textarea:focus{outline:none} .hidden{display:none!important} :root{ --accent:var(--accent);--accent-rgb:232,160,191;--accent-dim:rgba(var(--accent-rgb),.15); --bg:#000;--surface:rgba(255,255,255,.05);--border:rgba(255,255,255,.06); /* —— 主题双锚点：选两个色点，下面整套灰阶跟着派生 —— */ --th-bg: #000; /* 主题底色（最深锚） */ --th-ink: #e8e8e8; /* 主题墨水色（最亮锚 / 文字色） */ /* —— 文字 5 级：text/text-2/text-3 跟 ink 走，dim/faint 跟 accent 走（带主题温度） —— */ --text: var(--th-ink); /* 主文字 100% ink */ --text-2: color-mix(in srgb, transparent 22%, var(--th-ink)); /* 78% ink — 副文字 */ --text-3: color-mix(in srgb, transparent 45%, var(--th-ink)); /* 55% ink — 三级 */ --dim: color-mix(in srgb, transparent 50%, var(--accent)); /* 50% accent — 弱文字带主题温度 */ --faint: color-mix(in srgb, transparent 70%, var(--accent)); /* 30% accent — 极弱（时间戳类）带粉调 */ /* —— 表面层 —— */ /* surface-1: modal/sheet/uiConfirm 主体（深半透明，配 backdrop-filter 玻璃感） */ --surface-1: rgba(20,20,24,.82); /* surface-2/3: 小元素背底（半透明白，让主题背景色透过来） */ --surface-2: rgba(255,255,255,.04); --surface-3: rgba(255,255,255,.07); /* —— 边框：用 accent 半透明派生（跟着主题色走，不跟死黑灰挂钩） —— */ --border-1: rgba(var(--accent-rgb), .22); --border-2: rgba(var(--accent-rgb), .35); /* —— 状态色：保留色感传达功能，未来可调 —— */ --danger: #ff6b6b; /* 删除/危险 */ --danger-strong: #ff5050; /* 强警示 */ --info: var(--accent); /* 搜索/信息 — 接 accent，跟主题走 */ --sys: #7ab; /* system 消息 */ --tool: #818cf8; /* 工具调用 */ --heart: #e879f9; /* 收藏/喜欢 */ /* —— 独立可调变量：阴影 / 分隔线 / 时间戳 / 模型名（默认跟随主题派生，applyCfg 可覆写）—— */ /* 注意：--shadow-color 故意不在这里设默认值，让 text-shadow 用 fallback color-mix(currentColor) */ /* 用户在设置里调 cfg.shadowColor 后才会被 applyCfg 写到 :root 强制覆盖 */ --sep-color: rgba(255,255,255,.22); /* 分隔线色 — 浓一点深主题清晰可见 */ --time-color: var(--faint); /* 气泡/语音时间戳 — 默认 faint */ --model-name-color: var(--text); /* 顶栏 ai-name */ /* 全屏 overlay 遮罩（modal 后面那层）*/ --overlay: rgba(0,0,0,.6); /* —— 卡片层（sidebar/modal/sheet）—— */ --card-alpha: .97; /* 白底浓度（0=完全透, 1=纯白；背景花就调高让卡片更显眼）*/ --card-tint: .04; /* 主题色染色强度（0=无染色, 1=最浓；让卡片带主题温度）*/ --ai-bg:rgba(var(--accent-rgb),.18);--ai-bd:rgba(var(--accent-rgb),.3); --user-bg:rgba(255,255,255,.08);--user-bd:rgba(255,255,255,.08); --safe-b:max(env(safe-area-inset-bottom,0px), 24px);--safe-t:env(safe-area-inset-top,0px); --font-chat:'LXGW WenKai','Noto Serif SC','Songti SC',Georgia,serif; --font-size:15px;--line-h:1.6;--text-width:92%;--avatar-size:32px; --bub-pad-v:6px;--bub-pad-h:10px;--bub-radius:18px; --bub-align:center;--ts-gap:10px; --text-pad-top:0px;--text-pad-bot:0px;--ts-off-y:0px;--ts-off-x:0px; } /* —— 浅色主题覆写：body[data-theme="light"] 时全套翻转 —— */ body[data-theme="light"]{ --th-bg: #fafafa; /* 主题底色翻浅 */ --th-ink: #222; /* 墨水色翻深 */ --sep-color: rgba(0,0,0,.32); /* 分隔线/虚边框翻深，浓一点能看清 */ --surface-1: rgba(255,255,255,.82); --surface-2: rgba(0,0,0,.04); --surface-3: rgba(0,0,0,.07); --overlay: rgba(255,255,255,.4); /* modal 后面遮罩翻浅 */ /* dim/faint 用 ink 派生（深半透），不用 accent（粉文字叠粉底看不清）*/ --dim: color-mix(in srgb, transparent 50%, var(--th-ink)); --faint: color-mix(in srgb, transparent 72%, var(--th-ink)); } /* 浅色主题下 .ctx / .pmenu 翻浅玻璃（之前 inline 死写半透深底没跟主题走）*/ body[data-theme="light"] .ctx, body[data-theme="light"] .pmenu{ background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04)),rgba(255,255,255,.78)!important; } /* 浅主题 sidebar / modal / sheet：白底浓度 + 主题色染色 都接到变量给用户调 */ body[data-theme="light"] #sidebar, body[data-theme="light"] .modal, body[data-theme="light"] .sheet{ background:linear-gradient(180deg,rgba(var(--accent-rgb),var(--card-tint)),rgba(var(--accent-rgb),calc(var(--card-tint) / 2))),rgba(255,252,253,var(--card-alpha))!important; backdrop-filter:blur(8px) saturate(120%)!important; -webkit-backdrop-filter:blur(8px) saturate(120%)!important; } body[data-theme="light"] #sidebar{ border-right:1px solid rgba(var(--accent-rgb),.18); } /* sheet-mask 浅主题翻浅遮罩 */ body[data-theme="light"] .sheet-mask.open{ background:rgba(255,255,255,.18); } /* 顶栏/输入框"实底"模式 — 浅主题翻浅半透 */ body[data-theme="light"].hdr-solid #hdr, body[data-theme="light"].inp-solid .input-wrap{ background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.03)),rgba(255,255,255,.7); } .screen{position:fixed;inset:0;display:block} /* Login */ #login-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:var(--safe-t);padding-bottom:var(--safe-b)} #login-screen .login-box{text-align:center;padding:0 40px;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center} #login-screen input{width:100%;padding:14px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:15px;margin-bottom:16px;text-align:center} #login-screen input::placeholder{color:var(--faint)} #login-screen button{width:100%;padding:14px;border-radius:14px;background:var(--accent);color:#000;font-size:16px;font-weight:600} /* Sidebar */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80} #sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.02)),rgba(0,0,0,.35);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-right:1px solid rgba(var(--accent-rgb),.18);z-index:85;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;padding-top:var(--safe-t)} #sidebar.open{transform:translateX(0)} .sb-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px} .sb-list{flex:1;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to bottom,black 0,black calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,black 0,black calc(100% - 28px),transparent 100%)} .sb-footer{flex-shrink:0;display:flex;gap:6px;padding:10px 12px calc(10px + var(--safe-b))} .sb-foot-btn{flex:1;padding:9px 4px;background:rgba(255,255,255,.04);border:1px solid var(--border-1);border-radius:9px;color:var(--dim);font-size:12px;cursor:pointer;font-family:inherit} .sb-foot-btn:active{background:rgba(255,255,255,.08)} .sb-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;margin-bottom:4px;cursor:pointer} .sb-item:active,.sb-item.on{background:var(--accent-dim)} .sb-item .preview{flex:1;min-width:0;font-size:14px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-item.on .preview{color:var(--accent)} .sb-item .time{font-size:11px;color:var(--faint);margin-top:2px} .sb-item .del{color:var(--faint);padding:4px 8px;font-size:16px;flex-shrink:0} /* Header */ #hdr{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--hdr-top-pad, 12px) + var(--safe-t)) 14px 12px;border-bottom:none;z-index:10} body.hdr-solid #hdr{background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04)),rgba(20,20,24,.85);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)} body.hdr-glass #hdr{background:rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} body.hdr-transparent #hdr{background:transparent} .hdr-c{display:flex;align-items:center;gap:6px;cursor:pointer} .hdr-c span:first-child,#ai-name-el{font-size:var(--hdr-title-size,20px)!important;font-weight:700!important;color:var(--model-name-color)!important;letter-spacing:.5px} .hdr-c span:last-child{font-size:17px} .ic{padding:8px;color:var(--text-3);display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px} .ic.accent{color:var(--accent)} .ic svg{display:block} /* Messages */ #msgs{position:fixed;top:calc(var(--hdr-h,60px) - 40px);bottom:calc(var(--inp-h,72px) - 40px);left:0;right:0;overflow-y:auto;overflow-x:hidden;padding:calc(40px + 4px) 12px calc(40px + 30px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* Date Separator */ .dsep{display:flex;align-items:center;justify-content:center;padding:16px 0 8px;gap:12px} .dsep::before,.dsep::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--sep-color),transparent)} .dsep span{color:var(--sep-color);font-size:12px;letter-spacing:1px} /* Message Group */ .mg{display:flex;flex-direction:column;margin-bottom:0} .mg.grp-only, .mg.grp-g-first{margin-top:var(--msg-gap, 10px)} .mg.grp-g-mid, .mg.grp-g-last{margin-top:2px} .mg.ai{align-items:flex-start} .mg.user{align-items:flex-end} .mg-row{display:flex;align-items:flex-end;gap:6px;width:100%} .mg-row.row-transcript-open { align-items: flex-start; } .mg-row.row-transcript-open > .av { align-self: flex-end; } .mg.user .mg-row{flex-direction:row-reverse} .mg-body{display:flex;flex-direction:column;gap:2px;flex:1} .mg.user .mg-body{align-items:flex-end;max-width:min(var(--text-width), var(--user-max-pct, 70%))} .mg.ai .mg-body{align-items:flex-start;max-width:var(--text-width)} /* Avatar */ .av{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.10);align-self:flex-end;overflow:hidden;background-size:cover;background-position:center;font-size:calc(var(--avatar-size) * 0.47)} .av.ai{background:linear-gradient(135deg,#2a1a2e,#1a1a2e)} .av.usr{background:linear-gradient(135deg,#1a2a1e,#1a1a1e)} /* Bubble */ .bub{padding:max(0px, var(--bub-pad-v)) var(--bub-pad-h);max-width:100%;position:relative} .bub-text{font-size:var(--font-size);line-height:var(--line-h);white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;line-break:strict;font-family:var(--font-chat)} .bub-text p{margin:0 0 .5em}.bub-text p:last-child{margin:0} /* 纯文本模式：段间距收紧（连发模式保持原样） */ body.text-mode .bub-text p{margin:0 0 .3em} body.text-mode .bub-text ul,body.text-mode .bub-text ol{margin:2px 0} body.text-mode .bub-text li{margin:0 0 .2em} .bub-text code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:13px;font-family:'SF Mono','Fira Code',monospace} .bub-text pre{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;margin:6px 0;overflow-x:auto;position:relative} .bub-text pre code{background:none;padding:0;font-size:13px;line-height:1.5} .bub-text h1,.bub-text h2,.bub-text h3{font-size:var(--font-size);font-weight:600;margin:6px 0 3px;font-family:inherit} .bub-text ul,.bub-text ol{padding-left:20px;margin:3px 0}.bub-text li{margin:0 0 .5em} .bub-text blockquote{border-left:3px solid var(--accent);padding-left:10px;color:var(--text-3);margin:4px 0} .bub-text a{color:var(--accent);text-decoration:none} .bub-text table{border-collapse:collapse;margin:6px 0;font-size:13px;width:100%} .bub-text th,.bub-text td{border:1px solid var(--border-2);padding:6px 10px;text-align:left} /* Bubble shapes */ .has-b{border:1px solid var(--ai-bd)} .has-b.ai-b{background:var(--ai-bg);border-color:var(--ai-bd)} .has-b.usr-b{background:var(--user-bg);border-color:var(--user-bd)} .has-b.only{border-radius:var(--bub-radius)} .has-b.ai-b.only{border-radius:var(--bub-radius) var(--bub-radius) var(--bub-radius) 4px !important} .has-b.usr-b.only{border-radius:var(--bub-radius) var(--bub-radius) 4px var(--bub-radius) !important} .has-b.ai-b.first{border-radius:var(--bub-radius) var(--bub-radius) var(--bub-radius) 6px !important} .has-b.ai-b.mid{border-radius:6px var(--bub-radius) var(--bub-radius) 6px !important} .has-b.ai-b.last{border-radius:6px var(--bub-radius) var(--bub-radius) 4px !important} .has-b.usr-b.first{border-radius:var(--bub-radius) var(--bub-radius) 6px var(--bub-radius) !important} .has-b.usr-b.mid{border-radius:var(--bub-radius) 6px 6px var(--bub-radius) !important} .has-b.usr-b.last{border-radius:var(--bub-radius) 6px 4px var(--bub-radius) !important} /* ─ 图片 + 文字下方：图片用 first 形态衔接下方文字气泡（上圆，下方与气泡相连）─ */ .mg.user img.msg-img.img-with-text { border-radius: var(--bub-radius) var(--bub-radius) 6px var(--bub-radius) !important; } body.same-side .mg.user img.msg-img.img-with-text, body.msgs-centered .mg.user img.msg-img.img-with-text { border-radius: var(--bub-radius) var(--bub-radius) var(--bub-radius) 6px !important; } /* ─ 文件气泡：方圆矩形（4 角统一），不画尾巴 ─ */ .bub.file-bub.has-b { border-radius: var(--bub-radius) !important; } /* Tailed bubbles: SVG draws border+fill；保留 border-radius（让 backdrop-filter 按容器圆角裁剪，不再溢出直角） */ .has-b.has-tail{border:none!important;background:none!important;position:relative} .has-tail .bub-inner,.has-tail .bub-text,.has-tail>*:not(.tail-svg):not(.ver){position:relative;z-index:1} .tail-svg{position:absolute;top:-0.5px;left:0;z-index:0;pointer-events:none;overflow:visible} /* Ensure parent containers don't clip tail overflow */ .mg-body,.mg-row{overflow:visible} .no-b{background:transparent;padding:max(0px, var(--bub-pad-v)) 0} /* Inline timestamp — flex right-center in bubble mode */ .bub-inner{display:flex;align-items:var(--bub-align,center);gap:var(--ts-gap,10px);margin-top:var(--bub-squeeze,0px);margin-bottom:var(--bub-squeeze,0px)} .bub-inner .bub-text{flex:1;min-width:0;padding-top:var(--text-pad-top);padding-bottom:var(--text-pad-bot)} .its{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--time-color);line-height:1;white-space:nowrap;font-family:-apple-system,sans-serif;transform:translate(var(--ts-off-x),var(--ts-off-y))} .chk svg{width:16px;height:10px;flex-shrink:0} /* No-bubble timestamp stays below */ .nb-ts{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:11px;color:var(--faint)} /* Heart */ .hrt{padding:2px;flex-shrink:0;align-self:center;opacity:.5;transition:opacity .2s;cursor:pointer} .hrt.open{opacity:1} .hrt.pulse{opacity:1;animation:heartBeat 1s ease-in-out infinite} @keyframes heartBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}} /* Thinking block — 旧版（已读不回 silent_mg 仍在用） */ .think{margin-top:6px;padding:10px 14px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.12);border-radius:12px;font-size:13px;color:rgba(var(--accent-rgb),0.78);line-height:1.6;overflow:hidden;position:relative} .think-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:var(--accent);font-size:11px} .think .hrt-corner{position:absolute;top:8px;right:8px;opacity:1;padding:4px;cursor:pointer} /* Thinking chip — 仿 Claude 官端：心 + 空格 + 虚字 + 小尖括号；纯一行，无气泡无背景 作为 .mg 直接子元素时跨整 mg 宽度（贴最左，不被头像缩进） */ .mg > .think-chip{ width:100%; align-self:stretch; margin:2px 0 4px 0; padding-left:0; } /* 多段思考 chip 在 mg-body 内时，拉回 .mg 最左（抵消头像列偏移）， 不影响居中 / 一起听（paired-av）模式 */ body.show-ai-av:not(.msgs-centered):not(.paired-av) .mg.ai:has(.av-col) .mg-body > .think-chip, body.show-ai-av:not(.msgs-centered):not(.paired-av) .mg.ai:has(.av-col) .mg-body > .think-chip-wrap { margin-left: calc(-1 * (var(--avatar-size, 32px) + 6px)); width: calc(100% + var(--avatar-size, 32px) + 6px); max-width: none; align-self: stretch; } .think-chip-wrap{display:flex;flex-direction:column;align-items:stretch;width:100%} .think-chip{ display:flex; align-items:center; gap:6px; padding:4px 6px 4px 0; margin:2px 0 4px 0; user-select:none; align-self:stretch; min-height:22px; background:transparent; border:none; width:100%; } .think-chip .tc-heart{ flex-shrink:0; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:4px; margin:-4px 0; cursor:pointer; transition:transform .15s; -webkit-tap-highlight-color:transparent; } .think-chip .tc-heart:active{transform:scale(.85)} .think-chip .tc-heart svg{width:14px;height:14px;display:block;transition:filter .2s} .think-chip-wrap.expanded .tc-heart svg{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.5))} .think-chip .tc-main{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; cursor:pointer; transition:opacity .15s; } .think-chip .tc-main:active{opacity:.6} .think-chip .tc-summary{ flex:1; min-width:0; font-size:12.5px; color:rgba(var(--accent-rgb),.6); font-style:italic; font-family:'Songti SC','STKaiti','LXGW WenKai',serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.3px; line-height:1.5; } .think-chip .tc-caret{ flex-shrink:0; font-size:14px; color:rgba(var(--accent-rgb),.5); line-height:1; font-weight:300; } .think-chip-body{ margin:2px 0 8px 22px; padding:10px 14px; background:rgba(var(--accent-rgb),.05); border-left:2px solid rgba(var(--accent-rgb),.32); border-radius:0 8px 8px 0; font-size:12.5px; color:var(--text-2); line-height:1.75; white-space:pre-wrap; word-break:break-word; font-family:'Songti SC','STKaiti','LXGW WenKai',serif; letter-spacing:.3px; animation:think-expand-in .28s cubic-bezier(.2,.85,.25,1); transform-origin:top left; } @keyframes think-expand-in{ from{opacity:0;transform:translateY(-4px) scaleY(.92);max-height:0} to{opacity:1;transform:translateY(0) scaleY(1);max-height:2000px} } /* 答完 chip 的 inline 展开 — 自有样式（不复用思考链） */ /* 问题：粗 + 大，一眼看出层级；回答：稍小、柔和；左侧 SVG 图标 */ .ask-answer-body{ margin:4px 0 8px 22px; padding:11px 14px 12px; background:rgba(255,255,255,.035); border-radius:10px; font-family:inherit; letter-spacing:.1px; white-space:normal; animation:think-expand-in .25s cubic-bezier(.2,.85,.25,1); transform-origin:top left; } .ask-answer-body .aab-pair{margin-bottom:14px;display:flex;flex-direction:column;gap:5px} .ask-answer-body .aab-pair:last-child{margin-bottom:0} .ask-answer-body .aab-line{display:flex;align-items:flex-start;gap:9px;word-break:break-word} .ask-answer-body .aab-ic{flex-shrink:0;display:inline-flex;align-items:center;line-height:0;padding-top:4px} .ask-answer-body .aab-tx{flex:1;min-width:0} .ask-answer-body .aab-q .aab-ic{color:var(--accent);opacity:.92} .ask-answer-body .aab-q .aab-ic svg{width:15px;height:15px} .ask-answer-body .aab-q .aab-tx{color:var(--text-1);font-size:14.5px;font-weight:600;line-height:1.55} .ask-answer-body .aab-a .aab-ic{color:var(--text-3);opacity:.7} .ask-answer-body .aab-a .aab-ic svg{width:13px;height:13px} .ask-answer-body .aab-a .aab-tx{color:var(--text-2);font-size:13px;line-height:1.7} /* 底部上滑 sheet — 显示完整思考内容（不截断） */ .sheet-mask{ position:fixed; inset:0; z-index:600; background:rgba(0,0,0,0); display:flex; align-items:flex-end; justify-content:center; pointer-events:none; transition:background .22s; } .sheet-mask.open{ background:rgba(0,0,0,.28); pointer-events:auto; } .sheet{ width:100%; max-width:680px; /* sheet 始终全高，靠 translateY 决定位置（半屏=46vh，全屏=0，关闭=96vh） */ height:96vh; max-height:96vh; /* 玻璃化 + 主题色：实底 .85 让 blur on/off 视觉差不多 */ background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05)),rgba(20,20,24,.85); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-top-left-radius:22px; border-top-right-radius:22px; border:1px solid rgba(var(--accent-rgb),.2); border-bottom:none; box-shadow:0 -20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); display:flex; flex-direction:column; transform:translateY(96vh); /* 默认关闭：全部出屏 */ transition:transform .28s cubic-bezier(.2,.85,.25,1); /* will-change:transform 撤销 2026-05-10：iOS Safari 独立合成层让 sheet body 内文字滞后于 sheet 框架，视觉脱节 */ } .sheet-mask.open .sheet{transform:translateY(46vh)} /* 半屏：露出下方 50vh */ .sheet-mask.open .sheet.expanded{transform:translateY(0)} /* 全屏：贴顶 */ /* 半屏时 body 不滚（拖手势全部给 sheet 平移）；全屏才允许内部滚 */ .sheet:not(.expanded) .sheet-body{overflow:hidden} .sheet.expanded .sheet-body{overflow-y:auto} /* 拖动期间：只关 transition，让 transform 立刻跟手 */ .sheet.dragging{transition:none !important} .sheet-handle-wrap{ display:flex; justify-content:center; align-items:center; padding:14px 60px 8px; cursor:grab; flex-shrink:0; touch-action:none; } .sheet-handle-wrap:active{cursor:grabbing} .sheet-handle{ width:44px; height:5px; background:rgba(var(--accent-rgb),.4); border-radius:3px; pointer-events:none; } /* 思考链 sheet · 极简版（无 ✕ 无横杠）— 心心+标题嵌在 body 内左上，整个 meta 区是 grab */ .think-sheet-body{padding:24px 22px 28px!important} .think-sheet-body .ts-meta{ display:flex;align-items:center;gap:12px; padding-bottom:18px; margin-bottom:14px; border-bottom:1px solid rgba(var(--accent-rgb),.18); cursor:grab;touch-action:none;user-select:none; } .think-sheet-body .ts-meta:active{cursor:grabbing} .think-sheet-body .ts-heart{flex-shrink:0;display:flex;align-items:center;justify-content:center} .think-sheet-body .ts-heart svg{width:22px;height:22px;filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55))} .think-sheet-body .ts-title-col{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .think-sheet-body .ts-title{font-size:15px;color:rgba(var(--accent-rgb),.95);font-weight:600;letter-spacing:.6px} .think-sheet-body .ts-subtitle{font-size:11px;color:rgba(var(--accent-rgb),.55);letter-spacing:.3px} .think-sheet-body .ts-text{ font-size:16px; color:var(--text-2); line-height:2; font-family:var(--font-think,'Noto Serif SC','Source Han Serif SC','Songti SC','STSong',Georgia,'Times New Roman',serif); font-weight:400; font-style:normal; letter-spacing:.5px; text-shadow:0 0 14px rgba(var(--accent-rgb),.18), 0 1px 1px rgba(0,0,0,.12); white-space:pre-wrap; word-break:break-word; } /* 英文部分用 Georgia 衬线（跟中文衬线协调）+ 轻斜 */ .think-sheet-body .ts-text :lang(en), .think-sheet-body .ts-text em{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-weight:400} .sheet-head{ display:flex; align-items:center; gap:10px; padding:4px 14px 12px; border-bottom:1px solid rgba(var(--accent-rgb),.12); flex-shrink:0; cursor:grab; touch-action:none; user-select:none; } .sheet-head:active{cursor:grabbing} .sheet-head .sh-close{ width:30px;height:30px; display:flex;align-items:center;justify-content:center; background:rgba(var(--accent-rgb),.1); border-radius:50%; color:rgba(var(--accent-rgb),.75); border:none; font-size:14px; cursor:pointer; flex-shrink:0; line-height:1; } .sheet-head .sh-close:active{background:rgba(var(--accent-rgb),.22)} .sheet-head .sh-spacer{width:30px;flex-shrink:0} .sheet-head .sh-title-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; } .sheet-head .sh-title-row{ display:flex; align-items:center; gap:7px; line-height:1.2; } .sheet-head .sh-heart{display:flex;align-items:center} .sheet-head .sh-heart svg{width:16px;height:16px;display:block;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.5))} .sheet-head .sh-title{ font-size:16px; color:rgba(var(--accent-rgb),.95); font-weight:500; letter-spacing:2px; font-family:'Songti SC','STKaiti','LXGW WenKai',serif; } .sheet-head .sh-subtitle{ font-size:11px; color:rgba(var(--accent-rgb),.55); font-style:italic; letter-spacing:.6px; font-family:'Songti SC','STKaiti','LXGW WenKai',serif; } .sheet-body{ padding:18px 22px 32px; overflow-y:auto; flex:1; font-size:14.5px; line-height:1.95; color:rgba(var(--accent-rgb),.82); font-family:'Songti SC','STKaiti','LXGW WenKai',serif; font-style:italic; white-space:pre-wrap; word-break:break-word; letter-spacing:.5px; } .sheet-body::-webkit-scrollbar{width:5px} .sheet-body::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.32);border-radius:3px} /* Loading splash */ #splash{position:fixed;inset:0;z-index:999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s} #splash.out{opacity:0;pointer-events:none} #splash .logo{font-size:64px;animation:splashIn .8s ease-out} #splash .name{font-size:20px;color:#f0e6ea;letter-spacing:3px;margin-top:12px;opacity:0;animation:splashFade .6s .3s ease-out forwards} @keyframes splashIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} @keyframes splashFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Thinking timer (inline during streaming) */ .think-timer{font-size:12px;color:var(--dim);padding:4px 0;display:flex;align-items:center;gap:6px} .think-timer .dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;opacity:.3;animation:dp 1.4s infinite} .think-timer .dots span:nth-child(2){animation-delay:.2s} .think-timer .dots span:nth-child(3){animation-delay:.4s} @keyframes dp{0%,80%,100%{opacity:.3}40%{opacity:1}} /* No-bubble toolbar */ .nbt{display:flex;align-items:center;gap:2px;margin-top:2px;flex-wrap:wrap} .nbt .dots{color:var(--faint);padding:3px 8px;font-size:16px;letter-spacing:2px;cursor:pointer} .nbt .tools{display:flex;gap:2px;flex-wrap:wrap} .nbt .tool{background:rgba(255,255,255,.04);padding:6px 8px;border-radius:8px;color:var(--dim);display:flex;align-items:center;justify-content:center} .nbt .tool:active{background:rgba(255,255,255,.08)} .nbt .tool.danger{color:var(--danger)} .nbt .tool svg{display:block} /* Version dot */ .ver{display:inline-flex;align-items:center;gap:0;line-height:1;position:relative;z-index:2;vertical-align:middle} .ver>button.rose-btn{padding:0;border:0;background:transparent;line-height:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent)} .ver .rose{display:block;opacity:.85;filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.45));transition:opacity .25s,transform .25s,filter .25s} @media (hover:hover){ .ver>button.rose-btn:hover .rose{opacity:1;transform:scale(1.2) rotate(-15deg);filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.8))} } .ver .nav{position:absolute;bottom:calc(100% + 4px);display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;padding:3px 6px;line-height:1.2;box-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap} .ver[data-side="ai"] .nav{left:0;right:auto} .ver[data-side="user"] .nav{right:0;left:auto} .ver .nav button{padding:2px 4px;color:var(--text-2);font-size:13px;background:transparent;border:0;cursor:pointer;line-height:1} .ver .nav button:disabled{color:var(--faint);cursor:not-allowed} .ver .lbl{font-size:11px;color:var(--dim);min-width:28px;text-align:center} /* 紧贴时间戳/footer：抵消父容器的 gap，让花紧贴前面元素 */ .its .ver-inline,.mg-nb-time .ver-inline{margin-left:-2px} .mg-nb-foot .ver-inline{margin-left:-13px;transform:translateY(5px)} /* 样式 B：浮在气泡内顶角对齐第一行；K 右上、用户左上；不撑高气泡 */ .ver-pinned{position:absolute;top:50%;transform:translateY(-50%);height:auto;display:flex;align-items:center;z-index:3;line-height:1;margin:0} .ver-pinned-ai{right:-8px} .ver-pinned-user{left:-8px} .ver-pinned .nav{z-index:100} .ver-pinned-ai .nav{right:0;left:auto} .ver-pinned-user .nav{left:0;right:auto} /* 用户气泡：花贴在第一段文字最前，紧贴第一个字 */ .ver-prefix{display:inline-flex;align-items:center;vertical-align:middle;line-height:1;margin:0;position:relative} .ver-prefix .nav{position:absolute;bottom:calc(100% + 4px);left:0;right:auto;top:auto} /* Streaming cursor —— 挂在最后一个块末尾（跟着文字走），而不是 .streaming 容器之后另起一行 */ .streaming > p:last-child::after, .streaming > :last-child:not(p):not(pre):not(ul):not(ol)::after, .streaming:empty::after{content:'';display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;animation:blink 1s step-end infinite;vertical-align:text-bottom} @keyframes blink{50%{opacity:0}} /* Voice bubble */ .vbub{display:flex;align-items:center;gap:8px;background:rgba(var(--accent-rgb),.1);border-radius:20px;padding:8px 14px;cursor:pointer;width:fit-content} .vbub.usr-v{background:rgba(255,255,255,.07)} .vbar{width:3px;border-radius:2px;opacity:.7;background:var(--accent)} /* Prevent native menu on bubbles */ .bub,.bub *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none} /* Input */ .input-wrap{position:fixed;bottom:0;left:0;right:0;padding:8px 12px calc(var(--inp-bottom-pad, 8px) + var(--safe-b));border-top:none;z-index:5} /* 气泡滚动到栏边缘的淡出：纯色渐变叠层，不建合成层，不影响气泡 backdrop-filter */ /* 栏边缘柔和渐变遮罩 —— 配合 #msgs 延伸 40px 进栏区，气泡能真·滚进遮罩被暗化 */ #hdr::after{content:'';position:absolute;top:100%;left:0;right:0;height:40px;background:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,0));pointer-events:none;z-index:1} .input-wrap::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:40px;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));pointer-events:none;z-index:1} body.inp-solid .input-wrap{background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04)),rgba(20,20,24,.85);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)} body.inp-glass .input-wrap{background:rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} body.inp-transparent .input-wrap{background:transparent} /* 上传背景图时：气泡像输入框那种"淡底 + 细边"的静态感觉。 注意：气泡自己不带 backdrop-filter —— iOS Safari 下若气泡有自己的 backdrop-filter 会创建 stacking context 导致滚到顶/底栏后面时，顶/底栏的 blur 无法作用到气泡上。气泡保持静态半透 + 细边， 滑进顶/底栏时由顶/底栏的 backdrop-filter 把气泡模糊化（Rosie 要的"到上下栏变玻璃"效果）。*/ body.has-bg-img .bub.has-b{backdrop-filter:none;-webkit-backdrop-filter:none} /* 注：has-bg-img 不再 override 气泡色，气泡色由 --ai-bg/--user-bg 变量控制（用户自定义）*/ /* 文字描边阴影：默认用 currentColor 派生（字什么色就什么色阴影），cfg.shadowColor 设了才强制覆盖 */ body.has-bg-img .bub-text{text-shadow:0 1px 2px var(--shadow-color, color-mix(in srgb, currentColor 35%, transparent))} body.has-bg-img .its,body.has-bg-img .nb-ts{text-shadow:0 1px 2px var(--shadow-color, color-mix(in srgb, currentColor 50%, transparent))} body.has-bg-img .hdr-c span{text-shadow:0 1px 3px var(--shadow-color, color-mix(in srgb, currentColor 30%, transparent))} body.has-bg-img .input-row{border-color:rgba(255,255,255,.14)} /* 气泡玻璃化：所有气泡（含 has-tail）都画 backdrop-filter； has-tail 现保留 border-radius，玻璃按容器圆角裁剪，主体跟 SVG 重叠不再溢出 */ /* 玻璃只在视口内生效：JS scroll listener 给视口内的 .mg 加 .glass-on， 视口外不画 backdrop-filter（合成层不创建）→ 同时活跃合成层 ≈ 视口内 ~10 个 → GPU 不撑爆。 DOM 不变 → scroll 期间只 toggle class 不触发 layout → 滚动顺。 .bub 的 background:rgba(...) 永远在，没玻璃时也不是透明空白。 */ body.bub-glass .mg.glass-on .bub.has-b{backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important} .input-row{display:flex;align-items:flex-end;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:6px} #inp{flex:1;background:transparent!important;border:none;font-size:15px;resize:none;line-height:1.5;padding:4px 2px;min-height:24px;max-height:120px;color:inherit} #inp:-webkit-autofill,#inp:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:inherit;transition:background-color 9999s ease-in-out 0s} #inp::placeholder{color:var(--faint)} .pmenu{position:absolute;bottom:100%;left:12px;margin-bottom:8px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05)),rgba(20,20,24,.85);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(var(--accent-rgb),.22);border-radius:14px;padding:6px 0;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,.55);z-index:50} .pmenu button{display:flex;align-items:center;width:100%;padding:10px 16px;color:var(--text-2);font-size:14px;text-align:left} .pmenu button svg{flex-shrink:0} /* Image preview */ .img-preview{position:relative;padding:8px 12px 0;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap} .img-preview .img-thumb{position:relative;display:inline-block} .img-preview .img-thumb img{max-height:80px;border-radius:10px;border:1px solid var(--border-2);cursor:pointer} .img-preview .img-thumb button{position:absolute;top:-6px;right:-6px;background:rgba(0,0,0,.7);color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center} /* User image in chat */ .msg-img{max-width:95%;max-height:none;border-radius:12px;margin-bottom:4px;border:1px solid var(--border-1)} /* Translation block */ .msg-file{display:flex;align-items:center;gap:8px;padding:max(0px, var(--bub-pad-v)) var(--bub-pad-h);background:var(--user-bg);border:1px solid var(--user-bd);border-radius:var(--bub-radius) var(--bub-radius) 4px var(--bub-radius);font-size:var(--font-size);color:var(--text-2);font-family:var(--font-chat);align-self:flex-end;max-width:min(var(--text-width), 70%);min-width:0;word-break:break-all;overflow:hidden} .msg-file .mf-icon{flex-shrink:0;font-size:18px} .msg-file .mf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .translate-block{margin-top:6px;padding:8px 12px;background:rgba(var(--accent-rgb),.05);border:1px solid rgba(var(--accent-rgb),.15);border-radius:10px;font-size:13px;color:var(--text-2);line-height:1.5;font-family:var(--font-chat);white-space:pre-wrap;word-break:break-word;align-self:stretch;box-sizing:border-box} .translate-block + .translate-block{margin-top:4px} .translate-label{font-size:11px;color:rgba(120,160,255,.6);margin-bottom:4px} /* Modal */ .modal{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04)),rgba(18,18,22,.5);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);display:flex;flex-direction:column;animation:slideUp .25s ease-out} .mod-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;padding-top:calc(16px + var(--safe-t));color:#fff;font-size:17px;font-weight:600} .mod-h button{color:var(--text-3);padding:4px;font-size:18px} .mod-body{flex:1;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch} .mod-list{flex:1;overflow-y:auto;padding:0 20px 20px;-webkit-overflow-scrolling:touch} #model-search{margin:12px 20px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border-1);font-size:14px;width:calc(100% - 40px)} .mg-title{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;padding:12px 0 6px;position:sticky;top:0;background:rgba(var(--accent-rgb),.12);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)} .mi{padding:12px 14px;border-radius:10px;color:var(--text-2);font-size:14px;margin-bottom:2px;cursor:pointer;text-align:left;width:100%} .mi:active{background:rgba(255,255,255,.05)} .mi.on{color:var(--accent);background:var(--accent-dim)} /* Tabs */ .tabs{display:flex} .tab{flex:1;padding:12px 0;color:var(--dim);font-size:14px;border-bottom:2px solid transparent;transition:all .15s} .tab.active{color:var(--accent);border-bottom-color:var(--accent)} /* Settings items */ .sec{margin-bottom:24px}.sec-t{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px} .sopt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:12px 14px;margin-bottom:3px;border-radius:10px;font-size:14px;transition:all .1s} .sopt.on{background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.3);color:var(--accent)} .sopt:not(.on){background:rgba(255,255,255,.03);border:1px solid transparent;color:var(--text-3)} .stog{display:flex;justify-content:space-between;align-items:center;padding:12px 0} .stog span{color:var(--text-2);font-size:14px} .tgl{width:44px;height:26px;border-radius:13px;position:relative;transition:background .2s} .tgl.on{background:var(--accent)}.tgl.off{background:var(--border-1)} .tgl i{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:left .2s;display:block} .tgl.on i{left:21px}.tgl.off i{left:3px} .sgrid{display:flex;gap:8px;flex-wrap:wrap} .sw{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:10px;border:2px solid transparent;transition:all .15s} .sw.on{border-color:var(--accent)} .em{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid transparent;background:rgba(255,255,255,.04)} .em.on{background:var(--accent-dim);border-color:var(--accent)} .sinp{width:100%;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border-1);font-size:15px} .srange{width:100%;accent-color:var(--accent);margin-top:6px;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border-2);outline:none} .srange::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid rgba(var(--accent-rgb),.35)} .srange-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;margin-bottom:2px} .srange-row span{color:var(--text-3);font-size:12px} .srange-row em{color:var(--dim);font-size:12px;font-style:normal} /* Context Menu — 4 列横向图标网格（SUV 样式） */ .ctx{position:fixed;background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05)),rgba(20,20,24,.85);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(var(--accent-rgb),.22);border-radius:14px;padding:6px;z-index:200;box-shadow:0 14px 44px rgba(0,0,0,.6)} .ctx.grid{display:grid;grid-template-columns:repeat(4,52px);gap:2px;width:auto;min-width:0} .ctx.grid button{display:flex;align-items:center;justify-content:center;width:52px;height:48px;padding:0;border-radius:10px;background:transparent;color:var(--text-2);font-size:14px;text-align:center;transition:background .12s} .ctx.grid button:active{background:rgba(255,255,255,.08)} .ctx.grid button:hover{background:rgba(255,255,255,.05)} .ctx.grid button .ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px} .ctx.grid button .ic svg{width:20px;height:20px;display:block} .ctx.grid button.danger{color:var(--danger)} .ctx.grid button.danger:active{background:rgba(255,107,107,.12)} /* 兼容旧调用：未加 .grid class 时退回竖直列表 */ .ctx:not(.grid) button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;color:var(--text-2);font-size:14px;text-align:left} .ctx:not(.grid) button span:first-child{display:flex;align-items:center;justify-content:center;width:18px;flex-shrink:0} .ctx:not(.grid) button.danger{color:var(--danger)} /* Toast */ .toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.06)),rgba(22,22,26,.88);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(var(--accent-rgb),.22);color:rgba(255,255,255,.92);padding:8px 20px;border-radius:20px;font-size:13px;z-index:300;pointer-events:none} /* Search badge in input */ .search-badge{color:var(--info);padding:4px 2px;flex-shrink:0;display:flex;align-items:center} /* Search results in chat */ .search-results{margin-top:6px;padding:8px 12px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.18);border-radius:10px;font-size:13px;color:var(--text-2);line-height:1.5} .search-label{font-size:12px;color:rgba(var(--accent-rgb),.8)} /* Lightbox */ .lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.98);display:flex;align-items:center;justify-content:center;padding:0} .lightbox img{width:100%;height:100%;object-fit:contain} /* Translate lang picker */ .tr-langs{display:flex;gap:6px;margin-top:8px} .tr-lang{padding:4px 12px;border-radius:16px;font-size:12px;color:var(--text-3);background:rgba(255,255,255,.05);border:1px solid var(--border-2)} .tr-lang.on{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)} /* Animations */ @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}} /* ═══ Nox Voice — voice bar, recording, waveform ═══ */ /* Append this to your existing style.css */ /* ── Voice Bar Container ── */ .voice-wrap { width: fit-content; /* 自适应内容，不再强行撑到 75% */ max-width: 100%; /* 上限由父级 mg-body 的 var(--text-width) 控制 */ margin-bottom: 4px; } /* 当语音条带转写展开时，整个 wrap 视觉上是一个气泡（语音条 + 分隔线 + 转写文字一体） */ .voice-wrap.has-transcript-open { background: rgba(var(--accent-rgb),.16); border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 18px; overflow: hidden; } .voice-wrap.has-transcript-open > .voice-bar.ai-vb { background: transparent; border: none; border-radius: 0; } /* 主聊天气泡内嵌转写：自然展开（max-height transition） */ .bub > .vb-transcript { margin: 0 -14px; padding: 0 14px; max-height: 0; opacity: 0; overflow: hidden; background: transparent; border: none; border-radius: 0; border-top: 1px solid transparent; animation: none; color: inherit; font-family: 'Noto Serif SC', 'PingFang SC', serif; line-height: 1.7; transition: max-height .3s ease, opacity .25s ease, padding .25s ease, border-top-color .25s; /* 关键：anywhere 让 max-content 收缩到字宽，转写不再撑大 .bub */ overflow-wrap: anywhere; word-break: normal; min-width: 0; } /* 子元素也要 anywhere，否则 vb-txt-content 内的文字会反向撑大 vb-transcript */ .bub > .vb-transcript * { overflow-wrap: anywhere; word-break: normal; min-width: 0; } .bub.has-transcript-open > .vb-transcript { max-height: 1500px; opacity: 1; padding: 10px 14px 12px; border-top-color: rgba(var(--accent-rgb),.28); } .bub.has-transcript-open > .bub-voice { padding-bottom: 6px; transition: padding-bottom .25s ease; } .bub.has-transcript-open > .vb-transcript { word-break: normal; overflow-wrap: anywhere; box-sizing: border-box; min-width: 0; } .mg.user .voice-wrap { margin-left: auto; } .voice-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px; min-width: 140px; max-width: 100%; width: fit-content; /* 自然按内容宽度，不再被 wrap/transcript 撑长 */ cursor: default; transition: background .2s; } .voice-bar.ai-vb { background: var(--ai-bg, rgba(var(--accent-rgb),.18)); border: 1px solid var(--ai-bd, rgba(var(--accent-rgb),.3)); } .voice-bar.user-vb { background: var(--user-bg, rgba(255,255,255,.08)); border: 1px solid var(--user-bd, rgba(255,255,255,.08)); margin-left: auto; } /* ── Play Button ── */ .vb-play { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(var(--accent-rgb),.25); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s, transform .15s; } .vb-play:active { transform: scale(.92); } .vb-play.playing { background: rgba(var(--accent-rgb),.4); animation: vb-pulse 1.5s ease-in-out infinite; } @keyframes vb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.3); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); } } /* ── Waveform ── */ .vb-wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: none; /* 不再抢剩余空间，按条数自然宽 */ overflow: hidden; } .vb-wave .wb { display: inline-block; width: 2.5px; min-height: 3px; border-radius: 2px; background: rgba(var(--accent-rgb),.45); transition: height .15s ease; } .vb-wave.active .wb { animation: wb-dance .6s ease-in-out infinite alternate; } @keyframes wb-dance { 0% { transform: scaleY(.4); opacity: .5; } 100% { transform: scaleY(1.3); opacity: 1; } } /* ── Duration ── */ .vb-dur { font-size: 12px; color: var(--text-3); flex-shrink: 0; min-width: 20px; text-align: right; } /* ── Text Toggle Button ── */ .vb-txt-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color .2s, background .2s; } .vb-txt-btn:hover, .vb-txt-btn:active { color: var(--accent); background: rgba(var(--accent-rgb),.12); } /* ── Transcript Area ── */ .vb-transcript { margin-top: 6px; padding: 8px 12px; background: rgba(255,255,255,.03); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); font-size: 13px; line-height: 1.7; color: var(--text-2); font-family: 'Noto Serif SC', 'PingFang SC', serif; animation: vb-expand .25s ease; } /* 旧语音条 wrap 内的 transcript：用 overflow-wrap:anywhere 让其内容的 max-content 收缩到字宽， 这样 voice-wrap 的 fit-content 算法只受 voice-bar 内容宽度影响，transcript 在 voice-bar 宽度内换行 */ .voice-wrap > .vb-transcript, .voice-wrap > .vb-transcript * { overflow-wrap: anywhere; word-break: normal; min-width: 0; } .voice-wrap > .vb-transcript { box-sizing: border-box; } /* 在展开气泡内：去掉独立感，跟语音条同气泡，靠分隔线区分 */ .voice-wrap.has-transcript-open > .vb-transcript { margin-top: 0; padding: 10px 14px 12px; background: transparent; border: none; border-radius: 0; border-top: 1px solid rgba(var(--accent-rgb),.22); animation: none; color: var(--text-2); } @keyframes vb-expand { from { opacity: 0; max-height: 0; margin-top: 0; } to { opacity: 1; max-height: 200px; margin-top: 6px; } } .vb-txt-content { margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; } .vb-translation { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); color: var(--text-3); font-size: 12px; } .vb-txt-actions { display: flex; gap: 8px; margin-top: 4px; } .vb-tr-btn { border: none; background: none; color: var(--dim); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color .2s, background .2s; } .vb-tr-btn:hover, .vb-tr-btn:active { color: var(--accent); background: rgba(var(--accent-rgb),.08); } /* ── Recording State ── */ #voice-btn.recording { background: rgba(255,80,80,.15) !important; border-color: rgba(255,80,80,.4) !important; color: var(--danger-strong) !important; animation: rec-glow 1.2s ease-in-out infinite; } @keyframes rec-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,80,.2); } 50% { box-shadow: 0 0 0 8px rgba(255,80,80,0); } } .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger-strong); animation: rec-blink 1s ease-in-out infinite; display: inline-block; } @keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .rec-time { font-size: 11px; color: var(--danger-strong); margin-left: 4px; font-variant-numeric: tabular-nums; } /* ── Voice button mic icon default ── */ #voice-btn { display: flex; align-items: center; justify-content: center; gap: 4px; touch-action: none; /* prevent scroll during hold */ -webkit-user-select: none; user-select: none; } #mic-btn.recording{background:rgba(255,80,80,.15)!important;color:var(--danger-strong)!important;animation:rec-glow 1.2s ease-in-out infinite} /* R 录音上传中占位（旧 .voice-bar 包装兼容新版视觉） */ .voice-bar.loading{ display:inline-flex;align-items:center;gap:10px; padding:10px 14px; background:rgba(var(--accent-rgb),.18); border-radius:18px; min-width:140px; color:var(--accent); } .voice-bar.loading .vb-play{ width:36px;height:36px;border-radius:50%;border:none; background:rgba(255,255,255,.12);color:currentColor; display:flex;align-items:center;justify-content:center; pointer-events:none;padding:0;flex-shrink:0; } .voice-bar.loading .vb-wave{display:flex;align-items:center;gap:1.5px;height:22px;flex:1 1 auto;min-width:60px} .voice-bar.loading .vb-wave .wb{display:inline-block;width:2.5px;min-height:2px;border-radius:2px;background:currentColor;flex-shrink:0} .voice-bar.loading .vb-dur{font-size:12px;opacity:.6;flex-shrink:0;letter-spacing:1px} /* ── Bubble-integrated voice content (new design) ── */ .bub-voice{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;width:fit-content;max-width:100%;min-width:110px} /* loading 占位：保持气泡完整视觉，不再整体透明；只在按钮和波形里做生成动画 */ /* 新旧 class 共享样式：.bub-voice.loading（新）和 .voice-bar.loading（旧 R 录音上传中占位） */ .voice-bar.loading{opacity:1 !important} .bub-voice.loading .vb-play, .voice-bar.loading .vb-play{pointer-events:none} .bub-voice.loading .vb-play .dots, .voice-bar.loading .vb-play .dots{display:inline-flex;gap:3px;align-items:center;justify-content:center} .bub-voice.loading .vb-play .dots span, .voice-bar.loading .vb-play .dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;animation:vb-loading-dot 1.3s ease-in-out infinite} .bub-voice.loading .vb-play .dots span:nth-child(2), .voice-bar.loading .vb-play .dots span:nth-child(2){animation-delay:.18s} .bub-voice.loading .vb-play .dots span:nth-child(3), .voice-bar.loading .vb-play .dots span:nth-child(3){animation-delay:.36s} @keyframes vb-loading-dot{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}} .bub-voice.loading .vb-wave .wb, .voice-bar.loading .vb-wave .wb{animation:vb-loading-wave 1.6s ease-in-out infinite;opacity:.55} .bub-voice.loading .vb-wave .wb:nth-child(2n), .voice-bar.loading .vb-wave .wb:nth-child(2n){animation-delay:.15s} .bub-voice.loading .vb-wave .wb:nth-child(3n), .voice-bar.loading .vb-wave .wb:nth-child(3n){animation-delay:.3s} @keyframes vb-loading-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(.85)}} .bub-voice .vb-play{width:36px;height:36px} .bub-voice .vb-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:0 1 auto} .bub-voice .vb-wave{display:flex;align-items:center;gap:1.5px;height:22px;flex:none} .bub-voice .vb-wave .wb{width:2.5px;min-height:0;flex-shrink:0} .bub-voice .vb-meta{display:flex;align-items:center;gap:var(--ts-gap,4px);font-size:11px} .bub-voice .vb-meta .vb-txt-btn{margin-left:6px;width:22px;height:22px} .mg.ai .bub-voice{color:var(--ai-text,var(--text,#e8e8e8))} .mg.user .bub-voice{color:var(--user-text,var(--text,#e8e8e8))} .bub-voice .vb-dur{color:inherit;opacity:.6;flex-shrink:0} .bub-voice .vb-dot{font-size:8px;color:inherit;opacity:.4;flex-shrink:0} .bub-voice .vb-spacer{flex:1} .bub-voice .vb-time{color:inherit;opacity:.55;flex-shrink:0} .bub-voice .vb-chk{display:inline-flex;align-items:center;flex-shrink:0} /* ── Bubble-integrated file content ── */ .bub-file{display:flex;align-items:center;gap:10px;padding:10px 12px;width:fit-content;max-width:100%;min-width:200px} .mg.ai .bub-file{color:var(--ai-text,var(--text,#e8e8e8))} .mg.user .bub-file{color:var(--user-text,var(--text,#e8e8e8))} .bub-file .bf-icon{width:40px;height:40px;border-radius:10px;background:rgba(var(--accent-rgb),.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit} .bub-file .bf-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .bub-file .bf-name{font-size:14px;color:inherit;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bub-file .bf-size{font-size:12px;color:inherit;opacity:.55} .bub-file .bf-meta{font-size:11px;color:inherit;opacity:.6;flex-shrink:0;align-self:flex-end;display:flex;align-items:center;gap:var(--ts-gap,4px)} .bub-file .bf-time{color:inherit} .bub-file .bf-chk{display:inline-flex;align-items:center} .bub-file .bf-chk svg{width:13px;height:13px} .bub-voice .vb-chk svg{width:14px;height:14px} .bub-voice .vb-emotion{font-size:16px;flex-shrink:0} .bub-voice .vb-txt-btn{flex-shrink:0} .bub-voice .vb-del{position:absolute;top:4px;right:6px;color:var(--dim);padding:2px 4px;font-size:11px;opacity:.4;background:none;border:none;cursor:pointer;z-index:2} .bub-voice .vb-del:hover{opacity:1;color:var(--danger)} /* user 语音条只让时间戳和钩视觉右移（不影响布局/气泡宽度） */ .mg.user .bub-voice .vb-time{transform:translateX(8px)} .mg.user .bub-voice .vb-chk{transform:translateX(8px)} #msgs{overflow-anchor:none}#msgs>*{overflow-anchor:none}#msgs>:last-child{overflow-anchor:none} /* 工具浏览 */ .browse-timer{font-size:12px;color:var(--dim);padding:4px 0;display:flex;align-items:center;gap:6px} .browse-timer .dots span{width:5px;height:5px;border-radius:50%;background:rgba(var(--accent-rgb),.8);display:inline-block;opacity:.3;animation:dp 1.4s infinite} .browse-timer .dots span:nth-child(2){animation-delay:.2s} .browse-timer .dots span:nth-child(3){animation-delay:.4s} .tool-call{margin-top:6px;padding:8px 12px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.18);border-radius:10px;font-size:13px;color:var(--text-2);line-height:1.5} .tool-label{font-size:12px;color:rgba(var(--accent-rgb),.8)} /* ── Reply Quote ── */ .reply-quote{display:inline-flex;align-items:stretch;gap:0;margin-bottom:4px;cursor:pointer;width:fit-content;max-width:min(85%,220px);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(var(--accent-rgb),.25);transition:background .15s} .reply-quote:active{background:rgba(var(--accent-rgb),.14)} .rq-bar{width:3px;flex-shrink:0;background:var(--accent)} .rq-body{padding:3px 7px;min-width:0;max-width:100%;overflow:hidden} .rq-name{display:block;font-size:11px;font-weight:600;color:var(--accent);margin-bottom:1px;white-space:nowrap} .rq-text{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px} /* ── Bubble-internal reply quote (top of bubble + separator) ── */ .bub-quote{position:relative;z-index:1;display:flex;align-items:stretch;gap:0;margin-bottom:8px;padding:4px 0 8px;border-bottom:1px solid rgba(255,255,255,0.1);cursor:pointer;width:100%;min-width:160px} .bub-quote .bq-bar{width:3px;flex-shrink:0;background:var(--accent);border-radius:2px} .bub-quote .bq-body{padding:0 10px;min-width:0;flex:1;overflow:hidden} .bub-quote .bq-name{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:2px;white-space:nowrap} .mg.ai .bub-quote{color:var(--ai-text,var(--text,#e8e8e8))} .mg.user .bub-quote{color:var(--user-text,var(--text,#e8e8e8))} .bub-quote .bq-text{display:block;font-size:12px;color:inherit;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── Style Presets ── */ .preset-list{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 2px} .preset-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px 5px 10px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);border-radius:16px;cursor:pointer;transition:background .15s} .preset-chip:active{background:rgba(var(--accent-rgb),.2)} .preset-name{font-size:13px;color:var(--text-2)} .preset-del{color:var(--dim);font-size:15px;padding:0 2px;line-height:1;background:none;border:none;cursor:pointer} .preset-del:active{color:var(--danger)} /* ── Chat Groups ── */ .grp-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px 6px;cursor:pointer;user-select:none} .grp-arrow{font-size:9px;color:var(--dim);flex-shrink:0;width:12px} .grp-name{flex:1;font-size:12px;color:var(--text-3);letter-spacing:.5px;font-weight:600;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .grp-count{font-size:11px;color:var(--faint);flex-shrink:0} .grp-more{color:var(--faint);padding:2px 6px;font-size:16px;flex-shrink:0;line-height:1} .grp-more:active{color:var(--text-3)} .grp-body .sb-item{padding-left:24px} /* ── Within-day time separator ── */ .tsep{display:flex;align-items:center;justify-content:center;padding:8px 0 4px;gap:12px} .tsep::before,.tsep::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--sep-color),transparent)} .tsep span{color:var(--sep-color);font-size:11px;letter-spacing:.5px} /* ── K 看到的世界 — 情境化叙事视图（_renderContextModal） ── */ .ctx-narr{font-family:inherit;font-size:14px;color:var(--text-2);line-height:1.7;padding:14px 16px 24px} .ctx-meta{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:rgba(255,255,255,.025);border-radius:10px;margin-bottom:18px} .ctx-meta-row{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--text-3)} .ctx-meta-row-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px} .ctx-meta-label{color:var(--dim);font-size:10.5px;letter-spacing:.5px;flex-shrink:0;min-width:42px} .ctx-meta-val{color:var(--text-3);font-size:11.5px} .ctx-meta-mem .ctx-meta-label{color:var(--sys,#7abbbb)} .ctx-meta-surf .ctx-meta-label{color:var(--accent)} .ctx-mem-item{display:flex;align-items:baseline;gap:6px;padding:3px 0;flex-wrap:wrap} .ctx-score{color:var(--sys,#7abbbb);font-size:10.5px;font-variant-numeric:tabular-nums;flex-shrink:0;opacity:.85} .ctx-tag{font-size:10px;color:var(--dim);background:rgba(255,255,255,.04);padding:1px 6px;border-radius:4px;flex-shrink:0} .ctx-tag-surf{color:var(--accent);background:rgba(var(--accent-rgb),.08)} .ctx-mem-tx{color:var(--text-3);font-size:11.5px;line-height:1.55;flex:1 1 60%} .ctx-val-tag{color:var(--dim);font-size:10px;opacity:.7} .ctx-narr-body{display:flex;flex-direction:column;gap:10px} .ctx-line{padding:0 2px} .ctx-line-system{color:var(--sep-color);font-size:12px;text-align:center;padding:6px 8px;letter-spacing:.2px;opacity:.85} .ctx-line-long .ctx-sys-head{cursor:pointer;color:var(--sep-color);font-size:12px;text-align:center;padding:5px 8px;border-radius:6px} .ctx-line-long .ctx-sys-head:hover{background:rgba(255,255,255,.04);color:var(--text-3)} .ctx-line-long .ctx-sys-fold{font-size:12px;color:var(--text-3);background:rgba(255,255,255,.025);padding:10px 12px;border-radius:8px;margin-top:6px;white-space:pre-wrap;word-break:break-word;line-height:1.65;text-align:left} .ctx-line-user,.ctx-line-ai{display:flex;flex-direction:column;gap:3px;padding:4px 0} .ctx-head{display:flex;align-items:baseline;gap:8px} .ctx-ts{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.3px;flex-shrink:0;opacity:.75;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace} .ctx-speaker{font-size:11px;color:var(--dim);letter-spacing:.4px;font-weight:500} .ctx-line-user .ctx-speaker{color:var(--accent)} .ctx-line-ai .ctx-speaker{color:var(--sys,#7abbbb)} .ctx-tx{color:var(--text-2);font-size:13.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;margin-left:2px} .ctx-line-toolcall{color:var(--accent);font-size:12px;text-align:center;padding:4px 10px;opacity:.85;font-style:italic;letter-spacing:.2px} .ctx-line-tool{color:var(--sys,#7abbbb);font-size:12px;text-align:center;padding:4px 10px;opacity:.85;font-style:italic;letter-spacing:.2px} /* ── Voice emotion tag ── */ .vb-emotion{font-size:15px;flex-shrink:0;line-height:1;cursor:default} .accent-stroke{stroke:var(--accent)} .bhl{color:var(--bracket-color,#e8a0bf)} .mg.ai .bub-text{color:var(--ai-text,var(--text,#e8e8e8))} .mg.user .bub-text{color:var(--user-text,var(--text,#e8e8e8))} #ws-dot{display:none!important} .av { align-self: flex-end; } /* 隐藏尾巴： - 纯文本模式 (body.text-mode + hide-text-tail) → 全圆角矩形（统一 var(--bub-radius)） - 连发模式 (!text-mode + hide-consec-tail) → 保留默认 .has-b.{role}.{pos} 圆角（托盘式：头像侧小角，其他大圆） */ /* 纯文本模式 + 隐藏尾巴：删掉强制 !important — 让 .has-b.{role}.{pos} first/mid/last 默认汉堡圆角生效 */ /* 连发模式不 override border-radius，让 .has-b.{role}.{pos} 默认值（only/last 4px、first/mid 6px）生效 → 托盘 */ /* 隐藏尾巴时（无 .has-tail）的 last 形态：底部两角改大圆角"包底"，跟顶部包顶对称 */ .bub.has-b:not(.has-tail).ai-b.last { border-radius: 6px var(--bub-radius) var(--bub-radius) var(--bub-radius) !important; } .bub.has-b:not(.has-tail).usr-b.last { border-radius: var(--bub-radius) 6px var(--bub-radius) var(--bub-radius) !important; } /* 隐藏样式 B 的时间分隔：现已在渲染层真删 DOM（app.js 中按 hideStyleBTime gate），CSS 层无需再藏 */ /* ════════════════════════════════════════════════════════ 语音条 ♪ 菜单按钮 + 弹出菜单 + 自定义 modal ════════════════════════════════════════════════════════ */ .bub-voice .vb-menu { position: absolute; top: 4px; right: 8px; color: var(--accent); padding: 2px 6px; font-size: 14px; line-height: 1; opacity: .55; background: none; border: none; cursor: pointer; z-index: 2; font-family: 'Songti SC', 'STKaiti', 'PingFang SC', serif; transition: opacity .15s, transform .2s; } .bub-voice .vb-menu:hover, .bub-voice .vb-menu:active { opacity: 1; transform: scale(1.25); } .vb-menu-pop { background: linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05)),var(--surface-1); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 14px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.55); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; animation: vb-menu-in .18s ease; } @keyframes vb-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .vb-menu-item { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: none; color: var(--text-2); cursor: pointer; border-radius: 10px; transition: background .15s, transform .15s, color .15s; padding: 0; } .vb-menu-item svg { width: 18px; height: 18px; } .vb-menu-item:hover, .vb-menu-item:active { background: rgba(255,255,255,.1); transform: scale(1.05); } .vb-menu-item.danger { color: #ff7b7b; } .vb-menu-item.danger:hover { background: rgba(255,80,80,.15); } .vb-menu-item.disabled { opacity: .35; cursor: not-allowed; } .vb-menu-item.disabled:hover { background: rgba(255,255,255,.04); transform: none; } /* Modal Overlay */ .vb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: vb-overlay-in .15s ease; } @keyframes vb-overlay-in { from { opacity: 0; } to { opacity: 1; } } .vb-modal { background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),.04)), rgba(18,18,22,.7); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 16px; padding: 22px 22px 18px; max-width: 360px; width: 100%; animation: vb-modal-in .2s ease; box-sizing: border-box; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 12px 48px rgba(0,0,0,.35); } /* 浅主题：吃 cardAlpha / cardTint，让用户能在设置里调白底浓度 + 主题色染色 */ body[data-theme="light"] .vb-modal { background: linear-gradient(180deg, rgba(var(--accent-rgb), var(--card-tint)), rgba(var(--accent-rgb), calc(var(--card-tint) / 2))), rgba(255,252,253, var(--card-alpha)); border: 1px solid rgba(var(--accent-rgb), .22); box-shadow: 0 12px 48px rgba(0,0,0,.12); } @keyframes vb-modal-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .vb-modal-title { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .vb-modal-body { font-size: 13px; color: var(--text-3); line-height: 1.55; margin-bottom: 16px; } .vb-modal-input { width: 100%; background: var(--surface-3); border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; color: var(--text-2); font-size: 14px; font-family: inherit; resize: vertical; min-height: 70px; margin-bottom: 14px; box-sizing: border-box; line-height: 1.5; } .vb-modal-input:focus { outline: none; border-color: var(--accent); } .vb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .vb-modal-btn { padding: 8px 18px; border-radius: 8px; border: none; font-size: 13px; cursor: pointer; transition: background .15s, filter .15s; font-family: inherit; } .vb-modal-btn.cancel { background: var(--surface-3); color: var(--text-2); } .vb-modal-btn.cancel:hover { filter: brightness(1.15); } .vb-modal-btn.confirm { background: var(--accent); color: #fff; font-weight: 500; } .vb-modal-btn.confirm.danger { background: var(--danger); } .vb-modal-btn.confirm:hover { filter: brightness(1.15); } /* 语音条占满气泡：.bub padding 归零，让 .bub-voice 贴边；transcript 也消除负 margin */ .bub.bub-has-voice { padding: 0; } .bub.bub-has-voice > .vb-transcript { margin: 0; } /* 心心 + ... 操作菜单同行（纯文本模式视觉紧凑） */ .hrt-nbt-row { display: flex; align-items: center; /* 心 + ... 垂直中心对齐（避免一高一低） */ gap: 4px; margin-top: 2px; /* 默认（有气泡）：row 只装心，跟气泡底留 2px 不穿透 */ flex-wrap: wrap; } .hrt-nbt-row.no-bub { margin-top: -16px; /* 无气泡：row 含 dots 被撑大约 8px，row 整体多上移抵消 */ } .hrt-nbt-row > .hrt-corner { padding: 0 2px; /* 心上下 0，不再被 padding 推下 */ cursor: pointer; flex-shrink: 0; opacity: .85; display: inline-flex; align-items: center; margin-top: -2px; /* 心再略往上 */ } .hrt-nbt-row > .hrt-corner:hover { opacity: 1; } .hrt-nbt-row > .nbt { margin-top: 0; } /* ══════════════════════════════════════════════════════════ 无气泡消息：头像在 row 左上方（外层 av-col），footer [name · time] 在文字下方 ══════════════════════════════════════════════════════════ */ /* 无气泡模式根本布局： - mg-row 给左/右 padding 留出头像空间 - av-col 改用 position: absolute 浮在 row 边上，不撑 row 高度 - 这样 row 高度严格 = 文字高度，footer 紧贴文字底；av 用 top/transform 控制对齐 */ .mg.no-bub-mode .mg-row { position: relative; align-items: stretch; } body.show-ai-av .mg.ai.no-bub-mode .mg-row:has(> .av-col) { padding-left: calc(var(--avatar-size, 32px) + 6px); } body.show-user-av .mg.user.no-bub-mode .mg-row:has(> .av-col) { padding-right: calc(var(--avatar-size, 32px) + 6px); } .mg.no-bub-mode .mg-row > .av-col { position: absolute; top: 50%; transform: translateY(-50%); } .mg.ai.no-bub-mode .mg-row > .av-col { left: 0; } .mg.user.no-bub-mode .mg-row > .av-col { right: 0; } /* 无气泡：减小 .bub.no-b 上下 padding，文字紧凑 */ .mg.no-bub-mode .bub.no-b { padding-top: 0; padding-bottom: 0; } /* 旧 mg-header 样式保留兼容（silent_mg 等其他场景可能仍在用），但无气泡正常路径不再生成 */ .mg-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .mg.user .mg-header { flex-direction: row-reverse; justify-content: flex-end; } .mg-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .mg.user .mg-meta { align-items: flex-end; } .mg-name { color: var(--accent); font-size: 12px; font-weight: 500; } .mg-time { color: var(--dim); font-size: 11px; display: flex; align-items: center; gap: 3px; } .mg-time svg { width: 12px; height: 12px; } /* 无气泡 footer：放在 mg 内 row 之外，紧贴消息下方 */ .mg-nb-foot { display: flex; align-items: center; gap: 6px; margin-top: 0; font-size: 11px; line-height: 1.2; } body.show-ai-av .mg.ai:has(.av-col) > .mg-nb-foot { margin-left: calc(var(--avatar-size, 32px) + 6px); } body.show-user-av .mg.user:has(.av-col) > .mg-nb-foot { margin-right: calc(var(--avatar-size, 32px) + 6px); } .mg-nb-foot .mg-nb-name { color: var(--accent); font-weight: 500; } .mg-nb-foot .mg-nb-time { color: var(--dim); display: inline-flex; align-items: center; gap: 3px; } .mg-nb-foot .mg-nb-time svg { width: 11px; height: 11px; } /* ── Config snapshot panel & preview dialog ── */ .snap-panel{margin:10px 14px 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden} .snap-head{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;-webkit-user-select:none} .snap-head-l{display:flex;align-items:center;gap:8px;min-width:0} .snap-icon{font-size:14px} .snap-title{font-size:13px;color:var(--text)} .snap-count{font-size:11px;color:var(--dim)} .snap-toggle-arrow{color:var(--dim);font-size:12px;flex-shrink:0} .snap-body{padding:0 14px 12px;border-top:1px solid var(--border)} .snap-hint{font-size:11px;color:var(--dim);padding:8px 0;line-height:1.5} .snap-actions{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 10px} .snap-act-btn{flex:1;min-width:130px;justify-content:center} .snap-name-row{display:flex;gap:6px;align-items:center;padding:4px 0 10px} .snap-name-row input{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;min-width:0} .snap-name-row input:focus{outline:none;border-color:var(--accent)} .snap-list-title{font-size:11px;color:var(--dim);padding:6px 0 4px} .snap-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:4px 0;display:flex;align-items:center;gap:6px} .snap-item-info{flex:1;min-width:0} .snap-item-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .snap-item-time{font-size:11px;color:var(--dim);margin-top:2px} .snap-item-btn{padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;flex-shrink:0;border:1px solid var(--border);background:transparent;color:var(--text)} .snap-item-btn.snap-apply{background:var(--accent-dim);color:var(--accent);border-color:transparent;font-weight:500} .snap-item-btn.snap-apply:active{filter:brightness(.9)} .snap-item-btn.snap-export{padding:6px 9px} .snap-item-btn.snap-del{color:var(--danger);border-color:rgba(var(--accent-rgb),.25)} .snap-empty{font-size:11px;color:var(--faint);padding:8px 0} /* preview dialog rows */ .snap-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin:6px 0;cursor:pointer} .snap-row input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0} .snap-cbx{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border);background:rgba(255,255,255,.04);display:inline-block;flex-shrink:0;margin-top:1px;position:relative;transition:background .15s,border-color .15s} .snap-row input[type=checkbox]:checked + .snap-cbx{background:var(--accent);border-color:var(--accent)} .snap-row input[type=checkbox]:checked + .snap-cbx::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #1a0a14;border-width:0 2px 2px 0;transform:rotate(45deg)} .snap-row-info{flex:1;min-width:0} .snap-row-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text)} .snap-row-desc{font-size:11px;color:var(--dim);margin-top:2px} .snap-badge{font-size:11px;padding:2px 8px;border-radius:10px;line-height:1.4} .snap-badge-diff{color:var(--accent);background:var(--accent-dim)} .snap-badge-same{color:var(--faint);background:transparent;border:1px solid var(--border)} .snap-mini-btn{background:transparent;color:var(--dim);border:1px solid var(--border);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer} .snap-mini-btn:active{background:var(--accent-dim);color:var(--accent)} /* ══════════════════════════════════════════════════════════ 全局布局开关 — 用户同侧（user 跟 AI 同侧）/ 双方居中 ══════════════════════════════════════════════════════════ */ /* —— 用户同侧：user 完全等同 AI 视觉 —— */ body.same-side .mg.user { align-items: flex-start; } body.same-side .mg.user .mg-row { flex-direction: row; } body.same-side .mg.user .mg-body { align-items: flex-start; max-width: var(--text-width); } /* user 消息内部 wrap 方向（图片+文字气泡 / 普通文字气泡共用 .usr-row；纯图片用 .usr-img-col） 默认 row-reverse / flex-end 让气泡贴右；body.same-side 时翻成左侧。 交给 CSS 后切 userSameSide 不再需要全量 render() 重建 #msgs。 */ .usr-row { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; flex-direction: row-reverse; } body.same-side .usr-row { flex-direction: row; } .usr-img-col { display: flex; flex-direction: column; gap: 2px; width: 100%; align-items: flex-end; } body.same-side .usr-img-col { align-items: flex-start; } /* user 气泡圆角翻转 → AI 风格（左下小角） */ body.same-side .mg.user .has-b.usr-b.only { border-radius: var(--bub-radius) var(--bub-radius) var(--bub-radius) 4px; } body.same-side .mg.user .has-b.usr-b.first { border-radius: var(--bub-radius) var(--bub-radius) var(--bub-radius) 6px; } body.same-side .mg.user .has-b.usr-b.mid { border-radius: 6px var(--bub-radius) var(--bub-radius) 6px; } body.same-side .mg.user .has-b.usr-b.last { border-radius: 6px var(--bub-radius) var(--bub-radius) 4px; } /* user 头像位置：从右侧切到左侧 */ body.same-side.show-user-av .mg.user.no-bub-mode .mg-row:has(> .av-col) { padding-left: calc(var(--avatar-size, 32px) + 6px); padding-right: 0; } body.same-side .mg.user.no-bub-mode .mg-row > .av-col { left: 0; right: auto; } body.same-side.show-user-av .mg.user:has(.av-col) > .mg-nb-foot { margin-left: calc(var(--avatar-size, 32px) + 6px); margin-right: 0; } /* —— 双方居中：mg-row 改 column flex，头像在消息上方 —— */ body.msgs-centered .mg.ai, body.msgs-centered .mg.user { align-items: center; } body.msgs-centered .mg-row { flex-direction: column !important; align-items: center !important; gap: 4px; padding-left: 0 !important; padding-right: 0 !important; } /* av-col 改 static（不再 absolute），跟随 column flex 堆在最上 */ body.msgs-centered .mg.no-bub-mode .mg-row > .av-col { position: static; top: auto; left: auto; right: auto; transform: none; } body.msgs-centered .mg-body { align-items: center !important; max-width: var(--text-width); } body.msgs-centered .mg .has-b.usr-b.only, body.msgs-centered .mg .has-b.usr-b.first, body.msgs-centered .mg .has-b.usr-b.mid, body.msgs-centered .mg .has-b.usr-b.last, body.msgs-centered .mg .has-b.ai-b.only, body.msgs-centered .mg .has-b.ai-b.first, body.msgs-centered .mg .has-b.ai-b.mid, body.msgs-centered .mg .has-b.ai-b.last { border-radius: var(--bub-radius); /* 居中时四角统一圆 */ } body.msgs-centered .mg-nb-foot { justify-content: center; margin-left: 0 !important; margin-right: 0 !important; } /* 居中模式：每行视觉居中（不影响 dom/markdown 存储） */ body.msgs-centered .bub-text { text-align: center; } body.msgs-centered .think-chip { align-self: center; } /* 居中模式：气泡内 inner 改 column flex，文字 + 时间戳上下堆叠居中 */ body.msgs-centered .bub-inner { flex-direction: column; align-items: center; gap: 2px; } body.msgs-centered .bub-inner .bub-text { flex: 0 1 auto; width: 100%; } body.msgs-centered .bub-text, body.msgs-centered .bub-text > * { text-align: center; } /* ══════════════════════════════════════════════════════════ "一起听" 配对头像 — 每条消息上方 [AI + user] 水平轻微重叠居中 ══════════════════════════════════════════════════════════ */ body.paired-av .mg-row { flex-direction: column !important; align-items: center !important; gap: 4px; padding-left: 0 !important; padding-right: 0 !important; } body.paired-av .mg.no-bub-mode .mg-row > .av-col { position: static; top: auto; left: auto; right: auto; transform: none; } body.paired-av .av-col > .av + .av { margin-left: -10px; } body.paired-av .av-col > .av { box-shadow: 0 0 0 2px var(--app-bg, #000), 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.10); } body.paired-av .mg-body { align-items: center !important; max-width: var(--text-width); } body.paired-av .mg.user .mg-row { flex-direction: column !important; } body.paired-av .mg-nb-foot { justify-content: center; margin-left: 0 !important; margin-right: 0 !important; } /* 无气泡模式：文件方块和语音条圆形容器去掉，只留里面的图标/文字 */ .mg.no-bub-mode .msg-file { background: transparent; border: none; border-radius: 0; padding: 0; } .mg.no-bub-mode .vbub { background: transparent; border-radius: 0; padding: 0; } /* 无气泡模式：内层文件图标方块 / 播放圆按钮也去掉背景，留 svg 图标 */ .mg.no-bub-mode .bf-icon { background: transparent; } .mg.no-bub-mode .vb-play, .mg.no-bub-mode .vb-play.playing { background: transparent; animation: none; } /* 同侧模式：user 文件方块翻转到左侧 + 圆角变左下小角 */ body.same-side .mg.user .msg-file { align-self: flex-start; border-radius: var(--bub-radius) var(--bub-radius) var(--bub-radius) 4px; } /* 正文流式：不加任何动画，纯 md() 打字机式渲染就好 —— 之前 .streaming 整段 fade * 每 80ms 触发一次，肉眼会感到"全屏快速闪了一下像刷新"，所以去掉 */ /* 思考链 chip：思考中（.tc-summary[data-live="1"]）整段呼吸，模仿 Claude.ai 官端 * 那种"心心 + 思考文字若隐若现"的感觉。心心、文字、整个 chip 一起浮动 */ .think-chip:has(.tc-summary[data-live="1"]) { animation: nox-think-breath 1.6s ease-in-out infinite; } /* :has 退化兼容：直接给 .tc-summary[data-live="1"] 自己也呼吸（覆盖到没 :has 支持的浏览器） */ .think-chip .tc-summary[data-live="1"] { animation: nox-think-breath 1.6s ease-in-out infinite; } @keyframes nox-think-breath { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* 思考中：心心 SVG 自带"微微发光"动画，drop-shadow 强弱跟随呼吸节奏 */ .think-chip:has(.tc-summary[data-live="1"]) .tc-heart svg, .think-chip .tc-summary[data-live="1"] ~ * .tc-heart svg { animation: nox-heart-glow 1.6s ease-in-out infinite; } @keyframes nox-heart-glow { 0%, 100% { filter: drop-shadow(0 0 1.5px rgba(var(--accent-rgb), 0.35)); } 50% { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.85)); } } /* 思考文字摘要变化时颜色平滑过渡 */ .think-chip .tc-summary { transition: color .15s ease; } /* 朗读面板（showSpeakPanel）— 跟 .vb-modal 同款主题色玻璃感 */ .speak-panel { background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),.04)), rgba(18,18,22,.7); border: 1px solid rgba(var(--accent-rgb), .28); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 12px 48px rgba(0,0,0,.35); } body[data-theme="light"] .speak-panel { background: linear-gradient(180deg, rgba(var(--accent-rgb), var(--card-tint)), rgba(var(--accent-rgb), calc(var(--card-tint) / 2))), rgba(255,252,253, var(--card-alpha)); border: 1px solid rgba(var(--accent-rgb), .22); box-shadow: 0 12px 48px rgba(0,0,0,.12); } /* ── 气泡溢出栏区 三种模式 ── */ /* 挡住：消息严格止于栏边界，不再延伸 40px 进栏区 — ::after / ::before 暗化带保持不变 */ body.bleed-block #msgs { top: var(--hdr-h, 60px); bottom: var(--inp-h, 72px); padding: 4px 12px 30px; } /* 淡化：字进入栏区时 alpha 渐变（mask-image），背景图 / hdr / input 主体完全不动 ── CSS filter:blur 只能作用于整元素，做不到"半条消息模糊一半清晰"； ── alpha 渐变是最接近"柔化"的纯 CSS 实现，且零性能开销 */ body.bleed-fade #msgs { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.10) 0, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,.10) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.10) 0, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,.10) 100%); } /* ── ask_user 便签卡片（K 想让 R 选一下时悬浮） ── */ #ask-user-card { position: fixed; left: 50%; bottom: 16px; width: calc(100% - 24px); max-width: 460px; z-index: 95; background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .04)), rgba(20, 20, 24, .94); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 20px; padding: 16px 18px 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, .55), 0 4px 16px rgba(var(--accent-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .06); transform: translate(-50%, calc(100% + 24px)); opacity: 0; transition: transform .35s cubic-bezier(.22,.9,.32,1), opacity .25s ease; pointer-events: none; display: none; } #ask-user-card.show { display: block; transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } body.light #ask-user-card { background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .03)), rgba(255, 252, 253, .96); border-color: rgba(var(--accent-rgb), .22); } /* 顶部：图案 + 标题 + 关闭 */ #ask-user-card .auc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } #ask-user-card .auc-mark { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .18) 70%), rgba(var(--accent-rgb), .15); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; box-shadow: 0 2px 8px rgba(var(--accent-rgb), .25); } #ask-user-card .auc-title { flex: 1; font-size: 15px; color: var(--text); line-height: 1.5; font-weight: 500; padding-top: 4px; } #ask-user-card .auc-close { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: transparent; border: none; color: var(--text-3); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; font-family: inherit; } #ask-user-card .auc-close:hover { background: rgba(var(--accent-rgb), .14); color: var(--text); } /* 选项列表 */ #ask-user-card .auc-list { display: flex; flex-direction: column; margin: 4px 0 4px; } #ask-user-card .auc-item { display: flex; align-items: center; gap: 12px; padding: 12px 6px; cursor: pointer; border-bottom: 1px solid rgba(var(--accent-rgb), .12); transition: background .14s, transform .12s; -webkit-tap-highlight-color: transparent; } #ask-user-card .auc-item:last-of-type { border-bottom: none; } #ask-user-card .auc-item:hover { background: rgba(var(--accent-rgb), .07); } #ask-user-card .auc-item:active { background: rgba(var(--accent-rgb), .14); transform: scale(.99); } #ask-user-card .auc-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--accent-rgb), .2); color: var(--accent); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } #ask-user-card .auc-text { flex: 1; font-size: 14px; color: var(--text); line-height: 1.5; } /* 多问题分组（一卡片里多个 question 时） */ #ask-user-card .auc-q-group + .auc-q-group { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(var(--accent-rgb), .2); } #ask-user-card .auc-q-group .auc-q-text { font-size: 14px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; } /* 底部自由输入 */ #ask-user-card .auc-input-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 12px; transition: border-color .15s, background .15s; } body.light #ask-user-card .auc-input-row { background: rgba(0, 0, 0, .03); } #ask-user-card .auc-input-row:focus-within { border-color: rgba(var(--accent-rgb), .5); background: rgba(255, 255, 255, .06); } #ask-user-card .auc-input-icon { font-size: 13px; opacity: .7; flex-shrink: 0; } #ask-user-card .auc-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; font-family: inherit; min-width: 0; } #ask-user-card .auc-input::placeholder { color: var(--text-3); } #ask-user-card .auc-send { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: none; color: var(--bg, #000); font-size: 14px; cursor: pointer; display: none; align-items: center; justify-content: center; font-family: inherit; font-weight: 700; transition: transform .12s; } #ask-user-card .auc-input-row.has-text .auc-send { display: flex; } #ask-user-card .auc-send:active { transform: scale(.92); } /* ── readonly 模式：点 chip 回顾历史，整体不可点；已选项高亮、其他变灰 ── */ #ask-user-card.readonly .auc-item { cursor: default; } #ask-user-card.readonly .auc-item:hover { background: transparent; } #ask-user-card.readonly .auc-item:active { transform: none; } #ask-user-card .auc-item.auc-item-picked { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .4); } #ask-user-card.readonly .auc-item.auc-item-dim { opacity: .42; } #ask-user-card .auc-item.auc-item-free .auc-num { font-style: normal; opacity: .7; } /* ── 多问题翻页 ── */ #ask-user-card .auc-pager { flex-shrink: 0; font-size: 12px; color: var(--text-3); padding: 2px 8px; border-radius: 10px; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .18); margin-right: 4px; letter-spacing: .3px; } #ask-user-card .auc-stage { position: relative; min-height: 60px; } #ask-user-card .auc-page { animation: auc-page-fade .2s ease; } @keyframes auc-page-fade { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } #ask-user-card .auc-page > .auc-q-text { font-size: 14px; color: var(--text); line-height: 1.5; margin: 4px 2px 10px 2px; font-weight: 500; } #ask-user-card .auc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; } #ask-user-card .auc-arrow { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .25); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s, opacity .15s, background .15s; } #ask-user-card .auc-arrow:hover:not(:disabled) { background: rgba(var(--accent-rgb), .22); color: var(--text); } #ask-user-card .auc-arrow:active:not(:disabled) { transform: scale(.9); } #ask-user-card .auc-arrow:disabled { opacity: .25; cursor: not-allowed; } /* ── 多问题确认页 ── */ #ask-user-card .auc-confirm { padding: 2px 0 0; } #ask-user-card .auc-confirm-title { font-size: 13px; color: var(--text-2); margin: 2px 2px 10px 2px; font-weight: 500; } #ask-user-card .auc-confirm-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .06); border: 1px solid rgba(var(--accent-rgb), .14); margin-bottom: 8px; } #ask-user-card .auc-confirm-qa { flex: 1; min-width: 0; } #ask-user-card .auc-confirm-q { font-size: 12.5px; color: var(--text-3); line-height: 1.4; margin-bottom: 4px; word-break: break-word; } #ask-user-card .auc-confirm-a { font-size: 14px; color: var(--text); line-height: 1.45; font-weight: 500; word-break: break-word; } #ask-user-card .auc-confirm-edit { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1px solid rgba(var(--accent-rgb), .25); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s, background .15s, color .15s; margin-top: 2px; } #ask-user-card .auc-confirm-edit:hover { background: rgba(var(--accent-rgb), .18); color: var(--text); } #ask-user-card .auc-confirm-edit:active { transform: scale(.9); } #ask-user-card .auc-confirm-send { width: 100%; margin-top: 6px; padding: 12px 16px; border-radius: 14px; background: var(--accent); border: none; color: var(--bg, #000); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: transform .12s, filter .15s; letter-spacing: .3px; } #ask-user-card .auc-confirm-send:hover { filter: brightness(1.08); } #ask-user-card .auc-confirm-send:active { transform: scale(.985); } /* ── ask chip / answer chip：K 提问 + R 回答的轻量 chip ── */ .think-chip-wrap.ask-chip-wrap .think-chip, .think-chip-wrap.ask-answer-wrap .think-chip { cursor: pointer; } .think-chip-wrap.ask-chip-wrap .tc-heart, .think-chip-wrap.ask-answer-wrap .tc-heart { color: rgb(var(--accent-rgb)); opacity: .85; } .think-chip-wrap.ask-chip-wrap .tc-summary, .think-chip-wrap.ask-answer-wrap .tc-summary { color: var(--text-2); font-size: 13px; } .think-chip-wrap.ask-chip-wrap:hover .tc-summary, .think-chip-wrap.ask-answer-wrap:hover .tc-summary { color: var(--text); } .think-chip-wrap.ask-chip-wrap:hover .tc-heart, .think-chip-wrap.ask-answer-wrap:hover .tc-heart { opacity: 1; } /* user 那条 chip 的容器要靠右（跟 user 气泡一致；userSameSide 时跟左） */ .mg.user .think-chip-wrap.ask-answer-wrap { align-self: flex-end; } body.user-same-side .mg.user .think-chip-wrap.ask-answer-wrap { align-self: flex-start; } /* 工具 chip — 复用 think-chip 视觉，色调用 sys 青色（跟 ask chip 的 accent 区分） */ .think-chip-wrap.tool-chip-wrap .think-chip { padding: 4px 6px 4px 0 } .think-chip-wrap.tool-chip-wrap .tc-heart { color: var(--accent); opacity: .9; } .think-chip-wrap.tool-chip-wrap .tc-heart svg { width: 14px; height: 14px; } .think-chip-wrap.tool-chip-wrap .tc-summary { color: var(--text-2); letter-spacing: .2px; } .think-chip-wrap.tool-chip-wrap .tc-caret { color: var(--dim) } .think-chip-wrap.tool-chip-wrap:hover .tc-heart { opacity: 1 } .think-chip-wrap.tool-chip-wrap:hover .tc-summary { color: var(--text-1) } /* 展开内容容器 — 复用 think-chip-body 的视觉 */ .tool-chip-body { font-family: inherit; font-size: 12.5px; line-height: 1.7 } .tool-chip-body .tcb-link { display: block; color: var(--accent); text-decoration: none; padding: 3px 0; word-break: break-word; font-size: 12.5px; } .tool-chip-body .tcb-link:hover { text-decoration: underline } .tool-chip-body .tcb-row { padding: 3px 0; color: var(--text-2); word-break: break-word } /* ── 工具结果 sheet（点 chip 弹出） — 跟思考链 sheet 风格区分：accent 主题色调，更柔和 ── */ .sheet.tool-sheet { background: var(--bg, #16161a); border-top-left-radius: 22px; border-top-right-radius: 22px; box-shadow: 0 -8px 32px rgba(0,0,0,.45); border-top: 1px solid rgba(var(--accent-rgb), .18); } .sheet.tool-sheet .sheet-body { padding: 18px 20px 24px } .tool-sheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid rgba(var(--accent-rgb), .12); margin-bottom: 14px; cursor: grab; user-select: none; } .tool-sheet-head .tool-sheet-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-rgb), .15); color: var(--accent); flex-shrink: 0; } .tool-sheet-head .tool-sheet-icon svg { width: 16px; height: 16px } .tool-sheet-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 } .tool-sheet-title { color: var(--text-1); font-size: 15px; font-weight: 600; letter-spacing: .3px } .tool-sheet-sub { color: var(--dim); font-size: 12px; letter-spacing: .2px } .tool-sheet-content { font-size: 14px; line-height: 1.7; color: var(--text-2); word-break: break-word; } .tool-sheet-row { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: rgba(var(--accent-rgb), .04); border-left: 2px solid rgba(var(--accent-rgb), .35); font-size: 13.5px; line-height: 1.65; } .tool-sheet-row-sum { margin-top: 6px; color: var(--text-3); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .tool-sheet-row .tool-sheet-link, .tool-sheet-link { color: var(--accent); text-decoration: none; display: block; word-break: break-word; } .tool-sheet-link:hover { text-decoration: underline } .tool-sheet-text { white-space: pre-wrap; word-break: break-word; background: rgba(255, 255, 255, .03); padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); } .tool-sheet-empty { color: var(--dim); font-style: italic; padding: 20px 0; text-align: center } /* 记忆类 sheet：可编辑 textarea + 保存按钮 */ .tool-sheet-mem-edit { width: 100%; min-height: 120px; padding: 14px 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 10px; color: var(--text-1); font-size: 14px; line-height: 1.7; font-family: inherit; resize: vertical; outline: none; transition: border-color .18s ease; box-sizing: border-box; } .tool-sheet-mem-edit:focus { border-color: var(--accent); background: rgba(var(--accent-rgb), .06) } .tool-sheet-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; } .tool-sheet-btn { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-family: inherit; cursor: pointer; border: 1px solid rgba(var(--accent-rgb), .35); background: transparent; color: var(--text-2); transition: all .18s ease; } .tool-sheet-btn:hover { background: rgba(var(--accent-rgb), .1); color: var(--text-1) } .tool-sheet-btn-primary { background: var(--accent); color: var(--bg, #16161a); border-color: var(--accent); font-weight: 500; } .tool-sheet-btn-primary:hover { opacity: .88; background: var(--accent); color: var(--bg, #16161a) } .tool-sheet-btn:disabled { opacity: .5; cursor: wait } /* ── 图片+文字合并气泡（一个气泡，图片在上 + 文字在下，主题色） ── */ .bub.img-cap-bub { padding: 0 !important; width: fit-content; max-width: min(var(--text-width), 80%); border-radius: 18px !important; overflow: hidden; } .bub.img-cap-bub > img.cap-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; cursor: pointer; } .bub.img-cap-bub > .cap-row { padding: 8px 12px 22px; /* 底 padding 给 ts 留位置（文字最后一行不会被盖） */ position: relative; /* ts 锚点 */ width: 100%; box-sizing: border-box; } .bub.img-cap-bub > .cap-row > .cap-text { display: block; width: 100%; word-break: break-word; text-align: left; font-size: var(--font-size, 15px); line-height: 1.4; color: var(--user-text, #fff); /* 不加 padding-right！让每行文字都撑满整宽到右边缘 */ } .bub.img-cap-bub > .cap-row > .cap-ts { position: absolute; bottom: 6px; right: 12px; font-size: 11px; color: rgba(255,255,255,0.7); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; line-height: 1; } .bub.img-cap-bub > .cap-row > .cap-ts .chk svg { width: 14px; height: 9px; } /* markdown 斜体（em）样式 — K 和 user 都生效，由 cfg.aiItalicColor / aiItalicScale 控制 * （cfg key 保留 ai* 前缀仅为存储兼容，实际作用范围不限于 K） */ .bub em, .bub-text em { color: var(--ai-italic-color, inherit); font-size: calc(1em * var(--ai-italic-scale, 1)); } /* === 文本规则的 checkbox label：仅勾选才有 chip 视觉，未勾选保持简洁 === */ .rule-row label:has(input[type="checkbox"]) > input[type="checkbox"] { display: none; } .rule-row label:has(input[type="checkbox"]:checked) { padding: 3px 8px !important; border: 1px solid rgba(var(--accent-rgb), 0.55); border-radius: 999px; background: rgba(var(--accent-rgb), 0.18); color: var(--accent) !important; font-weight: 500; transition: all 0.15s; } /* ── 时光碎片：右侧抽屉式，默认半屏，左拖可全屏，右拖关闭 ── */ .shards-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 200; opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .shards-overlay.open { opacity: 1; pointer-events: auto; } .shards-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 50vw; max-width: 100vw; background: var(--bg, #14141c); border-left: 1px solid var(--border-1); display: flex; flex-direction: column; z-index: 201; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), width 0.26s ease; box-shadow: -4px 0 28px rgba(0, 0, 0, 0.22); } .shards-panel.open { transform: translateX(0); } .shards-panel.dragging { transition: none; } @media (max-width: 600px) { .shards-panel { width: 65vw; } } /* 左边缘拖把：拖动改宽度，可达全屏或拖出去关闭 */ .shards-grip { position: absolute; top: 0; left: -10px; width: 20px; height: 100%; cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; z-index: 2; } .shards-grip-bar { width: 4px; height: 44px; background: rgba(var(--accent-rgb), 0.28); border-radius: 999px; transition: background 0.15s, height 0.15s; } .shards-grip:hover .shards-grip-bar, .shards-panel.dragging .shards-grip-bar { background: rgba(var(--accent-rgb), 0.55); height: 56px; } .shards-head { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px; border-bottom: 1px solid var(--border-1); flex-shrink: 0; } .shards-title { font-size: 15px; font-weight: 500; color: var(--text-1); letter-spacing: 1px; } .shards-close { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; } .shards-body { overflow-y: auto; flex: 1; padding: 6px 4px calc(24px + env(safe-area-inset-bottom, 0px)); } .shard-year-h, .shard-month-h, .shard-day-h { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; font-weight: 500; transition: color 0.12s; } .shard-year-h { padding: 8px 14px; color: var(--text-2); font-size: 13.5px; } .shard-month-h { padding: 6px 14px 6px 28px; color: var(--text-3); font-size: 12.5px; } .shard-day-h { padding: 5px 14px 5px 42px; color: var(--dim); font-size: 12px; letter-spacing: 0.5px; } .shard-day-cnt { margin-left: auto; margin-right: 6px; color: var(--dim); font-size: 10.5px; opacity: 0.65; } .shard-caret { transition: transform 0.18s; flex-shrink: 0; opacity: 0.55; } .shard-year-h.open > .shard-caret, .shard-month-h.open > .shard-caret, .shard-day-h.open > .shard-caret { transform: rotate(90deg); } .shard-item { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 56px; font-size: 12px; cursor: pointer; color: var(--text-3); line-height: 1.55; transition: background 0.1s; } .shard-item:hover { background: rgba(var(--accent-rgb), 0.06); } .shard-item:active { background: rgba(var(--accent-rgb), 0.12); } .shard-ts { color: var(--dim); flex-shrink: 0; min-width: 38px; font-variant-numeric: tabular-nums; font-size: 11px; } .shard-role { color: var(--accent); flex-shrink: 0; min-width: 14px; font-size: 11.5px; font-weight: 500; opacity: 0.85; } .shard-user .shard-role { color: var(--text-3); opacity: 0.75; } .shard-text { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; min-width: 0; } .shard-ic { color: var(--dim); display: inline-flex; flex-shrink: 0; opacity: 0.6; } .shard-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12px; } /* 同 m 拆出的工具/语音从属行：缩进、紫色、icon 实色——一眼区分"K 调过工具" */ .shard-item.shard-sub { padding-top: 2px; padding-bottom: 2px; padding-left: 110px; /* 比主行多缩进，跟主行的"内容列"对齐 */ } .shard-item.shard-kind-tool .shard-txt, .shard-item.shard-kind-voice .shard-txt { color: var(--accent); opacity: 0.78; font-size: 11.5px; } .shard-item.shard-kind-tool .shard-ic, .shard-item.shard-kind-voice .shard-ic { color: var(--accent); opacity: 0.7; } /* ── 主聊天滚动条 ── 全平台只用 DIY thumb（统一外观、避免 native 重叠） */ #msgs { scrollbar-width: none; } #msgs::-webkit-scrollbar { display: none; } /* DIY 虚拟滚动条 */ #msgs-scrollbar { position: fixed; right: 0; /* 贴屏幕最右 */ top: calc(var(--hdr-h, 60px) + 4px); bottom: calc(var(--inp-h, 72px) + 4px); width: 12px; /* hit area 12px（气泡 padding-right:12px，刚好不重叠） */ z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } #msgs-scrollbar.visible, #msgs-scrollbar.dragging { opacity: 1; } #msgs-scrollbar.dragging { transition: none; } #msgs-scrollbar-thumb { position: absolute; right: 0; width: 4px; padding-left: 8px; background: rgba(var(--accent-rgb), 0.20); /* 颜色再淡——近乎透明 */ background-clip: content-box; border-radius: 999px; min-height: 36px; pointer-events: auto; touch-action: none; box-sizing: content-box; will-change: top; } @keyframes shard-flash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.55); } } .shard-flash { animation: shard-flash-pulse 0.7s ease-in-out 2; border-radius: 8px; } /* showTokens toggle 接管：默认隐藏 token 计数，body.show-tokens 才显示 */ .msg-tokens{display:none} body.show-tokens .msg-tokens{display:inline} /* hideStyleBTime toggle 接管：默认显示 .tsep，body.hide-style-b-time 时整体隐藏 */ body.hide-style-b-time .tsep{display:none} /* showAiAv/showUserAv toggle 接管：默认隐藏，body.show-ai-av / .show-user-av 才显示；av-col 全空时整体收 */ .av.ai{display:none} .av.usr{display:none} body.show-ai-av .av.ai{display:flex} body.show-user-av .av.usr{display:flex} body:not(.show-ai-av) .av-col.ai-col{display:none} body:not(.show-user-av) .av-col.usr-col{display:none} /* pairedAvatar toggle 接管：av-col 统一结构，body.paired-av 切换 row/column 布局 + single 模式只显示对应角色 */ .av-col{display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-direction:column;gap:6px} body.paired-av .av-col{flex-direction:row;gap:0} body:not(.paired-av) .av-col.ai-col .av.usr{display:none !important} body:not(.paired-av) .av-col.usr-col .av.ai{display:none !important} body.paired-av:not(.show-ai-av):not(.show-user-av) .av-col{display:none} /* mini-av padding 跟 body.show-ai-av 同步——切头像开关不重 render */ body.show-ai-av { --ai-mini-av-pad: calc(var(--avatar-size, 32px) + 6px); }