:root { color-scheme: light dark; --bg: #fafafa; --fg: #1b1b1f; --dim: #6b6b76; --line: #d9d9e0; --panel: #fff; --accent: #c2410c; --code: #f3f3f6; }
@media (prefers-color-scheme: dark) { :root { --bg: #111114; --fg: #e8e8ee; --dim: #8d8d99; --line: #2b2b33; --panel: #18181d; --accent: #fb923c; --code: #1f1f26; } }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; }
header { display: flex; gap: .75rem; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.spacer { flex: 1; }
.dim { color: var(--dim); }
button { font: inherit; padding: .3rem .7rem; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 6px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
#send { background: var(--accent); color: #fff; border-color: transparent; }
main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(320px, 1.6fr) minmax(280px, 1.4fr); }
section { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.bar, .row { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; }
.bar { border-bottom: 1px solid var(--line); font-weight: 600; }
#fileList { list-style: none; margin: 0; padding: .25rem 0; overflow: auto; max-height: 35%; font: 12.5px ui-monospace, monospace; }
#fileList li { padding: .1rem .75rem; cursor: pointer; white-space: nowrap; }
#fileList li:hover, #fileList li.open { background: var(--code); }
textarea, input, select { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .35rem; }
#editor { flex: 1; border: 0; border-radius: 0; font: 12.5px/1.5 ui-monospace, monospace; resize: none; tab-size: 2; }
#chat { flex: 1; overflow: auto; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--code); padding: .4rem .7rem; border-radius: 10px; max-width: 85%; }
.msg.think { color: var(--dim); font-style: italic; font-size: 12.5px; border-left: 2px solid var(--line); padding-left: .5rem; }
.msg.notice { color: var(--accent); }
details.tool { font: 12px ui-monospace, monospace; background: var(--code); border-radius: 6px; padding: .3rem .5rem; }
details.tool summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.tool pre { margin: .3rem 0 0; white-space: pre-wrap; max-height: 20rem; overflow: auto; }
details.tool.err summary { color: var(--accent); }
#ask { border-top: 1px solid var(--line); padding: .5rem; }
#prompt { width: 100%; resize: vertical; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-radius: 0; background: none; padding: .45rem .9rem; }
.tabs button.on { box-shadow: inset 0 -2px var(--accent); font-weight: 600; }
.tab { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tab.on { display: flex; }
#termOut { flex: 1; margin: 0; padding: .5rem; overflow: auto; font: 12px/1.45 ui-monospace, monospace; white-space: pre-wrap; background: var(--code); }
#termForm { display: flex; gap: .4rem; align-items: center; padding: .3rem .5rem; font-family: ui-monospace, monospace; }
#termIn { flex: 1; font-family: ui-monospace, monospace; }
#preview iframe { flex: 1; border: 0; background: #fff; width: 100%; }
#preview p { padding: 1rem; }
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); width: min(34rem, 94vw); }
dialog fieldset { border: 1px solid var(--line); border-radius: 8px; margin: .6rem 0; display: grid; gap: .4rem; }
dialog label { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .5rem; }
dialog label.check { display: flex; font-size: 13px; }

.badge:empty { display: none; }
#aboutLink { color: var(--dim); text-decoration: none; font-size: 14px; padding: .3rem .2rem; }
#aboutLink:hover { color: var(--fg); }
.badge { font-size: 12px; padding: .1rem .5rem; border-radius: 999px; background: var(--code); border: 1px solid var(--line); }
.internal-only { display: none; }
body.internal .internal-only { display: block; }
body.internal .byo { display: none !important; }

/* ---- iOS / touch basics ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { height: 100vh; height: var(--app-h, 100dvh); overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
main, section, #chat, .msg, details.tool { min-width: 0; }
details.tool pre { overflow-x: auto; white-space: pre-wrap; }
#mtabs, .phone-only { display: none; }
button.danger { color: #e5484d; }
#prompt { min-height: 3.2rem; max-height: 40vh; }

/* ---- phones and narrow/portrait screens: one pane at a time ---- */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1099px) {
  body { font-size: 15px; }
  header { gap: .5rem; padding: .35rem .6rem; min-height: 44px; }
  header .tagline, header #reset { display: none; }
  header b { white-space: nowrap; }
  #status.idle { display: none; }
  header button { font-size: 14px; }
  .phone-only { display: inline-block; }
  #mode { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #status { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
  header button { min-height: 36px; padding: .3rem .6rem; }
  main { display: block; position: relative; overflow: hidden; }
  main > section { position: absolute; inset: 0; border: 0; display: none; }
  body[data-pane="chat"] #chatPane, body[data-pane="files"] #filesPane,
  body[data-pane="term"] #sidePane, body[data-pane="preview"] #sidePane { display: flex; }
  #sidePane > .tabs { display: none; }
  #fileList { max-height: 30%; font-size: 13px; }
  #fileList li { padding: .45rem .9rem; }
  #editor { font-size: 13px; }
  #chat { padding: .6rem .7rem; gap: .5rem; font-size: 14px; line-height: 1.45; }
  .msg.user { max-width: 92%; }
  .msg.think { font-size: 12.5px; }
  details.tool { font-size: 11.5px; }
  details.tool summary { padding: .3rem 0; }
  #ask { padding: .45rem .55rem; }
  #ask .row { padding: .35rem 0 0; }
  /* 16px keeps iOS from zooming into the field on focus */
  #prompt, #termIn, dialog input, dialog select { font-size: 16px; }
  #prompt { min-height: 0; height: 2.75rem; resize: none; }
  #cost { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  #ask .row .spacer { display: none; }
  #ask button, #termForm button { min-height: 40px; min-width: 64px; }
  #termOut { font-size: 11.5px; }
  #termForm { padding: .4rem .5rem; }
  #mtabs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); background: var(--panel);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mtabs button { border: 0; border-radius: 0; background: none; min-height: 48px; font-size: 13px; color: var(--dim); position: relative; }
  #mtabs button.on { color: var(--fg); font-weight: 600; box-shadow: inset 0 2px var(--accent); }
  #mtabs button.dot::after { content: ""; position: absolute; top: 10px; right: calc(50% - 2.2em); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  body.kb #mtabs { display: none; }
button.danger { color: #e5484d; }
  /* settings as a full-screen sheet */
  dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; padding: calc(env(safe-area-inset-top) + .5rem) 1rem 0; overflow-y: auto; }
  dialog label { grid-template-columns: 1fr; gap: .2rem; }
  dialog label.check { gap: .6rem; align-items: flex-start; }
  dialog fieldset { padding: .6rem .7rem; }
  dialog .actions { position: sticky; bottom: 0; background: var(--panel); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  dialog .actions { gap: .4rem; }
  dialog .actions button { min-height: 44px; min-width: 0; padding: .3rem .85rem; }
}
/* phone in landscape: little height, so a slimmer header and tab bar */
@media (max-height: 500px) and (orientation: landscape) {
  header { min-height: 36px; padding-top: .15rem; padding-bottom: .15rem; }
  #mtabs button { min-height: 38px; }
  #prompt { max-height: 30vh; }
}