/* Support inbox prototype · Vatar DS v1.5.1, light theme. Only DS tokens; local sizes marked "DS gap". */
:root {
  --row: 13.5px;           /* DS gap: dense dashboard text size (between body-sm and label) */
  --tiny: 12px;            /* DS gap: meta text */
  --top-h: 56px;
  --rail-w: 76px; --queue-w: 360px; --player-w: 340px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--color-bg-surface); color: var(--color-text-primary);
  font-family: var(--font-family-body); font-size: var(--row); line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; }
kbd { font: 500 11px/1 var(--font-family-body); padding: 3px 5px; border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); background: var(--color-bg-canvas); color: var(--color-text-secondary); }
.num, time { font-feature-settings: var(--font-feature-tabular); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Sidebar: admin sections (moved from the top tabs, 11 Nov) ── */
.app { display: flex; height: 100vh; height: 100dvh; }
.rail { width: var(--rail-w); flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-3) var(--space-2); background: var(--color-bg-canvas); border-right: 1px solid var(--color-border-subtle); overflow-y: auto; }
.rail__brand { display: grid; place-items: center; height: 44px; margin-bottom: var(--space-3); }
.rail__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-xs); background: #000; }
.rail__mark img { display: block; width: 16px; height: auto; }
.rail a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; font-size: 11px; font-weight: var(--font-weight-medium); }
.rail a svg { width: 20px; height: 20px; }
.rail a:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.rail a[aria-current] { background: var(--color-bg-brand); color: var(--color-text-accent); }
.rail .badge { position: absolute; top: 6px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-status-danger-solid); border: 2px solid var(--color-bg-canvas); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Top bar ── */
.top { height: var(--top-h); flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-subtle); }
.top__menu { display: none; width: 36px; height: 36px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; place-items: center; }
.top__menu svg { width: 20px; height: 20px; }
.top__title { margin: 0; font-family: var(--font-family-display); font-size: 18px; font-weight: var(--font-weight-semibold); }
.role { font-size: var(--tiny); color: var(--color-text-tertiary); margin-right: auto; white-space: nowrap; }
.top__find { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-text-tertiary); cursor: pointer; white-space: nowrap; min-width: 280px; }
.top__find kbd { margin-left: auto; }
.top__me { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-bg-canvas); cursor: pointer; color: var(--color-text-secondary); }
.top__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-inverse); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); flex: none; }

/* ── Filters across the top (were the side views, 11 Nov) ── */
.filters { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-subtle); }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 var(--space-3); border: 0; background: none; cursor: pointer; color: var(--color-text-secondary); white-space: nowrap; font-weight: var(--font-weight-medium); }
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--color-text-primary); }
.tab[aria-selected="true"] { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-text-primary); }
.tab .num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; font-size: 11px; background: var(--color-bg-surface); color: var(--color-text-secondary); }
.tab[aria-selected="true"] .num { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.tab .sep { width: 1px; }
.tabs .divider { width: 1px; align-self: center; height: 20px; background: var(--color-border-default); margin: 0 var(--space-1); flex: none; }
.dd { display: flex; gap: var(--space-2); flex: none; }
.dd .chip b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.dd .chip { color: var(--color-text-secondary); height: 32px; }
.dd .chip.on { border-color: var(--color-border-strong); background: var(--color-bg-surface); }

/* ── Workspace ── */
.ws { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--queue-w) minmax(0, 1fr) var(--player-w); }
.ws > * { min-height: 0; overflow: auto; }

/* Queue */
.queue { display: flex; flex-direction: column; background: var(--color-bg-canvas); border-right: 1px solid var(--color-border-subtle); overflow: hidden; }
.queue__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.queue__title { display: flex; align-items: baseline; gap: var(--space-2); }
.queue__title h1 { margin: 0; font-family: var(--font-family-display); font-size: 18px; font-weight: var(--font-weight-semibold); }
.queue__title .num { color: var(--color-text-tertiary); }
.strip { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 var(--space-3); font-size: var(--tiny); color: var(--color-text-secondary); }
.strip button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.strip button:hover { color: var(--color-text-primary); text-decoration: underline; }
.strip b { color: var(--color-text-primary); }
.strip .hot b { color: var(--color-status-danger-fg); }
.queue__tools { display: flex; gap: var(--space-2); }
.search { flex: 1; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-sm); color: var(--color-text-tertiary); }
.search:focus-within { border-color: var(--color-border-focus); }
.search input { border: 0; outline: 0; background: none; font: inherit; color: var(--color-text-primary); width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-canvas); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--color-border-strong); }
.chip svg { width: 14px; height: 14px; }

.list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; outline: none; }
.row { position: relative; display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) auto; gap: 2px var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; }
.row:hover { background: var(--color-bg-surface); }
.row[aria-selected="true"] { background: var(--color-bg-brand); }
.row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-text-accent); }
.row__lead { grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-accent); }
.row__check { display: none; width: 16px; height: 16px; margin: 0; accent-color: var(--color-bg-inverse); }
.row:hover .dot, .list.selecting .dot { display: none; }
.row:hover .row__check, .list.selecting .row__check { display: block; }
.row__av { grid-row: 1 / 4; grid-column: 2; align-self: start; width: 32px; height: 32px; margin-top: 2px; border-radius: var(--radius-sm); background: var(--color-bg-brand); overflow: hidden; display: grid; place-items: center; color: var(--color-text-tertiary); }
.row__av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.row__av svg { width: 15px; height: 15px; }
.row:has(.row__av svg) .row__av { background: var(--color-bg-surface); }
.row__who { grid-column: 3; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.row__who strong { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.unread .row__who strong { font-weight: var(--font-weight-bold); }
.row__time { font-size: var(--tiny); color: var(--color-text-tertiary); text-align: right; }
.row__text { grid-column: 3 / 5; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.unread .row__text { color: var(--color-text-primary); }
.row__meta { grid-column: 3 / 5; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--tiny); color: var(--color-text-tertiary); margin-top: 2px; }
.row__meta .who { margin-left: auto; }
.flag { display: inline-flex; align-items: center; gap: 4px; }
.flag svg { width: 13px; height: 13px; }
.flag.danger { color: var(--color-status-danger-fg); font-weight: var(--font-weight-medium); }
.flag.warn { color: var(--color-status-warning-fg); }
.cat { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tiny); color: var(--color-text-secondary); white-space: nowrap; }
.cat svg { width: 13px; height: 13px; }
.mini-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: var(--font-weight-semibold); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
.mini-av.me { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-color: transparent; }
.new-pill { position: sticky; top: var(--space-2); z-index: 2; display: block; margin: var(--space-2) auto; padding: 4px 12px; border: 0; border-radius: var(--radius-pill); background: var(--color-bg-inverse); color: var(--color-text-inverse); font-size: var(--tiny); cursor: pointer; }

.bulk { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.bulk .count { margin-right: auto; font-weight: var(--font-weight-semibold); }
.bulk button { height: 30px; padding: 0 var(--space-3); border: 1px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent); border-radius: var(--radius-xs); background: none; color: inherit; cursor: pointer; font-size: var(--tiny); }
.bulk button:hover { background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); }

/* Status badge (icon + label, never colour alone) */
.status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); font-size: var(--tiny); font-weight: var(--font-weight-medium); white-space: nowrap; }
.status svg { width: 13px; height: 13px; }
.status.accent { background: var(--color-bg-brand); color: var(--color-text-accent); }
.status.warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.status.info { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.status.success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.status.neutral { background: var(--color-bg-surface); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border-default); }

/* Conversation */
.convo { display: flex; flex-direction: column; background: var(--color-bg-canvas); overflow: hidden; }
.convo__head { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.convo__row1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.convo__row1 h2 { margin: 0; font-family: var(--font-family-display); font-size: 17px; font-weight: var(--font-weight-semibold); }
.ref { font-size: var(--tiny); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.convo__controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.ctl { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); background: var(--color-bg-canvas); cursor: pointer; font-size: var(--tiny); color: var(--color-text-secondary); }
.ctl:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.ctl .status { height: 20px; padding: 0 6px; margin-left: -4px; }
.ctl svg { width: 13px; height: 13px; }
.closes { margin-left: auto; font-size: var(--tiny); color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: 4px; }
.closes.soon { color: var(--color-status-danger-fg); font-weight: var(--font-weight-medium); }
.presence { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--tiny); color: var(--color-text-secondary); }
.presence .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--color-status-success-solid); }

