/* Switchyard. Tokens and rules are described in docs/STYLEGUIDE.md; /styleguide shows them rendered. */

/* ---------- Tokens ---------- */
:root {
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F6F7F9;
  --color-bg-muted: #ECEEF2;
  --color-border: #E3E5EA;
  --color-text: #16181D;
  --color-text-muted: #666B77;
  --color-text-faint: #9A9FAA;
  --color-accent: #2F54EB;
  --color-accent-hover: #2445D0;
  --color-on-accent: #FFFFFF;
  --color-accent-subtle: #EEF1FE;
  --color-accent-text: #2441C7;
  --color-mention: #FFF3D1;
  --color-mention-text: #7A5300;
  --color-success: #1F7A4D;
  --color-warning: #9A6200;
  --color-danger: #C43D2B;
  --shadow-menu: 0 8px 24px rgb(22 24 29 / 0.10), 0 1px 2px rgb(22 24 29 / 0.06);

  --avatar-0-bg: #E3E9FF; --avatar-0-fg: #2441C7;
  --avatar-1-bg: #DDF3EA; --avatar-1-fg: #17694A;
  --avatar-2-bg: #F7E1EE; --avatar-2-fg: #9A2F6C;
  --avatar-3-bg: #FBE7D6; --avatar-3-fg: #9A4B10;
  --avatar-4-bg: #EAE3FB; --avatar-4-fg: #5B3DB8;
  --avatar-5-bg: #DCEFF7; --avatar-5-fg: #1D6A8C;

  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 12px; --leading-xs: 16px;
  --text-sm: 13px; --leading-sm: 18px;
  --text-md: 15px; --leading-md: 22px;
  --text-lg: 17px; --leading-lg: 24px;
  --text-xl: 26px; --leading-xl: 32px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-full: 999px;
  --sidebar-width: 248px;
  /* Conversations and pages read in one centred column; the header lines up with it. */
  --column: 820px;
  --thread-width: 400px;
  --duration: 120ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111317;
    --color-bg-subtle: #16191E;
    --color-bg-muted: #20242B;
    --color-border: #272B33;
    --color-text: #E8EAED;
    --color-text-muted: #9AA0AB;
    --color-text-faint: #6B717C;
    --color-accent: #7C93FF;
    --color-accent-hover: #96A8FF;
    --color-on-accent: #111317;
    --color-accent-subtle: #1C2340;
    --color-accent-text: #A9B7FF;
    --color-mention: #3A2F14;
    --color-mention-text: #F2D27A;
    --color-success: #59C48D;
    --color-warning: #E8B54D;
    --color-danger: #F07A6A;
    --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.45);

    --avatar-0-bg: #222B52; --avatar-0-fg: #AEBBFF;
    --avatar-1-bg: #183A2D; --avatar-1-fg: #7BD6AB;
    --avatar-2-bg: #43203A; --avatar-2-fg: #F0A3CF;
    --avatar-3-bg: #46291A; --avatar-3-fg: #F2B27F;
    --avatar-4-bg: #2E2552; --avatar-4-fg: #C3B2FF;
    --avatar-5-bg: #183747; --avatar-5-fg: #8DCFEA;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--text-md) / var(--leading-md) var(--font-sans);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-muted); border-radius: 4px; padding: 1px 4px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); }
.meta { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }

/* ---------- Buttons and fields ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm); font: 500 var(--text-md) / 1 var(--font-sans); cursor: pointer;
  transition: background var(--duration), border-color var(--duration); white-space: nowrap; }
.button.primary { background: var(--color-accent); color: var(--color-on-accent); }
.button.primary:hover { background: var(--color-accent-hover); text-decoration: none; }
.button.secondary { background: var(--color-bg-muted); color: var(--color-text); }
.button.secondary:hover { border-color: var(--color-border); text-decoration: none; }
.button.small { height: 30px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.button:disabled { opacity: 0.6; cursor: default; }
.text-button { background: none; border: 0; padding: 0; color: var(--color-text-muted); font: 500 var(--text-sm) / var(--leading-sm) var(--font-sans);
  cursor: pointer; }
.text-button:hover { color: var(--color-text); text-decoration: underline; }
.text-button.danger { color: var(--color-danger); }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text-muted); cursor: pointer; }
.icon-button:hover { background: var(--color-bg-muted); color: var(--color-text); }

.field { display: grid; gap: var(--space-1); }
.field label, .label { font: 500 var(--text-sm) / var(--leading-sm) var(--font-sans); }
input[type="text"], input:not([type]), textarea { width: 100%; min-width: 0; font: inherit; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); transition: border-color var(--duration); }
select { width: 100%; min-width: 0; height: 38px; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 var(--space-3); transition: border-color var(--duration); }
.checks { border: 0; margin: 0; padding: 0; gap: var(--space-2); }
.checks legend { padding: 0; margin-bottom: var(--space-1); }
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.agent-form { display: grid; gap: var(--space-5); }
/* The model picker: closed, a select's height, border and focus ring; open, the models under their providers, read and
   written prices right-aligned in columns. */
