/* player.css — плеер записи созвона и расшифровка: реплики со временем и цветом говорящего, клик по времени —
   переход к start_s; текущая реплика подсвечивается во время воспроизведения. Владелец — агент `calls` (волна 1).
   Говорящий отличается не только цветом: метка S1… и имя текстом рядом с цветной полосой. Только var(--…) токены. */
.call-player { display: flex; flex-direction: column; gap: var(--s2); }
.call-player audio { width: 100%; min-height: 40px; }
.call-player-tools { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.call-player-tools select { width: auto; }

.spk { --spk: var(--chart-1); }
.spk-2 { --spk: var(--chart-2); }
.spk-3 { --spk: var(--chart-3); }
.spk-4 { --spk: var(--chart-4); }
.spk-5 { --spk: var(--chart-5); }
.spk-6 { --spk: var(--chart-6); }
.spk-badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 1px var(--s1h); border-radius: var(--r-sm);
  font: var(--fw-semibold) var(--fs-xs) var(--font-data); color: var(--fg); background: var(--surface-2);
  border-left: 3px solid var(--spk); white-space: nowrap; }
.spk-badge.none { border-left-color: var(--border-strong); color: var(--fg-muted); font-weight: var(--fw-regular); }

.transcript-tools { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.transcript-tools input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.transcript li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s1h) var(--s2); align-items: baseline;
  padding: var(--s1h) var(--s2); border-radius: var(--r-sm); border-left: 3px solid transparent; }
.transcript li[hidden] { display: none; }
.transcript li.now { background: var(--info-soft); border-left-color: var(--info); }
.transcript li.flash { background: var(--accent-soft); border-left-color: var(--accent); }
.transcript .seg-time { min-height: 24px; padding: 0 var(--s1); border: 0; border-radius: var(--r-xs); background: transparent;
  color: var(--link); font: var(--fs-xs) var(--font-data); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; }
.transcript .seg-time:hover { color: var(--link-hover); background: var(--surface-2); }
.transcript .seg-time.static { color: var(--fg-muted); text-decoration: none; cursor: default; background: transparent; }
.transcript .seg-text { line-height: var(--lh-body); overflow-wrap: anywhere; }
.transcript .seg-who { display: block; color: var(--fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.transcript .spk-badge { min-width: 3.2em; }
.transcript mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; padding: 0 1px; }
@media (max-width: 640px) {
  .transcript li { grid-template-columns: auto minmax(0, 1fr); }
  .transcript .seg-text { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .transcript li { transition: background var(--dur) var(--ease); }
}