/* ─────────────────────────────────────────────────────────────────────────
   TIN 1.0 — copper-bar theme
   Warm dark on copper, brutalist restraint, the favicon's ingot writ large.
   ───────────────────────────────────────────────────────────────────────── */

/* Global safety net: any element written with the HTML `hidden`
   attribute should ACTUALLY be hidden. The HTML default of
   `[hidden] { display: none }` is overridable by any later
   `display: <anything>` rule, which has bitten us twice now (model
   picker dropdown stuck open, prompt-plus menu stuck open). This
   line wins via `!important` so future menus, modals, and tooltips
   that rely on the `hidden` attribute don't need a per-component
   companion CSS rule. */
[hidden] { display: none !important; }

/* Self-hosted IBM Plex (latin subset). Removes the Google Fonts CDN
   dependency so CSP can disallow third-party origins. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-400-italic.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root, :root[data-theme="dark"] {
  --ink:         #f0f0f2;
  --ink-dim:     #b2b2bb;
  --ink-faint:   #9696a2;
  --paper:       #141416;
  --paper-2:     #1c1c1f;
  --paper-3:     #27272c;
  --rule:        #36363d;
  --rule-bright: #55555f;
  --signal:      #e59670;
  --signal-dim:  #9d664e;
  --signal-glint:#f1c2a7;
  --warn:        #d4a05e;
  --alert:       #d56a55;
  --copper-bar:  linear-gradient(90deg, #f3dfa0 0%, #b68d37 48%, #4b3510 100%);
  --amber-bar:   linear-gradient(90deg, #f3dfa0 0%, #d4a05e 48%, #7a4f2c 100%);
}

/* Neutral light surfaces; copper is darker so accent text stays readable. */
:root[data-theme="light"] {
  --ink:         #202126;
  --ink-dim:     #535660;
  --ink-faint:   #646874;
  --paper:       #ffffff;
  --paper-2:     #f5f5f7;
  --paper-3:     #e9e9ee;
  --rule:        #d5d6dc;
  --rule-bright: #9b9eaa;
  --signal:      #914c2d;
  --signal-dim:  #a1694e;
  --signal-glint:#69381f;
  --warn:        #a07534;
  --alert:       #b04830;
  --copper-bar:  linear-gradient(90deg, #5a3c14 0%, #9a5e2a 48%, #d4a05e 100%);
  --amber-bar:   linear-gradient(90deg, #5a3c14 0%, #a07534 48%, #d4a05e 100%);
}

/* Forest theme — deep evergreen paper with sage ink. Cool and calming;
   the accent shifts from warm copper to a moss-gold so the signal hue
   still pops against the green field. */
:root[data-theme="forest"] {
  --ink:         #dde8e0;
  --ink-dim:     #9eb4a6;
  --ink-faint:   #5c7568;
  --paper:       #0f1612;
  --paper-2:     #162420;
  --paper-3:     #1d2e29;
  --rule:        #243730;
  --rule-bright: #36544a;
  --signal:      #98b56a;
  --signal-dim:  #5d7842;
  --signal-glint:#d6e6a0;
  --warn:        #c4b25a;
  --alert:       #c87060;
  --copper-bar:  linear-gradient(90deg, #d6e6a0 0%, #8aa84d 48%, #324a20 100%);
  --amber-bar:   linear-gradient(90deg, #d6e6a0 0%, #c4b25a 48%, #5d7842 100%);
}

/* Sunset theme — dusky warm paper with peach ink. Cozy and golden-hour;
   the accent shifts to a dusk orange so the signal hue stays in
   character with the field. */
:root[data-theme="sunset"] {
  --ink:         #f0d9c4;
  --ink-dim:     #bda08a;
  --ink-faint:   #7d6354;
  --paper:       #1a120e;
  --paper-2:     #261a14;
  --paper-3:     #34241b;
  --rule:        #3a2820;
  --rule-bright: #56392b;
  --signal:      #e8865a;
  --signal-dim:  #9a5230;
  --signal-glint:#fbcfa0;
  --warn:        #e0a868;
  --alert:       #d85a4a;
  --copper-bar:  linear-gradient(90deg, #fbcfa0 0%, #d87a45 48%, #5e2a10 100%);
  --amber-bar:   linear-gradient(90deg, #fbcfa0 0%, #e0a868 48%, #9a5230 100%);
}

/* ── Tin 1.9 themes ──────────────────────────────────────────────────
   Six more palettes on the same 15-token system. Dark themes keep the
   dark→bright ladder of the originals; Paper follows Light's inverted
   conventions (paper-2/3 deepen, the glint goes dark). */

/* Midnight — cool graphite blue. Steel-blue signal, quiet and exact. */
:root[data-theme="midnight"] {
  --ink:         #d6dde8;
  --ink-dim:     #97a3b4;
  --ink-faint:   #5d6878;
  --paper:       #0b0f15;
  --paper-2:     #121826;
  --paper-3:     #1a2230;
  --rule:        #232c3b;
  --rule-bright: #34425a;
  --signal:      #7fb2e5;
  --signal-dim:  #3d6491;
  --signal-glint:#c9e2fb;
  --warn:        #d4b05e;
  --alert:       #d56a6a;
  --copper-bar:  linear-gradient(90deg, #c9e2fb 0%, #5f8fc4 48%, #1d3552 100%);
  --amber-bar:   linear-gradient(90deg, #c9e2fb 0%, #7fb2e5 48%, #3d6491 100%);
}

/* Ocean — deep navy field with a clear cyan signal. */
:root[data-theme="ocean"] {
  --ink:         #d2ecf2;
  --ink-dim:     #8fb6c2;
  --ink-faint:   #547381;
  --paper:       #06131d;
  --paper-2:     #0b1d2b;
  --paper-3:     #122a3b;
  --rule:        #163143;
  --rule-bright: #25506a;
  --signal:      #46c8dc;
  --signal-dim:  #21758a;
  --signal-glint:#aef2ff;
  --warn:        #d8b35e;
  --alert:       #d5685c;
  --copper-bar:  linear-gradient(90deg, #aef2ff 0%, #2fa3bc 48%, #0d3a4a 100%);
  --amber-bar:   linear-gradient(90deg, #aef2ff 0%, #46c8dc 48%, #21758a 100%);
}

/* Terminal — phosphor green on near-black. CRT energy. */
:root[data-theme="terminal"] {
  --ink:         #c9efc9;
  --ink-dim:     #7fbf7f;
  --ink-faint:   #3f7a3f;
  --paper:       #020503;
  --paper-2:     #061208;
  --paper-3:     #0a1a0e;
  --rule:        #11301a;
  --rule-bright: #1d4d2a;
  --signal:      #2fe06b;
  --signal-dim:  #157a3a;
  --signal-glint:#a8ffc4;
  --warn:        #c8d44a;
  --alert:       #e05348;
  --copper-bar:  linear-gradient(90deg, #a8ffc4 0%, #22b554 48%, #07401d 100%);
  --amber-bar:   linear-gradient(90deg, #a8ffc4 0%, #2fe06b 48%, #157a3a 100%);
}

/* Neon — violet dusk with a magenta signal. The fun one. */
:root[data-theme="neon"] {
  --ink:         #e8def5;
  --ink-dim:     #a795c2;
  --ink-faint:   #685a80;
  --paper:       #0c0813;
  --paper-2:     #150e22;
  --paper-3:     #1e1530;
  --rule:        #2a1d45;
  --rule-bright: #41306b;
  --signal:      #c95df0;
  --signal-dim:  #7a35a0;
  --signal-glint:#f0c4ff;
  --warn:        #e0c050;
  --alert:       #ff5577;
  --copper-bar:  linear-gradient(90deg, #f0c4ff 0%, #a647cf 48%, #3a1554 100%);
  --amber-bar:   linear-gradient(90deg, #f0c4ff 0%, #c95df0 48%, #7a35a0 100%);
}

/* Plum — dark mulberry with a rose signal. Soft, late-night. */
:root[data-theme="plum"] {
  --ink:         #f0dce5;
  --ink-dim:     #bb98a8;
  --ink-faint:   #6f5564;
  --paper:       #150d13;
  --paper-2:     #20141d;
  --paper-3:     #2b1b27;
  --rule:        #36222f;
  --rule-bright: #50334a;
  --signal:      #d883b3;
  --signal-dim:  #8a4a72;
  --signal-glint:#f7c4dd;
  --warn:        #d4a05e;
  --alert:       #d8554e;
  --copper-bar:  linear-gradient(90deg, #f7c4dd 0%, #b85e92 48%, #4a2138 100%);
  --amber-bar:   linear-gradient(90deg, #f7c4dd 0%, #d883b3 48%, #8a4a72 100%);
}

/* Paper — cool gallery-white. Follows Light's inverted ladder:
   paper-2/3 deepen, signal darkens for AA contrast, glint is darkest. */
:root[data-theme="paper"] {
  --ink:         #2c3137;
  --ink-dim:     #5d6671;
  --ink-faint:   #98a1ab;
  --paper:       #f3f4f2;
  --paper-2:     #eaece8;
  --paper-3:     #dde0db;
  --rule:        #d2d6d0;
  --rule-bright: #b4bab2;
  --signal:      #38678c;
  --signal-dim:  #7da3bd;
  --signal-glint:#1d3a52;
  --warn:        #8c6a2a;
  --alert:       #b04a3a;
  --copper-bar:  linear-gradient(90deg, #1d3a52 0%, #38678c 48%, #9cc0d8 100%);
  --amber-bar:   linear-gradient(90deg, #1d3a52 0%, #54799a 48%, #9cc0d8 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  position: relative;
  overflow-x: hidden;
}

.hidden { display: none !important; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}
button { cursor: pointer; }

/* ─── form controls ────────────────────────────────────────────────────── */

input, select {
  width: 100%;
  background: var(--paper-2);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 4px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
input:focus, select:focus {
  border-bottom-color: var(--signal);
  background: var(--paper-3);
}
input::placeholder, textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
  font-style: italic;
}
input[readonly], textarea[readonly] {
  color: var(--ink-dim);
  cursor: text;
}

/* select: native chrome replaced with a proper bordered box + copper
   chevron. Native option list still renders via the OS, which we can't
   fully reskin without a custom popover, but the closed state now looks
   like a deliberate control instead of a text input with an arrow. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink);
  background-color: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-bright);
  padding: 11px 36px 11px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b0825a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2.5L6 6L10 2.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
select:hover {
  border-color: var(--rule-bright);
  background-color: var(--paper-3);
}
select:focus {
  border-color: var(--signal);
  background-color: var(--paper-3);
  outline: none;
}
select:disabled { opacity: .5; cursor: not-allowed; }

/* the OS-rendered <option> list is mostly OS-native, but on most browsers
   we can at least set a sane background and font so the popover doesn't
   look like raw white-on-white. */
select option,
select optgroup {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 8px 12px;
}

textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  transition: border-color .15s ease, background .15s ease;
}
textarea:focus {
  border-color: var(--signal);
  background: var(--paper-3);
}

label {
  display: grid;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-dim);
  transition: color .18s ease;
}
label:focus-within { color: var(--signal); }

input:disabled, select:disabled, textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--paper-2);
  border-color: var(--rule);
}

/* ─── buttons ──────────────────────────────────────────────────────────── */

.primary, .secondary, .danger, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--rule-bright);
  background: var(--paper-2);
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
  font-weight: 500;
}
.primary:active, .secondary:active, .danger:active, .icon-btn:active,
.file-button:active, .ghost:active {
  transform: translateY(1px);
}
.primary:disabled, .secondary:disabled, .danger:disabled, .icon-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
/* pending state: dim less than disabled, show a thin progress shimmer at the bottom */
.is-pending {
  opacity: .85 !important;
  cursor: progress !important;
  position: relative;
  overflow: hidden;
}
.is-pending::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 2px;
  background: var(--copper-bar);
  animation: pending-slide 1.1s ease-in-out infinite;
}
@keyframes pending-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}
.secondary:hover, .icon-btn:hover {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--paper-3);
}
.primary {
  border-color: var(--signal);
  color: var(--paper);
  background: var(--signal);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(243,223,160,.32);
}
.primary:hover {
  background: var(--signal-glint);
  border-color: var(--signal-glint);
  color: var(--paper);
}
.danger {
  border-color: rgba(213,106,85,.45);
  color: var(--alert);
}
.danger:hover {
  background: rgba(213,106,85,.10);
  border-color: var(--alert);
}

.icon-btn {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ─── access screen ────────────────────────────────────────────────────── */

.access {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;     /* mobile-safe viewport height */
  min-height: 100dvh;     /* dynamic viewport height */
  display: grid;
  place-items: center;
  padding: 24px;
}
.access-card {
  animation: card-arrive .42s cubic-bezier(.16,.84,.32,1) both;
}
@keyframes card-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.access-card {
  width: min(520px, 100%);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  position: relative;
}

.sheet-header {
  border-bottom: 1px solid var(--rule);
  padding: 24px 26px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.sheet-header .meta {
  font-size: 10px;
  color: var(--ink-dim);
  text-align: right;
  line-height: 1.7;
  letter-spacing: .04em;
}
.sheet-header .meta b { color: var(--ink); font-weight: 500; }

/* ── brand-mark: the glowing isometric ingot from the favicon ─────────── */
.brand-row { display: flex; align-items: center; gap: 16px; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: transform .12s ease;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(245,154,62,.20));
  transition: filter .18s ease, transform .18s ease;
}
.brand-mark:hover img {
  filter: drop-shadow(0 8px 24px rgba(255,170,80,.42)) brightness(1.06);
  transform: translateY(-1px);
}
.brand-mark:active { transform: translateY(1px); }
.brand-mark:active img { filter: drop-shadow(0 2px 6px rgba(245,154,62,.32)); }

.brand-row.compact .brand-mark { width: 40px; height: 40px; }
.brand-row.compact .brand-mark img { filter: drop-shadow(0 2px 10px rgba(245,154,62,.20)); }

.brand-row .title-stack p {
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: .12em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.brand-row .title-stack h1 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--ink);
  font-feature-settings: "ss01";
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-row .title-stack h1 .version {
  color: var(--ink-dim);
}
.brand-row .title-stack h1 .beta-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--paper);
  background: var(--signal);
  padding: 2px 7px;
  border-radius: 1px;
  text-transform: uppercase;
  align-self: center;
  position: relative;
  top: -3px;
}
.brand-row.compact .title-stack h1 { font-size: 22px; }
.brand-row.compact .title-stack h1 .beta-tag { font-size: 9px; padding: 1px 6px; top: -2px; }

.access-card .body {
  padding: 26px;
  display: grid;
  gap: 22px;
}

.lead {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.55;
  border-left: 1px solid var(--rule-bright);
  padding-left: 16px;
  letter-spacing: -.005em;
  font-feature-settings: "ss01", "kern";
}

.access-card form { display: grid; gap: 16px; }
.access-card .primary { width: 100%; padding: 13px; }

.error { color: var(--alert); font-size: 12px; min-height: 16px; letter-spacing: .01em; }

.access-card .footnote {
  border-top: 1px solid var(--rule);
  padding: 14px 26px;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

/* ─── app shell ────────────────────────────────────────────────────────── */

.app {
  position: relative;
  z-index: 2;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 32px 32px 80px;
}
.app:not(.hidden) {
  animation: app-arrive .35s cubic-bezier(.16,.84,.32,1) both;
}
@keyframes app-arrive {
  from { opacity: 0; transform: translateY(6px); }
  /* End at `none`, not translateY(0): with animation-fill-mode:both a
     translateY(0) persists as a transform, which makes .app a containing
     block for position:fixed descendants (it trapped the mobile chat
     composer at the bottom of the scroll content instead of the viewport).
     `none` animates identically but leaves no containing block. */
  to   { opacity: 1; transform: none; }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
.top-actions { display: flex; gap: 10px; align-items: center; }

/* Profile chip — avatar + display name + @username, top-right corner.
   Click to open the Profile dialog. Designed to look like a quiet
   credential card, not another button competing with Settings/Sign out. */
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
  max-width: 240px;
  min-width: 0;
}
.profile-chip:hover {
  border-color: var(--signal-dim);
  background: var(--paper-3);
}
.profile-chip:active { transform: translateY(1px); }
.profile-chip:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.profile-avatar-wrap {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-initials {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--signal);
  text-transform: uppercase;
}

.profile-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}
.profile-chip-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chip-user {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: lowercase;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .profile-chip-text { display: none; }
  .profile-chip { padding: 4px; }
}

/* Profile dialog — large avatar + upload + display name + readonly user */
.profile-modal { width: min(420px, calc(100% - 32px)); }
.profile-avatar-edit {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 6px;
}
.profile-avatar-large-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.profile-avatar-large-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-initials-lg {
  font-size: 36px;
  letter-spacing: .02em;
}
.profile-avatar-actions {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
}
.profile-avatar-actions .file-button {
  margin: 0;
}

/* status: instrument readout strip */
.status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
.status > div {
  padding: 16px 20px;
  position: relative;
}
.status > div + div { border-left: 1px solid var(--rule); }
.status span {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.status strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--signal);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

/* status-cell with inline reconnect affordance */
.status-cell .status-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.status-cell .status-value-row strong {
  margin-top: 0;
}
.status-reconnect {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  border-radius: 3px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  flex: 0 0 auto;
}
.status-reconnect:hover {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: var(--paper-2);
}
.status-reconnect:active { transform: translateY(1px); }
.status-reconnect:disabled { cursor: progress; opacity: .8; }
.status-reconnect.is-spinning svg {
  animation: reconnect-spin .9s linear infinite;
  color: var(--signal);
}
@keyframes reconnect-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
/* Status cells colour by visual treatment, not domain. Each block here groups
   any state value across both .status and .editor-status that should render in
   the same colour — so a remote PC "offline" and a git "behind 3 commits" both
   render in alert-red because the operator should react to both. */
.status strong[data-state="high"],
.status strong[data-state="offline"],
.status strong[data-state="error"],
.editor-status strong[data-state="high"],
.editor-status strong[data-state="behind"]  { color: var(--alert); }

.status strong[data-state="medium"],
.status strong[data-state="warn"],
.status strong[data-state="timeout"],
.editor-status strong[data-state="medium"],
.editor-status strong[data-state="dirty"]   { color: var(--warn); }

.status strong[data-state="low"],
.status strong[data-state="online"],
.status strong[data-state="ok"],
.editor-status strong[data-state="low"],
.editor-status strong[data-state="ahead"],
.editor-status strong[data-state="ok"]      { color: var(--signal); }

.status strong[data-state="checking"],
.status strong[data-state="idle"],
.status strong[data-state="unknown"],
.editor-status strong[data-state="zero"],
.editor-status strong[data-state="unknown"] { color: var(--ink); }

/* ─── app shell: sidebar + content (Pro-app layout) ────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  margin-top: 28px;
  align-items: start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 8px 12px 14px 0;
  border-right: 1px solid var(--rule);
}

.sidebar-group {
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 14px 14px 8px;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
}
.sidebar-group:first-child { padding-top: 4px; }

/* sidebar tab — the primary nav button */
.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  border: 0;
  border-radius: 4px;
  background: transparent;
  white-space: nowrap;
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tab .tab-meta {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-family: 'IBM Plex Mono', monospace;
  opacity: .35;
  transition: opacity .15s ease, color .15s ease;
}
.tab:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.tab:hover .tab-meta { opacity: 1; }
.tab.active {
  color: var(--ink);
  background: var(--paper-2);
}
.tab.active .tab-label {
  position: relative;
}
.tab.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--copper-bar);
  border-radius: 1px;
  animation: tab-rail-settle .25s cubic-bezier(.16,.84,.32,1) both;
}
.tab.active .tab-meta { opacity: 1; color: var(--signal); }
@keyframes tab-rail-settle {
  from { transform: scaleY(.3); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ─── views ────────────────────────────────────────────────────────────── */

.view { display: none; padding-top: 32px; }
.view.active { display: block; animation: fadein .25s ease; }

/* ─── chat view: full-height, conversation-first layout ────────────────────
   The chat tab leans away from the schematic-notepad pattern of the other
   tabs. Instead of a 2-column "console / run history" grid, it's a single
   vertical stream — toolbar at the top, stream filling the available
   height, composer pinned at the bottom — to feel like a real personal
   agent rather than a lab notebook. Scroll lives inside .chat-stream so
   the toolbar and composer stay visible while the conversation grows. */

#chat.view {
  padding-top: 0;
}
#chat.view.active {
  display: flex;
  flex-direction: column;
  /* Topbar (~56) + status bar (~64) + app-shell margin-top (28) + body
     padding ≈ 200px of chrome. Filling the rest gives the chat a true
     full-height feel without resorting to position:fixed. */
  min-height: calc(100vh - 200px);
  max-height: calc(100vh - 120px);
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;        /* internal scroll lives in .chat-stream */
}

/* Two-column chat layout: main column (toolbar / stream / composer)
   on the left, categories panel on the right. Container fills the
   chat-view shell so the inner stream still scrolls cleanly. */
.chat-with-categories {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-main-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.chat-categories-panel {
  flex: 0 0 220px;
  border-left: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}
.chat-categories-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-categories-head h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.chat-categories-hint {
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.chat-categories-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.chat-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: left;
  background: transparent;
  width: 100%;
}
.chat-cat-row:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.chat-cat-row.is-active {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--ink);
}
.chat-cat-row .chat-cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat-dot, var(--ink-faint));
  flex: 0 0 9px;
}
.chat-cat-row .chat-cat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-cat-row .chat-cat-actions {
  display: none;
  gap: 2px;
}
.chat-cat-row:hover .chat-cat-actions,
.chat-cat-row.is-active .chat-cat-actions {
  display: flex;
}
.chat-cat-row .chat-cat-actions button {
  font-size: 11px;
  color: var(--ink-faint);
  padding: 2px 4px;
  border-radius: 2px;
}
.chat-cat-row .chat-cat-actions button:hover { color: var(--ink); background: var(--paper-3); }

@media (max-width: 900px) {
  /* On narrow screens, stack the categories panel below the chat instead
     of stealing horizontal space the conversation needs. */
  .chat-with-categories { flex-direction: column; }
  .chat-categories-panel {
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--rule);
    max-height: 200px;
  }
}

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex: 0 0 auto;
}
.chat-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-toolbar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-toolbar-cell .model-picker-host { min-width: 240px; }
.chat-toolbar-cell select {
  font-size: 12px;
  padding: 5px 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: inherit;
}
.chat-toolbar-label {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}

/* The conversation stream fills all remaining space and scrolls. */
.chat-stream {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper-2);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.chat-stream.empty {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  white-space: normal;
  padding: 48px;
}

.chat-composer {
  flex: 0 0 auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.chat-composer .chips {
  margin: 0 0 10px;
  padding: 6px 10px;
  min-height: 0;
  border: 1px dashed var(--rule);
  background: transparent;
}
.chat-composer .chips:empty {
  display: none;
}
.chat-composer .prompt-wrap textarea {
  min-height: 84px;
  font-size: 14px;
}
.chat-composer .composer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.composer-bar-spacer { flex: 1 1 auto; }
.composer-icon-btn {
  font-size: 11px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.composer-icon-btn:hover {
  color: var(--ink);
  border-color: var(--rule-bright);
  background: var(--paper-2);
}
.composer-send {
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: .04em;
}
.chat-composer .prompt-meta {
  display: none;     /* counter folded into composer-bar */
}
.chat-composer .timer {
  font-size: 10px;
  padding: 4px 8px;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.grid { display: grid; gap: 0; }
.grid.two { grid-template-columns: 1.1fr .9fr; }

/* panel = sheet of paper */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 26px;
  min-width: 0;
  position: relative;
}
.grid.two > .panel:first-child { border-right-width: 0; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.section-title p {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 500;
}
.section-title h2 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -.015em;
  color: var(--ink);
  font-feature-settings: "ss01";
  line-height: 1.1;
}

.inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.mt-spacer { margin-top: 14px; }

/* skill chips: tag strip */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  min-height: 42px;
  align-items: center;
}
.chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule-bright);
  color: var(--ink);
  letter-spacing: .02em;
}
.chip.chip-block { display: inline-block; margin-top: 12px; }
.chip.chip-muted { color: var(--ink-faint); border-color: var(--rule); background: transparent; }

.send-row, .install-row, .note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.install-row { margin-top: 16px; }
.install-row input { flex: 1; min-width: 180px; }

.timer {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  transition: color .2s ease, border-color .2s ease;
}
.timer[data-state="running"] { color: var(--signal); border-color: var(--signal-dim); }
.timer[data-state="ok"]      { color: var(--signal-glint); border-color: var(--signal); }

/* output / run history */
.output {
  min-height: 360px;
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.output.empty {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  white-space: normal;
  padding: 40px;
}

.entry {
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  position: relative;
  transition: background .15s ease;
}
.entry:last-child { border-bottom: 0; }
/* The newest run sits at the top — give it a copper hairline so the eye lands there first */
.entry:first-child { border-left-color: var(--signal-dim); }
.entry:hover { background: var(--paper-3); }
.entry h3 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 8px;
  font-feature-settings: "ss01", "kern";
}
.entry small {
  display: block;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.entry p,
.entry .entry-response {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.entry.is-error .entry-response { color: var(--alert); }

/* status flags rendered inline in the <small> meta strip */
.entry-flag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  padding: 1px 6px;
  border-radius: 1px;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--paper-3);
  color: var(--ink);
}
.entry-flag.is-streaming { background: var(--signal-dim); color: var(--signal-glint); animation: streaming-pulse 1.4s ease-in-out infinite; }
.entry-flag.is-error     { background: rgba(213,106,85,.18);  color: var(--alert); }
.entry-flag.is-aborted   { background: var(--paper-3);        color: var(--ink-dim); }
.entry-flag.is-learned   { background: var(--signal);         color: var(--paper); }
.entry-flag.is-memory    { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); padding: 0 5px; }
.entry-flag.is-via       { background: transparent; color: var(--signal); border: 1px solid var(--signal-dim); padding: 0 5px; }
.entry-flag.is-skill     { background: var(--signal-dim); color: var(--signal-glint); text-transform: none; letter-spacing: .04em; }
@keyframes streaming-pulse {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}

/* deepseek-r1 / qwq reasoning, collapsed by default */
.entry-thinking {
  margin: 8px 0 12px;
  font-size: 11px;
}
.entry-thinking summary {
  cursor: pointer;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 4px 0;
  outline: none;
  list-style: none;
}
.entry-thinking summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform .15s ease;
  margin-right: 2px;
}
.entry-thinking[open] summary::before { transform: rotate(90deg); }
.entry-thinking pre {
  margin: 6px 0 0;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-bright);
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
}

/* primary "Stop" state when a stream is in flight */
.primary.is-streaming {
  background: var(--alert);
  border-color: var(--alert);
  color: var(--paper);
}
.primary.is-streaming:hover {
  background: var(--paper);
  color: var(--alert);
}

/* ── ModelPicker (chat-area sectioned dropdown) ─────────────────────── */
.model-picker-host { width: 100%; }
.model-picker { position: relative; width: 100%; }

