/* OS/A Relay — Slack-like user interface, OS/A dark theme.
   Palette from interface/public/css/shell.css :root. Body text uses the
   sans stack OS/A app surfaces use (interface/public/app.html); mono is
   reserved for code, labels, and timestamps. */

:root {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-message: #1c2128;
  --bg-user: #1a3a5c;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #5e6675;
  --accent: #58a6ff;
  --primary: #58a6ff;
  --destructive: #f85149;
  --border: #30363d;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font: var(--font-ui);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;
  --font-size: 14px;
  --sidebar-width: 280px;
  --status-idle: #3fb950;
  --status-busy: #d29922;
  --scrollbar-size: 9px;
  --scrollbar-thumb: rgba(230, 237, 243, 0.14);
  --scrollbar-thumb-hover: rgba(230, 237, 243, 0.30);
}

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

/* ══ Scrollbars ══
   Thin and quiet everywhere: message list, code blocks, modals, editors.
   The default OS bars are chunky and light, which reads as a seam through
   a dark interface. Firefox uses the standard properties; WebKit needs the
   pseudo-elements. Both are declared so the two engines match. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  /* Inset the thumb so it floats rather than filling the gutter edge-to-edge */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
/* Nothing useful lives in the arrow buttons — they only add visual noise */
*::-webkit-scrollbar-button { display: none; }

/* Chrome paints a diagonal-hatch grabber in the corner of any resizable
   textarea. It ignores the theme and reads as a scuff on a dark panel.
   Blank it: the corner is still draggable, it just stops shouting. */
textarea::-webkit-resizer {
  background: transparent;
  border-color: transparent;
}

html, body { height: 100%; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  height: 100vh;
}

button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* ══ Sidebar ══ */

#sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 16px 14px;
}

.ws-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.ws-user {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.side-search { padding: 0 12px 18px; }
.side-search input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
}
.side-search input::placeholder { color: var(--text-muted); }
.side-search input:focus { outline: none; border-color: var(--accent); }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 4px 0 16px; }

.side-section { margin-bottom: 26px; }

.side-heading {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px 3px 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.side-heading-label { flex: 1; cursor: pointer; padding: 3px 4px; border-radius: 4px; }
.side-heading-label:hover { color: var(--text-primary); }

.side-caret {
  color: var(--text-muted);
  font-size: 10px;
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
}
.side-caret:hover { background: var(--bg-message); color: var(--text-primary); }
.side-caret.closed { transform: rotate(-90deg); }

.side-add {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  width: 20px; height: 20px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.side-add:hover { color: var(--text-primary); background: var(--bg-message); }

.side-subheading {
  padding: 12px 16px 6px 24px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.side-subheading:hover { color: var(--text-secondary); }
.side-subheading .chev { display: inline-block; transition: transform 0.1s; }
.side-subheading.open .chev { transform: rotate(90deg); }

.side-list { list-style: none; padding: 0 8px; }
.side-list.collapsed { display: none; }

.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 16px;
  margin-bottom: 2px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 20px;
}
.side-item:hover { background: var(--bg-message); color: var(--text-primary); }
.side-item.active { background: var(--bg-user); color: var(--text-primary); }
.side-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-item.has-unread .label { color: var(--text-primary); font-weight: 600; }
.side-item .hash { color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; }

/* A row that is hidden from the sidebar and only on screen because it
   matched a search. Dimmed, tagged, and still fully usable — clicking it
   opens the conversation, right-clicking offers "Show in sidebar". */
.side-item.is-hidden .label,
.side-item.is-hidden .hash { opacity: 0.5; }
.side-item.is-hidden .mini-avatar { opacity: 0.45; }
.side-item .hidden-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
}

/* Where an agent came from. Same shape as .hidden-tag so the two read as one
   family; only Local is tinted, because it is the one whose deletion is final
   and the only one you are responsible for. */
.origin-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
}

