/* =============================================================
   LensMind v6 · 全局样式 global.css
   暖色画廊视觉系统 · 三人共用
   ============================================================= */

/* ===========================================================
   Patch 41 · 色彩 Token 系统
   所有页面颜色都通过 token 引用,手机端在 ≤480px 自动加深一档
   =========================================================== */
:root {
  /* ===== 基础底色 ===== */
  --bg-light: #1A1812;
  --bg-mid: #15130E;
  --bg-dark: #0D0C09;
  --color-bg-base: #14110e;
  --color-bg-elevated: #1a1612;
  --color-bg-card: rgba(255, 255, 255, 0.04);
  --color-bg-card-hover: rgba(255, 255, 255, 0.06);
  --color-bg-overlay: rgba(0, 0, 0, 0.55);

  /* ===== 边框 ===== */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-accent: rgba(196, 142, 90, 0.35);

  /* ===== 文字色（四档清晰度，Patch 46 提亮一档） ===== */
  --color-text-primary: rgba(255, 255, 255, 1);
  --color-text-strong: rgba(255, 255, 255, 1);
  --color-text-body: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.78);
  --color-text-tertiary: rgba(255, 255, 255, 0.62);
  --color-text-disabled: rgba(255, 255, 255, 0.4);
  --text-hint: rgba(255, 255, 255, 0.55);

  /* ===== 暖橙白（强调色 · 关键参数 / 高亮，Patch 46 整体提亮 + 微调色温） ===== */
  --color-accent: rgba(255, 235, 200, 1);
  --color-accent-strong: rgba(255, 230, 195, 1);
  --color-accent-medium: rgba(255, 225, 190, 0.95);
  --color-accent-soft: rgba(255, 225, 190, 0.85);

  /* ===== 暖棕（品牌色 · 装饰 / 主按钮） ===== */
  --color-brown-base: rgba(196, 142, 90, 1);
  --color-brown-deep: rgba(139, 90, 43, 1);
  --color-brown-bg-12: rgba(196, 142, 90, 0.12);
  --color-brown-bg-18: rgba(196, 142, 90, 0.18);
  --color-brown-bg-25: rgba(196, 142, 90, 0.25);
  --color-brown-border: rgba(196, 142, 90, 0.35);

  /* ===== 主按钮渐变 ===== */
  --gradient-primary: linear-gradient(135deg, #c48e5a 0%, #8b5a2b 100%);
  --gradient-decoration: radial-gradient(circle, rgba(196, 142, 90, 0.45), rgba(196, 142, 90, 0));

  /* ===== 状态色 ===== */
  --color-success: rgba(80, 220, 130, 0.95);
  --color-warning: rgba(255, 180, 80, 0.95);
  --color-error: rgba(220, 100, 100, 0.95);

  /* ===== 阴影 ===== */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 8px 24px rgba(196, 142, 90, 0.25);
  --shadow-glow-warm: 0 0 24px rgba(196, 142, 90, 0.3);
}

/* 手机端 ≤480px 文字色 / 强调色 自动加深一档（户外强光可读性补偿） */
@media (max-width: 480px) {
  :root {
    --color-text-strong: rgba(255, 255, 255, 1);
    --color-text-body: rgba(255, 255, 255, 0.88);
    --color-text-secondary: rgba(255, 255, 255, 0.72);
    --color-text-tertiary: rgba(255, 255, 255, 0.58);

    --color-accent-strong: rgba(255, 230, 195, 1);
    --color-accent-medium: rgba(255, 230, 195, 0.95);
    --color-accent-soft: rgba(255, 230, 195, 0.85);

    --color-border-default: rgba(255, 255, 255, 0.14);
    --color-brown-bg-12: rgba(196, 142, 90, 0.16);
    --color-brown-bg-18: rgba(196, 142, 90, 0.22);
  }
}

