/* ============================================================
   NICO CALM — the web / Mac THREAD skin (Calm spec §3, §6.1; lane 2 steps 1–3).

   Loaded on every page load, inert until <html data-skin="calm"> (nico-skin.js,
   server flag from /v1/me). EVERY rule below is scoped under
   html[data-skin="calm"], so the classic skin is byte-for-byte what it was: both
   skins ship in one build, and the classic Playwright rails keep passing untouched.

   It restyles the EXISTING DOM (class names + data hooks unchanged: .msg-user,
   .turn, .prose, .gate-card, .gate-btn, .choice-row, .choice-btn, .connect-card,
   .memory-pill, .memory-card …). The few Calm-only nodes nico-api.js adds when the
   skin is on are .calm-slot / .calm-rcpt / .calm-rcpts (the activity slot),
   .calm-time (time separators), .calm-compact (a settled decision), .calm-chip and
   the side-effect card's .calm-eyebrow / .calm-env / .calm-quote.

   Tokens: a verbatim port of the mockup's D/calm-tokens.css (every --calm-*
   aliases a real Nico token or carries a stated value measured for AA / 1.4.11).
   Themes: dark (default / data-theme="dark") · light · sierra.
   ============================================================ */

/* ---------------- tokens ---------------- */
html[data-skin="calm"] {
  --calm-ground:  var(--bg);
  --calm-raised:  var(--surface-1);
  --calm-bubble:  var(--surface-2);
  --calm-user:    oklch(0.400 0.012 265);           /* founder decision 2: dark pill lifted to 0.400 → 1.87:1 vs the bubble, ink 8.33:1 */
  --calm-on-user: var(--text);
  --calm-ink:     var(--text);
  --calm-ink-2:   var(--text-2);
  --calm-meta:    oklch(0.660 0.012 258);
  --calm-accent:      var(--accent);
  --calm-accent-ink:  var(--accent-text);
  --calm-accent-line: var(--accent-line);
  --calm-on-accent:   oklch(0.260 0.030 255);
  --calm-ok-ink:      oklch(0.805 0.150 150);
  --calm-warn-ink:    var(--run);
  --calm-dot-need:    var(--calm-warn-ink);
  --calm-dot-neutral: var(--calm-meta);
  --calm-hair:        var(--line);
  --calm-hair-strong: oklch(0.520 0.014 265);
  --calm-r-bubble: 20px;
  --calm-r-tail:   6px;
  --calm-r-card:   16px;
  --calm-r-ctl:    12px;
  --calm-r-pill:   999px;
  --calm-float: 0 8px 24px oklch(0 0 0 / 0.40), 0 0 0 0.5px var(--line);
  --calm-t-fast: 120ms;
  --calm-t:      150ms;
  --calm-ease:   cubic-bezier(0.2, 0, 0, 1);
  --calm-fs-display: 24px;
  --calm-fs-title:   15px;
  --calm-fs-body:    15px;
  --calm-fs-small:   13px;
  --calm-fs-meta:    12px;
  --calm-lh-body:    1.45;
  --calm-col:     720px;
  --calm-bubble-max: 85%;
  --calm-gutter:  16px;
}
html[data-skin="calm"][data-theme="light"] {
  --calm-user:        oklch(0.235 0.012 264);
  --calm-on-user:     oklch(0.995 0.001 250);
  --calm-meta:        oklch(0.500 0.012 260);
  --calm-on-accent:   oklch(0.995 0.005 255);
  --calm-ok-ink:      oklch(0.420 0.130 150);
  --calm-warn-ink:    oklch(0.500 0.130 65);
  --calm-hair-strong: oklch(0.620 0.008 262);
  --calm-float: 0 8px 24px oklch(0.30 0.02 264 / 0.12), 0 0 0 0.5px var(--line);
}
html[data-skin="calm"][data-theme="sierra"] {
  --calm-user:        oklch(0.285 0.022 50);
  --calm-on-user:     oklch(0.970 0.012 78);
  --calm-meta:        oklch(0.480 0.030 50);
  --calm-on-accent:   oklch(0.985 0.008 80);
  --calm-ok-ink:      oklch(0.420 0.120 145);
  --calm-warn-ink:    oklch(0.480 0.120 55);
  --calm-hair-strong: oklch(0.600 0.025 62);
  --calm-float: 0 8px 24px oklch(0.35 0.04 50 / 0.14), 0 0 0 0.5px var(--line);
}
/* accent-picker safety (nico-accent writes an inline --accent on <html>) */
html[data-skin="calm"][style*="--accent"] { --calm-on-accent: var(--on-accent); }
html[data-skin="calm"][data-theme="dark"], html[data-skin="calm"]:not([data-theme]) { --calm-on-accent: oklch(0.260 0.030 255); }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="calm"] { --calm-t-fast: 0ms; --calm-t: 0ms; }
}

/* ---------------- the chat column: one centred 720 px column, flat ground ---------------- */
html[data-skin="calm"] #threadChat {
  gap: 12px; background: var(--calm-ground);
  padding: 16px max(24px, calc((100% - var(--calm-col)) / 2)) 28px;
  font-family: var(--sans); font-size: var(--calm-fs-body); color: var(--calm-ink);
  scroll-behavior: auto;
  /* scroll edge: the thread fades 12 px into the ground under the header */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
}
html[data-skin="calm"] #threadChat > * { flex: none; }
html[data-skin="calm"] #threadChat :focus-visible { outline: 2px solid var(--calm-accent); outline-offset: 2px; border-radius: 6px; }
html[data-skin="calm"] #threadChat .calm-ic { width: 16px; height: 16px; flex: none; display: block; }

/* time separator + the New divider */
html[data-skin="calm"] #threadChat .calm-time { align-self: center; font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta);
  padding: 16px 0 4px; font-variant-numeric: tabular-nums; }
html[data-skin="calm"] #threadChat .calm-new { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 16px 0 4px;
  font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); font-variant-numeric: tabular-nums; }
html[data-skin="calm"] #threadChat .calm-new::before, html[data-skin="calm"] #threadChat .calm-new::after { content: ""; flex: 1; height: 1px; background: var(--calm-hair-strong); }

