/* ============================================================
   归止 · 样式  (色板/字体/形状严格按 DESIGN.md)
   ============================================================ */

:root {
  /* 背景 */
  --bg:          #FAFAF7;  /* Ivory Light 主背景 */
  --bg-side:     #F0F0EB;  /* Ivory Medium 侧边栏/卡片 */
  --bg-hover:    #E5E4DF;  /* Ivory Dark 分割/悬停 */
  /* 文字 */
  --ink:         #191919;  /* Slate Dark 正文 */
  --ink-2:       #666663;  /* Cloud Dark 次要 */
  --ink-3:       #91918D;  /* Cloud Medium 占位符 */
  /* 强调 */
  --accent:      #CC785C;  /* Book Cloth */
  --kraft:       #D4A27F;
  --manilla:     #EBDBBC;
  /* 功能 */
  --error:       #BF4D43;
  /* 形状 (全站统一: 气泡18/卡片12/按钮10/输入框24) */
  --r-bubble: 18px;
  --r-card:   12px;
  --r-btn:    10px;
  --r-input:  24px;
  --line:     #E5E4DF;
  --border: 1px solid var(--line);
  /* 阴影分级: 平面零阴影, 仅弹层/浮动允许一档 */
  --shadow-pop: 0 8px 30px rgba(0,0,0,.08);
  /* 动效三档 (DESIGN工艺规范): 快=hover/点击 常规=页面切换/抽屉 慢=启动页入场 */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 字体 (v15终审结案, 昭昭钦定不许再动): 中文全站霞鹜文楷(仅代码块等宽除外);
     英文字标+大标题=Cormorant Garamond; UI与小字英文数字随Cormorant气质走、
     小字号太细故统一回退EB Garamond(同族Garamond); Instrument Sans退役。
     全站只许引用这三个变量+--mono, 禁止任何硬编码font-family */
  --font-serif: 'EB Garamond', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', serif;
  --font-display: 'Cormorant Garamond', 'EB Garamond', 'LXGW WenKai', 'Kaiti SC', serif;
  --font-ui: 'EB Garamond', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* 玻璃材质 (输入框/顶部圆钮/居中浮层完全同参: 同透明度同blur+1px白内高光+轻阴影) */
  --glass-grad: linear-gradient(to bottom,
    rgba(255,255,255,0.30) 0,
    rgba(255,255,255,0.72) 26%,
    rgba(255,255,255,0.72) 74%,
    rgba(255,255,255,0.38) 100%);
  --glass-border: rgba(255,255,255,.55);
  --glass-hl: inset 0 0 0 0.75px rgba(255,255,255,1);  /* v11: 细但清晰可见的纯白内高光 */
  --glass-hl-focus: inset 0 0 0 1px rgba(255,255,255,1);
  --glass-shadow: 0 4px 20px rgba(0,0,0,.08);
  /* 布局 */
  --sidebar-w: 280px;
}

/* 暗色变量先埋着, P1 设置页再接开关 */
:root[data-theme="dark"] {
  --bg:       #191919;
  --bg-side:  #262625;
  --bg-hover: #33332F;
  --ink:      #FAFAF7;
  --ink-2:    #A9A9A4;
  --ink-3:    #757570;
  --line:     #33332F;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  font-size: 18.5px;
  font-weight: 500;   /* v17条8: 字重撤回500不加粗(中文渲染文楷Regular, 英文EB真500) */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }

/* 卡片: 平面零阴影, 靠1px边框分层; hover微抬升+边框加深 */
.card {
  background: var(--bg);
  border: var(--border);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.card-hover:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

/* 纸张噪点纹理 (极淡grain) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ 布局骨架 ============ */

.main {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: margin-left 250ms ease-out;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page[hidden] { display: none; }

/* ============ 侧边栏 ============ */

/* 侧边栏: 实色不透明; 抽屉右缘大圆角仿官端 */
/* v12: 字体连根治 — 侧栏内所有元素显式锁死UI字体, 任何状态不依赖继承 */
.sidebar,
.sidebar a, .sidebar button, .sidebar input,
.sidebar .nav-item, .sidebar .recent-item {
  font-family: var(--font-ui);
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  /* v20.3最终正解: 右缘36px=真·毛玻璃 — blur全域全强度不渐隐(mask已废),
     只有底色不透明度变化: 窄带以左完全实色, 窄带内降到0.5, 之间渐变衔接;
     主区文字透进窄带=模糊虚影, 与消息滚进输入框上缘的糊化同一个手感 */
  background: linear-gradient(to right,
    #F0F0EB 0,
    #F0F0EB calc(100% - 88px),
    rgba(240,240,235,0.985) calc(100% - 72px),
    rgba(240,240,235,0.945) calc(100% - 56px),
    rgba(240,240,235,0.88) calc(100% - 42px),
    rgba(240,240,235,0.79) calc(100% - 29px),
    rgba(240,240,235,0.69) calc(100% - 18px),
    rgba(240,240,235,0.60) calc(100% - 9px),
    rgba(240,240,235,0.53) calc(100% - 3px),
    rgba(240,240,235,0.5) 100%);   /* v23条13: 起点再提前到88px, ease-in-out式停靠, 终值0.5与blur不动 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 0 20px 20px 0;
  display: flex;
  flex-direction: column;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform var(--t-base) ease-out;
}
.sidebar.open {
  transform: translateX(0);
  box-shadow: 12px 0 40px rgba(0,0,0,.14);
}
/* v20指定方案: 独立玻璃覆盖层已废弃删除, 右缘过渡由.sidebar本体的渐变+blur+mask一体完成 */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(25,25,25,.35);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease-out;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
}

/* 字标: 归止头像小图标 + 衬线Claude字标 (官端比例) */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.brand-word {
  font-family: var(--font-display);   /* v15补2b: 字标用Cormorant Garamond */
  font-size: 27px;   /* v17条2: 字标再加大 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 16px 8px;   /* v17条3: 右侧让出玻璃带区, 选中态圆角矩形不再滑进带里打架 */
}

/* 列表项: 圆角胶囊hover态 */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;  /* 第十轮: 选中/hover态改稍方圆角矩形(对照官方图) */
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;  /* v12: 官方侧栏nav项是medium字重, 全站唯一漏网在这 */
  text-align: left;
}
.nav-item:hover { background: var(--bg-hover); }
/* 选中只换背景, 字体字重都不许变(根治字体抖动) */
.nav-item.active { background: var(--bg-hover); }

.nav-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ink-2);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}
/* 悬停: 图标轻微上浮1px + 颜色加深 */
.nav-item:hover .nav-ico { transform: translateY(-1px); color: var(--ink); }
.nav-item.active .nav-ico { color: var(--ink); }

