/* IRiS design system (SPEC.md 2, redrawn in 58).

   A sidebar app, not a tab strip: conversations always present on the left, an icon
   rail for everything else, one stage on the right. Rounded surfaces, cards, real
   modals — the shape people already know from every assistant they have used.

   Every control here is still app-drawn: no native selects, spinners or validation
   bubbles anywhere in the product. That did not change, only the skin. */
:root {
  --orange: #FF7A1A;
  --orange-hi: #ff8f3d;
  --orange-dim: #b8570f;
  --orange-wash: rgba(255, 122, 26, .12);
  --orange-line: rgba(255, 122, 26, .35);

  --bg: #0c0d10;
  --surface: #131519;
  --surface-2: #1a1d23;
  --surface-3: #22262e;
  --line: #262a32;
  --line-soft: #1e222a;

  --text: #ecedef;
  --dim: #99a0ab;
  --faint: #6b727e;
  --cool: #6fb3d2;
  --err: #ff6b6b;
  --good: #4ade80;

  --sans: "Space Grotesk", "Inter", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --r-xs: 6px;
  --r-sm: 9px;
  --r: 13px;
  --r-lg: 18px;
  --r-full: 999px;

  --rail: 58px;
  --side: 266px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
/* An author `display` rule outranks the UA stylesheet's [hidden] { display: none },
   so anything given a display value silently ignores element.hidden. That is how the
   quick-command chip stayed on screen after being cleared. */
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--orange-line); color: #fff; }

/* The constellation stays, far quieter than it was: it belongs to IRiS, but it was
   drifting behind paragraphs people were trying to read. */
.backdrop {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: .26;
}

/* Scrollbars, so a dark app does not grow bright chrome down its side. */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #333944; background-clip: content-box; }

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

.shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--rail) var(--side) minmax(0, 1fr);
  height: 100dvh;
  transition: grid-template-columns .18s ease;
}
/* Collapsed, or on a view that has no list to show: the rail stays, the panel goes.
   Conversations belong to the chat, so Settings does not need a column of them. */
.shell.collapsed, .shell.no-side {
  grid-template-columns: var(--rail) 0 minmax(0, 1fr);
}
.shell.collapsed .sidebar, .shell.no-side .sidebar { display: none; }

/* -- icon rail -- */
.rail {
  grid-column: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 0; background: var(--bg);
  border-right: 1px solid var(--line-soft);
}
/* The mark is the brand, the icons below are navigation. Ten pixels read as one
   group; the gap says they are two. */
.rail-mark {
  width: 34px; height: 34px; margin-bottom: 22px; flex: none;
  filter: drop-shadow(0 0 10px rgba(255,122,26,.28));
}
.rail .tab {
  position: relative; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint); cursor: pointer; transition: color .12s, background .12s;
}
.rail .tab:hover { color: var(--text); background: var(--surface-2); }
.rail .tab[aria-selected="true"] { color: var(--orange); background: var(--orange-wash); }
.rail .tab svg { width: 19px; height: 19px; }
/* The label rides out on hover rather than living on screen: seven words stacked in a
   58px column is a ransom note. */
.rail .tab::after {
  content: attr(data-label); position: absolute; left: calc(100% + 8px);
  padding: 5px 9px; background: var(--surface-3); color: var(--text);
  border-radius: var(--r-xs); font-size: .74rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 40;
  box-shadow: var(--shadow);
}
.rail .tab:hover::after { opacity: 1; }
.rail-gap { flex: 1; }

/* -- conversation sidebar -- */
.sidebar {
  grid-column: 2; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-right: 1px solid var(--line-soft);
  overflow: hidden;
}
.side-head { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.side-search {
  width: 100%; padding: 8px 11px; background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .82rem; outline: none;
}
.side-search:focus { border-color: var(--orange-line); background: var(--bg); }
.side-search::placeholder { color: var(--faint); }
.conv-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; min-height: 0; }
.conv-group {
  padding: 12px 6px 5px; font-size: .66rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint); font-family: var(--mono);
}
.conv-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 8px; margin-bottom: 1px; border: 0; background: none;
  border-radius: var(--r-sm); color: var(--dim); cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.conv-item:hover { background: var(--surface-2); color: var(--text); }
.conv-item[aria-current="true"] { background: var(--surface-3); color: var(--text); }
/* A <button>, so it needs its chrome taken off explicitly — it used to be reset by
   an inline style, and dropping that gave every conversation a white slab. */
.conv-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .84rem;
  background: none; border: 0; padding: 0; color: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
}
.conv-pin, .conv-del, .conv-more {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--r-xs);
  color: var(--faint); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.conv-item:hover .conv-pin, .conv-item:hover .conv-del,
