/*
 * Tomo design tokens and component styles.
 *
 * Scoped under .tomo-face so an embedding host's stylesheet and this one don't
 * fight. Every value is a token — no component invents a magic number. Follows the
 * Zendaita product-design standard: never pure white, restrained accent, depth that
 * behaves like light, motion that communicates rather than decorates.
 */

.tomo-face {
  /* Layers */
  --tomo-canvas: #f7f9fc;
  --tomo-surface: #ffffff;
  --tomo-surface-elevated: #ffffff;
  --tomo-surface-sunken: #f1f4f9;

  /* Text */
  --tomo-text-primary: #1a202c;
  --tomo-text-secondary: #4a5568;
  /* Lifted from #8a96a8 so muted text passes 4.5:1 on the canvas (TO-103). */
  --tomo-text-muted: #5b6678;
  --tomo-text-inverse: #ffffff;
  /* Text on a filled primary or destructive button. Dark mode swaps it for dark ink: white on
     the dark-mode blue is 2.7:1 (connector-detail mock, 26 Oct 2026). */
  --tomo-on-accent: #ffffff;
  --tomo-on-danger: #ffffff;

  /* The single brand accent — active state, primary action, key emphasis only */
  --tomo-accent: #1071b9;
  --tomo-accent-subtle: rgba(16, 113, 185, 0.1);

  /* Business mode's dial colour — deeper, steadier than the general accent */
  --tomo-sovereign: #0f766e;
  --tomo-sovereign-subtle: rgba(15, 118, 110, 0.12);

  --tomo-success: #38a169;
  --tomo-warning: #d69e2e;
  --tomo-danger: #e53e3e;

  /* Status tints: the rail, a failed send, a mocked source. Ink is the readable colour on its tint. */
  --tomo-ok: #2f855a;
  --tomo-ok-bg: rgba(56, 161, 105, 0.11);
  --tomo-danger-ink: #c53030;
  --tomo-danger-bg: rgba(229, 62, 62, 0.08);
  --tomo-danger-line: rgba(229, 62, 62, 0.35);
  --tomo-warn-ink: #975a16;
  --tomo-warn-bg: rgba(214, 158, 46, 0.14);
  --tomo-warn-line: rgba(214, 158, 46, 0.55);

  --tomo-border-subtle: rgba(26, 32, 44, 0.06);
  --tomo-border-light: rgba(26, 32, 44, 0.1);
  /* A secondary button's outline, an input's edge. */
  --tomo-border-strong: rgba(26, 32, 44, 0.18);

  /* The smallest hit area for a button, a dismiss or an inline link, at every width. */
  --tomo-touch: 44px;

  /* Spacing, 8pt base */
  --tomo-space-1: 4px;
  --tomo-space-2: 8px;
  --tomo-space-3: 12px;
  --tomo-space-4: 16px;
  --tomo-space-5: 20px;
  --tomo-space-6: 24px;
  --tomo-space-8: 32px;
  --tomo-space-12: 48px;

  --tomo-radius-sm: 6px;
  --tomo-radius-md: 10px;
  --tomo-radius-lg: 16px;
  --tomo-radius-xl: 22px;
  --tomo-radius-full: 999px;

  /* The one centred column the whole chat page sits in: header, messages and composer.
     It grows with the chat pane (cqi, not vw, so a host's sidebar doesn't count) between
     bounds, so big screens don't get huge gutters, and never runs closer than 16px to either
     edge. The same rule as TomoApp's Theme.Layout.readingColumn(in:), held to the padded
     box it sits in as the Swift frame is. */
  --tomo-column: min(100%, 100cqi - 32px, clamp(720px, 62cqi, 1080px));

  --tomo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --tomo-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.09);
  --tomo-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.11);

  --tomo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tomo-duration-fast: 200ms;
  --tomo-duration-normal: 300ms;

  /* Collapsible row (TomoCollapsibleRow, styled at the end of this sheet). Collapsed it is
     12 + 40 + 12 = 64px; the body lines up with the name. The 560px stack point is a literal
     in the container query. */
  --tomo-crow-tile: 40px;
  --tomo-crow-pad-y: 12px;
  --tomo-crow-pad-x: 16px;
  --tomo-crow-gap: 12px;
  --tomo-crow-chevron: 44px;
  --tomo-crow-inset: calc(var(--tomo-crow-pad-x) + var(--tomo-crow-tile) + var(--tomo-crow-gap));
  --tomo-crow-list-gap: 8px;
  --tomo-crow-action-h: 36px;
  --tomo-crow-label-w: 150px;

  /* The dial's current colour. Swapped wholesale when the mode changes, so every
     accented element moves together instead of one at a time. */
  --tomo-mode-accent: var(--tomo-accent);
  --tomo-mode-accent-subtle: var(--tomo-accent-subtle);

  /* The chat pane is what --tomo-column measures. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--tomo-canvas);
  color: var(--tomo-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Dark follows the OS unless the host pins a theme on its root: data-theme="light" keeps the light
   palette on a dark OS, data-theme="dark" turns it on regardless of the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tomo-face {
    --tomo-canvas: #0e1116;
    --tomo-surface: #171b22;
    --tomo-surface-elevated: #1e232c;
    --tomo-surface-sunken: #11151b;
    --tomo-text-primary: #e9edf4;
    --tomo-text-secondary: #b4bdca;
    --tomo-text-muted: #97a2b3;
    --tomo-accent: #2aaae1;
    --tomo-accent-subtle: rgba(42, 170, 225, 0.14);
    --tomo-sovereign: #2dd4bf;
    --tomo-sovereign-subtle: rgba(45, 212, 191, 0.14);
    --tomo-border-subtle: rgba(255, 255, 255, 0.06);
    --tomo-border-light: rgba(255, 255, 255, 0.1);
    --tomo-border-strong: rgba(255, 255, 255, 0.2);
    --tomo-on-accent: #0b1524;
    --tomo-on-danger: #1a0b0b;
    --tomo-ok: #5fcf94;
    --tomo-ok-bg: rgba(95, 207, 148, 0.12);
    --tomo-danger-ink: #fc8181;
    --tomo-danger-bg: rgba(252, 129, 129, 0.1);
    --tomo-danger-line: rgba(252, 129, 129, 0.35);
    --tomo-warn-ink: #f0c26b;
    --tomo-warn-bg: rgba(240, 194, 107, 0.12);
    --tomo-warn-line: rgba(240, 194, 107, 0.45);
  }
}

:root[data-theme="dark"] .tomo-face {
  --tomo-canvas: #0e1116;
  --tomo-surface: #171b22;
  --tomo-surface-elevated: #1e232c;
  --tomo-surface-sunken: #11151b;
  --tomo-text-primary: #e9edf4;
  --tomo-text-secondary: #b4bdca;
  --tomo-text-muted: #97a2b3;
  --tomo-accent: #2aaae1;
  --tomo-accent-subtle: rgba(42, 170, 225, 0.14);
  --tomo-sovereign: #2dd4bf;
  --tomo-sovereign-subtle: rgba(45, 212, 191, 0.14);
  --tomo-border-subtle: rgba(255, 255, 255, 0.06);
  --tomo-border-light: rgba(255, 255, 255, 0.1);
  --tomo-border-strong: rgba(255, 255, 255, 0.2);
  --tomo-on-accent: #0b1524;
  --tomo-on-danger: #1a0b0b;
  --tomo-ok: #5fcf94;
  --tomo-ok-bg: rgba(95, 207, 148, 0.12);
  --tomo-danger-ink: #fc8181;
  --tomo-danger-bg: rgba(252, 129, 129, 0.1);
  --tomo-danger-line: rgba(252, 129, 129, 0.35);
  --tomo-warn-ink: #f0c26b;
  --tomo-warn-bg: rgba(240, 194, 107, 0.12);
  --tomo-warn-line: rgba(240, 194, 107, 0.45);
}

.tomo-face--business {
  --tomo-mode-accent: var(--tomo-sovereign);
  --tomo-mode-accent-subtle: var(--tomo-sovereign-subtle);
}

/* ---------- Header ---------- */