/* ---------------- user pill ---------------- */
html[data-skin="calm"] #threadChat .msg-user {
  align-self: flex-end; max-width: 75%; background: var(--calm-user); color: var(--calm-on-user); border: 0;
  border-radius: var(--calm-r-bubble); padding: 8px 14px; font: 400 var(--calm-fs-body)/1.4 var(--sans); letter-spacing: 0;
  overflow-wrap: anywhere; margin-top: 4px;
}
html[data-skin="calm"] #threadChat .msg-user + .msg-user { margin-top: -8px; border-top-right-radius: var(--calm-r-tail); }
html[data-skin="calm"] #threadChat .msg-user .u-tag { display: none; }
html[data-skin="calm"] #threadChat .msg-user .md-p { margin: 0; }
html[data-skin="calm"] #threadChat .msg-user .md-sp { height: 6px; }
html[data-skin="calm"] #threadChat .msg-user strong { color: inherit; }
/* a quick reply / gate approval the user tapped: the decision's compact line is the one record */
html[data-skin="calm"] #threadChat .msg-user.calm-quiet { display: none; }
html[data-skin="calm"] #threadChat .msg-user.calm-fc {
  align-self: flex-start; background: none; color: var(--calm-ink); padding: 2px 0 0 14px; max-width: 100%;
  font: 600 var(--calm-fs-small)/1.4 var(--sans); display: flex; gap: 6px; align-items: baseline; border-radius: 0; margin: 0;
}
html[data-skin="calm"] #threadChat .msg-user.calm-fc::before { content: "✓"; color: var(--calm-ink-2); font-weight: 600; }
html[data-skin="calm"] #threadChat .msg-user.calm-fc .md-p { display: inline; }

/* ---------------- assistant turn ---------------- */
/* the turn keeps a 20 px avatar column + 8 px gap (avatar kit INTEGRATION §4.4): the frame
   lane (nico-calm-frame.js) mounts the avatar on the FIRST turn of a group (.calm-avslot);
   every other turn keeps the column empty, so bubbles line up */
html[data-skin="calm"] #threadChat .turn { display: flex; gap: 8px; }
html[data-skin="calm"] #threadChat .turn > .nico-ic { width: 20px; height: 20px; min-width: 20px; flex: none; margin-top: 2px; }
html[data-skin="calm"] #threadChat .turn > .nico-ic:not(.calm-avslot) { visibility: hidden; background: none; box-shadow: none; }
html[data-skin="calm"] #threadChat .turn .turn-name,
html[data-skin="calm"] #threadChat .turn .run-status,
html[data-skin="calm"] #threadChat .turn .stage-group,
html[data-skin="calm"] #threadChat .turn .rcpt-line,
html[data-skin="calm"] #threadChat .turn .nx-notice,
html[data-skin="calm"] #threadChat .turn .typing { display: none; }
/* one column; the slot sits ABOVE the answer for the whole turn, cards come after it
   (order only — the DOM keeps the classic order every rail test reads) */
html[data-skin="calm"] #threadChat .turn-body { gap: 12px; }
html[data-skin="calm"] #threadChat .turn-body > * { order: 4; }
html[data-skin="calm"] #threadChat .turn-body > .calm-slot { order: 0; }
html[data-skin="calm"] #threadChat .turn-body > .calm-rcpts { order: 1; }
html[data-skin="calm"] #threadChat .turn-body > .prose { order: 2; }

/* the assistant bubble */
html[data-skin="calm"] #threadChat .turn .prose {
  align-self: flex-start; width: 100%; min-width: 0; box-sizing: border-box; max-width: 72ch; background: transparent; color: var(--calm-ink);
  border-radius: 0; padding: 4px 0 8px; font: 400 16px/1.7 var(--sans);
  letter-spacing: 0; overflow-wrap: anywhere;
}
html[data-skin="calm"] #threadChat .turn .prose:empty,
html[data-skin="calm"] #threadChat .turn .prose:has(> .typing:only-child) { display: none; }
html[data-skin="calm"] #threadChat .turn .prose.stopped { color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .prose strong { color: inherit; font-weight: 600; }
html[data-skin="calm"] #threadChat .prose .md-p { margin: 0; }
html[data-skin="calm"] #threadChat .prose .md-sp { height: 16px; }
html[data-skin="calm"] #threadChat .prose .md-h { font: 650 17px/1.45 var(--sans); color: var(--calm-ink); margin: 24px 0 10px; letter-spacing: -.01em; text-transform: none; font-family: var(--sans); }
html[data-skin="calm"] #threadChat .prose .md-h:first-child { margin-top: 0; }
html[data-skin="calm"] #threadChat .prose .md-sp + .md-h { margin-top: 4px; }
html[data-skin="calm"] #threadChat .prose .md-h + .md-sp { height: 0; }
html[data-skin="calm"] #threadChat .prose .md-li { padding-left: 22px; margin: 8px 0; }
html[data-skin="calm"] #threadChat .prose .md-li::before { content: "•"; left: 7px; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .prose .md-li.md-ol { padding-left: 4px; }
html[data-skin="calm"] #threadChat .prose .md-li.md-ol::before { content: none; }
html[data-skin="calm"] #threadChat .prose .md-li.md-ol .md-n { color: var(--calm-meta); font: 500 var(--calm-fs-body)/1 var(--sans); font-variant-numeric: tabular-nums; }
html[data-skin="calm"] #threadChat .prose code { font: 400 12.5px/1 var(--mono); background: var(--calm-raised); padding: 2px 5px; border-radius: 5px; border: 0; color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .prose a { color: var(--calm-accent-ink); text-decoration: none; font-weight: 500; }
html[data-skin="calm"] #threadChat .prose .md-tblwrap { max-width: 100%; overflow-x: auto; margin: 16px 0; border: 1px solid var(--calm-hair); border-radius: 12px; }
html[data-skin="calm"] #threadChat .prose .md-table { width: 100%; min-width: 440px; margin: 0; border: 0; border-radius: 10px; font-size: 14px; line-height: 1.5; }
html[data-skin="calm"] #threadChat .prose .md-table thead { background: var(--calm-raised); }
html[data-skin="calm"] #threadChat .prose .md-table th { font: 600 12px/1.5 var(--sans); color: var(--calm-ink-2); text-transform: none; letter-spacing: 0; }
html[data-skin="calm"] #threadChat .prose .md-table td { color: var(--calm-ink); overflow-wrap: normal; word-break: normal; padding: 12px; }
/* PHONE-WIDTH TABLES (2026-10-24 founder iPhone): a fixed min-width and no-wrap cells pushed every
   column after the second behind a horizontal scroll at 375 px. Below 600 px the table fits the
   bubble and its cells wrap at words (only the first, company + domain, column breaks a long
   domain mid-word); tokens only, so dark / light / sierra alike. */
@media (max-width: 600px) {
  html[data-skin="calm"] #threadChat .prose .md-table { min-width: 0; font-size: 13px; line-height: 1.4; }
  html[data-skin="calm"] #threadChat .prose .md-table th { white-space: normal; overflow-wrap: normal; word-break: normal; padding: 8px 8px; }
  html[data-skin="calm"] #threadChat .prose .md-table td { padding: 8px 8px; overflow-wrap: break-word; }
  html[data-skin="calm"] #threadChat .prose .md-table td:first-child { overflow-wrap: anywhere; }
}
html[data-skin="calm"] #threadChat .prose .md-code { background: var(--calm-raised); border-radius: 10px; }
/* streaming: the caret sits INLINE at the end of the open block */
html[data-skin="calm"] #threadChat .calm-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em;
  background: var(--calm-ink-2); border-radius: 1px; }
