/* ═══════════════════════════════════════════════════════════════
   焕贞 AI · App 模式专属样式（黑金配色）
   仅在 body.app-mode 下生效，web 端不受影响。
   触发条件：Capacitor.isNativePlatform() 为 true，或 URL 带 ?app=1（预览）
   ═══════════════════════════════════════════════════════════════ */

body.app-mode {
  /* ── Black & Gold design tokens ── */
  --bg-deep:     #0a0806;
  --bg-card:     #14110d;
  --bg-elev:     rgba(255,255,255,.04);
  --bg-elev2:    rgba(255,255,255,.08);
  --border-gold: rgba(196,146,77,.30);
  --border-mut:  rgba(255,255,255,.06);
  --ink-pri:     #f0e6d0;
  --ink-sec:     #c2b394;  /* 提亮：黑底对比度 6.4:1 (旧 #9a8c75 = 4.36:1) */
  --ink-mut:     #9d927a;  /* 提亮：黑底对比度 4.5:1 (旧 #6f6450 = 2.65:1 WCAG 失败) */
  --gold:        #c4924d;
  --gold-lt:     #e0c490;
  --gold-dk:     #8c5e30;
  --ruby:        #c5453a;
  --shadow-gold: 0 0 14px rgba(196,146,77,.22);

  /* ── 重映射所有 web 端 token（让旧选择器在黑底下自动可见） ── */
  --bg-main:        #0a0806;
  --bg-depth:       #14110d;
  --bg-section:     rgba(255,255,255,.05);
  --bg-ink:         #f0e6d0;
  --card:           #14110d;
  --card-strong:    #181410;
  --card-elevated:  #1d1810;
  --line:           rgba(196,146,77,.18);
  --line-strong:    rgba(196,146,77,.32);
  --text:           #f0e6d0;
  --text-primary:   #f0e6d0;
  --text-secondary: #c7b89c;  /* 从 #9a8c75 提亮至 #c7b89c —— 提升黑底可读性 */
  --muted:          #b5a888;
  --subtle:         #c7b89c;  /* 提亮，确保 timeline / debug / hint 可读 */
  --accent:         #c4924d;
  --accent-2:       #e0c490;
  --accent-hover:   #d6a26b;
  --accent-deep:    #8c5e30;
  --accent-soft:    rgba(196,146,77,.15);
  --accent-text:    #0a0806;
  --success:        #6fb892;
  --success-soft:   rgba(62,155,106,.18);
  --danger:         #ef6e62;
  --danger-soft:    rgba(197,69,58,.18);
  --warning:        #f0c178;
  --warning-soft:   rgba(217,154,61,.18);
  --gold-soft:      rgba(196,146,77,.15);
  --shadow-ambient: 0 8px 24px rgba(0,0,0,.5);
  --shadow-hover:   0 14px 40px rgba(0,0,0,.6);

  /* A3 token（衬线杂志骨架沿用） */
  --a3-cream:  #0a0806;
  --a3-ink:    #f0e6d0;
  --a3-muted:  #b5a888;
  --a3-line:   rgba(196,146,77,.18);

  /* 高级感氛围底：顶部一抹暖金光晕渐隐到深底，给纯黑以纵深 */
  background:
    radial-gradient(135% 75% at 50% -8%, #1b160e 0%, #100c08 42%, var(--bg-deep) 100%) !important;
  background-attachment: fixed !important;
  color: var(--ink-pri);
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}

/* 隐藏 web 形态元素 */
body.app-mode .global-nav,
body.app-mode .command-bar,
body.app-mode .assist-tab-strip {
  display: none !important;
}

/* 录音 FAB：4-Tab 改造后悬浮在底部 tab 栏「上方」（不再占中央槽、不遮挡 tab）。
   只在「线下辅助」区块显示（display 由 .section-assist 门控，见 offline-assist.css）。 */
body.app-mode .fab-record-zone {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 顶部 app 状态条（44px） ── */
.app-statusbar {
  display: none; /* 默认隐藏，仅 app-mode 显示 */
}
body.app-mode .app-statusbar {
  display: flex;
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(10,8,6,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-gold);
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 50;
  font-family: 'Noto Serif SC', serif;
}
body.app-mode .app-statusbar .app-brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold-lt);
}
body.app-mode .app-statusbar .app-rec-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-sec);
  letter-spacing: 1px;
}
body.app-mode .app-statusbar .app-rec-indicator .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-mut);
  transition: background .2s, box-shadow .2s;
}
body.app-mode.is-recording .app-statusbar .app-rec-indicator .dot {
  background: var(--ruby);
  box-shadow: 0 0 8px rgba(197,69,58,.6);
  animation: app-pulse 1.2s infinite;
}
body.app-mode.is-recording .app-statusbar .app-rec-indicator {
  color: var(--ruby);
}
@keyframes app-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}
body.app-mode .app-statusbar .app-duration {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-pri);
  letter-spacing: .5px;
}

/* ── 状态条上下文化（2026-05-31）：录音状态+计时只在「线下辅助」出现 ── */
/* 非线下辅助 tab：隐藏 待机/录音 指示 + 计时；显示区块标题 */
body.app-mode:not(.section-assist) .app-statusbar .app-rec-indicator,
body.app-mode:not(.section-assist) .app-statusbar .app-duration {
  display: none;
}
.app-statusbar .app-sb-title { display: none; }
body.app-mode:not(.section-assist) .app-statusbar .app-sb-title {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-sec);
}
/* 线下辅助 tab：隐藏区块标题（用录音状态+计时） */
body.app-mode.section-assist .app-statusbar .app-sb-title { display: none; }

