/* /public/css/media-player.css v20 — Modern glass bar + tokenized skins (safe, no markup changes)
   - keeps existing class names and JS expectations
   - Firefox-safe: always pair complex background with background-color
*/

/* ===== Токены / базовые цвета от тем ===== */
:root{
  /* мосты тем */
  --c-surface: var(--surface, #ffffff);
  --c-text: var(--text, #111827);
  --c-text-muted: var(--muted, #6b7280);
  --c-border: var(--border, #e5e7eb);
  --c-accent: var(--accent, #7c82ff);
  --success: #34d399;

  /* глобальные “эргономические” токены для плеера */
  --qa-radius: 14px;
  --qa-radius-sm: 12px;
  --qa-btn-radius: 12px;
  --qa-btn-size: 34px;
  --qa-shadow: 0 10px 28px color-mix(in srgb, var(--c-text) 12%, transparent);
  --qa-shadow-soft: 0 8px 22px color-mix(in srgb, var(--c-text) 10%, transparent);
  --qa-ring: 0 0 0 2px color-mix(in srgb, var(--c-accent) 28%, transparent);
  --qa-ring-strong: 0 0 0 3px color-mix(in srgb, var(--c-accent) 34%, transparent);
}

/* ===== Общие токены для .qa и .qa-global (не ломаем базу) ===== */
.qa,
.qa-global{
  --qa-bg: var(--c-surface);
  --qa-fg: var(--c-text);
  --qa-muted: var(--c-text-muted);
  --qa-border: var(--c-border);
  --qa-accent: var(--c-accent);

  /* треки/градиенты */
  --qa-track: color-mix(in srgb, var(--qa-fg) 12%, var(--qa-bg));
  --qa-grad-1: var(--qa-accent);
  --qa-grad-2: color-mix(in srgb, var(--qa-accent) 65%, transparent);
  --qa-grad-3: color-mix(in srgb, var(--success) 70%, transparent);

  /* ручка прогресса */
  --qa-knob-bg: var(--qa-bg);
  --qa-knob-brd: color-mix(in srgb, var(--qa-fg) 22%, transparent);

  /* динамика */
  --qa-glow: 0;
  --qa-p: 0;
}

/* при проигрывании — чуть больше “жизни”, но без кислотности */
.qa.is-playing,
.qa-global.is-playing{
  --qa-glow: 1;
}

@media (prefers-reduced-motion: reduce){
  .qa,
  .qa-global{ --qa-glow: 0; }
}

/* ======================================================================== */
/* ===== Локальная карточка (.qa) — врезка внутри контента ===== */
/* ======================================================================== */

.qa{
  display:flex;
  flex-direction:column;
  gap:10px;

  border:1px solid var(--qa-border);
  border-radius: var(--qa-radius);
  padding:12px;

  /* Firefox-safe fallback */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 97%, var(--qa-fg) 3%),
      color-mix(in srgb, var(--qa-bg) 92%, var(--qa-fg) 8%)
    );

  color:var(--qa-fg);
  box-shadow: var(--qa-shadow);
  max-width:min(100%, 640px);
  margin:12px auto;
  box-sizing:border-box;

  /* приятнее на тачах */
  -webkit-tap-highlight-color: transparent;
}

.qa-row{
  display:grid;
  grid-template-columns: var(--qa-btn-size) 1fr auto auto;
  gap:12px;
  align-items:center;
}

/* ===== Кнопки (общие принципы) ===== */
.qa-play,
.qa-btn,
.qa-vol-btn{
  -webkit-tap-highlight-color: transparent;
}

.qa-play{
  width: var(--qa-btn-size);
  height: var(--qa-btn-size);
  border-radius: var(--qa-btn-radius);
  border:1px solid var(--qa-border);

  /* Firefox-safe fallback */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 98%, var(--qa-fg) 2%),
      color-mix(in srgb, var(--qa-bg) 90%, var(--qa-fg) 10%)
    );

  display:block;
  position:relative;
  cursor:pointer;

  color:var(--qa-accent);
  font-size:0;
  line-height:0;

  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.qa-play:hover{
  border-color: color-mix(in srgb, var(--qa-accent) 35%, var(--qa-border));
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.qa-play:active{ transform: translateY(1px); }

.qa-play:focus-visible{
  outline: none;
  box-shadow:
    var(--qa-ring-strong),
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

/* play/pause — CSS-иконка (оставляем твою механику, просто выравниваем) */
.qa-play::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-45%,-50%);

  width:0;
  height:0;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;

  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--qa-accent) 22%, transparent));
}

