/*
 * THE CONSOLE'S SUPPORT AREAS — Cases and Returns.
 *
 * `centre.css` carries the console's tokens, its rows, its pills and its numeric utility
 * classes (`.u13` is `flex: 1`, not a margin — they were generated from inline styles when
 * the CSP banned those, and they are not a vocabulary to write new markup in). So the two
 * new areas use NAMED classes, here.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * THE ONE THING THIS FILE IS REALLY FOR
 * ────────────────────────────────────────────────────────────────────────────
 *
 * `.is-internal`. An internal note must never LOOK like a reply to the customer, because
 * sending one publicly is the mistake that cannot be taken back. The composer changes
 * colour, gains a hatched edge and changes its placeholder — three signals, because one
 * is missable at the end of a long day.
 *
 * That rule survived the 2026-09-16 redesign untouched, and deliberately: everything else
 * here got quieter, and the one place where loud is correct stayed loud.
 */

/* ── the workspace: timeline on the left, the tools on the right ──────────── */

.ws { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 1100px) { .ws { grid-template-columns: 1fr; gap: 34px; } }

/* A heading on a hairline, the same object `h2.u26` is in centre.css — the rule is an
   ::after rather than a border-bottom so it can be drawn out as the page settles. */
.ws h2 { position: relative; font-size: 15.5px; letter-spacing: -0.014em; margin: 0 0 0; padding-bottom: 13px; }
.ws h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.main.enter .ws h2::after { animation: draw 900ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: 320ms; }
.ws__right h2:not(:first-child) { margin-top: 42px; }
.ws__left h2:not(:first-child) { margin-top: 42px; }

.stack-gap { margin-top: 20px; }
.row-gap { margin-top: 12px; }

/* ── the merged timeline ──────────────────────────────────────────────────────
 *
 * It was a left border per entry — forty short vertical strips down the page, each a
 * different colour, which read as forty unrelated things rather than one account. One
 * continuous spine now, with a dot per entry: the colour that used to be the whole strip
 * is the dot, so who said what is still visible at a glance and the page is quiet.
 */
.timeline { list-style: none; margin: 20px 0 0; padding: 0 0 0 22px; position: relative; display: flex; flex-direction: column; gap: 22px; }
.timeline::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 1px; background: var(--line); transform-origin: top; }
.main.enter .timeline::before { animation: grow 1100ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: 420ms; }
.tl { position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 0; border-left: 0; }
.tl::before { content: ""; position: absolute; left: -22px; top: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--line); }
.tl__who { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tl__what { font-size: 14px; color: var(--ink-2); white-space: pre-wrap; }
.tl__what b { color: var(--ink); }
.tl[data-actor="staff"]::before { background: var(--ink); }
.tl[data-actor="customer"]::before { background: var(--muted); }
.tl[data-actor="ai"]::before { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--muted); }
/* Internal rows are visibly the desk's own, not part of what the customer read. */
.tl--internal .tl__what { background: var(--raised); border-radius: 10px; padding: 10px 14px; margin-top: 4px; }

/* ── the composer, and the note it must not be mistaken for ───────────────── */

.ws textarea, .lbl textarea, .lbl input, .sel {
  font: inherit; width: 100%; margin-top: 8px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--ground); color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.ws textarea:focus, .lbl textarea:focus, .lbl input:focus, .sel:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-edge);
}
.ws textarea::placeholder, .lbl input::placeholder { color: var(--muted); }
.ws textarea { min-height: 6.5rem; resize: vertical; }
.lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 16px; }
.lbl:first-child { margin-top: 0; }
/* A select inside a grey panel keeps the white ground the inputs have. */
.panel .sel, .panel .lbl input, .panel .lbl textarea, .panel textarea { background: var(--ground); }

textarea.is-internal {
  background: #FFFBEA;
  border-color: #E8C86A;
  border-left-width: 6px;
  border-left-style: double;
}
textarea.is-internal::placeholder { color: #8A6D1F; }

/* ── the flow map ─────────────────────────────────────────────────────────── */

.flowmap { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.flowmap li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 12px; border-radius: 9px; color: var(--muted);
}
.flowmap li[data-state="done"] { color: var(--ink-2); background: none; }
.flowmap li[data-state="current"] { color: var(--ink); background: var(--ground); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.fm__id { font-family: var(--mono); font-size: 11.5px; color: var(--muted); min-width: 9rem; flex: none; }
.fm__label { flex: 1; min-width: 0; }

/* ── the handover package ─────────────────────────────────────────────────────
   It is already the one thing on the page that should stop you. `.panel` gives it a
   surface of its own now, so the accent stripe down its left edge was a second way of
   saying the same thing — and the only other place on the page wearing that colour. */
.panel.brief { border-left: 0; margin-bottom: 26px; }
.panel.brief h4 { font-size: 13px; color: var(--muted); font-weight: 500; margin: 20px 0 8px; }
.panel.brief .kv { grid-template-columns: max-content 1fr; gap: 9px 20px; }
@media (min-width: 900px) { .panel.brief .kv { grid-template-columns: max-content 1fr max-content 1fr; } }
.panel.brief .generated {
  margin: 20px 0 0; padding: 16px 0 0; background: none; border-top: 1px solid var(--line);
  border-radius: 0; font-size: 13.5px; color: var(--ink-2);
}

.items { margin: 0; padding-left: 0; list-style: none; font-size: 14px; display: flex; flex-direction: column; }
.items li { color: var(--ink-2); padding: 11px 0; }
.items li + li { border-top: 1px solid var(--hair); }
.items .detail { display: block; font-size: 12.5px; color: var(--muted); }