/* 主题（docs/PAIR_PLAN.md 第十节，2026-10-20）：两人共享设置，任一方改两边同时换。
   app.js 把 html[data-theme] 设成 a / b / c；三套都来自 2026-10-06 的样机 deploy/previews/themes/ui-preview.html：
   A 玻璃清透、B 软萌果冻、C 简约质感（C 也是 style.css 末尾的默认整体视觉）。
   以 --accent 为底的按钮（发送、弹窗主按钮、搜索、游戏主按钮等）字色是 --accent-text，每套主题深浅都 ≥4.5:1（2026-10-21）：
   A 浅色压深底色、白字；B 浅色和三套深色保留原来的亮底，字改深色（B 用自己气泡同款深玫红，A / C 用各自的页面底色）。
   变量写在 body 上，比 :root 和 4.0 本地导航的 body.v4-active 都优先；只改颜色、字体和气泡外观，布局不动。
   浅色的 --text-dim（消息时间、气泡旁按钮图标等）2026-10-21 按原色相调深到在 --bg / --panel 上 ≥4.5:1，深色不变。 */

/* style.css 里几个把白字写死在 --accent 底上的按钮，跟上各主题的 --accent-text */
html[data-theme] :is(.ie button.ie-primary, .emoji-grid .sticker-locked button, .single-card-item .acts button.primary) { color: var(--accent-text); }

/* ---------- C 简约质感：与 style.css 末尾那块相同，这里只为压过 body.v4-active ---------- */
html[data-theme="c"] body {
    --bg: #f4f1ea; --panel: #fbfaf7; --surface: #fffdf8; --text: #2a2723; --text-dim: #746d5f; --border: #e4ddcf;
    --bubble-them: #fffdf8; --bubble-them-text: #2a2723; --bubble-mine: #2f3b33; --bubble-mine-text: #f3efe6;
    --accent: #2f3b33; --accent-text: #f7f3ea; --divider-bg: rgba(60, 50, 30, .07); --shadow: none; --radius: 10px;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="c"] body {
        --bg: #1b1a17; --panel: #22211d; --surface: #2a2925; --text: #ece6da; --text-dim: #9a9284; --border: #3a372f;
        --bubble-them: #2a2925; --bubble-them-text: #ece6da; --bubble-mine: #4a6253; --bubble-mine-text: #f3efe6;
        --accent: #6f8f79; --accent-text: #1b1a17; --divider-bg: rgba(255, 245, 225, .07);
    }
}