.conv-item:hover .conv-more, .conv-item:focus-within .conv-pin { opacity: 1; }
.conv-pin.on { opacity: 1; color: var(--orange); }
.conv-pin:hover, .conv-more:hover { background: var(--surface-3); color: var(--text); }
.conv-del:hover { background: rgba(255,107,107,.15); color: var(--err); }
.conv-item svg { width: 14px; height: 14px; }
.conv-empty, .conv-none {
  padding: 18px 10px; color: var(--faint); font-size: .82rem; text-align: center;
  line-height: 1.6;
}
.conv-rename {
  flex: 1; min-width: 0; padding: 3px 6px; background: var(--bg);
  border: 1px solid var(--orange-line); border-radius: var(--r-xs);
  font-size: .84rem; outline: none;
}
.side-foot {
  padding: 8px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 6px;
}
.side-user {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-sm); background: none; border: 0;
  color: var(--text); cursor: pointer; text-align: left;
}
.side-user:hover { background: var(--surface-2); }
.user-avatar {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-full);
  background: var(--orange-wash); color: var(--orange);
  display: grid; place-items: center; font-size: .76rem; font-weight: 600;
  text-transform: uppercase;
}
.user, .user-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-name {
  font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-role { font-size: .66rem; color: var(--faint); font-family: var(--mono); }

/* -- stage -- */
.stage { grid-column: 3; position: relative; min-width: 0; overflow: hidden; }
.view {
  display: none; position: absolute; inset: 0; overflow-y: auto;
  padding: 22px 26px 26px;
}
.view.active { display: block; }
#view-chat.active { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.view-head h2 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.view-inner { max-width: 900px; margin: 0 auto; }

/* --------------------------------------------------------------- topbar --- */

.topbar {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  background: rgba(12,13,16,.72); backdrop-filter: blur(12px);
}
.topbar h1, .wordmark {
  margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: .06em;
}
.wordmark span { color: var(--orange); }
.brand-mark { flex: none; }
.spacer { flex: 1; }
.hud {
  display: flex; align-items: center; gap: 14px; flex: none;
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}
.hud b { color: var(--dim); font-weight: 500; }
/* The status chip is the way into the unload modal, so it has to read as pressable. */
.hud-status {
  display: inline-flex; align-items: center; border: 1px solid transparent;
  background: none; padding: 3px 8px; border-radius: var(--r-full);
  font: inherit; color: inherit; cursor: pointer;
}
.hud-status:hover { background: var(--surface-2); border-color: var(--line-soft); }
.hud-status.paused { color: var(--orange); border-color: var(--line-soft); }
.hud-status.paused b { color: var(--orange); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--faint); margin-right: 5px; vertical-align: middle;
}
.dot.live { background: var(--good); box-shadow: 0 0 8px rgba(74,222,128,.55); }
.dot.down { background: var(--err); }

/* ---------------------------------------------------------------- chat --- */

.chat-main { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat-log { flex: 1; overflow-y: auto; padding: 26px 26px 8px; scroll-behavior: smooth; }

.msg { margin: 0 auto 26px; max-width: 780px; }
.msg-role {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.msg.user .msg-role { color: var(--orange); }
.msg-body { font-size: .95rem; line-height: 1.72; word-wrap: break-word; }
/* The person's own words sit in a pill; the reply runs full width, because a reply
   is the page and a question is an aside. */
.msg.user .msg-body {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 11px 15px; display: inline-block; max-width: 100%;
}
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 .85em; }
.md-head { margin: 1.4em 0 .5em; font-size: 1rem; font-weight: 600; }
.md-code {
  display: block; background: #0a0b0d; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 .9em;
  font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  overflow-x: auto; white-space: pre;
}
.msg-body code:not(.md-code) {
  background: var(--surface-2); border-radius: var(--r-xs); padding: .1em .35em;
  font-family: var(--mono); font-size: .85em;
}
.md-link { color: var(--orange); text-decoration: none; border-bottom: 1px solid var(--orange-line); }
.md-link:hover { color: var(--orange-hi); }
.msg-body ul, .msg-body ol { margin: 0 0 .85em; padding-left: 1.3em; }
.msg-body li { margin-bottom: .3em; }
.edited { font-size: .68rem; color: var(--faint); font-family: var(--mono); }

.msg-acts { display: flex; gap: 3px; margin-top: 9px; opacity: 0; transition: opacity .14s; }
.msg:hover .msg-acts, .msg-acts:focus-within { opacity: 1; }
.msg-act {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; border-radius: var(--r-xs);
  color: var(--faint); cursor: pointer; padding: 4px 7px; font-size: .72rem;
}
.msg-act:hover { background: var(--surface-2); color: var(--text); }
.msg-act svg { width: 13px; height: 13px; }
.msg-act.done { color: var(--good); }

.thinking, .searching, .hearing {
  display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: .84rem;
}
/* The read-aloud button beside a reply. It is a <button>, so it needs its chrome
   removed explicitly or it renders as a white slab next to the mark. */
.speak {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: none; border: 0; padding: 0; border-radius: var(--r-xs);
  color: var(--faint); cursor: pointer; transition: color .12s, background .12s;
}
.speak:hover { color: var(--orange); background: var(--surface-2); }
.speak.on { color: var(--orange); }
.speak svg { width: 15px; height: 15px; }
.bubble-mark { width: 26px; height: 26px; flex: none; opacity: .9; }
.msg.assistant .msg-role { display: flex; align-items: center; gap: 8px; }
.thinking::before, .searching::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--orange); animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* -- tool + agent banners -- */
.tool, .agent-card {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); margin: 0 auto 14px; overflow: hidden; max-width: 780px;
}
.tool-line {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  font-size: .8rem; color: var(--dim); cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left;
}
.tool-line:hover { background: var(--surface-2); }
.tool-tick { color: var(--orange); flex: none; display: grid; place-items: center; }
.tool-tick svg { width: 14px; height: 14px; }
.tool-name { color: var(--text); font-family: var(--mono); font-size: .76rem; }
.tool-why, .tool-count { color: var(--faint); font-size: .72rem; margin-left: auto; flex: none; }
.tool-detail { border-top: 1px solid var(--line-soft); padding: 11px 13px; font-size: .78rem; color: var(--dim); }
/* A <details>, not a div: the summary is the line you click and the body is what it
   opens. Styling it as a <pre> gave every tool banner a monospace slab and left the
   native disclosure triangle floating in the corner. */
.tool-result { margin: 0; }
.tool-result > summary {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  font-size: .8rem; color: var(--dim); cursor: pointer; list-style: none;
  border-radius: var(--r);
}
.tool-result > summary::-webkit-details-marker { display: none; }
.tool-result > summary::marker { content: ""; }
.tool-result > summary:hover { background: var(--surface-2); }
/* The app draws its own chevron, so it can rotate with the state. */
.tool-result > summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid var(--faint); transition: transform .15s;
}
.tool-result[open] > summary::before { transform: rotate(90deg); }
.tool-result > summary > span:not(.tool-tick):not(.tool-count) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text);
}
.tool-result .tool-detail {
  border-top: 1px solid var(--line-soft); max-height: 18rem; overflow-y: auto;
}
.tool-lineitem { padding: 2px 0; }
.chev-sm { transition: transform .15s; flex: none; }
.chev-sm.open { transform: rotate(90deg); }