.thread { flex: 1; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.bot { border: 1px dashed var(--color-border-default); border-radius: var(--radius-sm); }
.bot summary { list-style: none; cursor: pointer; padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-2); font-size: var(--tiny); color: var(--color-text-secondary); }
.bot summary::-webkit-details-marker { display: none; }
.bot ol { margin: 0; padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 20px); font-size: var(--tiny); color: var(--color-text-secondary); }
.msg { max-width: 76%; }
.msg__by { font-size: var(--tiny); color: var(--color-text-tertiary); margin-bottom: 3px; }
.msg__body { padding: var(--space-2) var(--space-3); border-radius: var(--radius-bubble, var(--radius-md)); background: var(--color-bg-surface); white-space: pre-wrap; }
.msg.staff { align-self: flex-end; }
.msg.staff .msg__by { text-align: right; }
.msg.staff .msg__body { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.msg.note { align-self: stretch; max-width: none; }
.msg.note .msg__body { background: var(--color-status-warning-bg); color: var(--color-text-primary); border-left: 3px solid var(--color-status-warning-solid); border-radius: var(--radius-xs); display: flex; gap: var(--space-2); }
.msg.note .msg__body svg { color: var(--color-status-warning-fg); margin-top: 2px; }
.msg.system .msg__body { background: none; border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: var(--tiny); }
.msg.system { align-self: center; max-width: 90%; }
.event { align-self: center; font-size: var(--tiny); color: var(--color-text-tertiary); }

.composer { border-top: 1px solid var(--color-border-subtle); padding: var(--space-3) var(--space-5) var(--space-4); background: var(--color-bg-canvas); }
.modes { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.mode { height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: none; cursor: pointer; color: var(--color-text-secondary); font-size: var(--tiny); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: 6px; }
.mode svg { width: 13px; height: 13px; }
.mode[aria-pressed="true"] { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.mode.note[aria-pressed="true"] { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.box { position: relative; border: 1px solid var(--color-border-control); border-radius: var(--radius-sm); }
.box:focus-within { border-color: var(--color-border-focus); }
.box.note { background: var(--color-status-warning-bg); }
.box textarea { display: block; width: 100%; min-height: 64px; max-height: 200px; resize: vertical; border: 0; outline: 0; background: none; padding: var(--space-3); font: inherit; color: var(--color-text-primary); }
.box__hint { display: flex; justify-content: space-between; padding: 0 var(--space-3) var(--space-2); font-size: var(--tiny); color: var(--color-text-tertiary); }
.saved { position: absolute; left: var(--space-2); right: var(--space-2); bottom: calc(100% + 6px); background: var(--color-bg-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--elevation-overlay); padding: var(--space-1); z-index: 5; }
.saved button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: var(--space-2); border-radius: var(--radius-xs); cursor: pointer; }
.saved button:hover, .saved button:focus-visible { background: var(--color-bg-surface); }
.saved small { display: block; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.actions .spacer { flex: 1; }
.actions .why { font-size: var(--tiny); color: var(--color-text-tertiary); flex-basis: 100%; }
.btn[aria-disabled="true"] { cursor: not-allowed; }

/* Player panel */
.player { background: var(--color-bg-surface); border-left: 1px solid var(--color-border-subtle); padding: var(--space-4); }
.pcard { background: var(--color-bg-canvas); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.pid { display: flex; gap: var(--space-3); align-items: center; }
.pav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--font-weight-bold); background: var(--color-bg-brand); color: var(--color-text-accent); font-size: 16px; flex: none; }
.pid h3 { margin: 0; font-size: 15px; font-weight: var(--font-weight-semibold); }
.pid p { margin: 2px 0 0; font-size: var(--tiny); color: var(--color-text-secondary); }
.pid a { margin-left: auto; font-size: var(--tiny); color: var(--color-text-link); white-space: nowrap; }
.labels { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.plabel { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); font-size: var(--tiny); }
.plabel.add { border-style: dashed; color: var(--color-text-secondary); cursor: pointer; background: none; }
.facts { display: grid; grid-template-columns: auto 1fr auto; gap: 6px var(--space-3); margin: var(--space-3) 0 0; font-size: var(--tiny); align-items: center; }
.facts dt { color: var(--color-text-tertiary); }
.facts dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal { border: 0; background: none; padding: 0; color: var(--color-text-link); cursor: pointer; font-size: var(--tiny); }
.sect { margin-top: var(--space-3); background: var(--color-bg-canvas); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.sect > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary h4 { margin: 0; font-size: var(--row); font-weight: var(--font-weight-semibold); }
.sect > summary .sum { margin-left: auto; font-size: var(--tiny); color: var(--color-text-tertiary); text-align: right; }
.sect > summary .chev { transition: transform var(--motion-duration-fast) var(--motion-easing-standard); color: var(--color-text-tertiary); }
.sect[open] > summary .chev { transform: rotate(90deg); }
.sect .in { padding: 0 var(--space-4) var(--space-4); }
.sect.first { border-color: var(--color-border-strong); }
.first-tag { font-size: 11px; color: var(--color-text-accent); font-weight: var(--font-weight-medium); }
.lines { list-style: none; margin: 0; padding: 0; font-size: var(--tiny); }
.lines li { display: flex; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--color-border-subtle); }
.lines li:first-child { border-top: 0; }
.lines .r { margin-left: auto; text-align: right; color: var(--color-text-secondary); white-space: nowrap; }
.lines .neg { color: var(--color-status-danger-fg); }
.lines .pos { color: var(--color-status-success-fg); }
.ev { list-style: none; margin: 0; padding: 0; }
.ev li { display: grid; grid-template-columns: 20px 1fr; gap: 2px var(--space-2); padding: 7px 0; border-top: 1px solid var(--color-border-subtle); font-size: var(--tiny); }
.ev li:first-child { border-top: 0; }
.ev b { font-weight: var(--font-weight-semibold); font-size: var(--row); }
.ev i { font-style: normal; display: flex; padding-top: 2px; }
.ev span { grid-column: 2; color: var(--color-text-secondary); }
.ev .yes { color: var(--color-status-success-fg); } .ev .no { color: var(--color-status-danger-fg); } .ev .warn { color: var(--color-status-warning-fg); } .ev .none { color: var(--color-text-tertiary); }
.verdict { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: var(--tiny); font-weight: var(--font-weight-medium); display: flex; gap: var(--space-2); }
.verdict.ok { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.verdict.stop { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.verdict.wait { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.pnote { font-size: var(--tiny); padding: var(--space-2) 0; border-top: 1px solid var(--color-border-subtle); }
.pnote:first-of-type { border-top: 0; }
.pnote small { display: block; color: var(--color-text-tertiary); margin-top: 2px; }
.addnote { width: 100%; margin-top: var(--space-2); border: 1px dashed var(--color-border-default); border-radius: var(--radius-xs); background: none; padding: var(--space-2); font: inherit; font-size: var(--tiny); }
.empty-in { color: var(--color-text-tertiary); font-size: var(--tiny); margin: 0; }

/* Empty / zero */
.zero { margin: auto; text-align: center; max-width: 320px; padding: var(--space-8) var(--space-4); color: var(--color-text-secondary); }
.zero h3 { margin: var(--space-3) 0 var(--space-1); color: var(--color-text-primary); font-size: 15px; }
.zero svg { width: 28px; height: 28px; color: var(--color-text-tertiary); }
.zero button { margin-top: var(--space-3); border: 0; background: none; color: var(--color-text-link); cursor: pointer; }

/* Menu, toast, help */
.menu { position: fixed; z-index: 30; min-width: 200px; background: var(--color-bg-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--elevation-overlay); padding: var(--space-1); }
.menu > button { width: 100%; display: flex; align-items: center; gap: var(--space-2); border: 0; background: none; padding: 8px var(--space-2); border-radius: var(--radius-xs); text-align: left; cursor: pointer; }
.menu > button:hover, .menu > button:focus-visible { background: var(--color-bg-surface); outline: none; }
.menu > button.danger { color: var(--color-status-danger-fg); }
.menu hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: var(--space-1) 0; }
.menu .confirm { padding: var(--space-2); max-width: 280px; font-size: var(--tiny); }
.menu .confirm p { margin: 0 0 var(--space-2); }
.menu .confirm .row2 { display: flex; gap: var(--space-2); justify-content: flex-end; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--radius-sm); box-shadow: var(--elevation-overlay); }
.toast button { border: 0; background: none; color: inherit; font-weight: var(--font-weight-semibold); text-decoration: underline; cursor: pointer; }
.help { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--elevation-dialog); background: var(--color-bg-canvas); color: var(--color-text-primary); }
.help::backdrop { background: var(--color-overlay-backdrop); }
.help h2 { margin: 0 0 var(--space-4); font-size: 17px; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); }
.help dd { margin: 0; color: var(--color-text-secondary); }

.back { display: none; }

/* ── Responsive ── */
.ptoggle { display: none; margin-left: auto; }
@media (max-width: 1280px) { :root { --queue-w: 330px; --player-w: 310px; } .top__find { min-width: 0; } .top__find span { display: none; } .role { display: none; } .top__title { margin-right: auto; } }
@media (max-width: 1100px) { .ws { grid-template-columns: var(--queue-w) minmax(0, 1fr); }
  .player { position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); z-index: 20; box-shadow: var(--elevation-dialog); transform: translateX(105%); visibility: hidden; transition: transform var(--motion-duration-open) var(--motion-easing-out), visibility 0s linear var(--motion-duration-open); }
  .player.open { transform: none; visibility: visible; transition: transform var(--motion-duration-open) var(--motion-easing-out); }
  .ptoggle { display: inline-flex; } }
@media (max-width: 760px) { :root { --top-h: 52px; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 25; box-shadow: var(--elevation-dialog); transform: translateX(-105%); visibility: hidden; transition: transform var(--motion-duration-open) var(--motion-easing-out), visibility 0s linear var(--motion-duration-open); }
  .rail.open { transform: none; visibility: visible; transition: transform var(--motion-duration-open) var(--motion-easing-out); }
  .top { padding: 0 var(--space-3); } .top__menu { display: grid; } .top__me { display: none; }
  .filters { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .tabs { padding: 0 var(--space-2); } .dd { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-subtle); }
  .ws { grid-template-columns: 1fr; }
  .convo { position: fixed; inset: 0; z-index: 15; transform: translateX(100%); transition: transform var(--motion-duration-open) var(--motion-easing-out); }
  .ws.detail .convo { transform: none; }
  .back { display: inline-flex; }
  .msg { max-width: 88%; } .thread, .convo__head, .composer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .queue__head { padding: var(--space-3) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Neat and white (11 Nov) ── */
body { background: var(--color-bg-canvas); }
.player { background: var(--color-bg-canvas); padding: 0; }
.pcard { border: 0; border-radius: 0; padding: var(--space-5) var(--space-5) var(--space-4); }
.sect { margin: 0; border: 0; border-top: 1px solid var(--color-border-subtle); border-radius: 0; background: none; }
.sect.first { border-color: var(--color-border-subtle); }
.sect > summary { padding: var(--space-3) var(--space-5); }
.sect .in { padding: 0 var(--space-5) var(--space-4); }
.list, .thread, .ws > *, .rail, .tabs, .views { scrollbar-width: none; -ms-overflow-style: none; }
.list::-webkit-scrollbar, .thread::-webkit-scrollbar, .ws > *::-webkit-scrollbar, .rail::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

/* ── Admin buttons (11 Nov, Mikky: not the game's angular buttons; neat, simple, easy). DS gap → propose as `.b` admin set ── */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: var(--row); font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard); }
.b svg { width: 16px; height: 16px; }
.b--primary { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.b--primary:hover { background: color-mix(in srgb, var(--color-bg-inverse) 86%, var(--color-bg-canvas)); }
.b--secondary { background: var(--color-bg-canvas); color: var(--color-text-primary); border-color: var(--color-border-default); }
.b--secondary:hover { background: var(--color-bg-surface); border-color: var(--color-border-strong); }
.b--ghost { background: none; color: var(--color-text-secondary); }
.b--ghost:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.b--icon { width: 34px; padding: 0; }
.b:active:not(.is-disabled) { transform: translateY(1px); }
.b.is-disabled { background: var(--color-bg-surface); color: var(--color-text-disabled); border-color: transparent; cursor: not-allowed; }
.b--ghost.is-disabled { background: none; }
.actions { gap: var(--space-1); }
.actions .b--primary { margin-right: var(--space-1); }
.menu .confirm .row2 .b { height: 30px; }
.menu, .saved { background: var(--color-bg-canvas); }
.b.back { display: none; }
@media (max-width: 760px) { .b.back { display: inline-flex; } }


/* ── Alert bar + started divider (11 Nov, from Mikky's banner reference) ── */
.alertbar { margin: var(--space-3) var(--space-5) 0; display: flex; align-items: center; gap: var(--space-3); padding: 8px 8px 8px 12px; border-radius: var(--radius-sm); color: var(--color-text-on-accent); background: linear-gradient(100deg, var(--color-bg-brand-strong) 0%, color-mix(in srgb, var(--color-bg-brand-strong) 78%, #fff) 100%); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-bg-brand-strong) 30%, transparent); }
.alertbar__x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .8; cursor: pointer; }
.alertbar__x:hover { opacity: 1; background: color-mix(in srgb, #fff 16%, transparent); }
.alertbar__x svg { width: 14px; height: 14px; }
.alertbar__text { flex: 1; min-width: 0; font-weight: var(--font-weight-medium); }
.alertbar__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: var(--color-bg-inverse); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap; }
.alertbar__cta svg { width: 14px; height: 14px; }
.alertbar__cta:hover { background: color-mix(in srgb, var(--color-bg-inverse) 85%, #fff); }
.started { align-self: center; font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); padding: 2px 0 var(--space-1); }
@media (max-width: 760px) { .alertbar { margin: var(--space-2) var(--space-4) 0; flex-wrap: wrap; } .alertbar__cta { margin-left: 36px; } }

/* ── Player card: Lagos Life details ── */
.pid { align-items: center; }
img.pav { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-bg-brand); object-fit: cover; object-position: center 20%; }
.pav--none { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-tertiary); }
.pav--none svg { width: 22px; height: 22px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-4) 0 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.stats > div { padding: var(--space-2) var(--space-3); min-width: 0; }
.stats > div + div { border-left: 1px solid var(--color-border-subtle); }
.stats dt { font-size: var(--tiny); color: var(--color-text-tertiary); }
.stats dd { margin: 2px 0 0; font-size: 15px; font-weight: var(--font-weight-semibold); font-feature-settings: var(--font-feature-tabular, "tnum"); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labels { margin-top: var(--space-3); }
.fh { margin: var(--space-4) 0 0; font-size: var(--tiny); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.fh + .facts { margin-top: var(--space-2); }
.facts { grid-template-columns: 92px minmax(0, 1fr) auto; }
.tx li > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.tx code { font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-text-tertiary); }
.hold { display: flex; gap: 6px; align-items: center; margin: 0 0 var(--space-2); font-size: var(--tiny); color: var(--color-status-danger-fg, var(--color-text-primary)); }
.hold svg { width: 14px; height: 14px; flex: none; }
.stats { grid-template-columns: auto minmax(0, 1fr) auto; }
.stats > div:first-child, .stats > div:last-child { min-width: 72px; }
.pcard .facts dd { white-space: normal; overflow: visible; text-wrap: pretty; }
.pcard .facts { align-items: baseline; }
.pid > div { min-width: 0; }
.pid a { align-self: flex-start; margin-top: 4px; }

/* Prototype version switcher (bottom of the sidebar) */
.vswitch { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.rail .vswitch a { flex-direction: row; justify-content: center; padding: 4px; font-size: 11px; }

/* ── Rail, tidied (12 Nov): white, a soft pill behind the active icon, labels never clip. ── */
:root { --rail-w: 84px; }
.rail { gap: 4px; padding: var(--space-3) 6px; background: var(--color-bg-canvas); }
.rail__brand { height: 40px; margin-bottom: var(--space-4); }
.rail__mark { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.rail a { gap: 4px; padding: 4px 0 6px; border-radius: var(--radius-sm); font-size: 11px; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; color: var(--color-text-secondary); }
.rail a { padding: 9px 0 8px; }
.rail a > svg { width: 20px; height: 20px; }
.rail a:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.rail a[aria-current] { background: var(--color-bg-canvas); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); box-shadow: 0 0 0 1px var(--color-border-subtle), 0 1px 3px rgb(0 0 0 / .08); }
.rail .badge { top: 7px; right: 26px; width: 7px; height: 7px; }
.strip button[aria-pressed="true"] { color: var(--color-text-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Version C: All messages, then one Categories tab that opens a menu of the six categories. */
.tab--dd svg:last-child { width: 14px; height: 14px; color: var(--color-text-tertiary); }
.tab--dd[aria-expanded="true"] svg:last-child, .tab--dd:hover svg:last-child { color: var(--color-text-primary); }
#menu .menu__l { flex: 1; }
#menu .menu__n { margin-left: var(--space-4); font-size: 11px; color: var(--color-text-tertiary); }
#menu button:has(.menu__n) { min-width: 220px; }
#menu button:has(.menu__n) > svg:last-child:not(:first-child) { margin-left: var(--space-2); color: var(--color-text-accent); }

/* New category (under Other): a small form inside the menu. */
.menu .newcat { display: flex; flex-direction: column; gap: 6px; width: 280px; padding: var(--space-2); }
.menu .newcat label { font-weight: var(--font-weight-semibold); }
.menu .newcat input { height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-canvas); font: inherit; color: var(--color-text-primary); }
.menu .newcat input:focus { outline: none; border-color: var(--color-text-primary); }
.menu .newcat__hint { margin: 0; font-size: var(--tiny); color: var(--color-text-tertiary); }
.menu .newcat__err { margin: 0; font-size: var(--tiny); color: var(--color-status-danger-fg); }
.menu .newcat__err:empty { display: none; }
.menu .newcat .row2 { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: 4px; }

/* ── Header versions (?header=1|2|3) ── */
[data-header] .top .role { margin-right: 0; }
.hright { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.pres { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-bg-canvas); background: var(--color-text-tertiary); }
.pres.on { background: var(--color-status-success-solid); } .pres.away { background: var(--color-status-warning-solid); } .pres.off { background: var(--color-text-tertiary); }
.hav { position: relative; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--color-bg-surface-raised); color: var(--color-text-primary); font-size: 12px; font-weight: var(--font-weight-semibold); box-shadow: 0 0 0 2px var(--color-bg-canvas); }
.hav.sm { width: 28px; height: 28px; box-shadow: none; } .hav svg { width: 14px; height: 14px; }
.hstack { display: inline-flex; padding-left: 4px; } .hstack .hav { margin-left: -4px; cursor: default; }
.hstack .hav:nth-child(1) { z-index: 3; } .hstack .hav:nth-child(2) { z-index: 2; } .hstack .hav:nth-child(3) { z-index: 1; }
.hteam { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 4px 0 6px; border: 1px solid var(--color-border-subtle); border-radius: 999px; background: var(--color-bg-canvas); }
.hinvite { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: 999px; background: var(--color-bg-surface); font-size: var(--tiny); font-weight: var(--font-weight-medium); cursor: pointer; }
.hinvite:hover { background: var(--color-bg-surface-raised); } .hinvite svg { width: 13px; height: 13px; }
.hbtn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-border-subtle); border-radius: 50%; background: var(--color-bg-canvas); cursor: pointer; color: var(--color-text-primary); }
.hbtn:hover { background: var(--color-bg-surface); } .hbtn svg { width: 18px; height: 18px; }
.hdot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-status-danger-solid); border: 2px solid var(--color-bg-canvas); }
.hme { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--color-bg-inverse); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); cursor: pointer; margin-left: 2px; }
.havail, .hmine { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: 999px; background: var(--color-bg-canvas); font-size: var(--tiny); font-weight: var(--font-weight-medium); cursor: pointer; }
.havail .pres, .menu .pres { position: static; border: 0; width: 8px; height: 8px; flex: none; }
.havail svg { width: 13px; height: 13px; color: var(--color-text-tertiary); }
.hmine { border-color: transparent; color: var(--color-text-secondary); } .hmine b { color: var(--color-text-primary); } .hmine:hover { background: var(--color-bg-surface); }
.menu .menu__l small { display: block; font-size: 11px; color: var(--color-text-tertiary); font-weight: 400; }
.pulse { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-3); padding-left: var(--space-4); border-left: 1px solid var(--color-border-subtle); font-size: var(--tiny); color: var(--color-text-secondary); white-space: nowrap; }
.pulse b { color: var(--color-text-primary); font-size: 13px; } .pulse .hot b { color: var(--color-status-danger-fg); }
.hnotes { width: 320px; padding: var(--space-1); } .hnotes__t { margin: var(--space-1) var(--space-2) var(--space-2); font-weight: var(--font-weight-semibold); }
.hnote { display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-xs); } .hnote.new { background: var(--color-bg-surface); }
.hnote p { margin: 0; font-size: var(--tiny); line-height: 1.4; } .hnote time { display: block; color: var(--color-text-tertiary); margin-top: 2px; }
@media (max-width: 1100px) { .pulse span:last-child { display: none; } }
@media (max-width: 760px) { .hteam .hstack, .pulse, .hmine { display: none; } .hteam { border: 0; padding: 0; } }

