/* Мини-плеер как свайп-карусель. Общий компонент на оба вьюпорта (одна модель),
   раскладка отличается плотностью и оболочкой:
   • мобайл — карусель ВНУТРИ единого нижнего стеклянного бара (.dock): сверху
     плашка плеера (торчит на ~6px над кромкой бара), под ней ряд из 3 табов; по
     бокам ~20% соседних треков (peek), всё под блюром.
   • десктоп — карусель в grid-area:now: центр + по 1 соседу целиком + краюшки
     4/5 карточки за краем полосы; таб-бар остаётся сайдбаром (responsive.css).
   Рельс держит ПЯТЬ карточек: prev2 · prev · cur · next · next2 — центр живой
   (#mini-cur, красит player.paintTrack/transport), остальные — превью из очереди.
   На мобиле prev2/next2 уезжают за экран (невидимы), на десктопе они — краюшки.
   Карточка (.minicard) — стекло, блюрит контент под собой на обоих вьюпортах.
   Геометрия жеста и пружины — features/mini.js (место, где положение из JS). */

:root {
  --dock-inset: 8px;        /* десктоп/резерв: поля карусели от краёв */
  --mini-peek: 30px;        /* мобайл: окно соседа — сужено (было 54) → активная ~85% */
  --mini-sliver: 40px;      /* десктоп: сколько «утекает» краюшка карточки за край — меньше, дальние не «уезжают» */
  --mini-gap: 3px;          /* зазор в рельсе — плотнее (жалоба «расстояние между плашками поменьше») */
  --tabbar-h: 62px;         /* высота ряда табов без safe-area — выше (было 54), как у Яндекса */
  --minicard-h: 72px;       /* высота карточки плеера (была 62 — просторнее) */
}

/* Не-жестовая альтернатива свайпу и живой регион смены трека: видимы только
   скринридеру/клавиатуре. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- карусель (общее для обоих вьюпортов) ---------- */

/* Peek клипается по бокам (иначе соседи ушли бы за край и дали горизонтальный
   скролл страницы), а тень надвиса — вертикальная — остаётся видимой:
   overflow: clip по X можно смешивать с visible по Y (в отличие от hidden). */
.minideck { overflow-x: clip; overflow-y: visible; touch-action: pan-y; }

.mini-rail { display: flex; gap: var(--mini-gap); will-change: transform; }

.minicard {
  position: relative;
  flex: 0 0 calc(100% - 2 * var(--mini-peek));
  min-height: var(--minicard-h);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gap-el);
  padding: 9px 14px 11px;
  border-radius: 18px;
  overflow: hidden;                                 /* заливка-прогресс режется по радиусу */
  /* «Бумага» (minimalist-ui, выбор Артёма): матовый near-flat материал — низкий
     блюр, БЕЗ верхнего глянца/градиента, только волосяная кромка + whisper-тень.
     Карточка всё ещё блюрит контент под собой (мобайл — стекло бара, десктоп —
     живой чарт), но мягко. От чёрного отделяет кромка .08 + активный блик ::before;
     цвет обложки на материал НЕ влияет. Плотность под reduced-transparency — в responsive.css. */
  background: rgba(27, 28, 32, 0.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),          /* волосяная кромка отделяет от чёрного */
    0 6px 20px -18px rgba(0, 0, 0, 0.55);         /* whisper-тень */
}
/* Активная карточка — мягкий белый радиальный блик сверху-по-центру: даже с
   тёмной/пустой обложкой карточка имеет «материал» и глубину. ::before лежит
   ПОД заливкой-прогресса и контентом (paint order: псевдо → дети). Блик держат
   ВСЕ карточки (opacity:0), но видим он только у центра (--cur) — и ПЛАВНО
   проявляется на смене центра (жалоба «свечение вспыхивает без анимации»). */