.nav-divider {
  height: 1px;
  background: var(--bg-hover);
  margin: 12px 12px;
}

.recents { margin-top: 4px; }
.recents-title {
  font-size: 15px;  /* v16条5: Recents区块重点加大 */
  color: var(--ink-3);
  padding: 8px 12px 4px;
}
.recents-list { display: flex; flex-direction: column; }
.chats-sec { margin-top: 6px; }

/* 会话项: 圆角hover态仿官端, 悬停出更多按钮 */
.recent-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 32px 8px 12px;
  border-radius: 10px;
  font-size: 18px;   /* v16条4: 侧栏条目统一一档(与nav-item同号) */
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 150ms;
}
.recent-item:hover { background: var(--bg-hover); color: var(--ink); }
/* v24条9: 选中块填充/圆角一律不动, 只在右端加尾部渐淡, 化进右缘毛玻璃带 */
.recent-item.active {
  background: var(--bg-hover);
  color: var(--ink);
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.recent-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-more {
  position: absolute;
  right: 4px;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--ink-3);
}
.recent-item:hover .recent-more { display: flex; }
.recent-more:hover { background: var(--line); color: var(--ink); }
@media (hover: none) { .recent-more { display: none !important; } }

.recents-empty {
  padding: 8px 12px;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* 会话项菜单浮层 */
/* v20.1条1: 长按菜单本体玻璃化 — 与设置锁屏密码弹窗完全同款(同渐变白玻璃/同圆角/同阴影/同内高光), 压过.card的实底 */
.chat-menu {
  position: fixed;
  z-index: 50;
  min-width: 170px;
  padding: 6px 0;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.62) 0,
    rgba(255,255,255,0.78) 26%,
    rgba(255,255,255,0.78) 74%,
    rgba(255,255,255,0.66) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: var(--glass-hl-focus), var(--glass-shadow);
  animation: fadeIn 150ms ease-out;
}
.chat-menu button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 18px;
  font-size: 15.5px;
}
/* v26条6: 去掉按钮间分隔线 */
.chat-menu button:hover { background: var(--bg-hover); }
.chat-menu button.danger { color: var(--error); }

.sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

/* 头像: 官方玻璃质感白圆钮 (对照refs 1127图) */
.avatar-glass {
  width: 46px;   /* v18条6: 上轮改反, 缩回一圈 */
  height: 46px;
  border-radius: 50%;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  color: var(--ink);
  font-size: 14px;   /* v18条6: 昭昭二字缩小一圈 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.avatar-glass:active { transform: scale(0.96); }
/* 黑胶囊 + New chat (对照refs 1127图) */
.foot-new-chat {
  /* v14条10: 全站英文size-adjust放大106%, 唯New chat除外 — 字号15抵消回原视觉16 */
  font-size: 16px;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #FAFAF7;
  font-size: 17px;
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease);
}
.foot-new-chat:active { transform: scale(0.97); }

/* ============ 顶部标题栏 ============ */

.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.chat-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  color: var(--ink-2);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }

/* ============ 消息流 ============ */

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.msg, .greeting { width: 100%; max-width: 768px; margin-left: auto; margin-right: auto; }