/* Staff photos in avatars */
.hav img, .hme img, .mini-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mini-av { position: relative; overflow: hidden; } .mini-av.pic { border-color: transparent; }
.hav .pres, .hme .pres { z-index: 1; }

/* ── Header versions 4–6 (?header=4|5|6, 12 Nov "neater" round) ──
   Shared right side: flat 32px controls, no borders, one gap. Team (4, 5) · plain bell · you.
   Away teammates fade instead of wearing a dot, so the only dot left in the bar is your own status. */
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hright { gap: var(--space-1); }
:is([data-header="4"], [data-header="5"], [data-header="6"]) .top__title { margin-right: 0; } /* the ≤1280 rule pushes the stats to the right otherwise */
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hbtn { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-secondary); transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard); }
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hbtn:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hdot { top: 5px; right: 6px; width: 8px; height: 8px; } /* DS gap: badge dot sits on the glyph's corner */
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hme { width: 28px; height: 28px; margin-left: var(--space-2); }
:is([data-header="4"], [data-header="5"], [data-header="6"]) .hme .pres { width: 10px; height: 10px; right: -2px; bottom: -2px; } /* DS gap: presence dot */
.hx-team { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2) 0 var(--space-1); border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--tiny); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.hx-team:hover { background: var(--color-bg-surface); }
.hx-faces { display: inline-flex; }
.hx-face { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--color-bg-surface-raised); color: var(--color-text-primary); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); box-shadow: 0 0 0 2px var(--color-bg-canvas); transition: box-shadow var(--motion-duration-fast) var(--motion-easing-standard); }
.hx-face + .hx-face { margin-left: -5px; } /* DS gap: avatar overlap */
.hx-face:nth-child(1) { z-index: 3; } .hx-face:nth-child(2) { z-index: 2; } .hx-face:nth-child(3) { z-index: 1; }
.hx-face img { width: 100%; height: 100%; object-fit: cover; }
.hx-face.away img, .hx-face.off img { filter: grayscale(1); opacity: 0.5; } /* DS gap: away = faded */
.hx-team:hover .hx-face { box-shadow: 0 0 0 2px var(--color-bg-surface); }
/* Team + status menus */
.menu .hx-mt { margin: var(--space-1) var(--space-2) var(--space-1); font-size: var(--tiny); color: var(--color-text-tertiary); }
.menu .hx-mem { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); } /* DS gap: dense row padding */
.menu .hx-mem .pres { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid var(--color-bg-canvas); }
.menu .hx-mem small, .menu .hx-who small { display: block; font-size: var(--font-size-11); color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
.menu .hx-who { padding: var(--space-2) var(--space-2) var(--space-1); min-width: 240px; } /* DS gap: menu width */
.menu > button[role="menuitemradio"] svg:last-child { margin-left: auto; width: 16px; height: 16px; }

/* 4 · One quiet line: number first, label after, the same rhythm three times; only a non-zero "closing" number turns red. */
[data-header="4"] .hx4 { display: flex; align-items: center; gap: var(--space-5); margin-left: var(--space-3); padding-top: 2px; font-size: var(--font-size-13); color: var(--color-text-secondary); white-space: nowrap; } /* DS gap: 2px nudge onto the title's baseline */
[data-header="4"] .hx4 b { margin-right: 3px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* DS gap: number-label gap */
[data-header="4"] .hx4 .hot b { color: var(--color-status-danger-fg); }

/* 5 · Title with meta below: the page name, then the queue's state as one quiet sentence. */
[data-header="5"] .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 0; row-gap: 1px; } /* DS gap: title/meta gap. No column gap: the menu column is empty on desktop */
[data-header="5"] .top__menu { grid-column: 1; grid-row: 1 / 3; align-self: center; margin-right: var(--space-3); }
[data-header="5"] .hright { margin-left: var(--space-3); }
[data-header="5"] .top__title { grid-column: 2; grid-row: 1; font-size: var(--font-size-16); line-height: 20px; } /* DS gap: line-height */
[data-header="5"] .hx5 { grid-column: 2; grid-row: 2; margin: 0; display: flex; min-width: 0; overflow: hidden; font-size: var(--tiny); line-height: 16px; color: var(--color-text-secondary); white-space: nowrap; } /* DS gap: line-height */
[data-header="5"] .hx5 span + span::before { content: "·"; margin: 0 var(--space-2); color: var(--color-text-tertiary); }
[data-header="5"] .hx5 b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
[data-header="5"] .hx5 .hot, [data-header="5"] .hx5 .hot b { color: var(--color-status-danger-fg); }
[data-header="5"] .hright { grid-column: 3; grid-row: 1 / 3; }

/* 6 · Stats first: figures over small labels; the urgent one leads and is the only red in the bar. Team lives in your menu. */
[data-header="6"] .hx6 { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 0 var(--space-8); }
[data-header="6"] .hx6 > div { display: flex; flex-direction: column-reverse; }
[data-header="6"] .hx6 dd { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-18); font-weight: var(--font-weight-semibold); line-height: 22px; letter-spacing: var(--font-tracking-h4); color: var(--color-text-primary); } /* DS gap: line-height */
[data-header="6"] .hx6 dt { font-size: var(--font-size-11); line-height: 14px; color: var(--color-text-tertiary); white-space: nowrap; } /* DS gap: line-height */
[data-header="6"] .hx6 .hot dd, [data-header="6"] .hx6 .hot dt { color: var(--color-status-danger-fg); }

@media (max-width: 1100px) { [data-header="4"] .hx4 span:last-child { display: none; } }
@media (max-width: 760px) {
  [data-header="4"] .hx4, [data-header="4"] .hx-on { display: none; }
  [data-header="5"] .hx5 span:nth-child(3), [data-header="5"] #hTeam { display: none; }
  [data-header="6"] .hx6 { margin-left: var(--space-4); } [data-header="6"] .hx6 > div:not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { :is([data-header="4"], [data-header="5"], [data-header="6"]) :is(.hbtn, .hx-team, .hx-face) { transition: none; } }

/* ── Labels (?labels=a|b) ── */
.ldot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.ldot.danger { background: var(--color-status-danger-solid); } .ldot.success { background: var(--color-status-success-solid); }
.ldot.warning { background: var(--color-status-warning-solid); } .ldot.info { background: var(--color-status-info-solid); }
/* A: one Labels control at the right end of the tab bar */
.lblbtn { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.lchip { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-canvas); font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; }
.lchip:hover { color: var(--color-text-primary); background: var(--color-bg-surface); }
.lchip svg { width: 14px; height: 14px; } .lchip svg:last-child { width: 13px; height: 13px; color: var(--color-text-tertiary); }
.lchip.on { color: var(--color-text-primary); border-color: var(--color-border-default); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lchip .num { color: var(--color-text-tertiary); }
.lclear { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--color-border-default); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-bg-canvas); cursor: pointer; color: var(--color-text-secondary); }
.lclear:hover { background: var(--color-bg-surface); color: var(--color-text-primary); } .lclear svg { width: 13px; height: 13px; }
/* B: a slim strip of every label under the tabs */
.lstrip { flex: none; display: flex; align-items: center; gap: var(--space-1); height: 44px; padding: 0 var(--space-5); background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-subtle); overflow-x: auto; scrollbar-width: none; }
.lstrip::-webkit-scrollbar { display: none; }
.lstrip__t { font-size: var(--tiny); color: var(--color-text-tertiary); margin-right: var(--space-2); }
.lpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.lpill:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.lpill .num { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular, 400); }
.lpill.on { background: var(--color-bg-canvas); border-color: var(--color-border-default); color: var(--color-text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.lpill.on .num { color: var(--color-text-primary); }
.lstrip__clear { margin-left: var(--space-1); border: 0; background: none; font-size: var(--tiny); color: var(--color-text-tertiary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .lblbtn { margin: 0; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-subtle); } .lstrip { padding: 0 var(--space-4); } }

/* ── Menu versions (?menu=1|2|3) ── 1 Tidy · 2 Lilac · 3 Pick list. Category menus (#catDd, #otherDd, #catCtl), the New category form and the selected dropdown tab. No param = unchanged. */
[data-menu] #menu:has(.menu__ck) { width: 264px; } /* DS gap: menu width, fits "Restriction or moderation" */
[data-menu] #menu:has(.menu__ck) > button { height: var(--space-8); padding: 0 var(--space-2); gap: var(--space-2); min-width: 0; color: var(--color-text-primary); }
[data-menu] #menu:has(.menu__ck) > button > svg { color: var(--color-text-tertiary); }
[data-menu] #menu:has(.menu__ck) > button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -2px; }
[data-menu] #menu:has(.menu__ck) .menu__l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-menu] #menu .menu__n { margin: 0; min-width: 3ch; text-align: right; font-size: var(--font-size-12); color: var(--color-text-tertiary); }
[data-menu] #menu .menu__ck { display: grid; place-items: center; width: 16px; flex: none; color: var(--color-text-primary); }
[data-menu] #menu .menu__ck svg { width: 14px; height: 14px; stroke-width: 2.25; }
/* "New category…" is an action, not an option: quieter text */
[data-menu] #menu:has(.menu__ck) > button:not(:has(.menu__ck)) { color: var(--color-text-secondary); }
[data-menu] #menu:has(.menu__ck) > button:not(:has(.menu__ck)):hover { color: var(--color-text-primary); }
[data-menu] #menu:has(.menu__ck) hr { margin: var(--space-1) calc(var(--space-1) * -1); }
[data-menu] #menu .newcat { width: 264px; }
[data-menu] #menu .newcat:has(.newcat__err:not(:empty)) input { border-color: var(--color-status-danger-fg); }
[data-menu] .tab__t { display: inline-flex; align-items: baseline; }
[data-menu] .tab__p { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }

/* 1 · Tidy: icon | name | count | a check slot kept on every row, so counts form one straight column. Tab reads as a path: Other / Cook 0. */
[data-menu="1"] #menu button:has(.is-on) { font-weight: var(--font-weight-semibold); }
[data-menu="1"] #menu button:has(.is-on) > svg { color: var(--color-text-primary); }
[data-menu="1"] .tab--dd > svg:first-child:not(:last-child) { display: none; }
[data-menu="1"] .tab__p::after { content: "/"; margin: 0 6px; color: var(--color-text-tertiary); } /* DS gap: 6px matches .tab gap */
[data-menu="1"] .tab--dd[aria-selected="true"] .num { min-width: 0; padding: 0; background: none; color: var(--color-text-tertiary); font-size: var(--font-size-12); font-weight: var(--font-weight-regular); }

/* 2 · Lilac: no check, the picked row is tinted lilac (one brand accent, used for "you are here"). Tab stacks the parent over the name; lilac count. */
[data-menu="2"] #menu .menu__ck { display: none; }
[data-menu="2"] #menu button:has(.is-on), [data-menu="2"] #menu button:has(.is-on):hover { background: var(--color-bg-brand); color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
[data-menu="2"] #menu button:has(.is-on) > svg, [data-menu="2"] #menu button:has(.is-on) .menu__n { color: var(--color-text-accent); }
[data-menu="2"] #menu .newcat input:focus { border-color: var(--color-border-focus); }
[data-menu="2"] .tab__t { flex-direction: column; align-items: flex-start; line-height: 1.15; }
[data-menu="2"] .tab__p { font-size: var(--font-size-11); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
[data-menu="2"] .tab--dd[aria-selected="true"] .num { background: var(--color-bg-brand); color: var(--color-text-accent); }
[data-menu="2"] .zero > svg { color: var(--color-text-accent); }

/* 3 · Pick list: no category icons; the check leads the row (where the eye starts), counts trail. Tab reads like a filter, Other: Cook, with no count (the list heading below already shows it). */
[data-menu="3"] #menu:has(.menu__ck) > button { height: 30px; } /* DS gap: compact list row */
[data-menu="3"] #menu button:has(.menu__ck) > svg:first-child { display: none; }
[data-menu="3"] #menu .menu__ck { order: -1; }
[data-menu="3"] #menu button:has(.is-on) { font-weight: var(--font-weight-medium); }
[data-menu="3"] .tab--dd > svg:first-child:not(:last-child) { display: none; }
[data-menu="3"] .tab__p::after { content: ":"; margin-right: 4px; } /* DS gap: label-value space */
[data-menu="3"] .tab--dd[aria-selected="true"]:has(.tab__t) .num { display: none; }

/* ── Rail variations (?rail=1|2) ── 12 Nov. No param = the rail above, unchanged.
   Shared: one item shape for every state, hover only on real pointers, a press you can feel,
   "not built yet" sections dimmed with a Coming soon tip, Shortcuts at the foot (opens #help). */
[data-rail] .rail a, [data-rail] .rail .rail__util { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 9px 0 8px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; color: var(--color-text-secondary); font: inherit; font-size: 11px; font-weight: var(--font-weight-medium); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-press) var(--motion-easing-out); }
[data-rail] .rail a > svg, [data-rail] .rail .rail__util > svg { width: 20px; height: 20px; position: relative; }
[data-rail] .rail a > span, [data-rail] .rail .rail__util > span { position: relative; }
[data-rail] .rail a:focus-visible, [data-rail] .rail .rail__util:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -2px; }
/* Not built yet: quiet, no hover fill, no press, the tip explains. Colour stays readable (disabled ≠ invisible). */
[data-rail] .rail a[aria-disabled="true"] { color: var(--color-text-disabled); cursor: default; }
/* The Safety dot was a 3px speck inside its ring; now a readable 6px dot with a 2px canvas ring. */
[data-rail] .rail .badge { width: 10px; height: 10px; }

.rail__foot { margin-top: auto; display: flex; flex-direction: column; padding-top: var(--space-3); }
.rtip { position: fixed; z-index: 30; transform: translate(-4px, -50%); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-xs); background: var(--color-bg-inverse); color: var(--color-text-inverse); font-size: var(--tiny); font-weight: var(--font-weight-medium); white-space: nowrap; box-shadow: var(--elevation-overlay); transition: opacity var(--motion-duration-fast) var(--motion-easing-out), transform var(--motion-duration-fast) var(--motion-easing-out); }
.rtip.on { opacity: 1; transform: translate(0, -50%); }
.rtip kbd { background: none; border-color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent); color: var(--color-text-inverse); }

/* 1 · Lilac marker. The rail speaks the queue's selection language: a lilac tint behind the icon and a 3px lilac
   edge, exactly like the selected conversation next to it. Hover previews that same shape in grey. */