/* ---------- A 玻璃清透：淡蓝紫粉渐变底、半透明白气泡、蓝紫渐变的自己气泡、磨砂顶栏和输入区、圆头像、系统无衬线 ---------- */
html[data-theme="a"] body {
    --bg: #eef2fb; --panel: rgba(255, 255, 255, .72); --surface: rgba(255, 255, 255, .88); --text: #1f2537; --text-dim: #616b85;
    --border: rgba(120, 140, 200, .22); --bubble-them: rgba(255, 255, 255, .82); --bubble-them-text: #1f2537;
    --bubble-mine: #4f8cff; --bubble-mine-text: #ffffff; --accent: #3566d6; --accent-text: #ffffff;   /* 按钮底原 #4f8cff 白字 3.2:1，压到 4.0 页面同款 #3566d6（5.2:1） */
    --divider-bg: rgba(90, 110, 180, .1); --shadow: 0 4px 14px rgba(80, 90, 140, .12); --radius: 18px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; letter-spacing: 0;
}
/* 4.0 页面（我们 / 在一起 / 我的 / 发现、导航、弹窗）的语义颜色，用法见 v4.css */
html[data-theme="a"] body { --v4-bg:#eef2fb; --v4-card:#fbfcff; --v4-line:#d9e1f3; --v4-divider:#e7ecf8; --v4-text:#1f2537; --v4-muted:#58627f; --v4-faint:#606983; --v4-fill:#3566d6; --v4-on-fill:#fff; --v4-link:#2f5fc8; --v4-tint:#e0e8fb; --v4-tint-line:#cdd9f5; --v4-tint-ink:#3f4f7d; --v4-art:#bccdf2; --v4-soft:#e8edf9; --v4-warm:#fbeee2; --v4-warm-ink:#8a5a2e; --v4-warm-line:#e6c9a8; --v4-warm-card:#fffaf3; --v4-danger:#b8433a; --v4-nav:#fbfcfff2; --v4-input:#f5f8ff; --v4-switch:#cfd7ea; --v4-shadow:#1f2a5528; --v4-backdrop:#1a223a80; }
html[data-theme="a"] :is(#messages, .chat-mini-bg):not([class*="cbg-"]) { background-color: #eef2fb; background-image: linear-gradient(160deg, #e7f0ff 0%, #f6e8ff 50%, #ffeef2 100%); background-attachment: local; }
html[data-theme="a"] header, html[data-theme="a"] #composer { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
/* 浮在消息上的面板和菜单用实色：半透明会透出后面的气泡，且嵌在磨砂输入区/顶栏里，自身加磨砂也不生效 */
html[data-theme="a"] .emoji-panel, html[data-theme="a"] .head-menu, html[data-theme="a"] .reaction-picker { background: #fcfdff; }
html[data-theme="a"] .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { border-radius: 18px; border: 0; box-shadow: 0 4px 14px rgba(80, 90, 140, .12); }
html[data-theme="a"] .row.mine .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { background: linear-gradient(135deg, #5b9bff, #7a6bff); }
html[data-theme="a"] .avatar { border-radius: 50%; }
html[data-theme="a"] .avatar:not(.has-img) { background: #8fb6ff; }
html[data-theme="a"] .row.mine .avatar:not(.has-img) { background: #6a8dff; }
html[data-theme="a"] header .title .title-name, html[data-theme="a"] .head-title .head-name { font-weight: 600; letter-spacing: 0; }
@media (prefers-color-scheme: dark) {
    html[data-theme="a"] body {
        --bg: #161a2b; --panel: rgba(30, 34, 52, .8); --surface: rgba(38, 43, 66, .92); --text: #e8ebf6; --text-dim: #9aa3bf;
        --border: rgba(140, 160, 220, .2); --bubble-them: rgba(44, 50, 78, .9); --bubble-them-text: #e8ebf6;
        --bubble-mine: #4f8cff; --bubble-mine-text: #ffffff; --accent: #6ea2ff; --accent-text: #161a2b; --divider-bg: rgba(255, 255, 255, .08); --shadow: 0 4px 14px rgba(0, 0, 0, .3);
    }
    html[data-theme="a"] body { --v4-bg:#161a2b; --v4-card:#1f2438; --v4-line:#2f3754; --v4-divider:#272e47; --v4-text:#e8ebf6; --v4-muted:#a6aecb; --v4-faint:#8c94b2; --v4-fill:#3d6dd8; --v4-on-fill:#fff; --v4-link:#94b6ff; --v4-tint:#1e2742; --v4-tint-line:#2d3a62; --v4-tint-ink:#aebfe8; --v4-art:#34446f; --v4-soft:#1b2034; --v4-warm:#362c26; --v4-warm-ink:#e3b58b; --v4-warm-line:#5d4836; --v4-warm-card:#2a2629; --v4-danger:#ff8f82; --v4-nav:#171b2cf2; --v4-input:#1a1f33; --v4-switch:#3a4362; --v4-shadow:#00000066; --v4-backdrop:#000000a0; }
    html[data-theme="a"] :is(#messages, .chat-mini-bg):not([class*="cbg-"]) { background-color: #161a2b; background-image: linear-gradient(160deg, #1a2238 0%, #241c3a 50%, #2a1c28 100%); }
    html[data-theme="a"] header, html[data-theme="a"] #composer { background: rgba(28, 32, 50, .7); }
    html[data-theme="a"] .emoji-panel, html[data-theme="a"] .head-menu, html[data-theme="a"] .reaction-picker { background: #252a40; }
    html[data-theme="a"] .avatar:not(.has-img) { background: #4a6bb5; }
}

/* ---------- B 软萌果冻：奶油粉底、白气泡粉描边加硬阴影、粉色自己气泡、橙黄圆头像、圆体字 ---------- */
html[data-theme="b"] body {
    --bg: #fff8f3; --panel: #fff4f6; --surface: #ffffff; --text: #4a3a40; --text-dim: #926574; --border: #f6dfe5;
    --bubble-them: #ffffff; --bubble-them-text: #4a3a40; --bubble-mine: #ffb5c8; --bubble-mine-text: #5b1f33;
    --accent: #ff7aa2; --accent-text: #5b1f33; --divider-bg: rgba(255, 122, 162, .1); --shadow: 0 3px 0 #f3dde3; --radius: 20px;
    font-family: "Hiragino Maru Gothic ProN", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0;
}
html[data-theme="b"] body { --v4-bg:#fff8f3; --v4-card:#ffffff; --v4-line:#f3dbe2; --v4-divider:#f8e8ec; --v4-text:#4a3a40; --v4-muted:#7d5d68; --v4-faint:#826670; --v4-fill:#c43f6c; --v4-on-fill:#fff; --v4-link:#b0375f; --v4-tint:#ffe8ee; --v4-tint-line:#f8d3dd; --v4-tint-ink:#7a4558; --v4-art:#f6c2d1; --v4-soft:#fff0f2; --v4-warm:#fdeedd; --v4-warm-ink:#8d5b33; --v4-warm-line:#ecc9a6; --v4-warm-card:#fffaf2; --v4-danger:#b8423a; --v4-nav:#fffffff2; --v4-input:#fffafb; --v4-switch:#ecd6dc; --v4-shadow:#5a2a3a24; --v4-backdrop:#3a1f2a80; }
html[data-theme="b"] :is(#messages, .chat-mini-bg):not([class*="cbg-"]) { background-color: #fff8f3; background-image: none; }
html[data-theme="b"] .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { border-radius: 20px; border: 2px solid #f3dde3; box-shadow: 0 3px 0 #f3dde3; }
html[data-theme="b"] .row.mine .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { border-color: #f59ab4; box-shadow: 0 3px 0 #f59ab4; }
html[data-theme="b"] .avatar { border-radius: 50%; }
html[data-theme="b"] .avatar:not(.has-img) { background: #ffcf87; color: #7a4b00; }
html[data-theme="b"] .row.mine .avatar:not(.has-img) { background: #ff9fb9; color: #6b1a35; }   /* 白字在粉底上只有 1.9:1，换深玫红 6:1 */
html[data-theme="b"] #send { border-radius: 18px; box-shadow: 0 3px 0 #e05c86; }
html[data-theme="b"] #send:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
html[data-theme="b"] header .title .title-name, html[data-theme="b"] .head-title .head-name { font-weight: 600; letter-spacing: 0; }
@media (prefers-color-scheme: dark) {
    html[data-theme="b"] body {
        --bg: #2a1f24; --panel: #33262c; --surface: #3a2c33; --text: #f3e6ea; --text-dim: #b899a3; --border: #4a373f;
        --bubble-them: #3a2c33; --bubble-them-text: #f3e6ea; --bubble-mine: #c9607f; --bubble-mine-text: #fff2f6;
        --accent: #ff8fb1; --accent-text: #5b1f33; --divider-bg: rgba(255, 255, 255, .08); --shadow: 0 3px 0 #22181c;
    }
    html[data-theme="b"] body { --v4-bg:#2a1f24; --v4-card:#34262d; --v4-line:#4a3640; --v4-divider:#3e2e35; --v4-text:#f3e6ea; --v4-muted:#cdb2bb; --v4-faint:#ac909a; --v4-fill:#b1446a; --v4-on-fill:#fff; --v4-link:#ff9fbf; --v4-tint:#3a2630; --v4-tint-line:#523543; --v4-tint-ink:#f0bccd; --v4-art:#5e3a4a; --v4-soft:#31232a; --v4-warm:#3e3027; --v4-warm-ink:#e8bb90; --v4-warm-line:#62493a; --v4-warm-card:#33282a; --v4-danger:#ff9488; --v4-nav:#2b2025f2; --v4-input:#2f2328; --v4-switch:#5a4450; --v4-shadow:#00000066; --v4-backdrop:#000000a0; }
    html[data-theme="b"] :is(#messages, .chat-mini-bg):not([class*="cbg-"]) { background-color: #2a1f24; }
    html[data-theme="b"] .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { border-color: #4a373f; box-shadow: 0 3px 0 #22181c; }
    html[data-theme="b"] .row.mine .bubble:not(.img):not(.sticker):not(.emoji-only):not([class*=" bs-"]) { border-color: #d97a98; box-shadow: 0 3px 0 #8e4660; }
    html[data-theme="b"] .avatar:not(.has-img) { background: #b98a4a; color: #fff5e6; }
}

/* ---------- 个人开关「气泡与入场动画」关闭：与各处 prefers-reduced-motion 规则一致，app.js 给 html 加 .still ----------
   表情本身由 app.js 的 reduceMotion() 换成静态图；这里只收掉 CSS 动画。 */
html.still .bubble.deco-play[class*=" bs-"]::after, html.still .bubble.deco-play.bs-snake::before, html.still .bubble.deco-play.bs-guaiguai::before,
html.still .bubble.deco-play.bs-guaiguai.bs-long .bs-rider, html.still .bubble.deco-play .bs-limbs::before, html.still .bubble.deco-play .bs-limbs::after,
html.still .bubble-wrap.enter-dash, html.still .enter-dash .bubble[class*=" bs-"], html.still .enter-dash .bubble .bs-limbs::before, html.still .enter-dash .bubble .bs-limbs::after,
html.still .enter-dash .bubble[class*=" bs-"]::before, html.still .enter-dash .bubble[class*=" bs-"]::after, html.still .enter-dash .bs-rider,
html.still .avatar.pat-shake .pendant, html.still .empty .blur-line span, html.still .bubble-wrap.enter-mine, html.still .bubble-wrap.enter-them { animation: none; }
html.still header .title .typing, html.still #peer-name .typing { animation: none; color: var(--text-dim); background: none; }

/* 不滚动时滚动条渐隐（app.js fadeScrollbar 给容器加 .fade-scroll，滚动中加 .scrolling）。
   支持标准 scrollbar-color 的浏览器用颜色过渡做渐隐；其余（旧 Safari）走 ::-webkit-scrollbar 直接显隐。 */
.fade-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .6s ease; }
.fade-scroll.scrolling { scrollbar-color: rgba(0, 0, 0, .22) transparent; transition-duration: .12s; }
@supports not (scrollbar-color: auto) {
  .fade-scroll::-webkit-scrollbar { width: 6px; }
  .fade-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
  .fade-scroll.scrolling::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); }
}
@media (prefers-color-scheme: dark) {
  .fade-scroll.scrolling { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
  @supports not (scrollbar-color: auto) { .fade-scroll.scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); } }
}