.mp-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-bright);
  padding: 10px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.mp-trigger:hover     { border-color: var(--rule-bright); background: var(--paper-3); }
.model-picker.is-open .mp-trigger {
  border-color: var(--signal);
  background: var(--paper-3);
}
.mp-trigger-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--rule-bright);
  box-shadow: 0 0 0 1px var(--paper) inset;
}
.mp-trigger-status[data-kind="local"]    { background: var(--signal); box-shadow: 0 0 6px var(--signal-dim); }
.mp-trigger-status[data-kind="cloud"]    { background: #6aa6ff; box-shadow: 0 0 6px rgba(106,166,255,.45); }
.mp-trigger-status[data-kind="library"]  { background: var(--ink-faint); }
.mp-trigger-status[data-kind="embedded"] { background: #b07cff; box-shadow: 0 0 6px rgba(176,124,255,.55); }
.mp-trigger-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.mp-trigger-caret {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--ink-faint);
  transition: transform .15s ease, color .15s ease;
}
.model-picker.is-open .mp-trigger-caret {
  color: var(--signal);
  transform: rotate(180deg);
}

.mp-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--rule-bright);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  max-height: min(420px, 60vh);
  display: flex;
  flex-direction: column;
}
.mp-menu[hidden] { display: none !important; }
.mp-search-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.mp-search {
  width: 100%;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.mp-search:focus { border-color: var(--signal); }

.mp-list {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 6px 0;
}
.mp-loading,
.mp-empty {
  padding: 20px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  text-align: center;
}

.mp-section { padding: 4px 0 6px; }
.mp-section + .mp-section { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 8px; }
.mp-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 4px 14px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mp-section-subtle {
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  font-weight: 400;
  text-transform: lowercase;
}
.mp-section[data-kind="local"]    .mp-section-label > span:first-child { color: var(--signal); }
.mp-section[data-kind="cloud"]    .mp-section-label > span:first-child { color: #6aa6ff; }
.mp-section[data-kind="library"]  .mp-section-label > span:first-child { color: var(--ink-dim); }
.mp-section[data-kind="embedded"] .mp-section-label > span:first-child { color: #b07cff; }

.mp-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: background .12s ease;
}
.mp-option:hover,
.mp-option.is-highlighted {
  background: var(--paper-3);
}
.mp-option.is-active {
  background: var(--paper-2);
  border-left: 2px solid var(--signal);
  padding-left: 12px;
}
.mp-option.is-disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
  font-style: italic;
}

.mp-option-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.mp-option-icon[data-kind="local"]    { color: var(--signal); }
.mp-option-icon[data-kind="cloud"]    { color: #6aa6ff; }
.mp-option-icon[data-kind="library"]  { color: var(--ink-faint); }
.mp-option-icon[data-kind="embedded"] { color: #b07cff; }

.mp-option-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mp-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.mp-option-meta {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.mp-option-badge {
  flex: 0 0 auto;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 1px;
  background: var(--paper-3);
  color: var(--ink-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* model cards in Models / 01 — display name + canonical id + actions */
.model-card { padding: 12px 16px; }
.model-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.model-card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.model-card-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.model-card-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-card-meta {
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: .02em;
  margin: 4px 0 0;
}
.model-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.mini-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  transition: color .12s, border-color .12s, background .12s;
}
.mini-btn:hover {
  color: var(--ink);
  border-color: var(--rule-bright);
  background: var(--paper-2);
}
.mini-btn[title]:hover { color: var(--signal); }
.mini-btn.is-danger:hover {
  color: var(--alert);
  border-color: var(--alert);
}
.mini-btn svg { display: block; }

.active-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--paper);
  padding: 2px 7px;
  border-radius: 1px;
  font-weight: 600;
}

/* App Store — live HuggingFace model search */
.store-panel { position: relative; }
.store-search-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.store-search-row input {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}
.store-filters {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.filter-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  width: 56px;
  flex: 0 0 auto;
}
.filter-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 1px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.filter-chip:hover {
  color: var(--ink);
  border-color: var(--rule-bright);
}
.filter-chip.is-active {
  color: var(--paper);
  background: var(--signal);
  border-color: var(--signal);
}

.store-status {
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.store-card {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color .12s ease, background .12s ease;
}
.store-card:hover {
  border-color: var(--rule-bright);
  background: var(--paper-3);
}
.store-card.is-installed::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--signal);
}
.store-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.store-card-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-author {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.store-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: .04em;
}
.store-stat,
.store-stat-faint { white-space: nowrap; }
.store-stat-faint { color: var(--ink-faint); margin-left: auto; }
.store-installed {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}
.store-card-meta .chip {
  font-size: 9px;
  padding: 1px 6px;
  letter-spacing: .04em;
}
.chip-warn { background: rgba(220,160,60,.15); color: var(--warn, #c98e3b); }

.store-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.store-card-actions > button {
  flex: 1 1 auto;
  font-size: 11px;
  padding: 7px 10px;
}
.store-card-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 13px;
  flex: 0 0 auto;
  transition: color .12s, border-color .12s;
}
.store-card-link:hover { color: var(--signal); border-color: var(--signal-dim); }

.store-upload {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.store-upload summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 0;
  list-style: none;
  outline: none;
}
.store-upload summary::before {
  content: '▸ ';
  margin-right: 2px;
  display: inline-block;
  transition: transform .15s ease;
}
.store-upload[open] summary::before { transform: rotate(90deg); }

@media (max-width: 720px) {
  .filter-label { width: 100%; margin-bottom: 2px; }
}

/* card grids */
.cards { display: grid; gap: 0; }
.card, .mini-item {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 16px 18px;
  margin-top: -1px;
  transition: background .12s ease, border-color .12s ease;
}
.card:first-child, .mini-item:first-child { margin-top: 0; }
.card:hover, .mini-item:hover { background: var(--paper-3); border-color: var(--rule-bright); }

/* selected/active state — a copper hairline runs down the left edge */
.mini-item.is-active,
.card.is-active {
  background: var(--paper-3);
  border-left: 2px solid var(--signal);
  padding-left: 16px;
}
.mini-item.is-active h3,
.card.is-active h3 { color: var(--signal-glint); }

/* active model pill — sits next to the h3 in copper */
.active-pill {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--paper);
  background: var(--signal);
  font-weight: 700;
  padding: 1px 6px;
  text-transform: uppercase;
  border-radius: 1px;
}

/* skill cards — a coloured state dot keeps "enabled/disabled" legible at a glance */
.card .state-dot {
  display: inline-block;
  vertical-align: 2px;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  background: var(--ink-faint);
  border-radius: 50%;
}
.card.is-enabled  .state-dot { background: var(--signal); }
.card.is-disabled .state-dot { background: var(--ink-faint); }
.card.is-disabled h3 { color: var(--ink-dim); }
.card.is-disabled p  { color: var(--ink-faint); }

.card h3, .mini-item h3 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-bottom: 4px;
  font-feature-settings: "ss01", "kern";
}
.card p, .mini-item p {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.55;
}

button.mini-item {
  width: 100%;
  text-align: left;
  display: block;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-row > div { min-width: 0; flex: 1; }

.mini-list { display: grid; gap: 0; margin-top: 16px; }

.split { height: 1px; background: var(--rule); margin: 20px 0; }

.muted { color: var(--ink-dim); font-size: 12px; line-height: 1.55; }

/* Generic inline <code> — when not nested in a more specific rule */
code {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--paper-3);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  font-size: .92em;
  color: var(--ink);
  border-radius: 1px;
  letter-spacing: 0;
}
.muted code, .hint code {
  color: var(--ink-dim);
  background: var(--paper-2);
}

/* unified empty state — serif italic on warm dim, matches the .output.empty pattern */
.empty-state {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  padding: 36px 20px;
  text-align: center;
  letter-spacing: -.005em;
  line-height: 1.55;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin-top: 0;
}
.empty-state.compact { padding: 22px 16px; font-size: 13px; }
.empty-state.bare { border: 0; background: transparent; padding: 24px 0; }

/* ─── settings dialog ──────────────────────────────────────────────────── */

/* shared elevation treatment for all four modal dialogs */
dialog.settings,
dialog.palette,
dialog.shortcuts-overlay,
dialog.editor-modal {
  background: var(--paper);
  border: 1px solid var(--signal-dim);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 24px 80px -16px rgba(0,0,0,.65), 0 4px 16px -8px rgba(0,0,0,.5);
}
dialog.settings[open],
dialog.palette[open],
dialog.shortcuts-overlay[open],
dialog.editor-modal[open] {
  animation: dialog-arrive .22s cubic-bezier(.16,.84,.32,1) both;
}
@keyframes dialog-arrive {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
dialog.settings::backdrop,
dialog.palette::backdrop,
dialog.shortcuts-overlay::backdrop,
dialog.editor-modal::backdrop {
  background: rgba(21,17,13,.78);
  backdrop-filter: blur(3px);
  animation: backdrop-arrive .18s ease both;
}
@keyframes backdrop-arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}

dialog.settings {
  width: min(540px, calc(100% - 32px));
}
/* Apply the flex + max-height layout ONLY when the dialog is open.
   `<dialog>` relies on the browser's default `display: none` when
   closed; setting `display: flex` unconditionally made the modal
   visible at all times, leaking it on top of every tab and
   stranding the Close button. Scope to [open] so the layout kicks
   in only when showModal() actually opened it. */
dialog.settings[open] {
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
}

.settings .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--rule);
}
.settings .modal-head h2,
.shortcuts-head h2,
dialog.editor-modal .modal-head h2 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1.1;
  font-feature-settings: "ss01", "kern";
}

.settings .body {
  padding: 22px 26px 26px;
  display: grid;
  gap: 4px;
  /* Inner scroll container so the modal head stays pinned at the top
     and Save Settings stays pinned at the bottom while the operator
     scrolls through Bridge / Security / Coach / Cloud / Accounts /
     Backup. min-height:0 is the magic flex-child rule that lets
     overflow-y actually scroll inside a flex column. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.settings .body .settings-actions {
  /* Pinned to the bottom of the scrolling body via position:sticky so
     Save settings is always reachable on short viewports, without
     restructuring DOM. */
  position: sticky;
  bottom: 0;
  margin: 18px -26px -26px;
  padding: 14px 26px 22px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  z-index: 1;
}

/* ─── access screen extensions (enroll/unlock) ─────────────────────────── */

.access-card .body > section { display: grid; gap: 14px; }

.access-card .hint {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.6;
  border-left: 1px solid var(--rule);
  padding-left: 12px;
  letter-spacing: .01em;
}

.full-width { width: 100%; }

.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-faint);
  font-weight: 500;
  transition: color .15s ease, border-color .15s ease;
}
.ghost:hover { color: var(--alert); border-color: var(--alert); }

/* ─── settings dialog extensions ───────────────────────────────────────── */

.settings-section { display: grid; gap: 12px; padding: 6px 0; }
.settings-label {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 500;
}
.settings-section .hint {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
  letter-spacing: .01em;
}
.settings-section .full-width { padding: 11px; }

.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-dim);
}
.kv-row strong { color: var(--ink); font-weight: 500; }
.kv-row strong.is-positive { color: var(--signal); }
.kv-row strong.is-warn     { color: var(--warn); }
.kv-row strong.is-error    { color: var(--alert); }

/* coach toggle: a labeled checkbox styled as a switch-style row */
.coach-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .15s ease, background .15s ease;
}
.coach-toggle:hover { border-color: var(--rule-bright); }
.coach-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper-3);
  border: 1px solid var(--rule-bright);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.coach-toggle input:checked {
  background: var(--signal);
  border-color: var(--signal);
}
.coach-toggle input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.coach-toggle input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.settings-coach-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* CLOUD FALLBACK section in Settings */
.settings-label-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--paper);
  background: var(--signal);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 2px;
  border-radius: 1px;
  font-weight: 500;
}
.coach-toggle.inline {
  padding: 4px 0;
  border: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}

.cloud-providers {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.cloud-provider {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.cloud-provider.is-on {
  border-color: var(--signal-dim);
  background: var(--paper-3);
}
.cloud-provider.is-on::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--signal);
}
.cloud-provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cloud-provider-head .coach-toggle.inline span {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
}
.cloud-key-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  flex: 0 0 auto;
}
.cloud-key-link:hover { text-decoration: underline; }
.cloud-provider-note {
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.cloud-provider label { font-size: 11px; }
.cloud-provider input,
.cloud-provider select {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.cp-model-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.cp-model-row > select {
  flex: 1 1 auto;
  min-width: 0;
}
.cp-refresh {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  font-size: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cp-refresh:hover {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: var(--paper-3);
}
.cp-refresh.is-spinning {
  color: var(--signal);
  animation: cp-spin .9s linear infinite;
}
@keyframes cp-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.cloud-provider-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cloud-provider-actions .secondary { padding: 6px 12px; font-size: 11px; }
.cp-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  flex: 1 1 auto;
}
.cp-status.is-ok   { color: var(--signal); }
.cp-status.is-err  { color: var(--alert); }
.cp-status.is-warn { color: var(--warn, #c98e3b); }

.models-api-shortcut {
  display: grid;
  align-content: start;
  gap: 14px;
}
.models-api-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.models-api-summary > div {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 12px;
  border-radius: 8px;
  min-width: 0;
}
.models-api-summary span,
.api-head-stats span,
.api-status-card span,
.api-default-card span {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.models-api-summary strong,
.api-head-stats strong,
.api-status-card strong,
.api-default-card strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.api-view {
  display: none;
  gap: 16px;
}
.api-view.active { display: grid; }
.api-head {
  border: 1px solid var(--rule);
  background:
    linear-gradient(135deg, rgba(200, 133, 74, .10), transparent 44%),
    var(--paper-2);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 22px;
  align-items: end;
}
.api-eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 8px;
}
.api-head h1 {
  font-size: clamp(28px, 4vw, 54px);
  line-height: .95;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 12px;
}
.api-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.api-head-stats > div,
.api-status-card,
.api-default-card,
.integration-card {
  border: 1px solid var(--rule);
  background: rgba(21, 17, 13, .42);
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}
.api-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.api-status-card p { margin-top: 8px; line-height: 1.45; }
.api-security-grid,
.api-routing-grid,
.api-defaults-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.api-defaults-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.api-security-title {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.api-controls-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.api-provider-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.api-provider-card {
  border-radius: 8px;
  min-width: 0;
}
.api-provider-card.is-chat-default {
  border-color: var(--signal);
  box-shadow: inset 0 0 0 1px rgba(200, 133, 74, .28);
}
.api-provider-head { align-items: flex-start; }
.api-provider-heading {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.api-provider-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.api-provider-state {
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  background: var(--paper);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.api-provider-state.is-ok,
.api-provider-state.is-saved,
.api-provider-state.is-default {
  color: var(--signal);
  border-color: var(--signal-dim);
}
.api-provider-state.is-warn { color: var(--warn); border-color: var(--warn); }
.api-provider-state.is-err,
.api-provider-state.is-missing { color: var(--alert); border-color: rgba(213, 106, 85, .65); }
.api-provider-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 10px;
  color: var(--ink-faint);
  line-height: 1.35;
}
.api-provider-meta-row strong {
  color: var(--ink-dim);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.cp-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: stretch;
}
.cp-key-row .mini-btn {
  white-space: nowrap;
  padding-inline: 10px;
}
.cloud-provider-actions { flex-wrap: wrap; }
.cloud-provider-actions .ghost,
.cloud-provider-actions .secondary {
  min-height: 32px;
}
.api-routing-grid { align-items: end; }
.api-routing-hint { margin-top: 12px; }
.api-default-card {
  display: grid;
  gap: 10px;
  align-content: start;
}
.api-default-card input { min-width: 0; }
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.integration-card {
  display: grid;
  gap: 10px;
}
.integration-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.integration-card h3 {
  font-size: 15px;
  margin: 2px 0 0;
  color: var(--ink);
}
.integration-group,
.integration-auth {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.integration-auth {
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 6px;
  padding: 7px 8px;
}
.integration-status {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.integration-status.is-ok { color: var(--signal); border-color: var(--signal-dim); }
.integration-status.is-warn { color: var(--warn); border-color: var(--warn); }
.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.integration-actions button {
  min-height: 30px;
  padding: 6px 10px;
}

/* ─── Models tab layout v2 ────────────────────────────────────────────────
   The Models view now stacks a two-column row (Active router + API keys)
   over a full-width App Store panel so the HF grid has room to breathe.
   The .grid.two and .panel rules below already give us most of the layout;
   we just need a bit of vertical rhythm between the two stripes. */

.models-view .grid.two + .store-panel { margin-top: 16px; }

/* Tier badge (free/paid) — sits next to provider name. */
.tier-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  font-weight: 600;
  vertical-align: middle;
  margin-left: 6px;
}
.tier-badge.tier-free {
  color: var(--signal);
  border-color: var(--signal-dim);
}
.tier-badge.tier-paid {
  color: var(--warn, #c98e3b);
  border-color: var(--warn, #c98e3b);
}

/* Bridge-offline hint — appears under the installed-models list when the
   home Ollama can't be reached. Gives an actionable next step instead of
   a silent "offline" status. */
.bridge-hint {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--warn, #c98e3b);
  background: rgba(220, 160, 60, .06);
  display: grid;
  gap: 8px;
}
.bridge-hint-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn, #c98e3b);
  margin: 0;
  font-weight: 600;
}
.bridge-hint-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}
.bridge-hint-cmd {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 8px;
}
.bridge-hint-cmd code {
  flex: 1 1 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
  align-self: center;
}

/* App Store: error card — uses the existing .empty-state but adds room
   for a retry button and longer error context. */
.store-error {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 18px 20px !important;
}
.store-error strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--alert);
}
.store-error p { margin: 0; max-width: 56ch; }
.store-error .secondary { margin-top: 4px; }

/* App Store: per-card pull progress bar — sits between meta and actions. */
.store-card-progress {
  display: grid;
  gap: 4px;
}
.store-card-progress-bar {
  height: 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.store-card-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width .25s ease;
}
.store-card-progress-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-progress.is-error .store-card-progress-bar > span { background: var(--alert); }
.store-card-progress.is-error .store-card-progress-text       { color: var(--alert); }

/* App Store: three-button action row needs to wrap cleanly on narrow grids. */
.store-card-actions {
  flex-wrap: wrap;
}
.store-card-actions > .primary.store-pull-btn {
  flex: 1 1 100%;
  font-size: 11px;
  padding: 8px 12px;
}
.store-card-actions > .store-copy-btn,
.store-card-actions > .store-add-btn {
  flex: 1 1 auto;
  font-size: 10px;
  padding: 6px 8px;
}

/* profile dialog: extends .editor-modal */
.profile-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: 80vh;
}
.profile-body {
  padding: 22px 26px 26px;
  display: grid;
  gap: 14px;
}
.profile-text {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: -.005em;
  border-left: 2px solid var(--signal);
  padding-left: 16px;
  white-space: pre-wrap;
  font-feature-settings: "ss01", "kern";
}
.profile-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* memories dialog: extends .editor-modal */
.memories-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: 80vh;
}
.memories-count {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 12px;
  color: var(--ink-faint);
  margin-left: 8px;
  letter-spacing: .04em;
  font-weight: 400;
  vertical-align: 4px;
}
.memories-body {
  display: grid;
  gap: 12px;
  padding: 18px 24px 24px;
  max-height: calc(80vh - 70px);
  overflow-y: auto;
}
.memory-item {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.memory-item:hover { background: var(--paper-3); }
.memory-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
}
.memory-weight {
  display: inline-block;
  width: calc(28px * var(--w, 0.5));
  min-width: 4px;
  height: 6px;
  background: var(--copper-bar);
  border-radius: 1px;
  flex: 0 0 auto;
}
.memory-when { flex: 1; }
.memory-coach {
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.memory-del {
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-faint);
  border-color: var(--rule);
}
.memory-del:hover { color: var(--alert); border-color: var(--alert); background: rgba(213,106,85,.08); }
.memory-obs {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -.005em;
  margin: 0;
}
.memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.memory-tags .chip { font-size: 10px; padding: 2px 8px; }

.file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--rule-bright);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.file-button:hover { border-color: var(--signal); color: var(--signal); background: var(--paper-3); }
.file-button input { display: none; }

.settings-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
}

/* ─── toast (transient feedback) ───────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 12px 18px;
  background: var(--paper);
  border: 1px solid var(--signal);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.6);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── command palette ──────────────────────────────────────────────────── */

dialog.palette {
  width: min(640px, calc(100% - 32px));
  max-height: 70vh;
  margin: 12vh auto auto auto;
}
.palette-frame { display: flex; flex-direction: column; min-height: 0; max-height: 70vh; }

.palette-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.palette-prompt {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--paper);
  background: var(--signal);
  font-weight: 700;
  padding: 4px 8px;
  text-transform: uppercase;
  border-radius: 1px;
}
.palette-head input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0;
}
.palette-head input:focus { background: transparent; border-bottom-color: transparent; }

.palette-list { flex: 1; overflow-y: auto; padding: 6px 0 8px; }

.palette-group {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 14px 18px 6px;
  font-weight: 500;
}

.palette-item {
  padding: 11px 18px;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: grid;
  gap: 2px;
}
.palette-item:hover { background: var(--paper-2); }
.palette-item.is-selected {
  background: var(--paper-2);
  border-left-color: var(--signal);
}
.palette-item-main {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.palette-item-hint {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.palette-kind {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--signal);
  font-weight: 500;
  margin-right: 8px;
  text-transform: uppercase;
}

.palette-empty {
  padding: 28px;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
}

.palette-foot {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 7px;
  margin-right: 4px;
  border: 1px solid var(--rule-bright);
  background: var(--paper-2);
  color: var(--ink-dim);
  letter-spacing: .04em;
  border-radius: 1px;
}

/* ─── shortcuts help overlay ────────────────────────────────────────────── */

dialog.shortcuts-overlay {
  width: min(560px, calc(100% - 32px));
}
.shortcuts-frame { display: grid; }
.shortcuts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
}
.shortcuts-body {
  padding: 20px 24px 24px;
  display: grid;
  gap: 24px;
  max-height: 70vh;
  overflow-y: auto;
}
.shortcuts-body section h3 {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  font-feature-settings: "ss01", "kern";
}
.shortcuts-body dl { display: grid; gap: 8px; }
.shortcuts-body dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
}
.shortcuts-body dt { font-size: 11px; color: var(--ink-dim); letter-spacing: .02em; }
.shortcuts-body dd {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ─── prompt counter / autosave badge ──────────────────────────────────── */

.prompt-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.prompt-counter {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.prompt-counter.warn  { color: var(--warn); }
.prompt-counter.alert { color: var(--alert); }

.autosave-badge {
  display: inline-block;
  margin-left: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--paper);
  background: var(--signal);
  font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
  border-radius: 1px;
  opacity: 0;
  transition: opacity .18s ease;
}
.autosave-badge.show { opacity: 1; }

/* ─── drop target highlight ────────────────────────────────────────────── */

.is-drop-target {
  outline: 1px dashed var(--signal);
  outline-offset: 4px;
  background: rgba(200,133,74,.06);
}

/* ─── undo toast ───────────────────────────────────────────────────────── */

.toast.undo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
}
.toast.undo .undo-msg {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.toast.undo .undo-btn {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--signal);
  border: 1px solid var(--signal-dim);
  background: var(--paper);
  padding: 6px 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.toast.undo .undo-btn:hover { background: var(--signal); color: var(--paper); }

/* ─── tin editor + remote pc (admin tabs) ──────────────────────────────── */

.tab-admin { color: var(--ink-faint); }
.tab-admin:hover { color: var(--ink-dim); background: var(--paper-2); }
.tab-admin.active { color: var(--ink); }
.tab-admin.active::before { background: var(--amber-bar); }
.tab-admin.active .tab-meta { color: var(--warn); }

.editor-status {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--rule);
  margin-bottom: 0;
}
.editor-status > div {
  padding: 14px 18px;
  border-right: 1px solid var(--rule);
}
.editor-status > div:last-child { border-right: 0; }
.editor-status span {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.editor-status strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--signal);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* file-path heading: replaces the serif italic for the buffer title */
#editorBufferTitle {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  max-width: 100%;
}
#editorBufferTitle.is-empty {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -.012em;
  color: var(--ink-faint);
  direction: ltr;
}

.editor-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
}
.editor-grid > .panel { border-top-width: 0; }
.editor-tree-panel { border-right-width: 0; }

.editor-tree {
  margin: 0 -8px;
  display: grid;
  font-size: 12px;
  max-height: 480px;
  overflow-y: auto;
}
.tree-node {
  display: block;
  text-align: left;
  width: 100%;
  padding: 6px 12px;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-node:hover { background: var(--paper-3); color: var(--ink); }
.tree-node[disabled] { opacity: .5; cursor: not-allowed; }
.tree-dir { color: var(--ink); font-weight: 500; }
.tree-dir.collapsed .tree-caret { transform: rotate(-90deg); display: inline-block; }
.tree-caret { display: inline-block; font-size: 8px; color: var(--ink-faint); margin-right: 4px; transition: transform .12s ease; }
.tree-children.hidden { display: none; }
.tree-size { color: var(--ink-faint); font-size: 10px; margin-left: 8px; font-variant-numeric: tabular-nums; }

.editor-buffer {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  min-height: 360px;
  max-height: 560px;
  font-size: 12px;
}
.editor-buffer.empty {
  display: grid;
  place-items: center;
  font-style: italic;
  font-family: 'IBM Plex Serif', serif;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 40px;
}
.editor-buffer-frame {
  display: grid;
  grid-template-columns: 56px 1fr;
  height: 480px;
}
.editor-gutter {
  margin: 0;
  padding: 12px 8px;
  background: var(--paper-3);
  border-right: 1px solid var(--rule);
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow: hidden;
  white-space: pre;
  text-align: right;
  user-select: none;
}
.editor-buffer textarea#editorTextarea {
  border: 0;
  resize: none;
  background: var(--paper-2);
  padding: 12px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
  overflow: auto;
  min-height: 0;
  letter-spacing: 0;
  text-transform: none;
}
.editor-buffer textarea#editorTextarea:focus {
  background: var(--paper-2);
  border: 0;
}

.editor-log-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.editor-log-row > div { flex: 1; min-width: 0; }

.setup-steps {
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: step;
  margin: 16px 0;
}
.setup-steps li {
  counter-increment: step;
  font-size: 12px;
  color: var(--ink-dim);
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  gap: 14px;
  align-items: center;
  line-height: 1.5;
}
.setup-steps li::before {
  content: counter(step) ".";
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 500;
  min-width: 18px;
}
.setup-steps code {
  background: var(--paper-3);
  padding: 2px 7px;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 11px;
  border-radius: 1px;
}

/* ─── editor modal (commit / diff) ─────────────────────────────────────── */

dialog.editor-modal {
  width: min(820px, calc(100% - 32px));
  max-height: 80vh;
}
dialog.editor-modal .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}
dialog.editor-modal .body {
  padding: 18px 24px 22px;
  display: grid;
  gap: 14px;
  max-height: calc(80vh - 70px);
  overflow-y: auto;
}

