/* ==========================================================================
   KKMatch V6.7.2 — 双端布局层 (G22 PC + Mobile)
   --------------------------------------------------------------------------
   设计原则（订单 G22-02 / G22-03）：
     PC  (>=1024px) 高效任务工作区：主交互区保持可读行宽 + 上下文/反馈侧轨，
                    不再把内容压成 560px 手机列（1920 下原仅占 29% 视口）
     Mobile(<=430px) 沉浸式单任务：单列、安全区、零横向溢出、键盘可避让

   约束：
     - 只做布局与溢出修复，不改信息架构、不改文案、不加假控件
     - 所有颜色/半径/安全区取自 shell.css 既有 Design Tokens（不另造一套）
     - 独立文件而非改 shell.css：shell.css 已被 immutable 长缓存，改它需全站
       bump ?v=，风险面过大；本文件按页显式引用，可灰度、可秒回滚
   ========================================================================== */

/* ---------- 1. 窄屏横向溢出修复（DEF-202 / DEF-203）---------- */

/* 百分比/数值输出在窄栅格内不再撑破列宽 */
output { min-width: 0; }

/* 首页径向轮盘：8 个 .seg 的半径与半宽改由 CSS 变量驱动（原为内联固定
   -128px / -60px，320px 视口下右侧溢出 28px）。此处按视口收缩，保持设计意图。 */
.wheel { --seg-r: -128px; --seg-x: -60px; }

@media (max-width: 430px) {
  .wheel { --seg-r: -112px; --seg-x: -54px; width: min(92vw, 330px); }
  /* 注意：shell.css 的基线是 `.wheel .seg`（0,2,0），此处必须同形选择器才压得住 */
  .wheel .seg { width: 108px; }

  /* DEF-204 滑块行：页面内联 `grid-template-columns:90px 1fr 38px`（≤760px 分支）
     + gap 12px 固定占 152px，320px 视口下 1fr 被 input 的 min-content 顶到 133px
     ⇒ 整行 285px > 容器 244px，output 右缘溢出 2.8px。
     `output{min-width:0}` 无效：output 在 grid 轨道内仍受 min-content 约束。
     改为「标签独占一行 + 滑块与数值两列」，滑块列 minmax(0,1fr) 可自由收缩。 */
  .scene-range {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px 10px;
    align-items: center;
  }
  .scene-range > label { grid-column: 1 / -1; font-size: 12.5px; }
  .scene-range > input[type="range"] { min-width: 0; width: 100%; }
  .scene-range > output { justify-self: end; }
}

@media (max-width: 360px) {
  .wheel { --seg-r: -80px; --seg-x: -44px; width: min(94vw, 290px); }
  .wheel .seg { width: 96px; }
  .wheel .seg label { font-size: 9.5px; }

  /* 320–360：两列卡片每列仅 ~135px，正文行内 tag+时长挤爆 → 改单列（移动端单任务原则） */
  .home-grid .row2 { grid-template-columns: 1fr; }

  /* 顶栏：品牌 + 语言 + 历史 + 帮助 四个玻璃元素在 320px 下挤出视口 14px */
  .topbar     { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .glassbtn   { width: 34px; height: 34px; }
  .glassbtn svg { width: 16px; height: 16px; }
}

/* ---------- 2. PC 内容型路由：放宽可读行宽 ---------- */
/* 行宽上限 ~880px 而非全宽：长文阅读舒适度优先，同时消除「手机页拉宽」观感 */
@media (min-width: 1024px) {
  body[data-route-id="home"] .page,
  body[data-route-id="home"] .topbar { max-width: 880px; }
  body[data-route-id="home"] .wheel { width: min(44vw, 420px); }
  body[data-route-id="home"] .home-grid .row2 { grid-template-columns: 1.4fr 1fr; }

  body[data-route-id="os/me"] .page,
  body[data-route-id="os/me"] .topbar,
  body[data-route-id="os/memory"] .page,
  body[data-route-id="os/connections"] .page,
  body[data-route-id="os/privacy"] .page { max-width: 960px; }

  body[data-route-id="ai/history"] .page,
  body[data-route-id="ai/history"] .topbar,
  body[data-route-id="kk"] .page,
  body[data-route-id="kk"] .topbar { max-width: 880px; }

  /* Ask KK 在 1024–1279 先加宽单列（侧轨从 1280 起出现） */
  body[data-route-id="kkai"] .page,
  body[data-route-id="kkai"] .topbar { max-width: 760px; }
}

/* ---------- 3. Ask KK 任务工作区（>=1280px，主交互 + 上下文侧轨）---------- */
@media (min-width: 1280px) {
  body[data-route-id="kkai"] .topbar,
  body[data-route-id="kkai"] .page {
    max-width: 780px;
    margin-left: auto;
    margin-right: 372px;
  }
  body[data-route-id="kkai"] .page { padding-bottom: 44px; }
  body[data-route-id="kkai"] .chat { min-height: 54vh; }
  body[data-route-id="kkai"] .chatinput { bottom: calc(76px + var(--sab)); }
  body[data-route-id="kkai"] .ws-rail { display: flex; }
}

/* 侧轨：真实数据（任务列表 / 登录态），无数据时给诚实空态，不放占位假卡片 */
.ws-rail {
  display: none;
  position: fixed;
  right: 24px;
  top: 104px;
  bottom: 92px;
  width: 328px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 20px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-lg);
  background: rgba(18, 26, 42, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(5, 3, 18, .45);
}

.ws-rail h2 {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.ws-rail .ws-block { display: flex; flex-direction: column; gap: 8px; }

.ws-rail .ws-empty {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
}

.ws-rail a.ws-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.ws-rail a.ws-link:hover { text-decoration: underline; }

.ws-rail .ws-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(26, 37, 56, .55);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ws-rail .ws-item:hover {
  border-color: rgba(112, 224, 196, .45);
  background: rgba(26, 37, 56, .85);
}
.ws-rail .ws-item b { display: block; font-size: 13px; font-weight: 600; }
.ws-rail .ws-item span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--dim);
}

/* ---------- 4. 移动端专项：安全区与键盘避让 ---------- */
/* 已由 shell.css 提供 --sat/--sab；这里补齐输入区在软键盘弹出时的可操作性
   （visualViewport 高度变化由页面脚本加 .kb-open 类，见 ai/index.html） */
@media (max-width: 640px) {
  body.kb-open .bottnav { display: none; }        /* 键盘弹出时让位给输入区 */
  body.kb-open .chatinput { bottom: calc(8px + var(--sab)); }
  .chatinput { scroll-margin-bottom: 96px; }
}