/* ── 固定 app-shell 滚动架构（2026-05-31 UI 升级） ──
   关键：app-mode 锁 body 不滚，只让 .assist-shell 内部滚动。
   彻底消除 WKWebView 地址栏伸缩导致的 fixed 抖动 / 橡皮筋露白边 / 内容滚到 chrome 下。 */
body.app-mode {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.app-mode .shell,
body.app-mode .assist-shell {
  background: transparent !important;
  position: fixed !important;
  top: calc(44px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}

/* 每个区块：内层留白；线下辅助底部多留白让内容不被悬浮录音键遮挡 */
body.app-mode .assist-tab-panel {
  padding: 0 14px 28px !important;
  background: transparent !important;
}
body.app-mode .app-section[data-section="assist"] {
  padding-bottom: 112px !important;  /* 录音 FAB 悬浮区净空 */
}

/* ── 2026-05-31：App 模式下 AI训练 嵌入 iframe 占满滚动区可用高度（不双重滚动） ── */
body.app-mode .app-section[data-section="training"] { padding: 0 !important; }
body.app-mode .app-section[data-section="training"] .training-seg-bar { margin: 0 !important; padding: 0 !important; }
body.app-mode .training-embed-wrap,
body.app-mode .training-iframe { display: block; }
/* 关键：分段切换靠 .active 控制显隐。app-mode 下必须保留 none/active 切换，
   不能把 .training-embed 一律 display:block（那会让两个面板恒显、点击 tab 无效）。 */
body.app-mode .training-embed { display: none; }
body.app-mode .training-embed.active { display: block; }
body.app-mode .training-iframe {
  /* 滚动区高 = 100dvh - statusbar(44+safe-top) - tabbar(70+safe-bottom)；再减吸顶分段栏 ~46 */
  height: calc(100dvh - 44px - env(safe-area-inset-top, 0px) - 70px - env(safe-area-inset-bottom, 0px) - 46px);
  min-height: 360px;
  border: none;
  border-radius: 0;
}

/* 强制单列 + 紧凑 padding（覆盖 web 端 grid 2 列布局） */
body.app-mode .a3-main-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
}
body.app-mode .a3-stage-strip {
  padding: 10px 12px !important;
  margin: 0 0 12px !important;
  gap: 8px !important;
}
body.app-mode .a3-stream {
  padding: 12px !important;
  margin: 0 !important;
}
body.app-mode .a3-live-ticker {
  margin: 0 0 12px !important;
}

/* 默认只显示 .active 的 panel */
body.app-mode .assist-tab-panel:not(.active) {
  display: none !important;
}

/* ── 通用卡片黑金化 ── */
body.app-mode .a3-main-grid,
body.app-mode .a3-stage-strip,
body.app-mode .a3-stream,
body.app-mode .transcript-output,
body.app-mode .transcript-text-output,
body.app-mode .debug-panel,
body.app-mode .alert-bottom-bar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 14px !important;
  color: var(--ink-pri);
  box-shadow: var(--shadow-gold);
}

body.app-mode .a3-main-grid {
  margin-bottom: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.app-mode .a3-command-col,
body.app-mode .a3-signals-col {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border-mut) !important;
  border-radius: 12px;
  padding: 12px;
  color: var(--ink-pri);
}

body.app-mode .a3-command-body {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-pri);
}
body.app-mode .a3-command-body em,
body.app-mode .a3-command-body strong {
  color: var(--gold-lt);
  font-weight: 600;
  font-style: normal;
}

body.app-mode .a3-signals-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 600;
}

body.app-mode .a3-signal-list .signal-item,
body.app-mode .signal-list .signal-item {
  background: transparent;
  border-bottom: 1px dashed var(--border-mut);
  padding: 10px 0;
  color: var(--ink-pri);
}
body.app-mode .a3-signal-list .signal-item:last-child,
body.app-mode .signal-list .signal-item:last-child {
  border-bottom: none;
}
body.app-mode .a3-signal-list .signal-item p,
body.app-mode .signal-list .signal-item p {
  color: var(--ink-pri) !important;
  font-size: 13px;
  line-height: 1.5;
  margin: 2px 0;
}
/* "暂无" 弱化（CSS attribute matcher 在 :has 支持下生效；fallback 走 JS class） */
body.app-mode .signal-item p.is-empty {
  color: var(--ink-mut) !important;
  font-style: italic;
  font-size: 12px;
  opacity: .85;  /* 比之前 .75 提一点，黑底太暗看不见 */
}
body:not(.app-mode) .signal-item p.is-empty {
  color: #8a826f !important;
  font-style: italic;
  font-size: 12px;
  opacity: .75;
}
body.app-mode .a3-signal-list .signal-label,
body.app-mode .signal-list .signal-label {
  color: var(--ink-sec) !important;
  font-size: 11px !important;
  letter-spacing: 1px;
  margin-bottom: 4px !important;
  font-weight: 600;
}
body.app-mode .signal-confidence {
  background: var(--bg-elev2) !important;
  color: var(--gold-lt) !important;
  border-color: var(--border-gold) !important;
}
body.app-mode .signal-confidence-high {
  background: rgba(62,155,106,.15) !important;
  color: #6fb892 !important;
}
body.app-mode .signal-confidence-medium {
  background: rgba(217,154,61,.15) !important;
  color: #f0c178 !important;
}
body.app-mode .signal-confidence-low {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink-sec) !important;
}

