/* ===================================================================
   质感增强层 · polish.css   （r1）
   -------------------------------------------------------------------
   加载顺序：styles.css → appearance-plus.css → design-system.css → 本文件
   定位：只做「叠加式」精致化，不改结构、不动换肤体系，可随时整文件移除回退。
   四条主线：① 毛玻璃悬浮浮层  ② 多层柔光阴影  ③ 细腻微交互  ④ 优雅滚动条。

   防翻车原则（沿用 appearance-plus 的教训）：
   - 玻璃化分场景：亮场景用「浅磨砂玻璃」（文字保持深色，清晰）；
     暗色模式用「深玻璃」（文字本就是浅色，清晰）。绝不在深底上留深字。
   - 玻璃化只在「设了聊天背景图」(body.has-chat-bg) 时生效；无背景图时保持
     原实底，仅享受阴影 / 微交互 / 滚动条等通用增强。
   =================================================================== */

:root {
  /* 多层柔光阴影（近实 + 中柔 + 远扩 → 干净的悬浮立体感） */
  --elev-1: 0 1px 2px rgba(20,35,28,.06), 0 2px 8px rgba(20,35,28,.05);
  --elev-2: 0 2px 6px rgba(20,35,28,.07), 0 10px 28px rgba(20,35,28,.10);
  --elev-3: 0 6px 16px rgba(20,35,28,.10), 0 22px 56px rgba(20,35,28,.18);
  /* 玻璃 / 卡片顶部内高光（一道极淡的釉面反光，质感的关键细节） */
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.55);
  --glass-edge-dark: inset 0 1px 0 rgba(255,255,255,.12);
  /* 顺滑微交互缓动曲线 */
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* 全局字体渲染更细腻 */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- 1. 选区 / 文本高亮：跟随翡翠主色 ---------- */
::selection { background: rgba(15,138,95,.22); }
.bubble-content ::selection,
.bubble-content::selection { background: rgba(15,138,95,.26); }

/* ---------- 2. 优雅滚动条（细 · 半透明 · 圆角 · hover 加深） ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(120,132,124,.42) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(120,132,124,.32);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background .2s ease;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(86,98,90,.5); background-clip: content-box; }
:root[data-mode="dark"] * { scrollbar-color: rgba(150,160,154,.34) transparent; }
:root[data-mode="dark"] *::-webkit-scrollbar-thumb { background: rgba(170,180,174,.26); background-clip: content-box; }
:root[data-mode="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(190,200,194,.42); background-clip: content-box; }

/* ---------- 3. 微交互：按钮悬停轻浮起、按下回落 ---------- */
.chat-tool-btn, .top-action-btn, .quick-btn, .scroll-bottom-btn,
.ri-mini-btn, .ri-edit-btn, .btn, button.primary,
.modal-actions button, .provider-row button, .inline-actions button,
.protagonist-me-btn, .protagonist-chip, .seg {
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
              color .16s var(--ease-out), box-shadow .2s var(--ease-out),
              transform .12s var(--ease-out);
}
.chat-tool-btn:hover, .top-action-btn:hover, .quick-btn:hover, .scroll-bottom-btn:hover,
.ri-mini-btn:hover, .ri-edit-btn:hover,
.modal-actions button:hover, .provider-row button:hover, .inline-actions button:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.chat-tool-btn:active, .top-action-btn:active, .quick-btn:active, .scroll-bottom-btn:active,
.ri-mini-btn:active, .modal-actions button:active, button.primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- 4. 主按钮：翡翠斜向渐变 + 立体光泽（全站统一） ---------- */
button.primary, .primary, .modal-actions .primary,
.ri-kb-primary, .edit-save, .side-empty-btn, .param-tip-btn {
  background-image: linear-gradient(135deg, #15a572 0%, #0c7850 100%);
  border-color: transparent;
  box-shadow: 0 2px 9px rgba(12,107,72,.26), var(--glass-edge);
}
button.primary:hover, .primary:hover, .modal-actions .primary:hover,
.ri-kb-primary:hover, .edit-save:hover, .side-empty-btn:hover, .param-tip-btn:hover {
  background-image: linear-gradient(135deg, #18b27c 0%, #0b6e4a 100%);
  box-shadow: 0 7px 20px rgba(12,107,72,.34), var(--glass-edge);
  transform: translateY(-1px);
}
/* 紫色「AI 智能」按钮：同样补一层光泽 */
.ri-mini-btn.ri-mini-btn-ai, .accent-btn, .btn--accent {
  box-shadow: 0 2px 9px rgba(109,94,252,.28), var(--glass-edge);
}
.ri-mini-btn.ri-mini-btn-ai:hover, .accent-btn:hover, .btn--accent:hover {
  box-shadow: 0 7px 20px rgba(109,94,252,.36), var(--glass-edge);
  transform: translateY(-1px);
}

/* ---------- 5. 头像：精致描边 + 轻投影（圆润有体积） ---------- */
.msg .avatar {
  box-shadow: 0 2px 8px rgba(20,35,28,.18), inset 0 0 0 1px rgba(255,255,255,.55);
}
.conv-item .avatar { box-shadow: 0 1px 5px rgba(20,35,28,.14); }

/* ---------- 6. 弹窗 / 浮层：统一柔光阴影 + 顶部釉光 ---------- */
.modal { box-shadow: var(--elev-3), var(--glass-edge); }
:root[data-mode="dark"] .modal { box-shadow: var(--elev-3), var(--glass-edge-dark); }
.quick-panel, .more-menu, .mem-popover, .ctx-menu, .wsb-pop,
.ri-kb-picker-panel, .protagonist-picker-panel, .model-dropdown, .group-speaker-menu {
  box-shadow: var(--elev-2), var(--glass-edge);
}

/* ---------- 7. 气泡：更柔的落影（无背景图时也更通透） ---------- */
.msg .bubble { transition: box-shadow .2s var(--ease-out); }
.msg.assistant .bubble { box-shadow: 0 1px 2px rgba(20,35,28,.05), 0 4px 16px rgba(20,35,28,.07); }

/* ===================================================================
   8. 沉浸模式（设了聊天背景图）· 浅磨砂玻璃浮层 —— 亮场景
      让顶栏 / 右侧面板 / 输入区「融入」背景，而不是白块硬贴上去。
      仅在非暗色模式下用浅玻璃：文字保持深色，清晰不翻车。
   =================================================================== */
:root:not([data-mode="dark"]) body.has-chat-bg .chat-topbar,
:root:not([data-mode="dark"]) body.has-chat-bg .chat-titlebar,
:root:not([data-mode="dark"]) body.has-chat-bg .chat-toolbar {
  background: rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255,255,255,.4) !important;
}
:root:not([data-mode="dark"]) body.has-chat-bg .chat-topbar { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 22px rgba(20,35,28,.10); }

:root:not([data-mode="dark"]) body.has-chat-bg .right-dock .status-panel,
:root:not([data-mode="dark"]) body.has-chat-bg .right-dock .world-state-bar,
:root:not([data-mode="dark"]) body.has-chat-bg .right-dock #groupBar.group-bar,
:root:not([data-mode="dark"]) body.has-chat-bg .composer-row,
:root:not([data-mode="dark"]) body.has-chat-bg #superComposerBar.sc-bar,
:root:not([data-mode="dark"]) body.has-chat-bg .composer-mid .composer-quick {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.5) !important;
  box-shadow: var(--elev-2), var(--glass-edge) !important;
}
/* 输入框聚焦时：玻璃更实一点 + 翡翠光环，聚焦感更强 */
:root:not([data-mode="dark"]) body.has-chat-bg .composer-row:focus-within {
  background: rgba(255,255,255,.74) !important;
  box-shadow: var(--elev-2), var(--glass-edge), 0 0 0 2px rgba(15,138,95,.18) !important;
}

