/* ===========================================================================
   Stir — workspace UI

   Layout is the familiar three-column chat shell: a narrow brand rail, a
   sidebar of everything inside the selected brand, and one main pane.

   Dark is the default theme, not an alternate: this is a tool people sit in
   for hours reading long agent replies, and the light variant is kept behind
   [data-theme="light"] for anyone who wants it. Both themes are defined from
   the same token names, so no rule below needs to know which is active.

   Colour: warm neutrals, cool accent. The greys carry a little red and yellow
   rather than being pure or blue-black, which keeps long reading sessions from
   feeling clinical; the one accent is a cold blue, so it separates from those
   greys by temperature as well as by saturation and never has to shout to be
   found. Amber stays reserved strictly for "a human still needs to resolve
   this" — gaps, warnings, unsaved state — and is pushed orange so it stays
   distinct from the warm background rather than sinking into it.

   Type: Geist for the interface, Instrument Serif for display, Geist Mono for
   anything a machine produced. The serif appears only at the few sizes where
   its character reads — the wordmark and the sign-in headline — because a
   product that sells taste should show some in its own chrome.
   =========================================================================== */

:root {
  /* Surfaces, darkest to lightest — rail sits behind the sidebar, which sits
     behind the main pane, so depth reads without borders doing the work. */
  --rail-bg:  #0b0a09;
  --side-bg:  #141210;
  --paper:    #1a1815;
  --surface:  #211e1b;
  --raised:   #2a2622;
  --line:     #35302a;
  --line-soft:#2a2521;

  --text:      #f0ece5;
  --text-soft: #b0a89d;
  --text-dim:  #7e766c;

  /* Sidebar text tokens, kept as their own names because the sidebar stays
     dark in both themes. */
  --on-dark:      #f0ece5;
  --on-dark-soft: #a29a90;
  --ink-600: #3a342d;
  --ink-700: #2b2620;
  --avatar-bg: #423b33;

  --accent:      #5b9bff;
  --accent-deep: #3d84f5;
  --accent-wash: rgba(91, 155, 255, .15);
  --accent-line: rgba(91, 155, 255, .34);
  --amber:      #f0a04b;
  --amber-wash: rgba(240, 160, 75, .14);
  --good:       #56c08a;
  --bad:        #f27c72;

  --radius: 8px;
  --radius-lg: 12px;
  /* Two shadows, not one: cards need only the tight pair, anything that floats
     over content gets the deeper one. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 6px 20px rgba(0, 0, 0, .2);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .36), 0 16px 40px rgba(0, 0, 0, .3);
  --rail-w: 68px;
  --side-w: 268px;

  /* One line length for everything people read in prose. Long agent replies
     across a wide monitor are unreadable without it. */
  --measure: 72ch;

  /* A 4px spacing scale, so padding and gaps stop being invented per rule. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --rail-bg:  #17140f;
  --side-bg:  #201c16;
  --paper:    #faf8f4;
  --surface:  #ffffff;
  --raised:   #f3efe8;
  --line:     #e6e0d5;
  --line-soft:#efeae1;

  --text:      #1b1812;
  --text-soft: #5b544a;
  --text-dim:  #8d8478;

  --accent:      #2563eb;
  --accent-deep: #1d4fd8;
  --accent-wash: rgba(37, 99, 235, .09);
  --accent-line: rgba(37, 99, 235, .26);
  --amber:      #b06a12;
  --amber-wash: rgba(176, 106, 18, .11);
  --good:       #17794f;
  --bad:        #b3403a;

  --avatar-bg: #6d6459;
  --shadow: 0 1px 2px rgba(27, 24, 18, .06), 0 4px 14px rgba(27, 24, 18, .05);
  --shadow-lift: 0 2px 6px rgba(27, 24, 18, .08), 0 14px 36px rgba(27, 24, 18, .1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings tighten as they grow: at display sizes the default spacing reads as
   gappy, and letting every level share one value is what makes an interface
   look drawn by nobody in particular. */
h1, h2, h3, h4, h5 {
  font-family: Geist, ui-sans-serif, system-ui, sans-serif;
  margin: 0; font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.2;
}
h1 { font-size: 1.75rem; letter-spacing: -.028em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* Tabular figures everywhere numbers are compared down a column. */
.num, .count { font-variant-numeric: tabular-nums; }

code, .mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace; font-size: .86em; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- buttons */

.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  border-radius: var(--radius); border: 1px solid transparent;
  padding: .5rem .95rem; white-space: nowrap;
  letter-spacing: -.005em;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease, transform .06s ease;
}
/* A press that moves is worth a single pixel: it confirms the click landed on
   a slow connection, before any response has come back. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); color: #0b0a09; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); }
:root[data-theme="light"] .btn-primary { color: #fff; }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); border-color: var(--accent-line); }
.btn-sm { padding: .34rem .6rem; font-size: .84rem; }

input, textarea {
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .65rem; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
/* A ring rather than a replaced border, so focus never changes the element's
   size and nudges everything beside it. */
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
textarea { resize: vertical; }

.muted-line { color: var(--text-soft); font-size: .86rem; margin: .5rem 0 0; }

/* Invite link, shown when there is no SMTP to send it for us. */
.invite-link-row { display: flex; gap: .4rem; margin-top: .4rem; align-items: center; }
.invite-link-field {
  flex: 1; min-width: 0; font-size: .8rem; font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  padding: .35rem .5rem;
}
.muted-line.is-error { color: var(--bad); }
.muted-line.is-good  { color: var(--good); }

/* ---------------------------------------------------------------- sign in */

.signin-screen {
  position: fixed; inset: 0; display: grid; place-items: center;
  /* Two lights rather than one: a cool accent glow top-left against a warm
     ember bottom-right. A single radial reads as a gradient; two reads as a
     lit room, which is what stops a full-bleed dark screen feeling flat. */
  background:
    radial-gradient(900px 600px at 22% -12%, rgba(91, 155, 255, .16) 0%, transparent 62%),
    radial-gradient(700px 500px at 88% 108%, rgba(240, 160, 75, .09) 0%, transparent 60%),
    var(--rail-bg);
  padding: 1.5rem; z-index: 40;
}
.signin-card { max-width: 468px; width: 100%; color: var(--on-dark); }
.signin-mark { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; display: flex; align-items: center; gap: .55rem; margin-bottom: 1.75rem; }
.logo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); display: inline-block; }
/* The one place the serif runs at size. Optical sizing matters here: Instrument
   Serif is drawn for display, and below about 28px its thin strokes disappear
   on a dark background, so this headline is deliberately large. */