/* One line: what this is, whose data it reads, which mode, and a fresh start. */
.tomo-header {
  padding: var(--tomo-space-3) var(--tomo-space-6);
  background: var(--tomo-surface);
  border-bottom: 1px solid var(--tomo-border-subtle);
}

/* The bar runs edge to edge; what's in it lines up with the conversation's column. */
.tomo-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  width: var(--tomo-column);
  min-height: 28px;
  margin-inline: auto;
}

.tomo-header__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.tomo-header__spacer { flex: 1; }

/* The primary connector: green when Tezai lists it connected, amber while it's on a mock. */
.tomo-conn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 var(--tomo-space-2);
  border-radius: var(--tomo-radius-full);
  border: 1px solid var(--tomo-border-light);
  background: var(--tomo-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--tomo-text-secondary);
}

.tomo-conn i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tomo-ok); }
.tomo-conn--mock i { background: var(--tomo-warning); }

.tomo-icon-button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--tomo-text-secondary);
  cursor: pointer;
  padding: 5px;
  border-radius: var(--tomo-radius-sm);
  font-size: 13px;
  transition: background var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-icon-button:hover { background: var(--tomo-surface-sunken); }

/* ---------- The mode chip ---------- */

.tomo-mode { position: relative; }

.tomo-modechip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-mode-accent-subtle);
  color: var(--tomo-mode-accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}

.tomo-modechip:focus-visible,
.tomo-minidial__segment:focus-visible,
.tomo-rail__action:focus-visible,
.tomo-failline__resend:focus-visible,
.tomo-sugg__item:focus-visible {
  outline: 2px solid var(--tomo-mode-accent);
  outline-offset: 2px;
}

/* Clicking anywhere else closes the popover. */
.tomo-popover-scrim { position: fixed; inset: 0; z-index: 9; }

.tomo-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: 290px;
  max-width: calc(100cqi - 32px);
  box-sizing: border-box;
  padding: var(--tomo-space-3) 14px;
  border: 1px solid var(--tomo-border-light);
  border-radius: 14px;
  background: var(--tomo-surface-elevated);
  box-shadow: var(--tomo-shadow-lg);
  font-size: 12px;
}

.tomo-popover h5 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; }
.tomo-popover p { margin: 0 0 var(--tomo-space-2); color: var(--tomo-text-secondary); line-height: 1.5; }

.tomo-popover__row {
  display: flex;
  justify-content: space-between;
  gap: var(--tomo-space-2);
  padding: 6px 0 0;
  border-top: 1px solid var(--tomo-border-subtle);
  color: var(--tomo-text-secondary);
}

.tomo-popover__row b { color: var(--tomo-text-primary); font-weight: 600; }

.tomo-minidial {
  display: flex;
  margin: var(--tomo-space-1) 0 var(--tomo-space-2);
  padding: 2px;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-surface-sunken);
}