.picker { position: relative; }
.picker-trigger { width: 100%; height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; column-gap: var(--space-3);
  padding: 0 var(--space-3); font: inherit; color: var(--color-text); text-align: left; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--duration); }
.picker-trigger:focus-visible, .picker-trigger[aria-expanded="true"] { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.picker-chosen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-provider, .picker-price, .picker-placeholder, .picker-retired { color: var(--color-text-muted); }
.picker-price { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.picker-chevron { width: 16px; height: 16px; color: var(--color-text-muted); }
.picker-panel { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + var(--space-1)); padding: var(--space-1); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.picker-panel.up { top: auto; bottom: calc(100% + var(--space-1)); }
.picker-list { max-height: 320px; overflow-y: auto; outline: none; }
.picker-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px 64px; column-gap: var(--space-3); align-items: center; padding: 0 var(--space-2); }
.picker-columns { padding-top: var(--space-1); padding-bottom: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.picker-columns > :nth-child(n+3), .picker-cost { text-align: right; font-variant-numeric: tabular-nums; }
.picker-group { display: block; padding: var(--space-2) var(--space-2) var(--space-1) calc(var(--space-2) + 16px + var(--space-3));
  font: 500 var(--text-xs) / var(--leading-xs) var(--font-sans); letter-spacing: 0.04em; color: var(--color-text-muted); }
.picker-option { min-height: 36px; border-radius: var(--radius-sm); cursor: pointer; }
.picker-option.highlighted { background: var(--color-bg-muted); }
.picker-option[aria-selected="true"] { background: var(--color-accent-subtle); }
.picker-option[aria-selected="true"] .picker-name { color: var(--color-accent-text); }
.picker-check { width: 16px; height: 16px; color: var(--color-accent-text); visibility: hidden; }
.picker-option[aria-selected="true"] .picker-check { visibility: visible; }
.picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
textarea { resize: vertical; }
::placeholder { color: var(--color-text-faint); }

.count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent);
  font: 600 var(--text-xs) / 18px var(--font-sans); text-align: center; }
.tag { font: 500 var(--text-xs) / var(--leading-xs) var(--font-sans); color: var(--color-text-muted); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 1px var(--space-2); }

.avatar { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 600 var(--text-sm) / 1 var(--font-sans);
  background: var(--av-bg); color: var(--av-fg); }
.avatar.xs { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; }
.avatar.agent { border-radius: var(--radius-full); }
.agent-glyph { width: 60%; height: 60%; }
.avatar.xs .agent-glyph { width: 75%; height: 75%; }
.avatar.lg { width: 44px; height: 44px; border-radius: 12px; font-size: var(--text-lg); }
.av-0 { --av-bg: var(--avatar-0-bg); --av-fg: var(--avatar-0-fg); }
.av-1 { --av-bg: var(--avatar-1-bg); --av-fg: var(--avatar-1-fg); }
.av-2 { --av-bg: var(--avatar-2-bg); --av-fg: var(--avatar-2-fg); }
.av-3 { --av-bg: var(--avatar-3-bg); --av-fg: var(--avatar-3-fg); }
.av-4 { --av-bg: var(--avatar-4-bg); --av-fg: var(--avatar-4-fg); }
.av-5 { --av-bg: var(--avatar-5-bg); --av-fg: var(--avatar-5-fg); }

.notice, .problem { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--leading-sm); }
.notice { background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg)); color: var(--color-success); }
.problem { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-bg)); color: var(--color-danger); }

/* ---------- App frame ---------- */
.app { height: 100%; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--color-bg-subtle); border-right: 1px solid var(--color-border); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 56px; padding: 0 var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 var(--text-md) / 1 var(--font-sans); letter-spacing: -0.01em;
  color: var(--color-text); }
.brand:hover { text-decoration: none; }
.logo { flex: none; display: block; }
.logo-tile { fill: var(--color-accent); }
.logo-track { stroke: var(--color-on-accent); }
.logo-signal { fill: var(--color-on-accent); }
/* Live updates are the normal case and say nothing; only a lost or slow connection shows, as one line above you. */
.status { display: flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-2) var(--space-2); padding: 6px var(--space-3);
  border-radius: var(--radius-sm); background: var(--color-bg-muted); color: var(--color-text-muted);
  font: 500 var(--text-xs) / var(--leading-xs) var(--font-sans); white-space: nowrap; }