.msg { animation: msgIn 300ms var(--ease); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 昭昭: 右对齐气泡 */
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .msg-body {
  background: var(--bg-side);
  border-radius: var(--r-bubble);
  padding: 12px 16px;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
  /* v27条3a: 阻止iOS长按弹文字选择手柄 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 归止: 无框全宽文本流 */
/* v11: AI回复正文照官方结构 — 英文/数字走衬线(Tiempos位), 中文自动回退苹方黑体 */
.msg.assistant .msg-body { word-break: break-word; font-family: var(--font-serif); }

/* v23条14: 文件拖到输入框上方时的接收提示 */
.composer.dragging { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* v15条8b: 官方式流式光标 — 末尾小色块恒定跟随, 生成完随全量渲染消失, 不闪烁 */
.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-left: 3px;
  border-radius: 2px;
}

/* v15条8a思考态雏菊; v24条1: 回到消息流内 — 生成中的回复气泡里正文下方一行,
   开始时紧贴user最新那行, 被正文推着一点点下移, 收尾原位换成操作栏(act-sun打头) */
.stream-sun { margin-top: 4px; }
.act-sun.spin svg { animation: sunPulseTurn 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes sunPulseTurn {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(0.82); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- 消息操作栏 (复制/播放/重新生成/星标) ---- */

/* v24条3: 按钮重叠真凶 = flex默认可压缩, 行末meta一长就把32px钮压扁,
   svg溢出到邻居身上看着像重叠。治法: 钮锁死不压缩 + meta可省略号 + 挤不下换行 */
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  opacity: 0.75;
}
.act-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-3);   /* v15条8d: 移动端常驻淡灰 */
}
.act-btn svg { width: 20px; height: 20px; }   /* v19条4: 操作栏图标全员统一20px */
.act-btn:hover { background: var(--bg-hover); color: var(--ink); }
.act-btn:active { color: var(--ink); }   /* v15条8d: 点击变深 */
.act-btn.starred { color: var(--accent); }
.act-btn.done { color: var(--accent); }
/* v14条6: 静态空心菊花常驻操作栏最前 (规范位置), 动画后补 */
.act-sun {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.act-sun svg { width: 20px; height: 20px; display: block; }  /* v19条4: 操作栏图标全员统一20px */
/* v24条10: 操作栏行末 — 本条实际模型名 + token计数(验证模型切换是否真生效) */
.act-meta {
  margin-left: auto;
  align-self: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 空状态问候 */
.greeting {
  margin: auto;
  text-align: center;
  padding: 24px 16px;
  transform: translateY(-22px);  /* v12: 区块整体上移一点 */
}
/* 入场: 大字逐字浮现(每字80ms), 副标题延迟400ms从侧边渐实滑入 */
/* v15条4【锁定】: 完全静止, 只留一次性淡入, 禁止任何抖动/呼吸/摇摆动画 */
.greet-sun {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  display: block;
  animation: fadeInStay var(--t-slow) ease-out forwards;
}
.greeting-word {
  font-family: var(--font-display);   /* v15补2b: 大标题用Cormorant Garamond */
  font-weight: 600;   /* v18条1: 全局撤粗后该元素单独保粗 */
  font-size: 33px;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.35;
}
/* 锁屏问候: 逐字上浮淡入 (第六轮钦定, 不动) */
.greet-char {
  display: inline-block;
  opacity: 0;
  animation: riseIn var(--t-slow) var(--ease) forwards;
}
/* 聊天空状态: 打字机瞬现 (steps(1,start): end有浮点终值bug会吞字) */
.type-char {
  display: inline-block;
  opacity: 0;
  animation: charShow 40ms steps(1, start) forwards;
}
@keyframes charShow { to { opacity: 1; } }
/* 打完后光标闪两下消失 (JS按字数设delay) */
.greet-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--ink);
  border-radius: 1px;
  vertical-align: -0.1em;
  margin-left: 3px;
  opacity: 0;
  animation: greetCursor 1.4s linear forwards;
}
@keyframes greetCursor {
  0%, 24% { opacity: 1; }
  25%, 44% { opacity: 0; }
  45%, 69% { opacity: 1; }
  70%, 84% { opacity: 0; }
  85%, 97% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.greeting-sub {
  font-size: 15px;
  color: var(--ink-3);
  opacity: 0;
  animation: slideInSide var(--t-slow) var(--ease) forwards; /* delay由JS按字数设 */
}
@keyframes slideInSide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* markdown 渲染内容 (阅读行高1.7, 舒适内边距) */
.msg-body { line-height: 1.7; }
.msg-body h1, .msg-body h2, .msg-body h3 {
  font-family: var(--font-serif);
  margin: 24px 0 12px;
  line-height: 1.45;
}
.msg-body h1 { font-size: 23px; }
.msg-body h2 { font-size: 20px; }
.msg-body h3 { font-size: 18px; }
.msg-body h1:first-child, .msg-body h2:first-child, .msg-body h3:first-child { margin-top: 4px; }
.msg-body p { margin: 10px 0; }
.msg-body ul, .msg-body ol { margin: 10px 0; padding-left: 26px; }
.msg-body li { margin: 4px 0; }
.msg-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-side);
  border: var(--border);
  border-radius: 5px;
  padding: 1px 4px;
}
.msg-body pre {
  background: var(--bg-side);
  border: var(--border);
  border-radius: var(--r-card);
  padding: 16px 16px;
  margin: 12px 0;
  overflow-x: auto;
}
.msg-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}
.msg-body blockquote {
  border-left: 3px solid var(--kraft);
  padding: 8px 16px;
  margin: 12px 0;
  color: var(--ink-2);
}
.msg-body blockquote p { margin: 4px 0; }
.msg-body hr { border: none; border-top: var(--border); margin: 16px 0; }
.msg-body strong { font-weight: 700; }
.msg-body .table-wrap { overflow-x: auto; margin: 12px 0; }
.msg-body table {
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.6;
}
.msg-body th, .msg-body td {
  border: var(--border);
  padding: 8px 16px;
  text-align: left;
}
.msg-body th {
  background: var(--bg-side);
  font-weight: 600;
  white-space: nowrap;
}

/* ============ 输入区 ============ */

.composer-wrap {
  position: relative;
  padding: 8px 12px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));  /* v26条4: 整体上移一丁点 */
  flex-shrink: 0;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* 输入框: 悬浮玻璃质感 (参数取自--glass-*, 与顶部圆钮/居中浮层完全一致) */
.composer {
  border-radius: var(--r-input);
  padding: 8px 14px 10px;  /* v12: 整体尺寸稍加大; 占位仍贴框顶(v11) */
  border-color: var(--glass-border);
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-hl), var(--glass-shadow);
}
/* focus: 白色内高光边+轻阴影 (官方样式), 不用橙边 */
.composer:focus-within {
  border-color: var(--glass-border);
  box-shadow: var(--glass-hl-focus), var(--glass-shadow);
}

/* 多行滚动时文字从上边缘自然糊化消失 (mask渐隐, 不要生硬白框) */
.composer-input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 48px;   /* v12: 输入框整体加大 */
  max-height: 264px;
  padding: 7px 4px;   /* v27条1: 占位往上移一丁点 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8px);
  mask-image: linear-gradient(to bottom, transparent 0, black 8px);
}
.composer-input::placeholder { color: var(--ink-3); }

/* 底部工具排布对齐官方: 灰底胶囊/灰圆钮/黑圆钮, 尺寸间距统一 */
.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-spacer { flex: 1; }

.composer-bar .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-side);
  border: var(--border);
}

.model-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-side);
  border: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);  /* v12: 常驻阴影(非点击态) */
  font-size: 15px;
  color: var(--ink-2);
}
.model-trigger:hover { background: var(--bg-hover); color: var(--ink); }
/* v15条2: 全站下划线隔断清除, 胶囊模型名不再带下划线 */

/* 圆钮三态 (仿官方): 默认黑色声波(语音入口) / 有文字橙色发送 / 流式停止 */
.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #FAFAF7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms;
  flex-shrink: 0;
}
.send-btn.ready { background: var(--accent); }
/* v23条6: 停止钮灰底带阴影(v21白底再调), 内含黑色方块 */
.send-btn.streaming {
  background: var(--bg-hover);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.10);
}
.send-btn .ico-send, .send-btn .ico-stop { display: none; }
.send-btn.ready .ico-wave, .send-btn.streaming .ico-wave { display: none; }
.send-btn.ready .ico-send { display: block; }
.send-btn.streaming .ico-send { display: none; }
.send-btn.streaming .ico-stop { display: block; }