/* 手动开启高对比模式 · 在 body 加 .high-contrast 类即可 */
.high-contrast {
  --color-text-body: rgba(255, 255, 255, 1);
  --color-text-secondary: rgba(255, 255, 255, 0.92);
  --color-text-tertiary: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Patch 46 · 字体增强基线
   - 文字渲染抗锯齿
   - 衬线斜体强制 ≥500 字重，避免小屏发糊
   - 小字号 [class*="-meta|-label|-tag|-mini|-hint|-sub"] 强制 500
   ============================================ */
body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 衬线斜体小字必须 ≥500 字重（解决"细斜体在 12px 以下糊掉"） */
em, i {
  font-weight: 500;
}

/* 通用排印优化 */
p, li, span, label {
  letter-spacing: 0.2px;
}

/* 装饰性英文小标统一加粗加间距（patch 46 任务 D） */
.story-label,
.section-label,
.form-group-label,
.persona-tag,
.style-chip,
.params-card-meta,
.tier-aperture,
.channel-label {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 极小字号在手机端补偿放大 */
@media (max-width: 480px) {
  body { font-size: 14px; }
  /* 把所有 inline style="font-size: 10px / 11px" 提升到 12px */
  [style*="font-size: 10px"],
  [style*="font-size: 11px"] {
    font-size: 12px !important;
  }
}

/* =============================================================
   LensMind 设计系统 · 色彩使用底线（Patch 16 §25.11）
   =============================================================
   1. 选择态 / 筛选态 / 多选标签：暖棕半透明
      → background: rgba(196, 142, 90, 0.18)
      → color: rgba(255, 210, 170, 0.95)（深色页）
        或 var(--text-primary)（浅色画廊页）

   2. 主操作按钮（整页唯一的下一步）：允许墨黑深底白字 / 白底深字
      → background: var(--text-primary) #1A1A1A + color: #FFFFFF
      → 或 background: rgba(255, 255, 255, 0.95) + color: rgba(20,17,14,0.95)

   3. 次操作按钮：磨砂玻璃半透明
      → background: var(--glass)
      → color: var(--text-primary) / rgba(255,255,255,0.85)

   严禁：
   - 在选择态 / 标签 / 筛选 tab / chip 上使用 background: white | #fff
   - 这会导致白底白字、白底浅字，对比度不足无法阅读
   - 历史 bug：camera-confirm 套机镜头 / 附件曾用 white 选中，已修
   ============================================================= */

/* -------- 字体引入（放 HTML head 或这里都行） -------- */
@import url('https://fonts.font.im/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Sans:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');

/* -------- CSS 变量（色、字、圆角、阴影） -------- */
:root {
  /* 字体 */
  --font-display:   "Playfair Display", "Georgia", serif;
  --font-heading:   "Cormorant Garamond", "Libre Baskerville", serif;
  --font-body-cn:   "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body-en:   "DM Sans", "Nunito Sans", sans-serif;
  --font-mono:      "DM Mono", "IBM Plex Mono", monospace;

  /* 背景渐变 */
  --bg-light:       #1A1812;
  --bg-mid:         #15130E;
  --bg-dark:        #0D0C09;

  /* 氛围橘（仅氛围球） */
  --orb-center:     #F4A261;
  --orb-edge:       #E8915A;

  /* 文字 */
  --text-primary:   #F0F0F0;
  --text-secondary: #999999;
  --text-hint:      rgba(255, 255, 255, 0.55);

  /* 磨砂玻璃 */
  --glass:          rgba(255, 255, 255, 0.06);
  --glass-heavy:    rgba(255, 255, 255, 0.10);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.16);

  /* 分割与遮罩 */
  --divider:        rgba(255, 255, 255, 0.08);
  --overlay:        rgba(0, 0, 0, 0.55);

  /* 橘色引用高亮（仅在灵感卡片原文片段使用） */
  --quote-bg:       rgba(244, 162, 97, 0.20);
  --quote-bar:      rgba(244, 162, 97, 0.80);

  /* 圆角 */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-pill:    9999px;
}

/* -------- 基础 reset -------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* =============================================================
   响应式手机外壳容器 · Patch 05
   桌面/平板：固定 390×844 居中展示（演示态）
   手机：全屏 App 模式（真机访问态）

   设计意图：
     - 桌面 ≥1024px：模拟"在 iPhone 中预览设计稿"的展示效果
     - 平板 768~1023px：居中漂浮，留呼吸空间
     - 小平板/横屏手机 481~767px：等比缩放 0.85，居中
     - 竖屏手机 ≤480px：手机外壳消失，内容占满整个视口
     - 横屏过短（≤600px height landscape）：缩放 0.65 顶部对齐
   ============================================================= */
html, body {
  margin: 0;
  padding: 0;
  /* Patch 22 §B：iframe 嵌入下 100vh 不可靠，用 100% 兜底 */
  min-height: 100dvh;
  height: 100%;
  font-family: var(--font-body-cn);
  font-size: 14px; line-height: 1.5;
  color: var(--text-primary);
  color-scheme: dark;
  background-color: var(--bg-dark);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 桌面默认：手机外壳居中展示 */
body {
  background: var(--bg-dark);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.phone-frame {
  position: relative;                    /* 内部浮层的包含块 */
  width: 390px;                          /* iPhone 14 Pro 基准宽度 */
  height: 844px;                         /* iPhone 14 Pro 基准高度 */
  border-radius: 47px;                   /* iPhone 14 Pro 真机圆角 */
  overflow: hidden;                      /* 硬截断，内部 100vw 也跑不出 */
  flex-shrink: 0;
  /* 默认背景：深色模式固定 */
  background: var(--bg-dark);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 桌面装饰：Patch 22 §C — iframe 嵌入下大概率被截，永久关闭省 fixed 风险 */
.desktop-decoration {
  display: none !important;
}
.decoration-brand {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 32px; font-weight: 500;
  color: rgba(20, 17, 14, 0.15);
  letter-spacing: 4px;
  margin: 0 0 8px;
}
.decoration-tagline {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px; font-style: italic;
  color: rgba(20, 17, 14, 0.30);
  letter-spacing: 1px;
  margin: 0;
}

/* ============================================
   超大屏幕 ≥1440px：留白更舒适
   ============================================ */
@media (min-width: 1440px) {
  body { padding: 60px 20px; }
}

/* Patch 22 §C：桌面装饰 body::before/::after 兜底已删除（iframe 嵌入不需要） */

/* ============================================
   平板 768~1023px
   ============================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  body { padding: 32px 20px; }
}

/* ============================================
   小平板/横屏手机 481~767px：等比缩放 0.85
   ============================================ */
@media (max-width: 767px) and (min-width: 481px) {
  body { padding: 20px 0; align-items: center; min-height: 100%; }
  .phone-frame {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

/* ============================================
   竖屏手机 ≤480px：外壳消失，全屏 App 模式
   ============================================ */
@media (max-width: 480px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
  }
  body {
    display: block;
    padding: 0;
    min-height: 100%;
    background: var(--bg-dark);
  }
  /* Patch 22 §B：三层兜底 — height: 100% + min-height 100dvh */
  .phone-frame {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }
  /* 真机安全区适配 */
  .phone-tabbar {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .page-header,
  .t-header,
  .navbar {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

/* ============================================
   Patch 24 §35：手机外壳自适应缩放（分档版）

   注：patch 给的 min(1, (100vh - 80px) / 844px) 写法在 CSS 单位代数中不合法
   （vh / px 互除被 CSS 规范禁止），改用纯 @media 分档实现等效效果。

   原始 phone-frame 高度 844px + body padding 40+40 = 924px 是不缩放阈值。
   每档阈值降低就额外缩 5-10%。
   仅在桌面/平板态生效，≤480px 手机模式由后续规则强制 transform:none。
   不在 landscape orientation 下生效，避免与下方横屏规则冲突。
   ============================================ */
@media (min-width: 481px) and (max-height: 924px) and (orientation: portrait),
       (min-width: 481px) and (max-height: 924px) and (min-aspect-ratio: 1/1) {
  .phone-frame { transform: scale(0.95); transform-origin: center top; }
}
@media (min-width: 481px) and (max-height: 850px) {
  .phone-frame { transform: scale(0.88); transform-origin: center top; }
}
@media (min-width: 481px) and (max-height: 780px) {
  .phone-frame { transform: scale(0.80); transform-origin: center top; }
}
@media (min-width: 481px) and (max-height: 700px) {
  .phone-frame { transform: scale(0.72); transform-origin: center top; }
}
@media (min-width: 481px) and (max-height: 620px) {
  .phone-frame { transform: scale(0.65); transform-origin: center top; }
}

/* ============================================
   横屏（任何尺寸下手机横放）：≤600px 高时缩放
   优先级最高，覆盖以上分档
   ============================================ */
@media (max-height: 600px) and (orientation: landscape) {
  body { padding: 12px 20px; align-items: flex-start; }
  .phone-frame {
    transform: scale(0.65);
    transform-origin: center top;
  }
}

button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; background: none; border: none; outline: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* -------- 橘色氛围球（装饰，无交互） -------- */
.orb {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    var(--orb-center) 0%,
    var(--orb-edge) 40%,
    rgba(232, 145, 90, 0.15) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* -------- 入场动画 -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate { animation: fadeUp 0.45s ease-out both; }

/* 通用点击反馈 */
.clickable { transition: all 0.15s ease; cursor: pointer; }
.clickable:active { opacity: 0.7; transform: scale(0.97); }

/* =============================================================
   组件 · 导航
   ============================================================= */

.navbar {
  height: 88px;
  padding: 44px 20px 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}
.navbar-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.btn-back, .btn-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  transition: background 0.15s;
}
.btn-icon:active { background: rgba(0, 0, 0, 0.04); }

/* =============================================================
   组件 · 按钮
   ============================================================= */

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-family: var(--font-body-en);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-primary::after { content: '›'; font-weight: 300; opacity: 0.7; }
.btn-primary:active { opacity: 0.7; transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 48px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-en);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-secondary:active { opacity: 0.7; transform: scale(0.97); }

/* 文字按钮（低优先级链接） */
.btn-text {
  color: var(--text-secondary);
  font-family: var(--font-body-en);
  font-size: 14px;
  padding: 8px 0;
}
.btn-text:hover { color: var(--text-primary); }

/* =============================================================
   组件 · 底部操作区（v6.1 新增，解决页面按钮不统一）

   .bottom-actions 是所有页面底部按钮的统一容器。
   页面结构：.phone-frame > ... > .bottom-actions（flex 最后一个子元素，贴底）

   规则：
   - 水平 padding 20px，上下 padding 用 safe-area
   - 内部按钮之间间距 12px（统一垂直堆叠）
   - 禁止左右并排两个按钮（.bottom-actions-row 不存在）
   - 主+次按钮共存时：次在上，主在下（主按钮靠近拇指方便点击）
   - 文字链放在最底部（在主按钮下方）

   合法组合（5 种）：
     [单主]        主按钮
     [主+文字链]   主按钮 / 底部文字链
     [次+主]       次按钮（上）/ 主按钮（下）
     [次+主+文字链] 次按钮 / 主按钮 / 底部文字链
     [三按钮特例]  camera-scan.html 专用（拍照主按钮 + 相册次按钮 + 手动选型号文字链）
   ============================================================= */

.bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  width: 100%;
  /* 可选的顶部细分隔线，子类 .with-divider 启用 */
}
.bottom-actions.with-divider {
  border-top: 1px solid var(--divider);
}

/* 底部操作区内的文字链，默认居中、小字、淡色 */
.bottom-actions .btn-text {
  align-self: center;
  font-size: 13px;
  padding: 4px 0;
  font-style: italic;
}

/* chat.html 输入栏专用（不是 .bottom-actions，但遵循 safe-area 规则） */
.chat-input-bar {
  padding: 10px 12px max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--glass-border);
  background: transparent;
}

/* knowledge-card 操作栏专用 */
.kc-action-bar {
  display: flex;
  gap: 10px;
  padding: 12px 20px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
}
.kc-action-bar > * { flex: 1; }

/* =============================================================
   组件 · 卡片
   ============================================================= */

.glass-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--glass-shadow);
}

/* =============================================================
   组件 · 输入框
   ============================================================= */

.input-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 0 18px;
  height: 48px;
}
.input-pill input, .input-pill textarea {
  flex: 1;
  font-family: var(--font-body-cn);
  font-size: 14px;
  color: var(--text-primary);
}
.input-pill input::placeholder,
.input-pill textarea::placeholder {
  color: var(--text-hint);
  font-style: italic;
}

/* =============================================================
   组件 · 对话气泡
   ============================================================= */

.bubble-user {
  align-self: flex-end;
  max-width: 80%;
  margin-left: 60px;
  padding: 12px 16px;
  background: var(--text-primary);
  color: #FFFFFF;
  font-family: var(--font-body-cn);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 18px 18px 4px 18px;
}

.bubble-ai {
  align-self: flex-start;
  max-width: 80%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-family: var(--font-body-cn);
  font-size: 14px;
  line-height: 1.6;
  border-radius: 4px 18px 18px 18px;
}

.ai-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8E4DE, #D5CFC7);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;  /* 📷 */
}

.user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c48e5a 0%, #8b5a2b 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px; color: rgba(255,255,255,0.95);
  letter-spacing: 0.3px;
  flex-shrink: 0;
  border: none; padding: 0;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.user-avatar:hover { opacity: 0.88; }
.user-avatar:active { opacity: 0.75; transform: scale(0.96); }

/* =============================================================
   组件 · 参数建议表
   ============================================================= */

.param-table {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px;
}
/* Patch 38：旧 grid 版 .param-row / .param-label / .param-value / .param-reason
   已迁移到 chat.html 的 .bubble-ai 内联 hover 覆盖版，全局 grid 规则已是死代码并移除。 */

/* =============================================================
   组件 · 引用标签 & 功能支持标签
   ============================================================= */

.ref-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-en);
  font-size: 11px;
  font-style: italic;
  color: var(--text-primary);
}

