/* ============================================================
   TiempOS UI. The parts of Tiempo's own app that the site draws.

   Two consumers: the /company live demo (.os-app) and the homepage
   hand-off window (.tos-win). Both put .tos on their root, which is what
   scopes the theme below. Every class is os-prefixed and is only drawn
   inside a .tos root.

   The theme is TiempOS dark, ported from tiempos
   apps/web/src/routes/layout.css. Below it, every part of the app the
   site draws: primitives first, then the main column's views, toasts,
   the agents group, the pointer and skeletons. /company adds the
   sidebar, the frame and its own layout in page-company.css.

   Shared below the three-consumer bar on purpose: this is one named
   component, like process.css, and a copy in each page module would
   drift.
   ============================================================ */

.tos {
  /* Surfaces, TIE-149 dark scale */
  --os-page: oklch(13% 0.013 35);
  --os-panel: oklch(18% 0.016 35);
  --os-card: oklch(23% 0.018 35);
  --os-overlay: oklch(28% 0.021 35);
  --os-glass-card: oklch(21% 0.018 35 / 0.55);
  --os-glass-overlay: oklch(19% 0.017 35 / 0.94);
  --os-glass-stroke: oklch(100% 0 0 / 0.12);
  --os-glass-hi: oklch(100% 0 0 / 0.08);
  --os-sunken: oklch(0% 0 0 / 0.25);
  /* Ink and strokes, all crema over the page */
  --os-ink: var(--crema);
  --os-ink-muted: rgba(var(--crema-rgb), 0.68);
  --os-ink-subtle: rgba(var(--crema-rgb), 0.5);
  --os-ink-faint: rgba(var(--crema-rgb), 0.45);
  --os-stroke-subtle: rgba(var(--crema-rgb), 0.08);
  --os-stroke: rgba(var(--crema-rgb), 0.14);
  --os-stroke-strong: rgba(var(--crema-rgb), 0.26);
  --os-stroke-control: rgba(var(--crema-rgb), 0.38);
  --os-hover: rgba(var(--crema-rgb), 0.05);
  --os-selected: rgba(var(--crema-rgb), 0.1);
  --os-neutral-fill: rgba(var(--crema-rgb), 0.15);
  --os-neutral-fill-subtle: rgba(var(--crema-rgb), 0.05);
  --os-on-functional: var(--media);
  /* Accent: Honey, split by duty */
  --os-accent: oklch(61% 0.13 65);
  --os-accent-ink: oklch(78% 0.12 68);
  --os-accent-solid: oklch(52% 0.116 63);
  --os-accent-fill: color-mix(in oklab, var(--os-accent) 15%, transparent);
  --os-accent-border: color-mix(in oklab, var(--os-accent) 35%, transparent);
  --os-primary: var(--crema);
  --os-primary-ink: var(--ciruela);
  --os-primary-hover: rgba(var(--crema-rgb), 0.9);
  /* Functional hues */
  --os-danger: oklch(72% 0.15 28);
  --os-warning: oklch(72% 0.16 42);
  --os-caution: oklch(72% 0.145 95);
  --os-success: oklch(72% 0.13 145);
  --os-info: oklch(72% 0.12 250);
  /* Category palette, for avatars and source tags */
  --os-tag-red: oklch(68% 0.15 20);
  --os-tag-orange: oklch(80% 0.119 45);
  --os-tag-yellow: oklch(88% 0.15 90);
  --os-tag-green: oklch(70% 0.15 130);
  --os-tag-mint: oklch(84% 0.15 165);
  --os-tag-teal: oklch(67% 0.111 195);
  --os-tag-blue: oklch(78% 0.136 230);
  --os-tag-blue-deep: oklch(66% 0.15 268);
  --os-tag-magenta: oklch(74% 0.15 315);
  --os-tag-pink: oklch(85% 0.094 350);
  /* Radius, motion and shadow, TIE-149 / TIE-150 */
  --os-r-chip: 4px;
  --os-r-control: 6px;
  --os-r-card: 10px;
  --os-r-panel: 14px;
  --os-fast: 120ms;
  --os-base: 180ms;
  --os-slow: 280ms;
  --os-ease: cubic-bezier(0.2, 0, 0, 1);
  --os-shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3);
  --os-shadow-overlay: 0 8px 28px oklch(0% 0 0 / 0.45);
}

.os-i { display: inline-block; flex: none; width: 16px; height: 16px; fill: currentColor; }

/* Avatars. Sidebar clients wear a two-hue gradient, contacts a flat hue. */
.os-cav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-circle);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: var(--crema);
  text-shadow: 0 1px 1.5px oklch(0% 0 0 / 0.45);
}

/* Headshots. Same boxes as the initials they replaced, filled edge to edge. */
img.os-cav,
img.os-ca { object-fit: cover; background: var(--os-card); box-shadow: 0 0 0 1px var(--os-stroke); }

.os-ca {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-size: 12px;
  font-weight: 500;
  color: var(--os-on-functional);
}
.os-ca--sm { width: 24px; height: 24px; font-size: 10px; }
.os-ca--xs { width: 18px; height: 18px; font-size: 8px; }
.os-ca--lg { width: 48px; height: 48px; font-size: 18px; }
.os-ca--0 { background: var(--os-tag-blue-deep); }
.os-ca--1 { background: var(--os-tag-pink); }
.os-ca--2 { background: var(--os-tag-mint); }
.os-ca--3 { background: var(--os-tag-orange); }
.os-ca--4 { background: var(--os-tag-red); }
.os-ca--5 { background: var(--os-tag-blue); }
.os-ca--6 { background: var(--os-tag-magenta); }
.os-ca--7 { background: var(--os-tag-teal); }

.os-btn-primary {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--os-r-control);
  background: var(--os-primary);
  color: var(--os-primary-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease), box-shadow var(--os-fast) var(--os-ease);
}

.os-btn-primary .os-i { width: 12px; height: 12px; }

/* Badge.svelte, DeadlinePill.svelte, SourceTag */
.os-badge { display: inline-flex; flex: none; align-items: center; padding: 2px 7px; border-radius: var(--os-r-chip); background: var(--os-neutral-fill); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.os-badge--urgent { background: color-mix(in oklab, var(--os-danger) 15%, transparent); color: var(--os-danger); }
.os-badge--high { background: color-mix(in oklab, var(--os-warning) 15%, transparent); color: var(--os-warning); }
.os-badge--low { border: 1px solid var(--os-stroke); background: transparent; color: var(--os-ink-muted); }
.os-badge--progress { background: color-mix(in oklab, var(--os-info) 15%, transparent); color: var(--os-info); }
.os-badge--waiting { background: color-mix(in oklab, var(--os-caution) 15%, transparent); color: var(--os-caution); }
.os-badge--done { background: color-mix(in oklab, var(--os-success) 15%, transparent); color: var(--os-success); }
.os-badge--accent { background: var(--os-accent-fill); color: var(--os-accent-ink); }
.os-badge--teal { background: color-mix(in oklab, var(--os-tag-teal) 15%, transparent); color: var(--os-tag-teal); }
.os-pill { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--os-r-chip); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: border-color var(--os-fast) var(--os-ease); }
.os-pill:hover { border-color: var(--os-stroke-strong); }
.os-pill .os-i { width: 10px; height: 10px; }
.os-pill--overdue { background: color-mix(in oklab, var(--os-danger) 15%, transparent); color: var(--os-danger); }
.os-pill--today { background: color-mix(in oklab, var(--os-warning) 15%, transparent); color: var(--os-warning); }
.os-pill--tomorrow { background: color-mix(in oklab, var(--os-caution) 15%, transparent); color: var(--os-caution); }
.os-pill--week { background: color-mix(in oklab, var(--os-info) 15%, transparent); color: var(--os-info); }
.os-pill--later { background: var(--os-neutral-fill); }
.os-src { display: inline-flex; flex: none; align-items: center; padding: 1px 6px; border-radius: var(--os-r-chip); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.os-src--email { background: color-mix(in oklab, var(--os-tag-blue) 15%, transparent); color: var(--os-tag-blue); }
.os-src--whatsapp { background: color-mix(in oklab, var(--os-tag-green) 15%, transparent); color: var(--os-tag-green); }
.os-src--slack { background: color-mix(in oklab, var(--os-tag-magenta) 15%, transparent); color: var(--os-tag-magenta); }
.os-src--os { background: var(--os-accent-fill); color: var(--os-accent-ink); }
.os-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--os-stroke); border-radius: var(--os-r-chip); font-size: 11px; color: var(--os-ink-muted); }