/* a failed turn's error line reads as a sentence in the bubble, not a red mono stamp */
html[data-skin="calm"] #threadChat .prose .turn-err { color: var(--calm-ink) !important; font: 400 var(--calm-fs-body)/var(--calm-lh-body) var(--sans) !important; }
/* the skeleton (retract / boot): static, no shimmer */
html[data-skin="calm"] #threadChat .calm-skel { display: block; height: 10px; border-radius: 5px; background: var(--surface-3); margin: 5px 0; }

/* ---------------- the ACTIVITY SLOT: 24 px, one line, above the answer ---------------- */
html[data-skin="calm"] #threadChat .calm-slot {
  align-self: flex-start; display: flex; align-items: center; gap: 4px; height: 24px; margin: 0 0 -6px; padding-left: 10px;
  max-width: 100%; min-width: 0; box-sizing: border-box;
}
html[data-skin="calm"] #threadChat .calm-live { font: 400 var(--calm-fs-small)/24px var(--sans); color: var(--calm-ink-2); gap: 8px; padding-left: 14px; }
html[data-skin="calm"] #threadChat .calm-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--calm-ink-2); flex: none; }
html[data-skin="calm"] #threadChat .calm-live.running .dot { animation: calmBreath 1.2s ease-in-out infinite; }
html[data-skin="calm"] #threadChat .calm-live .tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .calm-live .n { color: var(--calm-meta); font-variant-numeric: tabular-nums; }
@keyframes calmBreath { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { html[data-skin="calm"] #threadChat .calm-live.running .dot { animation: none; } }
html[data-skin="calm"] #threadChat .calm-rcpt {
  font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); min-width: 0; height: 24px; background: none; border: 0; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 8px;
}
html[data-skin="calm"] #threadChat .calm-rcpt > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .calm-rcpt .calm-ic { width: 13px; height: 13px; }
html[data-skin="calm"] #threadChat .calm-rcpt .chev { width: 12px; height: 12px; transition: transform var(--calm-t) var(--calm-ease); }
html[data-skin="calm"] #threadChat .calm-rcpt[aria-expanded="true"] .chev { transform: rotate(90deg); }
html[data-skin="calm"] #threadChat .calm-rcpt.fail .calm-ic:first-child { color: var(--calm-warn-ink); }
html[data-skin="calm"] #threadChat .calm-rcpt.fail > span { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .calm-rcpt:hover { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .calm-slot .retry { flex: none; font: 600 var(--calm-fs-meta)/24px var(--sans); color: var(--calm-ink); padding: 0 6px; background: none; border: 0; cursor: pointer; }

/* receipt rows (tap the receipt) */
html[data-skin="calm"] #threadChat .calm-rcpts { align-self: flex-start; width: min(100%, 560px); margin: 0; background: var(--calm-raised);
  border-radius: var(--calm-r-ctl); padding: 4px 0; font: 400 var(--calm-fs-small)/1.35 var(--sans); }
html[data-skin="calm"] #threadChat .calm-rcpts[hidden] { display: none; }
html[data-skin="calm"] #threadChat .calm-rcpts .r { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; padding: 9px 14px; }
html[data-skin="calm"] #threadChat .calm-rcpts .r + .r { border-top: 1px solid var(--calm-hair); }
html[data-skin="calm"] #threadChat .calm-rcpts .r .calm-ic { color: var(--calm-meta); width: 14px; height: 14px; }
html[data-skin="calm"] #threadChat .calm-rcpts .r.fail .calm-ic { color: var(--calm-warn-ink); }
html[data-skin="calm"] #threadChat .calm-rcpts .r .w { color: var(--calm-ink); min-width: 0; }
html[data-skin="calm"] #threadChat .calm-rcpts .r .w span { color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .calm-rcpts .r .d { font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); font-variant-numeric: tabular-nums; }
html[data-skin="calm"] #threadChat .calm-rcpts .r .st { text-align: right; }
html[data-skin="calm"] #threadChat .calm-rcpts .r .open { font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink); padding: 8px 0; background: none; border: 0; cursor: pointer; }
html[data-skin="calm"] #threadChat .calm-rcpts .foot { padding: 8px 14px 6px; font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); border-top: 1px solid var(--calm-hair); }
html[data-skin="calm"] #threadChat .calm-rcpts .foot button { font: 600 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------------- chips: one line, the action never truncates; .wrap = honesty text ---------------- */
html[data-skin="calm"] #threadChat .calm-chip { align-self: center; max-width: min(100%, 560px); display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 12px; border-radius: var(--calm-r-pill); background: var(--calm-raised); font: 500 var(--calm-fs-meta)/1.45 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .calm-chip .calm-ic { width: 13px; height: 13px; color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .calm-chip .ct { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .calm-chip b { color: var(--calm-ink); font-weight: 600; }
html[data-skin="calm"] #threadChat .calm-chip .act { flex: none; color: var(--calm-ink); font: 600 var(--calm-fs-meta)/1.45 var(--sans); padding: 4px; margin: -4px -6px -4px 2px; background: none; border: 0; cursor: pointer; }
html[data-skin="calm"] #threadChat .calm-chip.warn .calm-ic { color: var(--calm-warn-ink); }
html[data-skin="calm"] #threadChat .calm-chip.wrap { border-radius: 14px; align-items: flex-start; text-align: left; padding: 8px 14px; }
html[data-skin="calm"] #threadChat .calm-chip.wrap .ct { white-space: normal; }
html[data-skin="calm"] #threadChat .calm-chip.wrap .calm-ic { margin-top: 2px; }
/* the background-task chip (nico-tasks.js) takes the chip grammar */
html[data-skin="calm"] #threadChat .turn-body > .nx-chip { align-self: center; }
/* a plan-continuation / paused line: left, wraps, no box, no pulse */
html[data-skin="calm"] #threadChat .cont-note { align-self: flex-start; margin: 0; padding: 0 14px; font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .cont-note .cn-dot { animation: none; background: var(--calm-dot-neutral); }

