/* ── Batula ───────────────────────────────────────────────────────────
   Ground, panel, line, ink, accent. Cyan is reserved for interactive
   elements — buttons, links, focus, active state — and is not used
   decoratively, which is the system's own rule.

   Panel sits darker than ground in dark mode and lighter in light mode:
   elevation is ordinal, so surfaces step away from the page rather than
   toward it.                                                              */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ground: #241E36;
  --panel:  #171327;
  --line:   #4B4070;
  --ink:    #EDE9FB;
  --accent: #5AE6FF;

  /* Derived from the five, never invented alongside them. */
  --panel-2:   color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --line-soft: color-mix(in srgb, var(--line) 55%, var(--ground) 45%);
  --muted:     color-mix(in srgb, var(--ink) 62%, var(--ground) 38%);
  --faint:     color-mix(in srgb, var(--ink) 40%, var(--ground) 60%);
  --accent-ink: var(--panel);
  --accent-dim: color-mix(in srgb, var(--accent) 42%, var(--ground) 58%);
  --danger:     #FF8B8B;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --sidebar-w: 280px;
  --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);
  /* Set from JS via visualViewport so the composer rides above the keyboard */
  --kb: 0px;
}

:root[data-theme="light"] {
  --ground: #F6F4FD;
  --panel:  #EEEBF8;
  --line:   #4B4070;
  --ink:    #221C33;
  --accent: #0A6E8F;

  --panel-2:   color-mix(in srgb, var(--panel) 86%, var(--ink) 14%);
  --line-soft: color-mix(in srgb, var(--line) 22%, var(--ground) 78%);
  --muted:     color-mix(in srgb, var(--ink) 68%, var(--ground) 32%);
  --faint:     color-mix(in srgb, var(--ink) 45%, var(--ground) 55%);
  --accent-ink: #FFFFFF;
  --accent-dim: color-mix(in srgb, var(--accent) 34%, var(--ground) 66%);
  --danger:     #A32020;
}

/* Aliases kept so the rest of the sheet reads unchanged. */
:root { --bg: var(--ground); --surface: var(--panel); --surface-2: var(--panel-2); --text: var(--ink); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg); color: var(--text);
  font: 15.5px/1.62 var(--body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9;
      stroke-linecap: round; stroke-linejoin: round; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent-dim); color: #fff; }

/* scrollbars — visible enough to grab, quiet enough to ignore */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #2a3542; background-clip: content-box; }

.mark { border-radius: 7px; display: block; }
.mark.lg { border-radius: 18px; margin: 0 auto 14px; box-shadow: 0 0 0 1px var(--line); }
.muted { color: var(--muted); } .xs { font-size: 12px; } .error { color: var(--danger); }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-size: 14.5px; font-weight: 500; transition: background .15s, border-color .15s;
}
.btn:hover { background: #18212d; }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.primary:hover { background: #7ce3f4; }
.btn.danger { background: transparent; color: var(--danger); border-color: #43242a; }
.btn.danger:hover { background: #2a1519; }
.btn svg { font-size: 17px; }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: transparent; color: var(--muted); font-size: 19px;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.sm { width: 32px; height: 32px; font-size: 16px; }

/* ── setup ────────────────────────────────────────────────────────── */
.setup { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.setup[hidden] { display: none; }
.setup-card { width: 100%; max-width: 380px; text-align: center; }
.setup-card h1 { margin: 0 0 6px; font-family: var(--display); font-weight: 700;
                 font-size: 30px; letter-spacing: -.04em; }
.setup-card pre {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 13px; overflow-x: auto;
  font-size: 12.5px; font-family: var(--mono); color: var(--ink);
}
#token-input {
  width: 100%; padding: 13px 15px; margin: 12px 0 10px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 16px;
}
#token-input:focus { outline: none; border-color: var(--accent-dim); }

/* ── shell ────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100dvh; }
.shell[hidden] { display: none; }

/* ── sidebar ──────────────────────────────────────────────────────── */
.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: calc(var(--safe-t) + 10px) 10px calc(var(--safe-b) + 10px) calc(10px + var(--safe-l));
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.035em; }

.new-chat { width: 100%; justify-content: flex-start; margin-bottom: 12px; }

.search-wrap { position: relative; margin-bottom: 10px; }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
               font-size: 15px; color: var(--faint); pointer-events: none; }
#search {
  width: 100%; padding: 9px 12px 9px 34px; font-size: 14px;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--surface-2); color: var(--text);
}
#search:focus { outline: none; border-color: var(--line); }
#search::-webkit-search-cancel-button { filter: invert(.6); }

