.App{height:100%;display:flex;flex-direction:row;width:100%}.App--loading{justify-content:center;align-items:center;flex-direction:column;gap:1.5em;background:var(--bg-base)}.loading-spinner{width:40px;height:40px;border:var(--border-width) var(--border-style) var(--border-subtle);border-top-color:var(--neon-cyan);border-radius:50%;animation:loading-spin .8s linear infinite;box-shadow:var(--glow-sm)}.loading-text{color:var(--text-secondary);font-size:.85em;font-weight:500;letter-spacing:.08em;text-transform:uppercase}@keyframes loading-spin{to{transform:rotate(360deg)}}.app-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999}.meeting-name-input{width:100%;max-width:520px;text-align:center;padding:2em 0 0}.meeting-hero-title{font-size:1.8em;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;color:var(--text-primary)}.meeting-hero-gradient{color:var(--neon-cyan);text-shadow:var(--hero-text-shadow)}.meeting-hero-subtitle{font-style:var(--hero-style);color:var(--text-secondary);font-size:.88em;margin:0 0 2em}.meeting-form{display:flex;gap:6px;width:100%}.meeting-form input{flex:1;height:2.6em;font-size:.95em;padding:0 .8em;border:var(--border-width) var(--border-style) var(--border-subtle);border-radius:var(--radius-pill);background:var(--bg-surface)}.meeting-form input:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-sm)}.meeting-form-submit{padding:0 1.4em;font-size:.88em;font-weight:600;background:transparent;border:var(--border-width) var(--border-style) var(--neon-cyan);border-radius:var(--radius-pill);color:var(--neon-cyan);white-space:nowrap;text-transform:var(--button-transform);letter-spacing:var(--button-spacing);transition:all var(--transition-fast)}.meeting-form-submit:hover{background:var(--neon-cyan);color:var(--bg-base);box-shadow:var(--hover-shadow)}.meeting{flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:2em;overflow-y:auto;background:var(--bg-base)}.meeting-quickjoin{width:100%;max-width:720px;margin-top:2em}.meeting-quickjoin-title{font-size:.7em;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:10px}.meeting-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.meeting-room-card{background:var(--bg-surface);border:var(--border-width) var(--border-style) var(--border-subtle);border-radius:var(--card-radius);padding:var(--card-padding);transition:all var(--transition-default)}.meeting-room-card:hover{border-color:var(--neon-cyan);transform:var(--hover-transform);box-shadow:var(--hover-shadow)}.meeting-room-card-name{font-size:.95em;font-weight:600;color:var(--text-primary);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meeting-room-card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.meeting-room-card-count{font-size:.75em;color:var(--text-secondary)}.meeting-room-card-avatars{display:flex}.meeting-room-card-avatar{width:22px;height:22px;border-radius:var(--radius-avatar);display:flex;align-items:center;justify-content:center;font-size:.55em;font-weight:700;color:#fff;text-transform:uppercase;border:1.5px solid var(--bg-surface);margin-left:-5px}.meeting-room-card-avatar:first-child{margin-left:0}.meeting-room-card-join{width:100%;margin-top:8px;padding:5px 0;font-size:.78em;font-weight:600;background:transparent;border:var(--border-width) var(--border-style) var(--neon-cyan);border-radius:var(--radius);color:var(--neon-cyan);text-transform:var(--button-transform);letter-spacing:var(--button-spacing);transition:all var(--transition-fast)}.meeting-room-card-join:hover{background:var(--neon-cyan);color:var(--bg-base);box-shadow:var(--hover-shadow)}.meeting-empty{text-align:center;color:var(--text-muted);padding:2em 0;font-size:.85em;letter-spacing:.02em}.meeting-active{flex-grow:1;display:flex;flex-direction:column;width:100%;height:100%;position:relative}.meeting-leave-btn{position:absolute;top:10px;right:10px;z-index:10;padding:6px 16px;font-size:.8em;font-weight:600;background:transparent;border:var(--border-width) var(--border-style) var(--neon-magenta);border-radius:var(--radius);color:var(--neon-magenta);text-transform:var(--button-transform);letter-spacing:var(--button-spacing);transition:all var(--transition-fast);backdrop-filter:blur(6px)}.meeting-leave-btn:hover{background:var(--neon-magenta);color:#fff;box-shadow:var(--hover-shadow)}.sidebar{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--bg-surface);border-right:var(--border-width) var(--border-style) var(--border-subtle);transition:width var(--transition-default),min-width var(--transition-default),max-width var(--transition-default),padding var(--transition-default)}.sidebar-body{flex:0 1 auto;overflow-y:auto;padding:0 8px;min-height:0}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 4px;margin:0;cursor:default;user-select:none}.sidebar-section-label{font-size:.65em;font-weight:var(--section-label-weight);font-style:var(--section-label-style);text-transform:uppercase;letter-spacing:var(--section-label-spacing);color:var(--text-muted)}.sidebar-section-count{font-size:.6em;font-weight:600;background:var(--bg-hover);color:var(--neon-cyan);padding:1px 6px;border-radius:var(--radius);border:var(--border-width) var(--border-style) var(--border-glow);min-width:14px;text-align:center}.sidebar-room{margin-bottom:1px;transition:background-color var(--transition-fast)}.sidebar-room:hover{background-color:var(--bg-hover)}.sidebar-room-btn{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;padding:5px 6px;color:var(--text-primary);font-size:.88em;font-weight:500;text-align:left;transition:color var(--transition-fast)}.sidebar-room-btn:hover{background:none;color:var(--neon-cyan);text-shadow:var(--glow-sm);border-color:transparent;box-shadow:none}.sidebar-room-btn:focus{outline:none}.sidebar-room-icon{font-family:var(--font-mono);font-size:1em;color:var(--neon-cyan);opacity:.5;flex-shrink:0}.sidebar-full .sidebar-room-icon-compact-only{display:none}.sidebar-room-name{overflow:hidden;text-overflow:ellipsis;flex:1}.sidebar-room-count{font-size:.65em;font-weight:700;color:var(--neon-cyan);background:transparent;border:var(--border-width) var(--border-style) var(--neon-dim);padding:0 5px;border-radius:var(--radius);min-width:12px;text-align:center;flex-shrink:0}.sidebar-participants{padding:0 0 2px 18px}.sidebar-participant{display:flex;align-items:center;gap:6px;padding:2px 6px;font-size:.8em;color:var(--text-secondary)}.sidebar-participant-self{background:var(--self-highlight-bg);border:var(--self-highlight-border);border-radius:var(--radius);cursor:text}.sidebar-name-editable:after{content:" \2710";opacity:0;transition:opacity var(--transition-fast);color:var(--neon-cyan)}.sidebar-participant-self:hover .sidebar-name-editable:after{opacity:1}.sidebar-rename-input{background:var(--bg-elevated);border:var(--border-width) var(--border-style) var(--neon-cyan);border-radius:var(--radius);color:var(--text-primary);font-size:inherit;padding:1px 4px;width:100%;height:auto;outline:none}.sidebar-avatar{width:24px;height:24px;border-radius:var(--radius-avatar);display:flex;align-items:center;justify-content:center;font-size:.6em;font-weight:700;color:#fff;flex-shrink:0;position:relative;text-transform:uppercase;letter-spacing:.02em}.sidebar-avatar-small{width:20px;height:20px;font-size:.55em}.sidebar-lobby{padding:4px 8px 8px;margin-top:4px;border-top:var(--border-width) var(--border-style) var(--border-subtle);flex-shrink:1;overflow-y:auto;min-height:0}.sidebar-footer{margin-top:auto;padding:6px 8px 8px;border-top:var(--border-width) var(--border-style) var(--border-subtle);display:flex;flex-direction:column;flex:1 1 0;min-height:180px;overflow:hidden}.sidebar-bottom-row{display:flex;gap:4px;flex-shrink:0;margin-top:4px}.sidebar-toggle{flex:1;padding:4px;font-size:1em;background:var(--bg-elevated);border:var(--border-width) var(--border-style) var(--border-subtle);border-radius:var(--radius);color:var(--text-secondary);transition:all var(--transition-fast)}.sidebar-toggle{position:relative}.sidebar-toggle:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:var(--glow-sm)}.sidebar-unread-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--neon-cyan);box-shadow:0 0 6px var(--neon-cyan),0 0 12px var(--neon-cyan);animation:unread-pulse 2s ease-in-out infinite;pointer-events:none}@keyframes unread-pulse{0%,to{opacity:1}50%{opacity:.4}}.sidebar-theme-wrapper{position:relative;flex-shrink:0}.sidebar-theme-btn{padding:4px 8px;font-size:1em;background:var(--bg-elevated);border:var(--border-width) var(--border-style) var(--border-subtle);border-radius:var(--radius);color:var(--neon-cyan);cursor:pointer;transition:all var(--transition-fast);user-select:none;-webkit-user-select:none;align-self:stretch}.sidebar-theme-btn:hover{border-color:var(--neon-cyan);box-shadow:var(--glow-sm)}.sidebar-theme-popup{position:absolute;bottom:calc(100% + 4px);right:0;background:var(--bg-elevated);border:var(--border-width) var(--border-style) var(--border-subtle);border-radius:var(--radius);padding:4px;max-height:320px;overflow-y:auto;z-index:200;min-width:160px;box-shadow:0 -4px 16px #0000004d;display:flex;flex-direction:column;gap:1px}.sidebar-theme-option{display:block;width:100%;padding:5px 10px;font-size:.8em;font-family:inherit;background:none;border:none;border-radius:calc(var(--radius) - 2px);color:var(--text-secondary);text-align:left;cursor:pointer;white-space:nowrap;transition:background var(--transition-fast),color var(--transition-fast)}.sidebar-theme-option:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-theme-option-active{color:var(--neon-cyan);font-weight:600}.sidebar-theme-option-active:before{content:"\25c8"}.sidebar-full{width:280px;min-width:280px}.sidebar-small{min-width:60px;max-width:60px;overflow:visible}.sidebar-small .sidebar-header-content{justify-content:center;padding:12px 4px 8px}.sidebar-small .sidebar-body{padding:0 4px;flex:0 0 auto;overflow-y:visible}.sidebar-small .sidebar-section-header{justify-content:center;padding:8px 0 2px}.sidebar-small .sidebar-section-label{display:none}.sidebar-small .sidebar-section-count{font-size:.55em}.sidebar-small .sidebar-room-btn{justify-content:center;padding:6px 0;position:relative}.sidebar-small .sidebar-room-btn:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:6px;background:var(--bg-elevated);color:var(--text-primary);padding:4px 10px;border-radius:var(--radius);border:var(--border-width) var(--border-style) var(--border-subtle);font-size:.8em;white-space:nowrap;pointer-events:none;opacity:0;transition:none;z-index:100}.sidebar-small .sidebar-room-btn:hover:after{opacity:1}.sidebar-small .sidebar-room-name,.sidebar-small .sidebar-room-count{display:none}.sidebar-small .sidebar-room-icon{font-size:1.1em;opacity:.7}.sidebar-small .sidebar-participants{padding:0;display:flex;flex-direction:column;align-items:center;gap:2px}.sidebar-small .sidebar-participant{justify-content:center;padding:1px 0}.sidebar-small .sidebar-participant>span:last-child{display:none}.sidebar-small .sidebar-lobby{padding:0 4px}.sidebar-small .sidebar-lobby .sidebar-participant{justify-content:center;padding:1px 0}.sidebar-small .sidebar-lobby .sidebar-participant>span:last-child{display:none}.sidebar-small .sidebar-footer{min-height:auto;flex:0 0 auto;margin-top:auto;padding:0 4px 8px;border-top:none}.sidebar-small .sidebar-bottom-row{flex-direction:column;align-items:stretch}.sidebar-header{flex-shrink:0}.sidebar-header-accent{display:var(--accent-display);height:var(--accent-height);background:var(--accent-bg);box-shadow:var(--glow-md)}.sidebar-header-content{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}.sidebar-header-icon{font-size:1.2em;color:var(--neon-cyan);opacity:.6}.sidebar-header-title{margin:0;font-size:1em;letter-spacing:.04em}.chat{background-color:var(--bg-base);border-radius:var(--radius);padding:6px 0;width:100%;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column-reverse;padding:0 4px;min-height:0}.chat-bubble{background-color:var(--bg-elevated);overflow-wrap:break-word;margin-bottom:3px;border-radius:var(--radius);padding:5px 7px;white-space:pre-wrap;word-break:break-word;border-left:var(--chat-bubble-border);font-size:.85em;line-height:1.45}.chat-bubble-header{display:flex;align-items:center;gap:5px;margin-bottom:1px}.chat-avatar{width:18px;height:18px;border-radius:var(--radius-avatar);display:flex;align-items:center;justify-content:center;font-size:.5em;font-weight:700;color:#fff;flex-shrink:0;text-transform:uppercase}.chat-sender{font-size:.8em;font-weight:600}.chat-content{padding-left:23px;color:var(--text-secondary);font-size:.95em}.chat-new-divider{display:flex;align-items:center;gap:6px;margin:4px 0;color:var(--neon-cyan);font-size:.6em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.7}.chat-new-divider:before,.chat-new-divider:after{content:"";flex:1;height:1px;background:var(--neon-cyan);opacity:.4}.chat-empty{text-align:center;color:var(--text-muted);font-size:.75em;padding:10px 0;letter-spacing:.04em;text-transform:uppercase}.chat-input-form{display:flex;gap:4px;padding:4px 4px 0;flex-shrink:0}.chat-input{min-width:0;flex:1;height:2em;font-size:.82em;border-radius:var(--radius-pill);padding:0 8px;border:var(--border-width) var(--border-style) var(--border-subtle);background:var(--bg-elevated)}.chat-input:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-sm)}.chat-send-btn{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-avatar);background:transparent;border:var(--border-width) var(--border-style) var(--neon-cyan);color:var(--neon-cyan);flex-shrink:0;font-size:.78em;transition:all var(--transition-fast)}.chat-send-btn:hover{background:var(--neon-cyan);color:var(--bg-base);box-shadow:var(--glow-md)}:root{--bg-base: #0a0a0f;--bg-surface: #101018;--bg-elevated: #16161f;--bg-hover: #1e1e2a;--neon-cyan: #00e5ff;--neon-magenta: #ff2d7b;--neon-dim: #00e5ff66;--text-primary: #d8dae0;--text-secondary: #6b6e7a;--text-muted: #3d3f4a;--border-subtle: #1a1a26;--border-glow: #00e5ff22;--radius: 2px;--radius-avatar: 2px;--border-width: 1px;--border-style: solid;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--heading-weight: 700;--heading-transform: none;--heading-spacing: -.02em;--section-spacing: .1em;--transition-fast: .12s ease;--transition-default: .2s ease;--glow-sm: 0 0 6px #00e5ff33;--glow-md: 0 0 12px #00e5ff44;--h1-size: 2.2em;--h1-weight: var(--heading-weight);--h1-style: normal;--h2-size: 1.2em;--h2-weight: 600;--h2-style: normal;--h2-letter-spacing: .02em;--root-font-size: 15px;--root-line-height: 1.6;--accent-height: 2px;--accent-bg: var(--neon-cyan);--accent-display: block;--button-transform: uppercase;--button-spacing: .06em;--card-radius: var(--radius);--card-padding: 14px;--chat-bubble-border: 2px solid transparent;--hover-transform: translateY(-1px);--hover-shadow: var(--glow-sm);--hero-text-shadow: var(--glow-sm);--hero-style: normal;--section-label-style: normal;--section-label-weight: 700;--section-label-spacing: .1em;--self-highlight-bg: var(--bg-hover);--self-highlight-border: 1px solid var(--neon-dim);--selection-bg: #00e5ff33;--radius-pill: var(--radius);font-family:var(--font-body);font-size:var(--root-font-size);line-height:var(--root-line-height);font-weight:400;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;margin:0;overflow-y:hidden}::selection{background:var(--selection-bg);color:#fff}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--neon-dim)}a{font-weight:500;color:var(--neon-cyan);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:#fff;text-shadow:var(--glow-sm)}body{margin:0;display:flex;place-items:center;min-width:320px;height:100%;width:100%}h1{font-family:var(--font-heading);font-size:var(--h1-size);line-height:1.15;font-weight:var(--h1-weight);font-style:var(--h1-style);letter-spacing:var(--heading-spacing);text-transform:var(--heading-transform)}h2{font-family:var(--font-heading);font-size:var(--h2-size);font-weight:var(--h2-weight);font-style:var(--h2-style);letter-spacing:var(--h2-letter-spacing)}h3{font-size:.7em;font-weight:600;text-transform:uppercase;letter-spacing:var(--section-spacing);color:var(--text-secondary)}button{border-radius:var(--radius);border:var(--border-width) var(--border-style) var(--border-subtle);padding:.5em 1em;font-size:.9em;font-weight:500;font-family:inherit;background-color:var(--bg-elevated);transition:all var(--transition-fast);color:var(--text-primary)}button:hover{border-color:var(--neon-cyan);box-shadow:var(--hover-shadow)}button:focus,button:focus-visible{outline:1px solid var(--neon-cyan);outline-offset:1px}#root{height:100%;width:100%}.room-link{background:none;border:none;color:var(--text-primary);font-weight:500;font-size:inherit;cursor:pointer;padding:0;text-align:left;transition:color var(--transition-fast)}.room-link:hover{color:var(--neon-cyan);text-shadow:var(--glow-sm)}input{margin:0;border:var(--border-width) var(--border-style) var(--border-subtle);height:2.6em;padding:0 .75em;box-shadow:none;box-sizing:border-box;font-size:.95em;font-family:inherit;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);background-color:var(--bg-elevated);border-radius:var(--radius);color:var(--text-primary)}input::placeholder{color:var(--text-muted)}input:focus{outline:none;border-color:var(--neon-cyan);box-shadow:var(--glow-sm)}[data-theme=pride] .meeting-hero-gradient{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}[data-theme=pride] .meeting-form-submit,[data-theme=pride] .meeting-room-card-join{border:2px solid transparent;background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box;color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)}[data-theme=pride] .meeting-form-submit:hover,[data-theme=pride] .meeting-room-card-join:hover{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787);color:#fff;-webkit-text-fill-color:#fff}[data-theme=pride] .meeting-room-card{border:1px solid transparent;background-origin:border-box;background-clip:padding-box,border-box;background-image:linear-gradient(var(--bg-surface),var(--bg-surface)),linear-gradient(135deg,#E4030344,#FF8C0044,#FFED0044,#00802644,#004DFF44,#75078744)}[data-theme=pride] .sidebar-section-label{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=pride] .sidebar-room-btn:hover{text-shadow:none}[data-theme=pride] .sidebar-room-btn:hover .sidebar-room-name{display:inline-block;background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=pride] .sidebar-room-btn{border:2px solid transparent;padding:3px 4px}[data-theme=pride] .sidebar-toggle{border-width:2px;padding:3px}[data-theme=pride] .sidebar-toggle:hover{border-color:transparent;color:var(--text-primary);background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box,linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box;box-shadow:none}[data-theme=pride] .sidebar-unread-dot{background:linear-gradient(135deg,#E40303,#FF8C00,#FFED00);box-shadow:0 0 6px #ff8c00,0 0 12px #e40303}[data-theme=pride] .chat-input:focus{border:2px solid transparent;background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box,linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box;box-shadow:0 0 4px #e4030333,0 0 8px #ff8c0022}[data-theme=pride] .chat-send-btn{border:2px solid transparent;background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box,linear-gradient(135deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box}[data-theme=pride] .chat-send-btn svg{stroke:url(#pride-gradient)}[data-theme=pride] .chat-send-btn:hover{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787);color:#fff}[data-theme=pride] .chat-send-btn:hover svg{stroke:#fff}[data-theme=pride] input:focus{border:2px solid transparent;background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box,linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box;box-shadow:0 0 4px #e4030333,0 0 8px #ff8c0022}[data-theme=pride] button:focus-visible{outline:none;border-color:transparent;background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box,linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787) border-box;box-shadow:0 0 4px #e4030333,0 0 8px #ff8c0022}