.os-glass { border: 1px solid var(--os-glass-stroke); border-radius: var(--os-r-card); background: var(--os-glass-card); box-shadow: var(--os-shadow-card), inset 0 1px 0 0 var(--os-glass-hi); }
.os-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.os-muted { color: var(--os-ink-muted); }

.os-fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 -6px; padding: 3px 6px; border-radius: var(--os-r-control); transition: background-color var(--os-fast) var(--os-ease); }
.os-fact:hover { background: var(--os-hover); }
.os-fact__k { flex: none; max-width: 42%; color: var(--os-ink-muted); }
.os-fact__v { text-align: right; }
.os-fact__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.os-fact__list span { padding: 1px 6px; border-radius: var(--os-r-chip); background: var(--os-neutral-fill); font-size: 11px; }

.os-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.os-msg--out { flex-direction: column; align-items: flex-end; align-self: flex-end; gap: 4px; }
.os-bubble { padding: 9px 13px; border-radius: 16px; background: var(--os-selected); box-shadow: inset 0 0 0 1px var(--os-stroke-subtle), 0 1px 2px oklch(0% 0 0 / 0.1); line-height: 1.45; white-space: pre-wrap; transition: box-shadow 150ms var(--os-ease); }

.os-msg--out .os-bubble { background: var(--os-accent-fill); box-shadow: inset 0 0 0 1px var(--os-accent); }
.os-msg__time { display: block; margin-top: 3px; font-size: 9.5px; color: var(--os-ink-subtle); }

/* IconButton.svelte */
.os-iconbtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--os-r-control);
  color: var(--os-ink-muted);
  transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease);
}
.os-iconbtn:hover { background: var(--os-hover); color: var(--os-ink); }
.os-iconbtn.is-on { background: var(--os-accent-fill); color: var(--os-accent-ink); }
.os-iconbtn .os-i { width: 15px; height: 15px; }

/* ── The app ──────────────────────────────────────────────
   Everything inside the main column: page header, inbox, thread and
   composer, profile, tasks, dashboard, workflows, toasts and the agents
   group, the pointer, skeletons. Moved whole from the /company demo so
   both pages draw the same app. */
.tos * { scrollbar-width: none; }
.tos *::-webkit-scrollbar { display: none; }
.tos :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.tos button:focus-visible,
.tos [tabindex]:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 1px; }

/* Main column */
.os-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; background: var(--os-page); container: osmain / inline-size; }
.os-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.os-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* PageHeader.svelte */
.os-ph { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 8px; }
.os-ph--bordered { padding-bottom: 12px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-ph__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.os-ph__title { overflow: hidden; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.os-ph__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.os-ph__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--os-ink-muted); }
.os-ph__stats b { font-weight: 600; }
.os-ph__sep { color: var(--os-ink-faint); }
.os-t-red { color: var(--os-danger); }
.os-t-orange { color: var(--os-warning); }
.os-t-green { color: var(--os-success); }
.os-t-muted { color: var(--os-ink-muted); }
.os-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--os-r-control); background: var(--os-sunken); }
.os-seg button { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--os-ink-muted); transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }
.os-seg button:hover { color: var(--os-ink); }
.os-seg button.is-on { background: var(--crema); color: var(--ciruela); }
.os-search { display: inline-flex; align-items: center; gap: 8px; width: 180px; height: 28px; padding: 0 10px; border: 1px solid var(--os-stroke-control); border-radius: var(--os-r-control); background: var(--os-sunken); color: var(--os-ink-subtle); font-size: 12px; transition: border-color var(--os-fast) var(--os-ease); }
.os-search:hover { border-color: var(--os-accent-border); }
.os-search .os-i { width: 12px; height: 12px; }
.tos .os-btn-primary:hover { background: var(--os-primary-hover); }
.tos .os-btn-primary:active,
.tos .os-btn-primary.is-pressed { transform: scale(0.95); box-shadow: 0 0 0 3px var(--os-accent-border); }
.os-textbtn { padding: 6px 8px; border-radius: var(--os-r-control); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-subtle); transition: color var(--os-fast) var(--os-ease); }
.os-textbtn:hover { color: var(--os-ink); }
.os-textbtn--reject:hover { color: var(--os-danger); }


/* Glass card (layout.css .glass-card), ProfileSection and DashboardCard */
.os-psec { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.os-psec__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-psec__head .os-i { width: 12px; height: 12px; color: var(--os-ink-muted); }
.os-dcard { display: flex; flex-direction: column; overflow: hidden; }
.os-dcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.os-dcard__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.os-dcard__body { padding: 0 16px 12px; }
.os-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-row:last-child { border-bottom: 0; }
.os-row__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-row--btn { width: 100%; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--os-r-control); transition: background-color var(--os-fast) var(--os-ease); }
.tos .os-row--btn { width: calc(100% + 16px); }
.os-row--btn:hover { background: var(--os-hover); }
.os-act { position: relative; display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--os-stroke-subtle); }
/* Where each row's new-item glow sits: the activity row's glow reaches 8px
   past the dot and the text (inside the card's 16px padding, so the card's
   overflow never clips it) and 3px inside the divider lines. */
.os-act { --os-glow-inset: 3px -8px; --os-glow-r: 8px; }
.os-fact { position: relative; }
.os-conv { position: relative; --os-glow-inset: 3px 4px; --os-glow-r: 8px; }
.os-trow { --os-glow-inset: -1px; --os-glow-r: var(--os-r-card); }
.os-pf { position: relative; --os-glow-inset: -2px -6px; --os-glow-r: var(--os-r-control); }
.os-upd { position: relative; --os-glow-inset: 3px -8px; --os-glow-r: 8px; }
.os-act > *,
.os-fact > *,
.os-conv > *,
.os-pf > *,
.os-upd > *,
.os-trow > * { position: relative; z-index: 1; }
.os-act:last-child { border-bottom: 0; }
.os-act__dot { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: var(--r-circle); background: var(--os-tag-mint); }
.os-act__title { font-weight: 600; line-height: 1.35; }
.os-act__body { margin-top: 2px; color: var(--os-ink-muted); line-height: 1.35; }
.os-act__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 10px; color: var(--os-ink-muted); }

/* Inbox: list, thread, profile rail (routes/inbox/+page.svelte) */
.os-inbox__body { display: flex; flex: 1; min-height: 0; }
.os-convs { display: flex; flex: none; flex-direction: column; width: 250px; border-right: 1px solid var(--os-stroke-subtle); }
.os-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-tabs button { flex: 1; padding: 5px 8px; border-radius: var(--os-r-control); font-size: 11px; font-weight: 500; text-align: center; color: var(--os-ink-muted); transition: background-color var(--os-fast), color var(--os-fast); }
.os-tabs button:hover { color: var(--os-ink); }
.os-tabs button.is-on { background: var(--os-selected); color: var(--os-ink); }
.os-conv {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-bottom: 1px solid var(--os-stroke-subtle);
  border-left: 2px solid transparent;
  transition: background-color var(--os-fast) var(--os-ease);
}
.os-conv:hover { background: var(--os-hover); }
.os-conv.is-selected { border-left-color: var(--honey); background: var(--os-selected); }
.os-conv__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.os-conv__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.os-conv__name { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.os-conv__name.is-unread { font-weight: 700; }
.os-conv__time { flex: none; font-size: 10px; color: var(--os-ink-muted); }
.os-conv__preview { overflow: hidden; margin-top: 1px; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-muted); }
.os-conv__tags { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.os-unread { width: 8px; height: 8px; margin-left: auto; border-radius: var(--r-circle); background: var(--os-tag-green); }

.os-thread { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; }
.os-thread__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-thread__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.os-thread__name { font-weight: 600; }
.os-thread__mail { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-muted); }
.os-thread__tools { display: flex; flex: none; align-items: center; gap: 4px; }
.os-msgs { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 18px 16px; overflow-y: auto; background: radial-gradient(125% 70% at 50% -5%, rgba(var(--crema-rgb), 0.05), transparent 60%); }
.os-day { display: flex; justify-content: center; }
.os-day span { padding: 3px 10px; border-radius: var(--r-pill); background: var(--os-neutral-fill-subtle); font-size: 10px; font-weight: 500; color: var(--os-ink-muted); }
.os-msg:hover .os-bubble { box-shadow: inset 0 0 0 1px var(--os-stroke-strong), 0 1px 2px oklch(0% 0 0 / 0.1); }
.os-msg__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--os-ink-muted); }
.os-msg__meta .os-i { width: 10px; height: 10px; color: var(--os-success); }
.os-typing .os-bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.os-typing i { width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--os-ink-muted); }
/* The reply composer. Holding a draft, it grows a strip of recipients and a
   subject above the text, tints its edge honey, and caps the text's height. */
