/* Плеер записи звонка (components/audio-player.js). Всё под .cqa-app.
   Сетка: крупная кнопка play слева на две строки; сверху — время и полоса прогресса, снизу — управление. */

.cqa-app .cqa-player {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "play line" "play ctrls" "err err";
  column-gap: 14px; row-gap: 4px;
  align-items: center;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border-inner);
  background: var(--surface-2);
}

/* Play / pause */
.cqa-app .cqa-player__play {
  grid-area: play;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand-600); color: #fff; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  transition: background-color 150ms ease, transform 150ms ease;
}
.cqa-app .cqa-player__play:hover:not(:disabled) { background: var(--brand-700); }
.cqa-app .cqa-player__play:active:not(:disabled) { transform: scale(.96); }
.cqa-app .cqa-player__play .cqa-icon { display: block; }
.cqa-app .cqa-player__ic-play .cqa-icon { transform: translateX(1px); fill: currentColor; }
.cqa-app .cqa-player__ic-pause .cqa-icon { fill: currentColor; }
.cqa-app .cqa-player__ic-pause,
.cqa-app .cqa-player.is-playing .cqa-player__ic-play { display: none; }
.cqa-app .cqa-player.is-playing .cqa-player__ic-pause { display: block; }

/* Время + полоса */
.cqa-app .cqa-player__line { grid-area: line; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cqa-app .cqa-player__time { flex: none; min-width: 34px; font-size: 12px; font-weight: 600; color: var(--text); }
.cqa-app .cqa-player__time--dur { text-align: right; font-weight: 500; color: var(--text-secondary); }

.cqa-app .cqa-player__track {
  position: relative; flex: 1 1 auto; min-width: 0; height: 22px;
  border-radius: 6px; cursor: pointer; touch-action: none;
}
.cqa-app .cqa-player__track:focus-visible { outline-offset: 1px; }
.cqa-app .cqa-player__rail {
  position: absolute; left: 0; right: 0; top: 9px; height: 4px;
  border-radius: 2px; background: var(--player-rail); overflow: hidden;
  transition: height 150ms ease, top 150ms ease;
}
.cqa-app .cqa-player__fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--brand-500); border-radius: 2px;
}
.cqa-app .cqa-player__track:hover .cqa-player__rail,
.cqa-app .cqa-player.is-dragging .cqa-player__rail { top: 8px; height: 6px; border-radius: 3px; }

/* Засечки: ниже/выше дорожки, не перехватывают клики */
.cqa-app .cqa-player__marks { position: absolute; inset: 0; pointer-events: none; }
.cqa-app .cqa-player__mark { position: absolute; width: 2px; margin-left: -1px; border-radius: 1px; }
.cqa-app .cqa-player__mark--op { top: 15px; height: 4px; background: var(--mark-op); }
.cqa-app .cqa-player__mark--ev {
  top: 3px; height: 16px; width: 3px; margin-left: -1.5px;
  background: var(--mark-ev); box-shadow: 0 0 0 1px var(--surface-2);
  opacity: .9; transition: opacity 150ms ease, transform 150ms ease;
}
.cqa-app .cqa-player__mark--ev.is-active { opacity: 1; transform: scaleY(1.25); background: #D49A00; }

.cqa-app .cqa-player__thumb {
  position: absolute; top: 5px; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--brand-600), 0 1px 3px rgba(16,24,40,.2);
  transform: scale(.85); transition: transform 150ms ease;
  pointer-events: none;
}
.cqa-app .cqa-player__track:hover .cqa-player__thumb,
.cqa-app .cqa-player__track:focus-visible .cqa-player__thumb,
.cqa-app .cqa-player.is-dragging .cqa-player__thumb { transform: scale(1.05); }

.cqa-app .cqa-player__tip {
  position: absolute; bottom: calc(100% + 4px); left: 0; transform: translateX(-50%);
  padding: 2px 6px; border-radius: 6px; background: var(--text); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 150ms ease;
}
.cqa-app .cqa-player__track:hover .cqa-player__tip,
.cqa-app .cqa-player.is-dragging .cqa-player__tip { opacity: 1; }

