/* ==========================================================================
   Claudai — warm paper, ink text, terracotta accent.
   ========================================================================== */

:root {
  --bg:            #FAF9F5;
  --bg-side:       #F0EEE6;
  --bg-raised:     #FFFFFF;
  --ink:           #1F1E1D;
  --ink-soft:      #3D3D3A;
  --ink-muted:     #6B6A66;
  --ink-faint:     #96958F;
  --line:          #E3E0D6;
  --line-strong:   #D3CFC2;
  --accent:        #D97757;
  --accent-deep:   #C2603D;
  --accent-wash:   #F7EDE7;
  --ok:            #4A7C59;
  --warn:          #B07437;
  --err:           #B4483A;

  --radius:        14px;
  --radius-lg:     22px;
  --shadow-sm:     0 1px 2px rgba(31,30,29,.05);
  --shadow:        0 4px 16px rgba(31,30,29,.07);
  --shadow-lg:     0 12px 40px rgba(31,30,29,.12);

  --serif:  "Georgia", "Times New Roman", "Songti SC", "SimSun", serif;
  --sans:   "Segoe UI", -apple-system, "Helvetica Neue", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mono:   "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

  --sidebar-w: 268px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat our own layout display rules.
   Browsers implement it as `[hidden] { display: none }` in the UA sheet, which
   any class of ours that sets `display` overrides — and several do
   (.modal-backdrop, .hero, .thread are all flex). Without this, the login
   modal stayed on screen after a successful login. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────── shell ─────────────────────────────── */

.shell { display: flex; height: 100dvh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 14px 12px 10px;
  transition: margin-left .22s ease;
}
.sidebar.collapsed { margin-left: calc(var(--sidebar-w) * -1); }

.sidebar-top { display: flex; flex-direction: column; gap: 10px; }

.brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 2px; }
.brand-mark { width: 24px; height: 24px; color: var(--accent); flex: none; }
.brand-name { font-family: var(--serif); font-size: 17px; letter-spacing: .2px; }

.new-task {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}
.new-task:hover { background: #fff; border-color: var(--accent); }
.new-task svg { width: 16px; height: 16px; color: var(--accent); }

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  font-size: 14px; color: var(--ink-soft);
  transition: background .15s;
}
.nav-item:hover { background: rgba(0,0,0,.045); }
.nav-item.active { background: rgba(0,0,0,.06); color: var(--ink); }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .75; }

.sidebar-recents { flex: 1; overflow-y: auto; margin-top: 18px; }
.recents-label {
  font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 10px 7px;
}
.recent-item {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: background .15s;
}
.recent-item:hover { background: rgba(0,0,0,.045); }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.balance-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: var(--bg-raised); border: 1px solid var(--line);
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.balance-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

/* The quota the tasks actually consume. Shown next to the money so the two are
   never confused: money is what you paid, TOKEN is what is left to spend. */
.token-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: var(--bg-raised); border: 1px solid var(--line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.token-chip .token-label {
  font-size: 10.5px; letter-spacing: .6px; color: var(--ink-faint);
}
.token-chip.low { border-color: #E8C9C3; }
.token-chip.low #tokenValue { color: var(--err); }
.balance-chip.low .dot { background: var(--warn); }
.balance-chip.empty .dot { background: var(--err); }

.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 0; font-size: 13px; }
.account-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 12.5px; padding: 3px 5px; border-radius: 6px; }
.account button:hover { color: var(--ink); background: rgba(0,0,0,.05); }

/* ─────────────────────────────── main ─────────────────────────────── */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

.sidebar-toggle {
  position: absolute; top: 12px; left: 12px; z-index: 20;
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-muted); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.sidebar-toggle:hover { background: rgba(0,0,0,.05); }
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar.collapsed ~ .main .sidebar-toggle { display: flex; }

.hero {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px 24px 0;
}
.hero-inner { text-align: center; max-width: 720px; margin-bottom: 5vh; }
.hero-mark { color: var(--accent); margin-bottom: 20px; }
.hero-mark svg { width: 52px; height: 52px; }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.15; margin: 0 0 12px; letter-spacing: -.4px;
}
.hero-sub { color: var(--ink-muted); font-size: 16px; margin: 0; line-height: 1.7; }

.hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 11px; margin-top: 34px; text-align: left;
}
@media (max-width: 720px) {
  .hero-cards { grid-template-columns: 1fr; }
}
.hero-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px; border-radius: 13px;
  background: var(--bg-raised); border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hero-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.hero-card-kicker { font-size: 11.5px; letter-spacing: .5px; color: var(--accent-deep); }
.hero-card strong { font-size: 15px; }
.hero-card span:last-child { font-size: 13px; color: var(--ink-muted); line-height: 1.55; }

/* ─────────────────────────── mode switch ─────────────────────────── */

.mode-bar {
  max-width: 760px; margin: 0 auto 10px;
  display: flex; gap: 7px;
}

/**
 * Capability level. Shares the mode chips' shape because it is the same kind of
 * choice, but is drawn lighter so it reads as a secondary setting rather than
 * competing with the primary one.
 */
.tier-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  max-width: 760px; margin: 0 auto 10px; padding: 0 2px;
}
.tier-label { font-size: 12.5px; color: var(--ink-faint); flex: none; }
.tier-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-chip {
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-size: 13px; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line);
  transition: border-color .15s, color .15s, background .15s;
}
.tier-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.tier-chip.active {
  border-color: var(--accent); color: var(--accent-deep);
  background: var(--accent-wash); font-weight: 600;
}
.tier-hint { font-size: 12px; color: var(--ink-faint); flex: 1 1 auto; min-width: 0; }
.mode-chip {
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-muted);
  background: transparent; border: 1px solid var(--line-strong);
  transition: background .15s, color .15s, border-color .15s;
}
.mode-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.mode-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(217,119,87,.24);
}

/* task mode gets a warmer frame so the cost difference is visible */
.composer.agent-mode { border-color: var(--accent); }

/* ────────────────────────────── thread ────────────────────────────── */

.thread {
  flex: 1; overflow-y: auto;
  padding: 68px 24px 24px;
  scroll-behavior: smooth;
}
.thread-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

.turn { display: flex; flex-direction: column; gap: 10px; }

.turn-user { align-items: flex-end; }
.bubble-user {
  background: var(--bg-side);
  border: 1px solid var(--line);
  border-radius: 18px 18px 4px 18px;
  padding: 11px 16px; max-width: 78%;
  white-space: pre-wrap; word-break: break-word;
}

.turn-bot { align-items: flex-start; }
.bot-head { display: flex; align-items: center; gap: 9px; color: var(--ink-muted); font-size: 13px; }
.bot-avatar { width: 22px; height: 22px; color: var(--accent); flex: none; }
.bot-body { padding-left: 31px; width: 100%; }

.stream-line {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--ink-muted); font-size: 14px; min-height: 22px;
}
.stream-stage { color: var(--ink-soft); }
.spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .8s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }

/* result card */

.result {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
.result-title { font-family: var(--serif); font-size: 20px; margin: 0 0 4px; }
.result-thesis { color: var(--ink-muted); font-size: 14px; margin: 0 0 16px; }

/* plain chat reply */
.chat-text { white-space: pre-wrap; word-break: break-word; line-height: 1.72; }

/* transient confirmation */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 11px; font-size: 13.5px;
  box-shadow: var(--shadow-lg); z-index: 200;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.result video { width: 100%; border-radius: 11px; background: #050510; display: block; }

.specs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.spec {
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: var(--bg-side); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 9px; color: var(--ink-soft);
}

.downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; font-size: 13.5px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: background .15s;
}
.dl:hover { background: var(--accent-deep); }
.dl.ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.dl.ghost:hover { background: var(--bg-side); }
.dl svg { width: 15px; height: 15px; }

.billing {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.billing b { color: var(--ink-soft); font-weight: 600; }

.notice {
  padding: 13px 16px; border-radius: 11px; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg-raised);
}
.notice.error { border-color: #E8C9C3; background: #FCF2F0; color: var(--err); }

/* ───────────────────────────── composer ───────────────────────────── */

.composer-wrap { padding: 12px 24px 20px; background: linear-gradient(to top, var(--bg) 62%, transparent); }
.composer {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 15px 15px 11px;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 6px 26px rgba(217,119,87,.14); }

.composer textarea {
  width: 100%; border: 0; outline: 0; resize: none;
  background: transparent; font-size: 16px; line-height: 1.55;
  max-height: 210px; padding: 0 3px;
}
.composer textarea::placeholder { color: var(--ink-faint); }

.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.composer-left { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--bg-side); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.recording { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.hint { font-size: 12.5px; color: var(--ink-faint); }

.send {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 0; background: var(--accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.send:disabled { background: var(--line-strong); cursor: not-allowed; }
.send:not(:disabled):hover { background: var(--accent-deep); }
.send svg { width: 18px; height: 18px; }

.composer-note { max-width: 760px; margin: 9px auto 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.composer-note strong { color: var(--ink-muted); font-weight: 600; }

/* ─────────────────────────────── modal ─────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31,30,29,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; backdrop-filter: blur(3px);
}
.modal {
  background: var(--bg-raised); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 32px;
  width: 100%; max-width: 404px; text-align: center;
}
.modal-mark { margin-bottom: 14px; }
.modal-title { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 0 0 7px; }
.modal-sub { color: var(--ink-muted); font-size: 14px; margin: 0 0 22px; }
.modal-sub strong { color: var(--accent); font-weight: 600; }

.field { display: block; text-align: left; margin-bottom: 13px; }
.field span { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg); outline: 0; transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); background: #fff; }

.form-error { color: var(--err); font-size: 13px; margin: 0 0 12px; text-align: left; }

.primary-btn {
  width: 100%; padding: 12px; border: 0; border-radius: 11px;
  background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
  transition: background .15s;
}
.primary-btn:hover { background: var(--accent-deep); }
.primary-btn:disabled { background: var(--line-strong); cursor: not-allowed; }

.modal-foot { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 3px; font-size: 13.5px; }
.link-btn:hover { text-decoration: underline; }

/* ──────────────────────── sub pages (examples/skills/wallet) ───────────── */

.page { flex: 1; overflow-y: auto; }
.page-inner { max-width: 880px; margin: 0 auto; padding: 58px 24px 96px; }
.page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.6vw, 36px); margin: 0 0 10px; }
.page-lede { color: var(--ink-muted); font-size: 16px; margin: 0 0 34px; max-width: 62ch; }

.section-title {
  font-family: var(--serif); font-weight: 400; font-size: 21px;
  margin: 40px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.section-title:first-of-type { margin-top: 0; }
/* A lede or an explanation paragraph often sits directly above a section
   heading; without this the heading collides with it. */
.page-lede + .recipe-why + .section-title,
.recipe-why + .section-title { margin-top: 44px; }

.recipe {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.recipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.recipe-name { font-size: 16.5px; font-weight: 600; margin: 0; }
.recipe-use { color: var(--ink-muted); font-size: 13.5px; }
.recipe-prompt {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  background: var(--bg-side); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 13px 15px; margin: 14px 0 0;
  white-space: pre-wrap; word-break: break-word;
}

/* prompt block with its copy affordance pinned top-right */
.prompt-wrap { position: relative; margin: 14px 0; }
.prompt-wrap .recipe-prompt { margin: 0; padding-right: 88px; }

.copy-btn {
  position: absolute; top: 9px; right: 9px;
  font-size: 12.5px; padding: 4px 11px; border-radius: 7px;
  background: var(--bg-raised); color: var(--ink-soft);
  border: 1px solid var(--line-strong); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color: #fff; }
.recipe-why { font-size: 14px; color: var(--ink-soft); margin: 0 0 4px; }
.recipe-why b { color: var(--ink); }
.recipe video { width: 100%; border-radius: 10px; background: #050510; margin-top: 14px; display: block; }
.recipe-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.tag {
  display: inline-block; font-size: 11.5px; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-deep); border: 1px solid #EFD9CE;
}
.tag.muted { background: var(--bg-side); color: var(--ink-muted); border-color: var(--line); }
.tag.ok { background: #EBF2EC; color: var(--ok); border-color: #D5E4D9; }

.skill-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.skill-name { font-weight: 600; font-size: 15px; font-family: var(--mono); }
.skill-desc { color: var(--ink-muted); font-size: 13.5px; grid-column: 1; }
.skill-meta { color: var(--ink-faint); font-size: 12px; grid-column: 1; font-variant-numeric: tabular-nums; }
.skill-status { grid-row: 1 / 4; grid-column: 2; align-self: start; }

.empty-note {
  padding: 26px; text-align: center; color: var(--ink-faint); font-size: 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}

table.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ledger th { text-align: left; color: var(--ink-faint); font-weight: 500; font-size: 12px; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
table.ledger td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.ledger td.num { text-align: right; }
.amount-in { color: var(--ok); }
.amount-out { color: var(--ink-soft); }

.topup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0 10px; }
.topup-card {
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 18px 14px;
  background: var(--bg-raised); cursor: pointer; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.topup-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.topup-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.topup-amount { font-family: var(--serif); font-size: 24px; }
.topup-credits { color: var(--ink-muted); font-size: 13px; margin-top: 3px; }

/* ────────────────────────────── responsive ────────────────────────────── */

@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 60; height: 100dvh; box-shadow: var(--shadow-lg); }
  .sidebar.collapsed { margin-left: calc(var(--sidebar-w) * -1); }
  .sidebar-toggle { display: flex; }

  /**
   * Tap-anywhere scrim behind the open sidebar.
   *
   * This is a real element in the DOM, not a pseudo-element. A `.sidebar::after`
   * version looked identical but did not receive touches on a phone, so the only
   * way out of the menu was the hamburger — which the open menu covers.
   *
   * z-index 59 sits below the sidebar (60) and below the toggle (61), so the
   * panel stays interactive and the button stays reachable.
   */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(20, 16, 12, .32);
    /* Taps are handled in JS; this only stops them reaching the page behind. */
    touch-action: none;
  }
  .nav-scrim[hidden] { display: none; }

  /* The toggle must stay above both the scrim and the panel, or the only control
     that closes the sidebar becomes unreachable the moment it opens.

     Height is pinned here on purpose. Switching `position` from absolute to
     relative made the button a flex item of `.main`, and the flex layout sized
     it to its content — 22px tall instead of 44. An explicitly sized box is the
     fix; `position:absolute` was doing this implicitly before. */
  .sidebar-toggle {
    position: relative;
    z-index: 61;
    width: 44px;
    height: 44px;
    flex: none;
    align-self: flex-start;
  }

  .thread { padding: 60px 16px 16px; }
  .composer-wrap { padding: 10px 14px 16px; }
  .page-inner { padding: 56px 18px 80px; }
  .bubble-user { max-width: 90%; }
}


/* ── phone verification ─────────────────────────────────────────────────── */
/* These rows sit inside <label class="field">, whose rules (.field span is a
   block with a bottom margin, .field input is full width) would stack the
   button under the input and stretch it across the row. The selectors below are
   scoped to .captcha-row so they outrank .field rather than fighting it. */
#phoneBlock .captcha-row {
  display: flex; align-items: stretch; gap: 8px; margin: 0;
}
#phoneBlock .captcha-row > span { display: contents; }
#phoneBlock .captcha-row input,
#phoneBlock .captcha-row .captcha-question { flex: 1 1 auto; min-width: 0; width: auto; }
#phoneBlock .captcha-question {
  display: flex; align-items: center;
  padding: 11px 13px; border-radius: 10px;
  background: var(--bg-raised); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: .4px;
  color: var(--ink);
}
#phoneBlock .ghost-btn,
#phoneBlock .link-btn {
  flex: 0 0 auto; width: auto; align-self: stretch;
  display: inline-flex; align-items: center;
  padding: 0 14px; margin: 0;
  border-radius: 10px; cursor: pointer; white-space: nowrap;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 13.5px;
}
#phoneBlock .ghost-btn:hover:not(:disabled),
#phoneBlock .link-btn:hover { border-color: var(--accent); color: var(--accent); }
#phoneBlock .ghost-btn:disabled { opacity: .6; cursor: default; }
#phoneBlock { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   触屏可用性
   ──────────────────────────────────────────────────────────────────────────
   实测（tools/probe_responsive.mjs，360/375/393/820/1440/320 六种尺寸）发现的
   问题，集中修在这里，避免散落在各条原始样式里被以后改动覆盖掉。

   衡量标准：手指点击区高度。苹果建议 44pt、安卓建议 48dp；
   桌面用鼠标时 22px 就够，所以下面按设备区分阈值，不给桌面加无意义的膨胀。
   ══════════════════════════════════════════════════════════════════════════ */

/* 账户按钮是「登录 / 注册」的入口，是移动端最关键的点击目标之一。
   原来只有 26px 高（padding 3px 5px + 12.5px 字），手指很难点中。 */
.account button { min-height: 32px; padding: 6px 8px; }

/* 品牌名标签原来是 10.5px，是全站唯一小于 11px 的文字。
   必须写成和原规则同级的选择器：原规则是 .token-chip .token-label（两个类），
   只写单类 .token-label 会被它压掉，表现就是「改了没生效」。 */
.token-chip .token-label { font-size: 11px; }

@media (max-width: 860px) {
  /* 侧栏导航项：38px → 44px，达到手指可点标准。 */
  .nav-item { min-height: 44px; }

  /* 品牌区是回首页的链接：33px → 44px。 */
  .brand { min-height: 44px; }

  /* 侧栏开关：34px → 44px。这是移动端唯一的导航入口，必须好点。 */
  .sidebar-toggle { width: 44px; height: 44px; }

  .new-task { min-height: 44px; }

  /* 账户区的退出/登录按钮在原样式基础上再抬一点。 */
  .account button { min-height: 40px; }

  /* iOS Safari 在字号小于 16px 的输入框获得焦点时会自动放大页面，
     这个缩放会让布局错位、用户还得手动缩回去。16px 是唯一的解法。 */
  input, textarea, select { font-size: 16px; }

  /* 触屏上 hover 会粘住：点过的按钮一直保持悬停样式，看起来像选中了。 */
  .nav-item:hover, .new-task:hover, .account button:hover { background: transparent; }
  .nav-item.active:hover { background: rgba(0,0,0,.06); }

  /* 内容区去掉桌面端的左右留白，让手机屏幕宽度用在正文上。 */
  .page-inner { padding-left: 16px; padding-right: 16px; }

  /* Capability chips need a real tap height on a phone. */
  .tier-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .tier-bar { gap: 6px; }

  /* 首页输入区。textarea 原来只有一行高（约 25px），手机上几乎点不到；
     它是这个产品最主要的输入口，必须是最大最好点的目标。 */
  .composer textarea { min-height: 48px; padding-top: 4px; }
  .composer { padding: 12px 14px 10px; }

  /* 模式切换（任务模式 / 快速对话）：36px → 44px。 */
  .mode-chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* 发送按钮和语音按钮：32px / 34px → 44px。 */
  .send, .icon-btn { min-width: 44px; min-height: 44px; }

  /* 示例页的复制按钮：30px → 40px。它被点得很多，但不必到 44。 */
  .copy-btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }

  /* 示例页的「直接发送这条 / 下载成片」：40px → 44px。 */
  .recipe-actions .primary-btn,
  .recipe-actions .ghost,
  .recipe-actions a,
  .recipe-actions button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 很窄的屏幕（320px 级）再压一档内边距。 */
@media (max-width: 360px) {
  .page-inner { padding-left: 12px; padding-right: 12px; }
  .modal { margin: 10px; }
}