.status[hidden] { display: none; }
.status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-faint); }
.status[data-state="polling"] { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg)); color: var(--color-warning); }
.status[data-state="polling"] .status-dot { background: var(--color-warning); }

.nav { flex: 1; overflow-y: auto; padding: 0 var(--space-2) var(--space-4); display: grid; align-content: start; gap: var(--space-4); }
.nav-section { display: grid; gap: 1px; }
.nav-label { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--space-2) var(--space-1);
  font: 500 var(--text-xs) / var(--leading-xs) var(--font-sans); letter-spacing: 0.04em; color: var(--color-text-muted); }
.nav-label a { color: var(--color-text-muted); letter-spacing: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
/* A grid's implicit column grows to its widest row, so a long name would widen the sidebar instead of truncating. */
.nav, .nav-section, .nav-list { grid-template-columns: minmax(0, 1fr); }
.nav-form { margin: 0; }
.nav-item { width: 100%; height: 32px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text); font: 400 var(--text-md) / var(--leading-md) var(--font-sans); text-align: left; cursor: pointer;
  transition: background var(--duration); }
.nav-item:hover { background: var(--color-bg-muted); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.nav-item.unread .nav-name { font-weight: 600; }
.nav-item[aria-current="page"] .count { display: none; }
.nav-prefix { position: relative; flex: none; width: 20px; display: grid; place-items: center; color: var(--color-text-faint); }
.nav-item[aria-current="page"] .nav-prefix { color: inherit; }
.nav-prefix > .agent-glyph { width: 16px; height: 16px; }
/* A chat with others shows the first of them, and how many more are in it on the avatar's corner, so every name starts
   at the same place. The ring takes the row's background, so the count stands clear of the avatar. */
.nav-more { position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 12px; padding: 0 3px; box-sizing: border-box; border-radius: var(--radius-full);
  background: var(--color-bg); color: var(--color-text-muted); font: 600 8px / 12px var(--font-sans); text-align: center;
  box-shadow: 0 0 0 1.5px var(--color-bg-subtle), inset 0 0 0 1px var(--color-border); }
.nav-item:hover .nav-more { box-shadow: 0 0 0 1.5px var(--color-bg-muted), inset 0 0 0 1px var(--color-border); }
.nav-item[aria-current="page"] .nav-more { box-shadow: 0 0 0 1.5px var(--color-accent-subtle), inset 0 0 0 1px var(--color-border); }
.nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plus-glyph { width: 14px; height: 14px; display: block; margin: 0 auto; }
.nav-item.new-chat:not([aria-current="page"]) { color: var(--color-text-muted); }
.nav-empty { padding: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.sidebar-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.sidebar-foot .me-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.scrim { display: none; }

/* ---------- Conversation ---------- */
.chat { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: var(--space-3); min-height: 56px;
  padding: var(--space-2) max(var(--space-5), calc((100% - var(--column)) / 2));
  border-bottom: 1px solid var(--color-border); }
.chat-title { flex: 1; min-width: 0; display: grid; }
.chat-title h1 { font-size: var(--text-lg); line-height: var(--leading-lg); }
.chat-title .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle { display: none; }
.notices { display: grid; gap: var(--space-2); padding: 0 var(--space-5); }
/* Each row of the conversation is the column plus its gutters, centred. */
.msg, .notices, .composer, .timeline-empty { width: 100%; max-width: calc(var(--column) + 2 * var(--space-5)); margin-left: auto; margin-right: auto; }
.notices:not(:empty) { padding-top: var(--space-3); }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 10; width: 272px; display: grid; gap: var(--space-3);
  padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.menu-body hr { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

.timeline { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: var(--space-4) 0; display: flex; flex-direction: column; }
/* A short conversation sits just above the composer, where the eye already is, not at the top of the screen. */
.timeline > :first-child { margin-top: auto; }
.timeline-empty { padding: var(--space-6) var(--space-5); color: var(--color-text-muted); text-align: center; }
.msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); padding: 6px var(--space-5) 2px;
  transition: background var(--duration); }
.msg + .msg:not(.cont) { margin-top: var(--space-2); }
.msg:hover, .msg:focus-within { background: var(--color-bg-subtle); }
.msg.arrived { animation: arrive 1.2s ease-out; }
@keyframes arrive { from { background: var(--color-accent-subtle); } to { background: transparent; } }
/* Like the sidebar's lists: an unsized grid column grows to its widest line, so a long line of code would push the
   message past the column instead of scrolling inside its block. */
.msg-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.msg-head { display: flex; align-items: baseline; gap: var(--space-2); }
.msg-author { font-weight: 600; }
.msg-time { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-faint); }
.msg-time:hover { color: var(--color-text-muted); }
.msg-edited { font-size: var(--text-xs); color: var(--color-text-faint); }
.msg.cont { padding-top: 1px; padding-bottom: 1px; }
.msg.cont > .avatar { visibility: hidden; height: 0; }
.msg.cont .msg-head { position: absolute; left: 0; width: calc(var(--space-5) + 36px); top: 4px; justify-content: flex-end; padding-right: 2px;
  white-space: nowrap; opacity: 0; }