/* 阶段进度条黑金 */
body.app-mode .a3-stage-strip {
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.app-mode .task-progress.a3-stage-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
body.app-mode .task-item {
  background: var(--bg-elev);
  border: 1px solid var(--border-mut);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-sec);
}
body.app-mode .task-item.focus {
  background: linear-gradient(135deg, rgba(196,146,77,.18), rgba(196,146,77,.06));
  border-color: var(--border-gold);
  color: var(--gold-lt);
  box-shadow: 0 0 8px rgba(196,146,77,.2);
}
body.app-mode .task-item.done {
  background: rgba(62,155,106,.08);
  border-color: rgba(62,155,106,.3);
  color: #6fb892;
}
body.app-mode .task-item em {
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: inherit;
}
body.app-mode .hcc-badge {
  background: var(--bg-elev2);
  color: var(--gold-lt);
  border: 1px solid var(--border-gold);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  letter-spacing: 1px;
}

/* 实时小结 timeline 黑金 */
body.app-mode .a3-stream {
  padding: 14px;
}
body.app-mode .a3-stream-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mut);
}
body.app-mode .a3-stream-title {
  font-size: 13px;
  color: var(--gold-lt);
  letter-spacing: 2px;
  font-weight: 600;
}
body.app-mode .a3-stream-meta {
  font-size: 10px;
  color: var(--ink-mut);
  letter-spacing: 1px;
}
body.app-mode .a3-timeline .timeline-item,
body.app-mode .timeline-list .timeline-item,
body.app-mode #timeline-list .timeline-item {
  background: var(--bg-elev) !important;
  border-left: 2px solid var(--gold-dk) !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--ink-pri) !important;
}
body.app-mode .timeline-list,
body.app-mode #timeline-list {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-height: none !important;  /* 取消基础 240px 约束，让容器跟内容走，避免空状态下装饰竖线被撑高 */
  overflow-y: visible !important;
}
/* 空状态（没 timeline-entry/timeline-item 子）隐藏装饰竖线 + 缩小左 padding —— 否则只剩一条孤立竖线 */
body.app-mode .a3-timeline:not(:has(.timeline-entry, .timeline-item)) {
  padding-left: 0 !important;
}
body.app-mode .a3-timeline:not(:has(.timeline-entry, .timeline-item))::before {
  display: none !important;
}
body.app-mode .timeline-item *,
body.app-mode .timeline-list .timeline-item *,
body.app-mode #timeline-list .timeline-item * {
  color: var(--ink-pri) !important;
}
body.app-mode .timeline-item .timeline-time,
body.app-mode .timeline-item small,
body.app-mode .timeline-item .timeline-meta {
  color: var(--gold) !important;
  font-size: 11px !important;
}
body.app-mode .timeline-item .timeline-summary {
  color: var(--ink-pri) !important;
  font-size: 13px !important;
  line-height: 1.55;
}
body.app-mode .timeline-item .timeline-tag {
  background: var(--gold-dk) !important;
  color: #fff !important;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}

/* 通用兜底：app-mode 下所有 small / muted 类、insight-hint 等 */
body.app-mode small,
body.app-mode .muted,
body.app-mode .text-muted,
body.app-mode .text-subtle,
body.app-mode .insight-hint,
body.app-mode .slice-mode-hint,
body.app-mode .meta,
body.app-mode .hint {
  color: var(--ink-sec) !important;
}
body.app-mode .debug-toolbar button {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border-mut) !important;
  color: var(--ink-pri) !important;
}
body.app-mode .btn-ghost {
  background: var(--bg-elev) !important;
  color: var(--ink-pri) !important;
  border: 1px solid var(--border-mut) !important;
}
body.app-mode .btn-ghost:hover { background: var(--bg-elev2) !important; }
body.app-mode .btn-ghost:disabled { opacity: .4; }

/* Final transcript 行内的 timestamp / speaker tag 兜底 */
body.app-mode .transcript-output .ts,
body.app-mode .transcript-text-line .ts {
  color: var(--gold) !important;
}
body.app-mode .transcript-output .speaker-tag,
body.app-mode .transcript-text-line .transcript-text-speaker {
  background: var(--bg-elev2) !important;
  color: var(--ink-sec) !important;
}

/* LIVE ticker */
body.app-mode .a3-live-ticker {
  background: linear-gradient(135deg, rgba(196,146,77,.10), rgba(196,146,77,.02)) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 0 0 12px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-pri);
  font-size: 13px;
}
body.app-mode .a3-live-ticker-tag {
  font-size: 9px !important;
  color: var(--ruby) !important;
  background: rgba(197,69,58,.12) !important;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 7px !important;
  border: 1px solid var(--ruby) !important;
  border-radius: 4px !important;
}
body.app-mode .a3-live-ticker-body {
  flex: 1;
  color: var(--ink-pri);
  font-size: 13px;
  line-height: 1.5;
}