.diff-empty {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  padding: 8px 0;
}
details > summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--signal);
  padding: 6px 0;
}
.diff-pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-height: 320px;
}
.diff-line { display: block; white-space: pre; }
.diff-line.add  { color: var(--signal-glint); background: rgba(200,133,74,.06); }
.diff-line.sub  { color: var(--alert);        background: rgba(213,106,85,.06); }
.diff-line.hunk { color: var(--warn); }
.diff-line.meta { color: var(--ink-faint); }
.diff-line.ctx  { color: var(--ink-dim); }

/* ─── remote pc (admin tab) ────────────────────────────────────────────── */

.rpc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

button.rpc-cmd {
  text-align: left;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  margin-top: -1px;
  margin-left: -1px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
button.rpc-cmd:first-child { margin-left: 0; }
button.rpc-cmd:hover { background: var(--paper-3); border-color: var(--signal-dim); }
.rpc-cmd-label { color: var(--ink); }
.rpc-cmd-name {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  text-transform: none;
  font-family: 'IBM Plex Mono', monospace;
}

.rpc-result {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  min-height: 80px;
}
.rpc-result:empty { display: none; }

.rpc-output {
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink-dim);
  margin: 0;
  letter-spacing: 0;
}
.rpc-running {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: -.005em;
}
.rpc-running code {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  background: var(--paper-3);
  padding: 1px 6px;
  font-size: 11px;
  color: var(--signal);
  letter-spacing: 0;
}
.rpc-result-label {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}

.rpc-screenshot {
  display: block;
  max-width: 100%;
  border: 1px solid var(--rule);
}

.rpc-log-row.is-error h3 { color: var(--alert); }
.rpc-log-row.is-error p  { color: var(--alert); opacity: .8; }

/* ── access tier grouping ──────────────────────────────────────────── */
.rpc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rpc-panel-commands { grid-column: 1 / 2; }
.rpc-panel-files    { grid-column: 2 / 3; grid-row: 1 / 3; }
.rpc-panel-log      { grid-column: 1 / 2; }

.rpc-tier { margin-bottom: 4px; }
.rpc-tier-label {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  margin-bottom: 6px;
  border-radius: 2px;
}
.rpc-tier-label.tier-safe        { background: color-mix(in srgb, var(--success, #2ecc71) 16%, transparent); color: var(--success, #2ecc71); }
.rpc-tier-label.tier-control     { background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal); }
.rpc-tier-label.tier-destructive { background: color-mix(in srgb, var(--alert) 14%, transparent); color: var(--alert); }

button.rpc-cmd-tier-safe:hover        { border-color: var(--success, #2ecc71); }
button.rpc-cmd-tier-destructive       { opacity: .9; }
button.rpc-cmd-tier-destructive:hover { background: color-mix(in srgb, var(--alert) 8%, var(--paper-2)); border-color: var(--alert); }

/* ── sysinfo chips ─────────────────────────────────────────────────── */
.rpc-sysinfo-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rpc-chip {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .02em;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  color: var(--ink-dim);
}

/* ── file browser ──────────────────────────────────────────────────── */
.rpc-fb-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
  font-size: 12px;
}
.rpc-fb-crumb {
  background: none;
  border: none;
  color: var(--signal);
  padding: 2px 4px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
}
.rpc-fb-crumb:hover { background: var(--paper-3); }
.rpc-fb-sep, .rpc-fb-current { color: var(--ink-faint); font-size: 11px; }
.rpc-fb-current { font-weight: 500; color: var(--ink-dim); }

.rpc-fb-list {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
}
.rpc-fb-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: default;
  font-size: 13px;
  color: var(--ink-dim);
  transition: background .1s;
}
.rpc-fb-entry.is-dir,
.rpc-fb-entry.is-readable { cursor: pointer; }
.rpc-fb-entry.is-dir:hover,
.rpc-fb-entry.is-readable:hover { background: var(--paper-3); color: var(--ink); }
.rpc-fb-entry.is-dir .rpc-fb-name { font-weight: 500; color: var(--ink); }
.rpc-fb-icon { font-size: 14px; flex-shrink: 0; }
.rpc-fb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpc-fb-size { font-size: 10px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; flex-shrink: 0; }

.rpc-fb-viewer {
  margin-top: 14px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.rpc-fb-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  gap: 8px;
}
.rpc-fb-viewer-actions { display: flex; gap: 6px; }
.rpc-fb-content {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 400px;
  padding: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-2);
  border: none;
  resize: vertical;
  box-sizing: border-box;
}
.rpc-fb-content:not([readonly]) { background: var(--paper-1); color: var(--ink); }

/* responsive: stack rpc panels on mobile */
@media (max-width: 860px) {
  .rpc-layout { grid-template-columns: 1fr; }
  .rpc-panel-commands,
  .rpc-panel-files,
  .rpc-panel-log { grid-column: 1; grid-row: auto; }
}

/* ─── responsive ───────────────────────────────────────────────────────── */

/* Tablet + small laptop (max 880px): sidebar collapses to top-row, instruments → 2x2 */
@media (max-width: 880px) {
  html { font-size: 14px; }
  .app { padding: 22px 18px 60px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .top-actions { align-self: stretch; }
  .status { grid-template-columns: 1fr 1fr; }
  .status > div + div { border-left: 0; }
  .status > div:nth-child(2n) { border-left: 1px solid var(--rule); }
  .status > div:nth-child(1), .status > div:nth-child(2) { border-bottom: 1px solid var(--rule); }

  /* sidebar → horizontal scroll-row at top of content */
  .app-shell {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }
  .sidebar {
    flex-direction: row;
    gap: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0;
    position: static;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-group { display: none; }
  .tab {
    flex: 0 0 auto;
    border-radius: 0;
    padding: 14px 18px 16px;
    scroll-snap-align: start;
  }
  .tab .tab-meta { display: none; }
  .tab.active { background: transparent; }
  .tab.active::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -1px;
    width: auto;
    height: 3px;
    background: var(--copper-bar);
  }
  .tab.active.tab-admin::before { background: var(--amber-bar); }
  .content { padding-top: 28px; }

  .grid.two { grid-template-columns: 1fr; }
  .grid.two > .panel:first-child { border-right-width: 1px; border-bottom-width: 0; }
  .inline { grid-template-columns: 1fr; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-title h2 { font-size: 24px; }
  .brand-row .title-stack h1 { font-size: 26px; }
  .timer { margin-left: 0; width: 100%; text-align: center; }

  .editor-status { grid-template-columns: 1fr 1fr; }
  .editor-status > div:nth-child(2) { border-right: 0; }
  .editor-status > div { border-bottom: 1px solid var(--rule); }
  .editor-grid { grid-template-columns: 1fr; }
  .editor-tree-panel { border-right-width: 1px; border-bottom-width: 0; }
  .editor-buffer-frame { height: 360px; }

  .rpc-grid { grid-template-columns: 1fr; }
  button.rpc-cmd { margin-left: 0; }
  .api-head,
  .api-status-grid,
  .api-security-grid,
  .api-controls-row,
  .api-provider-list,
  .api-routing-grid,
  .api-defaults-grid,
  .integration-grid {
    grid-template-columns: 1fr;
  }
  .api-head-stats,
  .api-provider-meta-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone (max 600px): stack the brand-row + meta block, collapse status to 1 column */
@media (max-width: 600px) {
  .app { padding: 18px 14px 56px; }
  .access { padding: 16px; }
  .access-card .body { padding: 22px; gap: 18px; }
  .sheet-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 18px;
  }
  .sheet-header .meta { text-align: left; }
  .access-card .footnote {
    flex-direction: column;
    gap: 4px;
    padding: 14px 22px;
  }
  .topbar { padding-bottom: 18px; }
  .top-actions { gap: 8px; }
  .icon-btn { padding: 7px 12px; font-size: 11px; flex: 1; }

  /* Status: collapse to 1-column stack on very narrow devices for legibility */
  .status { grid-template-columns: 1fr; }
  .status > div { border-left: 0 !important; border-right: 0; }
  .status > div + div { border-top: 1px solid var(--rule); }
  .status > div:nth-child(1), .status > div:nth-child(2) { border-bottom: 0; }
  .api-head { padding: 18px; }
  .api-head-stats,
  .api-provider-meta-row,
  .models-api-summary {
    grid-template-columns: 1fr;
  }
  .cp-key-row {
    grid-template-columns: 1fr;
  }
  .integration-card-head {
    display: grid;
  }

  .editor-status { grid-template-columns: 1fr; }
  .editor-status > div { border-right: 0; }
  .editor-status > div + div { border-top: 1px solid var(--rule); }
  .editor-status > div:nth-child(2) { border-right: 0; }

  .brand-row .title-stack h1 { font-size: 22px; }
  .section-title h2 { font-size: 22px; }
  .section-title { padding-bottom: 16px; margin-bottom: 18px; }
  .panel { padding: 22px; }
  .lead { font-size: 15px; padding-left: 14px; }

  .send-row, .install-row, .note-actions {
    gap: 8px;
  }
  .send-row .primary,
  .send-row .secondary,
  .send-row .danger { flex: 1; min-width: 0; }
  /* note/vibecoding actions wrap 2-per-row instead of cramming every button
     onto one line — without this, four buttons (incl. .secondary, which the
     narrower breakpoint missed) squeezed labels like "Next steps" into
     unreadable vertical slivers. */
  .note-actions .primary,
  .note-actions .secondary,
  .note-actions .danger,
  .note-actions .ghost { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* Very narrow phone (max 380px): tighten further */
@media (max-width: 380px) {
  html { font-size: 13px; }
  .app { padding: 14px 12px 48px; }
  .access { padding: 12px; }
  .access-card .body { padding: 18px; }
  .panel { padding: 18px; }
  .brand-row .title-stack h1 { font-size: 20px; }
  .section-title h2 { font-size: 20px; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-row.compact .brand-mark { width: 32px; height: 32px; }
  .brand-row .title-stack h1 .beta-tag { font-size: 8px; padding: 1px 5px; }
  .sheet-header { padding: 18px 18px 14px; }
}

/* ─── selection, scrollbars, accessibility ─────────────────────────────── */

::selection {
  background: rgba(200,133,74,.32);
  color: var(--signal-glint);
}

html { scroll-behavior: smooth; }

/* webkit scrollbars: warm, narrow, only-when-needed */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-bright);
  border: 2px solid var(--paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--signal-dim); }

/* firefox */
* { scrollbar-color: var(--rule-bright) transparent; scrollbar-width: thin; }

/* keyboard focus ring — copper, only when keyboard navigating */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
/* the brand-mark is itself copper; use the champagne glint so its focus ring stays visible */
.brand-mark:focus-visible {
  outline: 2px solid var(--signal-glint);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
}
.tab:focus-visible {
  outline: 1px solid var(--signal);
  outline-offset: 0;
  color: var(--ink);
  background: var(--paper-2);
}
.tab.active:focus-visible {
  outline: 1px solid var(--signal-glint);
}

/* respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Tin 1.2: stay-signed-in checkbox ──────────────────────────────── */
.signin-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 0;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-dim);
  text-transform: none;
  cursor: pointer;
}
.signin-remember input {
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper-2);
  border: 1px solid var(--rule-bright);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.signin-remember input:checked { background: var(--signal); border-color: var(--signal); }
.signin-remember input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── Tin 1.2: chat input plus button + popover menu ───────────────── */
.prompt-wrap {
  position: relative;
  display: block;
}
.prompt-wrap textarea {
  padding-left: 50px;   /* leave room for the inset + button */
}
.prompt-plus {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  border-radius: 6px;
  cursor: pointer;
  z-index: 2;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.prompt-plus:hover {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: var(--paper-2);
}
.prompt-plus.is-open {
  color: var(--signal);
  border-color: var(--signal);
  transform: rotate(45deg);
}
.prompt-plus svg { display: block; }

.prompt-plus-menu {
  position: relative;
  margin-top: 6px;
  background: var(--paper);
  border: 1px solid var(--rule-bright);
  display: grid;
  gap: 0;
  padding: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  z-index: 5;
}
.prompt-plus-menu[hidden] { display: none !important; }
.prompt-plus-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
  transition: background .12s ease;
  font-family: inherit;
}
.prompt-plus-item:hover:not([disabled]) {
  background: var(--paper-3);
}
.prompt-plus-item[disabled] {
  cursor: not-allowed;
  opacity: .55;
}
.prompt-plus-icon {
  font-size: 14px;
  color: var(--signal);
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
}
.prompt-plus-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.prompt-plus-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
}
.prompt-plus-desc {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .02em;
  font-family: 'IBM Plex Mono', monospace;
}

/* ─── Tin 1.2: theme toggle (fixed bottom-left) ────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: var(--paper-3);
}
/* Each theme owns one icon. Hide all by default, then show one based
   on the active :root[data-theme]. The icon represents the CURRENT
   theme — cycle order is Dark → Light → Forest → Sunset → Dark. */
.theme-toggle svg { display: none; }
:root[data-theme="dark"]   .theme-toggle .theme-icon-moon   { display: block; }
:root[data-theme="light"]  .theme-toggle .theme-icon-sun    { display: block; }
:root[data-theme="forest"] .theme-toggle .theme-icon-forest { display: block; }
:root[data-theme="sunset"] .theme-toggle .theme-icon-sunset { display: block; }
/* Fall-through when nothing is set yet (initial paint before JS runs). */
:root:not([data-theme]) .theme-toggle .theme-icon-moon { display: block; }
.theme-toggle-label {
  font-weight: 500;
  letter-spacing: .12em;
}

@media (max-width: 720px) {
  .theme-toggle .theme-toggle-label { display: none; }
  .theme-toggle { padding: 8px; }
}

/* ─── Cloud sync topbar chip ──────────────────────────────────────────── */
.sync-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-dim);
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: default;
}
.sync-chip[data-state="ok"]      { color: #6cd07a; border-color: rgba(108,208,122,.4); }
.sync-chip[data-state="pushing"] { color: #f0a85a; border-color: rgba(240,168,90,.4); animation: chip-pulse 1.4s ease-in-out infinite; }
.sync-chip[data-state="error"]   { color: #e06464; border-color: rgba(224,100,100,.4); }
@media (max-width: 720px) { .sync-chip { padding: 6px 8px; font-size: 10px; } }

/* ─── Embedded model topbar chip ──────────────────────────────────────── */
.embedded-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-dim);
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.embedded-chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.embedded-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.embedded-chip[data-state="ready"]            .embedded-chip-dot { background: #b07cff; box-shadow: 0 0 8px rgba(176,124,255,.6); }
.embedded-chip[data-state="loading-library"]  .embedded-chip-dot,
.embedded-chip[data-state="loading-model"]    .embedded-chip-dot,
.embedded-chip[data-state="warming"]          .embedded-chip-dot,
.embedded-chip[data-state="stepping-down"]    .embedded-chip-dot {
  background: #f0a85a;
  animation: chip-pulse 1.4s ease-in-out infinite;
}
.embedded-chip[data-state="error"]            .embedded-chip-dot { background: #e06464; }
.embedded-chip[data-state="no-webgpu"]        .embedded-chip-dot { background: #f0a85a; }
.embedded-chip[data-state="ready"]            { color: var(--ink); border-color: rgba(176,124,255,.45); }
.embedded-chip-pct { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
@keyframes chip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (max-width: 720px) {
  .embedded-chip-text { display: none; }
  .embedded-chip { padding: 6px 8px; }
}

/* ─── Chat entry action row ──────────────────────────────────────────── */
.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  opacity: .55;
  transition: opacity .12s ease;
}
.entry:hover .entry-actions,
.entry:focus-within .entry-actions { opacity: 1; }
.entry-action {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  padding: 4px 10px;
  font: 500 10.5px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.entry-action:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
  background: var(--paper-2);
}
.entry-action.flashed {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: var(--paper-2);
}
.entry-action.danger:hover {
  color: #e06464;
  border-color: rgba(224,100,100,.5);
}
@media (max-width: 720px) {
  .entry-actions { opacity: 1; }
  .entry-action  { padding: 6px 10px; font-size: 10px; }
}
.entry-action.is-on {
  color: var(--signal);
  border-color: var(--signal-dim);
}
/* Copy is the most-used action — keep it visually obvious. */
.entry-action.is-copy {
  color: var(--signal);
  border-color: var(--signal-dim);
}
.entry-action.is-copy:hover {
  color: var(--signal-glint);
  border-color: var(--signal);
  background: var(--paper-2);
}

/* Pinned chat entries — subtle copper hairline, star flag */
.entry.is-pinned {
  border-left: 3px solid var(--signal);
  padding-left: 14px;
  margin-left: -17px;  /* compensate so content lines up with unpinned */
}
.entry-flag.is-pinned {
  background: var(--signal-dim);
  color: var(--paper-1);
  font-weight: 600;
}

/* Fenced code blocks rendered inside chat responses */
.entry-response { display: flex; flex-direction: column; gap: 12px; }
.entry-response .prose { margin: 0; white-space: pre-wrap; }
.code-block {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-3);
  overflow: hidden;
  position: relative;
}
.code-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.code-block-lang {
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.code-copy {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  padding: 3px 8px;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.code-copy:hover    { color: var(--ink); border-color: var(--ink-dim); background: var(--paper-1); }
.code-copy.flashed  { color: var(--signal); border-color: var(--signal-dim); }
.code-block pre {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  font: 400 13px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
}

/* Note word/reading time meta */
.note-meta {
  margin: 6px 0 8px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Composer auto-grow: respect inline height; keep min so empty draft
   doesn't collapse to a single line. */
#prompt {
  min-height: 6.5em;
  max-height: 60vh;
  resize: none;  /* let auto-grow own the height */
}

/* Chat empty state */
.chat-empty-state {
  padding: 36px 28px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink-dim);
}
.chat-empty-state h3 {
  margin: 0 0 8px;
  font: 600 18px/1.2 'IBM Plex Serif', serif;
  color: var(--ink);
}
.chat-empty-state p { margin: 0 0 18px; font-size: 14px; }
.chat-empty-tips {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-empty-tips li::marker { color: var(--ink-faint); }
.chat-empty-state kbd,
.shortcuts-overlay kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper-1);
  font: 500 11px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
}

/* Tab keyboard hint badges */
.tab .tab-key {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: 500 9.5px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  color: var(--ink-faint);
  background: transparent;
  vertical-align: middle;
  transition: color .12s ease, border-color .12s ease;
}
.tab.active .tab-key { color: var(--ink-dim); border-color: var(--ink-dim); }
@media (max-width: 720px) { .tab .tab-key { display: none; } }

/* ─── Note editor: mic + backup chip ─────────────────────────────────── */
.note-body-wrap { position: relative; }
.note-body-wrap .full { display: block; }
.note-mic {
  position: absolute;
  top: 30px;
  right: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.note-mic:hover { color: var(--ink); border-color: var(--ink-dim); }
.note-mic.is-on {
  color: var(--paper);
  background: #d56a55;
  border-color: #d56a55;
  box-shadow: 0 0 12px rgba(213,106,85,.55);
  animation: mic-pulse 1.6s ease-in-out infinite;
}
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 12px rgba(213,106,85,.55); } 50% { box-shadow: 0 0 18px rgba(213,106,85,.85); } }

.note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
.note-backup-chip {
  font: 500 10.5px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  background: var(--paper-2);
  cursor: pointer;
}
.note-backup-chip[data-state="ok"]       { color: #6cd07a; border-color: rgba(108,208,122,.4); }
.note-backup-chip[data-state="pushing"]  { color: #f0a85a; border-color: rgba(240,168,90,.4); }
.note-backup-chip[data-state="queued"]   { color: var(--ink-dim); }
.note-backup-chip[data-state="error"]    { color: #e06464; border-color: rgba(224,100,100,.4); }
.note-backup-chip[data-state="disabled"] { color: var(--ink-faint); }

/* ─── topbar Cloud sync chip — colors by status ───────────────────────── */
.status strong#syncStat[data-state="synced"]   { color: var(--signal); }
.status strong#syncStat[data-state="pushing"],
.status strong#syncStat[data-state="pulling"],
.status strong#syncStat[data-state="enabling"] { color: var(--warn, #c98e3b); }
.status strong#syncStat[data-state="offline"]  { color: var(--ink-faint); }
.status strong#syncStat[data-state="error"]    { color: var(--alert); }
.status strong#syncStat[data-state="idle"]     { color: var(--ink-faint); }

/* ─── Note AI inline panel (Rewrite / Summarize / Make prompt) ───────── */
/* Slides in below the editor footer when the operator triggers one of
   the AI actions. Streams tokens live, then exposes Accept/Append/
   Send-to-chat/Discard so the result can be folded back into the note
   without ever leaving the editor. */
.note-ai-panel {
  margin: 0 24px 24px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  animation: note-ai-in .18s ease;
}
@keyframes note-ai-in {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.note-ai-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.note-ai-kind {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ink-faint);
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 1px;
  font-weight: 600;
}
.note-ai-status {
  flex: 1 1 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  margin: 0;
}
.note-ai-panel[data-state="done"]      .note-ai-status { color: var(--signal); }
.note-ai-panel[data-state="error"]     .note-ai-status { color: var(--alert); }
.note-ai-panel[data-state="cancelled"] .note-ai-status { color: var(--ink-faint); }
.note-ai-panel[data-state="streaming"] .note-ai-status::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  background: var(--warn, #c98e3b);
  border-radius: 999px;
  animation: note-ai-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes note-ai-pulse {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.note-ai-output {
  margin: 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 360px;
  overflow-y: auto;
  min-height: 64px;
}
.note-ai-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.note-ai-foot .primary,
.note-ai-foot .secondary,
.note-ai-foot .ghost {
  font-size: 12px;
  padding: 7px 14px;
}

/* ─── Notes UI polish: tighter sidebar, larger editor type ──────────── */
.notes-editor-title {
  font-size: 22px;
  letter-spacing: -.01em;
  font-weight: 500;
}
#noteBody {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -.003em;
}
.note-row-title {
  font-weight: 500;
}

/* ─── Chat composer: attach button + attachment chips ────────────────── */
.attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 6px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
}
.chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: 500 11px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
}
.chat-attach-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attach-x {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.chat-attach-x:hover { color: #e06464; }

/* ─── Tin Brain 1.0 chip ─────────────────────────────────────────────── */
.brain-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-dim);
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.brain-chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.brain-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.brain-chip[data-state="watching"]      .brain-chip-dot { background: #6cd07a; box-shadow: 0 0 8px rgba(108,208,122,.5); }
.brain-chip[data-state="watching"]                       { color: var(--ink); border-color: rgba(108,208,122,.4); }
.brain-chip[data-state="learning"]      .brain-chip-dot { background: #f0a85a; animation: chip-pulse 1.2s ease-in-out infinite; }
.brain-chip[data-state="learning"]                       { color: var(--ink); border-color: rgba(240,168,90,.45); }
.brain-chip[data-state="error"]         .brain-chip-dot { background: #e06464; }
.brain-chip[data-state="error"]                          { color: #e06464; border-color: rgba(224,100,100,.4); }
.brain-chip[data-state="idle"]          .brain-chip-dot { background: var(--ink-faint); }
.brain-chip[data-state="paused"]        .brain-chip-dot { background: var(--ink-faint); opacity: .5; }
.brain-chip-meta { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .brain-chip-text { display: none; }
  .brain-chip { padding: 6px 8px; }
}

/* ─── Tin Brain panel (agents tab) ───────────────────────────────────── */
.brain-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .brain-grid { grid-template-columns: 1fr 1fr; }
  .brain-grid .brain-memory-card { grid-column: 1 / -1; }
}
.brain-card {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 16px;
  border-radius: 6px;
}
.brain-card h4 {
  margin: 0 0 12px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.brain-count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.brain-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font: 400 12.5px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  margin: 0;
}
.brain-stats dt { color: var(--ink-faint); }
.brain-stats dd { margin: 0; color: var(--ink); }
.brain-stats dd[data-state="watching"]    { color: #6cd07a; }
.brain-stats dd[data-state="learning"],
.brain-stats dd[data-state="consolidating"],
.brain-stats dd[data-state="profiling"],
.brain-stats dd[data-state="observing"]   { color: #f0a85a; }
.brain-stats dd[data-state="error"]       { color: #e06464; }
.brain-stats dd[data-state="paused"]      { color: var(--ink-faint); }
.brain-stats .brain-error { color: #e06464; word-break: break-word; }

.brain-profile-text {
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-3);
  font: 400 13px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  white-space: pre-wrap;
  color: var(--ink);
}
.brain-profile-meta {
  margin: 0 0 12px;
  font: 500 10px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.brain-empty {
  color: var(--ink-dim);
  font-style: italic;
  margin: 0 0 12px;
}

.brain-memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brain-memory {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px;
  background: var(--paper-3);
}
.brain-memory.is-consolidated {
  border-color: rgba(200,133,74,.4);
}
.brain-memory-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brain-memory-kind { color: var(--ink-dim); }
.brain-memory.is-consolidated .brain-memory-kind { color: var(--signal); }
.brain-memory-weight {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.brain-memory-del {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.brain-memory-del:hover { color: #e06464; }
.brain-memory-text {
  margin: 0 0 6px;
  font: 400 13px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
}
.brain-memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.brain-tag {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: 500 10px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint);
  background: var(--paper-2);
}

/* ─── Notes redesign: categorized sidebar + cleaner editor ─────────────
   Two-column layout that fills the viewport; left side hosts a
   categorized note tree with HTML5 drag-and-drop targets, right side
   is a roomy editor with title, category select, body, and actions. */
#notes.notes-view { padding-top: 28px; }
#notes.notes-view.active { display: flex; flex-direction: column; }
.notes-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 220px);
}
.notes-shell > .panel { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.notes-shell > .notes-sidebar { border-right-width: 0; }
.notes-shell > .notes-editor { background: var(--paper-1); }

/* sidebar */
.notes-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--rule);
}
.notes-sidebar-head h2 {
  margin: 0;
  font: 600 18px/1 'IBM Plex Serif', serif;
  letter-spacing: -.005em;
  color: var(--ink);
}
.new-note-btn {
  padding: 6px 12px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .04em;
}
.notes-search-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.notes-search-row input {
  width: 100%;
  padding: 8px 10px;
  font: 400 13px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
}
.notes-search-row input:focus { outline: none; border-color: var(--ink-dim); }

.notes-tree {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 12px;
}
.notes-sidebar-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
}
.notes-sidebar-foot .ghost {
  width: 100%;
  padding: 7px 10px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.notes-sidebar-foot .ghost:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--paper-2); }

/* ── horizontal category bar (chips double as filter + drop target) ──── */
.notes-catbar {
  border-bottom: 1px solid var(--rule);
  --catbar-h: 116px;
}
.notes-catbar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px 6px;
}
.notes-catbar-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--ink-dim);
  font: 600 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.notes-catbar-toggle:hover { color: var(--ink); }
.notes-catbar-toggle .catbar-caret { font-size: 10px; color: var(--ink-faint); transition: transform .15s ease; }
.notes-catbar.is-collapsed .notes-catbar-toggle .catbar-caret { transform: rotate(-90deg); }
.catbar-add {
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--ink-dim);
  padding: 4px 9px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.catbar-add:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--paper-2); }

.notes-catbar-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 14px 10px;
  max-height: var(--catbar-h);
  overflow-y: auto;
}
.notes-catbar.is-collapsed .notes-catbar-chips,
.notes-catbar.is-collapsed .notes-catbar-resize { display: none; }

.cat-chip {
  --chip-dot: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-dim);
  font: 500 12px/1 'IBM Plex Sans', system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.cat-chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.cat-chip.is-active {
  background: var(--paper-3);
  border-color: var(--signal);
  color: var(--signal-glint);
  box-shadow: inset 0 0 0 1px var(--signal);
}
.cat-chip.is-drop-over {
  border-color: var(--signal);
  background: rgba(212, 162, 110, .14);
  box-shadow: 0 0 0 2px rgba(212, 162, 110, .35);
}
.cat-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chip-dot); flex: 0 0 auto;
}
.cat-chip-name { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cat-chip-count {
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint); letter-spacing: .03em;
  padding: 1px 5px; background: var(--paper-1);
  border: 1px solid var(--rule); border-radius: 999px;
}
.cat-chip.is-active .cat-chip-count { color: var(--signal-glint); border-color: var(--signal); }
.cat-chip-edit, .cat-chip-del {
  display: none;
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--ink-faint); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.cat-chip:hover .cat-chip-edit, .cat-chip.is-active .cat-chip-edit,
.cat-chip:hover .cat-chip-del,  .cat-chip.is-active .cat-chip-del { display: inline-flex; }
.cat-chip-edit:hover { color: var(--ink); background: var(--paper-1); }
.cat-chip-del:hover  { color: #e06464; background: var(--paper-1); }

/* drag-to-resize slider for the category area */
.notes-catbar-resize {
  height: 10px;
  margin-top: -5px;
  cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.notes-catbar-resize::after {
  content: '';
  width: 34px; height: 3px; border-radius: 999px;
  background: var(--rule);
  transition: background .12s;
}
.notes-catbar-resize:hover::after,
.notes-catbar-resize:focus-visible::after { background: var(--ink-dim); }
.notes-catbar-resize:focus-visible { outline: none; }

/* flat note list (post-revamp): rows sit directly under .notes-tree */
.notes-tree > .note-row { padding: 8px 14px; border-left: 2px solid transparent; }
.note-row-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--row-dot, var(--ink-faint));
  flex: 0 0 auto;
}

/* category group (legacy vertical tree — kept for fallback) */
.cat-group { --cat-dot: var(--ink-faint); }
.cat-group + .cat-group { border-top: 1px solid var(--rule); }
.cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  font: 500 12px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  position: relative;
  transition: background .12s ease;
}
.cat-header:hover { background: var(--paper-2); }
.cat-caret {
  font-size: 10px;
  width: 10px;
  color: var(--ink-faint);
  transition: transform .15s ease;
}
.cat-group.is-collapsed .cat-caret { transform: rotate(-90deg); }
.cat-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cat-dot);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--paper-1);
}
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count {
  font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint);
  letter-spacing: .04em;
  padding: 2px 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.cat-actions {
  display: inline-flex; gap: 2px;
  opacity: 0; transition: opacity .12s;
}
.cat-header:hover .cat-actions { opacity: 1; }
.cat-rename, .cat-delete {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.cat-rename:hover { color: var(--ink); border-color: var(--rule); background: var(--paper-2); }
.cat-delete:hover { color: #e06464; border-color: rgba(224,100,100,.4); background: var(--paper-2); }

.cat-list {
  padding: 0 0 6px;
  overflow: hidden;
  max-height: 9999px;
  transition: max-height .2s ease;
}
.cat-group.is-collapsed .cat-list { max-height: 0; padding: 0; }
.cat-empty {
  margin: 4px 14px 8px;
  padding: 10px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  font: 400 11.5px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: .02em;
}

/* note row */
.note-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 7px 14px 7px 32px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  font: 400 13px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  transition: background .1s, border-color .1s;
}
.note-row:hover { background: var(--paper-2); }
.note-row.is-active {
  background: var(--paper-3);
  border-left-color: var(--signal);
  color: var(--signal-glint);
}
.note-row.is-dragging { opacity: .4; }
.note-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-row-meta {
  font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint);
  letter-spacing: .02em;
  flex: 0 0 auto;
}

