/* Agent board. Apple's system look on the web: system font with size-specific tracking, grouped
   surfaces on a soft background, translucent chrome over scrolling content, color only where it
   carries meaning (status), springs for motion (web/src/models/spring.ts), gentle fallbacks for
   reduced motion, transparency and higher contrast. */

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.07);
  --label: #1d1d1f;
  --label-2: rgba(60, 60, 67, 0.64);
  --label-3: rgba(60, 60, 67, 0.38);
  --separator: rgba(60, 60, 67, 0.14);
  --material: rgba(245, 245, 247, 0.96);
  --material-thick: rgba(250, 250, 252, 0.8);
  --panel: #fbfbfd;
  --panel-float: #ffffff;
  --scroll: rgba(60, 60, 67, 0.28);
  --edge: rgba(255, 255, 255, 0.6);
  --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.035);
  --shadow-lift: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 30px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);

  --green: #34c759;
  --orange: #ff9500;
  --purple: #af52de;
  --blue: #007aff;
  --gray: #8e8e93;
  --red: #ff3b30;
  --accent: var(--blue);

  --radius: 14px;
  --gutter: 28px;
  --gap: 12px;
  --cols: repeat(5, minmax(0, 1fr));
  --col-min: 136px;
}

/* Light or dark as the system has it, unless the viewer picked one in Settings (web/src/theme.ts). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-2: rgba(120, 120, 128, 0.14);
    --label: #f5f5f7;
    --label-2: rgba(235, 235, 245, 0.62);
    --label-3: rgba(235, 235, 245, 0.32);
    --separator: rgba(84, 84, 88, 0.6);
    --material: rgba(14, 14, 16, 0.96);
    --material-thick: rgba(38, 38, 40, 0.78);
    --panel: #121214;
    --panel-float: #242427;
    --scroll: rgba(235, 235, 245, 0.22);
    --edge: rgba(255, 255, 255, 0.08);
    --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-sheet: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 30px 90px rgba(0, 0, 0, 0.7);
    --green: #30d158;
    --orange: #ff9f0a;
    --purple: #bf5af2;
    --blue: #0a84ff;
    --gray: #98989d;
    --red: #ff453a;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --fill: rgba(120, 120, 128, 0.24);
  --fill-2: rgba(120, 120, 128, 0.14);
  --label: #f5f5f7;
  --label-2: rgba(235, 235, 245, 0.62);
  --label-3: rgba(235, 235, 245, 0.32);
  --separator: rgba(84, 84, 88, 0.6);
  --material: rgba(14, 14, 16, 0.96);
  --material-thick: rgba(38, 38, 40, 0.78);
  --panel: #121214;
  --panel-float: #242427;
  --scroll: rgba(235, 235, 245, 0.22);
  --edge: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-sheet: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 30px 90px rgba(0, 0, 0, 0.7);
  --green: #30d158;
  --orange: #ff9f0a;
  --purple: #bf5af2;
  --blue: #0a84ff;
  --gray: #98989d;
  --red: #ff453a;
}

* { box-sizing: border-box; }
/* Quiet scrollbars: a thin thumb on no track, so the board's bar beside a docked panel reads as
   part of the window, not as a strip of its own. */
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--label);
  font: 14px/1.42 var(--font);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: default; -webkit-tap-highlight-color: transparent; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .fill { fill: currentColor; stroke: none; opacity: 0.32; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- page */
/* The toolbar and the board. A docked panel takes its room from the page's margins
   (web/src/components/panel/place.ts moves --room-* on springs), and the page lays itself out
   for the width that is left. */
.page {
  container: page / inline-size;
  margin: 0 var(--room-right, 0px) 0 var(--room-left, 0px);
}

/* ---------------------------------------------------------------- toolbar */
/* One compact row, like a window's unified toolbar: the title with its summary as a subtitle on
   the left, the controls on the right, the column heads under them. Rarely used toggles are
   icons; their names stay for screen readers and tooltips. A narrow page wraps the row (below). */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px var(--gutter) 0;
  background: var(--material);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: box-shadow 200ms ease;
}
/* The row's own width: the page's, less a side panel lying over the board (components/panel/), so the
   controls stay clear of it and lay themselves out for what is left. */
.toolbar-fit { container: tools / inline-size; margin: 0 var(--over-right, 0px) 0 var(--over-left, 0px); }
/* Scroll edge: a hairline only once content actually runs under the bar. */
.toolbar.scrolled { box-shadow: 0 0.5px 0 var(--separator), 0 8px 24px -16px rgba(0, 0, 0, 0.2); }
.toolbar-row { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.titles { flex: 1 0 auto; min-width: 0; }
h1 {
  margin: 0;
  font: 700 19px/1.15 var(--font-display);
  letter-spacing: -0.016em;
  white-space: nowrap;
}
.summary { margin: 1px 0 0; overflow: hidden; font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.summary b { color: var(--label); font-weight: 600; }
.controls { display: flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.controls > * { flex: none; }
.controls > .segmented { flex: 0 1 auto; min-width: 0; }
/* An icon in place of a label; the label is still its name. */
.pill-toggle.icon-only { justify-content: center; min-width: 28px; padding: 0 7px; }
.pill-toggle.icon-only > span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pill-toggle:hover:not(:disabled) { color: var(--label); }
#next-attention:disabled { opacity: 0.45; }
/* The summary rides under the title while the row has room for it; its words are the title's tooltip too. */
@container tools (max-width: 1580px) { .summary { display: none; } }
/* Less room: the title and the buttons on top, the lanes and search on a second row. A phone
   gives the lanes a row of their own, and search shares the third with what needs you. */
@container tools (max-width: 1200px) {
  .toolbar-row { flex-wrap: wrap; gap: 0 6px; }
  .toolbar-row::after { content: ""; order: 2; flex: 0 0 100%; }
  .controls { display: contents; }
  .titles { order: 0; flex: 1 1 auto; margin-right: 10px; }
  .controls > * { order: 1; }
  .controls > .segmented, .controls > .search { order: 3; margin-top: 8px; }
  .controls > .search { flex: 1 1 200px; min-width: 120px; }
  .search input { width: 100%; min-width: 0; }
}
@container tools (max-width: 560px) {
  .controls > .segmented { flex: 1 0 100%; }
  .controls > .search, #next-attention, .limits, .live { order: 4; margin-top: 8px; }
  .controls > .search { flex: 1 1 90px; min-width: 0; }
}

/* Never wider than the page (a phone, a board beside a wide panel): it scrolls in its own row. */
.segmented {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
/* Lanes past the edge fade out there, so the strip reads as one that scrolls (hooks/useLaneFades.ts). */
.segmented.fade-end { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.segmented.fade-start { mask-image: linear-gradient(to right, transparent, #000 28px); }
.segmented.fade-start.fade-end { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.segmented button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--label);
}
.segmented button .n { margin-left: 5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.segmented .thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.1);
  transform-origin: left center;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented .thumb { background: #636366; } }
:root[data-theme="dark"] .segmented .thumb { background: #636366; }

.search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--fill);
  color: var(--label-2);
}
.search input { width: 150px; border: 0; outline: 0; background: none; font-size: 13px; color: var(--label); }
.search input::placeholder { color: var(--label-3); }
.search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: var(--fill);
  color: var(--label-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 100ms ease-out, background 150ms ease;
}
.pill-toggle[aria-pressed="true"] { color: var(--label); }
.pill-toggle[aria-pressed="false"] { opacity: 0.6; }
.pill-toggle:active, .button:active, .icon-button:active, .card-actions button:active { transform: scale(0.96); }

.live { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); opacity: 0.5; transition: background 300ms ease, opacity 300ms ease; }
.live.stale { background: var(--orange); opacity: 1; }
.live.on { background: var(--green); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }

.columns-head {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
  padding: 8px 0 8px;
}
.col-head { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--label-2); letter-spacing: 0.01em; }
.col-head .t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-head .n { flex: none; font-weight: 500; color: var(--label-3); font-variant-numeric: tabular-nums; }
/* An empty column keeps a narrow strip with its name and count; the room goes to the others,
   while a card stays a card's width however wide its column grows. */
.col-head.vacant { color: var(--label-3); }
@container page (min-width: 961px) { .col { max-width: 560px; } }

/* ---------------------------------------------------------------- board */
.board { padding: 4px var(--gutter) max(140px, calc(var(--room-bottom, 0px) + 28px)); }
.empty { padding: 80px 0; text-align: center; color: var(--label-3); font-size: 15px; }

.lane { margin-top: 18px; }
.lane-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 2px; }
.lane-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 15px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.lane-tag::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--lane); }
.lane-count { font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.lane-grid {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
  align-items: start;
  min-height: 44px;
  border-radius: calc(var(--radius) + 6px);
  margin: -6px;
  padding: 6px;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.lane.drop .lane-grid {
  background: color-mix(in srgb, var(--lane) 9%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lane) 45%, transparent);
}
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-radius: var(--radius); transition: background 160ms ease, box-shadow 160ms ease; }
.col-label { display: none; }
.lane.filtered, .lane.empty-lane { display: none; }
/* While a card is dragged, empty lanes come back as drop targets, and every column of a lane
   reaches down to the lane's bottom, so an empty one can take a card too. */
body.dragging .lane.empty-lane:not(.filtered) { display: block; }
body.dragging .lane-grid { align-items: stretch; }
body.dragging .col { min-height: 44px; }
.col.drop {
  background: color-mix(in srgb, var(--lane) 11%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lane) 11%, transparent), 0 0 0 7.5px color-mix(in srgb, var(--lane) 45%, transparent);
}
body.dragging { cursor: grabbing; }
.card[data-col="me"] { box-shadow: var(--shadow-card), inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 55%, transparent); }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  padding: 11px 12px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  user-select: none;
  touch-action: none;
  outline: none;
  transition: transform 100ms ease-out, box-shadow 150ms ease;
}
.card:active { transform: scale(0.985); }
.card:focus-visible, .card.selected { box-shadow: var(--shadow-card), 0 0 0 2px var(--accent); }
.card.placeholder { opacity: 0.3; }
.card.moving { transition: none; will-change: transform; }

