/* /public/css/media-player.css v17 */

/* Каркас и темы */
.qa{
  --qa-bg: var(--c-surface, #fff);
  --qa-fg: var(--c-text, #111827);
  --qa-muted: var(--c-text-muted, #6b7280);
  --qa-border: var(--c-border, #e5e7eb);
  --qa-accent: var(--c-accent, #7c82ff);
  --qa-prog: #dfe3ea;
  --qa-prog-dark: #2f3350;
  --qa-glow: 0;
  --qa-p: 0;

  display:flex; flex-direction:column; gap:8px;
  box-sizing:border-box;
  border:1px solid var(--qa-border);
  border-radius:12px;
  padding:10px;
  background:var(--qa-bg);
  color:var(--qa-fg);
  max-width:min(100%, 640px);
  margin:10px auto;
}
.dark-theme .qa{ --qa-bg:#1f1f2e; --qa-fg:#e5e7eb; --qa-muted:#9aa1b2; --qa-border:#444; --qa-prog:#3a3f64; }

/* спрятать нативное и старые time */
.qa audio{ display:none !important; }
.qa > time{ display:none !important; }

/* Сетка */
.qa-row{ display:grid !important; grid-template-columns:28px 1fr auto auto; gap:10px; align-items:center; }

/* Play/Pause — чистый CSS */
.qa-play{
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--qa-border);
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08));
  display:block !important; position:relative; cursor:pointer;
  color:var(--qa-accent);
  box-shadow:0 1px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:0; line-height:0;
}
.dark-theme .qa-play{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.08)); }
.qa-play:focus-visible{ outline:2px solid color-mix(in srgb, var(--qa-accent) 55%, transparent); outline-offset:2px; }
.qa .qa-ic{ display:none !important; } /* на всякий случай убираем SVG */

.qa-play::before{
  content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width:0; height:0; border-left:10px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.qa.is-playing .qa-play::before{
  width:12px; height:12px; border:0;
  background:linear-gradient(to right, currentColor 0 40%, transparent 40% 60%, currentColor 60% 100%);
}

/* Прогресс */
.qa-progress{
  position:relative; height:8px; border-radius:9999px;
  background:var(--qa-prog);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  cursor:pointer; overflow:hidden; contain:paint;
}
.dark-theme .qa-progress{ background:var(--qa-prog-dark); }

.qa-progress::after{
  content:''; position:absolute; inset:-2px; border-radius:9999px; z-index:0;
  box-shadow:0 0 calc(10px + 10px*var(--qa-glow)) rgba(124,130,255, calc(.28*var(--qa-glow)));
  pointer-events:none;
}

/* Заполнение — width + transform (var(--qa-p)) */
.qa-bar{
  position:absolute; inset:0; height:100% !important; width:100% !important;
  transform-origin:left center; transform: scaleX(var(--qa-p));
  border-radius:9999px; z-index:1;
  background: linear-gradient(90deg, #7c82ff, #60a5fa 50%, #34d399) !important;
  box-shadow: inset 0 0 1px rgba(255,255,255,.25);
  opacity:.98; pointer-events:none;
}

/* Ручка */
.qa-knob{
  position:absolute; top:50%; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; transform: translateX(-50%); z-index:2;
  background:#fff; border:1px solid rgba(0,0,0,.15);
  transition: transform .06s ease;
}
.dark-theme .qa-knob{ background:#0f1220; border-color:#666; }
.qa.is-drag .qa-knob{ transform: translateX(-50%) scale(1.05); }

/* Время */
.qa-time{ display:inline-flex !important; align-items:center; gap:6px; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--qa-muted); white-space:nowrap; }
.qa-time .qa-slash{ opacity:.7; }

/* Громкость */
.qa-vol-wrap{ display:flex; align-items:center; gap:6px; }
.qa-vol-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--qa-border);
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08)); display:block; position:relative;
  cursor:pointer; color:var(--qa-accent); box-shadow:0 1px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:0; line-height:0;
}
.dark-theme .qa-vol-btn{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.08)); }
.qa-vol-btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--qa-accent) 55%, transparent); outline-offset:2px; }
.qa-vol-btn::before{
  content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width:14px; height:14px; background: currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h4l5-4v14l-5-4H3V9zm12.5-2.8a1 1 0 1 0-1.4 1.4 5 5 0 0 1 0 7.1 1 1 0 1 0 1.4 1.4 7 7 0 0 0 0-9.9z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h4l5-4v14l-5-4H3V9zm12.5-2.8a1 1 0 1 0-1.4 1.4 5 5 0 0 1 0 7.1 1 1 0 1 0 1.4 1.4 7 7 0 0 0 0-9.9z'/></svg>") center/contain no-repeat;
}

.qa-vol{ width:96px; -webkit-appearance:none; appearance:none; background:transparent; }
.qa-vol::-webkit-slider-runnable-track{ height:8px; border-radius:9999px; background:var(--qa-prog); }
.dark-theme .qa-vol::-webkit-slider-runnable-track{ background:var(--qa-prog-dark); }
.qa-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; margin-top:-2px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #7c82ff, 0 3px 8px rgba(124,130,255,.35); }
.qa-vol::-moz-range-track{ height:8px; border-radius:9999px; background:var(--qa-prog); }
.dark-theme .qa-vol::-moz-range-track{ background:var(--qa-prog-dark); }
.qa-vol::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #7c82ff, 0 3px 8px rgba(124,130,255,.35); }

/* Легаси до апгрейда */
.q-audio{ max-width:min(100%,640px); margin:10px auto; }