:root {
  --bg: #101014;
  --panel: #16161c;
  --line: #26262e;
  --fg: #d6d6dc;
  --dim: #7c7c88;
  --accent: #e0443e;
  --reader-bg: #101014;
  --reader-fg: #eaeaea;
  --reader-font: system-ui, sans-serif;
  --reader-size: 42px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.45 system-ui, sans-serif;
  overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100%; }

/* ---------- scrollbars (match the gray/black/red theme) ---------- */
* { scrollbar-width: thin; scrollbar-color: #34343f var(--panel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb {
  background: #34343f;
  border: 2px solid var(--panel);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--panel); }

/* ---------- top backlog panel ---------- */
#top {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 10;
  display: flex;
  flex-direction: column;
  /* grows into the spare space above the reader, then the backlog scrolls */
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(42vh, 340px);
}
.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  flex: none;
  position: relative; /* anchor for the mobile ⋯ more-menu */
}
.brand { font-weight: 600; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.brand .rr { color: var(--accent); }
.bar-sep { color: var(--line); font-size: 12px; }
#mcp-init {
  background: none; border: 1px solid var(--accent); color: var(--fg);
  font-size: 10px; border-radius: 99px; padding: 2px 9px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
#mcp-init svg { width: 11px; height: 11px; }
#mcp-init:hover { background: #2a2a35; }
#mcp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); white-space: nowrap; }
#mcp-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3a48; flex: none; }
#mcp-dot.on { background: #2e9e5b; box-shadow: 0 0 6px #2e9e5b99; }
#mcp-dot.off { background: #c0473e; }
#mcp-cmd { background: #0c0c10; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 10.5px; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto; }
#tools { display: flex; align-items: center; gap: 2px; }
#tools .sources { display: flex; align-items: center; gap: 1px; margin: 0 2px; padding: 0 4px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.icon-btn svg { display: block; width: 16px; height: 16px; }
.icon-btn.src { color: var(--dim); opacity: .45; }
.icon-btn.src.on { color: var(--fg); opacity: 1; }
#capture-btn.on { color: var(--accent); }
#status {
  flex: none;
  margin-left: 8px;
  font-size: 9.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#status.err { color: #e8a13c; }
/* flank the now-reading group so it stays centered in the header */
.bar-spacer { flex: 1 1 0; min-width: 8px; }
#top.closed #columns, #top.closed #selbar { display: none; }
.chip {
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 9.5px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--fg); }
.chip.on { background: #2a2a35; color: #fff; border-color: #3a3a48; }
.chip.accent { border-color: var(--accent); color: var(--fg); }
.chip.tiny { font-size: 8.5px; padding: 2px 5px; }
#top.closed #toggle-btn { transform: rotate(-90deg); }

/* selection bar (multiselect bulk actions) */
#selbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-top: 1px solid var(--line);
  background: #14141a;
}
#selbar .sel-n { font-size: 10px; color: var(--accent); margin-right: 4px; }