/* ---------------- cards (decisions only): ONE container, hair-strong border ---------------- */
html[data-skin="calm"] #threadChat .calm-card,
html[data-skin="calm"] #threadChat .gate-card,
html[data-skin="calm"] #threadChat .connect-card,
html[data-skin="calm"] #threadChat .api-plan {
  align-self: flex-start; width: min(100%, 560px); box-sizing: border-box; background: var(--calm-raised);
  border: 1px solid var(--calm-hair-strong); border-radius: var(--calm-r-card); padding: 14px 16px; box-shadow: none; margin: 0;
  font-family: var(--sans); opacity: 1;
}
html[data-skin="calm"] #threadChat .calm-eyebrow { display: flex; align-items: center; gap: 6px; font: 600 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink);
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
html[data-skin="calm"] #threadChat .calm-eyebrow .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--calm-dot-need); }
html[data-skin="calm"] #threadChat .calm-eyebrow .mu { font-weight: 500; color: var(--calm-meta); overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .calm-card-t { display: flex; align-items: center; gap: 8px; font: 600 var(--calm-fs-title)/1.3 var(--sans); color: var(--calm-ink); min-width: 0; }
html[data-skin="calm"] #threadChat .calm-card-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-skin="calm"] #threadChat .calm-card-t .calm-ic { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .calm-card-m { font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* envelope: every recipient, cc, subject, identity — never truncated */
html[data-skin="calm"] #threadChat .calm-env { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0 0; font: 400 var(--calm-fs-small)/1.4 var(--sans); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .calm-env dt { color: var(--calm-meta); font-weight: 500; font-size: var(--calm-fs-meta); line-height: 1.6; }
html[data-skin="calm"] #threadChat .calm-env dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
html[data-skin="calm"] #threadChat .calm-env dd span { color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .gate-card.crm-fields .calm-env { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
html[data-skin="calm"] #threadChat .gate-card.crm-fields .calm-env dt { min-width: 0; overflow-wrap: anywhere; }
/* the quote: a left rule only, no well */
html[data-skin="calm"] #threadChat .calm-quote { margin-top: 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--calm-accent-line);
  font: 400 var(--calm-fs-small)/1.5 var(--sans); color: var(--calm-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-skin="calm"] #threadChat .calm-quote.clamp { max-height: calc(1.5em * 6 + 4px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
html[data-skin="calm"] #threadChat .calm-showall { margin-top: 6px; font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink); padding: 6px 0; background: none; border: 0; cursor: pointer; }
html[data-skin="calm"] #threadChat .calm-warnline { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; color: var(--calm-ink); font: 500 var(--calm-fs-small)/1.4 var(--sans); }
html[data-skin="calm"] #threadChat .calm-warnline .calm-ic { color: var(--calm-warn-ink); margin-top: 1px; width: 14px; height: 14px; }
html[data-skin="calm"] #threadChat .calm-card-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
html[data-skin="calm"] #threadChat .calm-card-acts .det { margin-left: auto; font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); padding: 8px 2px; background: none; border: 0; cursor: pointer; }
html[data-skin="calm"] #threadChat .calm-card-acts .hint { flex-basis: 100%; font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); }

/* buttons: the verb primary (the ONE accent), secondary outlined, tertiary bare */
html[data-skin="calm"] #threadChat .calm-btn,
html[data-skin="calm"] #threadChat .gate-card .gate-btn,
html[data-skin="calm"] #threadChat .api-plan .gate-btn,
html[data-skin="calm"] #threadChat .connect-card .cn-btn {
  height: 36px; padding: 0 14px; border-radius: var(--calm-r-ctl); font: 600 var(--calm-fs-small)/1 var(--sans); letter-spacing: 0; text-transform: none;
  display: inline-flex; align-items: center; gap: 6px; color: var(--calm-ink); white-space: nowrap; background: none; border: 0; box-shadow: none; cursor: pointer; opacity: 1;
}
html[data-skin="calm"] #threadChat .calm-btn.primary,
html[data-skin="calm"] #threadChat .gate-card .gate-btn.approve,
html[data-skin="calm"] #threadChat .api-plan .gate-btn.approve,
html[data-skin="calm"] #threadChat .connect-card .cn-btn.primary { background: var(--calm-accent); color: var(--calm-on-accent); }
html[data-skin="calm"] #threadChat .gate-card .gate-btn.approve:hover,
html[data-skin="calm"] #threadChat .api-plan .gate-btn.approve:hover { box-shadow: none; filter: brightness(1.05); }
html[data-skin="calm"] #threadChat .calm-btn.primary[disabled],
html[data-skin="calm"] #threadChat .gate-card .gate-btn.approve[disabled],
html[data-skin="calm"] #threadChat .api-plan .gate-btn.approve[disabled],
html[data-skin="calm"] #threadChat .connect-card .cn-btn.primary[disabled] {
  background: var(--calm-bubble); color: var(--calm-ink-2); box-shadow: inset 0 0 0 1px var(--calm-hair-strong); cursor: default; filter: none;
}
html[data-skin="calm"] #threadChat .calm-btn.secondary,
html[data-skin="calm"] #threadChat .gate-card .gate-btn.edit,
html[data-skin="calm"] #threadChat .connect-card .cn-btn.cn-continue { background: var(--calm-raised); box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }
html[data-skin="calm"] #threadChat .calm-btn.tertiary,
html[data-skin="calm"] #threadChat .gate-card .gate-btn.skip,
html[data-skin="calm"] #threadChat .connect-card .cn-btn:not(.primary):not(.cn-continue) { color: var(--calm-ink-2); padding: 0 8px; }
html[data-skin="calm"] #threadChat .gate-btn:disabled:not(.approve),
html[data-skin="calm"] #threadChat .cn-btn:disabled:not(.primary) { color: var(--calm-meta); }

/* ---- the side-effect card (.gate-card.side): eyebrow + title + meta + envelope + quote + verbs ---- */
html[data-skin="calm"] #threadChat .gate-card.side .gate-head,
html[data-skin="calm"] #threadChat .gate-card.side .gate-sum { display: none; }
html[data-skin="calm"] #threadChat .gate-card .gate-diff { display: none; margin-top: 10px; padding: 8px 0 0; border-top: 1px solid var(--calm-hair); }
html[data-skin="calm"] #threadChat .gate-card.details .gate-diff { display: flex; }
html[data-skin="calm"] #threadChat .gate-card .gate-field { font: 400 var(--calm-fs-meta)/1.5 var(--sans); }
html[data-skin="calm"] #threadChat .gate-card .gate-field .gf-k { color: var(--calm-meta); text-align: left; flex: 0 0 30%; }
html[data-skin="calm"] #threadChat .gate-card .gate-field .gf-v { color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .gate-card .gate-acts { display: flex; gap: 8px; margin-top: 14px; padding: 0; border: 0; flex-wrap: wrap; align-items: center; background: none; }
html[data-skin="calm"] #threadChat .gate-card .gate-state { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .gate-card .gate-recovery { min-height: 44px; }
html[data-skin="calm"] #threadChat .gate-card .nx-pou { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; padding: 0; background: none; border: 0;
  color: var(--calm-ink); font: 500 var(--calm-fs-small)/1.4 var(--sans); }