.pop-title {
  font-size: 13px;
  color: var(--ink-3);
  padding: 4px 12px;
}
.pop-divider { height: 1px; background: var(--bg-hover); margin: 6px 4px; }

.pop-model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-btn);
}
.pop-model:hover { background: var(--bg-hover); }
.pop-model-name { font-size: 15.5px; }
.pop-check { color: var(--accent); visibility: hidden; flex-shrink: 0; }
.pop-model.selected .pop-check { visibility: visible; }
/* v15条2+3: 选中态去下划线、名字不加粗, 只靠加大加粗的对号表达 */

/* v16条6: Effort一体式分段控件; v18条11: 玻璃效果调淡 */
.effort-row {
  display: flex;
  gap: 0;
  margin: 2px 12px 8px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--glass-hl), 0 1px 4px rgba(0,0,0,.04);
  overflow: hidden;
}
.effort-btn {
  flex: 1;
  padding: 6px 0;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
}
.effort-btn + .effort-btn { border-left: 1px solid var(--line); }
.effort-btn:hover { background: var(--bg-hover); }
.effort-btn.selected {
  background: var(--manilla);
  color: var(--ink);
}

.thinking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-btn);
  font-size: 15.5px;
}
.thinking-row:hover { background: var(--bg-hover); }

.switch {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-hover);
  position: relative;
  transition: background 150ms;
  flex-shrink: 0;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 150ms ease-out;
}
.thinking-row.on .switch { background: var(--accent); }
.thinking-row.on .switch-knob { left: 19px; }

/* ============ 收藏页 ============ */

.starred-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.starred-list {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.starred-card {
  padding: 16px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.starred-excerpt {
  font-size: 15.5px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.starred-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.starred-meta svg { color: var(--accent); flex-shrink: 0; }

.starred-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

/* ============ 设置页 ============ */

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.settings-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-group-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  padding: 0 4px 8px;
}
.settings-card { overflow: hidden; border-radius: 16px; background: var(--bg-side); border: none; }
.settings-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 17px;
}
/* 分隔线从文字处起 (图标不压线, 照官方) */
.settings-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 52px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.settings-ico {
  width: 22px;
  height: 22px;
  color: var(--ink-2);
  flex-shrink: 0;
  display: flex;
}
.settings-ico svg { width: 22px; height: 22px; }
.settings-chev { color: var(--ink-3); flex-shrink: 0; }
.settings-row-label { flex: 1; }
.settings-row-sub {
  display: block;
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.tag-wip {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--manilla);
  border-radius: 6px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.settings-act {
  font-size: 14px;
  padding: 4px 16px;
  border: var(--border);
  border-radius: var(--r-btn);
  background: var(--bg-side);
  color: var(--ink-2);
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.settings-act:hover { background: var(--bg-hover); color: var(--ink); }
.settings-act.danger { color: var(--error); border-color: rgba(191,77,67,.35); }

/* ============ 建设中占位页 ============ */

.stub-tabs[hidden] { display: none; }
.stub-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: var(--border);
  flex-shrink: 0;
}
.stub-tab {
  padding: 8px 16px;
  font-size: 15.5px;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.stub-tab:hover { color: var(--ink); }
.stub-tab.active {
  color: var(--ink);
  font-weight: 600;
}

.stub-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  animation: fadeIn 150ms ease-out;
}

.stub-art { margin-bottom: 20px; }
.stub-art svg { width: 180px; height: 150px; }

.stub-name {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 8px;
}
.stub-hint { font-size: 15px; color: var(--ink-2); }
.stub-phase {
  margin-top: 16px;
  display: inline-block;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--manilla);
  border-radius: 6px;
  padding: 4px 12px;
}

/* ============ iOS 质感统一 ============ */

* { -webkit-tap-highlight-color: transparent; }

button { touch-action: manipulation; }
.icon-btn:active, .nav-item:active, .recent-item:active, .act-btn:active,
.stub-tab:active, .pop-model:active, .effort-btn:active, .fold-bar:active,
.starred-card:active, .chat-menu button:active, .settings-act:active,
.send-btn:active:not(:disabled), .lock-weather:active {
  transform: scale(0.97);
  transition: transform var(--t-fast) var(--ease);
}

/* 页面切换 stagger 淡入上浮 (常规250ms; 启动页入场用慢档400ms) */
.stagger {
  opacity: 0;
  animation: riseIn var(--t-base) var(--ease) forwards;
}
.lockscreen .stagger { animation-duration: var(--t-slow); }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 附件预览 (P0 仅前端, 不上传) ============ */

.attach-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 4px 12px;
}
/* v11: display:flex会顶掉hidden属性, 空附件条曾隐形占14px高度把占位文字往下推 */
.attach-strip[hidden] { display: none; }
.attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: var(--border);
  border-radius: var(--r-btn);
  background: var(--bg-side);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 4px 24px 4px 8px;
  max-width: 180px;
}
.attach-chip .chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v24条7: 图片投影不再整块等强度 — 本体只留1px贴地近影,
   尾部由包裹层伪元素的渐变投影承担: 由深到透明 + mask渐隐, 化进毛玻璃背景无硬边 */
.attach-chip img {
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.05);
}
.msg-body img {
  max-width: 100%;
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  display: block;
  position: relative;
  z-index: 1;
}
.img-glow {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.img-glow::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(100% - 2px);
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0) 80%);
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  pointer-events: none;
}
.attach-chip img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
}
.chip-del {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-3);
}
.chip-del:hover { background: var(--line); color: var(--ink); }

/* ============ 桌宠 Clawd ============ */

