/* Movie Night Custom Premium Stylesheet */

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0B0914;
}
::-webkit-scrollbar-thumb {
  background: #3B2A6B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6D28D9;
}

/* Glassmorphism Styles */
.glass-panel {
  background: rgba(22, 18, 36, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.glass-panel-heavy {
  background: rgba(14, 11, 24, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.glass-card {
  background: rgba(30, 25, 50, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 92, 246, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

/* Input Fields styling */
.glass-input {
  background: rgba(15, 12, 25, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: #F3F4F6;
  outline: none;
  transition: all 0.3s ease;
}

.glass-input:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
}

/* Button Glows */
.btn-glow {
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
  transform: translateY(-1px);
}

/* Floating Emoji Animations */
@keyframes emojiFloat {
  0% {
    transform: translateY(100%) scale(0.6);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(80%) scale(1.1);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-400px) translateX(var(--float-x, 0px)) scale(1.5);
    opacity: 0;
  }
}

.floating-emoji {
  position: absolute;
  bottom: 0;
  font-size: 2.5rem;
  pointer-events: none;
  animation: emojiFloat 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 50;
}

/* Custom adjustments for Plyr Player to match Purple/Violet Theme */
:root {
  --plyr-color-main: #8B5CF6; /* Purple accent */
  --plyr-video-background: #0B0914;
}

.plyr--video {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Glow effects for texts */
.text-glow {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

/* Pulse animation for Live syncing indicator */
@keyframes syncPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.sync-dot-active {
  animation: syncPulse 2s infinite ease-in-out;
}

/* Prevent horizontal page scrolling/sliding globally on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  position: relative;
}

/* Ensure Plyr video player fills the player-wrapper container */
#player-wrapper .plyr {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

#player-wrapper .plyr__video-wrapper {
  height: 100% !important;
  width: 100% !important;
}

#player-wrapper video {
  object-fit: contain !important;
}

/* Custom premium scrollbar for specific containers */
#chat-messages::-webkit-scrollbar,
#users-list-container::-webkit-scrollbar,
#player-column::-webkit-scrollbar,
#movie-meta-card::-webkit-scrollbar {
  width: 6px;
}
#chat-messages::-webkit-scrollbar-track,
#users-list-container::-webkit-scrollbar-track,
#player-column::-webkit-scrollbar-track,
#movie-meta-card::-webkit-scrollbar-track {
  background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb,
#users-list-container::-webkit-scrollbar-thumb,
#player-column::-webkit-scrollbar-thumb,
#movie-meta-card::-webkit-scrollbar-thumb {
  background: #3B2A6B; /* Dark violet */
  border-radius: 99px;
  border: 1px solid #161224;
}
#chat-messages::-webkit-scrollbar-thumb:hover,
#users-list-container::-webkit-scrollbar-thumb:hover,
#player-column::-webkit-scrollbar-thumb:hover,
#movie-meta-card::-webkit-scrollbar-thumb:hover {
  background: #6D28D9; /* Violet */
}

/* Firefox compatibility */
#chat-messages,
#users-list-container,
#player-column,
#movie-meta-card {
  scrollbar-width: thin;
  scrollbar-color: #3B2A6B transparent;
}