.card-top { display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; }
.name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.age { flex: none; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; transition: opacity 120ms ease; }
.what { margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.said { margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.now { margin-top: 7px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label-2); min-width: 0; }
.now .tool { color: var(--green); font-weight: 600; white-space: nowrap; }
.now .detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.now.idle .tool { color: var(--label-3); font-weight: 500; }
.now.restart svg { flex: none; width: 12px; height: 12px; stroke-width: 1.7; color: var(--label-3); }
.now.restart .tool { color: var(--label-2); }
.now.restart.on svg, .now.restart.on .tool { color: var(--accent); }
.now.restart.on svg { animation: spin 1.6s linear infinite; }
.ask {
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  font-size: 12.5px;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chip {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  font-size: 12px;
  font-weight: 500;
}
.chip svg { width: 13px; height: 13px; color: var(--purple); }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--gray)); }
.dot.work::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.6); opacity: 0; } }
.dot.idle { background: none; box-shadow: inset 0 0 0 1.5px var(--gray); }
.moon { width: 13px; height: 13px; color: var(--label-3); }
/* A result not opened yet: a dot by the name, the name a touch heavier (web/src/models/attention.ts). */
.unseen-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.card.unseen .name { font-weight: 700; }
/* The user dragged the card to this column; it goes back by itself once the session works again. */
.pinned { display: flex; flex: none; color: var(--label-3); }
.pinned svg { width: 13px; height: 13px; }
.card-actions .moon { width: 15px; height: 15px; color: inherit; }
.spin { width: 12px; height: 12px; color: var(--green); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 120ms ease, transform 160ms ease;
  pointer-events: none;
}
.card-actions button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: var(--fill);
  color: var(--label);
  backdrop-filter: blur(8px);
  transition: transform 100ms ease-out, background 120ms ease;
}
.card-actions button:hover { background: color-mix(in srgb, var(--accent) 18%, var(--fill)); color: var(--accent); }
.card:hover .card-actions, .card:focus-visible .card-actions { opacity: 1; transform: none; pointer-events: auto; }
.card:hover .age { opacity: 0; }

.card.compact { padding: 7px 12px; background: var(--fill-2); box-shadow: none; }
.card.compact .name { font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.card.compact .card-top { height: 18px; }
.card.compact .card-actions { top: 3px; right: 6px; }
.card.compact .card-actions button { width: 24px; height: 24px; }
.card.busy::after {
  content: attr(data-busy);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(2px);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--label-2);
}

/* A card being dragged: lifted above everything, glued to the pointer. */
.ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
  will-change: transform;
}

/* ---------------------------------------------------------------- sheet */
/* Where it is and how big comes from web/src/components/panel/ (left/top 0, width, height,
   transform); on a phone it is the full-height sheet below, and only slides. */
.sheet {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 560px;
  height: calc(100vh - 24px);
  container: sheet / size;
  border-radius: 22px;
  /* A window of thick glass: the board only tints it, its text stays clear of what is behind. */
  background: color-mix(in srgb, var(--panel-float) 94%, transparent);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-sheet), inset 0 0.5px 0 var(--edge);
  visibility: hidden;
  will-change: transform;
  touch-action: pan-y;
  /* Corners round off as it comes loose from an edge, and square up as it docks. */
  transition: border-radius 220ms ease;
}
.sheet.open { visibility: visible; }
/* Docked, it is part of the window: flush with its edge and square there, solid, set off from
   the board by a hairline and a soft shadow (it can lie over the board in a narrower window).
   Floating, it stays a window of glass, inset and rounded. */
.sheet[data-dock="right"], .sheet[data-dock="left"], .sheet[data-dock="bottom"] {
  border-radius: 0;
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sheet[data-dock="right"] { box-shadow: -1px 0 0 var(--separator), -20px 0 44px -30px rgba(0, 0, 0, 0.5); }
.sheet[data-dock="left"] { box-shadow: 1px 0 0 var(--separator), 20px 0 44px -30px rgba(0, 0, 0, 0.5); }
.sheet[data-dock="bottom"] { box-shadow: 0 -1px 0 var(--separator), 0 -20px 44px -30px rgba(0, 0, 0, 0.5); }
/* Lying over the board (no room beside it): the same sidebar, with a deeper shadow over the cards. */
.sheet.over[data-dock="right"] { box-shadow: -1px 0 0 var(--separator), -28px 0 64px -24px rgba(0, 0, 0, 0.55); }
.sheet.over[data-dock="left"] { box-shadow: 1px 0 0 var(--separator), 28px 0 64px -24px rgba(0, 0, 0, 0.55); }
.sheet-inner { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; }
.sheet-grip { display: none; position: absolute; z-index: 2; left: 6px; top: 50%; width: 4px; height: 40px; margin-top: -20px; border-radius: 2px; background: var(--label-3); opacity: 0.35; cursor: grab; touch-action: none; }
.sheet[data-dock="left"] .sheet-grip { left: auto; right: 6px; }
.sheet[data-dock="bottom"] .sheet-grip { left: 50%; top: 6px; width: 40px; height: 4px; margin: 0 0 0 -20px; }
@media (max-width: 760px), (pointer: coarse) { .sheet:not([data-dock="float"]) .sheet-grip { display: block; } }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 18px 12px 22px; cursor: grab; }
.sheet-tools { display: flex; flex: none; gap: 6px; }
.sheet-tools .icon-button:hover { color: var(--label); }
.sheet-tools [data-layout][aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--fill)); color: var(--accent); }
@media (max-width: 760px) {
  .sheet { top: 12px; right: 12px; bottom: 12px; left: auto; width: min(560px, calc(100vw - 24px)); height: auto; }
  .sheet-tools [data-layout] { display: none; }
}