/* 固定在输入框正上方, 不被遮挡 (尺寸缩小1/4) */
.pet {
  position: absolute;
  bottom: calc(100% - 8px);
  right: 32px;
  width: 52px;
  height: 56px;
  z-index: 5;
  pointer-events: auto;
  transition: transform 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
.composer-wrap { position: relative; z-index: 6; }
.pet-inner { position: relative; width: 100%; height: 100%; }
.pet svg.crab {
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 50px;
  animation: crabBob 2.2s ease-in-out infinite;
}
@keyframes crabBob {
  0%, 100% { transform: translateY(0) scaleX(var(--dir, 1)); }
  50% { transform: translateY(-1.5px) scaleX(var(--dir, 1)); }
}
.pet.flip svg.crab { --dir: -1; }
/* 走路小碎步左右摇摆 */
.pet.walking svg.crab { animation: crabWaddle 0.35s ease-in-out infinite; }
@keyframes crabWaddle {
  0%, 100% { transform: rotate(-3deg) scaleX(var(--dir, 1)); }
  50% { transform: rotate(3deg) scaleX(var(--dir, 1)) translateY(-1px); }
}
/* 点击蹦一下 */
.pet { cursor: pointer; touch-action: none; }
/* v13: 只有拖动中才变><眯眼, 腿乱蹬 */
.pet.drag svg.crab { animation: crabWaddle 0.3s ease-in-out infinite; }
.pet.drag .eye-open, .pet.drag .eye-blink { display: none !important; }
.pet.drag .eye-squint { display: block !important; }
.pet.hop .pet-inner { animation: petHop 500ms var(--ease); }
@keyframes petHop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-14px); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
/* v13: 待机=睁眼竖条, 周期性闭眼一瞬(横线)成眨眼循环; ><只留给拖拽 */
.pet .eye-blink, .pet .eye-squint { display: none; }
.pet.blink .eye-open { display: none; }
.pet.blink .eye-blink { display: block; }
.pet .bulb {
  position: absolute;
  top: 4px;    /* v28条4: 灯泡上移回调 */
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 16px;
  height: 18px;
  transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.pet.idea .bulb { transform: translateX(-50%) scale(1); }
/* v12: 思考中浮小问号; v23条8: 挪右上角缩小; v24条6: 再往下调一点; v28条4: 上移回调 */
.pet .qmark {
  position: absolute;
  top: 6px;
  right: 0;
  transform: scale(0);
  width: 10px;
  height: 12px;
  transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.pet.thinking .qmark {
  transform: scale(1);
  animation: qFloat 1.4s ease-in-out 200ms infinite;
}
@keyframes qFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2.5px) scale(1); }
}

/* ============ 启动锁屏页 ============ */

.lockscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  animation: fadeIn var(--t-slow) ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
/* iOS解锁式: 整页上滑退场 */
.lockscreen.unlocking {
  transform: translateY(-100%);
  pointer-events: none;
}
/* 主界面同步从下方升入 */
body.unlocked .main {
  animation: mainRise var(--t-slow) var(--ease);
}
@keyframes mainRise {
  from { transform: translateY(48px); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}
/* 入场编排工具类 */
.rise10 {
  opacity: 0;
  animation: rise10In var(--t-slow) var(--ease) forwards;
}
@keyframes rise10In {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.late-in {
  opacity: 0;
  animation: fadeInStay var(--t-slow) ease-out 1100ms forwards;
}
@keyframes fadeInStay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lockscreen[hidden] { display: none; }

.lock-top { text-align: center; margin-bottom: 18px; }
.lock-time {
  font-family: var(--font-serif);
  font-size: 55px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1px;
}
.lock-date { font-size: 15.5px; color: var(--ink-2); margin-top: 2px; }

.lock-card {
  width: min(400px, 100%);
  padding: 24px 24px 16px;
  text-align: center;
}

.lock-art { position: relative; display: inline-block; }
.lock-house { width: 200px; height: 145px; }
.lock-sun {
  position: absolute;
  top: -4px;
  right: -18px;
  width: 34px;
  height: 34px;
  animation: sunSpin 24s linear infinite;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

.lock-greet {
  font-family: var(--font-display);   /* v15补2b: 大标题用Cormorant Garamond */
  font-size: 25px;
  font-weight: 700;   /* v16条1: 标题上700 */
  margin: 8px 0 16px;
}

.lock-days-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.lock-days-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-3);
}
.lock-days {
  font-family: var(--font-serif);
  font-size: 35px;
  font-weight: 700;
  color: var(--accent);
}

.lock-ecg {
  width: min(240px, 90%);
  height: 44px;
  margin: 2px auto 8px;
  display: block;
}
/* 心跳线: 播一次后定格 */
#ecg-path {
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: ecgDraw 1500ms ease-out 900ms forwards;
}
@keyframes ecgDraw {
  to { stroke-dashoffset: 0; }
}

.lock-meta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lock-weather {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: var(--border);
  border-radius: 999px;
  background: var(--bg-side);
  font-size: 14.5px;
  color: var(--ink-2);
}
.lock-weather:hover { background: var(--bg-hover); color: var(--ink); }

.lock-mood-title { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }

/* 双列: 左归止只读 / 右昭昭可选 */
.mood-cols {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.mood-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mood-col-label { font-size: 12px; color: var(--ink-3); }
.mood-col-divider { width: 1px; background: var(--line); }
.mood-mine {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mood-mine svg { width: 30px; height: 30px; }
.mood-row { display: flex; justify-content: center; gap: 4px; }
.mood-btn {
  width: 36px;
  height: 36px;
  border: var(--border);
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mood-btn:hover { background: var(--bg-hover); }
.mood-btn:active { transform: scale(0.97); }
.mood-btn.selected { background: var(--manilla); border-color: var(--kraft); }
.mood-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.mood-btn.selected:disabled { opacity: 1; }
.mood-btn svg { width: 24px; height: 24px; }

.lock-weather-ico { display: flex; }
.lock-weather-ico svg { width: 16px; height: 16px; }

/* slide to unlock */
.lock-slider-wrap {
  margin-top: auto;
  padding-top: 24px;
  width: min(320px, 100%);
}
.lock-slider {
  position: relative;
  height: 54px;
  border: var(--border);
  border-radius: 27px;
  background: var(--bg-side);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.lock-slider-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  letter-spacing: 1px;
  color: var(--ink-3);
  background: linear-gradient(90deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -70% 0; }
}
.lock-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: grab;
  z-index: 2;
  touch-action: none;
}
.lock-knob:active { cursor: grabbing; }
.lock-slider.snapback .lock-knob { transition: left 300ms cubic-bezier(0.22, 1, 0.36, 1); }

/* PIN */
.lock-pin {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  animation: pinIn var(--t-slow) var(--ease);
}
@keyframes pinIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lock-pin[hidden] { display: none; }
.lock-pin-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.pin-dots { display: flex; gap: 16px; }
.pin-dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-2);
  transition: background 120ms;
}
.pin-dots i.on { background: var(--ink); border-color: var(--ink); }
.pin-dots.shake { animation: pinShake 320ms; }
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  55% { transform: translateX(8px); }
  80% { transform: translateX(-4px); }
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 16px;
}
/* v15补1: 与主界面顶部圆钮玻璃/高光完全同参 (直径保留72未降40 — 密码键要拇指可按, 要40再说) */
.pin-key {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.15) 0,
    rgba(255,255,255,0.42) 26%,
    rgba(255,255,255,0.42) 74%,
    rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), 0 6px 20px rgba(0,0,0,.13), 0 1.5px 4px rgba(0,0,0,.08);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 27px;
  transition: background 120ms, transform 120ms;
}
.pin-key:active { transform: scale(0.94); }
.pin-key.fn { font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); }