/* ===================================================================
   9. 暗色模式 · 深玻璃浮层（文字本就是浅色，深玻璃上清晰）
   =================================================================== */
:root[data-mode="dark"] body.has-chat-bg .chat-topbar,
:root[data-mode="dark"] body.has-chat-bg .chat-titlebar,
:root[data-mode="dark"] body.has-chat-bg .chat-toolbar {
  background: rgba(22,25,30,.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-color: rgba(255,255,255,.08) !important;
}
:root[data-mode="dark"] body.has-chat-bg .right-dock .status-panel,
:root[data-mode="dark"] body.has-chat-bg .right-dock .world-state-bar,
:root[data-mode="dark"] body.has-chat-bg .right-dock #groupBar.group-bar,
:root[data-mode="dark"] body.has-chat-bg .composer-row,
:root[data-mode="dark"] body.has-chat-bg #superComposerBar.sc-bar,
:root[data-mode="dark"] body.has-chat-bg .composer-mid .composer-quick {
  background: rgba(26,30,36,.52) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.34), var(--glass-edge-dark) !important;
}
:root[data-mode="dark"] body.has-chat-bg .composer-row:focus-within {
  background: rgba(30,34,40,.66) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.34), var(--glass-edge-dark), 0 0 0 2px rgba(22,178,124,.3) !important;
}

/* ---------- 10. 暗色模式：弹窗 / 浮层也用深玻璃，统一通透质感 ---------- */
:root[data-mode="dark"] .modal {
  background: rgba(33,36,42,.92) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}

/* ===================================================================
   11. 流式输出抖动根治（最关键）
   -------------------------------------------------------------------
   本应用是「整页 window 滚动 + 输入框 sticky」。AI 流式输出时正文每 ~200ms
   增高一截，浏览器自带的「滚动锚定 overflow-anchor」会试图保持视口稳定，而 JS
   同时在主动「贴底 scrollPageToBottom」——两者每帧互相拉扯，正是聊天框上下「来回
   抖」、底部操作栏（删除等）点不中的根因。这里关掉浏览器自动锚定，贴底完全交给
   JS（配合气泡高度锁定 + 放宽后的贴底阈值），流式过程即稳。
   =================================================================== */
html, body { overflow-anchor: none; }
.messages, .messages .msg, .messages .bubble, .messages .bubble-content { overflow-anchor: none; }

/* 流式生成中：最新一条气泡停用毛玻璃 —— blur 在「每 200ms 重渲 + 每帧贴底滚动」下会被反复
   重采样重绘，是抖动/卡顿的放大器。气泡背景本就接近不透明，关掉 blur 不影响阅读；
   生成结束（body 去掉 is-generating）后自动恢复毛玻璃质感。 */
body.is-generating .messages .msg:last-child .bubble {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* 流式中也别让「最新气泡的入场/聚焦过渡」叠加到高频重渲上，避免额外的视觉跳动 */
body.is-generating .messages .msg:last-child .bubble,
body.is-generating .messages .msg:last-child .bubble-content { transition: none !important; }