/* 5-column backlog */
#columns {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 1px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--line);
}
#columns .none { color: var(--dim); padding: 14px 10px; background: var(--panel); flex: 1; }
.col {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.col-h {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.col-h .col-i { display: flex; }
.col-h .col-i svg { width: 13px; height: 13px; }
.col-h .col-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-h .col-c { opacity: .7; }
.col-h .agent-pick {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 3px;
  margin: -2px 0;
  max-width: 100%;
  cursor: pointer;
}
.col-h .agent-pick:hover { border-color: var(--accent); }
.col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 0 6px; font-size: 11px; }
.col-body .group {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 3px;
  margin-top: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.col-body .group:hover { color: var(--fg); }
.col-body .group .caret { font-size: 8px; transition: transform .12s; }
.col-body .group.collapsed .caret { transform: rotate(-90deg); }
.col-body .group .g-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-body .group .g-c { opacity: .7; }
.col-body .group .g-bm { color: var(--accent); font-size: 9px; margin-right: 4px; }
.col-body .group button.g-bm { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.col-body .group button.g-bm:hover { filter: brightness(1.3); }
.item.bookmark { border-left-color: var(--accent); }
.item.bookmark .t { color: var(--fg); }
/* where you left off in a panel (not currently open) — a quiet marker */
.item.resume { border-left-color: #5a5a6a; }
.item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.item .ago { flex: none; font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums; }
.item:hover { background: #1d1d25; }
.item.active { background: #20202a; border-left-color: var(--accent); }
.item.sel { background: #2a2233; border-left-color: var(--accent); }
.item .t {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.item.unread .t { color: #fff; }
.item.unread .t::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  vertical-align: 1px;
}

/* column config modal */
.colcfg-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.colcfg-name { width: 100%; margin-bottom: 6px; }
.colcfg-srcs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.hint { font-size: 10.5px; color: var(--dim); margin: 0 0 10px; }

/* ---------- reader ---------- */
#main {
  flex: 1 1 auto;
  min-height: 220px; /* word, progress, and HUD always stay visible */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--reader-bg);
  min-width: 0;
}
#empty {
  margin: auto;
  max-width: 270px;
  color: var(--dim);
  text-align: center;
  padding: 16px;
}
#empty kbd {
  background: var(--line);
  border-radius: 3px;
  padding: 0 5px;
}
#auth { margin-top: 18px; }
#gsi-btn { display: flex; justify-content: center; min-height: 40px; }
#s-account { margin: 9px 0; font-size: 11px; color: var(--dim); }
#s-account .acct-line { margin-bottom: 6px; }
#s-account #s-email { color: var(--fg); }
#reader { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
#reader[hidden] { display: none; }
/* ✕ on the left, vertically centered on the word (midpoint of the two guides) */
#close-reader { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 6; }
/* the ✕ rides the word's own vertical centre (between the guides), not the
   stage's — so it never drifts when the stage gets top padding on phones */
#word-line { position: relative; width: 100%; }
/* the reader's now-reading controls (title · sections · source) live up in the
   header bar as one boxed unit, centered between the spacers — so the
   ⚡ live-highlight title reads as the source, not a toggle */
#now-reading {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 56vw;
  background: var(--bg); border: 1px solid var(--line); border-radius: 99px;
  padding: 2px 5px 2px 11px;
}
#now-reading[hidden] { display: none; }
#item-title {
  font-size: 10.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}
/* section-jump lives on the [ / ] keys; no dropdown in the header (it doubled
   the title and crowded the bar) */
#now-reading select { display: none; }
#stage {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  min-height: 90px;
  user-select: none;
  overflow: hidden;
}
/* with the transcript showing, the word sits in a thin row flush under the
   backlog and the transcript fills the rest of the reader */
#reader.reading-script #stage { flex: none; min-height: 0; padding: 6px 0; }
.guide {
  height: 10px;
  position: relative;
  margin: 6px 0;
}
.guide::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}
.guide::after {
  content: '';
  position: absolute;
  left: 50%; width: 1px;
  background: var(--accent);
  top: 0; bottom: 0;
}
.guide.top::after { top: 50%; }
.guide.bottom::after { bottom: 50%; }
#word {
  display: flex;
  align-items: baseline;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  color: var(--reader-fg);
  white-space: pre;
  line-height: 1.15;
}
#pre { flex: 1 1 0; text-align: right; overflow: visible; }
#post { flex: 1 1 0; text-align: left; overflow: visible; }
#pivot { flex: 0 0 auto; color: var(--accent); }
#word.code { font-size: calc(var(--reader-size) * .45); color: var(--dim); }
#paused-hint {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--dim);
}
#progress { height: 3px; background: var(--line); }
/* ---------- live transcript (follow along / switch to normal reading) ---------- */
#transcript {
  flex: 1.4 1 0;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  font-family: var(--reader-font);
  font-size: 13px;
  line-height: 1.8;
  color: var(--dim);
}
#transcript[hidden] { display: none; }
#transcript p { margin: 0 0 10px; }
#transcript span { cursor: pointer; border-radius: 3px; }
#transcript span:hover { color: var(--reader-fg); background: #22222b55; }
#transcript span.now {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--reader-fg);
}
#transcript span.link {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
  word-break: break-all;
}
#transcript p.h { color: var(--reader-fg); font-weight: 600; margin-top: 14px; }
/* agent/chat transcript: your prompts right-aligned + labelled, like a chat */
#transcript p.you { text-align: right; color: var(--reader-fg); }
#transcript p.you .you-label {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
#transcript p.quote { border-left: 2px solid var(--line); padding-left: 10px; font-style: italic; }
#link-url {
  margin: 4px 0 10px;
  font-size: 11px;
  color: var(--dim);
  word-break: break-all;
}
#transcript pre {
  background: color-mix(in srgb, var(--reader-fg) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
}
#transcript pre.now { border-color: var(--accent); }
#bar { height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
#hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  color: var(--dim);
  font-size: 11px;
}
#wpm-now { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
#wpm-now:hover { color: var(--fg); }
#wpm-now input {
  width: 58px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 2px 4px;
  font: inherit;
  text-align: center;
}
#time-left { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- shared controls ---------- */
.icon-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--dim);
  font-size: 14px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
}
/* hover only where a real pointer exists — on a touchscreen the highlight
   sticks after a tap (the play button kept a grey pill on phones) */