.origin-tag.origin-local {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.side-item.active .hash { color: var(--text-secondary); }

.side-item .unread {
  background: var(--accent);
  color: var(--bg-primary);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 7px;
}

.side-item.inactive-agent { opacity: 0.45; }

/* Sidebar mini avatar with presence dot overlay */
.avatar-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.mini-avatar {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.presence {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg-secondary);
}
.side-item.active .presence { border-color: var(--bg-user); }
.side-item:hover .presence { border-color: var(--bg-message); }
.presence.idle { background: var(--status-idle); }
.presence.busy { background: var(--status-busy); animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .presence.busy, .dot.busy { animation: none; }
}

/* Generic dots (member chips, pickers) */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.dot.idle { background: var(--status-idle); }
.dot.busy { background: var(--status-busy); animation: pulse 1.2s ease-in-out infinite; }

/* Star controls */
.row-star {
  color: var(--text-muted);
  font-size: 13px;
  width: 20px; height: 20px;
  border-radius: 4px;
  /* Always laid out, only its paint is toggled — `display: none` here would
     reflow the row on hover and shove the unread badge sideways. */
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.side-item:hover .row-star { visibility: visible; }
.row-star:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.row-star.starred { visibility: visible; color: #e3b341; }

.star-btn {
  color: var(--text-secondary);
  font-size: 16px;
  width: 26px; height: 26px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.star-btn:hover { color: var(--text-primary); background: var(--bg-message); }
.star-btn.starred { color: #e3b341; }

.side-footer {
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* ══ Main pane ══ */

/* `position: relative` so the first screen can sit over this pane rather than
   over the whole viewport, which would cover the sidebar too. */
#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

#pane-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}

.pane-title { font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.pane-title .desc { color: var(--text-muted); font-weight: 400; font-size: 12.5px; margin-left: 10px; }

.pane-members { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.icon-btn { color: var(--text-secondary); padding: 4px 8px; border-radius: 5px; font-size: 15px; }
.icon-btn:hover { color: var(--text-primary); background: var(--bg-message); }

/* ══ Messages ══ */

#messages { flex: 1; overflow-y: auto; padding: 14px 0 4px; }

.msg {
  display: flex;
  gap: 10px;
  padding: 3px 20px 3px 20px;
  margin-top: 10px;
  position: relative;
}
.msg:hover { background: rgba(255, 255, 255, 0.025); }

.msg-actions {
  position: absolute;
  top: -8px; right: 20px;
  display: none;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.msg:hover .msg-actions { display: flex; }
.msg-action {
  color: var(--text-secondary);
  width: 24px; height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-action:hover { color: var(--text-primary); background: var(--bg-message); }

/* Transit trace — the message's stamped path through OS/A */
.transit-panel {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
.transit-hop { display: flex; gap: 10px; padding: 1px 0; align-items: baseline; }
.transit-ts { min-width: 64px; text-align: right; color: var(--text-secondary); opacity: 0.7; }
.transit-dir { min-width: 40px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.transit-dir-origin { color: #7aa2f7; }
.transit-dir-tx { color: #9ece6a; }
.transit-dir-rx { color: #e0af68; }
.transit-dir-via { color: #bb9af7; }
.transit-uri { color: var(--text-primary); }
.transit-via { opacity: 0.6; }
.transit-sub { margin: 3px 0 3px 14px; padding-left: 10px; border-left: 2px solid var(--border); }
.transit-sub-label { color: var(--text-secondary); padding: 2px 0; font-style: italic; }
.transit-anomaly .transit-uri { color: #f7768e; }
.transit-warning { color: #f7768e; padding-bottom: 5px; }

/* Consecutive messages from the same author collapse into a group */
.msg.grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }

.msg .avatar {
  width: 36px; height: 36px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  user-select: none;
}

/* Grouped rows: hover-revealed timestamp sits in the avatar gutter */
.msg .gutter-ts {
  width: 36px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  padding-top: 4px;
  padding-right: 2px;
  visibility: hidden;
}
.msg.grouped:hover .gutter-ts { visibility: visible; }

.msg .body { min-width: 0; flex: 1; }

.msg .meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.msg .author { font-weight: 700; font-size: 14.5px; color: var(--text-primary); }
.msg.system-msg .author { color: var(--destructive); }
.msg .ts { color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; }

.msg .text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.msg .text p { margin: 2px 0; }
.msg .text p:first-child { margin-top: 0; }
.msg .text pre {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 6px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.msg .text code {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #ff9bce;
}
.msg .text pre code { background: none; border: none; padding: 0; color: inherit; }
.msg .text ul, .msg .text ol { margin: 3px 0 3px 22px; }
.msg .text li { margin: 1px 0; }
.msg .text a { color: var(--accent); text-decoration: none; }
.msg .text a:hover { text-decoration: underline; }
.msg .text strong { font-weight: 700; }
.msg .text blockquote {
  border-left: 3px solid var(--border);
  padding: 2px 0 2px 10px;
  margin: 4px 0;
  color: var(--text-secondary);
}
.msg .text h1, .msg .text h2, .msg .text h3, .msg .text h4 {
  margin: 12px 0 4px;
  line-height: 1.3;
  font-weight: 700;
}
.msg .text h1:first-child, .msg .text h2:first-child, .msg .text h3:first-child { margin-top: 4px; }
.msg .text h1 { font-size: 18px; }
.msg .text h2 { font-size: 16px; }
.msg .text h3 { font-size: 14.5px; }
.msg .text h4 { font-size: 14px; color: var(--text-secondary); }
.msg .text hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.msg .text table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.msg .text th, .msg .text td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: left;
}
.msg .text th { background: var(--bg-secondary); font-weight: 700; }
.msg.system-msg .text { color: var(--text-secondary); font-style: italic; }

/* Slack-style centred day pill */
.day-divider {
  display: flex;
  align-items: center;
  margin: 16px 20px 6px;
  color: var(--text-secondary);
}
.day-divider::before, .day-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.day-divider .day-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 12px;
  margin: 0 8px;
}

.empty-pane {
  color: var(--text-muted);
  text-align: center;
  padding: 60px 20px;
  line-height: 1.8;
}

/* ══ Live activity rows ══ */

#activity-rows { padding: 0 20px 0 66px; }

.activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 0;
}
.activity-row .dot { width: 6px; height: 6px; }
.activity-row .who { color: var(--accent); font-weight: 700; }
.activity-row .doing { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row .ellipsis::after {
  content: '…';
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

/* ══ Ask-user prompt ══ */

.ask-user {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-message);
  padding: 12px 14px;
  margin: 8px 20px;
}
.ask-user .question { margin-bottom: 10px; }
/* Keep the agent's own line breaks. It writes a list; without this the browser
   renders it as one paragraph and the structure is lost. */
.ask-user .question-body { white-space: pre-wrap; }
.ask-user .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-user input[type=text] {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit; font-size: inherit;
  padding: 7px 10px;
  margin-bottom: 8px;
}
.ask-user.answered { opacity: 0.55; border-color: var(--border); }

/* ══ Composer ══ */

#composer { padding: 4px 20px 18px; }

#composer-box {
  position: relative;   /* anchors the slash palette above the box */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-message);
  transition: border-color 0.12s;
}
#composer-box:focus-within { border-color: var(--text-secondary); }

.fmt-btn {
  color: var(--text-secondary);
  font-size: 12px;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fmt-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.fmt-btn strong, .fmt-btn em, .fmt-btn s { font-size: 12.5px; }

#composer-input {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 12px 4px;
  resize: none;
  max-height: 180px;
}
#composer-input:focus { outline: none; }
#composer-input::placeholder { color: var(--text-muted); }

#composer-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 6px;
}

.composer-hint {
  flex: 1;
  color: var(--text-muted);
  font-size: 10.5px;
  text-align: right;
  user-select: none;
}
.composer-hint strong { color: var(--text-secondary); font-weight: 600; }

#send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 26px;
  border-radius: 6px;
  background: var(--accent);
  color: #0b1524;
}
#send-btn:hover { filter: brightness(1.12); }
#send-btn.inactive { background: transparent; color: var(--text-muted); }
#send-btn.inactive:hover { background: rgba(255, 255, 255, 0.06); filter: none; }

/* ══ Buttons ══ */

.btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  background: var(--bg-message);
  font-size: 13px;
  /* Anchors do not inherit these the way buttons do, and an <a class="btn">
     was rendering as a blue underlined link. */
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.07); }
.btn.primary:hover { background: var(--bg-user); filter: brightness(1.18); }
.btn.primary { background: var(--bg-user); }
.btn.primary:disabled { opacity: 0.4; cursor: default; border-color: var(--border); }
.btn.danger { color: var(--destructive); }
.btn.danger:hover { border-color: var(--destructive); }
.btn.small { padding: 3px 10px; font-size: 12px; }

/* ══ Modals ══ */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}

.modal {
  position: fixed;
  top: 10vh; left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  max-height: 76vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 15px; }

.modal-body { padding: 14px 18px 18px; overflow-y: auto; }

.modal-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  margin: 12px 0 8px;
}
.modal-section-label:first-child { margin-top: 0; }

.agent-rows { list-style: none; }
.agent-rows li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}
.agent-rows li:last-child { border-bottom: none; }
.agent-rows .info { flex: 1; min-width: 0; }
.agent-rows .name { font-weight: 700; font-size: 13px; }
.agent-rows .sub { color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-rows .tag { color: var(--text-muted); font-size: 11px; }
.muted-row { color: var(--text-muted); padding: 8px 6px; }

.field-label { display: block; font-size: 12px; color: var(--text-secondary); margin: 12px 0 6px; }

.channel-name-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
}
.channel-name-row .hash { color: var(--text-muted); font-family: var(--font-mono); }
.channel-name-row input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--text-primary);
  font-family: inherit; font-size: inherit;
  padding: 8px 0;
}
.channel-name-row:focus-within { border-color: var(--accent); }

.member-picker { list-style: none; max-height: 34vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.member-picker li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; }
.member-picker li:hover { background: var(--bg-message); }
.member-picker input[type=checkbox] { accent-color: var(--accent); }
.member-picker .member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Catalog entries sit below a divider: still one list, because they are all
   things this channel can contain, but visibly not yet in the workspace. */
.member-picker .member-group {
  padding: 9px 12px 5px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); cursor: default;
  border-top: 1px solid var(--border);
}
.member-picker .member-group:hover { background: none; }
.member-picker li.from-catalog .member-name { color: var(--text-secondary); }
.member-picker .dot.new { background: none; border: 1px dashed var(--text-muted); }
.member-picker .member-note {
  font-size: 10px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

.modal-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; }

.relay-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  cursor: pointer;
  font-size: 13px;
}
.relay-toggle input { accent-color: var(--accent); margin-top: 3px; }
.relay-hint { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* Help */
.help-btn {
  font-weight: 700;
  font-size: 13px;
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); background: none; }


/* ══ Toasts / banner ══ */

#toasts {
  position: fixed;
  right: 18px;
  /* Clear of the composer. At a flat 18px a toast landed on top of the send
     button and the "Enter to send" hint — dark text over dark text, on the
     control you had just used. The composer grows as you type, so its real
     height is measured rather than guessed. */
  bottom: calc(var(--composer-height, 94px) + 18px);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 60;
}

.toast {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 360px;
  font-size: 13px;
  animation: toast-in 0.15s ease-out;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.toast.error { border-left-color: var(--destructive); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#reconnect-banner {
  position: fixed;
  top: 0; left: var(--sidebar-width); right: 0;
  background: var(--destructive);
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 4px;
  z-index: 30;
}

/* Focus visibility.
   Buttons and rows get a ring. Text inputs do NOT: they either sit inside a
   container that shows focus on its border, or change their own border. A
   ring on top of that reads as a stray blue box. */
button:focus-visible, .side-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible {
  outline: none;
}
input[type=checkbox]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ══ Responsive ══ */

@media (max-width: 720px) {
  #app { grid-template-columns: 220px 1fr; }
  :root { --sidebar-width: 220px; }
  .pane-members { display: none; }
}

/* ══ Pane tabs (Messages | Files) ══ */

#pane-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pane-tab {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pane-tab:hover { color: var(--text-primary); }
.pane-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

.tab-count {
  display: inline-block;
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  padding: 0 6px;
  margin-left: 4px;
  color: var(--text-secondary);
}
.tab-count:empty { display: none; }

/* ══ Files view ══ */

#files-view {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
  min-height: 0;
}
#files-view.dropping { outline: 2px dashed var(--accent); outline-offset: -8px; }

.files-toolbar, .topics-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.files-toolbar input, .topics-toolbar input {
  flex: 1;
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
}
.files-toolbar input:focus, .topics-toolbar input:focus { outline: none; border-color: var(--accent); }

.files-list { list-style: none; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--bg-message); }

.file-badge {
  width: 34px; height: 34px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}

.file-info { flex: 1; min-width: 0; }
.file-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }

.file-act {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
}
.file-row:hover .file-act { opacity: 1; }
.file-act:hover { color: var(--text-primary); border-color: var(--border); background: var(--bg-primary); }

.files-empty { color: var(--text-muted); padding: 28px 12px; text-align: center; line-height: 1.7; }