.msg.cont .msg-head .msg-author, .msg.cont .msg-head .msg-edited { display: none; }
.msg.cont:hover .msg-head, .msg.cont:focus-within .msg-head { opacity: 1; }
.msg.cont .msg-time { font-size: 10.5px; letter-spacing: -0.01em; }

.msg-text { overflow-wrap: anywhere; }
.msg-text.gone { color: var(--color-text-faint); font-style: italic; }
.msg-text p { margin: 0; }
.msg-text p + p, .msg-text ul, .msg-text ol, .msg-text pre, .msg-text blockquote { margin: var(--space-1) 0 0; }
.msg-text ul, .msg-text ol { padding-left: var(--space-5); }
/* Messages sit in the timeline list, so a list in a message would otherwise draw as a nested one. */
.msg-text ul { list-style-type: disc; }
.msg-text ul ul { list-style-type: circle; }
.msg-text pre { background: var(--color-bg-muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); overflow-x: auto; }
.msg-text pre code { background: none; padding: 0; }
.msg-text blockquote { border-left: 2px solid var(--color-border); padding-left: var(--space-3); color: var(--color-text-muted); }
.mention { background: var(--color-mention); color: var(--color-mention-text); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.mention.self { background: var(--color-accent-subtle); color: var(--color-accent-text); }

/* A message's actions float on its top edge on hover: small icon buttons on one bordered strip. Editing replaces the
   text where it stands, so the message is never shown twice; Delete asks in a small menu first. */
.msg-actions { position: absolute; z-index: 2; top: calc(-1 * var(--space-3)); right: var(--space-5); display: flex; gap: 2px; padding: 2px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); opacity: 0; pointer-events: none;
  transition: opacity var(--duration); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg-actions:has(details[open]) { opacity: 1; pointer-events: auto; }
.msg-action { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 4px; background: none; color: var(--color-text-muted);
  cursor: pointer; list-style: none; transition: background var(--duration), color var(--duration); }
.msg-action::-webkit-details-marker { display: none; }
.msg-action:hover, details[open] > .msg-action { background: var(--color-bg-muted); color: var(--color-text); }
.msg-action.danger:hover, details[open] > .msg-action.danger { color: var(--color-danger); }
.msg-delete { position: relative; }
/* Copy needs the page's script; for a moment after it, a check in the success colour says the text is copied. */
.msg-copy, .msg-copy .copied-icon, .msg-copy.copied .copy-icon { display: none; }
.js .msg-copy { display: grid; }
.msg-copy.copied .copied-icon { display: block; }
.msg-copy.copied, .msg-copy.copied:hover { color: var(--color-success); }
.delete-confirm { width: 248px; gap: var(--space-2); padding: var(--space-3); }
.delete-confirm p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.delete-confirm .text-button { justify-self: start; }
/* With the page's script a message's menu floats over everything, the header and the composer included, fixed to the window
   beside its button; it is hidden until placed so it never shows where it does not belong. */
.js .msg-actions .menu-body { position: fixed; z-index: 30; max-height: calc(100vh - 2 * var(--space-2)); overflow-y: auto; }
.js .msg-actions details:not([data-placed]) > .menu-body { visibility: hidden; }
/* Starting a thread is a button only without the page's script, and only in the conversation's own timeline for its
   members; with the script, clicking the message opens its thread. */
.msg-reply { display: none; }
[data-threads="true"] > .timeline .msg-reply { display: block; }
.js .msg-reply, .js [data-threads="true"] > .timeline .msg-reply { display: none; }
.js [data-threads="true"] > .timeline .msg:not(.pending):not(.deleted), .js main.chat[data-threads] > .timeline .msg:has(.msg-thread) { cursor: pointer; }
.js main.chat[data-threads] > .timeline .msg :is(.msg-text, .edit-form) { cursor: auto; }
.msg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Editing: the field takes the text's place, with the message's own styles, and the other actions step aside. */
.msg:has(.msg-edit[open]) { background: var(--color-bg-subtle); }
.msg:has(.msg-edit[open]) .msg-main > :is(.msg-text, .msg-thread) { display: none; }
.msg-actions:has(.msg-edit[open]) { position: static; grid-column: 2; display: block; padding: 0; margin: 2px 0 var(--space-1); border: 0; background: none;
  opacity: 1; pointer-events: auto; }
.msg-actions:has(.msg-edit[open]) > :not(.msg-edit), .msg-edit[open] > summary { display: none; }
.edit-form { display: grid; gap: var(--space-2); }
.edit-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.edit-note { flex: 1; min-width: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.edit-note .edit-keys { display: none; }
.js .edit-note .edit-keys { display: inline; }
.edit-left.soon { color: var(--color-warning); }
.edit-form .problem { margin: 0; }

/* Composer */
.composer { position: relative; padding: var(--space-3) var(--space-5) var(--space-4); }
.composer .problem { margin-bottom: var(--space-2); }
.composer-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
  transition: border-color var(--duration), box-shadow var(--duration); }
.composer-box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.composer-input { padding: var(--space-2) var(--space-2) 0; }
.composer-input textarea { display: block; width: 100%; border: 0; padding: 6px var(--space-2); resize: none; max-height: 240px; background: transparent; }
.composer-input textarea:focus { box-shadow: none; }
.composer-input textarea[hidden], .edit-form textarea[hidden] { display: none; }
/* The rich field shows the message as it will be sent, with the same styles as a sent message. */
.rich-field { position: relative; min-height: 34px; max-height: 240px; overflow-y: auto; padding: 6px var(--space-2); outline: none; cursor: text;
  overflow-wrap: anywhere; }
.rich-field.empty::before { content: attr(data-placeholder); position: absolute; color: var(--color-text-faint); pointer-events: none; }
.rich-field > :first-child { margin-top: 0; }
.rich-field a { cursor: text; }
.rich-field [contenteditable="false"] { cursor: default; }
.edit-form textarea { width: 100%; resize: vertical; }
.edit-form .rich-field { min-height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
  padding: var(--space-2) var(--space-3); transition: border-color var(--duration), box-shadow var(--duration); }
.edit-form .rich-field:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); }
.composer.enhanced .composer-bar { justify-content: space-between; }
.toolbar { display: none; align-items: center; gap: 2px; min-width: 0; }
.composer.enhanced .toolbar { display: flex; }
.composer-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.tool { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text-muted); cursor: pointer; font: 600 var(--text-sm) / 1 var(--font-sans); transition: background var(--duration), color var(--duration); }
.tool:hover:not(:disabled) { background: var(--color-bg-muted); color: var(--color-text); }
.tool:disabled { opacity: 0.35; cursor: default; }
.tool-glyph { font: 500 var(--text-md) / 1 var(--font-sans); }
.tool-gap { flex: none; width: 1px; height: 16px; margin: 0 var(--space-1); background: var(--color-border); }
.tool[aria-pressed="true"] { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.composer-notes { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.composer-notes:has(:not([hidden])) { margin-top: var(--space-2); }
.composer-warning { color: var(--color-warning); font-size: var(--text-sm); line-height: var(--leading-sm); }
.composer-count { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: tabular-nums; }
.composer-count.over { color: var(--color-danger); font-weight: 600; }

.suggestions { position: absolute; z-index: 10; left: var(--space-5); bottom: calc(100% - var(--space-2)); width: min(380px, calc(100% - 2 * var(--space-5)));
  max-height: 296px; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.link-editor { position: absolute; z-index: 10; left: var(--space-5); bottom: calc(100% - var(--space-2)); width: min(420px, calc(100% - 2 * var(--space-5)));
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.link-editor[hidden] { display: none; }
.link-editor input { flex: 1; padding: var(--space-1) var(--space-2); }
.link-editor .text-button { white-space: nowrap; }
.suggestion { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.suggestion[aria-selected="true"] { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.suggestion-name { font-weight: 500; white-space: nowrap; }
.suggestion-note { margin-left: auto; padding-left: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
  text-align: right; }
.suggestion.muted-option .suggestion-name { color: var(--color-text-muted); font-weight: 400; }
.suggestion-glyph { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--color-bg-muted);
  color: var(--color-text-muted); font: 600 11px / 1 var(--font-sans); }

/* Messages on their way */
.msg.pending .msg-text { color: var(--color-text-muted); }
.msg-state { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-faint); }
.msg.failed .msg-state { color: var(--color-danger); }
.msg-status { display: flex; align-items: baseline; gap: var(--space-3); }
.msg-retry { display: flex; gap: var(--space-3); }
.draft-mark { color: var(--color-text-faint); font-size: var(--text-xs); }
.channel-link { color: var(--color-accent); font-weight: 500; }
.mention.everyone { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.composer-off { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: calc(100% - 2 * var(--space-5));
  max-width: var(--column); margin: var(--space-3) auto var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* ---------- Pages ---------- */
.page-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.page-column { max-width: var(--column); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.list > li:first-child { border-top: 1px solid var(--color-border); }
.list-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.list-title { font-weight: 600; color: var(--color-text); }
.explain { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); max-width: 640px; }
.section-title { font-size: var(--text-md); }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); position: relative; }
.history-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
.history-version { display: grid; place-items: center; height: 24px; border-radius: var(--radius-full); background: var(--color-bg-muted);
  font: 500 var(--text-xs) / 1 var(--font-mono); color: var(--color-text-muted); }
.history-item.e-posted .history-version { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.history-item.e-deleted .history-version { background: color-mix(in srgb, var(--color-danger) 14%, var(--color-bg)); color: var(--color-danger); }
.history-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-width: 0; }
.history-type { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
details > summary { cursor: pointer; }
.history-body details > summary { color: var(--color-text-muted); font-size: var(--text-sm); }
.code { margin: var(--space-2) 0 0; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3); overflow-x: auto; font: var(--text-xs) / var(--leading-xs) var(--font-mono); }
.quote { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) 0; }
.quote .msg:hover { background: none; }

/* ---------- Sign in ---------- */
.signin { min-height: 100%; display: grid; place-items: center; padding: var(--space-7) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-7) max(var(--space-4), env(safe-area-inset-left, 0px)); }
.signin-card { width: 100%; max-width: 440px; display: grid; gap: var(--space-5); }
.signin-card h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
.signin-card .lede { color: var(--color-text-muted); }
.lockup { display: flex; align-items: center; gap: var(--space-3); }
.lockup-name { font: 600 var(--text-lg) / 1 var(--font-sans); letter-spacing: -0.01em; }
.people { display: grid; gap: var(--space-2); }
.person { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font: 500 var(--text-md) / 1 var(--font-sans); cursor: pointer;
  transition: border-color var(--duration), background var(--duration); text-align: left; }
.person:hover { border-color: var(--color-accent); background: var(--color-bg-subtle); }
.person .arrow { margin-left: auto; color: var(--color-text-faint); }
a.person:hover { text-decoration: none; }
.person .avatar.idp { --av-bg: var(--color-accent); --av-fg: var(--color-on-accent); }

/* ---------- Style guide page ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.swatch { display: grid; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); }
.swatch code { background: none; padding: 0; color: var(--color-text-muted); }
.swatch-chip { height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.specimen { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .app, .app.with-thread { grid-template-columns: minmax(0, 1fr); }
  .thread-panel { position: fixed; inset: 0; z-index: 12; border-left: 0; background: var(--color-bg); padding-top: env(safe-area-inset-top, 0px); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(85vw, 300px); transform: translateX(-100%); transition: transform 180ms ease;
    padding-top: env(safe-area-inset-top, 0px); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / 0.32); }
  .nav-toggle { display: inline-grid; }
  .chat-head, .notices, .composer, .page-body { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .msg, .thread-divider { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .msg.cont .msg-head { width: calc(var(--space-4) + 36px); }
  .msg-actions { right: var(--space-4); }
  /* Without hover, tapping a message opens it beside the conversation, where your own keep Edit and Delete in view. */
  .thread-panel .msg-actions { top: var(--space-1); opacity: 1; pointer-events: auto; }
  .composer-off { width: calc(100% - 2 * var(--space-4)); }
  .suggestions, .link-editor, .participant-menu { left: var(--space-4); width: calc(100% - 2 * var(--space-4)); }
  .composer.enhanced .toolbar { overflow-x: auto; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .tool-more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .msg.arrived { animation: none; }
}
.stack { display: grid; gap: var(--space-2); }
.grow { flex: 1; }
.timeline.quote { flex: none; overflow: visible; }

/* ---------- Agents, chats, threads and tools ---------- */
.nav-label a[aria-current="page"] { color: var(--color-accent-text); }
/* A new chat names its people and agents at the top of the composer, as chips with a field to add more; the field opens a
   list of them above the composer, and a note says who will answer. */
.composer-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: 40px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4); border-bottom: 1px solid var(--color-border); }
.composer-to-label { flex: none; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); }
.participants { display: flex; flex: 1 1 240px; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; list-style: none; }
.participant { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: 2px 2px 2px 3px; border-radius: var(--radius-sm);
  background: var(--color-bg-muted); font: 600 var(--text-sm) / var(--leading-sm) var(--font-sans); }