.qa.is-playing .qa-play::before{
  transform: translate(-50%,-50%);
  width:14px;
  height:14px;
  border:0;
  background:
    linear-gradient(to right,
      currentColor 0 40%,
      transparent 40% 60%,
      currentColor 60% 100%
    );
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--qa-accent) 20%, transparent));
}

/* ===== Прогресс ===== */
.qa-progress{
  position:relative;
  height:10px;
  border-radius:9999px;
  overflow:hidden;

  background: var(--qa-track);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--qa-fg) 12%, transparent);

  cursor:pointer;
  contain:paint;
  touch-action: none;
}

.qa-progress::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:9999px;
  z-index:0;

  box-shadow:
    0 0 calc(14px + 14px*var(--qa-glow)) color-mix(in srgb, var(--qa-accent) 26%, transparent);

  pointer-events:none;
}

.qa-bar{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;

  transform-origin:left center;
  transform:scaleX(var(--qa-p));

  border-radius:9999px;
  z-index:1;

  background:
    linear-gradient(90deg,
      var(--qa-grad-1),
      var(--qa-grad-2) 52%,
      var(--qa-grad-3)
    );

  box-shadow:
    inset 0 0 1px color-mix(in srgb, #fff 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--qa-accent) 12%, transparent);

  opacity:.98;
  pointer-events:none;
}

.qa-knob{
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  margin-top:-7px;

  border-radius:50%;
  transform: translateX(-50%);
  z-index:2;

  background: var(--qa-knob-bg);
  border:1px solid var(--qa-knob-brd);

  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 18%, transparent),
    0 6px 14px color-mix(in srgb, var(--qa-fg) 14%, transparent);

  opacity: .88;
  transition: transform .08s ease, opacity .14s ease;
}

.qa-progress:hover .qa-knob{ opacity: 1; }
.qa.is-drag .qa-knob{ transform: translateX(-50%) scale(1.08); opacity: 1; }

/* ===== Время ===== */
.qa-time{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font: 700 12px/1.05 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .01em;

  color: var(--qa-muted);
  white-space:nowrap;
  user-select:none;
}

.qa-time .qa-slash{ opacity:.7; }

/* ===== Громкость (локально) ===== */
.qa-vol-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

.qa-vol-btn{
  width: var(--qa-btn-size);
  height: var(--qa-btn-size);
  border-radius: var(--qa-btn-radius);
  border:1px solid var(--qa-border);

  /* Firefox-safe fallback */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 98%, var(--qa-fg) 2%),
      color-mix(in srgb, var(--qa-bg) 90%, var(--qa-fg) 10%)
    );

  display:block;
  position:relative;
  cursor:pointer;

  color: var(--qa-accent);
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);

  font-size:0;
  line-height:0;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.qa-vol-btn:hover{
  border-color: color-mix(in srgb, var(--qa-accent) 35%, var(--qa-border));
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.qa-vol-btn:active{ transform: translateY(1px); }

.qa-vol-btn:focus-visible{
  outline:none;
  box-shadow:
    var(--qa-ring-strong),
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

/* иконка громкости (оставляем твою маску, чуть четче) */
.qa-vol-btn::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:16px;
  height:16px;
  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;

  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--qa-accent) 18%, transparent));
}

/* --- ГРОМКОСТЬ: жёсткая стилизация кросс-браузер --- */
.qa-vol{
  width:96px;
  background:transparent;
  outline:none;
  height:10px;
  border:0;
  box-shadow:none;

  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;

  touch-action:none;
}