/* ══ Topics view ══
   The management view of a conversation's topics: folders as bordered
   groups, unfiled topics as rows below them. Opening a topic goes back to
   Messages, so nothing here needs to look like a conversation. */

#topics-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 20px 20px;
  min-height: 0;
}

.topics-toolbar select {
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
}
.topics-toolbar select:focus { outline: none; border-color: var(--accent); }

.topics-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.topics-list.drop-target-root {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* The unfolded transcript — a collapsible panel attached under its row */
.topic-preview {
  max-height: 48vh;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--bg-primary);
}
.topics-list > .topic-preview {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-bottom: 6px;
}
.topics-list > .topic-row.expanded {
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}
.folder-topics .topic-preview { border-top: 1px solid var(--border); }

.tp-msg { margin-bottom: 14px; }
.tp-msg-head { color: var(--text-muted); font-size: 11.5px; margin-bottom: 3px; }
.tp-msg-who { color: var(--text-secondary); font-weight: 600; }
.tp-msg-text { font-size: 13px; line-height: 1.55; overflow-wrap: break-word; }
.tp-msg-text p { margin: 0 0 6px; }
.tp-msg-text pre {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  font-size: 12px;
}
.tp-msg-text table { border-collapse: collapse; margin: 6px 0; }
.tp-msg-text th, .tp-msg-text td { border: 1px solid var(--border); padding: 3px 8px; font-size: 12.5px; }

.folder-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-message);
  cursor: pointer;
  user-select: none;
}
.folder-head .folder-caret {
  flex: none;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.12s ease;
}
.folder-head.open .folder-caret { transform: rotate(90deg); }
.folder-head .folder-name { font-weight: 600; font-size: 13.5px; }
.folder-head.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: rgba(88, 166, 255, 0.13);
}

.folder-count {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  padding: 0 6px;
  color: var(--text-secondary);
}
.folder-head .folder-count { margin-right: auto; }

.folder-topics { list-style: none; }
.folder-topics .topic-row { border-top: 1px solid var(--border); }
.folder-empty { padding: 12px; font-size: 12px; }

.topics-list > .topic-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}

.topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.topic-row:hover { background: var(--bg-message); }
.topic-row.active .topic-row-title { color: var(--accent); }
.topic-row.expanded { background: var(--bg-message); }

/* A row in edit mode is nothing but its input: the sub-line and the action
   overlay step aside rather than crowding a text box. */
.topic-rename {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 10px;
}
.topic-rename:focus { outline: none; }
.topic-row.renaming { padding: 6px 8px; cursor: default; }
.topic-row.renaming:hover { background: none; }
.folder-head.renaming { cursor: default; }

.topic-row-info { flex: 1; min-width: 0; }
.topic-row-title {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-row-sub { color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }

/* Row actions: an overlay pinned to the row's right edge, revealed on hover.
   Out of the flex flow on purpose — laid out inline they would start wherever
   the title ends, so their position varied row to row, and their reserved
   space truncated every title even at rest. */
.topic-row, .folder-head { position: relative; }
.topic-acts {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 10px;
  background: var(--bg-message);
  /* Text scrolled beneath the overlay fades out rather than being cut off */
  box-shadow: -14px 0 12px -6px var(--bg-message);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
}
.topic-row:hover .topic-acts,
.folder-head:hover .topic-acts { opacity: 1; pointer-events: auto; }

.topic-act {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.topic-act:hover { color: var(--text-primary); border-color: var(--border); background: var(--bg-primary); }
.topic-act.danger:hover { color: var(--destructive); }
.topic-act:disabled { opacity: 0.35; cursor: default; }
.topic-act:disabled:hover { color: var(--text-secondary); border-color: transparent; background: none; }

.topics-empty { color: var(--text-muted); padding: 28px 12px; text-align: center; line-height: 1.7; }

/* A folder silhouette drawn in currentColor, so it dims and lights with its row */
.folder-icon {
  flex: none;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
  position: relative;
  margin-top: 2px;
}
.folder-icon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: inherit;
}

/* File preview */
#modal-file { width: min(820px, 94vw); max-height: 84vh; }
.file-modal-actions { display: flex; align-items: center; gap: 8px; }
.file-modal-actions .btn { text-decoration: none; }
#file-modal-title { font-family: var(--font-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-code pre {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ── Reading a file ── */

.file-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.file-head-who { min-width: 0; }
.file-head-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-head-meta { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.file-head #file-view-download { margin-left: auto; flex: none; }

.file-body { flex: 1; overflow-y: auto; padding: 26px 32px 64px; }

/* Prose, not UI: bigger and looser than the interface around it, and it
   uses the full pane. */
.file-md {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-primary);
}
.file-md > *:first-child { margin-top: 0; }
.file-md h1 { font-size: 27px; line-height: 1.25; margin: 32px 0 14px; letter-spacing: -0.01em; }
.file-md h2 { font-size: 20px; line-height: 1.3; margin: 30px 0 10px; }
.file-md h3 { font-size: 16.5px; margin: 24px 0 8px; }
.file-md h4 { font-size: 15px; margin: 20px 0 6px; color: var(--text-secondary); }
.file-md p { margin: 0 0 17px; }
.file-md ul, .file-md ol { margin: 0 0 17px 24px; }
.file-md li { margin: 5px 0; }
.file-md li > ul, .file-md li > ol { margin-bottom: 4px; }
.file-md blockquote {
  border-left: 3px solid var(--border);
  padding-left: 16px;
  margin: 0 0 17px;
  color: var(--text-secondary);
}
.file-md hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; }
.file-md img { max-width: 100%; border-radius: 6px; }
.file-md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.file-md strong { font-weight: 700; }
.file-md code {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.file-md pre {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 17px;
  font-size: 12.5px;
  line-height: 1.6;
}
.file-md pre code { border: none; padding: 0; background: none; font-size: inherit; }
.file-md table { border-collapse: collapse; margin: 0 0 17px; font-size: 14px; display: block; overflow-x: auto; }
.file-md th, .file-md td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; }
.file-md th { background: var(--bg-message); font-weight: 600; }

/* Source files are read as code: full width, no measure. */
.file-code pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  color: var(--text-primary);
}
.file-image { display: block; max-width: 100%; margin: 0 auto; border-radius: 6px; }

