/**
 * sales-reps-dialer-calls.css — Sales Reps: the Dialer's calls and queue (js/sales-reps-dialer-calls.js), and the
 * pieces a call's record shows: the conversation (.sr-tx) and the recording's player (.srd-player), also drawn by the
 * manager's Call reviews for a rep's call (js/sales-reps-manager.js).
 *
 * Built from the shared Sales Reps pieces (css/sales-reps.css: .sr-tbl, .sr-choice, .sr-label, .sr-empty; the
 * manager's .sr-mgr helpers) and the app-shell primitives (.card, .btn, .badge, .select). The conversation copies the
 * approved playground's transcript (docs/projects/sales-reps/playground-v0.3.html .transcript .line): who in small
 * capitals on the left, what they said beside it. Colours are design tokens only. Everything is prefixed (srd-, sr-tx)
 * or scoped under .srd, so nothing else moves. After sales-reps-manager.css.
 */

.srd-show { margin-bottom: 14px; }
.srd .srd-filters-wrap { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border-soft); }
.srd .srd-filters { align-items: flex-end; gap: 12px; }
.srd-filter { display: flex; flex-direction: column; gap: 5px; min-width: 180px; flex: 0 1 220px; }
.srd-filter .select { width: 100%; }
.srd .srd-pager { padding: 12px 20px; border-top: 1px solid var(--border-soft); }

/* The calls table: when, who (with what it learned under the name), how it went, and the recording. */
.srd .srd-tbl td { vertical-align: top; }
.srd .srd-when { white-space: nowrap; }
.srd .srd-sum { color: var(--text-2); margin-top: 4px; max-width: 48ch; }
.srd .srd-meta, .srd .srd-nowrap { white-space: nowrap; }
.srd .srd-leads td:nth-child(2) { max-width: 260px; }
.srd .srd-badges { gap: 8px; }
.srd .srd-line { margin-top: 4px; color: var(--text-2); }
.srd .srd-rec-cell { white-space: nowrap; }
.srd-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); }
.srd-rec i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--accent); }
.srd-cell-k { display: none; }   /* a cell's own heading, for the stacked layout below, where the table head is hidden */
.srd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The queue's actions sit at the row's end; Stop reads as the serious one. */
.srd .srd-acts { justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
.srd .srd-stop { color: var(--danger); }

/* One call, beside the list (the Call reviews split). */
.srd .srd-detail { gap: 18px; }
.srd .srd-tight { gap: 6px; }
.srd-k { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.srd-learned ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text); }
.srd-learned + .srd-learned { margin-top: 8px; }

/* The recording's player: the browser's own controls, full width. */
.srd-player { display: flex; flex-direction: column; gap: 6px; }
.srd-player audio { width: 100%; height: 40px; }
.srd-player audio[hidden] { display: none; }
.srd-player video { width: 100%; max-height: 360px; border-radius: 10px; background: var(--surface-3); }   /* a rep's call (Call reviews) */
.srd-player p:empty { display: none; }

/* The conversation (playground .transcript .line). */
.sr-tx { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.sr-tx-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.5; }
.sr-tx-who { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-tx-line.ours .sr-tx-who { color: var(--accent-deep); }   /* our side: the AI on a Dialer call, the rep on theirs */
.sr-tx-t { color: var(--text); overflow-wrap: anywhere; }

/* One column (a phone, or a narrow window): the open call comes first, above the list it was opened from. */
@container sr-area (max-width: 760px) {
  .srd .srd-split > [data-dc-detail] { order: -1; }
}

/* On a phone, a table row becomes a block: the same cells, one under the other, no sideways scroll. */
@container sr-area (max-width: 620px) {
  .srd .srd-tbl table, .srd .srd-tbl tbody, .srd .srd-tbl tr, .srd .srd-tbl td { display: block; width: 100%; }
  .srd .srd-tbl thead { display: none; }
  .srd .srd-tbl tr { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  .srd .srd-tbl tr:last-child { border-bottom: 0; }
  .srd .srd-tbl td { padding: 3px 0; border: 0; }
  .srd .srd-tbl td:empty { display: none; }
  .srd .srd-when, .srd .srd-nowrap { white-space: normal; }
  .srd .srd-leads td:nth-child(2) { max-width: none; }
  .srd .srd-cell-k { display: inline; color: var(--text-3); }
  .srd .srd-acts { justify-content: flex-start; margin-top: 6px; }
  .srd .srd-pager { padding: 12px 16px; }
  .srd-filter { flex: 1 1 100%; min-width: 0; }
}