/* ═══════════════════════════════════════════════════════════
   UI Redesign — Claude Design '托尔斯泰 2' handoff
   ─────────────────────────────────────────────────────────
   适用于 *所有* 主题（颜色按 var(--token) 跟随主题切换）。
   结构/排版/动画/字体形态来自 Claude Design 输出：
   - 暖纸色调（literary 主题最贴合）
   - Noto Serif SC 叙事字体（fontNarrative token 在 metro.shared）
   - 选项类型 5 色 tag（option-* tokens 在 metro.shared）
   - 透明 AI 旁白、单行折叠选项卡、底部 tab flex 动画、"沙"字 logo
   注：文件名沿用 literary.css 历史；规则已脱掉主题 scope。
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 全局基底 ─── */
/* 用户决定：AI 叙事不用 serif，回到项目原 PingFang 无衬线（var(--font-ui)）。
   Noto Serif SC 未自托管，macOS fallback Songti 笔画太细 —— 故撤回此规则。 */

body {
  font-family: var(--font-ui);
}

/* ─── 2. 顶部 mode toggle (沙盒/世界卡) — segmented ink-on-cream pill ─── */

#mode-toggle {
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px;
  box-shadow: var(--shadow-inset);
}

#mode-toggle .tab {
  background: transparent;
  color: var(--text-soft);
  border-radius: 7px;
  letter-spacing: 1px;
  font-weight: var(--weight-medium);
  font-family: var(--font-ui);
  box-shadow: none;
}

#mode-toggle .tab.is-active {
  background: var(--text-main);
  color: var(--text-invert);
  box-shadow: none;
  font-weight: var(--weight-semibold);
}

/* ─── 3. Substage tabs (当前对话/章节总结) — 下划线 active ─── */

.stage-substage-nav {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 0 4px;
  gap: 0;
  align-self: stretch;
  justify-content: flex-start;
}

.stage-substage-nav .tab {
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 0;
  padding: 6px 14px 8px;
  position: relative;
  font-weight: var(--weight-medium);
  font-family: var(--font-ui);
  box-shadow: none;
}

.stage-substage-nav .tab.is-active {
  background: transparent;
  color: var(--text-main);
  box-shadow: none;
  font-weight: var(--weight-semibold);
}

.stage-substage-nav .tab.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}

/* ─── 4. Sticky 回合状态栏 — 暖纸色 pill + 赭石 T chip ─── */

.sticky-status-bar {
  background: var(--surface-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.sticky-turn-badge {
  background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  color: var(--brand-accent);
  font-weight: var(--weight-bold);
  letter-spacing: 1.5px;
  border-radius: 5px;
  font-family: var(--font-ui);
}

.sticky-status-bar .status-value,
.sticky-status-bar .sticky-status-popover {
  font-family: var(--font-narrative);
}

/* ─── 5. 聊天气泡 — 暖纸色 + 墨绿 U 头像 ─── */

.chat-message-content {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.chat-message.user-message .chat-message-content {
  background: var(--chat-bubble-user-bg);
  border: 1px solid var(--chat-bubble-border-user);
  /* 设计稿用户气泡带 12px 12px 12px 3px 的尾巴形态，但为兼容现有 hover 阴影逻辑保持 12px 对称 */
}

/* AI 旁白：纯文字直接在暖纸色页面上，无气泡 */
.chat-message.ai-message .chat-message-content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
}

.chat-message.ai-message .chat-message-content:hover {
  background: transparent;
  box-shadow: none;
}

/* metro-watermark icon（AI 消息开头的小书图标）—— 透明气泡下显得多余，仅隐它 */
.chat-message.ai-message .chat-message-content .metro-watermark {
  display: none;
}

.chat-user-label {
  font-family: var(--font-ui);
  color: var(--chat-bubble-label);
}

/* 用户头像圆圈：墨绿→赭石渐变（覆盖 metro 蓝绿渐变） */
.chat-message.user-message .chat-user-label::before {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  color: var(--text-invert);
  font-family: var(--font-narrative);
  font-weight: var(--weight-bold);
}

/* AI 默认头像（无 provider 标识时）：暖色渐变 */
.chat-message.ai-message:not([data-ai-provider]) .chat-user-label::before {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);
  color: var(--text-invert);
}

/* ─── 6. 选项卡片 — 类型 tag 五色编码 ─── */

.choice-item {
  background: var(--choice-item-bg);
  border: 1px solid var(--choice-item-border);
  border-radius: 11px;
  padding: 9px 12px;
  transition: border-color var(--transition-base) ease, background var(--transition-base) ease;
  box-shadow: none;
}

.choice-item:hover {
  border-color: var(--brand-primary);
  background: var(--choice-item-hover-bg);
}

.choice-item:active {
  background: var(--choice-item-active-bg);
}

.choice-row-1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.choice-id {
  font-family: var(--font-narrative);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  font-size: var(--text-body-lg);
}

.choice-type {
  padding: 2px 7px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: 4px;
  letter-spacing: 1px;
  line-height: 1.4;
}

/* 类型 tag 配色映射 — 6 个项目类型 → 5 个设计 token + 1 复用 */
.choice-action .choice-type {
  color: var(--option-action-fg);
  background: var(--option-action-bg);
}

.choice-explore .choice-type {
  color: var(--option-explore-fg);
  background: var(--option-explore-bg);
}

.choice-talk .choice-type {
  color: var(--option-dialog-fg);
  background: var(--option-dialog-bg);
}

.choice-trade .choice-type {
  color: var(--option-custom-fg);
  background: var(--option-custom-bg);
}

.choice-travel .choice-type,
.choice-work .choice-type,
.choice-default .choice-type {
  color: var(--option-rest-fg);
  background: var(--option-rest-bg);
}

.choice-short {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
}

.choice-detail {
  font-family: var(--font-ui);
  color: var(--text-soft);
  line-height: 1.6;
}

.choice-cost {
  font-family: var(--font-ui);
  color: var(--brand-secondary);
  font-weight: var(--weight-medium);
}

/* ─── 7. 底部 stage-nav (5-tab mobile bar) — 每个 tab 一种语义色（设计稿） ─── */

.stage-mobile-bar {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-medium);
  box-shadow: 0 -2px 8px color-mix(in srgb, var(--text-main) 4%, transparent);
}