/* drop target highlight */
.cat-group.is-drop-over { background: rgba(212, 162, 110, .06); }
.cat-group.is-drop-over .cat-header {
  box-shadow: inset 3px 0 0 var(--signal);
}

/* editor pane */
.notes-editor { padding: 0 !important; }
.notes-editor-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 28px 14px;
  border-bottom: 1px solid var(--rule);
}
.notes-editor-title {
  flex: 1;
  min-width: 220px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  font: 600 22px/1.2 'IBM Plex Serif', serif;
  letter-spacing: -.01em;
  color: var(--ink);
}
.notes-editor-title:focus { outline: none; }
.notes-editor-title::placeholder { color: var(--ink-faint); font-style: italic; }
.notes-editor-meta {
  display: flex; align-items: center; gap: 12px;
}
.notes-cat-picker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
}
.notes-cat-picker-label {
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.notes-cat-picker select {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: 500 12px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  padding-right: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 6px) 50%, calc(100% - 2px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.notes-cat-picker select:focus { outline: none; }

/* editor body wrap (overrides earlier `.note-body-wrap` ones for new layout) */
.notes-editor .note-body-wrap {
  position: relative;
  flex: 1;
  display: flex;
  padding: 16px 28px 0;
}
.notes-editor #noteBody {
  flex: 1;
  width: 100%;
  background: transparent;
  border: 0;
  resize: none;
  padding: 4px 36px 4px 0;
  font: 400 14px/1.65 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  min-height: 320px;
}
.notes-editor #noteBody:focus { outline: none; }
.notes-editor .note-mic { top: 16px; right: 28px; }

.notes-editor-foot {
  padding: 12px 28px 22px;
  border-top: 1px solid var(--rule);
}
.notes-editor-foot .note-meta-row { margin: 0 0 10px; }
.notes-editor-foot .note-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0;
}
.note-actions-spacer { flex: 1; }
.note-actions .ghost {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-dim);
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.note-actions .ghost:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--paper-2); }

/* small-screen fallback: stack editor under sidebar */
@media (max-width: 880px) {
  .notes-shell { grid-template-columns: 1fr; min-height: 0; }
  .notes-shell > .notes-sidebar { border-right-width: 1px; border-bottom-width: 0; }
  .notes-tree { max-height: 40vh; }
  .notes-editor #noteBody { min-height: 220px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MODERN REVAMP — copper-on-charcoal (2026-05)

   Layered foundation that overrides the earlier "lab notebook" surface
   primitives. Strategy: keep the copper accent palette (it's our identity)
   but drop the brutalist hairline + monospace-everywhere look that read
   as "in-progress / sketchy". This block restyles only base primitives
   (body, panel, button, tab, input, status bar, section title) so every
   screen levels up at once without touching component-specific CSS.

   Snapshot of pre-revamp state lives at branch
   snapshot/pre-modern-revamp-2026-05-08 if we need to diff or revert.
   ───────────────────────────────────────────────────────────────────────── */

:root, :root[data-theme="dark"] {
  /* Surfaces — slightly cooler/richer than the original warm-paper tones,
     so copper accents pop instead of blending in. */
  --surface-0:    #0d0b09;
  --surface-1:    #15110d;
  --surface-2:    #1c1814;
  --surface-3:    #251f19;
  --line-soft:    rgba(245, 226, 196, .06);
  --line-medium:  rgba(245, 226, 196, .11);
  --line-strong:  rgba(245, 226, 196, .18);
  --copper-glow:  rgba(200, 133, 74, .22);
  --copper-glow-soft: rgba(200, 133, 74, .10);

  /* Spacing + radii + elevation */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.025) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.035) inset, 0 8px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
  --shadow-3: 0 1px 0 rgba(255,255,255,.04) inset,  0 18px 40px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4);
  --ring-copper: 0 0 0 1px rgba(200,133,74,.55), 0 0 0 4px rgba(200,133,74,.18);

  /* Typography stack — system sans for body (CSP locks fonts to self,
     so we lean on the OS UI font instead of bundling Inter). Plex Serif
     stays for the brand wordmark; Plex Mono stays for code + numerics. */
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-brand:   'IBM Plex Serif', "Georgia", serif;
}

:root[data-theme="light"] {
  --surface-0:    #f7f1e3;
  --surface-1:    #efe6d2;
  --surface-2:    #e8dcc1;
  --surface-3:    #ddcfae;
  --line-soft:    rgba(60, 40, 18, .08);
  --line-medium:  rgba(60, 40, 18, .14);
  --line-strong:  rgba(60, 40, 18, .22);
  --copper-glow:  rgba(154, 94, 42, .18);
  --copper-glow-soft: rgba(154, 94, 42, .08);
  --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(60,40,18,.08);
  --shadow-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px rgba(60,40,18,.12), 0 2px 4px rgba(60,40,18,.08);
  --shadow-3: 0 1px 0 rgba(255,255,255,.75) inset, 0 18px 40px rgba(60,40,18,.16);
  --ring-copper: 0 0 0 1px rgba(154,94,42,.55), 0 0 0 4px rgba(154,94,42,.18);
}

html { font-size: 15px; }

body {
  font-family: var(--font-body);
  background: var(--surface-0);
  color: var(--ink);
  font-feature-settings: "kern", "liga", "ss01";
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle ambient warmth: a near-invisible copper wash at the top-right
   so the otherwise flat charcoal doesn't read as "blank dark slab". */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 90% -10%, var(--copper-glow-soft) 0%, transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(200,133,74,.05) 0%, transparent 55%);
}
.app, .access { position: relative; z-index: 1; }

/* ─── topbar + status bar ─────────────────────────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 18px;
}
.status {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin: 18px 0 0;
  box-shadow: var(--shadow-1);
}
.status > div {
  border: 0;
  padding: 0 18px;
}
.status > div:not(:first-child) {
  border-left: 1px solid var(--line-soft);
}
.status span {
  font: 500 9.5px/1.2 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.status strong {
  font: 500 13px/1.2 var(--font-body);
  color: var(--ink);
  letter-spacing: -.005em;
}

/* ─── sidebar + tabs (Linear-style pills with copper-glow active) ─────── */
.sidebar {
  border-right: 0;
  background: linear-gradient(180deg, rgba(28,24,20,.55), rgba(20,17,13,.4));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  gap: 2px;
  box-shadow: var(--shadow-1);
}
.sidebar-group {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .18em;
  color: var(--ink-faint);
  padding: 14px 10px 6px;
}

.tab {
  border-radius: var(--r);
  padding: 9px 12px;
  gap: 8px;
  font: 500 13px/1.2 var(--font-body);
  letter-spacing: -.003em;
  color: var(--ink-dim);
  transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.tab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.tab.active {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--signal-glint);
  box-shadow: inset 0 0 0 1px rgba(200,133,74,.28), 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 14px rgba(0,0,0,.3);
}
.tab.active::before {
  /* replace the jutting left rail with a soft copper indicator dot */
  content: '';
  position: absolute;
  left: 6px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(200,133,74,.7);
  animation: none;
}
.tab .tab-meta {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: .04em;
  opacity: 1;
}
.tab.active .tab-meta {
  background: rgba(200,133,74,.12);
  border-color: rgba(200,133,74,.28);
  color: var(--signal);
}

/* ─── panels (cards with depth) ────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-1);
}
/* Two-pane forms: previously the inner border was zeroed, leaving a
   visible rounding gap. Suppress the inner-side rounding so the two
   panels read as one continuous surface. */
.grid.two > .panel:first-child  { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right-width: 1px; border-right-color: var(--line-soft); }
.grid.two > .panel:last-child   { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left-width: 0; }
.notes-shell > .notes-sidebar   { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: 1px solid var(--line-soft); }
.notes-shell > .notes-editor    { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left-width: 0; }
.editor-grid > .panel           { border-radius: 0; }
.editor-grid > .panel:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.editor-grid > .panel:last-child  { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.editor-tree-panel { border-right: 1px solid var(--line-soft) !important; }

/* ─── section titles (drop the schematic eyebrow, weighted heading) ──── */
.section-title {
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  align-items: flex-end;
}
.section-title::after {
  /* thin copper accent rule sitting under the title */
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--signal-glint), var(--signal) 60%, transparent);
}
.section-title p {
  /* hide the "Tab / 01" lab-fragment eyebrows globally — they read as
     in-progress wireframe markers, not product chrome. */
  display: none;
}
.section-title h2 {
  font: 600 22px/1.2 var(--font-display);
  font-style: normal;
  letter-spacing: -.012em;
  color: var(--ink);
  font-feature-settings: "ss01", "kern";
}

/* Brain panel keeps its version eyebrow because it's a meaningful chip,
   not a schematic fragment. */
#tinBrainPanel .section-title p {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(200,133,74,.35);
  border-radius: 999px;
  background: rgba(200,133,74,.08);
  color: var(--signal);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─── inputs ──────────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-body);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 9px 12px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-medium); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(200,133,74,.55);
  background: var(--surface-3);
  box-shadow: var(--ring-copper);
}

/* ─── buttons (rounded, lift on hover, copper primary) ────────────────── */
.primary, .secondary, .danger, .icon-btn {
  border-radius: var(--r);
  padding: 9px 14px;
  font: 500 13px/1.2 var(--font-body);
  letter-spacing: -.003em;
  border: 1px solid var(--line-medium);
  background: var(--surface-2);
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.secondary, .icon-btn {
  background: var(--surface-2);
  color: var(--ink-dim);
}
.secondary:hover, .icon-btn:hover {
  background: var(--surface-3);
  border-color: rgba(200,133,74,.35);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.primary {
  background: linear-gradient(180deg, #d49764 0%, var(--signal) 60%, #a76d36 100%);
  border-color: #b97942;
  color: #1a1106;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,235,200,.4) inset, 0 6px 14px rgba(200,133,74,.35), 0 1px 2px rgba(0,0,0,.3);
}
.primary:hover {
  background: linear-gradient(180deg, var(--signal-glint) 0%, #d49764 60%, var(--signal) 100%);
  border-color: var(--signal-glint);
  color: #1a1106;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,250,220,.5) inset, 0 10px 24px rgba(200,133,74,.5), 0 2px 4px rgba(0,0,0,.3);
}
.primary:active { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 6px rgba(200,133,74,.4); }
.danger {
  background: var(--surface-2);
  border-color: rgba(213,106,85,.35);
  color: var(--alert);
}
.danger:hover {
  background: rgba(213,106,85,.12);
  border-color: var(--alert);
  color: #ffb5a3;
  transform: translateY(-1px);
}

/* ghost button — for tertiary actions that shouldn't compete visually */
.ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.ghost:hover {
  background: var(--surface-2);
  border-color: var(--line-medium);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ─── cards / mini-items get the new surface treatment ────────────────── */
.card, .mini-item {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 0;  /* preserved for stacked-list look in Models / Skills */
  padding: 16px 18px;
}
.card:hover, .mini-item:hover {
  background: var(--surface-2);
  border-color: var(--line-medium);
}
.mini-item.is-active, .card.is-active {
  background: var(--surface-3);
  border-left: 2px solid var(--signal);
  box-shadow: inset 4px 0 12px -4px var(--copper-glow);
}
.card h3, .mini-item h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.005em;
  color: var(--ink);
}
.card p, .mini-item p {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* ─── monospace lock-ins — anywhere we genuinely want fixed-width ────── */
code, kbd, samp, pre,
.note-meta, .note-backup-chip,
.tab-meta, .tab-key,
.cat-count, .note-row-meta,
.brand-row .title-stack p,
.sidebar-group,
#timer, #counter,
.status span {
  font-family: var(--font-mono);
}

/* ─── chat composer / textarea — keep proportional, not console ──────── */
#prompt, #noteBody, #noteTitle, #codeIssue, #skillPrompt {
  font-family: var(--font-body);
  letter-spacing: -.003em;
}

/* ─── chips, autosave badge, tags pick up the new line treatment ─────── */
.chips {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.autosave-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
}

/* ─── notes view: harmonize with new tokens ──────────────────────────── */
.notes-shell { min-height: calc(100vh - 240px); }
.notes-sidebar-head h2 { font-family: var(--font-display); font-weight: 600; font-style: normal; }
.cat-header { font-family: var(--font-body); }
.cat-count   { background: var(--surface-2); border-color: var(--line-soft); }
.note-row    { font-family: var(--font-body); padding-left: 36px; }
.note-row-title { font-weight: 500; }
.notes-editor-title { font-family: var(--font-display); font-style: normal; font-weight: 600; }
.notes-cat-picker {
  background: var(--surface-2);
  border-color: var(--line-medium);
}
.notes-cat-picker:focus-within { box-shadow: var(--ring-copper); border-color: rgba(200,133,74,.55); }

/* ─── access card: lift it off the page ──────────────────────────────── */
.access-card {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}

/* ─── Tin Brain panel grid: keep accent treatment but with new tokens ── */
.brain-card, .brain-status-card, .brain-summary-card, .brain-memory-list {
  background: var(--surface-2);
  border-color: var(--line-soft);
  border-radius: var(--r);
}

/* ─── scrollbars — refined to match the surface ──────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-medium);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; }

/* ─── focus ring everywhere keyboard nav lands ───────────────────────── */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--ring-copper);
  border-radius: var(--r-sm);
}
.tab:focus-visible { box-shadow: var(--ring-copper); }

/* ─── small consistency nudges ───────────────────────────────────────── */
.split { background: var(--line-soft); }
.muted { color: var(--ink-dim); font-family: var(--font-body); }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 16px 0; }

/* ─────────────────────────────────────────────────────────────────────────
   MODERN REVAMP — pass 2 (component layer, 2026-05)

   Builds on pass 1's primitive refresh by re-cutting the components
   that still read as old-stack: chat composer + toolbar, model picker,
   command palette, dialogs / modals, toasts, chat empty state, prompt-plus
   menu. Same strategy — append-only override block, no surgery into
   earlier sections, so the rollback path stays clean.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── chat view shell ────────────────────────────────────────────────── */
#chat.view {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* ─── chat toolbar ───────────────────────────────────────────────────── */
.chat-toolbar {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 18px;
  gap: 16px;
}
.chat-toolbar-cell select {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
}
.chat-toolbar-cell select:hover { border-color: var(--line-medium); }
.chat-toolbar-cell select:focus {
  outline: none;
  border-color: rgba(200,133,74,.55);
  box-shadow: var(--ring-copper);
}
.chat-toolbar-label {
  font: 500 9.5px/1.2 var(--font-mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

/* ─── chat stream + empty state ──────────────────────────────────────── */
.chat-stream {
  background: var(--surface-1);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  padding: 22px 26px;
}
.chat-stream.empty {
  color: var(--ink-dim);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 56px 32px;
}
.chat-empty-state {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-1);
  padding: 32px 30px;
}
.chat-empty-state h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.chat-empty-state p,
.chat-empty-tips {
  font-family: var(--font-body);
}
.chat-empty-state kbd,
.shortcuts-overlay kbd,
kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border: 1px solid var(--line-medium);
  background: var(--surface-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--ink-dim);
  letter-spacing: .02em;
}

/* ─── chat composer ──────────────────────────────────────────────────── */
.chat-composer {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border-top: 1px solid var(--line-soft);
  padding: 14px 18px 16px;
}
.chat-composer .chips {
  margin: 0 0 10px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px dashed var(--line-medium);
  border-radius: var(--r);
}
/* live skill-router preview (Tin 1.7) */
#skillChips:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.skill-preview-label {
  font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.skill-preview-chip {
  font: 500 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  padding: 3px 8px; border-radius: 999px;
  background: var(--paper-3); color: var(--ink);
  border: 1px solid var(--rule);
}
.skill-preview-chip.is-auto { background: var(--signal-dim); color: var(--signal-glint); border-color: var(--signal-dim); }
.skill-preview-chip.is-auto::before { content: '⚡ '; }
.chat-composer .prompt-wrap textarea {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  padding: 12px 14px 12px 50px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.chat-composer .prompt-wrap textarea:hover { border-color: var(--line-medium); }
.chat-composer .prompt-wrap textarea:focus {
  outline: none;
  border-color: rgba(200,133,74,.55);
  background: var(--surface-3);
  box-shadow: var(--ring-copper);
}

/* prompt-plus button: refined chip that rotates into an X when open */
.prompt-plus {
  background: var(--surface-3);
  border: 1px solid var(--line-medium);
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  top: 11px;
  left: 11px;
  color: var(--ink-dim);
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.prompt-plus:hover {
  color: var(--signal);
  border-color: rgba(200,133,74,.5);
  background: var(--surface-3);
  box-shadow: 0 0 0 4px var(--copper-glow-soft);
}
.prompt-plus.is-open {
  color: var(--signal-glint);
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 0 4px var(--copper-glow);
  transform: rotate(45deg);
}

/* prompt-plus menu */
.prompt-plus-menu {
  margin-top: 8px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-medium);
  border-radius: var(--r);
  padding: 6px;
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(8px);
}
.prompt-plus-item {
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-family: var(--font-body);
  transition: background .12s ease, color .12s ease;
}
.prompt-plus-item:hover:not([disabled]) {
  background: var(--surface-3);
}
.prompt-plus-icon { font-family: var(--font-mono); color: var(--signal); }
.prompt-plus-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.prompt-plus-desc { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-dim); }

/* composer secondary buttons (counter, timer, attach, clear) */
.composer-icon-btn {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font: 500 11.5px/1.2 var(--font-body);
  color: var(--ink-dim);
  letter-spacing: -.003em;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.composer-icon-btn:hover {
  color: var(--ink);
  border-color: rgba(200,133,74,.4);
  background: var(--surface-3);
  transform: translateY(-1px);
}
.composer-send {
  padding: 8px 16px;
  font-size: 12.5px;
  letter-spacing: -.003em;
}
.chat-composer .timer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* attachment chip strip */
.attach-btn {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font: 500 12px/1.2 var(--font-body);
  color: var(--ink-dim);
}
.attach-btn:hover {
  color: var(--ink);
  border-color: rgba(200,133,74,.45);
  background: var(--surface-3);
}

/* ─── model picker ───────────────────────────────────────────────────── */
.mp-trigger {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: -.005em;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mp-trigger:hover {
  border-color: var(--line-medium);
  background: var(--surface-3);
}
.model-picker.is-open .mp-trigger,
.mp-trigger:focus-visible {
  outline: none;
  border-color: rgba(200,133,74,.55);
  background: var(--surface-3);
  box-shadow: var(--ring-copper);
}
.mp-trigger-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset, 0 0 8px currentColor;
}

.mp-menu {
  top: calc(100% + 8px);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-medium);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.mp-search-row {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px;
}
.mp-search {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
}
.mp-search:focus {
  border-color: rgba(200,133,74,.55);
  box-shadow: var(--ring-copper);
}
.mp-loading, .mp-empty {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 22px 16px;
  letter-spacing: -.003em;
}

/* ─── dialogs (settings, palette, shortcuts, editor-modal) ───────────── */
dialog.settings,
dialog.palette,
dialog.shortcuts-overlay,
dialog.editor-modal {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-medium);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(200,133,74,.08);
  overflow: hidden;
}
dialog.settings::backdrop,
dialog.palette::backdrop,
dialog.shortcuts-overlay::backdrop,
dialog.editor-modal::backdrop {
  background: rgba(10, 8, 6, .72);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.settings .modal-head,
dialog.editor-modal .modal-head {
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 24px;
}
.settings .modal-head h2,
.shortcuts-head h2,
dialog.editor-modal .modal-head h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.settings .body { padding: 20px 24px 24px; gap: 6px; }
.settings-label {
  font: 500 9.5px/1.2 var(--font-mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.settings-section .hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-dim);
}

/* ─── command palette ────────────────────────────────────────────────── */
.palette-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.palette-prompt {
  font: 500 9.5px/1.2 var(--font-mono);
  letter-spacing: .14em;
  background: linear-gradient(180deg, var(--signal-glint), var(--signal));
  color: #1a1106;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,235,200,.4) inset, 0 0 12px rgba(200,133,74,.35);
}
.palette-head input {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: -.005em;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
}
.palette-head input::placeholder { color: var(--ink-faint); }
.palette-group {
  font: 500 9.5px/1.2 var(--font-mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
  padding: 14px 18px 6px;
}
.palette-item {
  margin: 0 8px;
  padding: 10px 14px;
  border-left: 0;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.palette-item:hover { background: var(--surface-3); }
.palette-item.is-selected {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px rgba(200,133,74,.3);
  color: var(--signal-glint);
}
.palette-item-main {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: inherit;
}
.palette-item-hint {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-dim);
}
.palette-kind {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--signal);
  background: rgba(200,133,74,.10);
  border: 1px solid rgba(200,133,74,.25);
  border-radius: 999px;
  padding: 2px 7px;
  margin-right: 0;
  text-transform: uppercase;
}
.palette-empty {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-dim);
  padding: 36px;
}
.palette-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}

/* ─── toasts ─────────────────────────────────────────────────────────── */
.toast {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-medium);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 18px;
  color: var(--ink);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(200,133,74,.12);
}
.toast::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(200,133,74,.7);
}
.toast.undo {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-medium);
  border-radius: var(--r);
}
.toast.undo .undo-btn {
  border: 1px solid rgba(200,133,74,.4);
  background: rgba(200,133,74,.08);
  color: var(--signal);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font: 500 12px/1.2 var(--font-body);
}
.toast.undo .undo-btn:hover {
  background: var(--signal);
  color: #1a1106;
}

/* ─── store-panel + skill cards ──────────────────────────────────────── */
.store-panel {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

/* ─── editor-modal action buttons row ────────────────────────────────── */
dialog.editor-modal .body { padding: 20px 24px; }

/* ─── small pill helpers (active model, beta tag, version chips) ─────── */
.active-pill,
.brand-row .title-stack h1 .beta-tag,
.brand-row .title-stack h1 .version {
  font-family: var(--font-mono);
  border-radius: 999px;
  letter-spacing: .08em;
}
.active-pill {
  background: linear-gradient(180deg, var(--signal-glint), var(--signal));
  color: #1a1106;
  padding: 2px 7px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,235,200,.4) inset, 0 0 8px rgba(200,133,74,.3);
}

/* (Brand h1 gradient-text experiment removed — children spans like
   .beta-tag and .version inherit -webkit-text-fill-color and would
   render transparent. Worth doing in a future pass with proper child
   resets, but skipped here to keep the diff safe.) */