.os-composer { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--os-stroke-subtle); transition: background-color var(--os-base) var(--os-ease); }
.os-composer.is-draft { background: color-mix(in oklab, var(--os-accent) 6%, transparent); box-shadow: inset 0 1px 0 var(--os-accent-border); }
.os-composer__row { display: flex; align-items: flex-end; gap: 8px; }
.os-composer__input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--os-stroke-control); border-radius: var(--os-r-control); background: var(--os-sunken); color: var(--os-ink-subtle); transition: border-color var(--os-fast) var(--os-ease); }
.os-composer__input--draft { min-height: 36px; max-height: 132px; overflow-y: auto; border-color: var(--os-accent-border); font-size: 12px; line-height: 1.55; white-space: pre-wrap; color: var(--os-ink); }
.os-composer__input--draft:hover { border-color: var(--os-accent); }
.os-composer__input.is-typing::after,
.os-composer__subject .is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: var(--os-accent); }
.os-composer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.os-composer__meta .os-badge { gap: 4px; }
.os-composer__meta .os-badge .os-i { width: 9px; height: 9px; }
.os-composer__to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--os-ink-subtle); }
.os-composer__chip { padding: 1px 7px; border: 1px solid var(--os-stroke); border-radius: var(--r-pill); font-size: 11px; color: var(--os-ink-muted); }
.os-composer__subject { display: flex; align-items: baseline; gap: 8px; min-height: 18px; font-size: 12px; font-weight: 600; }
.os-composer__subject > span:first-child { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-subtle); }
.os-composer__send { align-self: flex-end; }
.os-composer__foot { display: flex; align-items: center; gap: 2px; margin: -4px 0 -4px -8px; }
.os-composer__note { margin-left: auto; font-size: 10.5px; color: var(--os-ink-subtle); }

.os-profile { display: none; flex: none; flex-direction: column; gap: 16px; width: 250px; padding: 16px; overflow-y: auto; border-left: 1px solid var(--os-stroke-subtle); }
.os-profile__top { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.os-profile__name { font-size: 15px; font-weight: 600; }
.os-profile__sec { display: flex; flex-direction: column; gap: 6px; }

/* Client profile (routes/delivery/clients/[id], ProfileSection, DashboardCard) */
.os-outbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--os-stroke); border-radius: var(--os-r-control); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--os-ink-muted); transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }
.os-outbtn:hover { background: var(--os-hover); color: var(--os-ink); }
.os-outbtn .os-i { width: 12px; height: 12px; }
.os-outbtn.is-off { border-color: var(--os-stroke-subtle); opacity: 0.5; cursor: not-allowed; }
.os-outbtn.is-off:hover { background: none; color: var(--os-ink-muted); }
.os-prof { display: flex; flex-direction: column; gap: 16px; padding: 6px 24px 24px; }
.os-prof__head { display: flex; gap: 18px; padding: 18px; }
.os-prof__av { flex: none; width: 72px; height: 72px; border-radius: var(--r-circle); object-fit: cover; background: var(--os-card); box-shadow: 0 0 0 1px var(--os-stroke); }
.os-prof__main { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.os-prof__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.os-prof__nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.os-prof__name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.os-prof__tag { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--os-tag-blue) 15%, transparent); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--os-tag-blue); }
.os-prof__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-prof__bio { align-self: flex-start; font-size: 14px; }
.os-prof__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 24px; }
.os-prof__chip { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.os-prof__chip .os-sl { letter-spacing: 0.04em; }
.os-prof__tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.os-prof__tabset { display: flex; flex-wrap: wrap; gap: 6px; }
.os-ptab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--os-stroke); border-radius: var(--os-r-control); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-muted); transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }
.os-ptab:hover { background: var(--os-hover); color: var(--os-ink); }
.tos .os-ptab.is-on { border-color: var(--crema); background: var(--crema); color: var(--ciruela); }
.os-ptab.is-locked { border-color: var(--os-stroke-subtle); opacity: 0.4; cursor: default; }
.os-ptab.is-locked:hover { background: none; color: var(--os-ink-muted); }
.os-ptab .os-i { width: 11px; height: 11px; }
.os-prof__inv { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--os-ink-muted); }
.os-prof__inv b { font-weight: 600; }
.os-prof__ov { display: flex; flex-direction: column; gap: 16px; }
.os-dc { display: flex; flex-direction: column; min-width: 0; }
.os-dc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.tos .os-dc__title { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--os-ink); }
.os-dc__body { padding: 0 16px 16px; }
.os-cnt { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--os-neutral-fill); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--os-ink-muted); }
.os-prof__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.os-prof__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.os-pf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 -6px; padding: 2px 6px; border-radius: var(--os-r-control); font-size: 12.5px; }
.os-pf__k { flex: none; max-width: 48%; color: var(--os-ink-muted); }
.os-pf__v { min-width: 0; max-width: 16rem; text-align: right; overflow-wrap: anywhere; }
.os-pf__v.is-empty { color: var(--os-ink-subtle); }
.os-ptext { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; }
.os-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.os-pchips span { padding: 2px 8px; border-radius: var(--os-r-chip); background: var(--os-neutral-fill); font-size: 11.5px; }
.os-upd__list { display: flex; flex-direction: column; }
.os-upd__day { margin-top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-muted); }
.os-upd__day:first-child { margin-top: 0; }
.os-upd { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-upd:last-child { border-bottom: 0; }
.os-upd__txt { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.os-upd__t { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.os-upd__b { font-size: 12.5px; line-height: 1.35; color: var(--os-ink-muted); }
.os-empty { padding: 20px 8px; font-size: 12px; font-style: italic; text-align: center; color: var(--os-ink-muted); }
.os-prof__rows { display: flex; flex-direction: column; gap: 8px; }
.os-prof__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.os-prow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; transition: border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease); }
.tos button.os-prow:hover { border-color: var(--os-stroke-strong); background: var(--os-hover); }
.os-prow__main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.os-prow__t { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.os-prow__s { overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-muted); }
.os-prow__end { display: flex; flex: none; align-items: center; gap: 6px; }
.os-conv__rel { overflow: hidden; min-width: 0; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-subtle); }

/* Tasks list (routes/tasks list view + TaskRow.svelte) */
.os-tlist { display: flex; flex-direction: column; gap: 8px; padding: 8px 24px 20px; }
/* Each row sits in a one-track grid so its height can open and close from
   its measured size (0fr to 1fr). The gap lives inside the collapsing part. */