/* 每个 tab 通过 data-stage-target 注入自己的 --tab-color */
.stage-nav-btn[data-stage-target="sms"]       { --tab-color: var(--option-dialog-fg); }
.stage-nav-btn[data-stage-target="cast"]      { --tab-color: var(--option-explore-fg); }
.stage-nav-btn[data-stage-target="story"]     { --tab-color: var(--brand-accent); }
.stage-nav-btn[data-stage-target="inventory"] { --tab-color: var(--brand-secondary); }
.stage-nav-btn[data-stage-target="map"]       { --tab-color: var(--brand-primary); }
.stage-nav-btn[data-stage-target="preview"]   { --tab-color: var(--brand-primary); }
.stage-nav-btn[data-stage-target="design"]    { --tab-color: var(--brand-accent); }
.stage-nav-btn[data-stage-target="saves"]     { --tab-color: var(--brand-secondary); }
.stage-nav-btn[data-stage-target="square"]    { --tab-color: var(--option-dialog-fg); }

.stage-nav-btn {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  transition: background var(--transition-base), color var(--transition-fast);
}

.stage-nav-btn.is-active {
  color: var(--tab-color, var(--brand-accent));
  background: color-mix(in srgb, var(--tab-color, var(--brand-accent)) 16%, transparent);
  font-weight: var(--weight-semibold);
}

.stage-nav-btn:hover:not(.is-active) {
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-main) 4%, transparent);
}

/* ─── 8. 顶部 header tile (桌面 5+1 tab) — 同色规范 ─── */

.header-tile {
  color: var(--text-tertiary);
}