/* WebKit */
.qa-vol::-webkit-slider-runnable-track{
  height:10px;
  border-radius:9999px;
  background: color-mix(in srgb, var(--qa-fg) 12%, var(--qa-bg));
  border:0;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--qa-fg) 12%, transparent);
}
.qa-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  margin-top:-2px;
  border-radius:50%;
  background: var(--qa-bg);
  border: 1px solid color-mix(in srgb, var(--qa-fg) 22%, transparent);
  box-shadow:
    0 0 0 2px var(--qa-accent),
    0 6px 14px color-mix(in srgb, var(--qa-accent) 30%, transparent);
}

/* Firefox */
.qa-vol::-moz-range-track{
  height:10px;
  border-radius:9999px;
  background: color-mix(in srgb, var(--qa-fg) 12%, var(--qa-bg));
  border:0;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--qa-fg) 12%, transparent);
}
.qa-vol::-moz-range-progress{
  height:10px;
  border-radius:9999px;
  background: linear-gradient(90deg, var(--qa-grad-1), var(--qa-grad-2) 52%, var(--qa-grad-3));
}
.qa-vol::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--qa-bg);
  border: 1px solid color-mix(in srgb, var(--qa-fg) 22%, transparent);
  box-shadow:
    0 0 0 2px var(--qa-accent),
    0 6px 14px color-mix(in srgb, var(--qa-accent) 30%, transparent);
}

/* скрыта по умолчанию (как было) */
.qa-vol{
  width:0;
  opacity:0;
  pointer-events:none;
  transition: width .18s ease, opacity .18s ease;
}

.qa.is-vol-open .qa-vol,
.qa-global.is-vol-open .qa-vol{
  width:96px;
  opacity:1;
  pointer-events:auto;
}

/* для глобального бара чуть шире */
.qa-global.is-vol-open .qa-vol{ width:110px; }

/* легаси */
.q-audio{ max-width:min(100%,640px); margin:12px auto; }

/* ======================================================================== */
/* ===== Глобальный нижний бар (.qa-global) ===== */
/* ======================================================================== */

.qa-global{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  border-top:1px solid var(--qa-border);

  /* Firefox-safe fallback */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 88%, transparent),
      var(--qa-bg)
    );

  box-shadow: 0 -14px 34px color-mix(in srgb, var(--qa-fg) 12%, transparent);
  z-index: calc(var(--flt-z, 6000) + 30);

  transform: translateY(100%);
  opacity:0;
  visibility:hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s linear;

  /* лёгкая “стеклянность” (если поддерживается) */
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);

  -webkit-tap-highlight-color: transparent;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .qa-global{
    /* без blur — чуть плотнее градиент */
    background-color: var(--qa-bg);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--qa-bg) 96%, var(--qa-fg) 4%),
        var(--qa-bg)
      );
  }
}

.qa-global.is-show{
  transform: translateY(0);
  opacity:1;
  visibility:visible;
}

/* чтобы fixed-бар не перекрывал якоря */
html.qa-has-player{
  scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* внутренности — safe-area friendly */
.qa-global__inner{
  max-width: 1100px;
  margin: 0 auto;

  padding:
    10px
    calc(14px + env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));

  display:grid;
  grid-template-columns: 1fr 2fr auto;
  gap:14px;
  align-items:center;
}