.chat-list { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.group-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
               color: var(--faint); padding: 14px 10px 5px; }
.chat-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 9px 8px 9px 11px; border-radius: var(--r-md);
  background: transparent; border: none; text-align: left; color: var(--muted);
  transition: background .13s, color .13s;
}
.chat-row:hover { background: var(--surface-2); color: var(--text); }
.chat-row.active { background: var(--surface-2); color: var(--text); }
.chat-row.active .chat-name { font-weight: 550; }
.chat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chat-del { opacity: 0; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
            display: grid; place-items: center; background: transparent; border: none;
            color: var(--faint); font-size: 15px; transition: opacity .13s, color .13s; }
.chat-row:hover .chat-del, .chat-row.active .chat-del { opacity: 1; }
.chat-del:hover { color: var(--danger); background: #2a1519; }
@media (hover: none) { .chat-del { opacity: 1; } }

.empty-note { padding: 12px 10px; margin: 0; }

.side-foot { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.spend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
#spend-text { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bar { height: 3px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 0 4px; }
.bar span { display: block; height: 100%; width: 0; border-radius: 99px;
            background: var(--muted); transition: width .5s ease; }
.bar span.warn { background: linear-gradient(90deg, #b08040, #ffcf7a); }
.bar span.over { background: linear-gradient(90deg, #8d3b3b, var(--danger)); }

/* ── main ─────────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.topbar {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: calc(var(--safe-t) + 8px) 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  position: sticky; top: 0; z-index: 4;
}
.chat-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 550; text-align: center;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.scroller { flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .scroller { scroll-behavior: auto; } }
.thread { max-width: 760px; margin: 0 auto; padding: 22px max(16px, var(--safe-l)) 12px max(16px, var(--safe-r));
          display: flex; flex-direction: column; gap: 20px; }

/* messages */
.turn { display: flex; flex-direction: column; animation: rise .22s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .turn { animation: none; } }

.turn.user { align-items: flex-end; }
.turn.user .bubble {
  max-width: 84%; padding: 10px 15px; border-radius: var(--r-xl) var(--r-xl) 5px var(--r-xl);
  background: var(--surface-2); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.turn.agent .row { display: flex; gap: 11px; align-items: flex-start; }
.turn.agent .avatar { flex: none; width: 27px; height: 27px; border-radius: 8px; margin-top: 1px;
                      box-shadow: 0 0 0 1px var(--line); }
.turn.agent .body { min-width: 0; flex: 1; }
.turn.agent .bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.turn.agent .bubble.err { color: var(--danger); }
.bubble.streaming::after {
  content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px;
  background: var(--muted); vertical-align: -2px; border-radius: 1px;
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1;
        font-family: var(--mono); letter-spacing: -.02em;
        padding: 5px 9px; border-radius: 99px; background: var(--surface);
        border: 1px solid var(--line); color: var(--muted); }
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.chip.err { color: var(--danger); border-color: #43242a; }
.chip.err .dot { background: var(--danger); }

.foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; min-height: 26px; }
.meta { font-size: 11.5px; color: var(--faint); font-family: var(--mono);
        font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.copy { opacity: 0; border: none; background: transparent; color: var(--faint);
        font-size: 15px; width: 26px; height: 26px; border-radius: var(--r-sm);
        display: grid; place-items: center; transition: opacity .15s, color .15s; }
.turn.agent:hover .copy { opacity: 1; }
.copy:hover { color: var(--text); background: var(--surface-2); }
@media (hover: none) { .copy { opacity: 1; } }

/* empty state */
.empty { margin: auto; text-align: center; padding: 30px 8px; }
.empty img { margin: 0 auto 16px; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
.empty h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 700;
            font-size: 24px; letter-spacing: -.04em; }
.empty p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.suggestions { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; max-width: 520px; margin: 0 auto; }
@media (max-width: 520px) { .suggestions { grid-template-columns: 1fr; } }
.suggestion {
  text-align: left; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-size: 13.5px; line-height: 1.45; transition: background .15s, border-color .15s;
}
.suggestion:hover { background: var(--surface-2); border-color: #263243; }
.suggestion span { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }

/* scroll-to-bottom */
.to-bottom {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--kb) + var(--safe-b) + 106px); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 6px 20px -6px #000; font-size: 17px;
}
.to-bottom[hidden] { display: none; }

/* ── composer ─────────────────────────────────────────────────────── */
.composer-wrap {
  flex: none; padding: 8px max(14px, var(--safe-l)) calc(var(--safe-b) + 8px) max(14px, var(--safe-r));
  margin-bottom: var(--kb);
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 760px; margin: 0 auto; padding: 7px 7px 7px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  transition: border-color .15s;
}
.composer:focus-within { border-color: #2c3a4b; }
#input {
  flex: 1; resize: none; border: none; outline: none; background: transparent; color: var(--text);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 9px 0; max-height: 34dvh; line-height: 1.5;
}
#input::placeholder { color: var(--faint); }
.send {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  font-size: 18px; transition: opacity .15s, background .15s;
}
.send:disabled { opacity: .3; }
.send .i-stop { display: none; }
.send.busy { background: var(--surface-2); color: var(--text); }
.send.busy .i-send { display: none; }
.send.busy .i-stop { display: block; fill: currentColor; stroke: none; }
.hint { text-align: center; margin: 7px auto 0; max-width: 760px; }

/* ── sidebar as a drawer on narrow screens ────────────────────────── */
.only-narrow { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .only-narrow { display: grid; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(85vw, var(--sidebar-w)); z-index: 20;
    transform: translateX(-102%); transition: transform .26s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 0 44px -6px #000;
  }
  .shell.menu .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 15; background: #000a; backdrop-filter: blur(2px);
           animation: fade .2s ease both; }
  .hint { display: none; }              /* space is precious on a phone */
  .thread { padding-top: 16px; }
}
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } .scrim { animation: none; } }

/* ── settings sheet ───────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center;
         background: #000a; backdrop-filter: blur(3px); animation: fade .18s ease both; }
.sheet[hidden] { display: none; }
.sheet-card {
  width: 100%; max-width: 440px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 16px 16px calc(var(--safe-b) + 16px);
  animation: slideup .24s cubic-bezier(.32,.72,0,1) both;
}
@media (min-width: 560px) { .sheet { place-items: center; } .sheet-card { border-radius: var(--r-lg); } }
@keyframes slideup { from { transform: translateY(16px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-row { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; margin: 0 0 16px; font-size: 13.5px; }
.sheet-body { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; font-size: 13.5px; }
.sheet-body dt { color: var(--muted); }
.sheet-body dd { margin: 0; text-align: right; font-family: var(--mono);
                 font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── toast ────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--kb) + var(--safe-b) + 96px); z-index: 50;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 16px; border-radius: 99px; font-size: 13px; max-width: 84vw;
  box-shadow: 0 8px 26px -8px #000; animation: fade .16s ease both;
}
.toast[hidden] { display: none; }
.toast.bad { color: var(--danger); border-color: #43242a; }

/* ── skeletons ────────────────────────────────────────────────────── */
.skel { height: 34px; border-radius: var(--r-md); margin: 4px 0;
        background: linear-gradient(90deg, var(--surface-2) 25%, #18202b 37%, var(--surface-2) 63%);
        background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── knowledge ────────────────────────────────────────────────────── */
.knowledge-btn { width: 100%; justify-content: flex-start; margin-bottom: 10px; }
.pill { margin-left: auto; font-size: 11px; color: var(--faint);
        font-family: var(--mono); font-variant-numeric: tabular-nums; }

#knowledge { background: var(--bg); }
.kb-body { flex: 1; overflow-y: auto; padding: 14px max(14px, var(--safe-l)) calc(var(--safe-b) + 20px); }
.kb-add { max-width: 640px; margin: 0 auto 18px; }
.upload { border-style: dashed; min-height: 54px; cursor: pointer; }
.upload:hover { border-color: var(--accent-dim); color: var(--accent); }

.kb-paste { margin-top: 10px; }
.kb-paste summary { cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 6px 2px; list-style: none; }
.kb-paste summary::-webkit-details-marker { display: none; }
.kb-paste summary::before { content: "＋ "; color: var(--faint); }
.kb-paste[open] summary::before { content: "− "; }
.kb-paste input, .kb-paste textarea {
  width: 100%; margin-top: 8px; padding: 11px 13px; font-size: 16px; font-family: inherit;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); resize: vertical;
}
.kb-paste input:focus, .kb-paste textarea:focus { outline: none; border-color: var(--accent-dim); }
.kb-paste .btn { margin-top: 9px; }

.kb-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.doc {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.doc .kind {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; background: var(--surface-2); color: var(--faint);
}
.doc .kind.pdf { color: var(--ink); }
.doc .kind.file { color: #b08fd8; }
.doc .info { flex: 1; min-width: 0; }
.doc .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.doc .sub { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.doc .del { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); border: none;
            background: transparent; color: var(--faint); display: grid; place-items: center; font-size: 16px; }
.doc .del:hover { color: var(--danger); background: #2a1519; }
.doc .del[disabled] { opacity: .3; cursor: default; }

/* ── rendered markdown ────────────────────────────────────────────── */
/* The agent writes headings, tables, lists and code. Before this it was all
   shown as literal text — you read "**Fleetlix**" and pipe-soup tables. */

.turn.agent .bubble { white-space: normal; }
.turn.agent .bubble > *:first-child { margin-top: 0; }
.turn.agent .bubble > *:last-child { margin-bottom: 0; }

.bubble p { margin: 0 0 12px; }
.bubble p:last-child { margin-bottom: 0; }

.md-h { margin: 20px 0 8px; font-family: var(--display); font-weight: 700;
        line-height: 1.25; letter-spacing: -.03em; }
h3.md-h { font-size: 17px; }
h4.md-h { font-size: 15.5px; }
h5.md-h, h6.md-h { font-size: 14.5px; color: var(--muted); }
.bubble > .md-h:first-child { margin-top: 0; }

.bubble ul, .bubble ol { margin: 0 0 12px; padding-left: 22px; }
.bubble li { margin: 4px 0; }
.bubble li::marker { color: var(--faint); }

.bubble strong { font-weight: 640; color: #f2f7ff; }
.bubble em { font-style: italic; }
.bubble s { opacity: .65; }

.bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.bubble a:hover { text-decoration-thickness: 2px; }

.inline-code {
  font-family: var(--mono);
  font-size: .88em; padding: 1.5px 5px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink);
  overflow-wrap: anywhere;
}

.bubble blockquote {
  margin: 0 0 12px; padding: 2px 0 2px 13px;
  border-left: 2px solid var(--line); color: var(--muted);
}
.bubble hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* code blocks */
.code-block {
  margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #070a0f; overflow: hidden;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.code-lang { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.code-copy {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
}
.code-copy:hover { color: var(--text); background: var(--surface-2); }
.code-block pre { margin: 0; padding: 12px; overflow-x: auto; }
.code-block code {
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.55; color: #cfe6f5; white-space: pre;
}

/* tables — scroll themselves rather than stretching the message */
.table-wrap { margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.table-wrap th, .table-wrap td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.table-wrap th { background: var(--surface); font-weight: 600; font-size: 12.5px;
                 letter-spacing: .2px; color: var(--muted); }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap td { color: var(--text); font-variant-numeric: tabular-nums; }

/* the not-yet-settled tail during streaming */
.md-tail { white-space: pre-wrap; margin: 0; }

.retry {
  margin-top: 10px; padding: 6px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px;
}
.retry:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ── focus ────────────────────────────────────────────────────────── */
/* Cyan earns its place here: focus is interaction. */
:where(button, a, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:where(button, a, input, textarea):focus:not(:focus-visible) { outline: none; }

/* ── theme toggle ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.theme-toggle button {
  border: none; background: transparent; color: var(--faint);
  padding: 4px 11px; border-radius: 999px; font: inherit; font-size: 12px;
}
.theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ── syntax, from the Batula colour deck ──────────────────────────────
   Two roles come straight from the deck's own descriptions: Wing is
   numbers, Ember is parameters. Blood is the error channel and nothing
   else, so it appears only on a deletion or an invalid token. The rest
   are chosen to read as an editor theme rather than assigned arbitrarily.

   Sonar carries function names. In the chrome, cyan means "you can act on
   this" — but a code block holds no controls, so the signature colour of
   the theme is free to do the work it does in an editor. It is one line
   to move if you would rather keep cyan out of prose entirely.            */
:root {
  --bat-sonar:   #5AE6FF;   /* cyan    */
  --bat-wing:    #B37FFF;   /* purple  */
  --bat-fang:    #FF6AD5;   /* pink    */
  --bat-lantern: #F2E96D;   /* yellow  */
  --bat-venom:   #4CF2A1;   /* green   */
  --bat-ember:   #FFA95C;   /* orange  */
  --bat-blood:   #FF5165;   /* red     */
  --bat-nebula:  #86B3FF;   /* blue — ANSI only */

  --t-comment:  var(--faint);
  --t-keyword:  var(--bat-fang);
  --t-string:   var(--bat-venom);
  --t-number:   var(--bat-wing);
  --t-function: var(--bat-sonar);
  --t-type:     var(--bat-lantern);
  --t-param:    var(--bat-ember);
  --t-operator: color-mix(in srgb, var(--ink) 78%, transparent);
  --t-punct:    color-mix(in srgb, var(--ink) 52%, transparent);
  --t-deleted:  var(--bat-blood);
  --t-inserted: var(--bat-venom);
}

/* In light mode the deck's colours are tuned for a dark ground, so they are
   darkened against the panel rather than swapped for different hues. */
:root[data-theme="light"] {
  --t-keyword:  color-mix(in srgb, var(--bat-fang)    62%, #2A0A22 38%);
  --t-string:   color-mix(in srgb, var(--bat-venom)   52%, #04301F 48%);
  --t-number:   color-mix(in srgb, var(--bat-wing)    66%, #1E0A38 34%);
  --t-function: color-mix(in srgb, var(--bat-sonar)   52%, #002A38 48%);
  --t-type:     color-mix(in srgb, var(--bat-lantern) 44%, #2E2A05 56%);
  --t-param:    color-mix(in srgb, var(--bat-ember)   62%, #3A1D00 38%);
  --t-deleted:  color-mix(in srgb, var(--bat-blood)   70%, #33060D 30%);
  --t-inserted: color-mix(in srgb, var(--bat-venom)   52%, #04301F 48%);
}

.t-comment  { color: var(--t-comment); font-style: italic; }
.t-keyword  { color: var(--t-keyword); }
.t-string   { color: var(--t-string); }
.t-number   { color: var(--t-number); }
.t-function { color: var(--t-function); }
.t-type     { color: var(--t-type); }
.t-param    { color: var(--t-param); }
.t-operator { color: var(--t-operator); }
.t-punct    { color: var(--t-punct); }
.t-deleted  { color: var(--t-deleted); }
.t-inserted { color: var(--t-inserted); }

/* ── attachments ──────────────────────────────────────────────────── */
.attachments {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto 8px; padding: 0 2px;
}
.attachments[hidden] { display: none; }

.thumb {
  position: relative; width: 62px; height: 62px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  flex: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .drop {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: #000a; color: #fff;
  font-size: 12px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.thumb.busy::after {
  content: ""; position: absolute; inset: 0; background: #0008;
  backdrop-filter: blur(1px);
}

.attach-btn { width: 38px; height: 38px; align-self: flex-end; margin-bottom: 1px; }

/* images inside a message */
.msg-images { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-images img {
  max-width: 220px; max-height: 220px; border-radius: var(--r-md);
  border: 1px solid var(--line); display: block;
}
.img-note {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--faint); font-family: var(--mono);
  border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 4px 9px;
  margin-bottom: 8px;
}