/* Support Console — dark-first, Linear-grade.
   Two token layers:
     1. neutral shell (fixed)  — warm-gray charcoal, hairline borders
     2. workspace accent       — set at runtime by applyBrand(); used at ~5% coverage
   Discipline: accent ONLY on primary buttons, active nav, focus rings, links,
   status/unread dots. Everything else is neutral. */

:root {
  /* accent — electric blue (overridden per-workspace by applyBrand) */
  --accent: #3B82F6;
  --accent-hover: color-mix(in srgb, var(--accent) 85%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --on-accent: #FFFFFF;

  /* neutral shell — DARK (default). Cool graphite/slate, ZERO green tint. */
  --bg: #0A0B0E;
  --surface: #121319;
  --surface-2: #191B22;
  --surface-3: #22242D;
  --border: #212430;
  --border-strong: #323643;
  --text: #E9EBF1;
  --text-2: #969BAA;
  --text-3: #5D6270;

  /* broader functional palette — lanes each get a hue, all distinct from accent */
  --c-comments: #38BDF8;
  --c-messenger: #7C8AFF;
  --c-ig: #C173E8;
  --c-email: #35BBB0;

  /* status + semantics */
  --st-open: #5A9BE6;
  --st-pending: #E0A63C;
  --st-resolved: #3FBE86;
  --danger: #F0736B;
  --warn: #E0A63C;

  --radius: 8px;
  --radius-lg: 11px;
  --shadow-pop: 0 10px 34px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --ease: cubic-bezier(.32,.72,.35,1);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --accent: var(--accent-light, #2563EB);
    --accent-hover: color-mix(in srgb, var(--accent) 90%, black);
    --on-accent: #FFFFFF;
    --bg: #F6F7F9;
    --surface: #FFFFFF;
    --surface-2: #F0F1F5;
    --surface-3: #E7E9EF;
    --border: #E5E7EE;
    --border-strong: #D2D6E0;
    --text: #15171E;
    --text-2: #555B69;
    --text-3: #868C9B;
    --c-comments: #0C9CD4;
    --c-messenger: #5661E6;
    --c-ig: #A94FD0;
    --c-email: #1E9E94;
    --st-open: #3B7FD1;
    --st-pending: #C4892A;
    --st-resolved: #1FA96E;
    --danger: #DB5A52;
    --shadow-pop: 0 12px 38px rgba(20,22,30,.14), 0 1px 3px rgba(20,22,30,.08);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1, "cv11" 1;
  background: var(--bg); color: var(--text);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
.ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico-sm { width: 14px; height: 14px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring); border-radius: 6px; }

.num { font-variant-numeric: tabular-nums; }

/* ------------------------------ login ------------------------------ */
.login-wrap {
  height: 100%; display: grid; place-items: center;
  background:
    radial-gradient(900px 420px at 50% -8%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.login-card {
  width: 356px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 34px 32px 30px;
  box-shadow: var(--shadow-pop);
}
.login-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 60%, black));
  display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: 16px;
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}
.login-logo h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.login-logo span { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 1px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 11.5px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; letter-spacing: .01em; }
.field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); outline: none; transition: border-color .14s, box-shadow .14s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* The first checkbox in this app (2026-08-08, the undo-window switch). The
   generic `.field input` above stretches inputs to full width, which turns a
   checkbox into a giant square — so the box is sized back down and the label
   sits beside it instead of above it. */
.checkbox-field label {
  display: flex; align-items: center; gap: 9px; margin-bottom: 0;
  font-size: 13px; color: var(--text-1); cursor: pointer;
}
.checkbox-field input[type="checkbox"] {
  width: 16px; height: 16px; flex: none; margin: 0; padding: 0;
  accent-color: var(--accent); cursor: pointer;
}
.checkbox-field input[type="checkbox"]:disabled,
.checkbox-field input[type="checkbox"]:disabled + * { cursor: not-allowed; opacity: .55; }
/* The rail's category picker — multi-select checkboxes. Scrolls at 18 tags
   rather than pushing the rail past the fold, and every label truncates so a
   long tag name can never widen the rail. */
/* The collapsible header. The whole word "Category" is the hit target, not a
   tiny chevron — pressing the label is what Maycol described doing. */