.sources { display: flex; flex-direction: column; gap: 7px; }
.src { display: block; text-decoration: none; color: inherit; }
.src-title { color: var(--text); font-size: .8rem; }
.src-url { color: var(--orange); font-size: .7rem; font-family: var(--mono); }
.src-snip { color: var(--faint); font-size: .74rem; }

/* -- composer -- */
.composer-wrap { flex: none; padding: 0 26px 20px; position: relative; }
/* align-items:center, not flex-end: the buttons are 34px and the textarea is 38px
   with its padding, so pinning to the bottom left every icon sitting a few pixels low
   against the box they are inside. The textarea grows upward instead. */
.composer {
  max-width: 780px; margin: 0 auto; display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 6px 6px 6px 8px;
  transition: border-color .15s, box-shadow .15s;
}
.composer.tall { align-items: flex-end; }
.composer:focus-within { border-color: var(--orange-line); box-shadow: 0 0 0 3px var(--orange-wash); }
.composer.dropping { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-wash); }
#composer, .composer textarea {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  resize: none; padding: 8px 4px; max-height: 190px; line-height: 1.55; font-size: .93rem;
}
#composer::placeholder { color: var(--faint); }
#composer:disabled { color: var(--faint); cursor: not-allowed; }
/* Why the composer is dead, where it can actually be read. */
.blocked-note {
  /* Not flex: a gap between the button and the full stop after it reads as a typo. */
  margin: 0 auto 8px; max-width: 780px; width: 100%;
  padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--orange-line); color: var(--orange); font-size: .78rem;
}
.linkish {
  border: 0; background: none; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.mic, .iconbtn {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint); cursor: pointer; transition: background .12s, color .12s;
}
.mic:hover, .iconbtn:hover { background: var(--surface-2); color: var(--text); }
.mic[aria-pressed="true"], .mic.on { color: var(--orange); background: var(--orange-wash); }
.mic.busy { color: var(--orange); }
.composer .btn { flex: none; border-radius: var(--r-full); padding: 8px 16px; }
.composer-note {
  max-width: 780px; margin: 0 auto 8px; font-size: .76rem; color: var(--dim);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 7px 11px;
}
.composer-note.err { color: var(--err); border-color: rgba(255,107,107,.3); }
.chat-export {
  position: absolute; top: 12px; right: 18px; z-index: 5;
  background: var(--surface); border: 1px solid var(--line);
}

/* -- attachments -- */
#attach-bar { max-width: 780px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 5px 6px 5px 11px; font-size: .76rem;
}
.chip-name { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-kind { color: var(--orange); font-family: var(--mono); font-size: .66rem; }
.chip-size { color: var(--faint); font-size: .7rem; }
.chip-x {
  width: 19px; height: 19px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--r-full);
  color: var(--faint); cursor: pointer;
}
.chip-x:hover { background: rgba(255,107,107,.16); color: var(--err); }
.progress { height: 2px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.progress-pct { height: 100%; background: var(--orange); transition: width .18s; }
.attachment {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px; margin-bottom: 7px; font-size: .78rem; color: var(--dim);
}

/* -- timers -- */
/* Top right of the conversation, out of the reading column and stacked with the one
   about to go off at the top. In the flow it pushed the whole conversation down every
   time a timer was set, which moved the thing you were reading. */
.timer-strip {
  position: absolute; top: 10px; right: 14px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none;          /* the gap between chips is still conversation */
  max-width: min(260px, 45%);
}
.timer-chip {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 5px 6px 5px 11px; font-size: .78rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.timer-chip > svg { flex: none; color: var(--orange); }
.chip-text { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.chip-text .chip-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--faint); font-size: .72rem;
}
.timer-left {
  font-family: var(--mono); color: var(--orange); font-size: .76rem;
  white-space: nowrap;
}
.timer-chip.soon { border-color: var(--orange-line); }
.timer-chip.soon .timer-left { animation: pulse 1.4s ease-in-out infinite; }

/* -- quick commands + slash menu -- */
.cmd-chip {
  max-width: 780px; margin: 0 auto 8px; display: inline-flex; align-items: center;
  gap: 8px; background: var(--orange-wash); border: 1px solid var(--orange-line);
  border-radius: var(--r-full); padding: 4px 12px; font-size: .76rem; color: var(--orange);
}
.cmd-used { color: var(--orange); font-family: var(--mono); font-size: .7rem; }
.quick-menu, .slash-menu {
  position: absolute; bottom: calc(100% + 8px); left: 26px; right: 26px;
  max-width: 780px; margin: 0 auto; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; padding: 6px;
}
.quick-item, .slash-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--text); cursor: pointer; text-align: left; font-size: .84rem;
}
.quick-item:hover, .slash-item:hover,
.quick-item.cursor, .slash-item.cursor { background: var(--surface-2); }
.quick-item b, .slash-item b { font-weight: 500; flex: none; }
.quick-item span, .slash-item span {
  color: var(--faint); font-size: .76rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.slash-item code { font-family: var(--mono); font-size: .72rem; color: var(--orange); flex: none; }
.slash-group {
  padding: 9px 10px 4px; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}
.slash-none { padding: 14px 10px; color: var(--faint); font-size: .82rem; }
.slash-val { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: .72rem; flex: none; }

/* ---------------------------------------------------- agents in the chat --- */

.agent-card { border-color: var(--orange-line); }
.agent-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; font-size: .8rem; }
.agent-dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--orange); flex: none; }
.agent-card.running .agent-dot { animation: pulse 1.1s ease-in-out infinite; }
.agent-card.done .agent-dot { background: var(--good); }
.agent-card.failed .agent-dot, .agent-card.stopped .agent-dot { background: var(--err); }
.agent-name { color: var(--text); font-family: var(--mono); font-size: .76rem; flex: none; }
.agent-task {
  color: var(--dim); flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.agent-step { color: var(--faint); font-size: .72rem; font-family: var(--mono); flex: none; }
.agent-body { border-top: 1px solid var(--line-soft); padding: 11px 13px; font-size: .8rem; color: var(--dim); }
.agent-log { display: flex; flex-direction: column; gap: 5px; }
.agent-log-row { display: flex; gap: 9px; font-size: .76rem; }
.agent-log-at { font-family: var(--mono); font-size: .68rem; color: var(--faint); flex: none; }
.agent-out { white-space: pre-wrap; word-break: break-word; color: var(--text); font-size: .82rem; }

/* Questions are answered above the composer — the box you type in is where
   answering happens. */
.ask-panel {
  max-width: 780px; margin: 0 auto 8px; background: var(--surface);
  border: 1px solid var(--orange-line); border-radius: var(--r); padding: 14px;
}
.ask-why { font-size: .78rem; color: var(--faint); margin-bottom: 11px; }
.ask-block { margin-bottom: 13px; }
.ask-block:last-of-type { margin-bottom: 0; }
.ask-q { font-size: .88rem; margin-bottom: 8px; }
.ask-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ask-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--text); cursor: pointer;
  font-size: .83rem; transition: border-color .12s, background .12s;
}
.ask-opt:hover { border-color: var(--orange-line); background: var(--surface-3); }
.ask-opt.picked { border-color: var(--orange); background: var(--orange-wash); color: var(--orange); }
.ask-opt b { font-weight: 500; }
.ask-rec {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--orange); border: 1px solid var(--orange-line);
  border-radius: var(--r-full); padding: 1px 6px;
}
.ask-other { border-style: dashed; }
/* The free-text box only appears once "something else" is chosen: a text field beside
   every question invites typing what the buttons already say. */