.signin-card h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: 2.6rem; line-height: 1.08;
  letter-spacing: -.015em; margin-bottom: .9rem;
}
.signin-card h1 em { font-style: italic; color: var(--accent); }
.signin-card p { color: var(--on-dark-soft); margin: 0 0 1.75rem; max-width: 40ch; }

@media (max-width: 520px) {
  .signin-card h1 { font-size: 2.05rem; }
  .signin-row { flex-direction: column; }
  .signin-row .btn { width: 100%; }
}
/* Google's button sits on the dark sign-in panel, so it uses Google's own white surface rather
   than the app's accent -- their brand guidance, and it reads as the primary path next to the
   secondary link-based sign-in below it. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; text-decoration: none;
  background: #fff; color: #1f1f1f; border-color: #dadce0;
  padding: .7rem 1rem;
}
.btn-google:hover { background: #f4f5f7; }

.signin-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--on-dark-soft); font-size: .8rem;
}
.signin-divider::before, .signin-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14);
}

.signin-row { display: flex; gap: .5rem; }
.signin-row input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--on-dark); }
.signin-row input::placeholder { color: #767c93; }

/* ---------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--rail-w) var(--side-w) 1fr; height: 100vh; }

/* Rail — one avatar per brand, i.e. one per agent. */
.rail {
  background: var(--rail-bg); display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: .9rem 0 1rem;
}
.rail-top { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%; }
.rail-logo { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: .4rem; }
.rail-brands { display: flex; flex-direction: column; gap: .5rem; align-items: center; width: 100%; }

.rail-brand {
  width: 42px; height: 42px; border-radius: 13px; cursor: pointer;
  border: 2px solid transparent; background: var(--ink-700); color: var(--on-dark);
  font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: .92rem;
  display: grid; place-items: center; position: relative;
  transition: border-radius .14s ease, background .14s ease;
}
.rail-brand:hover { border-radius: 10px; background: var(--ink-600); }
.rail-brand.is-active { background: var(--accent); border-radius: 10px; }
/* The active brand also gets a bar on the rail edge, so which agent you are
   talking to is legible without relying on colour alone. */