/* Нижний ряд управления */
.cqa-app .cqa-player__ctrls { grid-area: ctrls; display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: -6px; }
.cqa-app .cqa-player__btn {
  display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 7px 0 6px;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--text-body); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.cqa-app .cqa-player__btn--icon { padding: 0 5px; }
.cqa-app .cqa-player__btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.cqa-app .cqa-player__sep { width: 1px; height: 14px; margin: 0 6px; background: var(--border-control); }

.cqa-app .cqa-player__rates { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--seg-bg); }
.cqa-app .cqa-player__rate {
  height: 22px; min-width: 38px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.cqa-app .cqa-player__rate:hover:not(:disabled) { color: var(--text); }
.cqa-app .cqa-player__rate[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-seg); }

.cqa-app .cqa-player__ic-vol { display: inline-flex; }
.cqa-app .cqa-player__ic-mute, .cqa-app .cqa-player.is-muted .cqa-player__ic-vol { display: none; }
.cqa-app .cqa-player.is-muted .cqa-player__ic-mute { display: inline-flex; }

.cqa-app .cqa-player__vol {
  --v: 100%;
  width: 56px; height: 16px; margin: 0 4px 0 2px; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cqa-app .cqa-player__vol::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--text-secondary) var(--v), var(--player-rail) var(--v));
}
.cqa-app .cqa-player__vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 1.5px var(--text-secondary);
}
.cqa-app .cqa-player__vol::-moz-range-track { height: 3px; border-radius: 2px; background: var(--player-rail); }
.cqa-app .cqa-player__vol::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--text-secondary); }
.cqa-app .cqa-player__vol::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--text-secondary); }

.cqa-app .cqa-player__keys {
  margin-left: auto; padding-left: 8px; font-size: 11px; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cqa-app .cqa-player__keys kbd {
  display: inline-block; min-width: 16px; margin: 0 1px; padding: 0 4px; border-radius: 4px;
  font: 600 10.5px/16px var(--font); text-align: center; color: var(--text-secondary);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-control), 0 1px 0 var(--border-control);
}
.cqa-app .cqa-player__ext {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: 4px;
  border-radius: var(--radius-xs); color: var(--text-secondary);
  transition: background-color 150ms ease, color 150ms ease;
}
.cqa-app .cqa-player__ext:hover { background: var(--surface-hover); color: var(--info-text); }
.cqa-app .cqa-player__keys + .cqa-player__ext { margin-left: 6px; }

/* Ошибка загрузки */
.cqa-app .cqa-player__err {
  grid-area: err; display: flex; align-items: flex-start; gap: 8px; margin-top: 6px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--amber-soft);
  font-size: 12.5px; line-height: 1.45; color: var(--amber-text);
}
.cqa-app .cqa-player__err[hidden] { display: none; }
.cqa-app .cqa-player__err .cqa-icon { flex-shrink: 0; margin-top: 2px; }
.cqa-app .cqa-player__err a { margin-left: 4px; color: var(--info-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cqa-app .cqa-player__err a:hover { text-decoration: underline; }
.cqa-app .cqa-player.is-error .cqa-player__play,
.cqa-app .cqa-player.is-error .cqa-player__line,
.cqa-app .cqa-player.is-error .cqa-player__ctrls > :not(.cqa-player__ext) { opacity: .45; cursor: not-allowed; }
.cqa-app .cqa-player.is-error .cqa-player__track { pointer-events: none; }

@media (max-width: 640px) {
  .cqa-app .cqa-player__keys, .cqa-app .cqa-player__vol { display: none; }
  .cqa-app .cqa-player__ctrls { margin-left: 0; }
  .cqa-app .cqa-player__rate { min-width: 32px; }
  /* Телефон: скорость прижата вправо и сжимается, кнопки ±10 с — крупнее */
  .cqa-app .cqa-player__ctrls { flex-wrap: nowrap; }
  .cqa-app .cqa-player__sep, .cqa-app .cqa-player__ext { display: none; }
  .cqa-app .cqa-player__btn { height: 34px; }
  .cqa-app .cqa-player__rates { margin-left: auto; flex: 0 1 auto; min-width: 0; }
  .cqa-app .cqa-player__rate { height: 30px; min-width: 0; padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cqa-app .cqa-player *, .cqa-app .cqa-player { transition: none !important; }
}