:root{
  --bg:#f6f3ec; --card:#fffdf8; --ink:#2b2620; --sub:#6b6358;
  --line:#e2dbcd; --accent:#8a6d4b; --ok:#4a7c59; --dan:#b03a2e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;line-height:1.78}
header{background:var(--card);border-bottom:1px solid var(--line);padding:12px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:9}
h1{margin:0;font-size:20px;letter-spacing:2px;font-weight:600}
.sub{color:var(--sub);font-size:13px}
.tabs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tabs button{background:transparent;color:var(--sub);border:0;padding:7px 18px;
  font-size:14px;cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--accent);color:#fff}
.progress{flex:1;min-width:150px}
.bar{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);transition:width .3s}
.meta{font-size:12px;color:var(--sub);margin-top:3px}
main{max-width:920px;margin:0 auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:15px;color:var(--accent)}
label{display:inline-flex;align-items:center;gap:6px;margin:6px 14px 6px 0;font-size:14px}
input,select,textarea{padding:7px 10px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-family:inherit;font-size:14px;color:var(--ink)}
button.go{background:var(--accent);color:#fff;border:0;border-radius:6px;
  padding:9px 20px;font-family:inherit;font-size:14px;cursor:pointer}
button.go:hover{filter:brightness(1.08)}
button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);
  border-radius:6px;padding:8px 16px;font-family:inherit;font-size:14px;cursor:pointer}
.msg{margin:0 0 14px;padding:14px 16px;border-radius:10px;overflow-x:auto}
.msg.bot{background:var(--card);border:1px solid var(--line)}
.msg.me{background:#efe7d8;border:1px solid #ded1b9;margin-left:56px}
.msg h4{margin:0 0 8px;font-size:14px;color:var(--accent)}
.msg pre{white-space:pre-wrap;word-break:break-word;margin:0;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7}
.composer{display:flex;gap:10px;margin-top:8px}
.composer textarea,.composer input{flex:1;padding:11px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;
  min-height:62px;background:var(--card)}
.tip{font-size:12px;color:var(--sub);margin-top:8px}
.badge{font-size:11px;padding:2px 9px;border-radius:10px;background:#eee6d6;color:var(--sub)}
.kindrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.kind{padding:6px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;
  cursor:pointer;font-size:13px;font-family:inherit;color:var(--ink)}
.kind.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.chip{padding:3px 10px;background:#efe7d8;border-radius:12px;font-size:12px;cursor:pointer}
.chip:hover{background:#e3d6bd}
.hidden{display:none}
.loading{text-align:center;padding:26px;color:var(--sub)}
footer{max-width:920px;margin:0 auto;padding:8px 18px 30px;font-size:12px;color:var(--sub)}
footer a{color:var(--accent)}
/* ============================================================
   移动端适配
   设计约束：
   1) 所有可输入元素字号 >=16px，否则 iOS Safari 聚焦时会自动放大页面
   2) 可点区域 >=44px（苹果 HIG 最小触摸目标）
   3) 尊重 iPhone 刘海与底部 home 条（env(safe-area-inset-*））
   4) 禁用横屏自动放大字号
   ============================================================ */

/* --- 平板 / 小屏笔记本 --- */
@media(max-width:900px){
  main{padding:14px}
  .card{padding:16px}
  .msg.me{margin-left:40px}
}

/* --- 手机主适配 --- */
@media(max-width:640px){
  /* 禁止横屏时浏览器自动放大字号 */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

  body{line-height:1.75;overflow-x:hidden}

  /* header：手机上改为两行紧凑布局，避免元素挤成一团 */
  header{
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    gap:8px;flex-wrap:wrap;
    position:sticky;top:0;
  }
  h1{font-size:17px;letter-spacing:1px}
  /* 副标题与徽标并排，不再各占一行 —— header 是 sticky 的，
     每高一行就等于每次滚动都多遮一屏内容 */
  .sub{order:5;font-size:11px;line-height:1.4;flex:1;min-width:0}
  .badge{order:6;font-size:11px;padding:2px 8px;flex:none}

  /* 标签页：撑满一行，方便手指点 */
  .tabs{order:2;flex:1;min-width:0}
  .tabs button{
    flex:1;text-align:center;
    padding:11px 6px;      /* >=44px 触摸高度 */
    font-size:15px;
  }

  /* 进度条独占一行，放在标签页下方 */
  .progress{order:4;flex-basis:100%;min-width:0}
  .bar{height:6px}
  .meta{font-size:11px;margin-top:2px}

  main{padding:12px}
  .card{padding:14px;border-radius:12px;margin-bottom:12px}
  .card h2{font-size:15px;line-height:1.6}

  /* 输入控件：字号必须 >=16px，否则 iOS 聚焦时页面被放大 */
  label{font-size:15px;margin:8px 12px 8px 0}
  input,select,textarea{font-size:16px;padding:11px 10px;width:100%!important}
  select,input[type=number]{width:auto!important;min-width:88px}

  button.go,.ghost{font-size:16px;padding:12px 22px;min-height:46px}
  button.go{width:100%;margin-bottom:8px}

  /* 消息气泡：手机上左右满宽，可读性优先 */
  .msg{padding:12px 13px;border-radius:10px;margin-bottom:12px}
  .msg.me{margin-left:0;max-width:88%;align-self:flex-end}
  .msg.bot{max-width:100%}
  .msg h4{font-size:15px}
  .msg pre{font-size:14px;line-height:1.72}

  /* 输入区：手机上改为纵向堆叠，按钮独占整行 */
  .composer{flex-direction:column;gap:8px}
  .composer textarea,.composer input{min-height:80px;font-size:16px}
  .composer button{width:100%;min-height:46px;font-size:16px}

  .kindrow{gap:7px}
  .kind{padding:9px 14px;font-size:14px;min-height:38px;display:inline-flex;align-items:center}
  .chips{gap:6px}
  .chip{padding:6px 11px;font-size:13px;min-height:32px;display:inline-flex;align-items:center}
  .tip{font-size:12.5px;line-height:1.6}
  .loading{padding:30px 14px}

  footer{
    padding:8px 14px calc(24px + env(safe-area-inset-bottom));
    font-size:12px;line-height:1.7;
  }
}

/* --- 小屏手机（如 SE） --- */
@media(max-width:380px){
  h1{font-size:16px}
  .tabs button{font-size:14px;padding:11px 4px}
  .kind{padding:8px 11px;font-size:13px}
  .card{padding:12px}
  .msg pre{font-size:13.5px}
}

/* --- 横屏手机：高度紧张，压缩纵向留白 --- */
@media(orientation:landscape) and (max-height:500px){
  header{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
  h1{font-size:16px}
  .sub{display:none}
  .composer textarea,.composer input{min-height:52px}
}