@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─────────────────────── Tema dəyişənləri ─────────────────────── */
:root {
  --c-base:       #0a0a0f;
  --c-surface:    #12121a;
  --c-card:       #1a1a28;
  --c-border:     #2a2a3d;
  --c-accent:     #7c3aed;
  --c-accent-l:   #a855f7;
  --c-muted:      #6b7280;
  --c-text:       #e5e7eb;

  --sai-top:    env(safe-area-inset-top, 0px);
  --sai-bot:    env(safe-area-inset-bottom, 0px);
  --sai-left:   env(safe-area-inset-left, 0px);
  --sai-right:  env(safe-area-inset-right, 0px);

  color-scheme: dark;
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--c-base);
  color: var(--c-text);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────── App container / phone shell ─────────────────────── */

/* Mobil: tam viewport, dynamic viewport (iOS Safari URL bar düzəlməsi) */
#app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--c-base);
  overflow: hidden;
}

/* Tablet/desktop: mərkəzdə "telefon" görünüşü */
@media (min-width: 768px) {
  body {
    background: radial-gradient(ellipse at top, #1a1a28 0%, #050508 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  #app {
    max-width: 440px;
    height: min(920px, calc(100dvh - 48px));
    border-radius: 28px;
    border: 1px solid var(--c-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  }
}

/* Vue root */
.app-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--sai-top);
  padding-left: var(--sai-left);
  padding-right: var(--sai-right);
  /* Phone shell-də safe area host browser-də deyil, app-shell-də olmalıdır */
}

/* ─────────────────────── Scrollbar ─────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

/* ─────────────────────── Range slider ─────────────────────── */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--c-border); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-accent-l); margin-top: -5px;
}

/* ─────────────────────── Track item ─────────────────────── */
.track-item                       { transition: background .15s; }
.track-item:active                { background: var(--c-card); }
.track-item.playing               { background: linear-gradient(135deg, #1a1228, var(--c-surface)); }
.track-item.playing .track-title  { color: var(--c-accent-l); }

/* ─────────────────────── Cover spin ─────────────────────── */
.spin        { animation: spin 8s linear infinite; }
.spin.paused { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────── Tab bar ─────────────────────── */
.tab-bar { padding-bottom: var(--sai-bot); }
.tab-bar-item.active .tab-icon,
.tab-bar-item.active .tab-label { color: var(--c-accent-l); }

/* ─────────────────────── Wave (audio bar animation) ─────────────────────── */
.wave        { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.wave span   {
  width: 3px; background: var(--c-accent-l); border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.wave span:nth-child(2) { animation-delay: .15s; }
.wave span:nth-child(3) { animation-delay: .3s; }
.wave.paused span       { animation-play-state: paused; }
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ─────────────────────── Toast ─────────────────────── */
.toast {
  position: fixed; left: 50%;
  bottom: calc(80px + var(--sai-bot));
  transform: translateX(-50%) translateY(10px);
  background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-text);
  padding: 10px 18px; border-radius: 999px; font-size: .82rem;
  opacity: 0; transition: .25s; pointer-events: none; z-index: 999;
  max-width: calc(100vw - 32px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─────────────────────── Skeleton ─────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--c-card) 25%, #22223a 50%, var(--c-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ─────────────────────── Player progress bar ─────────────────────── */
.player-progress {
  position: relative;
  height: 3px;
  background: var(--c-border);
  cursor: pointer;
}
.player-progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--c-accent-l);
  transition: width .15s linear;
}
.player-progress input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* ─────────────────────── Buttons (touch targets) ─────────────────────── */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px;
  color: var(--c-muted);
  transition: color .15s;
}
.btn-icon:hover, .btn-icon:focus-visible { color: white; }

/* ─────────────────────── Adaptive: çox kiçik ekranlar (≤ 359px) ─────────────────────── */
@media (max-width: 359px) {
  .hide-on-tiny    { display: none !important; }
  .px-page         { padding-left: 12px; padding-right: 12px; }
  .player-cover    { width: 40px; height: 40px; }
  .player-controls > * { gap: 0; }
  .discover-cover  { width: 12rem !important; height: 12rem !important; }
}

/* Default: standart padding */
.px-page { padding-left: 16px; padding-right: 16px; }