*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--color-cyan: #22d3ee;--color-teal: #2dd4bf;--color-violet: #a78bfa;--color-magenta: #e879f9;--color-gold: #fbbf24;--color-indigo: #6366f1;--color-indigo-deep: #4f46e5;--color-bg: #0e1124;--color-surface: rgba(18, 24, 48, .55);--color-surface-strong: rgba(18, 24, 48, .78);--color-border: rgba(99, 102, 241, .12);--color-border-energy: rgba(34, 211, 238, .2);--color-text: #e2e8f0;--color-muted: #94a3b8;--color-deep-muted: #64748b;--color-primary: #6366f1;--color-primary-strong: #4f46e5;--color-secondary: #a78bfa;--color-danger: #f43f5e;--color-success: #2dd4bf;--color-warning: #fbbf24;--primary: var(--color-primary);--primary-hover: var(--color-primary-strong);--secondary: var(--color-secondary);--dark: #060814;--video-bg: #060814;--light: #e2e8f0;--accent: var(--color-danger);--success: var(--color-success);--warning: var(--color-warning);--surface-glass: rgba(12, 16, 32, .55);--surface-crystal: rgba(18, 24, 48, .72);--surface-graphite: rgba(22, 28, 50, .85);--glass-bg: rgba(12, 16, 32, .45);--glass-border: rgba(99, 102, 241, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--panel-bg: rgba(10, 14, 31, .88);--energy-glow-cyan: 0 0 20px rgba(34, 211, 238, .15);--energy-glow-violet: 0 0 20px rgba(167, 139, 250, .15);--energy-glow-magenta: 0 0 20px rgba(232, 121, 249, .12);--energy-glow-gold: 0 0 16px rgba(251, 191, 36, .12);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-soft: 0 4px 24px rgba(0, 0, 0, .35);--shadow-glow: 0 0 24px rgba(34, 211, 238, .1);--shadow-elevated: 0 16px 48px rgba(0, 0, 0, .45);--shadow-card: 0 8px 32px rgba(0, 0, 0, .35);--shadow-hover: 0 8px 32px rgba(0, 0, 0, .4);--shadow-bevel: inset 0 1px 0 rgba(255, 255, 255, .04);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-card: 14px;--radius-pill: 9999px;--blur-sm: 8px;--blur-md: 14px;--blur-lg: 24px;--space-xs: .375rem;--space-sm: .625rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 3.5rem;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--chat-font-size: 1rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.625;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-organic: cubic-bezier(.34, 1.56, .64, 1);--transition-quick: .1s var(--ease-in-out);--transition-fast: .15s var(--ease-out);--transition-base: .2s var(--ease-out);--transition-slow: .4s var(--ease-out);--transition-cosmic: .6s var(--ease-out);--z-base: 1;--z-header: 1000;--z-dock: 1050;--z-overlay: 1100;--z-panel: 500;--z-modal: 2000;--z-toast: 3000;--gradient-primary: linear-gradient(135deg, var(--color-indigo), var(--color-violet));--gradient-aurora: linear-gradient(160deg, rgba(99,102,241,.08), transparent 40%, rgba(167,139,250,.05));--gradient-energy: linear-gradient(135deg, var(--color-cyan), var(--color-violet), var(--color-indigo));--gradient-nebular: linear-gradient(135deg, rgba(34,211,238,.12), rgba(167,139,250,.08), rgba(232,121,249,.06));--gradient-1: #060814;--gradient-2: #0a0e1f;--gradient-3: #0d1226;--gradient-4: #121830;--grid-line-color: rgba(99, 102, 241, .04);--grid-size: 48px;--ring-color: rgba(34, 211, 238, .06);--ring-thickness: 1px;--orbital-speed: 120s;--breath-speed: 6s;--drift-speed: 30s;--emoji-hover-bg: rgba(34, 211, 238, .08);--emoji-hover-rgb: 34, 211, 238;--focus-ring: 0 0 0 2px rgba(34, 211, 238, .25), 0 0 12px rgba(34, 211, 238, .08);--bg-base-from: #0e1124;--bg-base-via: #121830;--bg-base-to: #0a0e1f;--bg-aurora-from: rgba(99, 102, 241, .1);--bg-aurora-via: rgba(167, 139, 250, .06);--bg-aurora-to: rgba(34, 211, 238, .08);--bg-aurora-speed: 40s;--bg-vignette-opacity: .35}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#6366f133;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#22d3ee59}body{font-family:var(--font-sans);background:transparent;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;transition:background var(--transition-cosmic),color var(--transition-slow);color:var(--color-text);position:relative;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern";letter-spacing:.01em;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:manipulation}body.cool-mode{--bg-aurora-from: rgba(34, 211, 238, .18);--bg-aurora-via: rgba(167, 139, 250, .14);--bg-aurora-to: rgba(232, 121, 249, .12);--bg-aurora-speed: 28s;--bg-vignette-opacity: .3;--shadow-glow: 0 0 32px rgba(34, 211, 238, .15);--ring-color: rgba(34, 211, 238, .12);--grid-line-color: rgba(99, 102, 241, .07)}body.dark-mode{--gradient-1: #060814;--gradient-2: #080b1a;--gradient-3: #0a0e1f;--gradient-4: #0d1226;--light: #e2e8f0;--dark: #060814;--glass-bg: rgba(8, 11, 26, .55);--glass-border: rgba(99, 102, 241, .08);--panel-bg: rgba(6, 8, 20, .9);--surface-glass: rgba(8, 11, 26, .5);--surface-crystal: rgba(12, 16, 32, .68);--surface-graphite: rgba(14, 18, 38, .82);--emoji-hover-bg: rgba(34, 211, 238, .1);--emoji-hover-rgb: 34, 211, 238;--color-bg: #060814;--color-surface: rgba(12, 16, 32, .55);--color-surface-strong: rgba(12, 16, 32, .8);--color-border: rgba(99, 102, 241, .1);--color-border-energy: rgba(34, 211, 238, .16);--color-text: #e2e8f0;--color-muted: #94a3b8;--color-deep-muted: #475569;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-soft: 0 4px 24px rgba(0, 0, 0, .45);--shadow-glow: 0 0 24px rgba(34, 211, 238, .12);--shadow-elevated: 0 16px 48px rgba(0, 0, 0, .55);--shadow-card: 0 8px 32px rgba(0, 0, 0, .4);--shadow-hover: 0 8px 32px rgba(0, 0, 0, .45);--shadow-bevel: inset 0 1px 0 rgba(255, 255, 255, .03);--focus-ring: 0 0 0 2px rgba(34, 211, 238, .3), 0 0 16px rgba(34, 211, 238, .1);color:var(--color-text);--bg-base-from: #060814;--bg-base-via: #080b1a;--bg-base-to: #0a0e1f;--bg-aurora-from: rgba(99, 102, 241, .12);--bg-aurora-via: rgba(167, 139, 250, .08);--bg-aurora-to: rgba(34, 211, 238, .1);--bg-vignette-opacity: .45;--grid-line-color: rgba(99, 102, 241, .03);--ring-color: rgba(34, 211, 238, .04)}body.dark-mode.cool-mode{--bg-aurora-from: rgba(34, 211, 238, .22);--bg-aurora-via: rgba(167, 139, 250, .16);--bg-aurora-to: rgba(232, 121, 249, .14);--bg-aurora-speed: 24s;--bg-vignette-opacity: .4;--panel-bg: rgba(6, 8, 20, .92);--color-surface: rgba(12, 16, 32, .6);--color-surface-strong: rgba(12, 16, 32, .85);--shadow-glow: 0 0 36px rgba(34, 211, 238, .18);--ring-color: rgba(34, 211, 238, .1);--grid-line-color: rgba(99, 102, 241, .06)}.bg-system{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.bg-layer{position:absolute;top:0;right:0;bottom:0;left:0}.bg-base{background:radial-gradient(ellipse at 20% 0%,rgba(99,102,241,.06),transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(34,211,238,.04),transparent 50%),linear-gradient(180deg,var(--bg-base-from),var(--bg-base-via) 50%,var(--bg-base-to)),url(../imgs/peerly-bg.png) center / cover no-repeat;background-blend-mode:overlay}.bg-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}@media (max-width: 768px){.bg-video{display:none}}.bg-aurora{background:linear-gradient(160deg,var(--bg-aurora-from) 0%,transparent 30%,var(--bg-aurora-via) 55%,transparent 70%,var(--bg-aurora-to) 100%);background-size:200% 200%;animation:auroraShift var(--bg-aurora-speed) ease-in-out infinite alternate;opacity:1}@keyframes auroraShift{0%{background-position:0% 0%}25%{background-position:100% 50%}50%{background-position:50% 100%}75%{background-position:0% 50%}to{background-position:100% 0%}}.bg-vignette{background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.3) 75%,rgba(0,0,0,.7) 100%);opacity:var(--bg-vignette-opacity)}.emoji-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:6}.skip-link{position:absolute;top:-100px;left:0;padding:.75rem 1.25rem;background:var(--color-primary);color:#fff;font-weight:600;font-size:var(--text-sm);border-radius:0 0 var(--radius-md) 0;z-index:var(--z-toast);transition:top var(--transition-fast)}.skip-link:focus{top:0}:focus-visible{outline:none;box-shadow:var(--focus-ring)}button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--focus-ring)}.header{background:var(--surface-glass);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));padding:.625rem 1.5rem;z-index:var(--z-header);flex-shrink:0;position:relative;box-shadow:var(--shadow-bevel)}.header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.15) 20%,rgba(167,139,250,.12) 50%,rgba(34,211,238,.15) 80%,transparent);pointer-events:none}.header-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.header-left{display:flex;align-items:center;gap:.875rem;flex-shrink:0}.header-badge{display:flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:var(--radius-pill);background:var(--surface-glass);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:600;color:var(--color-muted);letter-spacing:.4px;white-space:nowrap;text-transform:uppercase}.header-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--color-cyan);box-shadow:0 0 8px #22d3ee99,0 0 4px #22d3ee66;flex-shrink:0;animation:energyPulse 3s ease-in-out infinite}.header-status{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;color:var(--color-muted);letter-spacing:.15px;font-variant-numeric:tabular-nums}.logo{display:block;width:clamp(110px,30vw,140px);height:auto;object-fit:contain;transition:transform var(--transition-cosmic)}.logo:hover{transform:scale(1.03);filter:drop-shadow(0 0 16px rgba(34,211,238,.2))}.controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.tooltip-floating{position:fixed;padding:.35rem .7rem;background:#0c1020f2;border:1px solid rgba(34,211,238,.25);border-radius:var(--radius-sm);color:var(--color-cyan);font-size:var(--text-xs);font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:var(--z-modal);box-shadow:0 4px 16px #0006,0 0 12px #22d3ee14;letter-spacing:.3px;transform:translate(-50%)}.tooltip-floating.visible{opacity:1}.tooltip-floating:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#22d3ee40}.tooltip-floating.below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#22d3ee40}.btn{padding:.5rem 1.25rem;border:1px solid transparent;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--color-indigo),var(--color-violet));color:#fff;cursor:pointer;transition:transform var(--transition-base),box-shadow var(--transition-base),filter var(--transition-fast),background var(--transition-base);font-size:var(--text-sm);font-weight:600;letter-spacing:.15px;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover),0 0 16px #22d3ee1a;filter:brightness(1.08)}.btn:active{transform:translateY(0);box-shadow:0 2px 8px #0003}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)}.btn-icon{padding:0;width:44px;height:44px;border-radius:50%;font-size:1.15rem;min-height:44px}.btn-icon svg,.welcome-feature-icon svg,.panel-error-icon svg,.ft-icon svg,.volume-icon svg{width:20px;height:20px;display:block}.btn-dock svg{width:22px;height:22px}.welcome-feature-icon svg{width:18px;height:18px}.panel-error-icon svg{width:28px;height:28px}.ft-icon svg{width:18px;height:18px}.btn-secondary{background:var(--surface-crystal);border:1px solid var(--color-border);color:var(--color-text)}.btn-secondary:hover{background:var(--surface-crystal);border-color:var(--color-border-energy);box-shadow:0 0 12px #22d3ee14}.btn-ghost{background:transparent;border:1px solid transparent;color:var(--color-muted);opacity:.65}.btn-ghost:hover{background:var(--surface-glass);border-color:var(--color-border);color:var(--color-cyan);opacity:1}.btn-success{background:linear-gradient(135deg,var(--color-teal),#14b8a6)}.btn-success:hover{background:linear-gradient(135deg,#14b8a6,#0d9488)}.btn-danger{background:linear-gradient(135deg,var(--color-danger),#be123c)}.btn-danger:hover{background:linear-gradient(135deg,#be123c,#9f1239)}.btn-primary{background:linear-gradient(135deg,var(--color-indigo),var(--color-violet))}.btn-dock{width:48px;height:48px;border-radius:50%;background:var(--surface-graphite);border:1px solid var(--color-border);color:var(--color-text);font-size:1.25rem;box-shadow:var(--shadow-soft),inset 0 1px #ffffff0a;min-height:48px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.btn-dock:hover{background:var(--surface-crystal);border-color:var(--color-border-energy);box-shadow:var(--shadow-glow),0 0 0 1px #22d3ee1f;filter:brightness(1.1)}.btn-dock.btn-danger{background:linear-gradient(135deg,var(--color-danger),#be123c);color:#fff;border-color:#f43f5e66}.btn-dock.btn-danger:hover{background:linear-gradient(135deg,#be123c,#9f1239);box-shadow:0 0 20px #f43f5e59}.btn-dock.btn-muted{background:linear-gradient(135deg,var(--color-danger),#be123c);color:#fff;border-color:#f43f5e66}@keyframes pulseDanger{0%{box-shadow:0 0 #f43f5e59}70%{box-shadow:0 0 0 10px #f43f5e00}to{box-shadow:0 0 #f43f5e00}}.btn-muted{animation:pulseDanger 2s infinite;background:linear-gradient(135deg,var(--color-danger),#be123c)!important;color:#fff!important}.call-dock{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.875rem;padding:.625rem 1.1rem;background:var(--surface-graphite);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 24px #22d3ee0f;z-index:var(--z-dock);animation:dockSlideUp .4s var(--ease-out);padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}@keyframes dockSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.btn-dock.active-share{background:linear-gradient(135deg,var(--color-teal),#14b8a6);color:#fff;border-color:#2dd4bf66;box-shadow:0 0 16px #2dd4bf40}.file-transfer-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:.5rem;z-index:var(--z-dock);width:min(360px,90vw);pointer-events:none}.file-transfer-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;background:var(--surface-crystal);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);pointer-events:auto;animation:slideInRight .3s var(--ease-out)}.file-transfer-item .ft-icon{font-size:1.25rem;flex-shrink:0}.file-transfer-item .ft-info{flex-grow:1;min-width:0}.file-transfer-item .ft-name{font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-transfer-item .ft-bar{height:4px;margin-top:.375rem;background:var(--color-border);border-radius:var(--radius-pill);overflow:hidden}.file-transfer-item .ft-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-cyan),var(--color-violet));border-radius:var(--radius-pill);transition:width .2s var(--ease-out);box-shadow:0 0 8px #22d3ee26}.file-transfer-item .ft-percent{font-size:var(--text-xs);color:var(--color-muted);flex-shrink:0;min-width:2.5rem;text-align:right}.file-transfer-item.ft-done .ft-bar-fill{background:var(--color-teal);box-shadow:0 0 8px #2dd4bf33}.file-transfer-item.ft-done{animation:slideOutRight .3s var(--ease-out) 2s forwards}.file-transfer-item.ft-rejected .ft-percent{color:var(--color-red, #ef4444)}.file-transfer-item.ft-rejected{animation:slideOutRight .3s var(--ease-out) 2s forwards}.file-transfer-item.ft-request{pointer-events:auto}.file-transfer-item .ft-size{font-size:var(--text-xs);color:var(--color-muted);margin-top:.125rem}.file-transfer-item .ft-actions{display:flex;gap:.375rem;flex-shrink:0}.file-transfer-item .ft-accept-btn,.file-transfer-item .ft-deny-btn{padding:.25rem .625rem;font-size:var(--text-xs);border-radius:var(--radius-pill);border:none;cursor:pointer;transition:opacity .2s ease,transform .1s ease}.file-transfer-item .ft-accept-btn:hover,.file-transfer-item .ft-deny-btn:hover{opacity:.85}.file-transfer-item .ft-accept-btn:active,.file-transfer-item .ft-deny-btn:active{transform:scale(.95)}.main-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;padding:1rem;max-width:1600px;margin:0 auto;width:100%;min-height:0}.main-container.split-active{max-width:100%;padding-left:1rem}.video-section{position:relative;flex:1;display:flex;flex-direction:column;gap:1rem;transition:all var(--transition-slow);min-width:0}.video-section.split-view{flex-direction:column;width:100%;margin:0;padding:0}.video-section.split-view .video-container{width:100%;aspect-ratio:16 / 9}.video-section.split-view.swapped{flex-direction:column-reverse}.video-section.swapped:not(.split-view){flex-direction:column-reverse}.video-section.split-view~.chat-section{width:100%;position:static;height:300px}.video-container{position:relative;background:var(--video-bg);border-radius:var(--radius-lg);overflow:visible;box-shadow:0 12px 40px #00000059,inset 0 1px #ffffff0a;transition:all var(--transition-slow);display:flex;justify-content:center;align-items:center;flex:1;min-height:0;border:1px solid rgba(34,211,238,.1)}.video-container:before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-top:1px solid rgba(34,211,238,.2);border-left:1px solid rgba(34,211,238,.2);border-radius:var(--radius-lg) 0 0 0;pointer-events:none;z-index:7;animation:cornerGlow 5s ease-in-out infinite alternate}.video-container:after{content:"";position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:1px solid rgba(167,139,250,.2);border-right:1px solid rgba(167,139,250,.2);border-radius:0 0 var(--radius-lg) 0;pointer-events:none;z-index:7;animation:cornerGlow 5s ease-in-out infinite alternate;animation-delay:-2.5s}@keyframes cornerGlow{0%{opacity:.3}to{opacity:.7}}.video-container.cool-mode{animation:neonGlow 4s ease-in-out infinite alternate;box-shadow:0 0 24px #22d3ee33,0 12px 40px #00000059}@keyframes neonGlow{0%{box-shadow:0 0 20px #22d3ee2e,0 0 40px #a78bfa1a,0 12px 40px #00000059}to{box-shadow:0 0 30px #a78bfa33,0 0 50px #e879f91a,0 12px 40px #00000059}}.video-container.loading{opacity:.85}.video-container.loading:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:3px;background:linear-gradient(90deg,transparent,var(--color-cyan),transparent);animation:loadingBar 1.5s ease-in-out infinite;z-index:8;box-shadow:0 0 8px #22d3ee33}@keyframes loadingBar{0%{left:-100%}to{left:200%}}.video-container.fullscreen-mode{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;border-radius:0;clip-path:none;z-index:var(--z-overlay);background:#000;margin:0}.camera-switch-container{position:absolute;top:1rem;left:1rem;z-index:10;opacity:0;transform:translateY(-10px);transition:opacity var(--transition-base),transform var(--transition-base);background:var(--surface-crystal);padding:.6rem;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--color-border);min-width:180px}.video-container:hover .camera-switch-container,.camera-switch-container:focus-within{opacity:1;transform:translateY(0)}@media (hover: none){.camera-switch-container{opacity:1;transform:translateY(0)}}.camera-switch-container .cosmo-select{background-color:#00000080;border-color:#ffffff1f;min-width:160px}.camera-switch-container .cosmo-select:hover{border-color:var(--color-border-energy);background-color:#0009}.cosmo-select{padding:.5rem 2rem .5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:#00000080;color:var(--color-text);font-size:var(--text-sm);font-weight:500;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;color-scheme:dark;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;transition:border-color var(--transition-base),box-shadow var(--transition-base),background-color var(--transition-base);min-height:44px;width:100%;text-overflow:ellipsis;touch-action:manipulation}.cosmo-select:hover{border-color:var(--color-border-energy);background-color:#00000073;box-shadow:0 0 12px #22d3ee14,inset 0 1px #ffffff08}.cosmo-select:focus{border-color:var(--color-cyan);outline:none;box-shadow:var(--focus-ring),0 0 16px #22d3ee1f}.cosmo-select option{background:#0f1528;color:#ffffffe6;font-size:var(--text-sm);font-weight:400;color-scheme:dark}.cosmo-select option:checked,.cosmo-select option:hover,.cosmo-select option:focus{background:linear-gradient(135deg,#22d3ee2e,#a78bfa1f);color:var(--color-cyan);font-weight:600}body.dark-mode .cosmo-select option{background:#0a0e1f}video{width:100%;height:100%;object-fit:cover;transition:filter var(--transition-slow),transform var(--transition-slow)}.video-overlay{position:absolute;bottom:1rem;left:1rem;display:flex;align-items:center;pointer-events:none;opacity:.85;transition:opacity var(--transition-base),transform var(--transition-base)}.video-container:hover .video-overlay{opacity:1;transform:translateY(-5px)}.video-overlay>*{pointer-events:all}.nickname{background:var(--surface-crystal);border:1px solid var(--color-border);padding:.35rem .875rem;border-radius:var(--radius-pill);color:var(--color-text);font-weight:600;font-size:var(--text-sm);letter-spacing:.3px;box-shadow:0 2px 12px #0003}.video-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;background:var(--surface-crystal);padding:.35rem;border-radius:var(--radius-pill);border:1px solid var(--color-border);opacity:0;transform:translateY(-10px);transition:opacity var(--transition-base),transform var(--transition-base);z-index:10}.video-container:hover .video-controls{opacity:1;transform:translateY(0)}@media (hover: none){.video-controls{opacity:1;transform:translateY(0)}}.remote-video-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;opacity:0;transform:translateY(-10px);transition:all var(--transition-base);background:var(--surface-crystal);padding:.35rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}.video-container:hover .remote-video-controls{opacity:1;transform:translateY(0)}@media (hover: none){.remote-video-controls{opacity:1;transform:translateY(0)}.remote-capture-btn{opacity:1}}.remote-volume-control{position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;background:var(--surface-crystal);border:1px solid var(--color-border);padding:.5rem .9rem;border-radius:var(--radius-pill);opacity:0;transform:translate(10px);transition:all var(--transition-base)}.video-container:hover .remote-volume-control,.touch-device .remote-volume-control{opacity:1;transform:translate(0)}.volume-slider{width:120px;accent-color:var(--color-cyan);cursor:pointer;touch-action:manipulation;min-height:28px}.remote-capture-btn{position:absolute;bottom:4rem;right:1rem;opacity:0;transition:opacity var(--transition-base)}.video-container:hover .remote-capture-btn{opacity:1}.audio-visualizer{position:absolute;left:1rem;top:1rem;bottom:1rem;width:5px;border-radius:3px;background:#ffffff14;overflow:hidden;box-shadow:inset 0 0 5px #0003}.audio-visualizer-level{position:absolute;bottom:0;left:0;right:0;background:var(--color-cyan);height:0%;transition:height .08s ease-out;box-shadow:0 0 10px #22d3ee66}.chat-section{width:100%;background:var(--surface-glass);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft),var(--shadow-bevel);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:all var(--transition-base);position:relative;height:280px}.chat-header{padding:1.1rem 1.25rem;background:#00000026;border-bottom:1px solid transparent;display:flex;justify-content:space-between;align-items:center;position:relative}.chat-header:after{content:"";position:absolute;bottom:0;left:1.25rem;right:1.25rem;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.15),rgba(167,139,250,.1),transparent)}.dark-mode .chat-header{background:#ffffff05}.chat-header h3{color:var(--color-text);font-size:var(--text-sm);font-weight:700;letter-spacing:.5px;text-transform:uppercase}.chat-messages{flex:1;padding:1rem 1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.chat-message{max-width:85%;padding:.625rem 1rem;border-radius:var(--radius-md);word-wrap:break-word;overflow-wrap:break-word;font-size:var(--chat-font-size);line-height:var(--leading-normal);transition:font-size .3s ease;animation:slideUpFade .25s var(--ease-out);box-shadow:0 1px 4px #00000026}.chat-empty-state{margin:auto;text-align:center;opacity:.5;font-size:var(--text-sm);padding:2.5rem 1.5rem;line-height:var(--leading-normal);color:var(--color-muted)}.chat-unread-badge{position:absolute;bottom:5rem;left:50%;transform:translate(-50%);padding:.35rem .875rem;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--color-cyan),var(--color-violet));color:#fff;font-size:var(--text-xs);font-weight:600;border:none;cursor:pointer;box-shadow:0 4px 15px #22d3ee40;z-index:10;animation:slideUpFade .25s ease;transition:transform var(--transition-base);min-height:36px;touch-action:manipulation}.chat-unread-badge:hover{transform:translate(-50%) translateY(-2px)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(15px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-message a{color:inherit;text-decoration:underline;text-underline-offset:2px}.chat-message a:hover{opacity:.8}.chat-message.own{align-self:flex-end;background:linear-gradient(135deg,var(--color-indigo),var(--color-violet));color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 12px #6366f126,0 0 8px #22d3ee0f}.chat-message.other{align-self:flex-start;background:var(--surface-crystal);color:var(--color-text);border-bottom-left-radius:4px;border:1px solid var(--color-border)}.dark-mode .chat-message.other{background:#ffffff0d;color:var(--color-text);border-color:#ffffff0a}.chat-message.command{align-self:center;background:var(--surface-graphite);color:var(--color-muted);text-align:center;font-weight:600;max-width:95%;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);padding:.5rem 1.1rem;font-size:var(--text-xs);letter-spacing:.3px;border:1px solid var(--color-border);font-family:var(--font-mono)}.chat-input-container{padding:1rem 1.25rem;border-top:1px solid transparent;display:flex;gap:.5rem;background:#00000026;position:relative}.chat-input-container:before{content:"";position:absolute;top:0;left:1.25rem;right:1.25rem;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.1),transparent)}.dark-mode .chat-input-container{background:#ffffff05}.chat-input{flex:1;padding:.7rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--surface-graphite);color:var(--color-text);font-size:16px;transition:all var(--transition-base);min-height:44px;touch-action:manipulation}.dark-mode .chat-input{background:#0000004d}.chat-input:focus{background:var(--surface-crystal);border-color:var(--color-cyan);box-shadow:0 0 0 2px #22d3ee1f,0 0 12px #22d3ee14}.dark-mode .chat-input:focus{background:#0006}.emoji-picker{position:absolute;bottom:calc(100% + 10px);right:0;background:var(--surface-crystal);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-elevated),0 0 16px #22d3ee0f;opacity:0;pointer-events:none;transform:translateY(10px) scale(.95);transform-origin:bottom right;transition:all var(--transition-base);max-width:280px;z-index:var(--z-modal)}.emoji-picker.active{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}.emoji-picker-content{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.emoji-picker-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--color-border)}.page-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);font-weight:600;color:inherit;transition:all var(--transition-base);touch-action:manipulation}.page-btn:hover{background:#8080801a}.page-btn.active{background:linear-gradient(135deg,var(--color-cyan),var(--color-violet));color:#fff;box-shadow:0 2px 8px #22d3ee40}.emoji-btn{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:var(--radius-sm);transition:transform var(--transition-base),background var(--transition-base);background:transparent;border:none;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;touch-action:manipulation}.emoji-btn:hover{transform:scale(1.15);background:var(--emoji-hover-bg)}.welcome-logo{display:block;width:clamp(140px,40vw,280px);height:auto;margin:0 auto .5rem;opacity:.95;animation:panelFadeIn .5s var(--ease-out),logoPulse 3.5s ease-in-out infinite .5s}@keyframes logoPulse{0%,to{filter:drop-shadow(0 0 12px rgba(34,211,238,.15)) drop-shadow(0 0 24px rgba(99,102,241,.08))}50%{filter:drop-shadow(0 0 28px rgba(34,211,238,.35)) drop-shadow(0 0 48px rgba(99,102,241,.18))}}.connection-panel{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:var(--z-panel);color:var(--color-text);animation:panelFadeIn .5s var(--ease-out);overflow-y:auto;background:#0608148c;backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm))}body.dark-mode .connection-panel{background:#060814b3}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.connection-panel.exiting{animation:panelFadeOut .4s var(--ease-in-out) forwards;pointer-events:none}@keyframes panelFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.welcome-shell{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:500px;width:100%;align-items:center;padding:1.5rem;border-radius:var(--radius-card);border:1px solid var(--color-border);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));box-shadow:var(--shadow-card),var(--shadow-bevel),0 0 32px #22d3ee0a;flex-shrink:0;position:relative;overflow:hidden}.welcome-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(34,211,238,.03),transparent 50%),linear-gradient(225deg,rgba(167,139,250,.03),transparent 50%),url(../imgs/panel-bg.png) center / cover no-repeat;opacity:.15;z-index:-1;pointer-events:none}.welcome-left{display:flex;flex-direction:column;align-items:center;gap:1.25rem;justify-content:center;text-align:center}.welcome-left h2,.welcome-valueprop,.welcome-eyebrow{text-align:center}.welcome-left-content{display:flex;flex-direction:column;gap:1.25rem;justify-content:center;padding:1.25rem;border-radius:var(--radius-card);background:#22d3ee08;border:1px solid rgba(34,211,238,.06);width:100%}.welcome-left h2{font-size:clamp(1.25rem,5vw,var(--text-2xl));font-weight:800;margin:0;background:linear-gradient(135deg,var(--color-cyan),var(--color-violet),var(--color-indigo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:var(--leading-tight);letter-spacing:-.6px;text-align:left}.welcome-eyebrow{font-size:var(--text-xs);font-weight:700;color:var(--color-cyan);letter-spacing:3px;text-transform:uppercase}.welcome-valueprop{font-size:var(--text-lg);color:var(--color-muted);line-height:var(--leading-normal);text-align:left;margin:0;letter-spacing:.1px}.welcome-features{list-style:none;display:flex;flex-direction:column;gap:.625rem;margin:0;padding:0}.welcome-features li{display:flex;align-items:center;gap:.6rem;font-size:var(--text-base);font-weight:600;color:var(--color-text);padding:.55rem .875rem;border-radius:var(--radius-sm);background:#6366f10f;transition:background var(--transition-base)}.welcome-features li:hover{background:#22d3ee14}.welcome-feature-icon{font-size:1.1rem;flex-shrink:0}.join-code-card{display:flex;flex-direction:column;gap:.625rem;padding:1.25rem;border-radius:var(--radius-card);background:linear-gradient(135deg,#6366f10f,#22d3ee0a);border:1px solid rgba(99,102,241,.12);width:100%;position:relative;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.join-code-card:focus-within{border-color:#22d3ee40;box-shadow:0 0 20px #22d3ee14}.join-code-label{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:700;color:var(--color-cyan);letter-spacing:.3px;text-transform:uppercase}.join-code-label svg{width:18px;height:18px;flex-shrink:0;opacity:.8}.join-code-input-row{display:flex;gap:.5rem;align-items:stretch}.join-code-input-row input[type=text]{flex:1;min-width:0;padding:.625rem .875rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#00000059;color:var(--color-text);font-size:var(--text-sm);font-weight:500;transition:all var(--transition-base)}.join-code-input-row input[type=text]::placeholder{color:var(--color-deep-muted)}.join-code-input-row input[type=text]:focus{border-color:var(--color-cyan);background:#00000073;box-shadow:0 0 0 2px #22d3ee1f,0 0 16px #22d3ee14;outline:none}.dark-mode .join-code-input-row input[type=text]{background:#00000040}.dark-mode .join-code-input-row input[type=text]:focus{background:#00000059}.join-code-btn{flex-shrink:0;padding:.625rem 1.25rem;min-height:44px;font-size:var(--text-sm);font-weight:700;white-space:nowrap}.join-code-btn svg{width:18px;height:18px}body.cool-mode .join-code-card{border-color:#22d3ee33;box-shadow:0 0 16px #22d3ee0f}body.dark-mode .join-code-card{background:linear-gradient(135deg,#0c102099,#22d3ee08);border-color:#22d3ee1a}body.dark-mode.cool-mode .join-code-card{border-color:#a78bfa2e}.welcome-qr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.25rem 2rem;border-radius:var(--radius-card);background:#22d3ee0a;border:1px solid rgba(34,211,238,.08);align-self:center;margin-top:.25rem;position:relative}.welcome-qr-card.hidden{display:none}#panelQrCanvas{width:140px;height:140px;border-radius:var(--radius-sm);background:transparent}.qr-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease;z-index:1}.qr-placeholder--hidden{opacity:0;visibility:hidden}.qr-placeholder-aurora{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#22d3ee26,#a78bfa26,#2dd4bf26,#22d3ee26);background-size:300% 300%;animation:qrAuroraShift 3s ease-in-out infinite alternate}.qr-placeholder-aurora:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.12),transparent 70%);animation:qrAuroraPulse 2s ease-in-out infinite alternate}.qr-placeholder-text{position:relative;z-index:1;font-size:var(--text-xs);font-weight:600;color:var(--color-cyan);text-transform:uppercase;letter-spacing:1px;opacity:.7;animation:qrTextPulse 2.5s ease-in-out infinite}@keyframes qrTextPulse{0%,to{opacity:.35}50%{opacity:.85}}@keyframes qrAuroraShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes qrAuroraPulse{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}.welcome-qr-label{font-size:var(--text-xs);font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:1.5px}.qr-card-buttons{display:flex;flex-direction:column;gap:.6rem;width:100%;align-items:stretch}.qr-card-buttons .qr-download-btn{flex:1;white-space:nowrap}.qr-card-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}.qr-card-buttons button svg{width:16px;height:16px;flex-shrink:0}.welcome-right{display:flex;flex-direction:column}.setup-card{background:var(--surface-graphite);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:1.5rem;box-shadow:var(--shadow-card),var(--shadow-bevel);display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto}.setup-card h3{font-size:var(--text-xl);font-weight:700;text-align:left;margin:0;letter-spacing:.3px;color:var(--color-text);text-transform:uppercase}.panel-subtitle{font-size:var(--text-sm);color:var(--color-muted);margin:-.75rem 0 .5rem;line-height:var(--leading-normal);text-align:left}.panel-fields{display:flex;flex-direction:column;gap:.75rem;margin:0}.field-row{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:var(--text-xs);font-weight:600;color:var(--color-muted);letter-spacing:.3px;text-transform:uppercase}.connection-panel .btn-secondary{background:var(--surface-crystal);border:1px solid var(--color-border);color:var(--color-text);transition:all var(--transition-base)}.connection-panel .btn-secondary:hover{background:var(--surface-crystal);border-color:var(--color-border-energy);box-shadow:0 0 12px #22d3ee14}.panel-cta{width:100%;padding:.75rem 1.5rem!important;font-size:var(--text-base)!important;font-weight:700;letter-spacing:.15px;box-shadow:0 4px 20px #22d3ee26;min-height:48px}.panel-cta:hover{box-shadow:0 8px 30px #22d3ee40}.connection-panel .panel-cta{background:linear-gradient(135deg,var(--color-cyan),var(--color-violet),var(--color-indigo));border:1px solid rgba(34,211,238,.2);box-shadow:0 4px 20px #22d3ee33;transition:all var(--transition-base)}.connection-panel .panel-cta:hover{box-shadow:0 10px 36px #22d3ee4d;transform:translateY(-1px);filter:brightness(1.05)}.panel-footer-hint{margin:0;padding-top:.75rem;font-size:var(--text-xs);color:var(--color-deep-muted);opacity:1;text-align:center;border-top:1px solid var(--color-border)}.connection-panel input[type=text]{width:100%;padding:.625rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--surface-graphite);text-align:left;font-size:var(--text-sm);font-weight:500;color:var(--color-text);transition:all var(--transition-base)}.connection-panel input[type=text]::placeholder{color:var(--color-deep-muted)}.dark-mode .connection-panel input[type=text]{background:#00000040}.connection-panel input[type=text]:focus{border-color:var(--color-cyan);background:var(--surface-crystal);box-shadow:0 0 0 2px #22d3ee1f,0 0 16px #22d3ee14}.dark-mode .connection-panel input[type=text]:focus{background:#00000059}.link-container{margin:0;padding:.75rem 1rem;background:#0003;border:1px dashed var(--color-border);border-radius:var(--radius-md);word-break:break-all;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);transition:all var(--transition-base);display:flex;flex-direction:column;gap:.25rem;text-align:left}.dark-mode .link-container{background:#0000004d}.link-container-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.link-container strong{font-size:var(--text-xs);font-family:var(--font-sans);color:var(--color-deep-muted);text-transform:uppercase;letter-spacing:.5px}.link-copy-inline{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .85rem;background:linear-gradient(135deg,#22d3ee1f,#6366f11a);border:1px solid rgba(34,211,238,.3);border-radius:var(--radius-pill);color:#22d3ee;font-size:var(--text-xs);font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);touch-action:manipulation;text-transform:uppercase;letter-spacing:.4px}.link-copy-inline svg{width:14px;height:14px;flex-shrink:0}.link-copy-inline:hover:not(:disabled){background:linear-gradient(135deg,#22d3ee38,#6366f12e);border-color:#22d3ee8c;color:#67e8f9;box-shadow:0 0 14px #22d3ee40,0 2px 8px #0003;transform:translateY(-1px)}.link-copy-inline:active:not(:disabled){transform:scale(.97)}.link-copy-inline:disabled{opacity:.4;pointer-events:none;filter:grayscale(.3)}.copy-link-btn{margin:0;padding:.5rem .8rem;background:var(--surface-crystal);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-pill);cursor:pointer;font-size:var(--text-xs);font-weight:600;letter-spacing:.15px;box-shadow:0 2px 10px #22d3ee0f;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;touch-action:manipulation}.copy-link-btn:hover:not(:disabled){background:var(--surface-crystal);border-color:var(--color-border-energy);box-shadow:0 4px 16px #22d3ee1f;transform:translateY(-1px)}.copy-link-btn:active:not(:disabled){transform:translateY(0)}.copy-link-btn:disabled{opacity:.4;pointer-events:none;filter:grayscale(.3)}.qr-download-btn{margin:0;padding:.5rem .8rem;background:var(--surface-crystal);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-pill);cursor:pointer;font-size:var(--text-xs);font-weight:600;letter-spacing:.15px;box-shadow:0 2px 10px #22d3ee0f;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;touch-action:manipulation}.qr-download-btn:hover:not(:disabled){background:var(--surface-crystal);border-color:var(--color-border-energy);box-shadow:0 4px 16px #22d3ee1f;transform:translateY(-1px)}.qr-download-btn:active:not(:disabled){transform:translateY(0)}.qr-download-btn:disabled{opacity:.4;pointer-events:none;filter:grayscale(.3)}.notification{position:fixed;top:5rem;right:2rem;background:var(--surface-crystal);color:var(--color-text);padding:.75rem 1.25rem;border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:var(--shadow-elevated),var(--shadow-bevel);z-index:var(--z-toast);font-weight:600;font-size:var(--text-sm);display:flex;align-items:center;gap:.5rem;animation:slideInRight .3s var(--ease-out)}.notification.success{border-left:3px solid var(--color-teal);box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 12px #2dd4bf1a}.notification.error{border-left:3px solid var(--color-danger);box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 12px #f43f5e1a}.notification.info{border-left:3px solid var(--color-cyan);box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 12px #22d3ee1a}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;background:#06081499;backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);animation:fadeIn .25s var(--ease-out)}.qr-code-container{background:var(--panel-bg);padding:2.5rem;border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 32px #22d3ee0f;color:var(--color-text);border:1px solid var(--color-border);max-width:400px;width:90%;position:relative}.qr-code-container:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#22d3ee0f,#a78bfa0f);z-index:-1;pointer-events:none}.qr-code-container h3{font-size:var(--text-xl);margin-bottom:1rem;font-weight:700}.qr-code-container p{margin-top:1rem;opacity:.7;font-size:var(--text-sm)}.qr-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.confirm-modal-container{background:var(--panel-bg);padding:2.5rem;border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 32px #f43f5e14;color:var(--color-text);border:1px solid var(--color-border);max-width:420px;width:90%;position:relative;animation:fadeIn .25s var(--ease-out)}.confirm-modal-container:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#f43f5e1a,#a78bfa0f);z-index:-1;pointer-events:none}.confirm-modal-container h3{font-size:var(--text-xl);margin-bottom:.75rem;font-weight:700}.confirm-modal-container p{margin-top:0;margin-bottom:1.5rem;opacity:.8;font-size:var(--text-sm);line-height:1.5}.confirm-modal-buttons{display:flex;gap:1rem;justify-content:center}.disconnect-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface-crystal);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));padding:2rem 2.5rem;border-radius:var(--radius-lg);box-shadow:0 15px 40px #00000059,0 0 24px #22d3ee0f;z-index:var(--z-overlay);border:1px solid var(--color-border);animation:fadeIn .3s cubic-bezier(.16,1,.3,1);text-align:center}.disconnect-message{color:#fff;font-size:var(--text-lg);font-weight:700;letter-spacing:.5px;animation:pulse 2s ease-in-out infinite}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}body.dark-mode .welcome-left-content{background:#22d3ee0a;border-color:#22d3ee14}body.dark-mode .welcome-qr-card{background:#22d3ee14;border-color:#22d3ee1f}body.dark-mode .setup-card{background:#0c1020bf;border-color:#22d3ee1a}body.cool-mode .chat-section{border-color:#22d3ee33;box-shadow:0 8px 32px #0000004d,0 0 20px #22d3ee1a}body.cool-mode .chat-header{background:#22d3ee0f}body.cool-mode .chat-input-container{background:#22d3ee0a}body.cool-mode .chat-input{background:#0c102099;border-color:#22d3ee26}body.cool-mode .chat-input:focus{border-color:#22d3ee66;background:#0c1020bf;box-shadow:0 0 0 2px #22d3ee26,0 0 12px #22d3ee1a}body.cool-mode .setup-card{border-color:#22d3ee33;box-shadow:0 20px 60px #0000004d,0 0 30px #22d3ee1f}body.cool-mode .connection-panel input[type=text]{background:#0c102099}body.cool-mode .emoji-picker{border-color:#22d3ee33;box-shadow:0 10px 40px #0003,0 0 15px #22d3ee1a}body.dark-mode.cool-mode .chat-section{border-color:#a78bfa33;box-shadow:0 8px 32px #00000059,0 0 25px #a78bfa1f}body.dark-mode.cool-mode .chat-header{background:#a78bfa14}body.dark-mode.cool-mode .chat-input-container{background:#a78bfa0d}body.dark-mode.cool-mode .chat-input{background:#0c102080;border-color:#a78bfa26}body.dark-mode.cool-mode .chat-input:focus{border-color:#a78bfa66;background:#0c1020a6;box-shadow:0 0 0 2px #a78bfa26,0 0 12px #a78bfa1a}body.dark-mode.cool-mode .setup-card{border-color:#a78bfa33;box-shadow:0 20px 60px #0006,0 0 30px #a78bfa1f}body.dark-mode.cool-mode .connection-panel input[type=text]{background:#0c102066}body.dark-mode.cool-mode .emoji-picker{border-color:#a78bfa33;box-shadow:0 10px 40px #0000004d,0 0 15px #a78bfa1a}.video-container.video-off:before{content:"📹";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;opacity:.2;pointer-events:none;z-index:5;filter:grayscale(1) brightness(2)}.quality-badge{position:absolute;top:1rem;left:50%;transform:translate(-50%);padding:.25rem .75rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;letter-spacing:.2px;z-index:10;border:1px solid rgba(255,255,255,.08);animation:fadeIn .25s ease;pointer-events:none}.device-preview{margin:0;border-radius:var(--radius-md);overflow:visible;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:inset 0 1px 3px #0000001a}.device-preview video{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block;background:#000;transform:scaleX(-1)}.device-preview-controls{display:flex;flex-direction:column;gap:.625rem;padding:.875rem;background:#0000001a}.dark-mode .device-preview-controls{background:#ffffff08}.device-select-row{display:flex;align-items:center;gap:.75rem}.device-select-row .cosmo-select{flex:1;min-width:0;background-color:#ffffff14;border-color:#ffffff26;color:#ffffffe6}.device-select-row .cosmo-select:hover{border-color:var(--color-border-energy);background-color:#ffffff1f;box-shadow:0 0 12px #22d3ee14}.device-select-label{font-size:var(--text-xs);font-weight:600;color:#fff9;white-space:nowrap;min-width:5rem;letter-spacing:.2px}.panel-error{margin:1rem 0;padding:1.5rem 1rem;border-radius:var(--radius-md);text-align:center;animation:slideUpFade .3s cubic-bezier(.16,1,.3,1)}.panel-error-icon{font-size:2.5rem;margin-bottom:.5rem}.panel-error-msg{font-size:1rem;margin:.5rem 0 1rem;opacity:.9}.panel-error-btn{width:100%}.panel-error-roomFull{background:#f43f5e0f;border:1px solid rgba(244,63,94,.15)}.panel-error-roomNotFound{background:#fbbf240f;border:1px solid rgba(251,191,36,.15)}.panel-error-roomEnded{background:#64748b0f;border:1px solid rgba(100,116,139,.15)}.quality-good{background:#2dd4bfa6;color:#fff;box-shadow:0 0 8px #2dd4bf33}.quality-weak{background:#fbbf24a6;color:#fff;box-shadow:0 0 8px #fbbf2433}.quality-poor{background:#e879f9a6;color:#fff;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 8px #e879f933}@keyframes energyPulse{0%,to{opacity:1;box-shadow:0 0 8px #22d3ee99,0 0 4px #22d3ee66}50%{opacity:.7;box-shadow:0 0 12px #22d3ee66,0 0 6px #22d3ee33}}@keyframes dockBreath{0%{box-shadow:var(--shadow-soft),inset 0 1px #ffffff0a,0 0 #22d3ee00}to{box-shadow:var(--shadow-soft),inset 0 1px #ffffff0a,0 0 12px #22d3ee14}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.bg-aurora,.bg-glow,.bg-shimmer,.bg-grid,.bg-constellation,.bg-orbital,.bg-particles{animation:none!important}.bg-base,.bg-aurora,.bg-glow,.bg-shimmer,.bg-vignette,.bg-grid,.bg-constellation,.bg-particles{transition:none!important}}@media (prefers-contrast: more){:root{--color-border: rgba(34, 211, 238, .3);--color-surface: rgba(18, 24, 48, .9);--color-surface-strong: rgba(18, 24, 48, 1);--color-text: #f1f5f9;--color-muted: #cbd5e1}.dark-mode{--color-border: rgba(34, 211, 238, .3);--color-surface: rgba(12, 16, 32, .95);--color-surface-strong: rgba(12, 16, 32, 1)}.btn,.call-dock,.connection-panel,.chat-section{border-width:2px}.focus-ring,:focus-visible{box-shadow:0 0 0 3px currentColor!important}}@media (forced-colors: active){.btn,.call-dock,.connection-panel,.chat-section,.video-container{border:1px solid CanvasText}.bg-aurora,.bg-glow,.bg-shimmer,.bg-vignette,.bg-grid,.bg-constellation,.bg-orbital,.bg-particles{display:none}.btn-primary{background:Highlight;color:HighlightText}}@media (max-width: 768px){.bg-glow{filter:blur(60px)}.bg-grid{opacity:.25}.bg-orbital:before{width:50vmin;height:50vmin}.bg-orbital:after{width:70vmin;height:70vmin}.bg-particles{opacity:.35}.bg-constellation{opacity:.4}.bg-shimmer{opacity:.02}}@media (max-width: 480px){.bg-grid{opacity:.15}.bg-orbital{display:none}.bg-particles{opacity:.2}.bg-constellation,.bg-shimmer,.bg-glow-3{display:none}}@media (max-width: 480px){.header{padding:.5rem .75rem}.header-content{flex-wrap:wrap;justify-content:center;gap:.5rem}.controls{width:100%;justify-content:center}.header-badge{display:none}.call-dock{bottom:calc(.75rem + env(safe-area-inset-bottom,0px));gap:.4rem;padding:.5rem .6rem}.btn-dock{width:44px;height:44px;min-height:44px;font-size:1.1rem}.device-select-row{flex-direction:column;align-items:flex-start;gap:.25rem}.device-select-label{min-width:0}.notification{right:.5rem;left:.5rem;text-align:center}.welcome-shell{padding:1.25rem;gap:1.25rem}.welcome-features{gap:.5rem}.welcome-features li{font-size:var(--text-xs)}.qr-code-container{padding:1.5rem}.qr-buttons{flex-direction:column}.file-transfer-container{width:calc(100vw - 1.5rem);bottom:5rem}.emoji-picker{max-width:260px}.emoji-picker-content{grid-template-columns:repeat(5,1fr)}}@media (max-width: 360px){.header{padding:.4rem .5rem}.logo{width:100px}.call-dock{gap:.3rem;padding:.4rem .5rem}.btn-dock{width:40px;height:40px;min-height:40px;font-size:1rem}.welcome-shell,.join-code-card{padding:1rem}.setup-card{padding:1.25rem;gap:1rem}.chat-section{height:240px}}@media (max-height: 500px) and (orientation: landscape){.header{padding:.25rem .75rem}.logo{width:120px}.header-badge{display:none}.header-status{font-size:var(--text-xs)}.main-container{padding:.5rem;gap:.5rem}.video-section{gap:.5rem}.chat-section{height:100%;width:320px}.call-dock{bottom:.5rem;padding:.35rem .5rem;gap:.4rem}.btn-dock{width:40px;height:40px;min-height:40px;font-size:1rem}.welcome-shell{padding:1rem;gap:1rem;max-width:600px}.welcome-logo{width:200px}.welcome-left h2{font-size:var(--text-lg)}.welcome-valueprop{font-size:var(--text-sm)}.welcome-features{display:none}.welcome-qr-card{padding:.5rem 1rem}#panelQrCanvas{width:100px;height:100px}.join-code-card{padding:.875rem 1rem}.join-code-input-row{flex-direction:column}.setup-card{padding:1rem;gap:.625rem}.device-preview video{aspect-ratio:16 / 7}.notification{top:3rem;right:.5rem;left:.5rem;text-align:center;padding:.5rem 1rem}.bg-grid{opacity:.1}.bg-orbital{display:none}.bg-particles{opacity:.15}}@media (min-width: 769px){.main-container{flex-direction:row;gap:1.5rem;padding:1.5rem}.video-section{gap:1.5rem}.video-section.split-view{flex-direction:row;flex:1;min-width:0}.video-section.split-view .video-container{flex:1;width:auto;min-width:0}.video-section.split-view.swapped{flex-direction:row-reverse}.video-section.split-view~.chat-section{width:360px;position:relative;height:calc(100vh - 7rem)}.chat-section{width:400px;height:auto}.welcome-shell{grid-template-columns:1fr 1fr;gap:2.25rem;max-width:1080px;padding:3rem}.welcome-left,.welcome-left h2,.welcome-valueprop,.welcome-eyebrow{text-align:left}.welcome-features{flex-direction:column;flex-wrap:nowrap}.qr-card-buttons{flex-direction:row}.connection-panel{padding:2rem}.setup-card{padding:2rem;max-height:90vh;max-height:90dvh}.qr-buttons{flex-direction:row}.notification{right:2rem;left:auto}.header-badge{display:flex}}.chat-message.ai-question{opacity:.85;font-style:italic;max-width:85%}.chat-message.ai-response{align-self:flex-start;max-width:90%;padding:.75rem 1rem;border-radius:var(--radius-md);background:linear-gradient(135deg,#6366f114,#22d3ee0f);border:1px solid rgba(99,102,241,.15);border-bottom-left-radius:4px;animation:chatMessageIn .3s var(--ease-out)}.dark-mode .chat-message.ai-response{background:linear-gradient(135deg,#6366f10f,#22d3ee0a);border-color:#6366f11f}.ai-response-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.ai-badge{font-size:var(--text-xs);font-weight:700;letter-spacing:.5px;padding:.15rem .5rem;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--color-indigo),var(--color-cyan));color:#fff;text-transform:uppercase}.ai-status{font-size:var(--text-xs);color:var(--color-muted);font-style:italic}.ai-status:after{content:"…";animation:aiThinkingDots 1.4s infinite}@keyframes aiThinkingDots{0%,20%{opacity:.2}50%{opacity:1}to{opacity:.2}}.ai-response-content{white-space:pre-wrap;word-wrap:break-word;line-height:1.5;font-size:var(--text-sm);color:var(--color-text)}.chat-message.ai-response-done{border-color:#22d3ee33}.chat-message.ai-response-error .ai-response-content{color:var(--color-rose, #f43f5e)}.ai-settings-modal{background:var(--panel-bg);padding:2.5rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated),var(--shadow-bevel),0 0 32px #6366f114;color:var(--color-text);border:1px solid var(--color-border);max-width:480px;width:90%;position:relative;animation:fadeIn .25s var(--ease-out)}.ai-settings-modal:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#6366f11a,#22d3ee0f);z-index:-1;pointer-events:none}.ai-settings-modal h3{font-size:var(--text-xl);margin-bottom:.5rem;font-weight:700}.ai-settings-desc{margin-top:0;margin-bottom:1.5rem;opacity:.7;font-size:var(--text-sm);line-height:1.5}.ai-settings-label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:.35rem;margin-top:1rem}.ai-settings-label:first-of-type{margin-top:0}.ai-settings-input{width:100%;padding:.65rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--surface-graphite);color:var(--color-text);font-size:14px;transition:all var(--transition-base);min-height:44px;box-sizing:border-box}.dark-mode .ai-settings-input{background:#0000004d}.ai-settings-input:focus{outline:none;border-color:var(--color-cyan);box-shadow:0 0 0 2px #22d3ee1f}.ai-settings-buttons{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.75rem}@media (min-width: 481px) and (max-width: 768px){.welcome-shell{max-width:600px;padding:1.75rem}.welcome-logo{width:220px}.welcome-left h2{font-size:clamp(1.5rem,4vw,var(--text-xl))}.join-code-card{padding:1.25rem}}@media (min-width: 1400px){.main-container{max-width:1800px;padding:2rem;gap:2rem}.chat-section{width:440px}.video-section.split-view~.chat-section{width:400px}.welcome-shell{max-width:1200px;padding:3.5rem;gap:2.5rem}.welcome-left h2{font-size:var(--text-3xl)}.welcome-valueprop{font-size:var(--text-xl)}.welcome-features li{font-size:var(--text-lg);padding:.75rem 1rem}.setup-card{padding:2.5rem}.join-code-card{padding:1.5rem}.call-dock{gap:1.125rem;padding:.75rem 1.25rem}.btn-dock{width:52px;height:52px;min-height:52px}.btn-dock svg{width:24px;height:24px}.header-content{max-width:1800px}}@media (min-width: 1920px){.main-container,.header-content{max-width:2000px}.welcome-shell{max-width:1280px;padding:4rem;gap:3rem}.chat-section{width:480px}.setup-card{padding:3rem}}