@import url('/web/fonts/desk/desk.css');
/*
 * PureCloud: the application space (an app's page, the chat, two apps side by side, Typeset, the home),
 * drawn the way PureDesktop draws its desk. Loaded after web/theme.css on those pages and nowhere else:
 * the Plane keeps the console look of theme.css.
 *
 * The idiom is the desk's: a wallpaper; chrome and panels frosted over it; the work in a rounded pane inset
 * from the edges; pills for controls, the desk's faces (Schibsted Grotesk, Source Serif 4, JetBrains Mono),
 * navy ink and navy buttons, terracotta as the spark. The measures are the desk's (44px bar, 18px panes,
 * 12px insets) and the --glass-* names are the suite's (packages/ui/src/theme/glassTokens.ts), so a panel
 * here and a panel in an app frost the same way.
 *
 * The colour is PureCloud's own: where the desk's Garden is sage and cream, the cloud is eucalyptus and
 * cream, the same family a few degrees cooler, so the two are kin at a glance and still tell apart.
 */
:root {
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --bar: 44px;
  --row: 36px;
  --control: 30px;
  --radius: 6px;
  --pane-radius: 10px;
  --inset: 12px;

  --wallpaper-color: #e4ecec;
  --wallpaper:
    radial-gradient(1000px 700px at 12% 14%, oklch(0.86 0.05 200), transparent 62%),
    radial-gradient(780px 580px at 18% 96%, oklch(0.87 0.045 170 / 0.8), transparent 62%),
    radial-gradient(860px 620px at 88% 92%, oklch(0.9 0.045 70 / 0.95), transparent 60%),
    linear-gradient(160deg, #e6eeee 30%, #f6f1e6);

  --glass-blur: blur(28px) saturate(115%);
  --glass-panel: rgba(251, 253, 252, 0.64);
  --glass-panel-strong: rgba(251, 253, 252, 0.8);
  --glass-card: rgba(251, 253, 252, 0.6);
  --glass-well: rgba(16, 36, 44, 0.05);
  --glass-popover: rgba(251, 253, 252, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-edge-strong: rgba(16, 36, 44, 0.2);
  --glass-line: rgba(40, 64, 68, 0.1);
  --glass-ink-soft: rgba(16, 27, 56, 0.72);
  --glass-amber: #e8a06a;
  --glass-mint: #5fa872;
  --glass-shadow: 0 24px 60px rgba(30, 52, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(40, 64, 68, 0.08);
  --glass-sidebar: rgba(251, 253, 252, 0.35);

  --ground: var(--wallpaper-color);
  --sheet: #fbfcfa;
  --layer: var(--glass-well);
  --chrome: transparent;
  --ink: #101b38;
  --ink-2: #3b4661;
  --quiet: #5a6672;
  --faint: #8a90a0;
  --rule: var(--glass-line);
  --rule-strong: var(--glass-edge-strong);
  --hover: rgba(255, 255, 255, 0.45);
  --selected: rgba(255, 255, 255, 0.78);
  --accent: #101b38;
  --accent-ink: #1b2a52;
  --accent-soft: #e3eeec;
  --on-accent: #ffffff;
  --spark: #a8570f;
  --ok: #3f7a4f;
  --ok-soft: #e3ecdc;
  --warn: #a8570f;
  --warn-soft: #f4e2c9;
  --bad: #b23a2e;
  --bad-soft: #f6e1dc;
  --shell: var(--glass-panel);
  --shell-2: var(--hover);
  --shell-ink: var(--ink);
  --shell-quiet: var(--quiet);
  --shell-rule: var(--glass-edge);
  --focus: 0 0 0 2px var(--spark);
  --shadow: var(--glass-shadow);
  --mark-pure: #4a8a86;
  --avatar: #cfe3e1;
}
:root[data-theme="dark"] {
  --wallpaper-color: #12232a;
  --wallpaper:
    radial-gradient(900px 620px at 18% 22%, oklch(0.52 0.09 215 / 0.72), transparent 62%),
    radial-gradient(760px 560px at 80% 16%, oklch(0.48 0.08 180 / 0.6), transparent 60%),
    radial-gradient(720px 540px at 70% 94%, oklch(0.66 0.13 52 / 0.5), transparent 62%),
    linear-gradient(180deg, #152831, #0e1a20);
  --glass-blur: blur(24px) saturate(135%);
  --glass-panel: rgba(18, 34, 42, 0.62);
  --glass-panel-strong: rgba(26, 44, 52, 0.8);
  --glass-card: rgba(242, 248, 247, 0.06);
  --glass-well: rgba(0, 0, 0, 0.22);
  --glass-popover: rgba(22, 38, 46, 0.96);
  --glass-edge: rgba(242, 248, 247, 0.14);
  --glass-edge-strong: rgba(242, 248, 247, 0.24);
  --glass-line: rgba(242, 248, 247, 0.09);
  --glass-ink-soft: rgba(242, 248, 247, 0.74);
  --glass-amber: #e8b98a;
  --glass-mint: #a8d5b0;
  --glass-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(242, 248, 247, 0.1);
  --glass-sidebar: rgba(242, 248, 247, 0.04);
  --sheet: #172b33;
  --ink: #f3f7f6;
  --ink-2: rgba(243, 247, 246, 0.74);
  --quiet: rgba(243, 247, 246, 0.62);
  --faint: rgba(243, 247, 246, 0.42);
  --hover: rgba(242, 248, 247, 0.1);
  --selected: rgba(242, 248, 247, 0.14);
  --accent: #e8b98a;
  --accent-ink: #f2cfa8;
  --accent-soft: rgba(232, 185, 138, 0.16);
  --on-accent: #12232a;
  --spark: #e8b98a;
  --ok: #a8d5b0; --ok-soft: rgba(168, 213, 176, 0.14);
  --warn: #e8b98a; --warn-soft: rgba(232, 185, 138, 0.14);
  --bad: #f09a8a; --bad-soft: rgba(240, 154, 138, 0.14);
  --mark-pure: #8fcbc4;
  --avatar: #2b4b52;
  color-scheme: dark;
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-blur: none; --glass-panel: #f7faf9; --glass-panel-strong: #fbfcfa; --glass-popover: #fff; }
  :root[data-theme="dark"] { --glass-panel: #172b33; --glass-panel-strong: #1b3038; --glass-popover: #1a2e36; }
}

/* --- The desk: wallpaper, type, focus ------------------------------------------------------ */
:root { font-family: var(--font); font-size: 13.5px; line-height: 1.45; }
/* The wallpaper is on the root as well as the body: nothing below the body is ever a flat strip. There is no
   dock on the cloud, so nothing is kept clear at the foot of a page. */
:root, body {
  background-color: var(--wallpaper-color);
  background-image: var(--wallpaper);
  background-attachment: fixed;
  color: var(--ink);
}
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--glass-edge-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--glass-edge-strong); border-radius: 5px; }

/* --- The bar: frosted, light in both themes, the desk's 44px ----------------------------------- */
.bar {
  height: var(--bar); padding: 0 8px 0 10px; gap: 4px;
  background: var(--glass-panel); color: var(--ink); border-bottom: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  font-size: 13px; position: relative; z-index: 40;
}
/* The wordmark, as the desk's: lowercase, one word, bold; "pure" in the cloud's eucalyptus, the rest in ink. */
.mark { gap: 0; padding: 0 8px 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); border-radius: var(--radius); }
.mark::before { display: none; }
.mark .pure { color: var(--mark-pure); }
.mark:hover { background: var(--hover); }
.bar-sep { background: var(--glass-edge-strong); height: 18px; opacity: 0.6; }
.app { gap: 8px; padding: 0 10px; font-weight: 600; color: var(--ink); }
.app-icon { width: 22px; height: 22px; border-radius: 5px; }
.doc { color: var(--quiet); font-weight: 400; }
.doc::before { content: "·"; margin-right: 10px; color: var(--faint); }
.doc:empty::before { content: none; }
.bar .button { background: transparent; border-color: var(--glass-edge-strong); color: var(--ink); }
.bar .button:hover { background: var(--hover); }
.bar .button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bar .button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.bar .link { color: var(--ink); }
.user-button { height: 32px; margin: 0 2px; padding: 0 10px 0 4px; border: 0; border-radius: var(--radius); gap: 8px; align-self: center; }
.user-button:hover, .user-button[aria-expanded="true"] { background: var(--hover); }
.avatar { width: 24px; height: 24px; font-size: 10px; color: var(--ink); background: var(--avatar); }
.icon-button { width: 32px; height: 32px; border-radius: var(--radius); color: var(--ink); align-self: center; }
.icon-button:hover, .icon-button[aria-expanded="true"] { background: var(--hover); }
.icon-button svg { stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.switcher-button { height: 32px; align-self: center; padding: 0 12px 0 10px; border-radius: var(--radius); opacity: 1; color: var(--ink); font-weight: 500; }
.switcher-button:hover, .switcher-button[aria-expanded="true"] { background: var(--hover); }

/* The bar's controls are the desk titlebar's: quiet icon buttons, a tooltip in the title, accent when pressed */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar .button.icon-only { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink-2); align-self: center; }
.bar .button.icon-only:hover { background: var(--hover); color: var(--ink); }
.bar .button.icon-only[aria-pressed="true"] { color: var(--spark); }
.bar .button.icon-only:disabled { opacity: 0.35; }
.bar .button.icon-only svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bar > .actions { gap: 2px; }

/* --- Controls: pills, the desk's fields ------------------------------------------------------- */
.button {
  height: var(--control); padding: 0 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
  border: 1px solid var(--glass-edge-strong); background: var(--glass-card); color: var(--ink);
}
.button:hover { background: var(--hover); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.button.ghost { border-color: transparent; background: transparent; color: var(--ink); }
.button.small { height: 26px; padding: 0 11px; font-size: 12px; }
.link { color: var(--ink); font-weight: 500; }
.link-button, .d-cmd, .d-more, .report-button:hover { color: var(--ink); }
.field, .switcher-search, .picker-name, .composer textarea, .drawer-foot textarea, .report-dialog textarea, .capture-note, .drawer-choose select {
  border: 1px solid var(--glass-line); border-radius: 8px; background: var(--glass-card); color: var(--ink);
}
.field:focus, .switcher-search:focus, .composer textarea:focus, .drawer-foot textarea:focus { border-color: var(--glass-edge-strong); outline: none; box-shadow: 0 0 0 3px var(--glass-well); }
.switch { background: var(--glass-edge-strong); }
.switch:checked { background: var(--ok); }
/* Status is a pill with a dot, as the desk shows it. */
.tag { border-radius: 4px; padding: 0 8px; border-color: transparent; background: var(--glass-well); color: var(--ink-2); }
.tag::before { border-radius: 50%; width: 7px; height: 7px; }

/* Menus drop from the bar as frosted popovers */
.menu-pop, .switcher-pop, .notice-list, .mention-menu {
  top: calc(100% + 4px); border: 1px solid var(--glass-edge); border-radius: 8px; background: var(--glass-popover); color: var(--ink);
  box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 6px;
}
.menu-head { padding: 10px 12px; border-bottom: 1px solid var(--glass-line); margin-bottom: 4px; }
.menu-label { padding: 8px 12px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.menu-item { height: 32px; padding: 0 12px; border-radius: 4px; width: 100%; }
.menu-item:hover { background: var(--hover); }
.segmented { margin: 2px 8px 8px; border-radius: var(--radius); border-color: var(--glass-line); height: 30px; }
.segmented button { background: transparent; color: var(--ink-2); }
.segmented button + button { border-left-color: var(--glass-line); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.switcher-pop { padding: 8px; gap: 6px; }
.switcher-search { padding: 7px 12px; border-radius: var(--radius); }
.switcher-item { border-radius: 4px; padding: 7px 8px; }
.switcher-item:hover, .switcher-item:focus-visible { background: var(--hover); }
.switcher-item.current { background: var(--selected); box-shadow: inset 0 0 0 1px var(--glass-edge-strong); }
.switcher-icon { border-radius: 6px; }
.switcher-icon.page { background: var(--ink); color: var(--sheet); font-family: var(--font); font-weight: 600; }
.placement button:hover, .placement button:focus-visible { background: var(--glass-panel); color: var(--ok); }
.switcher-foot { padding: 0 4px; }

/* The app-level controls, on the app's own header row (44px, as the desk's AppHeader), at its far end; the row
   itself belongs to the app, whose header keeps that end clear (web/app-cloud.css). */
main { position: relative; }
.app-actions { position: absolute; top: 0; right: 60px; height: 44px; z-index: 30; display: flex; align-items: center; gap: 6px; }
.app-actions[hidden] { display: none; }
.app-actions.aside { visibility: hidden; }
.app-actions .button.icon-only { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink-2); }
.app-actions .button.icon-only:hover { background: var(--hover); color: var(--ink); }
.app-actions .button.icon-only[aria-pressed="true"] { color: var(--spark); }
.app-actions .button.icon-only:disabled { opacity: 0.35; }
.app-actions .button.icon-only svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-actions .together { margin-right: 6px; }
/* With the drawer open the row ends where the drawer begins. */
main:has(> .drawer:not([hidden])) .app-actions { right: calc(380px + 60px); }

/* --- The work: a rounded pane inset from the desk, the drawer beside it ---------------------------- */
/* The work takes the whole space under the bar: no inset, no frame of its own. */
main { padding: 0; gap: 0; }
iframe#frame, #typeset, .split .pane { border: 0; border-radius: 0; box-shadow: none; background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
iframe#frame { color-scheme: normal; }
#typeset { background: #fff; overflow: hidden; }
/* Inside a split pane the page is already framed by the pane: it goes flush and shows the pane through. */
html.embedded, html.embedded body { background: transparent; }
html.embedded main { padding: 0; gap: 0; }
html.embedded iframe#frame, html.embedded #typeset, html.embedded .chat { border: 0; border-radius: 0; box-shadow: none; margin: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.embedded .bar { border-radius: 0; }
html.embedded .drawer { margin-left: 0; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
.pane-close { border-radius: var(--radius); color: var(--ink-2); background: transparent; }
.pane-close:hover { background: var(--hover); color: var(--ink); }

.drawer {
  width: 380px; border: 0; border-left: 1px solid var(--glass-edge-strong); border-radius: 0; box-shadow: none;
  background: var(--glass-panel-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden;
}
.drawer.drawer-shared { border-left-color: var(--glass-edge); }
.drawer-head { height: 44px; background: transparent; border-bottom: 1px solid var(--glass-line); padding: 0 10px 0 16px; }
.drawer-title { font-weight: 600; }
.drawer-choose select { font-size: 12px; padding: 3px 8px; }
.icon { color: var(--quiet); border-radius: var(--radius); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon:hover { background: var(--hover); color: var(--ink); }
.turn.you { background: var(--glass-well); border-radius: var(--radius); padding: 8px 12px; box-shadow: none; }
.approval { border-radius: var(--radius); border-color: var(--glass-line); background: var(--glass-card); }
.approval-args { border-radius: 4px; background: var(--glass-well); }
.divider { border-top-color: var(--glass-line); }
.drawer-foot { border-top: 1px solid var(--glass-line); }
.drawer-foot textarea { border-radius: var(--radius); padding: 9px 12px; }

/* The sign-in card and the join card: a frosted card on the desk, no console stripe */
.card {
  border: 1px solid var(--glass-edge); border-top: 1px solid var(--glass-edge); border-radius: var(--pane-radius);
  background: var(--glass-panel-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); padding: 28px 30px;
}
.card h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.card p { font-size: 13.5px; }
.key code { background: var(--glass-well); border-radius: 4px; }

/* Dialogs */
.about, .picker, .picker-dialog, .test-dialog {
  border: 1px solid var(--glass-edge); border-radius: var(--pane-radius); background: var(--glass-popover); color: var(--ink);
  box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.about::backdrop, .picker::backdrop, .picker-dialog::backdrop { background: rgba(16, 36, 44, 0.3); backdrop-filter: blur(4px); }
.about h2, .picker h2, .picker-dialog h2 { font-weight: 700; letter-spacing: -0.01em; }
.picker-row { border-radius: 4px; }
.picker-row:hover, .picker-row:focus-visible { background: var(--hover); }
.picker-row.chosen { background: var(--selected); box-shadow: inset 0 0 0 1px var(--glass-edge-strong); }
.picker-glyph.folder, .picker-glyph.package { border-color: var(--spark); background: color-mix(in srgb, var(--spark) 22%, transparent); }
.picker-list { border-radius: var(--radius); border-color: var(--glass-line); overflow: hidden; }
.picker-agent { background: transparent; border-bottom-color: var(--glass-line); }
.picker-agent:hover { background: var(--hover); }
.picker-agent.chosen { background: var(--selected); }
.picker-order { color: var(--spark); }
.capture-panel { border-radius: var(--radius); border-color: var(--glass-edge); background: var(--glass-popover); box-shadow: var(--glass-shadow); }
.capture-box { outline-color: var(--spark); }

/* Toasts: a frosted chip, tone as a tinted dot, never a stripe */
.toast {
  display: flex; align-items: center; gap: 10px; right: 24px; bottom: 24px; padding: 10px 16px 10px 14px; border-radius: var(--radius); border: 1px solid var(--glass-edge);
  background: var(--glass-popover); color: var(--ink); border-left: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.toast.bad { border-left: 1px solid var(--glass-edge); }
.toast.bad::before { background: var(--bad); }

/* --- The chat: the editorial desk in the browser ---------------------------------------------------
   Three surfaces with three weights, so the eye knows where it is: a frosted rail of people and
   conversations on the left, the conversation itself on a white sheet in the middle (what is read and
   written sits on paper), and a lighter frosted margin on the right. Nothing is a big button: the way
   in is the agents themselves, and the composer is part of the sheet. */
.chat { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden; }
/* The rail */
.chat-rail { flex: 0 0 272px; background: var(--glass-sidebar); border-right: 1px solid var(--glass-line); padding-top: 4px; }
.rail-label { display: flex; align-items: center; gap: 8px; padding: 16px 16px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.rail-label .grow { flex: 1; }
.rail-new { font: inherit; font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; height: 24px; padding: 0 9px; border: 1px solid var(--glass-line); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.rail-new:hover { background: var(--hover); border-color: var(--glass-edge-strong); }
.rail-item { margin: 0; width: 100%; padding: 7px 16px; border-radius: 0; gap: 11px; }
.rail-item:hover { background: var(--hover); }
.rail-item.current { background: var(--selected); box-shadow: none; }
.rail-item.current .rail-text strong { font-weight: 600; }
.rail-item.conversation { padding: 8px 16px; }
.rail-item.conversation .rail-text strong { font-weight: 500; font-size: 13px; }
.rail-item.conversation .rail-text .quiet { font-size: 11.5px; }
.rail-item.handed .rail-text .quiet { font-style: italic; }
.rail-foot { border-top: 1px solid var(--glass-line); font-size: 11.5px; }
.rail-empty { font-size: 12.5px; }
.agent-row .rail-item { padding-right: 36px; }
.agent-item .rail-text strong { font-weight: 500; }
.agent-item.in-chat { background: color-mix(in srgb, hsl(var(--hue) 45% 55%) 12%, transparent); }
.agent-item.answering { background: color-mix(in srgb, hsl(var(--hue) 45% 55%) 18%, transparent); box-shadow: none; }
.agent-item.answering .agent-mono { box-shadow: 0 0 0 2px var(--glass-panel-strong), 0 0 0 3.5px hsl(var(--hue) 50% 45%); }
.agent-new { border-radius: 4px; border-color: var(--glass-line); background: transparent; right: 12px; }
.agent-new:hover { color: var(--ink); border-color: var(--glass-edge-strong); }
.agent-mono { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; border-radius: 50%; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.agent-mono > svg { display: block; flex: none; }
/* The sheet */
.chat-thread { margin: 0; border: 0; border-right: 1px solid var(--glass-line); border-radius: 0; background: var(--sheet); box-shadow: none; overflow: hidden; }
.thread-head { background: transparent; border-bottom: 1px solid var(--glass-line); padding: 14px 28px 12px; gap: 14px; }
.thread-title h1 { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.conv-pin { border-radius: 4px; right: 12px; }
.conv-pin:hover { border-color: var(--glass-line); }
.thread-title .quiet { font-size: 12.5px; }
.thread-body { padding: 24px 28px 28px; }
.thread-empty { max-width: 560px; }
.thread-empty h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 8px; }
.thread-empty p { font-size: 14px; line-height: 1.5; }
.agent-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.agent-chip { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 6px; border: 1px solid var(--glass-line); border-radius: var(--radius); background: var(--glass-card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms ease, transform 120ms ease; }
.agent-chip:hover { background: color-mix(in srgb, hsl(var(--hue) 45% 55%) 14%, var(--sheet)); border-color: color-mix(in srgb, hsl(var(--hue) 50% 45%) 40%, transparent); transform: translateY(-1px); }
.agent-chip .agent-mono { border-radius: 50%; }
.msg.you .bubble { background: var(--glass-well); border: 0; border-radius: var(--radius); padding: 10px 15px; }
.msg.you.queued .bubble { border: 1px dashed var(--glass-edge-strong); background: transparent; }
.msg-who { font-size: 12.5px; }
.msg-text, .bubble { font-size: 14px; line-height: 1.6; }
.msg-text code, .bubble code { background: var(--glass-well); border-color: transparent; border-radius: 4px; padding: 1px 6px; }
.steps { border-radius: var(--radius); border-color: var(--glass-line); background: var(--glass-well); padding: 8px 12px; }
.step-dot, .working-dot, .d-dot, .notice-dot { border-radius: 50%; }
.approval-card { margin-left: 40px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--spark) 45%, var(--glass-line)); background: var(--glass-well); box-shadow: none; overflow: hidden; }
.approval-actions { background: var(--glass-well); border-top-color: var(--glass-line); }
.second-look, .live-thinking { border-radius: var(--radius); border-color: var(--glass-line); background: var(--glass-well); }
.second-look.concern { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
/* The composer is part of the sheet: one quiet rule, then the field without a box of its own */
.composer { background: transparent; border-top: 1px solid var(--glass-line); padding: 12px 28px 16px; gap: 6px; }
.composer-label { font-size: 12px; }
.composer textarea { border: 0; border-radius: 0; padding: 6px 0; background: transparent; font-size: 14.5px; line-height: 1.5; min-height: 48px; }
.composer textarea:focus { box-shadow: none; outline: none; }
.composer-row { padding-top: 4px; }
.composer-row .button { height: 32px; }
.composer-row .button.primary { padding: 0 16px; }
.attach-button { border-radius: var(--radius); width: 32px; height: 32px; }
.attach-button:hover { background: var(--hover); border-color: transparent; color: var(--ink); }
.attach-chip, .file-chip { border-radius: 4px; border-color: var(--glass-line); background: var(--glass-card); padding-left: 10px; }
.file-chip:hover { border-color: var(--glass-edge-strong); }
#input.dropping { outline: 2px dashed var(--spark); outline-offset: 4px; border-radius: 4px; }
.mention-menu { left: 28px; bottom: 100%; top: auto; margin-bottom: 4px; }
.mention { border-radius: 4px; }
.mention:hover, .mention.first { background: var(--hover); }
/* The margin */
.chat-margin { flex: 0 0 280px; background: transparent; border-left: 0; padding: 0; }
.margin-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--quiet); border-bottom: 0; padding: 20px 18px 6px; }
.margin-empty { padding: 6px 18px; font-size: 13px; line-height: 1.5; }
.margin-agent { margin: 0; padding: 12px 18px 14px; border: 0; border-top: 1px solid var(--glass-line); border-radius: 0; background: transparent; }
.margin-agent-head .quiet { font-size: 12px; }
.margin-facts { font-size: 12px; }
.table-wrap table.md-table, .display { border-radius: var(--radius); border-color: var(--glass-line); background: var(--glass-card); overflow: hidden; }
.d-head, .d-figure, .d-col, .d-table th, .d-table td { border-color: var(--glass-line); }
.d-foot, table.md-table th { background: var(--glass-well); border-color: var(--glass-line); }
.d-card { border-radius: 4px; border-color: var(--glass-line); background: var(--glass-card); }
.d-bar-track, .d-progress { border-radius: 999px; background: var(--glass-well); }
.d-bar, .d-progress > span { border-radius: 999px; }
.d-bar { background: var(--spark); }
.wake-line::before, .wake-line::after { background: var(--glass-line); }
.waiting-count, .notices-count { background: var(--spark); color: #fff; }
.notices-button { opacity: 0.9; color: var(--ink); border-radius: var(--radius); height: 32px; align-self: center; }
.notices-button:hover { background: var(--hover); }
.notice { border-radius: 4px; }
.notice:hover { background: var(--hover); }
.offline-chip { border-radius: 4px; }
.thinking-sign svg, .msg.live .msg-text > :last-child::after { color: var(--spark); background: var(--spark); }
.thinking-sign svg { background: none; }
.working-dot, .step.running .step-dot, .step.proposed .step-dot, .d-timeline .d-dot { background: var(--spark); }
.report-dialog textarea { border-radius: var(--radius); }
@media (max-width: 1100px) { .chat-thread { border-right: 0; } }

/* --- Two apps side by side: two panes on the desk with a handle between ----------------------------- */
.split { padding: 0; grid-template-columns: var(--a, 1fr) 7px var(--b, 1fr); }
.split .pane { overflow: hidden; }
.divider { background: var(--glass-well); border: 0; border-radius: 0; }
.divider::after { left: 50%; right: auto; top: 50%; width: 3px; height: 36px; margin: -18px 0 0 -1.5px; border: 0; border-radius: 2px; background: var(--glass-edge-strong); opacity: 0.8; }
.divider:hover, .divider:focus-visible, .split.dragging .divider { background: transparent; }
.divider:hover::after, .divider:focus-visible::after, .split.dragging .divider::after { background: var(--ink); opacity: 0.6; }
@media (max-width: 760px) {
  .split { grid-template-rows: 1fr 7px 1fr; }
  .divider::after { left: 50%; top: 50%; width: 36px; height: 3px; margin: -1.5px 0 0 -18px; }
}

/* --- The home: the desk itself ------------------------------------------------------------------ */
.desk { flex: 1; min-height: 0; overflow-y: auto; padding: 4vh 0 var(--inset); display: flex; flex-direction: column; align-items: center; gap: 28px; }
.desk[hidden] { display: none; }
.desk-greeting { text-align: center; max-width: 720px; padding: 0 24px; }
.desk-greeting h1 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4.6vw, 44px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); }
.desk-greeting p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.desk-pane {
  width: min(960px, calc(100% - 2 * var(--inset))); border: 1px solid var(--glass-edge); border-radius: var(--pane-radius); box-shadow: var(--glass-shadow);
  background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 8px 8px 12px;
}
.desk-label { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.desk-label .grow { flex: 1; }
.desk-label .link { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
/* Pick up: what the person was working on, one line each */
.recents { list-style: none; margin: 0; padding: 0 6px 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 8px; }
.recent { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; min-width: 0; }
.recent:hover { background: var(--hover); }
.recent-glyph { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.recent-text { display: flex; flex-direction: column; min-width: 0; }
.recent-text strong { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-text .quiet { font-size: 12px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; border-radius: var(--radius); color: var(--ink); text-decoration: none; text-align: center;
  border: 1px solid transparent; transition: background 120ms ease, transform 120ms ease;
}
.tile:hover { background: var(--hover); transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--spark); outline-offset: -2px; }
.tile img, .tile .tile-glyph { width: 56px; height: 56px; border-radius: 12px; display: block; }
.tile .tile-glyph { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--glass-edge-strong); background: var(--glass-panel-strong); color: var(--ink); }
.tile .tile-glyph svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile strong { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.tile span { font-size: 12px; color: var(--quiet); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desk-empty { grid-column: 1 / -1; margin: 0; padding: 20px 14px 24px; font-size: 13px; color: var(--quiet); }

@media (max-width: 960px) {
  :root { --inset: 8px; }
  .mark { font-size: 18px; }
}


/* --- The conversation column: the chat page inside an app's page (web/host.js) -----------------------------
   The same conversation as the full page, narrowed: no bar, no rail, no margin, on the column's own surface. */
html.column, html.column body { background: transparent !important; background-image: none !important; }
html.column .bar, html.column .chat-rail, html.column .chat-margin, html.column .rail-foot { display: none !important; }
html.column .chat { border: 0; box-shadow: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.column .thread-head { padding: 8px 14px; min-height: 44px; gap: 8px; }
html.column .thread-title h1 { font-size: 14px; }
html.column .thread-agents { display: none; }
html.column .thread-body, html.column .composer { padding-left: 14px; padding-right: 14px; }
html.column .thread-empty h2 { font-size: 18px; }
html.column .agent-chips { gap: 6px; }
#column-new { font-size: 12.5px; color: var(--accent-ink); flex: none; }

/* --- The shell: the conversation on the left, always; the stage on the right (web/shell.js) ----------------- */
.shell { flex: 1; min-height: 0; display: flex; padding: 0; gap: 0; }
.shell-left { width: clamp(320px, 28vw, 420px); flex: none; display: flex; border-right: 1px solid var(--glass-edge-strong); background: var(--glass-panel-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.shell-stage { flex: 1; min-width: 0; display: flex; background: var(--glass-panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.shell-left[hidden], .shell-stage[hidden] { display: none; }
.shell-left iframe { flex: 1; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }
/* A page on the stage has no bar of its own and no column: the shell carries both. */
html.stage, html.stage body { background: transparent !important; background-image: none !important; }
html.stage .bar, html.stage #assistant, html.stage #column { display: none !important; }
html.stage main { padding: 0; gap: 0; }
html.stage .desk-greeting { display: none; }
html.stage .desk { padding-top: 24px; }

/* The conversation's threads (General / the app on the stage), and its calm empty state. */
.thread-empty.calm { align-items: flex-start; text-align: left; margin: auto 0 0; padding: 0 4px 12px; }
.thread-empty.calm h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 4px; }
.thread-empty.calm p { margin: 0 0 14px; font-size: 13px; }
.ideas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.idea { font: inherit; font-size: 13px; color: var(--ink); background: var(--glass-card); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; text-align: left; }
.idea:hover { background: var(--hover); border-color: var(--glass-edge-strong); }

/* --- The stage: one pane, or two side by side, each built in on a canvas (web/stage-reveal.js) ------------- */
.shell-stage { position: relative; overflow: hidden; }
.stage-panes { position: absolute; inset: 0; display: flex; }
.stage-pane { position: relative; min-width: 260px; flex: 1 1 0; display: flex; flex-direction: column; overflow: hidden; transition: flex-grow 380ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 300ms ease; }
/* Opening beside: the new pane grows from nothing and fades up; closing, it eases shut. */
.stage-pane.opening, .stage-pane.closing { min-width: 0; }
.stage-pane.opening { animation: pane-in 380ms ease both; }
.stage-pane.closing { opacity: 0; pointer-events: none; }
@keyframes pane-in { from { opacity: 0; } to { opacity: 1; } }
.stage-panes.dragging .stage-pane { transition: none; }
@media (prefers-reduced-motion: reduce) { .stage-pane { transition: none; } .stage-pane.opening { animation: none; } }
.pane-body { position: relative; flex: 1; min-height: 0; }
.stage-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }
.stage-frame.incoming { opacity: 0; pointer-events: none; }
/* Two panes: each has a slim strip with its name, a swap and a close; the focused one is marked. */
.pane-strip { display: none; flex: none; align-items: center; gap: 7px; height: 28px; padding: 0 4px 0 10px; font-size: 12px; color: var(--quiet); border-bottom: 1px solid var(--glass-line); background: var(--glass-panel); }
.stage-panes.two .pane-strip { display: flex; }
.pane-strip .grow { flex: 1; }
.pane-icon { width: 16px; height: 16px; border-radius: 5px; }
.pane-icon[hidden] { display: none; }
.pane-name { font-weight: 600; color: var(--ink-2); }
.pane-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pane-button { border: 0; background: none; color: var(--quiet); font: inherit; font-size: 14px; width: 24px; height: 22px; border-radius: var(--radius); cursor: pointer; }
.pane-button:hover { background: var(--hover); color: var(--ink); }
.stage-pane.focused .pane-strip { color: var(--ink-2); box-shadow: inset 0 -2px 0 var(--spark); }
.stage-pane.focused .pane-name { color: var(--ink); }
/* While an agent's tool runs in a pane, its strip breathes. */
.stage-pane.working .pane-strip { background: color-mix(in srgb, var(--spark) 10%, var(--glass-panel)); }
.stage-divider { flex: none; width: 7px; margin: 0 -3px; z-index: 6; cursor: col-resize; position: relative; }
.stage-divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--glass-edge-strong); }
.stage-divider:hover::after { background: var(--spark); width: 2px; left: 2.5px; }
.stage-panes.dragging iframe { pointer-events: none; }

/* --- Wide: the conversation across the stage (shell.js setWide, chat.js column-mode, reading.js) ---------------- */
.shell-left { position: relative; }
.shell-left.wide-on { z-index: 5; }
.shell-left.wide-on iframe { position: absolute; inset: 0 auto 0 0; z-index: 1; }
#column-frame { transition: opacity 110ms ease; }
#column-frame.faded { opacity: 0; }
.wide-sheet { position: absolute; inset: 0 auto 0 0; background: var(--glass-popover); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--glass-edge-strong); box-shadow: 0 0 48px rgba(10, 30, 40, 0.08); transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.shell-stage { transition: opacity 300ms ease; }
.shell-stage.under { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { #column-frame, .wide-sheet, .shell-stage { transition: none; } }

/* The head's button: an icon to go wide; "Back to PureBook" once wide. */
.wide-button { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; font-size: 12.5px; color: var(--quiet); cursor: pointer; }
.wide-button:hover, .wide-button:focus-visible { color: var(--ink); border-color: var(--glass-line); }
.wide-button.back { padding: 0 10px; border-color: var(--glass-line); color: var(--ink); }
.wide-button[hidden] { display: none; }

/* Wide, the thread reads at reading size, in a measure down the middle. */
html.column.wide { --measure: 760px; }
/* Wide, your conversations down the left (PureDesktop's history rail, shared): drawn only while wide. */
.history-host { display: none; }
html.column.wide .history-host { display: contents; }
html.column.wide .thread-head, html.column.wide .thread-body, html.column.wide .composer { padding-left: max(28px, calc((100% - var(--measure)) / 2)); padding-right: max(28px, calc((100% - var(--measure)) / 2)); }
html.column.wide .thread-head { min-height: 52px; }
html.column.wide .thread-title h1 { font-size: 17px; }
html.column.wide .thread-body { font-size: 15.5px; line-height: 1.62; padding-top: 28px; padding-bottom: 48px; }
html.column.wide .msg-text p.heading { font-family: var(--serif); font-size: 18px; }
html.column.wide .display { max-width: none; }

/* Numbers in the words, drawn as what they are. */
.r-meter { display: inline-block; width: 30px; height: 5px; margin: 0 3px 0 5px; vertical-align: middle; border-radius: 999px; background: var(--glass-well); overflow: hidden; }
.r-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--spark); }
.r-meter.full > span { background: var(--ok); }
.r-ring { flex: none; }
.r-ring circle { fill: none; stroke-width: 5; }
.r-ring-track { stroke: var(--glass-well); }
.r-ring-fill { stroke: var(--spark); stroke-linecap: round; }
.r-ring.full .r-ring-fill { stroke: var(--ok); }
.r-ring.none .r-ring-fill { stroke: none; }
.r-glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 14px; animation: r-arrive 260ms ease both 80ms; }
.r-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: var(--radius); background: var(--glass-card); }
.r-tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.r-tile-text strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-tile-text span { font-size: 12.5px; color: var(--quiet); }
.r-meter { animation: r-arrive 260ms ease both 120ms; }
@keyframes r-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .r-glance, .r-meter { animation: none; } }

/* --- Displays: figures as a row of numbers, hairlines between; tables with their numbers set right --------------- */
.display { container-type: inline-size; }
.d-figures { --fit: 2; display: grid; grid-template-columns: repeat(min(var(--n, 2), var(--fit)), minmax(0, 1fr)); gap: 1px; background: var(--glass-line); }
@container (min-width: 460px) { .d-figures { --fit: 3; } }
@container (min-width: 720px) { .d-figures { --fit: 6; } }
.d-figure { border: 0; padding: 14px 16px 16px; background: var(--glass-popover); gap: 8px; justify-content: space-between; min-width: 0; }
.d-figure .d-label { font-size: 12px; line-height: 1.35; color: var(--quiet); }
.d-figure-value { display: flex; align-items: center; gap: 10px; }
.d-figure-value strong { font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.d-unit { font-size: 13px; color: var(--quiet); margin-left: -6px; align-self: flex-end; padding-bottom: 2px; }
.d-figure.zero .d-figure-value strong { color: var(--faint); }
.d-figure .r-ring circle { stroke-width: 4.5; }
.d-table th.num, .d-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.d-table td.num { color: var(--ink); }
.d-foot { flex-wrap: wrap; row-gap: 4px; }
.d-cmds { display: inline-flex; gap: 14px; margin-left: auto; white-space: nowrap; }
.d-head strong { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }

/* Wide, a display has the room for its numbers to be read across the room. */
html.column.wide .display { margin: 4px 0 8px; }
html.column.wide .d-head { padding: 14px 18px 12px; }
html.column.wide .d-head strong { font-size: 18px; }
html.column.wide .d-figure { padding: 18px 20px 20px; gap: 14px; }
html.column.wide .d-figure .d-label { font-size: 13px; }
html.column.wide .d-figure-value strong { font-size: 38px; }
html.column.wide .d-unit { font-size: 15px; }
html.column.wide .d-table { font-size: 14px; }
html.column.wide .d-table th, html.column.wide .d-table td { padding: 10px 18px; }
html.column.wide .d-foot { padding: 9px 18px; font-size: 12.5px; }
html.column.wide .d-figure .r-ring { width: 44px; height: 44px; }

/* Boards: columns hold their cards; an empty stage is a narrow column with its name and a quiet zero. */
.d-board { grid-auto-flow: row; grid-auto-columns: auto; }
.d-col { min-width: 0; }
.d-col.empty { background: color-mix(in srgb, var(--glass-well) 45%, transparent); }
.d-col-head { align-items: baseline; min-width: 0; }
.d-col-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-card { min-width: 0; overflow: hidden; }
.d-card-label, .d-card-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-col.empty .d-count { color: var(--faint); }
html.column.wide .d-col { padding: 14px; gap: 8px; }
html.column.wide .d-card { padding: 9px 11px; font-size: 14px; }
html.column.wide .d-col-head { font-size: 13px; }
.d-empties { display: none; margin: 0; padding: 8px 12px 10px; font-size: 12px; color: var(--faint); }
@container (max-width: 520px) {
  .d-board { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
  .d-col { border-right: 0; border-bottom: 1px solid var(--glass-line); }
  .d-col.empty { display: none; }
  .d-empties { display: block; }
}

/* --- The team (chat.js drawTeam): every agent in the column's head, lit once it has spoken, breathing at work ---- */
.team-row { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.team-row[hidden] { display: none; }
.thread-title .quiet:empty { display: none; }
.team-agent { position: relative; display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0.4; filter: saturate(0.35); transition: opacity 240ms ease, filter 240ms ease, transform 160ms ease; }
.team-agent > * { border-radius: 50%; }
.team-agent:hover, .team-agent:focus-visible { opacity: 1; filter: none; transform: translateY(-1px); }
.team-agent.lit { opacity: 1; filter: none; }
.team-agent.busy::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid hsl(var(--hue, 214) 55% 50%); animation: breathe 1.8s ease-in-out infinite; }
.team-agent.arriving { animation: team-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes team-arrive { from { opacity: 0.4; filter: saturate(0.35); transform: scale(0.8); } 60% { transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } }
.team-more { height: 22px; min-width: 26px; padding: 0 6px; margin-left: 2px; border: 1px solid var(--glass-line); border-radius: 999px; background: none; font: inherit; font-size: 11px; color: var(--quiet); cursor: pointer; }
.team-more:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .team-agent, .team-agent.arriving, .team-agent.busy::after { animation: none; transition: none; } }

.team-card { position: fixed; z-index: 50; width: 280px; padding: 14px; border: 1px solid var(--glass-edge-strong); border-radius: 8px; background: var(--glass-popover); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 12px 32px rgba(10, 30, 40, 0.14); display: flex; flex-direction: column; gap: 10px; }
.team-card[hidden] { display: none; }
.team-card-head { display: flex; align-items: center; gap: 10px; }
.team-card-head > div { display: flex; flex-direction: column; min-width: 0; }
.team-card-head .quiet { font-size: 12px; }
.team-card-purpose { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.team-card-apps { margin: 0; font-size: 12px; }
.team-card-actions { display: flex; gap: 8px; }
.team-card-list { display: flex; flex-direction: column; gap: 2px; margin: -6px; max-height: 320px; overflow-y: auto; }
.team-card-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.team-card-item:hover { background: var(--glass-well); }
.team-card-item > span { display: flex; flex-direction: column; min-width: 0; }
.team-card-item .quiet { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The specialist the stage calls for, offered above the composer. */
.team-hint { display: flex; margin: 0 0 6px; }
.team-hint[hidden] { display: none; }
.team-hint-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass-card); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: r-arrive 260ms ease both; }
.team-hint-chip > :first-child { border-radius: 50%; flex: none; }
.team-hint-chip:hover { color: var(--ink); border-color: var(--glass-edge-strong); }

/* Wide, the team's facts sit to the right of the words. */
html.column.wide .chat-margin { display: block !important; flex: 0 0 280px; padding: 24px 24px 24px 0; }
html.column.wide { --measure: 720px; }

/* --- The composer: one rounded field, the team's hint above it, the plane to send ------------------------------ */
.composer { border-top: 0; padding-top: 8px; gap: 6px; }
.composer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.composer-box { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 8px 12px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-popover); box-shadow: 0 1px 2px rgba(10, 30, 40, 0.04), 0 8px 24px rgba(10, 30, 40, 0.05); transition: border-color 160ms ease, box-shadow 160ms ease; }
.composer-box:focus-within { border-color: color-mix(in srgb, var(--mark-pure) 45%, var(--glass-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark-pure) 13%, transparent), 0 8px 24px rgba(10, 30, 40, 0.06); }
.composer textarea { resize: none; min-height: 44px; padding: 4px 2px; overflow-y: auto; }
.composer-box .attach-row { padding: 2px 0 4px; }
.composer-row { padding-top: 0; gap: 4px; }
.composer-row #answering { font-size: 12px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.composer-row .attach-button, .composer-row .wide-button { width: 30px; height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 8px; color: var(--quiet); }
.composer-row .attach-button:hover, .composer-row .wide-button:hover, .composer-row .wide-button:focus-visible { background: var(--glass-well); color: var(--ink); }
.composer-row .wide-button.back { width: auto; padding: 0 10px; border: 1px solid var(--glass-line); color: var(--ink); font-size: 12.5px; }
.composer-row #stop { height: 30px; padding: 0 12px; border-radius: 999px; background: none; border: 1px solid var(--glass-line); color: var(--ink-2); font-size: 12.5px; }
.send-button { --send-cut: var(--glass-well); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--glass-well); color: var(--faint); cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 120ms ease; }
.send-button svg { transform: translate(-1px, 1px); }
.send-button.ready { --send-cut: var(--mark-pure); background: var(--mark-pure); color: #fff; }
.send-button.ready:hover { --send-cut: color-mix(in srgb, var(--mark-pure) 82%, #000); background: color-mix(in srgb, var(--mark-pure) 82%, #000); }
.send-button:active { transform: scale(0.94); }
:root[data-theme="dark"] .send-button.ready { color: #10221f; }
:root[data-theme="dark"] .send-button.ready:hover { --send-cut: color-mix(in srgb, var(--mark-pure) 85%, #fff); background: color-mix(in srgb, var(--mark-pure) 85%, #fff); }
.mention-menu { left: 14px; }

/* The thread, a little less plain: the person's words in a soft tint, the agent's steps as a light outline. */
.msg.you .bubble { background: color-mix(in srgb, var(--mark-pure) 10%, var(--glass-popover)); border-radius: 14px 14px 4px 14px; }
.steps { background: transparent; border: 1px solid var(--glass-line); border-radius: 10px; }
.msg-who strong { font-weight: 600; }

/* The column is narrow: the thread reads a size down (wide mode keeps the reading size). */
html.column:not(.wide) .msg-text, html.column:not(.wide) .bubble { font-size: 13px; line-height: 1.5; }
html.column:not(.wide) .msg-text p, html.column:not(.wide) .msg-text ul, html.column:not(.wide) .msg-text ol { margin: 0 0 7px; }
html.column:not(.wide) .msg-text ul, html.column:not(.wide) .msg-text ol { padding-left: 18px; }
html.column:not(.wide) .msg-text li { margin-bottom: 3px; }
html.column:not(.wide) .msg-who { font-size: 12px; }
html.column:not(.wide) .steps { font-size: 12px; padding: 6px 10px; }
html.column:not(.wide) .msg-text code, html.column:not(.wide) .bubble code { font-size: 11.5px; }
html.column:not(.wide) .composer textarea { font-size: 13.5px; }

/* --- The switcher (chat.js openSwitcher): the title opens assignments and conversations -------------------------- */
.thread-switch { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.thread-switch > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-switch:disabled { cursor: default; }
.switch-chevron { flex: none; color: var(--quiet); transition: transform 160ms ease; }
.thread-switch:disabled .switch-chevron { display: none; }
.thread-switch:hover .switch-chevron, .thread-switch:focus-visible .switch-chevron { color: var(--ink); transform: translateY(1px); }
.team-card.switcher { width: 340px; max-height: min(70vh, 560px); padding: 10px; gap: 8px; }
.switch-search { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--glass-line); border-radius: 8px; background: var(--glass-card); font: inherit; font-size: 13px; color: var(--ink); }
.switch-search:focus { outline: none; border-color: color-mix(in srgb, var(--mark-pure) 45%, var(--glass-line)); }
.switch-list { overflow-y: auto; margin: 0 -4px; padding: 0 4px; display: flex; flex-direction: column; gap: 1px; }
.switch-label { margin: 8px 6px 3px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.switch-row { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.switch-row:hover, .switch-row:focus-visible { background: var(--glass-well); outline: none; }
.switch-row.current { background: color-mix(in srgb, var(--mark-pure) 12%, transparent); }
.switch-text { display: flex; flex-direction: column; min-width: 0; }
.switch-text strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-text .quiet { font-size: 11.5px; }
.switch-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--glass-edge-strong); }
.switch-row.pinned .switch-dot { background: var(--mark-pure); }
.switch-row.assignment .switch-dot { border-radius: 2px; }
.switch-row.running .switch-dot, .switch-row.resume .switch-dot { background: var(--spark); animation: breathe 1.8s ease-in-out infinite; }
.switch-row.needs_you .switch-dot, .switch-row.waiting .switch-dot { background: #c98a1b; }
.switch-row.done .switch-dot, .switch-row.finished .switch-dot { background: var(--ok); }
.switch-row.failed .switch-dot, .switch-row.stopped .switch-dot { background: var(--bad, #b5523b); }
.switch-group { display: flex; flex-direction: column; }
.switch-row.step { padding-left: 24px; }
.switch-row.step strong { font-weight: 400; }
.switch-none { margin: 4px 8px; font-size: 12.5px; color: var(--faint); }

/* The assignment at work in this conversation, above the composer: where it stands, and the person's controls. */
.assignment-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 6px 5px 10px; border: 1px solid var(--glass-line); border-radius: 10px; background: var(--glass-card); font-size: 12.5px; }
.assignment-bar[hidden] { display: none; }
.bar-title { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.bar-title strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-title .quiet { flex: none; }
.bar-title .switch-dot { margin-top: 0; }
.assignment-bar.running .switch-dot { background: var(--spark); animation: breathe 1.8s ease-in-out infinite; }
.assignment-bar.needs_you .switch-dot { background: #c98a1b; }
.assignment-bar.failed .switch-dot, .assignment-bar.stopped .switch-dot { background: var(--bad, #b5523b); }
.assignment-bar.planned .switch-dot, .assignment-bar.paused .switch-dot { background: var(--glass-edge-strong); }
.bar-actions { display: inline-flex; gap: 4px; flex: none; }
.bar-action { height: 26px; padding: 0 10px; border: 1px solid var(--glass-line); border-radius: 999px; background: none; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.bar-action:hover { color: var(--ink); border-color: var(--glass-edge-strong); }
.bar-action.go { border-color: transparent; background: var(--mark-pure); color: #fff; }
:root[data-theme="dark"] .bar-action.go { color: #10221f; }
.bar-action:disabled { opacity: 0.5; cursor: default; }
/* The specialist chip and its dismiss, one rounded pair. */
.team-hint-pair { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass-card); animation: r-arrive 260ms ease both; }
.team-hint-pair .team-hint-chip { border: 0; background: none; padding-right: 4px; animation: none; }
.team-hint-dismiss { flex: none; width: 24px; height: 24px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 15px; line-height: 1; color: var(--faint); cursor: pointer; }
.team-hint-dismiss:hover, .team-hint-dismiss:focus-visible { background: var(--glass-well); color: var(--ink); }
.team-hint-pair:hover { border-color: var(--glass-edge-strong); }
/* The column says what the agent is doing in the thread; the composer does not say it again. */
html.column .composer-row #status { display: none; }
.bar-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 15px; line-height: 1; color: var(--quiet); cursor: pointer; }
.bar-icon:hover, .bar-icon:focus-visible { background: var(--glass-well); color: var(--ink); }
.bar-icon.follow.on { color: var(--mark-pure); background: color-mix(in srgb, var(--mark-pure) 12%, transparent); }

/* --- Modes (chat.js drawMode / drawShape): a quiet control by the composer; the shape at the top of the thread ---- */
/* How and who: the mode, then who answers, after a thin rule from the file tools; the mode a ghost button like
   the icons beside it (no pill), its chevron saying it opens. */
.composer-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--glass-line); flex: none; }
.composer-row .mode-button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.composer-row .mode-button:hover, .composer-row .mode-button:focus-visible, .composer-row .mode-button[aria-expanded="true"] { background: var(--glass-well); color: var(--ink); }
.composer-row .mode-button .mode-caret { flex: none; color: var(--quiet); }
.composer-row #answering { margin-left: 0; }
.composer-row #answering::before { content: '·'; margin: 0 6px 0 2px; color: var(--faint); }
.composer-row #answering:empty::before { content: none; }
.composer-row .mode-button:hover { background: var(--glass-well); color: var(--ink); }
.composer-row .mode-button.thinking { background: color-mix(in srgb, var(--mark-pure) 12%, transparent); color: color-mix(in srgb, var(--mark-pure) 80%, var(--ink)); }
.mode-list { display: flex; flex-direction: column; gap: 2px; margin: -6px; }
.mode-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.mode-row:hover, .mode-row:focus-visible { background: var(--glass-well); outline: none; }
.mode-row.on { background: color-mix(in srgb, var(--mark-pure) 12%, transparent); }
.mode-row strong { font-size: 13px; font-weight: 500; }
.mode-row .quiet { font-size: 11.5px; }
.shape-strip { padding: 6px 14px; border-bottom: 1px solid var(--glass-line); background: color-mix(in srgb, var(--mark-pure) 6%, transparent); }
.shape-strip[hidden] { display: none; }
.shape-row { display: flex; align-items: center; gap: 8px; }
.shape-summary { display: inline-flex; align-items: baseline; gap: 2px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; text-align: left; color: var(--ink-2); cursor: pointer; }
.shape-mode { font-weight: 600; color: color-mix(in srgb, var(--mark-pure) 80%, var(--ink)); }
.shape-chevron { margin-left: 4px; color: var(--quiet); }
.shape-hand { flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--mark-pure); font: inherit; font-size: 12px; font-weight: 500; color: #fff; cursor: pointer; }
:root[data-theme="dark"] .shape-hand { color: #10221f; }
.shape-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0 4px; font-size: 12.5px; }
.shape-lists ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.shape-lists .quiet { margin: 0; font-size: 12px; }
.shape-label { margin-bottom: 4px; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); }
html.column.wide .shape-strip { padding-left: max(28px, calc((100% - var(--measure)) / 2)); padding-right: max(28px, calc((100% - var(--measure)) / 2)); }

/* --- Dark, with depth: the ground lets the wallpaper's glow through; the column sits a shade deeper; what is
   raised (cards, the composer, the timeline, popovers) is a step lighter, with a soft top highlight and a shadow
   beneath, so the layers read as layers, not one flat slate. --------------------------------------------------- */
:root[data-theme="dark"] {
  --glass-panel: rgba(16, 32, 40, 0.5);
  --glass-panel-strong: rgba(14, 27, 34, 0.78);
  --glass-popover: rgba(28, 47, 56, 0.96);
  --glass-card: rgba(242, 248, 247, 0.055);
  --glass-line: rgba(242, 248, 247, 0.085);
  --lift-dark: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.32);
  --sheen-dark: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%);
}
:root[data-theme="dark"] .shell-left { background: rgba(10, 21, 27, 0.72); border-right-color: rgba(0, 0, 0, 0.35); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .shell-stage { background: rgba(16, 32, 40, 0.38); }
:root[data-theme="dark"] .bar { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] .desk-pane,
:root[data-theme="dark"] .composer-box,
:root[data-theme="dark"] .display,
:root[data-theme="dark"] .as-lanes,
:root[data-theme="dark"] .as-outcome,
:root[data-theme="dark"] .as-result,
:root[data-theme="dark"] .as-passage,
:root[data-theme="dark"] .as-list,
:root[data-theme="dark"] .as-rail-list,
:root[data-theme="dark"] .assignment-bar,
:root[data-theme="dark"] .msg.you .bubble {
  background-image: var(--sheen-dark);
  box-shadow: var(--lift-dark);
  border-color: rgba(242, 248, 247, 0.1);
}
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .switcher-pop,
:root[data-theme="dark"] .menu-pop,
:root[data-theme="dark"] .mention-menu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .steps { background: rgba(0, 0, 0, 0.14); border-color: rgba(242, 248, 247, 0.07); }
:root[data-theme="dark"] .tile:hover, :root[data-theme="dark"] .as-row:hover { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .composer-box:focus-within { border-color: color-mix(in srgb, var(--mark-pure) 45%, var(--glass-line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 3px color-mix(in srgb, var(--mark-pure) 18%, transparent), 0 14px 36px rgba(0, 0, 0, 0.34); }
:root[data-theme="dark"] .msg.you .bubble { border: 0; }


/* --- The rain (assignments, and the tray in the shell's bar) ------------------------------------------------------ */
.as-rain { display: grid; grid-template-columns: repeat(10, 3.5px); grid-template-rows: repeat(4, 3.5px); gap: 1.5px; flex: none; color: var(--faint); }
.as-rain > span { border-radius: 1px; background: currentColor; opacity: 0.14; }
.as-rain > span.head { opacity: 0.5; }
.as-rain.live { color: var(--spark); }
.as-rain.live > span { opacity: 0.14; animation: as-fall var(--duration) linear var(--delay) infinite; }
.as-rain.done { color: var(--ok); }
.as-rain.done > span.head { opacity: 1; }
@keyframes as-fall { 0% { opacity: 1; } 22% { opacity: 0.55; } 48% { opacity: 0.26; } 74%, 100% { opacity: 0.14; } }
@media (prefers-reduced-motion: reduce) { .as-rain.live > span { animation: none; } .as-rain.live > span.head { opacity: 1; } }

/* --- What needs you: the tray in the shell's bar (PureDesktop's Assignments tray), and the rows it shares with the
   conversation and the control room. Amber is what needs you; the rain is what runs. -------------------------------- */
:root { --need: #b9770e; --run: #2f8f7a; }
:root[data-theme="dark"] { --need: #f0b44c; --run: #6fd0b8; }
.tray { position: relative; display: flex; align-items: center; }
.tray-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border: 1px solid var(--glass-line); border-radius: 10px; background: var(--glass-card); font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.02em; color: var(--quiet); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.tray-pill:hover, .tray-pill[aria-expanded="true"] { background: var(--glass-well); color: var(--ink); }
.tray-pill .tray-needs { color: var(--need); font-weight: 600; }

.tray-pill .as-rain { grid-template-rows: repeat(4, 3px) !important; gap: 1px; }
.tray-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 32px)); max-height: min(600px, 72vh); display: flex; flex-direction: column; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-popover); box-shadow: 0 24px 60px rgba(10, 30, 40, 0.18); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); z-index: 90; overflow: hidden; color: var(--ink); }
.tray-panel[hidden] { display: none; }
.tray-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--glass-line); }
.tray-head strong { font-size: 14px; }
.tray-head .faint { font: 11px var(--mono, ui-monospace, monospace); }
.tray-body { overflow-y: auto; padding: 4px 0 8px; }
.tray-section { padding: 10px 12px 2px; }
.tray-label { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font: 600 9.5px var(--mono, ui-monospace, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); }
.tray-label.for-need { color: var(--need); }
.tray-label.for-run { color: var(--run); }
.tray-label .grow { flex: 1; }
.tray-label .need-link { font: inherit; letter-spacing: 0.04em; text-transform: none; }
.tray-empty { margin: 0 4px 6px; font-size: 12.5px; color: var(--faint); }
.tray-run { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.tray-run:hover { background: var(--glass-well); }

.tray-run-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tray-run-text strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-run-text span { font: 11px var(--mono, ui-monospace, monospace); color: var(--quiet); }
.tray-foot { padding: 8px 16px 10px; border-top: 1px solid var(--glass-line); font: 11px var(--mono, ui-monospace, monospace); color: var(--faint); }

.need { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-card); font-size: 13px; line-height: 1.45; }
.need.report { border-color: var(--glass-line); background: var(--glass-card); }

.need.settled { opacity: 0.6; }
.need-top { display: flex; align-items: center; gap: 8px; }
.need-kind { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; font: 600 9.5px var(--mono, ui-monospace, monospace); letter-spacing: 0.1em; text-transform: uppercase; }
.need-kind.approve { background: var(--need); color: #fff; }
:root[data-theme="dark"] .need-kind.approve { color: #1f1606; }
.need-kind.bad { border: 1px solid color-mix(in srgb, #b5523b 50%, transparent); color: #b5523b; }
.need-kind.report { border: 1px solid var(--glass-line); color: var(--quiet); }
.need-when { margin-left: auto; font: 11px var(--mono, ui-monospace, monospace); }
.need-main { display: flex; align-items: center; gap: 10px; }
.need-main > :first-child { flex: none; }
.need-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.need-what { margin: 0; }
.need-where { font-size: 12px; color: var(--quiet); }
.need-details { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--glass-well); }
.need-details[hidden] { display: none; }
.need-details p { margin: 0; font-size: 12px; }
.need-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 12px; }
.need-facts dt { color: var(--quiet); }
.need-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.need-look.concern strong { color: #b5523b; }
.need-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.need-actions .grow { flex: 1; }
.need-status { font-size: 12px; }
.need-link { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--quiet); text-decoration: underline; text-decoration-color: var(--glass-line); text-underline-offset: 3px; cursor: pointer; }
.need-link:hover { color: var(--ink); }
.need-btn { height: 28px; padding: 0 12px; border: 1px solid var(--glass-edge-strong); border-radius: 8px; background: var(--glass-popover); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.need-btn:hover { background: var(--glass-well); }
.need-btn.go { border-color: color-mix(in srgb, var(--mark-pure) 80%, #000); background: var(--mark-pure); color: #fff; }
.need-btn.go:hover { background: color-mix(in srgb, var(--mark-pure) 88%, #000); }
:root[data-theme="dark"] .need-btn.go { color: #10221f; }
.need-btn:disabled { opacity: 0.5; cursor: default; }
.need.compact { padding: 8px 10px; gap: 4px; font-size: 12.5px; }
.need.compact .need-top { display: none; }
.need.compact .need-btn { height: 26px; padding: 0 10px; }

/* Above the composer: one decision the conversation's handed-on work waits on, decided here. */
.needs-strip { margin: 0 0 6px; }
.needs-strip[hidden] { display: none; }
.needs-strip .need { margin: 0; }
.needs-more { display: flex; align-items: center; gap: 10px; margin: 6px 2px 0; font-size: 11.5px; }
.needs-more .need-btn { margin-left: auto; }

/* A hand-off in the steps: who it went to (and a way in) over what was asked, kept to a line. */
.step.handoff { align-items: flex-start; }
.step.handoff .step-dot { margin-top: 7px; }
.handoff-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.handoff-who { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.handoff-who > :not(strong) { flex: none; }
.handoff-who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handoff-task { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handoff-open { flex: none; align-self: center; font-size: 12px; white-space: nowrap; }

/* YOLO (PureDesktop's badge): a small mono pill, quiet when off, the accent when on; inherited (from the assignment
   or the conversation that handed the work on) shows dashed. */
.yolo-pill { flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--glass-line); border-radius: 999px; background: none; font: 600 9.5px var(--mono, ui-monospace, monospace); letter-spacing: 0.1em; color: var(--faint); cursor: pointer; }
.yolo-pill[hidden] { display: none; }
.yolo-pill:hover { color: var(--ink); border-color: var(--glass-edge-strong); }
.yolo-pill[aria-pressed="true"] { border-color: color-mix(in srgb, var(--mark-pure) 70%, transparent); background: color-mix(in srgb, var(--mark-pure) 14%, transparent); color: var(--mark-pure); }
.yolo-pill.inherited { border-style: dashed; border-color: color-mix(in srgb, var(--mark-pure) 55%, transparent); color: var(--mark-pure); }
.yolo-pill:disabled { opacity: 0.5; }

/* Our own pages in frames (the conversation, the desk, the assignments, a file) follow the theme: a frame whose
   scheme differs from its page's gets an opaque backdrop, which made the dark stage a flat black slab. Apps keep
   their own (normal) scheme. */
:root[data-theme="dark"] .shell-left iframe,
:root[data-theme="dark"] .stage-frame[src^="/assignments"],
:root[data-theme="dark"] .stage-frame[src^="/desk"],
:root[data-theme="dark"] .stage-frame[src^="/file"] { color-scheme: dark; }

/* Approve all: wherever several decisions wait together. */
.approve-all-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-card); font-size: 12.5px; }
.approve-all-bar .need-btn { margin-left: auto; }
.tray-label .approve-all { height: 24px; padding: 0 10px; font: 600 11px var(--font, inherit); letter-spacing: 0; text-transform: none; }

/* A pane the person is following an assignment into: whose work it is, on its strip, with the live dot. */
.pane-following { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 0 9px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--mark-pure) 12%, transparent); font: 500 11px var(--mono, ui-monospace, monospace); color: var(--mark-pure); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane-following::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; animation: following-pulse 1.6s ease-in-out infinite; }
.pane-following[hidden] { display: none; }
@keyframes following-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pane-following::before { animation: none; } }
.team-card { overflow-y: auto; }
/* A step's words flow as one line of text (wrapping as text does), not as squeezed side-by-side columns; the dot sits
   at the first line. Hand-offs keep their own two-line layout. */
.steps .step:not(.handoff) { display: block; position: relative; padding-left: 15px; }
.steps .step:not(.handoff) > .step-dot { position: absolute; left: 0; top: 0.55em; }
.steps .step:not(.handoff) > .link-button { margin-left: 6px; }

/* Picture in picture: the followed work, live, in the stage's corner while the person works elsewhere. */
.pip { position: absolute; right: 16px; bottom: 16px; z-index: 40; width: 340px; height: 258px; display: flex; flex-direction: column; border: 1px solid var(--glass-edge-strong); border-radius: 12px; overflow: hidden; background: var(--glass-popover); box-shadow: 0 22px 60px rgba(10, 30, 40, 0.28); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); animation: pip-in 220ms ease-out; }
.pip.dragging { box-shadow: 0 30px 80px rgba(10, 30, 40, 0.36); }
@keyframes pip-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .pip { animation: none; } }
.pip-head { flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--glass-line); cursor: grab; user-select: none; }
.pip.dragging .pip-head { cursor: grabbing; }
.pip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mark-pure); animation: following-pulse 1.6s ease-in-out infinite; }
.pip-label { font: 500 11px var(--mono, ui-monospace, monospace); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pip-head .grow { flex: 1; }
.pip-button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; font-size: 14px; line-height: 1; color: var(--quiet); cursor: pointer; }
.pip-button:hover { background: var(--glass-well); color: var(--ink); }
.pip-body { position: relative; flex: 1; overflow: hidden; background: var(--sheet); }
.pip-body .stage-frame { position: absolute; top: 0; left: 0; inset: auto; transform-origin: 0 0; pointer-events: none; border: 0; }
.pip-cover { position: absolute; left: 0; right: 0; top: 30px; bottom: 22px; padding: 0; border: 0; background: transparent; cursor: zoom-in; }

/* The assignment bar on two lines: what it is and where it stands across the top, the controls beneath. */
.assignment-bar { flex-wrap: wrap; row-gap: 4px; }
.assignment-bar .bar-title { flex: 1 1 100%; }
.assignment-bar .bar-title strong { flex: 0 1 auto; }
.assignment-bar .bar-title .quiet { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.assignment-bar .bar-actions { margin-left: auto; align-items: center; }
.bar-follow { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--glass-line); border-radius: 8px; background: none; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.bar-follow:hover { background: var(--glass-well); color: var(--ink); }
.bar-follow.on { border-color: color-mix(in srgb, var(--mark-pure) 45%, transparent); background: color-mix(in srgb, var(--mark-pure) 12%, transparent); color: var(--mark-pure); }

.pip-foot { flex: none; display: flex; align-items: center; gap: 10px; height: 22px; padding: 0 10px; border-top: 1px solid var(--glass-line); font: 10.5px var(--mono, ui-monospace, monospace); color: var(--quiet); white-space: nowrap; }
.pip-doing { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pip-doing.live { color: var(--mark-pure); }
.pip-figures { flex: none; color: var(--faint); }

/* A step held for review. */
.need-kind.review-kind { border: 1px solid color-mix(in srgb, var(--mark-pure) 55%, transparent); color: var(--mark-pure); }
.need-report { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.need.compact .need-report { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.need-note-box[hidden] { display: none; }
.need-note { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--glass-edge-strong); border-radius: 8px; background: var(--glass-card); font: inherit; font-size: 12.5px; color: var(--ink); resize: vertical; }

/* --- The column drawn by the shared frame (web/vendor/chat-view.js mountChatFrame; ps-suite docs/chat-frame.md) ----
   PureDesktop's drawer and this column are one component. This page's own head, strips and composer stay in the
   page, hidden; the blocks it still draws itself go into the frame's slots. */
.chat-thread.framed > :not(.chat-frame) { display: none !important; }
.chat-frame { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.chat-frame.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* Wide, the frame draws its own rail; the margin (model, approvals: the server's) stays beside it. */
.chat.framed .history-host { display: none !important; }
.frame-strips { display: flex; flex-direction: column; gap: 6px; }
.frame-strips .team-hint { margin: 0; }
.frame-under-head { padding: 6px 12px 0; }
.frame-under-head:empty { display: none; }