.rail-section { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rail-toggle {
  display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 2px 0; cursor: pointer; background: none; border: 0;
}
.rail-toggle:hover { color: var(--text-2); }
.rail-toggle svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .16s var(--ease); transform: rotate(-90deg); }
.rail-toggle.open svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .rail-toggle svg { transition: none; } }
/* How many categories are filtering RIGHT NOW, readable with the panel shut. */
.tag-badge {
  background: var(--accent); color: var(--on-accent); border-radius: 9px;
  padding: 0 6px; font-size: 10px; line-height: 15px; font-weight: 700; flex-shrink: 0;
}
.tag-filter { max-height: 232px; overflow-y: auto; margin: 2px 0 4px; }
.tag-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px;
  font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none;
}
.tag-opt:hover { background: var(--surface-2); color: var(--text); }
.tag-opt.on { color: var(--text); font-weight: 550; }
.tag-opt input { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin: 0; }
.tag-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-n { color: var(--text-3); font-size: 11px; flex-shrink: 0; }
.link-clear {
  font-size: 10.5px; font-weight: 500; color: var(--accent);
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}
.link-clear:hover { text-decoration: underline; }
/* Who sent the last message, in the list preview. Quiet enough that the
   message still reads first. */
.pre-who { color: var(--text-3); font-weight: 600; }

/* ⚠️ A BUTTON NEVER WRAPS ITS LABEL. Standing rule, from Maycol 2026-08-08:
   "Press R again" broke onto three lines inside Resolve and blew the toolbar
   row open. A control's label is not prose — if it does not fit, the label is
   too long or the button is too narrow, and either way wrapping hides the
   problem behind a mangled layout. This applies app-wide, not just to that one
   button. (.qr-item is deliberately NOT in here: it is a list row, not a
   control label, and its content is meant to flow.) */
.btn-primary, .btn-ghost, .btn-resolve, .btn-send { white-space: nowrap; }

.btn-primary {
  width: 100%; padding: 10px; border-radius: var(--radius); background: var(--accent);
  color: var(--on-accent); font-weight: 600; letter-spacing: .01em; margin-top: 6px;
  transition: background .14s, transform .04s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(.5px); }
.login-error { color: var(--danger); font-size: 12.5px; margin-top: 12px; min-height: 17px; }

/* ------------------------------ shell ------------------------------ */
.shell { display: grid; grid-template-columns: 232px 384px 1fr; height: 100%; }

/* left rail */
.rail {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 1px; overflow-y: auto;
}
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.rail-brand .logo-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
.rail-brand b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.rail-brand span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: -1px; }
.rail h5 {
  margin: 16px 10px 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); font-weight: 600;
}
.rail-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius);
  color: var(--text-2); font-weight: 500; text-align: left; width: 100%;
  transition: background .12s, color .12s;
}
.rail-item .ico { color: var(--text-3); transition: color .12s; }
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item:hover .ico { color: var(--lane-c, var(--text-2)); }
.rail-item.active { color: var(--text); background: var(--surface-2); }
.rail-item.active .ico { color: var(--lane-c, var(--accent)); }
/* broader color: each lane carries its own hue on the icon */
.rail-item.lane-comments { --lane-c: var(--c-comments); }
.rail-item.lane-messenger { --lane-c: var(--c-messenger); }
.rail-item.lane-ig { --lane-c: var(--c-ig); }
.rail-item.lane-email { --lane-c: var(--c-email); }
.rail-item.lane-comments.active::before { background: var(--c-comments); }
.rail-item.lane-messenger.active::before { background: var(--c-messenger); }
.rail-item.lane-ig.active::before { background: var(--c-ig); }
.rail-item.lane-email.active::before { background: var(--c-email); }
.rail-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.rail-item .label { flex: 1; }
.rail-item .count {
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 550;
}
.rail-item.active .count { color: var(--text-2); }
.rail-note { padding: 8px 10px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.rail-note .dot-on { color: var(--accent); } .rail-note .dot-off { color: var(--text-3); }
.rail-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3);
  color: var(--text); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.rail-footer b { font-size: 12.5px; display: block; font-weight: 550; }
.rail-footer .role { font-size: 11px; color: var(--text-3); text-transform: capitalize; }
.rail-footer .who { flex: 1; min-width: 0; }
.icon-only { padding: 6px; border-radius: 7px; color: var(--text-3); }
.icon-only:hover { background: var(--surface-2); color: var(--text); }