.qa-global__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.qa-cover{
  width:42px;
  height:42px;
  border-radius: 12px;
  border:1px solid var(--qa-border);
  overflow:hidden;

  /* Firefox-safe */
  background-color: var(--qa-bg);
  background: color-mix(in srgb, var(--qa-bg) 90%, var(--qa-fg) 10%);

  flex:0 0 auto;

  box-shadow:
    0 10px 20px color-mix(in srgb, var(--qa-fg) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}

.qa-cover__img{
  width:100%;
  height:100%;
  background-color: var(--qa-bg);
  background-image: var(--qa-cover, none);
  background-size: cover;
  background-position:center;
}

.qa-meta{ min-width:0; }

.qa-title{
  font: 750 14px/1.18 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .01em;
  color:var(--qa-fg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.qa-sub{
  font: 600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--qa-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:3px;
}

/* бейдж “трек/всего” (JS добавляет span.qa-track) */
.qa-track{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;

  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--qa-border) 82%, transparent);

  /* Firefox-safe */
  background-color: color-mix(in srgb, var(--qa-bg) 86%, transparent);
  background: color-mix(in srgb, var(--qa-bg) 86%, transparent);

  color: var(--qa-muted);
  font: 700 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;

  box-shadow: 0 6px 14px color-mix(in srgb, var(--qa-fg) 10%, transparent);
}

/* центр */
.qa-global__center{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.qa-global__right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ===== Кнопки в баре ===== */
.qa-btn{
  width: var(--qa-btn-size);
  height: var(--qa-btn-size);
  border-radius: 12px;
  border:1px solid var(--qa-border);
  position: relative;

  /* Firefox-safe */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 98%, var(--qa-fg) 2%),
      color-mix(in srgb, var(--qa-bg) 90%, var(--qa-fg) 10%)
    );

  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  color: var(--qa-accent);

  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.qa-btn:hover{
  border-color: color-mix(in srgb, var(--qa-accent) 35%, var(--qa-border));
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.qa-btn:focus-visible{
  outline:none;
  box-shadow:
    var(--qa-ring-strong),
    0 1px 4px color-mix(in srgb, var(--qa-fg) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

/* лёгкий “клик” */
.qa-btn:active{ transform: translateY(1px); }

/* ===== Toggle states (shuffle/loop ON) ===== */
.qa-btn.is-on{
  /* Firefox safe fallback */
  background-color: var(--qa-bg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qa-bg) 90%, var(--qa-accent) 10%),
      color-mix(in srgb, var(--qa-bg) 84%, var(--qa-accent) 16%)
    );

  border-color: color-mix(in srgb, var(--qa-accent) 65%, var(--qa-border));
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--qa-fg) 10%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--qa-accent) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.qa-btn.is-on::after{
  content:'';
  position:absolute;
  right:6px;
  bottom:6px;
  width:6px;
  height:6px;
  border-radius:999px;

  background: color-mix(in srgb, var(--qa-accent) 80%, #fff 20%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--qa-bg) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--qa-accent) 45%, transparent);
}

/* loop: one — зелёный индикатор (как было), но чуть мягче */
.qa-btn.qa-loop.is-on[data-mode="one"]::after{
  background: color-mix(in srgb, var(--success) 85%, #fff 15%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--qa-bg) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--success) 45%, transparent);
}

/* play/pause в баре — оставляем твою CSS-иконку, только чуть выравниваем */
.qa-btn.qa-play{
  position:relative;
  font-size:0;
  line-height:0;
}

.qa-btn.qa-play::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-45%,-50%);

  width:0;
  height:0;
  border-left: 13px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;

  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--qa-accent) 20%, transparent));
}

.qa-global.is-playing .qa-btn.qa-play::before{
  transform: translate(-50%,-50%);
  width:15px;
  height:15px;
  border:0;
  background:
    linear-gradient(to right,
      currentColor 0 40%,
      transparent 40% 60%,
      currentColor 60% 100%
    );
}

/* время в баре */
.qa-global .qa-time{
  font: 750 12px/1.05 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .01em;
}

/* прогресс в баре (используем общие .qa-progress/.qa-bar/.qa-knob, но чуть компактнее визуально) */
.qa-global .qa-progress{
  height:10px;
}

/* громкость в баре — у тебя уже логика скрытия, оставляем */
.qa-global .qa-vol{
  width:0;
  opacity:0;
  pointer-events:none;
  transition: width .18s ease, opacity .18s ease;
}
.qa-global.is-vol-open .qa-vol{
  width:110px;
  opacity:1;
  pointer-events:auto;
}

/* ===== Кнопка для возобновления (авто-плей blocked) ===== */
.qa-resume{
  position:absolute;
  right:14px;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));

  padding:10px 12px;
  border-radius: 12px;
  border:1px solid color-mix(in srgb, var(--qa-border) 85%, transparent);

  /* Firefox-safe */
  background-color: color-mix(in srgb, var(--qa-bg) 92%, transparent);
  background: color-mix(in srgb, var(--qa-bg) 92%, transparent);

  color: var(--qa-fg);

  box-shadow:
    0 14px 30px color-mix(in srgb, var(--qa-fg) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 14%, transparent);

  font: 750 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;

  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.qa-resume:hover{
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--qa-fg) 18%, transparent),
    0 0 0 3px color-mix(in srgb, var(--qa-accent) 18%, transparent);
}

