/* ==========================================================================
   responsive.css · 四档断点（规格见 02-design-tokens.md §4）
   基准 = ≥1280px（桌面宽屏，双栏）
   1024–1279px 桌面/横屏平板 · 侧栏收窄 300px
   768–1023px  竖屏平板 · 单栏 + 左侧抽屉（遮罩）
   ≤767px      手机 · 单栏纵向 + 简历 Bottom Sheet（88dvh）
   ≤430px      小屏手机微调
   ========================================================================== */

/* ==========================================================================
   ≥1280px（基准，无需覆写）：
   内容区 1240px 居中 / 侧栏 340px / 对话内容 760px / 内边距 32px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1024–1279px · 双栏（侧栏收窄）
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --sidebar-w: 300px;
    --chat-max: 680px;
    --layout-max: 100%;
  }
  .chat-inner { padding: var(--space-24); }
}

/* --------------------------------------------------------------------------
   768–1023px · 单栏 + 抽屉
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --chat-max: 680px; }

  /* 顶部条出现：左侧「简历」图标按钮唤出抽屉 */
  .topbar { display: flex; }
  .topbar-resume-btn { display: inline-flex; }

  /* 侧栏 → 固定抽屉 */
  .resume-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 360px;
    max-width: 88vw;
    z-index: var(--z-drawer);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transform: translateX(-100%);
    transition: transform var(--dur-panel) var(--ease-out);
    will-change: transform;
  }
  .resume-panel.is-open { transform: translateX(0); }

  .chat-inner { padding: var(--space-24); }
  .card { padding: var(--space-20); }
}

/* --------------------------------------------------------------------------
   ≤767px · 手机：56px 折叠名片条 + 全屏对话 + sticky 输入框 + Bottom Sheet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --chat-max: 100%;
    --text-msg: .9375rem;        /* 15px 对话消息 */
    --composer-h-min: 44px;
    --layout-max: 100%;
    /* 底部输入区占用的高度：chips 行(44+8) + 输入框(44+8) + composer-bottom(12)
       用变量拼出来而不是写魔法数字，触摸目标(--tap-min)一改这里自动跟着变 */
    --composer-zone: calc(
      var(--tap-min) + var(--composer-h-min) + var(--space-8) * 2 + var(--space-12)
    );
  }

  /* --- 顶部折叠名片条 --- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--header-h-mobile);
    padding-left: var(--space-12);
    padding-right: var(--space-4);
  }
  .topbar-resume-btn { display: none; }
  .topbar-card { display: flex; }
  .topbar-card .icon { color: var(--color-text-secondary); }

  /* --- 对话区 --- */
  .chat-inner { padding: var(--space-16) var(--space-16) var(--space-24); }
  /* 消息间距见 components.css（统一 20px/8px，此处不再覆写，避免与 flex gap 叠加） */
  .bubble--ai, .bubble--user { max-width: 88%; }
  .bubble--ai { padding: var(--space-16); padding-left: 18px; }
  .msg-actions { opacity: 1; }      /* 移动常驻显示 */

  /* --- 空态：2 列卡片网格 --- */
  .question-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .question-card { min-height: 64px; padding: var(--space-12); }
  .question-card .q-text { font-size: var(--text-sm); }
  .empty-state { padding: var(--space-16) 0 var(--space-8); }
  .empty-title { font-size: var(--text-lg); }

  /* --- 工具条：三等分 44px 触摸目标 --- */
  .chat-toolbar { padding: 0 var(--space-4); justify-content: stretch; }
  .chat-toolbar .btn-quiet {
    flex: 1;
    height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    border-radius: var(--radius-sm);
  }

  /* --- 输入区：sticky 底部 + safe-area --- */
  .composer-shell { padding: 0 var(--space-16); }
  .composer { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12); }
  .composer-textarea { font-size: 16px !important; }   /* 防 iOS 缩放 */
  .input { font-size: 16px !important; }
  .send-btn { width: var(--tap-min); height: var(--tap-min); }
  .composer-bottom { padding-bottom: calc(var(--space-12) + var(--safe-bottom)); }

  /* --- 简历 Bottom Sheet：88dvh 从底部滑出 --- */
  .resume-panel {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    height: 88dvh;
    max-height: 88dvh;
    border-right: none;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-float);
    transform: translateY(100%);
    transition: transform var(--dur-panel) var(--ease-out);
    padding-top: var(--space-4);
  }
  .resume-panel.is-open { transform: translateY(0); }

  /* 把手 + 关闭按钮（把手常驻顶部，Tab 吸顶在其下方） */
  .panel-handle {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .panel-close { display: inline-flex; position: absolute; right: var(--space-4); top: var(--space-2); }

  /* Sheet 内：顶栏下划线 Tab */
  .tabs-wrap { padding: 0; }
  .resume-tabs { margin: 0 var(--space-16); border-radius: var(--radius-md); }
  .resume-tabs--underline {
    margin: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    position: sticky;
    top: 20px;
    z-index: 2;
    background: var(--color-surface);
  }

  .brand-card { padding: var(--space-16); }
  .brand-top { gap: var(--space-12); }
  .avatar { width: 64px; height: 64px; }
  .wordmark { font-size: var(--text-xl); }
  .panel-content { padding: var(--space-16) var(--space-16) calc(var(--space-48) + var(--safe-bottom)); }
  .brand-actions { padding: var(--space-8) var(--space-16) var(--space-24); }
  .brand-actions .btn { height: var(--tap-min); }

  /* --- Toast 移到输入框上方 --- */
  .toast-host {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--composer-zone, 116px) + var(--safe-bottom));
    align-items: center;
  }

  /* --- Gate 卡片 --- */
  .gate { padding: var(--space-16); align-items: flex-start; padding-top: var(--space-64); }
  .gate-card { padding: var(--space-24); }
}