/* conversation list */
.list-pane { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.list-head { padding: 15px 16px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.list-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.list-head h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .ico { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.search {
  width: 100%; padding: 8px 11px 8px 33px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); outline: none; font-size: 12.5px; transition: border-color .14s, box-shadow .14s;
}
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.search::placeholder { color: var(--text-3); }
.segmented {
  display: flex; gap: 2px; margin-top: 10px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px;
}
.seg {
  flex: 1; font-size: 11.5px; font-weight: 550; padding: 5px 8px; border-radius: 7px;
  color: var(--text-2); transition: background .12s, color .12s;
}
.seg:hover { color: var(--text); }
.seg.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }

.conv-list { flex: 1; overflow-y: auto; }
.conv-item {
  position: relative; display: block; width: 100%; text-align: left; padding: 11px 16px 11px 15px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.conv-item:hover { background: var(--surface); }
.conv-item.sel { background: var(--surface); }
.conv-item.sel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
}
.conv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.conv-emoji { font-size: 14px; line-height: 1; }
.conv-title { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.conv-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.conv-preview {
  font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 6px; padding-left: 22px;
}
.conv-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-left: 22px; }
.sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sdot.open { background: var(--st-open); }
.sdot.pending { background: var(--st-pending); }
.sdot.resolved { background: var(--st-resolved); }
.metatxt { font-size: 11.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.metatxt .ldot { width: 6px; height: 6px; border-radius: 50%; background: var(--lane-c, var(--text-3)); }
.conv-item.lane-comments { --lane-c: var(--c-comments); }
.conv-item.lane-messenger { --lane-c: var(--c-messenger); }
.conv-item.lane-ig { --lane-c: var(--c-ig); }
.conv-item.lane-email { --lane-c: var(--c-email); }
.chip {
  font-size: 11px; font-weight: 500; padding: 1.5px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.chip.flag { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.chip.prio { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.chip.st-pending { color: var(--st-pending); border-color: color-mix(in srgb, var(--st-pending) 30%, var(--border)); }
.chip.st-resolved { color: var(--st-resolved); border-color: color-mix(in srgb, var(--st-resolved) 30%, var(--border)); }
.mini-av { width: 17px; height: 17px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong);
  display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 600; color: var(--text-2); }
.empty { padding: 64px 24px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.6; }

/* thread pane */
.thread-pane { min-width: 0; height: 100vh; }
.thread-with-details { display: grid; grid-template-columns: 1fr 280px; height: 100%; min-height: 0; }
.thread-main { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; }
.thread-head {
  padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 12px;
}
.thread-head-info { flex: 1; min-width: 0; }
.thread-head h3 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.thread-head .sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.thread-controls { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.select {
  padding: 6px 26px 6px 10px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364665F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  font-size: 12px; color: var(--text-2); outline: none; appearance: none; text-transform: capitalize;
}
.select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-resolve {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 7px; background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 12.5px; transition: background .14s;
}
.btn-resolve:hover { background: var(--accent-hover); }
/* Resolve is armed and waiting for the second R (2026-08-08). It has to read
   as a QUESTION, not as a done state — hollow and outlined, never filled. */
.btn-resolve.armed, .btn-ghost.armed {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--accent);
  animation: resolvePulse 1.1s var(--ease) infinite;
}
@keyframes resolvePulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 4px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) { .btn-resolve.armed, .btn-ghost.armed { animation: none; } }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 7px; border: 1px solid var(--border-strong);
  font-weight: 550; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); transition: all .12s;
}
.btn-ghost:hover { border-color: var(--text-3); color: var(--text); }
.btn-ghost.danger:hover { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.btn-ghost.icon { padding: 7px; }

.thread-body { overflow-y: auto; padding: 24px 26px; display: flex; flex-direction: column; gap: 3px; background: var(--bg); min-width: 0; }
/* ⚠️ LOAD-BEARING (Maycol, 2026-08-08: "the text as it's holding is cropped").
   This is a column flex container that SCROLLS, so in a long thread it is
   over-full and flexbox squashes its children. Ordinary bubbles survive on
   min-height:auto, which floors them at their own content height. But
   `overflow: hidden` sets that automatic minimum to ZERO — so .msg.pending
   .undoable, which needs overflow:hidden to clip its countdown bar to the
   rounded corner, was the one child flexbox was free to crush: measured 80px
   of content rendered in 20px of box, text clipped. It un-cropped the instant
   the send landed only because `undoable` came off and the floor came back.
   Three scroll fixes chased this before it was measured — it was never scroll.
   Nothing in a message list should ever shrink. */
.thread-body > * { flex-shrink: 0; }
.msg { max-width: 640px; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.msg.in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: var(--surface-3); border: 1px solid var(--border-strong); border-bottom-right-radius: 5px; }
.msg.system { align-self: center; background: none; color: var(--text-3); font-size: 11.5px; padding: 4px; }
.msg.deleted { opacity: .5; font-style: italic; font-size: 12.5px; }
.msg-meta { font-size: 10.5px; margin-top: 4px; color: var(--text-3); }
.msg.out .msg-meta { text-align: right; }

/* ---- THE AI DRAFT CARD (2026-08-20) -------------------------------------
   Sits on top of the composer, sharing its border so the two read as one
   block: the suggestion and the box it goes into. Muted on purpose — it is a
   suggestion, and it must never out-shout the customer's own words above it. */
.draft-card {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 11px 22px 0;
}
.draft-card .draft-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-3); margin-bottom: 6px;
}
.draft-badge {
  font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 2px 8px;
}
.draft-win { margin-left: auto; }
.draft-card.urgent .draft-win { color: #F59E0B; font-weight: 600; }
.draft-card.closed .draft-win { color: #EF4444; font-weight: 600; }
.draft-card.closed .draft-text { opacity: .72; }
.draft-x {
  margin-left: 4px; color: var(--text-3); font-size: 12px; line-height: 1;
  padding: 3px 5px; border-radius: 6px;
}
.draft-card:not(.urgent) .draft-x { margin-left: auto; }
.draft-x:hover { background: var(--surface-2); color: var(--text); }
.draft-text {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: 10px; padding: 9px 12px; white-space: pre-wrap;
  /* The card is a preview, not the document. A long draft scrolls inside its
     own box rather than pushing the customer's message off the screen. */
  max-height: 26vh; overflow-y: auto;
}
.draft-acts { display: flex; align-items: center; gap: 10px; padding: 7px 0 0; }
.draft-use, .draft-copy, .draft-open {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
}
.draft-open { color: var(--accent); text-decoration: none; }
.draft-open:hover { background: var(--accent-soft); }
/* The way out of a closed window is the loudest thing on the card. */
.draft-card.closed .draft-open { background: var(--accent); color: var(--on-accent); }
.open-native {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
  text-decoration: none; color: var(--text-2); white-space: nowrap;
}
.open-native:hover { background: var(--surface-2); color: var(--text); }
.draft-note { font-size: 11px; color: var(--text-3); }
/* The card already drew the divider — a second one between them looks broken. */
.draft-card + .composer { border-top: none; padding-top: 9px; }

.composer { border-top: 1px solid var(--border); background: var(--surface); padding: 13px 22px 15px; }
.composer-row { display: flex; gap: 10px; align-items: flex-end; position: relative; }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 13px; background: var(--surface-2); outline: none; min-height: 42px;
  /* ⚠️ The height is driven by autoGrow() in JS, which caps at 34vh. This
     max-height is only the no-JS floor — a hard 150px here used to CLAMP the
     grown box and re-hide the end of a pasted draft. */
  max-height: 34vh;
  transition: border-color .14s, box-shadow .14s;
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.composer textarea::placeholder { color: var(--text-3); }
.btn-send {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; transition: background .14s;
}
.btn-send:hover { background: var(--accent-hover); }
.btn-send:disabled { opacity: .45; cursor: default; }
.gate-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--warn); margin-top: 8px; }

