:root{--bg:#070a1a;--panel:#0e1230;--panel-2:#1a1f45;--border:#262c5c;--text:#eceef8;--text-dim:#98a0c4;--accent:#007eff;--on-accent:#fff;--bubble-out:#2400ff;--bubble-in:#1a1f45;--live:#ffbf00}body.light{--bg:#f4f6fc;--panel:#fff;--panel-2:#e8ecf8;--border:#d3daee;--text:#0d1030;--text-dim:#5c6486;--accent:#007eff;--on-accent:#fff;--bubble-out:#d6e8ff;--bubble-in:#fff;--live:#807040}body.light .bubble.out{color:#0d1030}body.light .messages{background:radial-gradient(circle at 20% 30%, #007eff0f, transparent 40%), radial-gradient(circle at 80% 70%, #007eff0f, transparent 40%), var(--bg)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}button{font:inherit;cursor:pointer}input{font:inherit}.splash{place-items:center;height:100%;font-size:64px;display:grid}.register{background:var(--bg);place-items:center;height:100%;display:grid}.register-card{background:var(--panel);border:1px solid var(--border);text-align:center;border-radius:12px;flex-direction:column;gap:16px;width:min(420px,92vw);padding:40px;display:flex}.register-logo{font-size:56px}.register-logo-img{border-radius:20px;align-self:center;width:88px;height:88px}.register-card h1{font-size:26px;font-weight:600}.register-tagline{color:var(--text-dim);font-size:13px;line-height:1.5}.register-form{flex-direction:column;gap:16px;display:flex}.register-card label{text-align:left;color:var(--text-dim);flex-direction:column;gap:6px;font-size:13px;display:flex}.register-card input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;padding:10px 12px}.register-card input:focus{border-color:var(--accent)}.register-card button{background:var(--accent);color:var(--on-accent);border:none;border-radius:24px;padding:11px;font-weight:600}.register-card button:disabled{opacity:.6;cursor:default}.register-card button.link{color:var(--accent);background:0 0;padding:0;font-weight:400}.register-hint{color:var(--text-dim);font-size:14px}.register-error{color:#f15c6d;font-size:13px}.register-mockbadge{color:var(--live);border:1px dashed var(--live);border-radius:6px;align-self:center;padding:4px 8px;font-size:11px}.layout{grid-template-columns:minmax(280px,30%) 1fr;height:100%;display:grid}.sidebar{border-right:1px solid var(--border);flex-direction:column;min-width:0;display:flex}.sidebar-content{flex-direction:column;flex:1;min-height:0;display:flex}.tabbar{background:var(--panel-2);border-top:1px solid var(--border);display:flex}.tab{color:var(--text-dim);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 0 10px;font-size:11px;display:flex}.tab .tab-icon{justify-content:center;align-items:center;display:flex}.tab.active{color:var(--accent)}.panel{background:var(--panel);flex-direction:column;height:100%;display:flex}.panel-header{background:var(--panel-2);align-items:center;min-height:59px;padding:18px 16px;font-size:18px;font-weight:600;display:flex}.panel-body{flex-direction:column;gap:14px;padding:20px 16px;display:flex;overflow-y:auto}.panel-note{color:var(--text-dim);font-size:13px;line-height:1.5}.panel-field{color:var(--text-dim);flex-direction:column;gap:6px;font-size:13px;display:flex}.panel-field input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;padding:10px 12px}.panel-field input:focus{border-color:var(--accent)}.panel-btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:24px;padding:11px;font-weight:600}.panel-btn:disabled{opacity:.5;cursor:default}.panel-msg{color:var(--text-dim);font-size:13px}.setting-row{border-bottom:1px solid #8696a014;padding:12px 4px}.setting-toggle{justify-content:space-between;align-items:center;gap:12px;display:flex}.switch{background:var(--panel-2);border:none;border-radius:12px;flex-shrink:0;width:44px;height:24px;transition:background .15s;position:relative}.switch .knob{background:var(--text-dim);border-radius:50%;width:18px;height:18px;transition:transform .15s,background .15s;position:absolute;top:3px;left:3px}.switch.on{background:var(--accent)}.switch.on .knob{background:#fff;transform:translate(20px)}.switch:disabled{opacity:.4;cursor:default}.setting-title{color:var(--text);font-size:15px}.setting-sub{color:var(--text-dim);margin-top:2px;font-size:12px}.profile-avatar{width:88px;height:88px;font-size:32px}.chatlist{background:var(--panel);border-right:none;flex-direction:column;flex:1;min-height:0;display:flex}.chatlist-header{background:var(--panel-2);align-items:center;gap:12px;min-height:59px;padding:10px 16px;display:flex}.chatlist-title{flex:1;font-size:16px;font-weight:600}.chatlist-header.selection{background:var(--panel)}.hdr-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;width:34px;height:34px;font-size:17px;display:grid}.hdr-btn:hover{background:var(--panel-2)}.hdr-menu{position:relative}.menu-pop{z-index:20;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;min-width:160px;padding:4px;position:absolute;top:38px;right:0;box-shadow:0 6px 20px #0006}.menu-pop button{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:10px 12px;font-size:14px;display:block}.menu-pop button:hover{background:var(--panel)}.chatitem.selected{background:#007eff26}.chatitem{-webkit-user-select:none;user-select:none}.chatlist-search{border-bottom:1px solid var(--border);padding:8px 12px}.chatlist-search input{background:var(--panel-2);width:100%;color:var(--text);border:none;border-radius:8px;outline:none;padding:8px 12px;font-size:13px}.chatlist-items{flex:1;overflow-y:auto}.chatlist-empty{color:var(--text-dim);text-align:center;padding:24px;font-size:13px}.chatitem{width:100%;color:var(--text);text-align:left;background:0 0;border:none;border-bottom:1px solid #8696a014;align-items:center;gap:12px;padding:12px 16px;display:flex}.chatitem:hover,.chatitem.active{background:var(--panel-2)}.chatitem-mid{flex:1;min-width:0}.chatitem-name{font-size:15px}.chatitem-preview{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:13px;overflow:hidden}.live-preview{color:var(--live);font-style:italic}.chatitem-side{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.chatitem-time{color:var(--text-dim);font-size:11px}.badge{background:var(--accent);color:var(--on-accent);border-radius:12px;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;display:grid}.avatar{color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;font-size:15px;font-weight:600;display:grid}.chatview{background:var(--bg);flex-direction:column;min-width:0;display:flex}.chatview.empty{place-items:center;display:grid}.empty-inner{text-align:center;color:var(--text-dim);justify-items:center;gap:8px;display:grid}.empty-inner h2{color:var(--text);font-weight:500}.empty-e2e{margin-top:16px;font-size:12px}.chatview-header{background:var(--panel-2);align-items:center;gap:12px;min-height:59px;padding:10px 16px;display:flex}.chatview-headmid{flex:1;min-width:0}.chatview-name{font-size:15px;font-weight:500}.chatview-status{color:var(--text-dim);font-size:12px}.chatview-status.typing{color:var(--live)}.live-toggle{border:1px solid var(--border);color:var(--text-dim);background:0 0;border-radius:16px;padding:6px 12px;font-size:12px}.live-toggle.waiting{border-color:var(--live);color:var(--live)}.live-toggle.on{background:var(--live);border-color:var(--live);color:#1a1400;font-weight:600}.messages{background:radial-gradient(circle at 20% 30%, #2400ff1a, transparent 40%), radial-gradient(circle at 80% 70%, #2400ff1a, transparent 40%), var(--bg);flex-direction:column;flex:1;gap:4px;padding:20px 8%;display:flex;overflow-y:auto}.chat-empty{color:var(--text-dim);text-align:center;align-self:center;margin-top:40px;font-size:14px}.e2e-banner{color:var(--text-dim);text-align:center;background:#ffd16614;border-radius:8px;align-self:center;max-width:480px;margin-bottom:12px;padding:6px 14px;font-size:12px}.bubble{word-break:break-word;border-radius:8px;align-items:flex-end;gap:8px;max-width:65%;padding:7px 10px;font-size:14px;line-height:1.35;display:flex}.bubble.in{background:var(--bubble-in);border-top-left-radius:0;align-self:flex-start}.bubble.out{background:var(--bubble-out);border-top-right-radius:0;align-self:flex-end}.bubble.ghost{opacity:.75;border:1px dashed var(--live);font-style:italic;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.45}}.bubble-meta{color:var(--text-dim);white-space:nowrap;align-items:center;gap:3px;font-size:10px;display:inline-flex;transform:translateY(2px)}.tick.sent,.tick.delivered{color:var(--text-dim)}.tick.read{color:#53bdeb}.composer{background:var(--panel-2);align-items:flex-end;gap:4px;padding:8px 10px;display:flex}.composer-field{background:var(--panel);border:1px solid var(--border);border-radius:20px;flex:1;align-items:flex-end;gap:0;min-width:0;padding:2px 4px;display:flex}.composer input,.composer textarea{color:var(--text);background:0 0;border:0;border-radius:20px;outline:none;flex:1;min-width:0;padding:7px 6px}.photo-preview .composer input{background:var(--panel);border:1px solid var(--border);padding:9px 14px}.composer textarea{font:inherit;resize:none;max-height:132px;line-height:1.35;overflow-y:auto}.composer .send{background:var(--accent);color:var(--on-accent);border:none;border-radius:50%;flex-shrink:0;place-items:center;width:30px;height:30px;margin-bottom:6px;font-size:13px;display:grid}.composer .send.rec{background:var(--error,#e5534b)}.rec-bar{background:var(--panel-2);color:var(--text);padding:8px 12px;font-size:13px}.rec-box{background:#e5534b1a;border:1px solid #e5534b80;border-radius:14px;flex-direction:column;gap:8px;padding:10px 14px;display:flex}.rec-head{align-items:center;gap:8px;font-weight:600;display:flex}.rec-dot{background:var(--error,#e5534b);border-radius:50%;width:12px;height:12px;animation:1.2s ease-in-out infinite rec-pulse}@keyframes rec-pulse{0%,to{opacity:.35}50%{opacity:1}}.rec-time{color:var(--error,#e5534b)}.rec-wave{width:100%;height:46px;display:block}.rec-hint{color:var(--text-dim);font-size:12px}.rec-actions{align-items:center;gap:8px;display:flex}.rec-actions .rec-hint{flex:1}.rec-cancel{color:var(--text-dim);background:0 0;border:0;border-radius:8px;padding:4px 8px}.rec-send{background:var(--accent);color:var(--on-accent);border:0;border-radius:14px;padding:5px 14px;font-weight:600}.chatview-header .badge.live.off{opacity:.45}.chatview-header .badge.live.waiting{opacity:.5}.rec-hint.cancelling{color:var(--error,#e5534b)}.chatview-status{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chatview-status>span{max-width:100%;display:inline-block}.menu-title svg{vertical-align:-3px;margin-right:2px}.voice{align-items:center;gap:8px;min-width:190px;padding:2px 0;display:flex}.voice-play{background:var(--accent);width:30px;height:30px;color:var(--on-accent);border:0;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.voice-play:disabled{opacity:.5}.voice-bar{background:#8696a066;border-radius:2px;flex:1;height:3px}.voice-bar-fill{background:var(--accent);border-radius:2px;height:3px}.voice-time{color:var(--text-dim);font-size:11px}.bubble-body.unsupported{color:var(--text-dim);font-size:13px}.msg-menu-actions{align-items:center;gap:2px;display:flex}.msg-menu-actions button{color:var(--text);background:0 0;border:0;border-radius:8px;place-items:center;padding:6px;display:grid}.msg-menu-actions button:hover{background:var(--panel)}.msg-menu-actions button.danger{color:var(--error,#e5534b)}.forward-box{background:var(--panel);border-radius:12px;flex-direction:column;width:min(420px,100%);max-height:70vh;display:flex;overflow:hidden}.forward-list{overflow-y:auto}.composer .send:disabled{opacity:.4;cursor:default}.panel-link{color:var(--accent);background:0 0;border:none;padding:0;font-size:13px}.panel-link.dim{color:var(--text-dim)}img.avatar{object-fit:cover}.bubble-wrap{flex-direction:column;display:flex;position:relative}.bubble-wrap.out{align-items:flex-end}.bubble-wrap.in{align-items:flex-start}.bubble-main{flex-direction:column;gap:4px;min-width:0;display:flex}.bubble.deleted .bubble-body{color:var(--text-dim)}.bubble-quote{border-left:3px solid var(--accent);background:#0000002e;border-radius:6px;max-width:100%;padding:4px 8px}.bubble-quote-who{color:var(--accent);font-size:11px;font-weight:600}.bubble-quote-text{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:260px;font-size:12px;overflow:hidden}.bubble-more{color:var(--text-dim);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 2px;font-size:14px;transition:opacity .12s}.bubble:hover .bubble-more{opacity:1}.bubble-reactions{background:var(--panel-2);border-radius:12px;gap:2px;margin-top:-2px;padding:2px 8px;font-size:13px;display:flex}.msg-menu{z-index:30;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;min-width:170px;padding:6px;position:absolute;top:100%;box-shadow:0 8px 24px #00000073}.msg-menu>button{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 10px;font-size:14px;display:block}.msg-menu>button:hover{background:var(--panel)}.msg-menu>button.danger{color:#f15c6d}.msg-menu-emojis{border-bottom:1px solid var(--border);gap:4px;margin-bottom:4px;padding:2px 4px 6px;display:flex}.msg-menu-emojis button{cursor:pointer;background:0 0;border:none;border-radius:50%;padding:3px;font-size:20px;line-height:1}.msg-menu-emojis button.on{background:#007eff40}.reply-banner{background:var(--panel-2);align-items:center;gap:6px;padding:8px 10px 0 16px;display:flex}.reply-banner-box{background:var(--panel);border-left:3px solid var(--accent);border-radius:6px;flex:1;min-width:0;padding:5px 8px}.reply-banner-who{color:var(--accent);font-size:11px;font-weight:600}.reply-banner-text{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.avatar-wrap{flex-shrink:0;line-height:0;display:inline-block;position:relative}.avatar-wrap.big .avatar{width:52px;height:52px;font-size:18px}.avatar.ring{border:3px solid var(--accent);box-sizing:border-box}.chatview-header .badge.timed,.chatview-header .badge.live{background:var(--panel);border:1.5px solid var(--bubble-out);border-radius:12px;flex-shrink:0;align-items:center;gap:2px;min-width:24px;height:24px;padding:0 5px;font-size:11px;font-weight:600;display:inline-flex}.chatview-header .badge.live{justify-content:center;padding:0}.chatview-header .badge.timed{color:var(--accent)}.chatview-header .badge.live{color:var(--live)}.menu-title{color:var(--text);flex-direction:column;padding:6px 10px 4px;font-size:13px;font-weight:600;display:flex}.menu-title span{color:var(--text-dim);font-size:11px;font-weight:400}.menu-pop button.on{color:var(--accent)}.update-banner{cursor:pointer;background:color-mix(in srgb, var(--accent) 14%, transparent);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 14px;display:flex}.update-banner-icon{font-size:16px}.update-banner-text{flex-direction:column;flex:1;min-width:0;display:flex}.update-banner-text strong{color:var(--text);font-size:14px}.update-banner-text span{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.update-banner-close{color:var(--text-dim);background:0 0;border:0;padding:4px 6px;font-size:14px}.update-banner-close:hover{color:var(--text)}.composer-icon{color:var(--text);background:0 0;border:0;border-radius:8px;flex-shrink:0;place-items:center;padding:6px 5px;font-size:18px;line-height:1;display:grid;position:relative;top:-2px}.composer-icon:hover{background:var(--panel-2)}.emoji-panel{border-top:1px solid var(--border);background:var(--panel-2);flex-direction:column;height:300px;display:flex}.emoji-grid{flex:1;min-height:0;padding:0 4px 4px;overflow-y:auto}.emoji-section-title{z-index:1;background:var(--panel-2);color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;padding:8px 6px 4px;font-size:11px;font-weight:600;position:sticky;top:0}.emoji-section-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));display:grid}.emoji-section-grid button{background:0 0;border:0;border-radius:8px;padding:4px;font-size:22px}.emoji-section-grid button:hover{background:var(--panel)}.emoji-tabs{border-top:1px solid var(--border);justify-content:space-evenly;padding:4px 0;display:flex}.emoji-tabs button{background:0 0;border:0;border-radius:8px;padding:4px 8px;font-size:18px}.emoji-tabs button.on{background:var(--panel)}.photo-preview{z-index:40;background:#0009;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.photo-preview-box{background:var(--panel);border-radius:12px;flex-direction:column;gap:0;max-width:min(560px,100%);max-height:100%;display:flex;overflow:hidden}.photo-preview-bar{background:var(--panel-2);align-items:center;gap:8px;padding:6px 12px;font-weight:600;display:flex}.photo-preview-box img{object-fit:contain;border:1px solid #80808040;border-radius:10px;align-self:center;max-width:calc(100% - 24px);min-height:0;max-height:55vh;margin:12px;display:block}.bubble.has-photo{padding:3px}.bubble.has-photo .bubble-body,.bubble.has-photo .bubble-quote{margin:0 4px}.bubble.has-photo .bubble-meta{margin:0 4px 2px}.bubble-photo{margin-bottom:4px}.bubble-photo img{border-radius:6px;width:100%;max-width:280px;display:block}.bubble-photo-wait{background:#00000040;border-radius:6px;place-items:center;width:220px;height:160px;font-size:26px;display:grid}.badge.dot{border-radius:50%;width:12px;min-width:12px;height:12px;padding:0}