.os-tgroup { display: flex; flex-direction: column; }
.os-tw { display: grid; grid-template-rows: 1fr; }
.os-tw__in { min-height: 0; overflow: hidden; }
.os-tw__pad { padding-bottom: 8px; }
.os-tw.is-leaving,
.os-tw.is-gone { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.os-tw.is-gone { transition: none; }
.os-trow__title span { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; }
.os-trow.is-checking .os-trow__title span { background-size: 100% 1.5px; }
.os-trow.is-checking .os-trow__title { color: var(--os-ink-muted); }
.os-tlist__label { margin: 8px 2px 0; }
.os-trow { position: relative; flex: none; cursor: pointer; transition: border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease); }
.os-trow:hover { border-color: var(--os-stroke-strong); }
.os-trow__head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 0; }
.os-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 2px; border: 1px solid var(--os-stroke-strong); border-radius: 4px; transition: border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease); }
.os-trow:hover .os-check { border-color: var(--os-stroke-control); }
.os-check.is-on { border-color: var(--os-ink); background: var(--os-selected); }
.os-check .os-i { width: 10px; height: 10px; }
.os-trow__main { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.os-trow__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.os-trow__sub { font-size: 12px; line-height: 1.35; color: var(--os-ink-muted); }
.os-trow.is-done .os-trow__title { color: var(--os-ink-muted); }
.os-trow__right { display: flex; flex: none; align-items: center; gap: 8px; padding-top: 1px; }
.os-trow__who { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--os-ink-muted); }
.os-trow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px 12px 42px; }
.os-trow__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-trow__chips .os-flow { margin-top: 0; padding: 2px 7px; border-radius: var(--os-r-chip); background: var(--os-accent-fill); }
.os-trow__acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.os-trow__due { display: inline-flex; flex: none; }
.os-trow__acts + .os-trow__due { margin-left: 0; }
.os-trow__chips + .os-trow__due { margin-left: auto; }
.os-agentbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--os-accent-border); border-radius: var(--os-r-control); color: var(--os-accent-ink); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease), transform 80ms var(--os-ease); }
.tos .os-agentbtn:hover { border-color: var(--os-accent); background: var(--os-accent-fill); }
.tos .os-agentbtn.is-pressed { transform: scale(0.95); background: var(--os-accent-fill); }
.os-agentbtn .os-i { width: 11px; height: 11px; }
.os-trow__acts .os-textbtn { padding: 4px 8px; font-size: 10.5px; }
.os-pill--none { border-color: var(--os-stroke); color: var(--os-ink-subtle); }
.os-trow__prog { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px 42px; font-size: 11px; color: var(--os-accent-ink); }
.os-trow__bar { position: relative; flex: 0 1 180px; height: 3px; overflow: hidden; border-radius: var(--r-pill); background: var(--os-neutral-fill); }
.os-trow__bar i,
.os-toast__bar i { position: absolute; inset: 0; background: var(--os-accent); transform: scaleX(0); transform-origin: left center; transition: transform 60ms linear; }
.os-trow__pl { font-variant-numeric: tabular-nums; }
.os-trow__checked { display: flex; align-items: center; gap: 6px; padding: 0 14px 12px 42px; font-size: 11px; color: var(--os-success); }
.os-trow__checked .os-i { width: 11px; height: 11px; }
.os-card__chev { display: inline-flex; color: var(--os-ink-muted); transition: transform var(--os-base) var(--os-ease); }
.os-card__chev .os-i { width: 14px; height: 14px; }
.os-trow.is-open .os-card__chev { transform: rotate(180deg); }
.os-card__more { display: none; margin: 0 14px 12px 42px; padding-top: 10px; border-top: 1px solid var(--os-stroke-subtle); font-size: 11.5px; color: var(--os-ink-muted); }
.os-trow.is-open .os-card__more { display: block; }
.os-card__more li { list-style: none; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.os-card__more ul { margin: 6px 0 0; padding: 0; }
.os-card__more .os-i { width: 11px; height: 11px; color: var(--os-success); }
.os-flow { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 10px; font-weight: 600; color: var(--os-accent-ink); }
.os-flow .os-i { width: 10px; height: 10px; }
.os-filter { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: var(--r-pill); background: var(--os-accent-fill); font-size: 11px; color: var(--os-accent-ink); }

/* Dashboard (StatTile) */
.os-dash { display: flex; flex-direction: column; gap: 14px; padding: 12px 24px 24px; }
.os-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.os-tile { padding: 14px 16px; }
.os-tile__n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.os-tile__l { margin-top: 2px; font-size: 11px; color: var(--os-ink-muted); }

/* Fake pointer and toasts */
/* Workflows (TIE-137 rebuild: WorkflowRow, WorkflowRowBody, WorkflowDetailPanel,
   WorkflowRunList, TriggerBadge, StatusDot, Button, and the editor node card) */
.os-wf__body { position: relative; display: flex; flex: 1; min-height: 0; }
.os-wf__listcol { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.os-wf__bar { display: flex; flex: none; align-items: center; gap: 10px; min-height: 50px; padding: 8px 16px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-wf__search { position: relative; display: flex; flex: 0 1 200px; align-items: center; min-width: 110px; color: var(--os-ink-muted); }
.os-wf__search .os-i { position: absolute; left: 9px; width: 12px; height: 12px; pointer-events: none; }
.os-wf__search input {
  width: 100%;
  padding: 6px 10px 6px 28px;
  border: 1px solid var(--os-stroke-subtle);
  border-radius: var(--os-r-control);
  background: var(--os-sunken);
  color: var(--os-ink);
  font: inherit;
  font-size: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--os-fast) var(--os-ease);
}
.os-wf__search input::placeholder { color: var(--os-ink-muted); }
.os-wf__search input:hover { border-color: var(--os-stroke-strong); }
.os-wf__search input:focus { border-color: var(--os-accent); }
.os-wf__fwrap { position: relative; flex: none; }
.os-wf__need { flex: none; padding: 5px 12px; border: 1px solid var(--os-stroke); border-radius: var(--r-pill); font-size: 11.5px; color: var(--os-ink-muted); transition: color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease); }
.tos .os-wf__need:hover { color: var(--os-ink); border-color: var(--os-stroke-strong); }
.tos .os-wf__need.is-on { border-color: var(--os-accent-border); background: var(--os-accent-fill); color: var(--os-accent-ink); }
.os-wf__end { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
.os-wf__meta { font-size: 11px; color: var(--os-ink-subtle); white-space: nowrap; }
.os-wf__list { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.os-wf__none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; font-size: 12.5px; text-align: center; color: var(--os-ink-muted); }
.os-wf__none[hidden] { display: none; }
.os-wf__empty { font-size: 12px; color: var(--os-ink-muted); list-style: none; }
.os-sl { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-muted); }
.os-sl--faint { color: var(--os-ink-subtle); }

/* Button.svelte: primary, secondary, ghost; sm, md, lg */
.os-wfbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: var(--os-r-control); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease); }
.os-wfbtn .os-i { width: 12px; height: 12px; }
.os-wfbtn--sm { gap: 4px; padding: 4px 10px; border-radius: var(--os-r-chip); font-size: 10.5px; }
.os-wfbtn--sm .os-i { width: 11px; height: 11px; }
.os-wfbtn--lg { padding: 9px 18px; font-size: 12px; }
.os-wfbtn--full { width: 100%; }
.tos .os-wfbtn--primary { background: var(--os-primary); color: var(--os-primary-ink); }
.tos .os-wfbtn--primary:hover { background: var(--os-primary-hover); }
.tos .os-wfbtn--secondary { border: 1px solid var(--os-stroke-subtle); background: var(--os-hover); color: var(--os-ink); }
.tos .os-wfbtn--secondary:hover { background: var(--os-selected); border-color: var(--os-stroke); }
.tos .os-wfbtn--secondary.is-on { border-color: var(--os-accent-border); background: var(--os-accent-fill); color: var(--os-accent-ink); }
.tos .os-wfbtn--ghost { color: var(--os-ink-muted); }
.tos .os-wfbtn--ghost:hover { background: var(--os-hover); color: var(--os-ink); }

/* StatusDot.svelte. Health is a status, so it takes the functional hues. */
.os-sdot { display: inline-flex; flex: none; align-items: center; gap: 7px; }
.os-sdot__d { flex: none; width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--os-stroke-strong); }
.os-sdot__d[data-size="6"] { width: 6px; height: 6px; }
.os-sdot__d[data-size="5"] { width: 5px; height: 5px; }
.os-sdot__l { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-muted); white-space: nowrap; }
.os-sdot--working .os-sdot__d { background: var(--os-tag-green); box-shadow: 0 0 6px color-mix(in srgb, var(--os-tag-green) 65%, transparent); }
.os-sdot--working .os-sdot__l { color: var(--os-tag-green); }
.os-sdot--waiting .os-sdot__d { background: var(--os-warning); box-shadow: 0 0 6px color-mix(in srgb, var(--os-warning) 65%, transparent); }
.os-sdot--waiting .os-sdot__l { color: var(--os-warning); }
.os-sdot--stopped .os-sdot__d { background: var(--os-danger); }
.os-sdot--stopped .os-sdot__l { color: var(--os-danger); }
.os-sdot--paused .os-sdot__d { background: var(--os-ink-faint); }