.ask-own { display: none; margin-top: 8px; }
.ask-own.shown { display: block; }
.ask-actions { display: flex; gap: 8px; margin-top: 14px; }

/* --------------------------------------------------------------- cards --- */

.panel, .card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 16px; overflow: hidden;
}
.panel > h2, .card > h2 {
  margin: 0; padding: 14px 17px; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  font-family: var(--mono); border-bottom: 1px solid var(--line-soft);
}
.panel-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 17px; border-bottom: 1px solid var(--line-soft);
}
.panel-bar:last-child { border-bottom: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.desc { font-size: .78rem; color: var(--faint); line-height: 1.55; margin-bottom: .45rem; }
.desc.err { color: var(--err); }
.empty { padding: 34px 20px; text-align: center; color: var(--faint); font-size: .85rem; line-height: 1.6; }
.status { font-size: .76rem; color: var(--dim); }
.status.ok { color: var(--good); }
.status.err { color: var(--err); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--orange); color: #1a0d02; font-weight: 600; font-size: .84rem;
  cursor: pointer; transition: background .12s, opacity .12s;
}
.btn:hover { background: var(--orange-hi); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); font-weight: 500; }
.btn.secondary:hover { background: var(--surface-3); }
.btn.danger { background: var(--err); color: #2a0505; }
.btn.danger:hover { background: #ff8080; }
.ghost {
  background: none; border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--dim); cursor: pointer; padding: 4px 10px; font-size: .76rem;
  transition: color .12s, border-color .12s;
}
.ghost:hover { color: var(--orange); border-color: var(--orange-line); }
/* Some are anchors (download). They must not grow a link underline. */
a.ghost { text-decoration: none; }
.key { font-family: var(--mono); font-size: .66rem; color: var(--faint);
       border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 5px; }

/* --------------------------------------------------------------- inputs --- */

.input {
  width: 100%; padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  outline: none; font-size: .86rem; transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--orange-line); box-shadow: 0 0 0 3px var(--orange-wash); }
.input::placeholder { color: var(--faint); }
.input.multiline { resize: vertical; min-height: 5rem; line-height: 1.6; }
textarea.input { font-family: inherit; }

/* -- combobox (replaces <select>) -- */
.combo { position: relative; }
.combo-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer;
  font-size: .86rem; text-align: left;
}
.combo-btn:hover { background: var(--surface-3); }
.combo[data-open] .combo-btn { border-color: var(--orange-line); }
.combo-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev {
  width: 0; height: 0; flex: none; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid var(--faint);
  transition: transform .15s;
}
.combo[data-open] .chev { transform: rotate(180deg); }
.combo-pop {
  display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  z-index: 50; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); overflow: hidden;
}
.combo[data-open] .combo-pop { display: block; }
.combo-filter {
  width: 100%; padding: 9px 12px; background: var(--bg); border: 0;
  border-bottom: 1px solid var(--line-soft); outline: none; font-size: .82rem;
}
.combo-list { list-style: none; margin: 0; padding: 5px; max-height: 240px; overflow-y: auto; }
.combo-opt { padding: 7px 10px; border-radius: var(--r-xs); cursor: pointer; font-size: .84rem; }
.combo-opt.cursor { background: var(--surface-2); }
.combo-opt[aria-selected="true"] { color: var(--orange); }
.combo-none { padding: 12px 10px; color: var(--faint); font-size: .82rem; }
.choice-free { display: flex; flex-direction: column; gap: 6px; }

/* -- stepper (replaces the native number spinner) -- */
.stepper {
  display: inline-flex; align-items: stretch; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.stepper button { width: 32px; background: none; border: 0; color: var(--dim);
                  cursor: pointer; font-size: 1rem; line-height: 1; }
.stepper button:hover:not(:disabled) { background: var(--surface-3); color: var(--orange); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper input {
  width: 4.5rem; background: none; border: 0; outline: none; text-align: center;
  font-family: var(--mono); font-size: .84rem; padding: 8px 0;
}

/* -- toggle -- */
.toggle {
  position: relative; width: 38px; height: 21px; flex: none;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-full); cursor: pointer; transition: background .15s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: var(--r-full); background: var(--faint);
  transition: transform .15s, background .15s;
}
.toggle[aria-checked="true"] { background: var(--orange-wash); border-color: var(--orange-line); }
.toggle[aria-checked="true"]::after { transform: translateX(17px); background: var(--orange); }

/* --------------------------------------------------------------- modals --- */

.modal-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(6,7,9,.68); backdrop-filter: blur(4px); padding: 20px;
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(520px, 100%); max-height: 85dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 22px;
  animation: rise .16s cubic-bezier(.2,.8,.3,1);
}
.modal.wide { width: min(760px, 100%); }
/* ------------------------------------------------------------ the chart -- */
/* .section-body has no padding of its own — the rows inside it bring theirs. A chart
   is one block, so it brings its own or it runs off the edge of the panel, which it
   did: the legend was cut in half by the right border. */
