/* ask — a conversation, and nothing in its way.
 *
 * ~/claude/IOS.md §25 THE STAGE (Music's v34 recipe, measured on iOS 27): the document never scrolls; #app is a screen
 * tall (100lvh installed); the conversation (#page) scrolls inside it; the composer (.foot) is its SIBLING, absolute at the
 * stage's bottom and lifted by the keyboard (--kb) — so a tap on Send is never eaten by a page still coasting after a
 * flick. Nothing is position: fixed (a fixed layer is clipped under the status bar). §24: no backdrop-filter, no
 * transitions on the shell; the bars are solid. The root's colour tints the status bar, so it is always the page's own.
 */
:root {
  --bg:      #f2f2f7;
  --panel:   #ffffff;
  --panel-2: #f6f6f9;
  --line:    rgba(60, 60, 67, .16);
  --ink:     #000000;
  --ink-2:   #3c3c43;
  --dim:     #8a8a8e;
  --pill:    #e5e5ea;
  --bad:     #e5322b;
  --accent:  #3d5afe;
  --on-accent: #ffffff;
  --claude:  #d97757;
  --mine:    #3d5afe;
  --on-mine: #ffffff;
  --code-bg: #f0f0f4;
  --shadow:  0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-num: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --sb: 0px;
  --foot-h: 0px; --kb: 0px;
  --side: 16px;
  --col: 760px;
  --seg-on: #ffffff;
  color-scheme: light dark;
}
/* Dark: the system's, unless the person chose Light; or their choice (theme.js stamps data-theme before the first
   paint; Settings → Appearance, ask-v5). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: rgba(84, 84, 88, .48);
    --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --pill: #2c2c2e;
    --bad: #ff453a; --accent: #7b8cff; --mine: #3d5afe; --code-bg: #1f1f23;
    --shadow: none; --seg-on: #48484a;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: rgba(84, 84, 88, .48);
  --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --pill: #2c2c2e;
  --bad: #ff453a; --accent: #7b8cff; --mine: #3d5afe; --code-bg: #1f1f23;
  --shadow: none; --seg-on: #48484a;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* NO DOUBLE-TAP ZOOM, ANYWHERE (ask-v8, the owner: "double tap to zoom on elements should be disabled"). touch-action is
   not inherited, and WebKit intersects it only up to the nearest scroller — so v7's `manipulation` on html stopped at
   #page, and a double tap on an answer, a chip or the composer still zoomed. On every element it holds everywhere
   (manipulation = pan + pinch, no double-tap). Pinch is the person's in a browser tab; installed, app.js holds it too. */
*, *::before, *::after { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none; }
/* The app's own controls behave like a native app's: no text selection or callout from a long press on a button, a
   bar or a chip. Answers and questions stay selectable (they are what a person copies). */