.participant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participant-remove { display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: none;
  color: var(--color-text-muted); cursor: pointer; transition: background var(--duration), color var(--duration); }
.participant-remove:hover, .participant-remove:focus-visible { background: var(--color-border); color: var(--color-text); }
.participant-remove svg { width: 12px; height: 12px; }
.participant-add { flex: 1 1 12ch; min-width: 12ch; }
/* The composer box already shows focus, so the field inside it draws none of its own. */
.composer-to .participant-input, .composer-to .participant-input:focus { width: 100%; padding: 3px 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: var(--color-text); font: var(--text-sm) / var(--leading-sm) var(--font-sans); }
.participant-input::placeholder { color: var(--color-text-faint); }
.composer-to-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); line-height: var(--leading-sm);
  color: var(--color-text-muted); }
.composer-to-note.warning { color: var(--color-warning); }
.participant-menu { position: absolute; z-index: 10; left: var(--space-5); bottom: calc(100% - var(--space-2)); width: min(380px, calc(100% - 2 * var(--space-5)));
  margin: 0; padding: var(--space-1); list-style: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu); outline: none; }
.participant-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer; }
.participant-option[aria-selected="true"] { background: var(--color-accent-subtle); }
.participant-option-text { display: grid; min-width: 0; }
.participant-option-name { font-weight: 500; }
.participant-option[aria-selected="true"] .participant-option-name { color: var(--color-accent-text); }
.participant-option-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.msg-tool { font-size: var(--text-sm); color: var(--color-text-muted); }
.msg-tool code { font: var(--text-sm) / 1 var(--font-mono); }
/* How an agent's answer was made: an action in the strip opens the steps as a timeline, then the tokens and cost. Every
   row is one line, cut short with an ellipsis, so the timeline always reads as rows under each other. */