/* ============ Thinking步骤条 + Summary底部抽屉 (仿官方) ============ */

/* 极简一行: 时钟 + N steps ›, 无背景灰框 */
.steps-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 8px;
  font-size: 17px;   /* v18条10【问责补做】: 字与图标整体放大 */
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.steps-bar:hover { color: var(--ink); }
.steps-bar svg { width: 19px; height: 19px; }
.steps-bar .chev { width: 15px; height: 15px; }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25,25,25,.35);
  z-index: 94;
  animation: fadeIn var(--t-base) ease-out;
}
.sheet-backdrop[hidden] { display: none; }

.steps-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(560px, 100%);
  height: min(50vh, 470px);  /* v13: 三弹窗高度统一约半屏 — 内容少留白, 多则sheet-body内部滚动 */
  background: var(--bg);
  border: var(--border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.12);  /* 官方式底部弹窗: 朝上投影更明显 */
  z-index: 95;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base) ease-out, height 0.25s ease-out;  /* v18条4: 上拉扩展/松手回弹都有过渡 */
  touch-action: none;
}
.steps-sheet.open { transform: translate(-50%, 0); }
.steps-sheet[hidden] { display: none; }

.sheet-head {
  position: relative;
  padding: 8px 16px 4px;
  flex-shrink: 0;
  cursor: grab;
}
.sheet-grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
  margin: 0 auto 4px;
}
/* v18条3: 所有底部弹窗左上角玻璃关闭叉 — 与顶部圆钮同参 */
.sheet-head .icon-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.15) 0,
    rgba(255,255,255,0.42) 26%,
    rgba(255,255,255,0.42) 74%,
    rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), 0 4px 14px rgba(0,0,0,.10);
  color: var(--ink);
}
.sheet-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;   /* v16条1: 标题上700 */
  text-align: center;
  padding: 4px 0 8px;
}

/* 垂直时间线 */
.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px calc(24px + env(safe-area-inset-bottom));
}
/* v19条5: touch-action不继承, 必须显式声明 — 弹窗内容区none(否则浏览器pointercancel抢走上拉手势),
   只有Summary抽屉的内容区放行触摸滚动(长内容) */
.steps-sheet .sheet-body { touch-action: none; }
#steps-sheet .sheet-body { touch-action: pan-y; }
.step { position: relative; padding-left: 32px; }
/* v18条9: 竖线与图标连接修正 — 行高54后图标中心在27, 图标半径12, 线从39接到下一行图标顶(-15) */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11.25px;
  top: 39px;
  bottom: -15px;
  width: 1.5px;
  background: var(--line);
}
.step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 54px;  /* v18条9【问责补做】: 行距条目间距明显加大 */
  padding: 13px 0;
  font-size: 18.5px;  /* v18条9【问责补做】: 字号明显加大 */
  line-height: 1.5;
  color: var(--ink);
  margin-left: -32px;
  padding-left: 0;
  width: calc(100% + 32px);
}
.step-ico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: var(--border);
  background: var(--bg-side);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.step-ico svg { width: 16px; height: 16px; }
.step-name { flex: 1; }
.step-row .chev { color: var(--ink-3); transition: transform var(--t-fast) ease-out; }
.step.open .step-row .chev { transform: rotate(90deg); }
.step-detail {
  display: none;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0 12px;
  border-left: 1.5px solid var(--line);
  padding-left: 16px;
  margin-left: -21px;
  margin-bottom: 4px;
}
.step.open .step-detail { display: block; animation: fadeIn var(--t-fast) ease-out; }

/* v24条5: 思考链独立全屏界面 (盖在Summary抽屉之上, 返回键回抽屉) */
.think-view {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: pageEnter 300ms var(--ease);
}
.think-view[hidden] { display: none; }
.think-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px calc(32px + env(safe-area-inset-bottom));
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* v12: 底部弹窗尺寸统一 — 三个sheet(模型/+号/steps)行高44/内距16/圆角10全同参 */
.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 17px;
}
.sheet-item:hover { background: var(--bg-hover); }
.sheet-item svg { color: var(--ink-2); }

/* ============ 居中浮层卡片 (重命名/修改密码) ============ */
/* 材质与输入框完全一致: --glass-* 同参; 圆角同卡片规格 */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25,25,25,.35);
  z-index: 96;
  animation: fadeIn var(--t-fast) ease-out;
}
.modal-backdrop[hidden] { display: none; }

