/* Pom — Overdrive (softened): dark liquid-glass over a deep-space abyss,
   neon teal signal / pink counterpoint, orange reserved for alerts.
   JetBrains Mono is self-hosted (mainland China blocks the Google Fonts CDN,
   the same reason the vendor JS is self-hosted). Variable woff2, weights 400–800. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/vendor/fonts/jetbrains_mono_latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/vendor/fonts/jetbrains_mono_latin_ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Two RGB triplets drive the whole neon palette — re-theme in one place. */
  --c1: 0, 255, 225;   /* teal — PRIMARY */
  --c2: 255, 46, 208;  /* pink — SECONDARY */

  --abyss: #04050E;
  --glass: #10142C;
  --ink: #FFFFFF;
  --dim: #5F7484;
  --teal: rgb(var(--c1));
  --pink: rgb(var(--c2));
  --c3: 255, 145, 0;  /* orange — ALERT ONLY */
  --orange: rgb(var(--c3));

  /* Backgrounds: deep-space navy; the .panel/pane rules add glass + blur. */
  --bg-base: #04050E;
  --bg-elevated: #0B1024;
  --bg-panel: rgba(10, 14, 34, 0.45);
  --bg-hover: rgba(var(--c1), 0.08);
  --bg-input: rgba(0, 0, 0, 0.40);
  --bg-code: #080B1A;

  --text-primary: #FFFFFF;
  --text-secondary: #7C90A0;
  --text-dim: #5F7484;

  /* PRIMARY = teal (actions, active, live data, focus, directories) */
  --accent: rgb(var(--c1));
  --accent-soft: rgba(var(--c1), 0.08);
  --accent-mid: rgba(var(--c1), 0.35);
  --accent-glow: rgba(var(--c1), 0.55);
  --accent-dark: #00C9B0;

  /* SECONDARY = pink (user side, counterpoint, .md files, unread) */
  --accent2: rgb(var(--c2));
  --accent2-soft: rgba(var(--c2), 0.09);
  --accent2-mid: rgba(var(--c2), 0.40);

  --border: rgba(var(--c1), 0.18);
  --border-strong: rgba(var(--c1), 0.40);

  --success: rgb(var(--c1));  /* idle/ok = teal — no green in the palette */
  --warning: var(--orange);   /* alerts only */
  --error: var(--orange);     /* errors/critical only */

  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* User-adjustable via the header settings popover (persisted client-side):
     heading/label weight, body weight, overall text scale, text brightness.
     --text-primary is overridden inline by JS when brightness < 100%. */
  --w-head: 700;
  --fx-glow: 1;   /* bloom intensity multiplier */
  --fx-glass: 1;  /* backdrop blur multiplier */
  --w-body: 400;
  --ui-scale: 1;

  --t-micro: calc(10px * var(--ui-scale));
  --t-small: calc(12px * var(--ui-scale));
  --t-body: calc(13px * var(--ui-scale));
  --t-input: calc(14px * var(--ui-scale));
  --t-tab: calc(14px * var(--ui-scale));
  --t-sub: calc(16px * var(--ui-scale));
  --t-title: calc(20px * var(--ui-scale));

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  --radius: 4px;       /* file-tree rows */
  --radius-lg: 6px;    /* buttons, inputs, tabs, dropdowns */
  --radius-pane: 8px;  /* panels, bubbles, pinned card, modals */

  --glow-teal: 0 0 20px rgba(var(--c1), calc(0.55 * var(--fx-glow)));
  --glow-pink: 0 0 20px rgba(var(--c2), calc(0.55 * var(--fx-glow)));

  --transition: 120ms ease;

  --header-h: 44px;
  --tabs-h: 38px;
  --input-min-h: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;      /* fallback */
  height: 100dvh;    /* tracks Android URL-bar show/hide (bottom-band fix) */
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  font-feature-settings: 'liga' 0, 'calt' 0;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea, select {
  font-family: var(--font);
  color: inherit;
}

button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--t-small);
  transition: var(--transition);
  user-select: none;
}
button:hover { background: var(--bg-hover); border-color: var(--border-strong); }
button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1a1a;
  font-weight: calc(var(--w-head) - 100);
}
button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.ghost { border-color: transparent; color: var(--text-secondary); }
button.ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

input[type=text], input[type=password], input[type=search], textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-input);
  width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ============== LOGIN ============== */

.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-4);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.login-title {
  font-size: var(--t-title);
  font-weight: var(--w-head);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.login-title .accent { color: var(--accent); }
.login-subtitle {
  color: var(--text-secondary);
  font-size: var(--t-small);
  margin: 0;
}
.login-error {
  color: var(--error);
  font-size: var(--t-small);
  min-height: 16px;
}
.pw-field {
  position: relative;
  display: flex;
}
.pw-field input {
  padding-right: 52px;
}
.pw-toggle {
  position: absolute;
  right: var(--s-1);
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-small);
  padding: var(--s-1) var(--s-2);
}
.pw-toggle:hover {
  color: var(--text-primary);
  background: transparent;
  border-color: transparent;
}
.rtd-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.rtd-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ============== APP SHELL ============== */

.app {
  height: 100%;
  display: grid;
  /* header | alert banner (collapses to 0 when hidden) | panels.
     Children are pinned to rows explicitly: a display:none banner leaves the
     grid entirely, which would otherwise drop .panels into the auto row.
     minmax(0,1fr) on the column stops any child's content width (the header
     row) inflating the layout past the viewport. */
  grid-template-rows: var(--header-h) auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}
.app > .header { grid-row: 1; }
.app > .cc-alert-banner { grid-row: 2; }
.app > .panels { grid-row: 3; }

.header {
  display: flex;
  align-items: center;
  /* min-width comes from the .app grid column (minmax(0,1fr)); no overflow
     clip here — the settings popover hangs below the header. */
  min-width: 0;
  position: relative;
  z-index: 60; /* header popovers (settings) paint above the panels */
  padding: 0 var(--s-3);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  gap: var(--s-3);
  height: var(--header-h);
}
.brand {
  font-weight: var(--w-head);
  font-size: var(--t-sub);
  letter-spacing: -0.02em;
}
.brand .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.header-spacer { flex: 1; }

.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--t-small);
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
}
.sync-indicator:hover { color: var(--text-primary); border-color: var(--border-strong); }
.sync-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}
.sync-indicator.unsynced .sync-dot { background: var(--warning); }
.sync-indicator.error .sync-dot { background: var(--error); }
.sync-indicator.syncing .sync-dot { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }

/* Shown on desktop too, not just mobile. With three LOOPING pages there is no
   longer an edge to bump into, so the dots are the only persistent cue to where
   you are and how many pages there are — and they are the guaranteed escape from
   a pane whose iframe is eating swipes. */
.mobile-nav-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.mobile-nav-dots .nd {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  transition: var(--transition);
  cursor: pointer;
}
.mobile-nav-dots .nd.on { background: var(--accent); width: 16px; border-radius: 3px; }
.mobile-nav-label {
  display: none;
  font-size: var(--t-small);
  color: var(--text-secondary);
}

/* ============== PANELS / PAGER ============== */
/* Desktop: .panels is a horizontal 2-page pager. Each .page is a full-width
   2-column grid (columns set by JS: split fraction / collapse). Page changes
   translate the whole strip (transform set by gotoPage in app_shell.js).
   Mobile overrides below flatten the pages into the scroll-snap carousel. */

.panels {
  display: flex;
  /* NO height rule: grid stretch sizes this strip to its row. Percentages
     here are engine-ambiguous (resolve against row OR container): the old
     calc(100% - header) double-subtracted in spec-conformant engines (the
     bottom dead band), and height:100% can overflow in the same ones. */
  /* Desktop paging is done by PROGRAMMATIC SCROLL (gotoPage -> scrollTo), not
     by transforming this element: a transform moves the overflow clip box
     with it, permanently clipping page 2. overflow:hidden blocks user
     scrolling but still allows JS scrollLeft. */
  overflow: hidden;
}
.page {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
/* A transient copy of a page, used only as something to animate INTO while the
   pager wraps past an end. Inert, and removed as soon as the wrap settles. */
.page-clone { pointer-events: none; }
/* The mobile carousel's wrap clones. Direct children of .panels, so they must be
   kept out of the desktop flex strip entirely. */
.pane-clone { display: none; pointer-events: none; }
/* Stands in for the TLA iframe inside any clone: a cloned cross-origin frame
   would start a second load of the dashboard for something on screen for a few
   hundred milliseconds. */
.tla-frame-placeholder { flex: 1; min-height: 0; background: var(--bg-elevated); }
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.panel-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 20;
}
.panel-resize-handle:hover { background: var(--accent-soft); }
@media (max-width: 900px) { .panel-resize-handle { display: none; } }