/* --------------------------------------------------------------------------
   ≤430px · 小屏手机微调
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .question-grid { gap: var(--space-8); }
  .metric-grid { gap: 6px; }
  .metric { padding: 10px; }
  .metric-value { font-size: 18px; }
  .metric-label { font-size: var(--text-2xs); }   /* 11px：§4.4 字号阶梯最小值，不得再小 */
  .gate-card { padding: var(--space-24); }
  .chat-inner { padding: var(--space-12) var(--space-12) var(--space-24); }
  .chips-row { padding: 0 var(--space-12) var(--space-8); }
  .composer-shell { padding: 0 var(--space-12); }
  .empty-title { font-size: var(--text-lg); }
}

/* --------------------------------------------------------------------------
   触摸设备：hover 态只在有鼠标时出现（§7.6 触摸反馈 120ms）
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .clickable:hover,
  .question-card:hover,
  .chip:hover,
  .chip-follow:hover,
  .btn-secondary:hover,
  .brand-link:hover { background-color: transparent; }
  .question-card:hover,
  .chip:hover,
  .chip-follow:hover { border-color: var(--color-border-strong); }
  .question-card:active,
  .chip:active,
  .chip-follow:active { background: var(--color-fill-active); }
}

/* --------------------------------------------------------------------------
   触摸设备：把 <44px 的点击目标补到 44px（§4.6 / 需求 §7.3 触摸目标 ≥44×44）
   用 pointer: coarse 而不是 max-width:767 —— 竖屏平板同样命中，覆盖面更全。
   桌面（有鼠标）保持设计稿的紧凑尺寸，不牺牲信息密度。
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* 胶囊 / 小按钮 / 名片链接：单行为主，直接长到 44px */
  .chip,
  .btn-sm,
  .btn-quiet,
  .brand-link {
    height: var(--tap-min);
    padding: 0 var(--space-16);
  }

  /* 追问 chip 允许换行（white-space: normal），用 min-height 避免两行被裁切 */
  .chip-follow {
    min-height: var(--tap-min);
    height: auto;
    padding: var(--space-8) var(--space-16);
  }

  /* 图标按钮：40px → 44px；复制按钮 28px → 44px
     （移动下 .msg-actions 常驻显示，28px 长期暴露给手指，影响最大） */
  .icon-btn,
  .icon-btn-xs,
  .send-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    flex: none;
  }

  /* 来源标签是纯文字微标签，长到 44px 会压垮气泡；取次级目标 32px + 加大内边距 */
  .source-tag {
    min-height: 32px;
    padding: var(--space-8) var(--space-12);
  }
  /* .panel-close 自带 .icon-btn，已被上面覆盖，无需重复 */
}

/* --------------------------------------------------------------------------
   桌面窄高屏：矮屏时抽屉/Bottom Sheet 内容仍可完整滚动
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-height: 640px) {
  .brand-card { padding: var(--space-16) var(--space-24) var(--space-8); }
  .avatar { width: 64px; height: 64px; }
  .wordmark { font-size: var(--text-xl); }
}