.tomo-minidial__segment {
  flex: 1;
  padding: 3px 0;
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: transparent;
  color: var(--tomo-text-secondary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.tomo-minidial__segment--on {
  background: var(--tomo-surface);
  color: var(--tomo-mode-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---------- Segmented control (Your setting) ---------- */

.tomo-dial__segments {
  display: flex;
  padding: 3px;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-surface-sunken);
  border: 1px solid var(--tomo-border-subtle);
  margin-bottom: var(--tomo-space-3);
}

.tomo-dial__segment {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tomo-space-2);
  border: 0;
  background: transparent;
  color: var(--tomo-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: var(--tomo-space-2) var(--tomo-space-4);
  border-radius: var(--tomo-radius-full);
  cursor: pointer;
  transition: background var(--tomo-duration-fast) var(--tomo-ease-out),
              color var(--tomo-duration-fast) var(--tomo-ease-out),
              box-shadow var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-dial__segment--selected {
  background: var(--tomo-surface);
  box-shadow: var(--tomo-shadow-sm);
}

.tomo-dial__segment--selected.tomo-dial__segment--general { color: var(--tomo-accent); }
.tomo-dial__segment--selected.tomo-dial__segment--business { color: var(--tomo-sovereign); }

/* ---------- Transcript ---------- */

.tomo-transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--tomo-space-6);
}

.tomo-transcript__inner {
  width: var(--tomo-column);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--tomo-space-6);
}

/* "New message ↓": the reader scrolled up and something new arrived below. Pinned to the
   bottom of the transcript's view, centred, so it never covers the composer. */
.tomo-newmsg {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  height: 0;
  overflow: visible;
}

.tomo-newmsg__pill {
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-text-primary);
  color: var(--tomo-canvas);
  box-shadow: var(--tomo-shadow-md);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tomo-newmsg__pill:focus-visible {
  outline: 2px solid var(--tomo-mode-accent);
  outline-offset: 2px;
}

.tomo-turn { display: flex; gap: var(--tomo-space-3); }
.tomo-turn--user { justify-content: flex-end; }

.tomo-bubble--user {
  max-width: 80%;
  padding: var(--tomo-space-3) var(--tomo-space-4);
  border-radius: var(--tomo-radius-lg);
  background: var(--tomo-mode-accent-subtle);
  border: 1px solid var(--tomo-border-subtle);
  white-space: pre-wrap;
}

/* A message that never reached ZenAI: outlined, with the reason and a resend under it. */
.tomo-turn--unsent .tomo-bubble--user { border-color: var(--tomo-danger-line); background: var(--tomo-danger-bg); }

.tomo-failline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--tomo-space-2);
  margin-top: calc(-1 * var(--tomo-space-2));
  font-size: 12px;
  color: var(--tomo-danger-ink);
}

.tomo-failline__resend {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tomo-accent);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.tomo-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: block;
}

.tomo-turn__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tomo-space-3);
}

.tomo-answer { white-space: pre-wrap; margin: 0; }

/* The caret rides the end of the text so the answer visibly grows. */
.tomo-caret { color: var(--tomo-mode-accent); }

/* ---------- Reply markdown (TO-89) ----------
   The answer reads like a short note from an analyst: body text at the bubble's
   size, figures in tabular digits, and tables as a quiet ledger — a firm rule under
   the header, hairlines between rows, numbers right-aligned so the columns line up.
   No colour is added to figures; emphasis is the model's bold, not ours. */

.tomo-answer.tomo-md { white-space: normal; overflow-wrap: anywhere; }
.tomo-md > * { margin: 0; }
.tomo-md > * + * { margin-top: var(--tomo-space-3); }
.tomo-md strong { font-weight: 650; }

.tomo-md h1, .tomo-md h2 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.tomo-md h3, .tomo-md h4, .tomo-md h5, .tomo-md h6 { font-size: 15px; font-weight: 600; }

.tomo-md ul, .tomo-md ol { padding-left: var(--tomo-space-5); }
.tomo-md li + li { margin-top: var(--tomo-space-1); }
.tomo-md li::marker { color: var(--tomo-text-muted); font-variant-numeric: tabular-nums; }
.tomo-md li > p { margin: 0; }
.tomo-md ul.contains-task-list { list-style: none; padding-left: var(--tomo-space-1); }
.tomo-md .task-list-item-checkbox { accent-color: var(--tomo-mode-accent); margin-right: var(--tomo-space-2); }

.tomo-md a {
  color: var(--tomo-mode-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tomo-md code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--tomo-surface-sunken);
}

.tomo-md pre {
  padding: var(--tomo-space-3);
  border-radius: var(--tomo-radius-sm);
  background: var(--tomo-surface-sunken);
  white-space: pre-wrap;
}
.tomo-md pre code { padding: 0; background: none; font-size: 12.5px; }

.tomo-md blockquote {
  padding-left: var(--tomo-space-3);
  border-left: 3px solid var(--tomo-border-light);
  color: var(--tomo-text-secondary);
}

.tomo-md hr { border: 0; height: 1px; background: var(--tomo-border-light); }

/* Never a sideways scroll (Ro's no-horizontal-scrollbar rule): the browser's auto
   layout keeps figures on one line while the table fits and wraps them at their
   spaces when it doesn't. */
.tomo-md-table {
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-sm);
}
.tomo-md table {
  width: 100%;
  overflow-wrap: normal; /* a figure never splits mid-number */
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tomo-md th, .tomo-md td {
  padding: 8px var(--tomo-space-3);
  text-align: left;
  vertical-align: top;
}
.tomo-md td:first-child { font-weight: 500; }
.tomo-md th {
  font-weight: 600;
  color: var(--tomo-text-secondary);
  border-bottom: 1px solid rgba(26, 32, 44, 0.16);
}
.tomo-md tbody tr + tr td { border-top: 1px solid var(--tomo-border-subtle); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tomo-face .tomo-md th { border-bottom-color: rgba(255, 255, 255, 0.16); }
}
:root[data-theme="dark"] .tomo-face .tomo-md th { border-bottom-color: rgba(255, 255, 255, 0.16); }

.tomo-notice {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  font-size: 13px;
  color: var(--tomo-text-muted);
}

.tomo-notice::before,
.tomo-notice::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tomo-border-subtle);
}

.tomo-working { display: inline-flex; align-items: center; gap: var(--tomo-space-2); }

.tomo-working__dots { display: inline-flex; gap: 4px; }

.tomo-working__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tomo-mode-accent);
  animation: tomo-pulse 1.1s ease-in-out infinite;
}

.tomo-working__dots span:nth-child(2) { animation-delay: 0.18s; }
.tomo-working__dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes tomo-pulse {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}

.tomo-working__label { font-size: 13px; color: var(--tomo-text-muted); }