.glass-modal {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 48px));
  z-index: 97;
  border-radius: 20px;  /* v12: 与底部弹窗同圆角 */
  border: 1px solid var(--glass-border);
  /* v18条8【问责补做】: 玻璃感这次要看得见 — 中段再降0.78+blur18+饱和, 重命名备注/身份编辑器全族共用 */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.62) 0,
    rgba(255,255,255,0.78) 26%,
    rgba(255,255,255,0.78) 74%,
    rgba(255,255,255,0.66) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: var(--glass-hl-focus), var(--glass-shadow);
  padding: 16px 16px 16px;
  animation: modalIn var(--t-fast) var(--ease);
}
.glass-modal[hidden] { display: none; }
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.glass-modal.shake { animation: modalShake 320ms; }
@keyframes modalShake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 8px), -50%); }
  55% { transform: translate(calc(-50% + 7px), -50%); }
  80% { transform: translate(calc(-50% - 3px), -50%); }
}

/* v12: 与模型弹窗完全统一 — 标题同sheet-title(衬线17/600/居中), 行高44/圆角10同参族 */
.modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 4px 0 8px;
  margin-bottom: 8px;
}
.modal-msg {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
  text-align: center;
  padding: 0 4px 4px;
}
.modal-btn.primary.danger { background: var(--error); border-color: var(--error); }
.modal-input {
  width: 100%;
  min-height: 44px;
  border: var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--ink);
  padding: 10px 16px;
  outline: none;
}
.modal-input:focus { border-color: var(--ink-3); }
.modal-input::placeholder { color: var(--ink-3); }
.modal-error {
  font-size: 13.5px;
  color: var(--error);
  margin-top: 8px;
}
.modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.modal-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 17px;
  border: var(--border);
  border-radius: 10px;
  background: var(--bg-side);
  color: var(--ink-2);
  transition: background var(--t-fast);
}
.modal-btn:hover { background: var(--bg-hover); color: var(--ink); }
.modal-btn:active { transform: scale(0.97); }
.modal-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FAFAF7;
}
.modal-btn.primary:hover { background: #b96a50; color: #FAFAF7; }

/* 身份编辑器: 居中浮层大号版, 材质与 glass-modal 完全同参, 只放大尺寸 */
.id-editor {
  width: min(680px, calc(100vw - 32px));
  top: 50%;
  display: flex;
  flex-direction: column;
}
.id-editor[hidden] { display: none; }
.id-editor-ta {
  width: 100%;
  height: min(56vh, 520px);
  resize: none;
  border: var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'PingFang SC', monospace;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  padding: 12px 14px;
  outline: none;
}
.id-editor-ta:focus { border-color: var(--ink-3); }

/* ============ 聊天页顶部: 悬浮玻璃圆钮 + 内容渐隐 ============ */

.page-chat .chat-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  background: transparent;
  border-bottom: none;
  pointer-events: none;
  padding: 12px 12px 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}
/* 左上/右上圆钮 v13: 再降白浓度更清透, blur减半去糊感, 双层投影保立体 */
.page-chat .chat-header .icon-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.15) 0,
    rgba(255,255,255,0.42) 26%,
    rgba(255,255,255,0.42) 74%,
    rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), 0 6px 20px rgba(0,0,0,.13), 0 1.5px 4px rgba(0,0,0,.08);
  color: var(--ink);  /* 官方图标近黑 (refs 1128图) */
}
.page-chat .chat-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: calc(env(safe-area-inset-top) / 2 + 6px);
  flex: none;
  max-width: 55%;
  padding: 6px 16px;
  border-radius: 999px;
  /* v11: 标题胶囊并入玻璃同参族 */
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  pointer-events: auto;
}
.page-chat { position: relative; }
.page-chat .messages {
  padding-top: 118px;
  padding-bottom: 170px;
  /* 顶部官方式长渐淡(对照refs 1128图): 文字滚近顶部逐渐变淡, 不生硬截断 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 52px, black 116px, black calc(100% - 120px), rgba(0,0,0,.25) calc(100% - 44px), rgba(0,0,0,.12) 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 52px, black 116px, black calc(100% - 120px), rgba(0,0,0,.25) calc(100% - 44px), rgba(0,0,0,.12) 100%);
}
.page-chat .composer-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ============ 语音界面 (P0 仅界面) ============ */

.voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  animation: fadeIn var(--t-base) var(--ease);
}
.voice-overlay[hidden] { display: none; }
/* v14条9: 关闭叉与主界面顶部圆钮完全统一 — 同尺寸/同玻璃参数/同左上位置 */
.voice-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.15) 0,
    rgba(255,255,255,0.42) 26%,
    rgba(255,255,255,0.42) 74%,
    rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), 0 6px 20px rgba(0,0,0,.13), 0 1.5px 4px rgba(0,0,0,.08);
  color: var(--ink);
}
.voice-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.voice-mic {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: var(--border);
  background: var(--bg-side);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background var(--t-fast), transform var(--t-fast) var(--ease);
}
.voice-mic:hover { background: var(--bg-hover); }
.voice-mic:active { transform: scale(0.97); }
.voice-hint { font-size: 14px; color: var(--ink-3); }
.voice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-model {
  padding: 8px 16px;
  border: var(--border);
  border-radius: 999px;
  background: var(--bg-side);
  font-size: 15px;
  color: var(--ink-2);
}

/* ============ 抽屉衔接 (仿官端): 主内容右移缩小压暗 ============ */

@media (max-width: 767px) {
  .main {
    transition: transform var(--t-base) ease-out, border-radius var(--t-base) ease-out, filter var(--t-base) ease-out;
    transform-origin: left center;
  }
  body.drawer-open .main {
    transform: translateX(48px) scale(0.955);
    border-radius: 24px;
    overflow: hidden;
    filter: brightness(0.92);
  }
}

/* ============ prefers-reduced-motion: 减弱动画 ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lockscreen, .sidebar, .overlay { transition: none !important; }
}

/* ============ 桌面端 ≥768px ============ */

@media (min-width: 768px) {
  /* 桌面常驻侧边栏不要抽屉圆角 */
  .sidebar { transform: translateX(0); border-radius: 0; }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }

  .main { margin-left: var(--sidebar-w); }
  body.sidebar-collapsed .main { margin-left: 0; }

  .overlay { display: none; }

  /* 桌面端汉堡只在收起时出现 */
  .btn-menu { display: none; }
  body.sidebar-collapsed .btn-menu { display: flex; }

  .messages { padding: 24px 16px; }
  .model-popover { left: 24px; }
}