html[data-skin="calm"] #threadChat .gate-card .nx-pou svg { color: var(--calm-warn-ink); flex: none; margin-top: 1px; }
/* approved / skipped: the card settles into its compact line (never auto-collapses before the user acts) */
html[data-skin="calm"] #threadChat .gate-card.calm-settled { background: none; border: 0; padding: 2px 0 0 14px; width: auto; max-width: 100%; }
html[data-skin="calm"] #threadChat .gate-card.calm-settled > :not(.calm-compact):not(.gate-diff) { display: none !important; }
html[data-skin="calm"] #threadChat .gate-card.calm-settled .calm-compact { padding: 0; }
html[data-skin="calm"] #threadChat .gate-card.approving .gate-state { color: var(--calm-ink-2); }

/* ---- plan card: "Run these N steps?" ---- */
html[data-skin="calm"] #threadChat .api-plan .plan-head { display: none; }
html[data-skin="calm"] #threadChat .api-plan .plan-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; padding: 6px 0; border: 0; border-top: 1px solid var(--calm-hair);
  font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink); align-items: baseline; }
html[data-skin="calm"] #threadChat .api-plan .calm-card-t + .calm-card-m + .plan-item,
html[data-skin="calm"] #threadChat .api-plan .calm-card-m + .plan-item,
html[data-skin="calm"] #threadChat .api-plan .calm-card-t + .plan-item { border-top: 0; margin-top: 8px; }
html[data-skin="calm"] #threadChat .api-plan .plan-item .pnum { color: var(--calm-meta); font: 500 var(--calm-fs-meta)/1.6 var(--sans); text-align: left; font-variant-numeric: tabular-nums; }
html[data-skin="calm"] #threadChat .api-plan .plan-item .chk { display: none; }
html[data-skin="calm"] #threadChat .api-plan .plan-item .ptxt { color: var(--calm-ink); text-decoration: none; }
html[data-skin="calm"] #threadChat .api-plan .plan-item.done .ptxt { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .api-plan .plan-item.done .pnum::after { content: " ✓"; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .api-plan .plan-item.active .pnum { color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .api-plan .plan-item .plan-step-tool { font: 500 var(--calm-fs-meta)/1.5 var(--sans); color: var(--calm-meta); background: none; border: 0; padding: 0; }
html[data-skin="calm"] #threadChat .api-plan .plan-item .gate-tag { font: 500 var(--calm-fs-meta)/1.5 var(--sans); color: var(--calm-meta); background: none; padding: 0; }
html[data-skin="calm"] #threadChat .api-plan .plan-approve { display: flex; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; flex-wrap: wrap; align-items: center; }
html[data-skin="calm"] #threadChat .api-plan .plan-approve .pa-note { flex-basis: 100%; order: 9; margin: 0; font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); }
/* verbs in the side-effect order: Run N steps (primary) · Change steps (secondary) · Cancel (tertiary) */
html[data-skin="calm"] #threadChat .api-plan .plan-approve .gate-btn.approve { order: 0; }
html[data-skin="calm"] #threadChat .api-plan .plan-approve .gate-btn:not(.approve):not(.neutral) { order: 1; background: var(--calm-raised); box-shadow: inset 0 0 0 1px var(--calm-hair-strong); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .api-plan .plan-approve .gate-btn.neutral { order: 2; background: none; box-shadow: none; color: var(--calm-ink-2); padding: 0 8px; }
html[data-skin="calm"] #threadChat .api-plan .gate-btn.chosen:disabled { box-shadow: inset 0 0 0 1.5px var(--calm-ink-2); }

/* ---- choice card: plain option rows, hairlines, no well, no key letters ---- */
html[data-skin="calm"] #threadChat .choice-row.calm-card { display: block; margin: 0; }
html[data-skin="calm"] #threadChat .choice-row .calm-opts { margin-top: 8px; border-top: 1px solid var(--calm-hair); }
html[data-skin="calm"] #threadChat .choice-row .choice-btn {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; max-width: none; min-height: 44px; padding: 10px 2px;
  text-align: left; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--calm-ink); cursor: pointer; font: inherit;
}
html[data-skin="calm"] #threadChat .choice-row .choice-btn + .choice-btn { border-top: 1px solid var(--calm-hair); }
html[data-skin="calm"] #threadChat .choice-row .choice-btn:hover,
html[data-skin="calm"] #threadChat .choice-row .choice-btn:focus-visible { background: var(--calm-bubble); border-radius: 8px; }
html[data-skin="calm"] #threadChat .choice-row .choice-btn.rec { background: none; border-color: var(--calm-hair); }
html[data-skin="calm"] #threadChat .choice-row .choice-label { grid-column: 1; font: 600 var(--calm-fs-small)/1.35 var(--sans); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .choice-row .choice-star { display: none; }
html[data-skin="calm"] #threadChat .choice-row .choice-chip { font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); background: none; border: 0; padding: 0; }
html[data-skin="calm"] #threadChat .choice-row .choice-sub { grid-column: 1; font: 400 var(--calm-fs-small)/1.35 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .choice-row .choice-why { display: none; }
html[data-skin="calm"] #threadChat .choice-row .calm-rec { grid-column: 2; grid-row: 1 / span 2; font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .choice-row .calm-why { margin-top: 4px; font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); padding: 6px 0; background: none; border: 0; cursor: pointer; }
html[data-skin="calm"] #threadChat .choice-row .calm-why-t { font: 400 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-ink-2); margin-top: 2px; }

/* ---- the compact line: the one record of a decision; the check is ink-2, not green ---- */
html[data-skin="calm"] #threadChat .calm-compact { align-self: flex-start; padding: 2px 0 0 14px; max-width: 100%; min-width: 0; }
html[data-skin="calm"] #threadChat .calm-compact .q { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .calm-compact .a { display: flex; align-items: center; gap: 6px; font: 600 var(--calm-fs-small)/1.4 var(--sans); color: var(--calm-ink); margin-top: 2px; flex-wrap: wrap; }
html[data-skin="calm"] #threadChat .calm-compact .a .calm-ic { color: var(--calm-ink-2); width: 14px; height: 14px; }
html[data-skin="calm"] #threadChat .calm-compact .a .m { font-weight: 500; color: var(--calm-meta); font-size: var(--calm-fs-meta); }
html[data-skin="calm"] #threadChat .calm-compact .a .x { font: 600 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-ink-2); padding: 4px 2px; background: none; border: 0; cursor: pointer; }