/* 转写记录 */
body.app-mode .transcript-output,
body.app-mode .transcript-text-output {
  padding: 14px;
  color: var(--ink-pri);
  min-height: 200px;
}
body.app-mode .transcript-output p {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-mut);
  font-size: 14px;
  line-height: 1.55;
}
body.app-mode .transcript-output p .ts {
  color: var(--gold);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  margin-right: 6px;
}
body.app-mode .transcript-output p .speaker-tag {
  background: var(--bg-elev2);
  color: var(--ink-sec);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 6px;
}
body.app-mode .transcript-output p.interim {
  color: var(--ink-sec);
  font-style: italic;
}
body.app-mode .muted-line {
  color: var(--ink-mut) !important;
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
}
body.app-mode .empty-state { padding: 28px 16px; text-align: center; }
body.app-mode .empty-state-text { color: var(--ink-mut) !important; font-size: 13px; }
/* 空状态图标徽章在 app-mode 保持金辉光圆徽（不被旧 override 压平） */
body.app-mode .empty-state-icon {
  color: var(--gold) !important;
  opacity: 1;
}
/* 兜底：所有 p/span/li 黑底不可见时拉亮 */
body.app-mode .a3-command-body p,
body.app-mode .a3-command-body span:not(.command-module-tag),
body.app-mode .v2-talk-track,
body.app-mode .v2-slice-summary,
body.app-mode .v2-transition-script,
body.app-mode .v2-quick-action,
body.app-mode .v2-suggested-module {
  color: var(--ink-pri) !important;
}
body.app-mode .v2-slice-summary {
  font-size: 17px;
  line-height: 1.55;
  font-family: 'Noto Serif SC', serif;
  margin: 6px 0;
}
body.app-mode .v2-quick-action {
  background: rgba(196,146,77,.12);
  border-left: 2px solid var(--gold);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  margin: 8px 0 0;
}
body.app-mode .v2-suggested-module {
  font-size: 12px;
  color: var(--ink-sec) !important;
  margin: 6px 0 0;
}
body.app-mode .v2-suggested-module strong {
  color: var(--gold-lt) !important;
  font-weight: 600;
}
body.app-mode .v2-eyebrow-tag {
  background: var(--gold-dk);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
}
body.app-mode .v2-eyebrow-task {
  color: var(--ink-sec) !important;
  font-size: 11px;
  margin-left: 6px;
}
body.app-mode .command-card-section h3 {
  font-size: 11px !important;
  color: var(--gold) !important;
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-weight: 600;
}
body.app-mode .command-module-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.app-mode .command-module-tag {
  background: var(--bg-elev2);
  color: var(--gold-lt) !important;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid var(--border-gold);
}
body.app-mode .analysis-output-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--ink-pri);
}

/* 转写 sub-tab bar */
body.app-mode .transcript-controls {
  margin-bottom: 12px;
}
body.app-mode .tab-bar-inline {
  display: flex;
  gap: 8px;
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--border-mut);
}
body.app-mode .tab-btn {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink-sec);
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
}
body.app-mode .tab-btn.active {
  background: var(--gold-dk);
  color: var(--ink-pri);
  box-shadow: 0 0 6px rgba(196,146,77,.3);
}

/* 调试面板（仅在 settings 展开时可见） */
body.app-mode .debug-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.app-mode .debug-panel {
  padding: 10px 12px;
}
body.app-mode .debug-panel-title {
  font-size: 12px;
  color: var(--gold-lt);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-weight: 600;
}
body.app-mode .debug-output {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-sec);
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-deep);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-mut);
}

/* alert 条 */
body.app-mode .alert-bottom-bar {
  background: linear-gradient(135deg, #5c1f17, var(--ruby)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #fff !important;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── 设置 tab 内容 ── */
body.app-mode .settings-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.app-mode .settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-gold);
}
body.app-mode .settings-section h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-lt);
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mut);
}
body.app-mode .settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-pri);
  border-bottom: 1px dashed var(--border-mut);
}
body.app-mode .settings-row:last-child { border-bottom: none; }
body.app-mode .settings-row .k {
  color: var(--ink-sec);
  font-size: 12px;
}
body.app-mode .settings-row .v {
  color: var(--ink-pri);
  font-weight: 500;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
body.app-mode .settings-row .v.gold {
  color: var(--gold-lt);
}
body.app-mode .settings-disclosure {
  background: var(--bg-elev);
  border-radius: 10px;
  border: 1px solid var(--border-mut);
  overflow: hidden;
}
body.app-mode .settings-disclosure summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-pri);
  font-weight: 500;
  list-style: none;
  position: relative;
  user-select: none;
}
body.app-mode .settings-disclosure summary::after {
  content: '⌄';
  position: absolute;
  right: 14px;
  color: var(--gold);
  transition: transform .2s;
}
body.app-mode .settings-disclosure[open] summary::after {
  transform: rotate(180deg);
}
body.app-mode .settings-disclosure summary::-webkit-details-marker {
  display: none;
}
body.app-mode .settings-disclosure-body {
  padding: 0 14px 14px;
  font-size: 11px;
  color: var(--ink-sec);
  line-height: 1.6;
}
body.app-mode .settings-disclosure pre {
  background: var(--bg-deep);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-mut);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-sec);
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 底部 tab bar ── */
.app-tabbar {
  display: none;
}
body.app-mode .app-tabbar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(70px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(14,11,8,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-gold);
  align-items: flex-start;
  padding-top: 10px;
  z-index: 60;
  justify-content: space-around;
}
body.app-mode .app-tab {
  flex: 1;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink-mut);
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 10px;
  letter-spacing: .5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  transition: color .15s;
}
body.app-mode .app-tab .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
body.app-mode .app-tab .ic svg {
  width: 23px;
  height: 23px;
  transition: transform var(--dur-normal, 250ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), filter var(--dur-normal, 250ms) ease;
}
body.app-mode .app-tab.active {
  color: var(--gold-lt);
}
body.app-mode .app-tab.active .ic svg {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 0 6px rgba(196,146,77,.5));
}
body.app-mode .app-tab:active .ic svg { transform: scale(.92); }
body.app-mode .app-tab-fab-slot {
  width: 80px;
  flex-shrink: 0;
}