/* Mobile header compression lives in the main mobile media block further down
   (search "Header condensing"): dot-only sync pill, truncated pane label,
   tighter gaps. An earlier duplicate of it here hid the pane label with
   `display: none !important`, which — because !important beats source order —
   defeated the later rule that shows the (truncated) label. Removed. */
.page > .panel:last-child { border-right: none; }
.panel:last-child { border-right: none; }

.panel-header {
  display: flex;
  align-items: center;
  padding: 0;
  height: var(--tabs-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.panel-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ============== INSTANCE TABS ============== */

.instance-tabs {
  display: flex;
  width: 100%;
  height: 100%;
}
.instance-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--t-tab);
  font-weight: calc(var(--w-head) - 200);
  border-right: 1px solid var(--border);
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  position: relative;
  padding: 0 var(--s-2);
  min-width: 0; /* allow the tab to shrink so a long custom name can ellipsis */
}
.instance-tab:last-child { border-right: none; }
.instance-tab:hover { color: var(--text-primary); }
.instance-tab.active {
  color: var(--text-primary);
  background: var(--bg-base);
  border-bottom-color: var(--accent);
}
.instance-tab .tab-label {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background-color 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
}
/* idle but holds a conversation: solid white, no glow */
.status-dot.idle-active {
  background: var(--text-primary);
}
/* thinking: pulse orange */
.status-dot.thinking {
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
/* working: solid orange glow */
.status-dot.working {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
/* done + unread: pulse teal */
.status-dot.done-unread {
  background: #4dffff;
  box-shadow: 0 0 6px rgba(77, 255, 255, 0.5);
  animation: pulse 1.4s ease-in-out infinite;
}
/* done (read): revert to idle grey — no class needed, handled by absence of class */
/* error: pulse red */
.status-dot.error {
  background: var(--error);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ============== CHAT THREAD ============== */

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.chat-empty {
  margin: auto;
  color: var(--text-dim);
  text-align: center;
  font-size: var(--t-small);
}

.msg {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: 92%;
  min-width: 0;
  position: relative;
}
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
/* Continuation bubbles of a multi-reply turn sit a touch tighter under the first. */
.msg.assistant.segment-cont { margin-top: calc(-1 * var(--s-1)); }
/* Model-used badge in a reply's meta row (e.g. "opus") — small, muted pill. */
.msg-model {
  font-size: var(--t-micro);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 5px;
  text-transform: lowercase;
}
/* "Pom is working" typing indicator — three bouncing teal dots. */
.msg.typing .msg-body { padding: 4px 0; }
.typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--c1), calc(0.9 * var(--fx-glow)));
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.msg-meta {
  font-size: var(--t-micro);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.msg.user .msg-meta { justify-content: flex-end; }
.msg-body {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  line-height: 1.55;
  word-wrap: break-word;
  overflow-x: auto;
  /* min-width:0 ensures the bubble shrinks with its flex parent rather than
     overflowing when panels are collapsed/expanded */
  min-width: 0;
  background: var(--bg-elevated);
}
.msg.user .msg-body {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
}
/* Outbox: a message written to the queue but not yet accepted by the server.
   Dashed and dimmed so it can never be mistaken for one that has been sent.
   Normally invisible — with the socket up it flushes immediately. */
.msg.queued .msg-body {
  border-style: dashed;
  opacity: 0.65;
}
/* Parked: the server refused it and the user has to decide. Orange, which is
   reserved for alerts. */
.msg.queued.parked .msg-body {
  border-color: rgba(var(--c3), 0.7);
  opacity: 0.85;
}
.queued-tag {
  font-size: var(--t-micro);
  color: var(--dim);
  font-style: italic;
}
.msg.queued.parked .queued-tag { color: rgba(var(--c3), 0.9); }
/* Queued entries have no hover affordance to discover, so their actions stay
   visible rather than appearing on hover like a sent message's. */
.msg.queued .msg-actions { opacity: 1; }
.queued-count {
  font-size: var(--t-micro);
  color: rgba(var(--c3), 0.9);
  margin-left: var(--s-2);
}
.msg-actions {
  display: flex;
  gap: var(--s-1);
  opacity: 0;
  transition: var(--transition);
}
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button {
  font-size: var(--t-micro);
  padding: 2px 6px;
  color: var(--text-secondary);
  border-color: transparent;
}
.msg-actions button:hover { color: var(--accent); background: transparent; }

.msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}
.msg-file {
  font-size: var(--t-micro);
  padding: 2px 6px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
}

/* ============== TOOL CALL COLLAPSE BLOCK (item 8) ============== */

.tc-block {
  margin-bottom: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11px;
  overflow: hidden;
}
.tc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px var(--s-2);
  background: var(--bg-base);
  gap: var(--s-2);
}
.tc-label {
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-toggle {
  font-size: 10px;
  font-weight: var(--w-head);
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--accent2);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.tc-toggle:hover { background: var(--accent2-soft); }
.tc-detail {
  display: none;
  padding: var(--s-1) var(--s-2);
  background: var(--bg-code);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.tc-block[data-expanded="true"] .tc-detail { display: block; }
.tc-row {
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-row code {
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
}
.tc-args {
  color: var(--text-dim);
}

/* ============== SCROLL-TO-BOTTOM BUTTON (item 9) ============== */

.chat { position: relative; }

.scroll-bottom-btn {
  position: absolute;
  bottom: calc(100% + var(--s-2)); /* float just above the input area */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-small);
  font-weight: calc(var(--w-head) - 100);
  letter-spacing: 0.02em;
  opacity: 0.92;
  transition: opacity var(--transition), background var(--transition);
}
.scroll-bottom-btn:hover { opacity: 1; background: var(--accent2-soft); }

/* Larger tap target on mobile, where the old corner position overlapped Send. */
@media (max-width: 900px) {
  .scroll-bottom-btn {
    bottom: calc(100% + var(--s-3));
    padding: var(--s-2) var(--s-5);
    font-size: var(--t-input);
  }
}

/* ============== MARKDOWN BODY ============== */

.md p { margin: 0 0 var(--s-2); }
.md p:last-child { margin: 0; }
.md h1, .md h2, .md h3, .md h4 {
  margin: var(--s-3) 0 var(--s-1);
  font-weight: calc(var(--w-head) - 100);
  color: var(--text-primary);
}
.md h1 { font-size: var(--t-sub); }
.md h2 { font-size: 15px; }
.md h3 { font-size: 14px; color: var(--accent); }
.md ul, .md ol { margin: 0 0 var(--s-2); padding-left: var(--s-4); }
.md li { margin: 0 0 2px; }
.md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-mid); }
.md del, .md s {
  color: var(--accent);
  text-decoration-line: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.md a:hover { border-bottom-color: var(--accent); }
.md code {
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.md pre {
  background: var(--bg-code);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  margin: var(--s-2) 0;
}
.md pre code { background: transparent; padding: 0; border: none; }
/* Hover "copy" button on chat code blocks — copies the code, no ``` fences. */
.md .code-wrap { position: relative; margin: var(--s-2) 0; }
.md .code-wrap > pre { margin: 0; }
.code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.md .code-wrap:hover .code-copy-btn, .code-copy-btn:focus-visible { opacity: 1; }
.code-copy-btn:hover { color: var(--accent2); border-color: var(--accent2); background: var(--bg-hover); }
.code-copy-btn.copied { color: var(--accent); border-color: var(--accent); opacity: 1; }
/* Touch devices have no hover — keep the button faintly visible so it's reachable. */
@media (hover: none) { .code-copy-btn { opacity: 0.55; } }
.md blockquote {
  margin: 0 0 var(--s-2);
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
}
.md hr { border: none; border-top: 1px solid var(--border); margin: var(--s-3) 0; }

/* ===== File viewer render-mode overrides (scoped, chat bubbles unaffected) ===== */
.viewer-rendered h1, .viewer-rendered h2, .viewer-rendered h3, .viewer-rendered h4 { color: var(--text-primary); }
.viewer-rendered .md-hash { color: var(--accent); }
.viewer-rendered li::marker { color: var(--accent); }
.viewer-rendered blockquote { color: var(--accent); }
.viewer-rendered .md-blank { height: 1em; }
.md table { border-collapse: collapse; margin: var(--s-2) 0; font-size: 12px; max-width: 100%; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; white-space: nowrap; }

/* ============== INPUT AREA ============== */

.input-area {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative; /* positioning context for .scroll-bottom-btn */
}

.input-resize-handle {
  height: 7px;
  flex-shrink: 0;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
}
.input-resize-handle::before {
  content: "";
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}
.input-resize-handle:hover::before { background: var(--accent2); }

.input-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3) 0;
}
.input-attachments:empty { padding: 0; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 6px 2px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}
.attachment-chip .remove {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.attachment-chip .remove:hover { color: var(--error); }

.input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
}