.rail-brand.is-active::before {
  content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #fff;
}
.rail-add, .rail-avatar {
  width: 42px; height: 42px; border-radius: 13px; cursor: pointer;
  background: transparent; border: 1px dashed rgba(255,255,255,.22); color: var(--on-dark-soft);
  font-size: 1.15rem; display: grid; place-items: center;
}
.rail-add:hover { border-color: var(--accent); color: #fff; }
.rail-avatar { border: none; background: var(--ink-700); color: var(--on-dark); font-weight: 600; font-family: Geist, system-ui, sans-serif; }

/* Sidebar */
.sidebar { background: var(--side-bg); color: var(--on-dark); display: flex; flex-direction: column; min-width: 0; }
.sidebar-head { padding: 1rem 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-head h1 { font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
/* Status, not decoration: the dot is what you actually read at a glance, so it
   carries the state and the text only names it. */
.agent-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .5rem; font-size: .7rem; letter-spacing: .01em; font-weight: 500;
  padding: .22rem .55rem .22rem .45rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.agent-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.agent-pill.is-bad {
  background: rgba(242, 124, 114, .13); color: var(--bad);
  border-color: rgba(242, 124, 114, .3);
}

.sidebar-scroll { overflow-y: auto; padding: .85rem .6rem 1.5rem; flex: 1; }
.side-group { margin-bottom: 1.35rem; }
.side-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem .35rem; }
.side-group-head h2 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--on-dark-soft); font-weight: 700;
}
.icon-btn {
  background: transparent; border: none; color: var(--on-dark-soft);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .3rem; border-radius: 5px;
}
.icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-list button {
  width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: .88rem;
  background: transparent; border: none; color: var(--on-dark-soft);
  padding: .34rem .45rem; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-list button:hover { background: rgba(255,255,255,.07); color: var(--on-dark); }
.side-list button.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.side-list .lead { opacity: .6; margin-right: .3rem; }

.side-empty, .side-note { font-size: .76rem; color: #6f7488; padding: .15rem .45rem; margin: .3rem 0 0; overflow-wrap: anywhere; }
.side-note.is-error { color: #f0b3ae; }
.side-note.is-good  { color: #8fd3b0; }

.side-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.side-people li { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--on-dark-soft); padding: .12rem .45rem; }
.side-people .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .32rem; border-radius: 4px; flex-shrink: 0; }
.tag-brand { background: var(--accent-wash); color: var(--accent); }
.tag-brief { background: var(--amber-wash); color: var(--amber); }

.side-invite { display: flex; gap: .35rem; margin-top: .5rem; padding: 0 .45rem; }
.side-invite input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12);
  color: var(--on-dark); font-size: .82rem; padding: .35rem .5rem; min-width: 0;
}
.side-invite input::placeholder { color: #6f7488; }
.side-full { width: calc(100% - .9rem); margin: .4rem .45rem 0; }

/* ---------------------------------------------------------------- main */

.main { display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--paper); }
.main-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface);
}
.main-head-text { min-width: 0; }
.main-head h2 { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-sub { margin: .15rem 0 0; font-size: .8rem; color: var(--text-dim); }
.main-tabs { display: flex; gap: .25rem; flex-shrink: 0; }
.tab {
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  background: transparent; border: none; color: var(--text-soft);
  padding: .38rem .7rem; border-radius: 7px;
}
.tab:hover { background: var(--paper); }
.tab.is-active { background: var(--accent-wash); color: var(--accent-deep); }

.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane-scroll { overflow-y: auto; padding: 1.5rem; display: grid; gap: 1rem; align-content: start; }

.pane-empty { display: grid; place-items: center; padding: 2rem; }
.empty-inner { max-width: 440px; text-align: center; }
.empty-inner h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.empty-inner p { color: var(--text-soft); margin: 0 0 1.5rem; }
.inline-form { display: flex; gap: .5rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.panel h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.panel h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 1.25rem 0 .5rem; }
.panel h4:first-child { margin-top: 0; }
.panel h5 { font-size: .85rem; margin: .9rem 0 .25rem; }
.panel-sub { color: var(--text-soft); margin: 0 0 1rem; line-height: 1.6; max-width: var(--measure); }
.panel textarea, .panel input { margin-bottom: .75rem; }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.count { color: var(--text-dim); font-weight: 400; }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; margin-top: .5rem; }
.kv > div { display: grid; gap: .15rem; }
.kv .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tick-list li { position: relative; padding-left: 1.1rem; font-size: .9rem; line-height: 1.5; }
.tick-list li::before { content: "—"; position: absolute; left: 0; color: var(--text-dim); }
.tick-warn li::before { content: "?"; color: var(--amber); font-weight: 700; }