/* ── FAB 黑金 ── */
body.app-mode .fab-meta {
  display: none !important; /* App 模式状态在顶 statusbar */
}
body.app-mode .fab-btn {
  width: 64px !important;
  min-height: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e0b878, var(--gold-dk)) !important;
  box-shadow:
    0 0 0 4px var(--bg-deep),
    0 6px 18px rgba(196,146,77,.5),
    0 2px 4px rgba(0,0,0,.4) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: none !important;
}
/* 必须晚于上面规则，覆盖 display:flex 让 [hidden] 真正隐藏 */
body.app-mode .fab-btn[hidden] {
  display: none !important;
}
body.app-mode .fab-btn .fab-icon {
  font-size: 20px;
  color: #fff;
}
body.app-mode .fab-btn .fab-label {
  display: none !important;
}
body.app-mode .fab-record.recording {
  background: radial-gradient(circle at 30% 30%, #ef6e62, #7a1f15) !important;
  animation: app-pulse-glow 1.4s infinite;
}
@keyframes app-pulse-glow {
  0%,100% {
    box-shadow:
      0 0 0 4px var(--bg-deep),
      0 0 16px rgba(197,69,58,.7),
      0 2px 4px rgba(0,0,0,.4);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--bg-deep),
      0 0 28px rgba(197,69,58,.9),
      0 0 4px rgba(0,0,0,.4);
  }
}
body.app-mode .fab-stop {
  background: linear-gradient(135deg, #c5453a, #7a1f15) !important;
}

/* 切片卡片（共用：app + web）— 通过 body.app-mode 区分配色 */
.slice-card {
  background: #fff;
  border: 1px solid #e6dfd0;
  border-left: 3px solid #c4924d;
  border-radius: 0 12px 12px 0;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
body.app-mode .slice-card {
  background: var(--bg-elev);
  border-color: var(--border-mut);
  border-left-color: var(--gold);
}
.slice-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  user-select: none;
  position: relative;
}
.slice-card-head::-webkit-details-marker { display: none; }
.slice-card-head::after {
  content: '⌄';
  position: absolute;
  right: 14px;
  color: #c4924d;
  font-size: 14px;
  transition: transform .2s;
}
body.app-mode .slice-card-head::after { color: var(--gold); }
.slice-card[open] .slice-card-head::after { transform: rotate(180deg); }
.slice-card-id {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 600;
  color: #8c5e30;
  font-size: 12px;
  letter-spacing: 1px;
}
body.app-mode .slice-card-id { color: var(--gold-lt); }
.slice-card-meta {
  font-size: 11px;
  color: #6b6457;
  margin-right: 20px;
}
body.app-mode .slice-card-meta { color: var(--ink-sec); }
.slice-card-body {
  padding: 0 14px 12px;
  border-top: 1px dashed #e6dfd0;
}
body.app-mode .slice-card-body { border-top-color: var(--border-mut); }
.slice-card-summary {
  background: rgba(196,146,77,.08);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 13px;
  color: #2a2218;
  line-height: 1.5;
}
body.app-mode .slice-card-summary {
  background: rgba(196,146,77,.10);
  color: var(--ink-pri);
}
.slice-card-summary-tag {
  display: inline-block;
  background: #c4924d;
  color: #fff;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  letter-spacing: 1px;
  font-weight: 600;
  vertical-align: middle;
}
.slice-card-module {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: #8c5e30;
  font-weight: 600;
}
body.app-mode .slice-card-module { color: var(--gold-lt); }
.slice-card-alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.slice-card-alert {
  background: rgba(197,69,58,.08);
  color: #a82e1e;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  border-left: 2px solid #a82e1e;
}
body.app-mode .slice-card-alert {
  background: rgba(197,69,58,.12);
  color: #ef9485;
}
.slice-card-lines {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.slice-card-line {
  font-size: 13px;
  line-height: 1.55;
  padding: 4px 0;
  color: #2a2218;
}
body.app-mode .slice-card-line { color: var(--ink-pri); }
.slice-card-speaker {
  display: inline-block;
  background: #f3ece0;
  color: #6b6457;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 6px;
  font-weight: 500;
}
body.app-mode .slice-card-speaker {
  background: var(--bg-elev2);
  color: var(--ink-sec);
}
.slice-card-interim {
  background: rgba(196,146,77,.05);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-style: italic;
  margin-bottom: 10px;
  border-left: 2px dashed #c4924d;
}
body.app-mode .slice-card-interim {
  background: rgba(196,146,77,.08);
}

/* insight-hint */
body.app-mode .insight-hint {
  color: var(--ink-sec);
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-style: italic;
}

/* command_card.reason 折叠样式 — 全局生效（不限 app-mode） */
.v2-section-reason {
  margin-top: 8px;
  padding: 0 !important;
  border-radius: 8px;
  background: rgba(196,146,77,.05);
}
.v2-section-reason summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  color: #8c5e30;
  font-weight: 500;
  position: relative;
  user-select: none;
}
.v2-section-reason summary::-webkit-details-marker { display: none; }
.v2-section-reason summary::after {
  content: '⌄';
  position: absolute;
  right: 12px;
  transition: transform .2s;
}
.v2-section-reason[open] summary::after { transform: rotate(180deg); }
.v2-reason-text {
  padding: 0 12px 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #5b5147;
  margin: 0;
}
body.app-mode .v2-section-reason {
  background: var(--bg-elev);
  border: 1px solid var(--border-mut);
}
body.app-mode .v2-section-reason summary {
  color: var(--gold-lt);
}
body.app-mode .v2-reason-text {
  color: var(--ink-sec);
}

/* ═══ 阶段详情 Bottom Sheet（全模式可用，黑金风格） ═══ */
.stage-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.stage-sheet-scrim.show {
  opacity: 1;
  pointer-events: auto;
}
.stage-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  background: #181410;
  color: #f0e6d0;
  border-top: 1px solid rgba(196,146,77,.35);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 50px rgba(0,0,0,.6);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  /* 默认完全藏起：translateY(100%) 在 sheet 矮内容时算出来不够，再加 visibility 兜底 */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), visibility 0s linear .25s;
  font-family: 'Noto Sans SC', sans-serif;
}
.stage-sheet.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}
.stage-sheet-handle {
  width: 42px;
  height: 4px;
  background: rgba(196,146,77,.35);
  border-radius: 2px;
  margin: 10px auto 4px;
}
.stage-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 12px;
  border-bottom: 1px solid rgba(196,146,77,.18);
}
.stage-sheet-head h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  font-weight: 600;
  color: #e0c490;
  letter-spacing: 1.5px;
  margin: 0;
}
.stage-sheet-close {
  background: rgba(255,255,255,.06);
  color: #c7b89c;
  border: none;
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-sheet-close:hover { background: rgba(255,255,255,.12); }
.stage-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px calc(30px + env(safe-area-inset-bottom, 0px));
}
.stage-sheet-body .ss-section {
  margin-bottom: 18px;
}
.stage-sheet-body .ss-section-summary {
  text-align: center;
  padding: 8px 0 16px;
  border-bottom: 1px dashed rgba(196,146,77,.2);
  margin-bottom: 18px;
}
.stage-sheet-body .ss-headline {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: #e0c490;
  margin: 0 0 4px;
}
.stage-sheet-body .ss-sub {
  font-size: 11px;
  color: #9a8c75;
  margin: 0;
}
.stage-sheet-body h4 {
  font-size: 11px;
  color: #c4924d;
  letter-spacing: 2px;
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.stage-sheet-body .ss-reason {
  font-size: 13px;
  line-height: 1.65;
  color: #c7b89c;
  background: rgba(196,146,77,.06);
  border-left: 2px solid #c4924d;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0;
}
.stage-sheet-body .ss-talk {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(196,146,77,.2);
  border-radius: 10px;
  padding: 12px 14px;
}
.stage-sheet-body .ss-transition {
  font-size: 12px;
  color: #9a8c75;
  margin: 0 0 6px;
  font-style: italic;
}
.stage-sheet-body .ss-talk-track {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #f0e6d0;
  margin: 0;
}
.stage-sheet-body .ss-quick {
  margin: 8px 0 0;
  font-size: 12px;
  color: #e0c490;
  padding: 6px 10px;
  background: rgba(196,146,77,.1);
  border-radius: 6px;
}
.stage-sheet-body .ss-alert {
  background: rgba(197,69,58,.12);
  border-left: 2px solid #c5453a;
  color: #ef9485;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  margin: 0 0 6px;
  line-height: 1.5;
}
.stage-sheet-body .ss-sig {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  font-size: 13px;
}
.stage-sheet-body .ss-sig:last-child { border-bottom: none; }
.stage-sheet-body .ss-sig-k {
  color: #9a8c75;
  font-size: 12px;
  min-width: 90px;
}
.stage-sheet-body .ss-sig-v {
  color: #f0e6d0;
  font-weight: 500;
  text-align: right;
  flex: 1;
}
.stage-sheet-body .ss-sig-warn .ss-sig-v {
  color: #ef9485;
}
.stage-sheet-body .ss-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-sheet-body .ss-stream-item {
  background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(196,146,77,.4);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}
.stage-sheet-body .ss-stream-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.stage-sheet-body .ss-stream-sid {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: #c4924d;
  font-weight: 600;
}
.stage-sheet-body .ss-stream-mod {
  font-size: 10px;
  color: #e0c490;
  background: rgba(196,146,77,.12);
  padding: 1px 6px;
  border-radius: 3px;
}
.stage-sheet-body .ss-stream-body {
  font-size: 13px;
  color: #f0e6d0;
  line-height: 1.55;
  margin: 0;
}
.stage-sheet-body .ss-stream-quick {
  font-size: 11px;
  color: #c7b89c;
  margin: 4px 0 0;
}
.stage-sheet-body .ss-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stage-sheet-body .ss-mod-chip {
  background: rgba(196,146,77,.12);
  color: #e0c490;
  border: 1px solid rgba(196,146,77,.3);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
}
.stage-sheet-body .ss-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stage-sheet-body .ss-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #c7b89c;
}
.stage-sheet-body .ss-score-row.active {
  color: #e0c490;
  font-weight: 600;
}
.stage-sheet-body .ss-score-k {
  min-width: 60px;
}
.stage-sheet-body .ss-score-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.stage-sheet-body .ss-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #8c5e30, #c4924d);
  border-radius: 3px;
  transition: width .3s;
}
.stage-sheet-body .ss-score-row.active .ss-score-fill {
  background: linear-gradient(90deg, #c4924d, #e0c490);
  box-shadow: 0 0 6px rgba(196,146,77,.4);
}
.stage-sheet-body .ss-score-v {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  min-width: 26px;
  text-align: right;
}
.stage-sheet-body .ss-empty {
  color: #6f6450;
  font-size: 12px;
  margin: 0;
  font-style: italic;
}

/* task-item 加 hover/active 提示能点 */
.task-item {
  cursor: pointer;
  transition: transform .1s, filter .1s;
}
.task-item:hover { filter: brightness(1.15); }
.task-item:active { transform: scale(0.97); }

/* 滚动条 */
body.app-mode ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
body.app-mode ::-webkit-scrollbar-thumb {
  background: rgba(196,146,77,.3);
  border-radius: 2px;
}
body.app-mode ::-webkit-scrollbar-track {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   面诊记录 MVP — Snackbar / Mine Tab / Replay 只读
   黑金风，适配 web + app-mode
   ═══════════════════════════════════════════════════════════════ */

/* ── Snackbar：底部居中黑底金边胶囊 ── */
.saved-snackbar {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, #14110d 0%, #1d1810 100%);
  border: 1px solid rgba(196,146,77,.55);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 18px rgba(196,146,77,.25);
  color: #f0e6d0;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  letter-spacing: .3px;
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.saved-snackbar.show {
  display: inline-flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* 错误态：红色边框 + 红色 icon */
.saved-snackbar.is-error {
  background: linear-gradient(135deg, #1d0d0a 0%, #2a1410 100%);
  border-color: rgba(197,69,58,.7);
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 18px rgba(197,69,58,.35);
  color: #ef9485;
  max-width: calc(100vw - 32px);
}
.saved-snackbar.is-error .saved-snackbar-icon {
  color: #ef6e62;
}
.saved-snackbar-icon {
  color: #e0c490;
  font-size: 14px;
  line-height: 1;
}
.saved-snackbar-text {
  color: #f0e6d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.saved-snackbar-undo {
  background: transparent;
  border: 1px solid rgba(196,146,77,.45);
  color: #e0c490;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .8px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.saved-snackbar-undo:hover {
  background: rgba(196,146,77,.12);
  border-color: rgba(196,146,77,.7);
  color: #f0e6d0;
}
.saved-snackbar-undo:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Mine 卡片列表 ── */
.assist-tab-panel[data-panel="mine"] {
  padding: 12px 14px 100px 14px;
}
#mine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mine-loading,
.mine-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-sec, #9a8c75);
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 13px;
}
.mine-empty p {
  margin: 4px 0;
}
.mine-empty-hint {
  color: var(--ink-mut, #6f6450);
  font-size: 11px;
}
.mine-card {
  background: var(--bg-card, #14110d);
  border: 1px solid var(--border-mut, rgba(255,255,255,.08));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s, transform .1s;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.mine-card:hover { border-color: rgba(196,146,77,.35); }
.mine-card:active { transform: scale(0.997); }

.mine-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mine-card-date {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--ink-pri, #f0e6d0);
  font-weight: 500;
}
.mine-card-duration {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-sec, #9a8c75);
}
.mine-card-chip {
  margin-left: auto;
  padding: 3px 10px;
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  letter-spacing: .8px;
  color: #e0c490;
  background: rgba(196,146,77,.10);
  border: 1px solid rgba(196,146,77,.30);
  border-radius: 999px;
}
.mine-card-menu {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--ink-mut, #6f6450);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.mine-card-menu:hover {
  background: rgba(255,255,255,.06);
  color: #e0c490;
}
.mine-card-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mine-score-cell {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.mine-score-label {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  color: var(--ink-sec, #9a8c75);
  letter-spacing: .5px;
}
.mine-score-bar {
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}
.mine-score-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dk, #8c5e30), var(--gold, #c4924d));
  border-radius: inherit;
  transition: width .25s ease;
}
.mine-score-val {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-mut, #6f6450);
  text-align: right;
}
.mine-card-foot {
  display: flex;
  justify-content: flex-end;
}
.mine-card-open {
  background: transparent;
  border: 1px solid rgba(196,146,77,.40);
  color: #e0c490;
  padding: 6px 14px;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 12px;
  letter-spacing: .6px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mine-card-open:hover {
  background: rgba(196,146,77,.12);
  border-color: rgba(196,146,77,.7);
  color: #f0e6d0;
}

/* ── Replay 只读模式 ── */
body.replay-mode .fab-record-zone,
body.replay-mode #fab-record-zone {
  display: none !important;
}
body.replay-mode .app-tab-fab-slot {
  width: 0 !important;
}
body.replay-mode #record-btn,
body.replay-mode #stop-btn {
  pointer-events: none !important;
  opacity: .4 !important;
}
body.replay-mode .a3-live-ticker {
  display: none !important;
}

/* ═══ Mine tab：头部 + 统计 + 历史 head（补充 agent 已写的 mine-card） ═══ */
.mine-shell { display: flex; flex-direction: column; gap: 14px; }
.mine-header-card {
  background: linear-gradient(135deg, rgba(196,146,77,.10), rgba(196,146,77,.02));
  border: 1px solid rgba(196,146,77,.30);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mine-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #c4924d, #8c5e30);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(196,146,77,.3);
  flex-shrink: 0;
}
.mine-meta { flex: 1; min-width: 0; }
.mine-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px; font-weight: 600;
  color: #f0e6d0; margin: 0 0 3px;
}
.mine-sub {
  font-size: 11px; color: #9a8c75;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, Menlo, monospace;
}
.mine-login-btn {
  background: rgba(255,255,255,.06);
  color: #9a8c75;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: not-allowed;
  flex-shrink: 0;
}

.mine-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mine-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mine-stat .n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px; font-weight: 700;
  color: #e0c490;
  line-height: 1.1;
}
.mine-stat .l {
  font-size: 10px; color: #9a8c75;
  letter-spacing: 1px;
}

.mine-history { display: flex; flex-direction: column; gap: 10px; }
.mine-history-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px;
}
.mine-history-head h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px; font-weight: 600;
  color: #c4924d;
  letter-spacing: 2px;
  margin: 0;
}
.mine-empty {
  text-align: center;
  padding: 32px 16px;
  color: #6f6450 !important;
  font-size: 13px;
  font-style: italic;
}

/* web 端（非 app-mode）mine tab fallback：浅色背景配色 */
body:not(.app-mode) .mine-header-card {
  background: #f3ece0;
  border-color: #d8cdb8;
}
body:not(.app-mode) .mine-avatar {
  background: linear-gradient(135deg, #b48451, #8c5e30);
}
body:not(.app-mode) .mine-name { color: #1a1612; }
body:not(.app-mode) .mine-sub { color: #6e6358; }
body:not(.app-mode) .mine-stat {
  background: #fff; border-color: #e6dfd0;
}
body:not(.app-mode) .mine-stat .n { color: #8c5e30; }
body:not(.app-mode) .mine-stat .l { color: #6e6358; }
body:not(.app-mode) .mine-history-head h3 { color: #8c5e30; }
body:not(.app-mode) .mine-empty { color: #9a8c75 !important; }

/* ═══════════════════════════════════════════════════════════════
   桌面浏览器 ?app=1 预览模式 — 把 app-mode 限制在手机宽框居中
   仅 ≥ 768px 屏幕生效（真机手机宽 ≤ 480 不触发）
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* 整页深色背景 + 整个 app 内容居中 */
  html:has(body.app-mode) {
    background: #050402 !important;
  }
  body.app-mode {
    max-width: 430px !important;
    margin: 0 auto !important;
    min-height: 100vh;
    box-shadow:
      0 0 0 1px rgba(196,146,77,.25),
      0 0 60px rgba(0,0,0,.7),
      0 0 120px rgba(196,146,77,.08);
    position: relative;
  }
  /* fixed 元素居中限宽 — 用 left:calc(50vw-215px) 不用 transform，
     避免覆盖 stage-sheet/FAB 的动画 transform */
  body.app-mode .app-statusbar,
  body.app-mode .app-tabbar,
  body.app-mode .alert-bottom-bar,
  body.app-mode .saved-snackbar,
  body.app-mode .stage-sheet,
  body.app-mode .shell,
  body.app-mode .assist-shell {
    width: 430px !important;
    max-width: 430px !important;
    left: calc(50vw - 215px) !important;
    right: auto !important;
  }
  /* FAB-zone 跟手机框同宽，内部 fab-btn 已 align-items:center 自然居中 */
  body.app-mode .fab-record-zone {
    position: fixed;
    width: 430px !important;
    left: calc(50vw - 215px) !important;
    right: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 18px);
    transform: none !important;
    pointer-events: none;  /* zone 本身不挡点击 */
  }
  body.app-mode .fab-record-zone .fab-btn {
    pointer-events: auto;  /* button 本身可点 */
  }
  /* scrim 仍覆盖整页（要遮整个深色背景，不只是手机框） */
  body.app-mode .stage-sheet-scrim {
    max-width: none !important;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   #3 真机沉浸感加固（all viewports）
   兜底 html bg + 禁 overscroll 弹性，防 reload / pull-to-refresh
   时漏出系统色或滚出黑色虚边
   ═══════════════════════════════════════════════════════════════ */
html:has(body.app-mode) {
  background: #0a0806;
  /* 防 iOS overscroll 弹性露出系统色，桌面浏览器也防误触发 pull-to-refresh */
  overscroll-behavior: none;
}
body.app-mode {
  overscroll-behavior: none;
  /* 锁住横向滑动（黑金 layout 固定 portrait，意外横向滚动会露白边） */
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   #2 录音中氛围反馈（body.app-mode.is-recording）
   ── 让"AI 正在听"在整个屏幕都有视觉感知，不只是 FAB 红
   ═══════════════════════════════════════════════════════════════ */

/* (a) Body ambient 金色呼吸光晕 — radial-gradient 在 viewport 边缘脉动 */
body.app-mode.is-recording::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;  /* 在 bg 之上、所有 content 之下 */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,    rgba(196,146,77,.10), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 100%,  rgba(197,69,58,.08),  transparent 60%);
  animation: app-ambient-breath 4.5s ease-in-out infinite;
}
@keyframes app-ambient-breath {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* (b) Statusbar 录音中视觉强化 */
body.app-mode.is-recording .app-statusbar {
  border-bottom-color: rgba(197,69,58,.45);
  box-shadow: 0 1px 14px rgba(197,69,58,.18);
}
body.app-mode.is-recording .app-statusbar .app-brand {
  color: var(--gold-lt);
  text-shadow: 0 0 10px rgba(224,196,144,.45);
}
body.app-mode.is-recording .app-statusbar .app-duration {
  color: var(--gold-lt);
  text-shadow: 0 0 8px rgba(196,146,77,.4);
}

/* (c) 当前阶段 chip pulse — .task-item.focus 加呼吸动画
   让用户能在 5 阶段进度条上"看见" AI 当前跟到哪里 */
body.app-mode.is-recording .task-item.focus {
  animation: app-chip-pulse 2.2s ease-in-out infinite;
}
@keyframes app-chip-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(196,146,77,.2);
    border-color: var(--border-gold);
  }
  50% {
    box-shadow: 0 0 16px rgba(196,146,77,.5), 0 0 24px rgba(224,196,144,.18);
    border-color: rgba(224,196,144,.6);
  }
}

/* (d) hero 默认引导文字录音中淡出 — 给真内容让位 */
body.app-mode.is-recording .is-default-state .v2-talk-track,
body.app-mode.is-recording .is-default-state .a3-default-headline {
  opacity: 0;
  transition: opacity .4s;
}