.msg-steps { position: relative; }
.steps-pop { width: 440px; max-width: calc(100vw - 2 * var(--space-4)); box-sizing: border-box; display: block; padding: var(--space-3) var(--space-4) 14px;
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); cursor: auto; }
.steps-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); white-space: nowrap; }
.steps-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--color-text); }
.steps-facts { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.steps-none { margin: 0; }
/* The agents' conversation: a group per agent in turn, as one person's messages group in a conversation. */
.groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.group { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; }
.group > .avatar.sm { width: 24px; height: 24px; }
.group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--color-text); }
.group-items { grid-column: 2; display: grid; gap: var(--space-1); margin-top: 2px; }
.group-words { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
/* With the page's script, words longer than two lines are cut short until Show all. */
.js .group-words:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-more { justify-self: start; margin-top: -2px; font-size: var(--text-xs); line-height: var(--leading-xs); }
.group-event { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.group-looks > summary { list-style: none; width: fit-content; cursor: pointer; }
.group-looks > summary::-webkit-details-marker { display: none; }
.group-looks > summary:hover { color: var(--color-text); }
.group-chevron, .group-check { width: 12px; height: 12px; flex: none; }
.group-chevron { transition: transform var(--duration); }
.group-looks[open] .group-chevron { transform: rotate(90deg); }
.group-check { color: var(--color-text); }
.group-looks .looks { margin: 2px 0 0; padding-left: 18px; }
.channel-link:hover, .thread-link:hover { text-decoration: underline; }
.thread-link { color: var(--color-accent); font-weight: 500; }
/* A lookup a line: its glyph, what it looked at cut short, what came of it on the right. */
.looks { list-style: none; margin: 0; padding: 0; display: grid; }
.look { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: center; height: 22px; font-size: var(--text-xs); }
.look-glyph { width: 12px; height: 12px; }
.look-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.look-result { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps-usage { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.usage-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.usage-table th, .usage-table td { padding: 0; text-align: right; vertical-align: top; white-space: nowrap; line-height: 20px; color: var(--color-text); }
.usage-table th + th, .usage-table td + td { padding-left: var(--space-4); }
.usage-table thead th { padding-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.usage-table thead th.usage-agent { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.usage-table tbody td { padding-bottom: var(--space-2); }
.usage-table tfoot td { padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-weight: 600; }
.usage-table .usage-agent { width: 100%; max-width: 0; text-align: left; }
/* The avatars sit on the steps' 20 px icon column, so the table reads as part of the same tree. */
.usage-who { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; }
.usage-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.usage-model { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.usage-total { padding-left: 30px; }
/* Under a message with a thread: who replied, the latest first and overlapping, then the count, what is new and when. */
.msg-thread { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1);
  margin-top: var(--space-1); font: 500 var(--text-sm) / var(--leading-sm) var(--font-sans); }
.msg-thread:hover { text-decoration: none; }
.msg-thread:hover .thread-count { text-decoration: underline; }
.thread-avatars { display: inline-flex; }
.thread-avatars > * { box-shadow: 0 0 0 2px var(--color-bg); }
.thread-avatars > * + * { margin-left: -4px; }
.thread-more { height: 20px; min-width: 20px; padding: 0 4px; border-radius: 5px; display: grid; place-items: center;
  font: 600 11px / 1 var(--font-sans); background: var(--color-bg-muted); color: var(--color-text-muted); }
.thread-new { font: 600 var(--text-xs) / var(--leading-xs) var(--font-sans); color: var(--color-accent-text); background: var(--color-accent-subtle);
  border-radius: var(--radius-full); padding: 0 var(--space-2); }
.thread-last { font-weight: 400; color: var(--color-text-muted); }
/* A thread opens in a panel beside the conversation; the message it answers is marked where it was posted. */
.app.with-thread { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--thread-width); }
.thread-panel { min-width: 0; min-height: 0; border-left: 1px solid var(--color-border); }
.thread-panel .chat-head { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); gap: var(--space-2); }
.thread-panel .msg, .thread-panel .thread-divider { padding-left: var(--space-4); padding-right: var(--space-4); }
.thread-panel .composer { padding-left: var(--space-4); padding-right: var(--space-4); }
.thread-panel .composer-off { width: calc(100% - 2 * var(--space-4)); }
.thread-panel .suggestions, .thread-panel .link-editor { left: var(--space-4); width: calc(100% - 2 * var(--space-4)); }
/* In a thread, the message it answers needs no link to the thread it is already in. */
.thread-panel .msg-thread, .thread-page .msg-thread { display: none; }
/* The panel is narrow: like a phone, the composer keeps only the everyday tools. */
.thread-panel .tool-more { display: none; }
.thread-panel .composer.enhanced .toolbar { overflow-x: auto; scrollbar-width: none; }
/* The sidebar, a readable conversation and the thread panel need about 1180 px side by side. Below that, while a
   thread is open, the sidebar steps aside behind the menu button, as on a phone, and the conversation and the thread
   share the screen; the thread panel narrows a little before the conversation does. */
@media (max-width: 1180px) and (min-width: 769px) {
  .app.with-thread { grid-template-columns: minmax(0, 1fr) clamp(340px, 40vw, var(--thread-width)); }
  .app.with-thread .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width); transform: translateX(-100%);
    transition: transform 180ms ease; }
  body.nav-open .app.with-thread .sidebar { transform: none; box-shadow: var(--shadow-menu); }
  body.nav-open .app.with-thread .scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / 0.32); }
  .app.with-thread .nav-toggle { display: inline-grid; }
}
/* After the rule above, which it overrides: on a phone the thread covers the conversation, which keeps the whole width. */
@media (max-width: 768px) {
  .app.with-thread { grid-template-columns: minmax(0, 1fr); }
}
.chat-title h2 { font: 600 var(--text-lg) / var(--leading-lg) var(--font-sans); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.thread-open { background: var(--color-accent-subtle); }
.thread-divider { width: 100%; max-width: calc(var(--column) + 2 * var(--space-5)); margin: var(--space-3) auto 0; padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-3); font: 500 var(--text-xs) / var(--leading-xs) var(--font-sans); color: var(--color-text-muted); }
.thread-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }

/* ---------- Link previews ---------- */
/* What a linked page is about, under the message: a card with an accent edge, so it reads as the link's and not as
   something the author wrote. Several cards sit side by side and wrap, the same height in a row; one card alone keeps
   to a readable width. Its author can remove it; the button shows on hover, like the message's own actions. */
.link-previews { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-2);
  grid-template-columns: minmax(0, 520px); }
.link-previews.several { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); max-width: 720px; }
.link-preview { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-bg); }
.link-preview-site { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-preview-title { align-self: flex-start; font-weight: 500; overflow-wrap: anywhere; }
.link-preview-description { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.several .link-preview-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.link-preview-hide { position: absolute; top: var(--space-1); right: var(--space-1); opacity: 0; transition: opacity var(--duration); }
.link-preview-hide .icon-button { width: 24px; height: 24px; }
.msg:hover .link-preview-hide, .link-preview:focus-within .link-preview-hide { opacity: 1; }
@media (max-width: 768px) {
  .link-preview-hide { opacity: 1; }
}