/**
* NeverCast - Styles
* Space-themed design system with multiple color schemes
*/
/* ==========================================================================
CSS Variables & Theme System
========================================================================== */
:root {
/* Cosmic Colors */
--cosmic-red: #ff6b6b;
--cosmic-blue: #4facfe;
--cosmic-green: #00f5d4;
--cosmic-yellow: #fee440;
--cosmic-purple: #9b5de5;
--cosmic-pink: #f15bb5;
--cosmic-orange: #ff9f1c;
--cosmic-gold: #ffc107;
--cosmic-amber: #ff9800;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.4s ease;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Typography */
--font-sans: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ==========================================================================
LIGHT MODE THEMES
========================================================================== */
/* Light Theme - Stellar (Default Light) */
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f0f4ff;
--bg-tertiary: #e0e7ff;
--bg-elevated: #ffffff;
--bg-hover: rgba(99, 102, 241, 0.08);
--bg-active: rgba(99, 102, 241, 0.12);
--text-primary: #1e1b4b;
--text-secondary: #4338ca;
--text-tertiary: #6366f1;
--text-inverse: #ffffff;
--border-color: #c7d2fe;
--border-light: #e0e7ff;
--accent-primary: #6366f1;
--accent-secondary: #818cf8;
--accent-hover: #4f46e5;
--shadow-sm: 0 1px 3px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(99, 102, 241, 0.1);
--shadow-md: 0 4px 6px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(99, 102, 241, 0.1);
--shadow-lg: 0 10px 25px rgba(99, 102, 241, 0.2), 0 6px 10px rgba(99, 102, 241, 0.1);
--video-bg: #f0f4ff;
--video-tile-bg: #e0e7ff;
--video-placeholder-bg: linear-gradient(135deg, #c7d2fe 0%, #e0e7ff 100%);
--control-bg: rgba(255, 255, 255, 0.95);
--control-btn-bg: #ffffff;
--control-btn-hover: #f0f4ff;
/* Tab styling */
--tab-bg: rgba(99, 102, 241, 0.05);
--tab-hover-bg: rgba(99, 102, 241, 0.1);
--tab-active-bg: #ffffff;
--tab-active-text: #6366f1;
/* Button styling */
--btn-primary-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--btn-primary-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(99, 102, 241, 0.5);
/* Lobby card */
--lobby-card-bg: rgba(255, 255, 255, 0.9);
--lobby-card-border: rgba(199, 210, 254, 0.5);
/* Lobby text (on starfield background) */
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.85);
/* Glow effects */
--glow-primary: rgba(99, 102, 241, 0.3);
/* Message bubbles */
--message-bubble-bg: #d8dff5;
}
/* Light Theme - Cosmic Dawn */
[data-theme="light"][data-scheme="dawn"] {
--bg-secondary: #fff7ed;
--bg-tertiary: #ffedd5;
--bg-hover: rgba(249, 115, 22, 0.08);
--bg-active: rgba(249, 115, 22, 0.12);
--text-secondary: #c2410c;
--text-tertiary: #ea580c;
--border-color: #fed7aa;
--border-light: #ffedd5;
--accent-primary: #f97316;
--accent-secondary: #fb923c;
--accent-hover: #ea580c;
--shadow-sm: 0 1px 3px rgba(249, 115, 22, 0.15), 0 1px 2px rgba(249, 115, 22, 0.1);
--shadow-md: 0 4px 6px rgba(249, 115, 22, 0.15), 0 2px 4px rgba(249, 115, 22, 0.1);
--shadow-lg: 0 10px 25px rgba(249, 115, 22, 0.2), 0 6px 10px rgba(249, 115, 22, 0.1);
--video-bg: #fff7ed;
--video-tile-bg: #ffedd5;
--video-placeholder-bg: linear-gradient(135deg, #fed7aa 0%, #ffedd5 100%);
--tab-bg: rgba(249, 115, 22, 0.05);
--tab-hover-bg: rgba(249, 115, 22, 0.1);
--tab-active-text: #f97316;
--btn-primary-bg: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
--btn-primary-hover: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
--btn-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(249, 115, 22, 0.5);
--lobby-card-border: rgba(254, 215, 170, 0.5);
--glow-primary: rgba(249, 115, 22, 0.3);
--message-bubble-bg: #fde4cc;
}
/* Light Theme - Aurora */
[data-theme="light"][data-scheme="aurora"] {
--bg-secondary: #ecfdf5;
--bg-tertiary: #d1fae5;
--bg-hover: rgba(16, 185, 129, 0.08);
--bg-active: rgba(16, 185, 129, 0.12);
--text-secondary: #047857;
--text-tertiary: #059669;
--border-color: #a7f3d0;
--border-light: #d1fae5;
--accent-primary: #10b981;
--accent-secondary: #34d399;
--accent-hover: #059669;
--shadow-sm: 0 1px 3px rgba(16, 185, 129, 0.15), 0 1px 2px rgba(16, 185, 129, 0.1);
--shadow-md: 0 4px 6px rgba(16, 185, 129, 0.15), 0 2px 4px rgba(16, 185, 129, 0.1);
--shadow-lg: 0 10px 25px rgba(16, 185, 129, 0.2), 0 6px 10px rgba(16, 185, 129, 0.1);
--video-bg: #ecfdf5;
--video-tile-bg: #d1fae5;
--video-placeholder-bg: linear-gradient(135deg, #a7f3d0 0%, #d1fae5 100%);
--tab-bg: rgba(16, 185, 129, 0.05);
--tab-hover-bg: rgba(16, 185, 129, 0.1);
--tab-active-text: #10b981;
--btn-primary-bg: linear-gradient(135deg, #10b981 0%, #34d399 100%);
--btn-primary-hover: linear-gradient(135deg, #059669 0%, #10b981 100%);
--btn-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(16, 185, 129, 0.5);
--lobby-card-border: rgba(167, 243, 208, 0.5);
--glow-primary: rgba(16, 185, 129, 0.3);
--message-bubble-bg: #c5f0dc;
}
/* Light Theme - Solar */
[data-theme="light"][data-scheme="solar"] {
--bg-secondary: #fefce8;
--bg-tertiary: #fef9c3;
--bg-hover: rgba(234, 179, 8, 0.08);
--bg-active: rgba(234, 179, 8, 0.12);
--text-secondary: #a16207;
--text-tertiary: #ca8a04;
--border-color: #fde047;
--border-light: #fef9c3;
--accent-primary: #eab308;
--accent-secondary: #facc15;
--accent-hover: #ca8a04;
--shadow-sm: 0 1px 3px rgba(234, 179, 8, 0.15), 0 1px 2px rgba(234, 179, 8, 0.1);
--shadow-md: 0 4px 6px rgba(234, 179, 8, 0.15), 0 2px 4px rgba(234, 179, 8, 0.1);
--shadow-lg: 0 10px 25px rgba(234, 179, 8, 0.2), 0 6px 10px rgba(234, 179, 8, 0.1);
--video-bg: #fefce8;
--video-tile-bg: #fef9c3;
--video-placeholder-bg: linear-gradient(135deg, #fde047 0%, #fef9c3 100%);
--tab-bg: rgba(234, 179, 8, 0.05);
--tab-hover-bg: rgba(234, 179, 8, 0.1);
--tab-active-text: #ca8a04;
--btn-primary-bg: linear-gradient(135deg, #eab308 0%, #facc15 100%);
--btn-primary-hover: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
--btn-primary-text: #1e1b4b;
--btn-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(234, 179, 8, 0.5);
--lobby-card-border: rgba(253, 224, 71, 0.5);
--glow-primary: rgba(234, 179, 8, 0.3);
--message-bubble-bg: #fef0b5;
}
/* ==========================================================================
DARK MODE THEMES
========================================================================== */
/* Dark Theme - Default */
[data-theme="dark"] {
--bg-primary: #020617;
--bg-secondary: #0f172a;
--bg-tertiary: #1e293b;
--bg-elevated: #1e293b;
--bg-hover: rgba(56, 189, 248, 0.15);
--bg-active: rgba(56, 189, 248, 0.25);
--text-primary: #f0f9ff;
--text-secondary: #7dd3fc;
--text-tertiary: #38bdf8;
--text-inverse: #020617;
--border-color: #0369a1;
--border-light: #1e293b;
--accent-primary: #38bdf8;
--accent-secondary: #7dd3fc;
--accent-hover: #7dd3fc;
--shadow-sm: 0 1px 3px rgba(56, 189, 248, 0.2), 0 0 20px rgba(56, 189, 248, 0.1);
--shadow-md: 0 4px 6px rgba(56, 189, 248, 0.25), 0 0 30px rgba(56, 189, 248, 0.15);
--shadow-lg: 0 10px 25px rgba(56, 189, 248, 0.3), 0 0 50px rgba(56, 189, 248, 0.2);
--video-bg: #020617;
--video-tile-bg: #0f172a;
--video-placeholder-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--control-bg: rgba(15, 23, 42, 0.95);
--control-btn-bg: #1e293b;
--control-btn-hover: #334155;
/* Tab styling */
--tab-bg: rgba(56, 189, 248, 0.1);
--tab-hover-bg: rgba(56, 189, 248, 0.2);
--tab-active-bg: #1e293b;
--tab-active-text: #7dd3fc;
/* Button styling */
--btn-primary-bg: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
--btn-primary-hover: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 20px rgba(56, 189, 248, 0.5), 0 0 40px rgba(56, 189, 248, 0.2);
--btn-shadow-hover: 0 6px 25px rgba(56, 189, 248, 0.6), 0 0 50px rgba(56, 189, 248, 0.3);
/* Lobby card */
--lobby-card-bg: rgba(30, 41, 59, 0.8);
--lobby-card-border: rgba(3, 105, 161, 0.5);
/* Lobby text (on starfield background) */
--lobby-text-primary: #f0f9ff;
--lobby-text-secondary: rgba(125, 211, 252, 0.9);
/* Glow effects */
--glow-primary: rgba(56, 189, 248, 0.4);
/* Message bubbles */
--message-bubble-bg: #1e3a5f;
}
/* Dark Theme - Nebula */
[data-theme="dark"][data-scheme="nebula"] {
--bg-primary: #0f0a1f;
--bg-secondary: #1a1035;
--bg-tertiary: #2d1f4e;
--bg-elevated: #251845;
--bg-hover: rgba(139, 92, 246, 0.15);
--bg-active: rgba(139, 92, 246, 0.25);
--text-primary: #f0e6ff;
--text-secondary: #c4b5fd;
--text-tertiary: #a78bfa;
--text-inverse: #0f0a1f;
--border-color: #4c1d95;
--border-light: #2d1f4e;
--accent-primary: #a78bfa;
--accent-secondary: #c4b5fd;
--accent-hover: #c4b5fd;
--shadow-sm: 0 1px 3px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.1);
--shadow-md: 0 4px 6px rgba(139, 92, 246, 0.25), 0 0 30px rgba(139, 92, 246, 0.15);
--shadow-lg: 0 10px 25px rgba(139, 92, 246, 0.3), 0 0 50px rgba(139, 92, 246, 0.2);
--video-bg: #0a0515;
--video-tile-bg: #1a1035;
--video-placeholder-bg: linear-gradient(135deg, #2d1f4e 0%, #1a1035 100%);
--control-bg: rgba(26, 16, 53, 0.95);
--control-btn-bg: #2d1f4e;
--control-btn-hover: #3d2a6e;
--tab-bg: rgba(139, 92, 246, 0.1);
--tab-hover-bg: rgba(139, 92, 246, 0.2);
--tab-active-bg: #251845;
--tab-active-text: #c4b5fd;
--btn-primary-bg: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
--btn-primary-hover: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
--btn-shadow: 0 4px 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.2);
--btn-shadow-hover: 0 6px 25px rgba(139, 92, 246, 0.6), 0 0 50px rgba(139, 92, 246, 0.3);
--lobby-card-bg: rgba(37, 24, 69, 0.8);
--lobby-card-border: rgba(76, 29, 149, 0.5);
--glow-primary: rgba(139, 92, 246, 0.4);
--lobby-text-primary: #f0e6ff;
--lobby-text-secondary: rgba(196, 181, 253, 0.9);
--message-bubble-bg: #3d2a6e;
}
/* Dark Theme - Nova */
[data-theme="dark"][data-scheme="supernova"] {
--bg-primary: #1a0a0a;
--bg-secondary: #2d1515;
--bg-tertiary: #4a2020;
--bg-elevated: #3d1a1a;
--bg-hover: rgba(251, 113, 133, 0.15);
--bg-active: rgba(251, 113, 133, 0.25);
--text-primary: #fff1f2;
--text-secondary: #fda4af;
--text-tertiary: #fb7185;
--text-inverse: #1a0a0a;
--border-color: #be123c;
--border-light: #4a2020;
--accent-primary: #fb7185;
--accent-secondary: #fda4af;
--accent-hover: #fda4af;
--shadow-sm: 0 1px 3px rgba(251, 113, 133, 0.2), 0 0 20px rgba(251, 113, 133, 0.1);
--shadow-md: 0 4px 6px rgba(251, 113, 133, 0.25), 0 0 30px rgba(251, 113, 133, 0.15);
--shadow-lg: 0 10px 25px rgba(251, 113, 133, 0.3), 0 0 50px rgba(251, 113, 133, 0.2);
--video-bg: #0f0505;
--video-tile-bg: #2d1515;
--video-placeholder-bg: linear-gradient(135deg, #4a2020 0%, #2d1515 100%);
--control-bg: rgba(45, 21, 21, 0.95);
--control-btn-bg: #4a2020;
--control-btn-hover: #6b2d2d;
--tab-bg: rgba(251, 113, 133, 0.1);
--tab-hover-bg: rgba(251, 113, 133, 0.2);
--tab-active-bg: #3d1a1a;
--tab-active-text: #fda4af;
--btn-primary-bg: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
--btn-primary-hover: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
--btn-shadow: 0 4px 20px rgba(251, 113, 133, 0.5), 0 0 40px rgba(251, 113, 133, 0.2);
--btn-shadow-hover: 0 6px 25px rgba(251, 113, 133, 0.6), 0 0 50px rgba(251, 113, 133, 0.3);
--lobby-card-bg: rgba(61, 26, 26, 0.8);
--lobby-card-border: rgba(190, 18, 60, 0.5);
--glow-primary: rgba(251, 113, 133, 0.4);
--lobby-text-primary: #fff1f2;
--lobby-text-secondary: rgba(253, 164, 175, 0.9);
--message-bubble-bg: #6b2d2d;
}
/* Dark Theme - Aurora Borealis */
[data-theme="dark"][data-scheme="borealis"] {
--bg-primary: #021a1a;
--bg-secondary: #0a2e2e;
--bg-tertiary: #134545;
--bg-elevated: #0f3d3d;
--bg-hover: rgba(45, 212, 191, 0.15);
--bg-active: rgba(45, 212, 191, 0.25);
--text-primary: #f0fdfa;
--text-secondary: #5eead4;
--text-tertiary: #2dd4bf;
--text-inverse: #021a1a;
--border-color: #0d9488;
--border-light: #134545;
--accent-primary: #2dd4bf;
--accent-secondary: #5eead4;
--accent-hover: #5eead4;
--shadow-sm: 0 1px 3px rgba(45, 212, 191, 0.2), 0 0 20px rgba(45, 212, 191, 0.1);
--shadow-md: 0 4px 6px rgba(45, 212, 191, 0.25), 0 0 30px rgba(45, 212, 191, 0.15);
--shadow-lg: 0 10px 25px rgba(45, 212, 191, 0.3), 0 0 50px rgba(45, 212, 191, 0.2);
--video-bg: #010f0f;
--video-tile-bg: #0a2e2e;
--video-placeholder-bg: linear-gradient(135deg, #134545 0%, #0a2e2e 100%);
--control-bg: rgba(10, 46, 46, 0.95);
--control-btn-bg: #134545;
--control-btn-hover: #1a5c5c;
--tab-bg: rgba(45, 212, 191, 0.1);
--tab-hover-bg: rgba(45, 212, 191, 0.2);
--tab-active-bg: #0f3d3d;
--tab-active-text: #5eead4;
--btn-primary-bg: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
--btn-primary-hover: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
--btn-shadow: 0 4px 20px rgba(45, 212, 191, 0.5), 0 0 40px rgba(45, 212, 191, 0.2);
--btn-shadow-hover: 0 6px 25px rgba(45, 212, 191, 0.6), 0 0 50px rgba(45, 212, 191, 0.3);
--lobby-card-bg: rgba(15, 61, 61, 0.8);
--lobby-card-border: rgba(13, 148, 136, 0.5);
--glow-primary: rgba(45, 212, 191, 0.4);
--lobby-text-primary: #f0fdfa;
--lobby-text-secondary: rgba(94, 234, 212, 0.9);
--message-bubble-bg: #1a5c5c;
}
/* ==========================================================================
Base Styles
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Prevent iOS Safari from adjusting font size */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
background: var(--bg-secondary);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height for iOS Safari */
overflow-x: hidden;
transition: background-color var(--transition-normal), color var(--transition-normal);
/* Prevent pull-to-refresh on mobile */
overscroll-behavior: none;
/* Safe area padding for notched devices */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* ==========================================================================
Screen Management
========================================================================== */
.screen {
display: none;
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height for iOS Safari */
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.screen.active {
display: flex;
}
/* ==========================================================================
Lobby Screen
========================================================================== */
.lobby-screen {
align-items: center;
justify-content: center;
padding: var(--space-lg);
padding-top: max(var(--space-lg), env(safe-area-inset-top));
padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
background: #0a0a1a;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
/* ==========================================================================
Theme-based Cursor Styles (Global)
========================================================================== */
/* Define theme cursor as CSS variable */
[data-theme="light"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="light"][data-scheme="dawn"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="light"][data-scheme="aurora"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="light"][data-scheme="solar"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
/* Dark Mode Cursors */
[data-theme="dark"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="dark"][data-scheme="nebula"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="dark"][data-scheme="supernova"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-theme="dark"][data-scheme="borealis"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
/* Custom Preset Cursors */
[data-preset="win95"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="winxp"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="myspace"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="terminal"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="vaporwave"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="cyberpunk"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="nord"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="dracula"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="geocities"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="commodore"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="amber"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="paper"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="midnight"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="solarized-light"],
[data-preset="solarized-dark"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="monokai"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="gruvbox"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="candy"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="neon"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="synthwave"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="pastel"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="ocean"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="forest"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
[data-preset="sunset"] {
--theme-cursor: url('data:image/svg+xml,') 16 16, auto;
}
/* Apply themed cursor globally, but not to buttons/links which keep pointer */
body {
cursor: var(--theme-cursor);
}
.lobby-container {
width: 100%;
max-width: 900px;
animation: fadeInUp 0.6s ease;
position: relative;
z-index: 1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lobby-header {
text-align: center;
margin-bottom: var(--space-xl);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Lobby Title Row - contains hamburger, logo, settings */
.lobby-title-row {
position: relative;
width: 100%;
text-align: center;
padding-top: var(--space-sm);
}
/* Lobby Settings Button */
.lobby-settings-btn {
position: absolute;
top: var(--space-sm);
right: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
}
.lobby-settings-btn:hover {
background: var(--accent-primary);
color: var(--text-inverse);
transform: rotate(90deg);
box-shadow: 0 0 20px var(--glow-primary);
}
.lobby-settings-btn svg {
width: 24px;
height: 24px;
}
/* Lobby Navigation Button (Hamburger - Mobile Only) */
.lobby-nav-btn {
position: absolute;
top: var(--space-sm);
left: 0;
width: 48px;
height: 48px;
display: none;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
z-index: 10;
}
.lobby-nav-btn:hover {
background: var(--accent-primary);
color: var(--text-inverse);
box-shadow: var(--shadow-md);
}
.lobby-nav-btn svg {
width: 24px;
height: 24px;
}
/* Lobby Navigation Menu - Desktop: Above title row, full width */
.lobby-nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm);
margin-bottom: var(--space-lg);
width: 100%;
background: var(--lobby-card-bg, rgba(30, 41, 59, 0.9));
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
border: 1px solid var(--lobby-card-border, var(--border-color));
box-shadow: var(--shadow-lg), 0 0 30px var(--glow-primary);
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% {
box-shadow: var(--shadow-lg), 0 0 20px var(--glow-primary);
}
50% {
box-shadow: var(--shadow-lg), 0 0 40px var(--glow-primary), 0 0 60px var(--glow-primary);
}
}
.lobby-nav-menu .nav-link {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
color: var(--lobby-text-primary, var(--text-primary));
text-decoration: none;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
white-space: nowrap;
}
/* Light mode: nav menu has light background, so use dark text */
[data-theme="light"] .lobby-nav-menu .nav-link {
color: var(--text-primary);
}
[data-theme="light"] .lobby-nav-menu .nav-link:hover {
color: var(--accent-primary);
}
/* Light-background presets: nav menu has light background, so use dark text */
[data-preset="paper"] .lobby-nav-menu .nav-link,
[data-preset="win95"] .lobby-nav-menu .nav-link,
[data-preset="winxp"] .lobby-nav-menu .nav-link,
[data-preset="solarized-light"] .lobby-nav-menu .nav-link,
[data-preset="candy"] .lobby-nav-menu .nav-link,
[data-preset="pastel"] .lobby-nav-menu .nav-link {
color: var(--text-primary);
}
[data-preset="paper"] .lobby-nav-menu .nav-link:hover,
[data-preset="win95"] .lobby-nav-menu .nav-link:hover,
[data-preset="winxp"] .lobby-nav-menu .nav-link:hover,
[data-preset="solarized-light"] .lobby-nav-menu .nav-link:hover,
[data-preset="candy"] .lobby-nav-menu .nav-link:hover,
[data-preset="pastel"] .lobby-nav-menu .nav-link:hover {
color: var(--accent-primary);
}
.lobby-nav-menu .nav-link:hover {
background: var(--bg-hover);
color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--glow-primary);
}
/* Mobile Navigation Menu Dropdown */
@media (max-width: 768px) {
.lobby-nav-btn {
display: flex;
}
/* Hide desktop nav menu, show as dropdown on mobile */
.lobby-nav-menu {
position: absolute;
top: 64px;
left: 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: var(--space-xs);
padding: var(--space-sm);
margin-top: 0;
margin-bottom: 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-normal);
animation: none;
box-shadow: var(--shadow-lg), 0 0 30px var(--glow-primary);
z-index: 100;
}
.lobby-nav-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
animation: glowPulse 3s ease-in-out infinite;
}
.lobby-nav-menu .nav-link {
padding: var(--space-md);
border-radius: var(--radius-md);
}
.lobby-nav-menu .nav-link:hover {
transform: none;
}
}
/* Smaller hamburger on small phones */
@media (max-width: 480px) {
.lobby-nav-btn {
width: 40px;
height: 40px;
}
.lobby-nav-btn svg {
width: 20px;
height: 20px;
}
.lobby-nav-menu {
top: 56px;
min-width: 180px;
}
}
.logo {
display: inline-flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xs);
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.logo-text {
font-family: var(--font-sans);
font-size: 36px;
font-weight: 700;
color: var(--lobby-text-primary);
text-shadow: 0 0 30px var(--glow-primary), 0 0 60px var(--glow-secondary);
letter-spacing: -0.5px;
}
.logo-text.floating {
display: inline-block;
animation: logoFloat 3s ease-in-out infinite;
}
.lobby-subtitle {
color: var(--lobby-text-secondary);
font-size: 16px;
}
/* Lobby Card */
.lobby-card {
background: var(--lobby-card-bg, var(--bg-elevated));
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: var(--space-xl);
border: 1px solid var(--lobby-card-border, var(--border-light));
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.lobby-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, var(--glow-primary, transparent) 0%, transparent 50%);
opacity: 0.3;
pointer-events: none;
animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.05); }
}
.lobby-card-content {
display: flex;
gap: var(--space-lg);
align-items: center;
}
.lobby-form-section {
flex: 1;
min-width: 0;
}
/* Tab Buttons */
.card-tabs {
display: flex;
gap: 0;
margin-bottom: var(--space-lg);
padding: 0;
background: transparent;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-color);
}
.tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border: none;
background: var(--tab-bg);
border-radius: 0;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
}
.tab-btn:first-child {
border-right: 1px solid var(--border-color);
}
.tab-btn:hover {
color: var(--text-primary);
background: var(--tab-hover-bg);
}
.tab-btn.active {
color: var(--tab-active-text);
background: var(--tab-active-bg);
box-shadow: none;
}
.tab-btn.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--active-underline-color, var(--accent-primary));
}
.tab-btn svg {
width: 20px;
height: 20px;
}
/* Split Tab Buttons (Reserve | Create) */
.tab-btn-split {
flex: 1;
display: flex;
min-width: 0;
}
.tab-btn-split .tab-btn {
flex: 1;
padding: var(--space-md) var(--space-sm);
font-size: 13px;
gap: var(--space-xs);
border-right: none;
}
.tab-btn-split .tab-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.tab-btn-split .tab-btn-left {
border-right: 1px solid var(--border-color);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tab-btn-split .tab-btn-right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* When one of the split buttons is active */
.tab-btn-split .tab-btn.active {
z-index: 1;
}
/* Form Styles */
.lobby-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.form-group label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
padding-left: var(--space-xs);
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.input-wrapper input {
width: 100%;
padding: 14px 56px 14px 50px;
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: 15px;
color: var(--text-primary);
background: var(--bg-primary);
transition: all var(--transition-fast);
text-overflow: ellipsis;
}
.input-wrapper input:hover {
border-color: var(--accent-secondary);
}
.input-wrapper input:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 4px var(--glow-primary), 0 0 20px var(--glow-primary);
}
.input-wrapper input::placeholder {
color: var(--text-tertiary);
opacity: 0.7;
}
.generate-btn {
position: absolute;
right: var(--space-sm);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--accent-primary);
border-radius: var(--radius-full);
color: var(--text-inverse);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 2px 8px var(--glow-primary);
}
.generate-btn:hover {
background: var(--accent-hover);
transform: rotate(180deg);
box-shadow: 0 4px 15px var(--glow-primary);
}
.generate-btn svg {
width: 22px;
height: 22px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: var(--space-md);
cursor: pointer;
padding: var(--space-sm);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.checkbox-wrapper:hover {
background: var(--bg-hover);
}
.checkbox-wrapper input {
display: none;
}
.checkmark {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
color: var(--text-tertiary);
transition: all var(--transition-fast);
border: 2px solid var(--border-color);
}
.checkmark svg {
width: 22px;
height: 22px;
}
.checkbox-wrapper input:checked + .checkmark {
background: var(--accent-primary);
color: var(--text-inverse);
border-color: var(--accent-primary);
box-shadow: 0 0 15px var(--glow-primary);
}
[data-theme="dark"] .checkbox-wrapper input:checked + .checkmark {
color: var(--bg-primary);
}
.checkbox-label {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
}
/* Submit Button Row */
.lobby-submit-row {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.lobby-submit-row .submit-btn {
margin-top: 0;
}
.lobby-submit-row .submit-btn-secondary {
flex: 0 0 auto;
width: auto;
background: var(--bg-tertiary);
color: var(--text-primary);
box-shadow: none;
border: 1px solid var(--border-color);
}
.lobby-submit-row .submit-btn-secondary:hover {
background: var(--bg-secondary);
box-shadow: var(--btn-shadow);
}
.lobby-submit-row .submit-btn-secondary .btn-icon {
width: 18px;
height: 18px;
}
/* Submit Button */
.submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: 16px var(--space-xl);
margin-top: var(--space-md);
border: none;
border-radius: var(--radius-lg);
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--btn-shadow);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.submit-btn:hover {
background: var(--btn-primary-hover);
box-shadow: var(--btn-shadow-hover);
transform: translateY(-2px);
}
.submit-btn:active {
transform: translateY(0) scale(0.98);
}
.submit-btn .btn-icon {
width: 22px;
height: 22px;
transition: transform var(--transition-fast);
}
.submit-btn:hover .btn-icon {
transform: translateX(4px);
}
/* Submit Button Loading State */
.submit-btn.loading {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
position: relative;
}
.submit-btn.loading .btn-text::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: 8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: submit-spinner 0.8s linear infinite;
vertical-align: middle;
}
@keyframes submit-spinner {
to { transform: rotate(360deg); }
}
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
/* Video Preview */
.video-preview-container {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 320px;
gap: var(--space-md);
}
.video-preview {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--video-tile-bg);
border: 2px solid var(--border-color);
box-shadow: var(--shadow-md);
}
.video-preview video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.preview-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: var(--video-placeholder-bg);
color: var(--text-tertiary);
}
.preview-placeholder svg {
width: 56px;
height: 56px;
color: var(--accent-secondary);
opacity: 0.7;
}
.preview-placeholder span {
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;
}
.preview-placeholder.hidden {
display: none;
}
/* ==========================================================================
Lobby Mic Meter
========================================================================== */
.lobby-mic-meter-container {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
width: 100%;
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.lobby-mic-meter-container.disabled {
opacity: 0.4;
}
.lobby-mic-icon {
width: 24px;
height: 24px;
color: var(--accent-primary);
flex-shrink: 0;
}
.lobby-mic-icon svg {
width: 100%;
height: 100%;
}
.lobby-mic-meter-container.disabled .lobby-mic-icon {
color: var(--text-tertiary);
}
.lobby-mic-meter-stereo {
flex: 1;
min-width: 120px;
display: flex;
flex-direction: column;
gap: 3px;
}
.lobby-mic-channel {
display: flex;
align-items: center;
gap: 6px;
}
.lobby-mic-channel-label {
font-family: 'Roboto Mono', monospace;
font-size: 9px;
font-weight: 600;
color: var(--text-tertiary);
width: 10px;
text-align: center;
flex-shrink: 0;
}
.lobby-mic-meter-track {
flex: 1;
height: 6px;
background: var(--bg-secondary);
border-radius: var(--radius-full);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.lobby-mic-meter-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--cosmic-green) 0%, var(--cosmic-yellow) 60%, var(--cosmic-orange) 80%, var(--cosmic-red) 100%);
border-radius: var(--radius-full);
transition: width 0.05s ease-out;
box-shadow: 0 0 8px var(--cosmic-green);
}
.lobby-mic-meter-container.disabled .lobby-mic-meter-bar {
width: 0% !important;
background: var(--text-tertiary);
box-shadow: none;
}
.lobby-mic-meter-container.disabled .lobby-mic-channel-label {
color: var(--text-tertiary);
}
.lobby-mic-db {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
min-width: 52px;
text-align: right;
}
.lobby-mic-meter-container.disabled .lobby-mic-db {
color: var(--text-tertiary);
}
/* ==========================================================================
Lobby Media Toggles
========================================================================== */
.lobby-media-toggles {
display: flex;
gap: var(--space-sm);
width: 100%;
justify-content: center;
}
.lobby-toggle-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
cursor: pointer;
transition: all var(--transition-fast);
flex: 1;
max-width: 120px;
}
.lobby-toggle-btn:hover {
background: var(--bg-hover);
border-color: var(--accent-primary);
}
.lobby-toggle-btn input {
display: none;
}
.lobby-toggle-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent-primary);
color: var(--text-inverse);
transition: all var(--transition-fast);
}
[data-theme="dark"] .lobby-toggle-icon {
color: var(--bg-primary);
}
.lobby-toggle-icon svg {
width: 20px;
height: 20px;
}
.lobby-toggle-icon .icon-off {
display: none;
}
.lobby-toggle-btn input:not(:checked) + .lobby-toggle-icon {
background: var(--bg-secondary);
color: var(--text-tertiary);
}
[data-theme="dark"] .lobby-toggle-btn input:not(:checked) + .lobby-toggle-icon {
color: var(--text-tertiary);
}
.lobby-toggle-btn input:not(:checked) + .lobby-toggle-icon .icon-on {
display: none;
}
.lobby-toggle-btn input:not(:checked) + .lobby-toggle-icon .icon-off {
display: block;
}
.lobby-toggle-label {
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
}
.lobby-toggle-btn input:checked ~ .lobby-toggle-label {
color: var(--accent-primary);
}
/* ==========================================================================
Click Effects
========================================================================== */
.click-effects-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
overflow: hidden;
}
/* Ripple Effect */
.click-effect-ripple {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
opacity: 0.6;
transform: translate(-50%, -50%) scale(0);
animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
/* Sparkle Effect */
.click-effect-sparkle {
position: absolute;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
}
.sparkle-particle {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent-primary);
box-shadow: 0 0 6px var(--accent-primary), 0 0 12px var(--accent-secondary);
animation: sparkleFloat 0.8s ease-out forwards;
}
@keyframes sparkleFloat {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) scale(0);
}
}
/* Burst Effect */
.click-effect-burst {
position: absolute;
transform: translate(-50%, -50%);
}
.burst-ring {
position: absolute;
border: 3px solid var(--accent-primary);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: burstRing 0.5s ease-out forwards;
}
.burst-ring:nth-child(2) {
animation-delay: 0.1s;
border-color: var(--accent-secondary);
}
@keyframes burstRing {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
/* Cosmic Effect */
.click-effect-cosmic {
position: absolute;
transform: translate(-50%, -50%);
}
.cosmic-star {
position: absolute;
background: white;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: cosmicSpin 0.8s ease-out forwards;
box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-secondary);
}
@keyframes cosmicSpin {
0% {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) rotate(360deg) scale(0);
}
}
.cosmic-trail {
position: absolute;
width: 2px;
height: 20px;
background: linear-gradient(to bottom, var(--accent-primary), transparent);
transform-origin: center top;
animation: cosmicTrail 0.6s ease-out forwards;
}
@keyframes cosmicTrail {
0% {
opacity: 1;
transform: rotate(var(--rotation)) scaleY(0);
}
50% {
opacity: 1;
transform: rotate(var(--rotation)) scaleY(1);
}
100% {
opacity: 0;
transform: rotate(var(--rotation)) scaleY(0) translateY(30px);
}
}
/* ==========================================================================
Click Effect Options in Settings
========================================================================== */
.click-effect-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.click-effect-option {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
cursor: pointer;
transition: all var(--transition-fast);
flex: 1 1 auto;
min-width: 70px;
}
.click-effect-option:hover {
border-color: var(--accent-secondary);
transform: translateY(-2px);
}
.click-effect-option.active {
border-color: var(--accent-primary);
background: var(--bg-hover);
box-shadow: 0 0 15px var(--glow-primary);
}
.click-effect-options.disabled {
opacity: 0.5;
pointer-events: none;
}
.click-effect-option:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.effect-preview {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.effect-preview.ripple-preview {
background: radial-gradient(circle, var(--accent-primary) 20%, var(--accent-secondary) 50%, transparent 70%);
}
.effect-preview.sparkle-preview {
background: var(--bg-tertiary);
}
.effect-preview.sparkle-preview::before {
content: '★';
color: var(--accent-primary);
font-size: 20px;
text-shadow: 0 0 10px var(--accent-primary);
}
.effect-preview.cosmic-preview {
background: var(--bg-tertiary);
}
.effect-preview.cosmic-preview::before,
.effect-preview.cosmic-preview::after {
content: '✦';
position: absolute;
color: var(--accent-primary);
font-size: 12px;
}
.effect-preview.cosmic-preview::before {
top: 5px;
left: 10px;
}
.effect-preview.cosmic-preview::after {
bottom: 8px;
right: 8px;
font-size: 8px;
}
.effect-preview.burst-preview {
border: 3px solid var(--accent-primary);
background: transparent;
}
.effect-preview.burst-preview::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border: 2px solid var(--accent-secondary);
border-radius: 50%;
}
.effect-name {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Lobby Footer */
.lobby-footer {
text-align: center;
margin-top: var(--space-xl);
color: var(--lobby-text-secondary);
font-size: 14px;
}
.lobby-footer p {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.lobby-footer p::before,
.lobby-footer p::after {
content: '✦';
color: var(--accent-primary);
opacity: 0.7;
}
/* ==========================================================================
Room Screen
========================================================================== */
.room-screen {
flex-direction: column;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for iOS Safari */
max-height: 100vh;
max-height: 100dvh;
background: var(--video-bg);
overflow: hidden;
position: relative;
/* Safe area padding for notched devices */
padding-top: env(safe-area-inset-top);
}
/* Ensure room content stays within viewport */
.room-screen > * {
flex-shrink: 0;
}
.room-screen .room-main {
flex-shrink: 1;
}
/* Room Header */
.room-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-light);
z-index: 100;
position: relative;
backdrop-filter: blur(10px);
gap: var(--space-sm);
flex-wrap: nowrap;
}
/* Control Bar z-index */
.control-bar {
position: relative;
z-index: 100;
}
.room-info {
display: flex;
align-items: center;
gap: var(--space-md);
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.back-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--radius-full);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.back-btn:hover {
background: var(--bg-hover);
}
.back-btn svg {
width: 24px;
height: 24px;
}
.room-details {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
overflow: hidden;
}
.room-name {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.room-meta {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-wrap: wrap;
}
/* Badges */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background: var(--bg-hover);
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
box-shadow: 0 0 10px var(--glow-primary);
}
.participant-count {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-secondary);
font-size: 13px;
}
.participant-count svg {
color: var(--text-tertiary);
}
.room-actions {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
.action-btn {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-color);
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.action-btn:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--text-inverse);
box-shadow: 0 0 15px var(--glow-primary);
}
.action-btn.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--text-inverse);
box-shadow: 0 0 15px var(--glow-primary);
}
.action-btn svg {
width: 20px;
height: 20px;
}
.btn-label {
display: none;
}
@media (min-width: 640px) {
.btn-label {
display: inline;
}
}
/* Chat button with badge wrapper */
#toggleChatBtn {
position: relative;
}
.notification-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: var(--radius-full);
background: var(--cosmic-red);
color: white;
font-size: 11px;
font-weight: 700;
box-shadow: 0 2px 10px rgba(255, 107, 107, 0.5);
pointer-events: none;
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Adjust badge size for larger counts */
.notification-badge[data-count="2"] {
min-width: 22px;
}
.notification-badge[data-count="3"] {
min-width: 28px;
}
.notification-badge.hidden {
display: none;
}
/* ==========================================================================
Main Content Area
========================================================================== */
.room-main {
flex: 1;
display: flex;
overflow: hidden;
min-height: 0; /* Important for flex child to not overflow */
max-height: calc(100vh - 130px); /* Account for header and control bar */
max-height: calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
position: relative;
z-index: 10;
}
/* Video Grid */
.video-grid {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--video-bg);
overflow: hidden;
min-height: 0;
max-height: 100%;
}
/* Video Tile Sizing - Scale to fit within viewport */
.video-grid[data-count="1"] .video-tile {
width: min(100%, 800px);
max-height: calc(100% - var(--space-md));
}
.video-grid[data-count="2"] .video-tile {
width: calc(50% - var(--space-sm));
max-width: 550px;
max-height: calc(100% - var(--space-md));
}
.video-grid[data-count="3"] .video-tile,
.video-grid[data-count="4"] .video-tile {
width: calc(50% - var(--space-sm));
max-width: 450px;
max-height: calc(50% - var(--space-sm));
}
.video-grid[data-count="5"] .video-tile,
.video-grid[data-count="6"] .video-tile {
width: calc(33.333% - var(--space-sm));
max-width: 350px;
max-height: calc(50% - var(--space-sm));
}
/* 7+ participants */
.video-grid .video-tile {
width: calc(33.333% - var(--space-sm));
max-width: 300px;
max-height: calc(33.333% - var(--space-sm));
}
/* Video Tile */
.video-tile {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--video-tile-bg);
aspect-ratio: 16 / 9;
flex-shrink: 1;
min-width: 200px;
min-height: 112px;
}
.video-tile video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hide video element when no video to prevent showing last frame or black screen */
.video-tile video.no-video {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
position: absolute;
z-index: -1;
}
.video-tile.local video {
transform: scaleX(-1);
}
.video-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--video-placeholder-bg);
z-index: 5;
}
.video-placeholder.hidden {
display: none;
}
.avatar {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 32px;
font-weight: 600;
color: white;
box-shadow: 0 4px 20px var(--glow-primary), 0 0 40px var(--glow-primary);
z-index: 1;
border: 3px solid rgba(255, 255, 255, 0.2);
animation: avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse {
0%, 100% { box-shadow: 0 4px 20px var(--glow-primary), 0 0 40px var(--glow-primary); }
50% { box-shadow: 0 4px 30px var(--glow-primary), 0 0 60px var(--glow-primary); }
}
.avatar span,
.avatar .avatar-initials {
display: block;
line-height: 1;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Speaking Indicator */
.speaking-indicator {
position: absolute;
inset: 0;
border-radius: var(--radius-md);
border: 3px solid transparent;
pointer-events: none;
transition: all 0.1s ease;
z-index: 15;
}
.video-tile.speaking .speaking-indicator {
border-color: var(--accent-primary);
box-shadow: inset 0 0 30px var(--glow-primary), 0 0 20px var(--glow-primary);
}
.video-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
z-index: 10;
}
.participant-name {
color: white;
font-size: 13px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.media-indicators {
display: flex;
gap: var(--space-xs);
}
/* Mic Indicator - Always visible */
.indicator {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.2);
color: white;
transition: all var(--transition-fast);
}
.indicator svg {
width: 16px;
height: 16px;
}
/* Mic indicator states */
.mic-indicator .mic-on {
display: block;
}
.mic-indicator .mic-off {
display: none;
}
.mic-indicator.muted {
background: var(--gmail-red);
}
.mic-indicator.muted .mic-on {
display: none;
}
.mic-indicator.muted .mic-off {
display: block;
}
/* ==========================================================================
Spotlight Layout (Dominant Speaker Mode)
========================================================================== */
/* When spotlight mode is active, reorganize the grid */
.video-grid.spotlight-mode {
flex-direction: column;
flex-wrap: nowrap;
align-content: stretch;
gap: var(--space-sm);
}
/* Spotlight area - main speaker takes up most space */
.spotlight-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
width: 100%;
}
.spotlight-area .video-tile {
width: 100%;
max-width: 1200px;
max-height: 100%;
min-width: 300px;
}
/* Filmstrip - other participants in a centered, growing row */
.filmstrip {
display: flex;
flex-direction: row;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
overflow-x: auto;
overflow-y: visible;
flex-shrink: 0;
height: 120px;
min-height: 120px;
width: 100%;
align-items: center;
justify-content: flex-start;
scrollbar-width: thin;
scrollbar-color: var(--accent-primary) transparent;
}
/* Spacers that center content when there's room, but collapse when scrolling is needed */
.filmstrip::before,
.filmstrip::after {
content: '';
flex: 1 0 0;
min-width: 0;
}
.filmstrip::-webkit-scrollbar {
height: 6px;
}
.filmstrip::-webkit-scrollbar-track {
background: transparent;
}
.filmstrip::-webkit-scrollbar-thumb {
background: var(--accent-primary);
border-radius: var(--radius-full);
}
.filmstrip .video-tile {
flex: 0 0 auto;
width: 160px;
min-width: 120px;
max-width: 200px;
height: 100px;
min-height: 100px;
max-height: 100px;
aspect-ratio: 16 / 9;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.filmstrip .video-tile:hover {
transform: scale(1.05);
box-shadow: 0 0 20px var(--glow-primary);
z-index: 10;
}
/* Filmstrip tile name - smaller font */
.filmstrip .video-tile .video-label {
padding: var(--space-xs) var(--space-sm);
}
.filmstrip .video-tile .participant-name {
font-size: 11px;
}
.filmstrip .video-tile .indicator {
width: 20px;
height: 20px;
}
.filmstrip .video-tile .indicator svg {
width: 12px;
height: 12px;
}
.filmstrip .video-tile .avatar {
width: 40px;
height: 40px;
font-size: 14px;
}
.filmstrip .video-tile .expand-hint {
width: 24px;
height: 24px;
}
.filmstrip .video-tile .expand-hint svg {
width: 14px;
height: 14px;
}
/* Role badges in filmstrip */
.filmstrip .video-tile .role-indicator .role-badge {
font-size: 8px;
padding: 1px 4px;
}
/* Override data-count styles when in spotlight mode */
.video-grid.spotlight-mode[data-count] .spotlight-area .video-tile {
width: 100%;
max-width: 1200px;
max-height: 100%;
}
.video-grid.spotlight-mode[data-count] .filmstrip .video-tile {
flex: 0 0 auto;
width: 160px;
min-width: 120px;
max-width: 200px;
max-height: 100px;
}
/* Ensure video-grid fills available space in spotlight mode */
body.spotlight-active .room-main {
overflow: visible;
}
body.spotlight-active .video-grid.spotlight-mode {
max-height: 100%;
overflow: visible;
/* Leave room at bottom for the floating choose-media-bar */
padding-bottom: 60px;
box-sizing: border-box;
}
body.spotlight-active .spotlight-area {
/* Let spotlight area flex naturally but constrain height */
flex: 1;
min-height: 0;
max-height: calc(100% - 130px); /* Leave room for filmstrip (120px + gap) */
overflow: visible;
}
body.spotlight-active .spotlight-area .video-tile {
max-height: 100%;
width: 100%;
}
/* Mobile adjustments for spotlight mode */
@media (max-width: 768px) {
.filmstrip {
height: 100px;
min-height: 100px;
padding: var(--space-xs) var(--space-sm);
}
.filmstrip .video-tile {
flex: 0 0 auto;
width: 120px;
min-width: 100px;
max-width: 140px;
height: 80px;
min-height: 80px;
max-height: 80px;
}
.filmstrip .video-tile .avatar {
width: 32px;
height: 32px;
font-size: 12px;
}
body.spotlight-active .room-main {
overflow: visible;
}
body.spotlight-active .video-grid.spotlight-mode {
max-height: 100%;
overflow: visible;
/* Leave room at bottom for the floating choose-media-bar */
padding-bottom: 100px;
}
body.spotlight-active .spotlight-area {
flex: 1;
min-height: 0;
max-height: calc(100% - 110px); /* Leave room for filmstrip (100px + gap) */
overflow: visible;
}
}
/* ==========================================================================
Participants Panel
========================================================================== */
.participants-panel {
width: 320px;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border-left: 1px solid var(--border-light);
animation: slideIn 0.3s ease;
/* Ensure panel doesn't overflow on mobile */
max-height: 100%;
}
.participants-panel.hidden {
display: none;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
.panel-header h2 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
.close-panel-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.close-panel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.close-panel-btn svg {
width: 20px;
height: 20px;
}
.participants-list {
flex: 1;
overflow-y: auto;
padding: var(--space-sm);
}
.participant-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
margin-bottom: var(--space-xs);
}
.participant-item:hover {
background: var(--bg-hover);
}
.participant-item.is-you {
background: var(--bg-tertiary);
}
.participant-avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
.participant-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.participant-name-row {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-wrap: wrap;
}
.participant-name-text {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.participant-name-row .you-badge {
font-size: 10px;
font-weight: 600;
color: var(--accent-primary);
background: var(--bg-hover);
padding: 1px 5px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.participant-status {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.participant-status .status-icon {
width: 14px;
height: 14px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.participant-status .status-icon.active {
color: var(--cosmic-green);
}
.participant-status .status-icon.muted {
color: var(--cosmic-red);
}
.participant-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
flex-wrap: nowrap;
align-items: center;
position: relative;
}
.participant-action-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.participant-action-btn:hover {
background: var(--accent-primary);
color: var(--text-inverse);
}
.participant-action-btn svg {
width: 14px;
height: 14px;
}
/* Moderation Action Buttons */
.participant-action-btn.mod-action {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
.participant-action-btn.mod-action:hover {
background: var(--accent-secondary);
color: white;
border-color: var(--accent-secondary);
}
.participant-action-btn.mod-action.active {
background: var(--cosmic-amber);
color: white;
border-color: var(--cosmic-amber);
}
.participant-action-btn.mod-action.danger {
background: var(--bg-secondary);
}
.participant-action-btn.mod-action.danger:hover {
background: var(--cosmic-red);
color: white;
border-color: var(--cosmic-red);
}
.participant-action-btn.mod-action.promote {
background: var(--bg-secondary);
}
.participant-action-btn.mod-action.promote:hover {
background: var(--cosmic-green);
color: white;
border-color: var(--cosmic-green);
}
.participant-action-btn.mod-action.demote:hover {
background: var(--cosmic-amber);
color: white;
border-color: var(--cosmic-amber);
}
/* Role Badges */
.role-badge {
font-size: 9px;
font-weight: 600;
padding: 1px 5px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.host-badge {
background: linear-gradient(135deg, var(--cosmic-gold) 0%, var(--cosmic-amber) 100%);
color: #1a1a2e;
}
.mod-badge {
background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--cosmic-purple) 100%);
color: white;
}
/* Participant Item States */
.participant-item.is-host .participant-avatar {
background: linear-gradient(135deg, var(--cosmic-gold) 0%, var(--cosmic-amber) 100%);
box-shadow: 0 0 0 2px var(--cosmic-gold);
}
.participant-item.is-moderator .participant-avatar {
background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--cosmic-purple) 100%);
box-shadow: 0 0 0 2px var(--accent-secondary);
}
.participant-item.is-muted-by-mod {
opacity: 0.7;
}
/* Restore full opacity when dropdown is open so menu isn't translucent */
.participant-item.is-muted-by-mod:has(.mod-dropdown-menu.open) {
opacity: 1;
}
.participant-status .status-icon.muted-by-mod {
color: var(--cosmic-amber);
}
/* ==========================================================================
Participants Panel Tabs
========================================================================== */
.participants-tabs {
display: flex;
gap: 4px;
padding: 8px 12px;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
}
.participants-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: 1px solid var(--border-light);
border-radius: 8px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.participants-tab:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.participants-tab.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.participants-tab svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ==========================================================================
Mod Actions Dropdown
========================================================================== */
/* Elevate participant item z-index when dropdown is open to appear above sibling items */
.participant-item:has(.mod-dropdown-menu.open) {
position: relative;
z-index: 10;
}
.mod-dropdown-container {
position: relative;
z-index: 1;
}
.mod-dropdown-container:has(.mod-dropdown-menu.open) {
z-index: 1001;
}
/* Lower sibling button z-index when dropdown is open */
.participant-actions:has(.mod-dropdown-menu.open) .participant-action-btn:not(.dropdown-trigger) {
z-index: 0;
}
.dropdown-trigger {
padding: 0;
}
/* Ensure dropdown trigger stays below the open menu */
.mod-dropdown-container:has(.mod-dropdown-menu.open) .dropdown-trigger {
z-index: 0;
}
.mod-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 160px;
background: var(--bg-elevated);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
z-index: 1000;
overflow: hidden;
}
.mod-dropdown-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 1002;
}
.mod-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 13px;
font-weight: 400;
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.mod-dropdown-item:hover {
background: var(--bg-hover);
}
.mod-dropdown-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--text-tertiary);
}
.mod-dropdown-item.promote {
color: var(--cosmic-green);
}
.mod-dropdown-item.promote svg {
color: var(--cosmic-green);
}
.mod-dropdown-item.promote:hover {
background: rgba(46, 204, 113, 0.1);
}
.mod-dropdown-item.demote {
color: var(--cosmic-amber);
}
.mod-dropdown-item.demote svg {
color: var(--cosmic-amber);
}
.mod-dropdown-item.demote:hover {
background: rgba(255, 193, 7, 0.1);
}
.mod-dropdown-item.kick {
color: var(--cosmic-amber);
}
.mod-dropdown-item.kick svg {
color: var(--cosmic-amber);
}
.mod-dropdown-item.kick:hover {
background: rgba(255, 193, 7, 0.1);
}
.mod-dropdown-item.ban {
color: var(--cosmic-red);
}
.mod-dropdown-item.ban svg {
color: var(--cosmic-red);
}
.mod-dropdown-item.ban:hover {
background: rgba(231, 76, 60, 0.1);
}
.mod-dropdown-separator {
height: 1px;
margin: 4px 0;
background: var(--border-light);
}
/* ==========================================================================
Banned Users List
========================================================================== */
.participant-item.banned-user {
opacity: 0.8;
}
.participant-avatar.banned {
background: linear-gradient(135deg, var(--cosmic-red) 0%, #c0392b 100%);
display: flex;
align-items: center;
justify-content: center;
}
.participant-avatar.banned svg {
width: 20px;
height: 20px;
color: white;
}
.banned-badge {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
color: white;
background: var(--cosmic-red);
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
}
.banned-info {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 2px;
}
.participant-action-btn.mod-action.unban {
background: var(--bg-secondary);
}
.participant-action-btn.mod-action.unban:hover {
background: var(--cosmic-green);
color: white;
}
/* Banned Empty State */
.banned-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
color: var(--text-tertiary);
}
.banned-empty-state svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
color: var(--cosmic-green);
opacity: 0.6;
}
.banned-empty-state p {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin: 0 0 4px;
}
.banned-empty-state span {
font-size: 12px;
}
/* ==========================================================================
Ban Modal
========================================================================== */
.ban-modal {
max-width: 380px;
text-align: center;
padding: 32px;
background: var(--bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
position: relative;
}
.ban-modal-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
border-radius: 50%;
}
.ban-modal-icon svg {
width: 36px;
height: 36px;
color: var(--cosmic-red);
}
.ban-modal-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 20px;
}
.ban-modal-user {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
background: var(--bg-tertiary);
border-radius: 12px;
margin-bottom: 16px;
}
.ban-modal-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: white;
margin-bottom: 10px;
}
.ban-modal-username {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.ban-modal-id {
font-size: 11px;
color: var(--text-tertiary);
font-family: monospace;
}
.ban-modal-warning {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: rgba(231, 76, 60, 0.1);
border: 1px solid rgba(231, 76, 60, 0.2);
border-radius: 8px;
margin-bottom: 24px;
text-align: left;
}
.ban-modal-warning svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--cosmic-red);
margin-top: 1px;
}
.ban-modal-warning span {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.ban-modal-actions {
display: flex;
gap: 12px;
}
.ban-modal-btn {
flex: 1;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.ban-modal-btn.cancel {
background: var(--bg-tertiary);
border: 1px solid var(--border-light);
color: var(--text-primary);
}
.ban-modal-btn.cancel:hover {
background: var(--bg-hover);
}
.ban-modal-btn.confirm {
background: linear-gradient(135deg, var(--cosmic-red) 0%, #c0392b 100%);
border: none;
color: white;
}
.ban-modal-btn.confirm:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
/* Muted by Moderator Button State */
.control-btn.muted-by-mod {
background: var(--cosmic-amber) !important;
color: white !important;
cursor: not-allowed;
position: relative;
}
.control-btn.muted-by-mod::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
background: var(--cosmic-red);
border-radius: 50%;
border: 2px solid var(--bg-elevated);
}
/* Host/Mod indicator on video tile */
.video-tile .role-indicator {
position: absolute;
top: 8px;
left: 8px;
display: flex;
gap: 4px;
z-index: 10;
}
.video-tile .role-indicator .role-badge {
font-size: 9px;
padding: 2px 5px;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.6);
}
.video-tile .role-indicator .host-badge {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 152, 0, 0.9) 100%);
}
.video-tile .role-indicator .mod-badge {
background: linear-gradient(135deg, rgba(78, 205, 196, 0.9) 0%, rgba(138, 43, 226, 0.9) 100%);
}
/* ==========================================================================
Chat Panel
========================================================================== */
.chat-panel {
width: 360px;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border-left: 1px solid var(--border-light);
animation: slideIn 0.3s ease;
/* Ensure panel doesn't overflow on mobile */
max-height: 100%;
}
.chat-panel.hidden {
display: none;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-light);
gap: var(--space-sm);
}
.chat-tabs {
display: flex;
gap: var(--space-xs);
flex: 1;
overflow-x: auto;
padding: var(--space-xs) 0;
}
.chat-tabs::-webkit-scrollbar {
height: 4px;
}
.chat-tab {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
flex-shrink: 0;
position: relative;
}
.chat-tab:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.chat-tab.active {
background: var(--accent-primary);
color: white;
}
.chat-tab svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.chat-tab .unread-dot {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: var(--cosmic-red);
border-radius: 50%;
border: 2px solid var(--bg-elevated);
}
.chat-tab .close-tab {
display: none;
width: 14px;
height: 14px;
margin-left: var(--space-xs);
border-radius: 50%;
opacity: 0.7;
}
.chat-tab:hover .close-tab {
display: flex;
align-items: center;
justify-content: center;
}
.chat-tab .close-tab:hover {
opacity: 1;
}
.chat-header h2 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
.close-chat-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.close-chat-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.close-chat-btn svg {
width: 20px;
height: 20px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-2xl) var(--space-lg);
text-align: center;
color: var(--text-tertiary);
}
.chat-welcome svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.chat-welcome p {
font-size: 13px;
}
/* Chat Message */
.chat-message {
display: flex;
flex-direction: column;
gap: 4px;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-message.own {
align-items: flex-end;
}
.message-header {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 0 var(--space-sm);
}
.message-sender {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.message-time {
font-size: 11px;
color: var(--text-tertiary);
}
.message-content {
max-width: 280px;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-lg);
background: var(--message-bubble-bg, var(--bg-secondary));
color: var(--text-primary);
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
}
.chat-message.own .message-content {
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
color: white;
border-bottom-right-radius: var(--radius-sm);
box-shadow: 0 2px 10px var(--glow-primary);
}
.chat-message:not(.own) .message-content {
border-bottom-left-radius: var(--radius-sm);
}
/* Chat Input */
.chat-input-form {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
border-top: 1px solid var(--border-light);
}
.chat-input-form input {
flex: 1;
padding: 10px var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: 16px; /* Prevent iOS zoom */
color: var(--text-primary);
background: var(--bg-primary);
transition: all var(--transition-fast);
}
.chat-input-form input:focus {
outline: none;
border-color: var(--accent-primary);
}
.send-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
border-radius: var(--radius-full);
color: white;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 2px 10px var(--glow-primary);
}
.send-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 20px var(--glow-primary);
}
.send-btn:active {
transform: scale(0.95);
}
.send-btn svg {
width: 20px;
height: 20px;
}
/* ==========================================================================
Control Bar
========================================================================== */
.control-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
/* Add safe area padding for devices with home indicator (iPhone X+) */
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
background: var(--control-bg);
backdrop-filter: blur(10px);
border-top: 1px solid var(--border-light);
}
.controls-left,
.controls-right {
display: flex;
align-items: center;
gap: var(--space-md);
min-width: 100px;
}
.controls-right {
justify-content: flex-end;
}
.time-display {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
min-width: 50px;
}
.controls-center {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Control Buttons */
.control-btn {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border-color);
background: var(--control-btn-bg);
border-radius: var(--radius-full);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.control-btn:hover {
background: var(--control-btn-hover);
transform: scale(1.08);
border-color: var(--accent-primary);
box-shadow: 0 0 20px var(--glow-primary);
}
.control-btn:active {
transform: scale(0.95);
}
.control-btn svg {
width: 24px;
height: 24px;
}
.control-btn .icon-off {
display: none;
}
.control-btn.disabled {
background: var(--cosmic-red);
border-color: var(--cosmic-red);
color: white;
box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
}
.control-btn.disabled .icon-on {
display: none;
}
.control-btn.disabled .icon-off {
display: block;
}
/* End Call Button */
.end-call-btn {
background: var(--cosmic-red);
border-color: var(--cosmic-red);
color: white;
box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
}
.end-call-btn:hover {
background: #ff5252;
border-color: #ff5252;
box-shadow: 0 0 25px rgba(255, 107, 107, 0.6);
}
/* Screen Share Active */
.screen-share-btn.active {
background: var(--cosmic-green);
border-color: var(--cosmic-green);
color: white;
}
/* Record button */
.record-btn {
position: relative;
}
.record-btn .icon-on svg {
color: var(--text-primary);
}
.record-btn .icon-off {
display: none;
}
.record-btn .recording-indicator {
display: none;
}
.record-btn.recording {
background: var(--cosmic-red);
border-color: var(--cosmic-red);
color: white;
}
.record-btn.recording .icon-on {
display: none;
}
.record-btn.recording .icon-off {
display: block;
}
.record-btn.recording .recording-indicator {
display: block;
position: absolute;
top: 4px;
right: 4px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
animation: recording-pulse 1s ease-in-out infinite;
}
@keyframes recording-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.record-btn.recording:hover {
background: #ff5252;
border-color: #ff5252;
box-shadow: 0 0 25px rgba(255, 107, 107, 0.6);
}
/* Ring button */
.ring-btn {
transition: all var(--transition-normal);
}
.ring-btn:hover {
color: var(--cosmic-yellow);
}
.ring-btn.ringing {
animation: ring-shake 0.5s ease-in-out;
color: var(--cosmic-yellow);
}
@keyframes ring-shake {
0%, 100% { transform: rotate(0deg); }
10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
20%, 40%, 60%, 80% { transform: rotate(10deg); }
}
/* Ring flash effect for page */
.ring-flash {
animation: ring-flash-effect 0.5s ease-out;
}
@keyframes ring-flash-effect {
0% {
box-shadow: inset 0 0 100px rgba(254, 228, 64, 0.3);
}
100% {
box-shadow: inset 0 0 0 transparent;
}
}
/* Settings Button */
.settings-btn {
width: 44px;
height: 44px;
}
/* ==========================================================================
Settings Modal
========================================================================== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
animation: fadeIn 0.2s ease;
/* Allow scrolling on mobile if modal is too tall */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Safe area padding for notched devices */
padding: var(--space-md);
padding-top: max(var(--space-md), env(safe-area-inset-top));
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}
.modal-overlay.hidden {
display: none;
}
.modal {
background: var(--bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: min(540px, 95vw);
/* Dynamic max-height for mobile viewports */
max-height: calc(100vh - var(--space-xl));
max-height: calc(100dvh - var(--space-xl));
margin: 0;
animation: modalIn 0.3s ease;
display: flex;
flex-direction: column;
/* Ensure modal doesn't grow beyond viewport */
flex-shrink: 0;
overflow: hidden;
}
/* Desktop: wider settings modal with better layout */
@media (min-width: 769px) {
.modal {
max-width: min(640px, 90vw);
}
.modal-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* Two-column row for Mode and Color Scheme */
.settings-group-row {
display: flex;
gap: var(--space-xl);
}
.settings-group-row > .settings-group {
flex: 1;
margin-bottom: 0;
}
/* All other settings groups are full width by default */
.settings-group {
margin-bottom: 0;
}
/* Donate button spans full width */
.settings-donate {
width: 100%;
}
}
@keyframes modalIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-light);
/* Keep header fixed at top */
flex-shrink: 0;
/* Ensure close button is always visible and tappable */
min-height: 56px;
}
.modal-header h2 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
}
.modal-close-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-close-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.modal-close-btn svg {
width: 20px;
height: 20px;
}
.modal-content {
padding: var(--space-lg);
/* Make modal content scrollable on mobile */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
flex: 1;
min-height: 0;
}
.settings-group {
margin-bottom: var(--space-lg);
}
.settings-group:last-child {
margin-bottom: 0;
}
/* Settings group row - stacks on mobile, side-by-side on desktop */
.settings-group-row {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.settings-group-row > .settings-group {
margin-bottom: 0;
display: flex;
flex-direction: column;
}
/* Make theme selector stretch to match color scheme height */
.settings-group-row .theme-selector {
flex: 1;
}
.settings-group-row .theme-option {
flex: 1;
justify-content: center;
}
@media (min-width: 600px) {
.settings-group-row {
flex-direction: row;
gap: var(--space-xl);
align-items: stretch;
}
.settings-group-row > .settings-group {
flex: 1;
min-width: 0;
}
}
.settings-label {
display: block;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
}
/* Theme Selector */
.theme-selector {
display: flex;
gap: var(--space-sm);
}
.theme-option {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.theme-option:hover {
border-color: var(--accent-secondary);
color: var(--text-primary);
}
.theme-option.active {
border-color: var(--accent-primary);
background: var(--bg-hover);
color: var(--accent-primary);
box-shadow: 0 0 15px var(--glow-primary);
transition: all var(--transition-fast), border-color 0.1s, color 0.1s, box-shadow 0.1s;
}
.theme-option.active .theme-icon {
background: var(--accent-primary);
color: var(--text-inverse);
box-shadow: 0 0 12px var(--glow-primary);
transition: all 0.1s;
}
.theme-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-tertiary);
transition: all var(--transition-fast);
}
.theme-option:hover .theme-icon,
.theme-option.active .theme-icon {
background: var(--accent-primary);
color: var(--text-inverse);
}
.theme-icon svg {
width: 20px;
height: 20px;
}
/* Color Scheme Selector */
.scheme-selector {
display: flex;
flex-direction: column;
flex: 1;
}
.scheme-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xs);
flex: 1;
min-width: 0;
}
.scheme-options.hidden {
display: none;
}
.scheme-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
cursor: pointer;
transition: all var(--transition-fast);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
min-width: 0;
overflow: hidden;
}
.scheme-option:hover {
border-color: var(--accent-secondary);
transform: translateY(-2px);
}
.scheme-option.active {
border-color: var(--accent-primary);
background: var(--bg-hover);
box-shadow: 0 0 15px var(--glow-primary);
}
.scheme-preview {
width: 28px;
height: 28px;
border-radius: var(--radius-full);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
/* Light scheme previews */
.scheme-preview.stellar {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
}
.scheme-preview.dawn {
background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
}
.scheme-preview.aurora-light {
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
}
.scheme-preview.solar {
background: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
}
/* Dark scheme previews */
.scheme-preview.nebula {
background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #c4b5fd 100%);
}
.scheme-preview.space {
background: linear-gradient(135deg, #0369a1 0%, #38bdf8 50%, #7dd3fc 100%);
}
.scheme-preview.supernova {
background: linear-gradient(135deg, #be123c 0%, #fb7185 50%, #fda4af 100%);
}
.scheme-preview.borealis {
background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 50%, #5eead4 100%);
}
.scheme-name {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Theme Studio Button in Settings */
.theme-studio-btn {
display: flex;
align-items: center;
gap: var(--space-md);
width: 100%;
padding: var(--space-md);
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-normal);
text-align: left;
/* Match height of theme-selector buttons */
flex: 1;
}
.theme-studio-btn:hover {
border-color: var(--accent-primary);
background: var(--bg-hover);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--glow-primary);
}
.theme-studio-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--btn-primary-bg);
border-radius: var(--radius-md);
flex-shrink: 0;
}
.theme-studio-icon svg {
width: 24px;
height: 24px;
color: var(--btn-primary-text);
}
.theme-studio-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.theme-studio-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.theme-studio-desc {
font-size: 12px;
color: var(--text-secondary);
}
.theme-studio-arrow {
width: 20px;
height: 20px;
color: var(--text-tertiary);
flex-shrink: 0;
}
/* ==========================================================================
Theme Studio Modal
========================================================================== */
.theme-studio-modal {
width: 95vw;
max-width: 900px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.theme-studio-modal .modal-header h2 {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.theme-studio-modal .modal-header h2 svg {
color: var(--accent-primary);
}
.theme-studio-tabs {
display: flex;
gap: var(--space-xs);
padding: 0 var(--space-lg);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Prevent tabs from being compressed by content */
flex-shrink: 0;
}
.theme-studio-tab {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-md) var(--space-lg);
background: transparent;
border: none;
border-bottom: 3px solid transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.theme-studio-tab svg {
width: 18px;
height: 18px;
}
.theme-studio-tab:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.theme-studio-tab.active {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
}
.theme-studio-content {
flex: 1;
overflow-y: auto;
padding: var(--space-lg);
}
.theme-studio-panel {
display: none;
}
.theme-studio-panel.active {
display: block;
}
/* Theme Categories */
.theme-category {
margin-bottom: var(--space-xl);
}
.theme-category:last-child {
margin-bottom: 0;
}
.theme-category-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-light);
}
.theme-category-title svg {
width: 18px;
height: 18px;
color: var(--accent-primary);
}
/* Theme Preset Grid */
.theme-preset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-md);
}
.theme-preset-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-primary);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
}
.theme-preset-btn:hover {
border-color: var(--accent-secondary);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.theme-preset-btn.active {
border-color: var(--accent-primary);
background: var(--bg-hover);
box-shadow: 0 0 20px var(--glow-primary);
}
/* Selection checkmark indicator */
.theme-preset-btn.active::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
background: var(--accent-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.theme-preset-btn.active::before {
content: '';
position: absolute;
top: 13px;
right: 17px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
z-index: 1;
}
/* Default theme badge */
.preset-default-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 2px 6px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
color: white;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.preset-preview {
width: 60px;
height: 60px;
border-radius: var(--radius-md);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.preset-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.preset-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.preset-mode {
font-size: 11px;
color: var(--text-tertiary);
}
/* Preset Preview Backgrounds - Space Themes */
.preset-preview.stellar {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
}
.preset-preview.dawn {
background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
}
.preset-preview.aurora-light {
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
}
.preset-preview.solar {
background: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
}
.preset-preview.space {
background: linear-gradient(135deg, #0369a1 0%, #38bdf8 50%, #7dd3fc 100%);
}
.preset-preview.nebula {
background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #c4b5fd 100%);
}
.preset-preview.supernova {
background: linear-gradient(135deg, #be123c 0%, #fb7185 50%, #fda4af 100%);
}
.preset-preview.borealis {
background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 50%, #5eead4 100%);
}
/* Preset Preview Backgrounds - Retro Themes */
.preset-preview.win95 {
background: linear-gradient(135deg, #008080 0%, #c0c0c0 50%, #000080 100%);
border: 2px outset #dfdfdf;
}
.preset-preview.winxp {
background: linear-gradient(135deg, #245edb 0%, #3a6ea5 50%, #004e98 100%);
}
.preset-preview.myspace {
background: linear-gradient(135deg, #003366 0%, #6699cc 50%, #ff6600 100%);
}
.preset-preview.geocities {
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 30%, #ffff00 60%, #ff0000 100%);
animation: geocitiesRainbow 3s linear infinite;
}
@keyframes geocitiesRainbow {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
}
.preset-preview.vaporwave {
background: linear-gradient(135deg, #ff71ce 0%, #01cdfe 50%, #05ffa1 100%);
}
.preset-preview.terminal {
background: #0a0a0a;
position: relative;
overflow: hidden;
}
.preset-preview.terminal::after {
content: '>_';
color: #00ff00;
font-family: monospace;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 0 0 10px #00ff00;
}
.preset-preview.commodore {
background: linear-gradient(135deg, #40318d 0%, #7869c4 50%, #40318d 100%);
}
.preset-preview.amber-crt {
background: #0a0500;
position: relative;
}
.preset-preview.amber-crt::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, #ff9f00 0%, transparent 70%);
opacity: 0.3;
}
/* Preset Preview Backgrounds - Modern Themes */
.preset-preview.paper {
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #eeeeee 100%);
border-color: #e0e0e0;
}
.preset-preview.midnight {
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}
.preset-preview.nord {
background: linear-gradient(135deg, #2e3440 0%, #3b4252 50%, #88c0d0 100%);
}
.preset-preview.dracula {
background: linear-gradient(135deg, #282a36 0%, #44475a 50%, #bd93f9 100%);
}
.preset-preview.solarized-lt {
background: linear-gradient(135deg, #fdf6e3 0%, #eee8d5 50%, #268bd2 100%);
}
.preset-preview.solarized-dk {
background: linear-gradient(135deg, #002b36 0%, #073642 50%, #268bd2 100%);
}
.preset-preview.monokai {
background: linear-gradient(135deg, #272822 0%, #3e3d32 50%, #f92672 100%);
}
.preset-preview.gruvbox {
background: linear-gradient(135deg, #282828 0%, #3c3836 50%, #fabd2f 100%);
}
/* Preset Preview Backgrounds - Fun Themes */
.preset-preview.candy {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}
.preset-preview.neon {
background: #0a0a0a;
border: 2px solid #ff00ff;
box-shadow: 0 0 10px #ff00ff, inset 0 0 10px rgba(255, 0, 255, 0.3);
}
.preset-preview.cyberpunk {
background: linear-gradient(135deg, #0d0221 0%, #fcee0a 30%, #ff00ff 60%, #00ffff 100%);
}
.preset-preview.synthwave {
background: linear-gradient(180deg, #2b1055 0%, #7597de 50%, #ff6a00 100%);
}
.preset-preview.pastel {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 25%, #a1c4fd 50%, #c2e9fb 75%, #d4fc79 100%);
}
.preset-preview.ocean {
background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
}
.preset-preview.forest {
background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #95d5b2 100%);
}
.preset-preview.sunset {
background: linear-gradient(135deg, #f72585 0%, #b5179e 25%, #7209b7 50%, #560bad 75%, #480ca8 100%);
}
/* ==========================================================================
Theme Customizer Panel
========================================================================== */
.customizer-section {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border-light);
}
.customizer-section:last-of-type {
border-bottom: none;
margin-bottom: var(--space-md);
}
.customizer-section-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.customizer-section-title svg {
width: 18px;
height: 18px;
color: var(--accent-primary);
}
.customizer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-md);
}
.customizer-item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.customizer-item label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.customizer-item label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent-primary);
}
.customizer-item-wide {
grid-column: span 2;
}
/* Color Input Wrapper */
.color-input-wrapper {
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-xs);
}
.color-input-wrapper input[type="color"] {
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
background: transparent;
}
.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-input-wrapper input[type="color"]::-webkit-color-swatch {
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
}
.color-input-wrapper .color-hex {
flex: 1;
background: transparent;
border: none;
font-family: 'Fira Code', monospace;
font-size: 13px;
color: var(--text-primary);
text-transform: uppercase;
padding: var(--space-xs);
}
.color-input-wrapper .color-hex:focus {
outline: none;
}
/* Slider customizer item - position value inline with label */
.customizer-item:has(.slider-input-wrapper) {
position: relative;
}
.customizer-item:has(.slider-input-wrapper) > label {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 60px; /* Space for the value badge */
}
/* Slider Input Wrapper */
.slider-input-wrapper {
display: flex;
align-items: center;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
position: relative;
}
.slider-input-wrapper input[type="range"] {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--border-color);
border-radius: 3px;
cursor: pointer;
transition: background 0.15s ease;
}
.slider-input-wrapper:hover input[type="range"] {
background: var(--border-light);
}
.slider-input-wrapper input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--accent-primary);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.slider-input-wrapper input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
.slider-input-wrapper input[type="range"]::-webkit-slider-thumb:active {
transform: scale(0.95);
}
.slider-input-wrapper input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--accent-primary);
border-radius: 50%;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.slider-input-wrapper input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
/* Slider value badge - positioned to the right of the label */
.slider-input-wrapper .slider-value {
position: absolute;
top: -28px;
right: 0;
font-family: 'Fira Code', 'SF Mono', Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: var(--accent-primary);
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 3px 12px;
text-align: center;
white-space: nowrap;
min-width: 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.15s ease, background 0.15s ease;
}
.slider-input-wrapper:hover .slider-value {
background: var(--bg-elevated);
transform: scale(1.05);
}
/* Customizer Select */
.customizer-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.customizer-select:hover {
border-color: var(--accent-secondary);
}
.customizer-select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--glow-primary);
}
/* Customizer Actions */
.customizer-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
}
.customizer-btn {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.customizer-btn svg {
width: 18px;
height: 18px;
}
.customizer-btn.primary {
background: var(--btn-primary-bg);
border: none;
color: var(--btn-primary-text);
box-shadow: var(--btn-shadow);
}
.customizer-btn.primary:hover {
background: var(--btn-primary-hover);
box-shadow: var(--btn-shadow-hover);
transform: translateY(-2px);
}
.customizer-btn.secondary {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.customizer-btn.secondary:hover {
border-color: var(--accent-secondary);
color: var(--text-primary);
background: var(--bg-hover);
}
/* ==========================================================================
Custom CSS Editor Panel
========================================================================== */
.css-editor-header {
margin-bottom: var(--space-md);
}
.css-editor-info {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--text-secondary);
margin-bottom: var(--space-md);
}
.css-editor-info svg {
width: 18px;
height: 18px;
color: var(--accent-primary);
flex-shrink: 0;
margin-top: 1px;
}
.css-templates {
display: flex;
align-items: center;
gap: var(--space-md);
}
.css-templates label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.css-templates select {
flex: 1;
max-width: 300px;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
}
.css-editor-container {
display: flex;
background: #1e1e1e;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-md);
}
.css-editor-line-numbers {
padding: var(--space-md);
background: #252526;
color: #858585;
font-family: 'Fira Code', 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
text-align: right;
user-select: none;
border-right: 1px solid #3c3c3c;
min-width: 40px;
white-space: pre;
}
.css-editor {
flex: 1;
min-height: 350px;
padding: var(--space-md);
background: #1e1e1e;
border: none;
color: #d4d4d4;
font-family: 'Fira Code', 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
resize: vertical;
outline: none;
}
.css-editor::placeholder {
color: #6a6a6a;
}
.css-editor-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-md);
}
/* ==========================================================================
Saved Themes Panel
========================================================================== */
.saved-themes-header {
margin-bottom: var(--space-lg);
}
.save-theme-form {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.save-theme-form input[type="text"] {
flex: 1;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
color: var(--text-primary);
}
.save-theme-form input[type="text"]:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--glow-primary);
}
.saved-themes-info {
font-size: 12px;
color: var(--text-tertiary);
}
.saved-themes-list {
min-height: 200px;
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-secondary);
}
.saved-theme-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
text-align: center;
color: var(--text-tertiary);
}
.saved-theme-empty svg {
width: 48px;
height: 48px;
margin-bottom: var(--space-md);
opacity: 0.5;
}
.saved-theme-empty p {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.saved-theme-empty span {
font-size: 12px;
}
.saved-theme-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.saved-theme-item:last-child {
border-bottom: none;
}
.saved-theme-item:hover {
background: var(--bg-hover);
}
.saved-theme-preview {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
border: 2px solid var(--border-color);
flex-shrink: 0;
}
.saved-theme-info {
flex: 1;
min-width: 0;
}
.saved-theme-name {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 2px;
}
.saved-theme-date {
font-size: 11px;
color: var(--text-tertiary);
}
.saved-theme-actions {
display: flex;
gap: var(--space-xs);
}
.saved-theme-action {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
color: var(--text-secondary);
}
.saved-theme-action:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.saved-theme-action.delete:hover {
border-color: var(--cosmic-red);
color: var(--cosmic-red);
background: rgba(255, 107, 107, 0.1);
}
.saved-theme-action svg {
width: 16px;
height: 16px;
}
.saved-themes-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-md);
margin-top: var(--space-md);
}
/* ==========================================================================
Additional Theme Presets CSS Variables
========================================================================== */
/* Windows 95 Theme */
[data-preset="win95"] {
--bg-primary: #c0c0c0;
--bg-secondary: #c0c0c0;
--bg-tertiary: #dfdfdf;
--bg-elevated: #ffffff;
--bg-hover: #000080;
--bg-active: #000080;
--text-primary: #000000;
--text-secondary: #000000;
--text-tertiary: #808080;
--text-inverse: #ffffff;
--border-color: #808080;
--border-light: #dfdfdf;
--accent-primary: #000080;
--accent-secondary: #1084d0;
--accent-hover: #000080;
--shadow-sm: 2px 2px 0 #808080;
--shadow-md: 2px 2px 0 #808080;
--shadow-lg: 3px 3px 0 #808080;
--video-bg: #008080;
--video-tile-bg: #c0c0c0;
--video-placeholder-bg: #008080;
--control-bg: #c0c0c0;
--control-btn-bg: #c0c0c0;
--control-btn-hover: #dfdfdf;
--tab-bg: #c0c0c0;
--tab-hover-bg: #dfdfdf;
--tab-active-bg: #ffffff;
--tab-active-text: #000080;
--btn-primary-bg: #c0c0c0;
--btn-primary-hover: #dfdfdf;
--btn-primary-text: #000000;
--btn-shadow: 2px 2px 0 #808080;
--btn-shadow-hover: 1px 1px 0 #808080;
--lobby-card-bg: #c0c0c0;
--lobby-card-border: #808080;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: transparent;
--message-bubble-bg: #ffffff;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-full: 0;
--font-sans: 'MS Sans Serif', 'Tahoma', sans-serif;
--font-body: 'MS Sans Serif', 'Tahoma', sans-serif;
}
/* Windows XP Theme */
[data-preset="winxp"] {
--bg-primary: #ece9d8;
--bg-secondary: #d4d0c8;
--bg-tertiary: #ffffff;
--bg-elevated: #ffffff;
--bg-hover: rgba(49, 106, 197, 0.2);
--bg-active: rgba(49, 106, 197, 0.3);
--text-primary: #000000;
--text-secondary: #003399;
--text-tertiary: #666666;
--text-inverse: #ffffff;
--border-color: #7f9db9;
--border-light: #d4d0c8;
--accent-primary: #316ac5;
--accent-secondary: #4a8ce8;
--accent-hover: #245edb;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
--video-bg: #3a6ea5;
--video-tile-bg: #ece9d8;
--video-placeholder-bg: linear-gradient(180deg, #3a6ea5 0%, #6391c4 100%);
--control-bg: #ece9d8;
--control-btn-bg: #ece9d8;
--control-btn-hover: #ffffff;
--tab-bg: #ece9d8;
--tab-hover-bg: #ffffff;
--tab-active-bg: #ffffff;
--tab-active-text: #316ac5;
--btn-primary-bg: linear-gradient(180deg, #4a8ce8 0%, #316ac5 100%);
--btn-primary-hover: linear-gradient(180deg, #5a9cf8 0%, #4178d5 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
--btn-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.35);
--lobby-card-bg: rgba(236, 233, 216, 0.95);
--lobby-card-border: #7f9db9;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: rgba(49, 106, 197, 0.3);
--message-bubble-bg: #ffffff;
--font-sans: 'Tahoma', 'Segoe UI', sans-serif;
--font-body: 'Tahoma', 'Segoe UI', sans-serif;
}
/* MySpace Theme */
[data-preset="myspace"] {
--bg-primary: #000000;
--bg-secondary: #111111;
--bg-tertiary: #1a1a1a;
--bg-elevated: #222222;
--bg-hover: rgba(255, 102, 0, 0.2);
--bg-active: rgba(255, 102, 0, 0.3);
--text-primary: #ffffff;
--text-secondary: #6699cc;
--text-tertiary: #ff6600;
--text-inverse: #000000;
--border-color: #003366;
--border-light: #333333;
--accent-primary: #ff6600;
--accent-secondary: #ff9900;
--accent-hover: #ff3300;
--shadow-sm: 0 0 5px rgba(255, 102, 0, 0.3);
--shadow-md: 0 0 10px rgba(255, 102, 0, 0.4);
--shadow-lg: 0 0 20px rgba(255, 102, 0, 0.5);
--video-bg: #000000;
--video-tile-bg: #111111;
--video-placeholder-bg: linear-gradient(135deg, #003366 0%, #000000 100%);
--control-bg: rgba(17, 17, 17, 0.95);
--control-btn-bg: #222222;
--control-btn-hover: #333333;
--btn-primary-bg: linear-gradient(135deg, #ff6600 0%, #ff9900 100%);
--btn-primary-hover: linear-gradient(135deg, #ff3300 0%, #ff6600 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(255, 102, 0, 0.5);
--btn-shadow-hover: 0 6px 20px rgba(255, 102, 0, 0.6);
--lobby-card-bg: rgba(17, 17, 17, 0.9);
--lobby-card-border: #ff6600;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: #6699cc;
--glow-primary: rgba(255, 102, 0, 0.4);
--message-bubble-bg: #222222;
--tab-bg: rgba(255, 102, 0, 0.1);
--tab-hover-bg: rgba(255, 102, 0, 0.2);
--tab-active-bg: #222222;
--tab-active-text: #ff6600;
}
/* Terminal Green Theme */
[data-preset="terminal"] {
--bg-primary: #0a0a0a;
--bg-secondary: #0d0d0d;
--bg-tertiary: #141414;
--bg-elevated: #1a1a1a;
--bg-hover: rgba(0, 255, 0, 0.1);
--bg-active: rgba(0, 255, 0, 0.2);
--text-primary: #00ff00;
--text-secondary: #00cc00;
--text-tertiary: #009900;
--text-inverse: #0a0a0a;
--border-color: #00ff00;
--border-light: #003300;
--accent-primary: #00ff00;
--accent-secondary: #00cc00;
--accent-hover: #33ff33;
--shadow-sm: 0 0 5px rgba(0, 255, 0, 0.3);
--shadow-md: 0 0 10px rgba(0, 255, 0, 0.4);
--shadow-lg: 0 0 20px rgba(0, 255, 0, 0.5);
--video-bg: #0a0a0a;
--video-tile-bg: #0d0d0d;
--video-placeholder-bg: #0a0a0a;
--control-bg: rgba(10, 10, 10, 0.95);
--control-btn-bg: #141414;
--control-btn-hover: #1a1a1a;
--btn-primary-bg: transparent;
--btn-primary-hover: rgba(0, 255, 0, 0.1);
--btn-primary-text: #00ff00;
--btn-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
--btn-shadow-hover: 0 0 15px rgba(0, 255, 0, 0.5);
--lobby-card-bg: rgba(10, 10, 10, 0.9);
--lobby-card-border: #00ff00;
--lobby-text-primary: #00ff00;
--lobby-text-secondary: #00cc00;
--glow-primary: rgba(0, 255, 0, 0.4);
--message-bubble-bg: #141414;
--tab-bg: rgba(0, 255, 0, 0.1);
--tab-hover-bg: rgba(0, 255, 0, 0.2);
--tab-active-bg: #141414;
--tab-active-text: #00ff00;
--font-sans: 'Fira Code', 'JetBrains Mono', monospace;
--font-body: 'Fira Code', 'JetBrains Mono', monospace;
}
/* Vaporwave Theme */
[data-preset="vaporwave"] {
--bg-primary: #1a0a2e;
--bg-secondary: #2d1b4e;
--bg-tertiary: #3d2a6e;
--bg-elevated: #4a357e;
--bg-hover: rgba(255, 113, 206, 0.2);
--bg-active: rgba(255, 113, 206, 0.3);
--text-primary: #ff71ce;
--text-secondary: #01cdfe;
--text-tertiary: #05ffa1;
--text-inverse: #1a0a2e;
--border-color: #b967ff;
--border-light: #3d2a6e;
--accent-primary: #ff71ce;
--accent-secondary: #01cdfe;
--accent-hover: #fffb96;
--shadow-sm: 0 0 10px rgba(255, 113, 206, 0.3), 0 0 20px rgba(1, 205, 254, 0.2);
--shadow-md: 0 0 20px rgba(255, 113, 206, 0.4), 0 0 40px rgba(1, 205, 254, 0.3);
--shadow-lg: 0 0 30px rgba(255, 113, 206, 0.5), 0 0 60px rgba(1, 205, 254, 0.4);
--video-bg: #1a0a2e;
--video-tile-bg: #2d1b4e;
--video-placeholder-bg: linear-gradient(135deg, #b967ff 0%, #01cdfe 50%, #05ffa1 100%);
--control-bg: rgba(45, 27, 78, 0.95);
--control-btn-bg: #3d2a6e;
--control-btn-hover: #4a357e;
--btn-primary-bg: linear-gradient(135deg, #ff71ce 0%, #01cdfe 100%);
--btn-primary-hover: linear-gradient(135deg, #fffb96 0%, #ff71ce 100%);
--btn-primary-text: #1a0a2e;
--btn-shadow: 0 0 20px rgba(255, 113, 206, 0.6);
--btn-shadow-hover: 0 0 30px rgba(1, 205, 254, 0.7);
--lobby-card-bg: rgba(45, 27, 78, 0.85);
--lobby-card-border: #b967ff;
--lobby-text-primary: #ff71ce;
--lobby-text-secondary: #01cdfe;
--glow-primary: rgba(255, 113, 206, 0.4);
--message-bubble-bg: #3d2a6e;
--tab-bg: rgba(255, 113, 206, 0.1);
--tab-hover-bg: rgba(255, 113, 206, 0.2);
--tab-active-bg: #3d2a6e;
--tab-active-text: #ff71ce;
}
/* Cyberpunk Theme */
[data-preset="cyberpunk"] {
--bg-primary: #0d0221;
--bg-secondary: #150734;
--bg-tertiary: #1f0c47;
--bg-elevated: #29115a;
--bg-hover: rgba(252, 238, 10, 0.15);
--bg-active: rgba(252, 238, 10, 0.25);
--text-primary: #fcee0a;
--text-secondary: #00ffff;
--text-tertiary: #ff00ff;
--text-inverse: #0d0221;
--border-color: #ff00ff;
--border-light: #1f0c47;
--accent-primary: #fcee0a;
--accent-secondary: #00ffff;
--accent-hover: #ff00ff;
--shadow-sm: 0 0 5px #fcee0a, 0 0 10px #ff00ff;
--shadow-md: 0 0 10px #fcee0a, 0 0 20px #ff00ff;
--shadow-lg: 0 0 20px #fcee0a, 0 0 40px #ff00ff, 0 0 60px #00ffff;
--video-bg: #0d0221;
--video-tile-bg: #150734;
--video-placeholder-bg: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
--control-bg: rgba(21, 7, 52, 0.95);
--control-btn-bg: #1f0c47;
--control-btn-hover: #29115a;
--btn-primary-bg: linear-gradient(135deg, #fcee0a 0%, #ff00ff 100%);
--btn-primary-hover: linear-gradient(135deg, #00ffff 0%, #fcee0a 100%);
--btn-primary-text: #0d0221;
--btn-shadow: 0 0 15px #fcee0a, 0 0 30px #ff00ff;
--btn-shadow-hover: 0 0 25px #00ffff, 0 0 50px #fcee0a;
--lobby-card-bg: rgba(21, 7, 52, 0.9);
--lobby-card-border: #ff00ff;
--lobby-text-primary: #fcee0a;
--lobby-text-secondary: #00ffff;
--glow-primary: rgba(252, 238, 10, 0.5);
--message-bubble-bg: #1f0c47;
--tab-bg: rgba(252, 238, 10, 0.1);
--tab-hover-bg: rgba(252, 238, 10, 0.2);
--tab-active-bg: #1f0c47;
--tab-active-text: #fcee0a;
}
/* Nord Theme */
[data-preset="nord"] {
--bg-primary: #2e3440;
--bg-secondary: #3b4252;
--bg-tertiary: #434c5e;
--bg-elevated: #4c566a;
--bg-hover: rgba(136, 192, 208, 0.15);
--bg-active: rgba(136, 192, 208, 0.25);
--text-primary: #eceff4;
--text-secondary: #d8dee9;
--text-tertiary: #88c0d0;
--text-inverse: #2e3440;
--border-color: #4c566a;
--border-light: #434c5e;
--accent-primary: #88c0d0;
--accent-secondary: #81a1c1;
--accent-hover: #5e81ac;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
--video-bg: #2e3440;
--video-tile-bg: #3b4252;
--video-placeholder-bg: linear-gradient(135deg, #434c5e 0%, #3b4252 100%);
--control-bg: rgba(59, 66, 82, 0.95);
--control-btn-bg: #434c5e;
--control-btn-hover: #4c566a;
--btn-primary-bg: linear-gradient(135deg, #88c0d0 0%, #81a1c1 100%);
--btn-primary-hover: linear-gradient(135deg, #81a1c1 0%, #5e81ac 100%);
--btn-primary-text: #2e3440;
--btn-shadow: 0 4px 15px rgba(136, 192, 208, 0.3);
--btn-shadow-hover: 0 6px 20px rgba(136, 192, 208, 0.4);
--lobby-card-bg: rgba(59, 66, 82, 0.9);
--lobby-card-border: #4c566a;
--lobby-text-primary: #eceff4;
--lobby-text-secondary: #d8dee9;
--glow-primary: rgba(136, 192, 208, 0.3);
--message-bubble-bg: #434c5e;
--tab-bg: rgba(136, 192, 208, 0.1);
--tab-hover-bg: rgba(136, 192, 208, 0.2);
--tab-active-bg: #434c5e;
--tab-active-text: #88c0d0;
}
/* Dracula Theme */
[data-preset="dracula"] {
--bg-primary: #282a36;
--bg-secondary: #21222c;
--bg-tertiary: #343746;
--bg-elevated: #44475a;
--bg-hover: rgba(189, 147, 249, 0.15);
--bg-active: rgba(189, 147, 249, 0.25);
--text-primary: #f8f8f2;
--text-secondary: #bd93f9;
--text-tertiary: #6272a4;
--text-inverse: #282a36;
--border-color: #44475a;
--border-light: #343746;
--accent-primary: #bd93f9;
--accent-secondary: #ff79c6;
--accent-hover: #50fa7b;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
--video-bg: #282a36;
--video-tile-bg: #21222c;
--video-placeholder-bg: linear-gradient(135deg, #343746 0%, #21222c 100%);
--control-bg: rgba(33, 34, 44, 0.95);
--control-btn-bg: #343746;
--control-btn-hover: #44475a;
--btn-primary-bg: linear-gradient(135deg, #bd93f9 0%, #ff79c6 100%);
--btn-primary-hover: linear-gradient(135deg, #ff79c6 0%, #50fa7b 100%);
--btn-primary-text: #282a36;
--btn-shadow: 0 4px 15px rgba(189, 147, 249, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(255, 121, 198, 0.5);
--lobby-card-bg: rgba(33, 34, 44, 0.9);
--lobby-card-border: #44475a;
--lobby-text-primary: #f8f8f2;
--lobby-text-secondary: #bd93f9;
--glow-primary: rgba(189, 147, 249, 0.3);
--message-bubble-bg: #44475a;
--tab-bg: rgba(189, 147, 249, 0.1);
--tab-hover-bg: rgba(189, 147, 249, 0.2);
--tab-active-bg: #44475a;
--tab-active-text: #bd93f9;
}
/* GeoCities Theme */
[data-preset="geocities"] {
--bg-primary: #000080;
--bg-secondary: #000066;
--bg-tertiary: #0000aa;
--bg-elevated: #ffffff;
--bg-hover: rgba(255, 255, 0, 0.2);
--bg-active: rgba(255, 255, 0, 0.3);
--text-primary: #ffff00;
--text-secondary: #00ffff;
--text-tertiary: #ff00ff;
--text-inverse: #000080;
--border-color: #ffff00;
--border-light: #0000aa;
--accent-primary: #ff00ff;
--accent-secondary: #00ffff;
--accent-hover: #ffff00;
--shadow-sm: 2px 2px 0 #ff00ff;
--shadow-md: 4px 4px 0 #00ffff;
--shadow-lg: 6px 6px 0 #ffff00;
--video-bg: #000080;
--video-tile-bg: #000066;
--video-placeholder-bg: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
--control-bg: #000066;
--control-btn-bg: #0000aa;
--control-btn-hover: #0000cc;
--btn-primary-bg: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
--btn-primary-hover: linear-gradient(135deg, #ffff00 0%, #ff00ff 100%);
--btn-primary-text: #000080;
--btn-shadow: 3px 3px 0 #ffff00;
--btn-shadow-hover: 5px 5px 0 #ffff00;
--lobby-card-bg: rgba(0, 0, 128, 0.95);
--lobby-card-border: #ffff00;
--lobby-text-primary: #ffff00;
--lobby-text-secondary: #00ffff;
--glow-primary: rgba(255, 0, 255, 0.5);
--tab-bg: rgba(255, 255, 0, 0.1);
--tab-hover-bg: rgba(255, 255, 0, 0.2);
--tab-active-bg: #0000aa;
--tab-active-text: #ffff00;
--message-bubble-bg: #0000aa;
}
/* Commodore 64 Theme */
[data-preset="commodore"] {
--bg-primary: #40318d;
--bg-secondary: #352879;
--bg-tertiary: #4a3c9e;
--bg-elevated: #5547b0;
--bg-hover: rgba(134, 122, 221, 0.2);
--bg-active: rgba(134, 122, 221, 0.3);
--text-primary: #867add;
--text-secondary: #7c6fd0;
--text-tertiary: #5547b0;
--text-inverse: #40318d;
--border-color: #867add;
--border-light: #4a3c9e;
--accent-primary: #867add;
--accent-secondary: #7c6fd0;
--accent-hover: #9a8fed;
--shadow-sm: 0 0 5px rgba(134, 122, 221, 0.3);
--shadow-md: 0 0 10px rgba(134, 122, 221, 0.4);
--shadow-lg: 0 0 20px rgba(134, 122, 221, 0.5);
--video-bg: #40318d;
--video-tile-bg: #352879;
--video-placeholder-bg: #40318d;
--control-bg: rgba(53, 40, 121, 0.95);
--control-btn-bg: #4a3c9e;
--control-btn-hover: #5547b0;
--btn-primary-bg: #867add;
--btn-primary-hover: #9a8fed;
--btn-primary-text: #40318d;
--btn-shadow: 0 0 10px rgba(134, 122, 221, 0.4);
--btn-shadow-hover: 0 0 15px rgba(134, 122, 221, 0.6);
--lobby-card-bg: rgba(53, 40, 121, 0.9);
--lobby-card-border: #867add;
--lobby-text-primary: #867add;
--lobby-text-secondary: #7c6fd0;
--glow-primary: rgba(134, 122, 221, 0.4);
--message-bubble-bg: #4a3c9e;
--tab-bg: rgba(134, 122, 221, 0.1);
--tab-hover-bg: rgba(134, 122, 221, 0.2);
--tab-active-bg: #4a3c9e;
--tab-active-text: #867add;
--font-sans: 'Courier New', monospace;
--font-body: 'Courier New', monospace;
}
/* Amber CRT Theme */
[data-preset="amber"] {
--bg-primary: #0a0500;
--bg-secondary: #120a00;
--bg-tertiary: #1a0f00;
--bg-elevated: #221400;
--bg-hover: rgba(255, 159, 0, 0.15);
--bg-active: rgba(255, 159, 0, 0.25);
--text-primary: #ff9f00;
--text-secondary: #cc7f00;
--text-tertiary: #995f00;
--text-inverse: #0a0500;
--border-color: #ff9f00;
--border-light: #1a0f00;
--accent-primary: #ff9f00;
--accent-secondary: #ffb940;
--accent-hover: #ffc060;
--shadow-sm: 0 0 5px rgba(255, 159, 0, 0.3);
--shadow-md: 0 0 10px rgba(255, 159, 0, 0.4);
--shadow-lg: 0 0 20px rgba(255, 159, 0, 0.5);
--video-bg: #0a0500;
--video-tile-bg: #120a00;
--video-placeholder-bg: #0a0500;
--control-bg: rgba(18, 10, 0, 0.95);
--control-btn-bg: #1a0f00;
--control-btn-hover: #221400;
--btn-primary-bg: transparent;
--btn-primary-hover: rgba(255, 159, 0, 0.1);
--btn-primary-text: #ff9f00;
--btn-shadow: 0 0 10px rgba(255, 159, 0, 0.3);
--btn-shadow-hover: 0 0 15px rgba(255, 159, 0, 0.5);
--lobby-card-bg: rgba(18, 10, 0, 0.9);
--lobby-card-border: #ff9f00;
--lobby-text-primary: #ff9f00;
--lobby-text-secondary: #cc7f00;
--glow-primary: rgba(255, 159, 0, 0.4);
--message-bubble-bg: #1a0f00;
--tab-bg: rgba(255, 159, 0, 0.1);
--tab-hover-bg: rgba(255, 159, 0, 0.2);
--tab-active-bg: #1a0f00;
--tab-active-text: #ff9f00;
--font-sans: 'Fira Code', monospace;
--font-body: 'Fira Code', monospace;
}
/* Paper Theme (Light) */
[data-preset="paper"] {
--bg-primary: #fafafa;
--bg-secondary: #f5f5f5;
--bg-tertiary: #eeeeee;
--bg-elevated: #ffffff;
--bg-hover: rgba(66, 66, 66, 0.08);
--bg-active: rgba(66, 66, 66, 0.12);
--text-primary: #212121;
--text-secondary: #424242;
--text-tertiary: #757575;
--text-inverse: #fafafa;
--border-color: #e0e0e0;
--border-light: #eeeeee;
--accent-primary: #424242;
--accent-secondary: #616161;
--accent-hover: #212121;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
--video-bg: #f5f5f5;
--video-tile-bg: #eeeeee;
--video-placeholder-bg: linear-gradient(135deg, #e0e0e0 0%, #eeeeee 100%);
--control-bg: rgba(250, 250, 250, 0.95);
--control-btn-bg: #ffffff;
--control-btn-hover: #f5f5f5;
--btn-primary-bg: linear-gradient(135deg, #424242 0%, #616161 100%);
--btn-primary-hover: linear-gradient(135deg, #212121 0%, #424242 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
--btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
--lobby-card-bg: rgba(255, 255, 255, 0.95);
--lobby-card-border: #e0e0e0;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: rgba(66, 66, 66, 0.2);
--message-bubble-bg: #ffffff;
--tab-bg: rgba(66, 66, 66, 0.05);
--tab-hover-bg: rgba(66, 66, 66, 0.1);
--tab-active-bg: #ffffff;
--tab-active-text: #424242;
}
/* Midnight Theme */
[data-preset="midnight"] {
--bg-primary: #0f0f23;
--bg-secondary: #1a1a2e;
--bg-tertiary: #16213e;
--bg-elevated: #1f2940;
--bg-hover: rgba(233, 69, 96, 0.15);
--bg-active: rgba(233, 69, 96, 0.25);
--text-primary: #edf2f4;
--text-secondary: #8d99ae;
--text-tertiary: #e94560;
--text-inverse: #0f0f23;
--border-color: #16213e;
--border-light: #1a1a2e;
--accent-primary: #e94560;
--accent-secondary: #ff6b6b;
--accent-hover: #ff8585;
--shadow-sm: 0 1px 3px rgba(233, 69, 96, 0.2);
--shadow-md: 0 4px 6px rgba(233, 69, 96, 0.25);
--shadow-lg: 0 10px 25px rgba(233, 69, 96, 0.3);
--video-bg: #0f0f23;
--video-tile-bg: #1a1a2e;
--video-placeholder-bg: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
--control-bg: rgba(26, 26, 46, 0.95);
--control-btn-bg: #16213e;
--control-btn-hover: #1f2940;
--btn-primary-bg: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
--btn-primary-hover: linear-gradient(135deg, #ff6b6b 0%, #ff8585 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(233, 69, 96, 0.5);
--lobby-card-bg: rgba(26, 26, 46, 0.9);
--lobby-card-border: #16213e;
--lobby-text-primary: #edf2f4;
--lobby-text-secondary: #8d99ae;
--glow-primary: rgba(233, 69, 96, 0.3);
--message-bubble-bg: #16213e;
--tab-bg: rgba(233, 69, 96, 0.1);
--tab-hover-bg: rgba(233, 69, 96, 0.2);
--tab-active-bg: #16213e;
--tab-active-text: #e94560;
}
/* Solarized Light Theme */
[data-preset="solarized-light"] {
--bg-primary: #fdf6e3;
--bg-secondary: #eee8d5;
--bg-tertiary: #e4ddc8;
--bg-elevated: #fdf6e3;
--bg-hover: rgba(38, 139, 210, 0.1);
--bg-active: rgba(38, 139, 210, 0.15);
--text-primary: #657b83;
--text-secondary: #586e75;
--text-tertiary: #93a1a1;
--text-inverse: #fdf6e3;
--border-color: #93a1a1;
--border-light: #eee8d5;
--accent-primary: #268bd2;
--accent-secondary: #2aa198;
--accent-hover: #073642;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
--video-bg: #eee8d5;
--video-tile-bg: #fdf6e3;
--video-placeholder-bg: linear-gradient(135deg, #eee8d5 0%, #fdf6e3 100%);
--control-bg: rgba(253, 246, 227, 0.95);
--control-btn-bg: #fdf6e3;
--control-btn-hover: #eee8d5;
--btn-primary-bg: linear-gradient(135deg, #268bd2 0%, #2aa198 100%);
--btn-primary-hover: linear-gradient(135deg, #2aa198 0%, #859900 100%);
--btn-primary-text: #fdf6e3;
--btn-shadow: 0 2px 8px rgba(38, 139, 210, 0.3);
--btn-shadow-hover: 0 4px 12px rgba(38, 139, 210, 0.4);
--lobby-card-bg: rgba(253, 246, 227, 0.95);
--lobby-card-border: #93a1a1;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: rgba(38, 139, 210, 0.2);
--message-bubble-bg: #fdf6e3;
--tab-bg: rgba(38, 139, 210, 0.1);
--tab-hover-bg: rgba(38, 139, 210, 0.15);
--tab-active-bg: #fdf6e3;
--tab-active-text: #268bd2;
}
/* Solarized Dark Theme */
[data-preset="solarized-dark"] {
--bg-primary: #002b36;
--bg-secondary: #073642;
--bg-tertiary: #094555;
--bg-elevated: #0a4d61;
--bg-hover: rgba(38, 139, 210, 0.2);
--bg-active: rgba(38, 139, 210, 0.3);
--text-primary: #839496;
--text-secondary: #93a1a1;
--text-tertiary: #657b83;
--text-inverse: #002b36;
--border-color: #586e75;
--border-light: #073642;
--accent-primary: #268bd2;
--accent-secondary: #2aa198;
--accent-hover: #859900;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
--video-bg: #002b36;
--video-tile-bg: #073642;
--video-placeholder-bg: linear-gradient(135deg, #073642 0%, #002b36 100%);
--control-bg: rgba(7, 54, 66, 0.95);
--control-btn-bg: #073642;
--control-btn-hover: #094555;
--btn-primary-bg: linear-gradient(135deg, #268bd2 0%, #2aa198 100%);
--btn-primary-hover: linear-gradient(135deg, #2aa198 0%, #859900 100%);
--btn-primary-text: #fdf6e3;
--btn-shadow: 0 4px 15px rgba(38, 139, 210, 0.3);
--btn-shadow-hover: 0 6px 20px rgba(38, 139, 210, 0.4);
--lobby-card-bg: rgba(7, 54, 66, 0.9);
--lobby-card-border: #586e75;
--lobby-text-primary: #839496;
--lobby-text-secondary: #93a1a1;
--glow-primary: rgba(38, 139, 210, 0.3);
--message-bubble-bg: #073642;
--tab-bg: rgba(38, 139, 210, 0.1);
--tab-hover-bg: rgba(38, 139, 210, 0.2);
--tab-active-bg: #073642;
--tab-active-text: #268bd2;
}
/* Monokai Theme */
[data-preset="monokai"] {
--bg-primary: #272822;
--bg-secondary: #1e1f1c;
--bg-tertiary: #3e3d32;
--bg-elevated: #49483e;
--bg-hover: rgba(249, 38, 114, 0.15);
--bg-active: rgba(249, 38, 114, 0.25);
--text-primary: #f8f8f2;
--text-secondary: #a6e22e;
--text-tertiary: #75715e;
--text-inverse: #272822;
--border-color: #49483e;
--border-light: #3e3d32;
--accent-primary: #f92672;
--accent-secondary: #66d9ef;
--accent-hover: #a6e22e;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
--video-bg: #272822;
--video-tile-bg: #1e1f1c;
--video-placeholder-bg: linear-gradient(135deg, #3e3d32 0%, #1e1f1c 100%);
--control-bg: rgba(30, 31, 28, 0.95);
--control-btn-bg: #3e3d32;
--control-btn-hover: #49483e;
--btn-primary-bg: linear-gradient(135deg, #f92672 0%, #fd971f 100%);
--btn-primary-hover: linear-gradient(135deg, #a6e22e 0%, #66d9ef 100%);
--btn-primary-text: #272822;
--btn-shadow: 0 4px 15px rgba(249, 38, 114, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(166, 226, 46, 0.5);
--lobby-card-bg: rgba(30, 31, 28, 0.9);
--lobby-card-border: #49483e;
--lobby-text-primary: #f8f8f2;
--lobby-text-secondary: #a6e22e;
--glow-primary: rgba(249, 38, 114, 0.3);
--message-bubble-bg: #3e3d32;
--tab-bg: rgba(249, 38, 114, 0.1);
--tab-hover-bg: rgba(249, 38, 114, 0.2);
--tab-active-bg: #3e3d32;
--tab-active-text: #f92672;
}
/* Gruvbox Theme */
[data-preset="gruvbox"] {
--bg-primary: #282828;
--bg-secondary: #1d2021;
--bg-tertiary: #3c3836;
--bg-elevated: #504945;
--bg-hover: rgba(250, 189, 47, 0.15);
--bg-active: rgba(250, 189, 47, 0.25);
--text-primary: #ebdbb2;
--text-secondary: #fabd2f;
--text-tertiary: #928374;
--text-inverse: #282828;
--border-color: #504945;
--border-light: #3c3836;
--accent-primary: #fabd2f;
--accent-secondary: #b8bb26;
--accent-hover: #fe8019;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
--video-bg: #282828;
--video-tile-bg: #1d2021;
--video-placeholder-bg: linear-gradient(135deg, #3c3836 0%, #1d2021 100%);
--control-bg: rgba(29, 32, 33, 0.95);
--control-btn-bg: #3c3836;
--control-btn-hover: #504945;
--btn-primary-bg: linear-gradient(135deg, #fabd2f 0%, #fe8019 100%);
--btn-primary-hover: linear-gradient(135deg, #b8bb26 0%, #8ec07c 100%);
--btn-primary-text: #282828;
--btn-shadow: 0 4px 15px rgba(250, 189, 47, 0.3);
--btn-shadow-hover: 0 6px 20px rgba(184, 187, 38, 0.4);
--lobby-card-bg: rgba(29, 32, 33, 0.9);
--lobby-card-border: #504945;
--lobby-text-primary: #ebdbb2;
--lobby-text-secondary: #fabd2f;
--glow-primary: rgba(250, 189, 47, 0.3);
--message-bubble-bg: #3c3836;
--tab-bg: rgba(250, 189, 47, 0.1);
--tab-hover-bg: rgba(250, 189, 47, 0.2);
--tab-active-bg: #3c3836;
--tab-active-text: #fabd2f;
}
/* Candy Theme */
[data-preset="candy"] {
--bg-primary: #fff0f5;
--bg-secondary: #ffe4ec;
--bg-tertiary: #ffd6e0;
--bg-elevated: #ffffff;
--bg-hover: rgba(255, 105, 180, 0.15);
--bg-active: rgba(255, 105, 180, 0.25);
--text-primary: #c71585;
--text-secondary: #db7093;
--text-tertiary: #ff69b4;
--text-inverse: #fff0f5;
--border-color: #ffb6c1;
--border-light: #ffd6e0;
--accent-primary: #ff69b4;
--accent-secondary: #ff1493;
--accent-hover: #c71585;
--shadow-sm: 0 1px 3px rgba(255, 105, 180, 0.2);
--shadow-md: 0 4px 6px rgba(255, 105, 180, 0.25);
--shadow-lg: 0 10px 25px rgba(255, 105, 180, 0.3);
--video-bg: #ffe4ec;
--video-tile-bg: #ffd6e0;
--video-placeholder-bg: linear-gradient(135deg, #ffb6c1 0%, #ffd6e0 100%);
--control-bg: rgba(255, 240, 245, 0.95);
--control-btn-bg: #ffffff;
--control-btn-hover: #ffe4ec;
--btn-primary-bg: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
--btn-primary-hover: linear-gradient(135deg, #ff1493 0%, #c71585 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(255, 105, 180, 0.5);
--lobby-card-bg: rgba(255, 255, 255, 0.9);
--lobby-card-border: #ffb6c1;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: rgba(255, 105, 180, 0.3);
--message-bubble-bg: #ffffff;
--tab-bg: rgba(255, 105, 180, 0.1);
--tab-hover-bg: rgba(255, 105, 180, 0.2);
--tab-active-bg: #ffffff;
--tab-active-text: #ff69b4;
}
/* Neon Theme */
[data-preset="neon"] {
--bg-primary: #0a0a0a;
--bg-secondary: #0f0f0f;
--bg-tertiary: #1a1a1a;
--bg-elevated: #222222;
--bg-hover: rgba(255, 0, 255, 0.15);
--bg-active: rgba(255, 0, 255, 0.25);
--text-primary: #ffffff;
--text-secondary: #ff00ff;
--text-tertiary: #00ffff;
--text-inverse: #0a0a0a;
--border-color: #ff00ff;
--border-light: #1a1a1a;
--accent-primary: #ff00ff;
--accent-secondary: #00ffff;
--accent-hover: #ffff00;
--shadow-sm: 0 0 10px #ff00ff, 0 0 20px rgba(255, 0, 255, 0.5);
--shadow-md: 0 0 20px #ff00ff, 0 0 40px rgba(255, 0, 255, 0.5);
--shadow-lg: 0 0 30px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.5), 0 0 80px rgba(0, 255, 255, 0.3);
--video-bg: #0a0a0a;
--video-tile-bg: #0f0f0f;
--video-placeholder-bg: #0a0a0a;
--control-bg: rgba(15, 15, 15, 0.95);
--control-btn-bg: #1a1a1a;
--control-btn-hover: #222222;
--btn-primary-bg: transparent;
--btn-primary-hover: rgba(255, 0, 255, 0.1);
--btn-primary-text: #ff00ff;
--btn-shadow: 0 0 15px #ff00ff, 0 0 30px rgba(255, 0, 255, 0.5);
--btn-shadow-hover: 0 0 25px #00ffff, 0 0 50px rgba(0, 255, 255, 0.5);
--lobby-card-bg: rgba(15, 15, 15, 0.9);
--lobby-card-border: #ff00ff;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: #ff00ff;
--glow-primary: rgba(255, 0, 255, 0.5);
--message-bubble-bg: #1a1a1a;
--tab-bg: rgba(255, 0, 255, 0.1);
--tab-hover-bg: rgba(255, 0, 255, 0.2);
--tab-active-bg: #1a1a1a;
--tab-active-text: #ff00ff;
}
/* Synthwave Theme */
[data-preset="synthwave"] {
--bg-primary: #2b1055;
--bg-secondary: #1a0a35;
--bg-tertiary: #3c1470;
--bg-elevated: #4a1a88;
--bg-hover: rgba(255, 106, 0, 0.2);
--bg-active: rgba(255, 106, 0, 0.3);
--text-primary: #f5d300;
--text-secondary: #ff6a00;
--text-tertiary: #7597de;
--text-inverse: #2b1055;
--border-color: #ff6a00;
--border-light: #3c1470;
--accent-primary: #ff6a00;
--accent-secondary: #f5d300;
--accent-hover: #7597de;
--shadow-sm: 0 0 10px rgba(255, 106, 0, 0.3), 0 0 20px rgba(245, 211, 0, 0.2);
--shadow-md: 0 0 20px rgba(255, 106, 0, 0.4), 0 0 40px rgba(245, 211, 0, 0.3);
--shadow-lg: 0 0 30px rgba(255, 106, 0, 0.5), 0 0 60px rgba(245, 211, 0, 0.4);
--video-bg: #2b1055;
--video-tile-bg: #1a0a35;
--video-placeholder-bg: linear-gradient(180deg, #2b1055 0%, #7597de 50%, #ff6a00 100%);
--control-bg: rgba(26, 10, 53, 0.95);
--control-btn-bg: #3c1470;
--control-btn-hover: #4a1a88;
--btn-primary-bg: linear-gradient(135deg, #ff6a00 0%, #f5d300 100%);
--btn-primary-hover: linear-gradient(135deg, #f5d300 0%, #7597de 100%);
--btn-primary-text: #2b1055;
--btn-shadow: 0 0 20px rgba(255, 106, 0, 0.5);
--btn-shadow-hover: 0 0 30px rgba(245, 211, 0, 0.6);
--lobby-card-bg: rgba(26, 10, 53, 0.85);
--lobby-card-border: #ff6a00;
--lobby-text-primary: #f5d300;
--lobby-text-secondary: #ff6a00;
--glow-primary: rgba(255, 106, 0, 0.4);
--message-bubble-bg: #3c1470;
--tab-bg: rgba(255, 106, 0, 0.1);
--tab-hover-bg: rgba(255, 106, 0, 0.2);
--tab-active-bg: #3c1470;
--tab-active-text: #f5d300;
}
/* Pastel Theme */
[data-preset="pastel"] {
--bg-primary: #ffecd2;
--bg-secondary: #fcb69f;
--bg-tertiary: #a1c4fd;
--bg-elevated: #ffffff;
--bg-hover: rgba(161, 196, 253, 0.3);
--bg-active: rgba(161, 196, 253, 0.4);
--text-primary: #5d5d5d;
--text-secondary: #7b68ee;
--text-tertiary: #98d8c8;
--text-inverse: #ffecd2;
--border-color: #c2e9fb;
--border-light: #fcb69f;
--accent-primary: #7b68ee;
--accent-secondary: #98d8c8;
--accent-hover: #f7797d;
--shadow-sm: 0 1px 3px rgba(123, 104, 238, 0.15);
--shadow-md: 0 4px 6px rgba(123, 104, 238, 0.2);
--shadow-lg: 0 10px 25px rgba(123, 104, 238, 0.25);
--video-bg: #c2e9fb;
--video-tile-bg: #a1c4fd;
--video-placeholder-bg: linear-gradient(135deg, #ffecd2 0%, #fcb69f 25%, #a1c4fd 50%, #c2e9fb 75%, #d4fc79 100%);
--control-bg: rgba(255, 236, 210, 0.95);
--control-btn-bg: #ffffff;
--control-btn-hover: #c2e9fb;
--btn-primary-bg: linear-gradient(135deg, #7b68ee 0%, #98d8c8 100%);
--btn-primary-hover: linear-gradient(135deg, #f7797d 0%, #fbd786 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(123, 104, 238, 0.3);
--btn-shadow-hover: 0 6px 20px rgba(247, 121, 125, 0.4);
--lobby-card-bg: rgba(255, 255, 255, 0.85);
--lobby-card-border: #c2e9fb;
--lobby-text-primary: #ffffff;
--lobby-text-secondary: rgba(255, 255, 255, 0.9);
--glow-primary: rgba(123, 104, 238, 0.3);
--message-bubble-bg: #ffffff;
--tab-bg: rgba(123, 104, 238, 0.1);
--tab-hover-bg: rgba(123, 104, 238, 0.15);
--tab-active-bg: #ffffff;
--tab-active-text: #7b68ee;
}
/* Ocean Theme */
[data-preset="ocean"] {
--bg-primary: #03045e;
--bg-secondary: #023e8a;
--bg-tertiary: #0077b6;
--bg-elevated: #0096c7;
--bg-hover: rgba(144, 224, 239, 0.2);
--bg-active: rgba(144, 224, 239, 0.3);
--text-primary: #caf0f8;
--text-secondary: #90e0ef;
--text-tertiary: #48cae4;
--text-inverse: #03045e;
--border-color: #00b4d8;
--border-light: #0077b6;
--accent-primary: #00b4d8;
--accent-secondary: #90e0ef;
--accent-hover: #48cae4;
--shadow-sm: 0 1px 3px rgba(0, 180, 216, 0.3);
--shadow-md: 0 4px 6px rgba(0, 180, 216, 0.35);
--shadow-lg: 0 10px 25px rgba(0, 180, 216, 0.4);
--video-bg: #03045e;
--video-tile-bg: #023e8a;
--video-placeholder-bg: linear-gradient(180deg, #03045e 0%, #0077b6 50%, #90e0ef 100%);
--control-bg: rgba(2, 62, 138, 0.95);
--control-btn-bg: #0077b6;
--control-btn-hover: #0096c7;
--btn-primary-bg: linear-gradient(135deg, #00b4d8 0%, #90e0ef 100%);
--btn-primary-hover: linear-gradient(135deg, #48cae4 0%, #caf0f8 100%);
--btn-primary-text: #03045e;
--btn-shadow: 0 4px 15px rgba(0, 180, 216, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(144, 224, 239, 0.5);
--lobby-card-bg: rgba(2, 62, 138, 0.85);
--lobby-card-border: #00b4d8;
--lobby-text-primary: #caf0f8;
--lobby-text-secondary: #90e0ef;
--glow-primary: rgba(0, 180, 216, 0.4);
--message-bubble-bg: #0077b6;
--tab-bg: rgba(0, 180, 216, 0.1);
--tab-hover-bg: rgba(0, 180, 216, 0.2);
--tab-active-bg: #0077b6;
--tab-active-text: #00b4d8;
}
/* Forest Theme */
[data-preset="forest"] {
--bg-primary: #1b4332;
--bg-secondary: #2d6a4f;
--bg-tertiary: #40916c;
--bg-elevated: #52b788;
--bg-hover: rgba(149, 213, 178, 0.2);
--bg-active: rgba(149, 213, 178, 0.3);
--text-primary: #d8f3dc;
--text-secondary: #95d5b2;
--text-tertiary: #74c69d;
--text-inverse: #1b4332;
--border-color: #52b788;
--border-light: #40916c;
--accent-primary: #74c69d;
--accent-secondary: #95d5b2;
--accent-hover: #b7e4c7;
--shadow-sm: 0 1px 3px rgba(116, 198, 157, 0.3);
--shadow-md: 0 4px 6px rgba(116, 198, 157, 0.35);
--shadow-lg: 0 10px 25px rgba(116, 198, 157, 0.4);
--video-bg: #1b4332;
--video-tile-bg: #2d6a4f;
--video-placeholder-bg: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #95d5b2 100%);
--control-bg: rgba(45, 106, 79, 0.95);
--control-btn-bg: #40916c;
--control-btn-hover: #52b788;
--btn-primary-bg: linear-gradient(135deg, #52b788 0%, #95d5b2 100%);
--btn-primary-hover: linear-gradient(135deg, #74c69d 0%, #b7e4c7 100%);
--btn-primary-text: #1b4332;
--btn-shadow: 0 4px 15px rgba(116, 198, 157, 0.4);
--btn-shadow-hover: 0 6px 20px rgba(149, 213, 178, 0.5);
--lobby-card-bg: rgba(45, 106, 79, 0.85);
--lobby-card-border: #52b788;
--lobby-text-primary: #d8f3dc;
--lobby-text-secondary: #95d5b2;
--glow-primary: rgba(116, 198, 157, 0.4);
--message-bubble-bg: #40916c;
--tab-bg: rgba(116, 198, 157, 0.1);
--tab-hover-bg: rgba(116, 198, 157, 0.2);
--tab-active-bg: #40916c;
--tab-active-text: #74c69d;
}
/* Sunset Theme */
[data-preset="sunset"] {
--bg-primary: #240046;
--bg-secondary: #3c096c;
--bg-tertiary: #5a189a;
--bg-elevated: #7b2cbf;
--bg-hover: rgba(247, 37, 133, 0.2);
--bg-active: rgba(247, 37, 133, 0.3);
--text-primary: #ff9e00;
--text-secondary: #f72585;
--text-tertiary: #b5179e;
--text-inverse: #240046;
--border-color: #7209b7;
--border-light: #5a189a;
--accent-primary: #f72585;
--accent-secondary: #ff9e00;
--accent-hover: #ff4d6d;
--shadow-sm: 0 1px 3px rgba(247, 37, 133, 0.3);
--shadow-md: 0 4px 6px rgba(247, 37, 133, 0.35);
--shadow-lg: 0 10px 25px rgba(247, 37, 133, 0.4);
--video-bg: #240046;
--video-tile-bg: #3c096c;
--video-placeholder-bg: linear-gradient(135deg, #f72585 0%, #b5179e 25%, #7209b7 50%, #560bad 75%, #480ca8 100%);
--control-bg: rgba(60, 9, 108, 0.95);
--control-btn-bg: #5a189a;
--control-btn-hover: #7b2cbf;
--btn-primary-bg: linear-gradient(135deg, #f72585 0%, #ff9e00 100%);
--btn-primary-hover: linear-gradient(135deg, #ff4d6d 0%, #ffc300 100%);
--btn-primary-text: #ffffff;
--btn-shadow: 0 4px 15px rgba(247, 37, 133, 0.5);
--btn-shadow-hover: 0 6px 20px rgba(255, 158, 0, 0.5);
--lobby-card-bg: rgba(60, 9, 108, 0.85);
--lobby-card-border: #7209b7;
--lobby-text-primary: #ff9e00;
--lobby-text-secondary: #f72585;
--glow-primary: rgba(247, 37, 133, 0.4);
--message-bubble-bg: #5a189a;
--tab-bg: rgba(247, 37, 133, 0.1);
--tab-hover-bg: rgba(247, 37, 133, 0.2);
--tab-active-bg: #5a189a;
--tab-active-text: #f72585;
}
/* CRT Scanline Effect */
.crt-scanlines::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 9999;
}
/* Custom theme overrides container */
#customThemeStyles {
/* Container for dynamically injected custom CSS */
}
/* Theme Studio Modal Responsive */
@media (max-width: 768px) {
.theme-studio-modal {
width: 100%;
max-width: 100%;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
}
.theme-studio-tabs {
padding: 0 var(--space-md);
}
.theme-studio-tab {
padding: var(--space-sm) var(--space-md);
font-size: 12px;
}
.theme-studio-tab svg {
width: 16px;
height: 16px;
}
.theme-preset-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: var(--space-sm);
}
.theme-preset-btn {
padding: var(--space-sm);
}
.preset-preview {
width: 40px;
height: 40px;
}
.preset-name {
font-size: 11px;
}
.preset-mode {
font-size: 10px;
}
.customizer-grid {
grid-template-columns: 1fr;
}
.customizer-item-wide {
grid-column: span 1;
}
.css-editor {
min-height: 250px;
font-size: 12px;
}
.customizer-actions,
.css-editor-actions,
.saved-themes-actions {
flex-wrap: wrap;
}
.customizer-btn {
flex: 1;
justify-content: center;
min-width: 120px;
}
.save-theme-form {
flex-direction: column;
}
.css-templates {
flex-direction: column;
align-items: stretch;
}
.css-templates select {
max-width: none;
}
}
/* ==========================================================================
Keyboard Shortcuts Hint (Room)
========================================================================== */
.shortcuts-hint {
position: fixed;
bottom: 100px;
bottom: calc(100px + env(safe-area-inset-bottom));
left: var(--space-lg);
z-index: 150;
}
.shortcuts-hint-toggle {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--control-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--border-light);
border-radius: 50%;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: 0 0 8px var(--glow-primary), 0 0 4px rgba(0, 0, 0, 0.1);
color: var(--text-secondary);
}
.shortcuts-hint-toggle:hover {
background: var(--bg-hover);
color: var(--accent-primary);
transform: scale(1.05);
box-shadow: 0 0 15px var(--glow-primary), 0 0 6px rgba(0, 0, 0, 0.15);
}
.shortcuts-hint-toggle svg {
width: 22px;
height: 22px;
}
.shortcuts-hint-panel {
position: absolute;
bottom: calc(100% + var(--space-sm));
left: 0;
min-width: 200px;
padding: var(--space-md);
background: var(--control-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transform-origin: bottom left;
transition: all var(--transition-normal);
}
.shortcuts-hint:hover .shortcuts-hint-panel,
.shortcuts-hint.active .shortcuts-hint-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.shortcuts-hint-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--border-light);
}
.shortcuts-hint-list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.shortcuts-hint-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-xs) 0;
}
.shortcuts-hint-item kbd {
min-width: 32px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-sm);
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid var(--border-color);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
box-shadow: 0 1px 0 var(--border-color);
flex-shrink: 0;
}
.shortcuts-hint-item span {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Hide on mobile by default - too cramped */
@media (max-width: 768px) {
.shortcuts-hint {
display: none;
}
}
/* Move shortcuts hint above filmstrip when spotlight mode is active */
body.spotlight-active .shortcuts-hint {
bottom: 195px;
bottom: calc(195px + env(safe-area-inset-bottom));
}
/* Hide shortcuts hint when filmstrip has many users (>=3) */
body.filmstrip-crowded .shortcuts-hint {
display: none;
}
/* ==========================================================================
Toast Notifications
========================================================================== */
.toast-container {
position: fixed;
bottom: 100px;
bottom: calc(100px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: var(--space-sm);
z-index: 10000; /* Above modals (z-index: 2000) to ensure error messages are visible */
/* Prevent toasts from being too wide on mobile */
width: calc(100% - var(--space-lg) * 2);
max-width: 400px;
padding: 0 var(--space-sm);
}
@media (max-width: 480px) {
.toast-container {
bottom: 80px;
bottom: calc(80px + env(safe-area-inset-bottom));
}
.toast {
padding: var(--space-sm) var(--space-md);
font-size: 13px;
}
}
/* Move toasts above filmstrip when spotlight mode is active */
body.spotlight-active .toast-container {
bottom: 195px;
bottom: calc(195px + env(safe-area-inset-bottom));
}
@media (max-width: 768px) {
body.spotlight-active .toast-container {
bottom: 160px;
bottom: calc(160px + env(safe-area-inset-bottom));
}
}
.toast {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
animation: toastIn 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
pointer-events: auto; /* Allow interaction with toast close button */
}
.toast.toast-out {
animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes toastOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
.toast-success {
border-left: 4px solid var(--cosmic-green);
box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 245, 212, 0.2);
}
.toast-error {
border-left: 4px solid var(--cosmic-red);
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 107, 0.2);
}
.toast-info {
border-left: 4px solid var(--accent-primary);
box-shadow: var(--shadow-lg), 0 0 20px var(--glow-primary);
}
.toast-warning {
border-left: 4px solid var(--cosmic-yellow);
box-shadow: var(--shadow-lg), 0 0 20px rgba(254, 228, 64, 0.3);
}
/* Recording notification toast */
.toast-recording {
min-width: 280px;
padding: var(--space-md) var(--space-lg);
}
.toast-recording .toast-message {
line-height: 1.4;
}
.toast-recording .toast-message strong {
display: block;
font-size: 14px;
margin-bottom: 4px;
}
.toast-recording-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 107, 107, 0.2);
flex-shrink: 0;
}
.toast-recording-icon svg {
width: 18px;
height: 18px;
color: var(--cosmic-red);
animation: recording-pulse 1s ease-in-out infinite;
}
.toast-recording.toast-info .toast-recording-icon {
background: rgba(99, 102, 241, 0.2);
}
.toast-recording.toast-info .toast-recording-icon svg {
color: var(--accent-primary);
animation: none;
}
/* Ring notification toast */
.toast-ring {
min-width: 260px;
padding: var(--space-md) var(--space-lg);
border-left: 4px solid var(--cosmic-yellow);
background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(254, 228, 64, 0.1) 100%);
box-shadow: var(--shadow-lg), 0 0 30px rgba(254, 228, 64, 0.3);
animation: toastIn 0.3s ease, ring-toast-glow 1s ease-in-out infinite;
}
@keyframes ring-toast-glow {
0%, 100% {
box-shadow: var(--shadow-lg), 0 0 20px rgba(254, 228, 64, 0.3);
}
50% {
box-shadow: var(--shadow-lg), 0 0 40px rgba(254, 228, 64, 0.5);
}
}
.toast-ring-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cosmic-yellow) 0%, var(--cosmic-orange) 100%);
flex-shrink: 0;
animation: ring-bell 0.5s ease-in-out 3;
}
@keyframes ring-bell {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(15deg); }
}
.toast-ring-icon svg {
width: 22px;
height: 22px;
color: #1a1a2e;
}
.toast-ring .toast-message {
font-size: 15px;
}
.toast-ring .toast-message strong {
color: var(--cosmic-yellow);
}
.toast-message {
flex: 1;
}
.toast-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-left: var(--space-sm);
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
opacity: 0.6;
transition: all 0.2s ease;
flex-shrink: 0;
}
.toast-close-btn:hover {
opacity: 1;
background: var(--bg-tertiary);
color: var(--text-primary);
}
.toast-close-btn svg {
width: 14px;
height: 14px;
}
/* Enhanced Recording Toast Styles */
.toast-recording-start,
.toast-recording-stop,
.toast-recording-saved {
min-width: 300px;
padding: var(--space-md) var(--space-lg);
}
.toast-recording-start {
border-left: 4px solid var(--cosmic-red);
background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(255, 107, 107, 0.1) 100%);
}
.toast-recording-start .toast-recording-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--cosmic-red);
flex-shrink: 0;
}
.toast-recording-start .toast-recording-icon.pulse svg {
animation: recording-pulse 1s ease-in-out infinite;
}
.toast-recording-start .toast-recording-icon svg {
width: 18px;
height: 18px;
color: white;
}
.toast-recording-stop .toast-recording-icon,
.toast-recording-saved .toast-success-icon,
.toast-recording-error .toast-error-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.toast-recording-stop .toast-recording-icon {
background: var(--bg-tertiary);
}
.toast-recording-stop .toast-recording-icon.stop svg {
width: 16px;
height: 16px;
color: var(--text-secondary);
}
.toast-recording-saved .toast-success-icon {
background: var(--cosmic-green);
}
.toast-recording-saved .toast-success-icon svg {
width: 20px;
height: 20px;
color: white;
}
.toast-recording-error .toast-error-icon {
background: var(--cosmic-red);
}
.toast-recording-error .toast-error-icon svg {
width: 20px;
height: 20px;
color: white;
}
.toast-message .toast-subtitle {
display: block;
font-size: 12px;
color: var(--text-secondary);
font-weight: 400;
margin-top: 2px;
}
/* Recording Overlay */
.recording-overlay {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 68, 68, 0.95);
border-radius: 24px;
box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
color: white;
font-family: 'Google Sans', sans-serif;
font-weight: 600;
font-size: 14px;
z-index: 10000;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.recording-overlay.visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.recording-dot {
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
animation: recording-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes recording-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.recording-text {
letter-spacing: 0.5px;
}
.recording-timer {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-weight: 500;
padding-left: 6px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
margin-left: 2px;
}
/* Remote Recording Indicator (when someone else is recording) */
.remote-recording-indicator {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 200, 50, 0.95);
border-radius: 20px;
box-shadow: 0 4px 16px rgba(255, 200, 50, 0.3);
color: #1a1a2e;
font-family: 'Google Sans', sans-serif;
font-weight: 600;
font-size: 13px;
z-index: 9999;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.remote-recording-indicator.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.remote-rec-dot {
width: 10px;
height: 10px;
background: #ff4444;
border-radius: 50%;
animation: remote-rec-pulse 1.5s ease-in-out infinite;
box-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}
@keyframes remote-rec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.remote-rec-text {
white-space: nowrap;
}
/* Remote Recording Toast */
.toast-remote-recording {
min-width: 300px;
padding: var(--space-md) var(--space-lg);
}
.toast-remote-recording.toast-warning {
border-left: 4px solid var(--cosmic-yellow);
background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(254, 228, 64, 0.15) 100%);
}
.toast-remote-recording .toast-recording-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.toast-remote-recording.toast-warning .toast-recording-icon {
background: var(--cosmic-red);
}
.toast-remote-recording.toast-warning .toast-recording-icon.pulse svg {
animation: recording-pulse 1s ease-in-out infinite;
}
.toast-remote-recording .toast-recording-icon svg {
width: 18px;
height: 18px;
color: white;
}
.toast-remote-recording.toast-info .toast-recording-icon {
background: var(--bg-tertiary);
}
.toast-remote-recording.toast-info .toast-recording-icon.stop svg {
color: var(--text-secondary);
}
/* Ringtone Selector - Compact Style */
.ringtone-row {
display: flex;
align-items: center;
gap: 8px;
}
.ringtone-select {
flex: 1;
}
.ringtone-test-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.ringtone-test-btn:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.ringtone-test-btn:hover svg {
color: white;
}
.ringtone-test-btn:active {
transform: scale(0.95);
}
.ringtone-test-btn svg {
width: 18px;
height: 18px;
color: var(--text-primary);
transition: color 0.2s ease;
}
/* ==========================================================================
Responsive Design - Mobile First Approach
========================================================================== */
/*
Modern Device Viewport Reference (CSS pixels):
- iPhone SE: 375 x 667
- iPhone 12/13/14: 390 x 844
- iPhone 14/15 Pro: 393 x 852
- iPhone 14/15 Pro Max: 430 x 932
- Samsung Galaxy S23/S24: 360-412 x 780-915
- Samsung Galaxy S25 Ultra: 440 x 956
- Google Pixel 8/9: 412 x 915
- iPad mini: 744 x 1133
*/
/* Tablets and below (< 768px) */
@media (max-width: 768px) {
/* Recording badges - position above spotlight area on mobile */
.recording-overlay,
.remote-recording-indicator {
top: auto;
bottom: auto;
/* Position below the header, above the spotlight/video area */
top: 70px;
font-size: 12px;
padding: 6px 12px;
}
.recording-overlay.visible {
transform: translateX(-50%) translateY(0);
}
.remote-recording-indicator.visible {
transform: translateX(-50%) translateY(0);
}
/* When both badges are visible, stack them vertically */
body:has(.recording-overlay.visible) .remote-recording-indicator.visible {
top: 110px;
}
.lobby-screen {
padding: var(--space-md);
padding-top: max(var(--space-md), env(safe-area-inset-top));
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}
.lobby-container {
max-width: 100%;
}
.lobby-card {
padding: var(--space-md);
}
.lobby-card-content {
flex-direction: column;
}
.video-preview-container {
flex: none;
order: -1;
width: 100%;
max-width: 320px;
}
.video-preview {
aspect-ratio: 16 / 9;
}
.chat-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 360px;
z-index: 200;
}
.participants-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 320px;
z-index: 200;
}
.control-bar {
padding: var(--space-sm) var(--space-md);
padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}
/* Control buttons on tablets - circular */
.control-btn {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.control-btn svg {
width: 22px;
height: 22px;
}
.controls-center {
gap: var(--space-sm);
}
.room-main {
max-height: calc(100vh - 110px);
max-height: calc(100dvh - 110px);
}
/* Mobile video grid */
.video-grid[data-count="2"] .video-tile {
width: 100%;
max-width: none;
max-height: calc(50% - var(--space-sm));
}
.video-grid[data-count="3"] .video-tile,
.video-grid[data-count="4"] .video-tile,
.video-grid[data-count="5"] .video-tile,
.video-grid[data-count="6"] .video-tile {
width: calc(50% - var(--space-xs));
max-width: none;
max-height: calc(50% - var(--space-sm));
}
.video-tile {
min-width: 150px;
min-height: 84px;
}
/* Modal adjustments for tablets */
.modal {
max-width: min(90%, 580px);
max-height: calc(100vh - var(--space-lg));
max-height: calc(100dvh - var(--space-lg));
}
/* Click effect options flex on tablet */
.click-effect-option {
flex: 1 1 calc(50% - var(--space-sm));
min-width: 0;
}
}
/* Large phones (< 480px) - iPhone 15 Pro Max, Samsung S24 Ultra */
@media (max-width: 480px) {
.room-header {
padding: var(--space-xs) var(--space-sm);
padding-top: max(var(--space-xs), env(safe-area-inset-top));
}
.room-name {
font-size: 16px;
}
.action-btn {
padding: var(--space-sm);
}
/* Mobile control bar - ensure buttons fit and stay circular */
.control-bar {
padding: var(--space-xs) var(--space-sm);
padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
gap: var(--space-xs);
}
.controls-left,
.controls-right {
min-width: auto;
gap: var(--space-xs);
}
.controls-center {
gap: var(--space-xs);
flex-wrap: nowrap;
}
/* Scale control buttons to fit - always circular */
.control-btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
flex-shrink: 0;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.control-btn svg {
width: 20px;
height: 20px;
}
.time-display {
display: none;
}
/* Lobby adjustments */
.lobby-header {
margin-bottom: var(--space-md);
}
.logo-text {
font-size: 28px;
}
.lobby-subtitle {
font-size: 14px;
}
.lobby-settings-btn {
width: 40px;
height: 40px;
}
.lobby-settings-btn svg {
width: 20px;
height: 20px;
}
/* Tab buttons */
.tab-btn {
padding: var(--space-sm) var(--space-md);
font-size: 13px;
}
.tab-btn svg {
width: 18px;
height: 18px;
}
/* Form inputs */
.input-wrapper input {
padding: 12px 52px 12px 44px;
font-size: 16px; /* Prevent iOS zoom on focus */
}
/* Modal - full width on phones, centered */
.modal {
max-width: calc(100% - var(--space-md) * 2);
width: 100%;
border-radius: var(--radius-lg);
max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-lg));
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-lg));
}
.modal-overlay {
align-items: center;
justify-content: center;
padding: var(--space-md);
padding-top: max(var(--space-md), env(safe-area-inset-top));
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}
.modal-content {
padding: var(--space-md);
}
/* Modal close button - larger touch target */
.modal-close-btn {
width: 44px;
height: 44px;
}
.modal-close-btn svg {
width: 24px;
height: 24px;
}
/* Chat panel full width on phones */
.chat-panel {
max-width: 100%;
}
.participants-panel {
max-width: 100%;
}
/* Video preview smaller on phones */
.video-preview-container {
max-width: 280px;
}
/* Footer text smaller */
.lobby-footer {
margin-top: var(--space-md);
}
.lobby-footer p {
font-size: 12px;
}
.lobby-footer small {
font-size: 10px;
}
}
/* Small phones (< 393px) - iPhone SE, older Android */
@media (max-width: 393px) {
.lobby-screen {
padding: var(--space-sm);
padding-top: max(var(--space-sm), env(safe-area-inset-top));
padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}
.lobby-card {
padding: var(--space-sm);
}
.logo-text {
font-size: 24px;
}
.lobby-subtitle {
font-size: 13px;
}
/* Control bar compact for small phones */
.control-bar {
padding: var(--space-xs) var(--space-xs);
padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
}
/* Smaller control buttons - always circular */
.control-btn {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.control-btn svg {
width: 18px;
height: 18px;
}
.controls-center {
gap: 4px;
}
.controls-left,
.controls-right {
gap: 4px;
}
/* Smaller action buttons in header */
.action-btn {
padding: var(--space-xs);
}
.action-btn svg {
width: 18px;
height: 18px;
}
/* Checkbox wrappers smaller */
.checkmark {
width: 36px;
height: 36px;
}
.checkmark svg {
width: 18px;
height: 18px;
}
.checkbox-label {
font-size: 14px;
}
/* Smaller submit button */
.submit-btn {
padding: 14px var(--space-lg);
font-size: 14px;
}
/* Submit button row responsive */
.lobby-submit-row .submit-btn-secondary {
padding: 14px var(--space-md);
font-size: 12px;
}
.lobby-submit-row .submit-btn-secondary .btn-icon {
width: 16px;
height: 16px;
}
/* Video preview even smaller */
.video-preview-container {
max-width: 240px;
}
/* Lobby media toggles more compact */
.lobby-media-toggles {
gap: var(--space-xs);
}
.lobby-toggle-btn {
padding: var(--space-xs) var(--space-sm);
}
.lobby-toggle-icon {
width: 30px;
height: 30px;
}
.lobby-toggle-icon svg {
width: 16px;
height: 16px;
}
.lobby-toggle-label {
font-size: 11px;
}
/* Room header even more compact */
.room-details {
gap: 0;
}
.room-name {
font-size: 14px;
}
.badge {
padding: 2px 8px;
font-size: 10px;
}
/* Modal header compact */
.modal-header {
padding: var(--space-sm) var(--space-md);
min-height: 48px;
}
.modal-header h2 {
font-size: 16px;
}
/* Settings group spacing */
.settings-group {
margin-bottom: var(--space-md);
}
.settings-label {
font-size: 11px;
margin-bottom: var(--space-xs);
}
/* Theme selector smaller */
.theme-option {
padding: var(--space-sm);
}
.theme-icon {
width: 32px;
height: 32px;
}
.theme-icon svg {
width: 16px;
height: 16px;
}
.theme-option span:last-child {
font-size: 12px;
}
/* Scheme options - compact on mobile */
.scheme-option {
padding: var(--space-xs);
gap: 2px;
}
.scheme-preview {
width: 24px;
height: 24px;
}
.scheme-name {
font-size: 10px;
}
/* Click effect options smaller */
.click-effect-option {
padding: var(--space-xs);
}
.effect-preview {
width: 32px;
height: 32px;
}
.effect-name {
font-size: 10px;
}
/* Toggle switches smaller */
.toggle-title {
font-size: 13px;
}
.toggle-desc {
font-size: 11px;
}
}
/* Extra small phones (< 360px) - Galaxy S series compact */
@media (max-width: 360px) {
.logo-text {
font-size: 22px;
}
.tab-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
gap: var(--space-xs);
}
.tab-btn svg {
width: 16px;
height: 16px;
}
/* Split tab buttons on small screens */
.tab-btn-split .tab-btn {
padding: var(--space-xs) var(--space-xs);
font-size: 11px;
}
.tab-btn-split .tab-btn svg {
width: 14px;
height: 14px;
}
/* Reservation form row on small screens */
.reservation-form-row {
grid-template-columns: 1fr;
}
/* Extra small control buttons - stay circular */
.control-btn {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.control-btn svg {
width: 16px;
height: 16px;
}
.controls-center {
gap: 3px;
}
.controls-left,
.controls-right {
gap: 3px;
}
/* Hide some room meta on very small screens */
.participant-count span {
display: none;
}
/* Scheme options - keep 4 columns on small screens */
.scheme-options {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xs);
}
/* Click effect options in single row with scroll */
.click-effect-options {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
gap: var(--space-xs);
padding-bottom: var(--space-xs);
}
.click-effect-option {
flex: 0 0 auto;
min-width: 60px;
}
}
/* Landscape orientation on phones */
@media (max-height: 500px) and (orientation: landscape) {
.lobby-screen {
padding: var(--space-sm);
align-items: flex-start;
overflow-y: auto;
}
.lobby-container {
margin: var(--space-sm) 0;
}
.lobby-header {
margin-bottom: var(--space-sm);
}
.logo-text {
font-size: 24px;
}
.lobby-card-content {
flex-direction: row;
}
.video-preview-container {
order: 0;
width: 200px;
}
.lobby-footer {
margin-top: var(--space-sm);
}
/* Room screen in landscape */
.room-main {
max-height: calc(100vh - 90px);
max-height: calc(100dvh - 90px);
}
/* Control buttons in landscape - circular */
.control-btn {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.control-btn svg {
width: 16px;
height: 16px;
}
.controls-center {
gap: 4px;
}
/* Modal in landscape - more width, less height */
.modal {
max-width: 500px;
max-height: calc(100vh - var(--space-md));
max-height: calc(100dvh - var(--space-md));
border-radius: var(--radius-lg);
}
.modal-overlay {
align-items: center;
padding: var(--space-sm);
}
.modal-content {
padding: var(--space-sm) var(--space-md);
}
.settings-group {
margin-bottom: var(--space-sm);
}
}
/* ==========================================================================
Utilities
========================================================================== */
.hidden {
display: none !important;
}
/* Hidden by user setting (e.g., disable keyboard shortcuts button) */
.setting-hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Selection */
::selection {
background: rgba(26, 115, 232, 0.3);
}
/* Focus Visible */
:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
button:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
Confetti Canvas
========================================================================== */
#confettiCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
/* ==========================================================================
Video Fullscreen Overlay
========================================================================== */
.video-fullscreen-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
animation: fadeIn 0.2s ease;
/* Safe area padding */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.video-fullscreen-overlay.hidden {
display: none;
}
.video-fullscreen-container {
position: relative;
width: 90vw;
height: 90vh;
height: 90dvh;
max-width: 1600px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}
@media (max-width: 480px) {
.video-fullscreen-container {
width: 100%;
height: 100%;
height: 100dvh;
border-radius: 0;
}
.fullscreen-controls {
padding: var(--space-md);
padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}
.fullscreen-name {
font-size: 16px;
}
.fullscreen-btn {
width: 40px;
height: 40px;
}
.fullscreen-btn svg {
width: 20px;
height: 20px;
}
}
.video-fullscreen-container video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.video-fullscreen-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--video-placeholder-bg);
}
.video-fullscreen-placeholder.hidden {
display: none;
}
.video-fullscreen-placeholder .avatar {
width: 150px;
height: 150px;
font-size: 64px;
}
.fullscreen-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}
.fullscreen-name {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.fullscreen-buttons {
display: flex;
gap: var(--space-sm);
}
.fullscreen-btn {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-full);
color: white;
cursor: pointer;
transition: all var(--transition-fast);
}
.fullscreen-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.fullscreen-btn svg {
width: 24px;
height: 24px;
}
.fullscreen-btn.close-fullscreen-btn {
background: var(--cosmic-red);
}
.fullscreen-btn.close-fullscreen-btn:hover {
background: #ff5252;
}
/* Video Tile Clickable for Expand */
.video-tile {
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.video-tile:hover {
transform: scale(1.02);
box-shadow: 0 0 30px var(--glow-primary);
z-index: 20;
}
.video-tile .expand-hint {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
border-radius: var(--radius-md);
color: white;
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 15;
}
.video-tile:hover .expand-hint {
opacity: 1;
}
.video-tile .expand-hint svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
Settings Toggle
========================================================================== */
.settings-toggle-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.settings-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
}
.settings-toggle:hover {
background: var(--bg-hover);
}
.toggle-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.toggle-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.toggle-desc {
font-size: 12px;
color: var(--text-tertiary);
}
.settings-toggle input[type="checkbox"] {
display: none;
}
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
transition: background var(--transition-fast);
flex-shrink: 0;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.settings-toggle input[type="checkbox"]:checked + .toggle-switch {
background: var(--accent-primary);
}
.settings-toggle input[type="checkbox"]:checked + .toggle-switch::after {
transform: translateX(20px);
}
/* Toggle with preview button */
.toggle-with-preview {
display: flex;
align-items: center;
gap: 8px;
}
.sound-preview-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.sound-preview-btn:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.sound-preview-btn:hover svg {
color: white;
}
.sound-preview-btn:active {
transform: scale(0.92);
}
.sound-preview-btn svg {
width: 14px;
height: 14px;
color: var(--text-primary);
transition: color 0.2s ease;
}
/* Disabled lobby settings when in room */
.settings-group.lobby-only.disabled {
opacity: 0.5;
pointer-events: none;
position: relative;
}
.settings-group.lobby-only.disabled::after {
content: 'Only available in lobby';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-elevated);
color: var(--text-tertiary);
font-size: 12px;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
white-space: nowrap;
}
/* ==========================================================================
Video Filters
========================================================================== */
/* Filter selector styling */
.filter-selector {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.filter-option {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm);
background: var(--bg-secondary);
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
/* Flex sizing for responsive grid - grow to fill, wrap at 4 per row */
flex: 1 1 70px;
min-width: 60px;
max-width: calc(25% - var(--space-xs));
}
.filter-option:hover {
background: var(--bg-hover);
transform: translateY(-2px);
}
.filter-option.active {
border-color: var(--accent-primary);
background: var(--bg-active);
}
.filter-preview {
width: 48px;
height: 36px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #22c55e 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.filter-name {
font-size: 11px;
font-weight: 500;
color: var(--text-primary);
text-align: center;
}
/* Filter preview thumbnails */
.filter-preview.none-preview {
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
}
.filter-preview.none-preview svg {
width: 24px;
height: 24px;
color: var(--text-secondary);
}
.filter-preview.custom-preview {
background: linear-gradient(135deg,
#ff6b6b 0%,
#4ecdc4 25%,
#ffe66d 50%,
#a855f7 75%,
#ff6b6b 100%
);
background-size: 200% 200%;
animation: customPreviewShimmer 3s ease infinite;
display: flex;
align-items: center;
justify-content: center;
}
.filter-preview.custom-preview svg {
width: 24px;
height: 24px;
color: white;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
@keyframes customPreviewShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.filter-preview.sepia-preview {
background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #8b7355 100%);
filter: sepia(1);
}
.filter-preview.grayscale-preview {
background: linear-gradient(135deg, #888 0%, #aaa 50%, #666 100%);
}
.filter-preview.vintage-preview {
background: linear-gradient(135deg, #d4a574 0%, #b8956f 50%, #7a6b55 100%);
filter: sepia(0.4) contrast(1.1);
}
.filter-preview.warm-preview {
background: linear-gradient(135deg, #ff8c5a 0%, #ffc36b 50%, #5dd46b 100%);
}
.filter-preview.cool-preview {
background: linear-gradient(135deg, #6ba3f9 0%, #8dd4fb 50%, #4dd8a0 100%);
}
.filter-preview.vivid-preview {
background: linear-gradient(135deg, #ff6b1c 0%, #ffe424 50%, #00ff55 100%);
}
.filter-preview.noir-preview {
background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 50%, #2a2a2a 100%);
}
.filter-preview.dreamy-preview {
background: linear-gradient(135deg, #ffb3d9 0%, #fff0b3 50%, #b3ffcc 100%);
}
.filter-preview.cinematic-preview {
background: linear-gradient(135deg, #3d5a80 0%, #98c1d9 50%, #293241 100%);
}
.filter-preview.cyberpunk-preview {
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ff0080 100%);
}
/* Video filter classes */
.video-filter-none video {
filter: none;
}
.video-filter-sepia video {
filter: sepia(0.7);
}
.video-filter-grayscale video {
filter: grayscale(1);
}
.video-filter-vintage video {
filter: sepia(0.35) contrast(1.1) brightness(1.05) saturate(1.2);
}
.video-filter-warm video {
filter: sepia(0.15) saturate(1.4) brightness(1.05) hue-rotate(-10deg);
}
.video-filter-cool video {
filter: saturate(0.9) brightness(1.05) hue-rotate(15deg) contrast(1.05);
}
.video-filter-vivid video {
filter: saturate(1.6) contrast(1.15) brightness(1.05);
}
.video-filter-noir video {
filter: grayscale(1) contrast(1.4) brightness(0.95);
}
.video-filter-dreamy video {
filter: brightness(1.1) contrast(0.9) saturate(1.2) blur(0.5px);
}
.video-filter-cinematic video {
filter: contrast(1.2) saturate(0.85) brightness(0.95) sepia(0.1);
}
.video-filter-cyberpunk video {
filter: saturate(1.5) contrast(1.3) hue-rotate(330deg) brightness(1.1);
}
/* Apply filters to fullscreen video too */
.video-fullscreen-container.video-filter-none video,
.video-fullscreen-container.video-filter-sepia video,
.video-fullscreen-container.video-filter-grayscale video,
.video-fullscreen-container.video-filter-vintage video,
.video-fullscreen-container.video-filter-warm video,
.video-fullscreen-container.video-filter-cool video,
.video-fullscreen-container.video-filter-vivid video,
.video-fullscreen-container.video-filter-noir video,
.video-fullscreen-container.video-filter-dreamy video,
.video-fullscreen-container.video-filter-cinematic video,
.video-fullscreen-container.video-filter-cyberpunk video,
.video-fullscreen-container.video-filter-custom video {
/* Inherit the filter from parent's class */
}
.video-fullscreen-container.video-filter-sepia video {
filter: sepia(0.7);
}
.video-fullscreen-container.video-filter-grayscale video {
filter: grayscale(1);
}
.video-fullscreen-container.video-filter-vintage video {
filter: sepia(0.35) contrast(1.1) brightness(1.05) saturate(1.2);
}
.video-fullscreen-container.video-filter-warm video {
filter: sepia(0.15) saturate(1.4) brightness(1.05) hue-rotate(-10deg);
}
.video-fullscreen-container.video-filter-cool video {
filter: saturate(0.9) brightness(1.05) hue-rotate(15deg) contrast(1.05);
}
.video-fullscreen-container.video-filter-vivid video {
filter: saturate(1.6) contrast(1.15) brightness(1.05);
}
.video-fullscreen-container.video-filter-noir video {
filter: grayscale(1) contrast(1.4) brightness(0.95);
}
.video-fullscreen-container.video-filter-dreamy video {
filter: brightness(1.1) contrast(0.9) saturate(1.2) blur(0.5px);
}
.video-fullscreen-container.video-filter-cinematic video {
filter: contrast(1.2) saturate(0.85) brightness(0.95) sepia(0.1);
}
.video-fullscreen-container.video-filter-cyberpunk video {
filter: saturate(1.5) contrast(1.3) hue-rotate(330deg) brightness(1.1);
}
/* Responsive filter selector */
@media (max-width: 480px) {
.filter-option {
flex: 1 1 60px;
min-width: 55px;
max-width: calc(25% - var(--space-xs));
}
.filter-preview {
width: 40px;
height: 30px;
}
.filter-name {
font-size: 10px;
}
}
/* ==========================================================================
Touch-Friendly Interactions
========================================================================== */
@media (hover: none) and (pointer: coarse) {
/* Larger touch targets on touch devices */
.action-btn,
.tab-btn,
.control-btn,
.modal-close-btn,
.close-panel-btn,
.close-chat-btn,
.scheme-option,
.theme-option,
.click-effect-option,
.checkbox-wrapper,
.settings-toggle {
-webkit-tap-highlight-color: transparent;
}
/* Remove hover effects that cause sticky states on touch */
.video-tile:hover {
transform: none;
box-shadow: none;
}
.video-tile:hover .expand-hint {
opacity: 0.7;
}
.control-btn:hover {
transform: none;
}
/* Active states for touch feedback */
.control-btn:active {
transform: scale(0.95);
}
.action-btn:active {
transform: scale(0.95);
}
.submit-btn:active {
transform: scale(0.98);
}
}
/* ==========================================================================
iOS Safari Specific Fixes
========================================================================== */
@supports (-webkit-touch-callout: none) {
/* Fix for iOS Safari address bar affecting viewport */
.screen {
min-height: -webkit-fill-available;
}
.room-screen {
height: -webkit-fill-available;
}
/* Prevent iOS bounce scroll on modals */
.modal-overlay {
-webkit-overflow-scrolling: touch;
}
/* Fix input zoom on iOS (font-size must be 16px+) */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
font-size: 16px;
}
}
/* ==========================================================================
Donate Modal & Button
========================================================================== */
.settings-donate {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-color);
}
.donate-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-md) var(--space-lg);
background: linear-gradient(135deg, #f7931a 0%, #ff6b6b 100%);
color: white;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
.donate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
.donate-btn:active {
transform: translateY(0);
}
.donate-btn svg {
width: 20px;
height: 20px;
}
.donate-modal {
max-width: 480px;
}
.donate-content {
/* Override grid layout from settings modal */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 0 !important;
text-align: center;
}
.donate-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
margin: 0 auto var(--space-lg);
background: linear-gradient(135deg, #f7931a 0%, #ff6b6b 100%);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(247, 147, 26, 0.3);
}
.donate-icon svg {
width: 32px;
height: 32px;
color: white;
}
.donate-message {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin-bottom: var(--space-lg);
width: 100%;
}
.donate-section {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-lg);
width: 100%;
}
.donate-label {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-sm);
}
.donate-label svg {
color: #f7931a;
}
.donate-address-container {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
.donate-address {
flex: 1;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-primary);
word-break: break-all;
text-align: left;
user-select: all;
}
.copy-address-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: var(--accent-primary);
border: none;
border-radius: var(--radius-sm);
color: white;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.copy-address-btn:hover {
background: var(--accent-secondary);
transform: scale(1.05);
}
.copy-address-btn svg {
width: 18px;
height: 18px;
}
.donate-instructions {
text-align: left;
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-lg);
width: 100%;
}
.donate-instructions h4 {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.donate-instructions ol {
margin: 0;
padding-left: var(--space-lg);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.8;
}
.donate-instructions li {
margin-bottom: var(--space-xs);
}
.donate-thanks {
font-size: 14px;
font-weight: 500;
color: var(--accent-primary);
margin: 0;
}
/* ==========================================================================
Room Reservation Modal
========================================================================== */
.reservation-modal {
max-width: 520px;
}
.reservation-modal .modal-header h2 {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.reservation-modal .modal-header h2 svg {
color: var(--accent-primary);
}
.reservation-content {
display: flex !important;
flex-direction: column;
gap: var(--space-lg);
}
.reservation-intro {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.reservation-room-code-display {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.reservation-room-code-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.reservation-room-code-value {
font-size: 16px;
font-weight: 600;
color: var(--accent-primary);
font-family: var(--font-mono, monospace);
letter-spacing: 1px;
}
.reservation-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.reservation-form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.reservation-form-group label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.reservation-form-group input,
.reservation-form-group select {
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
color: var(--text-primary);
transition: border-color 0.2s ease;
}
.reservation-form-group input:focus,
.reservation-form-group select:focus {
outline: none;
border-color: var(--accent-primary);
}
.reservation-form-group .input-wrapper {
display: flex;
align-items: stretch;
gap: var(--space-xs);
}
.reservation-form-group .input-wrapper input {
flex: 1;
}
.reservation-form-group .generate-btn {
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.reservation-form-group .generate-btn:hover {
background: var(--accent-primary);
color: white;
border-color: var(--accent-primary);
}
.reservation-form-group .generate-btn svg {
width: 18px;
height: 18px;
}
.reservation-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.reservation-timezone-selector {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.reservation-timezone-selector label {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.reservation-timezone-selector label svg {
color: var(--accent-primary);
flex-shrink: 0;
}
.reservation-timezone-selector select {
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.2s ease;
}
.reservation-timezone-selector select:focus {
outline: none;
border-color: var(--accent-primary);
}
.check-availability-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s ease;
}
.check-availability-btn:hover {
background: var(--bg-hover);
border-color: var(--accent-primary);
}
.check-availability-btn svg {
width: 18px;
height: 18px;
color: var(--accent-primary);
}
/* Availability Display */
.reservation-availability {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.reservation-availability h3 {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-md);
}
.reservation-availability h3 span {
color: var(--accent-primary);
font-family: var(--font-mono);
}
.availability-legend {
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-md);
font-size: 12px;
color: var(--text-secondary);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
}
.legend-color.available {
background: var(--cosmic-green);
}
.legend-color.reserved {
background: var(--cosmic-red);
opacity: 0.7;
}
.legend-color.past {
background: var(--bg-tertiary);
opacity: 0.5;
}
.availability-timeline {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--space-md);
}
.timeline-slot {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.timeline-slot.available {
background: var(--cosmic-green);
color: white;
opacity: 0.3;
}
.timeline-slot.available:hover {
opacity: 1;
transform: scale(1.1);
}
.timeline-slot.reserved {
background: var(--cosmic-red);
color: white;
opacity: 0.7;
cursor: not-allowed;
}
.timeline-slot.past {
background: var(--bg-tertiary);
color: var(--text-tertiary);
opacity: 0.5;
cursor: not-allowed;
}
.timeline-slot.selected {
opacity: 1;
box-shadow: 0 0 0 2px var(--accent-primary);
transform: scale(1.1);
}
.existing-reservations {
border-top: 1px solid var(--border-color);
padding-top: var(--space-md);
}
.existing-reservations h4 {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin: 0 0 var(--space-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reservation-list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
max-height: 120px;
overflow-y: auto;
}
.reservation-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-xs) var(--space-sm);
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
font-size: 12px;
}
.reservation-item-time {
color: var(--text-primary);
font-weight: 500;
}
.reservation-item-duration {
color: var(--text-tertiary);
}
.no-reservations {
color: var(--text-tertiary);
font-size: 13px;
font-style: italic;
}
/* Reservation Success */
.reservation-success {
text-align: center;
padding: var(--space-lg) 0;
}
.success-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--cosmic-green) 0%, #10b981 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes successPop {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.success-icon svg {
width: 32px;
height: 32px;
color: white;
}
.reservation-success h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-lg);
}
.reservation-details {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: var(--space-md);
text-align: left;
margin-bottom: var(--space-lg);
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--border-light);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-size: 13px;
color: var(--text-secondary);
}
.detail-value {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.access-code-row .detail-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--accent-primary);
letter-spacing: 2px;
}
.access-code-warning {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: rgba(var(--cosmic-amber-rgb, 245, 158, 11), 0.1);
border: 1px solid var(--cosmic-amber);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--cosmic-amber);
text-align: left;
margin-bottom: var(--space-md);
}
.access-code-warning svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
}
.copy-code-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-md);
background: var(--accent-primary);
border: none;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-code-btn:hover {
background: var(--accent-secondary);
transform: translateY(-1px);
}
.copy-code-btn svg {
width: 18px;
height: 18px;
}
/* Reservation Actions */
.reservation-actions {
display: flex;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
}
.reservation-cancel-btn {
flex: 1;
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.reservation-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.reservation-submit-btn {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--accent-primary);
border: none;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.reservation-submit-btn:hover:not(:disabled) {
background: var(--accent-secondary);
transform: translateY(-1px);
}
.reservation-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.reservation-submit-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
Reservation Code Entry Modal
========================================================================== */
.reservation-code-modal {
max-width: 400px;
}
.reservation-code-modal .modal-header h2 {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.reservation-code-modal .modal-header h2 svg {
color: var(--cosmic-amber);
}
.reservation-code-content {
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
}
.reservation-code-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, var(--cosmic-amber) 0%, #f59e0b 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
}
.reservation-code-icon svg {
width: 36px;
height: 36px;
color: white;
}
.reservation-code-message {
font-size: 15px;
color: var(--text-primary);
margin: 0;
line-height: 1.5;
}
.reservation-code-time {
font-size: 13px;
color: var(--text-tertiary);
margin: 0;
}
.reservation-code-input-group {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-xs);
text-align: left;
}
.reservation-code-input-group label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.reservation-code-input-group input {
width: 100%;
padding: var(--space-md);
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: 24px;
font-weight: 600;
text-align: center;
letter-spacing: 8px;
color: var(--text-primary);
transition: border-color 0.2s ease;
}
.reservation-code-input-group input:focus {
outline: none;
border-color: var(--accent-primary);
}
.reservation-code-input-group input::placeholder {
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
}
.reservation-code-hint {
font-size: 12px;
color: var(--text-tertiary);
margin: 0;
line-height: 1.5;
}
.reservation-code-actions {
display: flex;
gap: var(--space-md);
width: 100%;
padding-top: var(--space-md);
}
.reservation-code-cancel-btn {
flex: 1;
padding: var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.reservation-code-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.reservation-code-submit-btn {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--accent-primary);
border: none;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.reservation-code-submit-btn:hover {
background: var(--accent-secondary);
transform: translateY(-1px);
}
.reservation-code-submit-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
Contact Modal
========================================================================== */
.contact-modal {
max-width: 520px;
}
.contact-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 0 !important;
text-align: center;
}
.contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
min-width: 72px;
min-height: 72px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
margin: 0 auto var(--space-md);
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
border-radius: 50%;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
animation: contactIconPulse 3s ease-in-out infinite;
}
@keyframes contactIconPulse {
0%, 100% {
transform: scale(1);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
50% {
transform: scale(1.05);
box-shadow: var(--shadow-lg), 0 0 20px var(--accent-primary), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
}
.contact-icon svg {
width: 36px;
height: 36px;
color: white;
}
.contact-message {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.7;
margin-bottom: var(--space-lg);
width: 100%;
max-width: 400px;
}
.contact-form {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.contact-form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
text-align: left;
}
.contact-form-group label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
padding-left: var(--space-xs);
}
.contact-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.contact-input-wrapper svg {
position: absolute;
left: 14px;
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
transition: color 0.2s ease;
}
.contact-input-wrapper input {
width: 100%;
padding: 14px 16px 14px 48px;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
background: var(--bg-secondary);
transition: all 0.2s ease;
}
.contact-input-wrapper input:hover {
border-color: var(--accent-secondary);
}
.contact-input-wrapper input:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.contact-input-wrapper input:focus + svg,
.contact-input-wrapper:focus-within svg {
color: var(--accent-primary);
}
.contact-input-wrapper input::placeholder {
color: var(--text-tertiary);
opacity: 0.7;
}
.contact-textarea-wrapper {
position: relative;
}
.contact-textarea-wrapper textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
background: var(--bg-secondary);
transition: all 0.2s ease;
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.contact-textarea-wrapper textarea:hover {
border-color: var(--accent-secondary);
}
.contact-textarea-wrapper textarea:focus {
outline: none;
border-color: var(--accent-primary);
background: var(--bg-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.contact-textarea-wrapper textarea::placeholder {
color: var(--text-tertiary);
opacity: 0.7;
}
.contact-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: 16px var(--space-lg);
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
color: white;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
margin-top: var(--space-sm);
position: relative;
overflow: hidden;
}
.contact-submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.contact-submit-btn:hover::before {
left: 100%;
}
.contact-submit-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg), 0 0 20px var(--accent-primary);
}
.contact-submit-btn:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
.contact-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.contact-submit-btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.contact-submit-btn:hover svg {
transform: translateX(4px);
}
/* Contact Success State */
.contact-success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-xl) 0;
animation: successFadeIn 0.5s ease;
}
@keyframes successFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.contact-success.hidden {
display: none;
}
.contact-success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
border-radius: 50%;
margin-bottom: var(--space-lg);
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
animation: successIconBounce 0.6s ease 0.2s;
}
@keyframes successIconBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.contact-success-icon svg {
width: 40px;
height: 40px;
color: white;
}
.contact-success h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
}
.contact-success p {
font-size: 14px;
color: var(--text-secondary);
margin: 0 0 var(--space-lg) 0;
line-height: 1.6;
}
.contact-another-btn {
padding: 12px 24px;
background: var(--bg-secondary);
color: var(--text-primary);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.contact-another-btn:hover {
border-color: var(--accent-primary);
background: var(--bg-hover);
}
/* Contact form loading state */
.contact-submit-btn .spinning {
animation: contact-spin 1s linear infinite;
}
@keyframes contact-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Terms of Service Link - Uses CSS variables for automatic theme contrast */
.tos-link {
display: block;
margin-top: var(--space-md);
text-align: center;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
color: var(--text-secondary);
opacity: 0.7;
}
.tos-link:hover {
color: var(--accent-primary);
opacity: 1;
}
/* ==========================================================================
Terms of Service Modal
========================================================================== */
.tos-modal {
max-width: 520px;
}
.tos-content {
/* Override grid layout from settings modal */
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: var(--space-md) !important;
max-height: 60vh;
overflow-y: auto;
}
.tos-section {
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
.tos-section:last-of-type {
border-bottom: none;
}
.tos-section h3 {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.tos-section p {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
}
.tos-footer {
margin-top: var(--space-sm);
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
text-align: center;
}
.tos-footer p {
font-size: 12px;
color: var(--text-tertiary);
font-style: italic;
}
/* ==========================================================================
Custom Filter Modal
========================================================================== */
.custom-filter-modal {
max-width: 600px;
width: 95vw;
}
.custom-filter-content {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--space-lg) !important;
max-height: 75vh;
overflow-y: auto;
padding: var(--space-md);
grid-template-columns: none !important;
}
.custom-filter-preview-section {
width: 100%;
}
.custom-filter-preview {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid var(--border-color);
}
.custom-filter-preview video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.custom-filter-preview canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.custom-preview-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
color: var(--text-tertiary);
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.custom-preview-placeholder svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.custom-preview-placeholder span {
font-size: 13px;
}
.custom-filter-controls {
display: flex;
flex-direction: column;
gap: var(--space-lg);
width: 100%;
}
.custom-filter-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
}
.custom-filter-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.color-picker-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-lg);
width: 100%;
flex-wrap: wrap;
}
.color-picker-group {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
}
.color-picker-input {
width: 52px;
height: 52px;
padding: 0;
border: 3px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
background: none;
transition: all 0.2s ease;
flex-shrink: 0;
}
.color-picker-input:hover {
border-color: var(--accent-primary);
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.color-picker-input::-webkit-color-swatch-wrapper {
padding: 3px;
}
.color-picker-input::-webkit-color-swatch {
border-radius: 6px;
border: none;
}
.color-picker-input::-moz-color-swatch {
border-radius: 6px;
border: none;
}
.color-label {
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.intensity-slider-group {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-md);
flex: 1;
min-width: 150px;
}
.intensity-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
/* Custom Slider with visible track */
.custom-slider {
flex: 1;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: transparent;
border-radius: 4px;
outline: none;
position: relative;
cursor: pointer;
}
.custom-slider::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
border-radius: 4px;
opacity: 0.3;
}
.custom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
margin-top: -6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.custom-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.custom-slider::-moz-range-track {
width: 100%;
height: 8px;
background: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
border-radius: 4px;
opacity: 0.3;
}
.custom-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--accent-primary);
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.custom-slider::-moz-range-thumb:hover {
transform: scale(1.15);
}
/* Effects Grid - full width */
.custom-effects-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
width: 100%;
}
@media (max-width: 480px) {
.custom-effects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.custom-effect-toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
min-height: auto;
}
.custom-effect-toggle:hover {
background: var(--bg-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.custom-effect-toggle input {
display: none;
}
.custom-effect-toggle input:checked + .effect-icon {
color: var(--accent-primary);
transform: scale(1.1);
}
.custom-effect-toggle input:checked ~ .effect-name {
color: var(--accent-primary);
font-weight: 600;
}
.custom-effect-toggle:has(input:checked) {
border-color: var(--accent-primary);
background: var(--bg-active);
box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.2);
}
.effect-icon {
width: 28px;
height: 28px;
color: var(--text-secondary);
transition: all 0.2s ease;
}
.effect-icon svg {
width: 100%;
height: 100%;
}
.effect-name {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
text-align: left;
transition: all 0.2s ease;
}
/* Sliders section */
.custom-sliders {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-md);
width: 100%;
}
.slider-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-md);
flex: 1;
min-width: 200px;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.slider-label {
min-width: 70px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.custom-filter-actions {
display: flex;
flex-direction: row;
gap: var(--space-md);
width: 100%;
padding-top: var(--space-lg);
margin-top: var(--space-sm);
border-top: 1px solid var(--border-color);
}
.custom-filter-reset-btn,
.custom-filter-save-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.custom-filter-reset-btn {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.custom-filter-reset-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.custom-filter-save-btn {
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.custom-filter-save-btn:hover {
filter: brightness(1.1);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.custom-filter-save-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Custom filter overlay for video */
.video-tile.custom-filter-active::after,
.video-preview.custom-filter-active::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
.video-filter-custom video {
filter: none;
}
.video-tile .custom-effects-canvas,
.video-preview .custom-effects-canvas,
.video-fullscreen-container .custom-effects-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
/* ==========================================================================
Generator Settings
========================================================================== */
.generator-settings-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.generator-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
}
.generator-section-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.generator-section-title svg {
opacity: 0.7;
}
.generator-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
padding-right: 36px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 20px;
}
[data-theme="dark"] .generator-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2338bdf8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
.generator-select:hover {
border-color: var(--accent-secondary);
background-color: var(--bg-hover);
}
.generator-select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--glow-primary);
}
.generator-select optgroup {
font-weight: 700;
color: var(--text-primary);
background: var(--bg-secondary);
padding: var(--space-sm) 0;
}
.generator-select option {
font-weight: 500;
padding: var(--space-sm) var(--space-md);
background: var(--bg-primary);
color: var(--text-primary);
}
/* Code Settings */
.code-settings-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.code-setting {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 120px;
}
.code-setting-label {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.code-select {
padding: 6px 10px;
padding-right: 28px;
font-size: 13px;
background-position: right 4px center;
background-size: 18px;
}
.code-options-row {
display: flex;
gap: var(--space-md);
margin-top: var(--space-xs);
}
.code-option-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
padding: 6px 12px;
background: var(--bg-secondary);
border-radius: var(--radius-full);
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.code-option-toggle:hover {
background: var(--bg-hover);
border-color: var(--border-color);
}
.code-option-toggle input[type="checkbox"] {
display: none;
}
.code-option-toggle .option-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
transition: color var(--transition-fast);
}
.code-option-toggle:hover .option-label {
color: var(--text-primary);
}
.code-option-toggle input[type="checkbox"]:checked ~ .option-label {
color: var(--accent-primary);
}
/* Mini toggle switch for code options */
.mini-toggle-switch {
position: relative;
width: 32px;
height: 18px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
transition: background var(--transition-fast);
flex-shrink: 0;
}
.mini-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.code-option-toggle input[type="checkbox"]:checked + .mini-toggle-switch {
background: var(--accent-primary);
}
.code-option-toggle input[type="checkbox"]:checked + .mini-toggle-switch::after {
transform: translateX(14px);
}
/* Generate Name Button Animation */
.generate-name-btn {
animation: subtle-pulse 3s ease-in-out infinite;
}
.generate-name-btn:hover {
animation: none;
}
@keyframes subtle-pulse {
0%, 100% {
box-shadow: 0 2px 8px var(--glow-primary);
}
50% {
box-shadow: 0 2px 16px var(--glow-primary), 0 0 24px var(--glow-primary);
}
}
/* Name input wrapper adjustments for generate button */
.form-group .input-wrapper {
position: relative;
}
.form-group .input-wrapper .generate-name-btn {
position: absolute;
right: var(--space-sm);
}
/* Preview tooltip for generator */
.generator-preview {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
border-radius: var(--radius-full);
color: white;
font-size: 12px;
font-weight: 600;
margin-top: var(--space-sm);
opacity: 0;
transform: translateY(-5px);
transition: all var(--transition-fast);
}
.generator-section:hover .generator-preview {
opacity: 1;
transform: translateY(0);
}
.generator-preview-text {
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
/* Mobile responsiveness for generator settings */
@media (max-width: 480px) {
.code-settings-row {
flex-direction: column;
}
.code-setting {
min-width: 100%;
}
.code-options-row {
flex-direction: column;
gap: var(--space-sm);
}
.generator-section {
padding: var(--space-sm) var(--space-md);
}
}
/* Select option groups styling enhancement */
.generator-select optgroup {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-primary);
}
/* ==========================================================================
Device Settings
========================================================================== */
.device-settings-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.device-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
}
.device-section-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.device-section-title svg {
opacity: 0.7;
}
.device-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
padding-right: 36px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 20px;
}
[data-theme="dark"] .device-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2338bdf8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
.device-select:hover {
border-color: var(--accent-secondary);
background-color: var(--bg-hover);
}
.device-select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--glow-primary);
}
.device-select option {
font-weight: 500;
padding: var(--space-sm) var(--space-md);
background: var(--bg-primary);
color: var(--text-primary);
}
/* Mobile responsiveness for device settings */
@media (max-width: 480px) {
.device-section {
padding: var(--space-sm) var(--space-md);
}
}
/* Name style icons (visual flair for dropdown) */
.name-style-icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
vertical-align: middle;
}
/* ==========================================================================
Collaborative Whiteboard
========================================================================== */
/* Whiteboard Panel */
.whiteboard-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 400px;
max-width: 100%;
background: var(--bg-elevated);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: column;
z-index: 200;
transform: translateX(0);
transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.whiteboard-panel.hidden {
transform: translateX(100%);
pointer-events: none;
opacity: 0;
}
/* Whiteboard Header */
.whiteboard-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md);
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.whiteboard-title-container {
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* Whiteboard Mode Toggle */
.whiteboard-mode-toggle {
display: flex;
align-items: center;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.mode-toggle-track {
position: relative;
display: flex;
align-items: center;
background: var(--bg-tertiary);
border-radius: 20px;
padding: 3px;
gap: 0;
border: 1px solid var(--border-color);
transition: all var(--transition-normal);
}
.mode-label {
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 16px;
color: var(--text-tertiary);
transition: all var(--transition-fast);
z-index: 1;
user-select: none;
}
.mode-toggle-thumb {
position: absolute;
left: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
background: var(--bg-elevated);
border-radius: 16px;
transition: all var(--transition-normal);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Local mode active (default) */
.whiteboard-mode-toggle:not(.global-mode) .mode-local {
color: var(--text-primary);
}
.whiteboard-mode-toggle:not(.global-mode) .mode-toggle-thumb {
left: 3px;
background: var(--bg-elevated);
}
/* Global mode active */
.whiteboard-mode-toggle.global-mode .mode-toggle-thumb {
left: calc(50%);
background: var(--accent-primary);
}
.whiteboard-mode-toggle.global-mode .mode-global {
color: white;
}
.whiteboard-mode-toggle.global-mode .mode-toggle-track {
border-color: var(--accent-primary);
}
/* Mode Indicator */
.whiteboard-mode-indicator {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
padding: 4px 10px;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.whiteboard-mode-indicator.global-active {
background: var(--accent-primary);
color: white;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
50% {
box-shadow: 0 0 8px 4px rgba(99, 102, 241, 0.2);
}
}
.whiteboard-header-actions {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.whiteboard-header-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.whiteboard-header-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
}
.whiteboard-header-btn svg {
width: 18px;
height: 18px;
}
/* Whiteboard Toolbar */
.whiteboard-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-color);
background: var(--bg-primary);
}
.toolbar-section {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.toolbar-tools {
flex-wrap: wrap;
}
.tool-divider {
width: 1px;
height: 24px;
background: var(--border-color);
margin: 0 var(--space-xs);
}
.tool-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 2px solid transparent;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.tool-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
border-color: var(--accent-secondary);
}
.tool-btn.active {
background: var(--accent-primary);
color: white;
border-color: var(--accent-primary);
box-shadow: 0 2px 8px var(--glow-primary);
}
.tool-btn svg {
width: 18px;
height: 18px;
}
.action-tool-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.action-tool-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
border-color: var(--accent-secondary);
}
.action-tool-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.action-tool-btn svg {
width: 16px;
height: 16px;
}
/* Color picker and presets */
.toolbar-colors {
flex-wrap: wrap;
}
.toolbar-colors input[type="color"] {
width: 32px;
height: 32px;
padding: 0;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
background: none;
overflow: hidden;
}
.toolbar-colors input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.toolbar-colors input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: var(--radius-sm);
}
.color-presets {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.color-preset {
width: 24px;
height: 24px;
border: 2px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.color-preset:hover {
transform: scale(1.15);
}
.color-preset.active {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
}
/* Size and opacity sliders */
.toolbar-size,
.toolbar-opacity {
flex-direction: column;
gap: 2px;
min-width: 80px;
}
.size-label,
.opacity-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.5px;
}
.size-slider,
.opacity-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
cursor: pointer;
}
.size-slider::-webkit-slider-thumb,
.opacity-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform var(--transition-fast);
}
.size-slider::-webkit-slider-thumb:hover,
.opacity-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.size-value,
.opacity-value {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-align: center;
}
/* Canvas Container */
.whiteboard-canvas-container {
flex: 1;
position: relative;
overflow: hidden;
background: #1a1a2e;
background-image:
radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(56, 189, 248, 0.05) 0%, transparent 50%);
}
.whiteboard-canvas-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: crosshair;
}
/* Remote cursors */
.whiteboard-cursors {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.remote-cursor {
position: absolute;
pointer-events: none;
transition: transform 0.05s linear;
z-index: 10;
}
.remote-cursor-pointer {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 16px solid var(--cursor-color, #ff6b6b);
transform: rotate(-45deg);
transform-origin: top left;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.remote-cursor-label {
position: absolute;
top: 16px;
left: 8px;
background: var(--cursor-color, #ff6b6b);
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: var(--radius-sm);
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Text input overlay */
.whiteboard-text-input {
position: absolute;
z-index: 20;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.whiteboard-text-input.hidden {
display: none;
}
.whiteboard-text-input textarea {
min-width: 150px;
max-width: 300px;
min-height: 40px;
padding: var(--space-sm);
background: rgba(30, 30, 60, 0.95);
border: 2px solid var(--accent-primary);
border-radius: var(--radius-md);
color: white;
font-family: var(--font-sans);
font-size: 14px;
resize: both;
outline: none;
}
.text-input-actions {
display: flex;
gap: var(--space-xs);
}
.text-confirm-btn,
.text-cancel-btn {
width: 36px;
height: 36px;
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-sm);
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all var(--transition-fast);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.text-confirm-btn {
background: var(--accent-primary);
color: white;
}
.text-confirm-btn:hover {
background: var(--accent-hover);
}
.text-cancel-btn {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.text-cancel-btn:hover {
background: #ff6b6b;
color: white;
}
/* Whiteboard Status Bar */
.whiteboard-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--border-color);
background: var(--bg-secondary);
font-size: 11px;
color: var(--text-tertiary);
}
.status-users {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.status-users svg {
color: var(--accent-primary);
}
.status-zoom,
.status-coords {
font-family: 'Courier New', monospace;
font-size: 10px;
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* ==========================================================================
Whiteboard Fullscreen Modal
========================================================================== */
.whiteboard-fullscreen-overlay {
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
padding: 0;
}
.whiteboard-fullscreen-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: var(--bg-primary);
}
.whiteboard-fullscreen-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.whiteboard-fullscreen-title {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.whiteboard-fullscreen-title svg {
color: var(--accent-primary);
}
.fullscreen-room-badge {
background: var(--accent-primary);
color: white;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-full);
}
.whiteboard-fullscreen-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.whiteboard-fullscreen-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.whiteboard-fullscreen-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
border-color: var(--accent-secondary);
}
.whiteboard-fullscreen-btn svg {
width: 20px;
height: 20px;
}
.whiteboard-fullscreen-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-color);
background: var(--bg-primary);
}
.whiteboard-fullscreen-canvas-container {
flex: 1;
position: relative;
overflow: hidden;
background: #0f0f1a;
background-image:
radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.08) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
}
.whiteboard-fullscreen-canvas-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: crosshair;
}
.whiteboard-fullscreen-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-lg);
border-top: 1px solid var(--border-color);
background: var(--bg-secondary);
font-size: 12px;
color: var(--text-tertiary);
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.whiteboard-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 200;
}
.whiteboard-header {
position: relative;
z-index: 10;
flex-shrink: 0;
}
.whiteboard-toolbar {
padding: var(--space-xs) var(--space-sm);
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
position: relative;
z-index: 10;
flex-shrink: 0;
-webkit-overflow-scrolling: touch;
}
.whiteboard-toolbar .toolbar-section {
flex-shrink: 0;
}
.whiteboard-toolbar .toolbar-tools {
flex-wrap: nowrap;
}
.tool-btn {
width: 40px;
height: 40px;
min-width: 40px;
flex-shrink: 0;
touch-action: manipulation;
}
.tool-btn svg {
width: 18px;
height: 18px;
}
.action-tool-btn {
width: 36px;
height: 36px;
min-width: 36px;
flex-shrink: 0;
touch-action: manipulation;
}
.toolbar-size,
.toolbar-opacity {
min-width: 80px;
flex-shrink: 0;
}
.whiteboard-canvas-container {
position: relative;
z-index: 1;
}
.whiteboard-status {
position: relative;
z-index: 10;
flex-shrink: 0;
}
.whiteboard-fullscreen-toolbar {
padding: var(--space-sm);
gap: var(--space-sm);
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.whiteboard-fullscreen-toolbar .toolbar-section {
flex-shrink: 0;
}
.whiteboard-fullscreen-toolbar .toolbar-tools {
flex-wrap: nowrap;
}
/* Larger touch targets for color presets on mobile */
.color-presets {
flex-wrap: nowrap;
}
.color-preset {
width: 32px;
height: 32px;
min-width: 32px;
}
/* Ensure header buttons are easily tappable */
.whiteboard-header-btn {
width: 40px;
height: 40px;
min-width: 40px;
}
/* Mobile mode toggle styles */
.whiteboard-title-container {
flex-wrap: wrap;
gap: var(--space-xs);
}
.mode-label {
font-size: 10px;
padding: 5px 10px;
}
.whiteboard-mode-indicator {
font-size: 10px;
padding: 3px 8px;
}
}
/* Cursor styles for different tools */
.whiteboard-canvas-container.tool-pen canvas,
.whiteboard-fullscreen-canvas-container.tool-pen canvas {
cursor: crosshair;
}
.whiteboard-canvas-container.tool-brush canvas,
.whiteboard-fullscreen-canvas-container.tool-brush canvas {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z'/%3E%3C/svg%3E") 4 20, crosshair;
}
.whiteboard-canvas-container.tool-eraser canvas,
.whiteboard-fullscreen-canvas-container.tool-eraser canvas {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 12 12, crosshair;
}
.whiteboard-canvas-container.tool-text canvas,
.whiteboard-fullscreen-canvas-container.tool-text canvas {
cursor: text;
}
.whiteboard-canvas-container.tool-sticky canvas,
.whiteboard-fullscreen-canvas-container.tool-sticky canvas {
cursor: cell;
}
/* Animation for new strokes */
@keyframes strokeAppear {
from {
opacity: 0;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
/* Sticky notes */
.whiteboard-sticky-note {
position: absolute;
min-width: 140px;
min-height: 100px;
max-width: 300px;
background: #feca57;
border-radius: var(--radius-md);
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.25);
font-family: var(--font-sans);
font-size: 13px;
color: #333;
z-index: 15;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
display: flex;
flex-direction: column;
user-select: none;
}
.whiteboard-sticky-note:hover {
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
}
.whiteboard-sticky-note.dragging {
cursor: grabbing;
transform: scale(1.02) rotate(1deg);
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.35);
z-index: 20;
}
.whiteboard-sticky-note.sticky-removing {
opacity: 0;
transform: scale(0.8) rotate(-5deg);
pointer-events: none;
}
.sticky-delete-btn {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: rgba(239, 68, 68, 0.9);
border: 2px solid white;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.8);
transition: all 0.15s ease;
z-index: 5;
}
.sticky-delete-btn svg {
width: 14px;
height: 14px;
}
.whiteboard-sticky-note:hover .sticky-delete-btn {
opacity: 1;
transform: scale(1);
}
.sticky-delete-btn:hover {
background: #ef4444;
transform: scale(1.1);
}
.sticky-drag-handle {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
cursor: grab;
background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 100%);
border-radius: var(--radius-md) var(--radius-md) 0 0;
opacity: 0.5;
transition: opacity var(--transition-fast);
}
.sticky-drag-handle:hover {
opacity: 0.8;
}
.sticky-drag-handle:active {
cursor: grabbing;
}
.sticky-drag-handle svg {
width: 16px;
height: 16px;
color: rgba(0, 0, 0, 0.5);
}
.whiteboard-sticky-note.dragging .sticky-drag-handle {
cursor: grabbing;
opacity: 1;
}
.sticky-content {
flex: 1;
padding: var(--space-sm) var(--space-md);
outline: none;
min-height: 60px;
cursor: text;
word-break: break-word;
overflow-y: auto;
user-select: text;
}
.sticky-content:empty::before {
content: 'Type here...';
color: rgba(0, 0, 0, 0.4);
pointer-events: none;
}
/* Corner fold effect */
.whiteboard-sticky-note::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%);
pointer-events: none;
border-radius: 0 0 var(--radius-md) 0;
}
.whiteboard-sticky-note.color-yellow { background: #feca57; }
.whiteboard-sticky-note.color-pink { background: #ff9ff3; }
.whiteboard-sticky-note.color-blue { background: #54a0ff; color: white; }
.whiteboard-sticky-note.color-green { background: #1dd1a1; }
.whiteboard-sticky-note.color-blue .sticky-content:empty::before {
color: rgba(255, 255, 255, 0.5);
}
.whiteboard-sticky-note.color-blue .sticky-drag-handle svg {
color: rgba(255, 255, 255, 0.6);
}
/* Drawing preview while dragging */
.drawing-preview {
position: absolute;
pointer-events: none;
border: 2px dashed var(--accent-primary);
background: rgba(99, 102, 241, 0.1);
z-index: 5;
}
/* ==========================================================================
Whiteboard Selection Frame
========================================================================== */
.whiteboard-selection-frame {
position: absolute;
border: 2px solid #00d4ff;
background: rgba(0, 212, 255, 0.05);
pointer-events: none;
z-index: 20;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.selection-handle {
position: absolute;
width: 12px;
height: 12px;
background: #00d4ff;
border: 2px solid white;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
/* Corner handles */
.handle-nw { top: -7px; left: -7px; }
.handle-ne { top: -7px; right: -7px; }
.handle-se { bottom: -7px; right: -7px; }
.handle-sw { bottom: -7px; left: -7px; }
/* Edge handles */
.handle-n { top: -7px; left: 50%; transform: translateX(-50%); }
.handle-s { bottom: -7px; left: 50%; transform: translateX(-50%); }
.handle-e { right: -7px; top: 50%; transform: translateY(-50%); }
.handle-w { left: -7px; top: 50%; transform: translateY(-50%); }
/* Stroke Edit Popup */
.stroke-edit-popup {
position: absolute;
transform: translate(-50%, -100%);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--space-sm);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
z-index: 100;
animation: popup-in 0.15s ease-out;
pointer-events: auto;
}
@keyframes popup-in {
from {
opacity: 0;
transform: translate(-50%, -90%);
}
to {
opacity: 1;
transform: translate(-50%, -100%);
}
}
.edit-popup-content {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.edit-color-picker {
width: 32px;
height: 32px;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
padding: 0;
background: transparent;
}
.edit-color-picker::-webkit-color-swatch-wrapper {
padding: 0;
}
.edit-color-picker::-webkit-color-swatch {
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
}
.edit-size-slider {
width: 80px;
height: 4px;
-webkit-appearance: none;
background: var(--border-color);
border-radius: 2px;
cursor: pointer;
}
.edit-size-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.edit-delete-btn {
width: 32px;
height: 32px;
border: none;
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.edit-delete-btn:hover {
background: #ef4444;
color: white;
}
/* Tool cursor for select mode */
.whiteboard-canvas-container.tool-select {
cursor: default;
}
/* Toolbar button pressed state */
.tool-btn:active {
transform: scale(0.95);
}
.action-tool-btn:active {
transform: scale(0.9);
}
/* ==========================================================================
Whiteboard Resize Handle
========================================================================== */
.whiteboard-resize-handle {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
cursor: ew-resize;
background: transparent;
z-index: 300;
transition: background var(--transition-fast);
}
.whiteboard-resize-handle::before {
content: '';
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 40px;
background: var(--border-color);
border-radius: 2px;
opacity: 0;
transition: opacity var(--transition-fast);
}
.whiteboard-resize-handle:hover {
background: var(--bg-hover);
}
.whiteboard-resize-handle:hover::before,
.whiteboard-panel.resizing .whiteboard-resize-handle::before {
opacity: 1;
}
.whiteboard-panel.resizing .whiteboard-resize-handle {
background: var(--accent-primary);
opacity: 0.3;
}
/* Prevent text selection during resize */
.whiteboard-panel.resizing {
user-select: none;
}
body.whiteboard-resizing {
cursor: ew-resize !important;
user-select: none;
}
body.whiteboard-resizing * {
cursor: ew-resize !important;
}
/* ==========================================================================
File Transfer UI
========================================================================== */
/* Hidden file input */
.hidden-file-input {
display: none;
}
/* File share button in chat */
.file-share-btn {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--bg-tertiary);
border: none;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.file-share-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
}
.file-share-btn svg {
width: 18px;
height: 18px;
}
/* File transfer modal */
.file-transfer-modal {
max-width: 380px;
}
.file-transfer-content {
text-align: center;
padding: var(--space-lg);
}
.file-transfer-icon {
width: 60px;
height: 60px;
margin: 0 auto var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.file-transfer-icon svg {
width: 32px;
height: 32px;
color: var(--accent-primary);
}
.file-transfer-sender {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: var(--space-md);
}
.file-transfer-info {
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-lg);
}
.file-transfer-info .file-name {
display: block;
font-weight: 600;
color: var(--text-primary);
word-break: break-all;
margin-bottom: var(--space-xs);
}
.file-transfer-info .file-size {
font-size: 12px;
color: var(--text-tertiary);
}
.file-transfer-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
}
.file-reject-btn,
.file-accept-btn {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
border: none;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.file-reject-btn {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.file-reject-btn:hover {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.file-accept-btn {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.file-accept-btn:hover {
filter: brightness(1.1);
}
.file-reject-btn svg,
.file-accept-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
Custom Confirm Modal
========================================================================== */
.confirm-modal {
max-width: 400px;
}
.confirm-content {
text-align: center;
padding: var(--space-lg) var(--space-xl);
}
.confirm-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-lg);
background: var(--bg-tertiary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.confirm-icon svg {
width: 36px;
height: 36px;
color: var(--accent-primary);
}
.confirm-icon.warning svg {
color: var(--cosmic-yellow);
}
.confirm-icon.danger svg {
color: var(--cosmic-red);
}
.confirm-icon.info svg {
color: var(--cosmic-blue);
}
.confirm-message {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-sm);
line-height: 1.5;
}
.confirm-description {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
line-height: 1.5;
}
.confirm-description:empty {
display: none;
}
.confirm-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
}
.confirm-cancel-btn,
.confirm-ok-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xl);
min-width: 100px;
border-radius: var(--radius-md);
border: none;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all var(--transition-fast);
}
.confirm-cancel-btn {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.confirm-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.confirm-ok-btn {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.confirm-ok-btn:hover {
filter: brightness(1.1);
}
.confirm-ok-btn.danger {
background: var(--cosmic-red);
color: white;
}
.confirm-ok-btn.danger:hover {
filter: brightness(1.15);
}
.confirm-ok-btn.warning {
background: var(--cosmic-yellow);
color: #1a1a2e;
}
.confirm-ok-btn.warning:hover {
filter: brightness(1.1);
}
/* ==========================================================================
Leave Room Confirmation Modal
========================================================================== */
.leave-room-modal {
max-width: 420px;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-elevated);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.leave-room-content {
padding: var(--space-xl) var(--space-xl) var(--space-lg);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Animated Door Icon */
.leave-room-icon {
position: relative;
width: 100px;
height: 100px;
margin-bottom: var(--space-lg);
}
.door-frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 72px;
border: 3px solid var(--text-tertiary);
border-radius: var(--radius-sm);
background: var(--bg-tertiary);
overflow: hidden;
transition: all var(--transition-normal);
}
.door {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
border-radius: var(--radius-sm);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.door-handle {
position: absolute;
top: 50%;
right: 6px;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-full);
transform: translateY(-50%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.exit-arrow {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%) translateX(10px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--cosmic-red);
}
.exit-arrow svg {
width: 28px;
height: 28px;
}
/* Hover animation */
.leave-room-modal:hover .door {
transform: perspective(200px) rotateY(-45deg);
}
.leave-room-modal:hover .exit-arrow {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.leave-room-modal:hover .door-frame {
border-color: var(--cosmic-red);
}
.leave-room-title {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-sm);
font-family: var(--font-sans);
}
.leave-room-message {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 var(--space-xs);
line-height: 1.5;
}
.leave-room-description {
font-size: 14px;
color: var(--text-tertiary);
margin: 0 0 var(--space-xl);
line-height: 1.5;
max-width: 320px;
}
.leave-room-actions {
display: flex;
gap: var(--space-md);
width: 100%;
}
.leave-room-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
border: none;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all var(--transition-fast);
font-family: var(--font-sans);
}
.leave-room-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.leave-room-btn.cancel {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
.leave-room-btn.cancel:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-secondary);
transform: translateY(-1px);
}
.leave-room-btn.cancel:active {
transform: translateY(0);
}
.leave-room-btn.confirm {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.5);
}
.leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px -4px rgba(239, 68, 68, 0.6);
}
.leave-room-btn.confirm:active {
transform: translateY(0);
box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.5);
}
/* Modal entrance animation */
@keyframes leaveModalSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
#leaveRoomModal:not(.hidden) .leave-room-modal {
animation: leaveModalSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Theme-specific adjustments for light mode */
[data-theme="light"] .leave-room-modal {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .door-frame {
border-color: var(--border-secondary);
}
[data-theme="light"] .leave-room-btn.cancel {
background: var(--bg-secondary);
}
/* Dark theme nebula scheme */
[data-theme="dark"][data-scheme="nebula"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
box-shadow: 0 4px 14px -4px rgba(236, 72, 153, 0.5);
}
[data-theme="dark"][data-scheme="nebula"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
box-shadow: 0 8px 20px -4px rgba(236, 72, 153, 0.6);
}
[data-theme="dark"][data-scheme="nebula"] .exit-arrow {
color: #ec4899;
}
[data-theme="dark"][data-scheme="nebula"] .leave-room-modal:hover .door-frame {
border-color: #ec4899;
}
/* Dark theme supernova scheme */
[data-theme="dark"][data-scheme="supernova"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 4px 14px -4px rgba(245, 158, 11, 0.5);
}
[data-theme="dark"][data-scheme="supernova"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
box-shadow: 0 8px 20px -4px rgba(245, 158, 11, 0.6);
}
[data-theme="dark"][data-scheme="supernova"] .exit-arrow {
color: #f59e0b;
}
[data-theme="dark"][data-scheme="supernova"] .leave-room-modal:hover .door-frame {
border-color: #f59e0b;
}
/* Dark theme borealis scheme */
[data-theme="dark"][data-scheme="borealis"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
box-shadow: 0 4px 14px -4px rgba(20, 184, 166, 0.5);
}
[data-theme="dark"][data-scheme="borealis"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
box-shadow: 0 8px 20px -4px rgba(20, 184, 166, 0.6);
}
[data-theme="dark"][data-scheme="borealis"] .exit-arrow {
color: #14b8a6;
}
[data-theme="dark"][data-scheme="borealis"] .leave-room-modal:hover .door-frame {
border-color: #14b8a6;
}
/* Light theme dawn scheme */
[data-theme="light"][data-scheme="dawn"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
box-shadow: 0 4px 14px -4px rgba(249, 115, 22, 0.4);
}
[data-theme="light"][data-scheme="dawn"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
box-shadow: 0 8px 20px -4px rgba(249, 115, 22, 0.5);
}
[data-theme="light"][data-scheme="dawn"] .exit-arrow {
color: #f97316;
}
[data-theme="light"][data-scheme="dawn"] .leave-room-modal:hover .door-frame {
border-color: #f97316;
}
/* Light theme aurora scheme */
[data-theme="light"][data-scheme="aurora"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
}
[data-theme="light"][data-scheme="aurora"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
box-shadow: 0 8px 20px -4px rgba(139, 92, 246, 0.5);
}
[data-theme="light"][data-scheme="aurora"] .exit-arrow {
color: #8b5cf6;
}
[data-theme="light"][data-scheme="aurora"] .leave-room-modal:hover .door-frame {
border-color: #8b5cf6;
}
/* Light theme solar scheme */
[data-theme="light"][data-scheme="solar"] .leave-room-btn.confirm {
background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
box-shadow: 0 4px 14px -4px rgba(234, 179, 8, 0.4);
}
[data-theme="light"][data-scheme="solar"] .leave-room-btn.confirm:hover {
background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
box-shadow: 0 8px 20px -4px rgba(234, 179, 8, 0.5);
}
[data-theme="light"][data-scheme="solar"] .exit-arrow {
color: #eab308;
}
[data-theme="light"][data-scheme="solar"] .leave-room-modal:hover .door-frame {
border-color: #eab308;
}
/* Mobile responsiveness */
@media (max-width: 480px) {
.leave-room-modal {
max-width: 95vw;
margin: var(--space-md);
}
.leave-room-content {
padding: var(--space-lg);
}
.leave-room-icon {
width: 80px;
height: 80px;
}
.door-frame {
width: 44px;
height: 56px;
}
.exit-arrow svg {
width: 22px;
height: 22px;
}
.leave-room-title {
font-size: 20px;
}
.leave-room-message {
font-size: 14px;
}
.leave-room-description {
font-size: 13px;
}
.leave-room-actions {
flex-direction: column;
}
.leave-room-btn {
padding: var(--space-md);
}
}
/* ==========================================================================
Whiteboard Export Modal
========================================================================== */
.export-modal {
max-width: 480px;
}
.export-content {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.export-preview {
position: relative;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: var(--space-md);
display: flex;
align-items: center;
justify-content: center;
}
.export-preview-label {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
#exportPreviewCanvas {
max-width: 100%;
max-height: 200px;
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.export-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.export-option {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.export-option:hover {
background: var(--bg-hover);
}
.export-option input[type="checkbox"] {
display: none;
}
.export-option .checkbox-custom {
width: 22px;
height: 22px;
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.export-option .checkbox-custom::after {
content: '';
width: 12px;
height: 12px;
background: var(--accent-primary);
border-radius: 2px;
transform: scale(0);
transition: transform var(--transition-fast);
}
.export-option input[type="checkbox"]:checked + .checkbox-custom {
border-color: var(--accent-primary);
}
.export-option input[type="checkbox"]:checked + .checkbox-custom::after {
transform: scale(1);
}
.export-option .option-label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.export-option .option-label svg {
width: 20px;
height: 20px;
color: var(--cosmic-yellow);
}
.export-actions {
display: flex;
gap: var(--space-md);
justify-content: flex-end;
}
.export-cancel-btn,
.export-download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
border: none;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all var(--transition-fast);
}
.export-cancel-btn {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.export-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.export-download-btn {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.export-download-btn:hover {
filter: brightness(1.1);
}
.export-download-btn svg {
width: 18px;
height: 18px;
}
/* File transfers container - floating panel */
.file-transfers-container {
position: fixed;
bottom: 100px;
right: 20px;
width: 320px;
max-height: 300px;
background: var(--bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.file-transfers-container.hidden {
display: none;
}
.file-transfers-container.minimized .file-transfers-list {
display: none;
}
.file-transfers-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.file-transfers-minimize {
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.file-transfers-minimize:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.file-transfers-list {
flex: 1;
overflow-y: auto;
padding: var(--space-sm);
}
/* Individual file transfer item */
.file-transfer-item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-sm);
background: var(--bg-tertiary);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
}
.file-transfer-item:last-child {
margin-bottom: 0;
}
.file-transfer-item-header {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.file-transfer-item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-transfer-item-icon svg {
width: 16px;
height: 16px;
color: var(--accent-primary);
}
.file-transfer-item-icon.uploading svg {
color: var(--cosmic-blue);
}
.file-transfer-item-icon.downloading svg {
color: var(--cosmic-green);
}
.file-transfer-item-icon.complete svg {
color: var(--cosmic-green);
}
.file-transfer-item-icon.error svg {
color: var(--cosmic-red);
}
.file-transfer-item-info {
flex: 1;
min-width: 0;
}
.file-transfer-item-name {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-transfer-item-meta {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 11px;
color: var(--text-tertiary);
}
.file-transfer-item-status {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.file-transfer-progress {
height: 4px;
background: var(--bg-secondary);
border-radius: 2px;
overflow: hidden;
}
.file-transfer-progress-bar {
height: 100%;
background: var(--accent-primary);
border-radius: 2px;
transition: width 0.3s ease;
}
.file-transfer-item.uploading .file-transfer-progress-bar {
background: var(--cosmic-blue);
}
.file-transfer-item.downloading .file-transfer-progress-bar {
background: var(--cosmic-green);
}
.file-transfer-cancel-btn {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.file-transfer-cancel-btn:hover {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.file-transfer-cancel-btn svg {
width: 14px;
height: 14px;
}
/* File message in chat */
.chat-message.file-message .message-content {
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
}
.file-message-content {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.file-message-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-message-icon svg {
width: 20px;
height: 20px;
color: var(--accent-primary);
}
.file-message-info {
flex: 1;
min-width: 0;
}
.file-message-name {
font-weight: 500;
color: var(--text-primary);
word-break: break-all;
overflow-wrap: break-word;
}
.file-message-size {
font-size: 11px;
color: var(--text-tertiary);
}
/* File transfer status styling */
.file-message-size.file-status-pending {
color: var(--cosmic-orange);
}
.file-message-size.file-status-uploading,
.file-message-size.file-status-downloading {
color: var(--cosmic-blue);
}
.file-message-size.file-status-sent,
.file-message-size.file-status-received {
color: var(--cosmic-green);
}
.file-message-size.file-status-declined {
color: var(--cosmic-red);
}
.file-message-size.file-status-cancelled {
color: var(--text-tertiary);
text-decoration: line-through;
}
.file-message-action {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
background: var(--accent-primary);
color: white;
border: none;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.file-message-action:hover {
filter: brightness(1.1);
}
.file-message-action:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.file-message-action.pending {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.file-transfers-container {
left: 10px;
right: 10px;
width: auto;
bottom: 80px;
}
.whiteboard-resize-handle {
display: none;
}
}
/* ==========================================================================
About Modal
========================================================================== */
.about-modal {
max-width: 600px;
}
.about-content {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: var(--space-lg) !important;
max-height: 70vh;
overflow-y: auto;
}
.about-hero {
text-align: center;
padding: var(--space-lg) 0;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
border-radius: var(--radius-lg);
margin: calc(-1 * var(--space-lg));
margin-bottom: 0;
}
.about-hero .logo-text {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 700;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.about-tagline {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
margin-top: var(--space-sm);
}
.about-section {
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
.about-section:last-of-type {
border-bottom: none;
}
.about-section h3 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.about-section p {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
}
.about-features {
list-style: none;
padding: 0;
margin: 0;
}
.about-features li {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
padding: var(--space-xs) 0;
padding-left: var(--space-md);
position: relative;
}
.about-features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent-primary);
font-weight: 600;
}
.about-features li strong {
color: var(--text-primary);
}
.about-highlights {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.highlight-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.highlight-icon {
font-size: 20px;
}
.highlight-text {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.about-footer {
text-align: center;
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
}
.about-footer p {
font-size: 13px;
color: var(--text-tertiary);
}
/* About CTA Link */
.about-cta-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
width: 100%;
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-md);
text-align: center;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: all 0.2s ease;
color: var(--accent-primary);
background: var(--bg-hover);
border: 1px solid var(--border-color);
}
.about-cta-link::after {
content: "→";
font-size: 14px;
transition: transform 0.2s ease;
}
.about-cta-link:hover {
background: var(--accent-primary);
color: var(--text-inverse);
border-color: var(--accent-primary);
box-shadow: 0 4px 12px var(--glow-primary);
transform: translateY(-1px);
}
.about-cta-link:hover::after {
transform: translateX(4px);
}
[data-theme="dark"] .about-cta-link:hover {
color: var(--bg-primary);
}
/* ==========================================================================
FAQ Modal
========================================================================== */
.faq-modal {
max-width: 600px;
}
.faq-content {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: var(--space-sm) !important;
max-height: 70vh;
overflow-y: auto;
}
.faq-item {
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
transition: all var(--transition-fast);
}
.faq-item:hover {
border-color: var(--accent-primary);
}
.faq-item h3 {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.faq-item p {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
/* ==========================================================================
Room Mode Options (Presentation/Private checkboxes)
========================================================================== */
.room-mode-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
margin-bottom: var(--space-md);
}
.room-mode-options.hidden {
display: none;
}
.room-mode-checkbox {
align-items: flex-start !important;
}
.room-mode-checkbox .checkmark {
margin-top: 2px;
}
.checkbox-label-extended {
display: flex;
flex-direction: column;
gap: 2px;
}
.label-title {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.label-desc {
font-size: 11px;
color: var(--text-tertiary);
line-height: 1.4;
}
.presentation-checkmark svg {
width: 14px;
height: 14px;
}
.private-checkmark svg {
width: 14px;
height: 14px;
}
/* ==========================================================================
Room Mode Badges (Presentation/Private indicators in room header)
========================================================================== */
.badge-presentation,
.badge-private {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.badge-presentation {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
color: white;
}
.badge-private {
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
color: white;
}
.badge-presentation svg,
.badge-private svg,
.badge-watch-party svg {
flex-shrink: 0;
}
/* On mobile, make badges more compact */
@media (max-width: 480px) {
.badge-watch-party {
font-size: 10px;
padding: 2px 6px;
}
.sync-with-host-btn {
width: 18px;
height: 18px;
}
.sync-with-host-btn svg {
width: 10px;
height: 10px;
}
}
/* ==========================================================================
Join Requests Button
========================================================================== */
.join-requests-btn {
position: relative;
}
.join-requests-btn.has-requests {
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
}
}
/* ==========================================================================
Waiting Approval Modal
========================================================================== */
.waiting-modal {
max-width: 400px;
}
.waiting-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
gap: var(--space-md) !important;
text-align: center;
padding: var(--space-xl) !important;
}
.waiting-spinner {
position: relative;
width: 80px;
height: 80px;
}
.spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-radius: 50%;
animation: spinner-rotate 1.5s ease-in-out infinite;
}
.spinner-ring:nth-child(1) {
border-top-color: var(--accent-primary);
animation-delay: 0s;
}
.spinner-ring:nth-child(2) {
border-right-color: var(--accent-secondary);
animation-delay: 0.15s;
width: 70%;
height: 70%;
top: 15%;
left: 15%;
}
.spinner-ring:nth-child(3) {
border-bottom-color: var(--cosmic-blue);
animation-delay: 0.3s;
width: 40%;
height: 40%;
top: 30%;
left: 30%;
}
@keyframes spinner-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.waiting-message {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.waiting-submessage {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
.waiting-cancel-btn {
padding: var(--space-sm) var(--space-xl);
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
margin-top: var(--space-md);
}
.waiting-cancel-btn:hover {
background: var(--bg-hover);
border-color: var(--border-hover);
}
/* ==========================================================================
Join Denied Modal
========================================================================== */
.denied-modal {
max-width: 400px;
}
.denied-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
grid-template-columns: none !important;
gap: var(--space-md) !important;
text-align: center;
padding: var(--space-xl) !important;
}
.denied-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
border-radius: 50%;
}
.denied-icon svg {
width: 32px;
height: 32px;
color: white;
}
.denied-message {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.denied-ok-btn {
padding: var(--space-sm) var(--space-xl);
background: var(--accent-primary);
color: white;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.denied-ok-btn:hover {
filter: brightness(1.1);
}
/* ==========================================================================
Join Requests Modal (Host view)
========================================================================== */
.join-requests-modal {
max-width: 450px;
}
.join-requests-content {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: var(--space-md) !important;
max-height: 60vh;
}
.join-requests-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-height: 300px;
overflow-y: auto;
}
.join-request-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.join-request-info {
display: flex;
align-items: center;
gap: var(--space-md);
}
.join-request-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
.join-request-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.join-request-name {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.join-request-time {
font-size: 11px;
color: var(--text-tertiary);
}
.join-request-actions {
display: flex;
gap: var(--space-xs);
}
.request-deny-btn,
.request-approve-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.request-deny-btn {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.request-deny-btn:hover {
background: #ef4444;
color: white;
}
.request-approve-btn {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.request-approve-btn:hover {
background: #22c55e;
color: white;
}
.request-deny-btn svg,
.request-approve-btn svg {
width: 18px;
height: 18px;
}
.join-requests-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
}
.requests-deny-all-btn,
.requests-approve-all-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.requests-deny-all-btn {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.requests-deny-all-btn:hover {
background: #ef4444;
color: white;
border-color: #ef4444;
}
.requests-approve-all-btn {
background: #22c55e;
color: white;
}
.requests-approve-all-btn:hover {
filter: brightness(1.1);
}
.join-requests-empty {
text-align: center;
padding: var(--space-xl);
color: var(--text-tertiary);
font-size: 14px;
}
/* ==========================================================================
Version History Modal
========================================================================== */
.version-history-modal {
max-width: 600px;
}
.version-history-content {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0 !important;
max-height: 65vh;
overflow-y: auto;
padding: 0 !important;
}
.version-item {
padding: var(--space-lg);
border-bottom: 1px solid var(--border-light);
transition: background-color 0.2s ease;
}
.version-item:last-child {
border-bottom: none;
}
.version-item:hover {
background: var(--bg-secondary);
}
.version-current {
background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 99, 102, 241), 0.08) 0%, transparent 100%);
border-left: 3px solid var(--accent-primary);
}
.version-current:hover {
background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 99, 102, 241), 0.12) 0%, transparent 100%);
}
.version-initial {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, transparent 100%);
}
.version-initial:hover {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, transparent 100%);
}
.version-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.version-number {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
background: var(--bg-tertiary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
}
.version-badge {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: white;
background: var(--accent-primary);
padding: 3px 8px;
border-radius: var(--radius-full);
}
.version-date {
font-size: 12px;
color: var(--text-tertiary);
font-family: var(--font-mono);
}
.version-details {
margin-top: var(--space-sm);
}
.version-category {
margin-bottom: var(--space-md);
}
.version-category:last-child {
margin-bottom: 0;
}
.version-category h4 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.version-category h4::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.version-category:nth-child(1) h4::before {
background: #22c55e;
}
.version-category:nth-child(2) h4::before {
background: #f59e0b;
}
.version-category:nth-child(3) h4::before {
background: #ef4444;
}
.version-category ul {
list-style: none;
padding: 0;
margin: 0;
}
.version-category ul li {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
padding: var(--space-xs) 0;
padding-left: var(--space-md);
position: relative;
}
.version-category ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--text-tertiary);
}
.version-category ul.nested-list {
margin-left: var(--space-md);
margin-top: var(--space-xs);
}
.version-category ul.nested-list li {
font-size: 12px;
padding: 2px 0 2px var(--space-md);
color: var(--text-tertiary);
}
.version-category ul.nested-list li::before {
content: '◦';
}
.version-note {
font-size: 13px;
color: var(--text-secondary);
font-style: italic;
margin: 0;
}
/* Version History Scrollbar */
.version-history-content::-webkit-scrollbar {
width: 6px;
}
.version-history-content::-webkit-scrollbar-track {
background: transparent;
}
.version-history-content::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
.version-history-content::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Mobile adjustments for new modals */
@media (max-width: 768px) {
.about-highlights {
grid-template-columns: 1fr;
}
.join-request-item {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
}
.join-request-actions {
justify-content: flex-end;
}
.version-history-modal {
max-width: 95%;
margin: var(--space-md);
}
.version-item {
padding: var(--space-md);
}
.version-number {
font-size: 14px;
}
}
/* ==========================================================================
Choose Media Feature
========================================================================== */
/* Choose Media Bar - Fixed position centered horizontally, aligned with shortcuts hint button bottom */
.choose-media-bar {
position: fixed;
bottom: 100px;
bottom: calc(100px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end; /* Align bottoms of buttons */
gap: var(--space-sm);
z-index: 150;
}
.choose-media-bar.hidden {
display: none;
}
/* Choose Media Button */
.choose-media-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
height: 44px; /* Match shortcuts hint button height */
padding: 0 var(--space-lg);
background: var(--control-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 0 8px var(--glow-primary), 0 0 4px rgba(0, 0, 0, 0.1);
}
.choose-media-btn svg {
width: 18px;
height: 18px;
opacity: 0.8;
}
.choose-media-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
transform: scale(1.02);
box-shadow: 0 0 15px var(--glow-primary), 0 0 6px rgba(0, 0, 0, 0.15);
}
.choose-media-btn:hover svg {
opacity: 1;
color: var(--accent-primary);
}
.choose-media-btn:active {
transform: scale(0.98);
}
/* When media is playing, show active state */
.choose-media-btn.has-media {
border-color: var(--accent-primary);
background: rgba(0, 191, 255, 0.15);
color: var(--accent-primary);
}
.choose-media-btn.has-media svg {
color: var(--accent-primary);
opacity: 1;
}
.choose-media-btn.has-media:hover {
box-shadow: 0 0 20px var(--glow-primary);
}
/* Stop Media Button */
.stop-media-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
height: 44px; /* Match shortcuts hint button height */
padding: 0 var(--space-lg);
background: var(--control-bg);
backdrop-filter: blur(12px);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
color: #ef4444;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.2), 0 0 4px rgba(0, 0, 0, 0.1);
}
.stop-media-btn.hidden {
display: none;
}
.stop-media-btn svg {
width: 18px;
height: 18px;
}
.stop-media-btn:hover {
background: rgba(239, 68, 68, 0.15);
border-color: #ef4444;
transform: scale(1.02);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3), 0 0 6px rgba(0, 0, 0, 0.15);
}
.stop-media-btn:active {
transform: scale(0.98);
}
/* ==========================================================================
Stop Media Confirmation Modal
========================================================================== */
.stop-media-modal {
max-width: 380px;
}
.stop-media-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-lg);
}
.stop-media-icon {
width: 64px;
height: 64px;
background: rgba(239, 68, 68, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ef4444;
}
.stop-media-icon svg {
width: 32px;
height: 32px;
}
.stop-media-message {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.stop-media-actions {
display: flex;
gap: var(--space-md);
width: 100%;
margin-top: var(--space-sm);
}
.stop-media-cancel-btn,
.stop-media-confirm-btn {
flex: 1;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.stop-media-cancel-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.stop-media-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.stop-media-confirm-btn {
background: #ef4444;
border: 1px solid #ef4444;
color: white;
}
.stop-media-confirm-btn:hover {
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.stop-media-confirm-btn:active,
.stop-media-cancel-btn:active {
transform: scale(0.98);
}
/* ==========================================================================
Choose Media Modal
========================================================================== */
.choose-media-modal {
max-width: 480px;
}
.choose-media-content {
min-height: 200px;
}
/* Media Options View */
.media-options-view {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.media-options-subtitle {
color: var(--text-secondary);
font-size: 14px;
margin: 0;
text-align: center;
}
.media-options-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.media-option-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--space-md) var(--space-sm);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
min-height: auto;
}
.media-option-btn:hover:not(.disabled) {
border-color: var(--accent-primary);
background: var(--bg-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.media-option-btn:active:not(.disabled) {
transform: translateY(0);
}
.media-option-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.media-option-icon {
width: 40px;
height: 40px;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-primary);
}
.media-option-icon svg {
width: 20px;
height: 20px;
}
.media-option-title {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
text-align: center;
line-height: 1.2;
}
.media-option-desc {
font-size: 10px;
color: var(--text-tertiary);
text-align: center;
line-height: 1.3;
}
.media-option-badge {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--cosmic-yellow);
color: #1a1a1a;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Watch Party Unsupported Media Badge */
.media-option-badge.not-supported {
background: var(--cosmic-red, #ff4757);
color: white;
}
/* Watch Party Unsupported Media Options */
.media-option-btn.watch-party-unsupported {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
position: relative;
}
.media-option-btn.watch-party-unsupported::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.03) 10px,
rgba(0, 0, 0, 0.03) 20px
);
border-radius: var(--radius-md);
pointer-events: none;
z-index: 1;
}
.media-option-btn.watch-party-unsupported .media-option-icon {
filter: grayscale(50%);
}
.media-option-btn.watch-party-unsupported .media-option-title,
.media-option-btn.watch-party-unsupported .media-option-desc {
color: var(--text-tertiary);
}
/* Local File Section */
.local-file-section {
display: flex;
justify-content: center;
}
.local-file-btn {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
background: var(--bg-secondary);
border: 2px dashed var(--border-medium);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
width: auto;
min-width: unset;
max-width: 300px;
}
.local-file-btn:hover {
border-color: var(--accent-primary);
background: var(--bg-hover);
border-style: solid;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.local-file-btn:active {
transform: translateY(0);
}
.local-file-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(var(--accent-primary-rgb), 0.1);
border-radius: var(--radius-sm);
color: var(--accent-primary);
flex-shrink: 0;
}
.local-file-icon svg {
width: 20px;
height: 20px;
}
.local-file-btn:hover .local-file-icon {
background: rgba(var(--accent-primary-rgb), 0.2);
}
.local-file-text {
display: flex;
flex-direction: column;
text-align: left;
}
.local-file-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.local-file-desc {
font-size: 11px;
color: var(--text-secondary);
margin-top: 1px;
}
/* Mobile adjustments for local file button */
@media (max-width: 768px) {
.local-file-btn {
width: 100%;
max-width: none;
min-width: unset;
}
}
/* Watch Party Toggle */
.watch-party-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
}
.watch-party-label-group {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.watch-party-label {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.watch-party-info-btn {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--bg-tertiary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.watch-party-info-btn:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.watch-party-info-btn svg {
width: 12px;
height: 12px;
}
.watch-party-toggle {
display: flex;
align-items: center;
}
.watch-party-toggle input[type="checkbox"] {
display: none;
}
.watch-party-switch {
position: relative;
width: 44px;
height: 24px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
transition: background var(--transition-fast);
cursor: pointer;
flex-shrink: 0;
}
.watch-party-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.watch-party-toggle input[type="checkbox"]:checked + .watch-party-switch {
background: var(--accent-primary);
}
.watch-party-toggle input[type="checkbox"]:checked + .watch-party-switch::after {
transform: translateX(20px);
}
/* Watch Party Info Modal */
.watch-party-info-modal {
max-width: 480px;
}
.watch-party-info-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.watch-party-info-header {
display: flex;
align-items: center;
gap: var(--space-md);
}
.watch-party-info-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.watch-party-info-icon svg {
width: 24px;
height: 24px;
}
.watch-party-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.watch-party-info-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
.watch-party-info-text {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
}
.watch-party-info-text p {
margin: 0 0 var(--space-sm) 0;
}
.watch-party-info-text p:last-child {
margin-bottom: 0;
}
.watch-party-features {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--radius-md);
}
.watch-party-feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: 13px;
color: var(--text-secondary);
}
.watch-party-feature svg {
width: 16px;
height: 16px;
color: var(--cosmic-green);
flex-shrink: 0;
margin-top: 1px;
}
.watch-party-info-footer {
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.watch-party-info-note {
font-size: 12px;
color: var(--text-tertiary);
font-style: italic;
margin: 0;
}
/* Watch Party Badge in Room Header */
.badge-watch-party {
background: linear-gradient(135deg, var(--cosmic-purple), var(--accent-primary));
color: white;
animation: watch-party-pulse 2s ease-in-out infinite;
display: inline-flex;
align-items: center;
gap: 4px;
position: relative;
}
.badge-watch-party.hidden {
display: none;
}
@keyframes watch-party-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(139, 92, 246, 0);
}
}
/* Media Streaming Badge */
.badge-streaming {
background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
color: white;
animation: streaming-pulse 1.5s ease-in-out infinite;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 500;
}
.badge-streaming.hidden {
display: none;
}
.badge-streaming.streaming-host {
background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
}
@keyframes streaming-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
}
}
/* On mobile, make streaming badge more compact */
@media (max-width: 480px) {
.badge-streaming {
font-size: 10px;
padding: 2px 6px;
}
}
/* Sync with Host Button */
.sync-with-host-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0;
margin-left: 4px;
cursor: pointer;
color: white;
transition: all var(--transition-fast);
}
.sync-with-host-btn:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.1);
}
.sync-with-host-btn:active {
transform: scale(0.95);
}
.sync-with-host-btn.syncing {
animation: sync-spin 1s linear infinite;
}
@keyframes sync-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.sync-with-host-btn svg {
width: 12px;
height: 12px;
}
.sync-with-host-btn.hidden {
display: none;
}
/* Watch Party Enable Confirmation Modal */
.watch-party-enable-modal {
max-width: 420px;
}
.watch-party-enable-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
}
.watch-party-enable-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--cosmic-purple), var(--accent-primary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.watch-party-enable-icon svg {
width: 32px;
height: 32px;
}
.watch-party-enable-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.watch-party-enable-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.watch-party-enable-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
text-align: left;
}
.watch-party-enable-features li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.watch-party-enable-features svg {
width: 16px;
height: 16px;
color: var(--cosmic-green);
flex-shrink: 0;
}
/* Watch Party Modal Actions - Shared styles for enable/disable modals */
.watch-party-modal-actions {
display: flex;
gap: var(--space-md);
width: 100%;
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border-light);
}
.watch-party-cancel-btn,
.watch-party-confirm-btn,
.watch-party-stop-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.watch-party-cancel-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.watch-party-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.watch-party-confirm-btn {
background: var(--btn-primary-bg);
border: 1px solid transparent;
color: var(--btn-primary-text);
box-shadow: var(--btn-shadow);
}
.watch-party-confirm-btn:hover {
background: var(--btn-primary-hover);
box-shadow: var(--btn-shadow-hover);
}
.watch-party-confirm-btn svg,
.watch-party-stop-btn svg {
width: 16px;
height: 16px;
}
.watch-party-cancel-btn:active,
.watch-party-confirm-btn:active,
.watch-party-stop-btn:active {
transform: scale(0.98);
}
/* Watch Party Disable Modal */
.watch-party-disable-modal {
max-width: 420px;
}
.watch-party-disable-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
}
.watch-party-disable-icon {
width: 64px;
height: 64px;
background: rgba(239, 68, 68, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ef4444;
}
.watch-party-disable-icon svg {
width: 32px;
height: 32px;
}
.watch-party-disable-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.watch-party-disable-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.watch-party-disable-warnings {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
text-align: left;
}
.watch-party-disable-warnings li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
background: rgba(239, 68, 68, 0.08);
border-radius: var(--radius-sm);
border: 1px solid rgba(239, 68, 68, 0.15);
}
.watch-party-disable-warnings svg {
width: 16px;
height: 16px;
color: #ef4444;
flex-shrink: 0;
}
.watch-party-stop-btn {
background: #ef4444;
border: 1px solid #ef4444;
color: white;
}
.watch-party-stop-btn:hover {
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
/* Watch Party Join Confirmation Modal */
.watch-party-join-modal {
max-width: 420px;
}
.watch-party-join-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
}
.watch-party-join-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--cosmic-purple), var(--accent-primary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
animation: watchPartyJoinPulse 2s ease-in-out infinite;
}
@keyframes watchPartyJoinPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
}
50% {
box-shadow: 0 0 0 15px rgba(139, 92, 246, 0);
}
}
.watch-party-join-icon svg {
width: 32px;
height: 32px;
}
.watch-party-join-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.watch-party-join-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.watch-party-join-features {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-xs);
text-align: left;
}
.watch-party-join-features li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
color: var(--text-secondary);
padding: var(--space-sm);
background: rgba(139, 92, 246, 0.05);
border-radius: var(--radius-sm);
}
.watch-party-join-features svg {
width: 16px;
height: 16px;
color: var(--cosmic-green);
flex-shrink: 0;
}
/* URL Input View */
.media-url-view {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.media-url-view.hidden {
display: none;
}
.media-back-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: none;
border: none;
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
padding: var(--space-xs) 0;
transition: color var(--transition-fast);
align-self: flex-start;
}
.media-back-btn:hover {
color: var(--accent-primary);
}
.media-back-btn svg {
width: 18px;
height: 18px;
}
.media-url-input-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.media-url-input-group label {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.media-url-input-group input {
width: 100%;
padding: var(--space-md);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 14px;
transition: border-color var(--transition-fast);
}
.media-url-input-group input:focus {
outline: none;
border-color: var(--accent-primary);
}
.media-url-input-group input::placeholder {
color: var(--text-tertiary);
}
.media-url-hint {
font-size: 12px;
color: var(--text-tertiary);
margin: 0;
}
.media-url-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
}
.media-cancel-btn {
padding: var(--space-sm) var(--space-lg);
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.media-cancel-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.media-play-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--btn-primary-bg);
border: none;
border-radius: var(--radius-md);
color: var(--btn-primary-text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.media-play-btn:hover {
background: var(--btn-primary-hover);
box-shadow: var(--btn-shadow);
}
.media-play-btn svg {
width: 16px;
height: 16px;
}
/* ==========================================================================
YouTube Browser View
========================================================================== */
/* YouTube icon special color */
.media-option-icon.youtube-icon {
background: rgba(255, 0, 0, 0.1);
color: #ff0000;
}
.media-option-btn:hover .media-option-icon.youtube-icon {
background: rgba(255, 0, 0, 0.2);
}
.youtube-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.youtube-browser-view.hidden {
display: none;
}
/* When YouTube browser is active, expand modal */
.choose-media-modal.youtube-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.youtube-search-container {
width: 100%;
}
.youtube-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.youtube-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.youtube-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.youtube-search-input-wrapper input:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.youtube-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.youtube-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.youtube-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.youtube-search-clear.hidden {
display: none;
}
.youtube-search-clear svg {
width: 16px;
height: 16px;
}
/* Categories Wrapper with scroll buttons */
.youtube-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.youtube-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.youtube-categories-scroll-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
border-color: var(--accent-primary);
}
.youtube-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.youtube-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
/* Categories */
.youtube-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.youtube-categories::-webkit-scrollbar {
display: none;
}
.youtube-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.youtube-category-btn:hover {
background: var(--bg-hover);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.youtube-category-btn.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.youtube-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Videos Container */
.youtube-videos-container {
position: relative;
min-height: 300px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.youtube-videos-container::-webkit-scrollbar {
width: 6px;
}
.youtube-videos-container::-webkit-scrollbar-track {
background: transparent;
}
.youtube-videos-container::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
/* Loading State */
.youtube-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
color: var(--text-secondary);
font-size: 14px;
background: var(--bg-primary);
}
.youtube-loading.hidden {
display: none;
}
/* YouTube Loading Dots Animation */
.youtube-loading-dots {
display: flex;
gap: 8px;
align-items: center;
}
.youtube-loading-dots span {
width: 12px;
height: 12px;
background: var(--accent-primary);
border-radius: 50%;
animation: youtube-loading-bounce 1.4s ease-in-out infinite both;
}
.youtube-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.youtube-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.youtube-loading-dots span:nth-child(3) {
animation-delay: 0s;
}
@keyframes youtube-loading-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* No Results */
.youtube-no-results {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
color: var(--text-tertiary);
text-align: center;
}
.youtube-no-results.hidden {
display: none;
}
.youtube-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.youtube-no-results span {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.youtube-no-results p {
font-size: 13px;
margin: 0;
}
/* Video Grid */
.youtube-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Video Card */
.youtube-video-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
cursor: pointer;
}
.youtube-video-card:hover {
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.youtube-video-card:active {
transform: translateY(0);
}
/* Video Thumbnail */
.youtube-video-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
overflow: hidden;
}
.youtube-video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.youtube-video-card:hover .youtube-video-thumbnail img {
transform: scale(1.05);
}
/* Play overlay */
.youtube-video-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-fast);
}
.youtube-video-card:hover .youtube-video-play-overlay {
opacity: 1;
}
.youtube-video-play-overlay svg {
width: 56px;
height: 56px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
/* Duration badge */
.youtube-video-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Info button */
.youtube-video-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
z-index: 2;
}
.youtube-video-card:hover .youtube-video-info-btn {
opacity: 1;
}
.youtube-video-info-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.youtube-video-info-btn svg {
width: 16px;
height: 16px;
}
/* Video Details */
.youtube-video-details {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.youtube-video-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 var(--space-xs);
}
.youtube-video-channel {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.youtube-video-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 12px;
color: var(--text-tertiary);
}
.youtube-video-meta span {
display: flex;
align-items: center;
gap: 2px;
}
/* ==========================================================================
YouTube Video Info Modal
========================================================================== */
.youtube-video-info-modal {
max-width: 600px;
width: 90vw;
}
.youtube-video-info-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.youtube-info-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
}
.youtube-info-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.youtube-info-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 13px;
font-weight: 500;
padding: 3px 8px;
border-radius: var(--radius-sm);
}
.youtube-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.youtube-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.youtube-info-channel {
font-size: 14px;
color: var(--accent-primary);
font-weight: 500;
}
.youtube-info-stats {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 13px;
color: var(--text-tertiary);
}
.youtube-info-stats span::before {
content: '•';
margin-right: var(--space-md);
opacity: 0.5;
}
.youtube-info-stats span:first-child::before {
display: none;
}
.youtube-info-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: var(--space-sm) 0 0;
max-height: 120px;
overflow-y: auto;
white-space: pre-wrap;
}
.youtube-info-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.youtube-info-play-btn {
padding: var(--space-md) var(--space-xl);
}
/* ==========================================================================
YouTube Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.youtube-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.youtube-videos-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.youtube-video-title {
font-size: 13px;
}
.youtube-video-channel,
.youtube-video-meta {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.youtube-categories-scroll-btn {
display: none !important;
}
.youtube-categories {
gap: var(--space-xs);
}
.youtube-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.youtube-category-btn svg {
width: 14px;
height: 14px;
}
.youtube-videos-container {
max-height: 40vh;
}
.youtube-video-info-modal {
max-width: 100%;
}
.youtube-info-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.youtube-videos-grid {
grid-template-columns: 1fr;
}
.youtube-video-card {
display: flex;
flex-direction: row;
}
.youtube-video-thumbnail {
width: 140px;
flex-shrink: 0;
aspect-ratio: 16 / 9;
}
.youtube-video-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-sm);
}
.youtube-video-play-overlay svg {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Twitch Browser View
========================================================================== */
/* Twitch icon special color */
.media-option-icon.twitch-icon {
background: rgba(145, 70, 255, 0.1);
color: #9146ff;
}
.media-option-btn:hover .media-option-icon.twitch-icon {
background: rgba(145, 70, 255, 0.2);
}
.twitch-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.twitch-browser-view.hidden {
display: none;
}
/* When Twitch browser is active, expand modal */
.choose-media-modal.twitch-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.twitch-search-container {
width: 100%;
}
.twitch-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.twitch-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.twitch-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.twitch-search-input-wrapper input:focus {
outline: none;
border-color: #9146ff;
box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.1);
}
.twitch-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.twitch-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.twitch-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.twitch-search-clear.hidden {
display: none;
}
.twitch-search-clear svg {
width: 16px;
height: 16px;
}
/* Categories Wrapper with scroll buttons */
.twitch-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.twitch-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.twitch-categories-scroll-btn:hover {
background: var(--bg-hover);
color: #9146ff;
border-color: #9146ff;
}
.twitch-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.twitch-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
/* Categories */
.twitch-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.twitch-categories::-webkit-scrollbar {
display: none;
}
.twitch-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.twitch-category-btn:hover {
background: var(--bg-hover);
border-color: #9146ff;
color: #9146ff;
}
.twitch-category-btn.active {
background: #9146ff;
border-color: #9146ff;
color: white;
}
.twitch-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Streams Container */
.twitch-streams-container {
position: relative;
min-height: 300px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.twitch-streams-container::-webkit-scrollbar {
width: 6px;
}
.twitch-streams-container::-webkit-scrollbar-track {
background: transparent;
}
.twitch-streams-container::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
/* Loading State */
.twitch-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
color: var(--text-secondary);
font-size: 14px;
background: var(--bg-primary);
}
.twitch-loading.hidden {
display: none;
}
/* Twitch Loading Dots Animation */
.twitch-loading-dots {
display: flex;
gap: 8px;
align-items: center;
}
.twitch-loading-dots span {
width: 12px;
height: 12px;
background: #9146ff;
border-radius: 50%;
animation: twitch-loading-bounce 1.4s ease-in-out infinite both;
}
.twitch-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.twitch-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.twitch-loading-dots span:nth-child(3) {
animation-delay: 0s;
}
@keyframes twitch-loading-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* No Results */
.twitch-no-results {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
color: var(--text-tertiary);
text-align: center;
}
.twitch-no-results.hidden {
display: none;
}
.twitch-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.twitch-no-results span {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.twitch-no-results p {
font-size: 13px;
margin: 0;
}
/* Streams Grid */
.twitch-streams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Stream Card */
.twitch-stream-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
cursor: pointer;
}
.twitch-stream-card:hover {
border-color: #9146ff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.twitch-stream-card:active {
transform: translateY(0);
}
/* Stream Thumbnail */
.twitch-stream-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
overflow: hidden;
}
.twitch-stream-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.twitch-stream-card:hover .twitch-stream-thumbnail img {
transform: scale(1.05);
}
/* Play overlay */
.twitch-stream-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-fast);
}
.twitch-stream-card:hover .twitch-stream-play-overlay {
opacity: 1;
}
.twitch-stream-play-overlay svg {
width: 56px;
height: 56px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
/* Live badge */
.twitch-stream-live-badge {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
display: flex;
align-items: center;
gap: 4px;
background: #eb0400;
color: white;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.twitch-stream-live-badge .live-dot {
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Viewer count badge */
.twitch-stream-viewers {
position: absolute;
bottom: var(--space-sm);
left: var(--space-sm);
display: flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.twitch-stream-viewers svg {
width: 12px;
height: 12px;
}
/* Info button */
.twitch-stream-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
z-index: 2;
}
.twitch-stream-card:hover .twitch-stream-info-btn {
opacity: 1;
}
.twitch-stream-info-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.twitch-stream-info-btn svg {
width: 16px;
height: 16px;
}
/* Stream Details */
.twitch-stream-details {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.twitch-stream-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 var(--space-xs);
}
.twitch-stream-streamer {
font-size: 13px;
color: #9146ff;
font-weight: 500;
margin-bottom: var(--space-xs);
}
.twitch-stream-game {
font-size: 12px;
color: var(--text-secondary);
}
/* ==========================================================================
Twitch Stream Info Modal
========================================================================== */
.twitch-stream-info-modal {
max-width: 600px;
width: 90vw;
}
.twitch-stream-info-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.twitch-info-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
}
.twitch-info-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.twitch-info-live-badge {
position: absolute;
top: var(--space-md);
left: var(--space-md);
display: flex;
align-items: center;
gap: 6px;
background: #eb0400;
color: white;
font-size: 13px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.twitch-info-live-badge .live-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
.twitch-info-viewers {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 14px;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.twitch-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.twitch-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.twitch-info-streamer {
font-size: 16px;
color: #9146ff;
font-weight: 600;
}
.twitch-info-game {
font-size: 14px;
color: var(--text-secondary);
}
.twitch-info-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
.twitch-info-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 12px;
color: var(--text-secondary);
}
.twitch-info-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.twitch-info-watch-btn {
padding: var(--space-md) var(--space-xl);
background: #9146ff;
}
.twitch-info-watch-btn:hover {
background: #772ce8;
}
/* ==========================================================================
Twitch Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.twitch-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.twitch-streams-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.twitch-stream-title {
font-size: 13px;
}
.twitch-stream-streamer,
.twitch-stream-game {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.twitch-categories-scroll-btn {
display: none !important;
}
.twitch-categories {
gap: var(--space-xs);
}
.twitch-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.twitch-category-btn svg {
width: 14px;
height: 14px;
}
.twitch-streams-container {
max-height: 40vh;
}
.twitch-stream-info-modal {
max-width: 100%;
}
.twitch-info-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.twitch-streams-grid {
grid-template-columns: 1fr;
}
.twitch-stream-card {
display: flex;
flex-direction: row;
}
.twitch-stream-thumbnail {
width: 140px;
flex-shrink: 0;
aspect-ratio: 16 / 9;
}
.twitch-stream-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-sm);
}
.twitch-stream-play-overlay svg {
width: 36px;
height: 36px;
}
.twitch-stream-live-badge {
font-size: 9px;
padding: 2px 5px;
}
.twitch-stream-live-badge .live-dot {
width: 4px;
height: 4px;
}
}
/* ==========================================================================
Kick Browser View
========================================================================== */
/* Kick icon special color - Kick green */
.media-option-icon.kick-icon {
background: rgba(83, 252, 24, 0.1);
color: #53fc18;
}
.media-option-btn:hover .media-option-icon.kick-icon {
background: rgba(83, 252, 24, 0.2);
}
.kick-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.kick-browser-view.hidden {
display: none;
}
/* When Kick browser is active, expand modal */
.choose-media-modal.kick-browser-active {
max-width: 900px;
width: 95vw;
}
.kick-search-container {
width: 100%;
}
.kick-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.kick-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.kick-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.kick-search-input-wrapper input:focus {
outline: none;
border-color: #53fc18;
box-shadow: 0 0 0 3px rgba(83, 252, 24, 0.1);
}
.kick-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.kick-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.kick-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.kick-search-clear.hidden {
display: none;
}
.kick-search-clear svg {
width: 16px;
height: 16px;
}
.kick-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.kick-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.kick-categories-scroll-btn:hover {
background: var(--bg-hover);
color: #53fc18;
border-color: #53fc18;
}
.kick-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.kick-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
.kick-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.kick-categories::-webkit-scrollbar {
display: none;
}
.kick-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.kick-category-btn:hover {
background: var(--bg-hover);
border-color: #53fc18;
color: #53fc18;
}
.kick-category-btn.active {
background: #53fc18;
border-color: #53fc18;
color: #000000;
}
.kick-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.kick-streams-container {
position: relative;
min-height: 300px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-xs);
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.kick-streams-container::-webkit-scrollbar {
width: 6px;
}
.kick-streams-container::-webkit-scrollbar-track {
background: transparent;
}
.kick-streams-container::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
.kick-streams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
.kick-stream-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
cursor: pointer;
}
.kick-stream-card:active {
transform: translateY(0);
}
.kick-stream-card:hover {
border-color: #53fc18;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.kick-stream-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
overflow: hidden;
}
.kick-stream-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.kick-stream-card:hover .kick-stream-thumbnail img {
transform: scale(1.05);
}
.kick-stream-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.kick-stream-card:hover .kick-stream-play-overlay {
opacity: 1;
}
.kick-stream-play-overlay svg {
width: 48px;
height: 48px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.kick-stream-live-badge {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
display: flex;
align-items: center;
gap: 4px;
background: #eb0400;
color: white;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: var(--radius-xs);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.kick-stream-live-badge .live-dot {
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
.kick-stream-viewers {
position: absolute;
bottom: var(--space-sm);
left: var(--space-sm);
display: flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.kick-stream-viewers svg {
width: 12px;
height: 12px;
}
/* Info button */
.kick-stream-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
z-index: 2;
}
.kick-stream-card:hover .kick-stream-info-btn {
opacity: 1;
}
.kick-stream-info-btn:hover {
background: rgba(83, 252, 24, 0.4);
transform: scale(1.1);
}
.kick-stream-info-btn svg {
width: 16px;
height: 16px;
}
.kick-stream-details {
padding: var(--space-sm);
}
.kick-stream-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.kick-stream-streamer {
font-size: 13px;
color: #53fc18;
font-weight: 500;
margin-bottom: 2px;
}
.kick-stream-game {
font-size: 12px;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kick-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-md);
color: var(--text-secondary);
}
.kick-loading-dots {
display: flex;
gap: var(--space-xs);
}
.kick-loading-dots span {
width: 8px;
height: 8px;
background: #53fc18;
border-radius: 50%;
animation: kick-loading-bounce 1.4s ease-in-out infinite both;
}
.kick-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.kick-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes kick-loading-bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
/* Kick stream loading spinner for spotlight */
.kick-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: #53fc18;
border-radius: 50%;
animation: kick-spinner 1s linear infinite;
}
@keyframes kick-spinner {
to {
transform: rotate(360deg);
}
}
.kick-loading-hint {
font-size: 12px;
opacity: 0.6;
margin-top: 8px;
}
.kick-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-sm);
color: var(--text-secondary);
text-align: center;
}
.kick-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.kick-no-results span {
font-size: 16px;
font-weight: 500;
}
.kick-no-results p {
font-size: 14px;
margin: 0;
}
/* ==========================================================================
Kick Stream Info Modal
========================================================================== */
.kick-stream-info-modal {
max-width: 600px;
width: 90vw;
}
.kick-stream-info-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.kick-info-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
}
.kick-info-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kick-info-live-badge {
position: absolute;
top: var(--space-md);
left: var(--space-md);
display: flex;
align-items: center;
gap: 6px;
background: #eb0400;
color: white;
font-size: 13px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kick-info-live-badge .live-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
.kick-info-viewers {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 14px;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.kick-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.kick-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.kick-info-streamer {
font-size: 16px;
color: #53fc18;
font-weight: 600;
}
.kick-info-game {
font-size: 14px;
color: var(--text-secondary);
}
.kick-info-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
.kick-info-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 12px;
color: var(--text-secondary);
}
.kick-info-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.kick-info-watch-btn {
padding: var(--space-md) var(--space-xl);
background: #53fc18;
color: #000000;
}
.kick-info-watch-btn:hover {
background: #45d414;
}
/* ==========================================================================
Kick Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.kick-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.kick-streams-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.kick-stream-title {
font-size: 13px;
}
.kick-stream-streamer,
.kick-stream-game {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.kick-categories-scroll-btn {
display: none !important;
}
.kick-categories {
gap: var(--space-xs);
}
.kick-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.kick-category-btn svg {
width: 14px;
height: 14px;
}
.kick-streams-container {
max-height: 40vh;
}
.kick-stream-info-modal {
max-width: 100%;
}
.kick-info-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.kick-streams-grid {
grid-template-columns: 1fr;
}
.kick-stream-card {
display: flex;
flex-direction: row;
}
.kick-stream-thumbnail {
width: 140px;
flex-shrink: 0;
aspect-ratio: 16 / 9;
}
.kick-stream-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-sm);
}
.kick-stream-play-overlay svg {
width: 36px;
height: 36px;
}
.kick-stream-live-badge {
font-size: 9px;
padding: 2px 5px;
}
.kick-stream-live-badge .live-dot {
width: 4px;
height: 4px;
}
}
/* ==========================================================================
SoundCloud Browser View
========================================================================== */
/* SoundCloud icon special color - SoundCloud orange */
.media-option-icon.soundcloud-icon {
background: rgba(255, 85, 0, 0.1);
color: #ff5500;
}
.media-option-btn:hover .media-option-icon.soundcloud-icon {
background: rgba(255, 85, 0, 0.2);
}
/* Mixcloud icon color */
.media-option-icon.mixcloud-icon {
background: rgba(82, 148, 226, 0.1);
color: #5294e2;
}
/* Vimeo icon color */
.media-option-icon.vimeo-icon {
background: rgba(26, 183, 234, 0.1);
color: #1ab7ea;
}
/* Internet Archive icon color */
.media-option-icon.archive-icon {
background: rgba(102, 102, 102, 0.1);
color: #888888;
}
.soundcloud-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.soundcloud-browser-view.hidden {
display: none;
}
/* When SoundCloud browser is active, expand modal */
.choose-media-modal.soundcloud-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.soundcloud-search-container {
width: 100%;
}
.soundcloud-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.soundcloud-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.soundcloud-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.soundcloud-search-input-wrapper input:focus {
outline: none;
border-color: #ff5500;
box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.1);
}
.soundcloud-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.soundcloud-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.soundcloud-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.soundcloud-search-clear.hidden {
display: none;
}
.soundcloud-search-clear svg {
width: 16px;
height: 16px;
}
/* Categories Wrapper with scroll buttons */
.soundcloud-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.soundcloud-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.soundcloud-categories-scroll-btn:hover {
background: var(--bg-hover);
color: #ff5500;
border-color: #ff5500;
}
.soundcloud-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.soundcloud-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
/* Categories */
.soundcloud-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.soundcloud-categories::-webkit-scrollbar {
display: none;
}
.soundcloud-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.soundcloud-category-btn:hover {
background: var(--bg-hover);
border-color: #ff5500;
color: #ff5500;
}
.soundcloud-category-btn.active {
background: linear-gradient(135deg, #ff5500, #ff7700);
border-color: #ff5500;
color: white;
}
.soundcloud-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Tracks Grid */
.soundcloud-tracks-container {
max-height: 50vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--bg-tertiary) transparent;
}
.soundcloud-tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Track Card */
.soundcloud-track-card {
background: var(--bg-secondary);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: all var(--transition-fast);
}
.soundcloud-track-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.soundcloud-track-artwork {
position: relative;
width: 100%;
aspect-ratio: 1;
background: var(--bg-tertiary);
overflow: hidden;
}
.soundcloud-track-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.soundcloud-track-card:hover .soundcloud-track-artwork img {
transform: scale(1.05);
}
.soundcloud-track-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-fast);
}
.soundcloud-track-card:hover .soundcloud-track-play-overlay {
opacity: 1;
}
.soundcloud-track-play-overlay svg {
width: 48px;
height: 48px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.soundcloud-track-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Info button */
.soundcloud-track-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
z-index: 2;
}
.soundcloud-track-card:hover .soundcloud-track-info-btn {
opacity: 1;
}
.soundcloud-track-info-btn:hover {
background: rgba(255, 85, 0, 0.4);
transform: scale(1.1);
}
.soundcloud-track-info-btn svg {
width: 16px;
height: 16px;
}
.soundcloud-track-details {
padding: var(--space-sm);
}
.soundcloud-track-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.soundcloud-track-artist {
font-size: 13px;
color: #ff5500;
font-weight: 500;
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.soundcloud-track-meta {
display: flex;
gap: var(--space-sm);
font-size: 12px;
color: var(--text-tertiary);
}
.soundcloud-track-meta span {
display: flex;
align-items: center;
gap: 3px;
}
.soundcloud-track-meta svg {
width: 12px;
height: 12px;
}
/* Loading state */
.soundcloud-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-md);
color: var(--text-secondary);
}
.soundcloud-loading-dots {
display: flex;
gap: var(--space-xs);
}
.soundcloud-loading-dots span {
width: 8px;
height: 8px;
background: #ff5500;
border-radius: 50%;
animation: soundcloud-loading-bounce 1.4s ease-in-out infinite both;
}
.soundcloud-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.soundcloud-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes soundcloud-loading-bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.soundcloud-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-sm);
color: var(--text-secondary);
text-align: center;
}
.soundcloud-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.soundcloud-no-results span {
font-size: 16px;
font-weight: 500;
}
.soundcloud-no-results p {
font-size: 14px;
margin: 0;
}
/* Error state */
.soundcloud-error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-md);
color: var(--text-secondary);
text-align: center;
grid-column: 1 / -1;
}
.soundcloud-error-icon {
width: 48px;
height: 48px;
color: #ff5500;
opacity: 0.7;
}
.soundcloud-error-message {
font-size: 16px;
margin: 0;
color: var(--text-secondary);
}
.soundcloud-retry-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: #ff5500;
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.soundcloud-retry-btn:hover {
background: #ff7700;
transform: translateY(-1px);
}
.soundcloud-retry-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
SoundCloud Track Info Modal
========================================================================== */
.soundcloud-track-info-modal {
max-width: 600px;
width: 90vw;
}
.soundcloud-track-info-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.soundcloud-info-artwork {
position: relative;
width: 100%;
aspect-ratio: 1;
max-height: 300px;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
margin: 0 auto;
}
.soundcloud-info-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
}
.soundcloud-info-duration {
position: absolute;
bottom: var(--space-md);
right: var(--space-md);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 14px;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.soundcloud-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.soundcloud-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.soundcloud-info-artist {
font-size: 16px;
color: #ff5500;
font-weight: 600;
}
.soundcloud-info-stats {
display: flex;
gap: var(--space-md);
font-size: 14px;
color: var(--text-secondary);
}
.soundcloud-info-genre {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 13px;
color: var(--text-secondary);
align-self: flex-start;
}
.soundcloud-info-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
max-height: 100px;
overflow-y: auto;
}
.soundcloud-info-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.soundcloud-info-play-btn {
padding: var(--space-md) var(--space-xl);
background: linear-gradient(135deg, #ff5500, #ff7700);
color: white;
}
.soundcloud-info-play-btn:hover {
background: linear-gradient(135deg, #ff4400, #ff6600);
}
/* ==========================================================================
SoundCloud Mobile Play Overlay (for mobile autoplay restrictions)
========================================================================== */
.soundcloud-mobile-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
z-index: 15;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}
.soundcloud-mobile-play-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.soundcloud-mobile-play-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-xl);
background: linear-gradient(135deg, #ff5500, #ff7700);
color: white;
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 4px 20px rgba(255, 85, 0, 0.4);
}
.soundcloud-mobile-play-btn:hover,
.soundcloud-mobile-play-btn:active {
transform: scale(1.05);
background: linear-gradient(135deg, #ff6600, #ff8800);
box-shadow: 0 6px 24px rgba(255, 85, 0, 0.5);
}
.soundcloud-mobile-play-btn svg {
width: 48px;
height: 48px;
}
.soundcloud-mobile-play-btn span {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ==========================================================================
SoundCloud Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.soundcloud-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.soundcloud-tracks-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-sm);
}
.soundcloud-track-title {
font-size: 13px;
}
.soundcloud-track-artist {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.soundcloud-categories-scroll-btn {
display: none !important;
}
.soundcloud-categories {
gap: var(--space-xs);
}
.soundcloud-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.soundcloud-category-btn svg {
width: 14px;
height: 14px;
}
.soundcloud-tracks-container {
max-height: 40vh;
}
.soundcloud-track-info-modal {
max-width: 100%;
}
.soundcloud-info-title {
font-size: 16px;
}
.soundcloud-info-artwork {
max-height: 200px;
}
}
@media (max-width: 480px) {
.soundcloud-tracks-grid {
grid-template-columns: repeat(2, 1fr);
}
.soundcloud-track-play-overlay svg {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Mixcloud Player Overlay
========================================================================== */
.mixcloud-mobile-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
z-index: 15;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}
.mixcloud-mobile-play-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.mixcloud-mobile-play-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-xl);
background: linear-gradient(135deg, #5000ff, #7733ff);
color: white;
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 4px 20px rgba(80, 0, 255, 0.4);
}
.mixcloud-mobile-play-btn:hover,
.mixcloud-mobile-play-btn:active {
transform: scale(1.05);
background: linear-gradient(135deg, #6600ff, #8844ff);
box-shadow: 0 6px 24px rgba(80, 0, 255, 0.5);
}
.mixcloud-mobile-play-btn svg {
width: 48px;
height: 48px;
}
.mixcloud-mobile-play-btn span {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Mixcloud controls in spotlight */
.mixcloud-controls {
pointer-events: none;
}
.mixcloud-controls .spotlight-controls-bar {
pointer-events: auto;
}
.mixcloud-controls .mixcloud-spacer {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mixcloud-controls .spotlight-stop-btn-inline {
margin-right: auto;
}
.spotlight-external-link {
text-decoration: none;
color: inherit;
}
.spotlight-external-link:hover {
color: var(--primary-500);
}
/* Vimeo Player Controls */
.vimeo-controls .spotlight-controls-bar {
pointer-events: auto;
}
.vimeo-controls .vimeo-spacer {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vimeo-controls .spotlight-stop-btn-inline {
margin-right: auto;
}
.vimeo-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: #1ab7ea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* ==========================================================================
Mixcloud Browser
========================================================================== */
.mixcloud-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mixcloud-browser-view.hidden {
display: none;
}
/* When Mixcloud browser is active, expand modal */
.choose-media-modal.mixcloud-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.mixcloud-search-container {
width: 100%;
}
.mixcloud-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.mixcloud-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.mixcloud-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.mixcloud-search-input-wrapper input:focus {
outline: none;
border-color: #5294e2;
box-shadow: 0 0 0 3px rgba(82, 148, 226, 0.1);
}
.mixcloud-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.mixcloud-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.mixcloud-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.mixcloud-search-clear.hidden {
display: none;
}
.mixcloud-search-clear svg {
width: 16px;
height: 16px;
}
/* Categories Wrapper with scroll buttons */
.mixcloud-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.mixcloud-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.mixcloud-categories-scroll-btn:hover {
background: var(--bg-hover);
color: #5294e2;
border-color: #5294e2;
}
.mixcloud-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.mixcloud-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
/* Categories */
.mixcloud-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.mixcloud-categories::-webkit-scrollbar {
display: none;
}
.mixcloud-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.mixcloud-category-btn:hover {
background: var(--bg-hover);
border-color: #5294e2;
color: #5294e2;
}
.mixcloud-category-btn.active {
background: linear-gradient(135deg, #5294e2, #6ba3e8);
border-color: #5294e2;
color: white;
}
.mixcloud-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Shows Grid */
.mixcloud-shows-container {
max-height: 50vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--bg-tertiary) transparent;
}
.mixcloud-shows-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Show Card */
.mixcloud-show-card {
background: var(--bg-secondary);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: all var(--transition-fast);
}
.mixcloud-show-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.mixcloud-show-artwork {
position: relative;
width: 100%;
aspect-ratio: 1;
background: var(--bg-tertiary);
overflow: hidden;
}
.mixcloud-show-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.mixcloud-show-card:hover .mixcloud-show-artwork img {
transform: scale(1.05);
}
.mixcloud-show-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-fast);
}
.mixcloud-show-card:hover .mixcloud-show-play-overlay {
opacity: 1;
}
.mixcloud-show-play-overlay svg {
width: 48px;
height: 48px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.mixcloud-show-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Info button */
.mixcloud-show-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
z-index: 2;
}
.mixcloud-show-card:hover .mixcloud-show-info-btn {
opacity: 1;
}
.mixcloud-show-info-btn:hover {
background: rgba(82, 148, 226, 0.6);
transform: scale(1.1);
}
.mixcloud-show-info-btn svg {
width: 16px;
height: 16px;
}
.mixcloud-show-details {
padding: var(--space-sm);
}
.mixcloud-show-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.mixcloud-show-artist {
font-size: 13px;
color: #5294e2;
font-weight: 500;
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mixcloud-show-meta {
display: flex;
gap: var(--space-sm);
font-size: 12px;
color: var(--text-tertiary);
}
.mixcloud-show-meta span {
display: flex;
align-items: center;
gap: 3px;
}
.mixcloud-show-meta svg {
width: 12px;
height: 12px;
}
/* Loading state */
.mixcloud-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-md);
color: var(--text-secondary);
}
.mixcloud-loading-dots {
display: flex;
gap: var(--space-xs);
}
.mixcloud-loading-dots span {
width: 8px;
height: 8px;
background: #5294e2;
border-radius: 50%;
animation: mixcloud-loading-bounce 1.4s ease-in-out infinite both;
}
.mixcloud-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.mixcloud-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes mixcloud-loading-bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.mixcloud-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-sm);
color: var(--text-secondary);
text-align: center;
}
.mixcloud-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.mixcloud-no-results span {
font-size: 16px;
font-weight: 500;
}
.mixcloud-no-results p {
font-size: 14px;
margin: 0;
}
/* Error state */
.mixcloud-error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
gap: var(--space-md);
color: var(--text-secondary);
text-align: center;
grid-column: 1 / -1;
}
.mixcloud-error-icon {
width: 48px;
height: 48px;
color: #5294e2;
opacity: 0.7;
}
.mixcloud-error-message {
font-size: 16px;
margin: 0;
color: var(--text-secondary);
}
.mixcloud-retry-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: #5294e2;
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.mixcloud-retry-btn:hover {
background: #6ba3e8;
transform: translateY(-1px);
}
.mixcloud-retry-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
Mixcloud Show Info Modal
========================================================================== */
.mixcloud-show-info-modal {
max-width: 600px;
width: 90vw;
}
.mixcloud-show-info-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.mixcloud-info-artwork {
position: relative;
width: 100%;
aspect-ratio: 1;
max-height: 300px;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
margin: 0 auto;
}
.mixcloud-info-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mixcloud-info-duration {
position: absolute;
bottom: var(--space-md);
right: var(--space-md);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 14px;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.mixcloud-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.mixcloud-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.mixcloud-info-artist {
font-size: 16px;
color: #5294e2;
font-weight: 600;
}
.mixcloud-info-stats {
display: flex;
gap: var(--space-md);
font-size: 14px;
color: var(--text-secondary);
}
.mixcloud-info-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.mixcloud-info-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 12px;
color: var(--text-secondary);
}
.mixcloud-info-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
max-height: 100px;
overflow-y: auto;
}
.mixcloud-info-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
.mixcloud-info-play-btn {
padding: var(--space-md) var(--space-xl);
background: linear-gradient(135deg, #5294e2, #6ba3e8);
color: white;
}
.mixcloud-info-play-btn:hover {
background: linear-gradient(135deg, #4284d2, #5a93d8);
}
/* ==========================================================================
Mixcloud Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.mixcloud-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.mixcloud-shows-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-sm);
}
.mixcloud-show-title {
font-size: 13px;
}
.mixcloud-show-artist {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.mixcloud-categories-scroll-btn {
display: none !important;
}
.mixcloud-categories {
gap: var(--space-xs);
}
.mixcloud-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.mixcloud-category-btn svg {
width: 14px;
height: 14px;
}
.mixcloud-shows-container {
max-height: 40vh;
}
.mixcloud-show-info-modal {
max-width: 100%;
}
.mixcloud-info-title {
font-size: 16px;
}
.mixcloud-info-artwork {
max-height: 200px;
}
}
@media (max-width: 480px) {
.mixcloud-shows-grid {
grid-template-columns: repeat(2, 1fr);
}
.mixcloud-show-play-overlay svg {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Vimeo Browser View
========================================================================== */
.vimeo-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.vimeo-browser-view.hidden {
display: none;
}
/* When Vimeo browser is active, expand modal */
.choose-media-modal.vimeo-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.vimeo-search-container {
width: 100%;
}
.vimeo-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.vimeo-search-icon {
position: absolute;
left: var(--space-md);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.vimeo-search-input-wrapper input {
width: 100%;
padding: var(--space-md);
padding-left: calc(var(--space-md) * 2 + 20px);
padding-right: calc(var(--space-md) + 32px);
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: 14px;
transition: all var(--transition-fast);
}
.vimeo-search-input-wrapper input:focus {
outline: none;
border-color: #1ab7ea;
box-shadow: 0 0 0 3px rgba(26, 183, 234, 0.1);
}
.vimeo-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.vimeo-search-clear {
position: absolute;
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.vimeo-search-clear:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.vimeo-search-clear.hidden {
display: none;
}
.vimeo-search-clear svg {
width: 16px;
height: 16px;
}
/* Categories Wrapper with scroll buttons */
.vimeo-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.vimeo-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.vimeo-categories-scroll-btn:hover {
background: var(--bg-hover);
color: #1ab7ea;
border-color: #1ab7ea;
}
.vimeo-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.vimeo-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
/* Categories */
.vimeo-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.vimeo-categories::-webkit-scrollbar {
display: none;
}
.vimeo-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.vimeo-category-btn:hover {
background: var(--bg-hover);
border-color: #1ab7ea;
color: #1ab7ea;
}
.vimeo-category-btn.active {
background: #1ab7ea;
border-color: #1ab7ea;
color: white;
}
.vimeo-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Videos Container */
.vimeo-videos-container {
position: relative;
min-height: 300px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.vimeo-videos-container::-webkit-scrollbar {
width: 6px;
}
.vimeo-videos-container::-webkit-scrollbar-track {
background: transparent;
}
.vimeo-videos-container::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-full);
}
/* Loading State */
.vimeo-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
color: var(--text-secondary);
font-size: 14px;
background: var(--bg-primary);
}
.vimeo-loading.hidden {
display: none;
}
/* Vimeo Loading Dots Animation */
.vimeo-loading-dots {
display: flex;
gap: 8px;
align-items: center;
}
.vimeo-loading-dots span {
width: 12px;
height: 12px;
background: #1ab7ea;
border-radius: 50%;
animation: vimeo-loading-bounce 1.4s ease-in-out infinite both;
}
.vimeo-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.vimeo-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.vimeo-loading-dots span:nth-child(3) {
animation-delay: 0s;
}
@keyframes vimeo-loading-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* No Results */
.vimeo-no-results {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
color: var(--text-tertiary);
text-align: center;
}
.vimeo-no-results.hidden {
display: none;
}
.vimeo-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.vimeo-no-results span {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.vimeo-no-results p {
font-size: 13px;
margin: 0;
}
/* Video Grid */
.vimeo-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Video Card */
.vimeo-video-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
cursor: pointer;
}
.vimeo-video-card:hover {
border-color: #1ab7ea;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.vimeo-video-card:active {
transform: translateY(0);
}
/* Video Thumbnail */
.vimeo-video-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
overflow: hidden;
}
.vimeo-video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.vimeo-video-card:hover .vimeo-video-thumbnail img {
transform: scale(1.05);
}
/* Play overlay */
.vimeo-video-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-fast);
}
.vimeo-video-card:hover .vimeo-video-play-overlay {
opacity: 1;
}
.vimeo-video-play-overlay svg {
width: 56px;
height: 56px;
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
/* Duration badge */
.vimeo-video-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Info button on thumbnail */
.vimeo-video-info-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
}
.vimeo-video-card:hover .vimeo-video-info-btn {
opacity: 1;
}
.vimeo-video-info-btn:hover {
background: #1ab7ea;
transform: scale(1.1);
}
.vimeo-video-info-btn svg {
width: 18px;
height: 18px;
}
/* Video Details */
.vimeo-video-details {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.vimeo-video-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.vimeo-video-channel {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vimeo-video-channel:hover {
color: #1ab7ea;
}
.vimeo-video-meta {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 12px;
color: var(--text-tertiary);
}
.vimeo-video-meta span:not(:last-child)::after {
content: '•';
margin-left: var(--space-xs);
}
/* ==========================================================================
Vimeo Video Info Modal
========================================================================== */
.vimeo-video-info-modal {
max-width: 500px;
width: 95vw;
}
.vimeo-video-info-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.vimeo-info-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-tertiary);
}
.vimeo-info-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vimeo-info-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.vimeo-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.vimeo-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.vimeo-info-channel {
font-size: 14px;
color: #1ab7ea;
font-weight: 500;
}
.vimeo-info-meta {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 13px;
color: var(--text-secondary);
}
.vimeo-info-description {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
max-height: 100px;
overflow-y: auto;
}
.vimeo-info-actions {
display: flex;
gap: var(--space-md);
justify-content: flex-end;
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
}
.vimeo-info-play-btn {
background: linear-gradient(135deg, #1ab7ea, #1da1d1);
color: white;
}
.vimeo-info-play-btn:hover {
background: linear-gradient(135deg, #15a2d3, #1891be);
}
/* ==========================================================================
Vimeo Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.vimeo-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.vimeo-videos-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.vimeo-video-title {
font-size: 13px;
}
.vimeo-video-channel,
.vimeo-video-meta {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.vimeo-categories-scroll-btn {
display: none !important;
}
.vimeo-categories {
gap: var(--space-xs);
}
.vimeo-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.vimeo-category-btn svg {
width: 14px;
height: 14px;
}
.vimeo-videos-container {
max-height: 40vh;
}
.vimeo-video-info-modal {
max-width: 100%;
}
.vimeo-info-title {
font-size: 16px;
}
.vimeo-info-thumbnail {
max-height: 200px;
}
}
@media (max-width: 480px) {
.vimeo-videos-grid {
grid-template-columns: repeat(2, 1fr);
}
.vimeo-video-play-overlay svg {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Internet Archive Browser
========================================================================== */
.archive-browser-view {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* When Archive browser is active, expand modal */
.choose-media-modal.archive-browser-active {
max-width: 900px;
width: 95vw;
}
/* Search Container */
.archive-search-container {
width: 100%;
}
.archive-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.archive-search-input-wrapper:focus-within {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}
.archive-search-icon {
width: 20px;
height: 20px;
margin-left: var(--space-md);
color: var(--text-tertiary);
flex-shrink: 0;
}
.archive-search-input-wrapper input {
flex: 1;
padding: var(--space-sm) var(--space-md);
background: transparent;
border: none;
color: var(--text-primary);
font-size: 14px;
outline: none;
}
.archive-search-input-wrapper input::placeholder {
color: var(--text-tertiary);
}
.archive-search-clear {
padding: var(--space-xs);
margin-right: var(--space-sm);
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
transition: color var(--transition-fast), background var(--transition-fast);
}
.archive-search-clear:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.archive-search-clear svg {
width: 18px;
height: 18px;
}
/* Categories */
.archive-categories-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.archive-categories-scroll-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.archive-categories-scroll-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
border-color: var(--accent-primary);
}
.archive-categories-scroll-btn.hidden {
opacity: 0;
pointer-events: none;
}
.archive-categories-scroll-btn svg {
width: 20px;
height: 20px;
}
.archive-categories {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding: var(--space-xs) 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
flex: 1;
min-width: 0;
}
.archive-categories::-webkit-scrollbar {
display: none;
}
.archive-category-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.archive-category-btn:hover {
background: var(--bg-hover);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.archive-category-btn.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.archive-category-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Items Container */
.archive-items-container {
position: relative;
overflow-y: auto;
max-height: 50vh;
scrollbar-width: thin;
scrollbar-color: var(--bg-tertiary) transparent;
}
.archive-items-container::-webkit-scrollbar {
width: 8px;
}
.archive-items-container::-webkit-scrollbar-track {
background: transparent;
}
.archive-items-container::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: var(--radius-full);
}
/* Loading State */
.archive-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding: var(--space-2xl);
color: var(--text-secondary);
}
.archive-loading-dots {
display: flex;
gap: var(--space-xs);
}
.archive-loading-dots span {
width: 8px;
height: 8px;
background: var(--accent-primary);
border-radius: var(--radius-full);
animation: archiveLoadingDot 1.4s ease-in-out infinite both;
}
.archive-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.archive-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes archiveLoadingDot {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* No Results */
.archive-no-results {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-2xl);
color: var(--text-tertiary);
text-align: center;
}
.archive-no-results svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.archive-no-results span {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.archive-no-results p {
font-size: 14px;
margin: 0;
}
/* Items Grid */
.archive-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-md);
padding: var(--space-xs);
}
/* Item Card */
.archive-item-card {
display: flex;
flex-direction: column;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: all var(--transition-fast);
}
.archive-item-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.archive-item-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
overflow: hidden;
}
.archive-item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.archive-item-card:hover .archive-item-thumbnail img {
transform: scale(1.05);
}
.archive-item-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity var(--transition-fast);
}
.archive-item-card:hover .archive-item-play-overlay {
opacity: 1;
}
.archive-item-play-overlay svg {
width: 48px;
height: 48px;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.archive-item-duration {
position: absolute;
bottom: var(--space-xs);
right: var(--space-xs);
padding: 2px 6px;
background: rgba(0, 0, 0, 0.8);
color: white;
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-sm);
}
.archive-item-year-badge {
position: absolute;
top: var(--space-xs);
left: var(--space-xs);
padding: 2px 6px;
background: rgba(102, 102, 102, 0.9);
color: white;
font-size: 11px;
font-weight: 600;
border-radius: var(--radius-sm);
}
.archive-item-info-btn {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
border: none;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
opacity: 0;
transition: all var(--transition-fast);
}
.archive-item-card:hover .archive-item-info-btn {
opacity: 1;
}
.archive-item-info-btn:hover {
background: rgba(0, 0, 0, 0.8);
}
.archive-item-info-btn svg {
width: 16px;
height: 16px;
}
/* Item Details */
.archive-item-details {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.archive-item-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.archive-item-creator {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.archive-item-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 12px;
color: var(--text-tertiary);
}
.archive-item-meta span::before {
content: '•';
margin-right: var(--space-sm);
}
.archive-item-meta span:first-child::before {
display: none;
}
/* Internet Archive Info Modal */
.archive-item-info-modal {
max-width: 500px;
width: 90vw;
}
.archive-item-info-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.archive-info-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
overflow: hidden;
}
.archive-info-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.archive-info-duration {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
font-size: 13px;
font-weight: 500;
border-radius: var(--radius-sm);
}
.archive-info-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.archive-info-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.archive-info-creator {
font-size: 14px;
color: var(--accent-primary);
font-weight: 500;
}
.archive-info-meta {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 13px;
color: var(--text-secondary);
}
.archive-info-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
max-height: 100px;
overflow-y: auto;
margin: 0;
}
.archive-info-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-subtle);
}
.archive-info-play-btn {
background: #666666 !important;
}
.archive-info-play-btn:hover {
background: #555555 !important;
}
/* Internet Archive icon color - active state */
.media-option-btn:not(.disabled) .media-option-icon.archive-icon {
background: rgba(102, 102, 102, 0.15);
color: #666666;
}
/* ==========================================================================
Internet Archive Browser Responsive
========================================================================== */
@media (max-width: 768px) {
.choose-media-modal.archive-browser-active {
max-width: 100%;
width: 100%;
max-height: 90vh;
margin: var(--space-md);
}
.archive-items-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.archive-item-title {
font-size: 13px;
}
.archive-item-creator,
.archive-item-meta {
font-size: 11px;
}
/* Hide scroll buttons on mobile - touch scrolling works better */
.archive-categories-scroll-btn {
display: none !important;
}
.archive-categories {
gap: var(--space-xs);
}
.archive-category-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 12px;
}
.archive-category-btn svg {
width: 14px;
height: 14px;
}
.archive-items-container {
max-height: 40vh;
}
.archive-item-info-modal {
max-width: 100%;
}
.archive-info-title {
font-size: 16px;
}
.archive-info-thumbnail {
max-height: 200px;
}
}
@media (max-width: 480px) {
.archive-items-grid {
grid-template-columns: repeat(2, 1fr);
}
.archive-item-play-overlay svg {
width: 36px;
height: 36px;
}
}
/* ==========================================================================
Shared Media Player Modal
========================================================================== */
.shared-media-player-modal {
max-width: 800px;
width: 90vw;
}
.shared-media-player-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.shared-media-video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius-md);
overflow: hidden;
}
.shared-media-video-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
.shared-media-video-container video.hidden {
display: none;
}
.shared-media-youtube-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.shared-media-youtube-container.hidden {
display: none;
}
.shared-media-youtube-container iframe {
width: 100%;
height: 100%;
border: none;
}
.shared-media-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: rgba(0, 0, 0, 0.8);
color: var(--text-inverse);
font-size: 14px;
}
.shared-media-loading.hidden {
display: none;
}
.shared-media-loading .spinner-ring {
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Media Controls */
.shared-media-controls {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-sm);
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.shared-media-progress {
display: flex;
align-items: center;
gap: var(--space-md);
}
.shared-media-progress input[type="range"] {
flex: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
cursor: pointer;
}
.shared-media-progress input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
transition: transform var(--transition-fast);
}
.shared-media-progress input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.shared-media-progress input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--accent-primary);
border: none;
border-radius: 50%;
cursor: pointer;
}
.shared-media-time {
display: flex;
gap: var(--space-xs);
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono, monospace);
min-width: 90px;
}
.shared-media-buttons {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.shared-media-btn {
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.shared-media-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
}
.shared-media-btn svg {
width: 20px;
height: 20px;
}
.shared-media-btn .pause-icon,
.shared-media-btn .muted-icon {
display: none;
}
.shared-media-btn.playing .play-icon {
display: none;
}
.shared-media-btn.playing .pause-icon {
display: block;
}
.shared-media-btn.muted .volume-icon {
display: none;
}
.shared-media-btn.muted .muted-icon {
display: block;
}
.shared-media-volume {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.shared-media-volume input[type="range"] {
width: 80px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
cursor: pointer;
}
.shared-media-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
}
.shared-media-volume input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: var(--accent-primary);
border: none;
border-radius: 50%;
cursor: pointer;
}
.shared-media-spacer {
flex: 1;
}
.shared-media-url-display {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
font-size: 12px;
overflow: hidden;
}
.shared-media-url-label {
color: var(--text-tertiary);
flex-shrink: 0;
}
.shared-media-url-text {
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
Shared Media in Spotlight (Video Tile)
========================================================================== */
.video-tile.shared-media-tile {
background: #000;
}
.video-tile.shared-media-tile video,
.video-tile.shared-media-tile iframe {
width: 100%;
height: 100%;
object-fit: contain;
border: none;
}
.video-tile.shared-media-tile .video-label {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.video-tile.shared-media-tile .media-tile-indicator {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: rgba(0, 0, 0, 0.7);
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--cosmic-green);
}
.video-tile.shared-media-tile .media-tile-indicator svg {
width: 12px;
height: 12px;
}
/* Spotlight Media Controls Overlay */
.spotlight-media-controls {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
z-index: 10;
}
.spotlight-media-controls.visible,
.video-tile.shared-media-tile:hover .spotlight-media-controls {
opacity: 1;
}
/* Only make the controls bar interactive, not the entire overlay */
.spotlight-media-controls.visible .spotlight-controls-bar,
.video-tile.shared-media-tile:hover .spotlight-media-controls .spotlight-controls-bar {
pointer-events: auto;
}
.spotlight-controls-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
pointer-events: none;
}
.spotlight-controls-bar {
position: relative;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
padding-top: var(--space-lg);
}
.spotlight-ctrl-btn {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border: none;
border-radius: var(--radius-md);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.spotlight-ctrl-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.05);
}
.spotlight-ctrl-btn svg {
width: 20px;
height: 20px;
}
.spotlight-ctrl-btn .pause-icon,
.spotlight-ctrl-btn .muted-icon {
display: none;
}
.spotlight-ctrl-btn .play-icon.hidden,
.spotlight-ctrl-btn .pause-icon.hidden,
.spotlight-ctrl-btn .volume-icon.hidden,
.spotlight-ctrl-btn .muted-icon.hidden {
display: none;
}
.spotlight-ctrl-btn .play-icon:not(.hidden),
.spotlight-ctrl-btn .pause-icon:not(.hidden),
.spotlight-ctrl-btn .volume-icon:not(.hidden),
.spotlight-ctrl-btn .muted-icon:not(.hidden) {
display: block;
}
.spotlight-progress-container {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.spotlight-progress {
flex: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
cursor: pointer;
min-width: 60px;
}
.spotlight-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
transition: transform var(--transition-fast);
}
.spotlight-progress::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.spotlight-progress::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--accent-primary);
border: none;
border-radius: 50%;
cursor: pointer;
}
.spotlight-time {
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-mono, monospace);
white-space: nowrap;
min-width: 85px;
text-align: center;
}
.spotlight-volume-container {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.spotlight-volume {
width: 60px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
cursor: pointer;
}
.spotlight-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
}
.spotlight-volume::-moz-range-thumb {
width: 12px;
height: 12px;
background: var(--accent-primary);
border: none;
border-radius: 50%;
cursor: pointer;
}
.spotlight-stop-btn {
background: rgba(239, 68, 68, 0.3);
}
.spotlight-stop-btn:hover {
background: rgba(239, 68, 68, 0.5);
}
/* YouTube Stop Button Overlay */
.spotlight-media-stop-overlay {
position: absolute;
top: var(--space-md);
right: var(--space-md);
z-index: 20;
opacity: 0;
transition: opacity var(--transition-base);
}
.video-tile.shared-media-tile:hover .spotlight-media-stop-overlay {
opacity: 1;
}
.spotlight-media-stop-overlay .spotlight-stop-btn {
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: var(--radius-md);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.spotlight-media-stop-overlay .spotlight-stop-btn:hover {
background: rgba(239, 68, 68, 0.8);
transform: scale(1.05);
}
.spotlight-media-stop-overlay .spotlight-stop-btn svg {
width: 20px;
height: 20px;
}
/* ==========================================================================
Floating Watch Party Controls Pill
Always visible, non-blocking controls for close and volume
========================================================================== */
.watch-party-floating-controls {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
z-index: 25;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0.85;
transition: opacity var(--transition-fast), transform var(--transition-fast);
pointer-events: auto;
}
.watch-party-floating-controls:hover {
opacity: 1;
}
/* On mobile, make controls always fully visible */
@media (max-width: 768px), (hover: none) {
.watch-party-floating-controls {
opacity: 1;
}
}
.watch-party-floating-controls .wp-ctrl-btn {
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
padding: 0;
}
.watch-party-floating-controls .wp-ctrl-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.watch-party-floating-controls .wp-ctrl-btn:active {
transform: scale(0.95);
}
.watch-party-floating-controls .wp-ctrl-btn svg {
width: 16px;
height: 16px;
}
.watch-party-floating-controls .wp-close-btn:hover {
background: rgba(239, 68, 68, 0.6);
}
/* Volume container in floating controls */
.watch-party-floating-controls .wp-volume-group {
display: flex;
align-items: center;
gap: 4px;
}
.watch-party-floating-controls .wp-volume-slider {
width: 50px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
cursor: pointer;
margin: 0;
}
.watch-party-floating-controls .wp-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.watch-party-floating-controls .wp-volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: white;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Divider between close and volume */
.watch-party-floating-controls .wp-divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.3);
margin: 0 2px;
}
/* Fullscreen button */
.watch-party-floating-controls .wp-fullscreen-btn svg.exit-fs {
display: none;
}
.watch-party-floating-controls.is-fullscreen .wp-fullscreen-btn svg.enter-fs {
display: none;
}
.watch-party-floating-controls.is-fullscreen .wp-fullscreen-btn svg.exit-fs {
display: block;
}
/* Hide old stop overlay when floating controls are present */
.video-tile.shared-media-tile.has-floating-controls .spotlight-media-stop-overlay {
display: none;
}
/* Hide old volume controls when floating controls are present */
.video-tile.shared-media-tile.has-floating-controls .youtube-volume-controls {
display: none;
}
/* Mobile adjustments for floating controls */
@media (max-width: 768px) {
.watch-party-floating-controls {
padding: 5px 8px;
gap: 4px;
top: var(--space-xs);
left: var(--space-xs);
}
.watch-party-floating-controls .wp-ctrl-btn {
width: 32px;
height: 32px;
}
.watch-party-floating-controls .wp-ctrl-btn svg {
width: 18px;
height: 18px;
}
.watch-party-floating-controls .wp-volume-slider {
width: 45px;
}
.watch-party-floating-controls .wp-divider {
height: 18px;
}
}
/* Extra small screens - compact mode */
@media (max-width: 480px) {
.watch-party-floating-controls {
padding: 4px 6px;
gap: 3px;
border-radius: 16px;
}
.watch-party-floating-controls .wp-ctrl-btn {
width: 30px;
height: 30px;
}
.watch-party-floating-controls .wp-volume-slider {
width: 40px;
}
}
/* Fullscreen mode - ensure controls stay visible and larger */
.video-tile.shared-media-tile:fullscreen .watch-party-floating-controls,
.video-tile.shared-media-tile:-webkit-full-screen .watch-party-floating-controls,
.video-tile.shared-media-tile:-moz-full-screen .watch-party-floating-controls {
opacity: 1;
top: var(--space-md);
left: var(--space-md);
}
.video-tile.shared-media-tile:fullscreen .watch-party-floating-controls .wp-ctrl-btn,
.video-tile.shared-media-tile:-webkit-full-screen .watch-party-floating-controls .wp-ctrl-btn,
.video-tile.shared-media-tile:-moz-full-screen .watch-party-floating-controls .wp-ctrl-btn {
width: 36px;
height: 36px;
}
.video-tile.shared-media-tile:fullscreen .watch-party-floating-controls .wp-ctrl-btn svg,
.video-tile.shared-media-tile:-webkit-full-screen .watch-party-floating-controls .wp-ctrl-btn svg,
.video-tile.shared-media-tile:-moz-full-screen .watch-party-floating-controls .wp-ctrl-btn svg {
width: 20px;
height: 20px;
}
/* Mobile adjustments for spotlight controls */
@media (max-width: 768px) {
.spotlight-controls-bar {
padding: var(--space-sm);
gap: var(--space-xs);
}
.spotlight-ctrl-btn {
width: 32px;
height: 32px;
}
.spotlight-ctrl-btn svg {
width: 16px;
height: 16px;
}
.spotlight-time {
font-size: 10px;
min-width: 70px;
}
.spotlight-volume-container {
display: none;
}
.spotlight-media-stop-overlay .spotlight-stop-btn {
width: 36px;
height: 36px;
}
}
/* SoundCloud Volume Controls */
.soundcloud-controls {
pointer-events: none;
}
.soundcloud-controls .spotlight-controls-bar {
justify-content: flex-end;
pointer-events: auto;
}
.soundcloud-spacer {
flex: 1;
}
.soundcloud-controls .spotlight-stop-btn-inline {
margin-right: auto;
}
.soundcloud-controls .spotlight-volume-container {
display: flex !important;
}
.soundcloud-volume-slider {
width: 80px;
}
@media (max-width: 640px) {
.soundcloud-controls .spotlight-volume-container {
display: flex !important;
}
.soundcloud-volume-slider {
width: 60px;
}
}
/* Direct Video Player Styles */
.direct-video-player {
width: 100%;
height: 100%;
background: #000;
object-fit: contain;
}
/* Direct video close button overlay */
.direct-video-control-overlay {
position: absolute;
top: 0;
right: 0;
padding: 12px;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}
.video-tile.shared-media-tile:hover .direct-video-control-overlay {
opacity: 1;
}
.direct-video-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.6);
border: none;
border-radius: 50%;
cursor: pointer;
color: white;
transition: background 0.2s;
}
.direct-video-close-btn:hover {
background: rgba(239, 68, 68, 0.8);
}
/* Mobile adjustments for direct video controls */
@media (max-width: 768px) {
.direct-video-control-overlay {
padding: 8px;
}
.direct-video-close-btn {
width: 32px;
height: 32px;
}
}
/* Always show controls on mobile/touch for SoundCloud and Mixcloud */
@media (hover: none), (max-width: 640px) {
.soundcloud-controls,
.mixcloud-controls {
opacity: 1 !important;
}
.soundcloud-controls .spotlight-controls-bar,
.mixcloud-controls .spotlight-controls-bar {
pointer-events: auto;
}
}
/* YouTube Volume Controls */
.youtube-volume-controls {
pointer-events: none;
}
.youtube-volume-controls .spotlight-controls-bar {
justify-content: flex-end;
pointer-events: auto;
}
.youtube-spacer {
flex: 1;
}
.youtube-volume-container {
display: flex !important;
}
.youtube-volume-slider {
width: 80px;
}
@media (max-width: 640px) {
.youtube-volume-container {
display: flex !important;
}
.youtube-volume-slider {
width: 60px;
}
}
/* YouTube volume controls - tap to show/hide on mobile */
.youtube-volume-controls.controls-visible {
opacity: 1 !important;
}
.youtube-volume-controls.controls-visible .spotlight-controls-bar {
pointer-events: auto;
}
/* YouTube Fullscreen Button */
.youtube-fullscreen-btn {
margin-right: var(--space-sm);
}
.youtube-fullscreen-btn svg {
width: 20px;
height: 20px;
}
/* Fullscreen styles for YouTube tile */
.video-tile.shared-media-tile:fullscreen,
.video-tile.shared-media-tile:-webkit-full-screen,
.video-tile.shared-media-tile:-moz-full-screen,
.video-tile.shared-media-tile:-ms-fullscreen {
width: 100vw !important;
height: 100vh !important;
background: #000;
}
.video-tile.shared-media-tile:fullscreen .youtube-volume-controls,
.video-tile.shared-media-tile:-webkit-full-screen .youtube-volume-controls,
.video-tile.shared-media-tile:-moz-full-screen .youtube-volume-controls,
.video-tile.shared-media-tile:-ms-fullscreen .youtube-volume-controls {
opacity: 1 !important;
}
.video-tile.shared-media-tile:fullscreen .spotlight-media-stop-overlay,
.video-tile.shared-media-tile:-webkit-full-screen .spotlight-media-stop-overlay,
.video-tile.shared-media-tile:-moz-full-screen .spotlight-media-stop-overlay,
.video-tile.shared-media-tile:-ms-fullscreen .spotlight-media-stop-overlay {
opacity: 1 !important;
}
/* Vimeo/YouTube stop button - tap to show/hide on mobile */
.spotlight-media-stop-overlay.controls-visible {
opacity: 1 !important;
}
/* Shared Media Preview Tile in Filmstrip */
.shared-media-preview-tile {
position: relative;
cursor: pointer;
border: 2px solid var(--accent-primary);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
background: var(--bg-tertiary);
min-width: 120px;
min-height: 90px;
}
.shared-media-preview-tile:hover {
transform: scale(1.05);
border-color: var(--accent-secondary);
box-shadow: 0 0 20px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.4);
}
.shared-media-preview-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
transition: background var(--transition-fast);
z-index: 5;
}
.shared-media-preview-tile:hover .shared-media-preview-overlay {
background: rgba(0, 0, 0, 0.3);
}
.preview-play-icon {
width: 48px;
height: 48px;
background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.shared-media-preview-tile:hover .preview-play-icon {
transform: scale(1.1);
background: var(--accent-primary);
}
.preview-play-icon svg {
width: 24px;
height: 24px;
margin-left: 4px;
color: white;
}
.preview-label {
margin-top: var(--space-xs);
font-size: 11px;
font-weight: 600;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Continue Watching Button Tile */
.continue-watching-tile {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
border: 2px solid var(--accent-primary);
animation: continueWatchingBorder 2s ease-in-out infinite;
box-shadow: 0 0 15px var(--glow-primary), inset 0 0 20px rgba(0, 0, 0, 0.3);
}
@keyframes continueWatchingBorder {
0%, 100% {
border-color: var(--accent-primary);
box-shadow: 0 0 10px var(--glow-primary), inset 0 0 20px rgba(0, 0, 0, 0.3);
}
50% {
border-color: var(--accent-secondary);
box-shadow: 0 0 25px var(--glow-primary), 0 0 40px var(--glow-primary), inset 0 0 20px rgba(0, 0, 0, 0.3);
}
}
.continue-watching-tile:hover {
animation: none;
border-color: var(--accent-secondary);
box-shadow: 0 0 30px var(--glow-primary), 0 0 50px var(--glow-primary), inset 0 0 20px rgba(0, 0, 0, 0.2);
}
.continue-watching-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
transition: background var(--transition-fast);
z-index: 5;
padding: var(--space-sm);
}
.continue-watching-tile:hover .continue-watching-overlay {
background: rgba(0, 0, 0, 0.3);
}
.continue-watching-icon {
width: 48px;
height: 48px;
background: var(--accent-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
box-shadow: 0 4px 15px var(--glow-primary);
position: relative;
}
/* Pulsing ring animation to indicate media is playing */
.continue-watching-icon::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--accent-primary);
opacity: 0;
animation: playingPulse 1.5s ease-out infinite;
}
.continue-watching-icon::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid var(--accent-secondary);
opacity: 0;
animation: playingPulse 1.5s ease-out infinite 0.3s;
}
@keyframes playingPulse {
0% {
opacity: 0.8;
transform: scale(0.9);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
.continue-watching-tile:hover .continue-watching-icon {
transform: scale(1.1);
background: var(--accent-hover);
box-shadow: 0 6px 20px var(--glow-primary);
}
.continue-watching-icon svg {
width: 24px;
height: 24px;
/* Optical center adjustment - play icons need slight right shift */
margin-left: 2px;
color: white;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.continue-watching-label {
margin-top: var(--space-sm);
font-size: 11px;
font-weight: 600;
font-family: var(--font-sans);
color: var(--accent-secondary);
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 1.2;
transition: color var(--transition-fast);
}
.continue-watching-tile:hover .continue-watching-label {
color: white;
}
/* Preview tile in normal grid (not filmstrip) */
.video-grid:not(.spotlight-mode) .shared-media-preview-tile {
aspect-ratio: 16 / 9;
}
/* Mobile adjustments for preview tile */
@media (max-width: 768px) {
.preview-play-icon {
width: 36px;
height: 36px;
}
.preview-play-icon svg {
width: 18px;
height: 18px;
margin-left: 2px;
}
.preview-label {
font-size: 9px;
}
/* Continue Watching mobile adjustments */
.continue-watching-icon {
width: 36px;
height: 36px;
}
.continue-watching-icon::before {
inset: -3px;
}
.continue-watching-icon::after {
inset: -6px;
}
.continue-watching-icon svg {
width: 18px;
height: 18px;
margin-left: 2px;
}
.continue-watching-label {
font-size: 9px;
letter-spacing: 0.5px;
}
}
/* Tablet Adjustments for Choose Media - 3 columns */
@media (max-width: 960px) and (min-width: 769px) {
.media-options-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Mobile Adjustments for Choose Media */
@media (max-width: 768px) {
.choose-media-bar {
bottom: 90px;
bottom: calc(90px + env(safe-area-inset-bottom));
}
.choose-media-btn {
padding: 0 var(--space-md);
font-size: 10px;
height: 38px;
}
.choose-media-btn svg {
width: 16px;
height: 16px;
}
.stop-media-btn {
padding: 0 var(--space-md);
font-size: 10px;
height: 38px;
}
.stop-media-btn svg {
width: 16px;
height: 16px;
}
.media-options-grid {
grid-template-columns: repeat(2, 1fr);
}
.media-option-icon {
width: 36px;
height: 36px;
}
.media-option-icon svg {
width: 18px;
height: 18px;
}
.watch-party-section {
padding: var(--space-sm) var(--space-md);
}
.watch-party-label {
font-size: 13px;
}
.shared-media-player-modal {
max-width: 95vw;
}
.shared-media-volume input[type="range"] {
width: 60px;
}
.shared-media-time {
min-width: 80px;
font-size: 11px;
}
}
/* ==========================================================================
Infinite Scroll - Load More Styles
========================================================================== */
.browser-load-more {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-xl) var(--space-md);
color: var(--text-secondary);
font-size: 14px;
}
.browser-load-more.hidden {
display: none;
}
.load-more-spinner {
display: flex;
gap: 6px;
align-items: center;
}
.load-more-spinner span {
width: 10px;
height: 10px;
background: var(--accent-primary);
border-radius: 50%;
animation: load-more-bounce 1.4s ease-in-out infinite both;
}
.load-more-spinner span:nth-child(1) {
animation-delay: -0.32s;
}
.load-more-spinner span:nth-child(2) {
animation-delay: -0.16s;
}
.load-more-spinner span:nth-child(3) {
animation-delay: 0s;
}
@keyframes load-more-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Platform-specific load more spinner colors */
.twitch-streams-container .load-more-spinner span {
background: #9146ff;
}
.kick-streams-container .load-more-spinner span {
background: #53fc18;
}
.youtube-videos-container .load-more-spinner span {
background: #ff0000;
}
/* End of Results Message */
.browser-end-of-results {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg) var(--space-md);
color: var(--text-tertiary);
font-size: 13px;
font-style: italic;
}
.browser-end-of-results.hidden {
display: none;
}
/* ==========================================================================
Audio Visualizer Styles
========================================================================== */
/* Hide the audio element itself - we show our custom visualizer */
.audio-player-hidden {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
/* Main visualizer wrapper */
.audio-visualizer-wrapper {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 50%, #16213e 100%);
overflow: hidden;
}
/* Visualizer container holding canvas and info */
.audio-visualizer-container {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
/* Canvas for the visualization */
.audio-visualizer-canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
/* File info display */
.audio-visualizer-info {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
background: var(--control-bg, rgba(0, 0, 0, 0.6));
backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
box-shadow: var(--shadow-md, 0 8px 32px rgba(0, 0, 0, 0.3));
z-index: 10;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.audio-file-icon {
font-size: 32px;
line-height: 1;
filter: drop-shadow(0 2px 8px var(--glow-primary, rgba(155, 93, 229, 0.5)));
}
.audio-file-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.audio-file-name {
font-size: 15px;
font-weight: 600;
color: var(--text-primary, #fff);
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.audio-file-status {
font-size: 12px;
color: var(--accent-primary, var(--cosmic-green, #00f5d4));
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Theme controls */
.audio-visualizer-theme-controls {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: var(--control-bg, rgba(0, 0, 0, 0.6));
backdrop-filter: blur(16px);
border-radius: 24px;
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
box-shadow: var(--shadow-md, 0 8px 32px rgba(0, 0, 0, 0.3));
z-index: 10;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.visualizer-theme-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
text-transform: uppercase;
letter-spacing: 1px;
}
.visualizer-theme-selector {
display: flex;
gap: 6px;
}
.visualizer-theme-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-hover, rgba(255, 255, 255, 0.08));
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
border-radius: 12px;
color: var(--text-secondary, rgba(255, 255, 255, 0.8));
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.visualizer-theme-btn:hover {
background: var(--bg-active, rgba(255, 255, 255, 0.15));
border-color: var(--accent-primary, rgba(255, 255, 255, 0.25));
transform: translateY(-1px);
}
.visualizer-theme-btn.active {
background: linear-gradient(135deg, var(--accent-primary, #9b5de5) 0%, var(--accent-secondary, #f15bb5) 100%);
border-color: transparent;
color: var(--text-inverse, #fff);
box-shadow: 0 4px 16px var(--glow-primary, rgba(155, 93, 229, 0.4));
}
.visualizer-theme-btn .theme-icon {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
font-size: 14px;
line-height: 1;
}
.visualizer-theme-btn.active .theme-icon {
background: rgba(255, 255, 255, 0.25);
}
.theme-name {
display: none;
}
@media (min-width: 768px) {
.theme-name {
display: inline;
}
}
/* ==========================================================================
Audio Equalizer Panel
========================================================================== */
.eq-toggle-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-hover, rgba(255, 255, 255, 0.08));
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
border-radius: 12px;
color: var(--text-secondary, rgba(255, 255, 255, 0.8));
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-left: 12px;
position: relative;
}
/* Separator before EQ button */
.eq-toggle-btn::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background: var(--border-light, rgba(255, 255, 255, 0.15));
}
.eq-toggle-btn:hover {
background: var(--bg-active, rgba(255, 255, 255, 0.15));
border-color: var(--accent-primary, rgba(255, 255, 255, 0.25));
transform: translateY(-1px);
}
.eq-toggle-btn.active {
background: linear-gradient(135deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
border-color: transparent;
color: var(--text-inverse, #0a0a14);
box-shadow: 0 4px 16px var(--glow-primary, rgba(0, 201, 255, 0.4));
}
/* Visualizer controls hidden state */
.audio-visualizer-container.controls-hidden .audio-visualizer-info,
.audio-visualizer-container.controls-hidden .audio-visualizer-theme-controls {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
}
.audio-visualizer-container.controls-hidden .audio-visualizer-theme-controls {
transform: translateX(-50%) translateY(10px);
}
/* Click to toggle hint */
.audio-visualizer-container {
cursor: pointer;
}
.audio-visualizer-container .audio-visualizer-info,
.audio-visualizer-container .audio-visualizer-theme-controls {
cursor: default;
}
/* Show cursor hint when controls are hidden */
.audio-visualizer-container.controls-hidden {
cursor: pointer;
}
.eq-toggle-btn .eq-icon {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
font-size: 14px;
line-height: 1;
}
.eq-toggle-btn.active .eq-icon {
background: rgba(0, 0, 0, 0.15);
}
.eq-toggle-btn .eq-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
display: none;
}
@media (min-width: 768px) {
.eq-toggle-btn .eq-label {
display: inline;
}
}
/* EQ Panel Overlay */
.eq-panel-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.eq-panel-overlay.visible {
opacity: 1;
visibility: visible;
}
/* EQ Panel Container */
.eq-panel {
width: 95vw;
max-width: 900px;
max-height: 90vh;
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-primary) 100%);
border-radius: 24px;
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
box-shadow:
0 0 0 1px var(--glow-primary, rgba(0, 201, 255, 0.1)),
0 20px 60px rgba(0, 0, 0, 0.6),
0 0 100px var(--glow-primary, rgba(0, 201, 255, 0.1)),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.eq-panel-overlay.visible .eq-panel {
transform: scale(1) translateY(0);
}
/* EQ Header */
.eq-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
background: linear-gradient(180deg, var(--bg-hover, rgba(0, 201, 255, 0.05)) 0%, transparent 100%);
}
.eq-title {
display: flex;
align-items: center;
gap: 12px;
}
.eq-title-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
border-radius: 12px;
font-size: 20px;
}
.eq-title h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-primary, #fff);
margin: 0;
letter-spacing: -0.02em;
}
.eq-title-subtitle {
font-size: 12px;
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
margin-top: 2px;
}
.eq-close-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-hover, rgba(255, 255, 255, 0.06));
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
border-radius: 10px;
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
cursor: pointer;
transition: all 0.2s ease;
}
.eq-close-btn:hover {
background: rgba(255, 107, 107, 0.2);
border-color: rgba(255, 107, 107, 0.3);
color: var(--cosmic-red, #ff6b6b);
}
.eq-close-btn svg {
width: 18px;
height: 18px;
}
/* EQ Content Area */
.eq-content {
flex: 1;
padding: 24px;
overflow-y: auto;
overflow-x: hidden;
}
/* Presets Row */
.eq-presets {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.eq-presets-label {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
text-transform: uppercase;
letter-spacing: 1.5px;
margin-right: 8px;
}
.eq-preset-btn {
padding: 8px 16px;
background: var(--bg-hover, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
border-radius: 20px;
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.eq-preset-btn:hover {
background: var(--bg-active, rgba(255, 255, 255, 0.1));
border-color: var(--border-color, rgba(255, 255, 255, 0.2));
color: var(--text-primary, #fff);
transform: translateY(-1px);
}
.eq-preset-btn.active {
background: linear-gradient(135deg, var(--bg-hover, rgba(0, 201, 255, 0.2)) 0%, var(--bg-active, rgba(146, 254, 157, 0.2)) 100%);
border-color: var(--accent-primary, rgba(0, 201, 255, 0.4));
color: var(--accent-primary, #00c9ff);
box-shadow: 0 0 20px var(--glow-primary, rgba(0, 201, 255, 0.2));
}
/* Custom preset button */
.eq-preset-custom {
margin-left: 8px;
border-style: dashed;
}
.eq-preset-custom.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.eq-preset-custom.active {
background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 107, 107, 0.2) 100%);
border-color: var(--cosmic-orange, rgba(255, 165, 0, 0.5));
border-style: solid;
color: var(--cosmic-orange, #ffa500);
box-shadow: 0 0 20px rgba(255, 165, 0, 0.2);
}
.eq-preset-custom:not(.disabled):hover {
border-style: solid;
}
/* Preamp Section */
.eq-preamp-section {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 32px;
padding: 16px 20px;
background: var(--bg-primary, rgba(0, 0, 0, 0.3));
border-radius: 16px;
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.05));
}
.eq-preamp-label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary, rgba(255, 255, 255, 0.8));
min-width: 70px;
}
.eq-preamp-slider-wrapper {
flex: 1;
display: flex;
align-items: center;
gap: 16px;
}
.eq-preamp-slider {
flex: 1;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(90deg, var(--bg-secondary, #1a1a28) 0%, var(--bg-tertiary, #2a2a3a) 100%);
border-radius: 4px;
outline: none;
cursor: pointer;
}
.eq-preamp-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
background: linear-gradient(135deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px var(--glow-primary, rgba(0, 201, 255, 0.4));
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eq-preamp-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 4px 20px var(--glow-primary, rgba(0, 201, 255, 0.6));
}
.eq-preamp-slider::-moz-range-thumb {
width: 22px;
height: 22px;
background: linear-gradient(135deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px var(--glow-primary, rgba(0, 201, 255, 0.4));
}
.eq-preamp-value {
min-width: 50px;
text-align: right;
font-size: 14px;
font-weight: 600;
color: var(--accent-primary, #00c9ff);
font-variant-numeric: tabular-nums;
}
/* EQ Bands Container */
.eq-bands-container {
background: var(--bg-primary, rgba(0, 0, 0, 0.25));
border-radius: 20px;
padding: 24px;
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
position: relative;
}
/* Grid lines background */
.eq-bands-container::before {
content: '';
position: absolute;
inset: 24px;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 19%,
var(--border-light, rgba(255, 255, 255, 0.03)) 19%,
var(--border-light, rgba(255, 255, 255, 0.03)) 20%
);
pointer-events: none;
border-radius: 12px;
}
/* dB Scale */
.eq-db-scale {
position: absolute;
left: 8px;
top: 50px;
bottom: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 10px;
color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
font-weight: 500;
pointer-events: none;
}
/* EQ Bands Grid */
.eq-bands {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 0 20px;
}
/* Individual EQ Band */
.eq-band {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 1;
min-width: 60px;
}
.eq-band-freq {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, rgba(255, 255, 255, 0.6));
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Vertical Slider Container */
.eq-slider-wrapper {
position: relative;
width: 40px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Slider Track Background */
.eq-slider-track {
position: absolute;
width: 6px;
height: 100%;
background: linear-gradient(180deg,
rgba(255, 107, 107, 0.3) 0%,
var(--border-light, rgba(255, 255, 255, 0.1)) 40%,
var(--border-light, rgba(255, 255, 255, 0.1)) 60%,
var(--bg-active, rgba(0, 201, 255, 0.3)) 100%
);
border-radius: 3px;
pointer-events: none;
}
/* Slider Fill */
.eq-slider-fill {
position: absolute;
width: 6px;
left: 50%;
transform: translateX(-50%);
border-radius: 3px;
pointer-events: none;
transition: all 0.1s ease;
}
.eq-slider-fill.positive {
bottom: 50%;
background: linear-gradient(180deg, var(--cosmic-red, #ff6b6b) 0%, var(--cosmic-orange, #ffa500) 100%);
box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}
.eq-slider-fill.negative {
top: 50%;
background: linear-gradient(180deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
box-shadow: 0 0 15px var(--glow-primary, rgba(0, 201, 255, 0.5));
}
/* Zero Line */
.eq-slider-zero {
position: absolute;
width: 20px;
height: 2px;
background: var(--text-tertiary, rgba(255, 255, 255, 0.3));
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Vertical Range Input */
.eq-slider {
width: 200px;
height: 40px;
-webkit-appearance: none;
appearance: none;
background: transparent;
transform: rotate(-90deg);
cursor: pointer;
outline: none;
}
.eq-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 28px;
height: 28px;
background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
border-radius: 50%;
cursor: grab;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.1),
inset 0 2px 4px rgba(255, 255, 255, 0.5);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eq-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.5),
0 0 0 4px rgba(0, 201, 255, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.5);
}
.eq-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.05);
}
.eq-slider::-moz-range-thumb {
width: 28px;
height: 28px;
background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
border: none;
border-radius: 50%;
cursor: grab;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.1);
}
.eq-slider::-webkit-slider-runnable-track {
height: 6px;
background: transparent;
border-radius: 3px;
}
.eq-slider::-moz-range-track {
height: 6px;
background: transparent;
border-radius: 3px;
}
/* dB Value Display */
.eq-band-value {
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #fff);
font-variant-numeric: tabular-nums;
min-width: 40px;
text-align: center;
padding: 4px 8px;
background: var(--bg-hover, rgba(255, 255, 255, 0.06));
border-radius: 6px;
}
.eq-band-value.positive {
color: var(--cosmic-red, #ff6b6b);
}
.eq-band-value.negative {
color: var(--accent-primary, #00c9ff);
}
/* Reset Button */
.eq-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
background: var(--bg-primary, rgba(0, 0, 0, 0.2));
}
.eq-reset-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--bg-hover, rgba(255, 255, 255, 0.06));
border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
border-radius: 10px;
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.eq-reset-btn:hover {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.3);
color: var(--cosmic-red, #ff6b6b);
}
.eq-reset-btn svg {
width: 16px;
height: 16px;
}
.eq-bypass-toggle {
display: flex;
align-items: center;
gap: 12px;
}
.eq-bypass-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.eq-bypass-switch {
position: relative;
width: 48px;
height: 26px;
background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
border-radius: 13px;
cursor: pointer;
transition: all 0.3s ease;
}
.eq-bypass-switch.active {
background: linear-gradient(135deg, var(--accent-primary, #00c9ff) 0%, var(--accent-secondary, #92fe9d) 100%);
box-shadow: 0 0 20px var(--glow-primary, rgba(0, 201, 255, 0.4));
}
.eq-bypass-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.eq-bypass-switch.active::after {
transform: translateX(22px);
}
/* Responsive */
@media (max-width: 768px) {
.eq-panel {
width: 100vw;
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
}
.eq-bands-container {
padding: 16px 8px;
overflow-x: auto;
}
.eq-bands {
min-width: 700px;
padding: 0 12px;
}
.eq-slider-wrapper {
height: 160px;
}
.eq-slider {
width: 160px;
}
.eq-presets {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.eq-preset-btn {
flex-shrink: 0;
}
}
/* Glow animation for active EQ */
@keyframes eq-glow {
0%, 100% {
box-shadow: 0 0 20px var(--glow-primary, rgba(0, 201, 255, 0.2));
}
50% {
box-shadow: 0 0 30px var(--glow-primary, rgba(0, 201, 255, 0.4));
}
}
.eq-toggle-btn.active {
animation: eq-glow 2s ease-in-out infinite;
}
/* ==========================================================================
EQ Panel - Light Theme Styles
========================================================================== */
[data-theme="light"] .eq-panel-overlay {
background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .eq-panel {
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #f1f3f5 100%);
border-color: rgba(0, 0, 0, 0.1);
box-shadow:
0 0 0 1px rgba(0, 150, 200, 0.1),
0 20px 60px rgba(0, 0, 0, 0.15),
0 0 100px rgba(0, 150, 200, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .eq-header {
border-bottom-color: rgba(0, 0, 0, 0.08);
background: linear-gradient(180deg, rgba(0, 150, 200, 0.05) 0%, transparent 100%);
}
[data-theme="light"] .eq-title h2 {
color: #1a1a2e;
}
[data-theme="light"] .eq-title-subtitle {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .eq-close-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .eq-close-btn:hover {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.3);
color: #e53935;
}
[data-theme="light"] .eq-presets-label {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .eq-preset-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .eq-preset-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
color: #1a1a2e;
}
[data-theme="light"] .eq-preset-btn.active {
background: linear-gradient(135deg, rgba(0, 150, 200, 0.15) 0%, rgba(100, 200, 150, 0.15) 100%);
border-color: rgba(0, 150, 200, 0.4);
color: #0088aa;
}
[data-theme="light"] .eq-preset-custom {
border-style: dashed;
}
[data-theme="light"] .eq-preset-custom.active {
background: linear-gradient(135deg, rgba(255, 140, 0, 0.15) 0%, rgba(230, 80, 80, 0.15) 100%);
border-color: rgba(255, 140, 0, 0.6);
border-style: solid;
color: #d35400;
}
[data-theme="light"] .eq-preamp-section {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .eq-preamp-label {
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .eq-preamp-slider {
background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%);
}
[data-theme="light"] .eq-preamp-value {
color: #0088aa;
}
[data-theme="light"] .eq-bands-container {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .eq-bands-container::before {
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 19%,
rgba(0, 0, 0, 0.04) 19%,
rgba(0, 0, 0, 0.04) 20%
);
}
[data-theme="light"] .eq-db-scale {
color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .eq-band-freq {
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .eq-slider-track {
background: linear-gradient(180deg,
rgba(230, 100, 100, 0.25) 0%,
rgba(0, 0, 0, 0.08) 40%,
rgba(0, 0, 0, 0.08) 60%,
rgba(0, 150, 200, 0.25) 100%
);
}
[data-theme="light"] .eq-slider-zero {
background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .eq-slider::-webkit-slider-thumb {
background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
0 0 0 3px rgba(0, 0, 0, 0.05),
inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .eq-slider::-webkit-slider-thumb:hover {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.25),
0 0 0 4px rgba(0, 150, 200, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .eq-band-value {
color: #1a1a2e;
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .eq-band-value.positive {
color: #d32f2f;
}
[data-theme="light"] .eq-band-value.negative {
color: #0088aa;
}
[data-theme="light"] .eq-footer {
border-top-color: rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .eq-reset-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .eq-reset-btn:hover {
background: rgba(230, 100, 100, 0.1);
border-color: rgba(230, 100, 100, 0.3);
color: #d32f2f;
}
[data-theme="light"] .eq-bypass-label {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .eq-bypass-switch {
background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .eq-bypass-switch.active {
background: linear-gradient(135deg, #00a5cc 0%, #7bc67b 100%);
}
[data-theme="light"] .eq-bypass-switch::after {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Visualizer theme controls - light mode */
[data-theme="light"] .audio-visualizer-theme-controls {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .visualizer-theme-label {
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .visualizer-theme-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .visualizer-theme-btn .theme-icon {
background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .visualizer-theme-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .visualizer-theme-btn.active {
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
color: #fff;
}
[data-theme="light"] .visualizer-theme-btn.active .theme-icon {
background: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .eq-toggle-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .eq-toggle-btn .eq-icon {
background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .eq-toggle-btn.active .eq-icon {
background: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .eq-toggle-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .eq-toggle-btn.active {
background: linear-gradient(135deg, #00a5cc 0%, #7bc67b 100%);
color: #fff;
}
[data-theme="light"] .eq-toggle-btn::before {
background: rgba(0, 0, 0, 0.12);
}
/* Audio visualizer info - light mode */
[data-theme="light"] .audio-visualizer-info {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .audio-file-name {
color: #1a1a2e;
text-shadow: none;
}
[data-theme="light"] .audio-file-status {
color: #00a5cc;
}
/* Audio player controls bar */
.audio-player-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
backdrop-filter: blur(8px);
z-index: 15;
}
.audio-ctrl-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.audio-ctrl-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.audio-ctrl-btn svg {
width: 22px;
height: 22px;
}
.audio-ctrl-btn svg.hidden {
display: none;
}
.audio-play-pause-btn {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--cosmic-purple, #9b5de5) 0%, var(--cosmic-pink, #f15bb5) 100%);
box-shadow: 0 4px 16px rgba(155, 93, 229, 0.4);
}
.audio-play-pause-btn:hover {
box-shadow: 0 6px 24px rgba(155, 93, 229, 0.6);
transform: scale(1.1);
}
.audio-play-pause-btn svg {
width: 26px;
height: 26px;
}
/* Time display */
.audio-time-display {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
font-family: 'SF Mono', 'Roboto Mono', monospace;
min-width: 95px;
}
.audio-time-sep {
color: rgba(255, 255, 255, 0.4);
}
/* Progress bar */
.audio-progress-container {
flex: 1;
position: relative;
height: 40px;
display: flex;
align-items: center;
}
.audio-progress-track {
position: absolute;
left: 0;
right: 0;
height: 6px;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
overflow: hidden;
pointer-events: none;
}
.audio-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--cosmic-green, #00f5d4) 0%, var(--cosmic-purple, #9b5de5) 100%);
border-radius: 3px;
transition: width 0.1s ease;
}
.audio-progress-slider {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
z-index: 2;
}
.audio-progress-slider:hover + .audio-progress-track {
height: 8px;
}
/* Volume control */
.audio-volume-control {
display: flex;
align-items: center;
gap: 8px;
}
.audio-volume-slider {
width: 80px;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
cursor: pointer;
}
.audio-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.audio-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.audio-visualizer-info {
top: 12px;
left: 12px;
padding: 10px 14px;
gap: 10px;
}
.audio-file-icon {
font-size: 24px;
}
.audio-file-name {
font-size: 13px;
max-width: 160px;
}
.audio-file-status {
font-size: 10px;
}
.audio-visualizer-theme-controls {
bottom: 70px;
padding: 8px 12px;
gap: 8px;
}
.visualizer-theme-label {
display: none;
}
.visualizer-theme-btn {
padding: 6px 10px;
}
.visualizer-theme-btn .theme-icon {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
font-size: 12px;
}
.audio-player-controls {
padding: 10px 14px;
gap: 8px;
}
.audio-ctrl-btn {
width: 36px;
height: 36px;
}
.audio-ctrl-btn svg {
width: 18px;
height: 18px;
}
.audio-play-pause-btn {
width: 42px;
height: 42px;
}
.audio-play-pause-btn svg {
width: 22px;
height: 22px;
}
.audio-time-display {
font-size: 11px;
min-width: 80px;
}
.audio-volume-slider {
width: 60px;
}
}
/* Small mobile - hide some elements */
@media (max-width: 480px) {
.audio-volume-control {
display: none;
}
.audio-time-display .audio-duration {
display: none;
}
.audio-time-display .audio-time-sep {
display: none;
}
}
/* Shared media tile adjustments for audio */
.shared-media-tile:has(.audio-visualizer-wrapper) {
background: #0a0a14;
}
/* When in fullscreen, adjust positions */
.shared-media-tile:fullscreen .audio-visualizer-theme-controls {
bottom: 90px;
}
.shared-media-tile:fullscreen .audio-visualizer-info {
top: 30px;
left: 30px;
}
.shared-media-tile:fullscreen .audio-player-controls {
padding: 16px 30px;
}
/* Ensure floating controls appear above visualizer */
.shared-media-tile:has(.audio-visualizer-wrapper) .watch-party-floating-controls {
z-index: 20;
}