/* .panel brings no inner padding — its children bring theirs, and a <details> has
   none, so the two folds sat against the panel border and against each other. */
/* Bare .rows, unlike .panel-bar, so they carry no padding of their own and sat
   flush against the panel border. */
#password-panel .row { padding: 12px 17px 0; }
#password-panel .row:last-child { padding-bottom: 16px; }

#activity-sections { padding: 16px 17px 6px; }
#activity-sections .section { margin-bottom: 14px; }

#perf-body { padding: 16px; }
.perf-plot { margin-bottom: 20px; }
.perf-plot-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  font-size: .82rem;
}
.perf-legend { display: flex; gap: 14px; font-size: .72rem; color: var(--faint); }
.perf-key { display: inline-flex; align-items: center; gap: 6px; }
.perf-swatch {
  width: 9px; height: 3px; border-radius: var(--r-full); display: inline-block;
}
.perf-svg {
  display: block; width: 100%; height: 132px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.perf-grid { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.perf-axis {
  display: flex; font-family: var(--mono); font-size: .68rem; color: var(--faint);
  margin: -8px 0 12px;
}
.perf-off {
  margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--orange-line); color: var(--orange); font-size: .78rem;
}

/* ---------------------------------------------------------- certificate -- */
.cert-card {
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2);
}
.cert-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.cert-tag {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--faint);
}
.cert-tag.good { color: var(--good); border-color: rgba(74,222,128,.4); }
.cert-tag.warn { color: var(--orange); border-color: var(--orange-line); }
.cert-tag.bad { color: var(--err); border-color: rgba(255,107,107,.4); }
.cert-names {
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  margin: 6px 0; word-break: break-all; line-height: 1.6;
}
.cert-choice {
  display: block; width: 100%; text-align: left; margin-top: 10px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.cert-choice:hover { border-color: var(--orange-line); background: var(--surface-3); }
.cert-choice strong { display: block; margin-bottom: 4px; font-size: .9rem; }
.cert-choice .desc { font-size: .76rem; line-height: 1.5; }
.cert-record {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 9px 10px; border-radius: var(--r-sm); background: var(--surface-2);
}
.cert-record-key {
  flex: none; width: 58px; font-size: .72rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .07em;
}
.cert-record-value {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .75rem;
  color: var(--text); word-break: break-all; user-select: all;
}
.cert-terms {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .8rem;
}
.cert-terms a { color: var(--orange); }
.cert-practice {
  margin-top: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--orange-line); color: var(--orange); font-size: .76rem;
}

.res-list { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 4px; }
.res-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 12px;
  border-radius: var(--r-sm); background: var(--surface-2);
}
.res-row.off { opacity: .62; }
.res-text { min-width: 0; }
.res-text strong { font-size: .88rem; display: block; margin-bottom: 2px; }
.res-text .desc { font-size: .74rem; line-height: 1.45; }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal h3 { margin: 0 0 9px; font-size: 1.02rem; font-weight: 600; }
.modal p { margin: 0 0 16px; color: var(--dim); font-size: .86rem; line-height: 1.6; }
.thing-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.modal .thing-actions { justify-content: flex-end; margin-top: 18px; }

/* --------------------------------------------------------------- things --- */

.thing-form { padding: 17px; }
.thing-form-title {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.thing-field { margin-bottom: 13px; }
.thing-field > label { display: block; font-size: .82rem; margin-bottom: 5px; font-weight: 500; }
.thing-head { display: flex; align-items: center; gap: 10px; }
.thing-off { opacity: .5; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 4px 0; }
.type-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.type-card:hover { border-color: var(--orange-line); background: var(--surface-3); }
.type-card strong { font-weight: 600; font-size: .88rem; }
.type-card span { color: var(--faint); font-size: .77rem; line-height: 1.5; }
.type-card.off { opacity: .62; }

/* -------------------------------------------------------------- memory --- */

/* Stacked, not side by side: these rows carry a heading, a description and a row of
   buttons, and laying those three out horizontally squeezed each into a column an
   inch wide. The parts that ARE horizontal say so themselves (.thing-head, .mem-meta). */
.mem-row, .backup-row, .log-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 17px; border-bottom: 1px solid var(--line-soft);
}
/* Inside a fold the last row already has the fold's own edge below it. */
.section-body > .mem-row:last-child { border-bottom: 0; }
.mem-row > .mem-meta { margin-top: 2px; }
.mem-row > .desc, .backup-row > .desc { margin: 0; }
.mem-row .mem-meta, .backup-row .backup-head { width: 100%; }
.mem-row:last-child, .backup-row:last-child, .log-row:last-child { border-bottom: 0; }
.mem-text { flex: 1; min-width: 0; font-size: .86rem; }
.mem-kind, .mem-score { font-family: var(--mono); font-size: .68rem; color: var(--faint); flex: none; }
.mem-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.backup-head { display: flex; align-items: center; gap: 10px; }
/* The log is genuinely two columns: when, and what. */
.log-row { flex-direction: row; align-items: flex-start; gap: 12px; }
.log-when { font-family: var(--mono); font-size: .7rem; color: var(--faint); flex: none; width: 10rem; }
.log-what { flex: 1; min-width: 0; font-size: .84rem; }
.log-detail { color: var(--faint); font-size: .77rem; }

/* ---------------------------------------------------------- transcript --- */