.tomo-failure {
  display: flex;
  gap: var(--tomo-space-2);
  padding: var(--tomo-space-3);
  border-radius: var(--tomo-radius-md);
  background: rgba(229, 62, 62, 0.08);
  font-size: 13px;
  color: var(--tomo-text-secondary);
}

.tomo-failure__glyph { color: var(--tomo-danger); }

/* ---------- Turn activity ----------
   What the agent did, folded above the answer: a quiet row that says how long it worked
   and how many steps, a Thinking row when the model streamed reasoning, the steps as one
   bordered group of run cards, and an accent status line. Muted grey throughout, so the
   answer stays the loudest thing on the turn. */

.tomo-activity { display: flex; flex-direction: column; gap: var(--tomo-space-2); }

.tomo-activity__row {
  display: inline-flex;
  align-items: center;
  gap: var(--tomo-space-2);
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 0;
  font-size: 13px;
  color: var(--tomo-text-muted);
}

.tomo-activity__row--button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--tomo-radius-sm);
  transition: color var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-activity__row--button:hover { color: var(--tomo-text-secondary); }

.tomo-activity__row--button:focus-visible {
  outline: 2px solid var(--tomo-mode-accent);
  outline-offset: 2px;
}

.tomo-activity__icon { flex: 0 0 auto; }

.tomo-activity__chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-activity__chevron--open { transform: rotate(90deg); }
.tomo-activity__chevron--closed { transform: rotate(-90deg); }

.tomo-activity__spinner {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0 1.5px;
  border-radius: 50%;
  border: 1.75px solid var(--tomo-border-light);
  border-top-color: var(--tomo-mode-accent);
  animation: tomo-spin 0.9s linear infinite;
}

@keyframes tomo-spin { to { transform: rotate(360deg); } }

/* Reasoning still arriving: the label breathes, nothing else moves. */
.tomo-activity__row--live .tomo-activity__label { animation: tomo-breathe 1.6s ease-in-out infinite; }

@keyframes tomo-breathe { 50% { opacity: 0.45; } }

.tomo-activity__thinking { display: flex; flex-direction: column; gap: var(--tomo-space-2); }

.tomo-activity__reasoning {
  margin-left: 7px;
  padding: 2px 0 2px var(--tomo-space-4);
  border-left: 2px solid var(--tomo-border-light);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tomo-text-muted);
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
}

.tomo-activity__runs {
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-md);
  background: var(--tomo-surface);
  overflow: hidden;
}

.tomo-run + .tomo-run { border-top: 1px solid var(--tomo-border-subtle); }

.tomo-run__line {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--tomo-space-2) var(--tomo-space-3) var(--tomo-space-2) var(--tomo-space-4);
  font-size: 13px;
  color: var(--tomo-text-muted);
  text-align: left;
}

.tomo-run__icon { flex: 0 0 auto; color: var(--tomo-text-secondary); }

.tomo-run__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--tomo-text-primary);
}

.tomo-run__prefix { color: var(--tomo-mode-accent); }

.tomo-run__chip {
  flex: 0 0 auto;
  padding: 2px var(--tomo-space-2);
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-surface-sunken);
  border: 1px solid var(--tomo-border-subtle);
  font-size: 12px;
  color: var(--tomo-text-secondary);
}

.tomo-run--failed .tomo-run__chip { color: var(--tomo-danger-ink); border-color: var(--tomo-danger-line); background: var(--tomo-danger-bg); }

.tomo-run__sub {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tomo-activity__status {
  display: inline-flex;
  align-items: center;
  gap: var(--tomo-space-2);
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--tomo-mode-accent);
}

/* ---------- Citations ---------- */

.tomo-citations { display: flex; flex-wrap: wrap; gap: var(--tomo-space-2); }

.tomo-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--tomo-radius-full);
  border: 1px solid var(--tomo-border-light);
  background: var(--tomo-surface);
  font-size: 11.5px;
  color: var(--tomo-text-secondary);
}

.tomo-src svg { color: var(--tomo-text-muted); }

/* Sample data must never pass for real: a mocked source is dashed amber. */
.tomo-src--mock { border-style: dashed; border-color: var(--tomo-warn-line); }

/* TO-126: every chip is a button that opens its detail (the query that ran, or the memory). */
button.tomo-src { font: inherit; font-size: 11.5px; cursor: pointer; }
button.tomo-src:hover,
button.tomo-src[aria-expanded="true"] { border-color: var(--tomo-accent); color: var(--tomo-accent); }
button.tomo-src:hover svg,
button.tomo-src[aria-expanded="true"] svg { color: var(--tomo-accent); }
button.tomo-src:focus-visible { outline: 2px solid var(--tomo-accent); outline-offset: 1px; }
.tomo-src__chev { transition: transform 120ms ease; }
button.tomo-src[aria-expanded="true"] .tomo-src__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tomo-src__chev { transition: none; } }

/* A chip's detail: a flat note on a left rule, no box (the chat's Notion column). */
.tomo-cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--tomo-space-2) 0 0;
  padding: 0 0 0 var(--tomo-space-3);
  border-left: 2px solid var(--tomo-accent);
  font-size: 13px;
  color: var(--tomo-text-secondary);
}
.tomo-cite__lab { font-size: 11.5px; font-weight: 600; color: var(--tomo-text-muted); }
.tomo-cite__text { color: var(--tomo-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.tomo-cite__from { font-size: 11.5px; color: var(--tomo-text-muted); }
.tomo-cite__rows { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--tomo-space-3); margin: 0; }
.tomo-cite__rows dt { color: var(--tomo-text-muted); }
.tomo-cite__rows dd { margin: 0; color: var(--tomo-text-primary); overflow-wrap: anywhere; }

/* ---------- Approval card ---------- */

.tomo-card {
  position: relative;
  padding: var(--tomo-space-5);
  border-radius: var(--tomo-radius-lg);
  background: var(--tomo-surface);
  border: 1px solid var(--tomo-border-subtle);
  box-shadow: var(--tomo-shadow-sm);
}

/* A pending action is the one thing waiting on the person — it should read that way. */
.tomo-card--pending {
  box-shadow: var(--tomo-shadow-md);
  border-left: 3px solid var(--tomo-warning);
}

.tomo-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--tomo-space-3);
  margin-bottom: var(--tomo-space-4);
}