.qa-resume:focus-visible{
  outline:none;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--qa-fg) 18%, transparent),
    var(--qa-ring-strong);
}

.qa-resume.is-show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* ===== Hint toast (визуальный фидбек переключателей) ===== */
.qa-hint{
  position:absolute;
  left:50%;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);

  max-width: calc(100vw - 24px);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--qa-border) 84%, transparent);

  /* Firefox-safe */
  background-color: color-mix(in srgb, var(--qa-bg) 92%, transparent);
  background: color-mix(in srgb, var(--qa-bg) 92%, transparent);

  color: var(--qa-fg);
  font: 800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .01em;
  white-space:nowrap;

  box-shadow: 0 14px 28px color-mix(in srgb, var(--qa-fg) 16%, transparent);

  opacity:0;
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2;
}

.qa-hint.is-show{
  opacity:1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce){
  .qa-hint{ transition:none; }
}

/* ======================================================================== */
/* ===== Внешний тогглер (создаётся JS как #qa-global-toggle) ===== */
/* ======================================================================== */

/* JS задаёт inline-стили; тут выравниваем под темы (через !important) */
.qa-global-toggle{
  border: 1px solid color-mix(in srgb, var(--c-border) 75%, transparent) !important;
  background-color: color-mix(in srgb, var(--c-surface) 70%, transparent) !important;
  background: color-mix(in srgb, var(--c-surface) 70%, transparent) !important;
  color: var(--c-text) !important;

  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;

  box-shadow:
    0 10px 24px color-mix(in srgb, var(--c-text) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--c-accent) 12%, transparent) !important;

  font-weight: 900 !important;
}

/* ======================================================================== */
/* ===== Адаптив глобального бара ===== */
/* ======================================================================== */

@media (max-width: 860px){
  .qa-global__inner{
    grid-template-columns: 1fr 1.5fr auto;
    gap:10px;
  }
  .qa-title{ font-size:13px; }
  .qa-sub{ font-size:11px; }
  .qa-cover{ width:40px; height:40px; }
}

@media (max-width: 640px){
  .qa-global__inner{
    grid-template-columns: 1fr auto;
    gap:10px;
  }
  .qa-global__center{ grid-column: 1 / -1; }
  .qa-cover{ width:38px; height:38px; }
  .qa-btn{ width:32px; height:32px; border-radius: 11px; }
}

@media (max-width: 380px){
  .qa-global__inner{ padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .qa-global__right{ gap:6px; }
  .qa-track{ display:none; } /* чтобы не шумело на ультра-малых */
}

/* ======================================================================== */
/* ===== Свернутый режим глобального плеера (как было) ===== */
/* ======================================================================== */

#qa-global.is-collapsed .qa-global__center,
#qa-global.is-collapsed .qa-global__right .qa-btn:not(.qa-collapse){
  display:none;
}

#qa-global.is-collapsed .qa-global__left{ gap:.5rem; }
#qa-global .qa-collapse{ min-width:2rem; }

/* ======================================================================== */
/*  РУЧКА "Плеер" — в стиле онлайна: без заливки, граница, вертикальная надпись */
/* ======================================================================== */

.qa-global-toggle{
  width: 44px;
  height: 118px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 6px;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-border) 82%, transparent);

  /* Firefox-safe: без заливки (прозрачно) */
  background-color: transparent;
  background: transparent;

  color: color-mix(in srgb, var(--c-text) 92%, transparent);

  box-shadow:
    0 10px 22px color-mix(in srgb, var(--c-text) 18%, transparent);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* чтобы не “дёргалось” от выделения */
  user-select: none;
}

.qa-global-toggle:focus-visible{
  outline: none;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--c-text) 18%, transparent),
    0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

.qa-global-toggle:active{
  transform: translateY(1px);
}

.qa-global-toggle .qa-gt__label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 900 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .14em;
  opacity: .9;
}