/* ---- connect card: Reconnect / Not now, same container, no eyebrow ---- */
html[data-skin="calm"] #threadChat .connect-card .cn-head { padding: 0; border: 0; background: none; font: 600 var(--calm-fs-title)/1.3 var(--sans); color: var(--calm-ink); gap: 8px; }
html[data-skin="calm"] #threadChat .connect-card .cn-head .cn-ic { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .connect-card .cn-title { font: 600 var(--calm-fs-title)/1.3 var(--sans); color: var(--calm-ink); letter-spacing: 0; }
html[data-skin="calm"] #threadChat .connect-card .cn-sub { padding: 0; margin-top: 3px; font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .connect-card .cn-purpose,
html[data-skin="calm"] #threadChat .connect-card .cn-host,
html[data-skin="calm"] #threadChat .connect-card .cn-prov,
html[data-skin="calm"] #threadChat .connect-card .cn-klabel,
html[data-skin="calm"] #threadChat .connect-card .cn-foot { padding: 0; margin-top: 8px; font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink-2); background: none; border: 0; }
html[data-skin="calm"] #threadChat .connect-card .cn-input { font: 400 var(--calm-fs-small)/1.3 var(--sans); background: var(--calm-ground); border: 0; box-shadow: inset 0 0 0 1px var(--calm-hair-strong); border-radius: 10px; color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .connect-card .cn-acts { padding: 0; margin-top: 14px; border: 0; background: none; gap: 8px; }
html[data-skin="calm"] #threadChat .connect-card .cn-state,
html[data-skin="calm"] #threadChat .connect-card .cn-msg { font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .connect-card .cn-docs { font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .connect-card.connected,
html[data-skin="calm"] #threadChat .connect-card.waiting,
html[data-skin="calm"] #threadChat .connect-card.stale { box-shadow: none; border-color: var(--calm-hair-strong); opacity: 1; }
html[data-skin="calm"] #threadChat .connect-card.connected .cn-title,
html[data-skin="calm"] #threadChat .connect-card.connected .cn-head .cn-ic,
html[data-skin="calm"] #threadChat .connect-card.connected .cn-state,
html[data-skin="calm"] #threadChat .connect-card.waiting .cn-state,
html[data-skin="calm"] #threadChat .connect-card.waiting .cn-head .cn-ic { color: var(--calm-ink); }

/* ---- memory: the pill is the Calm memory row (its own type, no blue); receipts are a chip ---- */
html[data-skin="calm"] #threadChat .memory-pill-wrap { align-self: flex-start; margin: 0; max-width: min(100%, 560px); }
html[data-skin="calm"] #threadChat .memory-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 14px; border-radius: var(--calm-r-ctl);
  background: var(--calm-raised); border: 1px solid var(--calm-hair-strong); box-shadow: none; color: var(--calm-ink);
  font: 400 var(--calm-fs-small)/1.4 var(--sans); letter-spacing: 0; text-transform: none;
}
html[data-skin="calm"] #threadChat .memory-pill::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; color: var(--calm-ink-2);
  -webkit-mask: var(--calm-bulb) center / 14px 14px no-repeat; mask: var(--calm-bulb) center / 14px 14px no-repeat; }
html[data-skin="calm"] #threadChat .memory-pill:hover { border-color: var(--calm-hair-strong); background: var(--calm-bubble); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .memory-pill .mp-chev { color: var(--calm-ink-2); font: 600 14px/1 var(--sans); }
html[data-skin="calm"] #threadChat .memory-pill-wrap.receipt .memory-pill,
html[data-skin="calm"] #threadChat .memory-pill-wrap.saved .memory-pill { border: 0; border-radius: var(--calm-r-pill); min-height: 0; padding: 5px 12px; background: var(--calm-raised);
  color: var(--calm-meta); font: 500 var(--calm-fs-meta)/1.45 var(--sans); }
html[data-skin="calm"] #threadChat .memory-pill-wrap.receipt,
html[data-skin="calm"] #threadChat .memory-pill-wrap.saved { align-self: center; }
html[data-skin="calm"] #threadChat .memory-pill-wrap.saved .mp-chev,
html[data-skin="calm"] #threadChat .memory-pill-wrap.receipt .mp-chev { color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .memory-pill-wrap.dismissed .memory-pill,
html[data-skin="calm"] #threadChat .memory-pill-wrap.stale .memory-pill { background: none; border-color: var(--calm-hair); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .memory-pill-wrap .mp-peek { margin-top: 4px; padding: 0 2px; max-width: 560px; font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink); overflow-wrap: anywhere; }
html[data-skin="calm"] #threadChat .memory-pill-wrap.open .mp-peek,
html[data-skin="calm"] #threadChat .memory-pill-wrap.dismissed .mp-peek,
html[data-skin="calm"] #threadChat .memory-pill-wrap.undone .mp-peek { display: none; }
html[data-skin="calm"] #threadChat .memory-cards { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
html[data-skin="calm"] #threadChat .memory-cards[hidden] { display: none; }
html[data-skin="calm"] #threadChat .memory-card { background: var(--calm-raised); border: 1px solid var(--calm-hair-strong); border-radius: var(--calm-r-ctl); padding: 12px 14px; box-shadow: none;
  font-family: var(--sans); }
html[data-skin="calm"] #threadChat .memory-card .mc-head { padding: 0; border: 0; gap: 8px; }
html[data-skin="calm"] #threadChat .memory-card .mc-ic { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .memory-card .mc-title { font: 600 var(--calm-fs-small)/1.35 var(--sans); color: var(--calm-ink); letter-spacing: 0; text-transform: none; }
html[data-skin="calm"] #threadChat .memory-card .mc-type { font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); background: none; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
html[data-skin="calm"] #threadChat .memory-card .mc-fact { font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink); padding: 0; margin-top: 6px; }
html[data-skin="calm"] #threadChat .memory-card .mc-cons,
html[data-skin="calm"] #threadChat .memory-card .mc-meta,
html[data-skin="calm"] #threadChat .memory-card .mc-from { font: 400 var(--calm-fs-meta)/1.45 var(--sans); color: var(--calm-meta); padding: 0; margin-top: 4px; }
html[data-skin="calm"] #threadChat .memory-card .mc-acts { padding: 0; margin-top: 10px; gap: 6px; border: 0; background: none; }
html[data-skin="calm"] #threadChat .memory-card .mc-btn { height: 32px; padding: 0 12px; border-radius: var(--calm-r-ctl); font: 600 var(--calm-fs-small)/1 var(--sans);
  color: var(--calm-ink-2); background: none; border: 0; box-shadow: none; text-transform: none; letter-spacing: 0; }
html[data-skin="calm"] #threadChat .memory-card .mc-btn.save { color: var(--calm-ink); background: var(--calm-raised); box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }
html[data-skin="calm"] #threadChat .memory-card .mc-state { font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .memory-card .mc-edit textarea,
html[data-skin="calm"] #threadChat .memory-card .mc-edit input { font: 400 var(--calm-fs-small)/1.4 var(--sans); background: var(--calm-ground); color: var(--calm-ink); border: 0; box-shadow: inset 0 0 0 1px var(--calm-hair-strong); border-radius: 10px; }
html[data-skin="calm"] {
  --calm-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5h4M6.5 14.5h3M8 1.8A4.3 4.3 0 0 0 5.5 9.6c.5.4.5 1 .5 1.9h4c0-.9 0-1.5.5-1.9A4.3 4.3 0 0 0 8 1.8Z'/%3E%3C/svg%3E");
}