.transcript-wrap { padding: 13px 17px; }
.transcript-player { width: 100%; margin-bottom: 11px; }
.transcript, .transcript-lines {
  display: flex; flex-direction: column; gap: 5px; max-height: 22rem; overflow-y: auto;
}
.transcript-line { display: flex; gap: 10px; font-size: .82rem; align-items: baseline; }
.transcript-at { font-family: var(--mono); font-size: .68rem; color: var(--faint); flex: none; padding-top: .12rem; }
.transcript-who { font-family: var(--mono); font-size: .68rem; color: var(--orange); flex: none; padding-top: .12rem; }

/* ------------------------------------------------------------ customize --- */

.cz-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; }
.cz-rail { display: flex; flex-direction: column; gap: 2px; }
.cz-rail button {
  text-align: left; padding: 9px 13px; background: none; border: 0;
  border-radius: var(--r-sm); color: var(--dim); cursor: pointer; font-size: .86rem;
}
.cz-rail button:hover { background: var(--surface-2); color: var(--text); }
.cz-rail button[aria-current="true"] { background: var(--orange-wash); color: var(--orange); }
.cz-pane { min-width: 0; }
.cz-subhead {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 9px;
}
.cz-badge {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); background: var(--surface-3);
  border-radius: var(--r-xs); padding: 2px 7px; flex: none;
}
.cz-fields { padding: 4px 0; }
.cz-fields > .thing-field:last-child { margin-bottom: 0; }
.cz-group {
  padding: 14px 17px 6px; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}
.cz-count .desc { margin: 0; white-space: nowrap; }
.cz-days { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-day {
  padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--dim); cursor: pointer; font-size: .78rem;
}
.cz-day.on { background: var(--orange-wash); border-color: var(--orange-line); color: var(--orange); }
.cz-schedule { display: flex; flex-direction: column; gap: 10px; }
.cz-explain { font-size: .78rem; color: var(--faint); padding: 14px 17px 0;
              line-height: 1.6; max-width: 74ch; }

.cz-widget-list { display: flex; flex-direction: column; gap: 7px; }
.cz-widget { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cz-widget.dragging { opacity: .45; border-color: var(--orange-line); }
.cz-widget.over { border-color: var(--orange); }
.cz-widget-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.cz-widget-name { flex: 1; min-width: 0; font-size: .86rem; }
.cz-grip { color: var(--faint); cursor: grab; flex: none; font-size: .9rem; }
.cz-widget-body { border-top: 1px solid var(--line-soft); padding: 12px; }
.cz-tool-name { background: none; border: 0; color: var(--text); font: inherit;
                cursor: pointer; text-align: left; padding: 0; }
.cz-tool-name:hover { color: var(--orange); }
.cz-tool-body { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 12px; }

.cz-fact { display: flex; gap: 13px; padding: 9px 17px; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.cz-fact:last-child { border-bottom: 0; }
.cz-fact-key {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); flex: none; width: 11rem; padding-top: .15rem;
}
.cz-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 9px 0; }
.cz-diff-side { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-sm); padding: 10px; }
.cz-diff-side.after { border-color: var(--orange-line); }
.cz-diff-side .cz-subhead { margin: 0 0 6px; }
.cz-diff pre {
  margin: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 14rem; overflow-y: auto; color: var(--text);
}

/* -- suggested automations -- */
/* It sits inside a panel that already has gutters, so it takes the panel's padding
   rather than inventing a second inset. */
.cz-suggest {
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
  padding: 14px 17px; margin: 0;
}
.cz-suggest .cz-subhead { margin-bottom: 4px; }
.cz-suggest .panel-bar { padding: 12px 0 0; border: 0; }
.cz-suggest-row { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.cz-suggest-row input { margin-top: .25rem; accent-color: var(--orange); flex: none; }
.cz-suggest-row .desc { margin: .12rem 0 0; }
.cz-blocked { display: block; color: var(--err); font-size: .75rem; margin-top: .4rem; }
.thing-form > .cz-blocked {
  border: 1px solid rgba(255,107,107,.35); background: rgba(255,107,107,.07);
  border-radius: var(--r-xs); padding: 8px 11px; margin: 0 0 13px;
}

/* -- wildcards -- */
.cz-wild-chip {
  background: none; border: 1px solid var(--line); color: var(--faint);
  font: inherit; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; padding: 1px 7px; margin-left: 8px; vertical-align: middle;
  border-radius: var(--r-full);
}
.cz-wild-chip:hover, .cz-wild-chip.on { color: var(--orange); border-color: var(--orange-line); }
.cz-wild { border: 1px solid var(--line); background: var(--bg); margin-top: 7px;
           border-radius: var(--r-sm); overflow: hidden; }
.cz-wild-row {
  display: flex; gap: 12px; align-items: baseline; padding: 6px 11px;
  border-bottom: 1px solid var(--line-soft); font-size: .77rem;
}
.cz-wild-row:last-child { border-bottom: 0; }
.cz-wild-row code { font-family: var(--mono); color: var(--orange); flex: none; min-width: 6.5rem; }
.cz-wild-row span { color: var(--faint); }
.cz-wild-note { margin: .35rem 0 0; color: var(--cool); font-size: .73rem; }

/* --------------------------------------------------------------- misc --- */

.cam-shot { max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); }
.cam-desc { font-size: .85rem; }
.cam-url { font-family: var(--mono); font-size: .72rem; color: var(--faint); word-break: break-all; }
.boot-error {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: var(--bg);
  text-align: center; padding: 30px;
}
.boot-error h2 { margin: 0; font-size: 1.08rem; }
.boot-error p { margin: 0; max-width: 34rem; color: var(--dim); font-size: .87rem; line-height: 1.65; }

/* ---------------------------------------------------------------- login --- */