.input-row textarea {
  flex: 1;
  min-height: 36px;
  max-height: 200px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-input);
  line-height: 1.5;
  resize: none;
  border-radius: var(--radius);
  background: var(--bg-input);
}

.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.icon-btn:hover { color: var(--accent); }
.icon-btn.active { color: var(--accent); }

/* STT: recording state — pulsing record dot (click again to stop) */
.icon-btn.recording {
  color: var(--accent2);
  animation: stt-pulse 1.1s ease-in-out infinite;
}
.icon-btn.recording:hover { background: var(--accent2-soft); }
@keyframes stt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* STT: processing state — spinner, disabled appearance */
.icon-btn.processing {
  color: var(--accent2);
  opacity: 0.6;
  cursor: not-allowed;
}
.stt-spin {
  width: 18px; height: 18px;
  animation: spin 0.8s linear infinite;
}

.icon-btn svg { width: 18px; height: 18px; }

/* ---- Attach popover ---- */
.attach-wrap {
  position: relative;
  flex-shrink: 0;
}
.attach-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px 0;
  min-width: 140px;
  z-index: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.attach-option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-3);
  font-size: var(--t-small);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.attach-option:hover { background: var(--bg-hover); color: var(--accent2); }

.send-btn {
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  font-weight: calc(var(--w-head) - 100);
}
.send-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Split-send: [ Send | ▾ ] joined into one control. The ▾ opens the
   SEND/PLAN/ACTION menu; the primary button sends in the current mode. */
.send-split { display: inline-flex; align-items: stretch; }
.send-split .send-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.send-mode-btn {
  height: 36px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  border-left: 1px solid rgba(0, 0, 0, 0.28);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  line-height: 1;
}
.send-mode-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
/* A non-default mode (PLAN/ACTION) tints the whole split pink so it's obvious
   the next send is special; the button label says which. Reverts to teal Send
   after one message. Orange (--c3) stays reserved for alerts. */
.send-btn.mode-plan, .send-btn.mode-action { background: rgb(var(--c2)); border-color: rgb(var(--c2)); }
.send-btn.mode-plan:hover, .send-btn.mode-action:hover { background: rgba(var(--c2), 0.85); border-color: rgba(var(--c2), 0.85); }
.send-split:has(.send-btn.mode-plan) .send-mode-btn,
.send-split:has(.send-btn.mode-action) .send-mode-btn { background: rgb(var(--c2)); border-color: rgb(var(--c2)); }

.stop-btn {
  height: 36px;
  padding: 0 var(--s-3);
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.stop-btn:hover { background: rgba(239, 68, 68, 0.1); }

.input-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3) var(--s-2);
  font-size: var(--t-micro);
  color: var(--text-dim);
}
.input-foot .token-counter { font-variant-numeric: tabular-nums; }
.input-foot .controls-spacer { flex: 1; }
.input-foot .chat-action {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  color: var(--text-secondary);
}
.input-foot .chat-action:hover { color: var(--text-primary); background: var(--bg-hover); }
/* Model picker in the footer — teal to stand out from the plain slash-actions. */
.input-foot .act-model { color: var(--teal); text-transform: lowercase; }
.input-foot .act-model::before { content: '◆ '; opacity: 0.7; }
.input-foot .act-model:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ============== PANEL 2: FILE BROWSER ============== */

.file-tabs {
  display: flex;
  width: 100%;
  height: 100%;
}
.file-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--t-tab);
  border-right: 1px solid var(--border);
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  padding: 0 var(--s-2);
  text-align: center;
}
.file-tab:last-child { border-right: none; }
.file-tab:hover { color: var(--text-primary); }
.file-tab.active {
  color: var(--text-primary);
  background: var(--bg-base);
  border-bottom-color: var(--accent);
}

/* file-pane must be a flex column with min-height:0 so the file-list
   child can grow and scroll correctly within the panel-body */
.file-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.browser-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.browser-controls select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 2px var(--s-2);
  font-size: var(--t-micro);
}
.browser-controls .control-spacer { flex: 1; }
.browser-controls .toggle {
  cursor: pointer;
  font-size: var(--t-micro);
  color: var(--text-secondary);
}
.browser-controls .toggle.on { color: var(--accent); }

.file-list {
  flex: 1;
  overflow-y: auto;
  font-size: var(--t-small);
  padding: var(--s-1) 0;
}
/* #treeList is focusable (tabindex) for keyboard navigation; the row highlight
   is the selection indicator, so suppress the default focus box. */
#treeList:focus, #treeList:focus-visible { outline: none; }

.pin-section {
  border-bottom: 1px solid var(--border);
  padding: var(--s-1) 0 var(--s-2);
  margin-bottom: var(--s-1);
}
.pin-section .section-label {
  font-size: var(--t-micro);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-1) var(--s-3);
}

.file-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3);
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  position: relative;
}
.file-row:hover { background: var(--bg-hover); }
.file-row.active { background: #2f2f2f; color: var(--text-primary); border-left: 2px solid var(--accent2); padding-left: calc(var(--s-3) - 2px); }
.file-row.multi-selected { background: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: calc(var(--s-3) - 2px); }
.file-row.hidden-entry { color: var(--text-dim); }
.file-row.pin-missing { color: var(--text-dim); text-decoration: line-through; opacity: 0.7; }
/* Drag-to-move states */
.file-row.drag-source { opacity: 0.4; }
.file-row.drop-target { background: var(--accent2-soft); outline: 1px solid var(--accent2); outline-offset: -1px; }
.file-row .indent { display: inline-block; }
.file-row .chev {
  width: 10px; height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 8px;
  flex-shrink: 0;
}
.file-row .ftype {
  width: 18px;
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
  font-weight: calc(var(--w-head) - 100);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.file-row.dir .ftype { color: var(--accent); }
.file-row .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.file-row .fmeta {
  font-size: var(--t-micro);
  color: var(--text-dim);
  margin-left: var(--s-2);
}
.search-box {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
}
.search-box input { font-size: var(--t-small); }
.search-mode-toggle {
  display: flex;
  gap: 2px;
  margin-bottom: var(--s-2);
}
.search-mode-btn {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--t-micro);
  padding: 3px var(--s-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.search-mode-btn:hover { color: var(--text-primary); }
.search-mode-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
  color: var(--accent);
}
/* Content-search result rows: two lines (filename:line, then snippet) */
.file-row.grep-row { align-items: flex-start; padding-top: var(--s-1); padding-bottom: var(--s-1); }
.grep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.grep-head { display: flex; align-items: baseline; gap: 1px; overflow: hidden; }
.grep-head .fname { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.grep-line { color: var(--text-dim); font-size: var(--t-micro); flex-shrink: 0; }
.grep-snippet {
  font-size: var(--t-micro);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============== MILLER COLUMNS (Finder-style browser) ============== */
/* The Browser pane renders a horizontal strip of columns; each shows one
   directory's children. Selecting a folder opens its column to the right and
   the strip scrolls to reveal it. */
.file-list.miller {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}
.file-col {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border);
  padding: var(--s-1) 0;
  display: flex;
  flex-direction: column;
}
.file-col > .file-row, .file-col > .col-empty { flex-shrink: 0; }
/* Highlight a column while a Finder file is dragged over its empty space. */
.file-col.col-drop-target { box-shadow: inset 0 0 0 2px var(--accent2); background: var(--bg-hover); }
/* '+' add button at the bottom of each browser column (new note/folder/upload) */
.col-add {
  margin: auto var(--s-2) var(--s-1); /* margin-top:auto pins it to the column bottom */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px var(--s-2);
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--t-small);
  flex-shrink: 0;
  user-select: none;
}
.col-add:hover { color: var(--accent2); border-color: var(--accent2); background: var(--bg-hover); }
.col-add-plus { font-size: 14px; line-height: 1; }
.file-col:last-child { border-right: none; }
/* Trailing disclosure chevron on folder rows (they open a column to the right). */
.file-row .col-chev {
  color: var(--text-dim);
  font-size: 13px;
  flex-shrink: 0;
  padding: 0 2px;
}
/* Dim highlight for the folder in each non-active column that leads onward. */
.file-row.on-path { background: var(--bg-hover); }
.file-row.on-path .col-chev { color: var(--text-secondary); }
.col-empty {
  padding: var(--s-2) var(--s-3);
  color: var(--text-dim);
  font-size: var(--t-micro);
}
/* Pinned shortcuts sit above the columns so their rows never share a data-path
   with a tree row inside the column strip. */
.miller-pins {
  flex-shrink: 0;
  padding: var(--s-1) 0;
  max-height: 128px;
  overflow-y: auto;
}
/* Draggable separator under the pins strip — drag to make the pinned area taller. */
.pins-resize {
  flex-shrink: 0;
  height: 7px;
  cursor: row-resize;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.pins-resize:hover { background: var(--bg-hover); }
.pins-resize::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin: 2px auto 0;
  border-radius: 2px;
  background: var(--border-strong, var(--text-dim));
}
body.pins-resizing, body.pins-resizing * { cursor: row-resize !important; user-select: none !important; }
/* Pin reorder drag: source dims, drop position shows an accent insertion line. */
.miller-pins .file-row.pin-dragging { opacity: 0.4; }
.miller-pins .file-row.pin-drop-before { box-shadow: inset 0 2px 0 var(--accent2); }
.miller-pins .file-row.pin-drop-after { box-shadow: inset 0 -2px 0 var(--accent2); }
.miller-pins .section-label {
  font-size: var(--t-micro);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-1) var(--s-3);
}
.crumb-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.miller-crumb {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}
.crumb-up-btn {
  display: none; /* mobile-only control */
  flex-shrink: 0;
  margin: var(--s-1) var(--s-2);
  padding: var(--s-1) var(--s-3);
  font: inherit;
  font-size: var(--t-micro);
  color: var(--teal);
  background: rgba(var(--c1), 0.06);
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
@media (max-width: 900px) {
  /* Path bar sits at the BOTTOM of the browser pane on mobile, with an
     up-one-level button at its right. */
  .crumb-bar { order: 10; border-bottom: none; border-top: 1px solid var(--border); }
  .crumb-up-btn { display: inline-block; }
}
.miller-crumb .crumb-seg { cursor: pointer; padding: 0 1px; }
.miller-crumb .crumb-seg:hover { color: var(--accent); }
.miller-crumb .crumb-seg:last-child { color: var(--text-primary); }
.miller-crumb .crumb-sep { color: var(--text-dim); }

/* Context menu */
.context-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px 0;
  min-width: 180px;
  z-index: 1000;
  font-size: var(--t-small);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.context-menu-item {
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  color: var(--text-primary);
}
.context-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.context-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.context-menu-item.danger { color: var(--error); }
.context-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); }