/* TriggerBadge.svelte. A trigger is a category, so it takes the tag palette. */
.os-trig-wrap { position: relative; display: inline-flex; flex: none; }
.os-trig { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--os-r-chip); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: box-shadow var(--os-fast) var(--os-ease); }
.os-trig .os-i { width: 10px; height: 10px; }
.os-trig:hover { box-shadow: 0 0 0 1px var(--os-stroke-strong); }
.tos .os-trig--schedule { background: color-mix(in oklab, var(--os-tag-blue) 15%, transparent); color: var(--os-tag-blue); }
.tos .os-trig--record-change { background: color-mix(in oklab, var(--os-tag-blue-deep) 15%, transparent); color: var(--os-tag-blue-deep); }
.tos .os-trig--event { background: color-mix(in oklab, var(--os-tag-mint) 15%, transparent); color: var(--os-tag-mint); }
.tos .os-trig--manual { border: 1px solid var(--os-stroke); color: var(--os-ink-muted); }
.os-wf__pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 200px;
  padding: 8px;
  border: 1px solid var(--os-glass-stroke);
  border-radius: var(--os-r-card);
  background: var(--os-glass-overlay);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--os-shadow-overlay), inset 0 1px 0 0 var(--os-glass-hi);
  cursor: default;
  text-transform: none;
  letter-spacing: 0;
}
.os-wf__pop .os-sl { margin: 6px 8px 2px; }
.os-wf__pop .os-sl:first-child { margin-top: 2px; }
.os-wf__pop--trig { width: 230px; gap: 6px; padding: 12px; }
.os-wf__pop--trig .os-sl { margin: 0; }
.os-wf__popline { font-size: 12.5px; color: var(--os-ink); }
.os-wf__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: var(--os-r-control); font-size: 12px; color: var(--os-ink-muted); transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }
.os-wf__opt:hover { background: var(--os-hover); color: var(--os-ink); }
.os-wf__opt.is-on { color: var(--os-ink); }
.os-wf__opt .os-i { width: 11px; height: 11px; color: var(--os-accent-ink); }

/* WorkflowRow.svelte */
.os-wfrow { position: relative; flex: none; border: 1px solid var(--os-stroke); border-radius: 12px; transition: border-color var(--os-base) var(--os-ease), background-color var(--os-base) var(--os-ease); }
.os-wfrow:hover { border-color: var(--os-stroke-strong); background: var(--os-hover); }
.os-wfrow.is-selected { box-shadow: inset 2px 0 0 var(--os-accent); }
.os-wfrow__head { padding: 11px 14px; border-radius: 12px; cursor: pointer; }
.os-wfrow__head:focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; }
.os-wfrow__l1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.os-wfrow__l1 > .os-i { width: 15px; height: 15px; }
.os-wfrow__name { overflow: hidden; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.os-wfrow__end { display: flex; flex: none; align-items: center; gap: 12px; margin-left: auto; }
.os-wfrow__chev { display: inline-flex; color: var(--os-ink-muted); transition: transform var(--os-base) var(--os-ease); }
.os-wfrow__chev .os-i { width: 14px; height: 14px; }
.os-wfrow.is-open .os-wfrow__chev { transform: rotate(180deg); }
.os-wfrow__l2 { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding-left: 25px; }
.os-wfrow__sum { overflow: hidden; min-width: 0; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-muted); }
.os-wfrow__right { display: flex; flex: none; align-items: center; gap: 5px; margin-left: auto; }
.os-wf__for { font-size: 11px; color: var(--os-ink-subtle); }
.os-wf__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--os-stroke); border-radius: var(--os-r-chip); font-size: 11px; color: var(--os-ink-muted); }

/* WorkflowRowBody.svelte */
.os-wfbody { margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--os-stroke-subtle); cursor: default; }
.os-wfbody__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 22px; }
.os-wfbody__cell { min-width: 0; }
.os-wfbody__stats { display: flex; flex-direction: column; gap: 4px; }
.os-wfstat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.os-wfstat span { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-subtle); }
.os-wfstat b { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.os-spark { display: block; width: 100%; height: 28px; overflow: visible; }
.os-wfpanel .os-spark { height: 40px; }
.os-spark__l { fill: none; stroke: var(--os-accent-ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.os-spark__a { fill: var(--os-accent-fill); }
.os-wheres { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.os-where { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; }
.os-where .os-cav { width: 18px; height: 18px; }
.os-where__n { flex: none; }
.os-where__s { overflow: hidden; flex: 1; min-width: 0; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--os-ink-subtle); }
.os-stepchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.os-stepchips li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--os-r-chip); background: var(--os-neutral-fill); font-size: 11.5px; }
.os-stepchips .os-i { width: 10px; height: 10px; color: var(--os-accent-ink); }
.os-wf__safe { margin-top: 8px; font-size: 11.5px; color: var(--os-ink-subtle); }
.os-wfbody__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

/* WorkflowRunList.svelte */
.os-runs { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.tos .os-run { display: flex; align-items: center; gap: 8px; width: calc(100% + 12px); margin: 0 -6px; padding: 4px 6px; border-radius: var(--os-r-control); transition: background-color var(--os-fast) var(--os-ease); }
.os-run:hover { background: var(--os-hover); }
.os-run__g { display: inline-flex; flex: none; }
.os-run__g .os-i { width: 12px; height: 12px; }
.os-run__g--ok { color: var(--os-success); }
.os-run__g--failed { color: var(--os-danger); }
.os-run__g--waiting { color: var(--os-caution); }
.os-run__g--skipped { color: var(--os-ink-subtle); }
.os-run__what { overflow: hidden; flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.os-run__when { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--os-ink-subtle); }
.os-run__trace { margin: 2px 0 8px 6px; padding: 0 0 0 14px; border-left: 1px solid var(--os-stroke-subtle); list-style: none; }
.os-run__trace li { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; font-size: 11.5px; color: var(--os-ink-muted); }
.os-run__trace li span { font-variant-numeric: tabular-nums; color: var(--os-ink-subtle); }
.os-run__trace em { font-style: normal; }
.os-run__trace .os-run__items { padding-top: 4px; color: var(--os-ink); }

/* WorkflowDetailPanel.svelte */
.os-wfpanel { display: flex; flex: none; flex-direction: column; width: 320px; min-height: 0; border-left: 1px solid var(--os-stroke-subtle); background: var(--os-panel); }
.os-wfpanel__head { display: flex; flex: none; align-items: center; gap: 10px; min-height: 50px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-wfpanel__head > .os-i { width: 15px; height: 15px; }
.os-wfpanel__grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.os-wfpanel__title { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.os-wfpanel__who { font-size: 11px; color: var(--os-ink-subtle); }
.os-wfpanel__pad { padding: 16px; }
.os-wfpanel__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.os-wfpanel__sec { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--os-stroke-subtle); }
.os-wfpanel__sec:last-child { border-bottom: 0; }
.os-wfpanel__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-wfpanel__line { font-size: 13px; line-height: 1.5; color: var(--os-ink-muted); }
.os-wfpanel__note { font-size: 11.5px; color: var(--os-ink-muted); }
.os-wfpanel__foot { display: flex; flex: none; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--os-stroke-subtle); }
.os-tilerow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.os-stile { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--os-stroke-subtle); border-radius: 8px; transition: border-color var(--os-fast) var(--os-ease); }
.os-stile:hover { border-color: var(--os-stroke-strong); }
.os-stile span { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os-ink-muted); }
.os-stile b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.os-stile em { font-size: 11px; font-style: normal; color: var(--os-ink-muted); }
.os-wf__safebox { margin-top: 4px; padding: 10px 12px; border: 1px solid var(--os-stroke-subtle); border-radius: var(--os-r-card); background: var(--os-sunken); font-size: 11.5px; line-height: 1.5; color: var(--os-ink-muted); }
.os-setup { display: flex; flex-direction: column; gap: 6px; }
.os-setup__l { font-size: 12.5px; }
.os-setup__f { padding: 8px 12px; border: 1px solid var(--os-stroke); border-radius: var(--os-r-control); background: var(--os-sunken); font-size: 12.5px; }
.os-setup__f.is-empty { color: var(--os-ink-subtle); }

