/* ============================================================================
   TuneCruise — app.css
   Design tokens, Drive-Mode styles, and global overrides.
   Loaded alongside Tailwind CSS CDN.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Google Fonts
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Design Tokens (CSS Custom Properties)
   --------------------------------------------------------------------------- */
:root {
  /* Color Palette */
  --tc-bg-deep:       #050b18;       /* deepest background */
  --tc-bg-card:       #0d1a2e;       /* card/panel background */
  --tc-bg-surface:    #111f38;       /* elevated surface */
  --tc-bg-hover:      #162847;       /* hover state */

  --tc-accent:        #f59e0b;       /* amber – primary accent */
  --tc-accent-dark:   #d97706;
  --tc-accent-glow:   rgba(245,158,11,0.25);

  --tc-teal:          #06b6d4;       /* cyan – secondary accent */
  --tc-teal-glow:     rgba(6,182,212,0.2);

  --tc-text-primary:  #f1f5f9;
  --tc-text-secondary:#94a3b8;
  --tc-text-muted:    #475569;
  --tc-border:        rgba(255,255,255,0.07);
  --tc-border-active: rgba(245,158,11,0.5);

  /* Typography */
  --tc-font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --tc-font-display:  'Space Grotesk', var(--tc-font-sans);

  /* Spacing */
  --tc-radius-sm:     8px;
  --tc-radius-md:     14px;
  --tc-radius-lg:     20px;
  --tc-radius-xl:     28px;

  /* Shadows */
  --tc-shadow-card:   0 4px 24px rgba(0,0,0,0.4);
  --tc-shadow-glow:   0 0 40px var(--tc-accent-glow);
  --tc-shadow-teal:   0 0 30px var(--tc-teal-glow);

  /* Transitions */
  --tc-trans-fast:    150ms ease;
  --tc-trans-base:    250ms ease;
  --tc-trans-slow:    400ms ease;
}

/* ---------------------------------------------------------------------------
   Global Reset & Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body {
  font-family: var(--tc-font-sans);
  background-color: var(--tc-bg-deep);
  color: var(--tc-text-primary);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   Scrollbar Styling (WebKit)
   --------------------------------------------------------------------------- */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: var(--tc-bg-card); }
::-webkit-scrollbar-thumb         { background: var(--tc-bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--tc-text-muted); }

/* ---------------------------------------------------------------------------
   Typography Utilities
   --------------------------------------------------------------------------- */
.tc-font-display { font-family: var(--tc-font-display); }

.tc-gradient-text {
  background: linear-gradient(135deg, var(--tc-accent) 0%, var(--tc-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------------------------------------------------------------------------
   Cards & Surfaces
   --------------------------------------------------------------------------- */
.tc-card {
  background: var(--tc-bg-card);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-card);
}

.tc-card-glass {
  background: rgba(13, 26, 46, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tc-font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--tc-radius-md);
  cursor: pointer;
  transition: all var(--tc-trans-base);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.tc-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--tc-trans-fast);
}

.tc-btn:hover::before { background: rgba(255,255,255,0.06); }
.tc-btn:active::before { background: rgba(0,0,0,0.12); }

/* Primary (amber) */
.tc-btn-primary {
  background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-dark));
  color: #0c0a00;
  box-shadow: 0 4px 20px var(--tc-accent-glow);
}
.tc-btn-primary:hover {
  box-shadow: 0 6px 30px var(--tc-accent-glow), 0 0 0 1px var(--tc-accent);
  transform: translateY(-1px);
}
.tc-btn-primary:active { transform: translateY(0); }

/* Ghost */
.tc-btn-ghost {
  background: transparent;
  color: var(--tc-text-secondary);
  border: 1px solid var(--tc-border);
}
.tc-btn-ghost:hover {
  border-color: var(--tc-border-active);
  color: var(--tc-text-primary);
}

/* Sizes */
.tc-btn-sm  { padding: 8px 16px;  font-size: 13px; }
.tc-btn-md  { padding: 12px 24px; font-size: 15px; }
.tc-btn-lg  { padding: 16px 32px; font-size: 17px; }
.tc-btn-xl  { padding: 20px 40px; font-size: 19px; min-height: 60px; }

/* ---------------------------------------------------------------------------
   Form Controls
   --------------------------------------------------------------------------- */
.tc-input {
  width: 100%;
  background: var(--tc-bg-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-primary);
  font-family: var(--tc-font-sans);
  font-size: 16px;
  padding: 14px 18px;
  transition: border-color var(--tc-trans-fast), box-shadow var(--tc-trans-fast);
  outline: none;
  -webkit-appearance: none;
}

.tc-input::placeholder { color: var(--tc-text-muted); }

.tc-input:focus {
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}

/* ---------------------------------------------------------------------------
   Drive-Mode Player
   --------------------------------------------------------------------------- */

/* iFrame container — always 16:9, always visible (YouTube ToS) */
.tc-player-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), var(--tc-shadow-glow);
}

.tc-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--tc-radius-lg);
}

/* Now playing info bar */
.tc-now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--tc-bg-card);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-md);
}

.tc-now-playing-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tc-bg-surface);
}

.tc-now-playing-meta {
  flex: 1;
  min-width: 0;
}