.tomo-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tomo-text-muted);
}

.tomo-card__title { font-size: 17px; font-weight: 600; margin: 2px 0 0; }

.tomo-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--tomo-space-1);
  padding: 4px var(--tomo-space-2);
  border-radius: var(--tomo-radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tomo-badge--pending { color: var(--tomo-warning); background: rgba(214, 158, 46, 0.12); }
.tomo-badge--approved { color: var(--tomo-success); background: rgba(56, 161, 105, 0.12); }
.tomo-badge--rejected { color: var(--tomo-text-muted); background: var(--tomo-surface-sunken); }
.tomo-badge--failed { color: var(--tomo-danger); background: rgba(229, 62, 62, 0.12); }

.tomo-card__lede { font-size: 13px; color: var(--tomo-text-secondary); margin: 0 0 var(--tomo-space-3); }
.tomo-card__caution { font-size: 12px; color: var(--tomo-text-secondary); margin: var(--tomo-space-2) 0 0; }

.tomo-params {
  border-radius: var(--tomo-radius-md);
  background: var(--tomo-surface-sunken);
  overflow: hidden;
}

.tomo-param {
  display: flex;
  gap: var(--tomo-space-3);
  padding: var(--tomo-space-2) var(--tomo-space-3);
  font-size: 13px;
}

.tomo-param + .tomo-param { border-top: 1px solid var(--tomo-border-subtle); }
.tomo-param__key { flex: 0 0 120px; color: var(--tomo-text-muted); }
.tomo-param__value { flex: 1; min-width: 0; word-break: break-word; }

.tomo-params__raw {
  margin: 0;
  padding: var(--tomo-space-3);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  overflow-x: auto;
}

.tomo-card__hash {
  display: block;
  margin-top: var(--tomo-space-3);
  font-size: 11px;
  color: var(--tomo-text-muted);
}

.tomo-card__actions {
  display: flex;
  gap: var(--tomo-space-3);
  margin-top: var(--tomo-space-4);
}

.tomo-card__outcome {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  margin-top: var(--tomo-space-4);
  font-size: 13px;
  color: var(--tomo-text-secondary);
}

.tomo-card__outcome--failed { color: var(--tomo-danger); }

.tomo-card__error {
  display: flex;
  align-items: flex-start;
  gap: var(--tomo-space-2);
  margin-top: var(--tomo-space-4);
  font-size: 13px;
  color: var(--tomo-danger);
}

.tomo-card__error-detail,
.tomo-card__error-hint {
  margin-top: var(--tomo-space-1);
  font-size: 12px;
  color: var(--tomo-text-secondary);
  overflow-wrap: anywhere;
}

.tomo-card__result {
  margin-top: var(--tomo-space-2);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--tomo-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- ZenProposalCard (TO-20) ----------
   Flat, Notion-style: a hairline and the page's own surface, no lifted shadow. The amber rule
   on a pending card is the one loud thing, because it is the one thing waiting on the person. */

.zen-proposal,
.zen-proposal.tomo-card--pending { box-shadow: none; }

.zen-proposal { padding: var(--tomo-space-4) var(--tomo-space-5); }

.zen-proposal__sig {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  margin-bottom: var(--tomo-space-2);
}

.zen-proposal__mark { width: 16px; height: 16px; flex: none; }

.zen-proposal__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--tomo-text-secondary);
}

.zen-proposal .tomo-card__title { margin: 0 0 var(--tomo-space-1); font-size: 16px; }

.zen-proposal__who {
  display: flex;
  gap: var(--tomo-space-3);
  margin: 0 0 var(--tomo-space-3);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.zen-proposal__who-label { flex: none; color: var(--tomo-text-muted); }

/* TE-288: a share ZenAI didn't ask for. Warning-tinted, not danger: nothing has happened yet. */
.zen-proposal__warning {
  margin: var(--tomo-space-3) 0 0;
  padding: var(--tomo-space-2) var(--tomo-space-3);
  border-left: 3px solid var(--tomo-warning);
  border-radius: var(--tomo-radius-sm);
  background: color-mix(in srgb, var(--tomo-warning) 12%, transparent);
  font-size: 12px;
  color: var(--tomo-text-primary);
}
.zen-proposal__warning p { margin: 0; }
.zen-proposal__warning p + p { margin-top: var(--tomo-space-1); }
.zen-proposal__warning-strong { font-weight: 600; }

/* Approved reads as a note card: the outcome leads, quietly confirmed. */
.zen-proposal--approved .tomo-card__outcome { color: var(--tomo-success); font-weight: 500; }
.zen-proposal--cancelled { opacity: 0.85; }
.zen-proposal--failed { border-left: 3px solid var(--tomo-danger); }

/* The drawer's pending list: a heading and the cards, one under another, no outer box. */
.zen-pending { display: flex; flex-direction: column; gap: var(--tomo-space-3); }
.zen-pending__title {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tomo-text-secondary);
}
.zen-pending__count {
  padding: 0 var(--tomo-space-2);
  border-radius: var(--tomo-radius-full);
  background: rgba(214, 158, 46, 0.14);
  color: var(--tomo-warning);
  font-size: 11px;
  line-height: 18px;
}
.zen-pending__line { margin: 0; font-size: 13px; color: var(--tomo-text-secondary); }
.zen-pending--error { display: flex; align-items: center; gap: var(--tomo-space-3); }

/* ---------- Buttons ---------- */

.tomo-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--tomo-radius-sm);
  padding: 9px var(--tomo-space-4);
  cursor: pointer;
  transition: transform var(--tomo-duration-fast) var(--tomo-ease-out),
              box-shadow var(--tomo-duration-fast) var(--tomo-ease-out),
              background var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.tomo-btn--primary {
  border: 0;
  color: var(--tomo-on-accent);
  background: var(--tomo-accent);
}