@media (hover: hover) {
  .icon-btn:hover { color: var(--fg); background: #22222b; }
}
.icon-btn.big { font-size: 18px; color: var(--fg); }
.icon-btn.on { color: var(--accent); }
.btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.btn.ghost { background: none; color: var(--dim); }
.btn:hover { filter: brightness(1.1); }
a.btn { text-decoration: none; display: inline-block; }

/* ---------- modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  max-width: 320px;
  max-height: 90vh;
  max-height: 88dvh; /* iOS vh counts the area behind the toolbar — dvh fits the screen */
  overflow-y: auto;
}
.modal-card h2 { margin: 0 0 10px; font-size: 13px; }
.modal-card label { display: block; margin: 9px 0; color: var(--dim); font-size: 11px; }
.modal-card label.check { display: flex; align-items: center; gap: 6px; }
.modal-card select, .modal-card input[type=password], .modal-card textarea, .modal-card input.num {
  display: block;
  width: 100%;
  margin-top: 3px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
.modal-card input.num { display: inline-block; width: 70px; margin-left: 6px; padding: 2px 6px; }
.modal-card input[type=range] { display: block; width: 100%; margin-top: 4px; accent-color: var(--accent); }
.modal-card input[type=color] {
  width: 40px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  padding: 1px;
  vertical-align: middle;
  margin-left: 4px;
}
.modal-card.wide { max-width: 480px; }
/* settings panel: 25% wider, a touch larger type, tighter rows */
#settings .modal-card { max-width: 400px; }
/* live preview of the reader's look — so colour/font/size changes (and the
   Eye-relief presets) show their effect without leaving the settings modal */
#s-preview {
  background: var(--reader-bg); color: var(--reader-fg);
  font-family: var(--reader-font); font-size: min(var(--reader-size), 30px);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 10px; margin: 2px 0 6px; text-align: center;
  white-space: nowrap; overflow: hidden;
}
#s-preview b { color: var(--accent); font-weight: inherit; }
/* Build mode reveals two extra sliders — anchor the panel near the top so it
   grows downward from the Mode buttons, instead of recentering and shoving the
   controls (and the text behind it) upward when you toggle Build. */
#settings { align-items: flex-start; padding-top: 8vh; }
#settings .modal-card h2 { font-size: 15px; }
#settings .modal-card label { font-size: 13px; margin: 7px 0; }
#settings .modal-card .hint, #settings .acct-line { font-size: 12.5px; }
/* Standard / Build mode — circular radio indicators */
.seg { display: flex; gap: 16px; margin: 4px 0 6px; }
.seg-opt {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 13px;
}
.seg-opt::before {
  content: ''; width: 14px; height: 14px; flex: none;
  border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box;
}
.seg-opt.on { color: var(--fg); }
.seg-opt.on::before { border-color: var(--accent); background: radial-gradient(var(--accent) 0 3px, transparent 4px); }
#build-opts { border-left: 2px solid var(--line); padding-left: 10px; margin-bottom: 4px; }
#build-opts .hint { margin-bottom: 6px; }
#build-opts b { color: var(--fg); }
/* "what's the point?" panel */
.modal-card.info { max-width: 560px; }
.modal-card.info h3 { font-size: 12px; margin: 14px 0 4px; color: var(--fg); }
.modal-card.info p { font-size: 12.5px; line-height: 1.55; color: var(--fg); margin: 0 0 8px; }
.modal-card.info a { color: var(--accent); }
.modal-card.info .src { font-size: 11px; color: var(--dim); }
.info-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 2px; font-size: 12px; }
.info-tbl th, .info-tbl td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.info-tbl th { color: var(--dim); text-transform: uppercase; font-size: 9.5px; letter-spacing: .05em; }
.modal-card pre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
#stats-body { font-size: 11.5px; color: var(--fg); }
#stats-body .big { font-size: 17px; font-weight: 600; }
#stats-body .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
  text-align: center;
}
#stats-body .grid .lbl { color: var(--dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
#stats-body .src { display: flex; justify-content: space-between; color: var(--dim); padding: 2px 0; }
#stats-body h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 12px 0 4px; }
.modal-card .row { display: flex; gap: 14px; align-items: center; }
.modal-card .row.right { justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal-card textarea { resize: vertical; }

/* ---------- bring-your-own Gemini key ---------- */
/* "free" shows literally as ~free~ — the tildes are the reassurance it is */
.free { color: #2e9e5b; font-weight: 600; }
.free::before, .free::after { content: "~"; }
.keysteps { margin: 4px 0 12px; padding-left: 18px; font-size: 11.5px; color: var(--dim); }
.keysteps li { margin: 3px 0; }
#key-get { display: block; text-align: center; margin: 2px 0 12px; }
.keypaste { position: relative; }
.keypaste #key-input { margin-top: 0; padding-right: 44px; }
.keypaste #key-paste {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 12px; font-size: 15px;
  border: 0; border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: none; color: var(--dim); cursor: pointer;
}
.keypaste #key-paste:hover { color: var(--fg); }
.keymsg { font-size: 11px; margin: 10px 0 0; color: var(--dim); }
.keymsg.err { color: #e8a13c; }
.keymsg[hidden] { display: none; }
#key-later { margin-top: 12px; }
/* Skip sits opposite Save — same height, with a thin theme-red outline box */
#keymodal .row.right { justify-content: space-between; }
#key-skip { border: 1px solid var(--accent); padding: 5px 13px; }
#s-aikey { margin: 9px 0; }
#s-aikey-status { font-size: 12.5px; }

/* ---------- eye relief ---------- */
.s-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 16px 0 4px; }
#s-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
#s-presets .preset {
  flex: 1 1 0; min-width: 60px; cursor: pointer; font: inherit; font-size: 11px;
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 4px; text-align: center;
}
#s-presets .preset:hover { outline: 2px solid var(--accent); }
.break-count { text-align: center; font-size: 32px; font-weight: 600; color: var(--accent); margin: 8px 0; font-variant-numeric: tabular-nums; }
/* blink nudge — a quiet pulse near the bottom of the reader */
#blink-cue {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--accent); opacity: 0; pointer-events: none;
}
#blink-cue.show { animation: blink-pulse 1.4s ease; }
@keyframes blink-pulse { 0%, 100% { opacity: 0; } 25%, 55% { opacity: .8; } }

#toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #22222b;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 11.5px;
  z-index: 60;
  pointer-events: none;
}

/* mobile "⋯ more" menu — tucks the desktop-leaning header tools into a dropdown
   on phones (desktop: hidden, the tools live inline in the bar) */
#more-btn { display: none; }
#more-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 6px;
  flex-direction: column; gap: 2px; min-width: 190px; max-width: 78vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; z-index: 50; box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}

/* ---------- phones (≤640px): the reader owns the screen ---------- */
/* On a narrow viewport the six-column backlog can't show meaningfully and the
   header overflows off the right edge. So on phones: compact the header to its
   essential actions, let the RSVP reader fill the screen, and turn the backlog
   into a full-screen sheet you pop open with ▾ — columns stacked vertically so
   you land on your items, not a sideways scroll onto an empty column. Desktop
   (and iPad, ≥641px) is untouched. */
@media (max-width: 640px) {
  #top { max-height: none; }

  /* compact header: keep brand · what you're reading · the core ＋ ⚙ ▾ actions.
     The desktop-leaning bits (agent connect, sync text, source toggles, stats,
     columns, clipboard capture, epub, info) hide so the bar can't overflow. */
  #mcp-init, #mcp-status, .bar-sep, #status, #info-btn, #raw-btn,
  #capture-btn, #epub-btn, #tools .sources, #stats-btn, #cols-btn { display: none; }
  .bar { gap: 4px; padding: 6px 8px; }
  #item-title { max-width: 30vw; }

  /* the open backlog is a full-screen sheet over the reader… */
  #top:not(.closed) {
    position: fixed; inset: 0; z-index: 40; background: var(--panel);
  }
  /* …with its columns stacked top-to-bottom instead of 130px-wide and sideways */
  #top:not(.closed) #columns {
    flex-direction: column; overflow-x: hidden; overflow-y: auto;
  }
  #top:not(.closed) .col { width: 100%; min-width: 0; flex: none; }
  #top:not(.closed) .col-body { flex: none; overflow: visible; }

  /* phones: keep it simple — the RSVP word sits high (closer to the top) with
     the transcript reading only below it, instead of floating dead-centre with
     faint text above and below. */
  #reader.reading-script #stage { flex: none; min-height: 0; padding: 18vh 0 0; }
  #reader.reading-script #transcript { flex: 1; }

  /* the ⋯ button appears; its menu reveals the tucked tools as labelled rows */
  #more-btn { display: inline-flex; }
  #more-menu.open { display: flex; }
  #more-menu.open > * {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; height: auto; min-width: 0; padding: 9px 11px; border-radius: 8px;
    font-size: 13px; color: var(--fg); opacity: 1; text-align: left;
  }
  #more-menu.open > *:hover { background: rgba(255, 255, 255, .07); }
  #more-menu.open > [data-more]::after { content: attr(data-more); }
  #more-menu .sources { flex-wrap: wrap; border: 0; }
}