[data-rail="1"] .rail a::before, [data-rail="1"] .rail .rail__util::before { content: ""; position: absolute; top: 4px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: var(--radius-sm); background: transparent; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-press) var(--motion-easing-out); }
@media (hover: hover) {
  [data-rail="1"] .rail a:not([aria-disabled="true"]):hover, [data-rail="1"] .rail .rail__util:hover { color: var(--color-text-primary); }
  [data-rail="1"] .rail a:not([aria-disabled="true"]):hover::before, [data-rail="1"] .rail .rail__util:hover::before { background: var(--color-bg-surface); }
  [data-rail="1"] .rail a[aria-current]:hover { color: var(--color-text-accent); }
  [data-rail="1"] .rail a[aria-current]:hover::before { background: var(--color-lilac-100); } /* DS gap: no semantic brand-hover token; lilac-100 is one step deeper than bg-brand */
}
/* Pressed (12 Nov, after review): the lilac marker starts to form, so a click flows straight into the selected look. */
[data-rail="1"] .rail a:not([aria-disabled="true"]):active, [data-rail="1"] .rail .rail__util:active { color: var(--color-text-accent); }
[data-rail="1"] .rail a:not([aria-disabled="true"]):active::before, [data-rail="1"] .rail .rail__util:active::before { background: var(--color-bg-brand); transform: scale(var(--motion-scale-press)); }
[data-rail="1"] .rail a:not([aria-disabled="true"]):active > svg, [data-rail="1"] .rail .rail__util:active > svg { transform: translateY(1px); transition: transform var(--motion-duration-press) var(--motion-easing-out); }
[data-rail="1"] .rail a[aria-current] { color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
[data-rail="1"] .rail a[aria-current]::before { background: var(--color-bg-brand); }
[data-rail="1"] .rail a[aria-current]:active::before { background: var(--color-lilac-100); } /* DS gap: brand pressed, same step as selected+hover */
[data-rail="1"] .rail a[aria-current]::after { content: ""; position: absolute; left: -6px; top: 2px; bottom: 2px; width: 3px; border-radius: 0 2px 2px 0; background: var(--color-text-accent); }
/* Focus rings the marker, not the whole cell, so it lands where the eye already is. */
[data-rail="1"] .rail a:focus-visible, [data-rail="1"] .rail .rail__util:focus-visible { outline: none; }
[data-rail="1"] .rail a:focus-visible::before, [data-rail="1"] .rail .rail__util:focus-visible::before { box-shadow: 0 0 0 1.5px var(--color-text-accent); } /* DS gap: lighter keyboard ring on the marker */
[data-rail="1"] .rail .badge { top: 4px; right: 17px; }

/* 2 · Ink tile. Monochrome: the current section is a solid ink tile, the same weight as the admin's primary
   button and the logo tile above it. Hover is a grey version of that tile, so the two states share one shape. */
@media (hover: hover) {
  [data-rail="2"] .rail a:not([aria-disabled="true"]):hover, [data-rail="2"] .rail .rail__util:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
  [data-rail="2"] .rail a[aria-current]:hover { background: color-mix(in srgb, var(--color-bg-inverse) 86%, var(--color-bg-canvas)); color: var(--color-text-inverse); } /* same hover as .b--primary */
}
[data-rail="2"] .rail a:not([aria-disabled="true"]):active, [data-rail="2"] .rail .rail__util:active { background: var(--color-bg-surface-raised); transform: scale(var(--motion-scale-press)); }
[data-rail="2"] .rail a[aria-current] { background: var(--color-bg-inverse); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
[data-rail="2"] .rail a[aria-current]:active { background: color-mix(in srgb, var(--color-bg-inverse) 76%, var(--color-bg-canvas)); color: var(--color-text-inverse); } /* DS gap: inverse pressed */
[data-rail="2"] .rail a:focus-visible, [data-rail="2"] .rail .rail__util:focus-visible { outline-offset: 2px; }
[data-rail="2"] .rail .rail__foot { border-top: 1px solid var(--color-border-subtle); margin-top: auto; padding-top: var(--space-2); }
[data-rail="2"] .rail .badge { top: 6px; right: 22px; }

/* Reduced motion: presses keep their colour change but nothing moves; the tip appears in place. */
@media (prefers-reduced-motion: reduce) {
  [data-rail] .rail a:active, [data-rail] .rail .rail__util:active, [data-rail] .rail a:active::before, [data-rail] .rail .rail__util:active::before, [data-rail] .rail a:active > svg, [data-rail] .rail .rail__util:active > svg { transform: none !important; }
  .rtip, .rtip.on { transform: translate(0, -50%); }
}

/* ── Row variations (?rows=1|2) ── */
/* Shared: white rows, no lilac fill. Lilac is kept for the unread dot only; red only for things that can't wait.
   Keyboard focus rings the selected row instead of the whole list. */
[data-rows] .list:focus-visible { outline: none; }
[data-rows] .list:focus-visible .rv[aria-selected="true"] { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color); }
[data-rows] .rv { transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); }
[data-rows] .rv .row__who strong { font-weight: var(--font-weight-medium); }
[data-rows] .rv.unread .row__who strong { font-weight: var(--font-weight-semibold); }
[data-rows] .rv .row__text { color: var(--color-text-tertiary); }
[data-rows] .rv.unread .row__text { color: var(--color-text-secondary); }
[data-rows] .rv.is-done .row__who strong { color: var(--color-text-secondary); }
[data-rows] .rv .mini-av { width: 18px; height: 18px; font-size: 9px; }
[data-rows] .rv .row__lead { justify-content: center; padding: 0; }
.rv__sig, .rv__hot { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-status-danger-fg); white-space: nowrap; }
.rv__sig svg, .rv__hot svg { width: 13px; height: 13px; }
/* "N new messages" notice: white, quiet, same click as before (#newPill) */
[data-rows] .rnew { position: sticky; top: 0; z-index: 2; background: var(--color-bg-canvas); }
.rnew__b { display: flex; align-items: center; gap: var(--space-2); width: 100%; border: 0; background: none; cursor: pointer; font-size: var(--tiny); color: var(--color-text-primary); text-align: left; }
.rnew__b:focus-visible { outline-offset: calc(var(--focus-ring-width) * -1); }
.rnew__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-accent); flex: none; }
.rnew__t { font-weight: var(--font-weight-medium); }
.rnew__go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.rnew__go svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.rnew__b:hover .rnew__go { color: var(--color-text-primary); }

/* 1 · Two lines, one signal: inset rows, no dividers. Right of line 1 is the time, or one red signal when it can't wait. */
[data-rows="1"] .list { padding-bottom: var(--space-2); }
[data-rows="1"] .rv { grid-template-columns: 16px 32px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px var(--space-2); align-items: center; margin: 2px var(--space-2) 0; padding: 10px var(--space-3) 10px 6px; border-bottom: 0; border-radius: var(--radius-sm); } /* DS gap: 10px row padding, 6px lead inset */
[data-rows="1"] .rv:first-child { margin-top: var(--space-2); }
[data-rows="1"] .rv .row__lead { grid-column: 1; grid-row: 1 / 3; align-self: center; }
[data-rows="1"] .rv .row__av { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
[data-rows="1"] .rv .row__who { grid-column: 3; grid-row: 1; }
[data-rows="1"] .rv .row__time, [data-rows="1"] .rv__sig { grid-column: 4; grid-row: 1; justify-self: end; }
[data-rows="1"] .rv .row__text { grid-column: 3 / 5; grid-row: 2; }
[data-rows="1"] .rv:has(.rv__who .mini-av) .row__text { padding-right: 26px; } /* text runs under the time column; leaves room for the assignee face */
[data-rows="1"] .rv__who { grid-column: 4; grid-row: 2; justify-self: end; display: flex; min-height: 18px; }
[data-rows="1"] .rv:hover { background: color-mix(in srgb, var(--color-bg-surface) 70%, var(--color-bg-canvas)); }
[data-rows="1"] .rv[aria-selected="true"] { background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-border-subtle); }
[data-rows="1"] .rv[aria-selected="true"]::before { content: none; }
[data-rows="1"] .rnew { padding: var(--space-2) var(--space-2) 0; }
[data-rows="1"] .rnew__b { height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-canvas); box-shadow: 0 1px 2px var(--color-alpha-black-8); }
[data-rows="1"] .rnew__b:hover { background: var(--color-bg-surface); border-color: var(--color-border-strong); }
[data-rows="1"] .rnew + .rv { margin-top: var(--space-1); }

/* 2 · Quiet meta line: three lines kept, every row the same rhythm. Line 3 is one line of small grey text,
   status as a 6px dot + word (the label strip's dot language), category only on All messages, red only for urgency. */
[data-rows="2"] .rv { grid-template-columns: 16px 32px minmax(0, 1fr) auto; gap: 2px var(--space-2); }
[data-rows="2"] .rv .row__lead { grid-row: 1 / 4; padding-top: 12px; justify-content: flex-start; }
[data-rows="2"] .rv .row__meta { grid-column: 3 / 5; gap: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; margin-top: 3px; min-height: 18px; color: var(--color-text-tertiary); }
[data-rows="2"] .rv__sep { margin: 0 6px; } /* DS gap: 6px inline separator */
.rv__st { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); }
.rv__st .ldot { width: 6px; height: 6px; }
.rv__accent { background: var(--color-text-accent); } .rv__warning { background: var(--color-status-warning-solid); }
.rv__info { background: var(--color-status-info-solid); } .rv__neutral { background: var(--color-text-disabled); } .rv__success { background: var(--color-status-success-solid); }
[data-rows="2"] .rv:hover { background: color-mix(in srgb, var(--color-bg-surface) 70%, var(--color-bg-canvas)); }
[data-rows="2"] .rv[aria-selected="true"] { background: var(--color-bg-surface); }
[data-rows="2"] .rv[aria-selected="true"]::before { width: 2px; background: var(--color-text-primary); }
[data-rows="2"] .rnew { border-bottom: 1px solid var(--color-border-subtle); }
[data-rows="2"] .rnew__b { height: 40px; padding: 0 var(--space-4) 0 calc(var(--space-3) + 5px); } /* DS gap: centres the dot on the unread-dot column */
[data-rows="2"] .rnew__b:hover { background: var(--color-bg-surface); }

/* ── Conversation header variations (?convo=1|2) ── The whole conversation pane: 1 Quiet · 2 Docked. No param = unchanged.
   One dark button per pane (Send). The case action shows once. Status is a dot + words, not a filled pill. */
[data-convo] .cv-head { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
[data-convo] .cv-head h2 { margin: 0; font-family: var(--font-family-display); font-size: 17px; font-weight: var(--font-weight-semibold); line-height: 1.2; } /* DS gap: 17px, as the pane title above */
[data-convo] .cv-sp { flex: 1; }
[data-convo] .cv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-text-tertiary); }
[data-convo] .cv-dot.accent { background: var(--color-text-accent); } [data-convo] .cv-dot.warning { background: var(--color-status-warning-solid); }
[data-convo] .cv-dot.info { background: var(--color-status-info-solid); } [data-convo] .cv-dot.success { background: var(--color-status-success-solid); }
[data-convo] .cv-due { display: inline-flex; align-items: center; gap: 5px; font-size: var(--tiny); color: var(--color-text-tertiary); white-space: nowrap; }
[data-convo] .cv-due svg { width: 13px; height: 13px; }
[data-convo] .cv-due.soon { color: var(--color-status-danger-fg); font-weight: var(--font-weight-medium); }
[data-convo] .cv-head .ptoggle { display: none; margin: 0; }
[data-convo] .cv-head .presence { flex-basis: 100%; }
[data-convo] .cv-head .presence .pulse { display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; } /* .pulse is also the top bar's stats class */
[data-convo] .b kbd, [data-convo] .cv-seg__b kbd { font-size: 10px; padding: 2px 4px; } /* DS gap: kbd inside a 30px control */
[data-convo] .cv-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-tertiary); cursor: pointer; }
[data-convo] .cv-x:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); color: var(--color-text-primary); }
[data-convo] .cv-x svg { width: 14px; height: 14px; }
[data-convo] .cv-danger { background: var(--color-bg-canvas); color: var(--color-status-danger-fg); border-color: color-mix(in srgb, var(--color-status-danger-solid) 40%, transparent); }
[data-convo] .cv-danger:hover { background: var(--color-status-danger-bg); border-color: var(--color-status-danger-solid); }

/* Thread: a hairline date rule, the bot hand-over as one quiet line, softer bubbles */
[data-convo] .thread { padding: var(--space-5) var(--space-6); gap: var(--space-4); }
[data-convo] .cv-started { display: flex; align-items: center; gap: var(--space-3); font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-convo] .cv-started::before, [data-convo] .cv-started::after { content: ""; flex: 1; height: 1px; background: var(--color-border-subtle); }
[data-convo] .cv-bot { align-self: center; max-width: 100%; }
[data-convo] .cv-bot summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--tiny); color: var(--color-text-secondary); }
[data-convo] .cv-bot summary::-webkit-details-marker { display: none; }
[data-convo] .cv-bot summary:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
[data-convo] .cv-bot summary svg { width: 14px; height: 14px; } [data-convo] .cv-bot summary svg:last-child { width: 12px; height: 12px; transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
[data-convo] .cv-bot[open] summary svg:last-child { transform: rotate(180deg); }
[data-convo] .cv-bot ol { margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-6); font-size: var(--tiny); color: var(--color-text-secondary); line-height: 1.6; }
[data-convo] .msg { max-width: 72%; }
[data-convo] .msg__by { margin-bottom: 4px; }
[data-convo] .msg__body { padding: 10px var(--space-3); border-radius: var(--radius-md); line-height: 1.5; }
[data-convo] .msg.note { max-width: 88%; align-self: flex-start; }
[data-convo] .msg.note .msg__by { display: flex; align-items: center; gap: 5px; color: var(--color-status-warning-fg); }
[data-convo] .msg.note .msg__by svg { width: 12px; height: 12px; }
[data-convo] .msg.note .msg__body { display: block; border-left: 0; border-radius: var(--radius-md); background: var(--color-status-warning-bg); }
[data-convo] .event { font-size: var(--tiny); }

/* Composer: Send is the one primary; the mode switch and hints sit inside the box */
[data-convo] .composer.cv-comp { border-top: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
[data-convo] .cv-comp .box { border-color: var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-canvas); box-shadow: 0 1px 2px rgb(0 0 0 / .04); } /* DS gap: hairline shadow */
[data-convo] .cv-comp .box:focus-within { border-color: var(--color-border-focus); }
[data-convo] .cv-comp .box.note { background: var(--color-status-warning-bg); border-color: color-mix(in srgb, var(--color-status-warning-solid) 45%, transparent); }
[data-convo] .cv-boxtop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) 0; }
[data-convo] .cv-modes { margin: 0; }
[data-convo] .cv-to { margin-left: auto; padding-right: var(--space-2); font-size: var(--tiny); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-convo] .cv-comp textarea { min-height: 72px; resize: none; padding: var(--space-2) var(--space-3); }
[data-convo] .cv-boxfoot { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2) var(--space-3); }
[data-convo] .cv-hint { font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-convo] .cv-hint kbd { font-size: 10px; padding: 2px 4px; }
[data-convo] .cv-kbd { display: inline-flex; gap: 2px; margin-left: var(--space-2); } [data-convo] .cv-kbd kbd { font-size: 10px; padding: 2px 4px; }
[data-convo] .cv-comp .b { height: 32px; padding: 0 var(--space-3); font-size: var(--tiny); }
[data-convo] .cv-comp .b svg { width: 13px; height: 13px; }
[data-convo] .cv-comp .b--ghost.is-disabled { color: var(--color-text-disabled); }