.tomo-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--tomo-shadow-md); }
.tomo-btn--primary:active:not(:disabled) { transform: translateY(0) scale(0.98); }

.tomo-btn--ghost {
  border: 1px solid var(--tomo-border-light);
  background: transparent;
  color: var(--tomo-text-secondary);
}

.tomo-btn--ghost:hover:not(:disabled) { background: var(--tomo-surface-sunken); }

/* ---------- Composer ---------- */

.tomo-composer-wrap {
  padding: var(--tomo-space-3) var(--tomo-space-6) var(--tomo-space-5);
  background: var(--tomo-canvas);
}

.tomo-composer-card {
  box-sizing: border-box;
  width: var(--tomo-column);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 20px;
  background: var(--tomo-surface-elevated);
  border: 1px solid var(--tomo-border-light);
  box-shadow: var(--tomo-shadow-sm);
  transition: border-color var(--tomo-duration-fast) var(--tomo-ease-out),
              box-shadow var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--tomo-space-3);
  padding: var(--tomo-space-2) var(--tomo-space-2) var(--tomo-space-2) var(--tomo-space-3);
}

.tomo-composer-card:focus-within {
  border-color: var(--tomo-mode-accent);
  box-shadow: var(--tomo-shadow-md);
}

.tomo-composer__field {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: var(--tomo-space-2) var(--tomo-space-3);
  max-height: 180px;
  overflow-y: auto;
}

/*
 * A default scrollbar renders its own light track, which sits as a bright slab on
 * a dark surface. Scrollbars are chrome, not content — they shouldn't announce
 * themselves.
 */
.tomo-transcript {
  scrollbar-width: thin;
  scrollbar-color: var(--tomo-text-muted) transparent;
}

/*
 * The composer is capped at max-height and scrolls with the caret, so its bar is
 * pure chrome on a control the user is actively typing into. Hidden rather than
 * styled — a scrollbar twitching beside every keystroke is noise.
 */
.tomo-composer__field {
  scrollbar-width: none;
}

.tomo-composer__field::-webkit-scrollbar {
  display: none;
}

.tomo-transcript::-webkit-scrollbar {
  width: 8px;
}

.tomo-transcript::-webkit-scrollbar-track {
  background: transparent;
}

.tomo-transcript::-webkit-scrollbar-thumb {
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-border-light);
}

.tomo-transcript::-webkit-scrollbar-thumb:hover {
  background: var(--tomo-text-muted);
}

.tomo-composer__send {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--tomo-mode-accent);
  color: var(--tomo-text-inverse);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--tomo-duration-fast) var(--tomo-ease-out), opacity var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-composer__send { display: grid; place-items: center; }
.tomo-composer__send:disabled { opacity: 0.35; cursor: not-allowed; }

/* While a turn runs, the turn's one Stop. */
.tomo-composer__stop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--tomo-space-3);
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-text-primary);
  color: var(--tomo-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.tomo-composer__stop-square { width: 8px; height: 8px; border-radius: 1.5px; background: currentColor; }

.tomo-composer__send:focus-visible,
.tomo-composer__stop:focus-visible { outline: 2px solid var(--tomo-mode-accent); outline-offset: 2px; }

.tomo-composer__footnote {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tomo-space-1);
  width: var(--tomo-column);
  margin: var(--tomo-space-2) auto 0;
  text-align: center;
  font-size: 11px;
  color: var(--tomo-text-muted);
}

.tomo-composer__footnote svg { flex: 0 0 auto; }

/* ---------- Status rail ---------- */

/* One line per connection fact, on top of the field and inside the same card. */
.tomo-rail {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  padding: 7px var(--tomo-space-3);
  border-bottom: 1px solid var(--tomo-border-subtle);
  font-size: 12px;
  color: var(--tomo-text-secondary);
}

.tomo-rail svg { flex: 0 0 auto; }

.tomo-rail__action {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-text-primary);
  color: var(--tomo-surface);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}

.tomo-rail--danger { background: var(--tomo-danger-bg); }
.tomo-rail--danger svg { color: var(--tomo-danger-ink); }
.tomo-rail--off svg { color: var(--tomo-text-muted); }

/* Stripes, so a mock is never mistaken for a warning that will go away. */
.tomo-rail--mock {
  background: repeating-linear-gradient(135deg, var(--tomo-warn-bg) 0 8px, transparent 8px 16px);
  color: var(--tomo-text-primary);
}

.tomo-rail--mock svg,
.tomo-rail--mock b { color: var(--tomo-warn-ink); }

/* ---------- Empty state ---------- */

.tomo-empty {
  text-align: center;
  padding: var(--tomo-space-12) var(--tomo-space-6);
}

.tomo-empty__mark {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--tomo-space-4);
  border-radius: 12px;
  display: block;
}

.tomo-empty__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--tomo-space-2); }
.tomo-empty__body { max-width: 420px; margin: 0 auto; font-size: 14px; color: var(--tomo-text-muted); }

.tomo-sugg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 380px);
  margin: var(--tomo-space-4) auto 0;
}

