:root{
  --footer-height: 58px;       /* оновлюється JS/ResizeObserver */
  --footer-z: 3000;
  --slider-gap: 1px;           /* шов зі слайдером/хедером */
}

/**************************
    FOOTER — OCEAN GLASS
**************************/
.footer-glass{
  position: fixed;
  left: 0; right: 0;
  bottom: 0 !important;
  z-index: var(--footer-z);
  height: auto;
  min-height: 48px;
  max-height: 58px;

  background: var(--glass-bg, rgba(255,255,255,0.54));
  border-top: 1.1px solid var(--glass-border, rgba(24,145,195,0.17));
  box-shadow: 0 -2px 18px rgba(24,145,195,0.07);
  backdrop-filter: blur(var(--glass-blur, 18px)) saturate(110%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(110%);

  padding: .25rem .5rem;
  display: flex; flex-direction: column; align-items: center;
  font-size: 1em;
  transition: background .15s, box-shadow .14s, border-radius .14s;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* верхні кути заокруглені */
}

/* Дзеркало кутів: коли лівий слайдер відкритий — прибрати верхній лівий */
.left-slider-open .footer-glass{
  border-top-left-radius: 0 !important;
}

.footer-buttons{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  gap: .25rem;
  padding: .1em 0;
}
.footer-center-wrap{
  justify-self: start;
  display: flex; align-items: center;
  z-index: 2;
}
.right-slider-button{ justify-self: end; }

/* Кнопки */
.footer-glass .btn,
.right-slider-button.btn{
  display: inline-flex; align-items: center; gap: .25em;
  font-size: .99em;
  background: var(--glass-bg, rgba(24,145,195,0.09));
  border: 1.1px solid var(--glass-border, rgba(24,145,195,0.17));
  color: var(--ocean-dark, #085177);
  padding: .36em .6em;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 6px rgba(24,145,195,0.04);
  cursor: pointer; min-width: 62px;
  transition: background .13s, color .13s, border-color .13s;
  outline: none;
}
.footer-glass .btn i,
.right-slider-button.btn i{
  font-size: 1em;
  color: var(--ocean-main, #1891c3);
  margin-right: .12em;
  transition: color .13s;
}
.footer-glass .btn span,
.right-slider-button.btn span{
  font-size: .98em; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.footer-glass .btn:hover,
.footer-glass .btn:focus,
.right-slider-button.btn:hover,
.right-slider-button.btn:focus{
  background: var(--ocean-main, #1891c3);
  color: #fff; border-color: var(--ocean-main, #1891c3);
}
.footer-glass .btn:hover i,
.footer-glass .btn:focus i,
.right-slider-button.btn:hover i,
.right-slider-button.btn:focus i{
  color: #fff;
}

/* Центральна кругла кнопка-плеєр з RGB-підсвіткою */
.central-player-btn{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 2.2px solid var(--glass-border);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 7px rgba(24,145,195,0.17);
  position: relative; z-index: 12;
  transition: border-color .17s, background .13s;
  cursor: pointer; outline: none; overflow: visible;
}
.central-player-btn::after{
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  z-index: -1;
  background: conic-gradient(#ff5c00,#ffea00,#42ff00,#00ffd0,#0055ff,#ae00ff,#ff00aa,#ff5c00);
  opacity: 0; filter: blur(4px) brightness(1.12);
  transition: opacity .25s, filter .22s;
  animation: none; pointer-events: none;
}
.central-player-btn.playing::after,
.central-player-btn:focus::after,
.central-player-btn:hover::after{
  opacity: .74; animation: rgb-glow-rotate 2.7s linear infinite; filter: blur(6px) brightness(1.25);
}
@keyframes rgb-glow-rotate{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.note-anim{ display:flex; align-items:center; justify-content:center; font-size:1.72em; color:var(--ocean-main); transition: transform .23s; }
.central-player-btn.playing .note-anim{ animation: noteDance .46s infinite alternate cubic-bezier(.57,.21,.69,1.25); color:#1891c3; }
@keyframes noteDance{ 0%{transform:scale(1) rotate(-8deg)}40%{transform:scale(1.17) rotate(8deg)}65%{transform:scale(1.13) rotate(-8deg)}100%{transform:scale(1) rotate(0)} }

/* Модальний плеєр */
.player-modal-overlay{
  display:none;
  position:fixed; inset:0;
  background: rgba(24,145,195,0.17);
  z-index: 3100;
  transition: opacity .16s;
}
.player-modal-overlay.open{ display:block; opacity:1; }

.player-modal-glass{
  display:none;
  position:fixed; left:50%; bottom:15px; transform:translateX(-50%);
  background: var(--glass-bg);
  border: 2.3px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 9px 36px rgba(24,145,195,0.21);
  min-width:330px; max-width:95vw; width:370px;
  padding: 2em 1.3em 1.5em;
  z-index: 3200;
  text-align:center;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  animation: modalAppear .25s cubic-bezier(.67,.01,.79,1.01);
}
.player-modal-glass.open{ display:block; }
@keyframes modalAppear{ from{opacity:0;transform:translate(-50%,15%) scale(.89)} to{opacity:1;transform:translate(-50%,0) scale(1)} }

.player-modal-close{
  position:absolute; right:1.1em; top:1.1em;
  background:none; border:none; color:var(--ocean-main);
  font-size:2em; opacity:.77; cursor:pointer; transition: opacity .15s;
}
.player-modal-close:hover{ opacity:1; }

.player-cover-wrap{ display:flex; flex-direction:column; align-items:center; gap:.8em; }
.player-cover{
  width:116px; height:116px; border-radius:23%;
  object-fit:cover; margin-bottom:.6em;
  box-shadow:0 4px 16px rgba(24,145,195,0.17);
  border:1.8px solid var(--glass-border); background:#fff;
}

.player-modal-info{ margin: .9em 0 .5em; }
.player-modal-title{ display:block; font-size:1.17em; font-weight:700; color:var(--ocean-dark); margin-bottom:.25em; letter-spacing:.01em; }
.player-modal-artist{ display:block; font-size:.97em; color:var(--text-faint); opacity:.74; font-weight:500; }

.player-modal-controls{ display:flex; justify-content:center; align-items:center; gap:2.3em; margin:1em 0 .7em; }
.player-modal-controls .player-btn{
  font-size:1.48em; padding:.32em .69em;
  background: var(--glass-bg-light);
  border:none; border-radius: var(--radius-md); color: var(--ocean-main);
  transition: background .14s, color .15s;
}
.player-modal-controls .player-btn:hover,
.player-modal-controls .player-btn:focus{ background: var(--ocean-main); color:#fff; }

.player-modal-progress{ display:flex; align-items:center; gap:.6em; margin:.2em 0 .4em; }
.player-modal-progress input[type=range]{ flex:1; accent-color: var(--ocean-main); background: var(--glass-bg-light); border-radius: var(--radius-sm); height:3px; }
.player-modal-progress span{ font-size:.97em; min-width:36px; color:var(--ocean-dark); }

.player-modal-volume{ display:flex; align-items:center; gap:.5em; margin-top:.14em; justify-content:flex-end; }
.player-modal-volume input[type=range]{ width:68px; accent-color: var(--ocean-main); }
.player-modal-volume i{ color:var(--ocean-main); font-size:1.15em; }

/* Visualizer canvas */
#audio-visualizer{ display:block; margin:0 auto; width:170px; height:38px; background:transparent; opacity:.83; }

/* Список треків — активний */
.audio-list-item.active{
  background: var(--glass-bg-light); color: var(--ocean-main);
  font-weight:600; border-radius: var(--radius-md);
  box-shadow: 0 1px 8px rgba(24,145,195,0.10);
}

/* Адаптив */
@media (max-width: 700px){
  .footer-glass{ padding-bottom: .15em !important; }
}
@media (max-width: 600px){
  .footer-buttons{ grid-template-columns: 1fr auto; gap: 0; padding: .06em 0; }
  .footer-glass .btn{ font-size: .94em; padding: .33em .7em; }
  .player-modal-glass{ min-width:95vw; padding:.6em .14em 1em; bottom: 70px; }
  .player-cover{ width:75px; height:75px; }
  .player-modal-controls{ gap:1.1em; }
}

/* Щоб контент не перекривався футером (краще робити глобально, але залишу тут безпечну версію) */
main, .main-container{
  padding-bottom: calc(var(--footer-height) + 16px) !important;
}