/**
 * safira-inbox.css — SGM-279. The Web Inbox.
 *
 * ── EVERY COLOUR IS A TOKEN FROM app.css ────────────────────────────────────
 *
 * Zero hex literals. The status pills use the SGM-218 `--*-text` variants rather
 * than the brand hues they are named after, because none of --primary /
 * --success / --warning meets 4.5:1 as TEXT — measured in that block at 3.54,
 * 2.73 and 1.97 over an 8% tint of themselves. Using --success for a word on a
 * --success-bg chip is the exact mistake that audit was written to stop.
 *
 * ── THE ROW IS A SENTENCE, NOT A CELL ───────────────────────────────────────
 *
 * The visitor's first question is the row's identity, so it WRAPS: no
 * text-overflow, no max-height, no line clamp. That is the whole reason this is
 * a custom row list rather than UI.table — a table column would have to bound
 * the width of the one field the operator is scanning for.
 *
 * ── LAYOUT IS RESOLUTION-AWARE (ui-design-gates Gate 0.2) ───────────────────
 *
 * The thread is two columns above 1100px and one below, and the sidebar is
 * bounded at 320px rather than left to take half a 2000px screen. Maddy runs
 * ~2000px; an unbounded two-column split there leaves a 900px-wide aside
 * holding six short facts, which reads as unfinished even though it "works".
 */

/* ── the queue ───────────────────────────────────────────────────────────── */

.sfi-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;                        /* hairline between rows, drawn by the border below */
  background: var(--border);       /* shows through the 1px gap */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sfi-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 14px;
  padding: 14px 16px 14px 0;
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.12s ease;
}

.sfi-row:hover,
.sfi-row:focus-visible {
  background: var(--bg-card-hover);
}

.sfi-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* The unread marker is a 4px rail in its own grid column, so an unread row and a
 * read one have IDENTICAL text geometry. A left border on the unread state only
 * would shift every question 4px as it was read, which turns marking things read
 * into a visible jitter down the list. */
.sfi-row-mark {
  align-self: stretch;
  background: transparent;
}

.sfi-unread .sfi-row-mark {
  background: var(--primary);
}

.sfi-unread .sfi-question {
  font-weight: 600;
}

.sfi-row-main {
  min-width: 0;                    /* lets the question wrap instead of forcing overflow */
}

.sfi-question {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
  /* No truncation — see the header. But a MEASURE, which is a different thing.
   * At 2000px an unbounded row ran a 200-character question to a single line;
   * the eye loses its place returning to the left edge somewhere past ~90. The
   * text is all still there, wrapped onto a second line instead of stretched
   * across the window. Truncation removes content; a measure only decides where
   * it breaks. */
  max-width: 92ch;
  overflow-wrap: anywhere;
}

.sfi-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.sfi-sep {
  /* Measured 2.42:1 in light and 3.02:1 in dark on --text-dim. WCAG exempts
   * purely decorative text, and a middle dot arguably qualifies — but the
   * exemption is an argument for not FIXING it, not a reason to keep it faint
   * enough to look like a rendering artefact. --text-muted costs nothing. */
  color: var(--text-muted);
}

.sfi-page {
  color: var(--primary-text);
  text-decoration: none;
}

.sfi-page:hover {
  text-decoration: underline;
}

.sfi-known {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-text);
}

.sfi-known i {
  width: 12px;
  height: 12px;
}

.sfi-row-end {
  padding-top: 1px;
}

.sfi-dim {
  /* --text-muted, NOT --text-dim. Everything wearing this class is CONTENT:
   * "no page recorded", "anonymous visitor", "not linked — no tracker cookie",
   * "(no question — the visitor opened the chat and left)". Those are the honest
   * statements the empty cases depend on, and the whole design argument for them
   * collapses if they cannot be read.
   *
   * --text-dim measured 2.95:1 in dark against --bg-card — below AA. Found only
   * because stage 6 renders the other theme; the light-theme audit that ran
   * first passed this element at 4.6:1. */
  color: var(--text-muted);
}

