/*
 * Shared PlayerSheet — полноэкранный плеер для web-site / telegram-mini-app / vk-mini-app.
 * Источник истины: music-by-photo mini app/shared/web-player/player-sheet.css
 * НЕ редактировать копии в <surface>/vendor/ — править здесь и прогонять sync.sh.
 *
 * Раскладка 1:1 с Android-эталоном: full-bleed обложка, оверлейные левый/правый рейлы,
 * центр play, плашка-мета снизу. Токены с фолбэками (web --accent/--surface, tg --orange).
 */
.ps-root {
  --ps-bg: var(--bg, #08080b);
  --ps-text: var(--text, #f8fafc);
  --ps-muted: var(--muted, #9ca3af);
  --ps-accent: var(--orange, var(--accent, #ff8a3d));
  --ps-accent-2: var(--purple, var(--violet, #8b5cf6));
  --ps-danger: var(--danger, #ef4444);
  --ps-btn-bg: rgba(7, 8, 13, 0.72);
  --ps-btn-line: rgba(255, 255, 255, 0.16);
  --ps-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ps-safe-top: env(safe-area-inset-top, 0px);

  position: fixed;
  /* Viewport-bounded (канон «Единый Контракт Viewport Для Swipe Overlay»): плеер живёт
     МЕЖДУ хедером/фильтром (--ps-top) и таб-баром (--ps-bottom), не накрывая их. Хост
     (VK) измеряет границы и пишет переменные; web/TG их не задают → 0/0 = полный экран. */
  top: var(--ps-top, 0px);
  bottom: var(--ps-bottom, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--ps-bg);
  color: var(--ps-text);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
.ps-root.ps-open { transform: translateY(0); }

/* full-bleed карточка-обложка — холст, поверх которого всё абсолютно */
.ps-card {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* none — чтобы вертикальные свайпы (вверх=следующий / вниз=свернуть) шли в JS,
     а не перехватывались браузером как нативная прокрутка (был pan-y → вертикаль не работала). */
  touch-action: none;
}
.ps-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  background: #0d0d12;
  transition: transform 0.06s linear;
}
.ps-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.05) 26%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.82) 100%);
}

/* свернуть — правый верх */
.ps-collapse {
  position: absolute;
  top: calc(14px + var(--ps-safe-top));
  right: 16px;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 19px;
  background: rgba(15, 15, 23, 0.82);
  color: var(--ps-text);
  cursor: pointer;
}
.ps-collapse svg { width: 22px; height: 22px; }

/* рейлы */
.ps-leftrail {
  position: absolute;
  left: 12px;
  top: calc(14px + var(--ps-safe-top));
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ps-rightrail {
  position: absolute;
  right: 8px;
  top: calc(72px + var(--ps-safe-top));
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ps-rail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* action-кнопка: иконка-кружок + подпись (+ счётчик) */
/* По умолчанию roomy (высота 66, ширина 74, иконка 26, шрифт 10) */
.ps-action {
  width: 74px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: var(--ps-btn-bg);
  color: #f1f5f9;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}
.ps-action:active { transform: scale(0.95); }
.ps-action .ps-ico {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.ps-action .ps-ico svg { width: 26px; height: 26px; }
.ps-action .ps-lbl {
  max-width: 66px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 900;
  text-align: center;
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ps-action .ps-count {
  font-size: 11px;
  line-height: 12px;
  font-weight: 800;
  color: #d4d4d8;
  font-variant-numeric: tabular-nums;
}
.ps-action.ps-like.ps-active .ps-ico { color: #ff5b87; }
.ps-action.ps-save.ps-active .ps-ico { color: #f59e0b; }
.ps-action.ps-publish.ps-on .ps-ico { color: #34d399; }
.ps-action.ps-report:active .ps-ico { color: var(--ps-danger); }

/* «Стих/Ремикс» — двустрочная кнопка каталожного трека (как Android TextRemixIcon) */
.ps-action.ps-text-remix { gap: 1px; padding: 5px 3px; }
.ps-text-remix .ps-tr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
}
.ps-text-remix .ps-tr-word {
  font-size: 9px;
  line-height: 12px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ps-text-remix .ps-tr-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.ps-text-remix .ps-tr-ico svg { width: 13px; height: 13px; }
.ps-text-remix .ps-tr-div {
  width: 42px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin: 1px 0;
}

/* пилюли версий */
.ps-variants {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ps-variant {
  min-width: 76px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ps-btn-line);
  border-radius: 16px;
  background: var(--ps-btn-bg);
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ps-variant.ps-active {
  background: var(--ps-accent);
  border-color: #ffd7b0;
  color: #141014;
  box-shadow: 0 4px 12px rgba(255, 138, 61, 0.4);
}
.ps-rail-div {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* shuffle/repeat */
.ps-moderail { display: flex; gap: 8px; }
.ps-mode {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: var(--ps-btn-bg);
  color: #9ca3af;
  cursor: pointer;
}
.ps-mode svg { width: 18px; height: 18px; }
.ps-mode.ps-active {
  background: rgba(99, 102, 241, 0.36);
  border-color: rgba(199, 210, 254, 0.56);
  color: #a78bfa;
}

/* центр play/pause */
.ps-center {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 42px;
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.ps-center svg { width: 42px; height: 42px; margin-left: 4px; }
.ps-center.ps-playing {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: rgba(17, 17, 17, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f9fafb;
}
.ps-center.ps-playing svg { width: 34px; height: 34px; margin-left: 0; }
.ps-center:active { transform: translate(-50%, -50%) scale(0.96); }

/* плашка-мета снизу */
.ps-metacard {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(54px + var(--ps-safe-bottom));
  z-index: 16;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: rgba(8, 8, 11, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ps-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.12;
  color: #f8fafc;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-attribution {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #c4c7d2;
  line-height: 1.3;
}
/* «Фонарик» (порт Android CatalogPoemAttributionLine): по «автор · год» периодически
   проезжает тёплая подсветка слева-направо. База #b8bac4 (серый), блик #ffe7a3 (золото).
   Цикл ~4.9с: проезд ~2.8с (57%) + пауза. background-clip:text → подсвечивается сам текст. */
.ps-attr-hl {
  background-image: linear-gradient(100deg,
    #b8bac4 0%, #b8bac4 38%, #ffe7a3 50%, #b8bac4 62%, #b8bac4 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: #b8bac4;
  -webkit-text-fill-color: transparent;
  animation: ps-attr-sweep 4.9s ease-in-out infinite;
}
@keyframes ps-attr-sweep {
  0%   { background-position: 160% 0; }
  57%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-attr-hl { animation: none; color: #c4c7d2; -webkit-text-fill-color: #c4c7d2; }
}
.ps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.ps-chip {
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 7px;
  border: 1px solid rgba(154, 161, 178, 0.30);
  color: #c1c6d2;
  background: rgba(154, 161, 178, 0.10);
}

/* прогресс + seek */
.ps-progress { margin-top: 11px; }
.ps-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  /* Проигранная часть — оранжевый след до текущей позиции (--ps-seek-pct), дальше — серый. */
  background: linear-gradient(
    to right,
    var(--ps-accent) 0%,
    var(--ps-accent) var(--ps-seek-pct, 0%),
    rgba(255, 255, 255, 0.20) var(--ps-seek-pct, 0%),
    rgba(255, 255, 255, 0.20) 100%
  );
  cursor: pointer;
}
.ps-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ps-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ps-seek::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--ps-accent);
}
.ps-times {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: #c4c7d2;
  font-variant-numeric: tabular-nums;
}

/* подсказка свайпа */
.ps-swipehint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10px + var(--ps-safe-bottom));
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #f8fafc;
  opacity: 0.85;
  pointer-events: none;
  animation: ps-hint-bounce 1.6s ease-in-out infinite;
}
.ps-swipehint svg { width: 20px; height: 20px; }
.ps-swipehint-tx { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
@keyframes ps-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.ps-hidden-nav { display: none; }

/* Адаптивные медиа-запросы для укрупненных кнопок */
@media (max-height: 760px) or (max-width: 400px) {
  /* Средние экраны — regular (ширина 64, высота 54, иконка 21, шрифт 9) */
  .ps-action {
    width: 64px;
    min-height: 54px;
    border-radius: 16px;
    padding: 4px;
  }
  .ps-action .ps-ico {
    width: 28px;
    height: 28px;
    border-radius: 14px;
  }
  .ps-action .ps-ico svg {
    width: 21px;
    height: 21px;
  }
  .ps-action .ps-lbl {
    max-width: 60px;
    font-size: 9px;
    line-height: 11px;
  }
  .ps-action .ps-count {
    font-size: 10px;
    line-height: 12px;
  }
}

@media (max-height: 680px) or (max-width: 360px) {
  /* Компактные экраны — compact (ширина 58, высота 48, иконка 19, шрифт 8) */
  .ps-action {
    width: 58px;
    min-height: 48px;
    border-radius: 14px;
    padding: 4px;
  }
  .ps-action .ps-ico {
    width: 24px;
    height: 24px;
    border-radius: 12px;
  }
  .ps-action .ps-ico svg {
    width: 19px;
    height: 19px;
  }
  .ps-action .ps-lbl {
    max-width: 54px;
    font-size: 8px;
    line-height: 10px;
  }
  .ps-action .ps-count {
    font-size: 9px;
    line-height: 11px;
  }
  .ps-variant { min-width: 70px; height: 30px; }
  .ps-mode { width: 36px; height: 36px; }
  .ps-rightrail { top: calc(64px + var(--ps-safe-top)); gap: 5px; }
  .ps-center { width: 76px; height: 76px; }
  .ps-title { font-size: 21px; }
}

@media (max-width: 320px) {
  .ps-action { width: 52px; }
  .ps-title { font-size: 18px; }
}