.tag-supported {
  display: inline-block;
  padding: 4px 10px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-family: var(--font-body-en);
  font-size: 11px;
  font-weight: 500;
}
.tag-unsupported {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-en);
  font-size: 11px;
  font-weight: 500;
}

/* =============================================================
   组件 · 步骤指示器
   ============================================================= */

.step-dots { display: flex; gap: 6px; align-items: center; }
.step-dot  {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-hint);
  transition: all 0.25s ease;
}
.step-dot.done    { background: var(--text-primary); }
.step-dot.current {
  width: 20px;
  border-radius: 3px;
  background: var(--text-primary);
}

/* =============================================================
   组件 · 底部半屏弹窗
   v6.2 修复：position 从 fixed 改为 absolute，锚定在 .phone-frame 内
   解决桌面浏览器打开时弹窗铺满整个视口宽度的问题
   ============================================================= */

.modal-overlay {
  position: absolute; inset: 0;
  background: var(--overlay);
  display: flex; align-items: flex-end;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
.modal-sheet {
  width: 100%;
  max-height: 70%;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: slideUp 0.3s ease-out;
}
.modal-handle {
  width: 40px; height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  margin: 12px auto;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================
   组件 · 侧边栏
   v6.2 修复：position 从 fixed 改为 absolute
   ============================================================= */

.sb-overlay {
  position: absolute; inset: 0;
  background: var(--overlay);
  z-index: 200;
}
.sidebar {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 80%; max-width: 300px;
  background: rgba(245, 243, 239, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--glass-border);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.32,.72,.37,1);
  z-index: 201;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 48px);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.sidebar.show { transform: translateX(0); }
.share-panel { z-index: 301; }   /* 必须高于 sidebar */

/* =============================================================
   组件 · Toast
   v6.2 修复：position 从 fixed 改为 absolute，居中相对于 phone-frame
   ============================================================= */

.toast {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  background: var(--glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body-cn);
  font-size: 14px;
  box-shadow: var(--glass-shadow);
  z-index: 2000;
  animation: toastFade 0.3s ease-out;
  max-width: calc(100% - 48px);     /* 确保 Toast 不会超出 phone-frame 宽度 */
}
@keyframes toastFade {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* =============================================================
   组件 · 灵感卡片原文引用块（橘色唯一例外）
   ============================================================= */

.quote-block {
  padding: 14px 16px;
  background: var(--quote-bg);
  border-left: 3px solid var(--quote-bar);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-body-cn);
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-primary);
}

