/* website/public/css/app.css */
/* Om CLI Streaming Platform - Obsidian Kinetic Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --surface: #111319;
  --surface-lowest: #0c0e14;
  --surface-low: #191b22;
  --surface-container: #1d1f26;
  --surface-high: #282a30;
  --surface-highest: #33353b;
  
  --on-surface: #e2e2ea;
  --on-surface-variant: #94a3b8;
  --outline: #5c3f42;
  --outline-subtle: rgba(255, 255, 255, 0.08);
  
  --primary: #ff4f73;
  --primary-hover: #ff3366;
  --primary-container: #ff4f73;
  --on-primary: #ffffff;
  --primary-glow: rgba(255, 79, 115, 0.4);
  
  --secondary: #00e3fd;
  --secondary-container: #00daf3;
  --on-secondary: #001f24;
  --secondary-glow: rgba(0, 227, 253, 0.35);

  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--surface-lowest);
  color: var(--on-surface);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Material Symbols alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-flex;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

/* Hide scrollbar for horizontal rails */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Clean Custom Scrollbar for side panels */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--surface-lowest);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-highest);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Micro-Borders */
.micro-border {
  border: 1px solid var(--outline-subtle);
}

.micro-border-interactive {
  border: 1px solid var(--outline-subtle);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.micro-border-interactive:hover {
  border-color: rgba(255, 79, 115, 0.4);
  box-shadow: 0 0 16px var(--primary-glow);
}

/* Glassmorphic Surfaces */
.glass-surface {
  background: rgba(17, 19, 25, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--outline-subtle);
}

.glass-dropdown {
  background: rgba(25, 27, 34, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
}

/* Primary Glow Button */
.btn-primary-glow {
  background: linear-gradient(135deg, #ff4f73 0%, #ff1a53 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 79, 115, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 79, 115, 0.55);
}

/* Kinetic Cyan Button / Badge */
.btn-cyan-glow {
  background: linear-gradient(135deg, #00e3fd 0%, #00b4d8 100%);
  color: #001f24;
  box-shadow: 0 4px 20px rgba(0, 227, 253, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cyan-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 227, 253, 0.55);
}

/* Equalizer Wave Animation for Active Playing Episode */
.wave-bar {
  display: inline-block;
  width: 3px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 2px;
  margin: 0 1px;
  animation: wave 1.2s ease-in-out infinite alternate;
}
.wave-bar:nth-child(2) { animation-delay: 0.2s; height: 16px; }
.wave-bar:nth-child(3) { animation-delay: 0.4s; height: 10px; }
.wave-bar:nth-child(4) { animation-delay: 0.6s; height: 14px; }

@keyframes wave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

/* Skeleton Loading Shimmer */
.skeleton {
  background: linear-gradient(90deg, #191b22 25%, #282a30 50%, #191b22 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* Modal Transitions */
.auth-modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal-panel {
  transform: scale(0.95) translateY(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-modal-backdrop.open .auth-modal-panel {
  transform: scale(1) translateY(0);
}

/* Artplayer Custom Theme Overrides & Fullscreen Precision */
.art-video-player {
  font-family: var(--font-body) !important;
}

.art-video-player .art-controls {
  padding: 0 10px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.art-video-player .art-controls-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.art-video-player .art-controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  z-index: 50 !important;
}

.art-video-player .art-icon-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.art-video-player .art-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--primary) !important;
}

.art-video-player .art-btn-skip {
  background: rgba(255, 79, 115, 0.9) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(255, 79, 115, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.art-video-player .art-btn-skip:hover {
  background: #ff3366 !important;
  transform: scale(1.05) !important;
}

.art-video-player .art-btn-mode {
  background: rgba(0, 227, 253, 0.2) !important;
  color: #00e3fd !important;
  border: 1px solid rgba(0, 227, 253, 0.5) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(0, 227, 253, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.15s ease !important;
}

.art-video-player .art-btn-mode:hover {
  background: #00e3fd !important;
  color: #001f24 !important;
}

.art-video-player .art-btn-cc {
  background: rgba(0, 227, 253, 0.15) !important;
  color: #00e3fd !important;
  border: 1px solid rgba(0, 227, 253, 0.4) !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.15s ease !important;
}

.art-video-player .art-btn-cc:hover {
  background: #00e3fd !important;
  color: #001f24 !important;
}

.art-video-player .art-btn-cc.disabled {
  opacity: 0.4 !important;
  color: #888888 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  text-decoration: line-through !important;
}

.art-video-player .art-btn-quality {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.15s ease !important;
}

.art-video-player .art-btn-quality:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #00e3fd !important;
  color: #00e3fd !important;
}

.quality-opt-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #00e3fd;
}

/* Fullscreen / Full Big Button Styling */
.art-video-player .art-control-fullscreen,
.art-video-player .art-control-fullscreenWeb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  min-height: 36px !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  order: 99 !important;
}

.art-video-player .art-control-fullscreen svg {
  width: 24px !important;
  height: 24px !important;
  fill: #00e3fd !important; /* Cyan highlight for unmistakable visibility */
  filter: drop-shadow(0 0 8px rgba(0, 227, 253, 0.8)) !important;
  transition: transform 0.2s ease !important;
}

.art-video-player .art-control-fullscreen:hover svg {
  transform: scale(1.2) !important;
}

/* Ensure controls stay clearly visible in fullscreen */
.art-video-player.art-fullscreen .art-bottom,
.art-video-player.art-hover .art-bottom {
  opacity: 1 !important;
  visibility: visible !important;
}

.art-video-player .art-progress-played {
  background: #ff4f73 !important;
}

.art-video-player .art-progress-indicator {
  background: #00e3fd !important;
  box-shadow: 0 0 10px #00e3fd !important;
}

/* Theater Mode Layout */
#player-grid-layout.theater-mode > div:first-child {
  grid-column: 1 / -1 !important;
}

/* Slide Up Toast Animation */
@keyframes slideUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Skeleton Card */
.skeleton-card {
  aspect-ratio: 2/3;
  border-radius: 1rem;
  background: linear-gradient(90deg, #191b22 25%, #282a30 50%, #191b22 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH OPTIMIZATIONS
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Safe Area Insets for Modern Mobile Screens (Notches & Dynamic Island) */
.pt-safe {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
}
.pb-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

/* Prevent unwanted content hiding behind the fixed bottom nav on mobile */
@media (max-width: 767px) {
  #home-view,
  #browse-view,
  #watch-view,
  #account-view {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile Bottom Navigation Bar Styles & Kinetic Active State */
#mobile-bottom-nav {
  transform: translateZ(0);
  will-change: transform;
}

.mobile-nav-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mobile-nav-btn.active {
  color: #ff4f73 !important;
}

.mobile-nav-btn.active .material-symbols-outlined {
  transform: scale(1.15);
  color: #ff4f73 !important;
  font-variation-settings: 'FILL' 1;
  filter: drop-shadow(0 0 10px rgba(255, 79, 115, 0.5));
}

.mobile-nav-btn.active span:last-child {
  color: #ffffff !important;
}

/* Mobile Touch Momentum & Horizontal Rail Scroll */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Interactive touch buttons active feedback */
button:active,
.mobile-nav-btn:active,
.genre-chip:active,
.browse-chip:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* Artplayer Mobile Controls Optimization */
@media (max-width: 640px) {
  .art-video-player .art-controls {
    padding: 0 6px 6px !important;
    gap: 4px !important;
  }
  .art-video-player .art-controls-left {
    gap: 2px !important;
  }
  .art-video-player .art-controls-right {
    gap: 4px !important;
  }
  .art-video-player .art-btn-mode,
  .art-video-player .art-btn-skip,
  .art-video-player .art-btn-cc,
  .art-video-player .art-btn-quality {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }
  .art-video-player .art-icon-btn {
    padding: 2px 4px !important;
  }
}