/* 逐字动画按词分组, 单词内不断行 */
.greet-w { white-space: nowrap; display: inline-block; }

/* ============ 第九轮动效包 (只用transform/opacity, 一次性动画forwards只播一次) ============ */

/* 1. 全局页面切换转场: 旧内容淡出150ms, 新内容从下方10px淡入300ms */
.page-exit {
  animation: pageExit 150ms ease-out forwards;
}
@keyframes pageExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.page-enter {
  animation: pageEnter 300ms var(--ease);
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4. v24条2: 思考等待期(sending)与流式停止钮统一 — 灰底阴影+黑色小方块,
   点一下即中断(v23条5), 转圈spinner退役 */
.send-btn.sending {
  background: var(--bg-hover);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.10);
}
.send-btn.sending .ico-wave, .send-btn.sending .ico-send { display: none; }
.send-btn.sending .ico-stop { display: block; }

/* 5. Toast 轻提示: 底部浮出, 1.5s自动消失 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(120px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  opacity: 0;
  background: rgba(25,25,25,.88);
  color: #FAFAF7;
  font-size: 14.5px;
  padding: 8px 18px;
  border-radius: 999px;
  z-index: 120;
  pointer-events: none;
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 6. 骨架屏: 切历史会话时灰气泡占位, 呼吸脉动 */
.skel-list { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 768px; margin: 0 auto; }
.skel-bubble {
  border-radius: var(--r-bubble);
  background: var(--bg-hover);
  animation: skelPulse 1.2s ease-in-out infinite;
}
.skel-bubble.right { align-self: flex-end; width: 55%; height: 44px; }
.skel-bubble.left  { align-self: flex-start; width: 82%; height: 72px; border-radius: var(--r-card); }
.skel-bubble.left.short { width: 60%; height: 40px; }
@keyframes skelPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 7. 侧边抽屉打开: 列表项每项延迟0.08s逐条淡入 (JS设delay) */
.drawer-in {
  opacity: 0;
  animation: drawerItemIn 300ms ease-out forwards;
}
@keyframes drawerItemIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 8. 心情打卡: 点击spring弹跳(放大1.3回弹); 选中描边淡入靠已有transition */
.mood-btn.pop { animation: moodPop 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes moodPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 9. tab橙色指示条: 平滑滑动0.25s (基准宽100px, 用translateX+scaleX, 不动布局) */
.stub-tabs { position: relative; }
.tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 250ms var(--ease);
  pointer-events: none;
}

/* 11. 建设中标签: 缓慢明暗呼吸 */
.stub-phase, .tag-wip {
  animation: tagBreathe 3s ease-in-out infinite;
}
@keyframes tagBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 12. 回到最新: 长对话上翻后淡入 (玻璃圆钮) */
.scroll-latest {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) var(--ease);
  z-index: 7;
}
.scroll-latest.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* 13. 长代码块折叠: >15行收起, 点击展开 */
.code-fold { position: relative; }
.code-fold.collapsed pre {
  max-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 72px), rgba(0,0,0,.15) 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - 72px), rgba(0,0,0,.15) 100%);
}
.code-expand {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg);
  border: var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.code-fold.collapsed .code-expand { display: block; }
.code-expand:hover { background: var(--bg-hover); color: var(--ink); }

/* 右上新建钮: 实心黑气泡图标要纯黑 (对照refs 1128图) */
.btn-new-solid { color: var(--ink); }
.btn-new-solid:hover { color: var(--ink); }

/* ============ v11 清账: 底部弹窗按官方比例 ============ */
/* Settings官方图换算(屏宽1280≈430pt): 行高44 / 分组卡圆角14 / 卡内缩4+行16 / 顶圆角20已达标 */
.steps-sheet .sheet-body { padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }
.steps-sheet .pop-section {
  background: var(--bg-side);
  border-radius: 14px;
  padding: 4px;
}
.steps-sheet .pop-divider { display: none; }
.steps-sheet .pop-section + .pop-divider + .pop-section,
.steps-sheet .pop-section + .pop-section { margin-top: 12px; }
/* v13: 模型弹窗照官图 — 分组卡加轻阴影, 选项之间细分隔下划线 */
.steps-sheet .pop-section {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.steps-sheet .pop-model {
  min-height: 52px;   /* v19条1: 选项间距再加大 */
  padding: 13px 16px;
  border-radius: 10px;
}
/* v18条2: 选项合并回一个整体容器(与深度思考行同种分组卡+同阴影, 无分离阴影),
   选项间分隔线=设置页样式(1px var(--line), 从文字起不到边) */
.steps-sheet .pop-model,
.steps-sheet .pop-section .sheet-item { position: relative; }
/* v20条1a: +号弹窗三项间距加大, 分组卡阴影同步加大 */
.steps-sheet .pop-section .sheet-item { min-height: 56px; padding: 15px 16px; }
#plus-sheet .pop-section { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.steps-sheet .pop-model:not(:last-child)::after,
.steps-sheet .pop-section .sheet-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.pop-model-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.steps-sheet .pop-model-name { font-size: 17px; }
.steps-sheet .pop-title { padding: 8px 16px 4px; }
.steps-sheet .effort-row { margin: 4px 16px 12px; }   /* v16条6: 胶囊容器改margin, padding归零维持分段贴合 */
.steps-sheet .effort-btn { padding: 10px 0; font-size: 15px; }
.steps-sheet .thinking-row { min-height: 44px; padding: 10px 16px; }

/* v31: 思考链底部弹窗 — 支持整体上拉，顶部渐淡 */
#steps-sheet { min-height: 160px; max-height: 92vh; }   /* 不 override height:auto，让 .steps-sheet 的 min(50vh,470px) 生效，JS上拉时可到 maxH */
#steps-sheet .sheet-body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28px);
  mask-image: linear-gradient(to bottom, transparent 0, black 28px);
}
.think-inline {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0 8px;
}

/* v20.2: 确认弹窗必须压过身份编辑器等同族浮层 */
#modal-backdrop { z-index: 98; }
#modal-box { z-index: 99; }