/* ─── keep light theme readable: scope copper-glow on light surfaces ─── */
:root[data-theme="light"] .toast::before { box-shadow: 0 0 8px rgba(154,94,42,.5); }
:root[data-theme="light"] .palette-prompt { color: #fff; }
:root[data-theme="light"] .primary { color: #fff; }
:root[data-theme="light"] .primary:hover { color: #fff; }
:root[data-theme="light"] .active-pill { color: #fff; }
:root[data-theme="light"] body::before {
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(154,94,42,.10) 0%, transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(154,94,42,.05) 0%, transparent 55%);
}

/* ═════════════════════════════════════════════════════════════════════
   SKILLS TAB v2 2026-05-12
   Categorized grid, collapsible sections, always-on toggle, search,
   drag-drop manifest upload, detail + editor modals. Replaces the v1
   two-panel surface entirely.
   ═════════════════════════════════════════════════════════════════════ */

/* Scoped to .active so it doesn't override .view { display: none } and
   leak Skills content into every other tab. */
.skills-view.active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.skills-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.skills-head h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -.01em;
  font-weight: 500;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.skills-head p { margin: 0; max-width: 70ch; font-size: 13px; line-height: 1.55; }
.skills-head p code {
  font-size: 11px;
  padding: 1px 5px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.skills-head-actions { flex: 0 0 auto; }

.skills-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skills-search-wrap { flex: 1 1 auto; min-width: 0; }
.skills-search-wrap input {
  width: 100%;
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}
/* master auto-apply toggle (Tin 1.7) */
.skills-auto-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none;
  padding: 5px 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-2);
}
/* width:0/height:0 stop the global `input{width:100%}` rule from blowing the
   visually-hidden checkbox out to viewport width and forcing page overflow. */
.skills-auto-toggle input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.skills-auto-toggle-mark {
  position: relative;
  width: 30px; height: 16px; border-radius: 999px;
  background: var(--paper-3); border: 1px solid var(--rule);
  transition: background .15s ease, border-color .15s ease;
  flex: 0 0 auto;
}
.skills-auto-toggle-mark::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-faint); transition: transform .15s ease, background .15s ease;
}
.skills-auto-toggle input:checked + .skills-auto-toggle-mark { background: var(--signal-dim); border-color: var(--signal); }
.skills-auto-toggle input:checked + .skills-auto-toggle-mark::after { transform: translateX(14px); background: var(--signal-glint); }
.skills-auto-toggle-label {
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.skills-auto-toggle input:focus-visible + .skills-auto-toggle-mark { outline: 2px solid var(--signal); outline-offset: 2px; }
.skills-active-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 0 0 auto;
}

.skills-categories {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.skills-cat { border: 1px solid var(--rule); background: var(--paper-2); }
.skills-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.skills-cat-head:hover { background: var(--paper-3); }
.skills-cat.is-collapsed .skills-cat-head { border-bottom-color: transparent; }
.skills-cat-caret {
  font-size: 12px;
  color: var(--ink-faint);
  transition: transform .12s ease;
  flex: 0 0 auto;
}
.skills-cat.is-collapsed .skills-cat-caret { transform: rotate(-90deg); }
.skills-cat-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  flex: 1 1 auto;
}
.skills-cat-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  padding: 1px 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
}
.skills-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 12px;
}
.skills-cat.is-collapsed .skills-cat-grid { display: none; }

/* Skill card */
.skill-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .15s ease;
  position: relative;
}
.skill-card:hover { border-color: var(--rule-bright); background: var(--paper-2); }
.skill-card:focus-visible {
  outline: 0;
  border-color: var(--signal-dim);
  box-shadow: 0 0 0 3px rgba(200,133,74,.18);
}
.skill-card.is-active {
  border-color: var(--signal);
  box-shadow: inset 3px 0 0 var(--signal);
}
.skill-card-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.skill-card-body { flex: 1 1 auto; min-width: 0; }
.skill-card-name {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.003em;
}
.skill-card-trigger {
  margin: 3px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--signal);
  letter-spacing: .02em;
}
.skill-card-desc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skill-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.skill-card-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  border-radius: 999px;
}

/* Always-on checkbox */
.skill-card-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
}
.skill-card-toggle input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.skill-card-toggle-mark {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s ease, background .12s ease;
}
.skill-card-toggle-mark::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--signal);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.skill-card-toggle input:checked + .skill-card-toggle-mark {
  border-color: var(--signal);
  background: var(--signal-dim, rgba(200,133,74,.15));
}
.skill-card-toggle input:checked + .skill-card-toggle-mark::after {
  opacity: 1;
  transform: scale(1);
}
.skill-card-toggle:hover .skill-card-toggle-mark { border-color: var(--rule-bright); }

/* Empty / skeleton states */
.skills-empty { padding: 24px; text-align: center; }
.skills-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.skills-skeleton span {
  display: block;
  height: 80px;
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: skills-shimmer 1.4s linear infinite;
  border: 1px solid var(--rule);
}
@keyframes skills-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Drop zone */
.skills-drop-zone {
  display: block;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  padding: 18px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.skills-drop-zone:hover { border-color: var(--rule-bright); background: var(--paper-3); }
.skills-drop-zone.is-drop-over {
  border-color: var(--signal);
  background: var(--paper-3);
}
.skills-drop-zone-title {
  margin: 0 0 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.skills-drop-zone-body { margin: 0; font-size: 12px; line-height: 1.55; }
.skills-drop-zone-body code {
  font-size: 11px;
  padding: 0 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* Models drop zone — same visual contract as the skills version so
   the two tabs feel consistent. Adds an "is-pulling" state while
   /api/pull is streaming so the operator sees progress in-place. */
.models-drop-zone {
  display: block;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  padding: 18px;
  margin-top: 16px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.models-drop-zone:hover { border-color: var(--rule-bright); background: var(--paper-3); }
.models-drop-zone.is-drop-over,
.models-drop-zone.is-pulling {
  border-color: var(--signal);
  background: var(--paper-3);
}
.models-drop-zone-title {
  margin: 0 0 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.models-drop-zone-body { margin: 0; font-size: 12px; line-height: 1.55; }
.models-drop-zone-body code {
  font-size: 11px;
  padding: 0 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
#modelDropProgress {
  margin-top: 8px;
  color: var(--signal);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Skill editor + detail dialogs reuse `.settings` chrome but need
   their own width for the wider body content. */
dialog.skill-editor, dialog.skill-detail {
  width: min(620px, calc(100% - 32px));
}
dialog.skill-editor[open], dialog.skill-detail[open] {
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
}

.skill-detail-body { display: grid; gap: 12px; }
.skill-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
}
.skill-detail-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.skill-detail-value {
  font-size: 13px;
  color: var(--ink);
}
.skill-detail-value .is-active { color: var(--signal); }
.skill-detail-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.skill-detail-block { display: grid; gap: 6px; }
.skill-detail-prompt {
  margin: 0;
  padding: 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* ═════════════════════════════════════════════════════════════════════
   LOCK SCREEN 2026-05-12
   Sign-in / enrollment surface. Replaces the v1.2 "no-op showAccess"
   stub. The whole screen lives outside #app and renders only when the
   master key is absent — JS handles the [hidden] toggle.
   ═════════════════════════════════════════════════════════════════════ */

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: var(--paper, #15110d);
}
.lock-screen[hidden] { display: none; }

/* Layered radial glows + faint grain = the "mysterious" feel without
   a heavy image asset. Two slow-drifting gradients animate the canvas
   subtly so the screen never feels static. */
.lock-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(200,133,74,.10), transparent 60%),
    radial-gradient(700px 500px at 82% 80%, rgba(154,94,42,.08), transparent 55%),
    radial-gradient(420px 320px at 50% 50%, rgba(0,0,0,.35), transparent 70%);
  animation: lock-drift 14s ease-in-out infinite alternate;
}
.lock-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
}
@keyframes lock-drift {
  0%   { transform: scale(1)   translate(0, 0); }
  100% { transform: scale(1.04) translate(-12px, 8px); }
}

/* The card itself: dark surface, copper hairline, soft elevation. */
.lock-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: linear-gradient(180deg, var(--paper-2, #1c1813) 0%, var(--paper, #15110d) 100%);
  border: 1px solid var(--rule, rgba(255,255,255,.08));
  border-radius: 6px;
  padding: 28px 28px 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(200,133,74,.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lock-card::before {
  /* a single soft copper top edge to anchor the eye */
  content: '';
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,133,74,.6), transparent);
}

.lock-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}
.lock-mark {
  position: relative;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.lock-mark img {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 4px 18px rgba(200,133,74,.4));
  position: relative;
  z-index: 1;
}
.lock-mark-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200,133,74,.35), transparent 70%);
  filter: blur(8px);
  animation: lock-pulse 3.2s ease-in-out infinite;
}
@keyframes lock-pulse {
  0%, 100% { transform: scale(.92); opacity: .55; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.lock-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint, #847766);
  margin: 0;
}
.lock-title {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -.015em;
  color: var(--ink, #ece6d8);
  margin: 0;
}
.lock-title .version {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-faint, #847766);
  letter-spacing: .04em;
  margin-left: 4px;
  vertical-align: middle;
}
.lock-mode {
  margin: 4px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal, #c8854a);
}

/* form fields */
.lock-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lock-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lock-field[hidden] { display: none; }
.lock-field label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint, #847766);
}
.lock-field-hint {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-faint, #847766);
  margin-left: 4px;
}
.lock-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper, #15110d);
  border: 1px solid var(--rule, rgba(255,255,255,.10));
  color: var(--ink, #ece6d8);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  border-radius: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lock-field input:focus {
  outline: 0;
  border-color: rgba(200,133,74,.55);
  box-shadow: 0 0 0 3px rgba(200,133,74,.12);
}

.lock-check {
  /* Full-width row (not inline-flex, which shrink-wrapped to its content
     and let the label run off the card edge on narrow phones). The label
     text now wraps inside the card while the checkbox holds its size. */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-dim, #b3a896);
  margin: 4px 0 0;
  cursor: pointer;
}
.lock-check input {
  flex: 0 0 auto;          /* never shrink the box */
  width: 15px;
  height: 15px;
  margin-top: 1px;         /* align with the first line of wrapped text */
  accent-color: var(--signal, #c8854a);
}
.lock-check span { min-width: 0; }  /* allow the label to wrap, not overflow */

.lock-error {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--alert, #e06464);
  background: rgba(213,106,85,.08);
  border: 1px solid rgba(213,106,85,.3);
  border-radius: 3px;
  padding: 8px 10px;
  margin-top: -2px;
}
.lock-error[hidden] { display: none; }

.lock-submit {
  appearance: none;
  background: linear-gradient(180deg, rgba(200,133,74,.95), rgba(154,94,42,.95));
  border: 1px solid rgba(200,133,74,.7);
  color: #15110d;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(154,94,42,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  margin-top: 4px;
}
.lock-submit:hover { filter: brightness(1.05); }
.lock-submit:active { transform: translateY(1px); }
.lock-submit:disabled { opacity: .6; cursor: progress; }

.lock-aux {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}
.lock-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-faint, #847766);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.lock-link:hover { color: var(--signal, #c8854a); text-decoration: underline; text-underline-offset: 4px; }

.lock-foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule, rgba(255,255,255,.06));
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--ink-faint, #847766);
  text-align: center;
  line-height: 1.5;
}

/* ─── Admin panel inside Settings modal ─────────────────────────────── */
.admin-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.admin-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.admin-account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-account-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-account-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.admin-account-meta .is-admin {
  display: inline-block;
  padding: 0 5px;
  margin-right: 6px;
  background: var(--signal-dim, rgba(200,133,74,.18));
  color: var(--signal, #c8854a);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-account-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.admin-add { margin-top: 12px; }
.admin-add summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 6px 0;
}
.admin-add summary:hover { color: var(--signal); }
.admin-add-body {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* ═════════════════════════════════════════════════════════════════════
   UI DENSITY PASS 2026-05-12
   Consolidates the dual-row topbar + status strip into a single dense
   line, makes the sidebar collapsible, adds a slash-command popover,
   and tightens the chat entry layout for Claude / ChatGPT-style
   reading rhythm. Rules are appended (not interleaved) so the diff is
   trivial to revert via `snapshot/before-ui-density-2026-05-12`.
   ═════════════════════════════════════════════════════════════════════ */

/* ── compact topbar: single row, 3 columns ─────────────────────────── */
.topbar {
  padding: 14px 4px;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
}
.topbar .brand-row { gap: 10px; flex: 0 0 auto; }
.topbar .brand-row.compact .brand-mark { width: 34px; height: 34px; }
.topbar-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.topbar-title .version {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: .04em;
  margin-left: 4px;
}

/* center cluster: inline status pills */
.topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

/* shared pill component */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 999px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  white-space: nowrap;
  min-height: 24px;
}
.status-pill[disabled],
span.status-pill { cursor: default; }
button.status-pill:hover {
  color: var(--ink);
  border-color: var(--rule-bright);
  background: var(--paper-3);
}
.status-pill-label {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.status-pill-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-faint);
  flex: 0 0 auto;
  transition: background .12s ease, box-shadow .12s ease;
}

/* per-pill state colors keyed off the existing status data-states.
   Ollama pill (#ollamaPill) reads ollamaStatus's data-state via the
   adjacent strong-tag — but cleaner to color the pill directly. */
