*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#111114;color:#e4e4e7;min-height:100dvh;overflow:hidden}#app{min-height:100dvh;display:flex;flex-direction:column}.join-screen{display:flex;align-items:center;justify-content:center;min-height:100dvh;background:#111114;overflow:auto}.join-card{background:#1a1a1f;border-radius:12px;padding:40px;margin:16px;width:100%;max-width:440px;box-shadow:0 4px 24px #0006;border:1px solid #2a2a30}.app-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#2563eb);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.6rem;color:#fff;box-shadow:0 4px 16px #3b82f64d}.app-title{font-family:Outfit,sans-serif;font-size:2rem;font-weight:700;text-align:center;margin-bottom:8px;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.app-title-meet{-webkit-text-fill-color:#fff}.input-name{width:100%;padding:12px 16px;border-radius:8px;border:1px solid #3f3f46;background:#27272a;color:#e4e4e7;font-size:1rem;outline:none;transition:border-color .2s,background .2s;margin-top:24px}.input-name::placeholder{color:#71717a}.input-name:focus{border-color:#3b82f6;background:#1a1a1f}.btn-join{width:100%;padding:12px;border:none;border-radius:8px;background:#3b82f6;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;margin-top:8px;transition:background .2s}.btn-join:hover{background:#2563eb}.btn-join:disabled{opacity:.5;cursor:not-allowed}.error-msg{color:#f87171;font-size:.85rem;margin-top:12px;text-align:center}.video-room{display:flex;flex-direction:column;height:100dvh;background:#111114}.room-header{display:flex;align-items:center;justify-content:center;position:relative;padding:12px 20px;background:#1a1a1f;border-bottom:1px solid #2a2a30}.room-header-icon{font-size:1rem;margin-right:8px;color:#60a5fa}.room-header-title{font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.room-header-title-meet{-webkit-text-fill-color:#fff}.header-actions{position:absolute;right:20px;display:flex;align-items:center;gap:12px;font-size:.85rem;color:#71717a}.room-body{flex:1;display:flex;overflow:hidden;min-height:0}.participants-grid{flex:1 1 0;display:grid;gap:12px;padding:16px;grid-template-columns:1fr;grid-template-rows:1fr;min-height:0;overflow:hidden}.participants-grid.grid-1{grid-template-columns:1fr;grid-template-rows:1fr;max-width:900px;margin:0 auto;width:100%}.participants-grid.grid-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.participants-grid.grid-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.participants-grid.grid-many{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}.controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;background:#1a1a1f;border-top:1px solid #2a2a30}.controls-group{display:flex;align-items:center;gap:8px;padding-right:8px;margin-right:8px;border-right:1px solid #2a2a30}.ctrl-btn{position:relative;height:44px;padding:0 18px;border-radius:10px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;font-weight:500;transition:background .2s,box-shadow .2s,color .2s;background:#27272a;color:#a1a1aa;white-space:nowrap}.ctrl-btn svg{flex-shrink:0}.ctrl-label{font-size:.8rem}.ctrl-btn:hover{background:#3f3f46}.ctrl-btn.active{background:#3b82f626;color:#60a5fa}.ctrl-btn.active:hover{background:#3b82f640}.ctrl-btn.off{background:#ef444426;color:#f87171}.ctrl-btn.off:hover{background:#ef444440}.chat-btn{margin-left:0}.leave-btn{background:#dc2626;color:#fff;margin-left:8px}.leave-btn:hover{background:#b91c1c}.unread-badge{position:absolute;top:-4px;right:-4px;background:#dc2626;color:#fff;font-size:.65rem;font-weight:700;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid #1a1a1f;line-height:1;box-shadow:0 2px 6px #dc262666;animation:badgePop .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none}@keyframes badgePop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.participant{position:relative;background:#1a1a1f;border-radius:12px;overflow:hidden;min-height:0;height:100%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;border:1px solid #2a2a30}.participant video{width:100%;height:100%;object-fit:cover}.participant--screen{background:#000}.participant--screen video{object-fit:contain}.participant-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#18181b}.participant-avatar{width:72px;height:72px;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff}.participant-info{position:absolute;bottom:8px;left:8px;background:#000000a6;padding:4px 10px;border-radius:6px;font-size:.8rem;color:#e4e4e7;display:flex;align-items:center;gap:6px}.mic-off-icon{color:#f87171;font-size:.7rem;font-weight:600}.fullscreen-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:6px;border:none;background:#00000080;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,background .2s}.participant:hover .fullscreen-btn{opacity:1}.fullscreen-btn:hover{background:#000000bf}.participant:fullscreen{background:#000}.participant:fullscreen video{object-fit:contain}.participant:fullscreen .fullscreen-btn{opacity:1}.status-msg{text-align:center;color:#71717a;font-size:.9rem;padding:20px}.chat-panel{width:0;overflow:hidden;display:flex;flex-direction:column;background:#1a1a1f;border-left:1px solid #2a2a30;transition:width .25s ease}.chat-panel.open{width:320px;min-width:320px}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2a2a30;cursor:pointer;font-weight:600;font-size:.9rem;color:#e4e4e7}.chat-close{color:#71717a;font-size:1rem;background:none;border:none;cursor:pointer;padding:0;line-height:1}.chat-close:hover{color:#e4e4e7}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#111114}.chat-empty{color:#52525b;font-size:.85rem;text-align:center;margin-top:20px}.chat-msg{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#27272a;border-radius:12px;max-width:85%;box-shadow:0 1px 2px #0003}.chat-msg-self{align-self:flex-end;background:#3b82f633}.chat-msg-author{font-size:.7rem;color:#60a5fa;font-weight:600}.chat-msg-text{font-size:.85rem;color:#e4e4e7;word-break:break-word}.chat-input-bar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #2a2a30;background:#1a1a1f}.chat-input-bar input{flex:1;padding:8px 12px;border-radius:20px;border:1px solid #3f3f46;background:#27272a;color:#e4e4e7;font-size:.85rem;outline:none;transition:border-color .2s}.chat-input-bar input:focus{border-color:#3b82f6;background:#1a1a1f}.chat-input-bar button{padding:8px 16px;border:none;border-radius:20px;background:#3b82f6;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s}.chat-input-bar button:hover{background:#2563eb}.chat-input-bar button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.room-header{flex-direction:column;gap:8px;padding:10px 16px;text-align:center}.room-body{flex-direction:column;overflow:hidden}.participants-grid{flex:1 1 0;min-height:0;padding:8px;gap:8px;overflow:hidden}.participants-grid.grid-1,.participants-grid.grid-2{max-width:none;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;align-content:center;overflow-y:auto}.participants-grid.grid-1 .participant,.participants-grid.grid-2 .participant{aspect-ratio:16 / 9;height:auto}.participants-grid.grid-4,.participants-grid.grid-many{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(0,1fr)}.chat-panel{width:100%!important;min-width:0!important;height:0;border-left:none;transition:height .25s ease}.chat-panel.open{height:25vh;flex-shrink:0;border-top:1px solid #2a2a30}.controls{gap:6px;padding:10px 12px;flex-wrap:wrap}.controls-group{gap:6px;padding-right:6px;margin-right:6px}.ctrl-btn{height:40px;padding:0 12px}.ctrl-label{display:none}.ctrl-btn svg{width:18px;height:18px}}