/* ============================================================
 * 薯薯 · 全站 AI 助手 —— 样式层
 * ------------------------------------------------------------
 * 设计约束（任务书）：
 *   · 沿用小红书主色 #FF2442，面板 380-420px、圆角 24px
 *   · 助手气泡 #FFF5F6，用户气泡 #FF2442
 *   · 输入框 Floating Label + Focus Glow
 *   · 动效只用 transform / opacity（合成层友好）
 *   · 尊重 prefers-reduced-motion
 *   · 助手可最小化 / 关闭，默认不遮挡主要内容
 * ============================================================ */

:root {
  --ss-panel-w: 400px;          /* 任务书要求 380-420px */
  --ss-radius: 24px;
  --ss-bubble-ai: #FFF5F6;      /* 助手气泡 */
  --ss-bubble-me: #FF2442;      /* 用户气泡 */
  --ss-avatar: 116px;
  --ss-ease: cubic-bezier(.22, .61, .36, 1);
  --ss-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ss-shadow-1: 0 2px 8px rgba(31, 27, 29, .06);
  --ss-shadow-2: 0 12px 32px rgba(31, 27, 29, .12);
  --ss-shadow-3: 0 24px 64px rgba(31, 27, 29, .18);
}

/* ======================= 悬浮角色 ======================= */
.ss-stage[data-ready="1"] { visibility: visible; }
.ss-stage {
  position: fixed;
  /* 2026-09-30：24px 太贴内了，贴右下角 8px（用户要求） */
  right: 8px;
  bottom: 8px;
  z-index: var(--z-companion, 9000);
  width: var(--ss-avatar);
  height: var(--ss-avatar);
  pointer-events: none;
  /* 2026-10-04 CLS：形态（简约 SVG 116x116 ↔ 动漫立绘 168x240）定下来之前先隐身，
     尺寸变化发生在不可见期间，就不会被记为布局偏移；paint() 定完再显形。 */
  visibility: hidden;
  /* 只用 transform/opacity 做位移，避免触发 relayout */
  transition: transform .38s var(--ss-ease), opacity .28s var(--ss-ease);
}
/* 对话面板打开时，角色挪到面板左侧，不遮挡输入区。
 * 形象面板的「摆放」会把缩放与偏移写进 --ss-scale / --ss-ox / --ss-oy。
 *
 * 缩放这里**不能用 transform: scale()** —— 那只是把已有的位图拉伸，
 * canvas 位图分辨率不跟着涨，一放大就糊（实测密度从 2.0 掉到 1.54）。
 * 改成用 width/height 缩放：尺寸一变，ResizeObserver 会重新贴合画布，
 * 位图重新按新尺寸渲染，放大也保持清晰。位移仍用 transform（平移不会糊）。 */
.ss-stage {
  width: calc(var(--ss-avatar) * var(--ss-scale, 1));
  height: calc(var(--ss-avatar) * var(--ss-scale, 1));
  transform: translate3d(var(--ss-ox, 0px), var(--ss-oy, 0px), 0);
  transform-origin: 100% 100%;
}
.ss-stage[data-shift="1"] {
  /* --ss-shift-w 由 JS 按面板实际宽度写入（有侧边栏时面板更宽）；
   * 没写就回落到 --ss-panel-w，行为跟原来一致。 */
  transform: translate3d(calc(var(--ss-ox, 0px) - var(--ss-shift-w, var(--ss-panel-w)) - 26px), var(--ss-oy, 0px), 0);
}
.ss-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: transform;
  transition: transform .38s var(--ss-pop);
}
.ss-avatar:active { transform: scale(.94); }
.ss-avatar svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 角色各部件只接受 transform / opacity，参数由 ai-mouse-tracker 写入 CSS 变量 */
.ss-c-body  { transform: translate(var(--ss-body-x, 0px), var(--ss-body-y, 0px)) rotate(var(--ss-body-r, 0deg)); transform-origin: 50% 82%; transition: transform .5s var(--ss-ease); }
.ss-c-head  { transform: translate(var(--ss-head-x, 0px), var(--ss-head-y, 0px)) rotate(var(--ss-head-r, 0deg)); transform-origin: 50% 78%; transition: transform .32s var(--ss-ease); }
.ss-c-pupil { transform: translate(var(--ss-eye-x, 0px), var(--ss-eye-y, 0px)); transition: transform .12s linear; }
.ss-c-sprout{ transform: rotate(var(--ss-sprout-r, 0deg)); transform-origin: 50% 100%; transition: transform .6s var(--ss-ease); }
.ss-c-lid   { transform: scaleY(var(--ss-lid, 0)); transform-origin: 50% 0; transition: transform .18s var(--ss-ease); }
.ss-c-blush { opacity: var(--ss-blush, .55); transition: opacity .3s var(--ss-ease); }

/* 情绪动作（全部走 transform） */
.ss-avatar[data-motion="hop"]    { animation: ss-hop .62s var(--ss-ease); }
.ss-avatar[data-motion="settle"] { animation: ss-settle .7s var(--ss-ease); }
.ss-avatar[data-motion="tilt"]   { animation: ss-tilt .8s var(--ss-ease); }
.ss-avatar[data-motion="wobble"] { animation: ss-wobble .9s var(--ss-ease); }
.ss-avatar[data-motion="back"]   { animation: ss-back .6s var(--ss-ease); }
@keyframes ss-hop    { 0%,100% { transform: translateY(0) } 30% { transform: translateY(-14px) scale(1.04) } 60% { transform: translateY(2px) } }
@keyframes ss-settle { 0% { transform: translateY(6px) scale(.97) } 100% { transform: translateY(0) scale(1) } }
@keyframes ss-tilt   { 0%,100% { transform: rotate(0) } 35% { transform: rotate(-7deg) } 70% { transform: rotate(5deg) } }
@keyframes ss-wobble { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-4deg) translateX(-3px) } 75% { transform: rotate(4deg) translateX(3px) } }
@keyframes ss-back   { 0%,100% { transform: translateX(0) } 40% { transform: translateX(-10px) rotate(-3deg) } }

/* 呼吸（静止时的生命力） */
.ss-avatar::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 144, .22), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ss-ease);
  z-index: -1; pointer-events: none; }
.ss-avatar[data-state="thinking"]::after { opacity: 1; animation: ss-breathe 1.8s ease-in-out infinite; }
@keyframes ss-breathe { 0%,100% { transform: scale(1); opacity: .5 } 50% { transform: scale(1.14); opacity: 1 } }

/* 说话时的音波 */
.ss-speaking {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  display: flex; gap: 3px; align-items: flex-end; height: 14px;
  opacity: 0; transition: opacity .25s var(--ss-ease);
}
.ss-avatar[data-speaking="1"] .ss-speaking { opacity: 1; }
.ss-speaking i {
  display: block; width: 3px; height: 6px; border-radius: 2px;
  background: var(--brand-2); transform-origin: 50% 100%;
}
.ss-avatar[data-speaking="1"] .ss-speaking i { animation: ss-wave .9s ease-in-out infinite; }
.ss-speaking i:nth-child(2) { animation-delay: .15s !important }
.ss-speaking i:nth-child(3) { animation-delay: .3s !important }
@keyframes ss-wave { 0%,100% { transform: scaleY(.5) } 50% { transform: scaleY(2.2) } }

/* 未读红点 */
.ss-dot {
  position: absolute; top: 6px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 var(--s-4);
  border-radius: 8px; background: var(--xhs-red-solid, #E01230);
  color: #fff; font-size: 12px; line-height: 18px; text-align: center;
  font-weight: 600; box-shadow: var(--shadow-red);
  transform: scale(0); transition: transform .3s var(--ss-pop);
}
.ss-dot[data-show="1"] { transform: scale(1); }

/* 关闭状态 */
.ss-stage[data-hidden="1"] { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: all .3s var(--ss-ease); }

/* ======================= 对话面板 ======================= */
.ss-panel {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: calc(var(--z-companion, 9000) + 100);
  width: var(--ss-panel-w);
  height: min(620px, calc(100vh - 48px));
  height: min(620px, calc(100dvh - 48px));
  display: flex; flex-direction: column;
  background: var(--bg-surface, #fff);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-3);
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .08));
  overflow: hidden;
  transform: translateY(18px) scale(.96);
  opacity: 0; visibility: hidden;
  transform-origin: 100% 100%;
  transition: transform .34s var(--ss-pop), opacity .26s var(--ss-ease), visibility .34s;
}
.ss-panel[data-open="1"] { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }

.ss-head {
  display: flex; align-items: center; gap: var(--s-10);
  padding: var(--s-14) var(--s-16);
  border-bottom: 1px solid var(--bd-1, rgba(31, 27, 29, .07));
  background: linear-gradient(180deg, #FFF7F8, var(--bg-surface, #fff));
  flex: 0 0 auto;
}
.ss-head-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.ss-head-avatar svg { width: 100%; height: 100%; }
.ss-head-txt { flex: 1 1 auto; min-width: 0; }
.ss-head-name { font-size: 15px; font-weight: 650; color: var(--text-1, #1F1B1D); letter-spacing: .2px; }
.ss-head-sub { font-size: 12px; color: var(--text-3, #6E6869); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-icon-btn {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
  border: 0; background: transparent; color: var(--text-3, #6E6869);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .2s var(--ss-ease), background .2s var(--ss-ease), color .2s var(--ss-ease);
}
.ss-icon-btn:hover { background: var(--brand-soft, #FFF5F6); color: var(--xhs-red-text, #D81B37); transform: scale(1.08); }
.ss-icon-btn:active { transform: scale(.92); }
.ss-icon-btn svg { width: 17px; height: 17px; }

/* 消息流 */
.ss-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  /* 2026-10-17：底部留白原来是 16px。悬停冒出来的操作栏有 26px 高，
     最后一条消息一 hover 就把行撑高、操作栏正好掉到可视区外面被输入区盖住（1440 实测：
     贴到底时行尾离可视区下沿只有 16px 留白，操作栏只能在 10px 之外 —— 看得见点不着）。
     留白给够一行操作栏的高度，最后一条消息的操作栏才有地方放。 */
  padding: var(--s-16) var(--s-16) 40px; display: flex; flex-direction: column; gap: var(--s-10);
  scroll-behavior: smooth;
}
.ss-body::-webkit-scrollbar { width: 6px }
.ss-body::-webkit-scrollbar-thumb { background: rgba(31, 27, 29, .12); border-radius: 3px }

.ss-row { display: flex; gap: var(--s-8); align-items: flex-end; animation: ss-in .32s var(--ss-ease) both; }
.ss-row[data-me="1"] { flex-direction: row-reverse; }
@keyframes ss-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* K10 修复：原来 max-width 78%（面板 400px 时仅 ~312px），长回复被压成又高又窄的一条，
   明显短于微信 / QQ 的观感。改为「再宽一点 + 硬上限」：桌面端最多占 92% 且不超过 760px，
   移动端 96%，短消息仍由内容自适应（fit-content 靠 flex 自身收缩）。 */
.ss-bubble {
  max-width: min(92%, 760px); padding: var(--s-10) var(--s-14); font-size: 14px; line-height: 1.62;
  border-radius: 16px; word-break: break-word; white-space: pre-wrap;
  box-shadow: var(--ss-shadow-1);
}
.ss-row:not([data-me="1"]) .ss-bubble {
  background: var(--ss-bubble-ai); color: var(--text-1, #1F1B1D);
  border-bottom-left-radius: 6px;
}
.ss-row[data-me="1"] .ss-bubble {
  background: var(--ss-bubble-me); color: #fff;
  border-bottom-right-radius: 6px;
}
.ss-bubble a { color: inherit; text-decoration: underline; }

/* 打字光标 */
.ss-caret { display: inline-block; width: 2px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--brand-2); animation: ss-caret 1s steps(2) infinite; }
@keyframes ss-caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ShinyText「正在思考…」 */
.ss-thinking {
  display: inline-flex; align-items: center; gap: var(--s-6);
  font-size: 13px; color: var(--text-3, #6E6869);
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 40%, var(--brand-2) 50%, var(--text-3) 60%, var(--text-3) 100%);
  background-size: 220% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ss-shine 1.6s linear infinite;
}
@keyframes ss-shine { to { background-position: -120% 0 } }

/* 工具结果卡 */
.ss-tool {
  margin: 2px 0 var(--s-6); max-width: 88%;
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .09));
  border-radius: 14px; background: var(--bg-surface, #fff);
  box-shadow: var(--ss-shadow-1); overflow: hidden;
  animation: ss-in .3s var(--ss-ease) both;
}
.ss-tool-head { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-8) var(--s-12); background: var(--brand-soft, #FFF5F6); font-size: 12px; color: var(--brand-3); font-weight: 600; }
.ss-tool-head svg { width: 13px; height: 13px }
.ss-tool-body { padding: var(--s-8) var(--s-12); font-size: 13px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; max-height: 168px; overflow: auto; overscroll-behavior: contain; }
.ss-tool-act { display: flex; gap: var(--s-8); padding: 0 var(--s-12) var(--s-10); }
.ss-tool-btn {
  border: 0; border-radius: 999px; padding: var(--s-4) var(--s-12); font-size: 12px; font-weight: 600;
  background: var(--xhs-red-solid, #E01230); color: #fff; cursor: pointer;
  transition: transform .18s var(--ss-ease), box-shadow .18s var(--ss-ease);
}
.ss-tool-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-red)}
.ss-tool-btn:active { transform: scale(.95) }

/* 附件预览 */
.ss-attach { display: inline-flex; align-items: center; gap: var(--s-6); margin-top: var(--s-6); padding: var(--s-4) var(--s-10);
  border-radius: 10px; background: rgba(31,27,29,.05); font-size: 12px; color: var(--text-2); max-width: 100%; }
.ss-attach svg { width: 13px; height: 13px; flex: 0 0 13px }
.ss-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* 图片附件（同轮识图）：气泡内缩略图 + 输入框上方提示条 */
.ss-msg-img { display: block; max-width: 180px; max-height: 180px; margin-top: var(--s-6);
  border-radius: 10px; object-fit: cover; border: 1px solid rgba(31,27,29,.08); background: rgba(31,27,29,.04); }
.ss-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 34px;
  border: 1px solid rgba(31,27,29,.08); vertical-align: middle; }

/* 视频 / 音乐：异步出片卡片（提交后轮询，出片就地渲染播放器） */
.ss-media { margin-top: var(--s-8); }
.ss-media-wait { display: flex; align-items: center; gap: var(--s-6); font-size: 12px; color: var(--text-2); }
.ss-media-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-1); flex: 0 0 8px;
  animation: ss-media-pulse 1.2s ease-in-out infinite; }
@keyframes ss-media-pulse { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
.ss-media-card { display: flex; flex-direction: column; gap: var(--s-8); }
.ss-media-video { width: 100%; max-height: 260px; border-radius: 10px; background: #000; }
.ss-media-audio { width: 100%; }
.ss-media-cover { width: 100%; max-width: 220px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(31,27,29,.08); }
.ss-media-link { font-size: 12px; color: var(--xhs-red-text, #D81B37); text-decoration: none; }
.ss-media-bar { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; margin-top: var(--s-6); }
.ss-media-exp { font-size: 12px; color: var(--text-2); opacity: .75; }
.ss-media-err { font-size: 12px; color: #b3342a; }
@media (prefers-reduced-motion: reduce) { .ss-media-dot { animation: none; opacity: .8 } }

/* ======================= 输入区 ======================= */
.ss-foot { flex: 0 0 auto; padding: var(--s-10) var(--s-12) var(--s-12); border-top: 1px solid var(--bd-1, rgba(31,27,29,.07)); background: var(--bg-surface, #fff); }
.ss-drop { position: absolute; inset: 0; border: 2px dashed var(--brand-1); border-radius: var(--ss-radius);
  background: rgba(255, 122, 144, .06); display: none; place-items: center; z-index: 5; pointer-events: none; }
.ss-drop[data-on="1"] { display: grid; }
.ss-drop div { font-size: 13px; color: var(--brand-3); font-weight: 600 }

/* 2026-09-30 发送区重构（参考 DeepSeek / 豆包网页版）：
 * 一整块输入容器：textarea 独占一行（不再给右侧按钮让位），
 * 按钮行独立在下方 —— 左侧附件/麦克风，右侧圆形发送键。
 * 有内容 → 红色可发；无内容 → 灰色禁用。彻底解决按钮压字/错位/出框。 */
.ss-field {
  position: relative;
  background: var(--bg-surface, #fff);
  border: 1.5px solid var(--bd-1, rgba(31,27,29,.12));
  border-radius: 16px;
  padding: 0 8px 8px;
  transition: border-color .22s var(--ss-ease), box-shadow .22s var(--ss-ease);
}
.ss-field:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 4px var(--brand-ring, rgba(255,36,66,.18)); }
.ss-input {
  width: 100%; min-height: 46px; max-height: 120px; resize: none;
  padding: 15px 14px 0;
  border: 0; border-radius: 0;
  font-size: 14px; line-height: 1.5; font-family: inherit;
  color: var(--text-1); background: transparent;
  outline: none;
}
.ss-input:focus { border: 0; box-shadow: none; }
.ss-label {
  position: absolute; left: 15px; top: 15px; font-size: 14px; color: var(--text-4, #6E6869);
  pointer-events: none; transform-origin: 0 0;
  transition: transform .2s var(--ss-ease), color .2s var(--ss-ease);
}
.ss-input:focus + .ss-label,
.ss-field[data-filled="1"] .ss-label { opacity: 0; transform: translateY(-3px); }

.ss-ops { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 0 6px; }
.ss-ops-l { display: flex; align-items: center; gap: 2px; }
.ss-op {
  width: 30px; height: 30px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--text-3); display: grid; place-items: center;
  transition: transform .18s var(--ss-ease), color .18s var(--ss-ease), background .18s var(--ss-ease);
}
.ss-op:hover { color: var(--xhs-red-text, #D81B37); background: var(--brand-soft, #FFF5F6); transform: scale(1.08) }
.ss-op:active { transform: scale(.9) }
.ss-op[data-on="1"] { color: #fff; background: var(--xhs-red-solid, #E01230); animation: ss-pulse 1.6s ease-in-out infinite }
@keyframes ss-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,36,66,.4) } 50% { box-shadow: 0 0 0 7px rgba(255,36,66,0) } }
.ss-op svg { width: 16px; height: 16px }

.ss-send {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--xhs-red-solid, #E01230); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  transition: transform .18s var(--ss-ease), opacity .18s var(--ss-ease), background .18s var(--ss-ease);
}
.ss-send:disabled { opacity: .35; cursor: default }
.ss-send:not(:disabled):hover { transform: scale(1.08) }
.ss-send:not(:disabled):active { transform: scale(.9) }
.ss-send svg { width: 16px; height: 16px }

.ss-hint { margin-top: var(--s-6); font-size: 12px; color: var(--text-4); text-align: center }

/* ======================= 主动气泡 ======================= */
.ss-proactive {
  /* 2026-10-06：兜底位置改用挂件真实尺寸（--ss-widget-h 由 ai-assistant.js 实测写入），
     立绘形态 240px 高时不再按 116px 估算压到角色身上；精确定位由 place() 接管 */
  position: fixed; right: 20px; bottom: calc(var(--ss-widget-h, var(--ss-avatar, 116px)) + 24px);
  z-index: calc(var(--z-companion, 9000) + 50); max-width: 300px;
  background: var(--bg-surface, #fff); border-radius: 16px;
  box-shadow: var(--ss-shadow-2); border: 1px solid var(--bd-1, rgba(31,27,29,.08));
  padding: var(--s-12) var(--s-14); font-size: 14px; line-height: 1.6; color: var(--text-1);
  transform: translateY(10px) scale(.94); opacity: 0; visibility: hidden;
  transform-origin: 100% 100%;
  transition: transform .34s var(--ss-pop), opacity .26s var(--ss-ease), visibility .34s;
}
.ss-proactive[data-show="1"] { transform: none; opacity: 1; visibility: visible; }
/* 文本最多 4 行：LLM 生成的消息偶尔会写长，不限高的话气泡能盖住半个图表。
 * 超出省略 —— 点气泡进会话看全文，浮层只负责「提一嘴」。 */
.ss-proactive-txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; overscroll-behavior: contain;
}
.ss-proactive-act { display: flex; gap: var(--s-14); margin-top: var(--s-8); }
.ss-proactive-act button {
  border: 0; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text-3); padding: 0; transition: color .18s var(--ss-ease), transform .18s var(--ss-ease);
}
.ss-proactive-act button:hover { color: var(--xhs-red-text, #D81B37); transform: translateX(2px) }
.ss-proactive-act button[data-primary="1"] { color: var(--xhs-red-text, #D81B37)}
.ss-proactive-close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent;
  color: var(--text-4); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px var(--s-4); }
/* 高优先级（额度告警 / 任务失败 / 数据异常）：左边一道强调条，跟日常寒暄区分开 */
.ss-proactive[data-priority="high"] {
  border-left: 3px solid var(--brand-2); padding-left: calc(var(--s-14) - 3px);
}
/* 主动消息进了会话之后的来源标记，方便回头分辨「哪句是薯薯自己找我的」 */
.ss-pro-tag { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--text-3);
  background: var(--brand-soft); }
.ss-pro-tag[data-p="high"] { color: var(--xhs-red-text, #D81B37); }
.ss-row[data-me="0"] .ss-pro-tag + * { margin-top: 0 }

/* ======================= 设置抽屉 ======================= */
.ss-settings { position: absolute; inset: 0; z-index: 20; background: var(--bg-surface, #fff);
  padding: var(--s-16); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .3s var(--ss-ease); }
.ss-settings[data-open="1"] { transform: none }
.ss-set-title { font-size: 15px; font-weight: 650; margin: 0 0 var(--s-14); color: var(--text-1)}
.ss-set-group { margin-bottom: var(--s-18) }
.ss-set-group h4 { font-size: 12px; color: var(--text-3); font-weight: 600; margin: 0 0 var(--s-8); letter-spacing: .4px }
.ss-set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-10); padding: var(--s-8) 0;
  border-bottom: 1px solid var(--bd-1, rgba(31,27,29,.06)); font-size: 14px; color: var(--text-1)}
.ss-set-row:last-child { border-bottom: 0 }
.ss-set-row small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; line-height: 1.45 }
.ss-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border: 0; border-radius: 12px;
  background: rgba(31,27,29,.16); cursor: pointer; transition: background .22s var(--ss-ease) }
.ss-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform .22s var(--ss-pop) }
.ss-switch[data-on="1"] { background: var(--brand-2) }
.ss-switch[data-on="1"]::after { transform: translateX(18px) }
.ss-select { border: 1px solid var(--bd-1, rgba(31,27,29,.14)); border-radius: 10px; padding: var(--s-4) var(--s-8);
  font-size: 13px; background: var(--bg-surface, #fff); color: var(--text-1); font-family: inherit; max-width: 170px }

/* 记忆列表 */
.ss-mem-item { display: flex; align-items: flex-start; gap: var(--s-8); padding: var(--s-8) 0; border-bottom: 1px solid var(--bd-1, rgba(31,27,29,.06)); font-size: 13px }
.ss-mem-item:last-child { border-bottom: 0 }
.ss-mem-tag { flex: 0 0 auto; font-size: 12px; padding: 1px var(--s-8); border-radius: 8px; background: var(--brand-soft, #FFF5F6); color: var(--brand-3)}
.ss-mem-txt { flex: 1 1 auto; color: var(--text-2); line-height: 1.5 }
.ss-mem-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-4); cursor: pointer; font-size: 14px; padding: 0 2px }
.ss-mem-del:hover { color: var(--danger)}

/* 关系进度 */
.ss-rel { display: flex; align-items: center; gap: var(--s-10); padding: var(--s-10) var(--s-12); border-radius: 14px;
  background: linear-gradient(135deg, #FFF5F6, #FFF9FA); margin-bottom: var(--s-12) }
.ss-rel-lv { font-size: 14px; font-weight: 650; color: var(--brand-3)}
.ss-rel-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255,36,66,.14); overflow: hidden }
.ss-rel-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-2);
  transform-origin: 0 50%; transition: transform .6s var(--ss-ease) }

/* ======================= 移动端 ======================= */
@media (max-width: 768px) {
  :root { --ss-avatar: 68px; --ss-panel-w: calc(100vw - 24px); }
  .ss-stage { right: 14px; bottom: 14px }
  .ss-panel { right: 12px; bottom: 12px; left: 12px; width: auto; height: min(72vh, 560px) }
  .ss-proactive { right: 12px; left: 12px; max-width: none; bottom: calc(var(--ss-avatar) + 22px) }
  .ss-bubble { max-width: 96%; font-size: 14px }
}
@media (max-width: 380px) { :root { --ss-avatar: 60px } }

/* ======================= 无障碍：减少动效 ======================= */
/* 视口不够宽时，面板几乎是全屏，角色直接让开（不硬挤） */
@media (max-width: 900px) {
  .ss-stage[data-shift="1"] { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-avatar, .ss-avatar[data-motion], .ss-avatar[data-state="thinking"]::after,
  .ss-speaking i, .ss-thinking, .ss-caret, .ss-row, .ss-tool, .ss-op[data-on="1"] {
    animation: none !important;
  }
  .ss-panel, .ss-proactive, .ss-settings, .ss-avatar, .ss-dot {
    transition-duration: 1ms !important;
  }
  .ss-c-pupil, .ss-c-head { transition: none !important }
}

/* ======================= Hero 入口按钮 ======================= */
.ss-hero-cta {
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: var(--s-10) var(--s-20); border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 650; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, #FF5470, #E01230);
  box-shadow: var(--shadow-red);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s;
}
.ss-hero-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-red-lg)}
.ss-hero-cta:active { transform: scale(.96) }
.ss-hero-cta svg { width: 16px; height: 16px }
@media (prefers-reduced-motion: reduce) {
  .ss-hero-cta { transition-duration: 1ms !important }
  .ss-hero-cta:hover { transform: none }
}

/* ============================================================
 * 形象管理面板（任务二 / 任务十一）
 * ------------------------------------------------------------
 * 角色与换装。沿用小红书主色，动效只用 transform / opacity。
 * ============================================================ */
.ss-ava-mask {
  position: fixed; inset: 0; z-index: calc(var(--z-panel, 9500) + 100);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-24); background: rgba(24, 20, 22, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ss-ease), visibility .24s;
}
.ss-ava-mask[data-open="1"] { opacity: 1; visibility: visible; }

.ss-ava-card {
  width: min(460px, 100%); max-height: min(680px, 92vh);
  display: flex; flex-direction: column;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--bd-1, rgba(31,27,29,.08));
  border-radius: 22px; box-shadow: var(--ss-shadow-3);
  overflow: hidden;
  transform: translateY(14px) scale(.98); opacity: .6;
  transition: transform .3s var(--ss-pop), opacity .24s var(--ss-ease);
}
.ss-ava-mask[data-open="1"] .ss-ava-card { transform: none; opacity: 1; }

.ss-ava-top {
  display: flex; align-items: center; gap: var(--s-10);
  padding: var(--s-14) var(--s-16) var(--s-10);
  border-bottom: 1px solid var(--bd-1, rgba(31,27,29,.06));
}
.ss-ava-top h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-1, #1F1B1D); }

.ss-ava-stage {
  display: flex; align-items: center; gap: var(--s-14);
  padding: var(--s-16); background: linear-gradient(180deg, #FFF6F7, transparent);
}
/* 预览区做成竖版：动漫形象是竖构图，用方框装必然要裁掉大半，
   显示出来就显得"小且看不清"。这里直接给到和立绘一致的竖比例。 */
.ss-ava-preview {
  width: 110px; height: 138px; flex: 0 0 110px;
  border-radius: 24px; background: #FFF5F6;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 36, 66, .1);
}
.ss-ava-preview svg { width: 70%; height: 70%; overflow: visible; }
.ss-ava-meta { min-width: 0; }
.ss-ava-name { font-size: 17px; font-weight: 700; color: var(--text-1, #1F1B1D); }
.ss-ava-sub {
  margin-top: var(--s-4); font-size: 12px; line-height: 1.5;
  color: var(--text-3, #6E6869);
}

.ss-ava-tabs { display: flex; gap: var(--s-6); padding: 0 var(--s-16) var(--s-10); }
.ss-ava-tabs button {
  flex: 1; padding: var(--s-8) 0; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-3, #6E6869); background: rgba(31,27,29,.05);
  transition: background .2s var(--ss-ease), color .2s var(--ss-ease), transform .2s var(--ss-ease);
}
.ss-ava-tabs button.on { background: var(--xhs-red-solid, #E01230); color: #fff; }
.ss-ava-tabs button:active { transform: scale(.96); }

.ss-ava-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4) var(--s-16) var(--s-16);
  display: flex; flex-direction: column; gap: var(--s-8);
}
.ss-ava-empty { padding: var(--s-28) 0; text-align: center; font-size: 13px; color: var(--text-3, #6E6869); }

.ss-ava-item {
  display: flex; align-items: center; gap: var(--s-12); width: 100%;
  padding: var(--s-10) var(--s-12); border: 1px solid var(--bd-1, rgba(31,27,29,.08));
  border-radius: 14px; background: var(--bg-surface, #fff); cursor: pointer;
  text-align: left; font: inherit;
  transition: transform .18s var(--ss-ease), border-color .18s, box-shadow .18s;
}
.ss-ava-item:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-1); }
.ss-ava-item:active { transform: scale(.985); }
.ss-ava-item.on { border-color: var(--brand-1, #FF2442); box-shadow: 0 0 0 3px var(--brand-ring, rgba(255,36,66,.12)); }
.ss-ava-thumb {
  width: 58px; height: 72px; flex: 0 0 58px; border-radius: 14px;
  background: #FFF5F6; display: flex; align-items: center; justify-content: center;
}
.ss-ava-thumb svg { width: 70%; height: 70%; overflow: visible; }
.ss-ava-txt { flex: 1; min-width: 0; }
.ss-ava-txt b { display: block; font-size: 14px; font-weight: 650; color: var(--text-1, #1F1B1D); }
.ss-ava-txt small {
  display: block; margin-top: 2px; font-size: 12px; color: var(--text-3, #6E6869);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-ava-tick {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #fff;
  padding: 3px var(--s-8); border-radius: 999px; background: var(--xhs-red-solid, #E01230);
}

.ss-ava-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.ss-ava-chip {
  padding: var(--s-8) var(--s-14); border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--bd-1, rgba(31,27,29,.1)); background: var(--bg-surface, #fff);
  color: var(--text-1, #1F1B1D);
  transition: transform .18s var(--ss-ease), background .18s, color .18s, border-color .18s;
}
.ss-ava-chip:hover { transform: translateY(-1px); }
.ss-ava-chip:active { transform: scale(.95); }
.ss-ava-chip.on { background: var(--xhs-red-solid, #E01230); border-color: var(--brand-1, #FF2442); color: #fff; }

.ss-ava-slider { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-4) 0 var(--s-10); }
.ss-ava-slider label { font-size: 13px; color: var(--text-3, #6E6869); }
.ss-ava-slider label b { color: var(--text-1, #1F1B1D); font-weight: 650; }
.ss-ava-slider input[type="range"] { width: 100%; accent-color: var(--brand-1, #FF2442); }

.ss-ava-foot { padding: var(--s-12) var(--s-16) var(--s-16); border-top: 1px solid var(--bd-1, rgba(31,27,29,.06)); }
.ss-ava-row { display: flex; align-items: center; gap: var(--s-12); }
.ss-ava-row > div { flex: 1; min-width: 0; font-size: 13px; color: var(--text-1, #1F1B1D); }
.ss-ava-row small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-3, #6E6869); }
.ss-ava-warn {
  margin: var(--s-10) 0 0; padding: var(--s-8) var(--s-10); border-radius: 10px; font-size: 12px; line-height: 1.5;
  color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA;
}
.ss-tool-note { font-size: 12px; color: var(--text-3, #6E6869); }

@media (max-width: 640px) {
  .ss-ava-mask { padding: var(--s-12); align-items: flex-end; }
  .ss-ava-card { width: 100%; max-height: 86vh; border-radius: 24px; }
  .ss-ava-preview { width: 88px; height: 110px; flex-basis: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-ava-mask, .ss-ava-card, .ss-ava-item, .ss-ava-chip, .ss-ava-tabs button {
    transition-duration: 1ms !important;
  }
  .ss-ava-mask[data-open="1"] .ss-ava-card { transform: none; }
  .ss-ava-item:hover, .ss-ava-chip:hover { transform: none; }
}

/* ======================= 设置 · 模型池 ======================= */
.ss-model-list { display: flex; flex-direction: column; gap: var(--s-8); }
.ss-model {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: var(--s-10) var(--s-12); text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--bd-1, rgba(31,27,29,.08)); border-radius: 12px;
  background: var(--bg-surface, #fff); color: var(--text-1, #1F1B1D);
  transition: transform .18s var(--ss-ease), border-color .18s, box-shadow .18s, background .18s;
}
.ss-model:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-1); }
.ss-model:active { transform: scale(.985); }
.ss-model.on {
  border-color: var(--brand-1, #FF2442);
  background: var(--brand-soft, #FFF5F6);
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(255,36,66,.12));
}
.ss-model b { font-size: 14px; font-weight: 650; }
.ss-model small { font-size: 12px; line-height: 1.45; color: var(--text-3, #6E6869); }
@media (prefers-reduced-motion: reduce) {
  .ss-model { transition-duration: 1ms !important }
  .ss-model:hover { transform: none }
}

/* ======================= 设置 · 模型池 ======================= */
.ss-model-list { display: flex; flex-direction: column; gap: var(--s-8); }
.ss-model {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: var(--s-10) var(--s-12); text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--bd-1, rgba(31,27,29,.08)); border-radius: 12px;
  background: var(--bg-surface, #fff); color: var(--text-1, #1F1B1D);
  transition: transform .18s var(--ss-ease), border-color .18s, box-shadow .18s, background .18s;
}
.ss-model:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-1); }
.ss-model:active { transform: scale(.985); }
.ss-model.on {
  border-color: var(--brand-1, #FF2442);
  background: var(--brand-soft, #FFF5F6);
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(255,36,66,.12));
}
.ss-model b { font-size: 14px; font-weight: 650; }
.ss-model small { font-size: 12px; line-height: 1.45; color: var(--text-3, #6E6869); }
@media (prefers-reduced-motion: reduce) {
  .ss-model { transition-duration: 1ms !important }
  .ss-model:hover { transform: none }
}

/* ============================================================
 * Live2D 动漫形象（任务二 扩展 / 用户诉求：要真动漫人物）
 * ------------------------------------------------------------
 * 资源全部自托管在 live2d/ 下，SDK 与模型都是切到动漫形象后才加载。
 * ============================================================ */
/* 动漫形象：竖长条挂件。同样用 width/height 承载用户缩放，避免位图被拉伸糊掉。 */
.ss-stage[data-look="live2d"] {
  width: calc(168px * var(--ss-scale, 1));
  height: calc(240px * var(--ss-scale, 1));
}
.ss-stage[data-look="live2d"] .ss-avatar { transition: none; }
.ss-stage[data-look="live2d"] .ss-avatar:active { transform: none; }
.ss-stage[data-look="live2d"] .ss-speaking { top: 10px; left: 10px; }
.ss-l2d-canvas { width: 100%; height: 100%; display: block; pointer-events: none; }

/* 外观档的分区标题与小徽标 */
.ss-ava-sec {
  margin: var(--s-14) 0 var(--s-6); font-size: 12px; font-weight: 650;
  color: var(--text-3, #6E6869); letter-spacing: .02em;
}
.ss-ava-sec:first-child { margin-top: 2px; }
.ss-ava-thumb--l2d {
  font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #FF8FA3, #E02039);
}
.ss-ava-item[disabled] { opacity: .45; cursor: not-allowed; }
.ss-ava-item[disabled]:hover { transform: none; box-shadow: none; }

/* 动漫立绘缩略图：面板里所有"人物"图都用真模型渲染出来的一帧，
   不再用自绘 SVG（用户明确反馈过"怎么还是自己绘画的"）。 */
.ss-ava-thumb { overflow: hidden; }
.ss-ava-preview { overflow: hidden; }
.ss-ava-shot {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 3%;
  opacity: 0; transition: opacity .32s var(--ss-ease, cubic-bezier(.2,.8,.2,1));
}
.ss-ava-shot[data-in="1"] { opacity: 1; }
/* 角色名后面的"动漫"小角标 */
.ss-ava-anime {
  display: inline-block; margin-left: var(--s-6); padding: 1px var(--s-6); vertical-align: 1px;
  font-size: 12px; font-weight: 600; font-style: normal; line-height: 1.5;
  color: #fff; border-radius: 999px;
  background: linear-gradient(135deg, #FF7A8E, #E02039);
}
/* 立绘离屏渲染容器（不参与布局，也不可交互） */
.ss-l2d-offscreen { position: fixed; left: -9999px; top: 0; pointer-events: none; opacity: 0; }

/* 「摆放」档底部按钮组 */
.ss-ava-actions { display: flex; gap: var(--s-8); flex-wrap: wrap; margin-top: var(--s-12); }

@media (max-width: 767px) {
  /* 移动端不加载 Live2D，强制保持方形挂件（用户缩放照样生效） */
  .ss-stage[data-look="live2d"] {
    width: calc(var(--ss-avatar) * var(--ss-scale, 1));
    height: calc(var(--ss-avatar) * var(--ss-scale, 1));
  }
  .ss-ava-anime { display: none; }
}

/* 2026-09-30 mxapi 绘图：对话/工具卡片里的 AI 出图 */
.ss-md-img{max-width:100%;border-radius:12px;display:block;margin:var(--s-6) 0}

/* 2026-09-30 换装配饰层：叠加在挂件/立绘上，切服装立刻可见 */
#ss-avatar, #ss-ava-preview { position: relative; }
.ss-cos-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.ss-cos-layer svg { width: 100%; height: 100%; display: block; }

/* 2026-09-30 模型面板：mxapi 绘图已集成的说明卡 */
.ss-modelinfo {
  text-align: left; border: 1.5px dashed var(--bd-1, rgba(31,27,29,.12));
  border-radius: 14px; padding: 12px 14px; margin-top: 8px; color: var(--text-2);
}
.ss-modelinfo b { display: block; font-size: 14px; }
.ss-modelinfo small { color: var(--text-4); font-size: 12px; }

/* 2026-09-30 说人话改造：回复反馈条（好 / 不太好 / 太 AI 了）
   只在助手消息 hover / 聚焦时出现，平时不打扰；动效只用 transform + opacity */
.ss-fb{display:flex;gap:var(--s-6);margin:var(--s-6) 0 0 2px;opacity:0;transform:translateY(2px);
  transition:opacity .18s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ss-row:hover .ss-fb,.ss-fb:focus-within,.ss-fb[data-voted]{opacity:1;transform:translateY(0);pointer-events:auto}
.ss-fb-btn{font-size:12px;line-height:1;padding:var(--s-4) var(--s-8);border-radius:999px;cursor:pointer;
  color: #6E6869;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background .16s ease,color .16s ease}
.ss-fb-btn:hover{background:rgba(255,36,66,.08);color: #D81B37}
.ss-fb-btn:active{transform:scale(.94)}
.ss-fb-btn.is-on{background: linear-gradient(135deg,#FF7A8E,#E02039);color: #fff;border-color:transparent}
.ss-fb[data-voted] .ss-fb-btn:not(.is-on){opacity:.45}
@media (prefers-reduced-motion:reduce){
  .ss-fb,.ss-fb-btn{transition:none!important}
  .ss-fb{opacity:1;transform:none;pointer-events:auto}
}

/* ===================== 回答内容排版（2026-09-30） =====================
 * 配套 ai-assistant.js 重写后的 md()：旧版只输出 <b>/<code>/<br>，
 * 标题、列表、表格、代码块全糊成一坨；这里补齐阅读样式。
 * 要点：行高 1.75、段间距 10px、代码块可横向滚动、表格不撑破气泡、
 *       宽屏限制单行长度、移动端降一档字号。
 */
.ss-bubble { max-width: min(92%, 760px); }
.ss-md-p { margin: 0 0 10px; line-height: 1.75; word-break: break-word; }
.ss-md-p:last-child { margin-bottom: 0; }
.ss-md-h1, .ss-md-h2, .ss-md-h3, .ss-md-h4 {
  margin: 14px 0 8px; line-height: 1.4; font-weight: 700; color: var(--text-1);
}
.ss-md-h1:first-child, .ss-md-h2:first-child, .ss-md-h3:first-child { margin-top: 0; }
.ss-md-h1 { font-size: 17px; }
.ss-md-h2 { font-size: 16px; }
.ss-md-h3 { font-size: 15px; }
.ss-md-h4 { font-size: 14px; color: var(--text-2, #6b6b6b); }
.ss-md-list { margin: 0 0 10px; padding-left: 20px; line-height: 1.75; }
.ss-md-list li { margin: 3px 0; }
ul.ss-md-list { list-style: disc; }
ol.ss-md-list { list-style: decimal; }
.ss-md-quote {
  margin: 0 0 10px; padding: 7px 12px; border-left: 3px solid var(--brand-2, #FF2442);
  background: rgba(255, 36, 66, .05); border-radius: 0 8px 8px 0;
  color: var(--text-2, #6b6b6b); line-height: 1.7;
}
.ss-md-pre {
  margin: 0 0 10px; padding: 10px 12px; background: #241f21; color: #f2edef;
  border-radius: 10px; overflow-x: auto; font-size: 12.5px; line-height: 1.6;
}
.ss-md-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
}
.ss-md-code {
  padding: 1px 5px; background: rgba(31, 27, 29, .07); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
.ss-md-table-wrap { margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ss-md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ss-md-table th, .ss-md-table td {
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .12)); padding: 6px 10px;
  text-align: left; line-height: 1.6; vertical-align: top;
}
.ss-md-table th { background: rgba(31, 27, 29, .04); font-weight: 600; }
.ss-md-hr { margin: 12px 0; border: 0; border-top: 1px solid var(--bd-1, rgba(31,27,29,.12)); }
.ss-md-img { max-width: 100%; border-radius: 10px; margin: 4px 0; }
.ss-md-p a, .ss-md-list a { color: var(--xhs-red-text, #D81B37); text-decoration: underline; }

/* 焦点态：只在真正聚焦时才亮（配合 JS 的 data-focus，避免失焦后残留） */
.ss-field[data-focus="0"] { box-shadow: none; }

@media (max-width: 480px) {
  .ss-md-p, .ss-md-list { line-height: 1.7; }
  .ss-md-h1 { font-size: 16px; }
  .ss-md-h2 { font-size: 15px; }
  .ss-md-h3 { font-size: 14.5px; }
  .ss-md-table { font-size: 12px; }
  .ss-md-table th, .ss-md-table td { padding: 5px 8px; }
  .ss-md-pre, .ss-md-code { font-size: 12px; }
}

/* ============================================================
 * 历史对话侧边栏（2026-10-01）
 * 参照豆包 / DeepSeek：左固定宽 + 右对话区，浅灰底、留白足、选中项实底高亮。
 * 只加样式不改结构：面板改成左右两栏，原有 head/body/foot 整体包进 .ss-main。
 * ============================================================ */
.ss-panel { display: flex; flex-direction: row; }
.ss-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* 侧边栏占 236px，展开时面板要跟着加宽，否则对话区只剩 160 多像素。
 * 必须圈在 min-width 里：窄屏面板是 left/right 撑满（width:auto），
 * 属性选择器权重更高，不圈住会把移动端宽度也锁成 680px。 */
@media (min-width: 861px) {
  .ss-panel[data-side="1"] { width: 680px; }
  .ss-panel[data-side="0"] { width: 420px; }
}

.ss-side {
  flex: 0 0 236px; width: 236px;
  display: flex; flex-direction: column;
  background: #FAF9FA;
  border-right: 1px solid var(--bd-1, rgba(31, 27, 29, .08));
  overflow: hidden;
}

/* ---- 顶部：新建对话 ---- */
.ss-side-top { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-12) var(--s-12) var(--s-8); }
.ss-new-chat {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 var(--s-12); border: 0; border-radius: 10px;
  background: var(--xhs-red-solid, #E01230); color: #fff; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: transform .18s var(--ss-ease), box-shadow .2s var(--ss-ease), background .2s;
}
.ss-new-chat svg { width: 16px; height: 16px; flex: 0 0 16px; }
.ss-new-chat span { overflow: hidden; text-overflow: ellipsis; }
.ss-new-chat:hover { background: var(--brand-2, #E01F3A); box-shadow: var(--ss-shadow-1); }
.ss-new-chat:active { transform: scale(.97); }
.ss-side-fold { flex: 0 0 28px; width: 28px; height: 28px; }
.ss-side-close { display: none; flex: 0 0 28px; width: 28px; height: 28px; }
.ss-menu-btn { display: none; }

/* ---- 搜索 ---- */
.ss-side-search { flex: 0 0 auto; position: relative; margin: 0 var(--s-12) var(--s-8); }
.ss-side-search > svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-4, #6E6869); pointer-events: none;
}
.ss-search-input {
  width: 100%; height: 32px; padding: 0 28px 0 29px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 9px; font-size: 13px;
  background: rgba(31, 27, 29, .05); color: var(--text-1, #1F1B1D);
  outline: none; transition: border-color .18s, background .18s;
}
.ss-search-input::placeholder { color: var(--text-4, #6E6869); }
.ss-search-input:focus { background: #fff; border-color: var(--brand-ring, rgba(255, 36, 66, .35)); }
.ss-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(31,27,29,.08);
  color: var(--text-3); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.ss-search-clear svg { width: 11px; height: 11px; }

/* ---- 会话列表 ---- */
.ss-conv-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--s-8) var(--s-12);
}
.ss-conv {
  position: relative; display: flex; align-items: center; gap: var(--s-6);
  border-radius: 10px; padding: 0 var(--s-8) 0 var(--s-10);
  min-height: 40px; margin-bottom: 2px; cursor: pointer;
  transition: background .16s var(--ss-ease);
}
.ss-conv:hover { background: rgba(31, 27, 29, .05); }
.ss-conv[data-cur="1"] { background: #fff; box-shadow: var(--ss-shadow-1); }
.ss-conv[data-cur="1"]::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand-1, #FF2442);
}
.ss-conv-main {
  flex: 1 1 auto; min-width: 0; display: block; text-align: left;
  border: 0; background: transparent; padding: 7px 0; cursor: pointer;
}
.ss-conv-t { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text-1, #1F1B1D);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-conv-m { display: block; font-size: 12px; color: var(--text-4, #6E6869); margin-top: 2px; }
.ss-conv[data-cur="1"] .ss-conv-t { font-weight: 600; }

/* hover 才出现的重命名 / 删除 */
.ss-conv-ops { flex: 0 0 auto; display: flex; gap: 2px; opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ss-ease); }
.ss-conv:hover .ss-conv-ops, .ss-conv:focus-within .ss-conv-ops { opacity: 1; pointer-events: auto; }
.ss-conv-op {
  width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-3, #6E6869); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .16s, color .16s, transform .16s var(--ss-ease);
}
.ss-conv-op svg { width: 13px; height: 13px; }
.ss-conv-op:hover { background: rgba(31, 27, 29, .07); color: var(--text-1); }
.ss-conv-op[data-act="del"]:hover { color: #D81B37; background: rgba(229, 72, 77, .1); }
.ss-conv-op:active { transform: scale(.9); }

/* 二次确认：就地变成「删掉？删除 / 取消」，不弹原生弹窗 */
.ss-conv-confirm { display: none; flex: 1 1 auto; align-items: center; gap: 6px; padding: 6px 0; }
.ss-conv-confirm i { flex: 1 1 auto; font-style: normal; font-size: 12.5px; color: var(--text-2); }
.ss-conv-confirm button {
  border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 9px; background: rgba(31, 27, 29, .06); color: var(--text-2);
}
.ss-conv-confirm button[data-act="yes"] { background: #E5484D; color: #fff; }
.ss-conv[data-confirm="1"] .ss-conv-main,
.ss-conv[data-confirm="1"] .ss-conv-ops { display: none; }
.ss-conv[data-confirm="1"] .ss-conv-confirm { display: flex; }

/* 重命名：就地输入 */
.ss-conv-edit { display: none; flex: 1 1 auto; min-width: 0; height: 28px; box-sizing: border-box;
  border: 1px solid var(--brand-ring, rgba(255, 36, 66, .4)); border-radius: 7px;
  padding: 0 8px; font-size: 13px; color: var(--text-1); background: #fff; outline: none; }
.ss-conv[data-editing="1"] .ss-conv-main,
.ss-conv[data-editing="1"] .ss-conv-ops { display: none; }
.ss-conv[data-editing="1"] .ss-conv-edit { display: block; }

/* 空状态 */
.ss-conv-empty { padding: var(--s-28) var(--s-12); text-align: center; }
.ss-conv-empty b { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ss-conv-empty span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.7; color: var(--text-muted, #5E575A); }

/* 折叠后的图标栏 */
.ss-side-rail { display: none; flex: 1 1 auto; flex-direction: column; align-items: center;
  gap: var(--s-6); padding: var(--s-8) 0; }
.ss-rail-btn {
  width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text-3); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .18s, color .18s, transform .18s var(--ss-ease);
}
.ss-rail-btn svg { width: 17px; height: 17px; }
.ss-rail-btn:hover { background: rgba(31, 27, 29, .06); color: var(--xhs-red-text, #D81B37); }
.ss-rail-btn:active { transform: scale(.92); }

.ss-panel[data-side="0"] .ss-side { flex-basis: 52px; width: 52px; }
.ss-panel[data-side="0"] .ss-side-top { padding: var(--s-12) var(--s-8) var(--s-8); }
.ss-panel[data-side="0"] .ss-new-chat span,
.ss-panel[data-side="0"] .ss-side-search,
.ss-panel[data-side="0"] .ss-conv-list,
.ss-panel[data-side="0"] .ss-side-fold { display: none; }
.ss-panel[data-side="0"] .ss-side-rail { display: flex; }

/* 窄屏：侧边栏变抽屉，默认收起（JS 也会强制收），只留图标入口 */
@media (max-width: 860px) {
  .ss-menu-btn { display: grid; }
  /* 窄屏面板由 left/right 撑满，别让上面的固定宽度规则生效 */
  .ss-panel[data-side="1"], .ss-panel[data-side="0"] { width: auto; }
  .ss-side {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 30;
    width: min(272px, 76vw); flex-basis: auto;
    background: #FAF9FA;
    box-shadow: var(--ss-shadow-2);
    transform: translateX(-100%);
    transition: transform .28s var(--ss-ease);
  }
  .ss-side[data-drawer="1"] { transform: none; }
  .ss-side-close { display: grid; }
  .ss-side-fold { display: none; }
  /* 窄屏下「折叠」没有意义，抽屉全靠菜单按钮，宽度固定 */
  .ss-panel[data-side="0"] .ss-side { flex-basis: auto; width: min(272px, 76vw); }
  .ss-panel[data-side="0"] .ss-new-chat span,
  .ss-panel[data-side="0"] .ss-side-search,
  .ss-panel[data-side="0"] .ss-conv-list { display: block; }
  .ss-panel[data-side="0"] .ss-side-rail { display: none; }
  .ss-side-search .ss-search-input { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-side, .ss-conv, .ss-new-chat, .ss-rail-btn { transition: none !important; }
}

/* ---- 停止键：说话期间发送键变成停止键 ---- */
.ss-send[data-stop="1"] { color: #D81B37; background:rgba(255,36,66,.14) }
.ss-send[data-stop="1"] svg { width:14px; height:14px; animation:ss-stop-pulse 1.4s ease-in-out infinite }
@keyframes ss-stop-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion: reduce) { .ss-send[data-stop="1"] svg { animation:none } }

/* ---- 记忆面板：搜索 + 一键忘掉 ---- */
.ss-mem-bar { display: flex; align-items: center; gap: var(--s-8, 8px); margin-bottom: var(--s-8, 8px) }
.ss-mem-q {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 var(--s-10, 10px);
  border: 1px solid var(--bd-1, rgba(31,27,29,.12)); border-radius: 999px;
  background: var(--bg-2, #fff); color: var(--text-1, #1F1B1D); font-size: 12px;
  font-family: inherit;
}
.ss-mem-q::placeholder { color: var(--text-3, #6E6869)}
.ss-mem-q:focus { outline: none; border-color: var(--brand-1, #FF2442) }
.ss-mem-foot { margin-top: 6px; font-size: 12px; color: var(--text-3, #6E6869);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ss-mem-foot .ss-tool-btn { font-size: 12px; padding: 3px 10px; }
.ss-mem-count { flex: 1 1 auto; }
.ss-tool-btn[data-confirm="1"] { background: var(--brand-1, #FF2442); box-shadow: 0 0 0 3px var(--brand-soft, #FFF5F6) }


/* ============================================================
 * 深度思考 / 智能搜索 —— 过程折叠区 + 模式按钮
 * 动效只用 opacity / transform，reduced-motion 下全部关掉
 * ============================================================ */

/* ---- 输入框左侧的两个模式按钮 ---- */
.ss-op.ss-mode { color: var(--text-3, #6E6869)}
.ss-op.ss-mode[data-on="1"] {
  color: var(--xhs-red-text, #D81B37);
  background: var(--brand-soft, #FFF5F6);
  box-shadow: 0 0 0 2px rgba(255, 36, 66, .12) inset;
}
.ss-op.ss-mode svg { width: 15px; height: 15px }

/* ---- 折叠区通用 ---- */
.ss-think, .ss-search {
  /* .ss-body 是 flex 纵向布局：overflow:hidden 会让 min-height:auto 失效，
     内容一多就被压成 2px。必须钉死「不伸缩、不被压缩」。 */
  flex: 0 0 auto;
  min-height: 30px;
  margin: 0 0 var(--s-8, 8px) 0;
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .08));
  border-radius: 10px;
  background: var(--bg-2, #FAFAFA);
  overflow: hidden;
  font-size: 12px;
}
.ss-think-hd, .ss-search-hd {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 10px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--text-2, #5B5557);
  text-align: left; font-family: inherit;
}
.ss-think-hd:hover, .ss-search-hd:hover { background: rgba(31, 27, 29, .03) }
.ss-think-txt, .ss-search-txt { flex: 0 0 auto; font-weight: 600 }
.ss-think-meta, .ss-search-meta {
  flex: 1 1 auto; font-size: 12px; color: var(--text-3, #6E6869); font-weight: 400;
}
.ss-think-arrow, .ss-search-arrow {
  flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-3, #767076);
  border-bottom: 1.5px solid var(--text-3, #767076);
  transform: rotate(45deg); transition: transform .18s var(--ss-ease, ease);
}
.ss-think[data-open="1"] .ss-think-arrow,
.ss-search[data-open="1"] .ss-search-arrow { transform: rotate(-135deg) }

/* 思考中的小圆点 */
.ss-think-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-1, #FF2442);
  animation: ss-think-pulse 1.2s ease-in-out infinite;
}
@keyframes ss-think-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.ss-think[data-done="1"] .ss-think-dot { animation: none; opacity: .45 }

/* 搜索图标：一个小圈（纯 CSS，不再多引一个 svg） */
.ss-search-ic {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--brand-1, #FF2442);
}

/* ---- 折叠内容 ---- */
.ss-think-bd, .ss-search-bd {
  display: none;
  padding: 2px 10px 10px;
  border-top: 1px solid var(--bd-1, rgba(31, 27, 29, .06));
}
.ss-think[data-open="1"] .ss-think-bd,
.ss-search[data-open="1"] .ss-search-bd { display: block }

.ss-think-step {
  padding: 6px 0;
  border-bottom: 1px dashed var(--bd-1, rgba(31, 27, 29, .06));
  line-height: 1.6;
}
.ss-think-step:last-child { border-bottom: 0 }
.ss-think-step b {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--brand-3, #D81B37); margin-bottom: 2px;
}
.ss-think-step span { color: var(--text-2, #5B5557); white-space: pre-wrap }

.ss-search-step {
  padding: 4px 0; color: var(--text-2, #5B5557);
  border-bottom: 1px dashed var(--bd-1, rgba(31, 27, 29, .06));
}
.ss-search-q { padding: 6px 0 4px; color: var(--text-3, #6E6869)}
.ss-search-srcs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }
.ss-search-src {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft, #FFF5F6); color: var(--brand-3, #D81B37);
}
.ss-search-src.warn { background: #FFF4E5; color: #8A5A00}

@media (prefers-reduced-motion: reduce) {
  .ss-think-dot { animation: none }
  .ss-think-arrow, .ss-search-arrow { transition: none }
  .ss-think-step, .ss-search-step { transition: none !important }
}

/* ============================================================
 * 外观快速切换条（2026-10-02）
 * 只动 transform / opacity，不触发重排；reduced-motion 下直接关掉过渡
 * ========================================================== */
.ss-skinbar {
  flex: 0 0 auto;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .28s var(--ss-ease, cubic-bezier(.22, 1, .36, 1)),
              opacity .2s linear,
              transform .28s var(--ss-ease, cubic-bezier(.22, 1, .36, 1));
  border-bottom: 1px solid var(--bd-1, rgba(31, 27, 29, .07));
  background: var(--bg-surface, #fff);
}
.ss-skinbar[data-open="1"] {
  max-height: 96px;
  opacity: 1;
  transform: translateY(0);
}
.ss-skinbar-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ss-skinbar-in::-webkit-scrollbar { display: none }
.ss-skinbar-tip { font-size: 12px; color: var(--text-3, #6E6869); padding: 4px 2px }
.ss-skinbar-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .1));
  border-radius: 999px;
  background: var(--bg-surface, #fff);
  font-size: 12px;
  color: var(--text-2, #5B5557);
  cursor: pointer;
  transform: scale(1);
  transition: transform .16s var(--ss-ease, cubic-bezier(.22, 1, .36, 1)),
              border-color .16s linear, color .16s linear;
}
.ss-skinbar-chip:active { transform: scale(.94) }
.ss-skinbar-chip.on {
  border-color: var(--brand-1, #FF2442);
  color: var(--brand-3, #D81B37);
  background: var(--brand-soft, #FFF5F6);
  font-weight: 600;
}
.ss-skinbar-img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex: 0 0 26px;
  background: var(--bg-2, #F6F4F5);
}
.ss-skinbar-fb {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #E02039, #FF7A8A);
}
.ss-skinbar-more {
  flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--brand-3, #D81B37);
  padding: 4px 6px;
}
/* 移动端：条更矮、只留图标+短名，避免挤掉输入区 */
.ss-mobile .ss-skinbar[data-open="1"] { max-height: 84px }
.ss-mobile .ss-skinbar-chip span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

@media (prefers-reduced-motion: reduce) {
  .ss-skinbar { transition: none }
  .ss-skinbar-chip { transition: none }
  .ss-skinbar-chip:active { transform: none }
}

/* ============================================================
 * 个人中心 · 薯薯外观（2026-10-02）
 * ========================================================== */
.skin-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.skin-now b { font-size: 17px; color: var(--brand-3, #D81B37)}
.skin-now span { font-size: 12px; color: var(--text-3, #6E6869)}
.skin-set-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }

/* 摆放微调的两个操作按钮（2026-10-02：从主页面 AI 助手面板收归到个人中心，仅 Pro 可见） */
.skin-set-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px }
/* 免费版看到的升级引导卡 */
.skin-pro-lock {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px dashed var(--line2, rgba(31, 27, 29, .16));
  background: var(--bg-2, #FAF9FA);
}
.skin-pro-lock b { font-size: 14px; color: var(--text-1, #1F1B1D)}
.skin-pro-lock span { font-size: 12.5px; color: var(--text-3, #6E6869); line-height: 1.6 }
.skin-pro-lock .btn { margin-top: 2px }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-top: 10px }
.skin-pick {
  text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--bd-1, rgba(31, 27, 29, .1));
  background: var(--bg-surface, #fff);
  transform: scale(1);
  transition: transform .18s var(--ss-ease, cubic-bezier(.22, 1, .36, 1)),
              border-color .18s linear, opacity .18s linear;
}
.skin-pick:active { transform: scale(.97) }
.skin-pick.on { border-color: var(--brand-1, #FF2442); background: var(--brand-soft, #FFF5F6) }
.skin-pick.lock { opacity: .62; cursor: not-allowed }
.skin-pick.lock:active { transform: none }
.sp-name { font-size: 13px; font-weight: 650; color: var(--text-1, #1F1B1D)}
.sp-fav { color: #8A5A00}
.sp-desc { font-size: 12px; color: var(--text-3, #6E6869); margin: 4px 0 6px; line-height: 1.45; min-height: 30px }
.sp-bar { height: 4px; border-radius: 999px; background: var(--bg-2, #F0EEEF); overflow: hidden; margin-bottom: 4px }
.sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF2442, #FF7A8A) }
.sp-cond { font-size: 12px; color: var(--text-3, #6E6869)}
.sp-cond.sp-ok { color: var(--brand-3, #D81B37); font-weight: 600 }
.sp-count { float: right; font-size: 12px; font-weight: 500; color: var(--text-3, #6E6869)}
.ss-mobile .skin-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }

@media (prefers-reduced-motion: reduce) {
  .skin-pick { transition: none }
  .skin-pick:active { transform: none }
}


/* ============================================================
 * 2026-10-03：会话批量管理（多选删除）
 * ============================================================ */
.ss-bulk-entry { display: flex; justify-content: flex-end; padding: 0 var(--s-12) var(--s-6); }
.ss-bulk-btn {
  border: none; background: transparent; font-family: inherit;
  color: var(--text-3, #6E6869); font-size: 12px; cursor: pointer;
  padding: 4px 10px; border-radius: 8px;
  /* 2026-10-05：侧栏 236px 放不下「全选/归档所选/删除所选/退出」四个按钮（总宽约 230px），
   * flex 收缩把按钮压到一字一行竖排。不许按钮内换行 + 允许整排放不下时换行。 */
  white-space: nowrap;
  transition: background .16s var(--ss-ease), color .16s;
}
.ss-bulk-btn:hover { background: rgba(255, 36, 66, .08); color: var(--ss-red, #D81B37); }
.ss-bulk-btn.danger { color: #D81B37; font-weight: 600; }
.ss-bulk-btn.danger:disabled { opacity: .4; cursor: not-allowed; }
.ss-bulk-bar { display: flex; align-items: center; gap: 2px; padding: 0 var(--s-10) var(--s-6); flex-wrap: wrap; }
/* 列表加载失败的重试按钮（2026-10-05） */
.ss-conv-retry {
  margin-top: 10px; border: 1px solid rgba(255, 36, 66, .35); background: #fff;
  color: #D81B37; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 18px; border-radius: 999px; cursor: pointer;
  transition: background .16s var(--ss-ease), color .16s;
}
.ss-conv-retry:hover { background: #E02039; color: #fff; }
.ss-bulk-n { margin-left: auto; font-size: 12px; color: var(--text-4, #6E6869); }
/* 2026-10-05 修复：hidden 属性被 display:flex 覆盖 → 批量栏常显叠在搜索框上 */
.ss-bulk-entry[hidden], .ss-bulk-bar[hidden] { display: none !important; }
/* 删除二次确认态 */
.ss-bulk-btn[data-armed] { background: #E02039; color: #fff; font-weight: 600; }
/* 归档视图标题条 */
.ss-arch-title { font-size: 12px; font-weight: 600; color: var(--text-2, #6b6b6b); }
.ss-conv.bulk .ss-conv-ops { display: none; }
.ss-conv.bulk::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-left: 4px;
  /* 2026-10-11 修遮挡：当前会话的 [data-cur="1"]::before（左侧红条）是 position:absolute，
     与这里的勾选圈抢同一个伪元素 —— 批量模式下当前行的圆圈被 absolute 到 left:0，
     正好压在标题文字上（实测该行 mainLeft 与文字左缘重合，普通行则会正常让位）。
     bulk 模式统一按 flex 子项排，红条让位给勾选圈。 */
  position: static; left: auto; top: auto; bottom: auto;
  border-radius: 50%; border: 1.5px solid #d9cfd2; background: #fff;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ss-conv.bulk[data-sel="1"]::before {
  background: #FF2442; border-color: #FF2442;
  box-shadow: inset 0 0 0 3px #fff;
}
.ss-conv.bulk[data-sel="1"] { background: rgba(255, 36, 66, .06); }

/* =====================================================================
 * 2026-10-17 P0-3 · AIGC 生成声明（单一真源）
 * ---------------------------------------------------------------------
 * 文案全站统一为「以上内容由 AI 生成，仅供参考」，与 brief 转笔记的 .bf-aigc 同源。
 * 色值说明：brief 用 #6B7280 压白底实测 4.83:1；薯薯气泡底色是 #FFF5F6（比白深一档），
 * 同色只到 4.52:1，余量太薄 —— 这里取同灰阶家族的 --text-2 #6B6467，
 * 压 #FFF5F6 为 5.39:1、压 #FFF0F2 为 5.21:1，两种气泡底色都稳过 WCAG AA。
 * ===================================================================== */
.ss-aigc {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed rgba(31, 27, 29, .14);
  font-size: 12px; line-height: 1.5; font-weight: 400;
  color: #6B6467;                 /* = var(--text-2)；气泡内不引变量，避免被宿主主题带偏 */
  white-space: normal;
}
.ss-row[data-view="doc"] .ss-aigc { margin-top: 6px; }
/* 用户气泡是红底白字，那条声明不该跟着变白 —— 只给助手气泡着色 */
.ss-row[data-me="1"] .ss-aigc { display: none; }

/* =====================================================================
 * 2026-10-17 P0-1 / P1-7 · 触屏兜底
 * 基线 §3.6「禁止仅 mouseover 可见的交互」+ §3.4「触摸目标 ≥44px」。
 * 用 (hover:none) / (pointer:coarse) 判定而非屏宽，平板同样覆盖。
 * ===================================================================== */
@media (hover: none), (pointer: coarse) {
  /* 反馈条（好 / 不太好 / 太 AI 了）原来也是 hover-only */
  .ss-fb { opacity: 1; transform: none; pointer-events: auto; flex-wrap: wrap; }
  .ss-fb-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  /* 对话列表的重命名 / 删除原来同为 hover-only */
  .ss-conv-ops { opacity: 1; pointer-events: auto; gap: 2px; }
  .ss-conv-op { min-width: 44px; min-height: 44px; }
  /* 输入框一排的快速操作 + 发送键，原来 30 / 32px */
  .ss-op { min-width: 44px; min-height: 44px; }
  .ss-send { min-width: 44px; min-height: 44px; }
  .ss-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
}