/* =============================================================
   组件 · 分隔线
   ============================================================= */

.divider { height: 1px; background: var(--divider); margin: 16px 0; }

/* =============================================================
   snap 容器（home.html + chat.html 共用）
   ============================================================= */

.snap-container {
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap-container::-webkit-scrollbar { display: none; }
.snap-page {
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  position: relative;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =============================================================
   响应式断点已移到本文件顶部（Patch 05 体系）
   旧的 v6.2 桶 7 多档断点已被替换为更专业的"演示态/真机态"双轨方案
   仅保留极小屏微调与弹窗安全区
   ============================================================= */

/* —— 极小屏 ≤320px（iPhone SE 1st / 小折叠展开）：缩小排版避免溢出 —— */
@media (max-width: 320px) {
  body { font-size: 13px; }
  .navbar { height: 76px; padding: 32px 12px 0; }
  .navbar-title { font-size: 16px; }
  .btn-primary, .btn-secondary { height: 44px; font-size: 15px; }
  .input-pill { height: 44px; padding: 0 14px; }
  .glass-card { padding: 12px; }
  .bubble-user, .bubble-ai { max-width: 88%; padding: 10px 12px; font-size: 13px; }
  .modal-sheet { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  /* Patch 38：旧 grid 版 .param-row / .param-value 媒体查询已移除（迁移到 .bubble-ai 内联） */
}

/* —— 横屏过短：弹窗压低 —— */
@media (max-height: 667px) {
  .modal-sheet { padding-bottom: 8px; }
}

/* =============================================================
   Patch 23 §E：backdrop-filter 兜底
   不支持磨砂玻璃的浏览器（老 Safari < 9 / 部分 iframe 沙箱）
   把所有 .glass-* / 浮层 / 气泡 改为不透明 / 高对比背景，确保可读
   ============================================================= */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-card,
  .glass-heavy,
  .input-pill {
    background: rgba(255, 255, 255, 0.92) !important;
  }
  .bubble-ai {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  .modal-sheet,
  .modal-overlay {
    background: rgba(28, 25, 22, 0.98) !important;
  }
  .sidebar {
    background: rgba(245, 237, 230, 1) !important;
  }
  /* 深色页面浮层（my-account / about / subscription / photographers 等的模态）*/
  .lm-modal-overlay,
  .agree-modal-overlay,
  .qr-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
  }
  .lm-modal,
  .agree-modal-card,
  .qr-modal {
    background: rgba(28, 25, 22, 0.98) !important;
  }
  /* 顶部状态条 / 底部 tabbar */
  .phone-tabbar {
    background: rgba(20, 17, 14, 0.98) !important;
  }
}

/* =============================================================
   全局胶囊按钮（chip / pill）规范 · Patch 16
   适用：套机镜头、附件标签、筛选 tab、技能标签、场景胶囊等
   ⚠ 选中态绝对禁用 background: white / #fff（参见文件顶部色彩底线）
   ============================================================= */
/* Patch 36 全局升级：默认 chip 即采用暖棕调，确保在浅 / 深底都能识别
   原默认（var(--glass) 半透白 + var(--text-primary) 深灰文字）在 chat.html
   的 bubble-ai（rgba(255,255,255,0.55)）上完全融成一体；现以暖棕半透为底色
   + 深棕暖橙文字，对比度大幅提高。 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(196, 142, 90, 0.12);
  border: 1px solid rgba(196, 142, 90, 0.32);
  color: rgba(140, 90, 43, 1);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
}
.chip:hover {
  background: rgba(196, 142, 90, 0.2);
  border-color: rgba(196, 142, 90, 0.5);
  color: rgba(110, 70, 30, 1);
}
.chip:active { transform: scale(0.98); }

/* 选中态：更深的暖棕 + 字色加深，明显区分于未选 */
.chip.is-selected,
.chip.selected,
.chip.active,
.chip.on,
.chip[aria-selected="true"] {
  background: rgba(196, 142, 90, 0.28);
  border-color: rgba(196, 142, 90, 0.6);
  color: rgba(110, 70, 30, 1);
  font-weight: 500;
}
.chip.is-selected:hover,
.chip.selected:hover,
.chip.active:hover,
.chip.on:hover {
  background: rgba(196, 142, 90, 0.36);
  border-color: rgba(196, 142, 90, 0.7);
}

/* 多选场景的勾选状态（带对勾图标，可选） */
.chip.is-checked::before {
  content: '';
  width: 10px; height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B5A2B' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* 添加型胶囊（虚线边框 + 加号） */
.chip.is-add {
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  color: var(--text-secondary);
}
.chip.is-add:hover {
  border-color: rgba(196, 142, 90, 0.5);
  color: rgba(140, 90, 43, 0.95);
  background: rgba(196, 142, 90, 0.05);
}

/* 尺寸变体 */
.chip-sm { padding: 5px 12px; font-size: 11px; border-radius: 14px; }
.chip-lg { padding: 10px 20px; font-size: 14px; border-radius: 22px; }

/* 深色页面下的 chip：底色变深暖棕，文字用暖橙白以保持高可读性 */
.chip-on-dark.chip,
.chip-on-dark .chip {
  background: rgba(196, 142, 90, 0.14);
  border: 0.5px solid rgba(196, 142, 90, 0.35);
  color: rgba(255, 220, 180, 0.95);
}
.chip-on-dark.chip:hover,
.chip-on-dark .chip:hover {
  background: rgba(196, 142, 90, 0.22);
  border-color: rgba(196, 142, 90, 0.55);
  color: rgba(255, 230, 200, 1);
}
.chip-on-dark.chip.is-selected,
.chip-on-dark .chip.is-selected,
.chip-on-dark.chip.on,
.chip-on-dark .chip.on {
  background: rgba(196, 142, 90, 0.32);
  border-color: rgba(196, 142, 90, 0.65);
  color: rgba(255, 230, 200, 1);
  font-weight: 500;
}

/* =============================================================
   深色模式（自动切换）
   ============================================================= */

/* =============================================================
   Patch 54 · 白底按钮可读性全局修复
   原则：dark 页上的主按钮一律白底 + 深棕黑字 + 600 字重
   暖棕渐变主按钮（.action-btn-primary / .save-btn-primary / .hero-scan-cta）保持白字
   ============================================================= */
.btn-primary,
.primary-btn,
.cta-primary,
.confirm-btn,
.next-btn,
.submit-btn,
.send-to-ai,
.action-primary,
.wechat-btn-primary,
.phone-login-btn,
.reg-submit-btn,
button[class*="-primary"]:not([class*="action-btn-primary"]):not([class*="agree-modal-btn-primary"]) {
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(20, 17, 14, 1) !important;
  font-weight: 600 !important;
}

/* 白底按钮内的所有子元素文字色继承父级深棕黑 */
.btn-primary *,
.primary-btn *,
.cta-primary *,
.confirm-btn *,
.next-btn *,
.submit-btn *,
.send-to-ai *,
.wechat-btn-primary *,
.phone-login-btn *,
.reg-submit-btn * {
  color: inherit !important;
}

/* 暖棕渐变主按钮兜底白字（这些按钮自身用 linear-gradient 暖棕，不应被白底规则覆盖） */
.action-btn-primary,
.save-btn-primary,
.hero-scan-cta {
  background: linear-gradient(135deg, #c48e5a 0%, #8b5a2b 100%) !important;
  color: rgba(255, 255, 255, 1) !important;
}
.action-btn-primary *,
.save-btn-primary *,
.hero-scan-cta * {
  color: rgba(255, 255, 255, 1) !important;
}