/* ---- the timeout card: the bubble says it, Retry is the next action ---- */
html[data-skin="calm"] #threadChat .timeout-card { background: none; border: 0; padding: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
html[data-skin="calm"] #threadChat .timeout-card .timeout-icon { display: none; }
html[data-skin="calm"] #threadChat .timeout-card .timeout-copy strong { font: 600 var(--calm-fs-body)/1.45 var(--sans); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .timeout-card .timeout-copy span { font: 400 var(--calm-fs-body)/1.45 var(--sans); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .timeout-card .timeout-retry { height: 32px; padding: 0 12px; border-radius: var(--calm-r-ctl); background: var(--calm-raised); color: var(--calm-ink);
  box-shadow: inset 0 0 0 1px var(--calm-hair-strong); border: 0; font: 600 var(--calm-fs-small)/1 var(--sans); }

/* ---- turn actions: under the answer, quiet until hover / focus (Save as routine lives here) ---- */
html[data-skin="calm"] #threadChat .turn-acts { margin: -6px 0 0; padding-left: 6px; gap: 2px; opacity: 0; transition: opacity var(--calm-t-fast) var(--calm-ease); }
html[data-skin="calm"] #threadChat .turn:hover .turn-acts,
html[data-skin="calm"] #threadChat .turn-acts:focus-within { opacity: 1; }
html[data-skin="calm"] #threadChat .turn-act { height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--calm-ink-2);
  font: 500 var(--calm-fs-meta)/1 var(--sans); box-shadow: none; }
html[data-skin="calm"] #threadChat .turn-act:hover { background: var(--calm-raised); color: var(--calm-ink); border: 0; }
html[data-skin="calm"] #threadChat .turn-act .ta-ic { color: var(--calm-ink-2); }
/* the Calm turn ⋯ (Copy · Save as routine): one 28 px trigger, a menu with the one shadow */
html[data-skin="calm"] #threadChat .calm-turn-acts { position: relative; margin: -2px 0 0; padding-left: 0; }
html[data-skin="calm"] #threadChat .calm-turn-acts:has(.calm-turn-menu:not([hidden])) { opacity: 1; }
html[data-skin="calm"] #threadChat .calm-turn-more { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--calm-ink-2); cursor: pointer; }
html[data-skin="calm"] #threadChat .calm-turn-more:hover, html[data-skin="calm"] #threadChat .calm-turn-more[aria-expanded="true"] { background: var(--calm-raised); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .calm-turn-more:focus-visible, html[data-skin="calm"] #threadChat .calm-tm-item:focus-visible { outline: 2px solid var(--calm-accent); outline-offset: 1px; }
html[data-skin="calm"] #threadChat .calm-turn-menu { position: absolute; left: 0; top: 30px; z-index: 30; min-width: 180px; padding: 4px; border-radius: var(--calm-r-ctl);
  background: var(--calm-raised); box-shadow: var(--calm-float), inset 0 0 0 1px var(--calm-hair-strong); display: flex; flex-direction: column; }
html[data-skin="calm"] #threadChat .calm-turn-menu[hidden] { display: none; }
html[data-skin="calm"] #threadChat .calm-tm-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: 500 var(--calm-fs-small)/1 var(--sans); color: var(--calm-ink); cursor: pointer; box-shadow: none; }
html[data-skin="calm"] #threadChat .calm-tm-item:hover { background: var(--calm-bubble); }
html[data-skin="calm"] #threadChat .calm-tm-item .ta-ic { display: none; }
html[data-skin="calm"] #threadChat .calm-copy-status { font: 400 13px/1.5 var(--sans); color: var(--calm-ink-2); overflow-wrap: anywhere; }
html[data-skin="calm"] #threadChat .calm-turn-acts:has(.calm-copy-status:not(:empty)) { opacity: 1; }
@media (pointer: coarse) {
  html[data-skin="calm"] #threadChat .calm-turn-acts { opacity: 1; }
  html[data-skin="calm"] #threadChat .calm-turn-more { width: 44px; height: 44px; }
  html[data-skin="calm"] #threadChat .calm-tm-item { min-height: 44px; }
  html[data-skin="calm"] #threadChat .calm-turn-menu { top: 46px; }
}

/* ---------------- artifacts open ONLY on Open (never auto-halving the chat) ---------------- */
html[data-skin="calm"] body[data-session="chat"].calm-canvas-shut #body { grid-template-columns: var(--sidebar-w, 280px) minmax(0, 1fr) 0fr; }
html[data-skin="calm"] body[data-session="chat"].calm-canvas-shut.sidebar-collapsed #body { grid-template-columns: 0fr minmax(0, 1fr) 0fr; }
/* Saved activity replaces the closed artifact slot; it must not cover the
   chat or its recovery controls when the Calm canvas is shut. */
@media (min-width: 900px) {
  html[data-skin="calm"] body[data-session="chat"].nx-receipts-open #body { grid-template-columns: var(--sidebar-w, 280px) minmax(0, 1fr) 340px; }
  html[data-skin="calm"] body[data-session="chat"].nx-receipts-open.sidebar-collapsed #body { grid-template-columns: 0fr minmax(0, 1fr) 340px; }
}
html[data-skin="calm"] body[data-session="chat"].calm-canvas-shut #canvas-col,
html[data-skin="calm"] body[data-session="chat"].calm-canvas-shut .canvas-divider { display: none; }

/* one polite live region per thread (#sr-live) */
html[data-skin="calm"] .calm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* notices the Calm grammar folds elsewhere: pacing → the live line, connectors_capped → the
   receipt suffix, conversation_not_saved → the warn chip (the classic nodes stay in the DOM) */
html[data-skin="calm"] #threadChat .cont-note.cn-pacing,
html[data-skin="calm"] #threadChat .cont-note.cn-capped,
html[data-skin="calm"] #threadChat .cont-note.cn-notsaved { display: none; }
html[data-skin="calm"] #threadChat .gate-card.side.details .gate-sum { display: block; padding: 8px 0 0; font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .gate-card.side .gate-skipped { display: none; }

/* the artifacts-in-this-chat bar (the frame's ⋯ → "Artifacts in this chat" scrolls here):
   quiet sans chips, no accent — the accent belongs to the next action only */
/* the "N artifacts in this chat" bar moved to the header ⋯ (spec §6.1): kept in the DOM for
   its chips (the ⋯ menu clicks them), never drawn over the thread */
html[data-skin="calm"] #threadChat .art-chipbar { display: none !important; }
/* spec §10 check 3: no backdrop-filter anywhere in Calm (scrims are a flat tint) */
html[data-skin="calm"] *, html[data-skin="calm"] *::before, html[data-skin="calm"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-skin="calm"] #threadChat .art-chipbar .acb-label { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); letter-spacing: 0; }
html[data-skin="calm"] #threadChat .art-chip { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink-2); background: var(--calm-raised); border: 0; border-radius: var(--calm-r-pill); padding: 4px 10px; }
html[data-skin="calm"] #threadChat .art-chip:hover,
html[data-skin="calm"] #threadChat .art-chip.on { color: var(--calm-ink); background: var(--calm-bubble); border: 0; }
html[data-skin="calm"] #threadChat .art-chip .ac-conn { text-transform: none; }
html[data-skin="calm"] #threadChat .art-chip .ac-tool, html[data-skin="calm"] #threadChat .art-chip.on .ac-tool { color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .art-chip .ac-time { color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .art-chip .tdot { display: none; }
html[data-skin="calm"] #threadChat .art-chip .badge, html[data-skin="calm"] #threadChat .art-chip.on .badge { background: none; border: 0; color: var(--calm-meta); font: 500 var(--calm-fs-meta)/1 var(--sans); }
html[data-skin="calm"] #threadChat .msg-user.calm-fc.calm-quiet { display: none; }
/* the hidden attribute always wins inside the Calm thread (a styled display must never
   resurrect a control the renderer hid — e.g. the connect card's Continue) */
html[data-skin="calm"] #threadChat [hidden] { display: none !important; }
/* plain-English plan steps: the raw tool id is not shown */
html[data-skin="calm"] #threadChat .api-plan .plan-item .plan-step-tool { display: none; }

/* ---------------- wave-2 slots (reactivation client, spec §5 / §9) ----------------
   Built by the reactivation lane through window.NICO_CALM_THREAD (nico-api.js); the
   grammar is ready here so no post / chip / ack ever lands in the old skin. */
/* "While you were away" and other long honest lines: left, wraps, no box */
html[data-skin="calm"] #threadChat .calm-roll { align-self: flex-start; display: flex; gap: 8px; max-width: min(100%, 560px); padding: 0 14px;
  font: 400 var(--calm-fs-small)/1.45 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .calm-roll .calm-ic { color: var(--calm-meta); margin-top: 2px; width: 14px; height: 14px; }
html[data-skin="calm"] #threadChat .calm-roll b { color: var(--calm-ink); font-weight: 600; }
/* the ✓ acknowledgement badge on the user's pill (a COMPLETED ack — the one green use) */
html[data-skin="calm"] #threadChat .msg-user { position: relative; }
html[data-skin="calm"] #threadChat .msg-user .calm-ack { position: absolute; left: -8px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--calm-ground); color: var(--calm-ok-ink); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--calm-hair); }
html[data-skin="calm"] #threadChat .msg-user .calm-ack .calm-ic { width: 11px; height: 11px; }

/* F: a stalled plan is ONE compact line (spec §6.1) — Resume is the one accent; the plan card
   above folds to its title row */
html[data-skin="calm"] #threadChat .calm-compact.calm-paused .a .x { height: 28px; padding: 0 12px; border-radius: var(--calm-r-ctl); background: var(--calm-accent); color: var(--calm-on-accent); }
html[data-skin="calm"] #threadChat .calm-compact.calm-paused .a .x[disabled] { background: var(--calm-bubble); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .calm-plan-folded > :not(:first-child) { display: none !important; }
/* F: the background-task card is a one-line chip in Calm (spec §6.1 "chip + the Running row"):
   centered pill, the title truncates in the middle, the actions never do; ink, not accent */
html[data-skin="calm"] #threadChat .nx.handed.nx-chip { display: flex; align-items: center; gap: 8px; max-width: min(100%, 560px); min-height: 32px; padding: 4px 6px 4px 12px;
  border: 0; border-radius: var(--calm-r-pill); background: var(--calm-raised); box-shadow: none; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .kic { display: none; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m { min-width: 0; flex: 1 1 auto; display: flex; gap: 6px; align-items: baseline; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m .t { flex: 0 1 auto; min-width: 60px; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m .s { flex: 1 100 auto; min-width: 0; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m .s::before { content: "· "; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m .t { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .nx-chip-m .s { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .btn-row { display: flex; gap: 2px; flex: none; margin: 0; }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .btn { height: 26px; padding: 0 8px; border: 0; border-radius: var(--calm-r-pill); background: none; box-shadow: none;
  font: 600 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink); }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .btn.primary { background: var(--calm-accent); color: var(--calm-on-accent); }
html[data-skin="calm"] #threadChat .nx.handed.nx-chip .btn.ghost { color: var(--calm-ink-2); }
/* F: the composer-edge queue (spec §3 .calm-edge): an outlined strip above the composer, sans,
   ≥ 12 px. The words stay the rail's own ("Keep Nico open until these are sent" — the queue is
   memory-only, and the honest line outranks the mock's shorter copy) */
html[data-skin="calm"] #queueStrip { background: var(--calm-ground); border: 1px solid var(--calm-hair-strong); border-radius: var(--calm-r-card); padding: 8px 12px; box-shadow: none; }
html[data-skin="calm"] #queueStrip .queue-h { font: 500 var(--calm-fs-meta)/1.35 var(--sans); color: var(--calm-meta); letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
html[data-skin="calm"] #queueStrip.held .queue-h { color: var(--calm-ink); }
html[data-skin="calm"] #queueStrip .q-item { font: 400 var(--calm-fs-small)/1.4 var(--sans); color: var(--calm-ink); padding: 2px 0; }
html[data-skin="calm"] #queueStrip .q-item .n { font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #queueStrip .q-x { width: 44px; height: 44px; color: var(--calm-ink-2); }
/* F: a paused plan is its compact line alone — the folded card is not a second (decision-less) card */
html[data-skin="calm"] #threadChat .calm-plan-folded { display: none !important; }
/* F: the turn menu sits IN the thread — a hairline boundary, no blurred shadow (§10 check 3) */
html[data-skin="calm"] #threadChat .calm-turn-menu { box-shadow: inset 0 0 0 1px var(--calm-hair-strong) !important; }
/* F: the memory chip keeps a visible boundary (non-text 3:1) */
html[data-skin="calm"] #threadChat .memory-pill-wrap.receipt .memory-pill,
html[data-skin="calm"] #threadChat .memory-pill-wrap.saved .memory-pill { box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }
html[data-skin="calm"] #threadChat .memory-pill { box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }

/* step F2 (contrast probe): Today's "Reading <source>" pills (classic Today layout drawn in Calm
   when the account has no brief) reached only 3.9–4.3:1 at 10.5 px — the Calm ink-2 meets AA */
html[data-skin="calm"] .t-src { color: var(--calm-ink-2); }