/* ============== PANEL 3: VIEWER ============== */

.viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.viewer-header {
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  height: var(--tabs-h);
  border-bottom: 1px solid var(--border);
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--text-secondary);
  /* Take the free space and let the path truncate, so the "info" + collapse
     buttons beside us are never pushed off the (overflow:hidden) header — on a
     narrow phone flex-shrink:0 here clipped them, leaving no way to open info. */
  flex: 1;
  min-width: 0;
}
.viewer-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.viewer-path .dim { color: var(--text-dim); }
.viewer-mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.viewer-mode-toggle button {
  border: none;
  border-radius: 0;
  padding: 2px 8px;
  font-size: var(--t-micro);
  border-right: 1px solid var(--border);
}
.viewer-mode-toggle button:last-child { border-right: none; }
.viewer-mode-toggle button.active {
  background: var(--accent);
  color: var(--bg-base);
}

/* ---- Metadata pane ---- */
.viewer-info-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  padding: 2px 8px;
  margin-right: var(--s-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  flex-shrink: 0;
}
.viewer-info-btn:hover { color: var(--teal); border-color: var(--teal); }
/* Mobile-only "⋯" menu that consolidates the viewer header controls (the top bar
   is too cramped on a phone). Hidden on desktop; shown via the media query below. */
.viewer-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  padding: 2px 9px;
  margin-right: var(--s-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  flex-shrink: 0;
}
.viewer-menu-btn:hover { color: var(--teal); border-color: var(--teal); }
.viewer-info-btn[aria-pressed="true"] { color: var(--teal); border-color: var(--border-strong); background: rgba(var(--c1), 0.10); }

/* The panel body becomes a row: viewer content + the thin metadata column. */
.viewer-panel-body { flex-direction: row; }
/* min-height:0 lets .viewer-body scroll vertically inside the mobile column
   layout — without it viewer-main grows to content height and nothing scrolls. */
.viewer-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.metadata-pane {
  flex: 0 0 210px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.15);
  display: none; /* shown only when body.meta-open */
}
body.meta-open .metadata-pane { display: block; }

.metadata-content { padding: var(--s-3); display: grid; gap: var(--s-3); }
.metadata-empty { color: var(--dim); font-size: var(--t-small); padding: var(--s-2); }
.metadata-row { display: grid; gap: 2px; }
.metadata-label {
  font-size: var(--t-micro);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metadata-value {
  font-size: var(--t-small);
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.4;
}
.metadata-value.mono { font-size: var(--t-micro); color: var(--text-secondary); }
.metadata-value.copyable { cursor: pointer; border-radius: var(--radius); }
.metadata-value.copyable:hover {
  background: rgba(var(--c1), 0.10);
  box-shadow: inset 0 0 0 1px var(--border);
}
.metadata-value.copied { color: var(--teal); }

/* Mobile: the viewer pane is already narrow, so the metadata pane stacks ABOVE
   the viewer content as a full-width band instead of a side column. */
@media (max-width: 900px) {
  .viewer-panel-body { flex-direction: column; }
  body.meta-open .metadata-pane {
    flex: 0 0 auto;
    max-height: 42%;
    border-left: none;
    border-bottom: 1px solid var(--border);
    order: -1;
  }
  .metadata-content { grid-template-columns: 1fr 1fr; }
  /* Cramped mobile header: fold the render/edit toggle, info and (mobile-broken)
     collapse controls into the "⋯" menu so nothing gets clipped off the edge. */
  #panelViewer .viewer-mode-toggle,
  #panelViewer .viewer-info-btn,
  #panelViewer .panel-header .collapse-btn { display: none; }
  #panelViewer .viewer-menu-btn { display: inline-flex; }
}

.viewer-body {
  flex: 1;
  overflow: auto;
  position: relative;
}
.viewer-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  font-size: var(--t-small);
  text-align: center;
  padding: var(--s-4);
}
.viewer-rendered {
  padding: var(--s-4) var(--s-5);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}
.viewer-editor {
  width: 100%;
  height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  border: none;
  padding: var(--s-3);
  font-size: var(--t-body);
  line-height: 1.55;
  resize: none;
}
.viewer-editor:focus { outline: none; }
.viewer-image {
  display: block;
  max-width: 100%;
  margin: var(--s-4) auto;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 80ms ease;
}
.viewer-image-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.viewer-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-4);
  color: var(--text-secondary);
  font-size: var(--t-small);
}

.viewer-footer {
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
  font-size: var(--t-small);
  gap: var(--s-2);
}
.viewer-footer .save-status { color: var(--text-dim); flex: 1; }
.viewer-footer .save-status.dirty { color: var(--warning); }

/* ============== MODAL ============== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--s-4);
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.modal-title { font-size: var(--t-sub); font-weight: calc(var(--w-head) - 100); }
.modal-body { color: var(--text-secondary); font-size: var(--t-small); line-height: 1.5; }
.modal-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }

.modal-option {
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.modal-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.modal-option .opt-title { color: var(--text-primary); font-weight: calc(var(--w-head) - 200); margin-bottom: 2px; }
.modal-option .opt-desc { color: var(--text-dim); font-size: var(--t-micro); }

/* Move modal */
.modal-move {
  max-width: 480px;
}
.move-search {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  color: var(--text-primary);
}
.move-search:focus { outline: none; border-color: var(--accent2); }
.move-tree {
  flex: 1;
  min-height: 240px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
}
/* Disable hover pointer events on selected row to avoid double-click confusion */
.move-dir-row.active { pointer-events: none; }