.minicard::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(135% 105% at 50% -22%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05) 38%, transparent 66%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.minicard--cur::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .minicard::before { transition: none; } }
/* ГЛАВНЫЙ фикс джанка свайпа: во время листания/драга (is-sliding) блюр карточек
   заморожен. backdrop-filter:blur(24px) на трёх движущихся карточках пере-семплит
   размытие фона КАЖДЫЙ кадр — дропает кадры, отсюда «середина теряется» и
   «ступеньки» на медленном драге. Док под карточками блюрит сам, поэтому потеря
   размытия на доли секунды листания незаметна; по осадке (is-sliding снят) блюр
   возвращается. Заодно снимаем дорогой ::before-блик и тень на время движения. */
.mini-rail.is-sliding .minicard {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Контент — над заливкой-прогресса (та лежит фоном z:0). */
.minicard > :not(.minicard__bar) { position: relative; z-index: 1; }
/* Соседи — МЕНЬШЕ ступенькой (не тусклее): ±1 мельче центра, крайние ±2 ещё
   мельче на тот же процент. Без opacity-затемнения (Артём: «без этой белой хуйни»,
   различие даёт размер+материал+блик активной). Остаются ВЕРТИКАЛЬНО ЦЕНТРИРОВАНЫ
   (не на базовой линии — это Артём отверг), origin по центру. Это покой (clearDepth
   сбрасывает inline сюда); значения совпадают с depth() (SCALE_STEP=0.90), чтобы
   не было скачка на осадке. */
.minicard--peek { grid-template-columns: auto 1fr; transform: scale(0.90); cursor: pointer; }   /* клик листает на соседа */
.minicard--edge { transform: scale(0.81); }   /* ±2: 0.90² */
/* Обложка мини крупнее — ТОЛЬКО внутри карточки (глобальный .cover--sm 44px не трогаем). */
.minicard .cover--sm { width: 52px; height: 52px; }

/* Обложка+текст — кликабельны как одно: тап открывает большой плеер. */
.minicard__open {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--gap-el);
  min-width: 0; text-align: left; background: transparent;
}
.minicard__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.minicard__text b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minicard__text i { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Кнопки центра — свой слой: быстро уходят на листании, мягко распускаются на осадке
   (когда центр пойман). Асимметрия «быстро ушли, плавно пришли» — эппловская. */
.minicard__ctl {
  display: flex; align-items: center; gap: 6px;
  transition: opacity .5s var(--ease) .06s, filter .5s var(--ease) .06s;   /* медленнее и мягче (жалоба «слишком быстро») */
  will-change: opacity, filter;
}
/* Уходят/приходят через opacity + blur, БЕЗ scale (Артём: «в величине не терялся,
   а в точке исчезал/появлялся»). Асимметрия «ушли поспокойнее, пришли плавно» — эппловская. */
.mini-rail.is-sliding .minicard__ctl {
  opacity: 0; filter: blur(7px); pointer-events: none;
  transition: opacity .26s var(--ease), filter .26s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .minicard__ctl, .mini-rail.is-sliding .minicard__ctl { transition: none; } }

/* Прогресс — тихий синий блок ЗА контентом карточки (не палка, не линия): просто
   надвигается слева-направо по форме карточки. БЕЗ ведущей полоски/грани (жалоба
   «убрать полоску»): край — это край самого низко-прозрачного блока, мягкий сам по
   себе. Ширину ведёт transport.paintProgress (геометрия прогресса живёт в JS по
   контракту №5); видимость — класс --on (transport), гаснет на свайпе. */
.minicard__bar { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
.minicard__bar--on { opacity: 1; }
/* На свайпе блок аккуратно уходит (жалоба «с прогрессом при листании хуйня»), на
   осадке плавно возвращается. Специфичнее --on → перебивает во время слайда. */
.mini-rail.is-sliding .minicard__bar { opacity: 0; transition: opacity .18s var(--ease); }
.minicard__bar i {
  display: block; width: 0; height: 100%;
  /* Акцентный синий, низкая прозрачность — блок читается, но тихо. Форму по силуэту
     карточки держит overflow:hidden + border-radius родителя. */
  background: rgba(61, 123, 255, 0.22);
  transition: width .28s cubic-bezier(0.33, 0, 0.15, 1);
}
@media (prefers-reduced-motion: reduce) { .minicard__bar, .minicard__bar i { transition: none; } }

/* Лайк прямо из карточки. ≥40px тач-таргет; сердце заливается у избранного. */
.likebtn--mini {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--pill);
  background: transparent; color: var(--t2);
  transition: color var(--dur) var(--ease), transform var(--dur-press) var(--ease);
}
.likebtn--mini:active { transform: scale(0.9); }
.likebtn--mini.likebtn--on { color: var(--accent); }

/* ---------- мобайл: единый нижний стеклянный бар ---------- */

@media (max-width: 767px) {
  /* .dock — ОДИН стеклянный бар: блюрит контент под собой, впритык к краям и низу.
     overflow-x:clip держит краюшки соседей без гор. скролла страницы;
     overflow-y:visible пускает плашку плеера торчать над верхом бара. */
  .dock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
    display: flex; flex-direction: column;
    padding: 10px var(--safe-r) calc(6px + var(--safe-b)) var(--safe-l);   /* верх — воздух под скруглением; низ — safe под вырез */
    border-radius: 22px 22px 0 0;                    /* скруглённый верх, как у Яндекс-мини-бара; низ вровень с краем экрана */
    /* «Бумага»: плотная матовая плашка (.86) с низким блюром — читается как отдельная
       поверхность до самого физического низа (нет «чёрной пропасти» на standalone),
       но без глянца. Отделяет от контента только тонкая верхняя кромка; тяжёлый
       подъём-тень снят (минимализм). */
    background: rgba(20, 21, 24, 0.86);   /* ⚠️ меняешь — синхронь body::after заполнитель (base.css): его цвет = композит ЭТОГО над #000 */
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
    overflow: hidden;                                /* контент режется по скруглённому верху */
  }

  /* Плашка плеера живёт ВНУТРИ бара (Яндекс-мини-бар: сверху плеер, под ним табы) —
     больше не торчит над кромкой. Карточка несёт своё стекло поверх плашки — глубина. */
  .minideck { z-index: 1; transition: max-height 0.32s var(--ease), opacity 0.24s var(--ease); }
  /* На экране подписки мини-плеер аккуратно схлопывается — бар остаётся только
     с таб-баром, низ подписки встаёт впритык (класс app--flush ставит main.js). */
  .app--flush .minideck { max-height: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; }

  /* FPS: крайние карточки (prev2/next2) на мобиле полностью за экраном — их стекло
     не видно, блюр впустую. Снимаем 2 backdrop-filter-прохода. */
  #mini-prev2, #mini-next2 { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Ряд табов внутри того же бара; стекло теперь на .dock, свой фон снят. */
  .tabbar {
    z-index: 0;
    padding: 6px 4px 2px;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Выше (padding 12) + иконки заметнее: неактивный глиф ярче, край читается. */
  .tab { position: relative; isolation: isolate; padding: 12px 0; color: rgba(255, 255, 255, 0.66); }
  .tab .ic { width: 27px; height: 27px; }
  /* Активный таб СИНИЙ: перебиваем бело-прозрачный `.tab` выше — он по каскаду
     (mini.css грузится после controls.css) забивал controls.css `.tab--on{accent}`,
     оттого активная иконка «серела». */
  .tab--on { color: var(--accent); }
  /* Мягкий синий halo под активной иконкой — плавно проявляется (Q2: «светиться
     синим, без канта, плавно»). z-index:-1 в изолированном контексте таба: halo под
     глифом, но не под плашкой. */
  .tab::after {
    content: ''; position: absolute; left: 50%; top: 46%; width: 42px; height: 42px;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, var(--accent-glow), transparent 68%);
    opacity: 0; transition: opacity .5s var(--ease);
  }
  .tab--on::after { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .tab::after { transition: none; } }

  /* Кнопки плеера крупнее под палец (UX: удобнее попадать). */
  #mini-play { width: 44px; height: 44px; }
  #mini-play .ic { width: 16px; height: 16px; }
  .likebtn--mini { width: 44px; height: 44px; }
}