.login-wrap { display: grid; place-items: center; height: 100dvh; padding: 20px; }
.login-card {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 30px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.brand img { width: 38px; height: 38px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; margin-bottom: 5px; }
.hint { font-size: .74rem; color: var(--faint); margin-top: 4px; }
.hint.err { color: var(--err); }
.note { font-size: .8rem; color: var(--dim); margin-top: 14px; line-height: 1.6; }
.formmsg { font-size: .82rem; margin-bottom: 12px; }
.formmsg.err { color: var(--err); }
.hidden { display: none !important; }

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

@media (max-width: 940px) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: var(--rail); width: var(--side);
    z-index: 60; transform: translateX(-105%); transition: transform .2s;
    box-shadow: var(--shadow-lg);
  }
  .shell.side-open .sidebar { transform: none; }
  .stage { grid-column: 2; }
  .cz-shell { grid-template-columns: 1fr; }
  .cz-rail { flex-direction: row; overflow-x: auto; gap: 4px; }
  .cz-rail button { white-space: nowrap; }
}
/* Behind the drawer, so tapping the page closes it. */
.scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(6,7,9,.55);
  backdrop-filter: blur(2px);
}
@media (min-width: 941px) { .scrim { display: none !important; } }

@media (max-width: 720px) {
  .view { padding: 16px 14px; }
  .chat-log { padding: 18px 14px 8px; }
  .composer-wrap { padding: 0 14px 14px; }
  .quick-menu, .slash-menu { left: 14px; right: 14px; }
  .timer-strip { top: 8px; right: 10px; max-width: 60%; }
  .cz-diff { grid-template-columns: 1fr; }
  .cz-fact { flex-direction: column; gap: .18rem; }
  .cz-fact-key { width: auto; }
  .cz-wild-row { flex-direction: column; gap: .12rem; }
  .log-when { width: auto; }
  .log-row, .mem-row { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .chat-log { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- welcome --- */
/* An empty chat used to be a black rectangle. */
.welcome {
  max-width: 620px; margin: 0 auto; padding: 12vh 0 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.welcome-mark { opacity: .95; filter: drop-shadow(0 0 22px rgba(255,122,26,.3)); }
.welcome h2 { margin: 14px 0 6px; font-size: 1.3rem; letter-spacing: .04em; }
.welcome p { margin: 0 0 22px; color: var(--dim); font-size: .88rem; max-width: 34rem; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.welcome-chip {
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--dim); cursor: pointer; font-size: .82rem;
  transition: border-color .12s, color .12s;
}
.welcome-chip:hover { border-color: var(--orange-line); color: var(--text); }

/* The HUD is diagnostics. It gives up its detail before the title gives up room. */
@media (max-width: 1180px) { .hud span:nth-child(3) { display: none; } }
@media (max-width: 1040px) { .hud span:nth-child(4) { display: none; } }
@media (max-width: 900px)  { .hud span:nth-child(2) { display: none; } }

/* ------------------------------------------------- icons on every action -- */
/* Buttons carry an icon and a word. The icon is what you find; the word is what
   confirms you found the right one. */
.ghost, .msg-act, .btn { display: inline-flex; align-items: center; gap: 6px; }
.ghost svg, .msg-act svg { flex: none; opacity: .85; }
.ghost:hover svg, .msg-act:hover svg { opacity: 1; }
.ghost.icon-only { padding: 5px 7px; }

/* -- devices and integrations -- */
.thing-row .thing-head { gap: 11px; }
.thing-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--orange-wash); color: var(--orange);
}
.thing-name { font-size: .9rem; font-weight: 500; }
.thing-row .desc { margin: 0; }
.thing-off {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--err); flex: none;
}

/* -- backups: a list, not a three-column table with tiny headings -- */
.backup-row { flex-direction: row; align-items: center; gap: 12px; }
.backup-text { flex: 1; min-width: 0; }
.backup-name { font-family: var(--mono); font-size: .8rem; }
.backup-text .desc { margin: 2px 0 0; }

/* -- the thinking menu in the composer -- */
.mode-menu { max-height: 420px; }
.mode-item { position: relative; flex-wrap: wrap; }
.mode-item.on { color: var(--orange); }
.mode-item.on b::after { content: " ·"; }
/* The icon draws its own circle, so the button must not draw a second one round it. */
.mode-info {
  margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); background: none;
  color: var(--faint); cursor: pointer; flex: none;
}
.mode-info:hover { background: var(--surface-3); }
.mode-info:hover { color: var(--orange); }
.mode-said {
  flex-basis: 100%; margin-top: 6px; color: var(--faint); font-size: .76rem;
  line-height: 1.55; white-space: normal;
}

/* ------------------------------------------------------------- settings --- */
/* One row per setting: what it is on the left, the control on the right. Everything
   used to be siblings in one wrapping flex row, so the title, the explanation, the
   control and the raw key all fought for the same line across the whole screen. */
.setting {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 24px; align-items: start;
  padding: 14px 17px; border-bottom: 1px solid var(--line-soft);
}
.setting:last-child { border-bottom: 0; }
.setting-text { min-width: 0; }
.setting-text > label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: 3px; }
.setting-text .desc { margin: 0 0 5px; }
.setting-control { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.setting-control > .toggle, .setting-control > .stepper { align-self: flex-start; }
.setting-control .status:empty { display: none; }
/* The raw key is for looking something up, not for reading. No border, no box. */
.setting-text > .key {
  display: inline-block; font-family: var(--mono); font-size: .64rem;
  color: var(--faint); opacity: .5; border: 0; padding: 0; background: none;
}
.setting:hover .setting-text > .key { opacity: 1; }
.panel-note { padding: 12px 17px 0; color: var(--faint); font-size: .78rem; line-height: 1.55; }

@media (max-width: 820px) {
  .setting { grid-template-columns: 1fr; gap: 9px; }
}

/* ------------------------------------------------------------- sections -- */
/* A foldable heading. <details>, so the keyboard and screen readers get it free. */
.section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 12px; overflow: hidden;
}
.section-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  cursor: pointer; list-style: none; user-select: none;
}
.section-head::-webkit-details-marker { display: none; }
.section-head::marker { content: ""; }
.section-head:hover { background: var(--surface-2); }
.section-chev {
  flex: none; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 6px solid var(--faint); transition: transform .16s;
}
.section[open] > .section-head .section-chev { transform: rotate(90deg); }
.section-title {
  font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  font-family: var(--mono); color: var(--dim);
}
.section[open] > .section-head .section-title { color: var(--text); }
.section-note {
  margin-left: auto; color: var(--faint); font-size: .74rem; flex: none;
}
.section-body { border-top: 1px solid var(--line-soft); }
/* A description belongs inside the fold, not wedged under the heading. */
.section-body > .panel-note:first-child { padding: 13px 16px 0; }

