:root{--bg: #0b1220;--bg-elevated: #121c2e;--bg-input: #1b2840;--surface: #16223a;--border: #233149;--text: #e8edf6;--text-dim: #8a98b0;--primary: #3b82f6;--primary-dim: #2563eb;--danger: #ef4444;--success: #22c55e;--bubble-mine: #2563eb;--bubble-theirs: #1f2c45;--header-h: 56px;--z-header: 20;--z-fab: 30;--z-banner: 80;--z-call: 100;--z-modal: 200;--z-toast: 300;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}#root{display:flex;flex-direction:column;height:100dvh;overflow:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea{font-family:inherit;font-size:16px}::placeholder{color:#93a1b8;opacity:1}.screen{display:flex;flex-direction:column;height:100dvh;background:var(--bg)}.app-header{display:flex;align-items:center;gap:10px;height:var(--header-h);padding:0 8px;padding-top:env(safe-area-inset-top);height:calc(var(--header-h) + env(safe-area-inset-top));background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-header)}.header-title{font-size:18px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-title{flex:1}.room-title-edit{display:flex;align-items:center;gap:6px;min-width:0;text-align:left;color:var(--text);font-size:18px;font-weight:600}.title-edit-icon{color:var(--text-dim);flex-shrink:0}.room-title-edit:active{opacity:.7}.header-actions{display:flex;gap:2px}.icon-btn{min-width:40px;height:40px;border-radius:10px;font-size:20px;display:grid;place-items:center}.icon-btn:active{background:var(--surface)}.icon-btn-active{color:var(--primary);background:var(--surface)}.icon-btn svg,.fab svg,.send-btn svg,.ctrl svg,.call-btn svg,.check svg{display:block}.empty{padding:40px 20px;text-align:center;color:var(--text-dim);line-height:1.6}.login-screen{display:flex;align-items:center;justify-content:center;height:100dvh;padding:24px}.login-card{width:100%;max-width:360px;text-align:center}.login-logo{margin-bottom:12px}.login-card h1{margin:0 0 4px;font-size:26px}.login-sub{margin:0 0 28px;color:var(--text-dim)}.field{display:block;text-align:left;margin-bottom:16px}.field span{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}.field input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);outline:none}.field input:focus{border-color:var(--primary)}.btn-primary{width:100%;padding:15px;border-radius:12px;background:var(--primary);color:#fff;font-size:16px;font-weight:600}.btn-primary:active{background:var(--primary-dim)}.btn-primary:disabled{opacity:.6}.form-error{color:var(--danger);font-size:14px;margin-bottom:14px}.form-error.inset{padding:10px 16px}.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.list-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}.list-item:active{background:var(--surface)}.list-item-body{flex:1;min-width:0}.list-item-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item-sub{font-size:14px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.unread-badge{flex-shrink:0;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}.avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex-shrink:0;object-fit:cover}.check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;color:#fff;font-size:14px}.check-on{background:var(--primary);border-color:var(--primary)}.fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;font-size:28px;box-shadow:0 6px 20px #2563eb80;display:grid;place-items:center;z-index:var(--z-fab);transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s}.fab:active{background:var(--primary-dim)}.group-setup{padding:12px 16px;border-bottom:1px solid var(--border)}.group-name-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);outline:none}.bottom-bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-elevated)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);background:#0000008c;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:360px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:20px}.modal-title{font-size:16px;font-weight:600;margin-bottom:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-actions .btn-primary{width:auto;padding:12px 20px}.btn-ghost{padding:12px 18px;border-radius:12px;color:var(--text-dim);font-size:16px;font-weight:600}.btn-ghost:active{background:var(--surface)}.sheet-backdrop{align-items:flex-end;padding:12px}.action-sheet{width:100%;max-width:480px;margin:0 auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.action-item{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;text-align:left;font-size:16px;color:var(--text);border-bottom:1px solid var(--border)}.action-item:active{background:var(--surface)}.action-item.danger{color:var(--danger)}.action-item.cancel{justify-content:center;color:var(--text-dim);font-weight:600;border-bottom:none}.room-screen{background:#0a101c}.messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px}.bubble-row{display:flex;max-width:100%}.bubble-row.mine{justify-content:flex-end}.bubble-row.group-start{margin-top:10px}.bubble{max-width:78%;padding:7px 12px 6px;border-radius:18px;background:var(--bubble-theirs);font-size:15px;line-height:1.35;position:relative;word-wrap:break-word;overflow-wrap:anywhere}.bubble-row.mine .bubble{background:var(--bubble-mine);border-bottom-right-radius:6px}.bubble-row.theirs .bubble{border-bottom-left-radius:6px}.bubble-row.mine:not(.group-start) .bubble{border-top-right-radius:6px}.bubble-row.theirs:not(.group-start) .bubble{border-top-left-radius:6px}.day-divider{display:flex;justify-content:center;margin:14px 0 8px}.day-divider span{font-size:12px;font-weight:600;color:var(--text-dim);background:var(--bg-elevated);border:1px solid var(--border);padding:3px 12px;border-radius:999px}.bubble-author{font-size:12px;font-weight:700;color:#7fb0ff;margin-bottom:2px}.bubble-text{white-space:pre-wrap}.bubble-meta{display:inline-flex;align-items:center;gap:3px;float:right;margin:5px 0 0 10px;line-height:1}.bubble-time{font-size:10px;color:#ffffff9e}.bubble-edited{font-size:10px;font-style:italic;color:#ffffff8c}.bubble-actionable{cursor:pointer}.bubble-actionable:active{filter:brightness(1.15)}.tick{color:#ffffffb3;display:block}.tick-read{color:#7dd3fc}.composer-wrap{background:var(--bg-elevated);border-top:1px solid var(--border)}.edit-banner{display:flex;align-items:center;gap:10px;padding:8px 12px 0}.edit-banner-icon{color:var(--primary);flex-shrink:0}.edit-banner-body{flex:1;min-width:0;border-left:2px solid var(--primary);padding-left:8px}.edit-banner-title{font-size:13px;font-weight:600;color:var(--primary)}.edit-banner-text{font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.composer-input{flex:1;min-width:0;padding:11px 16px;border-radius:22px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);outline:none;resize:none;max-height:140px;line-height:1.35;overflow-y:auto;transition:border-color .15s ease}.composer-input:focus{border-color:var(--primary)}.send-btn{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-size:18px;flex-shrink:0}.send-btn:disabled{opacity:.5}.call-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-call);background:#05080f;display:flex;flex-direction:column}.call-overlay.incoming{align-items:center;justify-content:center}.incoming-card{text-align:center;padding:32px}.incoming-title{font-size:16px;color:var(--text-dim)}.incoming-room{font-size:26px;font-weight:700;margin:8px 0 40px}.incoming-actions{display:flex;gap:48px;justify-content:center}.call-btn{width:68px;height:68px;border-radius:50%;font-size:26px;color:#fff;display:grid;place-items:center}.call-btn.accept{background:var(--success)}.call-btn.decline{background:var(--danger)}.call-status{position:absolute;top:0;left:0;right:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;background:linear-gradient(to bottom,rgba(5,8,15,.75),transparent);pointer-events:none}.call-status-name{font-size:18px;font-weight:600;color:#fff;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-status-sub{font-size:14px;color:#ffffffb3;font-variant-numeric:tabular-nums}.call-status-sub.connecting{animation:blink 1.4s ease-in-out infinite}.call-grid{flex:1;display:grid;gap:4px;padding:4px;padding-top:calc(4px + env(safe-area-inset-top))}.call-grid.count-1{grid-template-columns:1fr}.call-grid.count-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.call-grid.count-3,.call-grid.count-4{grid-template-columns:1fr 1fr}.video-tile{position:relative;background:#0b1220;border-radius:12px;overflow:hidden;min-height:0}.video-tile video{width:100%;height:100%;object-fit:cover}.video-tile video.mirror{transform:scaleX(-1)}.audio-tile{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at center,#1b2840,#0b1220)}.audio-pulse{color:var(--text-dim);animation:pulse 1.8s ease-in-out infinite}.audio-pulse svg{display:block}.calling-text{color:var(--text-dim);font-size:18px}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.tile-label{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:8px;background:#00000080;font-size:12px}.local-preview{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));width:96px;height:136px;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 16px #00000080}.call-controls{display:flex;justify-content:center;gap:20px;padding:20px 0 calc(28px + env(safe-area-inset-bottom))}.ctrl{width:60px;height:60px;border-radius:50%;background:#ffffff1f;font-size:24px;display:grid;place-items:center}.ctrl.off{background:#ffffff59}.ctrl.hangup{background:var(--danger)}.ctrl:active{transform:scale(.92)}.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:var(--z-toast);max-width:min(92vw,420px);padding:12px 18px;border-radius:12px;background:#3a1212;border:1px solid var(--danger);color:#ffe4e4;font-size:14px;line-height:1.4;text-align:center;box-shadow:0 8px 24px #00000080;cursor:pointer}.connection-banner{position:fixed;top:0;left:0;right:0;z-index:var(--z-banner);display:flex;align-items:center;justify-content:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:#92400e;color:#fff;font-size:13px;font-weight:500}.connection-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.empty-room{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;color:var(--text-dim)}.empty-room svg{opacity:.5;margin-bottom:6px}.empty-room p{margin:0;color:var(--text);font-weight:600;font-size:16px}.empty-room span{font-size:14px;max-width:260px;text-align:center;line-height:1.5}.skeleton-line,.skeleton-circle,.skeleton-bubble{background:linear-gradient(90deg,var(--surface) 25%,var(--bg-input) 37%,var(--surface) 63%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-item{pointer-events:none}.skeleton-circle{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-line{height:12px;border-radius:6px}.skeleton-line.sm{height:10px;margin-top:8px}.messages-skeleton{display:flex;flex-direction:column;gap:10px;padding:8px 0}.skeleton-bubble{height:38px;border-radius:18px;max-width:78%}.skeleton-bubble.theirs{align-self:flex-start;border-bottom-left-radius:6px}.skeleton-bubble.mine{align-self:flex-end;border-bottom-right-radius:6px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}