/* 1 · Quiet: facts as a line of text (each one a control), Claim in lilac, a calm alert card holding the case action */
[data-convo="1"] .cv-row1 { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
[data-convo="1"] .cv-row1 .ref { margin-left: 2px; }
[data-convo="1"] .cv-claim { height: 30px; padding: 0 6px 0 10px; gap: 6px; background: var(--color-bg-brand); color: var(--color-text-accent); font-size: var(--tiny); font-weight: var(--font-weight-semibold); }
[data-convo="1"] .cv-claim:hover { background: color-mix(in srgb, var(--color-bg-brand-strong) 16%, var(--color-bg-brand)); }
[data-convo="1"] .cv-claim svg { width: 14px; height: 14px; }
[data-convo="1"] .cv-claim kbd { background: var(--color-bg-canvas); border-color: transparent; color: var(--color-text-accent); }
[data-convo="1"] .cv-props { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 2px 0 0 -6px; }
[data-convo="1"] .cv-prop { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: none; font: inherit; font-size: var(--tiny); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
[data-convo="1"] .cv-prop:hover, [data-convo="1"] .cv-prop:focus-visible { background: var(--color-bg-surface); color: var(--color-text-primary); }
[data-convo="1"] .cv-prop > svg { width: 13px; height: 13px; }
[data-convo="1"] .cv-prop > svg:last-child { width: 11px; height: 11px; margin-left: -2px; opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-easing-standard); }
[data-convo="1"] .cv-prop:hover > svg:last-child, [data-convo="1"] .cv-prop:focus-visible > svg:last-child { opacity: .7; }
[data-convo="1"] .cv-prop .mini-av { width: 18px; height: 18px; }
[data-convo="1"] .cv-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); margin: 0 2px; flex: none; }
[data-convo="1"] .cv-row1 .cv-due { margin-right: var(--space-2); }
@media (hover: none) { [data-convo="1"] .cv-prop > svg:last-child { opacity: .5; } }
[data-convo="1"] .cv-alert { margin: var(--space-3) var(--space-5) 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-canvas); }
[data-convo="1"] .cv-alert > svg { color: var(--color-text-accent); }
[data-convo="1"] .cv-alert.risk { background: var(--color-status-danger-bg); border-color: color-mix(in srgb, var(--color-status-danger-solid) 22%, transparent); }
[data-convo="1"] .cv-alert.risk > svg { color: var(--color-status-danger-fg); }
[data-convo="1"] .cv-alert__t { flex: 1; min-width: 0; margin: 0; color: var(--color-text-primary); }
[data-convo="1"] .cv-alert__t b { display: block; font-size: var(--tiny); font-weight: var(--font-weight-semibold); color: var(--color-text-accent); }
[data-convo="1"] .cv-alert.risk .cv-alert__t b { color: var(--color-status-danger-fg); }
[data-convo="1"] .cv-alert .b { height: 32px; padding: 0 var(--space-3); font-size: var(--tiny); flex: none; }
[data-convo="1"] .cv-modes { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--color-bg-surface); }
[data-convo="1"] .cv-modes .mode { height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-xs); background: none; color: var(--color-text-secondary); }
[data-convo="1"] .cv-modes .mode[aria-pressed="true"] { background: var(--color-bg-canvas); color: var(--color-text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
[data-convo="1"] .cv-modes .mode.note[aria-pressed="true"] { background: var(--color-bg-canvas); color: var(--color-status-warning-fg); }
[data-convo="1"] .box.note .cv-modes { background: color-mix(in srgb, var(--color-status-warning-solid) 14%, transparent); }
[data-convo="1"] .cv-boxfoot .cv-hint { margin-right: auto; }
[data-convo="1"] .cv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
[data-convo="1"] .cv-actions .b--ghost { padding: 0 var(--space-2); }
[data-convo="1"] .cv-why { display: flex; align-items: center; gap: 6px; margin: var(--space-1) 0 0 var(--space-2); font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-convo="1"] .cv-why svg { width: 12px; height: 12px; }
[data-convo="1"] .msg.staff .msg__body { background: var(--color-bg-brand); color: var(--color-text-primary); }

/* 2 · Docked: one toolbar row (two quiet segmented groups), the next step docks on the composer, staff replies in white */
[data-convo="2"] .cv-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
[data-convo="2"] .cv-id { flex: 1 1 auto; min-width: max-content; } /* when the toolbar does not fit beside the name, it drops to its own row */
[data-convo="2"] .cv-long { display: none; }
[data-convo="2"] .cv-id p { margin: 3px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-convo="2"] .cv-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
[data-convo="2"] .cv-seg { display: inline-flex; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-canvas); }
[data-convo="2"] .cv-seg__b { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-primary); cursor: pointer; white-space: nowrap; }
[data-convo="2"] .cv-seg__b + .cv-seg__b { border-left: 1px solid var(--color-border-subtle); }
[data-convo="2"] .cv-seg__b:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
[data-convo="2"] .cv-seg__b:last-child { border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }
[data-convo="2"] .cv-seg__b:only-child { border-radius: calc(var(--radius-sm) - 1px); }
[data-convo="2"] .cv-seg__b:hover { background: var(--color-bg-surface); }
[data-convo="2"] .cv-seg__b:focus-visible { outline-offset: -2px; }
[data-convo="2"] .cv-seg__b > svg { width: 13px; height: 13px; color: var(--color-text-tertiary); }
[data-convo="2"] .cv-seg__b > svg:last-child { width: 12px; height: 12px; }
[data-convo="2"] .cv-seg__b .mini-av { width: 18px; height: 18px; }
[data-convo="2"] .cv-seg__claim { color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
[data-convo="2"] .cv-seg__claim > svg, [data-convo="2"] .cv-seg__claim > svg:last-child { width: 14px; height: 14px; color: var(--color-text-accent); }
[data-convo="2"] .cv-seg__claim kbd { color: var(--color-text-accent); }
[data-convo="2"] .cv-seg__more { padding: 0 8px; }
[data-convo="2"] .cv-next { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-surface); }
[data-convo="2"] .cv-next > svg { color: var(--color-text-accent); }
[data-convo="2"] .cv-next.risk { background: var(--color-status-danger-bg); }
[data-convo="2"] .cv-next.risk > svg { color: var(--color-status-danger-fg); }
[data-convo="2"] .cv-next__t { flex: 1; min-width: 0; margin: 0; color: var(--color-text-primary); }
[data-convo="2"] .cv-next__t b { margin-right: 6px; font-weight: var(--font-weight-semibold); color: var(--color-text-accent); }
[data-convo="2"] .cv-next.risk .cv-next__t b { color: var(--color-status-danger-fg); }
[data-convo="2"] .cv-next__t small { display: block; margin-top: 2px; font-size: var(--tiny); color: var(--color-text-secondary); }
[data-convo="2"] .cv-next .b { flex: none; }
[data-convo="2"] .cv-modes { display: flex; gap: var(--space-4); padding-left: var(--space-1); }
[data-convo="2"] .cv-modes .mode { height: 30px; padding: 0 2px; border-radius: 0; background: none; color: var(--color-text-tertiary); box-shadow: inset 0 -2px 0 transparent; }
[data-convo="2"] .cv-modes .mode:hover { color: var(--color-text-primary); }
[data-convo="2"] .cv-modes .mode[aria-pressed="true"] { background: none; color: var(--color-text-primary); box-shadow: inset 0 -2px 0 currentColor; }
[data-convo="2"] .cv-modes .mode.note[aria-pressed="true"] { background: none; color: var(--color-status-warning-fg); }
[data-convo="2"] .cv-boxtop { border-bottom: 1px solid var(--color-border-subtle); padding-top: 2px; }
[data-convo="2"] .box.note .cv-boxtop { border-color: color-mix(in srgb, var(--color-status-warning-solid) 30%, transparent); }
[data-convo="2"] .cv-boxfoot { padding-left: var(--space-1); gap: var(--space-1); }
[data-convo="2"] .cv-boxfoot .cv-hint { margin-right: var(--space-1); }
[data-convo="2"] .msg.staff .msg__body { background: var(--color-bg-canvas); color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-border-default); }

@media (max-width: 1100px) { [data-convo] .cv-head .ptoggle { display: inline-flex; } }
@media (max-width: 760px) {
  [data-convo] .cv-head { padding: var(--space-2) var(--space-4) var(--space-3); }
  [data-convo] .thread { padding: var(--space-4); }
  [data-convo] .composer.cv-comp { padding: var(--space-2) var(--space-3) var(--space-3); }
  [data-convo] .msg { max-width: 88%; }
  [data-convo] .cv-long, [data-convo] .cv-kbd, [data-convo] .cv-boxfoot .cv-hint { display: none; }
  [data-convo="1"] .cv-alert { margin: var(--space-2) var(--space-3) 0; flex-wrap: wrap; }
  [data-convo] .cv-claim kbd, [data-convo] .cv-seg__claim kbd { display: none; }
  [data-convo="1"] .cv-alert__t, [data-convo="2"] .cv-next__t { flex-basis: calc(100% - 76px); } /* text takes the row; the action drops under it */
  [data-convo="1"] .cv-alert .b, [data-convo="2"] .cv-next .b { order: 3; margin-left: 28px; }
  [data-convo="1"] .cv-row1 .ref, [data-convo="1"] .cv-sep { display: none; }
  [data-convo="1"] .cv-row1 h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-convo="1"] .cv-props { gap: 0 var(--space-1); margin-left: 36px; }
  [data-convo="1"] .cv-row1 { flex-wrap: wrap; row-gap: 0; }
  [data-convo="1"] .cv-row1 .cv-due { order: 9; flex-basis: 100%; margin: -4px 0 2px 42px; } /* DS gap: lines up under the name (back button 34 + gap 8) */
  [data-convo="1"] .cv-boxfoot { justify-content: flex-end; }
  [data-convo="2"] .cv-head .ptoggle { order: 2; }
  [data-convo="2"] .cv-id { min-width: 0; }
  [data-convo="2"] .cv-tools { order: 3; flex-basis: 100%; flex-wrap: nowrap; }
  [data-convo="2"] .cv-tools .cv-seg:first-child, [data-convo="2"] #catCtl { min-width: 0; }
  [data-convo="2"] .cv-seg__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  [data-convo="2"] .cv-next { flex-wrap: wrap; }
}