.tomo-sugg__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--tomo-space-2) var(--tomo-space-3);
  border: 1px solid var(--tomo-border-subtle);
  border-radius: 12px;
  background: var(--tomo-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--tomo-text-primary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-sugg__item:hover { border-color: var(--tomo-mode-accent); }
.tomo-sugg__item svg { flex: 0 0 auto; color: var(--tomo-sovereign); }

/*
 * Phone widths: every control a thumb can reach is at least 44px (Ro, 26 Oct 2026: "make sure
 * Blazor is responsive"). Desktop keeps the compact sizes. Icon buttons and plain buttons grow;
 * the filled pills (mode chip, Try again, Stop, Resend, switch) keep their look and get an
 * invisible hit area, sized so stacked switches never share one.
 */
@media (max-width: 40rem) {
  .tomo-icon-button,
  .tomo-composer__send {
    min-width: 44px;
    min-height: 44px;
  }

  .tomo-activity__row,
  .tomo-dial__segment,
  .tomo-btn,
  .tomo-composer__field {
    min-height: 44px;
  }

  .tomo-modechip,
  .tomo-rail__action,
  .tomo-composer__stop,
  .tomo-failline__resend,
  .tomo-switch:not(.tomo-switch--readonly) {
    position: relative;
  }

  .tomo-modechip::before,
  .tomo-rail__action::before,
  .tomo-composer__stop::before,
  .tomo-failline__resend::before,
  .tomo-switch:not(.tomo-switch--readonly)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Each stacked visibility line is at least as tall as a switch's hit area. */
  .tomo-visibility__cell { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .tomo-face *,
  .tomo-face *::before,
  .tomo-face *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/*
 * ---------------------------------------------------------------------------
  Tomo.Face — the collapsible row (TomoCollapsibleRow), one pattern for every card page.

  Collapsed: tile · name + one-line sub · status pill · one short action · chevron, 64px tall.
  The name is the real <button aria-expanded>; its ::after stretches over the head so the whole
  row is the target, and the action sits above it. The body animates grid-template-rows
  0fr -> 1fr, so the height moves without measuring; visibility keeps closed content out of the
  tab order and the reader.

  Every colour and size is a kit token (tomo-face.css, --tomo-crow-* for the row's own), read
  under the .tomo-face scope each page carries. It lives in tomo-face.css, so a host needs no
  extra stylesheet link.

  Spec: mocks/connector-detail/ZenAI-Connector-Detail_Ro.html, section 3.
*/

.tomo-crow-list {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--tomo-crow-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The list's (or a slot's) width drives the row's layout, so it stacks in a narrow drawer as on a phone. */
.tomo-crow-slot {
  container-type: inline-size;
  min-width: 0;
}

.tomo-crow {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-lg);
  background: var(--tomo-surface);
  transition: border-color var(--tomo-duration-fast) var(--tomo-ease-out),
              background-color 600ms var(--tomo-ease-out);
}

.tomo-crow *,
.tomo-crow *::before,
.tomo-crow *::after { box-sizing: border-box; }

.tomo-crow svg { flex: none; }

.tomo-crow--warn { border-color: var(--tomo-warn-line); }
.tomo-crow--error { border-color: var(--tomo-danger-line); }
.tomo-crow--peak {
  border-color: color-mix(in srgb, var(--tomo-ok) 35%, transparent);
  background: color-mix(in srgb, var(--tomo-ok) 6%, var(--tomo-surface));
}

/* ---- Head ---- */

.tomo-crow__head {
  position: relative;
  display: grid;
  grid-template-columns: var(--tomo-crow-tile) minmax(0, 1fr) auto auto var(--tomo-crow-chevron);
  grid-template-areas:
    "tile name pill act chev"
    "tile sub  pill act chev";
  column-gap: var(--tomo-crow-gap);
  row-gap: 1px;
  align-items: center;
  min-height: calc(var(--tomo-crow-tile) + 2 * var(--tomo-crow-pad-y));
  padding: var(--tomo-crow-pad-y) 4px var(--tomo-crow-pad-y) var(--tomo-crow-pad-x);
}

.tomo-crow:not(.tomo-crow--static) .tomo-crow__head:hover {
  background: color-mix(in srgb, var(--tomo-text-primary) 3%, transparent);
}

.tomo-crow--static .tomo-crow__head { padding-right: var(--tomo-crow-pad-x); }

.tomo-crow__head:not(:has(.tomo-crow__sub)) {
  grid-template-areas:
    "tile name pill act chev"
    "tile name pill act chev";
}

.tomo-crow__tile {
  grid-area: tile;
  display: grid;
  place-items: center;
  width: var(--tomo-crow-tile);
  height: var(--tomo-crow-tile);
  border: 1px solid var(--tomo-border-subtle);
  border-radius: 11px;
  background: var(--tomo-surface-sunken);
  color: var(--tomo-text-secondary);
}

.tomo-crow__tile svg { width: 20px; height: 20px; }
.tomo-crow__tile--accent { border-color: transparent; background: var(--tomo-accent-subtle); color: var(--tomo-accent); }
.tomo-crow__tile--ok { border-color: transparent; background: var(--tomo-ok-bg); color: var(--tomo-ok); }
.tomo-crow__tile--warn { border-color: transparent; background: var(--tomo-warn-bg); color: var(--tomo-warn-ink); }

.tomo-crow__name {
  grid-area: name;
  align-self: end;
  min-width: 0;
  margin: 0;
  color: var(--tomo-text-primary);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.tomo-crow__head:not(:has(.tomo-crow__sub)) .tomo-crow__name { align-self: center; }

.tomo-crow__toggle,
.tomo-crow__label {
  all: unset;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tomo-crow__toggle { cursor: pointer; }
.tomo-crow__toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tomo-crow__toggle:focus-visible::after {
  outline: 2px solid var(--tomo-accent);
  outline-offset: -3px;
  border-radius: calc(var(--tomo-radius-lg) - 2px);
}

.tomo-crow__sub {
  grid-area: sub;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--tomo-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.tomo-crow__subtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tomo-crow__sub svg { width: 13px; height: 13px; }
.tomo-crow__sub--ok { color: var(--tomo-ok); font-weight: 600; }
.tomo-crow__sub--warn { color: var(--tomo-warn-ink); font-weight: 600; }
.tomo-crow__sub--error { color: var(--tomo-danger-ink); font-weight: 600; }
.tomo-crow__sub--muted { color: var(--tomo-text-muted); }

/* The pill folded into the sub line; shown only under 560px. */
.tomo-crow__dot { display: none; }

.tomo-crow__pill {
  grid-area: pill;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-surface-sunken);
  color: var(--tomo-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.tomo-crow__pill i { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tomo-crow__pill--ok { border-color: transparent; background: var(--tomo-ok-bg); color: var(--tomo-ok); }
.tomo-crow__pill--warn { border-color: transparent; background: var(--tomo-warn-bg); color: var(--tomo-warn-ink); }
.tomo-crow__pill--busy { border-color: transparent; background: var(--tomo-accent-subtle); color: var(--tomo-accent); }
.tomo-crow__pill--off i { background: var(--tomo-text-muted); }

.tomo-crow__spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tomo-crow-spin 0.8s linear infinite;
}

@keyframes tomo-crow-spin { to { transform: rotate(360deg); } }

/* Above the toggle's ::after, so it keeps its own click. */
.tomo-crow__action {
  grid-area: act;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.tomo-crow .tomo-crow__action .tomo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tomo-crow-action-h);
  padding: 0 14px;
  border-radius: var(--tomo-radius-md);
  font-size: 13.5px;
  white-space: nowrap;
}

/* 36px to see, 44px to hit. */
.tomo-crow .tomo-crow__action .tomo-btn::before {
  content: "";
  position: absolute;
  inset: calc((var(--tomo-crow-action-h) - var(--tomo-touch)) / 2) 0;
}

.tomo-crow .tomo-crow__action .tomo-btn:focus-visible {
  outline: 2px solid var(--tomo-accent);
  outline-offset: 2px;
}

.tomo-crow__value {
  grid-area: act;
  color: var(--tomo-text-secondary);
  font-size: 13.5px;
  white-space: nowrap;
}

.tomo-crow__chevron {
  grid-area: chev;
  display: grid;
  place-items: center;
  width: var(--tomo-crow-chevron);
  height: var(--tomo-crow-tile);
  color: var(--tomo-text-muted);
}

.tomo-crow__chevron svg {
  width: 18px;
  height: 18px;
  transition: transform var(--tomo-duration-fast) var(--tomo-ease-out);
}

.tomo-crow--open .tomo-crow__chevron svg { transform: rotate(180deg); }

/* ---- Body ---- */

.tomo-crow__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--tomo-duration-fast) var(--tomo-ease-out),
              visibility 0s linear var(--tomo-duration-fast);
}

.tomo-crow--open .tomo-crow__body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--tomo-duration-fast) var(--tomo-ease-out), visibility 0s;
}

.tomo-crow__inner { min-height: 0; overflow: hidden; }

.tomo-crow__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px var(--tomo-crow-pad-x) var(--tomo-crow-pad-x) var(--tomo-crow-inset);
  color: var(--tomo-text-primary);
}