#ollamaStatus[data-state="online"]   ~ * .status-pill-dot,
.status-pill:has(#ollamaStatus[data-state="online"])   .status-pill-dot,
.status-pill:has(#ollamaStatus[data-state="ok"])       .status-pill-dot { background: var(--signal); box-shadow: 0 0 6px var(--signal-dim); }
.status-pill:has(#ollamaStatus[data-state="offline"])  .status-pill-dot,
.status-pill:has(#ollamaStatus[data-state="error"])    .status-pill-dot { background: var(--alert); }
.status-pill:has(#ollamaStatus[data-state="checking"]) .status-pill-dot,
.status-pill:has(#ollamaStatus[data-state="timeout"])  .status-pill-dot { background: var(--warn, #c98e3b); }
.status-pill:has(#ollamaStatus[data-state="online"])  { color: var(--ink); }
.status-pill:has(#ollamaStatus[data-state="offline"]) { border-color: rgba(213,106,85,.45); }

/* Brain pill state colors via the chip's own data-state. */
.brain-pill[data-state="learning"] .status-pill-dot   { background: var(--signal); box-shadow: 0 0 6px var(--signal-dim); }
.brain-pill[data-state="watching"] .status-pill-dot   { background: #b07cff; box-shadow: 0 0 6px rgba(176,124,255,.5); }
.brain-pill[data-state="error"]    .status-pill-dot   { background: var(--alert); }
.brain-pill[data-state="paused"]   .status-pill-dot   { background: var(--ink-faint); }
.brain-pill[data-state="idle"]     .status-pill-dot   { background: var(--ink-faint); }

/* Embedded pill state colors. */
.embedded-pill[data-state="ready"]            .status-pill-dot { background: #b07cff; box-shadow: 0 0 6px rgba(176,124,255,.6); }
.embedded-pill[data-state="loading-library"]  .status-pill-dot,
.embedded-pill[data-state="loading-model"]    .status-pill-dot,
.embedded-pill[data-state="warming"]          .status-pill-dot { background: var(--warn, #c98e3b); }
.embedded-pill[data-state="error"]            .status-pill-dot { background: var(--alert); }
.embedded-pill[data-state="no-webgpu"]        .status-pill-dot { background: var(--warn, #c98e3b); }

/* Sync pill state colors (re-applied here since the legacy .status
   selector chain stopped matching once the strong tag left .status). */
.sync-pill .status-pill-dot                              { background: var(--ink-faint); }
.sync-pill:has(#syncStat[data-state="synced"])   .status-pill-dot { background: var(--signal); box-shadow: 0 0 6px var(--signal-dim); }
.sync-pill:has(#syncStat[data-state="pushing"])  .status-pill-dot,
.sync-pill:has(#syncStat[data-state="pulling"])  .status-pill-dot,
.sync-pill:has(#syncStat[data-state="enabling"]) .status-pill-dot { background: var(--warn, #c98e3b); }
.sync-pill:has(#syncStat[data-state="error"])    .status-pill-dot { background: var(--alert); }

.model-pill .status-pill-dot { display: none; }

/* right cluster: profile chip + kebab. Drop the icon-btn padding so
   the kebab dot is the visual size of one pill. */
.topbar .top-actions { flex: 0 0 auto; gap: 8px; }
.topbar .profile-chip.compact {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  gap: 6px;
}
.topbar .profile-chip.compact .profile-avatar-wrap { width: 22px; height: 22px; }
.topbar .profile-chip.compact .profile-initials   { font-size: 11px; }
.topbar .profile-chip.compact .profile-chip-text  { gap: 0; }
.topbar .profile-chip.compact .profile-chip-name  { font-size: 11px; }
.topbar .profile-chip.compact .profile-chip-user  { font-size: 9px; }

/* kebab menu */
.kebab-wrap { position: relative; }
.kebab-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
}
.kebab-btn:hover { color: var(--ink); border-color: var(--rule-bright); background: var(--paper-2); }
.kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 160px;
  border: 1px solid var(--rule-bright);
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
}
.kebab-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
}
.kebab-item:hover { background: var(--paper-2); color: var(--signal); }

/* Hide the legacy status row regardless of which body class is in play. */
section.status { display: none !important; }

/* ── sidebar: collapse to icon-only when toggled ───────────────────── */
.sidebar { position: relative; }
/* Square chevron button instead of the v1 circle (was a "weird circle"
   per operator feedback). Matches the existing .mini-btn rhythm. */
.sidebar-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: flex-end;
  margin: 2px 4px 8px auto;
  transition: color .12s ease, border-color .12s ease, background .12s ease, transform .15s ease;
}
.sidebar-toggle:hover {
  color: var(--ink);
  border-color: var(--rule-bright);
  background: var(--paper-2);
}
.sidebar.is-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 14px;
  flex: 0 0 auto;
  line-height: 1;
}
.tab .tab-label { flex: 1 1 auto; }
/* Operator already knows ⌘1-⌘9 — hide the keyboard-shortcut chip
   everywhere. (Palette is still the source of truth via `?`.) */
.tab .tab-meta { display: none; }

/* COLLAPSED state */
.app-shell:has(.sidebar.is-collapsed) { grid-template-columns: 56px 1fr; }
.sidebar.is-collapsed {
  padding: 8px 6px 14px 0;
}
.sidebar.is-collapsed .sidebar-group { display: none; }
.sidebar.is-collapsed .sidebar-toggle { margin: 2px auto 8px; }
.sidebar.is-collapsed .tab {
  padding: 10px 0;
  justify-content: center;
  position: relative;
}
.sidebar.is-collapsed .tab .tab-icon { width: 22px; font-size: 16px; }
.sidebar.is-collapsed .tab .tab-label { display: none; }
/* The expanded-mode active indicator sits at `left: 6px` and visually
   collides with the centered emoji when the column collapses to 56px.
   Hide it; the active tab's background tint is enough signal at this
   density. */
.sidebar.is-collapsed .tab.active::before { display: none; }

/* ── slash command popover ─────────────────────────────────────────── */
.chat-composer { position: relative; }
.slash-menu {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(100% + 6px);
  z-index: 30;
  border: 1px solid var(--rule-bright);
  background: var(--paper);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.slash-menu-head,
.slash-menu-foot {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
.slash-menu-foot { border-bottom: 0; border-top: 1px solid var(--rule); }
.slash-menu-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
}
.slash-menu-item {
  display: grid;
  grid-template-columns: minmax(72px, max-content) max-content 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.slash-menu-item.is-active { background: var(--paper-2); }
.slash-menu-trigger {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--signal);
  font-weight: 600;
}
.slash-menu-name {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.slash-menu-desc {
  font-size: 11px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slash-menu-empty {
  list-style: none;
  padding: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
}

/* ── chat: denser entries, more breathing in the right places ──────── */
/* Chrome shrank: single-line topbar (~52px) instead of two-row (~120).
   Reclaim that height for the conversation. */
#chat.view.active {
  min-height: calc(100vh - 140px);
  max-height: calc(100vh - 80px);
}

.entry {
  padding: 14px 22px 16px;
}
.entry h3 {
  font-style: normal;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.003em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.entry small {
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .8;
}
.entry p,
.entry .entry-response {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink);
}
.entry .prose {
  margin: 0 0 10px;
}
.entry .prose:last-child { margin-bottom: 0; }

/* Reset the v1 ".entry:first-child { border-left-color }" copper bar —
   it was an "eye lands here" cue that fights the denser look. The
   streaming flag is the real signal of "current run." */
.entry:first-child { border-left-color: transparent; }
.entry:hover       { background: transparent; }

/* The chat-stream area is now wider — let prose breathe. */
.chat-stream { padding: 0; }
.entry > * { max-width: 76ch; }
.entry .code-block { max-width: 100%; }

/* Compact composer footer: keep timer / counter on a single quiet row. */
.chat-composer { padding: 10px 18px 12px; }
.chat-composer .prompt-wrap textarea { min-height: 64px; font-size: 14px; }
.chat-composer .composer-bar { margin-top: 8px; gap: 8px; }
.chat-composer .timer { font-size: 9px; opacity: .85; }
.chat-composer .prompt-counter { font-size: 10px; }

/* ════════════════════════════════════════════════════════════════════
   Homework tab — class-aware study buddy.
   Reuses the chat-view shell; layers a class chip + manage-classes
   toolbar on top, and an empty-state hero when no classes registered.
   ════════════════════════════════════════════════════════════════════ */

/* The homework view paints a flex column when active. Critically the
 * display rule is scoped to .active — without that scope it overrides
 * the base `.view { display: none }` rule (same specificity, defined
 * later) and the homework section bleeds on top of every other tab. */
.homework-view.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.homework-toolbar {
  border-bottom: 1px solid var(--rule, rgba(255,255,255,0.06));
  padding: 12px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-quiet, rgba(255,255,255,0.015));
}

.homework-class-row {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.homework-class-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

/* Model picker cell sized so the trigger button fits the toolbar
   alongside the class chip + mode select without wrapping. The
   model-picker-host default is width:100% which collapses inside a
   flex-column cell; min-width gives the picker a comfortable base. */
.homework-model-cell { min-width: 240px; }
.homework-model-cell .model-picker-host { min-width: 240px; }

.homework-toolbar-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.homework-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  border-radius: 999px;
  background: var(--surface, rgba(255,255,255,0.02));
  color: var(--text, #ece6d8);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  min-width: 200px;
}

.homework-class-chip:hover,
.homework-class-chip[aria-expanded="true"] {
  border-color: var(--accent, #d97757);
  background: var(--surface-hover, rgba(255,255,255,0.04));
}

.homework-class-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #d97757);
  flex-shrink: 0;
}

.homework-class-name {
  font-weight: 500;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homework-class-grade {
  font-size: 10px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.homework-class-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  padding: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  border-radius: 8px;
  background: var(--surface-pop, #1c1813);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50;
}

.homework-class-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.homework-class-menu li:hover,
.homework-class-menu li[aria-selected="true"] {
  background: var(--surface-hover, rgba(255,255,255,0.05));
}

.homework-class-menu li[data-empty="true"] {
  cursor: default;
  opacity: 0.6;
  font-style: italic;
}

.homework-class-menu li[data-empty="true"]:hover {
  background: transparent;
}

.homework-class-menu .homework-class-menu-grade {
  font-size: 10px;
  opacity: 0.55;
  margin-left: auto;
}

#homeworkMode {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  background: var(--surface, rgba(255,255,255,0.02));
  color: var(--text, #ece6d8);
  font-family: inherit;
  cursor: pointer;
}

.homework-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.10));
  background: transparent;
  color: var(--text-quiet, rgba(236,230,216,0.7));
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
  align-self: flex-end;
}

.homework-manage-btn:hover {
  border-color: var(--accent, #d97757);
  color: var(--text, #ece6d8);
}

.homework-classifier-hint {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--surface-accent, rgba(217,119,87,0.08));
  border-left: 2px solid var(--accent, #d97757);
  margin: 0;
}

.homework-classifier-hint button {
  background: none;
  border: none;
  color: var(--accent, #d97757);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0 4px;
  font-family: inherit;
}

.homework-stream {
  flex: 1;
  overflow-y: auto;
}

.homework-empty {
  max-width: 540px;
  margin: 48px auto;
  padding: 24px;
  text-align: center;
}

.homework-empty h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 400;
}

.homework-empty p {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.85;
  margin-bottom: 12px;
}

.homework-empty p.muted {
  font-size: 11px;
  opacity: 0.55;
  margin-bottom: 20px;
}

.homework-empty .primary {
  margin-top: 8px;
}

/* ── Manage classes modal ──────────────────────────────────────────── */

.classes-modal-blurb {
  font-size: 12px;
  margin: 0 0 16px;
  opacity: 0.7;
  line-height: 1.5;
}

.classes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.classes-list-empty {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--rule, rgba(255,255,255,0.10));
  border-radius: 6px;
}

.class-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: var(--surface-quiet, rgba(255,255,255,0.015));
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}

.class-row:hover {
  border-color: var(--accent, #d97757);
  background: var(--surface-hover, rgba(255,255,255,0.03));
}

.class-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.class-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.class-row-name {
  font-size: 13px;
  font-weight: 500;
}

.class-row-meta {
  font-size: 11px;
  opacity: 0.6;
}

.class-row-actions {
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.classes-add-btn {
  width: 100%;
}

/* ── Class editor modal ────────────────────────────────────────────── */

.class-editor .body label {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  opacity: 0.75;
}

.class-editor .body label input,
.class-editor .body label select,
.class-editor .body label textarea {
  margin-top: 4px;
}

.class-color-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.class-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s, transform 0.12s;
}

.class-color-swatch:hover {
  transform: scale(1.1);
}

.class-color-swatch[aria-checked="true"] {
  border-color: var(--text, #ece6d8);
}

.class-edit-prompt-label textarea {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  background: var(--surface, rgba(0,0,0,0.2));
  color: var(--text, #ece6d8);
  resize: vertical;
  line-height: 1.5;
}

/* ── Homework chat entries ─────────────────────────────────────────── */

.homework-entry {
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule, rgba(255,255,255,0.04));
}

.homework-entry-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 4px;
}

.homework-entry-meta .entry-meta-tag {
  opacity: 0.85;
  font-weight: 500;
}

.homework-entry .entry-q {
  font-size: 14px;
  line-height: 1.55;
  margin: 4px 0 12px;
  white-space: pre-wrap;
}

.homework-entry .entry-a {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  opacity: 0.95;
}

.homework-entry .entry-error {
  color: #d97757;
  font-size: 12px;
  font-style: italic;
}

/* ── Slice 2: check-my-work toggle + attachment thumbs ─────────────── */

.homework-check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 10px;
  border-radius: 999px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text-quiet, rgba(236,230,216,0.6));
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.homework-check-toggle:hover {
  color: var(--text, #ece6d8);
  border-color: var(--accent, #d97757);
}

.homework-check-toggle[aria-pressed="true"] {
  background: var(--surface-accent, rgba(217,119,87,0.12));
  border-color: var(--accent, #d97757);
  color: var(--accent, #d97757);
}

.homework-check-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.homework-check-toggle[aria-pressed="true"] .homework-check-dot {
  opacity: 1;
}

/* Attachment thumbs (multi-image preview row above composer) */
.homework-composer .chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

.homework-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--rule, rgba(255,255,255,0.10));
  background: var(--surface-quiet, rgba(255,255,255,0.025));
  font-size: 10px;
  max-width: 200px;
}

.homework-attach-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.homework-attach-chip .homework-attach-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  opacity: 0.85;
}

.homework-attach-chip .homework-attach-x {
  background: none;
  border: none;
  color: var(--text-quiet, rgba(236,230,216,0.6));
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
}

.homework-attach-chip .homework-attach-x:hover {
  color: #d97757;
}

.homework-attach-chip.is-parsing {
  opacity: 0.7;
}

.homework-attach-spinner {
  display: inline-block;
  animation: tin-spin 0.9s linear infinite;
}

@keyframes tin-spin {
  to { transform: rotate(360deg); }
}

.homework-composer.drop-target {
  outline: 2px dashed var(--accent, #d97757);
  outline-offset: -4px;
  background: var(--surface-accent, rgba(217,119,87,0.05));
}

.homework-entry-meta .entry-meta-provider {
  opacity: 0.6;
}

/* ── Slice 3: task-mode picker + feedback + correction form ────────── */

.homework-task-mode {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  background: var(--surface, rgba(255,255,255,0.02));
  color: var(--text-quiet, rgba(236,230,216,0.85));
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.homework-task-mode:hover {
  border-color: var(--accent, #d97757);
  color: var(--text, #ece6d8);
}

.entry-feedback {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule, rgba(255,255,255,0.05));
}

.entry-fb-btn {
  background: transparent;
  border: 1px solid var(--rule, rgba(255,255,255,0.1));
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-quiet, rgba(236,230,216,0.6));
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  font-family: inherit;
}

.entry-fb-btn:hover {
  border-color: var(--accent, #d97757);
  color: var(--text, #ece6d8);
}

.entry-fb-btn[aria-pressed="true"] {
  background: var(--surface-accent, rgba(217,119,87,0.12));
  border-color: var(--accent, #d97757);
  color: var(--accent, #d97757);
}

.entry-fb-note {
  font-size: 10px;
  opacity: 0.6;
  font-style: italic;
  margin-left: 4px;
}

.entry-correction-form {
  margin-top: 10px;
  padding: 12px;
  background: var(--surface-quiet, rgba(255,255,255,0.02));
  border: 1px solid var(--rule, rgba(255,255,255,0.08));
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entry-correction-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.entry-correction-form .hint {
  opacity: 0.55;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.entry-correction-form textarea {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--rule, rgba(255,255,255,0.10));
  background: var(--surface, rgba(0,0,0,0.2));
  color: var(--text, #ece6d8);
  resize: vertical;
  line-height: 1.45;
}

.entry-correction-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Markdown-rendered answer content. Tight, schematic, readable. */
.homework-entry .entry-a {
  white-space: normal;  /* override the pre-wrap so block tags lay out */
}

.homework-entry .entry-a p {
  margin: 0 0 10px;
  white-space: pre-wrap;
}

.homework-entry .entry-a h1,
.homework-entry .entry-a h2,
.homework-entry .entry-a h3,
.homework-entry .entry-a h4 {
  margin: 14px 0 6px;
  font-weight: 500;
  line-height: 1.3;
}

.homework-entry .entry-a h1 { font-size: 17px; }
.homework-entry .entry-a h2 { font-size: 15px; opacity: 0.95; }
.homework-entry .entry-a h3 { font-size: 13px; opacity: 0.9; letter-spacing: 0.02em; }
.homework-entry .entry-a h4 { font-size: 12px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }

.homework-entry .entry-a ul,
.homework-entry .entry-a ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.homework-entry .entry-a li {
  margin-bottom: 4px;
  line-height: 1.55;
}

.homework-entry .entry-a code {
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-quiet, rgba(255,255,255,0.04));
  border: 1px solid var(--rule, rgba(255,255,255,0.06));
}

.homework-entry .entry-a pre.entry-code {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-quiet, rgba(0,0,0,0.25));
  border: 1px solid var(--rule, rgba(255,255,255,0.08));
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}

.homework-entry .entry-a pre.entry-code code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

.homework-entry .entry-a a {
  color: var(--accent, #d97757);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.homework-entry .entry-a details {
  margin: 8px 0;
  border-left: 2px solid var(--rule, rgba(255,255,255,0.1));
  padding-left: 10px;
}

.homework-entry .entry-a details summary {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.65;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  list-style: none;
}

.homework-entry .entry-a details summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.12s;
}

.homework-entry .entry-a details[open] summary::before {
  transform: rotate(90deg);
}

.homework-entry .entry-a details summary:hover {
  opacity: 1;
  color: var(--accent, #d97757);
}

/* Slice 4b: verify button + second-opinion panel */
.entry-fb-verify {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entry-fb-verify:disabled {
  cursor: wait;
  opacity: 0.6;
}

.entry-verify-panel {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-quiet, rgba(255,255,255,0.025));
  border: 1px solid var(--rule, rgba(255,255,255,0.08));
  border-left: 3px solid var(--accent, #d97757);
  border-radius: 4px;
  font-size: 12px;
}

.entry-verify-panel.is-streaming {
  opacity: 0.85;
}

.entry-verify-head {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
  color: var(--accent, #d97757);
}

.entry-verify-body {
  line-height: 1.55;
}

.entry-verify-body p,
.entry-verify-body ul,
.entry-verify-body ol {
  margin: 0 0 8px;
}

.entry-verify-body h1,
.entry-verify-body h2,
.entry-verify-body h3,
.entry-verify-body h4 {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 500;
}

/* Slice 6: voice input + per-entry export buttons */

.homework-voice-btn[aria-pressed="true"] {
  color: #d97757;
  border-color: #d97757;
  animation: tin-voice-pulse 1.2s ease-in-out infinite;
}

@keyframes tin-voice-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,119,87,0.4); }
  50%     { box-shadow: 0 0 0 6px rgba(217,119,87,0); }
}

.entry-fb-copy,
.entry-fb-download {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.entry-fb-copy:hover,
.entry-fb-download:hover {
  opacity: 1;
}

.entry-fb-verify ~ .entry-fb-copy {
  margin-left: 0;   /* don't double-push, verify already pushed-right */
}

/* Slice 7: history filter toggle + per-entry delete */

.homework-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.02em;
  align-self: flex-end;
  padding: 6px 8px;
}

.homework-filter-toggle:hover {
  opacity: 1;
}

.homework-filter-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.entry-meta-delete {
  background: transparent;
  border: none;
  color: var(--text-quiet, rgba(236,230,216,0.4));
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
  font-family: inherit;
  transition: color 0.12s;
}

.entry-meta-delete:hover {
  color: #d97757;
}

/* App-wide control center polish: keep existing behavior, unify the shell. */
:root {
  --r: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --control-border: var(--rule, rgba(216, 164, 108, 0.14));
  --control-bg: rgba(21, 17, 13, 0.62);
  --control-bg-strong: rgba(30, 24, 19, 0.86);
  --control-bg-soft: rgba(255, 255, 255, 0.035);
  --control-copper: var(--accent, #d97757);
  --control-gold: var(--signal, #caa36a);
}

body::before {
  background:
    linear-gradient(180deg, rgba(202, 163, 106, 0.055), transparent 38%),
    linear-gradient(135deg, rgba(217, 119, 87, 0.035), transparent 52%);
}

.view.active {
  padding-top: 0;
}

#models.view.active,
#skills.view.active,
#notes.view.active,
#vibecoding.view.active,
#brain.view.active,
#agents.view.active,
#tinEditor.view.active,
#remotePc.view.active,
.api-view.active {
  display: grid;
  gap: 16px;
}

#chat.view.active {
  display: grid;
  grid-template-rows: auto minmax(520px, 1fr);
  gap: 16px;
  min-height: 0;
  max-height: none;
  border: 0;
  background: transparent;
  overflow: visible;
}

.homework-view.active {
  display: grid;
  grid-template-rows: auto auto minmax(420px, 1fr) auto;
  gap: 16px;
  height: auto;
}

.view-hero,
.api-head {
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(202, 163, 106, 0.12), rgba(255, 255, 255, 0.025) 48%, transparent),
    var(--control-bg-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: 22px;
  align-items: end;
}

.view-hero-copy,
.api-head > div:first-child {
  min-width: 0;
}

.view-eyebrow,
.api-eyebrow {
  margin: 0 0 8px;
  color: var(--control-gold);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.view-hero h1,
.api-head h1,
.skills-head h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 46px;
  line-height: 0.98;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.view-hero .muted,
.api-head .muted {
  max-width: 74ch;
  margin: 0;
  line-height: 1.55;
}

.view-hero-stats,
.api-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.view-stat,
.api-head-stats > div,
.api-status-card,
.api-default-card,
.models-api-summary > div,
.integration-card {
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: rgba(10, 8, 7, 0.24);
  padding: 14px;
}

.view-stat span,
.api-head-stats span,
.api-status-card span,
.api-default-card span,
.models-api-summary span {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.view-stat strong,
.api-head-stats strong,
.api-status-card strong,
.api-default-card strong,
.models-api-summary strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.panel,
.card,
.mini-item,
.chat-with-categories,
.chat-toolbar,
.chat-stream,
.chat-composer,
.homework-toolbar,
.homework-stream,
.notes-shell > .panel,
.skills-toolbar,
.skills-drop-zone,
.editor-status,
.api-provider-card,
.cloud-provider,
.output,
.settings,
.modal,
.brain-card,
.rpc-cmd {
  border-radius: 8px;
}

.panel,
.chat-with-categories,
.chat-toolbar,
.chat-stream,
.chat-composer,
.homework-toolbar,
.homework-stream,
.notes-shell > .panel,
.skills-toolbar,
.skills-drop-zone,
.editor-status,
.output {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.panel {
  padding: 20px;
}

.grid.two {
  gap: 16px;
}

.section-title {
  margin-bottom: 16px;
}

.section-title p {
  color: var(--control-gold);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.section-title h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

input,
textarea,
select {
  border-radius: 8px;
  border-color: var(--control-border);
  background: rgba(255, 255, 255, 0.035);
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
.tab:focus-visible {
  outline: 2px solid rgba(202, 163, 106, 0.5);
  outline-offset: 2px;
}

button.primary,
button.secondary,
button.ghost,
button.danger,
.icon-btn,
.composer-icon-btn,
.mini-btn {
  border-radius: 8px;
}

button.primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--control-copper);
  box-shadow: 0 10px 26px rgba(217, 119, 87, 0.18);
}

button.secondary,
button.ghost {
  border-color: var(--control-border);
}

.chat-with-categories {
  min-height: 560px;
  overflow: hidden;
}

.chat-toolbar {
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.chat-stream {
  border-width: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chat-composer {
  border-width: 1px 0 0;
  border-radius: 0;
  background: rgba(15, 12, 10, 0.86);
  box-shadow: none;
}

.chat-categories-panel {
  background: rgba(255, 255, 255, 0.02);
}

.chat-cat-row,
.note-row,
.skill-card,
.card,
.api-provider-card,
.integration-card {
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.chat-cat-row:hover,
.note-row:hover,
.skill-card:hover,
.card:hover,
.api-provider-card:hover,
.integration-card:hover {
  border-color: rgba(202, 163, 106, 0.3);
  background: rgba(255, 255, 255, 0.045);
}

.entry {
  border-bottom-color: rgba(255, 255, 255, 0.055);
}

.entry-u .bubble,
.entry-a .bubble {
  border-radius: 8px;
}

.homework-toolbar,
.homework-composer {
  padding: 14px 16px;
}

.homework-stream {
  min-height: 420px;
  padding: 0;
  overflow: auto;
}

.homework-class-chip,
.homework-manage-btn,
.homework-filter-toggle {
  border-radius: 8px;
}

.homework-empty {
  max-width: 720px;
}

.homework-empty h3 {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.models-view .panel,
.vibecoding-view .panel,
.brain-view .panel,
.agents-view .panel,
#tinEditor .panel,
#remotePc .panel {
  min-width: 0;
}

.models-drop-zone,
.store-card,
.skill-card,
.brain-card,
.card,
.mini-item,
.api-default-card,
.api-status-card,
.integration-card,
.rpc-cmd {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--control-border);
}

.models-api-shortcut {
  gap: 12px;
}

.skills-head {
  align-items: end;
}

.skills-head > div:first-child {
  min-width: 0;
}

.skills-head-actions {
  display: flex;
  justify-content: flex-end;
}

.skills-toolbar {
  padding: 12px;
}

.skills-search-wrap input {
  min-height: 40px;
}

.skills-categories {
  gap: 14px;
}

.skills-drop-zone {
  padding: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.notes-shell {
  min-height: calc(100vh - 310px);
  gap: 0;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--control-bg);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.notes-shell > .notes-sidebar,
.notes-shell > .notes-editor {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.notes-shell > .notes-sidebar {
  border-right: 1px solid var(--control-border);
  background: rgba(255, 255, 255, 0.02);
}

.notes-editor-head,
.notes-editor-foot {
  background: rgba(255, 255, 255, 0.02);
}

.notes-editor-title {
  font-size: 28px;
  line-height: 1.1;
}

.note-body-wrap textarea {
  font-size: 15px;
  line-height: 1.65;
}

.vibecoding-view .output {
  min-height: 260px;
  padding: 14px;
  white-space: pre-wrap;
}

.mini-list {
  gap: 8px;
}

.brain-grid,
.cards,
.api-status-grid,
.integration-grid {
  gap: 12px;
}

.brain-card,
.card {
  padding: 16px;
}

.editor-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
}

.editor-status > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--control-border);
}

.editor-status > div:last-child {
  border-right: 0;
}

.editor-status span {
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.editor-status strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.editor-grid {
  gap: 16px;
}

.editor-buffer,
.editor-tree,
.rpc-result {
  border-radius: 8px;
}

.rpc-grid {
  gap: 10px;
}

.rpc-cmd {
  padding: 14px;
}

.settings {
  border: 1px solid var(--control-border);
  background: var(--control-bg-strong);
}

.modal-head {
  border-bottom-color: var(--control-border);
}

.lock-card {
  border-radius: 8px;
}

@media (max-width: 1100px) {
  .view-hero,
  .api-head {
    grid-template-columns: 1fr;
  }

  .view-hero-stats,
  .api-head-stats {
    max-width: 100%;
  }

  .chat-with-categories {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .view-hero,
  .api-head {
    padding: 18px;
  }

  .view-hero h1,
  .api-head h1,
  .skills-head h1 {
    font-size: 34px;
    line-height: 1.02;
  }

  .view-hero-stats,
  .api-head-stats,
  .api-status-grid,
  .api-defaults-grid,
  .api-security-grid,
  .api-routing-grid,
  .models-api-summary,
  .editor-status {
    grid-template-columns: 1fr;
  }

  #chat.view.active,
  .homework-view.active {
    grid-template-rows: auto;
  }

  .chat-with-categories {
    flex-direction: column;
  }

  .chat-categories-panel {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid var(--control-border);
    max-height: 220px;
  }

  .chat-stream,
  .homework-stream {
    min-height: 360px;
  }

  .notes-shell {
    grid-template-columns: 1fr;
  }

  .notes-shell > .notes-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--control-border);
  }

  .notes-editor-title {
    font-size: 23px;
  }

  .editor-status > div {
    border-right: 0;
    border-bottom: 1px solid var(--control-border);
  }

  .editor-status > div:last-child {
    border-bottom: 0;
  }
}

/* Chat prompt access: long chats should never strand the composer off-screen. */
#chat.view.active .chat-with-categories {
  overflow: visible;
  position: relative;
}

#chat.view.active .chat-main-column {
  overflow: visible;
}

#chat.view.active .chat-composer {
  position: sticky;
  bottom: 14px;
  z-index: 30;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(10, 8, 7, 0.12)),
    rgba(15, 12, 10, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
}

.chat-jump-prompt {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(202, 163, 106, 0.38);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(29, 22, 17, 0.96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.chat-jump-prompt strong {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--control-copper);
  color: #130d09;
  font-size: 12px;
  line-height: 1;
}

.chat-jump-prompt:hover {
  border-color: rgba(202, 163, 106, 0.62);
  transform: translateY(-1px);
}

.chat-jump-prompt[hidden],
#chat:not(.active) .chat-jump-prompt {
  display: none;
}

@media (max-width: 820px) {
  #chat.view.active .chat-composer {
    bottom: 10px;
  }

  .chat-jump-prompt {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 9px 11px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS PASS  (Tin 1.7 — phones / small tablets)

   This block sits at the END of styles.css so it wins against:
   • the modern-revamp block (line ~4828) that re-applies desktop
     padding/border-radius/blur to `.sidebar` and `.topbar`, and
   • the Codex control-center polish (line ~8043) that doesn't touch
     the topbar/sidebar/chat-toolbar layouts for mobile.

   Scope is intentionally narrow — we leave Codex's chat layout
   (`#chat.view.active` grid, sticky `.chat-composer`, the chat-jump-
   prompt button) alone because that work is the new design.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  /* topbar: explicit column stack so the status-pill row can't wrap
     into the brand row above it. */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0 12px;
  }
  .topbar .brand-row {
    width: 100%;
    gap: 10px;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .topbar-title { font-size: 14px; }

  /* status pills: horizontal scroll instead of wrap, so they never
     stack into the row above and never sit behind the sidebar. */
  .topbar-status {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 2px 0 4px;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-status::-webkit-scrollbar { display: none; }
  .topbar .topbar-status .status-pill { flex: 0 0 auto; }

  .topbar .top-actions {
    width: 100%;
    justify-content: flex-end;
    align-self: stretch;
    gap: 8px;
  }

  /* sidebar: kill the modern-revamp's floating-pill look (padding,
     border-radius, gradient, backdrop blur) so the horizontal tab row
     sits flush with content. Without this override the sidebar ends up
     as a rounded pill that overlaps the topbar's status chips.

     Layout: flex-wrap row so ALL 11 tabs (Chat, Homework, Brain, Models,
     Skills, Notes, Vibecoding, API, Agents, Tin Editor, Remote PC) are
     visible without horizontal scroll — earlier passes hid 7 of them
     behind an invisible swipe-right gesture. */
  .sidebar {
    padding: 4px 0 6px;
    border: 0;
    border-bottom: 1px solid var(--control-border, var(--line-soft, var(--rule)));
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    position: static;
    overflow: visible;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-toggle { display: none; }
  .sidebar-group { display: none; }

  /* tabs: icon over label, 5 columns. With 11 tabs that's 3 rows; on
     wider tablets they pack into 2 rows. flex-basis: calc(20% - 4px)
     keeps the math honest with the 4px gap. */
  .tab {
    position: relative;
    flex: 1 0 calc(20% - 4px);
    min-width: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    padding: 8px 4px;
    gap: 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
  }
  .tab:hover {
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
  }
  .tab.active {
    background: rgba(202, 163, 106, 0.08);
    box-shadow: inset 0 0 0 1px rgba(202, 163, 106, 0.32);
    color: var(--signal-glint);
  }
  .tab.active::before {
    /* tuck the indicator dot bottom-center under the label */
    left: 50%;
    right: auto;
    top: auto;
    bottom: 2px;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--control-copper, var(--signal));
    box-shadow: 0 0 6px rgba(202, 163, 106, 0.6);
    animation: none;
  }
  .tab .tab-icon { font-size: 17px; line-height: 1; }
  .tab .tab-label {
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: .02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab .tab-meta { display: none; }
  .tab .tab-key { display: none; }

  /* if the user collapsed the sidebar on desktop and then resized to
     mobile, the .is-collapsed class is still on .sidebar and would
     otherwise re-hide the labels we just laid out. Force it open. */
  .sidebar.is-collapsed {
    width: auto;
    padding: 4px 0 6px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sidebar.is-collapsed .sidebar-group { display: none; }
  .sidebar.is-collapsed .tab {
    flex: 1 0 calc(20% - 4px);
    flex-direction: column;
    padding: 8px 4px;
    gap: 3px;
    border-radius: 6px;
    justify-content: center;
  }
  .sidebar.is-collapsed .tab .tab-icon {
    width: auto;
    font-size: 17px;
  }
  .sidebar.is-collapsed .tab .tab-label { display: block; }
}

@media (max-width: 720px) {
  /* chat-toolbar: stack model picker + mode select vertically so the
     model picker dropdown can't overlap content. */
  .chat-toolbar,
  .homework-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
  }
  .chat-toolbar-controls,
  .homework-class-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .chat-toolbar-cell,
  .homework-class-cell {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }
  .chat-toolbar-cell .model-picker-host,
  .homework-model-cell,
  .homework-model-cell .model-picker-host {
    min-width: 0;
    width: 100%;
  }
  .chat-toolbar-cell select { width: 100%; }

  /* chat stream: trim padding so messages don't burn horizontal room. */
  .chat-stream { padding: 16px 14px; font-size: 14px; }
  .chat-stream.empty { padding: 32px 18px; font-size: 13px; }

  /* composer: prevent iOS focus-zoom by using 16px, compact secondary
     buttons. Codex already pins the composer with position: sticky —
     don't fight that here. */
  .chat-composer { padding: 10px 12px 12px; }
  #prompt { min-height: 5em; font-size: 16px; }
  .chat-composer .prompt-wrap textarea {
    padding: 12px 12px 12px 44px;
    font-size: 16px;
  }
  .prompt-plus { top: 9px; left: 9px; width: 26px; height: 26px; }
  .chat-composer .composer-bar { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .prompt-counter { font-size: 10px; }
  .chat-composer .timer { padding: 3px 7px; font-size: 10px; }
  .composer-icon-btn { padding: 6px 8px; font-size: 11px; }
  .composer-send { padding: 8px 14px; font-size: 12px; }
}

@media (max-width: 480px) {
  .app { padding: 14px 12px 28px; }
  .topbar { padding: 10px 0 12px; gap: 8px; }
  .topbar-title { font-size: 13px; }
  .topbar .brand-row.compact .brand-mark { width: 30px; height: 30px; }

  /* shrink pills so 4–5 fit visibly before the user needs to scroll */
  .status-pill { font-size: 9.5px; padding: 4px 8px; min-height: 22px; gap: 4px; }
  .status-pill-label { font-size: 8.5px; letter-spacing: .1em; }
  .status-pill-value { font-size: 9.5px; }
  .status-pill-dot { width: 5px; height: 5px; }

  .topbar .profile-chip.compact { padding: 3px; }
  .topbar .profile-chip.compact .profile-avatar-wrap { width: 26px; height: 26px; }
  .kebab-btn { width: 28px; height: 28px; }

  /* categories panel below chat: compact horizontal chip row so the
     chat stream gets the vertical room. Codex caps the panel at
     max-height: 220px on mobile — we replace that with a chip strip. */
  .chat-categories-panel {
    max-height: none;
    padding: 10px 12px;
    gap: 8px;
  }
  .chat-categories-head h2 { font-size: 10px; }
  .chat-categories-hint { display: none; }
  .chat-categories-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .chat-cat-row {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--control-border, var(--rule));
    border-radius: 999px;
    font-size: 11px;
  }
  .chat-cat-row .chat-cat-name { max-width: 110px; }

  /* composer: drop the chars/tok counter and timer so Dispatch never
     wraps to a third line on a phone. */
  .prompt-counter,
  .chat-composer .timer { display: none; }
  .composer-icon-btn { padding: 7px 9px; }

  /* the fixed theme toggle competes with the composer + chat-jump
     button on phones — shrink it and tuck it tighter to the corner. */
  .theme-toggle { padding: 7px; bottom: 10px; left: 10px; }
}

/* honour the iOS safe-area inset so the topbar isn't pinned under the
   notch and the chat composer doesn't sit under the home-indicator bar. */
@supports (padding: max(0px)) {
  .app {
    padding-left: max(env(safe-area-inset-left), 12px);
    padding-right: max(env(safe-area-inset-right), 12px);
    padding-bottom: max(env(safe-area-inset-bottom), 28px);
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE COMPREHENSIVE PASS  (Tin 1.7 — every view, every control)

   The earlier mobile passes covered topbar / sidebar / chat composer /
   safe-area. This block hits the rest: voice/mic buttons (the "pulse"
   button when recording), filter chips, modal dialogs, per-view layouts
   (models, api, skills, notes, vibecoding, brain, homework, agents),
   floating buttons, and modals.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  /* ── composer voice/mic + attach + send: ensure all 4 are visible
     even when the composer-bar wraps. The voice button is `hidden`
     by default and JS un-hides it when speech recognition is
     supported; once un-hidden it MUST remain visible on mobile. */
  .chat-composer .composer-bar,
  .homework-composer .composer-bar,
  .homework-toolbar-row .composer-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .composer-bar-spacer { display: none; }   /* free up horizontal room */
  .composer-icon-btn:not([hidden]),
  .composer-send:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* pulse-on-record (voice) — ensure the recording animation isn't
     cropped by the composer's border-radius. */
  .homework-voice-btn[aria-pressed="true"] {
    box-shadow: 0 0 0 0 rgba(217,119,87,0.4);
  }

  /* note mic — pulsing button anchored to the textarea corner. On
     phones the textarea narrows so the mic can collide with text;
     keep it tucked in tighter and slightly smaller. */
  .note-mic {
    top: 14px;
    right: 10px;
    width: 32px;
    height: 32px;
  }

  /* status pills inside the topbar status-row include the brain
     pulse (`brain-pill` with chip-pulse animation when learning).
     Ensure they don't shrink to nothing in the horizontal scroller. */
  .topbar-status .status-pill { min-width: max-content; }
  .topbar-status .brain-pill,
  .topbar-status .embedded-pill {
    /* brain pulse + embedded pill are conditionally shown by JS —
       when revealed they must use the same horizontal row, not
       wrap to a new line. */
    flex: 0 0 auto;
  }

  /* ── view containers: keep view-hero from forcing horizontal
     overflow. (Codex already collapses hero stats to 1 column at
     820px; this just ensures NO element forces page-width > viewport.) */
  .view-hero,
  .api-head,
  .skills-head,
  .homework-toolbar,
  .chat-toolbar,
  .panel,
  .brain-card,
  .api-provider-card,
  .integration-card,
  .cloud-provider {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Models view: filter chips and size chips must wrap, not push
     the page wider. */
  .models-filters,
  .models-search-row,
  .models-row,
  .filter-chips,
  .models-tier-chips,
  .models-size-chips {
    flex-wrap: wrap;
    gap: 6px;
  }
  .filter-chip { padding: 5px 9px; font-size: 11px; }

  /* Models drop zone full-width, less padding */
  .models-drop-zone,
  .skills-drop-zone {
    padding: 18px 14px;
    text-align: center;
  }
  .models-drop-zone-inner,
  .skills-drop-zone-inner {
    max-width: 100%;
  }

  /* API view: provider cards stack and provider actions wrap. */
  .api-provider-list { gap: 12px; }
  .api-provider-card { padding: 14px; }
  .api-provider-meta-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .api-provider-actions,
  .cloud-provider-actions,
  .integration-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .api-controls-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Cloud providers: stack the two-column grid. */
  .cloud-providers { gap: 12px; }
  .cloud-provider { padding: 14px; }

  /* Integrations: stack and shrink padding. */
  .integration-grid { grid-template-columns: 1fr; gap: 10px; }
  .integration-card { padding: 14px; }

  /* Skills view: stack the toolbar (search + auto-toggle), stack
     categories. */
  .skills-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .skills-search-wrap { width: 100%; }
  .skills-search-wrap input { width: 100%; }
  .skills-auto-toggle { align-self: flex-start; }
  .skills-categories { grid-template-columns: 1fr; gap: 10px; }
  .skill-card { padding: 14px; }

  /* Notes view: catbar chips wrap, sidebar fits more, foot actions
     stack. */
  .notes-catbar-chips { gap: 4px; }
  .notes-catbar-chips .cat-chip { font-size: 11px; padding: 4px 8px; }
  .notes-tree { max-height: 38vh; }
  .notes-editor-foot,
  .note-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .notes-search-row { flex-wrap: wrap; gap: 8px; }
  .notes-search-row > * { flex: 1 1 auto; min-width: 0; }

  /* Vibecoding view: inputs full-width, output panel scrolls in y. */
  .vibecoding-view input,
  .vibecoding-view textarea,
  .vibecoding-view select {
    width: 100%;
    max-width: 100%;
  }
  .vibecoding-view .output {
    max-height: 50vh;
    overflow: auto;
  }

  /* Brain view: hero stats already stack via Codex's 1100px rule;
     make sure brain-card padding is comfortable. */
  .brain-card { padding: 14px; }

  /* Homework: empty state, attachments. */
  .homework-empty {
    padding: 24px 16px;
    text-align: center;
  }
  .homework-empty .primary { width: 100%; }
  .homework-attach-chip { max-width: 100%; }
  .homework-attach-chip img { max-width: 56px; max-height: 56px; }

  /* Agents view: cards stack. */
  .agents-view .cards,
  .agents-view .agent-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Tin Editor: status grid wraps, file tree shrinks. */
  .editor-status {
    grid-template-columns: 1fr 1fr;
  }
  .editor-status > div { border-right: 0; border-bottom: 1px solid var(--control-border, var(--rule)); }
  .editor-status > div:nth-child(2n) { border-right: 0; }
  .editor-buffer-frame { min-height: 320px; max-height: 60vh; }
  .editor-tree { max-height: 32vh; overflow: auto; }

  /* Remote PC: command grid stacks. */
  .rpc-grid { grid-template-columns: 1fr; gap: 10px; }
  .rpc-cmd { width: 100%; }

  /* Settings + all modals: full-width minus 16px gutter, scroll body
     if taller than viewport. */
  dialog.settings,
  dialog.editor-modal,
  dialog.palette,
  dialog.shortcuts-overlay {
    width: calc(100% - 16px);
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: 12px 8px;
  }
  dialog.settings[open],
  dialog.editor-modal[open] {
    max-height: calc(100dvh - 24px);
  }
  .settings .modal-head,
  dialog.editor-modal .modal-head {
    padding: 14px 18px;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
  }
  .settings .body,
  dialog.editor-modal .body {
    padding: 14px 18px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-section { gap: 10px; }
  .settings-actions {
    flex-wrap: wrap;
    gap: 6px;
    position: sticky;
    bottom: 0;
    background: var(--paper, var(--surface-1));
    padding-top: 8px;
    border-top: 1px solid var(--rule, var(--line-soft));
  }
  .settings-actions .primary,
  .settings-actions .secondary,
  .settings-actions .ghost {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  .settings-actions .danger { flex: 1 1 100%; }

  /* Kebab menu: anchor to viewport edge instead of overflowing. */
  .kebab-menu {
    right: 0;
    max-width: calc(100vw - 24px);
  }

  /* Chat attachments preview row: thumbs wrap and shrink. */
  .chat-attachments {
    flex-wrap: wrap;
    gap: 6px;
  }
  .chat-attachments .chat-attachment-thumb {
    max-width: 64px;
    max-height: 64px;
  }
}

@media (max-width: 720px) {
  /* prompt-plus menu: anchor to viewport so the "Add note / Attach /
     Image / Tool" dropdown doesn't get clipped on tiny phones. */
  .prompt-plus-menu {
    left: 6px !important;
    right: 6px !important;
    max-width: calc(100vw - 12px);
    min-width: 0;
  }

  /* Models view: gallery cards full-width single column. */
  .models-view .cards,
  #modelGallery {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* API view: stat-card metrics down to 2 columns, shrink hero
     headline so it doesn't ellipsis-truncate. */
  .api-head-stats,
  .view-hero-stats {
    grid-template-columns: 1fr !important;
  }

  /* Brain card numbers: keep tabular alignment but scale. */
  .brain-card h4 { font-size: 10px; }

  /* Profile chip: hide user-line on tight screens, keep avatar +
     name. */
  .topbar .profile-chip.compact .profile-chip-user { display: none; }
  .topbar .profile-chip.compact .profile-chip-name { font-size: 11px; }

  /* Sign-in / lock screen: full-width form, larger touch targets. */
  .lock-card { width: calc(100% - 24px); padding: 22px 18px; }
  .lock-submit { width: 100%; padding: 12px; font-size: 14px; }
  .lock-input { font-size: 16px; padding: 12px 14px; }   /* iOS focus-zoom guard */
}

@media (max-width: 480px) {
  /* the chat-jump-prompt floating button competes with the
     composer's bottom-right corner; nudge it above the composer
     instead of overlapping it on phones. */
  .chat-jump-prompt {
    bottom: max(86px, calc(env(safe-area-inset-bottom, 0px) + 86px)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    padding: 7px 10px;
    font-size: 9px;
  }
  .chat-jump-prompt strong { width: 16px; height: 16px; font-size: 11px; }

  /* theme-toggle is bottom-left fixed; on tiny screens shrink to
     icon-only and clear of the safe-area inset. */
  .theme-toggle {
    padding: 6px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
  }
  .theme-toggle-label { display: none; }

  /* topbar profile chip: avatar only, no name text — saves a lot
     of horizontal room next to the kebab. */
  .topbar .profile-chip.compact { padding: 3px; gap: 0; }
  .topbar .profile-chip.compact .profile-chip-text { display: none; }

  /* sidebar at the narrowest width: 4 columns instead of 5 so the
     icon-label cells don't squeeze into 1-character ellipsis. */
  .sidebar .tab { flex: 1 0 calc(25% - 4px); }
  .tab .tab-label { font-size: 9.5px; }
  .tab .tab-icon { font-size: 16px; }

  /* compact category chips inside chat-categories-panel. */
  .chat-cat-row .chat-cat-color { width: 7px; height: 7px; }

  /* note-mic: smaller on phone-textareas. */
  .note-mic { width: 28px; height: 28px; top: 12px; right: 8px; }
  .note-mic svg { width: 14px; height: 14px; }

  /* status pills: hide the long label so only the value shows when
     a pill is horizontally constrained (operator can long-press to
     read full title via the button's `title` attr). */
  .status-pill .status-pill-label { display: none; }

  /* settings modal: edge-to-edge on tiny screens. */
  dialog.settings,
  dialog.editor-modal {
    width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100dvh;
  }

  /* note actions row: each button half-width so Save + Delete are
     accessible side-by-side without horizontal overflow. */
  .note-actions .ghost,
  .note-actions .primary,
  .note-actions .secondary,
  .note-actions .danger { flex: 1 1 calc(50% - 4px); }

  /* models-api-summary cards: keep readable when forced single-col. */
  .models-api-summary { grid-template-columns: 1fr; }
  .models-api-summary > div { padding: 10px; }

  /* api-head-stats / view-hero-stats: 1 col so numbers don't truncate. */
  .api-head-stats > div,
  .view-hero-stats > div {
    padding: 10px;
  }
}

/* prevent horizontal page scroll EVER — any rogue element that
   widens the layout should be visibly clipped, not allowed to
   force the whole page sideways. */
@media (max-width: 880px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app { overflow-x: clip; }
}


/* ─── Tin 1.8: live stream rendering + chat polish ──────────────────
   Companion styles for js/markdown.js (md-lite blocks) and
   js/stream-render.js (token fade, wait spinner). */

/* md-lite blocks inside chat responses. .entry-response is a flex column
   with a 12px gap, so blocks need no margins of their own. */
.entry-response .md-h {
  margin: 4px 0 -4px;
  line-height: 1.35;
  color: var(--ink);
}
.entry-response .md-h1,
.entry-response .md-h2 { font-size: 15.5px; font-weight: 650; }
.entry-response .md-h3 { font-size: 14.5px; font-weight: 600; }
.entry-response .md-h4 { font-size: 14px;   font-weight: 600; color: var(--ink-dim); }

.entry-response .md-list { margin: 0; padding-left: 22px; }
.entry-response .md-list li { margin: 2px 0; }
.entry-response .md-list li::marker { color: var(--signal); }

.entry-response .md-quote {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--signal-dim);
  color: var(--ink-dim);
}

.entry-response .md-hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2px 0;
  width: 100%;
}

.md-code {
  font: 400 12.5px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--warn);
  overflow-wrap: anywhere;
}

a.md-link {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.md-link:hover { color: var(--signal-glint); }

/* Streaming live-tail host — display:contents so frozen blocks and tail
   blocks share .entry-response's flex column + gap as siblings. */
.stream-tail { display: contents; }

/* Per-token fade — freshly streamed words materialize. */
.tk-new { animation: tk-fade .35s ease-out both; }
@keyframes tk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Quiet "model is working" row. The spinner frames are pure CSS so the
   row animates whether it came from a string render or the live renderer. */
.stream-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font: 500 12px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.stream-spin { width: 1ch; color: var(--signal); }
.stream-spin::before {
  content: '|';
  display: inline-block;
  animation: stream-spin-frames .56s steps(1, end) infinite;
}
@keyframes stream-spin-frames {
  0%   { content: '|'; }
  25%  { content: '/'; }
  50%  { content: '-'; }
  75%  { content: '\\'; }
}
.stream-wait-label { animation: streaming-pulse 1.4s ease-in-out infinite; }

/* Reply metrics badge (duration · ~tok/s) */
.entry-flag.is-perf {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  padding: 0 5px;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tk-new,
  .stream-spin::before,
  .stream-wait-label { animation: none !important; }
}

/* ─── Tin 1.9: appearance panel + ambient background effects ────────
   Companion styles for js/effects.js and the appearance menu wired in
   app.js (bindAppearanceMenu). */

/* The effects canvas sits between the body's --paper fill (z auto) and
   the .app column (z 2): visible in the gutters, never over content,
   never intercepting input. */
#fxCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Static patterns — painted straight onto the body so they cost nothing.
   --fx-color is set inline by Effects.apply(); falls back to the accent. */
body { --fx-color: var(--signal); }
body.fx-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--fx-color) 20%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
body.fx-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fx-color) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fx-color) 11%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* New themes use the palette icon on the bottom-left chip. */
:root[data-theme="midnight"] .theme-toggle .theme-icon-palette,
:root[data-theme="ocean"]    .theme-toggle .theme-icon-palette,
:root[data-theme="terminal"] .theme-toggle .theme-icon-palette,
:root[data-theme="neon"]     .theme-toggle .theme-icon-palette,
:root[data-theme="plum"]     .theme-toggle .theme-icon-palette,
:root[data-theme="paper"]    .theme-toggle .theme-icon-palette { display: block; }

/* ── appearance menu ── */
.appearance-menu {
  position: fixed;
  left: 16px;
  bottom: 58px;
  z-index: 81;
  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule-bright);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  animation: appearance-pop .16s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes appearance-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.appearance-title {
  margin: 12px 0 8px;
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.appearance-title:first-child { margin-top: 0; }

.appearance-themes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.appearance-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.appearance-swatch:hover { border-color: var(--rule-bright); transform: translateY(-1px); }
.appearance-swatch.is-on { border-color: var(--signal); }
.swatch-chip {
  position: relative;
  width: 34px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(127,127,127,.25);
  overflow: hidden;
}
.swatch-chip i {
  position: absolute;
  border-radius: 999px;
}
.swatch-chip i:first-child { left: 5px; top: 6px; width: 10px; height: 10px; }
.swatch-chip i:last-child  { right: 5px; top: 9px; width: 14px; height: 4px; }
.swatch-name {
  font: 500 9px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.appearance-swatch.is-on .swatch-name { color: var(--signal); }

.appearance-fx {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.appearance-chip {
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-dim);
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.appearance-chip:hover { color: var(--ink); border-color: var(--rule-bright); }
.appearance-chip.is-on { color: var(--signal); border-color: var(--signal-dim); background: var(--paper-3); }

.appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.appearance-row label {
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.appearance-row input[type="range"] {
  flex: 1;
  max-width: 150px;
  accent-color: var(--signal);
}
.appearance-color { display: inline-flex; align-items: center; gap: 8px; }
.appearance-color input[type="color"] {
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .appearance-menu { animation: none; }
}
@media (max-width: 560px) {
  .appearance-themes { grid-template-columns: repeat(4, 1fr); }
  .appearance-menu { bottom: 52px; left: 10px; }
}

/* ─── Tin 1.10: Compare lab ──────────────────────────────────────────
   Companion styles for js/compare.js. Pane bodies reuse .entry-response
   so the md-lite blocks, stream-wait spinner, and token fade all apply. */

.compare-view .panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}

/* slot tags share the chat-category palette hues */
.compare-slot-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font: 700 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--paper);
}
.compare-slot-tag[data-slot="A"] { background: #7aa2f7; }
.compare-slot-tag[data-slot="B"] { background: #9ece6a; }
.compare-slot-tag[data-slot="C"] { background: #e0a868; }
.compare-slot-tag[data-slot="D"] { background: #bb9af7; }

.compare-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.compare-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
.compare-slot-select {
  max-width: 230px;
  padding: 4px 6px;
  font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
  background: var(--paper);
  border: none;
}
.compare-slot-select:focus { outline: 1px solid var(--signal-dim); border-radius: 4px; }
.compare-slot-remove {
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.compare-slot-remove:hover { color: var(--alert); }
.compare-add-slot {
  padding: 6px 12px;
  border: 1px dashed var(--rule-bright);
  border-radius: 8px;
  color: var(--ink-dim);
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.compare-add-slot:hover { color: var(--signal); border-color: var(--signal-dim); }

.compare-blind-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
}
.compare-blind-toggle input { accent-color: var(--signal); }

.compare-controls textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  resize: vertical;
}
.compare-controls textarea:focus { outline: none; border-color: var(--signal-dim); }

.compare-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* panes */
.compare-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compare-grid[data-count="3"],
.compare-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.compare-pane {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  min-height: 160px;
}
.compare-pane[data-status="running"] { border-color: var(--rule-bright); }
.compare-pane[data-status="error"]   { border-color: var(--alert); }
.compare-pane.is-winner {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), 0 8px 26px rgba(0,0,0,.25);
}

.compare-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
}
.compare-pane-name {
  font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.compare-pane-meta {
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-faint);
  white-space: nowrap;
}
.compare-pane-copy {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-dim);
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.compare-pane-copy:hover { color: var(--ink); border-color: var(--ink-dim); }

.compare-pane-body {
  padding: 12px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: hidden;
  max-height: 480px;
  overflow-y: auto;
}
.compare-pane-error { color: var(--alert); }

.compare-pane-foot {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
}
.compare-vote {
  padding: 6px 14px;
  border: 1px solid var(--signal-dim);
  border-radius: 999px;
  color: var(--signal);
  font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.compare-vote:hover:not(:disabled) { background: var(--signal); color: var(--paper); transform: translateY(-1px); }
.compare-vote:disabled { opacity: .35; cursor: not-allowed; }

.compare-synth-row { margin-top: 14px; }
.compare-synth-out { font-size: 13.5px; line-height: 1.6; }

/* scoreboard */
.compare-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.compare-board-head h2 {
  font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.compare-board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.compare-board-table th {
  text-align: left;
  padding: 6px 8px;
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.compare-board-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.compare-board-table tr:last-child td { border-bottom: none; }
.compare-board-bar {
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.compare-board-bar i {
  display: block;
  height: 100%;
  background: var(--amber-bar);
  border-radius: 999px;
}

/* confetti bits (vote celebration) */
.compare-confetti {
  position: fixed;
  z-index: 300;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
}

@media (max-width: 880px) {
  .compare-grid,
  .compare-grid[data-count="3"],
  .compare-grid[data-count="4"] { grid-template-columns: 1fr; }
  .compare-slot-select { max-width: 56vw; }
  .compare-pane-body { max-height: 360px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TIN MOBILE REDESIGN  — bottom tab bar + compact hero
   Supersedes conflicting rules above on narrow viewports. Lives at the
   very bottom of the file so cascade wins are guaranteed.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Bottom nav bar ───────────────────────────────────────────────────── */
.bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 880px) {

  /* Show the bottom nav, hide the sidebar */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--paper-2);
    border-top: 1px solid var(--rule-bright);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* subtle frosted feel */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .sidebar,
  .sidebar-toggle { display: none !important; }

  /* app-shell: single column, no sidebar gap */
  .app-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 0 !important;
  }

  /* Body padding: reserve room for topbar (~90px) and bottom nav (~60px + safe-area) */
  .app {
    padding-top: 12px !important;
    padding-left: max(env(safe-area-inset-left), 14px) !important;
    padding-right: max(env(safe-area-inset-right), 14px) !important;
    /* Bottom padding = nav bar height (60px) + safe area + breathing room */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* ── Bottom nav tab buttons ── */
  .bn-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    border: 0;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 52px;
  }
  .bn-tab:hover,
  .bn-tab:active {
    color: var(--ink);
  }
  .bn-tab.is-active {
    color: var(--signal);
  }
  .bn-icon {
    flex: 0 0 auto;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .bn-tab.is-active .bn-icon {
    transform: translateY(-1px);
  }
  .bn-label {
    font: 500 9.5px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bn-tab.is-active .bn-label {
    color: var(--signal);
  }

  /* active indicator dot above the label */
  .bn-tab.is-active::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 6px var(--signal-dim);
  }
  .bn-tab { position: relative; }

  /* ── "More" drawer ── */
  .bn-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
  }
  .bn-drawer:not([hidden]) {
    pointer-events: auto;
  }
  .bn-drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .bn-drawer.is-open .bn-drawer-scrim {
    opacity: 1;
  }
  .bn-drawer-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--paper-2);
    border-top: 1px solid var(--rule-bright);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.16,.84,.32,1);
    max-height: 70dvh;
    overflow-y: auto;
  }
  .bn-drawer.is-open .bn-drawer-panel {
    transform: translateY(0);
  }
  .bn-drawer-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--rule-bright);
    margin: 0 auto 16px;
  }
  .bn-drawer-title {
    font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 14px;
  }
  .bn-drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .bn-drawer-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink-dim);
    font: 500 10px/1.2 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .03em;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
  }
  .bn-drawer-tab:hover,
  .bn-drawer-tab:active {
    color: var(--ink);
    background: var(--paper-3);
    border-color: var(--rule-bright);
  }
  .bn-drawer-tab.is-active {
    color: var(--signal);
    border-color: var(--signal-dim);
    background: var(--paper-3);
  }

  /* ── Compact view-hero: replace tall hero with a slim bar ── */
  .view-hero,
  .api-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    grid-template-columns: unset !important;
    background:
      linear-gradient(90deg, rgba(202,163,106,0.10), transparent 60%),
      var(--paper-2) !important;
  }

  .view-hero-copy,
  .api-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Hide long description on mobile — eyebrow + h1 is enough */
  .view-hero .muted,
  .api-head .muted {
    display: none !important;
  }
  .view-eyebrow,
  .api-eyebrow {
    font-size: 9px !important;
    letter-spacing: .14em !important;
    margin-bottom: 2px !important;
  }
  .view-hero h1,
  .api-head h1,
  .skills-head h1 {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* Stats: compact horizontal pill row beside the title */
  .view-hero-stats,
  .api-head-stats {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: unset !important;
    gap: 6px !important;
    flex: 0 0 auto;
    max-width: 50%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .view-stat,
  .api-head-stats > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  .view-stat span,
  .api-head-stats span {
    font-size: 8px !important;
    margin-bottom: 0 !important;
  }
  .view-stat strong,
  .api-head-stats strong {
    font-size: 11px !important;
  }

  /* Chat view: full height, no overflow — the stream fills remaining space */
  #chat.view.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    height: calc(100dvh - 90px - 60px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)) !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    padding-top: 0 !important;
  }

  /* chat hero bar: no border/margin above, tightly packed */
  .chat-hero {
    margin-bottom: 6px !important;
  }

  /* categories panel: collapsed horizontal chip strip */
  .chat-categories-panel {
    flex: 0 0 auto !important;
    border-left: none !important;
    border-top: 1px solid var(--rule) !important;
    max-height: none !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .chat-categories-head h2 { font-size: 10px !important; }
  .chat-categories-hint { display: none !important; }
  .chat-categories-list {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .chat-cat-row {
    flex: 0 0 auto !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    border: 1px solid var(--rule) !important;
    white-space: nowrap !important;
  }

  /* Composer: sticky above bottom nav */
  #chat.view.active .chat-composer {
    position: sticky !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 6px) !important;
    z-index: 30 !important;
    border-radius: 8px !important;
    border: 1px solid var(--rule-bright) !important;
    margin: 0 2px !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,.28) !important;
  }

  /* Appearance is anchored beside the account (see workspace.css). */

  /* chat-jump-prompt: clear of the bottom nav */
  .chat-jump-prompt {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 56px) !important;
    right: max(env(safe-area-inset-right), 12px) !important;
  }

  /* views: no top padding (the hero provides its own) */
  .view.active {
    padding-top: 0 !important;
  }

  /* topbar: compact single row */
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 10px !important;
    flex-wrap: nowrap !important;
  }
  .topbar .brand-row {
    flex: 0 0 auto;
    gap: 8px;
  }
  .topbar-title {
    font-size: 13px !important;
  }
  .topbar-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .topbar-status::-webkit-scrollbar { display: none !important; }
  .topbar .top-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
}

/* Very narrow phones (< 400px): smaller drawer grid */
@media (max-width: 400px) {
  .bn-drawer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   TIN MOBILE POLISH PASS — fixes over the bottom-nav redesign above.
   Replaces the guessed "topbar ≈ 90px / bar = 60px" math with two JS-
   measured custom properties set by initBottomNav():
     --bn-h     real bottom-bar height incl. safe-area (0 when hidden)
     --chat-top #chat's document-space top edge
   Appended last so it wins the cascade over the redesign block.
   ═════════════════════════════════════════════════════════════════════════ */

/* Desktop guard: the bar/drawer must never render above the breakpoint,
   even mid-transition or with stale inline state. */
@media (min-width: 881px) {
  .bottom-nav, .bn-drawer { display: none !important; }
}

@media (max-width: 880px) {

  /* ── var-based clearances (supersede the fixed 60px guesses) ── */
  .app {
    padding-bottom: calc(var(--bn-h, 64px) + 18px) !important;
  }
  .chat-jump-prompt {
    bottom: calc(var(--bn-h, 64px) + 58px) !important;
  }

  /* ── chat column: exact fit, no dead band above the bar ── */
  #chat.view.active {
    height: calc(100dvh - var(--chat-top, 150px) - var(--bn-h, 64px) - 10px) !important;
    min-height: 0 !important;
  }
  /* The column already pins the composer to its bottom edge; the sticky
     60px offset from the redesign pushed it up and left a hollow gap. */
  #chat.view.active .chat-composer {
    position: static !important;
    bottom: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .18) !important;
  }

  /* ── keyboard up: give the viewport to the conversation ── */
  body.kb-open .bottom-nav {
    transform: translateY(110%);
    pointer-events: none;
  }
  .bottom-nav { transition: transform .2s ease; }
  body.kb-open .chat-jump-prompt,
  body.kb-open #app .theme-toggle { display: none !important; }
  /* Collapse chat chrome while typing so the stream + composer fit the
     keyboard-shrunken viewport instead of clipping the composer. */
  body.kb-open #chat .chat-hero,
  body.kb-open #chat .chat-categories-panel { display: none !important; }

  /* ── drawer polish ── */
  body.bn-drawer-open { overflow: hidden; }
  .bn-drawer-panel {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .4);
  }
  .bn-drawer-tab { min-height: 64px; }
  .bn-drawer-tab:focus-visible,
  .bn-tab:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
    border-radius: 8px;
  }
  .bn-drawer-tab:active { transform: scale(.97); }

  /* ── bar polish: clearer states, sturdier labels, press feedback ── */
  .bn-label { font-size: 10px; letter-spacing: .03em; }
  .bn-tab:active .bn-icon { transform: scale(.88); }
  .bn-tab { transition: color .15s ease, opacity .15s ease; }
  .bn-tab:active { opacity: .75; }

  /* ── iOS focus-zoom guard, app-wide ──
     Safari zooms the page whenever a focused text control is under 16px.
     Individual fields were patched one by one; make it the rule. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* compare lab on phones: keep the run row thumb-sized */
  #compareRun { padding: 10px 18px; }
  .compare-vote { padding: 9px 16px; }

  /* topbar: never wraps to a second row — height stays predictable for
     --chat-top; pills scroll horizontally instead. */
  .topbar { min-height: 50px; }
  .topbar-status { touch-action: pan-x; }
}

/* Reduced motion: no drawer slide, no bar slide, no icon springs. */
@media (prefers-reduced-motion: reduce) {
  .bn-drawer-panel, .bn-drawer-scrim, .bottom-nav, .bn-icon { transition: none !important; }
}

/* ─── Mobile polish: notch clearance + un-crushed hero stats ─────────────
   (follow-up from device screenshot: iOS status-bar clock overlapped the
   brand row, and the hero stat pills were flattened on narrow phones) */
@media (max-width: 880px) {

  /* The redesign's padding-top:12px!important rode the topbar under the
     iPhone status bar (viewport-fit=cover exposes that zone). Clear it. */
  .app {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  }

  /* Hero stats: stop squeezing them beside the title into a crushed 50%
     column — give them a full-width pill row under the title that scrolls
     horizontally and never shrinks below its content. */
  .view-hero,
  .api-head { flex-wrap: wrap !important; }
  .view-hero-copy,
  .api-head > div:first-child { flex: 1 1 100%; }
  .view-hero-stats,
  .api-head-stats {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
    padding-bottom: 2px;
  }
  .view-hero-stats::-webkit-scrollbar,
  .api-head-stats::-webkit-scrollbar { display: none; }
  .view-stat,
  .api-head-stats > div {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    background: var(--paper-3);
    border: 1px solid var(--rule);
  }
  .view-stat span,
  .api-head-stats span { font-size: 9px !important; }
  .view-stat strong,
  .api-head-stats strong { font-size: 12px !important; }
}

/* ─── Mobile polish: chat hero no longer crushed under the toolbar ──────
   #chat is a height-capped flex column on phones. The hero (min-height:0
   from the redesign) was flex-shrunk by .chat-stream's 360px floor, so
   its stat pills overflowed and painted on top of the MODEL toolbar.
   Only the stream may flex; the chrome never shrinks. The hero's stat
   row duplicates the toolbar directly below it, so it goes entirely. */
@media (max-width: 880px) {
  #chat.view.active .view-hero,
  #chat.view.active .chat-toolbar,
  #chat.view.active .chat-composer { flex-shrink: 0 !important; }
  #chat.view.active .chat-stream { min-height: 0 !important; }
  .chat-hero .view-hero-stats { display: none !important; }
}

/* ─── Mobile chat: iMessage / ChatGPT / Claude layout ────────────────────
   #chat becomes a fixed-height flex column filling the space below the hero
   and above the bottom nav. The composer is the LAST static flex child, so
   it always sits at the bottom of that column — only the message output
   scrolls. No position:fixed (it kept getting trapped by transformed
   ancestors and landing at the bottom of the scroll content). Categories
   hidden on phones (they overlapped); entries wrap to the viewport. */
@media (max-width: 880px) {

  #chat.view.active {
    display: flex !important;
    flex-direction: column !important;
    /* fill from the chat's top edge to just above the nav (dvh tracks the
       mobile browser's shrinking viewport). --chat-top and --bn-h are
       measured live in app.js (initBottomNav). */
    height: calc(100dvh - var(--chat-top, 128px) - var(--bn-h, 64px)) !important;
    min-height: 340px !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  /* The "Main Chat" hero lives inside #chat — keep it a fixed-size header
     at the top of the column so only the message output scrolls. */
  #chat.view.active .chat-hero { flex: 0 0 auto !important; }
  /* When chat is active, drop .app's bottom padding (it reserves room for
     the nav on scrolling views) so the height-capped chat doesn't push the
     page into a scroll. */
  body:has(#chat.view.active) .app { padding-bottom: 0 !important; }
  #chat.view.active .chat-with-categories {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  #chat.view.active .chat-main-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  /* Categories panel: hidden on phones (it overlapped the chat; it stays a
     desktop-only feature). */
  #chat.view.active .chat-categories-panel { display: none !important; }

  /* Compact single-row Model / Mode bar at the top; never grows/shrinks. */
  #chat.view.active .chat-toolbar {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  #chat.view.active .chat-toolbar-controls {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #chat.view.active .chat-toolbar-cell { flex-direction: row !important; align-items: center !important; gap: 0 !important; }
  #chat.view.active .chat-toolbar-cell:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  #chat.view.active .chat-toolbar-cell:last-child { flex: 0 0 auto !important; }
  #chat.view.active .chat-toolbar-label { display: none !important; }
  #chat.view.active .chat-toolbar-cell .model-picker-host { width: 100% !important; min-width: 0 !important; }
  #chat.view.active #chatMode { width: auto !important; min-width: 92px !important; max-width: 42vw !important; }

  /* Model-picker trigger: keep the status dot, label, and caret from
     colliding when the row is tight (the overlap seen on phones). */
  .mp-trigger { gap: 8px !important; }
  .mp-trigger-status { flex: 0 0 8px !important; }
  .mp-trigger-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mp-trigger-caret { flex: 0 0 auto !important; }

  /* OUTPUT — the only scrolling region. Clips x; entries wrap. */
  #chat.view.active #chatOutput.chat-stream {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px !important;
  }
  /* Entries must wrap to the viewport — the desktop 76ch cap is ~600px,
     far wider than a phone, so without this the prose spilled off the
     right edge and got clipped. */
  #chat.view.active .entry,
  #chat.view.active .entry > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #chat.view.active .entry h3,
  #chat.view.active .entry .entry-response,
  #chat.view.active .entry .prose,
  #chat.view.active .entry .md-h,
  #chat.view.active .entry li {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  #chat.view.active .entry pre,
  #chat.view.active .entry .code-block {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* COMPOSER — last static flex child, so it's pinned at the bottom of the
     column with no fixed-positioning fragility. */
  #chat.view.active .chat-composer {
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 1px 0 0 !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .22) !important;
    background: var(--paper-2) !important;
  }
}

/* ─── Tin 1.11: Deep Research ────────────────────────────────────────
   Companion styles for js/research.js. The report reuses .entry-response
   so md-lite blocks + the stream renderer apply unchanged. */

.research-view .panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}

.research-controls textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.research-controls textarea:focus { outline: none; border-color: var(--signal-dim); }

.research-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.research-hint { font-size: 11px; flex: 1 1 240px; min-width: 0; }

/* progress timeline */
.research-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 4px;
}
.research-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12.5px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-dim);
}
.research-step-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--rule-bright);
  background: var(--paper-3);
}
.research-step.is-active  { color: var(--ink); }
.research-step.is-active  .research-step-dot { border-color: var(--signal); background: var(--signal); animation: streaming-pulse 1.4s ease-in-out infinite; }
.research-step.is-done    .research-step-dot { border-color: var(--signal-dim); background: var(--signal-dim); }
.research-step.is-error   { color: var(--alert); }
.research-step.is-error   .research-step-dot { border-color: var(--alert); background: var(--alert); }

/* source cards */
.research-sources { margin: 12px 0; }
.research-sources-title {
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.research-source {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.research-source:hover { border-color: var(--rule-bright); background: var(--paper-3); }
.research-source.is-read { border-left: 2px solid var(--signal-dim); }
.research-source-num {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--paper-3);
  color: var(--signal);
  font: 700 10px/1 'IBM Plex Mono', ui-monospace, monospace;
}
.research-source-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.research-source-title { font-size: 13px; color: var(--ink); line-height: 1.35; }
.research-source-url { font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-faint); }

/* report */
.research-report { font-size: 14px; line-height: 1.62; min-height: 40px; }
.research-error { color: var(--alert); }

/* history */
.research-history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.research-history-head h2 {
  font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.research-history { display: flex; flex-direction: column; gap: 6px; }
.research-history-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.research-history-item:hover { border-color: var(--signal-dim); background: var(--paper-3); }
.research-history-q { font-size: 13px; color: var(--ink); line-height: 1.35; }
.research-history-meta { font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 880px) {
  .research-run-row { gap: 8px; }
  #researchRun { padding: 10px 18px; }
  .research-hint { flex-basis: 100%; }
}

/* ─── Mobile chat: hard width cap + single-control bar ───────────────────
   Follow-up: text was wrapping at a width WIDER than the screen (a parent
   in the chat chain exceeded the viewport), so lines clipped on the right.
   Cap every level of the chain to the viewport so nothing can exceed it,
   and reduce the toolbar to just the model picker (the Mode select was
   overlapping it on the tight row; it stays available on desktop). */
@media (max-width: 880px) {
  #chat.view.active,
  #chat.view.active .chat-with-categories,
  #chat.view.active .chat-main-column,
  #chat.view.active #chatOutput.chat-stream {
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #chat.view.active .entry {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* One clean control: the model picker. Hide the Mode cell (Auto route /
     Local only / API fallback) on phones — it overlapped the picker and is
     a power setting; the <select> stays in the DOM so dispatch still reads
     it. */
  #chat.view.active .chat-toolbar-cell:last-child { display: none !important; }
  #chat.view.active .chat-toolbar-cell:first-child { flex: 1 1 auto !important; width: 100% !important; }
  #chat.view.active .chat-toolbar .model-picker-host,
  #chat.view.active .chat-toolbar .model-picker {
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
  }
  #chat.view.active .mp-trigger { padding: 8px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tin 2.0 — Tin/Jarvis voice view  (Phase 1)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── View shell ─────────────────────────────────────────────────────────── */
/* NOTE: .view { display: none } base rule hides inactive views.
   We only set flex when the view is active so tin doesn't bleed into other tabs. */
#tin.view.active {
  display: flex !important;
  flex-direction: column;
}

.tin-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 28px 28px;
  gap: 0;
}

/* ── Jarvis badge in hero h1 ────────────────────────────────────────────── */
.tin-badge {
  display: inline-block;
  font: 700 9px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  color: #c06b30;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid rgba(192, 107, 48, .5);
  border-radius: 4px;
}

/* ── Orb zone ───────────────────────────────────────────────────────────── */
.tin-orb-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 20px;
  flex: 0 0 auto;
}

.tin-orb-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* Rings — visible only when listening/speaking */
.tin-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--signal-dim);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, border-color .3s ease;
}
.tin-ring.r1 { inset: 0; }
.tin-ring.r2 { inset: -18%; }
.tin-ring.r3 { inset: -36%; }

/* Listening: rings ripple outward */
.tin-orb-wrap[data-state="listening"] .tin-ring {
  border-color: var(--signal);
  opacity: .55;
  animation: tin-ring-ripple 1.9s ease-out infinite;
}
.tin-orb-wrap[data-state="listening"] .tin-ring.r2 { animation-delay: .33s; }
.tin-orb-wrap[data-state="listening"] .tin-ring.r3 { animation-delay: .66s; }

/* Speaking: rings pulse gently */
.tin-orb-wrap[data-state="speaking"] .tin-ring {
  border-color: #4abf75;
  opacity: .4;
  animation: tin-ring-wave 1.1s ease-in-out infinite alternate;
}
.tin-orb-wrap[data-state="speaking"] .tin-ring.r2 { animation-delay: .2s; }
.tin-orb-wrap[data-state="speaking"] .tin-ring.r3 { animation-delay: .4s; }

@keyframes tin-ring-ripple {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.12); opacity: .1;  }
  100% { transform: scale(1);    opacity: .55; }
}
@keyframes tin-ring-wave {
  from { transform: scale(.98); }
  to   { transform: scale(1.05); }
}

/* Orb button itself */
.tin-orb {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .1);
  background: radial-gradient(circle at 40% 35%, #d47a35, #7c2808);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe8cc;
  -webkit-tap-highlight-color: transparent;
  /* Kill the iOS long-press callout / image-save menu and any text/image
     selection so press-and-hold reaches the JS instead of selecting the SVG. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transition: transform .12s ease, box-shadow .25s ease, background .35s ease;
  box-shadow: 0 6px 28px rgba(180, 80, 20, .4), 0 0 0 0 rgba(200, 100, 30, .3);
}
.tin-orb:hover { box-shadow: 0 6px 36px rgba(200, 100, 20, .55); }
.tin-orb:active { transform: scale(.94); }
/* SVG icons must not be the touch target — without this iOS treats a
   long-press on the <svg> as "select image". pointer-events:none routes
   every touch to the button itself. */
.tin-orb-icon,
.tin-orb svg,
.tin-orb svg * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Orb state: listening */
.tin-orb[data-state="listening"] {
  background: radial-gradient(circle at 40% 35%, #ff9840, #be4810);
  box-shadow: 0 6px 36px rgba(255, 140, 50, .6), 0 0 0 10px rgba(255, 140, 50, .1);
  animation: tin-orb-breathe 1.8s ease-in-out infinite;
}

/* Orb state: thinking */
.tin-orb[data-state="thinking"] {
  background: radial-gradient(circle at 40% 35%, #f5c842, #a07010);
  box-shadow: 0 6px 32px rgba(220, 170, 40, .55);
  animation: tin-orb-glow-pulse 1.1s ease-in-out infinite alternate;
}

/* Orb state: speaking */
.tin-orb[data-state="speaking"] {
  background: radial-gradient(circle at 40% 35%, #5ad68c, #1a7048);
  box-shadow: 0 6px 32px rgba(60, 180, 100, .55), 0 0 0 10px rgba(60, 200, 100, .08);
  animation: tin-orb-wave 0.75s ease-in-out infinite alternate;
}

@keyframes tin-orb-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
@keyframes tin-orb-glow-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25); }
}
@keyframes tin-orb-wave {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Icons inside orb — show/hide by state */
.tin-orb-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease;
}
.icon-mic   { opacity: 1; }
.icon-speak { opacity: 0; }
.icon-think { opacity: 0; }

.tin-orb[data-state="speaking"] .icon-mic   { opacity: 0; }
.tin-orb[data-state="speaking"] .icon-speak { opacity: 1; }
.tin-orb[data-state="speaking"] .icon-think { opacity: 0; }

.tin-orb[data-state="thinking"] .icon-mic   { opacity: 0; }
.tin-orb[data-state="thinking"] .icon-speak { opacity: 0; }
.tin-orb[data-state="thinking"] .icon-think { opacity: 1; }

.tin-orb[data-state="listening"] .icon-mic   { opacity: 1; }
.tin-orb[data-state="listening"] .icon-speak { opacity: 0; }
.tin-orb[data-state="listening"] .icon-think { opacity: 0; }

/* Thinking bounce dots */
.tin-think-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.tin-think-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
  animation: tin-dot-bounce .9s ease-in-out infinite;
}
.tin-think-dots span:nth-child(2) { animation-delay: .18s; }
.tin-think-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes tin-dot-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-8px); }
}