/* ── Bulk bar, white and one line (12 Nov): Assign to me leads; To tech / Duplicate sit under ⋯. ── */
.bulk { gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); background: var(--color-bg-canvas); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-subtle); white-space: nowrap; }
.bulk .count { margin-right: auto; font-weight: var(--font-weight-regular, 400); color: var(--color-text-secondary); font-size: var(--tiny); }
.bulk .count b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.bulk button { height: 30px; padding: 0 var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-canvas); color: var(--color-text-primary); font-size: var(--tiny); font-weight: var(--font-weight-medium); white-space: nowrap; }
.bulk button:hover { background: var(--color-bg-surface); }
.bulk .bulk__go { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.bulk .bulk__go:hover { background: var(--color-bg-inverse); opacity: .88; }
.bulk .bulk__x, .bulk .bulk__more { width: 30px; padding: 0; display: grid; place-items: center; border-color: transparent; color: var(--color-text-secondary); }
.bulk .bulk__x:hover, .bulk .bulk__more:hover { color: var(--color-text-primary); }
.bulk .bulk__x svg, .bulk .bulk__more svg { width: 15px; height: 15px; }

/* ── Label strip clicked-state versions (?lsel=1|2|3) ── */
[data-lsel] .lpill.on { box-shadow: none; border-color: transparent; }
/* 1 · Tint: the picked label washes in its own colour */
[data-lsel="1"] .lpill.on:has(.danger) { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
[data-lsel="1"] .lpill.on:has(.success) { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
[data-lsel="1"] .lpill.on:has(.warning) { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
[data-lsel="1"] .lpill.on:has(.info) { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
[data-lsel="1"] .lpill.on .num { color: inherit; opacity: .8; }
/* 2 · Underline: no box; bold label and a short line in its colour, like the tabs */
[data-lsel="2"] .lpill { position: relative; border-radius: var(--radius-xs); }
[data-lsel="2"] .lpill.on { background: none; font-weight: var(--font-weight-semibold); }
[data-lsel="2"] .lpill.on::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -8px; height: 2px; border-radius: 2px; background: var(--color-text-primary); }
[data-lsel="2"] .lpill.on:has(.danger)::after { background: var(--color-status-danger-solid); } [data-lsel="2"] .lpill.on:has(.success)::after { background: var(--color-status-success-solid); }
[data-lsel="2"] .lpill.on:has(.warning)::after { background: var(--color-status-warning-solid); } [data-lsel="2"] .lpill.on:has(.info)::after { background: var(--color-status-info-solid); }
/* 3 · Check chip: grey chip, a tick replaces the dot, × inside clears it */
[data-lsel="3"] .lpill.on { background: var(--color-bg-surface-raised); padding-right: 6px; }
[data-lsel="3"] .lpill.on .ldot { width: 10px; height: 10px; background: none !important; border-radius: 0; -webkit-mask: none; position: relative; }
[data-lsel="3"] .lpill.on .ldot::before { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--color-text-primary); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
[data-lsel="3"] .lpill.on::after { content: "×"; margin-left: 2px; font-size: 15px; line-height: 1; color: var(--color-text-tertiary); }
[data-lsel="3"] .lstrip__clear { display: none; }

/* Rail 1 marker fix (12 Nov): the marker ended exactly where the label began, so it read as cutting the word.
   Marker now hugs the icon (28px tall, centred on it) and the label sits 7px below the icon: a clear gap. */
[data-rail="1"] .rail a, [data-rail="1"] .rail .rail__util { gap: 7px; }
[data-rail="1"] .rail a::before, [data-rail="1"] .rail .rail__util::before { top: 5px; height: 28px; width: 48px; margin-left: -24px; }
.lstrip { padding-left: calc(var(--space-5) - var(--space-2)); } /* "Labels" heading removed 12 Nov: first label's dot lines up with the tabs */

/* ── Message avatars in the conversation (12 Nov) ── */
[data-convo] .msgrow { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 80%; }
[data-convo] .msgrow .msg { max-width: none; min-width: 0; }
[data-convo] .msgrow.staff { align-self: flex-end; flex-direction: row-reverse; }
[data-convo] .msgrow.staff .msg__by { text-align: right; }
[data-convo] .msgrow.note { max-width: 92%; }
[data-convo] .mav { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--color-bg-brand); color: var(--color-text-secondary); font-size: 11px; font-weight: var(--font-weight-semibold); }
[data-convo] .mav img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
[data-convo] .mav.staff { background: var(--color-bg-surface-raised); } [data-convo] .mav.staff img { object-position: center; }
[data-convo] .mav.none { background: var(--color-bg-surface); } [data-convo] .mav.none svg { width: 13px; height: 13px; }
@media (max-width: 760px) { [data-convo] .msgrow { max-width: 92%; } [data-convo] .mav { width: 24px; height: 24px; } }

/* ── Player panel variations (?panel=1|2|3) ── */
/* Shared: one identity row, one fact-list style, one quiet masked-data treatment, one fold style. No boxes, no eyebrows. */
[data-panel] .pv { padding-bottom: var(--space-8); }
[data-panel] .pv-id { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
[data-panel] .pv-id .pav { border-radius: var(--radius-sm); }
[data-panel] .pv-id .pav--none svg { width: 18px; height: 18px; }
[data-panel] .pv-who { flex: 1; min-width: 0; }
[data-panel] .pv-who h3 { margin: 0; font-size: 15px; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-panel] .pv-who p { margin: 2px 0 0; font-size: var(--tiny); color: var(--color-text-secondary); }
[data-panel] .pv-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-secondary); cursor: pointer; text-decoration: none; }
[data-panel] .pv-ico:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
[data-panel] .pv-x { display: none; }
@media (max-width: 1100px) { [data-panel] .pv-x { display: grid; } }
[data-panel] .pv-labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-5) 0; }
[data-panel] .pv-add { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-tertiary); font-size: var(--tiny); cursor: pointer; }
[data-panel] .pv-add:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
[data-panel] .pv-add svg { width: 13px; height: 13px; }
/* Sections: a heading with its one-line status on the right; the dot carries the tone so the words can stay calm */
[data-panel] .pv-sec { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
[data-panel] .pv-sh { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
[data-panel] .pv-sh h4 { margin: 0; font-size: var(--row); font-weight: var(--font-weight-semibold); white-space: nowrap; }
[data-panel] .pv-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--tiny); color: var(--color-text-secondary); text-align: right; }
[data-panel] .pv-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); }
[data-panel] .pv-dot.bad { background: var(--color-status-danger-solid); }
[data-panel] .pv-dot.warn { background: var(--color-status-warning-solid); }
[data-panel] .pv-dot.ok { background: var(--color-status-success-solid); }
[data-panel] .pv-case .in { display: flex; flex-direction: column; }
[data-panel] .pv-case .verdict { order: -1; margin: 0 0 var(--space-2); } /* the answer before the checks */
[data-panel] .lines li.pv-fail > span:first-child { color: var(--color-status-danger-fg); font-weight: var(--font-weight-medium); }
/* Facts: one grid for game and account; masked values are quieter, one Reveal per group */
[data-panel] .pv-gh { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin: var(--space-4) 0 var(--space-2); }
[data-panel] .pv-gh:first-child { margin-top: 0; }
[data-panel] .pv-gh h4 { margin: 0; font-size: var(--tiny); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
[data-panel] .pv-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px var(--space-3); margin: 0; font-size: var(--tiny); }
[data-panel] .pv-kv > div { display: contents; }
[data-panel] .pv-kv dt { color: var(--color-text-tertiary); }
[data-panel] .pv-kv dd { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; font-variant-numeric: tabular-nums; }
[data-panel] .pv-kv dd.pv-m { color: var(--color-text-secondary); }
[data-panel] .pv-reveal { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-right: -6px; margin-left: auto; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-link); font-size: var(--tiny); font-weight: var(--font-weight-medium); cursor: pointer; }
[data-panel] .pv-reveal:hover { background: var(--color-bg-brand); }
[data-panel] .pv-logged { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-panel] .pv-reveal svg, [data-panel] .pv-logged svg { width: 14px; height: 14px; }
/* Folds: one line each, status on the right, chevron last */
[data-panel] .pv-d { border-top: 1px solid var(--color-border-subtle); }
[data-panel] .pv-d > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5); cursor: pointer; }
[data-panel] .pv-d > summary::-webkit-details-marker { display: none; }
[data-panel] .pv-d > summary:hover { background: var(--color-bg-surface); }
[data-panel] .pv-d > summary h4 { margin: 0; font-size: var(--row); font-weight: var(--font-weight-medium); white-space: nowrap; }
[data-panel] .pv-d .chev { flex: none; color: var(--color-text-tertiary); transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
[data-panel] .pv-d[open] > summary .chev { transform: rotate(90deg); }
[data-panel] .pv-d > .in { padding: var(--space-1) var(--space-5) var(--space-4); }
[data-panel] .pv-empty { padding: var(--space-4) var(--space-5); }

/* 1 · Case first: the case section is the only thing with weight */
[data-panel="1"] .pv-case { margin-top: var(--space-4); }
[data-panel="1"] .pv-case .pv-sh h4 { font-size: 15px; }

/* 2 · Tabs: three plain figures (no box), then a sticky tab bar that matches the inbox tabs */
[data-panel="2"] .pv-figs { display: flex; gap: var(--space-6); margin: 0; padding: var(--space-4) var(--space-5) 0; }
[data-panel="2"] .pv-figs > div { min-width: 0; }
[data-panel="2"] .pv-figs dt { font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-panel="2"] .pv-figs dd { margin: 1px 0 0; font-size: 15px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-panel="2"] .pv-tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: var(--space-5); margin-top: var(--space-4); padding: 0 var(--space-5); background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-subtle); overflow-x: auto; scrollbar-width: none; }
[data-panel="2"] .pv-tabs::-webkit-scrollbar { display: none; }
[data-panel="2"] .pv-tab { position: relative; display: inline-flex; align-items: baseline; gap: 5px; height: 42px; padding: 12px 0 0; border: 0; background: none; color: var(--color-text-secondary); font-size: var(--row); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; }
[data-panel="2"] .pv-tab:hover { color: var(--color-text-primary); }
[data-panel="2"] .pv-tab[aria-selected="true"] { color: var(--color-text-primary); }
[data-panel="2"] .pv-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-text-primary); }
[data-panel="2"] .pv-tab .n { font-size: var(--tiny); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
[data-panel="2"] .pv-pane > .pv-sec:first-child, [data-panel="2"] .pv-pane > .pv-d:first-child { border-top: 0; }

/* 3 · Brief: the boldness is the question; the profile is a sentence, not a table */
[data-panel="3"] .pv-brief { margin: var(--space-4) var(--space-5) 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); text-wrap: pretty; }
[data-panel="3"] .pv-brief b { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
[data-panel="3"] .pv-link { margin-left: auto; font-size: var(--tiny); color: var(--color-text-link); white-space: nowrap; }
[data-panel="3"] .pv-case { margin-top: var(--space-5); padding-top: var(--space-5); }
[data-panel="3"] .pv-q { margin: 0; font-family: var(--font-family-display); font-size: 18px; line-height: 1.25; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
[data-panel="3"] .pv-qs { display: flex; align-items: center; gap: var(--space-2); margin: 4px 0 var(--space-3); }
[data-panel="3"] .pv-st--left { margin-left: 0; color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
[data-panel="3"] .pv-src { margin-left: auto; font-size: var(--tiny); color: var(--color-text-tertiary); }
[data-panel="3"] .pv-more { margin: 0; padding: var(--space-6) var(--space-5) var(--space-2); font-size: var(--tiny); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); border-top: 1px solid var(--color-border-subtle); }
[data-panel="3"] .pv-more + .pv-d { border-top: 0; }

/* ── Auto-replies (12 Nov) ── */
.cv-auto { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-2); margin-right: var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--tiny); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.cv-auto:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.cv-auto svg { width: 14px; height: 14px; } .cv-auto svg:last-child { width: 12px; height: 12px; color: var(--color-text-tertiary); }
.cv-auto.on { color: var(--color-status-success-fg); }
.cv-auto.on svg:first-child { color: var(--color-status-success-solid); }
[data-convo] .mav.auto { background: var(--color-bg-surface-raised); color: var(--color-text-secondary); } [data-convo] .mav.auto svg { width: 15px; height: 15px; }
[data-convo] .msg.staff.auto .msg__body { background: var(--color-bg-surface); box-shadow: none; color: var(--color-text-secondary); }
[data-convo] .msg.staff.auto .msg__by { color: var(--color-text-tertiary); }
.autodlg { width: min(620px, calc(100vw - 32px)); max-height: min(86vh, 820px); padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-canvas); color: var(--color-text-primary); box-shadow: var(--elevation-dialog); }
.autodlg::backdrop { background: rgb(0 0 0 / .28); }
.autodlg__in { display: flex; flex-direction: column; max-height: inherit; }
.autodlg header { padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.autodlg h2 { margin: 0 0 4px; font-family: var(--font-family-display); font-size: 18px; }
.autodlg header p, .autodlg footer p { margin: 0; font-size: var(--tiny); color: var(--color-text-secondary); }
.autodlg__list { overflow: auto; padding: var(--space-2) var(--space-5); scrollbar-width: none; } .autodlg__list::-webkit-scrollbar { display: none; }
.arule { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); } .arule:last-child { border-bottom: 0; }
.arule__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.arule__h span { display: inline-flex; align-items: center; gap: var(--space-2); } .arule__h svg { width: 15px; height: 15px; color: var(--color-text-secondary); }
.arule textarea { width: 100%; resize: vertical; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font: inherit; font-size: var(--row); line-height: 1.45; color: var(--color-text-primary); background: var(--color-bg-canvas); }
.arule textarea:focus { outline: none; border-color: var(--color-text-primary); }
.arule.off textarea { color: var(--color-text-tertiary); background: var(--color-bg-surface); }
.arule__err { margin: 4px 0 0; font-size: var(--tiny); color: var(--color-status-danger-fg); } .arule__err:empty { display: none; }
.sw { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; } .sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--color-border-default); transition: background-color 150ms ease; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform 150ms ease; } /* DS gap: switch knob */
.sw input:checked + i { background: var(--color-status-success-solid); } .sw input:checked + i::after { transform: translateX(14px); }
.sw input:focus-visible + i { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
.autodlg footer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); } .autodlg footer p { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .sw i, .sw i::after { transition: none; } }
@media (max-width: 760px) { .cv-auto { font-size: 0; gap: 2px; } .cv-auto svg:first-child { width: 16px; height: 16px; } .autodlg footer { flex-wrap: wrap; } .autodlg footer p { flex-basis: 100%; } }

/* ── Team-made category tabs (12 Nov): own tab after Other, × hides it (it stays under Other ▾) ── */
.ctab { position: relative; display: inline-flex; align-items: center; flex: none; }
.ctab .tab { padding-right: 26px; }
.ctab__x { position: absolute; right: 2px; top: 50%; width: 20px; height: 20px; margin-top: -10px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-tertiary); cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.ctab__x svg { width: 12px; height: 12px; }
.ctab:hover .ctab__x, .ctab__x:focus-visible, .ctab .tab[aria-selected="true"] + .ctab__x { opacity: 1; }
.ctab__x:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
@media (hover: none) { .ctab__x { opacity: 1; } }

/* ── Confirm dialog variations (?confirm=1|2) ── 12 Nov. Replaces the anchored confirm bubble only when the param is set; motion lives in app.js (WAAPI). */
.cfm { padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-canvas); color: var(--color-text-primary); box-shadow: var(--elevation-dialog); max-width: calc(100vw - 32px); overflow: hidden; }
.cfm::backdrop { background: var(--color-alpha-black-10); }
.cfm__in { padding: var(--space-5); }
.cfm:focus { outline: none; }
.cfm__ic { display: none; }
.cfm__t { margin: 0; font-family: var(--font-family-display); font-size: 17px; line-height: 1.3; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; text-wrap: balance; } /* DS gap: 17px dialog title (matches .help h2) */
.cfm__b { margin: 6px 0 0; font-size: var(--row); line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; }
.cfm__b:empty { display: none; }
.cfm__f { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.cfm__go.is-danger { background: var(--color-status-danger-solid); color: var(--color-status-danger-on-solid); }
.cfm__go.is-danger:hover { background: color-mix(in srgb, var(--color-status-danger-solid) 88%, black); } /* DS gap: danger solid hover */
.cfm .b:active { transform: scale(var(--motion-scale-press)); }
.cfm .b:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* 1 · From the button: a compact card that grows out of the control you pressed and folds back into it on Cancel. */
[data-confirm="1"] .cfm { width: 380px; }

/* 2 · Centred decision: wider, a tone tile names the kind of action, buttons sit on a footer band. */
[data-confirm="2"] .cfm { width: 440px; }
[data-confirm="2"] .cfm::backdrop { background: var(--color-alpha-black-16); }
[data-confirm="2"] .cfm__in { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
[data-confirm="2"] .cfm__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-text-primary); }
[data-confirm="2"] .cfm__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-confirm="2"] .cfm.is-danger .cfm__ic { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
[data-confirm="2"] .cfm__t { font-size: 18px; padding-top: 9px; } /* optical: first line centres on the 40px tile */
[data-confirm="2"] .cfm__b { margin-top: 4px; }
[data-confirm="2"] .cfm__f { grid-column: 1 / -1; margin: var(--space-6) calc(-1 * var(--space-6)) 0; padding: var(--space-3) var(--space-6); background: var(--color-bg-surface); border-top: 1px solid var(--color-border-subtle); }
@media (max-width: 480px) {
  [data-confirm="2"] .cfm__in { grid-template-columns: 1fr; }
  [data-confirm="2"] .cfm__ic { margin-bottom: var(--space-3); }
  [data-confirm="2"] .cfm__t { padding-top: 0; }
  .cfm__f .b { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cfm .b:active { transform: none; } }

/* ── Confirm dialog styles (?cstyle=1|2|3) ── 12 Nov. On top of the centred dialog (confirm=2); no param = confirm=2 as built.
   Shared: no grey footer band, even padding, the DS light danger solid (red-700, white 6.0:1) with a hover that lifts instead of going muddy. */
.cfm__who[hidden] { display: none; }
[data-cstyle] .cfm__f { grid-column: auto; margin: var(--space-6) 0 0; padding: 0; background: none; border: 0; }
[data-cstyle] .cfm__t { padding-top: 0; font-size: var(--font-size-18); }
[data-cstyle] .cfm__go.is-danger:hover { background: color-mix(in srgb, var(--color-status-danger-solid) 88%, var(--color-red-400)); } /* DS gap: danger solid hover (lifts toward red-400, not black) */
[data-cstyle] .cfm__naira { font-family: var(--font-family-display); font-size: var(--font-size-20); font-weight: var(--font-weight-semibold); line-height: 1; }

/* 1 · Flat white: words and two buttons, nothing else. The red verb carries the danger; Cancel is a quiet text button. */
[data-cstyle="1"] .cfm { width: 400px; }
[data-cstyle="1"] .cfm__in { display: block; padding: var(--space-6); }
[data-cstyle="1"] .cfm__ic { display: none; }
[data-cstyle="1"] .cfm__b { margin-top: var(--space-2); }
[data-cstyle="1"] .cfm__f [data-cf="no"] { border-color: transparent; color: var(--color-text-secondary); }
[data-cstyle="1"] .cfm__f [data-cf="no"]:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }

/* 2 · Stacked and centred: one round mark names the kind of action, then the question, then two equal buttons. Calm, thumb-sized. */
[data-cstyle="2"] .cfm { width: 360px; }
[data-cstyle="2"] .cfm__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-6) var(--space-6); }
[data-cstyle="2"] .cfm__ic { width: 48px; height: 48px; margin: 0 0 var(--space-4); border-radius: var(--radius-pill); }
[data-cstyle="2"] .cfm__ic svg { width: 22px; height: 22px; }
[data-cstyle="2"] .cfm__b { margin: var(--space-2) auto 0; max-width: 32ch; }
[data-cstyle="2"] .cfm__f { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
[data-cstyle="2"] .cfm__f .b { height: 40px; } /* DS gap: 40px button height (thumb-sized, between the admin's 34px and the game's 48px) */

/* 3 · Subject first: who (or what) the action lands on, as the app already shows them, then the question and the consequence.
   Without a handle in the text (Dismiss, Restore, Give back) it falls back to style 1. */
[data-cstyle="3"] .cfm { width: 420px; }
[data-cstyle="3"] .cfm__in { display: block; padding: var(--space-6); }
[data-cstyle="3"] .cfm__ic { display: none; }
[data-cstyle="3"] .cfm__who { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
[data-cstyle="3"] .cfm__av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-bg-brand); color: var(--color-text-accent); font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); }
[data-cstyle="3"] .cfm__av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
[data-cstyle="3"] .cfm__id { display: grid; gap: 2px; min-width: 0; }
[data-cstyle="3"] .cfm__id b { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-cstyle="3"] .cfm__id span { font-size: var(--tiny); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-cstyle="3"] .cfm__b { margin-top: var(--space-1); }
[data-cstyle="3"] .cfm__f [data-cf="no"] { border-color: transparent; color: var(--color-text-secondary); }
[data-cstyle="3"] .cfm__f [data-cf="no"]:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
@media (max-width: 480px) {
  [data-cstyle] .cfm__in { padding: var(--space-5); }
  [data-cstyle="2"] .cfm__in { padding-top: var(--space-6); }
  [data-cstyle] .cfm__f { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  [data-cstyle] .cfm__f .b { height: 40px; } /* DS gap: as style 2 */
  [data-cstyle="1"] .cfm__f [data-cf="no"], [data-cstyle="3"] .cfm__f [data-cf="no"] { border-color: var(--color-border-default); color: var(--color-text-primary); } /* equal halves need an edge to read as a button */
}
/* "Open in Players": labelled, not a mystery arrow (12 Nov) */
[data-panel] .pv-ico.pv-open { width: auto; gap: 4px; padding: 0 var(--space-2); font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-decoration: none; display: inline-flex; align-items: center; }
[data-panel] .pv-ico.pv-open svg { width: 13px; height: 13px; }
[data-panel] .pv-ico.pv-open:hover { color: var(--color-text-primary); }

/* ── Player labels with meaning-colour (12 Nov) ── */
.plabel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-2); border: 0 !important; border-radius: var(--radius-sm); font-size: var(--tiny); font-weight: var(--font-weight-medium); }
.plabel svg { display: none; }
.plabel.t-success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.plabel.t-warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.plabel.t-danger { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.plabel.t-info { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.plabel.t-brand { background: var(--color-bg-brand); color: var(--color-text-accent); }
.plabel.t-neutral { background: var(--color-bg-surface-raised); color: var(--color-text-secondary); }
.ldot.brand { background: var(--color-text-accent); } .ldot.neutral { background: var(--color-text-tertiary); }
.lswatch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 2px 0; }
.lswatch label { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-xs); font-size: var(--tiny); font-weight: var(--font-weight-regular, 400) !important; cursor: pointer; }
.lswatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lswatch label:has(input:checked) { border-color: var(--color-border-default); background: var(--color-bg-surface); }
.lswatch label:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring-color); }