/* ---- On mock: a dashed amber strip at the foot, shown collapsed too ---- */

.tomo-crow__mock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--tomo-crow-pad-x);
  border-top: 1px dashed var(--tomo-warn-line);
  background: var(--tomo-warn-bg);
  color: var(--tomo-warn-ink);
  font-size: 12.5px;
  font-weight: 600;
}

.tomo-crow__mock svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .tomo-crow,
  .tomo-crow__body,
  .tomo-crow--open .tomo-crow__body,
  .tomo-crow__chevron svg { transition: none; }

  .tomo-crow__spin { animation: none; }
}

/* A coarse pointer gets 44px to see as well as to hit. */
@media (pointer: coarse) {
  .tomo-crow .tomo-crow__action .tomo-btn { min-height: var(--tomo-touch); }
  .tomo-crow__chevron { height: var(--tomo-touch); }
}

/* ---- Phone, or any row under 560px: the tile shrinks, the pill folds into the sub line as a
   dot and a word, the name may take two lines, and the action and chevron are 44px. ---- */

@container (max-width: 559px) {
  .tomo-crow {
    --tomo-crow-tile: 36px;
    --tomo-crow-pad-x: 12px;
    --tomo-crow-gap: 10px;
  }

  .tomo-crow__head {
    grid-template-columns: var(--tomo-crow-tile) minmax(0, 1fr) auto var(--tomo-crow-chevron);
    grid-template-areas:
      "tile name act chev"
      "tile sub  act chev";
    padding-right: 0;
  }

  .tomo-crow__head:not(:has(.tomo-crow__sub)) {
    grid-template-areas:
      "tile name act chev"
      "tile name act chev";
  }

  .tomo-crow--static .tomo-crow__head { padding-right: var(--tomo-crow-pad-x); }

  .tomo-crow__pill { display: none; }

  .tomo-crow__dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    white-space: nowrap;
  }

  .tomo-crow__dot i { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .tomo-crow__dot--ok { color: var(--tomo-ok); }
  .tomo-crow__dot--warn { color: var(--tomo-warn-ink); }
  .tomo-crow__dot--busy { color: var(--tomo-accent); }
  .tomo-crow__dot--off { color: var(--tomo-text-muted); }
  .tomo-crow__dot + .tomo-crow__subtext:not(:empty)::before { content: "· "; color: var(--tomo-text-muted); }

  .tomo-crow__name { font-size: 15px; }

  .tomo-crow__toggle,
  .tomo-crow__label {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tomo-crow__tile svg { width: 18px; height: 18px; }
  .tomo-crow .tomo-crow__action .tomo-btn { min-height: var(--tomo-touch); }
  .tomo-crow__chevron { height: var(--tomo-touch); }
  .tomo-crow__content { padding: 0 12px 14px; }
  .tomo-crow__value { display: none; }
}

/* ---- TO-58: "On mock" on a control whose backend is not built yet (Ro, 26 Oct 2026) ----
   The same amber as the Sample's notice and ZenConnections' mocked consent. Not a full pill:
   it may wrap in a narrow drawer. */
.zen-mock-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--tomo-radius-sm);
  background: rgba(214, 158, 46, 0.16);
  color: #8a5a00;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zen-mock-tag { color: #f0c36b; }
}
:root[data-theme="dark"] .zen-mock-tag { color: #f0c36b; }