.qr-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 64px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: var(--shadow-pop); max-height: 260px; overflow-y: auto; z-index: 10; padding: 4px;
}
.qr-item { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 7px; }
.qr-item:hover, .qr-item.hl { background: var(--surface-2); }
.qr-item b { font-size: 12px; color: var(--accent); font-weight: 600; }
.qr-item span { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* details */
/* ---- Assignee + Priority, now in the details column (2026-08-20) ---------
   Rendered twice, exactly one shown: the column is hidden under 1040px, and
   the person working the queue on a phone still has to be able to assign. */
.controls-narrow { display: none; }
.wf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wf-label { font-size: 12.5px; color: var(--text-2); flex: 0 0 62px; }
.wf-row .select { flex: 1; min-width: 0; text-transform: none; }

.details { border-left: 1px solid var(--border); background: var(--surface); padding: 20px 18px; overflow-y: auto; }
.details section { margin-bottom: 22px; }
.details h4 { margin: 0 0 9px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 600; }
.details .kv { font-size: 12.5px; margin: 5px 0; color: var(--text-2); display: flex; justify-content: space-between; gap: 10px; }
.details .kv b { color: var(--text); font-weight: 550; text-align: right; }
.details .name-lg { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.details .email { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.flag-row { color: var(--danger) !important; }
.note { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 7px; color: var(--text); }
.note .who { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.note-input { display: flex; gap: 6px; margin-top: 8px; }
.note-input input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface-2); outline: none; font-size: 12.5px;
}
.note-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.tag-chip { display: inline-block; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; color: var(--text-2); }

.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 16px; font-size: 13px;
  box-shadow: var(--shadow-pop); z-index: 100; animation: toast-in .2s var(--ease);
  display: flex; align-items: center; gap: 9px;
}
.toast::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.toast.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); }
.toast.error::before { background: var(--danger); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1040px) {
  .shell { grid-template-columns: 60px 320px 1fr; }
  /* ⚠️ .rail-scoped on purpose. The unscoped version also hid the labels and
     counts inside the INBOX filter column (.filter-col reuses .rail-item),
     leaving the phone's lane picker as seven bare icons (QA, 2026-08-20). */
  .rail-brand b, .rail-brand span, .rail .rail-item .label, .rail .rail-item .count, .rail h5, .rail-note, .rail-footer .who { display: none; }
  .rail .rail-item { justify-content: center; padding: 9px; }
  .rail-footer { justify-content: center; }
  .thread-with-details { grid-template-columns: 1fr; }
  .details { display: none; }
  /* The column that carries Assignee and Priority is gone at this width, so
     the header copy takes over. Never both — they share no id, but they would
     look like a duplicated control. */
  .controls-narrow { display: flex; gap: 6px; flex: 1; min-width: 0; }
  .controls-narrow .wf-row { margin-bottom: 0; flex: 1; min-width: 0; }
  .controls-narrow .wf-label { display: none; }
}