/* Status label below orb */
.tin-status {
  font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
  transition: color .25s ease;
}
#tin[data-state="listening"] .tin-status { color: var(--signal); }
#tin[data-state="thinking"]  .tin-status { color: #d4a820; }
#tin[data-state="speaking"]  .tin-status { color: #4abf75; }

.tin-mic-banner {
  text-align: center;
  margin: 10px 0 0;
}
.tin-mic-reload-btn {
  background: #f87;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font: 700 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
}

/* ── Transcript ──────────────────────────────────────────────────────────── */
.tin-transcript {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tin-empty {
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  padding: 28px 20px;
}

.tin-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: tk-fade .25s ease-out both;
}

.tin-entry-role {
  font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.tin-entry-user      .tin-entry-role { color: var(--signal-dim); }
.tin-entry-assistant .tin-entry-role { color: var(--ink-dim); }

.tin-entry-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.tin-tts-err {
  display: block;
  font-size: 11px;
  color: #f87;
  opacity: 0.75;
  margin-top: 4px;
}

/* User bubble: right-aligned with background */
.tin-entry-user { align-items: flex-end; }
.tin-entry-user .tin-entry-text {
  background: var(--paper-3);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  display: inline-block;
  max-width: 85%;
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.tin-controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.tin-text-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tin-text-toggle {
  align-self: flex-start;
  padding: 6px 14px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tin-text-toggle:hover { border-color: var(--signal-dim); color: var(--signal); }

.tin-text-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tin-text-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.tin-text-input:focus { border-color: var(--signal-dim); }
.tin-text-input::placeholder { color: var(--ink-faint); }

.tin-send-btn {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--paper);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.tin-send-btn:hover  { background: var(--signal-dim); }
.tin-send-btn:active { transform: scale(.92); }

.tin-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tin-wake-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.tin-wake-label input { accent-color: var(--signal); }

.tin-voice-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 200px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  outline: none;
  cursor: pointer;
}

.tin-connect-btn {
  margin-left: auto;
  padding: 5px 12px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  white-space: nowrap;
  border-color: var(--signal-dim);
  color: var(--signal);
}
.tin-connect-btn:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); }

