/* The filter sidebar. Every filter is one row with its own count, because the number behind a filter is what decides
   whether it is worth a click. The sidebar's geometry (and when it becomes a slide-over) is in app.css. */
.filter-section { display: flex; flex-direction: column; gap: var(--sp-1); }
.filter-section-head { margin: 0; }
/* A section heading is also the control that folds it, so it is a button — but it reads as a heading, not a button:
   no border, no fill, only the label's own weight and the caret that says which way it is. */
.filter-section-toggle { display: flex; align-items: center; gap: var(--sp-1); width: 100%; padding: var(--sp-1) var(--sp-2); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.filter-section-toggle:hover { color: var(--text); }
.filter-section-toggle::before { content: "▾"; font-size: 10px; line-height: 1; transition: transform var(--ease); }
.filter-section-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.filter-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* One row, one filter: label on the left, its count on the right, the whole row a target rather than the text alone. */
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; min-height: 32px; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.filter-row:hover { background: var(--surface-2); }
.filter-row[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.filter-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count is information, not an alert: it sits in the neutral tint until its row is the one selected. */
.filter-row-count { flex: none; background: var(--neutral-soft); color: var(--muted); font-weight: 600; }
.filter-row[aria-pressed="true"] .filter-row-count { background: var(--accent); color: var(--accent-ink); }
.filter-clear { margin-top: auto; }

/* The queue header: the search an agent touches all day, and — only where the sidebar is not a column — the button
   that brings the sidebar in over the list. */
.queue-search { display: flex; align-items: center; gap: var(--sp-2); }
.queue-search input { flex: 1; min-width: 0; min-height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); padding: 0 var(--sp-3); }
.queue-search input:focus-visible { border-color: var(--accent); }
.queue-filters-toggle { flex: none; }
.queue-showing { margin: 0; font-size: var(--fs-sm); }

/* The rows are rebuilt on every list change. Browser scroll anchoring would misread that as content shifting and
   jump the page to the bottom on a narrow screen, where the page itself scrolls. */
.list-pane { display: flex; flex-direction: column; overflow-y: auto; overflow-anchor: none; }
.list-pane:focus-visible { outline: none; } /* focusable by script only (tabindex -1), so it needs no ring of its own */
.list-alert { flex: none; position: sticky; top: 0; z-index: 1; }
.list-rows { flex: 1 0 auto; display: flex; flex-direction: column; }
.list-foot { flex: none; }
.list-banner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); color: var(--warn); font-size: var(--fs-sm); }
.list-row { display: flex; flex: none; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.list-row:hover, .list-row.cursor { background: var(--surface-2); }
.list-row.active { background: var(--accent-soft); }
.list-row:focus-visible { outline-offset: -2px; }
.list-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); justify-content: center; }
.list-row-top, .list-row-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
/* The customer's name is the one human element in a queue of rows, so it is the one thing set in a text
   serif. Everything else on the row is operational data and stays in the interface sans. */
.list-row-name { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-time { flex-shrink: 0; font-size: var(--fs-sm); }
.list-row-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.list-row-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* A label's own color is arbitrary, so it only tints a dot: the chip text stays token text on a token background
   and keeps its contrast in both themes. The dot has a token-colored ring so a white or near-background color
   is still visible. JS sets --label-color per element (CSP forbids style attributes). */
.label-chip { --label-color: var(--muted); display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--r-pill); background: var(--neutral-soft); font-size: 11px; color: var(--text); }
.label-chip::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--muted); border-radius: 50%; background: var(--label-color); flex: none; }
.list-sentinel { height: 1px; flex: none; }