.qa-global-toggle .qa-gt__icon,
.qa-global-toggle .qa-gt__chev{
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  opacity: .92;
}

/* ==========================
   QA GLOBAL TOGGLE — "ручка" (как онлайн) + safe SVG masks
   ========================== */

.qa-global-toggle{
  /* автономные токены (toggle живёт вне .qa/.qa-global) */
  --qa-bg: var(--c-surface);
  --qa-fg: var(--c-text);
  --qa-muted: var(--c-text-muted);
  --qa-border: var(--c-border);
  --qa-accent: var(--c-accent);

  /* SVG (URL-encoded) — чтобы не "умирал" CSS парсер */
  --qa-gt-eq: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6%2018V6h2v12H6zm5%200V10h2v8h-2zm5%200V8h2v10h-2z'/%3E%3C/svg%3E");
  --qa-gt-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7.4%2014.6a1%201%200%200%201%200-1.4l3.9-3.9a1%201%200%200%201%201.4%200l3.9%203.9a1%201%200%201%201-1.4%201.4L12%2011.4%208.8%2014.6a1%201%200%200%201-1.4%200z'/%3E%3C/svg%3E");
  --qa-gt-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7.4%209.4a1%201%200%200%201%201.4%200L12%2012.6l3.2-3.2a1%201%200%201%201%201.4%201.4l-3.9%203.9a1%201%200%200%201-1.4%200l-3.9-3.9a1%201%200%200%201%200-1.4z'/%3E%3C/svg%3E");

  position: fixed;
  z-index: 2147483647;

  width: 46px;
  height: 126px;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--qa-border) 85%, transparent);

  /* Firefox safe fallback */
  background-color: transparent;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--qa-bg) 26%, transparent),
      color-mix(in srgb, var(--qa-bg) 10%, transparent)
    );

  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);

  display: grid;
  place-items: center;
  padding: 10px 8px;

  cursor: pointer;
  user-select: none;
  touch-action: manipulation;

  color: color-mix(in srgb, var(--qa-muted) 88%, var(--qa-accent));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--qa-fg) 16%, transparent);
}

.qa-global-toggle:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--qa-accent) 55%, transparent);
  outline-offset: 2px;
}
.qa-global-toggle:active{ transform: translateY(1px); }

.qa-global-toggle[data-open="1"]{
  color: var(--qa-accent);
  border-color: color-mix(in srgb, var(--qa-accent) 60%, var(--qa-border));
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--qa-fg) 14%, transparent),
    0 0 0 2px color-mix(in srgb, var(--qa-accent) 18%, transparent),
    0 0 22px color-mix(in srgb, var(--qa-accent) 22%, transparent);
}

.qa-global-toggle .qa-gt__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.qa-global-toggle .qa-gt__label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 900 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .95;
}

.qa-global-toggle .qa-gt__icon,
.qa-global-toggle .qa-gt__chev{
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: .95;
}

/* equalizer */
.qa-global-toggle .qa-gt__icon{
  -webkit-mask: var(--qa-gt-eq) center/contain no-repeat;
          mask: var(--qa-gt-eq) center/contain no-repeat;
}

/* chevron: зависит от data-open (0=закрыт -> вверх, 1=открыт -> вниз) */
.qa-global-toggle .qa-gt__chev{
  -webkit-mask: var(--qa-gt-up) center/contain no-repeat;
          mask: var(--qa-gt-up) center/contain no-repeat;
}
.qa-global-toggle[data-open="1"] .qa-gt__chev{
  -webkit-mask: var(--qa-gt-down) center/contain no-repeat;
          mask: var(--qa-gt-down) center/contain no-repeat;
}

/* мобилка — компактнее */
@media (max-width: 640px){
  .qa-global-toggle{
    width: 44px;
    height: 112px;
    padding: 8px 7px;
  }
  .qa-global-toggle .qa-gt__label{ font-size: 10px; }
}

/* =========================
   QA: внешняя ручка "Плеер"
   (только границы, без заливок)
   ========================= */