/* ── status pills ────────────────────────────────────────────────────────── */

.sfi-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sfi-pill-captured {
  color: var(--success-text);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.sfi-pill-booked {
  color: var(--primary-text);
  background: var(--primary-bg);
  border-color: var(--primary-border);
}

/* `active` is the default and the majority, so it is the QUIETEST of the four.
 * A colour here would put a coloured chip on every row and leave the two states
 * that matter with nothing to stand out against. */
.sfi-pill-active {
  color: var(--text-secondary);
  background: var(--bg-code);
}

.sfi-pill-closed {
  color: var(--text-muted);
  background: var(--bg-code);
}

/* ── header extras ───────────────────────────────────────────────────────── */

.sfi-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sfi-pagechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.74rem;
  text-decoration: none;
}

.sfi-pagechip:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

.sfi-pagechip span {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sfi-more {
  margin-top: 12px;
  text-align: center;
}

.sfi-empty {
  text-align: center;
  padding: 34px 20px;
}

.sfi-empty i {
  width: 26px;
  height: 26px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.sfi-empty p {
  margin: 0 0 4px;
  color: var(--text-secondary);
}

/* ── the thread ──────────────────────────────────────────────────────────── */

.sfi-thread-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .sfi-thread-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sfi-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Bounded so a long transcript stays readable on a wide screen — prose past
   * ~85 characters a line costs comprehension, and this pane is 1600px wide on
   * Maddy's display. */
  max-width: 62rem;
}

.sfi-turn {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sfi-turn-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sfi-turn-who i {
  width: 13px;
  height: 13px;
}

.sfi-bubble {
  padding: 12px 14px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.55;
  /* The message is stored as text and rendered as text — the newlines a visitor
   * typed are meaningful and are preserved rather than collapsed. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The two speakers are distinguished by SURFACE, not by side. An alignment split
 * would put the visitor's words on the right, where nothing else on this screen
 * begins, and make a transcript harder to skim than a flat one. */
.sfi-turn-visitor .sfi-bubble {
  background: var(--bg-code);
}

.sfi-turn-assistant .sfi-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.sfi-turn-foot {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* When the turn happened, which page it came from, how the answer was produced
   * and how long it took. Every one of those is a fact an operator reads, so it
   * is muted rather than dim — 2.42:1 in light and 3.02:1 in dark on --text-dim. */
  color: var(--text-muted);
  font-size: 0.7rem;
}

.sfi-turn-foot a {
  color: var(--text-muted);
  text-decoration: none;
}

.sfi-turn-foot a:hover {
  text-decoration: underline;
}

.sfi-slow {
  color: var(--warning-text);
  font-weight: 600;
}

.sfi-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sfi-cite {
  padding: 2px 8px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 0.7rem;
  text-decoration: none;
}

.sfi-cite:hover {
  text-decoration: underline;
}

/* ── the sidebar ─────────────────────────────────────────────────────────── */

.sfi-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sfi-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sfi-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sfi-fact-k {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sfi-fact-v {
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.sfi-fact-v a {
  color: var(--primary-text);
  text-decoration: none;
}

.sfi-fact-v a:hover {
  text-decoration: underline;
}

.sfi-fact-v code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-code);
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.sfi-siblings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sfi-sibling {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.8rem;
  text-decoration: none;
}

.sfi-sibling:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

/* ── the outcome control ─────────────────────────────────────────────────── */

.sfi-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sfi-status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sfi-status-select {
  min-height: 34px;                /* comfortable target; the row is the 44px one */
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.sfi-status-select:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.sfi-status-select:disabled {
  /* Disabled deliberately sits BELOW 4.5:1 — that is what disabled means, and a
   * contrast auditor flagging it would be measuring the wrong thing. */
  color: var(--text-dim);
  cursor: progress;
}