/* Открытая песня не закрывается при переходе на другие страницы (static/keep.js):
   карточка «Открытая песня» в меню слева и плеер внизу, пока песня в фоне */

/* ---------- карточка в меню ---------- */
.side-now { position: relative; display: grid; gap: 8px; padding: 0 2px; }
.side-now[hidden] { display: none; }
.sn-label { padding: 0 12px; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sn-song {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 36px 6px 6px; border-radius: 14px;
  color: var(--text); text-decoration: none; background: var(--glass);
  transition: background-color .15s ease;
}
.sn-song:hover { background: var(--glass-2); }
.side-now.active .sn-song { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); }
.sn-cover { flex: none; width: 40px; border-radius: 9px; }
.sn-text { display: grid; min-width: 0; line-height: 1.25; }
.sn-text b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-text span { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-close {
  position: absolute; right: 8px; bottom: 15px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sn-close svg { width: 14px; height: 14px; }
.sn-close:hover { background: var(--glass-2); color: var(--text); }

/* звучит — три полоски поверх обложки */
.kb-eq {
  position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  padding-bottom: 28%; background: rgba(0, 0, 0, .38); opacity: 0; transition: opacity .2s ease;
}
.kb-eq i { width: 3px; height: 40%; border-radius: 2px; background: #ffffff; transform-origin: bottom; transform: scaleY(.35); }
.side-now.playing .kb-eq, .keepbar.playing .kb-eq { opacity: 1; }
.side-now.playing .kb-eq i, .keepbar.playing .kb-eq i { animation: kb-eq 1s ease-in-out infinite; }
.kb-eq i:nth-child(2) { animation-delay: -.35s !important; }
.kb-eq i:nth-child(3) { animation-delay: -.7s !important; }
@keyframes kb-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ---------- плеер внизу, пока песня в фоне ---------- */
.keepbar {
  position: fixed; left: calc(var(--side) + 16px); right: 8px; bottom: 8px; z-index: 30;
  display: grid; grid-template-columns: minmax(180px, 1.2fr) auto minmax(180px, 1.4fr) auto auto; align-items: center; gap: 18px;
  padding: 10px 12px 10px 10px;
  background: color-mix(in srgb, var(--dock) 92%, transparent); border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
  animation: kb-in .28s cubic-bezier(.22, .8, .24, 1);
}
.keepbar[hidden] { display: none; }
@keyframes kb-in { from { transform: translateY(12px); opacity: 0; } }
body.song-parked { padding-bottom: 100px !important; }
/* полка окон пульта и тюнер принадлежат странице песни */
body.song-parked .rail, body.song-parked .tuner-float { display: none !important; }

.kb-song { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.kb-cover { flex: none; width: 48px; border-radius: 10px; }
.kb-text { display: grid; min-width: 0; line-height: 1.3; }
.kb-text b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-song:hover .kb-text b { text-decoration: underline; text-underline-offset: 3px; }
.kb-sub { display: flex; gap: 6px; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.kb-sub > span { overflow: hidden; text-overflow: ellipsis; }
.kb-where:not(:empty)::before { content: "· "; }
.kb-where { flex: none; color: var(--faint); }

.kb-ctrl { display: flex; align-items: center; gap: 4px; }
.kb-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.kb-btn:hover { background: var(--glass); color: var(--text); }
.kb-btn:active { transform: scale(.94); }
.kb-btn svg { width: 14px; height: 14px; }
.kb-pp { width: 42px; height: 42px; background: var(--text); color: var(--ink); }
.kb-pp:hover { background: #ffffff; color: var(--ink); }
.kb-pp svg { width: 15px; height: 15px; }
.kb-close svg { width: 16px; height: 16px; }

.kb-seek { display: flex; align-items: center; gap: 10px; min-width: 0; font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.kb-bar { position: relative; flex: 1 1 auto; height: 18px; cursor: pointer; touch-action: none; }
.kb-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.kb-fill { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--text); }
.kb-fill::after {
  content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff;
  opacity: 0; transition: opacity .15s ease;
}
.kb-bar:hover .kb-fill::after { opacity: 1; }
/* без подписки: дальше этой черты — по подписке */
.kb-free { position: absolute; top: 3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--accent); }
.kb-free[hidden] { display: none; }

@media (max-width: 1100px) {
  .side-now { padding: 0; }
  .sn-label, .sn-text, .sn-close { display: none; }
  .sn-song { justify-content: center; padding: 4px; background: transparent; }
  .sn-cover { width: 36px; }
  .keepbar { grid-template-columns: minmax(0, 1fr) auto minmax(120px, 1fr) auto; gap: 12px; }
  .kb-back { display: none; }
}
@media (max-width: 700px) {
  .side-now { display: none; }
  .keepbar {
    left: 6px; right: 6px; bottom: 6px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px;
    padding: 8px 8px 14px; border-radius: 14px;
  }
  .kb-seek { position: absolute; left: 12px; right: 12px; bottom: 2px; gap: 0; }
  .kb-seek .kb-t, .kb-seek .kb-d { display: none; }
  .kb-bar { height: 10px; }
  .kb-bar::before, .kb-fill { top: 3px; height: 3px; }
  .kb-free { top: 0; height: 9px; }
  .kb-cover { width: 40px; }
  .kb-ctrl [data-kb="prev"], .kb-ctrl [data-kb="next"] { display: none; }
  .kb-where { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .keepbar { animation: none; }
  .side-now.playing .kb-eq i, .keepbar.playing .kb-eq i { animation: none; transform: scaleY(.7); }
}