/* Custom styling complementing Tailwind CSS for AetherStream */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-dark: #090D16;
  --surface-dark: #0F172A;
  --surface-hover: #1E293B;
  --primary-blue: #3B82F6;
  --primary-cyan: #06B6D4;
  --accent-orange: #F97316;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-dark);
  color: #F8FAFC;
  overflow-x: hidden;
}

/* Custom sleek scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #090D16;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Glassmorphism surfaces */
.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dropdown {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Video Range buffer bar visualizer */
.buffer-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  transition: width 0.15s ease;
  border-radius: 9999px;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #3B82F6, #06B6D4);
  pointer-events: none;
  border-radius: 9999px;
}

/* Media thumbnail aspect ratios */
.aspect-card {
  aspect-ratio: 16 / 10;
}

/* Pulsing sync indicator */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}
.animate-pulse-subtle {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Line clamp helpers */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cursor pointer guarantee */
button, a, select, input[type="range"], .clickable {
  cursor: pointer;
}