/* ---- per-comment actions (#62b, RE-DONE 2026-08-08) ----
   ⚠️ The hover bar is GONE, and so is the 34px gap it reserved above every
   comment. Maycol asked for comments to use the same ⋯ the DMs use, which is
   the same call he made on the DM side a day earlier ("that will get
   annoying"). One affordance across both lanes: a quiet permanent ⋯ beside the
   bubble, everything behind it, double-tap still hearts without opening
   anything. Comment bubbles now carry `has-react` too, so they inherit the DM
   dot positioning verbatim rather than owning a second copy of it. */
.msg.has-cmt { position: relative; cursor: default; }

/* DM reactions (2026-08-07, revised the same evening).
   ⚠️ NO hover bar and NO permanently reserved gap. Maycol: a bar that springs
   up every time the pointer crosses a message "will get annoying", and the
   34px of empty space it needed was above EVERY customer DM whether or not
   anyone ever reacted. The affordance is now a quiet ⋯ beside the bubble, and
   vertical space is reserved ONLY while the picker is actually open. */
.msg.has-react { position: relative; cursor: default; }
/* ⚠️ NO margin shift when the picker opens (Maycol, 2026-08-07: "after a few
   times it bugs out"). Reserving 40px pushed the message — and the ⋯ he had
   just clicked — down and out from under the pointer, so the next click landed
   on whatever slid into its place. A popup overlays; it does not move the page. */
.msg.has-react .react-picker { z-index: 20; }
/* The first message has nothing above it to overlay, and the scroll container
   would clip the picker, so that one opens downwards instead. */
.thread-body .msg.has-react:first-child .react-picker { top: auto; bottom: -34px; }
/* A message carrying a reaction needs room for the chip that hangs off its
   corner, or the chip lands on top of the NEXT message. */
.msg.has-reaction { margin-bottom: 11px; }
.react-dots {
  position: absolute; top: 50%; right: -24px; transform: translateY(-50%);
  border: 0; background: none; color: var(--text-2);
  font-size: 15px; line-height: 1; letter-spacing: .5px;
  padding: 1px 4px; border-radius: 6px; cursor: pointer;
  opacity: .3; transition: opacity .12s ease, background .1s ease;
}
/* Visible enough to find, quiet enough to ignore — it brightens when the
   pointer is anywhere near the message, not only dead on the dots. */