.header-tile.is-active {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

/* §9 Title account button —— 撤回我加的 surface-elevated bg + border-soft 1px 边
   用户决定：保持项目原"纯图标无背景无边框"形态（app.css:4184 已是 transparent + border:none） */

/* ─── 10. Message actions toolbar — 26px 边框图标按钮 ─── */

/* §10 .message-actions 工具栏 —— 撤回我之前的覆盖（border + transparent bg + text-soft 色） */

/* file:// 协议下 Safari 不让 CSS mask 加载外部 SVG 文件（与 icon-copy 用 inline data URI
   能显形成对比，可以判定原因）。把 regenerate/delete/edit 三个图标改用 inline SVG
   data URI 当 background-image，跟 icon-copy 一个模式，绕开协议限制。
   颜色：SVG 内 stroke='currentColor' 在 background-image 上下文中默认渲染为黑色，
   适合多数浅色主题；深色主题如有需要，后续可通过 filter:invert(1) 翻转。 */
.icon-regenerate {
  -webkit-mask: none;
  mask: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6M3 12a9 9 0 0115.36-6.36L21 8M3 22v-6h6M21 12a9 9 0 01-15.36 6.36L3 16'/%3E%3C/svg%3E") no-repeat center; /* ui-lint-allow: theme decorative icon path */
  background-size: contain;
}

.icon-delete {
  -webkit-mask: none;
  mask: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2'/%3E%3C/svg%3E") no-repeat center; /* ui-lint-allow: theme decorative icon path */
  background-size: contain;
}

.icon-edit {
  -webkit-mask: none;
  mask: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") no-repeat center; /* ui-lint-allow: theme decorative icon path */
  background-size: contain;
}

/* ─── 21. 手机端底部 mobile-bar 让位 ─── */
/* 原 app.css:12060 给 chat-input-area 设 margin-bottom: 64px 是错位让位策略：
   在 chat-input-area 之后留 64px 空白避开固定的 mobile-bar。但 64px 比 mobile-bar
   实际高度 (~56px) 多。
   重构：让 main-stage 自身 padding-bottom 等于 mobile-bar 高度——chat-input-area
   自然贴 mobile-bar 顶部，chat-messages-area flex:1 自动让出空间。 */
@media (max-width: 1150px) {
  body.stage-router-on #main-stage {
    padding-bottom: calc(56px + var(--safe-bottom, 0px));
  }
  body.stage-router-on #main-stage > .chat-input-area,
  body.stage-router-on #main-stage > .stage-pane {
    margin-bottom: 0;
  }
  /* iOS PWA 下 safe-bottom 已由 #main-stage padding-bottom 承担，
     input-area 不再叠加，否则在 home-indicator 设备上多出 ~34px 空白 */
  body.stage-router-on #main-stage > .chat-input-area {
    padding-bottom: 12px;
  }
}

/* ─── 22. 中窄屏 (<900px) 顶部 mode-toggle 填满，账户按钮锚定右上角 ─── */
/* 关键：toggle 容器 flex:1 撑开（变宽）+ 内部两个 .tab 各 flex:1 等宽（沙盒/世界卡 各占一半）
   仅 .tab-strip 默认 inline-flex 子元素按内容宽度，要显式让 .tab 等分才能真填满。 */
@media (max-width: 899px) {
  #mode-toggle {
    flex: 1;
    display: flex;
  }
  #mode-toggle > .tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
}

/* ─── 11. 聊天输入区 (chat-input-area) ─── */

.chat-input-area {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-soft);
}

#chat-input-textbox,
textarea.chat-input {
  background: var(--surface-input);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  font-family: var(--font-ui);
}

#chat-input-textbox:focus,
textarea.chat-input:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus-ring);
}

/* §12 game-status 内嵌状态栏（AI 消息开头）—— 不覆盖，沿用项目原样式
   (用户反馈：内嵌状态栏要保持原样，置顶 .sticky-status-bar 才走新设计) */

/* ═══════════════════════════════════════════════════════════
   v2 增量：精修匹配 Claude Design 排版／动画／非对称形态
   ═══════════════════════════════════════════════════════════ */

/* ─── 13. Chevron 折叠按钮 ─── */

.choice-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s var(--easing-standard);
}

.choice-chevron:hover {
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-main) 4%, transparent);
}

.choice-chevron .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

/* 默认折叠：chevron 朝下，row-2 隐藏。只用 is-expanded 一个 class 控制 */
.choice-chevron {
  transform: rotate(0deg);
}

.choice-item.is-expanded .choice-chevron {
  transform: rotate(180deg);
}

.choice-item .choice-row-2 {
  display: none;
}

.choice-item.is-expanded .choice-row-2 {
  display: flex;
}

/* ≥769px（桌面/平板）：detail 自动展开、chevron 隐藏、点选项一次即发（JS 配合） */
@media (min-width: 769px) {
  .choice-item .choice-row-2 {
    display: flex;
  }

  .choice-item .choice-chevron {
    display: none;
  }
}

/* ─── 14. 选项卡片 — 紧凑布局，去掉 translateX 滑动 ─── */

.choice-item {
  padding: 9px 4px 9px 12px;
  gap: 0;
  flex-direction: column;
  overflow: hidden;
}

.choice-item:hover {
  /* 设计稿 hover 只换 border 色，不滑动 */
  transform: none;
  box-shadow: none;
  border-color: var(--brand-primary);
  background: var(--choice-item-hover-bg);
}