/* The step chain, after EditorNodeCard.svelte: family chip, name, what it
   does, and the last run's dot. Connectors turn green along a finished run. */
.os-chain { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.os-node { position: relative; }
.os-node + .os-node::before { content: ""; position: absolute; left: 24px; top: -14px; height: 14px; border-left: 1.5px solid var(--os-stroke-strong); }
.os-node + .os-node::after { content: ""; position: absolute; left: 21px; top: -5px; z-index: 1; width: 7px; height: 7px; border: 1.5px solid var(--os-stroke-strong); border-radius: var(--r-circle); background: var(--os-panel); }
.os-node--done + .os-node--done::before,
.os-node--done + .os-node--error::before,
.os-node--done + .os-node--waiting::before { border-color: color-mix(in oklab, var(--os-success) 60%, transparent); }
.os-node--done + .os-node--done::after { border-color: color-mix(in oklab, var(--os-success) 60%, transparent); }
.tos .os-node__card { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--os-stroke); border-radius: 12px; background: var(--os-sunken); transition: border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease); }
.tos .os-node__card:hover { border-color: var(--os-stroke-strong); background: var(--os-hover); }
.tos .os-node.is-on .os-node__card { border-color: var(--os-accent-border); box-shadow: 0 0 0 1px var(--os-accent-border); }
.tos .os-node--error .os-node__card { border-color: var(--os-danger); }
.tos .os-node--waiting .os-node__card { border-color: var(--os-caution); }
.os-node--pending .os-node__card,
.os-node--skipped .os-node__card { opacity: 0.6; }
.os-node__chip { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; }
.os-node__chip .os-i { width: 13px; height: 13px; }
.os-node__chip--trigger { background: color-mix(in oklab, var(--os-tag-teal) 15%, transparent); color: var(--os-tag-teal); }
.os-node__chip--read { background: color-mix(in oklab, var(--os-tag-blue-deep) 15%, transparent); color: var(--os-tag-blue-deep); }
.os-node__chip--ai { background: color-mix(in oklab, var(--os-tag-magenta) 15%, transparent); color: var(--os-tag-magenta); }
.os-node__chip--human { background: var(--os-accent-fill); color: var(--os-accent-ink); }
.os-node__chip--action { background: color-mix(in oklab, var(--os-tag-orange) 15%, transparent); color: var(--os-tag-orange); }
.os-node__chip--logic { background: color-mix(in oklab, var(--os-tag-yellow) 15%, transparent); color: var(--os-tag-yellow); }
.os-node__chip--output { background: color-mix(in oklab, var(--os-tag-green) 15%, transparent); color: var(--os-tag-green); }
.os-node__txt { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.os-node__name { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.os-node__sub { font-size: 11px; line-height: 1.35; color: var(--os-ink-subtle); }
.os-node__card .os-badge { align-self: center; }
.os-node__run { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: var(--r-circle); background: var(--os-stroke-strong); }
.os-node--done .os-node__run { background: var(--os-success); }
.os-node--error .os-node__run { background: var(--os-danger); }
.os-node--waiting .os-node__run { background: var(--os-caution); }

/* A macOS arrow. The SVG's tip sits at 6px 3px, so that is where it scales
   from and where the click ring starts. */
.os-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 28px;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  /* JS moves the box with transform: translate3d on every frame. The arrow is
     drawn on ::after so its fade-in and press scale never touch the path. */
  transition: opacity 240ms var(--os-ease);
}
.os-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/company/os-cursor.svg") 0 0 / 28px 28px no-repeat;
  transform-origin: 6px 3px;
  scale: 0.85;
  transition: scale 240ms var(--os-ease);
}
.os-cursor.is-on::after { scale: 1; }
.os-cursor.is-on.is-press::after { scale: 0.9; transition-duration: 80ms; }
.os-cursor::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -11px;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(var(--crema-rgb), 0.9);
  border-radius: var(--r-circle);
  opacity: 0;
  scale: 0.3;
}
.os-cursor.is-on { opacity: 1; }
/* The send button presses in step with the pointer: 80ms down, 80ms back. */
.tos .os-btn-primary.os-composer__send { transition: background-color var(--os-fast) var(--os-ease), transform 80ms var(--os-ease), box-shadow 80ms var(--os-ease); }
/* Toaster.svelte: an inverted surface, cream on the dark app, stacked at the
   bottom centre. The tone lives on the border only. */
.os-toasts {
  --os-inv-ink: var(--ciruela);
  --os-inv-muted: color-mix(in oklab, var(--ciruela) 72%, transparent);
  --os-inv-stroke: color-mix(in oklab, var(--media) 16%, transparent);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  pointer-events: none;
}
.os-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(440px, 100%);
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid var(--os-inv-stroke);
  border-radius: 8px;
  background: var(--crema);
  box-shadow: 0 12px 28px oklch(0% 0 0 / 0.35), 0 2px 6px oklch(0% 0 0 / 0.2);
  color: var(--os-inv-ink);
  font-size: 13px;
  line-height: 1.35;
  transition: opacity 180ms var(--os-ease), transform 180ms var(--os-ease), border-color 180ms var(--os-ease);
}
.os-toast--success { border-color: color-mix(in oklab, oklch(52% 0.13 145) 55%, transparent); }
.os-toast--info { border-color: color-mix(in oklab, oklch(52% 0.12 250) 50%, transparent); }
.os-toast--review { border-color: color-mix(in oklab, var(--honey) 70%, transparent); }
.os-toast.is-out { opacity: 0; transform: translateY(12px); }
.os-toast__i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; }
.os-toast__i .os-i { width: 15px; height: 15px; }
.os-toast.is-review .os-toast__i { color: var(--honey); }
.os-toast__m { flex: 1; min-width: 0; }
.os-toast__m b { font-weight: 600; }

/* The agents' group on the toast stack. Same inverted card as a toast; a
   header names the job and the person in the loop, then one card per agent.
   Ink hues are darker steps of the app's category colours so they read on
   cream. */