/* ── Player profile drawer ── 12 Nov. "Profile ↗" in the player panel opens this over the inbox (app.js, openProfile).
   One white sheet, hairline sections, no cards. The boldness is spent once: the identity and three big figures. */
.pf { position: fixed; inset: 0; z-index: 28; } /* under menus (30) and the toast (40), so confirms and Undo sit on top */
.pf__scrim { position: absolute; inset: 0; background: var(--color-alpha-black-16); opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-easing-exit); }
.pf__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column; background: var(--color-bg-canvas); color: var(--color-text-primary); border-left: 1px solid var(--color-border-subtle); box-shadow: var(--elevation-dialog); transform: translateX(100%); transition: transform var(--motion-duration-base) var(--motion-easing-exit); outline: none; }
/* In: a long iOS-style settle so it reads as a sheet arriving. Out: quicker, accelerating away. Both interruptible (transitions). */
.pf.is-open .pf__scrim { opacity: 1; transition: opacity var(--motion-duration-base) var(--motion-easing-out); }
.pf.is-open .pf__panel { transform: none; transition: transform var(--motion-duration-open) var(--motion-easing-out-ios); }
.pf__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.pf__scroll::-webkit-scrollbar { display: none; }
.pf__x { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--color-bg-canvas); color: var(--color-text-secondary); cursor: pointer; }
.pf__x:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.pf__x svg { width: 18px; height: 18px; }
.pf .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Identity */
.pf__head { padding: var(--space-8) var(--space-8) 0; }
.pf__id { display: flex; align-items: center; gap: var(--space-5); padding-right: var(--space-10); }
.pf__av { flex: none; width: 72px; height: 72px; border-radius: var(--radius-sm); background: var(--color-bg-brand); object-fit: cover; object-position: center 20%; }
.pf__who { min-width: 0; }
.pf__name { margin: 0; font-family: var(--font-family-display); font-size: 26px; line-height: 1.15; font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; overflow-wrap: anywhere; } /* DS gap: 26px drawer title */
.pf__sub { margin: 4px 0 0; font-size: var(--row); color: var(--color-text-secondary); }
.pf__seen { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--tiny); color: var(--color-text-tertiary); }
.pf-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); }
.pf-dot.ok { background: var(--color-status-success-solid); }
.pf-dot.warn { background: var(--color-status-warning-solid); }
.pf-dot.bad { background: var(--color-status-danger-solid); }
.pf__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }
.pf-state { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); font-size: var(--tiny); font-weight: var(--font-weight-medium); }
.pf-state svg { width: 13px; height: 13px; }
.pf-state.warn { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.pf-state.bad { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.pf__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-6) 0 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.pf__figs > div { min-width: 0; padding: var(--space-4) 0; }
.pf__figs > div + div { padding-left: var(--space-5); border-left: 1px solid var(--color-border-subtle); }
.pf__figs dt { font-size: var(--tiny); color: var(--color-text-tertiary); }
.pf__figs dd { margin: 2px 0 0; font-family: var(--font-family-display); font-size: 24px; line-height: 1.2; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* DS gap: 24px figure */
.pf__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-5); }
.pf__acts .b { height: 32px; padding: 0 12px; }
.pf__acts .b svg { width: 15px; height: 15px; }
.b.pf-danger { color: var(--color-status-danger-fg); }
.b.pf-danger:hover { background: var(--color-status-danger-bg); border-color: var(--color-border-default); }
.pf-soon { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; height: 32px; padding: 0 4px; border: 0; background: none; font-size: var(--row); color: var(--color-text-disabled); cursor: not-allowed; }
.pf-soon span { font-size: var(--tiny); color: var(--color-text-tertiary); }

/* Tabs: match the inbox and panel tabs (underline, no pills), stick under the top while the pane scrolls */
.pf__tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: var(--space-6); padding: 0 calc(var(--space-8) + 40px) 0 var(--space-8); background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border-subtle); overflow-x: auto; scrollbar-width: none; }
.pf__tabs::-webkit-scrollbar { display: none; }
.pf__tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 2px 0 0; border: 0; background: none; color: var(--color-text-secondary); font-size: var(--row); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; }
.pf__tab:hover { color: var(--color-text-primary); }
.pf__tab[aria-selected="true"] { color: var(--color-text-primary); }
.pf__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-text-primary); }
.pf__tab .n { font-size: var(--tiny); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.pf__tab .pf-dot { width: 6px; height: 6px; }
.pf__tab:focus-visible { outline-offset: -2px; }

/* Panes: hairline sections, heading left, one-line status right */
.pf__pane { padding: 0 var(--space-8) var(--space-12); }
.pf__pane:focus { outline: none; } .pf__pane:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -2px; }
.pf-sec { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-subtle); }
.pf__pane > .pf-sec:first-child, .pf-hold + .pf-sec { border-top: 0; }
.pf-sh { display: flex; align-items: center; gap: var(--space-3); min-height: 24px; margin-bottom: var(--space-3); }
.pf-sh h3 { margin: 0; font-size: 15px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.pf-side { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--tiny); color: var(--color-text-secondary); text-align: right; }
.pf-kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px var(--space-4); margin: 0; font-size: var(--row); }
.pf-kv > div { display: contents; }
.pf-kv dt { color: var(--color-text-tertiary); }
.pf-kv dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pf-kv dd.pf-m { color: var(--color-text-secondary); letter-spacing: 0.02em; }
.pf .lines { font-size: var(--row); }
.pf .lines li { padding: 9px 0; }
.pf .lines .r { font-size: var(--tiny); }
.pf .lines li.pf-fail > span:first-child { color: var(--color-status-danger-fg); font-weight: var(--font-weight-medium); }
.pf .tx code { display: block; margin-top: 2px; }
.pf-ev .ev li { padding: 9px 0; }
.pf-ev .verdict { margin-top: var(--space-3); }
.pf-empty { margin: 0; font-size: var(--row); color: var(--color-text-tertiary); }
.pf-text { margin: 0; font-size: var(--row); color: var(--color-text-secondary); }
.pf-reveal { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-right: -6px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-text-link); font-size: var(--tiny); font-weight: var(--font-weight-medium); cursor: pointer; }
.pf-reveal:hover { background: var(--color-bg-brand); }
.pf-logged { display: inline-flex; align-items: center; gap: 5px; font-size: var(--tiny); color: var(--color-text-tertiary); }
.pf-reveal svg, .pf-logged svg { width: 14px; height: 14px; }
.pf-hold { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); font-size: var(--row); }
.pf-hold svg { width: 15px; height: 15px; margin-top: 2px; }
.pf-hold + .pf-sec { margin-top: var(--space-1); }
.pf-note { margin: 0 0 var(--space-3); padding: 0 0 0 var(--space-3); border-left: 2px solid var(--color-border-default); font-size: var(--row); text-wrap: pretty; }
.pf-note small { display: block; margin-top: 2px; font-size: var(--tiny); color: var(--color-text-tertiary); }
/* Support history: each conversation is a row you can jump to; the one you came from is marked */
.pf-convs { list-style: none; margin: 0 calc(-1 * var(--space-3)); padding: 0; }
.pf-conv { width: 100%; display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; }
.pf-conv:hover { background: var(--color-bg-surface); }
.pf-conv.is-here { box-shadow: inset 2px 0 0 var(--color-text-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pf-conv__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-conv__t b { font-weight: var(--font-weight-semibold); }
.pf-conv__q { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-conv__m { font-size: var(--tiny); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.pf-convs + .pf-empty { margin-top: var(--space-2); }

@media (max-width: 760px) {
  .pf__panel { width: 100vw; border-left: 0; box-shadow: none; }
  .pf__x { top: var(--space-3); right: var(--space-3); }
  .pf__head { padding: var(--space-6) var(--space-4) 0; }
  .pf__id { gap: var(--space-4); }
  .pf__av { width: 56px; height: 56px; }
  .pf__name { font-size: 22px; }
  .pf__figs { margin-top: var(--space-5); }
  .pf__figs { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.9fr); } /* the wallet gets the room */
  .pf__figs > div + div { padding-left: var(--space-3); }
  .pf__figs dd { font-size: 20px; }
  .pf__acts .b--ghost { border-color: var(--color-border-default); } /* wraps to its own row: give it an edge so it doesn't float */
  .pf__tabs { gap: var(--space-5); padding: 0 calc(var(--space-4) + 44px) 0 var(--space-4); } /* clear of the × when stuck */
  .pf__pane { padding: 0 var(--space-4) var(--space-10); }
  .pf-kv { grid-template-columns: 104px minmax(0, 1fr); }
  .pf-convs { margin: 0 calc(-1 * var(--space-2)); }
  .pf-conv { gap: var(--space-3); padding: var(--space-3) var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .pf__scrim, .pf__panel, .pf.is-open .pf__scrim, .pf.is-open .pf__panel { transition: none; } }

/* ── Status menu, compact (12 Nov): fits its words, smaller rows, current one in the Lilac selected style ── */
#menu:has(.sti) { min-width: 0; }
#menu:has(.sti) button { min-height: 0; height: 30px; padding: 0 var(--space-3) 0 10px; gap: var(--space-2); font-size: var(--small); } /* DS gap: 30px compact menu row */
#menu .sti { display: inline-flex; flex: none; } #menu .sti svg { width: 14px; height: 14px; }
#menu .sti.accent { color: var(--color-text-accent); } #menu .sti.warning { color: var(--color-status-warning-fg); }
#menu .sti.info { color: var(--color-status-info-fg); } #menu .sti.neutral { color: var(--color-text-tertiary); }

/* ── UX review fixes (12 Nov) ── */
/* 1 · Numbers once: the header carries open / closing / first reply, so the queue heading's count line goes (?strip=1 brings it back) */
html:not([data-strip="1"]) #strip { display: none; }
/* 2 · Warning once: when the Auto check banner is showing in the conversation, the panel's red "Don't reset" box steps back; the "Warning signs" dot on the section stays */
html:has(.cv-alert, .cv-next.is-auto) .verdict.stop { display: none; }
/* 3 · Docked toolbar fits one line on laptops: short category name below 1440 */
[data-convo="2"] .cv-seg__s { display: none; }
@media (max-width: 1439px) { [data-convo="2"] .cv-seg__l { display: none; } [data-convo="2"] .cv-seg__s { display: inline; } [data-convo="2"] .cv-head .cv-due .cv-long { display: none; } }
/* 4 · Assignee face in its own column, never on top of the labels */
[data-rows="2"] .rv:has(.rv__who2 .mini-av, .rv__who2 img) .row__text { grid-column: 3; } /* the message line gives way (it already ends in …), the labels keep their full width */
.rv__who2 { grid-column: 4; grid-row: 2; justify-self: end; align-self: center; display: flex; }
.rv__who2:empty { display: none; }
/* 5 · Phone: no team faces in the bar; tabs and labels scroll with a soft fade at the edge */
@media (max-width: 760px) {
  .hx-team, .top .hstack { display: none !important; }
  .tabs, .lstrip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 32px; }
}
/* Panel identity stays on one line on laptops: "Lagos Life ·" drops below 1440 (the home world is in the Player tab) */
[data-panel] .pv-who p { white-space: nowrap; }
[data-panel] .pv-since { display: none; }
@media (max-width: 1439px) { [data-panel] .pv-world { display: none; } [data-panel] .pv-since { display: inline; } }

/* Phone: the next-step / auto check action becomes a full-width button under the text, instead of an indented one (12 Nov) */
@media (max-width: 760px) {
  [data-convo="2"] .cv-next { flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  [data-convo="2"] .cv-next > svg { margin-top: 3px; }
  [data-convo="2"] .cv-next__t { flex: 1 1 0; }
  [data-convo="2"] .cv-next .b { order: 3; flex: 1 1 100%; margin-left: 0; justify-content: center; height: 40px; } /* DS gap: 40px phone tap target */
  [data-convo="2"] .cv-next .cv-x { order: 2; }
}
/* Phone conversation header (12 Nov): back · name · player button on one row, then who's viewing, then the toolbar wrapping inside the pane */
@media (max-width: 760px) {
  [data-convo="2"] .cv-head .back { order: 0; }
  [data-convo="2"] .cv-id { order: 1; flex: 1 1 0; min-width: 0; }
  [data-convo="2"] .cv-head .ptoggle { order: 2; margin-left: auto; }
  [data-convo="2"] .cv-head .presence { order: 3; }
  [data-convo="2"] .cv-tools { order: 4; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  [data-convo="2"] .cv-tools .cv-seg { max-width: 100%; }
}

/* ── Interaction pass (12 Nov) ── 
   Pairs with the block at the end of app.js. Everything is scoped to :root[data-ix], which ?motion=0 never sets,
   except the new-message pill slot (a layout fix that stays on). One curve: --motion-easing-out. */

/* Pill slot: the pill lives above the list now, so it can't sit on the first row. Its old list item stays empty and hidden. */
#list > li:empty { display: none; }
#list > li:empty + .rv { margin-top: 0; }
.ix-slot { flex: none; }
.ix-slot[hidden] { display: none; }

:root[data-ix] .queue, :root[data-ix] .list { position: relative; } /* frames for leaving rows and bars */
:root[data-ix] .bulk { position: relative; z-index: 2; } /* stays above the list while the list slides under it */
:root[data-ix] .bulk .count b { display: inline-block; }
:root[data-ix] .ix-ghost { pointer-events: none !important; }

/* Press: the JS scales buttons; the old 1px nudge would double up. The confirm dialog keeps its own press. */
:root[data-ix] .b:active:not(.is-disabled):not(.cfm .b) { transform: none; }
/* Rows: a press tints before the click lands. */
:root[data-ix] .list .row:active { background: var(--color-bg-surface); }

/* Menu highlight: one surface glides between items (hover and keyboard focus) instead of each item blinking. */
:root[data-ix] .menu > button:not(.b) { position: relative; z-index: 1; }
:root[data-ix] .menu > button:not(.b):hover, :root[data-ix] .menu > button:not(.b):focus-visible { background: none; }
:root[data-ix] .ix-hl { position: absolute; top: 0; left: var(--space-1); right: var(--space-1); z-index: 0; border-radius: var(--radius-xs); background: var(--color-bg-surface); opacity: 0; pointer-events: none;
  transition: transform var(--motion-duration-fast) var(--motion-easing-out), opacity var(--motion-duration-fast) var(--motion-easing-out); }

/* Composer tabs (Reply / Note): the underline becomes a real element so it can slide between them. Same 2px, same colour. */
:root[data-ix][data-convo="2"] .cv-modes .mode { position: relative; }
:root[data-ix][data-convo="2"] .cv-modes .mode[aria-pressed="true"] { box-shadow: none; }
:root[data-ix][data-convo="2"] .cv-modes .mode[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }

/* Folds: the chevron turns back as the fold starts closing, not after. */
:root[data-ix] details.ix-closing > summary .chev, :root[data-ix] details.ix-closing > summary svg:last-child { transform: none; }

/* Switches slide on the shared curve. */
:root[data-ix] .sw i { transition: background-color var(--motion-duration-base) var(--motion-easing-out); }
:root[data-ix] .sw i::after { transition: transform var(--motion-duration-base) var(--motion-easing-out); }

/* Notifications: the "new" tint fades once seen. */
:root[data-ix] .hnote { transition: background-color var(--motion-duration-slow) var(--motion-easing-out); }
:root[data-ix] .hnote.new.ix-seen { background: transparent; }

/* Toast: a hairline timer for the Undo window, and the "Undone" answer. */
:root[data-ix] .toast { overflow: hidden; }
:root[data-ix] .ix-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .3; transform-origin: 0 50%; pointer-events: none; }
:root[data-ix] .ix-undone { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-semibold); }
:root[data-ix] .ix-undone svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  :root[data-ix] .ix-hl { transition: none; }
  :root[data-ix] .ix-timer { display: none; }
}

/* Scripted player typing (12 Nov) */
.ptyping .tdots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ptyping .tdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-tertiary); animation: ptype 1.1s infinite ease-in-out; }
.ptyping .tdots i:nth-child(2) { animation-delay: .15s; } .ptyping .tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes ptype { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ptyping .tdots i { animation: none; opacity: .6; } }