.choice-item:active {
  transform: none;
  box-shadow: none;
  border-style: solid;
  background: var(--choice-item-active-bg);
}

.choice-row-1 {
  gap: 8px;
  align-items: center;
  min-width: 0;
}

/* 标题单行 ellipsis 防换行 */
.choice-row-1 .choice-short {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-body);
  line-height: 1.4;
}

/* row-2 detail 区：紧凑 + 上分隔线 */
.choice-row-2 {
  padding: 9px 13px 2px 0;
  margin-top: 9px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.choice-row-2 .choice-detail {
  flex: 1 1 auto;
  word-break: break-word;
}

/* 选项区顶部"你的选择？"标题：暖纸色调 */
.choices-header {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── 15. 聊天气泡 — asymmetric 圆角（设计稿 12/12/12/3 尾巴形态） ─── */

.chat-message.user-message .chat-message-content {
  /* 左下角 3px = 尾巴朝左侧 U 头像 */
  border-radius: 12px 12px 12px 3px;
}

.chat-message.ai-message .chat-message-content {
  /* 左上角 3px = 尾巴朝左侧 AI 头像 */
  border-radius: 3px 12px 12px 12px;
}

/* ─── 16. 底部 5-tab — active flex-grow 动画 + 标签淡入 ─── */

body.stage-router-on .stage-mobile-bar .stage-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 0;
  height: 44px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-lg); /* 14px */
  transition:
    flex 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.2s var(--easing-standard),
    background 0.2s var(--easing-standard),
    color 0.15s var(--easing-standard);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

body.stage-router-on .stage-mobile-bar .stage-nav-btn.is-active {
  flex: 1.85 1 0;
  padding: 9px 14px;
  color: var(--tab-color, var(--brand-accent));
  background: color-mix(in srgb, var(--tab-color, var(--brand-accent)) 16%, transparent);
}

/* inactive 时隐藏标签 span（保留 icon span）；active 时显示并淡入 */
/* font-size 同时在这里 override app.css:4067 的 var(--text-xs) —— 那条 selector 更具体（5 类）
   会盖掉我在 button 上设的 16px，必须在 label span 这一层显式覆盖 */
body.stage-router-on .stage-mobile-bar .stage-nav-btn > span:not(.material-symbols-outlined):not(.header-badge):not(.square-btn-lock) {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--text-body-lg); /* 14px，覆盖 app.css:4067 的 text-xs */
  transition: max-width 0.2s var(--easing-standard), opacity 0.18s var(--easing-standard);
}

body.stage-router-on .stage-mobile-bar .stage-nav-btn.is-active > span:not(.material-symbols-outlined):not(.header-badge):not(.square-btn-lock) {
  max-width: 80px;
  opacity: 1;
}

/* ─── 17. SubTabs 精修（间距对齐 logo+toggle 行节奏） ─── */

.stage-substage-nav {
  padding: 0 14px 8px;
}

/* ─── 18. Sticky 状态栏 — T-pill chip + 紧凑头部 ─── */

.sticky-status-bar {
  padding: 0;
}

.sticky-turn-badge {
  padding: 3px 7px;
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
}

.sticky-status-popover {
  padding: 11px 14px;
  background-color: var(--bg-color);
  background-image: linear-gradient(var(--surface-soft), var(--surface-soft));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  border-top: 1px solid var(--border-soft);
}

/* §19 顶部"沙"字 logo —— 撤回
   用户决定：保持项目原 PWA 图标 logo（带主界面跳转 click handler）+ 桌面端"AI Sandbox Game"
   文字，不再用伪元素覆盖。 */

/* ─── 23. 手机端 subtab 滚动浮现 ─── */
/* 默认（chat 没滚到顶部）subtab 折叠不可见；body.is-chat-at-top 时浮现。
   仅 ≤1150px 启用——桌面 subtab 始终显示，无空间压力。
   作用域：仅 .stage-pane 直接子（story 总结 subtab 在 stage-pane 内）；
   preview-substage-nav 已上移到 #design-chat-header，不走 scroll-reveal。 */
@media (max-width: 1150px) {
  .stage-pane > .stage-substage-nav {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s var(--easing-standard),
      max-height 0.2s var(--easing-standard),
      margin 0.2s var(--easing-standard),
      padding 0.2s var(--easing-standard);
  }

  body.is-chat-at-top .stage-pane > .stage-substage-nav {
    opacity: 1;
    max-height: 60px;
    margin: 8px 0 4px;
    padding: 6px 8px;
    pointer-events: auto;
  }
}