.os-agents {
  --os-ag-ok: oklch(50% 0.13 145);
  --os-ag-blue: oklch(52% 0.13 245);
  --os-ag-magenta: oklch(50% 0.15 320);
  --os-ag-mint: oklch(52% 0.11 170);
  --os-ag-accent: oklch(55% 0.12 60);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(472px, 100%);
  /* A solid plate under the whole group, so no row text shows between or
     behind its cards. */
  padding: 6px;
  border: 1px solid var(--os-glass-stroke);
  border-radius: 14px;
  background: var(--os-panel);
  box-shadow: var(--os-shadow-overlay);
}
.os-agents__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--os-inv-stroke);
  border-radius: var(--r-pill);
  background: var(--crema);
  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.2);
  color: var(--os-inv-ink);
  font-size: 12px;
}
.os-agents__job { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-agents__job b { font-weight: 600; }
.os-agents__sam { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 2px 9px 2px 2px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--os-ag-ok) 14%, transparent); color: var(--os-ag-ok); font-size: 11px; font-weight: 600; transition: background-color 200ms var(--os-ease), color 200ms var(--os-ease); }
.os-agents.is-review .os-agents__sam { background: color-mix(in oklab, var(--honey) 18%, transparent); color: color-mix(in oklab, var(--honey) 80%, var(--ciruela)); }
.os-agents__av { width: 18px; height: 18px; border-radius: var(--r-circle); object-fit: cover; }
.os-agents__list { display: flex; flex-direction: column; gap: 6px; }
.os-ag {
  --hue: var(--os-ag-blue);
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 12px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--hue) 45%, transparent);
  border-radius: 8px;
  background: var(--crema);
  box-shadow: 0 12px 28px oklch(0% 0 0 / 0.32), 0 2px 6px oklch(0% 0 0 / 0.18);
  color: var(--os-inv-ink);
  font-size: 12.5px;
  line-height: 1.3;
  transition: grid-template-columns 280ms var(--os-ease), padding 280ms var(--os-ease), border-color 200ms var(--os-ease);
}
.os-ag--blue { --hue: var(--os-ag-blue); }
.os-ag--magenta { --hue: var(--os-ag-magenta); }
.os-ag--mint { --hue: var(--os-ag-mint); }
.os-ag--accent { --hue: var(--os-ag-accent); }
.os-ag.is-review { border-color: var(--honey); }
.os-ag.is-done { grid-template-columns: 34px minmax(0, 1fr) 0px; padding-top: 8px; padding-bottom: 8px; border-color: color-mix(in oklab, var(--os-ag-ok) 40%, transparent); }
.os-ag__disc { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-circle); background: color-mix(in oklab, var(--hue) 14%, transparent); color: var(--hue); }
.os-ag__disc > .os-i { width: 15px; height: 15px; }
.os-ag__face { width: 26px; height: 26px; border-radius: var(--r-circle); object-fit: cover; }
.os-ag__ring { position: absolute; inset: 0; width: 34px; height: 34px; fill: none; stroke: var(--hue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 104; transform-origin: 50% 50%; transition: stroke-dasharray 320ms var(--os-ease), stroke 200ms var(--os-ease), opacity 200ms; }
.os-ag.is-review .os-ag__ring { stroke: var(--honey); stroke-dasharray: 6 5; }
.os-ag.is-done .os-ag__ring { stroke: var(--os-ag-ok); stroke-dasharray: 104 0; }
.os-ag__ok { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid var(--crema); border-radius: var(--r-circle); background: var(--os-ag-ok); opacity: 0; transform: scale(0.4); transition: opacity 160ms var(--os-ease), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1.3); }
.os-ag.is-done .os-ag__ok { opacity: 1; transform: none; }
.os-ag__tick { width: 9px; height: 9px; fill: none; stroke: var(--crema); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 240ms var(--os-ease) 120ms; }
.os-ag.is-done .os-ag__tick { stroke-dashoffset: 0; }
.os-ag__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.os-ag__top { display: flex; align-items: center; gap: 8px; }
.os-ag__top b { font-weight: 600; white-space: nowrap; }
.os-ag__pill { flex: none; padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--hue) 14%, transparent); color: var(--hue); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.os-ag.is-review .os-ag__pill { background: color-mix(in oklab, var(--honey) 20%, transparent); color: color-mix(in oklab, var(--honey) 80%, var(--ciruela)); }
.os-ag.is-done .os-ag__pill { background: color-mix(in oklab, var(--os-ag-ok) 14%, transparent); color: var(--os-ag-ok); }
.os-ag__time { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--os-inv-muted); }
.os-ag__line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--os-inv-muted); }
.os-ag__bar { position: relative; height: 3px; margin-top: 3px; overflow: hidden; border-radius: var(--r-pill); background: color-mix(in oklab, var(--media) 9%, transparent); transition: height 240ms var(--os-ease), margin 240ms var(--os-ease), opacity 200ms; }
.os-ag__bar i { position: absolute; inset: 0; background: var(--hue); transform: scaleX(0); transform-origin: left center; transition: transform 60ms linear; }
.os-ag.is-review .os-ag__bar i { background: var(--honey); }
.os-ag.is-done .os-ag__bar { height: 0; margin-top: 0; opacity: 0; }
.os-ag__viz { display: flex; justify-content: flex-end; overflow: hidden; transition: opacity 200ms var(--os-ease); }
.os-ag.is-done .os-ag__viz { opacity: 0; }

/* Research: a mini document with a scan line sweeping it. */
.os-doc { position: relative; display: flex; flex-direction: column; gap: 4px; width: 40px; height: 46px; padding: 7px 6px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--hue) 35%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--hue) 5%, var(--crema)); }
.os-doc i { display: block; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--ciruela) 22%, transparent); }
.os-doc i:nth-child(2) { width: 70%; }
.os-doc i:nth-child(4) { width: 55%; }
.os-doc b { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--hue) 35%, transparent)); border-bottom: 1px solid var(--hue); }
/* Deck: two slides behind, the front one's chart redrawing. */
.os-deck { position: relative; width: 52px; height: 40px; }
.os-deck__s,
.os-deck__f { position: absolute; width: 44px; height: 30px; border: 1px solid color-mix(in oklab, var(--hue) 35%, transparent); border-radius: 3px; background: var(--crema); }
.os-deck__s:nth-child(1) { top: 0; right: 0; opacity: 0.45; }
.os-deck__s:nth-child(2) { top: 4px; right: 4px; opacity: 0.75; }
.os-deck__f { top: 9px; right: 8px; display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px; background: color-mix(in oklab, var(--hue) 5%, var(--crema)); }
.os-deck__f i { display: block; flex: 1; height: 60%; border-radius: 1px; background: var(--hue); transform-origin: bottom; }
.os-deck__f i:nth-child(1) { height: 45%; }
.os-deck__f i:nth-child(3) { height: 85%; }
.os-ag.is-review .os-deck__f i:nth-child(3) { background: var(--honey); }
/* Calendar: a day grid, 8 to 12, with the 9 to 11 block filling in. */
.os-cal { position: relative; display: grid; grid-template-columns: 12px 1fr; grid-auto-rows: 9px; align-items: center; column-gap: 3px; width: 54px; font-size: 7px; line-height: 1; color: var(--os-inv-muted); }
.os-cal span { text-align: right; }
.os-cal i { height: 1px; background: color-mix(in oklab, var(--media) 14%, transparent); }
.os-cal b { position: absolute; left: 16px; right: 0; top: 13px; height: 18px; border-radius: 2px; background: color-mix(in oklab, var(--hue) 55%, transparent); border-left: 2px solid var(--hue); transform: scaleY(0); transform-origin: top; transition: transform 60ms linear; }
/* Sam's review: the old figure struck, the new one ticking in. */
.os-fix { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11px; font-variant-numeric: tabular-nums; }
.os-fix s { position: relative; text-decoration: none; color: var(--os-inv-muted); }
.os-fix s::after { content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1.5px; background: var(--honey); }
.os-fix b { font-size: 13px; font-weight: 700; color: var(--os-ag-ok); }
.os-toasts.is-paused * { animation-play-state: paused; }