/* Status modal */
.modal-status {
  max-width: 60vw;
  width: 60vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-status #statusContent {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.6;
}
.status-loading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-dim);
  padding: var(--s-3);
}
.status-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status-collected-at {
  font-size: var(--t-micro);
  color: var(--text-dim);
  text-align: left;
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
}
.status-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-section-title {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: calc(var(--w-head) - 100);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.status-row {
  display: flex;
  gap: var(--s-3);
  text-align: left;
  font-size: var(--t-small);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.status-row .status-k { color: var(--text-secondary); flex-shrink: 0; }
.status-row .status-v { color: var(--text-primary); }
.status-row.concern,
.status-row.concern .status-v { color: var(--accent2); }
.status-note {
  font-size: var(--t-micro);
  color: var(--text-dim);
  font-style: normal;
}
.status-spacer { height: var(--s-1); }

/* In-editor find bar */
#panelViewer .panel-body { position: relative; }
.editor-find {
  position: absolute;
  top: var(--s-2);
  right: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s-1) var(--s-2);
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.editor-find input {
  width: 150px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 2px 6px;
  font-family: inherit;
  font-size: var(--t-small);
}
.editor-find .find-count {
  color: var(--text-dim);
  font-size: var(--t-micro);
  min-width: 36px;
  text-align: center;
}
.editor-find button { padding: 0 6px; }

/* Keyboard shortcut cheat sheet */
.shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 60vh;
  overflow-y: auto;
  font-size: var(--t-small);
}
.sc-group-title {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: calc(var(--w-head) - 100);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-1);
}
.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: 3px 0;
}
.sc-label { color: var(--text-secondary); }
.sc-keys { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sc-plus { color: var(--text-dim); }
.shortcuts kbd {
  font-family: inherit;
  font-size: var(--t-micro);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Status header button */
.status-btn {
  font-size: var(--t-micro);
  color: var(--text-secondary);
  padding: 2px 8px;
}
.status-btn:hover { color: var(--accent2); }

/* ============== TOAST ============== */

.toast {
  position: fixed;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  z-index: 3000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.toast.error { border-color: var(--error); color: var(--error); }
.toast.success { border-color: var(--success); color: var(--success); }

/* ============== DISCONNECT OVERLAY ============== */

.disconnect-banner {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: var(--error);
  color: white;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}
.disconnect-banner button {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.4);
  color: white;
}

/* ============== STT MODAL ============== */
/* Centred recording/transcribing modal. z-index 2000 ties the general modal
   backdrop deliberately: the two are never visible at the same time (the STT
   modal hides before the retry/discard modal opens). Toasts (3000) sit above. */

/* ============== CC ALERT BANNER ============== */

.cc-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-strong);
  z-index: 900;
}
.cc-alert-banner[hidden] { display: none; }
.cc-alert-banner.auth {
  background: rgba(239, 68, 68, 0.14);
  color: var(--text-primary);
  border-left: 3px solid var(--error);
}
.cc-alert-banner.limit {
  background: rgba(251, 191, 36, 0.12);
  color: var(--text-primary);
  border-left: 3px solid var(--warning);
}
.cc-alert-text { flex: 1; word-break: break-word; }
.cc-alert-dismiss {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--t-micro);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.cc-alert-dismiss:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* ============== NOTEPAD ============== */

/* Shared textarea style used by both desktop overlay and mobile panel */
.notepad-textarea {
  flex: 1;
  width: 100%;
  resize: none;
  background: var(--bg-input);
  color: var(--text-primary);
  border: none;
  border-radius: 0;
  padding: var(--s-3);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  outline: none;
  min-height: 0;
}
.notepad-textarea::placeholder { color: var(--text-dim); }

/* ---- Desktop overlay (hidden on mobile) ---- */
.notepad-overlay {
  position: fixed;
  top: var(--header-h);
  right: 0;
  height: calc(100vh - var(--header-h));
  width: 85vw;         /* overridden by JS with saved value */
  background: var(--bg-panel);
  border-left: 1px solid var(--border-strong);
  display: flex;
  flex-direction: row;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 220ms ease;
  pointer-events: none;
}
.notepad-overlay.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Drag handle on the left edge */
.notepad-resize-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: ew-resize;
  background: transparent;
  border-left: 2px solid var(--border);
  transition: border-color var(--transition);
}
.notepad-resize-handle:hover { border-color: var(--accent2); }

.notepad-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.notepad-header {
  display: flex;
  align-items: center;
  height: var(--tabs-h);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-3) 0 var(--s-3);
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.notepad-title {
  flex: 1;
  font-size: var(--t-small);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.notepad-close-btn {
  border-left: none;
  border: 1px solid var(--accent2-mid);
  border-radius: var(--radius);
  width: 26px;
  height: 26px;
}

/* Floating vertical spine tab on the right edge */
.notepad-toggle-btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) 4px;
  background: var(--bg-panel);
  color: var(--accent2);
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: calc(var(--w-head) - 100);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: var(--transition);
}
.notepad-toggle-btn span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.notepad-toggle-btn:hover { background: var(--accent2-soft); }

/* Dim backdrop shown while the pad is open; click to collapse */
.notepad-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.35);
  display: none;
}
.notepad-backdrop.open { display: block; }

/* Hide desktop notepad toggle and overlay on mobile */
@media (max-width: 900px) {
  .notepad-overlay { display: none; }
  .notepad-toggle-btn { display: none; }
  .notepad-backdrop { display: none; }
  .panel-notepad-mobile { display: flex; }
  .input-resize-handle { display: none; }
}

/* Hide mobile notepad panel on desktop */
@media (min-width: 901px) {
  .panel-notepad-mobile { display: none !important; }
}

/* ============== DRAG OVERLAY ============== */

.drag-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 107, 31, 0.1);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
  color: var(--accent);
  font-weight: calc(var(--w-head) - 100);
  font-size: var(--t-sub);
}

/* ============== MOBILE ============== */

@media (max-width: 900px) {
  .panels {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* This is a REAL horizontal scroller (unlike desktop, which is overflow:hidden
       and scrolled by JS), so swiping past either end would chain to the document
       and trigger the browser's back gesture. Contain the overscroll here. */
    overscroll-behavior-x: contain;
    transform: none !important;
    transition: none;
  }
  /* Pages dissolve on mobile so the panels sit flat in the carousel. */
  .page { display: contents; }
  /* Visual order (CSS order, independent of DOM). The app lands on Claude, so a
     left swipe reveals the pad then TLA, and right swipes walk files -> viewer
     -> Gemini -> cron. TLA is a full pane here now, no longer hidden.
     The carousel LOOPS: clone panes bracket the strip (orders 0 and 8), and
     landing on one teleports to its twin. Keep these numbers in sync with
     MOBILE_PANE_IDS in app_shell.js. */
  .pane-clone-before { order: 0; }
  #panelTLA { order: 1; }
  .panel-notepad-mobile { order: 2; }
  #panelChatC { order: 3; }
  #panelFiles { order: 4; }
  #panelViewer { order: 5; }
  #panelSkills { order: 6; }
  #panelCron { order: 7; }
  .pane-clone-after { order: 8; }
  .pane-clone { display: flex; }
  .panels::-webkit-scrollbar { display: none; }
  .panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-right: none;
    width: 100%;
  }
  .mobile-nav-label { display: inline; }
  .msg { max-width: 100%; }
  .viewer-rendered { padding: var(--s-3); }
  /* Only the deepest column shows on mobile (full width), so the horizontal
     column strip never competes with the carousel swipe. The breadcrumb above
     handles stepping back up. */
  .file-col {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    border-right: none;
  }
  .file-col:not(:last-child) { display: none; }
}

@media (max-width: 500px) {
  :root {
    --header-h: 40px;
    --tabs-h: 36px;
  }
  .brand { font-size: var(--t-body); }
  .sync-indicator span:not(.sync-dot) { display: none; }
  .instance-tab { font-size: var(--t-small); padding: 0 2px; gap: 3px; }
}

/* ============== XB OPEN CHIP ============== */

.xb-open-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  margin: 2px 0;
  font-weight: calc(var(--w-head) - 200);
  transition: var(--transition);
}
.xb-open-chip:hover {
  background: var(--accent-mid);
  border-color: var(--accent);
  color: var(--text-primary);
}
.xb-open-chip::before {
  content: "→ open";
  color: var(--text-dim);
  margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============== PANEL COLLAPSE ============== */

.panel-collapsed-shell {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
  padding: var(--s-2) 0;
  gap: var(--s-2);
}
.panel.collapsed .panel-header,
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-collapsed-shell { display: flex; }
.panel.collapsed {
  min-width: 36px !important;
  max-width: 36px !important;
  overflow: hidden;
}
.panel-collapsed-shell .expand-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent2-mid);
  background: transparent;
  color: var(--accent2);
  border-radius: var(--radius);
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: calc(var(--w-head) - 100);
  line-height: 1;
}
.panel-collapsed-shell .expand-btn:hover {
  color: var(--accent2);
  border-color: var(--accent2);
  background: var(--accent2-soft);
}
.panel-collapsed-shell .vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-top: var(--s-2);
  user-select: none;
}
.panel-collapsed-shell .vertical-status {
  margin-top: auto;
  margin-bottom: var(--s-2);
}