.msg.has-react:hover .react-dots { opacity: .75; }
.react-dots:hover { opacity: 1; background: var(--surface-3); }
.react-dots:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
/* An outbound bubble hugs the right edge, so its dots go on the left instead. */
.msg.out .react-dots { right: auto; left: -24px; }
/* Not hover-gated: once open the picker stays until a choice or a click away. */
.react-picker {
  position: absolute; top: -34px; left: 0; display: flex; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 4px 5px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
  white-space: nowrap; z-index: 7;
}
.msg.out .react-picker { left: auto; right: 0; }
.react-opt {
  border: 0; background: none; font-size: 17px; line-height: 1;
  padding: 4px 5px; border-radius: 7px; cursor: pointer;
  transition: background .1s ease, transform .08s ease;
}
.react-opt:hover { background: var(--surface-3); transform: scale(1.22); }
.react-opt:active { transform: scale(.9); }
.react-opt.on { background: var(--accent-ring); }
/* The reaction that IS on the message, shown on the bubble itself */
.msg-reaction {
  position: absolute; bottom: -9px; right: 8px; font-size: 13px; line-height: 1;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 1px 5px; box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.msg.out .msg-reaction { right: auto; left: 8px; }

/* ---- Gesture acknowledgement (2026-08-07) ----
   Reacting is a round trip to Meta. These two animations are the whole answer
   to "did that go through?" — they fire on the gesture, BEFORE the network,
   so the delay is never mistaken for a missed tap. */
@keyframes msg-tap {
  0%   { transform: scale(1); }
  45%  { transform: scale(.972); }
  100% { transform: scale(1); }
}
.msg.tapped { animation: msg-tap .18s ease; }
/* Overshoot on the way in — it reads as the emoji "landing" on the bubble
   rather than simply being switched on. */
@keyframes chip-pop {
  0%   { transform: scale(.35); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.msg-reaction.pop { animation: chip-pop .26s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) {
  .msg.tapped, .msg-reaction.pop { animation: none; }
}
/* ---- Comment combo menu (2026-08-20 v3: one clean row) ----
   Meta allows exactly ONE page reaction on a Facebook comment (the 👍 Like)
   and none on Instagram, so the reactions-on-top layout collapsed into a
   single evenly-spaced row: 👍 Like · 🙈 Hide · 🗑 Delete · ↗ View (Maycol:
   "clean and normal"). Reuses .react-picker's shell; like the 08-08 menu it
   opens BELOW the bubble and PUSHES the thread (margin below), never
   overlays the text — that rule has survived three rebuilds for a reason.
   Hidden/deleted state does NOT live in here: the flags on the bubble carry
   it with the menu closed. */
.react-picker.cmt-combo {
  flex-direction: row; align-items: stretch; gap: 4px; padding: 4px;
  top: calc(100% + 6px); bottom: auto; min-width: 0;
}
/* The first-message rule flips the emoji picker downward; the combo is
   already downward, so that override must not fight it. */
.thread-body .msg.has-react:first-child .react-picker.cmt-combo { top: calc(100% + 6px); bottom: auto; }
.cmt-combo .cmt-opt { flex: 1 1 auto; justify-content: center; }
.cmt-combo .cmt-opt.on { background: var(--accent-ring); color: var(--text); }
.cmt-opt {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); white-space: nowrap; text-decoration: none;
  transition: background .1s, color .1s;
}
.cmt-opt:hover { background: var(--surface-2); color: var(--text); }
.cmt-opt:active { transform: scale(.97); }
.cmt-opt.danger:hover { background: rgba(239,68,68,.12); color: #ef4444; }
/* The Unhide row on a hidden comment is the loudest thing in the menu on
   purpose — it is the one control a wrongly hidden real customer depends on. */
.cmt-opt.unhide { color: #d97706; }
.cmt-opt.unhide:hover { background: rgba(217,119,6,.12); color: #b45309; }
/* ⚠️ NOT-A-BUTTON (2026-08-25). A capability we genuinely do not have reads
   as an absence, and an absence reads as a bug — Sweet reported View and Like
   as "gone" when one had no link and the other has no Instagram edge at all.
   These say WHICH, and they must never look pressable: no hover, no active
   scale, cursor stays default. */
.cmt-opt.na {
  color: var(--text-3, #9aa0a6); font-weight: 400; cursor: default; opacity: .75;
}
.cmt-opt.na:hover { background: none; color: var(--text-3, #9aa0a6); }
.cmt-opt.na:active { transform: none; }
.cmt-opt.na.blocked { color: #b45309; opacity: .9; }
/* The full sentence, under the menu — the tooltip is for the curious, this is
   for the person who just wanted to know why Hide did nothing. */
.cmt-blocked-why {
  margin: 6px 0 0; padding: 6px 9px; border-radius: 7px;
  background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.28);
  color: #b45309; font-size: 12px; line-height: 1.45; max-width: 460px;
}
/* Room for the open combo below the bubble — one row, one height. */
.msg.has-cmt.picker-open { margin-bottom: 52px; }

/* Moderation state, on the bubble, impossible to miss. */
.msg-status { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.st-flag {
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px;
  border: 1px solid var(--border-strong); color: var(--text-2);
}
.st-flag.hiddenc { border-color: rgba(217,119,6,.55); background: rgba(217,119,6,.14); color: #d97706; }
.st-flag.likedc { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); color: var(--text-2); }
.st-flag.deletedc { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: rgba(239,68,68,.1); color: #ef4444; }
/* A hidden comment reads as switched off: dashed amber, muted text — by color,
   never opacity, so the state strip and the Unhide button stay full strength. */
.msg.is-hidden {
  border: 1px dashed rgba(217,119,6,.5);
  background: color-mix(in srgb, var(--surface) 94%, #d97706 6%);
  color: var(--text-2);
}
.sub-hidden { color: #d97706; font-weight: 600; }
.chip.st-hiddenc { border-color: rgba(217,119,6,.55); color: #d97706; }

/* Visibility + sort rows. Same .segmented shell as the status row so the
   column reads as one control family.
   ⚠️ STACKED, never side by side (Maycol, 2026-08-20, with a screenshot:
   "the hidden text is cropped off"). Two groups sharing one row left
   "🙈 Hidden" half its width — each group gets the full column width, like
   the status row above them. */
/* ---- FILTER + SORT, together in the rail (2026-08-20) -------------------
   The visibility and order controls were two segmented rows in the list
   header (.filter-row2, now gone). Maycol: "I want to have the filter and the
   sorting together in the same place" — so they sit under FILTER as
   dropdowns, one choice per dropdown, and the queue gets its rows back. */
/* ---- FILTER & SORT, on one row above the queue (2026-08-20) -------------
   It lived in the 184px lane rail for exactly one deploy. Maycol: "I don't
   like it being placed on the lanes column. It looks bad and looks crunched
   up." He was right — three stacked controls in a rail that narrow is a
   column of cramped boxes. Here they share a single row under the search,
   which is the other thing that narrows this same list.

   ⚠️ EQUAL THIRDS, NEVER WRAPPING. First pass let them size to their content,
   so "All comments" ate the row and "Newest" fell to a second line half as
   wide as the others (his screenshot). `flex: 1 1 0` makes every control take
   the same share of whatever width there is, so the row stays one row at any
   pane size and the labels shorten instead of the layout breaking. */
.fs-row { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; }
.fs-row > * { flex: 1 1 0; min-width: 0; }
/* Category carries a chevron and sometimes a count, so an equal third clipped
   its own label. It gets the space its content needs and the two dropdowns
   share what is left — still even, still one row. */
.fs-row > .fs-btn { flex: 0 1 auto; }
.fs-row > .fs-clear { flex: 0 0 auto; }

/* One shape for all three: same height, radius, border, type size. A button
   and a <select> next to each other only read as siblings if nothing but
   their content differs. */
.fs-btn, .fs-row .fs-sel {
  /* min-height, not height: the box grows if the type ever gets bigger (it
     does — the iOS zoom law forces 16px on phones), instead of cropping the
     descenders off "Category" and "Newest". */
  min-height: 32px; padding: 5px 10px; font-size: 11.5px; line-height: 1.35;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
}
.fs-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; }
.fs-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-btn:hover, .fs-row .fs-sel:hover { color: var(--text); border-color: var(--border-strong); }
.fs-btn.on { color: var(--text); border-color: var(--accent-line); }
.fs-btn svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform .16s var(--ease); transform: rotate(-90deg); }
.fs-btn.open svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .fs-btn svg { transition: none; } }
.fs-row .fs-sel { text-transform: none; max-width: none; }
.fs-clear { font-size: 11.5px; color: var(--text-3); padding: 5px 9px; min-height: 32px; border-radius: 8px; }
.fs-clear:hover { background: var(--surface-2); color: var(--text); }

/* The status row above shares the same rhythm — equal segments, same height,
   same gap to the row below it, so the header reads as one block. */
.list-head .segmented { margin-top: 8px; }
.list-head .segmented .seg { flex: 1 1 0; min-width: 0; text-align: center; }

/* Open, the categories drop UNDER the row rather than inside it — a checkbox
   list inline would push the search and the status row around every time. */
.list-head .tag-filter { max-height: 210px; margin-top: 6px; }

/* Day separators + a breath between speaker turns (2026-08-20). */
.day-sep { align-self: center; margin: 12px 0 6px; }
.day-sep span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: var(--surface);
}
.msg.grp-start { margin-top: 9px; }
/* activity feed dots for moderation actions */
.feed-kind.kind-action { background: var(--accent); }
.feed-kind.kind-action.kind-fail { background: #ef4444; }

/* ---- collapsible activity sections ---- */
.panel.acc { padding: 0; overflow: hidden; }
.acc-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; text-align: left;
}
.acc-head:hover { background: var(--surface-2); }
.acc-head h3 { font-size: 13.5px; margin: 0; flex: 1; }
.acc-chev { color: var(--text-3); font-size: 11px; width: 12px; }
.acc-body { padding: 4px 16px 14px; border-top: 1px solid var(--border); }
.acc-sub {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 12px 0 6px;
}
.feed-more { margin-top: 8px; }

/* ---- send feedback (2026-08-06: the double-send incident) ---- */
.spin {
  display: inline-block; width: 11px; height: 11px; margin-right: 6px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -1px;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-send[disabled] { opacity: .72; cursor: default; }
.composer textarea[disabled] { opacity: .6; cursor: default; }
/* the message you just sent, before the server confirms it */
.msg.pending { opacity: .55; border-style: dashed; }
.msg.pending .msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* ---- The undo window (2026-08-08) ----
   A sent DM cannot be unsent — Meta refuses DELETE on a message id with
   (#10) permission denied, proven live. So the reply is held for UNDO_MS in
   inbox.js and this is what that hold looks like. The message reads as
   ALMOST-sent rather than sending: fuller than the spinner state, because it
   is still yours to take back. */
.msg.pending.undoable { opacity: .8; position: relative; overflow: hidden; }
/* The Undo control lives on the COMPOSER, not on the bubble — the bubble
   scrolls away, the composer never does. It replaces Send for the duration,
   so it lands exactly where the hand already is. */
.btn-send.btn-undo {
  position: relative; overflow: hidden;
  background: var(--surface-3); color: var(--text-1);
  border: 1px solid var(--accent); cursor: pointer;
}
.btn-send.btn-undo:hover { background: var(--accent-soft); }
.btn-send.btn-undo:active { transform: scale(.97); }
.undo-bar-btn {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--accent);
  animation: undo-drain 3s linear forwards;
}
@media (prefers-reduced-motion: reduce) { .undo-bar-btn { animation: none; } }
/* ⚠️ The bar IS the countdown — its duration must match UNDO_MS in inbox.js.
   Pure CSS on purpose: a JS ticker would re-render the thread three times a
   second and fight whatever the agent is doing. */
.undo-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 0 2px 2px 0;
  animation: undo-drain 3s linear forwards;
}
@keyframes undo-drain { from { width: 100%; } to { width: 0%; } }
@media (prefers-reduced-motion: reduce) {
  .undo-bar { animation: none; width: 100%; opacity: .5; }
}
/* and the moment it lands */
.msg.sent-flash { animation: sentFlash .85s var(--ease); }
@keyframes sentFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); transform: translateY(1px); }
  40%  { box-shadow: 0 0 0 5px var(--accent-soft); transform: none; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 1.6s; }
  .msg.sent-flash { animation: none; }
}

/* ---- forgot-password disclosure on the sign-in card (2026-08-20) --------- */
.login-forgot {
  display: block; width: 100%; margin-top: 12px; padding: 6px;
  font-size: 12px; color: var(--text-3); border-radius: 6px;
}
.login-forgot:hover { color: var(--text-2); background: var(--surface-2); }
.login-help {
  margin-top: 8px; padding: 11px 12px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.65; color: var(--text-2);
}
.login-help b { color: var(--text); font-weight: 600; }
.login-help code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* Emailed reset codes (2026-08-24) — the Forgot flow inside the login card.
   The inputs sit outside a .field wrapper, so they borrow its styling here. */
#li-reset input {
  width: 100%; margin-top: 8px; display: block;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px;
}
#li-reset input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
#li-reset .btn-primary.sm { margin-top: 10px; width: 100%; }
#li-reset-code b { color: var(--text); }

/* ⚠️ SET ASIDE (2026-08-25). Threads Replyski can neither hide nor reply to are
   pulled out of the queue so they cannot be mistaken for work Sweet owes an
   answer. Anyone who still reaches one — by search, by link — sees why first. */
.parked-banner {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 9px;
  background: rgba(100,116,139,.10); border: 1px solid rgba(100,116,139,.30);
  display: grid; gap: 3px;
}
.parked-banner b { font-size: 12.5px; color: var(--text); }
.parked-banner span { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.rail-item.parked-view .label { opacity: .85; }

/* ---- NEEDS A LIKE (2026-08-25) ------------------------------------------
   The queue Maycol asked for: "tag all of those comments that need to be liked
   and tell her to go and like them." Nothing here likes anything on its own —
   a page like publishes instantly under the brand's name, so the decision stays
   with the person. See src/console/likequeue.js.
   Built on --warn rather than literal ambers so it survives the light theme;
   this file is dark-first with a light override and hardcoded hex does not
   cross that line. */
.rail-item.like-view .label { opacity: .85; }
/* The one comment in the thread that is waiting. Marked with a warm edge rather
   than a colour swap: the bubble still has to read as the customer's words, and
   a filled amber background would say "problem" about a compliment. */
.msg.wants-like { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn) 65%, transparent); }
/* Out of the ⋯ menu and onto the bubble. Three taps x 239 comments is a queue
   nobody works; one tap is a queue that empties. */
.cmt-wants-like {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  transition: background .1s ease, border-color .1s ease;
}
.cmt-wants-like:hover {
  background: color-mix(in srgb, var(--warn) 24%, transparent);
  border-color: color-mix(in srgb, var(--warn) 65%, var(--border));
}
.cmt-wants-like:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }