/* ============================================================
   NICO CALM — THE ACTIVITY TIMELINE (renderer/nico-activity.js), web + Mac.
   A port of the final mockup (live-activity/D/la.css) onto the live thread DOM: the timeline
   grows out of the turn's .calm-slot (nico-api.js), which gains .la while a request that
   declared accepts 'activity' has steps. Every rule is scoped under html[data-skin="calm"],
   so the classic skin is untouched. Every colour is a --calm-* token (AA in dark / light /
   sierra, measured with the Calm skin). Rules kept: status is never blue · ONE loop per turn
   (the head dot) · no shadow · no backdrop-filter · reduced motion = no animation at all.
   ============================================================ */

/* the slot becomes the timeline: head row + list + footnotes; right edge = the bubble's max */
html[data-skin="calm"] #threadChat .calm-slot.la {
  display: flex; flex-direction: column; align-items: stretch; height: auto; padding-left: 0;
  align-self: stretch; max-width: min(var(--calm-bubble-max, 85%), 640px); min-width: 0;
}
/* done / done-open: the receipt button (+ Retry) is the 24 px head, the steps sit below */
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode="done"],
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode="done-open"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 2px; padding-left: 6px;
}
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode^="done"] > .calm-rcpt { justify-self: start; max-width: 100%; }
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode^="done"] > .retry { justify-self: start; }
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode^="done"] > .la-list,
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode^="done"] > .la-rfoot { grid-column: 1 / -1; }

/* ---------------- the head: ONE button in every mode (text + a meta chevron) ---------------- */
html[data-skin="calm"] #threadChat .la-head { height: 24px; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 10px; }
html[data-skin="calm"] #threadChat .la-hb {
  position: relative; height: 24px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 0 4px 0 0; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left;
  font: 400 var(--calm-fs-small)/24px var(--sans); color: var(--calm-ink-2);
}
html[data-skin="calm"] #threadChat .la-hb::after { content: ""; position: absolute; left: -4px; right: -8px; top: -10px; bottom: -10px; }   /* a 44 px hit area on a 24 px row */
html[data-skin="calm"] #threadChat .la-hb .tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .la-hb .lb { font-weight: 500; color: var(--calm-ink); }
/* m:ss in tabular figures at a fixed width: the chevron never moves while the seconds tick */
html[data-skin="calm"] #threadChat .la-hb .n { color: var(--calm-meta); font-variant-numeric: tabular-nums; display: inline-block; min-width: 4ch; }
html[data-skin="calm"] #threadChat .la-hb .chev { width: 12px; height: 12px; flex: none; color: var(--calm-meta); transition: transform var(--calm-t) var(--calm-ease); }
html[data-skin="calm"] #threadChat .la-hb[aria-expanded="true"] .chev { transform: rotate(90deg); }
html[data-skin="calm"] #threadChat .la-hb:focus-visible { outline: 2px solid var(--calm-ink-2); outline-offset: 2px; }
html[data-skin="calm"] #threadChat .la-hb .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--calm-ink-2); flex: none; margin-left: 3px; }
/* the ONE breathing element per turn */
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode="live"] .la-hb .dot,
html[data-skin="calm"] #threadChat .calm-slot.la[data-mode="compact"] .la-hb .dot { animation: calmBreath 1.2s ease-in-out infinite; }

/* ---------------- the list: flat on the ground, a hairline rail joins the state icons ---------------- */
html[data-skin="calm"] #threadChat .la-list { list-style: none; margin: 4px 0 0; padding: 0; position: relative; display: flex; flex-direction: column; }
html[data-skin="calm"] #threadChat .la-list[hidden] { display: none; }
html[data-skin="calm"] #threadChat .la-list::before { content: ""; position: absolute; left: 11.5px; top: 14px; bottom: 14px; width: 1px; background: var(--calm-hair); }
html[data-skin="calm"] #threadChat .la-list.solo::before { display: none; }
html[data-skin="calm"] #threadChat .la-row { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 5px 0; min-height: 44px; }
html[data-skin="calm"] #threadChat .la-row .st { width: 24px; height: 24px; display: grid; place-items: center; background: var(--calm-ground); position: relative; z-index: 1; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-row .st .calm-ic { width: 15px; height: 15px; }
html[data-skin="calm"] #threadChat .la-row .tx { min-width: 0; padding-top: 3px; }
html[data-skin="calm"] #threadChat .la-row .l { font: 500 var(--calm-fs-small)/1.35 var(--sans); color: var(--calm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="calm"] #threadChat .la-row .m { font: 400 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
html[data-skin="calm"] #threadChat .la-row .d { padding-top: 5px; font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
/* one running step: the head names it; the row is the detail + the phases, under the head text */
html[data-skin="calm"] #threadChat .la-row.solo { grid-template-columns: 14px minmax(0, 1fr) auto; min-height: 0; padding: 0 0 2px 10px; }
html[data-skin="calm"] #threadChat .la-row.solo .st { width: 14px; background: none; }
html[data-skin="calm"] #threadChat .la-row.solo .tx { padding-top: 0; }
/* state icons: running = a STATIC ink-2 ring (the head dot is the only loop); pending / stopped = a hairline ring */
html[data-skin="calm"] #threadChat .la-row .ring { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-row .hollow { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--calm-hair-strong); }
html[data-skin="calm"] #threadChat .la-row.s-warn .st,
html[data-skin="calm"] #threadChat .la-row.s-part .st { color: var(--calm-warn-ink); }
/* honesty text wraps, never truncates */
html[data-skin="calm"] #threadChat .la-row.s-warn .m,
html[data-skin="calm"] #threadChat .la-row.s-part .m { color: var(--calm-ink-2); white-space: normal; overflow-wrap: anywhere; }
html[data-skin="calm"] #threadChat .la-row.s-prev .st { color: var(--calm-meta); }
/* "+N earlier steps" */
html[data-skin="calm"] #threadChat .la-more { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 32px; }
html[data-skin="calm"] #threadChat .la-more .st { width: 24px; height: 24px; display: grid; place-items: center; background: var(--calm-ground); position: relative; z-index: 1; }
html[data-skin="calm"] #threadChat .la-more .st i { width: 3px; height: 3px; border-radius: 50%; background: var(--calm-meta); box-shadow: 0 -5px 0 var(--calm-meta), 0 5px 0 var(--calm-meta); }
html[data-skin="calm"] #threadChat .la-more button { justify-self: start; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); }

/* sub-progress spans the text AND duration columns, so phase durations share the rows' right edge */
html[data-skin="calm"] #threadChat .la-sub { grid-column: 2 / 4; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
html[data-skin="calm"] #threadChat .la-ph { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
html[data-skin="calm"] #threadChat .la-ph li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: start; font: 400 var(--calm-fs-meta)/1.35 var(--sans); color: var(--calm-meta); }
html[data-skin="calm"] #threadChat .la-ph li .pi { width: 14px; height: 16px; display: grid; place-items: center; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-ph li .pi .calm-ic { width: 12px; height: 12px; }
html[data-skin="calm"] #threadChat .la-ph li .pt { min-width: 0; white-space: normal; }
html[data-skin="calm"] #threadChat .la-ph li .sg { white-space: nowrap; }            /* breaks only BETWEEN " · " segments */
html[data-skin="calm"] #threadChat .la-ph li .pt b { font-weight: 500; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-ph li .pt em { font-style: normal; color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-ph li .pd { font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; font-weight: 500; }
html[data-skin="calm"] #threadChat .la-ph li.p-run .pt { color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-ph li.p-warn .pi { color: var(--calm-warn-ink); }
html[data-skin="calm"] #threadChat .la-ph li.p-warn .pt,
html[data-skin="calm"] #threadChat .la-ph li.p-warn .sg { color: var(--calm-ink-2); white-space: normal; }
html[data-skin="calm"] #threadChat .la-ph li .dot5 { width: 6px; height: 6px; border-radius: 50%; background: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-ph li .hol { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--calm-hair-strong); }
html[data-skin="calm"] #threadChat .la-ph li.p-bar { display: block; padding: 1px 0 3px; }
html[data-skin="calm"] #threadChat .la-bar { height: 3px; border-radius: 2px; background: var(--calm-hair); overflow: hidden; margin: 0 42px 0 20px; }   /* = the phase text column */
html[data-skin="calm"] #threadChat .la-bar i { display: block; height: 100%; background: var(--calm-ink-2); border-radius: 2px; }
html[data-skin="calm"] #threadChat .la-open { align-self: flex-start; border: 0; background: none; padding: 6px 0; cursor: pointer; font: 600 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); }

/* footnotes: only when they add information */
html[data-skin="calm"] #threadChat .la-foot[hidden] { display: none; }
html[data-skin="calm"] #threadChat .la-foot { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px 14px; }
html[data-skin="calm"] #threadChat .la-fn { display: flex; gap: 8px; align-items: flex-start; font: 400 var(--calm-fs-meta)/1.45 var(--sans); color: var(--calm-ink-2); }
html[data-skin="calm"] #threadChat .la-fn .calm-ic { width: 14px; height: 14px; margin-top: 1px; color: var(--calm-meta); flex: none; }
html[data-skin="calm"] #threadChat .la-rfoot { margin: 2px 0 0 32px; padding-top: 6px; border-top: 1px solid var(--calm-hair); font: 500 var(--calm-fs-meta)/1.4 var(--sans); color: var(--calm-meta); }

/* reduced motion: nothing moves (the dot is static, the chevron snaps; seconds still tick) */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="calm"] #threadChat .la-hb .dot { animation: none !important; }
  html[data-skin="calm"] #threadChat .la-hb .chev { transition: none !important; }
}

/* ---------------- the sidebar live line (spec §3.6): "● Checking replies · 10 of 12 agents" ---------------- */
html[data-skin="calm"] .calm-sb .sl-row .lv { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 400 12px/1.3 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; min-width: 0; }
html[data-skin="calm"] .calm-sb .sl-row .lv i { width: 6px; height: 6px; border-radius: 50%; background: var(--calm-ink-2); flex: none; animation: calmBreath 1.2s ease-in-out infinite; }
/* the OPEN chat's dot is static — its head dot is the turn's one loop */
html[data-skin="calm"] .calm-sb .sl-row.on .lv i { animation: none; }
html[data-skin="calm"] .calm-sb .sl-row .lv span { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { html[data-skin="calm"] .calm-sb .sl-row .lv i { animation: none !important; } }