.collapse-btn {
  width: 26px;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--accent2);
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: calc(var(--w-head) - 100);
  line-height: 1;
}
.collapse-btn:hover { color: var(--accent2); background: var(--accent2-soft); }

/* ============== ROW ACTIONS ============== */

.file-row .row-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity 100ms;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.file-row:hover .row-actions { opacity: 1; }
.row-actions-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.row-actions-btn:hover {
  color: var(--accent);
  background: var(--bg-hover);
}
@media (max-width: 900px) {
  .file-row .row-actions { opacity: 1; }
}

/* ============================================================
   OVERDRIVE (SOFTENED) — THEME LAYER
   Appended last so these neon/glass treatments win on source order.
   Colour/shape tokens above already recolour the app; this layer adds
   the frosted glass, ambient blobs, and per-element glow the spec calls for.
   ============================================================ */

/* ---- Ambient underlay blobs (give the backdrop-blur something to refract) ---- */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-blobs .blob {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}
.bg-blobs .blob.teal { background: radial-gradient(circle, rgba(var(--c1), 0.40), transparent 70%); }
.bg-blobs .blob.pink { background: radial-gradient(circle, rgba(var(--c2), 0.32), transparent 70%); }
.bg-blobs .blob.b1 { top: -8vw; left: -6vw; animation: drift1 11s ease-in-out infinite; }
.bg-blobs .blob.b2 { bottom: -12vw; right: -4vw; animation: drift2 10s ease-in-out infinite; }
.bg-blobs .blob.b3 { top: 30vh; left: 40vw; width: 34vw; height: 34vw; animation: drift3 13s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6vw, 5vh); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5vw, -6vh); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw, 4vh) scale(1.08); } }

/* Keep the app above the blobs so panels can frost them. */
.app { position: relative; z-index: 1; background: transparent; }
body { background: var(--abyss); }