.tc-now-playing-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--tc-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-now-playing-channel {
  font-size: 13px;
  color: var(--tc-text-muted);
  margin-top: 2px;
}

/* Playback Controls */
.tc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}

.tc-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--tc-trans-fast);
  color: var(--tc-text-secondary);
}

.tc-control-btn:hover {
  color: var(--tc-text-primary);
  background: var(--tc-bg-surface);
}

.tc-control-btn:active {
  transform: scale(0.92);
}

.tc-control-btn-primary {
  width: 68px;
  height: 68px;
  background: var(--tc-accent) !important;
  color: #0c0a00 !important;
  box-shadow: 0 4px 20px var(--tc-accent-glow);
}

.tc-control-btn-primary:hover {
  box-shadow: 0 6px 30px var(--tc-accent-glow);
  transform: scale(1.05);
  background: var(--tc-accent) !important;
}

.tc-control-btn-sm  { width: 44px; height: 44px; }
.tc-control-btn-md  { width: 56px; height: 56px; }

/* Tracklist */
.tc-tracklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--tc-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--tc-trans-fast);
  position: relative;
  overflow: hidden;
  min-height: 68px;       /* large touch target for Drive Mode */
  -webkit-user-select: none;
  user-select: none;
}

.tc-track-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tc-accent);
  transform: scaleY(0);
  transition: transform var(--tc-trans-fast);
  border-radius: 0 2px 2px 0;
}

.tc-track-item:hover {
  background: var(--tc-bg-hover);
  border-color: var(--tc-border);
}

.tc-track-item.active {
  background: var(--tc-bg-surface);
  border-color: var(--tc-border-active);
}

.tc-track-item.active::before {
  transform: scaleY(1);
}

.tc-track-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tc-bg-surface);
}

.tc-track-number {
  width: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--tc-text-muted);
  flex-shrink: 0;
}

.tc-track-item.active .tc-track-number {
  color: var(--tc-accent);
}

.tc-track-meta {
  flex: 1;
  min-width: 0;
}

.tc-track-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-track-channel {
  font-size: 12px;
  color: var(--tc-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-track-duration {
  font-size: 12px;
  color: var(--tc-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Pulsing equalizer animation for active track */
.tc-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  width: 16px;
}

.tc-eq-bar {
  flex: 1;
  background: var(--tc-accent);
  border-radius: 1px;
  animation: tcEqPulse 0.8s ease-in-out infinite alternate;
}

.tc-eq-bar:nth-child(1) { animation-delay: 0s;    animation-duration: 0.7s; }
.tc-eq-bar:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.9s; }
.tc-eq-bar:nth-child(3) { animation-delay: 0.3s;  animation-duration: 0.6s; }

@keyframes tcEqPulse {
  from { height: 20%; }
  to   { height: 100%; }
}

/* ---------------------------------------------------------------------------
   Landing Page Hero
   --------------------------------------------------------------------------- */
.tc-hero-bg {
  position: relative;
  overflow: hidden;
}

.tc-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245,158,11,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(6,182,212,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Floating road-lines decoration */
.tc-road-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: linear-gradient(to bottom, transparent, var(--tc-accent), transparent);
  opacity: 0.3;
  animation: tcRoadScroll 3s linear infinite;
}

@keyframes tcRoadScroll {
  from { background-position: 0 0;    }
  to   { background-position: 0 100%; }
}

/* URL Form Card */
.tc-url-card {
  background: var(--tc-bg-card);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  padding: 32px;
  box-shadow: var(--tc-shadow-card);
  transition: box-shadow var(--tc-trans-slow), border-color var(--tc-trans-slow);
}

.tc-url-card:focus-within {
  border-color: rgba(245,158,11,0.3);
  box-shadow: var(--tc-shadow-card), 0 0 60px var(--tc-accent-glow);
}

/* Feature badges */
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--tc-border);
  color: var(--tc-text-secondary);
}

/* Loading skeleton */
.tc-skeleton {
  background: linear-gradient(90deg, var(--tc-bg-card) 0%, var(--tc-bg-surface) 50%, var(--tc-bg-card) 100%);
  background-size: 200% 100%;
  animation: tcShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes tcShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   Toast notifications
   --------------------------------------------------------------------------- */
.tc-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.tc-toast {
  padding: 14px 20px;
  border-radius: var(--tc-radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: tcToastIn var(--tc-trans-base) ease forwards;
  max-width: 340px;
}

.tc-toast-success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.tc-toast-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.tc-toast-info {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #67e8f9;
}

@keyframes tcToastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ---------------------------------------------------------------------------
   Responsive: Drive Mode overrides for small phones
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tc-url-card {
    padding: 20px 16px;
    border-radius: var(--tc-radius-lg);
  }

  .tc-track-item {
    padding: 10px 10px;
    min-height: 60px;
  }

  .tc-control-btn-primary {
    width: 60px;
    height: 60px;
  }
}

/* ---------------------------------------------------------------------------
   Utility: hide iframe for debugging — NEVER use in production (YouTube ToS)
   --------------------------------------------------------------------------- */
/* .tc-player-frame { display: none; }  ← DO NOT UNCOMMENT */