.qa-global-toggle{
  /* токены */
  --gt-border: var(--border, var(--border-color, rgba(110,140,190,.55)));
  --gt-ink:    var(--text, var(--ink, #eaf2ff));
  --gt-shadow: 0 10px 26px rgba(0,0,0,.22);

  color: var(--gt-ink);
  border: 1px solid var(--gt-border);
  background: transparent;              /* без заливки */
  border-radius: 999px;
  box-shadow: var(--gt-shadow);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 48px;
  height: 128px;

  padding: 10px 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* важно: не даём старым стилям держать её по центру */
  transform: none !important;
}

.qa-global-toggle:active{
  transform: none !important;
}

.qa-global-toggle .qa-gt__icon,
.qa-global-toggle .qa-gt__chev{
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: .92;
}

.qa-global-toggle .qa-gt__label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 12px;
  line-height: 1;
  opacity: .95;
}

/* состояние "закрыто" / "открыто" — слегка подсвечиваем */
.qa-global-toggle[data-open="0"]{ opacity: .92; }
.qa-global-toggle[data-open="1"]{ opacity: 1; }

/* мобилка: компактнее именно РУЧКА */
@media (max-width: 640px){
  .qa-global-toggle{
    width: 40px;
    height: 98px;
    gap: 8px;
    padding: 8px 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,.20);
  }
  .qa-global-toggle .qa-gt__icon,
  .qa-global-toggle .qa-gt__chev{
    width: 16px;
    height: 16px;
  }
  .qa-global-toggle .qa-gt__label{
    font-size: 11px;
    letter-spacing: .14em;
  }
}

/* ========================================================================
   QA GLOBAL TOGGLE — В ТОЧНОСТИ как .online-panel-handle
   (компактная ручка, без огромной "пилюли", без иконок/стрелок)
   ======================================================================== */

.qa-global-toggle{
  /* внешний вид — как у online-panel-handle */
  padding: 10px 5px !important;
  border-radius: 10px 0 0 10px !important;

  background: var(--surface-2, rgba(15,23,42,.95)) !important;
  border: 1px solid var(--border, rgba(148,163,184,.6)) !important;
  border-right: none !important;

  /* без “стекла”, без градиентов и без огромных теней */
  background-color: var(--surface-2, rgba(15,23,42,.95)) !important; /* Firefox-safe */
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  /* типографика — как у онлайна */
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;

  /* вертикальная надпись (как онлайн) */
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;

  color: var(--muted, #9ca3af) !important;

  /* убираем “гигантские” размеры из старых блоков */
  width: auto !important;
  height: auto !important;
  gap: 0 !important;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* позицию задаст JS (ниже ручки онлайна) */
  transform: none !important;
}

.qa-global-toggle:hover{
  color: var(--text, #e5e7eb) !important;
}

.qa-global-toggle:focus-visible{
  outline: none !important;
  /* максимально похоже на online: без “кольца-плеера” */
}

/* внутри кнопки: оставляем только текст, как у онлайна */
.qa-global-toggle .qa-gt__stack{
  display: block !important;
}

.qa-global-toggle .qa-gt__icon,
.qa-global-toggle .qa-gt__chev{
  display: none !important;
}

.qa-global-toggle .qa-gt__label{
  /* перебиваем старые rotate/vertical-rl внутри label */
  writing-mode: inherit !important;
  text-orientation: inherit !important;
  transform: none !important;

  font: inherit !important;
  letter-spacing: inherit !important;
  opacity: 1 !important;
}

/* Мобилка — как в online.css */
@media (max-width: 1023.98px){
  .qa-global-toggle{
    padding: 8px 4px !important;
    border-radius: 8px 0 0 8px !important;
    font-size: .8rem !important;
  }
}

/* Edge fix: ручка и бар должны быть поверх правых колонок/stacking-context */
.qa-global-toggle{ z-index: 2147483647 !important; }
.qa-global{ z-index: 2147483646 !important; }

/* если вдруг окажемся слева — зеркалим форму “ручки” */
.qa-global-toggle.is-left{
  border-right: none !important;
  border-left: 1px solid var(--border, rgba(148,163,184,.6)) !important;
  border-radius: 0 10px 10px 0 !important;
}
.qa-global-toggle.is-right{
  border-left: 1px solid var(--border, rgba(148,163,184,.6)) !important;
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
}