/* ---- Frosted glass panes ---- */
.header {
  background: rgba(10, 14, 34, 0.55);
  backdrop-filter: blur(calc(16px * var(--fx-glass))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(16px * var(--fx-glass))) saturate(180%);
  border-bottom: 1px solid rgba(var(--c1), 0.30);
}
.panel {
  background: rgba(10, 14, 34, 0.45);
  background-image: linear-gradient(160deg, rgba(var(--c1), 0.06), rgba(var(--c2), 0.04));
  backdrop-filter: blur(calc(16px * var(--fx-glass))) saturate(200%);
  -webkit-backdrop-filter: blur(calc(16px * var(--fx-glass))) saturate(200%);
  border-right: 1px solid rgba(var(--c1), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Brand: static wordmark, teal glow, teal brand dot ---- */
.brand { font-weight: calc(var(--w-head) + 100); color: #fff; text-shadow: 0 0 18px rgba(var(--c1), calc(0.60 * var(--fx-glow))); }
.brand .dot { background: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 10px rgba(var(--c1), calc(0.9 * var(--fx-glow))); width: 8px; height: 8px; }

/* ---- Sync pill: teal outline, faint fill, pulsing dot ---- */
.sync-indicator {
  border-color: rgba(var(--c1), 0.35);
  background: rgba(var(--c1), 0.05);
  border-radius: var(--radius-lg);
}
.sync-dot { background: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 8px rgba(var(--c1), calc(0.9 * var(--fx-glow))); }

/* ---- Nav dots ---- */
.mobile-nav-dots .nd { background: var(--dim); }
.mobile-nav-dots .nd.on { background: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 10px rgba(var(--c1), calc(0.9 * var(--fx-glow))); }

/* ---- Session tabs: active = solid teal fill, dark ink, glow ---- */
.instance-tab { border-right-color: rgba(var(--c1), 0.14); }
.instance-tab.active {
  background: var(--teal);
  color: #031008;
  border-bottom-color: transparent;
  box-shadow: 0 0 20px rgba(var(--c1), calc(0.55 * var(--fx-glow))), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.instance-tab.active .tab-label { color: #031008; }

/* ---- Status dots: idle/live = teal, unread = pink, error = orange ---- */
.status-dot { background: var(--dim); }
/* Read/unread signal on the instance dots: UNREAD (returned from the AI, not yet
   viewed) = teal (c1); READ (viewed, or idle with a conversation) = pink (c2).
   In-progress stays teal but PULSES; error is orange. Uniform across backends —
   the read/unread meaning matters more than per-backend dot colour. */
.status-dot.idle-active { background: rgba(var(--c2), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 8px rgba(var(--c2), calc(0.9 * var(--fx-glow))); }
.status-dot.thinking,
.status-dot.working { background: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 8px rgba(var(--c1), calc(0.9 * var(--fx-glow))); animation: pulse 1.2s ease-in-out infinite; }
.status-dot.done-unread { background: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 8px rgba(var(--c1), calc(0.9 * var(--fx-glow))); }
.status-dot.error { background: rgba(var(--c3), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 8px rgba(var(--c3), calc(0.9 * var(--fx-glow))); }

/* ---- Panel tabs (Browser / Search / Recent): pink underline + glow ---- */
.file-tab.active {
  color: var(--pink);
  background: transparent;
  border-bottom: 2px solid var(--pink);
  text-shadow: 0 0 12px rgba(var(--c2), calc(0.55 * var(--fx-glow)));
}

/* ---- Chat bubbles: agent teal-tint (left), user pink-tint (right), 8px ---- */
.msg-body {
  border-radius: var(--radius-pane);
  background: rgba(var(--c1), 0.07);
  border: 1px solid rgba(var(--c1), 0.30);
  box-shadow: 0 0 18px rgba(var(--c1), calc(0.10 * var(--fx-glow))), inset 0 1px 0 rgba(255,255,255,0.10);
}
.msg.user .msg-body {
  background: rgba(var(--c2), 0.09);
  border-color: rgba(var(--c2), 0.40);
  box-shadow: 0 0 18px rgba(var(--c2), calc(0.12 * var(--fx-glow))), inset 0 1px 0 rgba(255,255,255,0.10);
}
.msg.assistant .msg-meta span:first-child { color: var(--teal); letter-spacing: 0.12em; }
.msg.user .msg-meta span:first-child { color: var(--pink); letter-spacing: 0.12em; }

/* ---- Send button: solid teal, dark ink, strong glow ---- */
.send-btn {
  color: #031008;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 22px rgba(var(--c1), calc(0.55 * var(--fx-glow)));
  font-weight: var(--w-head);
  letter-spacing: 0.04em;
}
button.primary { color: #031008; box-shadow: 0 0 20px rgba(var(--c1), calc(0.45 * var(--fx-glow))); }

/* ---- Inputs: near-black glass, teal caret + focus glow ---- */
input[type=text], input[type=password], input[type=search], textarea {
  border-radius: var(--radius-lg);
  caret-color: var(--teal);
}
input:focus, textarea:focus { border-color: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: 0 0 0 1px rgba(var(--c1), calc(0.35 * var(--fx-glow))), 0 0 16px rgba(var(--c1), calc(0.20 * var(--fx-glow))); }
.icon-btn { border-radius: var(--radius-lg); }

/* ---- File tree: DIR tag teal glow, MD tag pink glow, rows 4px ---- */
.file-row { border-radius: 4px; }
.file-row.dir .ftype { color: rgba(var(--c1), calc(0.9 * var(--fx-glow))); text-shadow: 0 0 8px rgba(var(--c1), calc(0.45 * var(--fx-glow))); }
.file-row.ext-md .ftype,
.file-row.ext-markdown .ftype { color: rgba(var(--c2), calc(0.9 * var(--fx-glow))); text-shadow: 0 0 8px rgba(var(--c2), calc(0.45 * var(--fx-glow))); }
.file-row .col-chev { color: var(--dim); }
.file-row.active { background: rgba(var(--c1), calc(0.10 * var(--fx-glow))); border-left-color: rgba(var(--c1), calc(0.9 * var(--fx-glow))); box-shadow: inset 0 0 12px rgba(var(--c1), calc(0.08 * var(--fx-glow))); }
.file-row.on-path { background: rgba(var(--c1), 0.06); }

/* ---- Pinned card: faint teal-outlined glass ---- */
.miller-pins {
  margin: var(--s-2);
  border: 1px solid rgba(var(--c1), 0.30);
  border-radius: var(--radius-pane);
  background: rgba(var(--c1), 0.04);
}
.miller-pins .section-label,
.pin-section .section-label { color: var(--dim); }

/* ---- Modals, menus, toasts, notepad, STT: glass panes ---- */
.modal, .context-menu, .notepad-inner {
  background: rgba(10, 14, 34, 0.55);
  background-image: linear-gradient(160deg, rgba(var(--c1), 0.06), rgba(var(--c2), 0.04));
  backdrop-filter: blur(calc(18px * var(--fx-glass))) saturate(200%);
  -webkit-backdrop-filter: blur(calc(18px * var(--fx-glass))) saturate(200%);
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-pane);
  box-shadow: 0 0 40px rgba(var(--c1), calc(0.12 * var(--fx-glow))), inset 0 1px 0 rgba(255,255,255,0.14);
}
.toast {
  background: rgba(10, 14, 34, 0.85);
  backdrop-filter: blur(calc(14px * var(--fx-glass))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(14px * var(--fx-glass))) saturate(180%);
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-lg);
}
.toast.success { border-color: rgba(var(--c1), 0.55); color: var(--teal); }
.toast.error { border-color: rgba(var(--c3), 0.6); color: var(--orange); }
.notepad-overlay { background: transparent; }
.attach-popover {
  background: rgba(10, 14, 34, 0.85);
  backdrop-filter: blur(calc(14px * var(--fx-glass))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(14px * var(--fx-glass))) saturate(180%);
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-lg);
}

/* ---- Attachment + open chips ---- */
.attachment-chip { border-radius: var(--radius-lg); }
.xb-open-chip { border-radius: var(--radius-lg); box-shadow: 0 0 12px rgba(var(--c1), calc(0.18 * var(--fx-glow))); }

/* ---- Alerts: orange only ---- */
.cc-alert-banner {
  background: rgba(var(--c3), 0.10);
  backdrop-filter: blur(calc(12px * var(--fx-glass)));
  -webkit-backdrop-filter: blur(calc(12px * var(--fx-glass)));
}
.cc-alert-banner.auth,
.cc-alert-banner.limit {
  background: rgba(var(--c3), 0.12);
  border-left: 3px solid var(--orange);
  box-shadow: inset 0 0 24px rgba(var(--c3), calc(0.08 * var(--fx-glow)));
}
.cc-alert-text { color: var(--text-primary); }

/* ---- Scrollbars ---- */
::-webkit-scrollbar-thumb { background: rgba(var(--c1), 0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--c1), 0.38); }

/* ---- Links + markdown accents ---- */
a { color: var(--teal); }
.md h3 { color: var(--teal); }
.md a { color: var(--teal); border-bottom-color: rgba(var(--c1), 0.4); }
.md code { background: var(--bg-code); border-color: rgba(var(--c1), 0.18); }

/* Primary text runs pure white (user call, deviates from the spec's #C4D3DE ink). */

/* ============== TOKEN LIMIT ANXIETY PANEL ============== */
/* Middle column of the chat page: an iframe of the live TLA dashboard
   (github.io Pages). Display-only — no TLA data lives in Pom. */
.panel-tla .panel-header { gap: var(--s-2); padding: 0 0 0 var(--s-3); }
.tla-title {
  flex: 1;
  font-size: var(--t-small);
  font-weight: var(--w-head);
  letter-spacing: 0.12em;
  color: var(--teal);
  text-shadow: 0 0 12px rgba(var(--c1), calc(0.45 * var(--fx-glow)));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tla-open-link {
  flex-shrink: 0;
  font-size: var(--t-micro);
  color: var(--dim);
  text-decoration: none;
  border: 1px solid rgba(var(--c1), 0.30);
  border-radius: var(--radius-lg);
  padding: 2px 8px;
}
.tla-open-link:hover { color: var(--teal); border-color: var(--teal); text-decoration: none; }
.tla-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
}
/* TLA is itself a dark glass app; keep Pom's pane treatment off the frame so
   the two glass layers don't stack blur. */
.panel-tla .panel-body { padding: 0; }

/* ---- TLA swipe escape hatches (mobile only) ----
   On Android a cross-origin iframe tends to swallow horizontal touch pans rather
   than chaining them to the parent scroll container, so a swipe that starts
   inside TLA may never reach the carousel — stranding the user on this pane.
   These transparent gutters sit ABOVE the iframe at each edge and receive the
   touch instead, so the carousel scrolls normally.

   Desktop needs none of this: the pager is a JS wheel handler, and
   body.dragging-cols already neutralises the iframe during a drag. */
.tla-body { position: relative; }
.tla-swipe-gutter { display: none; }

@media (max-width: 900px) {
  .tla-swipe-gutter {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 5;
    background: transparent;
    /* The gutter must pan the carousel, not scroll the frame under it. */
    touch-action: pan-x;
  }
  .tla-swipe-gutter.left { left: 0; }
  .tla-swipe-gutter.right { right: 0; }
}

/* ============== LANDSCAPE GUARD (portrait lock fallback) ============== */
/* Hidden everywhere by default. The installed PWA never sees this — the manifest
   locks it to portrait. This is only for an ordinary browser tab, where the
   Orientation API refuses to lock and the app would otherwise render sideways
   (and, being wide enough to cross the 900px breakpoint, flip into the desktop
   three-page layout on a phone). */
.rotate-guard { display: none; }

/* Touch devices in landscape only. `pointer: coarse` + `hover: none` is what
   keeps a laptop — whose normal state IS landscape — from ever seeing this. */
@media (orientation: landscape) and (pointer: coarse) and (hover: none) {
  .rotate-guard {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    /* Opaque: the app behind must not show through. */
    background: var(--bg-base);
    text-align: center;
    padding: var(--s-4);
  }
  .rotate-guard-inner { max-width: 22rem; }
  /* Drawn in CSS, not typed as a glyph: JetBrains Mono has no box-drawing
     character for this and it rendered as tofu. */
  .rotate-guard-icon {
    width: 34px;
    height: 56px;
    margin: 0 auto var(--s-3);
    border: 2px solid rgba(var(--c1), calc(0.9 * var(--fx-glow)));
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(var(--c1), calc(0.4 * var(--fx-glow)));
    font-size: 0;
  }
  .rotate-guard-title {
    font-size: var(--t-sub);
    color: var(--text-primary);
    font-weight: var(--w-head);
    margin-bottom: var(--s-2);
  }
  .rotate-guard-text { font-size: var(--t-small); color: var(--text-secondary); }
  /* Nothing behind it can be reached or scrolled while it is up. */
  .app { pointer-events: none; }
}

/* ============== HOTKEY HINT OVERLAY ============== */
/* Teal badges shown while Cmd+Shift is held (see showHotkeyHints). Non-
   interactive: it is a transient reference layer over the live UI. */
#hotkeyHints {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6000;
}
.hotkey-badge {
  position: fixed;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--w-head);
  line-height: 1;
  color: var(--bg-base);
  background: rgba(var(--c1), 0.95);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(var(--c1), calc(0.8 * var(--fx-glow)));
  animation: hk-pop 120ms ease-out;
}
@keyframes hk-pop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}
.hotkey-legend {
  position: fixed;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: 4px 8px;
  font-size: var(--t-micro);
  color: var(--teal);
  background: rgba(4, 5, 14, 0.92);
  border: 1px solid rgba(var(--c1), 0.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 12px rgba(var(--c1), calc(0.4 * var(--fx-glow)));
  white-space: nowrap;
  animation: hk-pop 120ms ease-out;
}
.hotkey-legend b {
  display: inline-block;
  margin-right: 4px;
  padding: 0 3px;
  color: var(--bg-base);
  background: rgba(var(--c1), 0.95);
  border-radius: 3px;
  font-weight: var(--w-head);
}

/* ============== CRON RUN BOARD ============== */

.cron-title {
  padding: 0 var(--s-3);
  font-size: var(--t-small);
  color: var(--text-secondary);
  font-weight: calc(var(--w-head) - 200);
}
.cron-summary {
  font-size: var(--t-micro);
  color: var(--dim);
  margin-right: auto;
}
.cron-summary.has-failure { color: rgba(var(--c3), 0.95); }
.cron-refresh {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  padding: 2px 8px;
  margin-right: var(--s-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.cron-refresh:hover { color: var(--teal); border-color: var(--teal); }

/* ============== SKILLS PANEL (ops page, was Gemini) ============== */
.panel-header .controls-spacer { flex: 1; }
.skills-title { font-size: var(--t-small); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
.skills-action { cursor: pointer; padding: 2px 8px; border-radius: var(--radius); color: var(--text-secondary); font-size: var(--t-small); }
.skills-action:hover { color: var(--text-primary); background: var(--bg-hover); }
.skills-list { flex: 1; overflow-y: auto; padding: var(--s-1) 0; min-height: 0; }
.skills-section-label { font-size: var(--t-micro); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--s-2) var(--s-3) var(--s-1); }
.skills-row { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); cursor: pointer; font-size: 13px; }
.skills-row:hover { background: var(--bg-hover); }
.skills-ic { color: var(--teal); flex-shrink: 0; }
.skills-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skills-empty { padding: var(--s-2) var(--s-3); color: var(--text-dim); font-size: var(--t-small); }
.skills-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.skills-editor-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: var(--t-small); }
.skills-back { cursor: pointer; color: var(--text-secondary); padding: 2px 6px; border-radius: var(--radius); flex-shrink: 0; }
.skills-back:hover { color: var(--text-primary); background: var(--bg-hover); }
.skills-editing { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.skills-textarea { flex: 1; min-height: 0; width: 100%; border: none; background: var(--bg-code); color: var(--text-primary); font-family: inherit; font-size: 12px; line-height: 1.5; padding: var(--s-3); resize: none; outline: none; }

.cron-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cron-list { flex: 0 0 auto; max-height: 45%; overflow-y: auto; border-bottom: 1px solid var(--border); }
.cron-detail { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3); }
.cron-empty { padding: var(--s-4); color: var(--dim); font-size: var(--t-small); text-align: center; }
.cron-hint { color: var(--dim); font-size: var(--t-micro); }

.cron-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.cron-row:hover { background: rgba(var(--c1), 0.06); }
.cron-row.active {
  background: rgba(var(--c1), calc(0.10 * var(--fx-glow)));
  border-left-color: rgba(var(--c1), calc(0.9 * var(--fx-glow)));
}
.cron-row-main { flex: 1; min-width: 0; }
.cron-row-name {
  font-size: var(--t-small);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cron-row-sub { font-size: var(--t-micro); color: var(--dim); }
.cron-row-meta { text-align: right; font-size: var(--t-micro); color: var(--text-secondary); }

/* Status dots: teal is ok/idle (there is no green anywhere in this theme),
   pink is running, orange is failure — orange is reserved for alerts. */
.cron-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dim);
}
.cron-dot.ok {
  background: rgba(var(--c1), calc(0.9 * var(--fx-glow)));
  box-shadow: 0 0 8px rgba(var(--c1), calc(0.7 * var(--fx-glow)));
}
.cron-dot.running {
  background: rgba(var(--c2), calc(0.9 * var(--fx-glow)));
  box-shadow: 0 0 8px rgba(var(--c2), calc(0.7 * var(--fx-glow)));
  animation: cron-pulse 1.2s ease-in-out infinite;
}
.cron-dot.failed, .cron-dot.refused {
  background: rgba(var(--c3), calc(0.95 * var(--fx-glow)));
  box-shadow: 0 0 8px rgba(var(--c3), calc(0.8 * var(--fx-glow)));
}
@keyframes cron-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.cron-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.cron-detail-name { font-size: var(--t-body); color: var(--text-primary); font-weight: calc(var(--w-head) - 100); }
.cron-run-btn {
  background: transparent;
  border: 1px solid rgba(var(--c1), 0.45);
  color: var(--teal);
  font-size: var(--t-micro);
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  flex-shrink: 0;
}
.cron-run-btn:hover:not(:disabled) { box-shadow: 0 0 12px rgba(var(--c1), calc(0.25 * var(--fx-glow))); }
.cron-run-btn:disabled { opacity: 0.45; cursor: default; }

.cron-facts { margin: var(--s-3) 0; display: grid; gap: 4px; }
.cron-facts > div { display: flex; gap: var(--s-2); font-size: var(--t-micro); color: var(--text-secondary); }
.cron-facts span { color: var(--dim); min-width: 84px; }
.cron-facts code { color: var(--text-secondary); }

.cron-script { margin-bottom: var(--s-3); }
.cron-script-chip { cursor: pointer; font-size: var(--t-micro); }
/* A script outside the workspace: shown, but not a clickable chip — the viewer
   cannot open it. */
.cron-script-plain {
  font-size: var(--t-micro);
  color: var(--dim);
  word-break: break-all;
}

.cron-sub-head {
  font-size: var(--t-micro);
  color: var(--dim);
  text-transform: lowercase;
  margin: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.cron-runs { display: grid; gap: 4px; }
.cron-run { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-micro); color: var(--text-secondary); }
.cron-log {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2);
  font-size: var(--t-micro);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* Nav dot badge: a job has failed since the board was last looked at. */
.mobile-nav-dots .nd.alert {
  background: rgba(var(--c3), calc(0.95 * var(--fx-glow)));
  box-shadow: 0 0 8px rgba(var(--c3), calc(0.8 * var(--fx-glow)));
}

/* ============== v5.34 FIXES ============== */

/* During any column/composer/notepad drag, iframes leave hit-testing so the
   gesture keeps tracking across the TLA frame. */
body.dragging-cols iframe { pointer-events: none; }

/* ============== DISPLAY SETTINGS POPOVER ============== */
.settings-wrap { position: relative; }
.settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  z-index: 950;
  padding: var(--s-3);
  background: rgba(10, 14, 34, 0.85);
  background-image: linear-gradient(160deg, rgba(var(--c1), 0.06), rgba(var(--c2), 0.04));
  backdrop-filter: blur(calc(18px * var(--fx-glass))) saturate(200%);
  -webkit-backdrop-filter: blur(calc(18px * var(--fx-glass))) saturate(200%);
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-pane);
  box-shadow: 0 0 30px rgba(var(--c1), calc(0.12 * var(--fx-glow))), inset 0 1px 0 rgba(255,255,255,0.14);
}
.settings-popover[hidden] { display: none; }
.settings-title {
  font-size: var(--t-micro);
  font-weight: var(--w-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s-2);
}
.settings-row {
  display: grid;
  grid-template-columns: 92px 1fr 34px;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  color: var(--text-secondary);
  padding: var(--s-1) 0;
  cursor: default;
}
.settings-row input[type=range] {
  width: 100%;
  accent-color: var(--teal);
  background: transparent;
  cursor: pointer;
}
.settings-val {
  text-align: right;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.settings-foot { display: flex; justify-content: flex-end; margin-top: var(--s-2); }

/* Colour pickers in the settings popover */
.settings-colour {
  width: 100%;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(var(--c1), 0.35);
  border-radius: var(--radius-lg);
  background: transparent;
  cursor: pointer;
}

/* ============== v5.44 FIXES ============== */

/* Any leftover horizontal overflow clips rather than scrolling the document. */
html, body { overflow-x: hidden; }

/* Two-finger horizontal swipes page the app (see setupWheelPager). Without this,
   any swipe the pager doesn't consume overscrolls the document and macOS/Chrome
   fires its back/forward navigation gesture — the stray back-arrow overlay that
   made paging feel clunky. `none` opts the document out of that gesture entirely;
   there is no meaningful browser-back in a single-page app anyway (pane history
   is handled explicitly via popstate). */
html, body { overscroll-behavior-x: none; }

/* Softer glass on modals/popovers so the blobs glow through — on the phone the
   old alphas read as fully opaque. */
.modal { background: rgba(10, 14, 34, 0.62); }
.settings-popover { background: rgba(10, 14, 34, 0.66); }
.modal-backdrop { background: rgba(0, 0, 0, 0.45); }

/* Mobile browser pane: breadcrumb moves to the bottom, with an up-one-level
   button floating above it on the right. */
.miller-up-btn { display: none; }

@media (max-width: 900px) {
  /* Header condensing: the sync pill collapses to its dot, the pane label
     truncates, paddings tighten — the row must never exceed the viewport. */
  .header { padding: 0 var(--s-2); gap: var(--s-2); }
  .header .ghost { padding: 4px 6px; }
  #syncLabel { display: none; }
  .sync-indicator { padding: 4px 6px; }
  .mobile-nav-label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  #paneBrowser { position: relative; }
  #paneBrowser .miller-crumb {
    order: 9;
    border-bottom: none;
    border-top: 1px solid var(--border);
    padding-right: 64px; /* clearance for the up button */
  }
  .miller-up-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: var(--s-3);
    bottom: var(--s-2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--c1), 0.45);
    background: rgba(10, 14, 34, 0.8);
    color: var(--teal);
    font-size: 18px;
    z-index: 5;
    box-shadow: 0 0 14px rgba(var(--c1), calc(0.35 * var(--fx-glow)));
  }
  .miller-up-btn:active { background: rgba(var(--c1), 0.15); }
}