*,:before,:after{box-sizing:border-box}body{margin:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root,[data-theme=phosphor]{--bg:#060809;--surface:#0d1012;--surface2:#141719;--border:#1e2427;--text-primary:#dce8dc;--text-secondary:#b0c4b0;--text-muted:#5a7060;--accent:#00ff41;--accent-dim:#0c3;--accent-muted-bg:#003d10;--accent-glow:#00ff4120;--self-bg:#071a0a;--self-border:#00ff4144;--self-text:#c4edc8;--success:#00ff41;--warning:#fa0;--error:#f55;--pkt-tx-bg:#040e05;--pkt-rx-bg:#03080d;--pkt-ts-color:#3a5040;--pkt-rx-dir:#4da6ff;--packet-log-bg:#080a0a;--scrollbar:#1e2427;--qr-border:#003d10;--radius:14px;--font-mono:"JetBrains Mono", "Fira Mono", "Courier New", monospace;--header-h:60px;--footer-h:72px}[data-theme=parchment]{--bg:#f5f0e8;--surface:#ece4d4;--surface2:#e0d8c8;--border:#c8bba0;--text-primary:#1a1108;--text-secondary:#3a2c18;--text-muted:#7a6848;--accent:#c0622f;--accent-dim:#a0501f;--accent-muted-bg:#f4d8c8;--accent-glow:#c0622f25;--self-bg:#f0ddd0;--self-border:#c0622f55;--self-text:#5a2010;--success:#2d8a4e;--warning:#b07a10;--error:#c03028;--pkt-tx-bg:#f0e8dc;--pkt-rx-bg:#e8e0d4;--pkt-ts-color:#9a8060;--pkt-rx-dir:#2060c0;--packet-log-bg:#ece4d4;--scrollbar:#c8bba0;--qr-border:#c0622f55;--radius:14px;--font-mono:"JetBrains Mono", "Fira Mono", "Courier New", monospace;--header-h:60px;--footer-h:72px}[data-theme=nightshade]{--bg:#0e0b14;--surface:#16121f;--surface2:#1e1928;--border:#2e2840;--text-primary:#e8e4f4;--text-secondary:#c8bce8;--text-muted:#6e6490;--accent:#9b6dff;--accent-dim:#7a50e0;--accent-muted-bg:#1e1534;--accent-glow:#9b6dff25;--self-bg:#1a1030;--self-border:#9b6dff55;--self-text:#d4c4f8;--success:#6ed89a;--warning:#f0b840;--error:#f06080;--pkt-tx-bg:#120e1c;--pkt-rx-bg:#0e0b18;--pkt-ts-color:#4a4070;--pkt-rx-dir:#60b0ff;--packet-log-bg:#0c0a12;--scrollbar:#2e2840;--qr-border:#1e1534;--radius:14px;--font-mono:"JetBrains Mono", "Fira Mono", "Courier New", monospace;--header-h:60px;--footer-h:72px}[data-theme=bloomberg]{--bg:#000;--surface:#0a0a0a;--surface2:#141414;--border:#2a2a2a;--text-primary:#f5f5f5;--text-secondary:#c8c8c8;--text-muted:#707070;--accent:#f59e0b;--accent-dim:#d08000;--accent-muted-bg:#1e1500;--accent-glow:#f59e0b20;--self-bg:#140f00;--self-border:#f59e0b44;--self-text:#ffe0a0;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--pkt-tx-bg:#0a0800;--pkt-rx-bg:#040404;--pkt-ts-color:#404040;--pkt-rx-dir:#38bdf8;--packet-log-bg:#050505;--scrollbar:#2a2a2a;--qr-border:#1e1500;--radius:14px;--font-mono:"JetBrains Mono", "Fira Mono", "Courier New", monospace;--header-h:60px;--footer-h:72px}html,body,#root{height:100%;background:var(--bg);height:-webkit-fill-available;color:var(--text-primary);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.55}.lobby{min-height:100vh;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;min-height:-webkit-fill-available;padding:2.5rem 1.5rem;display:flex}.logo-mark{color:var(--accent);text-shadow:0 0 24px var(--accent-glow);margin-bottom:.2rem;font-size:3.5rem;line-height:1}.title{letter-spacing:-.03em;color:var(--text-primary);font-size:2.8rem;font-weight:700}.dot-accent{color:var(--accent)}.sub{color:var(--text-muted);letter-spacing:.05em;text-align:center;margin-bottom:2rem;font-size:.78rem}.lobby-form{flex-direction:column;gap:.5rem;width:100%;max-width:360px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:.5rem;font-size:.75rem}.field-hint{color:var(--text-muted);opacity:.6;text-transform:none;letter-spacing:0;font-size:.7rem}.field-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-mono);outline:none;width:100%;min-height:52px;padding:.85rem 1.1rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.field-input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}.field-input::placeholder{color:var(--text-muted)}.err{color:var(--error);margin-top:.25rem;font-size:.8rem}.btn-start{background:var(--accent);color:#000;border-radius:var(--radius);font-family:var(--font-mono);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;min-height:56px;box-shadow:0 0 20px var(--accent-glow);border:none;margin-top:1.4rem;padding:1rem 1.5rem;font-size:1rem;font-weight:700;transition:background .15s,box-shadow .15s}.btn-start:hover{background:var(--accent-dim)}.btn-start:active{opacity:.85;transform:scale(.98)}[data-theme=parchment] .btn-start,[data-theme=bloomberg] .btn-start,[data-theme=nightshade] .btn-start{color:#fff}.chat-root{border-left:1px solid var(--border);border-right:1px solid var(--border);flex-direction:column;max-width:640px;height:100dvh;margin:0 auto;display:flex}.chat-header{height:var(--header-h);background:var(--surface);border-bottom:1.5px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 1rem;display:flex}.header-left{align-items:center;gap:.7rem;display:flex}.header-right{align-items:center;gap:.6rem;display:flex}.logo-small{color:var(--accent);text-shadow:0 0 10px var(--accent-glow);font-size:1.4rem}.room-badge{background:var(--bg);border:1.5px solid var(--border);letter-spacing:.1em;color:var(--accent);border-radius:6px;padding:.2rem .6rem;font-size:1rem;font-weight:700}.status-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.status-text{color:var(--text-muted);letter-spacing:.03em;font-size:.78rem}.btn-icon{border:1.5px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:0 .6rem;font-size:1rem;transition:border-color .12s,color .12s;display:flex}.btn-icon:hover{border-color:var(--accent-dim);color:var(--text-primary)}.btn-leave:hover{border-color:var(--error);color:var(--error)}.chat-body{flex-direction:column;flex:1;display:flex;overflow:hidden}.qr-panel{background:var(--surface);border-bottom:1.5px solid var(--border);flex-direction:column;flex-shrink:0;align-items:center;gap:.7rem;padding:1.4rem 1rem;display:flex}.qr-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.75rem}.qr-img{border:3px solid var(--qr-border);width:210px;height:210px;box-shadow:0 0 24px var(--accent-glow);border-radius:12px;display:block}.qr-placeholder{border:1px dashed var(--border);width:210px;height:210px;color:var(--text-muted);border-radius:12px;justify-content:center;align-items:center;font-size:.85rem;display:flex}.room-url{font-family:var(--font-mono);color:var(--accent-dim);word-break:break-all;text-align:center;max-width:300px;font-size:.78rem}.btn-copy{border:1.5px solid var(--accent-muted-bg);color:var(--accent-dim);cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;background:0 0;border-radius:8px;min-height:48px;padding:.6rem 1.4rem;font-size:.85rem;font-weight:700;transition:background .12s,border-color .12s,box-shadow .12s}.btn-copy:hover{background:var(--accent-muted-bg);border-color:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}.canon-line{color:var(--text-muted);opacity:.5;letter-spacing:.04em;font-size:.68rem;font-style:italic}.messages{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:.75rem;padding:1rem;display:flex;overflow-y:auto}.empty-state{color:var(--text-muted);text-align:center;letter-spacing:.03em;margin-top:3rem;font-size:.9rem;line-height:1.8}.msg{flex-direction:column;align-self:flex-start;gap:.2rem;max-width:82%;display:flex}.msg-self{align-self:flex-end}.msg-sender{color:var(--text-muted);letter-spacing:.05em;text-transform:lowercase;padding:0 4px;font-size:.72rem}.msg-self .msg-sender{text-align:right;color:var(--accent-dim)}.msg-text{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text-primary);word-break:break-word;white-space:pre-wrap;border-top-left-radius:4px;padding:.65rem .95rem;font-size:1rem;line-height:1.5}.msg-self .msg-text{background:var(--self-bg);border-color:var(--self-border);border-top-right-radius:4px;border-top-left-radius:var(--radius);color:var(--self-text);box-shadow:0 0 12px var(--accent-glow)}.msg-system{align-self:center;max-width:100%}.msg-system .msg-text{color:var(--text-muted);text-align:center;box-shadow:none;background:0 0;border:none;padding:.2rem 0;font-size:.78rem}.msg-input{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-mono);outline:none;flex:1;min-height:50px;padding:.7rem 1rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.msg-input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}.msg-input::placeholder{color:var(--text-muted)}.msg-input:disabled{opacity:.35}.btn-send{background:var(--accent);border-radius:var(--radius);color:#000;cursor:pointer;width:52px;height:52px;box-shadow:0 0 16px var(--accent-glow);border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1.3rem;font-weight:900;transition:background .12s,box-shadow .12s;display:flex}[data-theme=parchment] .btn-send,[data-theme=bloomberg] .btn-send,[data-theme=nightshade] .btn-send{color:#fff}.btn-send:hover{background:var(--accent-dim)}.btn-send:active{transform:scale(.95)}.btn-send:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;box-shadow:none}@media (width<=500px){html,body,#root{font-size:18px}.title{font-size:2.4rem}.qr-img{width:190px;height:190px}.chat-root{border:none;max-width:100%}.msg{max-width:88%}}.invite-banner{background:var(--surface);border-bottom:2px solid var(--accent-muted-bg);flex-direction:column;flex-shrink:0;align-items:center;gap:.7rem;padding:1.6rem 1.2rem 1.2rem;display:flex}.invite-heading{color:var(--accent);letter-spacing:.02em;text-align:center;font-size:1.05rem;font-weight:700}.invite-sub{color:var(--text-muted);text-align:center;max-width:280px;font-size:.88rem;line-height:1.6}.invite-actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.invite-diag{color:var(--text-muted);opacity:.6;letter-spacing:.03em;text-align:center;font-size:.7rem}.invite-diag code{color:var(--accent-dim);font-family:var(--font-mono)}.msg-queued .msg-text{opacity:.55;border-style:dashed}.msg-queued .msg-sender{opacity:.6;font-style:italic}.conn-flash{background:var(--accent-muted-bg);border:1px solid var(--accent-dim);color:var(--accent);letter-spacing:.04em;border-radius:20px;align-self:center;padding:.3rem 1rem;font-size:.78rem;animation:.3s flash-in}@keyframes flash-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.conn-diag{background:var(--bg);border-bottom:1px solid var(--border);color:var(--text-muted);letter-spacing:.04em;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.4rem;padding:.25rem .9rem;font-size:.65rem;line-height:1.4;display:flex}.status-dot.online{background:var(--success);box-shadow:0 0 8px var(--success), 0 0 16px var(--success)}.status-dot.reconnecting{background:var(--warning);box-shadow:0 0 8px var(--warning);animation:1.2s ease-in-out infinite pulse-amber}.status-dot.offline{background:var(--error);box-shadow:0 0 8px var(--error)}.status-dot.waiting{background:var(--border)}@keyframes pulse-amber{0%,to{opacity:1}50%{opacity:.4}}.packet-log{background:var(--packet-log-bg);border-bottom:1.5px solid var(--border);max-height:180px;font-size:.65rem;font-family:var(--font-mono);flex-direction:column;flex-shrink:0;display:flex}.packet-log-header{background:var(--surface);border-bottom:1px solid var(--border);color:var(--text-muted);letter-spacing:.07em;text-transform:uppercase;flex-shrink:0;justify-content:space-between;align-items:center;padding:.3rem .8rem;font-size:.6rem;display:flex}.packet-log-count{color:var(--accent-dim)}.packet-log-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex:1;padding:.3rem 0;overflow-y:auto}.packet-empty{color:var(--text-muted);padding:.5rem .8rem;font-style:italic}.packet-row{border-bottom:1px solid var(--border);grid-template-columns:100px 46px 74px 36px 1fr;align-items:center;gap:.4rem;padding:.15rem .8rem;line-height:1.3;display:grid}.packet-row.tx{background:var(--pkt-tx-bg)}.packet-row.rx{background:var(--pkt-rx-bg)}.pkt-ts{color:var(--pkt-ts-color)}.pkt-dir{font-weight:700}.packet-row.tx .pkt-dir{color:var(--accent)}.packet-row.rx .pkt-dir{color:var(--pkt-rx-dir)}.pkt-type{color:var(--text-muted)}.pkt-bytes{color:var(--pkt-ts-color)}.pkt-peer{color:var(--pkt-ts-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.btn-active{border-color:var(--accent-dim)!important;color:var(--accent)!important;background:var(--accent-muted-bg)!important}.msg-receipt{text-align:right;letter-spacing:.03em;margin-top:1px;padding:0 4px;font-size:.62rem}.receipt-sending{color:var(--text-muted);opacity:.5}.receipt-sent{color:var(--text-muted)}.receipt-delivered{color:var(--accent-dim)}.receipt-read{color:var(--accent);font-weight:700}.typing-indicator{align-self:flex-start;align-items:center;gap:.5rem;padding:.2rem .5rem;display:flex}.typing-name{color:var(--text-muted);font-size:.72rem;font-style:italic}.typing-dots{align-items:center;gap:3px;display:flex}.typing-dots span{background:var(--text-muted);border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite typing-bounce;display:inline-block}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,80%,to{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}.theme-picker-wrapper{position:relative}.theme-popover{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);z-index:100;grid-template-columns:1fr 1fr;gap:.5rem;width:220px;padding:.75rem;animation:.15s pop-in;display:grid;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 32px #0006}@keyframes pop-in{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.theme-card{border:1.5px solid var(--border);cursor:pointer;background:var(--surface2);border-radius:10px;flex-direction:column;align-items:center;gap:.4rem;min-height:44px;padding:.55rem .4rem;transition:border-color .12s,transform .1s;display:flex}.theme-card:hover{border-color:var(--accent-dim);transform:scale(1.03)}.theme-card.active{border-color:var(--accent)}.theme-swatches{gap:3px;display:flex}.theme-swatch{border-radius:3px;flex-shrink:0;width:14px;height:14px}.theme-card-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);text-align:center;font-size:.6rem}.install-banner{z-index:9999;background:var(--surface2);border-top:1px solid var(--border);font-size:.78rem;font-family:var(--font-mono);color:var(--text-secondary);padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));align-items:center;gap:.75rem;display:flex;position:fixed;bottom:0;left:0;right:0}.install-text{flex:1;line-height:1.4}.install-btn{background:var(--accent);color:#000;font-size:.75rem;font-family:var(--font-mono);cursor:pointer;border:none;border-radius:6px;flex-shrink:0;min-height:36px;padding:.35rem .9rem;font-weight:700}.install-btn:hover{opacity:.88}.install-dismiss{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;min-width:28px;min-height:28px;padding:.25rem;font-size:.85rem;display:flex}.msg-actions{gap:.4rem;margin-top:.3rem;animation:.12s pop-in;display:flex}.msg-self .msg-actions{justify-content:flex-end}.msg-action-btn{background:var(--surface);border:1.5px solid var(--border);color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap;border-radius:8px;min-height:44px;padding:0 .85rem;font-size:.75rem;font-weight:600;transition:border-color .12s,color .12s,background .12s}.msg-action-btn:hover{border-color:var(--accent-dim);color:var(--accent);background:var(--accent-muted-bg)}@media (hover:hover){.msg-text:after{content:"···";color:var(--text-muted);opacity:0;pointer-events:none;font-size:.7rem;transition:opacity .15s;position:absolute;top:50%;right:-20px;transform:translateY(-50%)}.msg:not(.msg-system):hover .msg-text:after{opacity:.5}.msg-text{position:relative}}.emoji-picker{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;flex-wrap:nowrap;align-items:center;gap:.3rem;max-width:100%;margin-top:.3rem;padding:.4rem .6rem;animation:.12s pop-in;display:flex;overflow-x:auto}.msg-self .emoji-picker{align-self:flex-end}.emoji-pick-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:1.5rem;transition:background .1s,transform .1s;display:flex}.emoji-pick-btn:hover{background:var(--accent-muted-bg);transform:scale(1.2)}.emoji-pick-close{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:.75rem;display:flex}.reaction-pills{flex-wrap:wrap;gap:.3rem;margin-top:.3rem;display:flex}.msg-self .reaction-pills{justify-content:flex-end}.reaction-pill{background:var(--surface2);border:1.5px solid var(--border);color:var(--text-primary);cursor:pointer;border-radius:20px;align-items:center;gap:.25rem;min-height:36px;padding:.15rem .55rem;font-size:.85rem;transition:border-color .12s,background .12s;display:flex}.reaction-pill:hover{border-color:var(--accent-dim);background:var(--accent-muted-bg)}.reaction-pill-mine{border-color:var(--accent);background:var(--accent-muted-bg);box-shadow:0 0 8px var(--accent-glow)}.reaction-count{color:var(--text-muted);letter-spacing:.02em;font-size:.72rem;font-weight:700}.reply-quote{background:var(--surface);border-left:3px solid var(--accent-dim);border-radius:0 6px 6px 0;max-width:100%;margin-bottom:.3rem;padding:.35rem .6rem;overflow:hidden}.reply-quote-from{color:var(--accent-dim);letter-spacing:.04em;text-transform:lowercase;margin-bottom:.1rem;font-size:.68rem;font-weight:700;display:block}.reply-quote-text{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;line-height:1.4;display:block;overflow:hidden}.reply-pill{background:var(--surface);border-top:1.5px solid var(--border);border-bottom:1px solid var(--border);color:var(--text-secondary);flex-shrink:0;align-items:center;gap:.5rem;padding:.45rem .85rem;font-size:.78rem;display:flex;overflow:hidden}.reply-pill-label{color:var(--accent-dim);white-space:nowrap;flex-shrink:0;font-size:.72rem}.reply-pill-label strong{color:var(--accent)}.reply-pill-text{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;flex:1;font-style:italic;overflow:hidden}.reply-pill-cancel{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:.85rem;transition:color .1s;display:flex}.reply-pill-cancel:hover{color:var(--error)}.copy-toast{background:var(--surface2);border:1.5px solid var(--border);color:var(--text-primary);font-size:.82rem;font-family:var(--font-mono);pointer-events:none;z-index:9000;letter-spacing:.04em;border-radius:20px;padding:.4rem 1.2rem;animation:.15s pop-in,.3s 1.2s forwards fade-out;position:fixed;bottom:100px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0000004d}@keyframes fade-out{to{opacity:0;transform:translate(-50%)translateY(6px)}}.msg-deleted-placeholder{opacity:.45;-webkit-user-select:none;user-select:none;font-size:.88rem;font-style:italic;color:var(--text-muted)!important;border-color:var(--border)!important;box-shadow:none!important;cursor:default!important;background:0 0!important;border-style:dashed!important}.reply-quote-deleted{opacity:.6;font-style:italic;color:var(--text-muted)!important}.msg-delete-confirm{flex-wrap:wrap;align-items:center;gap:.4rem}.delete-confirm-label{color:var(--text-muted);letter-spacing:.03em;white-space:nowrap;padding:0 .2rem;font-size:.75rem}.msg-action-delete,.msg-action-delete-confirm{border-color:var(--error)!important;color:var(--error)!important}.msg-action-delete:hover,.msg-action-delete-confirm:hover{background:color-mix(in srgb, var(--error) 12%, transparent)!important;border-color:var(--error)!important;color:var(--error)!important}.chat-footer{background:var(--surface);border-top:1.5px solid var(--border);flex-direction:column;flex-shrink:0;display:flex}.chat-input-row{min-height:var(--footer-h);align-items:center;gap:.6rem;padding:.85rem;display:flex}