/* Workspace file picker */
.home-filter {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.home-filter:focus { outline: none; border-color: var(--accent); }

.home-list { list-style: none; max-height: 44vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.home-list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.home-list li:last-child { border-bottom: none; }
.home-list li:hover { background: var(--bg-message); }
.home-list li.already { opacity: 0.45; cursor: default; }
.home-list input[type=checkbox] { accent-color: var(--accent); flex-shrink: 0; }
.home-path { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-path .dir { color: var(--text-muted); }
.home-meta { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.home-hint { color: var(--text-muted); font-size: 12px; }

/* Destructive confirm state on a file action */
.file-act.danger { color: var(--destructive); }

/* ══ Activity: inline indicator, tab, backend log, footer ══ */

/* The message scroller now holds the list plus the live indicator, so the
   indicator sits at the end of the conversation rather than pinned above
   the composer. */
#messages { display: flex; flex-direction: column; }
#messages-inner { flex: 0 0 auto; }
#activity-rows { flex: 0 0 auto; padding: 2px 20px 8px 66px; }

/* Live dot on the Activity tab */
.tab-live {
  display: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-busy);
  margin-left: 5px;
  vertical-align: middle;
  animation: pulse 1.2s ease-in-out infinite;
}
.tab-live.on { display: inline-block; }

/* Backend log */
#activity-view { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 20px 16px; }
.activity-log-head {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 12px; margin-bottom: 10px;
}
.activity-log-head span { flex: 1; }
.activity-log {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 0;
  min-height: 0;
}
/* A grid, not a flex row. `min-width` only sets a floor: a long name like
   "Research Assistant" pushed the tag and text along with it, so every line
   started somewhere different and the log was unreadable as a column. Fixed
   tracks make the columns actually line up. */
.activity-entry {
  display: grid;
  grid-template-columns: 52px 132px 74px minmax(0, 1fr) 52px;
  gap: 0 12px;
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  align-items: baseline;
}
.activity-entry:hover { background: var(--bg-message); }
.ae-time { color: var(--text-muted); }
/* A name longer than its column is truncated rather than allowed to shove
   the rest of the line — the full name is in the tooltip. */
.ae-who {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ae-tag {
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}
@media (max-width: 900px) {
  .activity-entry { grid-template-columns: 52px 110px 66px minmax(0, 1fr) 44px; }
}
/* How long the phase ran — stamped when the next event closes it */
.ae-dur { color: var(--text-secondary); text-align: right; white-space: nowrap; }
.ae-text { color: var(--text-primary); overflow-wrap: anywhere; }
.activity-entry.k-tool .ae-tag { color: #d29922; }
.activity-entry.k-msg .ae-tag { color: var(--status-idle); }
.activity-entry.k-err .ae-tag,
.activity-entry.k-err .ae-text { color: var(--destructive); }

/* Footer working indicator — global, so quiet never looks like idle */
.side-footer { display: flex; flex-direction: column; gap: 6px; }
.footer-status { display: block; }
.footer-thinking {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-message);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-align: left;
}
.footer-thinking:hover { color: var(--text-primary); border-color: var(--accent); }
.footer-thinking img { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; }
.footer-thinking span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Expandable activity entries */
.activity-entry .ae-body { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.activity-entry .ae-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-entry.expandable { cursor: pointer; }
.activity-entry.expanded .ae-text {
  white-space: pre-wrap;
  overflow: visible;
  overflow-wrap: anywhere;
}
.ae-toggle {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0;
}
.activity-entry:hover .ae-toggle, .activity-entry.expanded .ae-toggle { opacity: 1; }
.ae-toggle:hover { color: var(--accent); background: var(--bg-primary); }
/* Transit trace on a message entry: hidden until the entry is expanded,
   spanning the body columns under the one-line summary. */
.activity-entry .transit-panel { display: none; grid-column: 2 / -1; margin: 4px 0 6px; }
.activity-entry.expanded .transit-panel { display: block; }

/* Manage agents */
.manage-note { color: var(--text-muted); font-size: 11.5px; margin: 8px 2px 0; line-height: 1.5; }
.agent-rows li.is-hidden .name { color: var(--text-muted); }
.agent-rows li.is-hidden .name::after {
  content: 'hidden';
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 7px;
  vertical-align: middle;
}
.agent-acts { display: flex; gap: 4px; flex-shrink: 0; }
.agent-act {
  color: var(--text-secondary);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.agent-act:hover { color: var(--text-primary); border-color: var(--border); background: var(--bg-primary); }
.agent-act.danger { color: var(--destructive); }

/* Definition editor */
#modal-definition { width: min(900px, 94vw); max-height: 86vh; }
#def-title { font-family: var(--font-mono); font-size: 13px; }
.def-status { color: var(--text-muted); font-size: 11.5px; }
.def-status.err { color: var(--destructive); }
.def-status.ok { color: var(--status-idle); }
.def-editor {
  width: 100%;
  min-height: 58vh;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 12px;
  resize: vertical;
}
.def-editor:focus { outline: none; border-color: var(--accent); }

/* ══ Settings tab ══ */

#settings-view { flex: 1; overflow-y: auto; min-height: 0; }
.settings-inner { padding: 20px 24px 32px; }

/* Fields size to their content rather than the pane: a channel slug in a
   1400px box looks absurd, while the definition editor wants every pixel. */
.settings-inner .channel-name-row { max-width: 440px; }

/* The member list uses the width instead of one long column */
.settings-inner .member-picker {
  max-height: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
}
.settings-inner .member-picker li { border-bottom: 1px solid var(--border); }

.settings-inner .def-editor { min-height: 62vh; }
.settings-inner .relay-toggle { max-width: 780px; }
.settings-inner .set-hint { max-width: 780px; }
/* Keep the buttons together: a destructive action flung to the far edge of
   a wide pane reads as unrelated to the thing it destroys. */
.settings-inner .set-actions { max-width: 780px; }

.set-section { margin-bottom: 26px; }
.set-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.set-hint { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.set-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.set-status { color: var(--text-muted); font-size: 12px; }
.set-status.ok { color: var(--status-idle); }
.set-status.err { color: var(--destructive); }

.set-agent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.set-agent-head .avatar {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}
.set-agent-name { font-size: 16px; font-weight: 700; }
.set-agent-sub { color: var(--text-muted); font-size: 12px; }
/* The first section label sat straight under this line with nothing between
   them, so the heading read as part of the description. */
.set-agent-desc { margin-bottom: 24px; max-width: 780px; }

/* Leftover conversation (agent no longer exists) */
.row-forget { font-size: 14px; line-height: 1; }

/* ══ Sidebar context menu ══ */

.ctx-menu {
  position: fixed;
  z-index: 70;
  min-width: 210px;
  list-style: none;
  padding: 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  font-size: 13px;
}

.ctx-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.ctx-item:hover { background: var(--bg-user); }
.ctx-item.danger { color: var(--destructive); }
.ctx-item.danger:hover { background: rgba(248, 81, 73, 0.12); }
.ctx-item.disabled { color: var(--text-muted); cursor: default; }
.ctx-item.disabled:hover { background: none; }

.ctx-hint { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.ctx-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* Inline rename inside a sidebar row */
.ctx-rename {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 1px 6px;
}

/* ── Confirm dialog ──
   Narrower than the working modals: it exists to be read, not worked in.
   The destructive button is filled so it is unmistakable, but Cancel holds
   focus, so muscle-memory Enter is always the safe outcome. */

/* Above the other modals: it can open on top of one (deleting from the
   channel modal), and must never depend on source order to be on top. */
#modal-confirm { width: min(460px, 92vw); top: 22vh; z-index: 60; }
#modal-confirm .modal-head { border-bottom: none; padding-bottom: 0; }
#modal-confirm .modal-head h2 { font-size: 15.5px; line-height: 1.4; }
#modal-confirm .modal-body { padding-top: 10px; }

.confirm-body { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }

.confirm-detail {
  list-style: none;
  margin-top: 12px;
  border-left: 2px solid var(--destructive);
  padding-left: 12px;
}
.confirm-detail li {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 3px 0;
}
.confirm-detail:empty { display: none; }

#modal-confirm .modal-actions { margin-top: 20px; }
#modal-confirm .btn.danger {
  background: var(--destructive);
  border-color: var(--destructive);
  color: var(--bg-primary);
  font-weight: 700;
}
#modal-confirm .btn.danger:hover { filter: brightness(1.12); }
#modal-confirm .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Drag to reorder ──
   The dragged row is also its own placeholder: it moves live through the
   list, dimmed, so the gap you see is exactly where it will land. */

/* The row you grabbed is lifted out of the list and carried by the cursor:
   raised, slightly larger, and never in the way of hit-testing. */
.drag-proxy {
  position: fixed;
  z-index: 80;
  margin: 0;
  pointer-events: none;
  background: var(--bg-message);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  transform: scale(1.03);
  opacity: 0.97;
}
.drag-proxy .row-star { visibility: hidden; }

/* Its place in the list, marked while it is in flight. The proxy travels
   with the cursor and so often sits partly over this — hence the heavier
   dashed edge, which still reads where it peeks out. */
.side-item.drop-slot {
  border: 2px dashed var(--accent);
  border-radius: 6px;
  background: rgba(88, 166, 255, 0.13);
  padding: 0;
  cursor: grabbing;
}

/* The original row is hidden while the proxy stands in for it. */
.side-item.drag-source { display: none; }

/* Whole-window while a row is in flight: one cursor, and no stray text
   selection from the pointer sweeping across the page. */
body.dragging-row, body.dragging-row * { cursor: grabbing !important; user-select: none; }

/* ══ Agents screen ══
   Workspace-level, so it takes over the whole pane rather than sitting in a
   box on top of it. Cards instead of table rows: picking an agent means
   reading what it does, and a description needs room to be read. */

/* Pane takeover: a screen that is not part of the conversation borrows the
   whole main area. One rule hides the conversation, each screen shows on
   its own class, so adding another takes two lines and cannot half-apply. */
#agents-view, #file-view, #account-view, #help-view, #company-view { display: none; flex-direction: column; min-height: 0; }
#main.showing-agents > #agents-view,
#main.showing-file > #file-view,
#main.showing-account > #account-view,
#main.showing-company > #company-view,
#main.showing-help > #help-view { display: flex; }
#main.takeover > #pane-header,
#main.takeover > #pane-tabs,
#main.takeover > #messages,
#main.takeover > #topics-view,
#main.takeover > #files-view,
#main.takeover > #activity-view,
#main.takeover > #settings-view,
#main.takeover > #account-view.hidden,
#main.takeover > #composer { display: none; }

.agents-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.agents-head h2 { font-size: 17px; }
.agents-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.agents-head-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.agents-head-tools input[type=text] {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 11px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  width: 280px;
}
.agents-head-tools input[type=text]:focus { outline: none; border-color: var(--accent); }
.agents-toggle {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.agents-toggle input { accent-color: var(--accent); }

.agents-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 32px;
  /* Keep the scrollbar's width reserved whether or not it is showing.
     Without this, folding the catalog removes the scrollbar, the column
     grows by a few pixels, and every description above rewraps — so cards
     changed height because something below them was opened. */
  scrollbar-gutter: stable;
}

.agents-section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 10px 0 12px;
  /* It is a <button> now, so undo what a button brings with it and keep the
     heading looking like a heading — only the caret and the cursor say it
     can be clicked. */
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.agents-section-head:hover h3,
.agents-section-head:focus-visible h3 { color: var(--text-primary); }

.agents-section-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* A triangle that points down when open and right when folded. */
.agents-caret {
  flex: none;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transform-origin: 50% 30%;
  transition: transform 0.15s ease;
  align-self: center;
}

.agents-section-head[aria-expanded="false"] .agents-caret { transform: rotate(-90deg); }

/* Folded sections are gone, not merely short: a half-height grid still eats
   the screen, which is the problem this solves. */
.agent-grid.collapsed { display: none; }

/* When the catalog is grouped it holds headings and sub-grids, so the
   container itself stops being a grid — otherwise each heading would be
   laid out as a cell. */
.agent-grid.grouped { display: block; }

.catalog-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 10px;
}
.catalog-group-head:first-child { margin-top: 4px; }

.catalog-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* One line saying what the group is for. The kinds are only obvious once
   someone tells you what they are. */
.catalog-group-blurb {
  color: var(--text-muted);
  font-size: 11.5px;
}

.agents-section-head:not(:first-child) { margin-top: 30px; }
.agents-section-head h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--font-mono); color: var(--text-secondary); font-weight: 600;
}
.agents-count { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.agent-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.agent-card:hover { border-color: var(--text-muted); }
.agent-card.muted { opacity: 0.6; }
.agent-card.muted:hover { opacity: 1; }

.agent-card-head { display: flex; align-items: center; gap: 11px; }
.agent-card-head .avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.agent-card-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.agent-card-name { font-weight: 700; font-size: 13.5px; }
.agent-card-uid { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }

.agent-card-desc {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 10px 0 0;
  /* Three lines is enough to tell agents apart; the full text is in Settings */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Always occupy three lines, even when the text only fills two. The clamp
     alone sets a ceiling, not a height, so a card's height depended on where
     its sentence happened to wrap — which made the grid ragged and meant a
     few pixels of width change rippled through every row. */
  min-height: calc(1.55em * 3);
}

.agent-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tool-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.tool-tag.more { border-style: dashed; }

.agent-card-actions {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.agent-card-note { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }

.agents-empty { color: var(--text-muted); font-size: 13px; padding: 6px 2px; grid-column: 1 / -1; }

/* Already in the workspace: marked on the card, not just by a dead button. */
.agent-card.installed { border-color: rgba(63, 185, 80, 0.35); }
.card-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.4);
  background: rgba(63, 185, 80, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Back to wherever the conversation was opened from. Hidden unless there is
   somewhere to go, so the header does not carry a dead control. */
#pane-back { flex: none; color: var(--text-secondary); }
#pane-back:hover { color: var(--text-primary); border-color: var(--accent); }

/* ── Topics ──
   A topic is a piece of work with one agent. They sit indented under their
   agent as ordinary rows, not a nested list, so the drag-to-reorder code
   still sees one flat list of agents. */

.side-item.topic-item {
  padding-left: 50px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.side-item.topic-item .label { overflow: hidden; text-overflow: ellipsis; }
.side-item.topic-item:hover { color: var(--text-secondary); }
.side-item.topic-item.active { color: var(--text-primary); }
.side-item.topic-new { color: var(--text-muted); font-size: 12px; opacity: 0.75; }
.side-item.topic-new:hover { opacity: 1; color: var(--accent); }

/* Reveals an agent's topics. First in the row, and its slot is reserved on
   every agent whether or not it has topics, so names stay aligned. */
.topic-caret {
  flex: none;
  /* A small glyph, but the whole left gutter is the target: at 10x14 inside a
     252x32 row, a few pixels off hit the row instead and opened the
     conversation, which looked like the caret refusing to close. */
  width: 22px;
  height: 30px;
  margin: -6px 0 -6px -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  border-radius: 4px;
  transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.topic-caret:hover { background: rgba(255, 255, 255, 0.09); }
.topic-caret.open { transform: rotate(90deg); }
.topic-caret.empty { visibility: hidden; }
.topic-caret:hover { color: var(--text-primary); }
.side-item:hover .topic-caret { color: var(--text-secondary); }

.side-item.topic-more { color: var(--text-muted); font-size: 12px; font-style: italic; }
.side-item.topic-more:hover { color: var(--text-secondary); }

/* Folders in the topic list. A folder row navigates down into the folder,
   where an up row is the way back — the list only ever shows one level. */
.side-item.folder-item { gap: 7px; }
.side-item.folder-item:hover { color: var(--text-primary); }
.side-item.folder-item .folder-count { flex: none; }
.side-item.folder-up { color: var(--text-secondary); gap: 7px; }
.side-item.folder-up:hover { color: var(--text-primary); }
.side-item.folder-up .label { font-weight: 600; }
.folder-up-chev {
  flex: none;
  font-size: 15px;
  line-height: 1;
  margin-top: -2px;
}

/* ══ Account ══ */

/* The identity in the sidebar header is now the way in to Account. */
.ws-user {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 4px;
  padding: 1px 3px;
  margin-left: -3px;
}
.ws-user:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.06); }
.ws-user:focus { outline: none; }
.ws-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The body scrolls, so it is never width-capped — capping the scroll container
   puts its scrollbar mid-window, which reads as a stray vertical line. The
   panels inside do the constraining. */
/* Main column plus a narrower side column, rather than auto-fit: panels have
   very different heights, and letting them flow left-to-right leaves holes
   beside the short ones. Each column stacks its own, so nothing is ragged. */
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  max-width: 1180px;
}
.account-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 1000px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Two fields side by side where they are naturally a pair. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.account-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 20px;
}
.account-panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 14px;
}
/* Deletion spans the row and sits apart: it is not one option among peers. */
.account-panel.danger {
  grid-column: 1 / -1;
  border-color: rgba(248, 81, 73, 0.3);
  margin-top: 8px;
}
.account-panel.danger h3 { color: var(--destructive); }

.account-facts {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 7px 18px;
  font-size: 13px;
  align-items: baseline;
}
.account-facts dt { color: var(--text-muted); font-size: 12px; }
.account-facts dd { color: var(--text-primary); overflow-wrap: anywhere; }
.account-facts dd.account-hint { grid-column: 1 / -1; margin-top: 6px; }

.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--text-secondary);
}
.account-form input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}
.account-form input:focus { outline: none; border-color: var(--accent); }
.account-hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; max-width: 560px; }