/* ── Automated messages / broadcast (12 Nov) ── tab named "Broadcast" (Mikky, 12 Nov).
   One message to every player with an open conversation in a category. The broadcast screen takes the conversation
   pane and the player panel's column; its content sits in one centred column so a long line still reads. One lilac
   accent (the megaphone tile), everything else is the inbox's own composer, bubbles and flat buttons. */
.ws.bc-on { grid-template-columns: var(--queue-w) minmax(0, 1fr); }
.ws.bc-on > .player { display: none; }
.bc-tab svg:first-child { width: 15px; height: 15px; }

/* Dropdown */
#menu:has(.bc-mn) { width: 312px; } /* DS gap: fits "Restriction or moderation" + "12 players" */
#menu .bc-mh { margin: 0; padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--tiny); color: var(--color-text-tertiary); }
#menu .bc-mh b { display: block; margin-bottom: 2px; font-size: var(--row); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
#menu .bc-mn { flex: none; margin-left: var(--space-3); font-size: var(--font-size-12); color: var(--color-text-tertiary); white-space: nowrap; }
#menu > button.bc-off { color: var(--color-text-disabled); cursor: not-allowed; }
#menu > button.bc-off:hover { background: none; }
#menu > button.bc-off > svg { opacity: .5; }
#menu > button.bc-off small { color: var(--color-text-tertiary); }

/* Shared column: full-width scroll areas, content capped at 800px and centred */
.bc-head, .bc-list, #convo .bc-thread, #convo .composer.bc-comp { --bc-pad: max(var(--space-5), calc((100% - 800px) / 2)); padding-left: var(--bc-pad); padding-right: var(--bc-pad); } /* DS gap: 800px reading column */

/* Header */
.bc-head { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.bc-back { margin-left: calc(-1 * var(--space-2)); color: var(--color-text-secondary); }
.bc-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--color-bg-brand); color: var(--color-text-accent); }
.bc-ic svg { width: 17px; height: 17px; }
.bc-id { flex: 1 1 220px; min-width: 0; }
.bc-id h2 { margin: 0; font-family: var(--font-family-display); font-size: 17px; font-weight: var(--font-weight-semibold); line-height: 1.25; text-wrap: balance; } /* DS gap: 17px, as the conversation title */
.bc-id p { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: var(--tiny); color: var(--color-text-tertiary); }
#bcCount { color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-feature-settings: var(--font-feature-tabular); }
.bc-to { display: flex; align-items: center; gap: var(--space-2); }
.bc-see { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-canvas); font: inherit; font-size: var(--tiny); font-weight: var(--font-weight-medium); color: var(--color-text-primary); cursor: pointer; white-space: nowrap; }
.bc-see:hover { background: var(--color-bg-surface); }
.bc-see > svg { width: 13px; height: 13px; color: var(--color-text-tertiary); }
.bc-see > svg:last-child { width: 12px; height: 12px; transition: transform var(--motion-duration-fast) var(--motion-easing-out); }
.bc-see[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }

/* Avatar stack (header, confirm, history) */
.bc-stack { display: inline-flex; align-items: center; }
.bc-sav { width: 24px; height: 24px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--color-bg-brand); box-shadow: 0 0 0 2px var(--color-bg-canvas); color: var(--color-text-tertiary); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); }
.bc-stack .bc-sav + .bc-sav { margin-left: -6px; }
.bc-sav img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.bc-sav svg { width: 12px; height: 12px; }
.bc-sav.more { background: var(--color-bg-surface); color: var(--color-text-secondary); }
.cfm__who .bc-stack .bc-sav { width: 32px; height: 32px; }
.cfm__who .bc-stack .bc-sav + .bc-sav { margin-left: -8px; }

/* Recipient list (See all) */
.bc-list { flex: none; max-height: min(42%, 320px); overflow: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-bg-canvas); scrollbar-width: none; }
.bc-list::-webkit-scrollbar { display: none; }
.bc-list__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0 var(--space-2); font-size: var(--tiny); color: var(--color-text-tertiary); }
.bc-link { border: 0; background: none; padding: 0; font: inherit; color: var(--color-text-link); cursor: pointer; }
.bc-list ul { list-style: none; margin: 0; padding: 0; }
.bc-r { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-sm); cursor: pointer; } /* DS gap: dense row padding */
.bc-r:hover { background: var(--color-bg-surface); }
.bc-r input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--color-text-primary); cursor: pointer; }
.bc-r .bc-sav { width: 28px; height: 28px; box-shadow: none; }
.bc-r__t { min-width: 0; display: grid; }
.bc-r__t b { font-weight: var(--font-weight-semibold); }
.bc-r__t small { font-size: var(--tiny); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-r:has(input:not(:checked)) .bc-r__t, .bc-r:has(input:not(:checked)) .bc-sav { opacity: .45; }

/* Thread of what this category has been sent */
.bc-thread { flex: 1; }
.bc-thread .msgrow.staff { max-width: 80%; }
.bc-thread .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-tok { padding: 0 3px; border-radius: var(--radius-xs); background: var(--color-bg-brand); color: var(--color-text-accent); font-size: .95em; }
.bc-tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-right: 6px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--color-bg-brand); color: var(--color-text-accent); font-size: var(--font-size-11); font-weight: var(--font-weight-semibold); vertical-align: 1px; } /* DS gap: 18px tag */
.bc-tag svg { width: 11px; height: 11px; }
.bc-empty { margin: auto; max-width: 360px; display: grid; justify-items: center; gap: var(--space-3); text-align: center; color: var(--color-text-secondary); }
.bc-empty > svg { width: 24px; height: 24px; color: var(--color-text-accent); }
.bc-empty p { margin: 0; text-wrap: balance; }

/* Composer: the docked reply composer, with starters on top and the per-player preview under the text */
#convo .composer.bc-comp { flex: none; border-top: 0; padding-top: var(--space-2); padding-bottom: var(--space-4); }
.bc-box { border-color: var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-canvas); box-shadow: 0 1px 2px rgb(0 0 0 / .04); } /* DS gap: hairline shadow, as the reply composer */
#convo .bc-box.is-bad, #convo .bc-box.is-bad:focus-within { border-color: var(--color-status-danger-solid); }
.bc-starts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.bc-starts__l { font-size: var(--tiny); color: var(--color-text-tertiary); }
.bc-starts__b { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.bc-start, .bc-ins { height: 26px; padding: 0 var(--space-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xs); background: var(--color-bg-canvas); font: inherit; font-size: var(--tiny); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; } /* DS gap: 26px quiet control */
.bc-start:hover, .bc-ins:hover { border-color: var(--color-border-default); background: var(--color-bg-surface); color: var(--color-text-primary); }
.bc-ins { margin-left: auto; border-color: transparent; }
.bc-ins code { font: inherit; color: var(--color-text-accent); }
.bc-box textarea { min-height: 88px; resize: none; padding: var(--space-3); }
.bc-prev, .bc-err { margin: 0; padding: 0 var(--space-3) var(--space-2); font-size: var(--tiny); }
.bc-prev:empty, .bc-err:empty { display: none; }
.bc-prev { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.bc-prev .bc-sav { width: 18px; height: 18px; box-shadow: none; }
.bc-prev__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-prev__t b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.bc-err { color: var(--color-status-danger-fg); }
.bc-foot { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2) var(--space-3); border-top: 0; }
#convo .bc-hint { margin-right: auto; font-size: var(--tiny); color: var(--color-text-tertiary); }
.bc-hint kbd { font-size: 10px; padding: 2px 4px; } /* DS gap: kbd inside a 32px control, as the reply composer */
#bcGo { height: 32px; padding: 0 var(--space-3); font-size: var(--tiny); }
#bcGo svg { width: 14px; height: 14px; }

/* Sent broadcasts */
.bc-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.bc-h { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); }
.bc-h:first-child { padding-top: 0; }
.bc-h__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--tiny); color: var(--color-text-tertiary); }
.bc-h__cat { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.bc-h__cat svg { width: 14px; height: 14px; color: var(--color-text-tertiary); }
.bc-h__t { margin: var(--space-2) 0 var(--space-3); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-h__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--tiny); color: var(--color-text-secondary); }
.bc-h__foot .b { margin-left: auto; height: 30px; padding: 0 var(--space-2); font-size: var(--tiny); }
.bc-h__foot .b svg { width: 13px; height: 13px; }

@media (max-width: 1100px) { .ws.bc-on { grid-template-columns: var(--queue-w) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ws.bc-on { grid-template-columns: 1fr; }
  .bc-head, .bc-list, #convo .bc-thread, #convo .composer.bc-comp { --bc-pad: var(--space-4); }
  .bc-head { padding-top: var(--space-2); }
  .bc-ic, #convo .bc-hint { display: none; }
  .bc-id { flex-basis: calc(100% - 50px); }
  .bc-to { flex-basis: 100%; padding-left: 38px; } /* DS gap: lines up under the title, past the back button */
  .bc-see { margin-left: auto; }
  .bc-thread .msgrow.staff { max-width: 92%; }
  #convo .composer.bc-comp { padding-left: var(--space-3); padding-right: var(--space-3); padding-bottom: var(--space-3); }
  .bc-ins { margin-left: 0; }
  .bc-prev { align-items: flex-start; } .bc-prev__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #bcGo { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .bc-see > svg:last-child { transition: none; } }

/* Auto-close countdown (12 Nov): quiet, not red; it's the player's move */
[data-convo] .cv-due--idle { color: var(--color-text-tertiary); }
[data-convo] button.cv-due--idle { border: 0; background: none; padding: 2px 6px; margin: -2px -6px; border-radius: var(--radius-xs); font: inherit; cursor: pointer; }
[data-convo] button.cv-due--idle:hover { background: var(--color-bg-surface); color: var(--color-text-secondary); }

/* Overview tab (12 Nov): a link to dashboard.html, first in the tab bar */
a.tab--ov { text-decoration: none; }