button, .bar, .chip, .controls, .menu, .starters, .seg, .list .open, .row .k, .lockup, .doormark, .empty .mark {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
html, body { background: var(--bg); color: var(--ink); margin: 0; }
body { position: relative; height: 100vh; height: 100dvh; overflow: hidden;
       font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
@media (display-mode: standalone) {
  :root { --sb: calc(100lvh - 100dvh); }
  body { height: 100vh; height: 100lvh; }
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the door ─────────────────────────────────────────────────────────── */
.door { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
        justify-content: center; text-align: center; padding: calc(var(--sb) + 24px) 28px calc(var(--safe-b) + 24px); }
.doormark { width: 84px; height: 84px; border-radius: 19px; box-shadow: var(--shadow); }
.lockup { margin: 18px 0 26px; font-weight: 800; letter-spacing: -.03em; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lockup .lm { font-size: 17px; color: var(--dim); font-weight: 700; letter-spacing: -.01em; }
.lockup .lc { color: var(--accent); }
.lockup .ls { font-size: 44px; }
.btn { border: 0; border-radius: 14px; padding: 13px 22px; background: var(--accent); color: var(--on-accent); font-weight: 650; }
.btn.big { min-width: 220px; font-size: 17px; }
.note { color: var(--dim); max-width: 340px; font-size: 14px; margin: 16px 0 0; }

/* ── the stage ────────────────────────────────────────────────────────── */
#app { position: absolute; inset: 0; }
#page { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: calc(var(--safe-t) + var(--sb)) calc(var(--side) + var(--safe-r)) 0 calc(var(--side) + var(--safe-l)); }
.bar { max-width: var(--col); margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 6px; }
.bar h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ibtn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--accent);
        display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.ibtn svg { width: 24px; height: 24px; }
.ibtn:active { background: var(--pill); }
.ibtn.me { font-family: var(--font-num); font-weight: 700; font-size: 15px; background: var(--pill); color: var(--ink-2); width: 34px; height: 34px; margin: 3px; }

main { flex: 1 0 auto; width: 100%; max-width: var(--col); margin: 0 auto;
       padding: 6px calc(var(--side) + var(--safe-r)) calc(var(--foot-h) + var(--kb) + 18px) calc(var(--side) + var(--safe-l)); }

/* ── the conversation ─────────────────────────────────────────────────── */
.empty { text-align: center; color: var(--dim); padding: 22vh 0 0; }
.empty .mark { width: 64px; height: 64px; border-radius: 15px; opacity: .9; }
.empty h2 { color: var(--ink); font-size: 26px; letter-spacing: -.02em; margin: 14px 0 18px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starters button { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); }

.turn { margin: 0 0 22px; }
.q { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.q > div { max-width: 82%; background: var(--mine); color: var(--on-mine); border-radius: 20px 20px 6px 20px;
           padding: 9px 14px; white-space: pre-wrap; word-wrap: break-word; }
.a { position: relative; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; min-height: 26px; }
.chip { border: 0; border-radius: 13px; background: var(--pill); color: var(--ink-2); font-size: 13px; font-weight: 600;
        padding: 3px 10px 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.chip .pct { font-family: var(--font-num); color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.claude { background: color-mix(in srgb, var(--claude) 18%, transparent); color: var(--claude); }
.chip svg { width: 12px; height: 12px; }
.status { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 14px; margin: 2px 0 8px; }
.status .t { font-family: var(--font-num); font-variant-numeric: tabular-nums; margin-left: auto; font-size: 12px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); flex: none;
        animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { list-style: none; margin: 0 0 8px; padding: 0; color: var(--dim); font-size: 13px; }
.steps li::before { content: "✓ "; color: var(--accent); }
.follow { color: var(--dim); font-size: 13px; margin: 0 0 6px; font-style: italic; }

.md { word-wrap: break-word; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md table, .md blockquote { margin: 0 0 .75em; }
.md ul, .md ol { padding-left: 1.3em; }
.md li { margin: .2em 0; }
.md h1, .md h2, .md h3, .md h4 { font-size: 1.05em; margin: 1em 0 .4em; letter-spacing: -.01em; }
.md h1 { font-size: 1.2em; }
.md code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); border-radius: 5px; padding: .1em .35em; }
.md pre { background: var(--code-bg); border-radius: 12px; padding: 12px 14px; overflow-x: auto; }
.md pre code { background: none; padding: 0; font-size: .85em; line-height: 1.45; }
.md blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--ink-2); }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: .92em; }
.md th, .md td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.md th { background: var(--panel-2); }
.md a.cite { display: inline-block; min-width: 1.35em; padding: 0 .3em; margin: 0 1px; border-radius: 8px; background: var(--pill);
             color: var(--ink-2); font: 600 .72em/1.6 var(--font-num); text-align: center; vertical-align: .18em; }
.caret::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.12em;
                background: var(--accent); border-radius: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.err { color: var(--bad); font-size: 14px; margin: 6px 0 0; }

.sources { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sources li { display: flex; gap: 9px; padding: 8px 0 0; font-size: 13.5px; line-height: 1.35; }
.sources .n { font: 600 12px/20px var(--font-num); min-width: 20px; height: 20px; border-radius: 10px; background: var(--pill); color: var(--ink-2); text-align: center; flex: none; }
.sources .w { color: var(--dim); display: block; font-size: 12.5px; }
.sources a, .sources span.s { color: var(--ink); }
.sources li.hit { animation: hit 1.2s ease-out; }
@keyframes hit { from { background: color-mix(in srgb, var(--accent) 20%, transparent); } to { background: transparent; } }
.after { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; align-items: center; }
.after .took { color: var(--dim); font: 12px var(--font-num); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pillbtn { border: 0; background: transparent; color: var(--dim); font-size: 13px; padding: 4px 8px; border-radius: 12px; display: inline-flex; gap: 5px; align-items: center; }
.pillbtn svg { width: 15px; height: 15px; }
.pillbtn:active { background: var(--pill); }
/* flag for review (ask-v10) */
.pillbtn.flagbtn.on { color: var(--bad); }
.flagzone:empty { display: none; }
.flagzone { margin-top: 8px; }
.fnote { color: var(--dim); font-size: 13.5px; margin: 4px 0; }
.flagbox textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
                    color: var(--ink); font: inherit; font-size: 16px; padding: 8px 10px; resize: vertical; }
.flagbox .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; align-items: center; }
.flagbox .btn { padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.review { border: 1px solid var(--line); border-left: 3px solid var(--dim); border-radius: 12px; padding: 8px 12px; background: var(--panel-2); font-size: 14px; }
.review.good { border-left-color: #34c759; } .review.partly { border-left-color: #ff9f0a; } .review.wrong { border-left-color: var(--bad); }
.review p { margin: 6px 0; }
.review .rhead { display: flex; gap: 8px; align-items: baseline; }
.review .verdict { font-weight: 700; }
.review .d { color: var(--dim); font-weight: 400; }
.review summary { color: var(--accent); font-size: 13px; margin: 4px 0; }
.rsteps { list-style: none; padding: 0; margin: 4px 0; }
.rsteps li { margin: 4px 0; }
.rsteps li::before { content: "✓ "; color: #34c759; font-weight: 700; }
.rsteps li.no::before { content: "✗ "; color: var(--bad); }

/* ── the composer: the stage's foot ───────────────────────────────────── */
.foot { position: absolute; left: 0; right: 0; bottom: var(--kb); z-index: 25; background: var(--bg);
        padding: 8px calc(12px + var(--safe-r)) calc(8px + max(0px, var(--safe-b) - 10px)) calc(12px + var(--safe-l)); }
.composer { max-width: var(--col); margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
            box-shadow: var(--shadow); padding: 6px 6px 6px 14px; }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; background: transparent; resize: none; padding: 6px 0 4px;
                     max-height: 30vh; min-height: 24px; line-height: 1.4; font-size: 16px; }
.controls { display: flex; align-items: center; gap: 4px; }
.controls .grow { flex: 1; }
.mode { border: 0; background: var(--pill); border-radius: 15px; padding: 5px 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
        display: inline-flex; gap: 5px; align-items: center; }
.mode svg { width: 12px; height: 12px; }
.mode.claude[aria-pressed="true"] { background: var(--claude); color: #fff; }
.mode.claude .left { font-family: var(--font-num); opacity: .8; font-weight: 600; }
.send { width: 36px; height: 36px; border-radius: 18px; border: 0; background: var(--accent); color: var(--on-accent);
        display: inline-flex; align-items: center; justify-content: center; flex: none; }
.send:disabled { background: var(--pill); color: var(--dim); }
.send svg { width: 20px; height: 20px; }
.send.stop { background: var(--ink-2); }

/* ── menus: absolute in the body, never fixed ─────────────────────────── */
.menu { position: absolute; z-index: 60; min-width: 220px; max-width: calc(100vw - 24px); background: var(--panel); border-radius: 14px;
        box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 0 0 1px var(--line); padding: 6px; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left;
               padding: 10px 12px; border-radius: 9px; font-size: 15px; }
.menu button:active, .menu button.on { background: var(--pill); }
.menu button .d { color: var(--dim); font-size: 12.5px; margin-left: auto; font-family: var(--font-num); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 6px; }
.menu .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dim); }
.scrim { position: absolute; inset: 0; z-index: 59; }

/* ── the list of conversations, and settings ──────────────────────────── */
.list { list-style: none; padding: 0; margin: 4px 0 0; background: var(--panel); border-radius: 14px; overflow: hidden; }
.list li { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.list li:last-child { border-bottom: 0; }
.list .slide { flex: 1; min-width: 0; display: flex; background: var(--panel); position: relative; z-index: 1; }
.list .open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 12px 14px; }
.list .open:active { background: var(--pill); }
/* SWIPE LEFT TO DELETE (ask-v8), Mail's and Messages' gesture: on a touch screen the row slides over a red Delete that a
   tap then confirms; a mouse keeps the plain Delete beside the row. */
@media (hover: none) {
  .list .slide { touch-action: pan-y; will-change: transform; }
  .list .slide.settle { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .list li .del { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; z-index: 0; padding: 0;
               background: var(--bad); color: #fff; font-weight: 650; font-size: 15px; }
  .list li .del.sure { color: #fff; }
}
.list .open b { display: block; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .open small { color: var(--dim); font: 12.5px var(--font-num); }
.list .del { border: 0; background: transparent; color: var(--dim); padding: 12px 14px; font-size: 14px; }
.list .del.sure { color: var(--bad); font-weight: 650; }
h2.sec { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); font-weight: 600; margin: 22px 4px 8px; }
.card { background: var(--panel); border-radius: 14px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-height: 46px; }
.row:last-child { border-bottom: 0; }
.row .k { color: var(--ink); }
.row .v { margin-left: auto; color: var(--dim); text-align: right; font-size: 14px; }
a.row, button.row { width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 16px; }
.row.danger { color: var(--bad); }
a.row:active, button.row:active { background: var(--pill); }
.starters button:active, .chip:active, .mode:active { filter: brightness(.92); }
.lockrow { display: flex; align-items: baseline; gap: 2px; font-weight: 800; letter-spacing: -.02em; flex: none; }
.lockrow .lc { color: var(--accent); }
details.tech summary { padding: 12px 14px; color: var(--dim); list-style: none; cursor: pointer; }
details.tech summary::-webkit-details-marker { display: none; }
details.tech .row { font-size: 13.5px; }
.linkrow input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 600 17px var(--mono);
                 letter-spacing: .12em; text-transform: uppercase; padding: 0; }
.linkrow input::placeholder { font: 15px var(--font); letter-spacing: 0; text-transform: none; color: var(--dim); }
.linkrow input.bad::placeholder { color: var(--bad); }
.linkbtn { border: 0; border-radius: 10px; padding: 7px 14px; background: var(--accent); color: var(--on-accent); font-weight: 650; }
.unlink { border: 0; background: transparent; color: var(--bad); font-size: 14px; padding: 0 0 0 6px; }
.addr { text-align: center; color: var(--dim); font-size: 12.5px; margin: 26px 0 0; }
.seg { display: flex; margin-left: auto; padding: 2px; border-radius: 9px; background: var(--pill); }
.seg button { border: 0; background: transparent; border-radius: 7px; padding: 5px 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Shared today (ask-v8): a cap's bar under its row */
.row.cap { flex-wrap: wrap; row-gap: 6px; }
.row.cap .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.row.cap .meter { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--pill); overflow: hidden; }
.row.cap .meter i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.row.cap.low .meter i { background: var(--bad); }
.row.cap .sub { flex-basis: 100%; color: var(--dim); font-size: 12.5px; margin-top: -2px; }