/* Download cards: rendered markdown, scaled to sit inside an account panel
   rather than fill a page the way .file-md normally does. */
.dl-doc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-width: 640px; }
.dl-doc p, .dl-doc ul, .dl-doc ol { margin-bottom: 12px; }
.dl-doc li { margin: 3px 0; }
.dl-doc + .set-actions { margin-top: 4px; }
.company-add input.mono { font-family: var(--font-mono); font-size: 11.5px; }

/* ── Security tab ──────────────────────────────────────────────────────
   The level choice is the page's one real decision, so it is a list of
   plain-language options with their consequences, not a dropdown. */
.sec-level {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.sec-level.on { border-color: var(--accent); background: var(--bg-primary); }
.sec-level input { accent-color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.sec-level-name { font-size: 13.5px; font-weight: 600; }
.sec-level-blurb { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.sec-pick {
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; color: var(--text-primary); font-family: inherit; font-size: 12px;
}
.sec-pick:focus { outline: none; border-color: var(--accent); }
.sec-declared {
  margin: 4px 0 0 18px; font-size: 11.5px; color: var(--text-muted);
  font-family: var(--font-mono);
}
/* The decisions list is the panel's content, not a disclosure inside a row. */
.machine-activity.open-always { display: block; margin-left: 0; }
.account-hint.sec-warn { color: var(--danger, #f85149); }

/* ── Machines tab ──────────────────────────────────────────────────────
   One row per machine; the row expands to what the Machine Agent has been
   doing there. Same list grammar as the company roll. */
.machines-head { display: flex; align-items: center; justify-content: space-between; }
.machines-head h3 { margin: 0; }
.machine-row { border-bottom: 1px solid var(--border); padding: 10px 0; }
.machine-row:last-child { border-bottom: none; }
.machine-row-head { display: flex; align-items: center; gap: 10px; }
.machine-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.machine-dot.on { background: var(--status-idle); }
.machine-who { flex: 1; min-width: 0; }
.machine-name { font-size: 13.5px; font-weight: 600; }
.machine-version {
  margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}
.machine-version.stale { color: var(--accent); border-color: rgba(88,166,255,0.4); }
.machine-meta {
  font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.machine-actions { display: flex; gap: 8px; flex-shrink: 0; }
.machine-actions .danger-text { color: var(--danger, #f85149); }
.machine-activity { display: none; margin: 10px 0 2px 18px; }
.machine-row.open .machine-activity { display: block; }
.machine-act-line {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 0; color: var(--text-secondary);
}
.machine-act-time { color: var(--text-muted); flex-shrink: 0; }
.machine-act-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-act-line.event .machine-act-label { color: var(--text-muted); font-style: italic; }
.machine-act-line.err .machine-act-label { color: var(--danger, #f85149); }
.machine-act-err { color: var(--danger, #f85149); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-token {
  width: 100%; margin-top: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.machine-token:focus { outline: none; border-color: var(--accent); }

/* A hint explains the control above it, so it needs room to read as a
   caption rather than as part of the field. */
.company-add + .account-hint,
.account-form input + .account-hint { margin-top: 10px; }

/* Chrome paints autofilled fields a fixed near-white and ignores
   background-color to do it. An inset shadow is the only thing that covers
   it, and the fill colour has to be set separately or the text stays dark. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: inset 0 0 0 40px var(--bg-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid var(--border) !important;
}
input:-webkit-autofill:focus { border-color: var(--accent) !important; }

/* Fixed three across: auto-fill gave a ragged 4 + 2 and squeezed the longest
   label onto two lines, making one card taller than its neighbours. */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px) { .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.usage-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.usage-value { font-size: 19px; font-weight: 700; font-family: var(--font-mono); }
.usage-label { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

.agents-section-head.danger-head h3 { color: var(--destructive); }

/* Nothing matched the search — never leave the sidebar silently blank. */
.side-no-match {
  margin: 18px 16px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Present to the browser's autofill, invisible to the user. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* The heading takes focus when the screen opens; it should not draw a box. */
#account-heading:focus { outline: none; }

/* An action that closes out its panel, separated from the facts above it. */
.account-panel .panel-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ══ Slash commands ══
   Same shape as the @ mention list: it sits above the composer, since the
   composer is at the bottom of the screen. */

.slash-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  z-index: 30;
  padding: 5px;
}
.slash-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.slash-item.selected, .slash-item:hover { background: var(--bg-message); }
.slash-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-primary);
  white-space: nowrap;
  flex: none;
  min-width: 150px;
}
.slash-item.selected .slash-name { color: var(--accent); }
.slash-desc { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Company ══
   A shared workspace sits above your own in the sidebar: shared work first,
   private work below. */

.company-section .company-name { color: var(--text-primary); }
.company-section .company-name::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: middle;
}
.side-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 16px 8px;
  list-style: none;
}

/* Two groups under one company heading: indented so they read as parts of
   it, and quieter than the top-level section labels. */
.company-body.collapsed { display: none; }
.company-group + .company-group { margin-top: 4px; }
.company-subheading { padding-left: 18px; }
.company-subheading .side-heading-label { font-size: 10px; letter-spacing: 0.08em; }

.company-roll { list-style: none; margin-top: 12px; }
.company-roll li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.company-roll li:last-child { border-bottom: none; }
.company-roll .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.company-roll .role {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.company-roll .role.owner { color: var(--accent); border-color: rgba(88,166,255,0.4); }
.company-add { display: flex; gap: 8px; margin-top: 14px; }
.company-add input {
  flex: 1; min-width: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}
.company-add input::placeholder { color: var(--text-muted); }
.company-pending { margin-top: 14px; }
.company-pending .company-roll li { opacity: 0.85; }
.acc-invite-label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-secondary); }
.acc-invite-label input, .acc-invite-label textarea {
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 11px; color: var(--text-primary); font-family: inherit; font-size: 13px; resize: vertical;
}
.acc-invite-label input:focus, .acc-invite-label textarea:focus { outline: none; border-color: var(--accent); }
.acc-invite-label input::placeholder, .acc-invite-label textarea::placeholder { color: var(--text-muted); }
.company-add input:focus { outline: none; border-color: var(--accent); }


/* ── Model and usage (settings) ─────────────────────────────────────────
   A table because the question is comparative — which agent in this channel
   is doing the work, and on what. Numbers are tabular so columns line up on
   the digit, and each cell carries the figure above its qualifier so the
   eye can run down one column without re-reading the label. */
.usage-table {
  width: 100%; max-width: 780px;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.usage-table th {
  text-align: left;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
  padding: 0 14px 7px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.usage-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border);
  /* Cells hold one or two lines depending on the column. Top alignment left
     the single-line ones (checkbox, name, last active) riding high against
     their two-line neighbours; centring settles every row on one axis. */
  vertical-align: middle;
}
.usage-table th { vertical-align: bottom; }
.usage-table tr:last-child td { border-bottom: none; }

.usage-who { white-space: nowrap; padding-right: 4px; }
.usage-who-inner { display: flex; align-items: center; gap: 9px; }
.usage-who .dot { margin-left: 1px; flex-shrink: 0; }
.usage-who .avatar.tiny {
  width: 22px; height: 22px; border-radius: 5px;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.usage-name { color: var(--text-primary); font-weight: 600; }

/* Every first line occupies one box of the same height, whether it is text
   or the model chooser. Without this the taller select made its cell taller,
   and a middle-aligned row then centred each cell on a slightly different
   axis — the columns drifted 4px apart. */
.usage-table .usage-line {
  min-height: 26px;
  display: flex;
  align-items: center;
}
.usage-endpoint { color: var(--text-primary); line-height: 1.35; }
/* One rhythm for every second line, so the sub-lines across a row sit on the
   same baseline instead of drifting by a pixel per column. */
.usage-sub {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px;
}
.usage-sub-empty { min-height: 15px; }
.usage-sub.ok { color: var(--status-idle); }
.usage-sub.err { color: var(--destructive); }
.usage-model { min-width: 190px; }
/* The chooser only appears in an agent's own settings, where one row has the
   whole width — give the column room for a full endpoint label there. */
.usage-table:not(.selectable) .usage-model { min-width: 290px; }

/* Choosing the model belongs next to the reading of it.
   `width: auto` so the control is as wide as its longest option and the
   native chevron is never sat on by the text — a fixed width truncated the
   label straight through the arrow. */
.usage-llm {
  width: auto;
  max-width: 100%;
  height: 28px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 30px 4px 10px;   /* room on the right for the chevron */
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.usage-llm:hover { border-color: var(--text-muted); }
.usage-llm:focus { outline: none; border-color: var(--accent); }

.sampling-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sampling-input {
  height: 26px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sampling-input::placeholder { color: var(--text-muted); }
.sampling-input:hover { border-color: var(--text-muted); }

.usage-nums { font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-tokens { color: var(--text-primary); line-height: 1.35; }
.usage-none { color: var(--text-muted); }
.usage-when {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Below the fold on a narrow window the table would push the pane sideways */
.usage-body { overflow-x: auto; }

/* Selectable mode: the table is also the member picker, so rows are targets */
.usage-table.selectable tbody tr { cursor: pointer; }
.usage-table.selectable tbody tr:hover { background: var(--bg-message); }
.usage-table .usage-pick { width: 28px; padding-right: 10px; }
.usage-table .usage-pick input {
  accent-color: var(--accent);
  cursor: pointer;
  display: block;     /* kills the inline baseline gap that sat it high */
  margin: 0;
}

/* An agent that is in the workspace but not in this channel: still worth
   seeing — its usage is why you might add it — but clearly not a member. */
.usage-table tbody tr.not-member .usage-name,
.usage-table tbody tr.not-member .usage-endpoint,
.usage-table tbody tr.not-member .usage-tokens { color: var(--text-muted); }
.usage-table tbody tr.not-member .avatar.tiny { opacity: 0.45; }



@media (max-width: 720px) {
  .usage-table th:nth-child(5), .usage-table td:nth-child(5) { display: none; }
}


/* ── One agent: label and value, not a table of one row ──────────────────
   A five-column table for a single agent repeated the name already in the
   header and stranded four figures across empty space. Stacked pairs put the
   value beside its label where it can be read at a glance. */
.usage-facts {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px 20px;
  align-items: baseline;
  max-width: 620px;
  margin-top: 14px;
}
.usage-facts dt {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 2px;
}
.usage-facts dd { margin: 0; min-width: 0; }
.usage-facts dd .usage-tokens { font-variant-numeric: tabular-nums; }
.usage-facts dd .usage-sub { margin-top: 4px; }
/* No per-row fudge: the grid aligns rows on their text baseline, which is
   what the eye actually reads. Padding here only fought it. */

@media (max-width: 620px) {
  .usage-facts { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .usage-facts dt { padding-top: 12px; }
}


/* ── Channel protocol clauses ────────────────────────────────────────────
   Rules read as a checklist, because that is what they are: a set you turn
   on and off for this channel. The summary sits under its label rather than
   beside it so a long rule never pushes its switch out of line. */
.clause-body { max-width: 680px; margin-top: 12px; }
.clause-list { display: flex; flex-direction: column; }

.clause {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}
.clause:hover { background: var(--bg-message); }
.clause.on { border-color: var(--border); background: var(--bg-primary); }
.clause + .clause { margin-top: 4px; }
.clause input[type=checkbox] {
  accent-color: var(--accent);
  margin: 2px 0 0;      /* level with the label's first line */
  flex-shrink: 0;
  cursor: pointer;
}
.clause-text { min-width: 0; flex: 1; }
.clause-label { color: var(--text-secondary); font-size: 13px; }
.clause.on .clause-label { color: var(--text-primary); font-weight: 600; }
.clause-summary { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; margin-top: 2px; }

.clause-param { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.clause-param-label {
  color: var(--text-muted);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.clause-field {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  min-width: 120px;
}
.clause-field.wide { flex: 1; min-width: 0; }
.clause-field:disabled { opacity: 0.45; cursor: not-allowed; }
.clause-field:focus { outline: none; border-color: var(--accent); }

.clause-customs { margin-top: 4px; }
.clause.custom { align-items: center; gap: 8px; }


/* ── An agent's deliverable ──────────────────────────────────────────────
   The thing you asked for, told apart from the notes about producing it.
   A message that ran changelog, artifact and question together as one flat
   block made the reader do that separation themselves, every time. */
/* Square. A rounded card reads as a widget floating on the transcript; the
   draft is part of the message, marked off by a rule rather than boxed. */
.artifact {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-primary);
  margin: 12px 0;
  overflow: hidden;
}
.artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.artifact-kind {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.artifact-copy {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  padding: 2px 9px;
  cursor: pointer;
}
.artifact-copy:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Prose, not code — this is writing, and it is what will be published */
.artifact-body { padding: 12px 14px 4px; }
.artifact-body p { margin: 0 0 10px; line-height: 1.6; }
.artifact-body > :last-child { margin-bottom: 8px; }

/* A rule the author put there on purpose, rather than one we invented */
hr.md-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}





/* Checked by someone other than its author, or already out in the world.
   Worth telling apart at a glance from a first draft. */
.artifact.verified { border-left-color: var(--status-idle); }
.artifact.verified .artifact-kind { color: var(--status-idle); }
.artifact.published { border-left-color: var(--accent); }
.artifact.published .artifact-kind { color: var(--accent); }


/* A long block is clipped to about a screenful, with the cut faded so it is
   obvious there is more rather than looking like the end of the text. */
.artifact.clipped .artifact-body {
  max-height: 320px;
  overflow: hidden;
  position: relative;
}
.artifact.clipped:not(.open) .artifact-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}
.artifact.clipped.open .artifact-body { max-height: none; }
.artifact-more {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  padding: 7px 0;
  cursor: pointer;
}
.artifact-more:hover { color: var(--text-primary); background: var(--bg-message); }


/* ── Working talk, folded ────────────────────────────────────────────────
   A channel carries two conversations: the work, and the members organising
   it. Only one of them is addressed to the reader. This is the second,
   present and one click away rather than in front of them. */
.internal-run { margin: 6px 0 6px 66px; }
.internal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-left: 2px solid var(--border);
  padding: 4px 0 4px 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.internal-bar:hover { color: var(--text-secondary); border-left-color: var(--text-muted); }
.internal-caret { display: inline-block; transition: transform 0.12s ease; font-size: 9px; }
.internal-run.open .internal-caret { transform: rotate(90deg); }
.internal-count { font-weight: 600; }
.internal-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.internal-body {
  border-left: 2px solid var(--border);
  margin-left: 0;
  padding-left: 10px;
}
.internal-body .msg { margin-left: -66px; padding-left: 66px; }
.internal-body.hidden { display: none; }


/* Off because it has nothing to act on yet, rather than off by choice */
.clause-needs {
  margin-left: 9px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  padding: 1px 6px;
  vertical-align: 1px;
}






/* A channel member missing a tool the channel depends on. Stated where the
   members are listed, because that is where you would go to change it. */
.tool-warn {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--destructive);
  border: 1px dashed var(--destructive);
  padding: 0 5px;
  white-space: nowrap;
  opacity: 0.85;
}

/* ── Account tabs ── */
.acc-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.acc-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font: inherit; padding: 8px 12px; cursor: pointer;
}
.acc-tab:hover { color: var(--text-primary); }
.acc-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ── LLM Config ── */
.llm-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 16px;
}
.llm-toolbar h3 { margin: 0 0 4px; }

/* One card per model: what it is, what it costs, what you can do with it. */
#acc-llm-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.llm-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.llm-card.local { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.llm-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.llm-card-name { font-weight: 600; }
.llm-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-secondary);
}
.llm-tag.ok { color: var(--status-idle); border-color: var(--status-idle); }
.llm-tag.warn { color: var(--status-busy); border-color: var(--status-busy); }
.llm-card-facts { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.llm-card-spend {
  display: flex; align-items: baseline; gap: 8px;
  margin: 10px 0 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.llm-card-tokens { font-variant-numeric: tabular-nums; font-size: 13px; }
.llm-card-sub { color: var(--text-muted); font-size: 12px; }
.llm-card-actions { display: flex; align-items: center; gap: 6px; }

/* Usage detail panel — opens below the cards from a card's spend line */
.llm-card-spend.expandable { cursor: pointer; }
.llm-card-spend.expandable:hover .llm-card-sub { color: var(--text-primary); }
.llm-spend-more { color: var(--accent, #6ea8fe); font-size: 12px; margin-left: 8px; white-space: nowrap; }
.llm-card-spend.expandable:hover .llm-spend-more { text-decoration: underline; }
.llm-spend-more.open { color: var(--text-primary); }

#acc-llm-detail {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 10px;
  background: var(--bg-message, rgba(255,255,255,0.02));
}
.llm-detail-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.llm-detail-title { font-weight: 600; font-size: 14px; }
.llm-detail-total { color: var(--text-secondary); font-size: 12.5px; flex: 1; }
.llm-detail-charts {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; margin-bottom: 18px;
}
@media (max-width: 900px) { .llm-detail-charts { grid-template-columns: 1fr; } }
.llm-detail-block h4 {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-secondary); font-weight: 600;
}

/* Horizontal bars — one hue; the label column carries identity */
.llm-bar-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 90px; gap: 10px; align-items: center; margin: 6px 0; }
.llm-bar-label { color: var(--text-primary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llm-bar-track { height: 10px; border-radius: 4px; background: var(--border, #2a2f3a); overflow: hidden; }
.llm-bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--accent, #6ea8fe); }
.llm-bar-figures { color: var(--text-secondary); font-size: 12px; text-align: right; white-space: nowrap; }

/* Day columns — baseline-anchored, zero-filled days stay visible */
.llm-cols { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 16px; }
.llm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.llm-col-bar { width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; background: var(--accent, #6ea8fe); }
.llm-col-bar.zero { background: var(--border, #2a2f3a); }
.llm-col-value { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; white-space: nowrap; }
.llm-col-day { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; height: 14px; white-space: nowrap; }

/* The raw table */
.llm-detail-table { border-collapse: collapse; font-size: 12.5px; min-width: 50%; }
.llm-detail-table th {
  text-align: right; padding: 4px 14px 6px 0; font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 1px solid var(--border, #2a2f3a);
}
.llm-detail-table th:first-child, .llm-detail-table td:first-child { text-align: left; }
.llm-detail-table td { text-align: right; padding: 5px 14px 5px 0; color: var(--text-primary); }
.llm-td-agent { color: var(--accent); }
.llm-td-total td { border-top: 1px solid var(--border, #2a2f3a); font-weight: 600; }

/* API key input with a show/hide eye inside its right edge */
.key-field { position: relative; display: block; }
.key-field input { width: 100%; padding-right: 34px; }
.key-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim, #8b93a7); border-radius: 4px;
}
.key-eye:hover { color: var(--text, #e6e9f0); }
.key-eye.on { color: var(--accent, #6ea8fe); }
.llm-card-result { font-size: 12px; margin-top: 8px; min-height: 1em; }
.llm-card-result.ok { color: var(--status-idle); }
.llm-card-result.err { color: var(--destructive); }

/* Selects were unstyled, so they rendered as white system controls in a
   dark page. Same treatment as the inputs beside them. */
.account-form select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}
.account-form select:focus { outline: none; border-color: var(--accent); }

/* When an agent is not on the model it asked for */
.llm-verdict {
  margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-secondary); cursor: help;
}
.llm-verdict.equivalent { color: var(--status-idle); border-color: var(--status-idle); }
.llm-verdict.substitute { color: var(--status-busy); border-color: var(--status-busy); }

/* The "Yours" divider between company workspaces and your own. Quieter than a
   company name — it separates, it is not a thing you can click into. */
.side-heading.scope-heading {
  margin-top: 14px;
  padding-bottom: 2px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.side-heading.scope-heading .side-heading-label {
  opacity: 0.75;
  cursor: default;
}

/* ── "An agent is waiting on you" ── */
#composer-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 13px;
}
#composer-ask.hidden { display: none; }
.composer-ask-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: ask-pulse 1.6s ease-in-out infinite;
}
@keyframes ask-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.composer-ask-who { font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.composer-ask-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.composer-ask-progress { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.composer-ask-jump {
  flex: 0 0 auto;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 12px; padding: 3px 9px; cursor: pointer;
}
.composer-ask-jump:hover { border-color: var(--accent); }
/* The card the strip points at, when you arrive from "Show me". */
.ask-user.ask-flash { animation: ask-flash 1.2s ease-out; }
@keyframes ask-flash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* The current version, when a run produced more than one. Earlier artifacts
   stay legible — they are history, not mistakes. */
.artifact.latest { border-left-color: var(--accent); }
.artifact.latest .artifact-kind { color: var(--accent); font-weight: 700; }

/* The composer while it is standing in for a question. */
#composer-box.answering {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
#composer-box.answering #composer-input::placeholder { color: var(--text); opacity: 0.75; }

/* ══ The first screen ══ */
#welcome-pane {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
}
#welcome-pane.hidden { display: none; }
/* Everything the pane normally shows. `#pane-tabs` was missed first time and
   showed through the introduction, which is what a list rather than a wildcard
   costs — but a wildcard here would also hide the introduction itself. */
#main.showing-welcome > #pane-header,
#main.showing-welcome > #pane-tabs,
#main.showing-welcome > #messages,
#main.showing-welcome > #composer { visibility: hidden; }
.welcome-inner { width: 100%; max-width: 720px; }
.welcome-inner h1 { font-size: 26px; margin: 0 0 10px; }
.welcome-lede { color: var(--text-muted); margin: 0 0 28px; line-height: 1.55; max-width: 60ch; }

.welcome-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 780px) { .welcome-routes { grid-template-columns: 1fr; } }

.welcome-route {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.welcome-route h2 { font-size: 15px; margin: 0; }
.welcome-route > p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.5; }
.welcome-route input, .welcome-route textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.welcome-route button { align-self: flex-start; margin-top: auto; }

.welcome-channels { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.welcome-channels li { padding: 3px 0; }
.welcome-channels b { color: var(--accent); font-weight: 600; }
.welcome-channels span { color: var(--text-muted); margin-left: 6px; }

.welcome-status { min-height: 20px; margin: 18px 0 0; font-size: 13px; color: var(--text-muted); }
.welcome-status.ok { color: var(--accent); }
.welcome-status.warn { color: var(--destructive); }
#welcome-pane.busy { opacity: 0.75; }

.welcome-skip {
  background: none; border: none; padding: 0; margin-top: 14px;
  color: var(--text-muted); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline;
}
.welcome-skip:hover { color: var(--text); }

.side-reopen {
  display: block; width: calc(100% - 24px); margin: 8px 12px 0;
  background: none; border: 1px dashed var(--border); border-radius: 5px;
  color: var(--text-muted); font: inherit; font-size: 12px;
  padding: 6px 8px; cursor: pointer; text-align: left;
}
.side-reopen:hover { color: var(--text); border-color: var(--accent); }
.side-reopen.hidden { display: none; }
.welcome-solo-note { color: var(--text-muted); font-size: 12px; margin: 0; }
/* A standard channel you already have, so the list reads as progress. */
.welcome-channels li.have b { color: var(--text-muted); }
.welcome-channels li.have::after { content: ' ✓'; color: var(--accent); font-size: 11px; }
.welcome-route button:disabled { opacity: 0.5; cursor: default; }

/* Waiting on the account round trip, rather than showing half an answer. */
.acc-waiting { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 13px; padding: 6px 0; }
.acc-waiting img { width: 18px; height: 18px; border-radius: 3px; }
#acc-details-form.waiting input { opacity: 0.5; }

/* Already in a company with channels: the statement leads and the offer is a
   footnote to it, rather than two cards reading as a choice. */
#welcome-pane.settled .welcome-routes { grid-template-columns: 1fr; max-width: 520px; }
#welcome-pane.settled #welcome-company-already { border-color: var(--accent); }
#welcome-pane.settled .welcome-route:last-child { background: none; border-style: dashed; }
.welcome-channels li.duplicate b { color: var(--text-muted); }
.dup-note { color: var(--text-muted); font-style: normal; font-size: 11.5px; }

/* ══ Create bar ══ */
.side-create { padding: 0 12px 8px; }
.side-create-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
}
.side-create-btn:hover { border-color: var(--accent); }
.side-create-plus { color: var(--accent); font-size: 15px; line-height: 1; }

/* Choosing a group: the channels it makes, before it makes them. */
.group-list { display: flex; flex-direction: column; gap: 10px; }
.group-card {
  border: 1px solid var(--border); border-radius: 7px; padding: 13px;
  background: var(--bg-secondary); cursor: pointer;
}
.group-card:hover { border-color: var(--accent); }
.group-card h4 { margin: 0 0 3px; font-size: 14px; }
.group-card .group-summary { color: var(--text-muted); font-size: 12.5px; margin: 0 0 9px; }
.group-card ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.group-card li { padding: 2px 0; color: var(--text-muted); }
.group-card li b { color: var(--accent); font-weight: 600; }
.group-card li.have b { color: var(--text-muted); }
.group-card li.have::after { content: ' ✓'; color: var(--accent); font-size: 11px; }
.group-where { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.group-where select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font: inherit; font-size: 12.5px; padding: 4px 7px; margin-left: 6px;
}

/* ══ Attachments ══
   Files dropped onto the conversation. Staged chips sit in the composer
   until send; sent chips render under the message text as download links. */

#drop-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 17, 23, 0.72);
  pointer-events: none; /* the drop lands on #main underneath */
}
#drop-overlay.hidden { display: none; }
.drop-overlay-inner {
  border: 2px dashed var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 16px; font-weight: 600;
  padding: 26px 44px;
  background: var(--bg-secondary);
}

#composer-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px 0;
}
#composer-attachments.hidden { display: none; }

.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-message);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  color: var(--text-primary);
  text-decoration: none;
  max-width: 280px;
}
a.attach-chip:hover { border-color: var(--accent); }
.attach-chip.pending { opacity: 0.6; }
.attach-ext {
  background: var(--bg-user);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 9.5px; font-weight: 700;
  padding: 2px 4px;
  letter-spacing: 0.4px;
}
.attach-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.attach-size { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.attach-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 1px;
}
.attach-remove:hover { color: var(--destructive); }

.msg-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}

.files-topic-head {
  color: var(--text-muted);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 14px 4px 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-topic-head:first-child { padding-top: 4px; }

/* ══ Help view ══
   The guide fills the pane like the Agents screen and is rendered from
   markdown (help.md), so it inherits .file-md's article styling. Overrides:
   the full pane width (an article measure is wrong for a reference page
   full of tables), a size up on the type, and full-width tables. */

.help-md { max-width: none; font-size: 16px; line-height: 1.7; }
.help-md h1 { margin-top: 4px; }
.help-md h2 {
  font-size: 21px;
  margin: 34px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.help-md h4 { text-transform: uppercase; letter-spacing: 0.5px; font-size: 12.5px; }
.help-md table {
  display: table;
  width: 100%;
  font-size: 15px;
  margin: 0 0 20px;
}
.help-md th, .help-md td { padding: 9px 14px; vertical-align: top; }
.help-md td:first-child { width: 220px; }
.help-md hr { margin: 34px 0 26px; }