/* -- the account, on the rail -- */
.rail-user { position: relative; margin-bottom: 4px; }
.rail-user .user-avatar { width: 32px; height: 32px; border: 0; cursor: pointer; font-size: .8rem; }
.rail-user .user-avatar:hover { filter: brightness(1.25); }
.user-menu {
  position: absolute; bottom: 0; left: calc(100% + 8px); z-index: 70; width: 210px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px;
}
.user-menu-head {
  padding: 9px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px;
  display: flex; flex-direction: column; gap: 1px;
}

/* A control too big for the right-hand column — a long prompt, a list — takes the
   full width underneath its own heading instead of being squeezed into 300px. */
.setting.stacked { grid-template-columns: 1fr; gap: 9px; }
.setting.stacked .setting-control { max-width: none; }
.setting.stacked textarea.input { min-height: 22rem; }

/* A name is a name: it does not wrap in a row that has room to spare. */
.thing-head > strong { flex: none; white-space: nowrap; font-size: .92rem; }
.thing-head { flex-wrap: wrap; row-gap: 4px; }
.thing-head .mem-meta { flex: none; }
/* On/off is state, not an action, so it sits apart from the buttons and last. */
.mem-row > .mem-meta { align-items: center; width: 100%; }
.mem-row > .mem-meta > .spacer { flex: 1; }
.cz-when { color: var(--dim); font-size: .84rem; flex: none; }
.cz-when::before { content: "·"; margin-right: .5rem; color: var(--faint); }

/* The detail belongs under what it describes, not flung to the far edge. */
.log-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.log-what { font-size: .86rem; }
.log-detail { color: var(--faint); font-size: .77rem; word-break: break-word; }

/* A value the modal exists to hand over — a key, an address. Selectable, wrapping. */
.modal-code {
  font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; margin: 0 0 16px; word-break: break-all; user-select: all;
  color: var(--orange);
}


/* ------------------------------------------------------------- on a phone -- */
/* Verified by reading, not by resizing: this desktop's window manager refuses a
   programmatic resize, so the layout below is written from the breakpoints rather
   than driven. Worth checking on a real handset. */
@media (max-width: 560px) {
  :root { --rail: 52px; --side: min(84vw, 300px); }

  /* iOS inflates text in landscape unless told not to. */
  html { -webkit-text-size-adjust: 100%; }

  /* Notches and home indicators. */
  .rail { padding-top: max(10px, env(safe-area-inset-top)); }
  .composer-wrap { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }

  /* Touch targets: 40px is a comfortable mouse target and a small thumb one. */
  .rail .tab { width: 44px; height: 44px; }
  .mic, .iconbtn { width: 40px; height: 40px; }
  .ghost { padding: 7px 11px; }
  .conv-pin, .conv-del, .conv-more { width: 32px; height: 32px; opacity: 1; }

  /* A hover label cannot be reached by a finger, and it covers what it describes. */
  .rail .tab::after { display: none; }

  /* Six controls, a text box and a Send button do not fit across a phone. The
     attachment and voice controls wrap onto their own line above the field. */
  .composer { flex-wrap: wrap; padding: 8px; gap: 6px; }
  .composer #composer { order: -1; flex-basis: 100%; padding: 6px 4px; }
  .composer .btn { margin-left: auto; }

  .welcome { padding-top: 8vh; }
  .welcome-chips { flex-direction: column; align-items: stretch; }
  .welcome-chip { text-align: center; }

  .msg.user .msg-body { max-width: 100%; }
  .view-head h2 { font-size: 1rem; }
  .topbar { padding: 8px 12px; }
  /* The diagnostics are not what a phone is for, but the switch that frees the
     graphics card is exactly the thing you reach for away from the desk. */
  .hud span:not(.dot) { display: none; }
  .hud { gap: 0; }

  .modal { padding: 18px; border-radius: var(--r); }
  .modal-back { padding: 12px; align-items: flex-end; }
  .thing-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal .thing-actions .btn { width: 100%; justify-content: center; }

  .setting { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: 1fr; }
  .cz-suggest, .section-head, .mem-row, .setting, .panel-bar { padding-inline: 14px; }
  .ask-opts { flex-direction: column; align-items: stretch; }
  .ask-opt { justify-content: space-between; }
  .timer-chip, .chip { max-width: 100%; }
  .chip-name { max-width: 9rem; }
}

/* Tall, narrow, and hovering is not a thing that happens. */
@media (hover: none) {
  .msg-acts { opacity: 1; }
  .conv-pin, .conv-del, .conv-more { opacity: 1; }
}

/* ------------------------------------------------------------- projects -- */
/* Folders with standing instructions. The list shows one project's conversations or
   the loose ones, never a mix. */
.project-bar { padding: 0 8px 6px; border-bottom: 1px solid var(--line-soft); }
/* A project row IS a conversation row — .conv-item does the layout, the pen and the
   bin. All this adds is the folder in front of the name. */
.project-item .conv-title { display: flex; align-items: center; gap: 8px; }
.project-item .conv-title span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-item svg { flex: none; color: var(--orange); }
.project-back {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px;
  border: 0; background: none; border-radius: var(--r-sm); color: var(--faint);
  cursor: pointer; font-size: .78rem; text-align: left;
}
.project-back:hover { background: var(--surface-2); color: var(--text); }
.project-back svg { transform: rotate(-90deg); flex: none; }
.project-open {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px;
}
.project-open strong { font-size: .92rem; }
.project-note {
  padding: 0 8px 6px; color: var(--faint); font-size: .72rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}