/* Motion. Everything that moves on its own sits behind no-preference,
   so reduced motion gets a still, fully drawn state. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes os-rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes os-slide { from { opacity: 0; transform: translateX(-14px); } }
  @keyframes os-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
  /* The "this is new" glow. It lives on an overlay (::after) so it never
     touches the row's own box, border or layout: a honey tint and a soft
     inset ring that fade in, hold, and fade to nothing. */
  @keyframes os-glow { 0% { opacity: 0; } 18%, 48% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes os-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
  @keyframes os-caret { 50% { opacity: 0; } }

  .os-new { animation: os-rise 420ms var(--os-ease) backwards; }
  .os-conv.os-new { animation: os-slide 420ms var(--os-ease) backwards; }
  .os-fact.os-new,
  .os-pf.os-new,
  .os-upd.os-new,
  .os-act.os-new { animation: os-rise 420ms var(--os-ease) backwards; }
  .os-conv.os-new::after,
  .os-fact.os-new::after,
  .os-pf.os-new::after,
  .os-upd.os-new::after,
  .os-act.os-new::after,
  .os-trow.os-new::after {
    content: "";
    position: absolute;
    inset: var(--os-glow-inset, 0);
    z-index: 0;
    border-radius: var(--os-glow-r, var(--os-r-control));
    background: var(--os-accent-fill);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--os-accent) 70%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: os-glow 1.8s var(--os-ease) 0.25s both;
  }
  .os-msg.os-new,
  .os-toast { animation: os-pop 320ms var(--os-ease) backwards; }
  .os-composer.os-new .os-composer__meta,
  .os-composer.os-new .os-composer__subject { animation: os-rise 320ms var(--os-ease) backwards; }
  .os-composer.os-new .os-composer__subject { animation-delay: 80ms; }
  @keyframes os-ring { 0% { opacity: 0.9; scale: 0.3; } 100% { opacity: 0; scale: 1.25; } }
  .os-cursor.is-click::before { animation: os-ring 460ms var(--os-ease) forwards; }
  .os-wfbody.os-new,
  .os-run__trace.os-new { animation: os-rise 260ms var(--os-ease) backwards; }
  .os-wfpanel.os-new { animation: os-slide-l 280ms var(--os-ease) backwards; }
  @keyframes os-slide-l { from { opacity: 0; transform: translateX(16px); } }
  .os-wf__pop { animation: os-pop 160ms var(--os-ease) backwards; }
  .os-typing i { animation: os-bounce 1s infinite; }
  .os-typing i:nth-child(2) { animation-delay: 0.15s; }
  .os-typing i:nth-child(3) { animation-delay: 0.3s; }
  .os-composer .is-typing::after { animation: os-caret 0.9s steps(1) infinite; }
  /* Toasts fly up 12px as they arrive, as the real stack does. */
  @keyframes os-tin { from { opacity: 0; transform: translateY(12px); } }
  .os-toast { animation: os-tin 180ms var(--os-ease) backwards; }
  /* The agents' working loops. Each stops once its card is done. */
  @keyframes os-spin { to { transform: rotate(360deg); } }
  .os-ag.is-run .os-ag__ring { animation: os-spin 0.8s linear infinite; }
  .os-ag.is-review .os-ag__ring { animation: os-spin 2.4s linear infinite; }
  @keyframes os-scan { from { transform: translateY(-9px); } to { transform: translateY(46px); } }
  .os-ag.is-run .os-doc b { animation: os-scan 0.9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes os-redraw { 0% { transform: scaleY(0.15); } 55%, 100% { transform: scaleY(1); } }
  .os-ag.is-run .os-deck__f i { animation: os-redraw 0.9s var(--os-ease) infinite; }
  .os-ag.is-run .os-deck__f i:nth-child(2) { animation-delay: 0.12s; }
  .os-ag.is-run .os-deck__f i:nth-child(3) { animation-delay: 0.24s; }
  @keyframes os-deckflip { 0%, 70% { transform: none; } 85% { transform: perspective(80px) rotateY(-60deg); } 100% { transform: none; } }
  .os-ag.is-run .os-deck__f { animation: os-deckflip 1.1s var(--os-ease) infinite; }
  @keyframes os-strike { from { transform: scaleX(0); } }
  .os-fix s::after { transform-origin: left; animation: os-strike 360ms var(--os-ease) 120ms backwards; }
  /* Task rows: in from the left as their height opens; out by closing. */
  @keyframes os-tw-open { from { grid-template-rows: 0fr; } }
  @keyframes os-tw-slide { from { opacity: 0; transform: translateX(-20px); } }
  .os-tw.is-enter { animation: os-tw-open 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .os-tw.is-enter .os-trow { animation: os-tw-slide 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .os-tw { transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms var(--os-ease); }
  @keyframes os-checkin { from { transform: scale(0.5); opacity: 0; } }
  .os-check.is-on .os-i { animation: os-checkin 120ms var(--os-ease) backwards; }
  .os-trow__title span { transition: background-size 180ms var(--os-ease); }
  /* Skeleton shimmer (layout.css .skeleton-shimmer), and the fill: each row
     arrives with a short fade and a 3px rise once its skeleton lifts. */
  @keyframes os-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .tos :is(.os-sk .os-skb, .os-sk.os-skb, .os-sk .os-skp, .os-sk .os-skc) { animation: os-shim 1.2s ease-in-out infinite; }
  @keyframes os-fill { from { opacity: 0; transform: translateY(3px); } }
  .os-fill { animation: os-fill 100ms var(--os-ease) backwards; }
}

/* ── Loading skeletons ──────────────────────────────────────
   Painted over the real, already laid out content, so nothing moves when a
   region fills: text turns into rounded bars cut to its own extent, avatars
   into circles, badges into pills, icons drop out. Only paint changes. The
   JS adds .os-sk to a row and removes it to fill; reduced motion never adds it. */
.tos {
  /* How far each bar is cut in from the left and right; JS sets them per bar. */
  --os-skl: 0px;
  --os-skr: 0px;
  --os-sk-fill: linear-gradient(90deg, rgba(var(--crema-rgb), 0.06) 0%, rgba(var(--crema-rgb), 0.12) 50%, rgba(var(--crema-rgb), 0.06) 100%) 0 0 / 200% 100%;
}
.tos :is(.os-sk .os-skb, .os-sk.os-skb, .os-sk .os-skp, .os-sk .os-skc) {
  border-color: transparent;
  background: var(--os-sk-fill);
  box-shadow: none;
  color: transparent;
  text-shadow: none;
}
.tos :is(.os-sk .os-skb, .os-sk.os-skb) {
  border-radius: 4px;
  clip-path: inset(18% var(--os-skr, 0px) 18% var(--os-skl, 0px) round 4px);
}
.tos .os-sk .os-bubble.os-skb { border-radius: 16px; clip-path: none; }
.tos .os-sk .os-skc { object-position: -9999px 0; }
.tos :is(.os-sk .os-skb *, .os-sk.os-skb *, .os-sk .os-skp *, .os-sk .os-skh) { visibility: hidden; }
.tos .os-sk .os-sdot__l { visibility: hidden; }

/* ── Container rules. The main column reflows by its own width. ── */
@container osmain (max-width: 560px) {
  .os-convs,
  .os-search,
  .os-ph__actions .os-iconbtn { display: none; }
  .os-ph { padding: 14px 14px 8px; }
  .os-ph--bordered { padding-bottom: 10px; }
  .os-ph__title { font-size: 21px; }
  .os-dash { padding: 14px; }
  .os-tlist { padding: 6px 12px 16px; }
  .os-trow__head { gap: 10px; padding: 11px 12px 0; }
  .os-trow__who { display: none; }
  .os-trow__meta,
  .os-trow__prog,
  .os-trow__checked { padding-left: 38px; padding-right: 12px; }
  .os-trow__acts { order: 3; width: 100%; margin-left: -8px; }
  .os-card__more { margin-left: 38px; margin-right: 12px; }
  .os-prof { padding: 4px 12px 16px; gap: 12px; }
  .os-prof__head { flex-direction: column; gap: 12px; padding: 14px; }
  .os-prof__av { width: 56px; height: 56px; }
  .os-prof__name { font-size: 20px; }
  .os-prof__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .os-prof__inv { display: none; }
  .os-dc__head { padding: 12px 12px 8px; }
  .os-dc__body { padding: 0 12px 12px; }
  .os-psec { padding: 12px; }
  .os-msgs { padding: 14px 12px; }
  .os-thread__head { padding: 8px 12px; }
  .os-composer { padding: 8px 10px; }
  .os-composer__input--draft { max-height: 104px; font-size: 11.5px; }
  .os-composer__note { display: none; }
}
/* Workflows in a narrow main column: the panel becomes a sheet over the list,
   opened by Open details, and the row keeps only what fits. */
@container osmain (max-width: 699px) {
  .os-wfpanel { display: none; }
  .os-wfpanel.is-peek { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; display: flex; width: min(340px, 100%); box-shadow: var(--os-shadow-overlay); }
  .os-wfbody__grid { grid-template-columns: minmax(0, 1fr); }
}
@container osmain (max-width: 520px) {
  .os-wf__bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .os-wf__search { flex: 1 1 100%; }
  .os-wf__end .os-wf__meta { display: none; }
  .os-wf__list { padding: 10px; }
  .os-wfrow__head { padding: 10px 12px; }
  .os-wfrow__l2 { padding-left: 0; }
  .os-wfrow__right,
  .os-wfrow__end .os-sdot__l { display: none; }
  .os-wfbody { margin: 0 12px; }
  .os-ph__actions .os-btn-primary { padding: 6px 10px; }
}
@container osmain (max-width: 400px) {
  .os-wfrow .os-trig-wrap { display: none; }
  .os-seg { display: none; }
}
@container osmain (min-width: 720px) {
  .os-prof__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Wide enough for the profile's side rail: Updates sits beside Preferences,
   matches its height and scrolls inside itself. */
@container osmain (min-width: 1000px) {
  .os-prof__ov { flex-direction: row; align-items: stretch; }
  .os-prof__ov > .os-prof__prefs { flex: 1; }
  .os-prof__ov > .os-prof__upd { flex: none; width: 290px; contain: size; }
  .os-prof__ov > .os-prof__upd .os-dc__body { flex: 1; min-height: 0; overflow-y: auto; }
}
@container osmain (min-width: 880px) {
  .os-profile { display: flex; }
  .os-profile.is-hidden { display: none; }
}