.tin-clear-btn {
  padding: 5px 12px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  white-space: nowrap;
}

/* API tab: quick-start callout above the provider list. */
.api-quickstart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  padding: 14px 18px;
  border: 1px solid var(--signal-dim);
  border-radius: 10px;
  background: color-mix(in srgb, var(--signal) 6%, transparent);
}
.api-quickstart-title { font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.api-quickstart-copy { flex: 1 1 320px; min-width: 0; }
.api-quickstart-btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 9px 18px;
  font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--paper-1);
  background: var(--signal);
  border-radius: 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .12s ease;
}
.api-quickstart-btn:hover { opacity: .88; }

/* In-transcript CTA shown when Tin has no model to use. */
.tin-connect-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--paper-1);
  background: var(--signal);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity .12s ease;
}
.tin-connect-cta:hover { opacity: .88; }

/* ── Vision: capture buttons, pending thumbnail, camera modal (Phase 2) ──── */
.tin-capture-row {
  display: flex;
  gap: 8px;
}
.tin-cap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-dim);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tin-cap-btn:hover { border-color: var(--signal-dim); color: var(--signal); }
.tin-cap-btn svg { flex: 0 0 auto; }

/* Pending captured image */
.tin-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--signal-dim);
  border-radius: 10px;
  background: var(--paper-2);
}
.tin-pending-img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
}
.tin-pending-label {
  flex: 1 1 auto;
  font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-dim);
}
.tin-pending-clear {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tin-pending-clear:hover { border-color: var(--alert); color: var(--alert); }

/* Transcript entry image */
.tin-entry-img {
  max-width: min(260px, 70%);
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--rule);
  margin: 2px 0;
}
.tin-entry-user .tin-entry-img { align-self: flex-end; }

/* Camera modal — full-screen overlay with live preview */
.tin-cam-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 6, 4, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tin-cam-modal[hidden] { display: none; }
.tin-cam-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.tin-cam-video {
  width: 100%;
  max-height: 70vh;
  border-radius: 16px;
  background: #000;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .12);
}
.tin-cam-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.tin-cam-ctl {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #f0e8dc;
  cursor: pointer;
  transition: background .15s;
}
.tin-cam-ctl:hover { background: rgba(255, 255, 255, .16); }
.tin-cam-shutter {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .85);
  background: radial-gradient(circle at 40% 35%, #d47a35, #7c2808);
  cursor: pointer;
  transition: transform .1s;
  box-shadow: 0 4px 20px rgba(180, 80, 20, .5);
}
.tin-cam-shutter:active { transform: scale(.9); }

/* ── Mobile layout ──────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  #tin.view.active {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--chat-top, 128px) - var(--bn-h, 64px)) !important;
    min-height: 320px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  #tin.view.active .tin-hero { flex: 0 0 auto !important; }
  body:has(#tin.view.active) .app { padding-bottom: 0 !important; }

  #tin.view.active .tin-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 14px 10px !important;
    gap: 0 !important;
  }

  /* Top padding must clear the largest ring at its animated scale, otherwise
     the rings overflow upward and get clipped by .tin-body's overflow:hidden. */
  #tin.view.active .tin-orb-zone {
    padding: 42px 0 12px !important;
  }
  #tin.view.active .tin-orb-wrap { width: 120px !important; height: 120px !important; }
  #tin.view.active .tin-orb      { width: 86px  !important; height: 86px  !important; }
  #tin.view.active .tin-ring.r1  { inset: 0 !important; }
  #tin.view.active .tin-ring.r2  { inset: -12% !important; }
  #tin.view.active .tin-ring.r3  { inset: -22% !important; }

  #tin.view.active .tin-transcript {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  #tin.view.active .tin-controls {
    flex: 0 0 auto !important;
  }

  /* Cap width on all elements */
  #tin.view.active,
  #tin.view.active .tin-body,
  #tin.view.active .tin-transcript {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Compact hero on small screens */
  .tin-hero .view-hero-copy h1     { font-size: 22px !important; }
  .tin-hero .view-hero-copy .muted { display: none !important; }
}

/* ══ Studio — short-form content engine ═══════════════════════════════════
   Layout only. Buttons (.primary/.secondary/.ghost/.danger), .panel,
   .section-title, .status-pill, .muted and .tin-text-input are all inherited
   from the shared system above — Studio deliberately adds no new button or
   input styling, so a theme change reaches it for free. */
.studio-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-workspace:not([data-studio-view="video"]) {
  --studio-surface: var(--paper-2);
  --studio-ink: var(--ink);
  --studio-muted: var(--ink-dim);
  --studio-rule: var(--rule);
  background: var(--paper);
  color: var(--studio-ink);
}
:root[data-theme="light"] .studio-workspace:not([data-studio-view="video"]) {
  --studio-surface: #f5f6f8;
  --studio-ink: #202124;
  --studio-muted: #56606b;
  --studio-rule: #dde2e8;
  background: #fff;
  border-color: var(--studio-rule);
  box-shadow: 0 4px 20px rgb(0 0 0 / 5%);
}
.studio-workspace:not([data-studio-view="video"]) :is(h2,h3,strong,summary,label) { color: var(--studio-ink); }
.studio-workspace:not([data-studio-view="video"]) :is(.muted,.st-metric-grid span,.st-metric-grid small) { color: var(--studio-muted); }
.studio-workspace:not([data-studio-view="video"]) :is(.studio-card,.studio-new,.studio-out,.tin-text-input,.st-area) {
  background: var(--studio-surface); color: var(--studio-ink); border-color: var(--studio-rule);
}
.studio-workspace:not([data-studio-view="video"]) :is(.ghost,.secondary) { color: var(--studio-ink); border-color: var(--studio-rule); }
.studio-workspace:not([data-studio-view="video"]) :is(.studio-setup,.studio-connection-status,.st-metric-grid) { border-color: var(--studio-rule); }
.studio-workspace .section-title { align-items: flex-start; gap: 16px; }
.studio-workspace .studio-tabs { justify-content: flex-end; gap: 4px; }
.studio-workspace .studio-overview { padding: 12px 0; }
.studio-workspace .studio-overview h3 { font-size: 24px; margin: 8px 0 24px; }
.studio-workspace .studio-overview .st-metric-grid { border-block: 1px solid var(--rule); padding: 20px 0; }
.studio-workspace .studio-new { max-width: none; }
.studio-workspace .studio-new label { min-width: 0; display: grid; gap: 6px; }
.studio-workspace input, .studio-workspace textarea, .studio-workspace select { max-width: 100%; min-width: 0; }
.studio-workspace .studio-setup { margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--rule); }
.studio-workspace .studio-connection-status { padding: 16px 0; margin-bottom: 16px; border-block: 1px solid var(--rule); }
.studio-workspace .studio-connection-status p { overflow-wrap: anywhere; }
.studio-workspace .studio-setup summary { cursor: pointer; color: var(--ink); }
.studio-workspace .studio-storage { padding: 14px 0; border-block: 1px solid var(--studio-rule); }
.studio-workspace .studio-storage code, .studio-workspace .studio-setup code { overflow-wrap: anywhere; white-space: normal; }
.studio-workspace .studio-new label.studio-approval { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.studio-workspace .studio-approval input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; margin: 3px 0 0; padding: 0; }
.studio-workspace .studio-card p { overflow-wrap: anywhere; }
.studio-workspace .studio-setup p { max-width: 78ch; line-height: 1.6; }
.studio-workspace #stNotice:not(:empty) { padding: 12px; border-left: 3px solid var(--accent, #d97757); }
.studio-workspace button:focus-visible, .studio-workspace summary:focus-visible { outline: 2px solid var(--accent, #d97757); outline-offset: 3px; }
@media (max-width: 768px) {
  .studio-workspace .section-title { flex-direction: column; }
  .studio-workspace .studio-tabs { justify-content: flex-start; }
  .studio-workspace .st-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-workspace .studio-actions { flex-wrap: wrap; }
  .studio-workspace .studio-card { min-width: 0; overflow-wrap: anywhere; }
}
.studio-video-frame { display: block; width: 100%; height: 1050px; border: 0; border-radius: 8px; margin-top: 16px; background: #0d0b09; }
.studio-video-frame[hidden] { display: none; }
@media (max-width: 600px) { .studio-video-frame { height: 1400px; } }
.st-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0; }
.st-metric-grid > div { display: grid; gap: 6px; }
.st-metric-grid strong { font-size: 26px; color: var(--ink); }
.st-metric-grid small, .st-metric-grid span { color: var(--ink-dim); }
.st-table-wrap { overflow-x: auto; margin: 12px 0; }
.st-table-wrap table { width: 100%; text-align: left; border-collapse: collapse; }
.st-table-wrap th, .st-table-wrap td { padding: 8px; border-bottom: 1px solid var(--line); }
.studio-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; margin: 20px 0 12px; }
.studio-metric { min-width: 0; border-left: 2px solid var(--line); padding-left: 14px; }
.studio-metric span, .studio-metric small { display: block; color: var(--muted); font-size: 12px; }
.studio-metric strong { display: block; font-size: 28px; line-height: 1.3; margin: 6px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.studio-metric strong small { display: inline; font-size: 16px; }
.studio-video-breakdown { margin-top: 18px; border-top: 1px solid var(--line); }
.studio-video-breakdown summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.studio-video-breakdown summary span { display: inline-block; margin-left: 10px; font-weight: 400; color: var(--muted); font-size: 12px; }
.studio-video-breakdown summary:focus-visible, .studio-video-table:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.studio-video-table { max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.studio-video-table th { position: sticky; top: 0; background: var(--bg); }
.studio-video-table td:first-child { min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.studio-tabs .st-tab { padding: 6px 14px; font-size: 12px; }

.studio-new {
  display: grid; gap: 10px;
  padding: 16px; margin-bottom: 18px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper-2);
}
.studio-new label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.studio-new .primary { justify-self: start; }

.st-area {
  width: 100%; resize: vertical;
  font: inherit; color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 12px;
}
.st-area:focus { outline: none; border-color: var(--signal); }
.st-small { font-size: 11px; }

.studio-filters { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.studio-filters > * { flex: 1 1 200px; min-width: 0; }

.studio-list { display: grid; gap: 12px; }

.studio-card {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px; background: var(--paper-2);
}
.studio-card-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.studio-card-head strong { flex: 1 1 auto; min-width: 0; }
.studio-card p { margin: 0 0 8px; }

/* The hook is the whole job of a short — give it visual weight. */
.studio-hook {
  font-size: 15px; font-weight: 600;
  color: var(--signal);
  border-left: 3px solid var(--signal-dim);
  padding-left: 10px;
}

.studio-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.studio-out {
  margin: 10px 0 0; padding: 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-dim);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto;
}
.studio-out:empty { display: none; }

@media (max-width: 760px) {
  /* Studio's action rows are the same 4-6 button problem the note actions
     hit — wrap two per row rather than crushing the labels. */
  .studio-actions > button { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .studio-filters > * { flex: 1 1 100%; }
}

/* ── Studio: channels + per-post destinations ─────────────────────────────
   Connection state is colour-coded three ways on purpose. "needs approval"
   is not the same as "not connected" — one is work you can do, the other is
   waiting on a platform that may say no, and conflating them would hide the
   single most important fact about this feature's timeline. */
.status-pill.ch-ok      .status-pill-value { color: var(--signal); }
.status-pill.ch-blocked .status-pill-value { color: var(--warn, #d8a24a); }
.status-pill.ch-off     .status-pill-value { color: var(--ink-faint); }

.st-gate {
  font-size: 11.5px;
  color: var(--warn, #d8a24a);
  border-left: 2px solid var(--warn, #d8a24a);
  padding-left: 9px;
  margin: 8px 0;
}

.studio-publish {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.studio-publish > .ghost { margin-left: auto; }

.pub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.pub-chip b { font-weight: 600; }
.pub-chip.pub-draft b { color: var(--ink-dim); }
.pub-chip.pub-done  { border-color: var(--signal-dim); }
.pub-chip.pub-done  b { color: var(--signal); }
.pub-chip.pub-warn  { border-color: var(--warn, #d8a24a); }
.pub-chip.pub-warn  b { color: var(--warn, #d8a24a); }
.pub-chip.pub-fail  { border-color: var(--alert, #d97757); }
.pub-chip.pub-fail  b { color: var(--alert, #d97757); }

@media (max-width: 760px) {
  .studio-publish > .ghost { margin-left: 0; flex: 1 1 100%; }
}