.fact-list { display: grid; gap: .5rem; }
.fact { border-left: 2px solid var(--accent); padding-left: .65rem; font-size: .88rem; line-height: 1.5; }
.fact .cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); display: block; }

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.lanes p { font-size: .88rem; line-height: 1.55; color: var(--text-soft); margin: 0; }

.dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 1.4rem; text-align: center; cursor: pointer; margin-bottom: .75rem;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone-icon { font-size: 1.3rem; color: var(--text-dim); }
.dropzone-text { margin: .3rem 0 .1rem; font-weight: 600; font-size: .9rem; }
.dropzone-sub { margin: 0; font-size: .78rem; color: var(--text-dim); }
.file-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.file-list span { background: var(--accent-wash); color: var(--accent-deep); border-radius: 6px; padding: .2rem .55rem; font-size: .8rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.two-col label { display: grid; gap: .3rem; font-size: .8rem; color: var(--text-soft); }

/* ---------------------------------------------------------------- messages */

.messages { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.msg { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; }
.msg-avatar {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-family: Geist, system-ui, sans-serif; font-weight: 600; font-size: .78rem; color: #fff; background: var(--avatar-bg);
}
.msg-agent .msg-avatar { background: var(--accent); }
.msg-who { font-weight: 700; font-size: .88rem; }
.msg-who .badge { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; background: var(--accent-wash); color: var(--accent-deep); border-radius: 4px; padding: .1rem .3rem; margin-left: .35rem; }
.msg-time { font-size: .72rem; color: var(--text-dim); margin-left: .4rem; font-weight: 400; }
/* Human messages stay pre-wrap (they are typed prose); agent messages are rendered Markdown, so
   they get real block spacing and a capped measure — a reply running the full width of a 27"
   monitor is unreadable no matter how good the prose is. */
.msg-body {
  line-height: 1.62; font-size: .93rem; margin-top: .2rem;
  overflow-wrap: break-word; max-width: var(--measure);
}
.msg-user .msg-body { white-space: pre-wrap; }
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child { margin-bottom: 0; }
.msg-body p { margin: 0 0 .7em; }
.msg-body ul, .msg-body ol { margin: .5em 0 .8em; padding-left: 1.25em; }
.msg-body li { margin-bottom: .4em; padding-left: .15em; }
.msg-body li::marker { color: var(--accent); }
.msg-body h4, .msg-body h5, .msg-body h6 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 1.1em 0 .45em;
}
.msg-body strong { font-weight: 650; color: var(--text); }
.msg-body em { font-style: italic; color: var(--text-soft); }
.msg-body code {
  background: var(--raised); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: .08em .35em;
}
.msg-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.msg-body a:hover { color: var(--accent-deep); }
.msg-agent .msg-body {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .85rem 1rem; max-width: calc(var(--measure) + 2rem);
}

.msg-empty { color: var(--text-dim); text-align: center; margin: auto; max-width: 320px; font-size: .9rem; line-height: 1.6; }

.composer { border-top: 1px solid var(--line); background: var(--surface); padding: .85rem 1.5rem 1rem; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.composer-hint { font-size: .76rem; color: var(--text-dim); }
.composer-hint code { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
.composer-actions { display: flex; gap: .4rem; }

/* ---------------------------------------------------------------- busy */

.busy {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 88%, transparent);
  display: grid; place-items: center; gap: .75rem; align-content: center; z-index: 5;
}
.busy-dot { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--accent-wash); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy p { color: var(--text-soft); font-size: .9rem; margin: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .panel-row, .kv, .two-col, .lanes { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: var(--rail-w) 1fr; }
  .sidebar { position: absolute; left: var(--rail-w); top: 0; bottom: 0; width: var(--side-w); z-index: 20; box-shadow: var(--shadow); }
  .sidebar.is-collapsed { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Inline creation rows (the + affordances) — a field that appears in place of a modal. */
.inline-new { list-style: none; padding: 0 .45rem; margin-bottom: .2rem; }
.inline-new input {
  background: rgba(255,255,255,.1); border-color: var(--accent);
  color: var(--on-dark); font-size: .86rem; padding: .3rem .45rem;
}
.inline-new input::placeholder { color: #6f7488; }

/* --------------------------------------------------------------------------
   Sidebar tree: a brief owns its threads, so threads are nested under the open
   brief rather than listed as a sibling section.
   -------------------------------------------------------------------------- */

.side-tree, .side-tree ul { list-style: none; margin: 0; padding: 0; }
.side-tree > li { margin-bottom: 1px; }
.brief-row, .thread-row {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: transparent; border: none; color: var(--on-dark-soft);
  padding: .34rem .45rem; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brief-row { font-size: .88rem; font-weight: 600; }
.brief-row:hover, .thread-row:hover { background: rgba(255,255,255,.07); color: var(--on-dark); }
.brief-row.is-active { background: var(--accent-wash); color: var(--on-dark); box-shadow: inset 2px 0 0 var(--accent); }
.thread-sub { margin: .12rem 0 .4rem .55rem; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.1); }
.thread-row { font-size: .84rem; }
.thread-row::before { content: "#"; opacity: .45; margin-right: .35rem; }
.thread-row.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.thread-add { opacity: .55; font-size: .8rem; }
.thread-add::before { content: ""; margin: 0; }
.thread-add:hover { opacity: 1; }
.side-count { opacity: .55; font-size: .74rem; margin-left: .3rem; }

/* Each brand carries a stable hue, so two brands with the same initials are
   still told apart at a glance.

   Saturation is kept low deliberately. The hue is arbitrary -- derived from a
   hash of the brand id -- so at full strength the rail fills with colours that
   carry no meaning while out-shouting the accent, which does. Held down here
   these read as tinted greys: enough to distinguish, not enough to compete.
   Which brand is selected is carried by the edge bar and the lighter fill, not
   by saturation. */
.rail-brand { background: hsl(var(--brand-hue, 245) 12% 22%); }
.rail-brand:hover { background: hsl(var(--brand-hue, 245) 16% 29%); }
.rail-brand.is-active { background: hsl(var(--brand-hue, 245) 28% 42%); color: #fff; }

/* --------------------------------------------------------------------------
   Brain
   -------------------------------------------------------------------------- */

.brain-facts { display: grid; gap: 1.1rem; }
.brain-group h5 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); margin: 0 0 .45rem;
}
.brain-fact {
  border-left: 2px solid var(--accent); padding: .05rem 0 .05rem .7rem;
  margin-bottom: .45rem; font-size: .9rem; line-height: 1.55;
  display: flex; gap: .6rem; align-items: baseline; justify-content: space-between;
}
.brain-fact .conf { font-size: .7rem; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.brain-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.brain-history li {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: baseline;
  font-size: .84rem; padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.brain-history .ver { font-family: "Geist Mono", monospace; color: var(--accent-deep); font-weight: 600; }
.brain-history .when { color: var(--text-dim); font-size: .76rem; }

/* Intake: the agent finds the brand's socials itself, so this is a toggle, not a field. */
.field { display: grid; gap: .3rem; font-size: .8rem; color: var(--text-soft); margin-bottom: .85rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--text-soft); margin-bottom: 1rem; cursor: pointer; }
.check input { width: auto; margin-top: .15rem; accent-color: var(--accent); }


/* Rail bottom cluster: theme switch sits with the account button. */
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.rail-icon {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: transparent; border: none; color: var(--on-dark-soft); font-size: .95rem;
  display: grid; place-items: center;
}
.rail-icon:hover { background: rgba(255,255,255,.09); color: #fff; }

/* A tab that cannot do anything says so, rather than silently switching you elsewhere. */
.tab:disabled { opacity: .4; cursor: not-allowed; }
.tab:disabled:hover { background: transparent; }