*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0710;--surface: rgba(24, 17, 34, .72);--border: #241a34;--border-hi: #3d2c55;--text: #ece6f5;--text-muted:#8b81a3;--text-dim: #4a4160;--accent: #a78bfa;--accent-hi: #c4b5fd;--pink: #ff7ac6;--cyan: #5eead4;--green: #34d399;--red: #fb7185;--amber: #fbbf24;--radius: 14px;--grad-primary: linear-gradient(135deg, #ff7ac6 0%, #a78bfa 55%, #5eead4 100%);--glow-accent: rgba(167, 139, 250, .35);--glow-pink: rgba(255, 122, 198, .35);--glow-cyan: rgba(94, 234, 212, .3)}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:radial-gradient(640px circle at 12% 15%,rgba(255,122,198,.16),transparent 60%),radial-gradient(560px circle at 88% 12%,rgba(94,234,212,.13),transparent 60%),radial-gradient(760px circle at 50% 105%,rgba(167,139,250,.18),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;align-items:center;justify-content:center}.chat-header,.input-row,.share-panel,.security-badge,.msg-received .msg-text,.field input,.admit-request,.joining-banner,.reply-preview,.waiting-pulse{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.join-panel{width:min(420px,100vw - 2rem);display:flex;flex-direction:column;gap:1.5rem;padding:1rem}.brand{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.brand-icon{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;color:#fff;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),transparent 55%),var(--grad-primary);box-shadow:0 8px 28px var(--glow-accent),0 0 0 1px #ffffff0f inset}.door-charm{position:absolute;bottom:-3px;right:-5px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--accent));box-shadow:0 0 10px var(--glow-cyan),0 0 0 3px var(--bg)}.brand h1{font-size:2rem;font-weight:800;letter-spacing:-.03em;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{font-size:.8rem;color:var(--text-muted)}.alert{background:#ef444414;border:1px solid rgba(239,68,68,.25);color:#fca5a5;padding:.75rem 1rem;border-radius:var(--radius);font-size:.825rem;line-height:1.4}.form{display:flex;flex-direction:column;gap:1rem}.field{display:flex;flex-direction:column;gap:.35rem;cursor:default}.field>span:first-child{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}.field input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;color:var(--text);font-size:.95rem;outline:none;transition:border-color .15s;font-family:inherit}.field input:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--glow-pink)}.field input::placeholder{color:var(--text-dim)}.field-hint{font-size:.72rem;color:var(--text-dim);line-height:1.4}.btn-primary{position:relative;overflow:hidden;background:var(--grad-primary);color:#fff;border:none;border-radius:var(--radius);padding:.85rem 1rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;width:100%;font-family:inherit;box-shadow:0 6px 22px var(--glow-accent)}.btn-primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff59,#fff0 55%);pointer-events:none}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 28px var(--glow-pink)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.security-badge{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--text-dim);font-size:.7rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.chat-panel{width:min(700px,100vw);height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--border);border-right:1px solid var(--border)}.chat-header{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.header-id{display:flex;align-items:center;gap:.625rem;flex:1;min-width:0}.header-lock{color:var(--accent);flex-shrink:0;display:flex}.header-title{font-weight:600;font-size:.9rem;color:#fff}.header-meta{font-size:.7rem;color:var(--text-muted);margin-top:1px}.conn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-dim)}.conn-dot.conn-connected{background:var(--green)}.conn-dot.conn-connecting{background:var(--amber)}.conn-dot.conn-disconnected{background:var(--red)}.btn-leave{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:.35rem .8rem;border-radius:6px;font-size:.75rem;cursor:pointer;transition:border-color .15s,color .15s;font-family:inherit;flex-shrink:0}.btn-leave:hover{border-color:var(--red);color:var(--red)}.messages{flex:1;overflow-y:auto;padding:1.25rem 1.25rem .5rem;display:flex;flex-direction:column;gap:.375rem;scroll-behavior:smooth}.messages::-webkit-scrollbar{width:3px}.messages::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}.msg-system{align-self:center;margin:.25rem 0}.msg-system span{font-size:.7rem;color:var(--text-muted);background:#ffffff0a;padding:.2rem .75rem;border-radius:20px}.msg-outer{display:flex;flex-direction:column;gap:.15rem;max-width:72%}.msg-outer-sent{align-self:flex-end;align-items:flex-end}.msg-outer-received{align-self:flex-start;align-items:flex-start}.msg-bubble{display:flex;flex-direction:column;gap:.2rem}.msg-sent{align-items:flex-end}.msg-received{align-items:flex-start}.msg-sender{font-size:.68rem;color:var(--text-muted);font-weight:500;padding:0 .2rem}.msg-text{background:var(--surface);border:1px solid var(--border);padding:.6rem .875rem;border-radius:12px;font-size:.9rem;line-height:1.45;word-break:break-word;white-space:pre-wrap;color:var(--text)}.msg-sent .msg-text{background:var(--grad-primary);border-color:transparent;color:#fff;border-bottom-right-radius:3px;box-shadow:inset 0 1px #ffffff4d,0 4px 14px var(--glow-accent)}.msg-received .msg-text{border-bottom-left-radius:3px}.input-row{display:flex;gap:.625rem;padding:.875rem 1.25rem;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}.input-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem 1rem;color:var(--text);font-size:.9rem;outline:none;transition:border-color .15s;font-family:inherit}.input-row input:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--glow-pink)}.input-row input::placeholder{color:var(--text-dim)}.input-row input:disabled{opacity:.45}.btn-send{position:relative;overflow:hidden;background:var(--grad-primary);color:#fff;border:none;border-radius:var(--radius);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;flex-shrink:0;box-shadow:0 4px 16px var(--glow-accent)}.btn-send:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff59,#fff0 55%);pointer-events:none}.btn-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px var(--glow-pink)}.btn-send:disabled{opacity:.35;cursor:not-allowed}.btn-share-toggle{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);padding:.6rem 1rem;font-size:.8rem;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s}.btn-share-toggle:hover{border-color:var(--border-hi);color:var(--text)}.btn-share{background:transparent;border:1px solid var(--border);color:var(--text-muted);width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}.btn-share:hover{border-color:var(--border-hi);color:var(--text)}.share-panel{background:var(--surface);border-bottom:1px solid var(--border);padding:.875rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}.join-panel .share-panel{border:1px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem}.share-recommend{display:flex;align-items:flex-start;gap:.5rem;background:#f59e0b12;border:1px solid rgba(245,158,11,.18);border-radius:7px;padding:.6rem .75rem;font-size:.78rem;line-height:1.5;color:#fcd34d;flex-shrink:0}.share-recommend svg{flex-shrink:0;margin-top:1px}.share-recommend strong{font-weight:700}.share-url-row{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.45rem .45rem .45rem .75rem}.share-url{flex:1;font-family:Menlo,Consolas,monospace;font-size:.72rem;color:var(--text-muted);word-break:break-all;min-width:0}.btn-copy{background:var(--border-hi);color:var(--text);border:none;border-radius:5px;padding:.3rem .7rem;font-size:.72rem;font-family:inherit;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s}.btn-copy:hover{background:#52407a}.share-risks{display:flex;flex-direction:column;gap:.4rem}.risk-title{font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}.risk-list{list-style:none;display:flex;flex-direction:column;gap:.25rem}.risk{font-size:.75rem;line-height:1.45;padding-left:1.1rem;position:relative}.risk:before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;border-radius:50%}.risk-ok{color:#86efac}.risk-warn{color:#fcd34d}.risk-bad{color:#fca5a5}.risk-ok:before{background:var(--green)}.risk-warn:before{background:var(--amber)}.risk-bad:before{background:var(--red)}.waiting-panel{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.waiting-state{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;width:min(340px,100%)}.waiting-heading{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em}.waiting-sub{font-size:.875rem;color:var(--text-muted);line-height:1.5}.waiting-btn{margin-top:.5rem;width:100%}.waiting-pulse{width:72px;height:72px;border-radius:50%;background:#a78bfa24;border:1px solid rgba(167,139,250,.3);display:flex;align-items:center;justify-content:center;color:var(--accent-hi);animation:pulse-ring 2s ease-in-out infinite;margin-bottom:.5rem}@keyframes pulse-ring{0%,to{box-shadow:0 0 #a78bfa66}50%{box-shadow:0 0 0 12px #a78bfa00}}.waiting-dots{display:flex;gap:6px;margin:.25rem 0}.waiting-dots span{width:7px;height:7px;border-radius:50%;background:var(--text-dim);animation:dot-bounce 1.4s ease-in-out infinite both}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-bounce{0%,80%,to{transform:scale(.8);opacity:.4}40%{transform:scale(1.2);opacity:1}}.btn-cancel-wait{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:.6rem 1.5rem;border-radius:var(--radius);font-size:.85rem;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;margin-top:.5rem}.btn-cancel-wait:hover{border-color:var(--border-hi);color:var(--text)}.waiting-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;margin-bottom:.25rem}.approved-icon{background:#22c55e26;border:1px solid rgba(34,197,94,.35);color:var(--green);animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275)}.denied-icon{background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:var(--red)}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.countdown-big{font-size:5rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums;animation:count-pop .25s cubic-bezier(.175,.885,.32,1.275)}@keyframes count-pop{0%{transform:scale(1.4);opacity:.5}to{transform:scale(1);opacity:1}}.countdown-bar-outer{width:180px;height:4px;background:var(--border-hi);border-radius:2px;overflow:hidden}.countdown-bar-inner{height:100%;background:var(--green);border-radius:2px;transition:width 1s linear}.admit-queue{display:flex;flex-direction:column;gap:0;flex-shrink:0}.admit-request{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.625rem 1.25rem;background:#f59e0b0f;border-bottom:1px solid rgba(245,158,11,.15)}.admit-info{display:flex;align-items:center;gap:.5rem;min-width:0}.admit-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.admit-name{font-size:.82rem;color:#fcd34d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admit-name strong{font-weight:600}.admit-actions{display:flex;gap:.5rem;flex-shrink:0}.btn-allow{background:#22c55e26;color:var(--green);border:1px solid rgba(34,197,94,.3);border-radius:6px;padding:.3rem .75rem;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}.btn-allow:hover{background:#22c55e40}.btn-deny{background:#ef44441a;color:var(--red);border:1px solid rgba(239,68,68,.25);border-radius:6px;padding:.3rem .75rem;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}.btn-deny:hover{background:#ef444433}.joining-banner{display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.5rem 1.25rem;background:#ff7ac61a;border-bottom:1px solid rgba(255,122,198,.22);font-size:.85rem;flex-shrink:0}.joining-name{font-weight:600;color:var(--pink)}.joining-text{color:var(--text-muted)}.joining-count{font-weight:700;color:var(--pink);font-size:1rem;min-width:1ch;text-align:center;font-variant-numeric:tabular-nums}.btn-image{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}.btn-image:hover:not(:disabled){border-color:var(--border-hi);color:var(--text)}.btn-image:disabled{opacity:.35;cursor:not-allowed}.msg-image{display:block;max-width:340px;max-height:340px;height:auto;border-radius:10px;border:1px solid var(--border)}.msg-sent .msg-image{border-color:var(--accent);border-bottom-right-radius:3px}.msg-received .msg-image{border-bottom-left-radius:3px}.btn-mic{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s;flex-shrink:0}.btn-mic:hover:not(:disabled){border-color:var(--border-hi);color:var(--text)}.btn-mic:disabled{opacity:.35;cursor:not-allowed}.btn-mic.recording{background:#ef444426;border-color:#ef444466;color:var(--red);animation:pulse-dot 1.5s ease-in-out infinite}.recording-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;background:#ef444412;border-top:1px solid rgba(239,68,68,.2);flex-shrink:0}.recording-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;animation:pulse-dot 1.2s ease-in-out infinite}.recording-text{flex:1;font-size:.82rem;color:var(--red);font-variant-numeric:tabular-nums}.msg-audio{display:block;width:260px;max-width:100%;height:36px;border-radius:999px}.msg-sent .msg-audio{border:1px solid var(--accent)}.msg-received .msg-audio{border:1px solid var(--border)}.msg-audio-placeholder{display:flex;align-items:center;gap:.5rem;width:260px;max-width:100%;height:36px;padding:0 .9rem;border-radius:999px;background:transparent;color:var(--text);font-size:.85rem;cursor:pointer}.msg-sent .msg-audio-placeholder{border:1px solid var(--accent)}.msg-received .msg-audio-placeholder{border:1px solid var(--border)}.organizer-badge{display:inline-block;margin-left:.5rem;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:#f59e0b1f;border:1px solid rgba(245,158,11,.25);border-radius:4px;padding:.1rem .4rem;vertical-align:middle}.msg-actions{display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .12s}.msg-outer:hover .msg-actions{opacity:1;pointer-events:auto}.reaction-btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.2rem .3rem;font-size:.88rem;cursor:pointer;transition:background .1s,border-color .1s;line-height:1}.reaction-btn:hover{background:var(--border-hi);border-color:var(--border-hi)}.reply-btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.2rem .45rem;font-size:.8rem;color:var(--text-muted);cursor:pointer;transition:background .1s,color .1s;line-height:1;font-family:inherit}.reply-btn:hover{background:var(--border-hi);color:var(--text)}.reaction-bar{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}.reaction-badge{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:.15rem .55rem;font-size:.8rem;cursor:pointer;transition:background .1s,border-color .1s;line-height:1.4;font-family:inherit;color:var(--text)}.reaction-badge:hover{background:var(--border-hi)}.reaction-mine{background:#a78bfa29;border-color:#a78bfa73}.reply-quote{display:flex;flex-direction:column;gap:.1rem;border-left:2px solid var(--border-hi);padding:.3rem .55rem;margin-bottom:.15rem;background:#ffffff0a;border-radius:0 4px 4px 0;max-width:100%}.msg-sent .reply-quote{border-left-color:#ffffff4d;background:#ffffff14}.reply-quote-sender{font-size:.65rem;font-weight:600;color:var(--text-muted)}.msg-sent .reply-quote-sender{color:#ffffffb3}.reply-quote-text{font-size:.77rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.msg-sent .reply-quote-text{color:#fff9}.reply-preview{display:flex;align-items:center;gap:.75rem;padding:.5rem 1.25rem;background:#5eead412;border-top:1px solid rgba(94,234,212,.2);flex-shrink:0}.reply-preview-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.reply-preview-sender{font-size:.7rem;font-weight:600;color:var(--cyan)}.reply-preview-text{font-size:.78rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-cancel{background:transparent;border:none;color:var(--text-dim);font-size:.875rem;cursor:pointer;padding:.2rem .35rem;border-radius:4px;transition:color .1s;flex-shrink:0;font-family:inherit}.reply-cancel:hover{color:var(--text-muted)}