/* Edges that resize: the one towards the board when docked, all of them when floating. A pill
   shows on hover; the cursor says which way. */
.sheet-edge { position: absolute; z-index: 3; display: none; outline: none; touch-action: none; }
.sheet[data-dock="right"] > .sheet-edge[data-edge="w"],
.sheet[data-dock="left"] > .sheet-edge[data-edge="e"],
.sheet[data-dock="bottom"] > .sheet-edge[data-edge="n"],
.sheet[data-dock="float"] > .sheet-edge { display: block; }
.sheet-edge[data-edge="w"], .sheet-edge[data-edge="e"] { top: 22px; bottom: 22px; width: 14px; cursor: col-resize; }
.sheet-edge[data-edge="w"] { left: -7px; }
.sheet-edge[data-edge="e"] { right: -7px; }
.sheet-edge[data-edge="n"], .sheet-edge[data-edge="s"] { left: 22px; right: 22px; height: 14px; cursor: row-resize; }
.sheet-edge[data-edge="n"] { top: -7px; }
.sheet-edge[data-edge="s"] { bottom: -7px; }
.sheet-edge[data-edge="nw"], .sheet-edge[data-edge="ne"], .sheet-edge[data-edge="sw"], .sheet-edge[data-edge="se"] { width: 24px; height: 24px; }
.sheet-edge[data-edge="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.sheet-edge[data-edge="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.sheet-edge[data-edge="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.sheet-edge[data-edge="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.sheet-edge::after { content: ""; position: absolute; border-radius: 2px; background: var(--label-3); opacity: 0; transition: opacity 160ms ease, background-color 160ms ease; }
.sheet-edge[data-edge="w"]::after, .sheet-edge[data-edge="e"]::after { left: 5px; top: 50%; width: 4px; height: 44px; margin-top: -22px; }
.sheet-edge[data-edge="n"]::after, .sheet-edge[data-edge="s"]::after { top: 5px; left: 50%; width: 44px; height: 4px; margin-left: -22px; }
.sheet-edge[data-edge="se"]::after { right: 10px; bottom: 10px; width: 9px; height: 9px; border: solid var(--label-3); border-width: 0 2.5px 2.5px 0; border-radius: 0 0 4px 0; background: none; }
.sheet-edge:hover::after, .sheet-edge.active::after, .sheet-edge:focus-visible::after { opacity: 1; }
.sheet-edge.active::after, .sheet-edge:focus-visible::after { background-color: var(--accent); }
.sheet-edge[data-edge="se"]:focus-visible::after, .sheet-edge[data-edge="se"].active::after { background: none; border-color: var(--accent); }
body.panel-grabbing, body.panel-resizing { user-select: none; -webkit-user-select: none; }
body.panel-grabbing, body.panel-grabbing * { cursor: grabbing !important; }
body.panel-resizing, body.panel-resizing * { cursor: var(--grab-cursor) !important; }

/* Where a panel let go now would dock: grown out of the panel, on springs
   (web/src/components/panel/dock-preview.ts). Square, as the docked panel is. */
.dock-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 39;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* The place menu, out of the button in the panel's head. */
.layout-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 5px;
  border-radius: 13px;
  background: var(--material-thick);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-lift), inset 0 0.5px 0 var(--edge);
  will-change: transform, opacity;
}
.layout-menu button { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 9px 0 8px; border: 0; border-radius: 8px; background: none; color: var(--label); font-size: 13px; text-align: left; outline: none; }
.layout-menu button span { flex: 1; white-space: nowrap; }
.layout-menu button svg { color: var(--label-2); }
.layout-menu .check { visibility: hidden; color: var(--accent); }
.layout-menu [aria-checked="true"] .check { visibility: visible; }
.layout-menu button:hover, .layout-menu button:focus-visible { background: var(--accent); color: #fff; }
.layout-menu button:hover svg, .layout-menu button:focus-visible svg { color: #fff; }
.layout-sep { height: 0.5px; margin: 4px 8px; background: var(--separator); }

.sheet-title { flex: 1; min-width: 0; }
.sheet-title h2 { margin: 6px 0 0; font: 700 22px/1.15 var(--font-display); letter-spacing: -0.018em; overflow-wrap: anywhere; }
.sheet-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--label-2); }
.sheet-meta > span { white-space: nowrap; }
.sheet-properties-toggle { display: none; }
.sheet-question { flex: 0 1 auto; min-height: 0; max-height: 24vh; overflow: auto; padding: 0 18px 10px 22px; }
.sheet-question .asked { margin: 0; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--gray)) 15%, transparent);
  color: var(--c, var(--gray));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.icon-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--label-2);
  transition: transform 100ms ease-out;
}
.sheet-body {
  flex: 1 1 0;
  min-height: 96px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 18px 16px 22px;
  /* Scroll edge: content fades under the head and the composer instead of a hard line. */
  mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 14px), transparent);
}
.detail-status { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 12%, var(--surface)); font-size: 12px; }
.detail-status span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.detail-status small { display: block; color: var(--label-2); margin-top: 3px; }
.sheet-body.has-detail-state { mask-image: none; }
.sheet-card { flex: 0 1 auto; min-height: 0; overflow: auto; padding: 0 18px 6px 22px; }
.sheet-card .group { margin-top: 2px; }
.group { margin-top: 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.you { color: var(--label-3); font-weight: 500; }
.row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; }
.row + .row { box-shadow: inset 0 0.5px 0 var(--separator); }
.row-label { flex: none; width: 82px; font-size: 13px; color: var(--label-2); }
.row-value { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.row-value.muted { color: var(--label-3); }
.row input {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: 13.5px;
}
.row input::placeholder { color: var(--label-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--fill-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: transform 100ms ease-out, background 150ms ease;
}
.chips button::before { content: ""; width: 8px; height: 8px; border-radius: 2.5px; background: var(--lane); }
.chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--lane) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane) 55%, transparent); }
.chips button:active { transform: scale(0.95); }
.chips button.auto { color: var(--label-2); box-shadow: inset 0 0 0 1px var(--label-3); background: none; }
.chips button.auto::before { display: none; }

.section-title { margin: 22px 0 8px 2px; font-size: 12px; font-weight: 600; color: var(--label-2); letter-spacing: 0.02em; }
.asked { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 14%, transparent); font-size: 13.5px; }
.asked b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--orange); letter-spacing: 0.02em; }
.asked-dismiss { display: flex; margin-top: 10px; height: 28px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ask b { font-weight: 600; color: var(--orange); }
.screen {
  margin: 10px 0 0;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fill-2);
  font: 11.5px/1.45 var(--mono);
  white-space: pre;
  color: var(--label);
}

.thread { display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }

/* Markdown inside a bubble: compact, the bubble is the container. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 7px; }
.md h3, .md h4, .md h5, .md h6 { margin: 10px 0 5px; font: 650 14px/1.3 var(--font-display); letter-spacing: -0.005em; }
.md h3 { font-size: 15.5px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--separator); color: var(--label-2); }
.md hr { margin: 10px 0; border: 0; border-top: 0.5px solid var(--separator); }
.md a { color: var(--accent); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.msg.user .md a { color: #fff; text-decoration: underline; }
.md .local { border-bottom: 1px dotted currentColor; }
.md pre {
  margin: 6px 0 8px;
  padding: 9px 11px;
  overflow: auto;
  border-radius: 9px;
  background: var(--fill-2);
  font: 12px/1.45 var(--mono);
  white-space: pre;
}
.md pre code { padding: 0; background: none; font: inherit; }
.msg.user .md pre { background: rgba(255, 255, 255, 0.16); }
.md .table { margin: 6px 0 8px; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.md th, .md td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; }
.md th { font-weight: 600; color: var(--label-2); border-bottom: 0.5px solid var(--separator); }
.md tr + tr td { border-top: 0.5px solid var(--separator); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.thumbs img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; object-fit: cover; }

/* Attachments waiting to be sent. */
.attachments { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attachments.has { display: flex; }
.attachment {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  padding: 5px 28px 5px 5px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.attachment img, .file-icon { flex: none; width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.file-icon { display: grid; place-items: center; background: var(--fill-2); color: var(--label-2); }
.file-icon svg { width: 20px; height: 20px; }
.att-text { display: flex; flex-direction: column; min-width: 0; }
.att-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-size { font-size: 11.5px; color: var(--label-3); }
.attachment.uploading .att-size { color: var(--accent); }
.attachment.error { box-shadow: var(--shadow-card), 0 0 0 1.5px var(--red); }
.attachment.error .att-size { color: var(--red); }
.att-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--label-2);
  font-size: 14px;
  line-height: 1;
}
.attach {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--label-2);
  transition: transform 100ms ease-out, background 120ms ease;
}
.attach:hover { background: var(--fill-2); color: var(--accent); }
.attach:active { transform: scale(0.92); }
.sheet.dropping { box-shadow: var(--shadow-sheet), inset 0 0 0 2px var(--accent); }
.sheet.dropping .composer-box { box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.msg.user { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--accent); color: #fff; }
.msg.assistant { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--surface); box-shadow: var(--shadow-card); }
.msg code { font: 12px var(--mono); padding: 1px 4px; border-radius: 4px; background: var(--fill); overflow-wrap: anywhere; }
.msg.user code { background: rgba(255, 255, 255, 0.2); }
.msg .when { display: block; margin-top: 3px; font-size: 11px; opacity: 0.55; }
/* Not taken in yet (models/outbox.ts): the user's bubble, quiet, with its state where the time goes. */
.msg.user.waiting { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--label); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 34%, transparent); }
.msg.user.waiting .md a { color: var(--accent); text-decoration: none; }
.msg.user.waiting code, .msg.user.waiting .md pre { background: var(--fill); }
.msg.user.waiting .fs-chip, .msg.user.waiting code.fs-chip { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: none; color: var(--accent); }
.msg.waiting .when { display: flex; align-items: center; gap: 4px; color: var(--label-2); opacity: 1; }
.msg.waiting .when svg { width: 11px; height: 11px; stroke-width: 1.8; }
.msg.waiting.failed { box-shadow: inset 0 0 0 1px var(--red); }
.msg.waiting.failed .when { display: block; }
.msg.waiting.failed .when b { font-weight: 500; color: var(--red); }
.out-actions { display: flex; gap: 6px; margin-top: 6px; }
.out-actions button { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--fill); color: var(--accent); font: 500 12px/1.3 var(--font); transition: transform 100ms ease-out, background 120ms ease; }
.out-actions button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.out-actions button:active { transform: scale(0.96); }
.tools { align-self: flex-start; max-width: 100%; font-size: 12px; color: var(--label-2); }
.tools summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; cursor: default; }
.tools summary::-webkit-details-marker { display: none; }
.tools summary:hover { background: var(--fill-2); }
.tools summary .chev { width: 11px; height: 11px; transition: transform 200ms ease; }
.tools[open] summary .chev { transform: rotate(90deg); }
.tool-line { display: flex; gap: 6px; padding: 2px 8px 2px 25px; min-width: 0; }
.tool-line .t { color: var(--label); font-weight: 500; white-space: nowrap; }
.tool-line .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tool-line.pending .t { color: var(--green); }
/* A background task reporting back or a board reminder (models/notice.ts): quiet, apart from the bubbles. */
.notice { align-self: stretch; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--label-2); }
div.notice, .notice > summary { display: flex; align-items: flex-start; gap: 7px; padding: 4px 8px; border-radius: 9px; min-width: 0; }
.notice > summary { list-style: none; cursor: default; }
.notice > summary::-webkit-details-marker { display: none; }
.notice > summary:hover { background: var(--fill-2); }
.notice-mark { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; flex: none; color: #fff; background: var(--gray); }
.notice-mark svg { width: 10px; height: 10px; stroke-width: 2.3; }
.notice.ok .notice-mark { background: var(--green); }
.notice.fail .notice-mark { background: var(--red); }
.notice.info .notice-mark { background: var(--purple); }
.notice.info .notice-mark svg { stroke-width: 1.9; }
.notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notice.fail .notice-text { color: var(--label); }
.notice-text small { font-size: 11.5px; color: var(--label-3); }
.notice-file { flex: none; color: var(--accent); font-weight: 500; }
.notice-file:not([data-fs="file"]) { display: none; }
.notice-file:hover { text-decoration: underline; cursor: pointer; }
.notice .when { flex: none; font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.notice > summary .chev { flex: none; width: 11px; height: 11px; margin-top: 2.5px; transition: transform 200ms ease; }
.notice[open] > summary .chev { transform: rotate(90deg); }
.notice-body { margin: 2px 8px 6px 30px; padding: 8px 12px; border-radius: 12px; background: var(--fill-2); color: var(--label); font-size: 12.5px; line-height: 1.45; max-height: 360px; overflow: auto; overflow-wrap: anywhere; }
.notice-body code { font: 12px var(--mono); padding: 1px 4px; border-radius: 4px; background: var(--fill); }
.notice-body > pre { margin: 0; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; }

.composer { padding: 10px 14px 14px 18px; }
/* One row that fits any panel: as many actions as its width holds, most used first, and More
   at the end for the rest (hooks/useActionRow.ts with models/row-model.ts; .over is under More).
   With their words while at least four fit so, else icons named by their tooltips; going to the
   session keeps its words, and gives them up only before the row would run over. .measuring
   shows every button, for a moment within one task, to take their widths. */
.composer-actions { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.composer-actions::-webkit-scrollbar { display: none; }
.composer-actions > .button { flex: none; }
.composer-actions > .over { display: none; }
.composer-actions.measuring > .button { display: inline-flex; }
.composer-actions:not(.measuring) > #sheet-focus { flex: 0 1 auto; min-width: 0; }
#sheet-focus > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sheet-more { justify-content: center; width: 30px; margin-left: auto; padding: 0; }
.composer-actions.icons > .button:not(#sheet-focus) { justify-content: center; width: 30px; padding: 0; }
.composer-actions.icons > .button:not(#sheet-focus) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 500;
  transition: transform 100ms ease-out, background 150ms ease;
}
.button.primary { background: var(--accent); color: #fff; }
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.composer-box:focus-within { box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.composer textarea {
  flex: 1;
  min-height: 24px;
  max-height: 180px;
  margin: 3px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  font-size: 14px;
  line-height: 1.42;
}
.composer textarea::placeholder { color: var(--label-3); }
.send {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform 100ms ease-out, opacity 150ms ease;
}
.send svg { stroke-width: 2.1; }
.send:disabled { opacity: 0.3; }
.send:active:not(:disabled) { transform: scale(0.92); }
/* Discard the draft: only there while there is one. */
.draft-clear { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-bottom: 2px; border: 0; border-radius: 50%; background: none; color: var(--label-3); transition: background 120ms ease, color 120ms ease; }
.draft-clear[hidden] { display: none; }
.draft-clear:hover { background: var(--fill); color: var(--label-2); }
.draft-clear:disabled { opacity: 0.3; }
.draft-clear svg { width: 14px; height: 14px; stroke-width: 2; }

/* ---------------------------------------------------------------- categories */
.lane-head { cursor: default; border-radius: 8px; width: fit-content; padding: 2px 8px 2px 2px; transition: background 150ms ease; }
.lane-head:hover { background: var(--fill-2); }
.cats-body { mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 10px), transparent); padding-top: 6px; }
.cats-list { display: flex; flex-direction: column; gap: 8px; }
.cat-row {
  position: relative;
  padding: 8px 10px 9px 6px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow 160ms ease;
}
.cat-row.lifted { z-index: 2; box-shadow: var(--shadow-lift); }
.cat-row.draft { margin-top: 8px; box-shadow: var(--shadow-card), 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.cat-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.handle {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--label-3);
  cursor: grab;
  touch-action: none;
}
.handle:hover { background: var(--fill-2); color: var(--label-2); }
.lifted .handle { cursor: grabbing; }
.swatch {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 4px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lane);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  transition: transform 100ms ease-out;
}
button.swatch:active { transform: scale(0.88); }
.cat-title {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: none;
  font: 600 14.5px/1.3 var(--font-display);
  letter-spacing: -0.01em;
}
.cat-title:focus { background: var(--fill-2); }
.cat-title::placeholder { color: var(--label-3); font-weight: 500; }
.cat-count { flex: none; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.cat-del {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--label-3);
  font-size: 12px;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease;
}
.cat-del:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.cat-row[data-confirm] .cat-del { color: #fff; background: var(--red); padding: 0 10px 0 8px; }
.cat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0 0 58px; font-size: 12px; color: var(--label-2); }
.cat-id { font: 11.5px var(--mono); color: var(--label-3); margin-right: 4px; }
.paths { display: contents; }
.path { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border-radius: 6px; background: var(--fill-2); font: 11.5px var(--mono); color: var(--label); max-width: 100%; }
.path > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 4px; background: none; color: var(--label-3); font-size: 13px; line-height: 1; }
.path button:hover { background: var(--fill); color: var(--red); }
.path-add, .draft-id {
  flex: 1;
  min-width: 140px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: none;
  font: 12px var(--mono);
}
.path-add:focus, .draft-id:focus { background: var(--fill-2); }
.path-add::placeholder, .draft-id::placeholder { color: var(--label-3); font-family: var(--font); }
.draft-id { flex: 0 1 200px; }
.hint { color: var(--label-3); }
.hint code { font: 11.5px var(--mono); }
.palette { display: flex; flex-wrap: wrap; gap: 9px; padding: 10px 0 2px 58px; }
.sw {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  transition: transform 100ms ease-out;
}
.sw:active { transform: scale(0.88); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.cat-row.adhoc .cat-title { color: var(--label-2); }
.cat-row.adhoc .handle { visibility: hidden; }

/* ---------------------------------------------------------------- schedule */
/* On a card: a clock with the soonest time, orange while a due one waits for the session. */
.alarm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  height: 18px;
  padding: 0 6px 0 4px;
  border-radius: 999px;
  background: var(--fill-2);
  color: var(--label-2);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 120ms ease;
}
.alarm svg { width: 12px; height: 12px; stroke-width: 1.7; }
.alarm.due { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.card:hover .alarm { opacity: 0; }
.card.compact .alarm { height: 17px; background: none; padding: 0; }
/* A restart on its way, in a session's sheet: tinted, its arrows turning, while Claude exits and comes back. */
.sched-mini .when.on svg { animation: spin 1.6s linear infinite; }

.pill-toggle .n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--fill); color: var(--label-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.pill-toggle .n:empty { display: none; }
.pill-toggle.due .n { background: var(--orange); color: #fff; }

/* Cancel: a quiet trash can; the first click turns it into a red "Cancel?". */
.sched-x {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--label-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, transform 100ms ease-out;
}
.sched-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.sched-x:active { transform: scale(0.94); }
.sched-x[data-confirm] { color: #fff; background: var(--red); padding: 0 10px 0 8px; }
.sched-x span:empty { display: none; }

/* In a session's sheet: its next three, one line each. */
.row.sched-row { align-items: flex-start; }
.sched-row .row-label { padding-top: 4px; }
.sched-row .row-value { display: flex; flex-direction: column; gap: 2px; }
.sched-mini { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.sched-mini .when { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-mini .when svg { width: 13px; height: 13px; color: var(--label-3); }
.sched-mini .when.due, .sched-mini .when.due svg { color: var(--orange); }
.sched-mini .when.on, .sched-mini .when.on svg { color: var(--accent); }
.sched-mini .text { flex: 1; min-width: 0; overflow: hidden; color: var(--label-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.sched-more { align-self: flex-start; margin-top: 2px; padding: 2px 0; border: 0; background: none; color: var(--accent); font-size: 12.5px; font-weight: 500; }
.sched-more:hover { text-decoration: underline; }

/* The schedule panel: grouped by day, like a calendar's list view. */
.sched-body { padding-top: 0; }
.sched-body > .section-title:first-child { margin-top: 8px; }
.sched-group, .sched-log { margin-top: 0; overflow: hidden; }
.sched-entry {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 10px 12px 14px;
}
.sched-entry + .sched-entry, .log-row + .log-row { box-shadow: inset 0 0.5px 0 var(--separator); }
.sched-time { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sched-time b { font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sched-entry.waiting .sched-time b { color: var(--orange); }
.sched-time span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--label-3); font-size: 11.5px; }
.sched-time svg { width: 12px; height: 12px; flex: none; }
.sched-main { min-width: 0; }
.sched-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 2px -2px;
  padding: 1px 6px 1px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--label-2);
  transition: background 120ms ease, color 120ms ease;
}
.sched-who::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2.5px; background: var(--lane); }
.sched-who:not(:disabled):hover { background: var(--fill-2); color: var(--accent); }
.sched-who:disabled { opacity: 0.7; }
.sched-text { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sched-state { margin-top: 4px; font-size: 12px; color: var(--orange); }
.sched-state.muted { color: var(--label-3); }
.sched-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 11.5px; color: var(--label-3); }
/* Delivery: on time (tinted, the default) or when the session is free (quiet); a click switches. */
.sched-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 20px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease, transform 100ms ease-out;
}
.sched-mode svg { width: 12px; height: 12px; stroke-width: 1.8; }
.sched-mode.idle { background: var(--fill-2); color: var(--label-2); }
.sched-mode:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.sched-mode.idle:hover { background: var(--fill); }
.sched-mode:active { transform: scale(0.94); }
.sched-mode.short { width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 7px; }
.sched-mode.short svg { width: 14px; height: 14px; }
.sched-stats code { padding: 1px 5px; border-radius: 5px; background: var(--fill-2); font: 11px var(--mono); color: var(--label-2); }
.sched-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; color: var(--label-2); }
.sched-empty svg { width: 42px; height: 42px; margin-bottom: 6px; color: var(--label-3); stroke-width: 1.2; }
.sched-empty p { margin: 0; }
.sched-empty .hint { font-size: 12.5px; }

.log-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 12px; font-size: 12.5px; }
.log-icon { display: grid; place-items: center; align-self: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/1 var(--font); }
.log-icon svg { width: 12px; height: 12px; stroke-width: 2.2; }
.log-row.sent .log-icon { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.log-row.missed .log-icon, .log-row.failed .log-icon { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.log-when { color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-what { min-width: 0; overflow: hidden; color: var(--label-2); white-space: nowrap; text-overflow: ellipsis; }
.log-what b { color: var(--label); font-weight: 600; }
.log-note { color: var(--label-3); white-space: nowrap; }
.log-row.missed .log-note, .log-row.failed .log-note { color: var(--orange); }
.log-row.dropped .log-icon { background: var(--fill); color: var(--label-2); font-size: 13px; }

/* ---------------------------------------------------------------- archive */
/* The archive panel (components/archive/ArchivePanel.tsx): a search on top, then the sessions by
   the day they went, like the schedule. */
.archive-find { padding: 0 18px 10px 22px; }
.archive-find .search { display: flex; height: 32px; }
.archive-find .search input { flex: 1; width: auto; min-width: 0; }
.archive-body { padding-top: 0; }
.archive-body > .section-title:first-child, .arch-tidy + .section-title { margin-top: 10px; }
.arch-group { margin-top: 0; overflow: hidden; }
.arch-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 12px 14px; }
.arch-row + .arch-row { box-shadow: inset 0 0.5px 0 var(--separator); }
.arch-main { flex: 1; min-width: 0; }
.arch-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.arch-name { flex: 1; min-width: 0; overflow: hidden; font: 600 14px/1.3 var(--font-display); letter-spacing: -0.005em; white-space: nowrap; text-overflow: ellipsis; }
.arch-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2.5px; background: var(--lane); vertical-align: 1px; }
.arch-when { flex: none; color: var(--label-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.arch-note { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--label-2); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arch-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; color: var(--label-3); font-size: 11.5px; }
.arch-where { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.arch-extra { color: var(--label-2); }
.arch-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-top: -2px; }
.arch-return { height: 28px; padding: 0 11px 0 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.arch-return svg { width: 15px; height: 15px; flex: none; }
.arch-return:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.arch-return:active:not(:disabled) { transform: scale(0.96); }
.arch-return:disabled { opacity: 0.55; }
.arch-row.returning .arch-return { background: var(--fill-2); color: var(--label-2); opacity: 1; }
.arch-row .sched-x:disabled { opacity: 0.4; }
/* While sleeping sessions pile up in "Idle": a quiet offer to take them along. */
.arch-tidy { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 9px 9px 9px 13px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--label-2); font-size: 13px; line-height: 1.35; }
.arch-tidy > svg { flex: none; width: 16px; height: 16px; color: var(--label-3); }
.arch-tidy > span { flex: 1; min-width: 0; }
.arch-tidy .button { flex: none; height: 28px; }
/* While a card is dragged: the archive as a place to drop it, at the foot of the board
   (components/DropArchive.tsx). It materializes with the drag (springs), lights up while the card
   is over it, and says why when the session may not go yet. Below the dragged card, above
   everything else. */
.drop-archive {
  position: fixed;
  left: calc(50% + (var(--room-left, 0px) - var(--room-right, 0px)) / 2);
  bottom: calc(24px + var(--room-bottom, 0px));
  z-index: 59;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  max-width: min(440px, calc(100vw - 32px));
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  translate: -50% 0;
  opacity: 0;
  background: var(--material-thick);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-lift), inset 0 0.5px 0 var(--edge);
  color: var(--label-2);
  font-size: 14px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, scale 160ms ease-out;
}
.drop-archive.on { display: flex; }
.drop-archive svg { flex: none; width: 22px; height: 22px; }
.drop-archive span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.drop-archive.over { scale: 1.06; background: var(--accent); color: #fff; }
.drop-archive.blocked { color: var(--label-3); }
.drop-archive.blocked.over { scale: 1; background: color-mix(in srgb, var(--red) 14%, var(--surface)); color: var(--red); }
@media (prefers-reduced-transparency: reduce) { .drop-archive { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .drop-archive { transition: none; } }
/* A card on its way into the Archive button (hooks/useArchive.ts, its flight), above the board and
   its panels. */
.ghost.to-archive { z-index: 75; will-change: transform, opacity; }

/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; left: calc(50% + (var(--room-left, 0px) - var(--room-right, 0px)) / 2); bottom: calc(28px + var(--room-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; }
.toast {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--material-thick);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-lift);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.toast.error { color: var(--red); }
/* One with a button (Return after an archive): it takes the pointer, and wraps on a phone. */
.toast.with-action { display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 5px 5px 5px 16px; pointer-events: auto; }
.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.toast-action { flex: none; height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 600 13px var(--font); transition: background 150ms ease, transform 100ms ease-out; }
.toast-action:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.toast-action:active { transform: scale(0.95); }
.toast-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .toast.with-action { white-space: normal; border-radius: 18px; }
}

/* ---------------------------------------------------------------- files in the chat */
/* A path the server found on disk becomes a chip; a click opens the quick look. */
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 1px;
  padding: 0 7px 0 5px;
  border-radius: 7px;
  vertical-align: -2px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font: 500 12.5px/1.6 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, transform 100ms ease-out;
}
.msg code.fs-chip { padding: 0 7px 0 5px; font: 500 12.5px/1.6 var(--font); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fs-chip svg { width: 13px; height: 13px; stroke-width: 1.7; }
.fs-chip-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-chip:hover, .msg code.fs-chip:hover { background: color-mix(in srgb, var(--accent) 17%, transparent); text-decoration: none; }
.fs-chip:active { transform: scale(0.96); }
.fs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.msg.user .fs-chip, .msg.user code.fs-chip { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4); color: #fff; }
.msg.user .fs-chip:hover { background: rgba(255, 255, 255, 0.3); }
.md a.fs { color: var(--accent); }
.md a.fs[data-fs="missing"] { color: inherit; opacity: 0.6; border-bottom: 1px dotted currentColor; cursor: default; }
.tool-line .d[data-fs="file"] { cursor: pointer; }
.tool-line .d[data-fs="file"]:hover { color: var(--accent); text-decoration: underline; }
.thumbs a[data-fs] { cursor: zoom-in; }

/* The quick look: a window over the dimmed board, grown out of the chip it was opened from. */
.ql { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.ql[hidden] { display: none; }
.ql-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.36); opacity: 0; }
.ql-win {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: 18px;
  background: var(--material-thick);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-sheet);
  opacity: 0;
  outline: none;
  will-change: transform, opacity;
}
.ql-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 0.5px solid var(--separator); }
.ql-icon { display: grid; place-items: center; flex: none; }
.ql-icon svg { width: 28px; height: 28px; color: var(--accent); stroke-width: 1.4; }
.ql-titles { flex: 1; min-width: 0; }
.ql-titles h3 { margin: 0; overflow: hidden; font: 650 15px/1.3 var(--font-display); letter-spacing: -0.012em; white-space: nowrap; text-overflow: ellipsis; }
.ql-path { display: flex; align-items: center; gap: 1px; margin: 1px 0 0 -4px; overflow-x: auto; scrollbar-width: none; font-size: 12px; white-space: nowrap; color: var(--label-2); }
.ql-path::-webkit-scrollbar { display: none; }
.ql-path button { flex: none; padding: 1px 4px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: pointer; }
.ql-path button:hover { background: var(--fill); color: var(--label); }
.ql-path span { flex: none; color: var(--label-3); }
.ql-tools { display: flex; flex: none; align-items: center; gap: 6px; }
.ql-tools .icon-button:hover { color: var(--label); }
.ql-tools .button:disabled, .ql-tools .icon-button:disabled { opacity: 0.4; }
.ql-mode { display: inline-flex; margin-right: 4px; padding: 2px; border-radius: 9px; background: var(--fill); }
.ql-mode[hidden] { display: none; }
.ql-mode button { padding: 4px 11px; border: 0; border-radius: 7px; background: none; color: var(--label-2); font: 500 12px var(--font); cursor: pointer; }
.ql-mode button[aria-pressed="true"] { background: var(--surface); color: var(--label); box-shadow: var(--shadow-card); }
.ql-body { position: relative; flex: 1; min-height: 0; overflow: auto; background: var(--surface); }
.ql-foot { min-height: 30px; padding: 7px 14px; border-top: 0.5px solid var(--separator); box-sizing: border-box; font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.look-foot { display: flex; align-items: center; gap: 12px; }
.look-foot-text { flex: 1; min-width: 0; }
/* Beside the zoom bar the facts stay on one line; elsewhere they wrap as they always did. */
.look-foot:has(.ql-zoom:not([hidden])) .look-foot-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The zoom: the scale, quiet, and one button in to 100% or back to fit. */
.ql-zoom { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: -4px -6px -4px 0; }
.ql-zoom[hidden] { display: none; }
.ql-zoom-button { height: 22px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--fill); color: var(--label); font: 500 12px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform 100ms ease-out, background 150ms ease; }
.ql-zoom-button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ql-zoom-button:active { transform: scale(0.96); }
.ql-zoom-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) {
  /* A finger gets a bigger target than the button shows. */
  .ql-zoom-button { position: relative; }
  .ql-zoom-button::after { content: ''; position: absolute; inset: -10px -8px; }
}
.ql-wait { padding: 48px; text-align: center; color: var(--label-3); }

.ql-code { width: max-content; min-width: 100%; padding: 10px 0 16px; box-sizing: border-box; font: 12.5px/1.6 var(--mono); }
.ql-ln { padding-right: 20px; white-space: pre; }
.ql-ln::before {
  content: attr(data-n);
  position: sticky;
  left: 0;
  display: inline-block;
  width: 5ch;
  margin-right: 14px;
  padding-right: 10px;
  border-right: 0.5px solid var(--separator);
  background: var(--surface);
  color: var(--label-3);
  text-align: right;
  user-select: none;
}
.ql-ln.hit { background: color-mix(in srgb, var(--orange) 18%, transparent); }
.ql-ln.hit::before { color: var(--orange); font-weight: 600; }

.ql-md { max-width: 780px; margin: 0 auto; padding: 28px 36px 48px; font-size: 14.5px; line-height: 1.6; }
.ql-md h3 { margin-top: 18px; font-size: 24px; letter-spacing: -0.02em; }
.ql-md h4 { margin-top: 16px; font-size: 19px; letter-spacing: -0.015em; }
.ql-md h5 { font-size: 16px; }
.ql-md p { margin: 0 0 12px; }
.ql-md code { padding: 1px 5px; border-radius: 5px; background: var(--fill); font: 0.88em var(--mono); }
.ql-md pre code { padding: 0; background: none; font-size: 12.5px; }
.ql-md .fs-chip { font-size: 0.9em; }

.ql-table table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ql-table th, .ql-table td { max-width: 420px; padding: 6px 14px; overflow: hidden; border-bottom: 0.5px solid var(--separator); text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.ql-table th { position: sticky; top: 0; background: var(--material-thick); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-weight: 600; color: var(--label-2); }
.ql-table tbody tr:nth-child(even) td { background: var(--fill-2); }

.ql-media { display: grid; place-items: center; height: 100%; padding: 24px; box-sizing: border-box; }
.ql-media img, .ql-media video { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: var(--shadow-card); object-fit: contain; }
.ql-media.audio { gap: 20px; align-content: center; }
.ql-media.audio svg { width: 64px; height: 64px; color: var(--label-3); stroke-width: 1.2; }
.checker { background: repeating-conic-gradient(var(--fill-2) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
/* A zoomable image: web/src/components/files/zoom.ts sizes and moves it; the cursor tells a click from a drag. */
.ql-body.k-image { overflow: hidden; }
.ql-stage.zoomable { position: relative; display: block; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: zoom-in; }
.ql-stage.zoomable[data-zoom="in"] { cursor: grab; }
.ql-stage.zoomable.dragging[data-zoom="in"] { cursor: grabbing; }
.ql-stage.zoomable img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; }
.ql-stage.zoomable img.pixelated { image-rendering: pixelated; }
.ql-frame { display: block; width: 100%; height: 100%; border: 0; background: #525659; }
.ql-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 24px; box-sizing: border-box; text-align: center; color: var(--label-2); }
.ql-empty svg { width: 60px; height: 60px; color: var(--label-3); stroke-width: 1.1; }
.ql-empty p { margin: 0; max-width: 420px; overflow-wrap: anywhere; }

.ql-list { display: flex; flex-direction: column; padding: 6px; }
.ql-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 76px;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--label);
  font: 13px var(--font);
  text-align: left;
  cursor: pointer;
}
.ql-row:nth-child(even) { background: var(--fill-2); }
.ql-row:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ql-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ql-row svg { width: 16px; height: 16px; color: var(--label-2); }
.ql-row.dir svg { color: var(--accent); }
.ql-row .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ql-row .m, .ql-row .s { color: var(--label-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ql-row .s { text-align: right; }

/* Changes of a checkout: changed files on the left, their diff on the right. */
.ql-body.k-changes { overflow: hidden; }
.ql-changes { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); height: 100%; }
.ql-files { display: flex; flex-direction: column; gap: 1px; padding: 6px; overflow: auto; border-right: 0.5px solid var(--separator); background: var(--fill-2); }
.ql-file { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 7px; background: none; color: var(--label); font: 12.5px var(--font); text-align: left; cursor: pointer; }
.ql-file:hover { background: var(--fill); }
.ql-file[aria-current="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ql-file .p, .ql-dfile header .p { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ql-file .dir, .ql-dfile header .dir { color: var(--label-2); }
.ql-file b, .ql-dfile header b { font-weight: 600; }
.st { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: #fff; font: 700 10px/1 var(--mono); }
.st-M { background: var(--orange); }
.st-A, .st-N { background: var(--green); }
.st-D, .st-U { background: var(--red); }
.st-R { background: var(--blue); }
.st-N { background: none; box-shadow: inset 0 0 0 1.5px var(--green); color: var(--green); }
.cnt { display: inline-flex; gap: 5px; font: 11px var(--mono); white-space: nowrap; }
.cnt i { font-style: normal; }
.cnt .a { color: var(--green); }
.cnt .r { color: var(--red); }
.ql-diff { overflow-y: auto; }
.ql-dfile + .ql-dfile { border-top: 0.5px solid var(--separator); }
.ql-dfile header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--material-thick);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: 12.5px;
}
.ql-dfile header .p { flex: 1; }
.ql-dfile header .icon-button { width: 26px; height: 26px; }
.ql-dfile header .icon-button svg { width: 15px; height: 15px; }
.ql-dlines { overflow-x: auto; }
.ql-dl { width: max-content; min-width: 100%; padding: 2px 0 6px; }
.dl { display: grid; grid-template-columns: 5ch 5ch auto; font: 12px/1.6 var(--mono); white-space: pre; }
.dl .o, .dl .n { padding-right: 8px; color: var(--label-3); text-align: right; user-select: none; }
.dl .x { position: relative; padding: 0 20px 0 20px; }
.dl .x::before { position: absolute; left: 7px; user-select: none; }
.dl.add { background: color-mix(in srgb, var(--green) 14%, transparent); }
.dl.add .x::before { content: "+"; color: var(--green); }
.dl.del { background: color-mix(in srgb, var(--red) 13%, transparent); }
.dl.del .x::before { content: "−"; color: var(--red); }
.dl.hunk { margin-top: 4px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--label-2); }
.dl.note { color: var(--label-3); }
.ql-dnote { margin: 0; padding: 12px 16px; color: var(--label-2); font-size: 12.5px; }

/* History of a project: a search field over the hits; a hit opens to the whole message. */
.ql-body.k-history { display: flex; flex-direction: column; }
.ql-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 0.5px solid var(--separator); background: var(--material-thick); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.ql-search svg { width: 16px; height: 16px; color: var(--label-3); }
.ql-search input { flex: 1; min-width: 0; padding: 7px 10px; border: 0; border-radius: 9px; outline: none; background: var(--fill); color: var(--label); font: 14px var(--font); }
.ql-search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ql-hits { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 20px; }
.ql-hits .ql-empty { height: auto; padding-top: 60px; }
.ql-hit { padding: 10px 12px; border-radius: 12px; background: var(--fill-2); cursor: pointer; outline: none; transition: background 120ms ease; }
.ql-hit:hover { background: var(--fill); }
.ql-hit:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ql-hit header { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; color: var(--label-2); }
.ql-hit header b { flex: 1; min-width: 0; overflow: hidden; color: var(--label); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ql-hit header time { flex: none; font-variant-numeric: tabular-nums; }
.ql-hit .who { flex: none; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.ql-hit .who.you { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ql-hit .who.agent { background: var(--fill); }
.ql-hit .ex { margin: 6px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ql-hit mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--orange) 35%, transparent); color: inherit; }
.ql-hit .full { margin-top: 8px; font-size: 13.5px; line-height: 1.5; cursor: text; user-select: text; }

/* Claude's usage windows, when the usagebar cache has them: by the live dot. */
.limits { display: inline-flex; gap: 8px; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--label-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.limits[hidden] { display: none; }
.limits b { color: var(--label); font-weight: 600; }
.limits .warm b { color: var(--orange); }
.limits .hot b { color: var(--red); }
.limits.stale { opacity: 0.55; }
.limits { align-items: center; border: 0; min-height: 28px; font-family: inherit; }
.limits-pop { position: fixed; z-index: 65; width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 14px; border-radius: 14px; background: var(--material-thick); backdrop-filter: blur(30px); box-shadow: var(--shadow-lift); font-size: 13px; outline: none; }
.limits-pop header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.limits-pop h3 { margin: 0; font-size: 15px; }
.limits-pop p { margin: 12px 0 0; line-height: 1.5; }
.limits-warning { color: var(--orange); }

/* A wide, low panel (at the bottom, or a window made so) reads side by side: the card's fields
   on the left, the conversation and the composer on the right. */
@container sheet (min-width: 680px) and (min-aspect-ratio: 5 / 4) {
  .sheet-inner { display: grid; grid-template-columns: minmax(350px, 32%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .sheet-head { grid-column: 1 / -1; padding-bottom: 8px; }
  .sheet-card { grid-column: 1; grid-row: 2 / 5; padding-bottom: 16px; }
  .sheet-question { grid-column: 2; grid-row: 2; padding-left: 8px; }
  .sheet-body { grid-column: 2; grid-row: 3; min-height: 0; padding-left: 8px; }
  .composer { grid-column: 2; grid-row: 4; padding-left: 8px; }
  .cats-body, .cats-body ~ .composer { grid-column: 1 / -1; padding-left: 22px; }
  .cats-list, #cat-draft { max-width: 760px; }
}

/* ---------------------------------------------------------------- narrow windows */
@media (max-width: 760px) {
  #sheet .sheet-head { padding: 14px 16px 8px; }
  #sheet .sheet-title h2 { font-size: 19px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #sheet .sheet-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sheet-properties-toggle { display: block; align-self: flex-start; margin: 0 16px 8px; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--fill); color: var(--label-2); font-size: 12.5px; }
  .sheet-properties-toggle::after { content: '⌄'; margin-left: 8px; }
  .sheet-properties-toggle[aria-expanded="true"]::after { content: '⌃'; }
  #sheet .sheet-card { max-height: 28vh; }
  #sheet .chips button { height: auto; min-height: 30px; max-width: 100%; padding-top: 4px; padding-bottom: 4px; text-align: left; }
  #sheet .sheet-question { padding: 0 16px 8px; max-height: 24vh; }
  #sheet .asked { padding: 8px 10px; font-size: 12.5px; }
  #sheet .asked b { display: inline; margin-right: 5px; font-size: 11px; }
  #sheet .asked-dismiss { display: inline-flex; height: 26px; margin: 5px 0 0 6px; font-size: 12px; }
  #sheet .composer-actions { margin-bottom: 8px; flex-wrap: nowrap; }
  #sheet .composer-actions .button { min-width: 36px; min-height: 36px; }
  #sheet .composer { padding: 8px 16px 12px; }
  .ql-head { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr) 30px; gap: 8px; padding: 12px; }
  .ql-back { grid-column: 1; grid-row: 1; }
  .ql-icon { grid-column: 2; grid-row: 1; }
  .ql-titles { grid-column: 3; grid-row: 1; }
  .ql-back[hidden] ~ .ql-icon { grid-column: 1; }
  .ql-back[hidden] ~ .ql-titles { grid-column: 2 / 4; }
  .ql-titles h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
  .ql-close { grid-column: 4; grid-row: 1; align-self: start; }
  .ql-tools { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; flex-wrap: wrap; }
  .ql-mode { margin-right: auto; }
  .ql-win { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 14px; }
  .ql-stage { padding: 12px; }
  .ql-row { grid-template-columns: 18px minmax(0, 1fr) 64px; }
  .ql-row .m { display: none; }
  .ql-tools .ql-open { display: none; }
  .ql-changes { grid-template-columns: 1fr; grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
  .ql-files { border-right: 0; border-bottom: 0.5px solid var(--separator); }
}
/* The page's own width, not the window's: a docked panel narrows it. */
@container page (max-width: 960px) {
  .toolbar, .board { --gutter: 16px; }
  .toolbar { padding-bottom: 10px; }
  .columns-head { display: none; }
  .lane-grid { grid-template-columns: 1fr; }
  .col:not(.has-cards) { display: none; }
  body.dragging .col:not([data-col="work"]) { display: flex; }
  .col-label { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 2px; font-size: 12px; font-weight: 600; color: var(--label-2); }
}

/* ---------------------------------------------------------------- accessibility */
@media (prefers-reduced-motion: reduce) {
  .dot.work::after, .spin, .now.restart.on svg, .sched-mini .when.on svg { animation: none; }
  .card, .card-actions, .toolbar, .alarm, .sched-x, .sched-mode, .tools summary .chev, .notice > summary .chev { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .toolbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet, .toast, .ql-win, .layout-menu { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dock-preview { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --label-2: var(--label); --label-3: rgba(60, 60, 67, 0.7); }
  .card, .group, .sheet, .layout-menu { box-shadow: 0 0 0 1px var(--label-3); }
  .dock-preview { box-shadow: inset 0 0 0 2px var(--accent); }
  .msg.user.waiting:not(.failed) { box-shadow: inset 0 0 0 1px var(--accent); }
}

#connection-state, #sheet-connection-state { margin: 4px 16px; color: var(--orange); font-size: 12px; }
@media (pointer: coarse) {
  .card { touch-action: pan-y; user-select: text; -webkit-user-select: text; }
  .sheet-body, .sheet-title, .ql-body { user-select: text; -webkit-user-select: text; }
}