:root{--gold:gold;--amber:#ff8c00;--coral:#ff4d6d;--violet:#9b5de5;--cyan:#00f5ff;--green:#06d6a0;--red:#ff4d6d;--bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a26;--card:#1a1a26;--text:#f0eee8;--text2:#c8c6c0;--muted:#7a7a9a;--border:#ffffff0f;--border2:#ffffff1a;--accent:linear-gradient(135deg, gold, #ff8c00);--accent2:linear-gradient(135deg, #9b5de5, #ff4d6d);--shadow:0 8px 32px #0006;--radius:12px;--radius-sm:8px;--sidebar-w:260px;--header-h:56px;--input-h:64px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Space Grotesk", "SF Mono", monospace}[data-theme=light]{--bg:#f5f3f0;--surface:#ece8e2;--surface2:#e0dcd4;--card:#fff;--text:#1a1d2f;--text2:#4a4d5f;--muted:#8a8da0;--border:#00000014;--border2:#00000024;--shadow:0 8px 32px #0000001a}[data-theme=amber]{--bg:#0f0b05;--surface:#1a140a;--surface2:#252010;--card:#1a140a;--text:#f0e6c8;--text2:#c8b88a;--muted:#8a7a5a;--border:#ffc8500f;--border2:#ffc8501f;--accent:linear-gradient(135deg, gold, #ff6b00);--accent2:linear-gradient(135deg, #ff8c00, gold)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}#root{width:100%;height:100dvh;display:flex}.screen{width:100%;height:100%;display:none}.screen.active{display:flex}#screen-connect{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(1600px 600px at 50% -300px, #9b5de526, transparent 60%), radial-gradient(800px 400px at 80% 100%, #ffd70014, transparent 50%), var(--bg);justify-content:center;align-items:center}.connect-card{background:var(--card);border:1px solid var(--border2);width:400px;max-width:90vw;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:2.5rem 2rem}.connect-logo{text-align:center;margin-bottom:2rem}.hz-logo{align-items:baseline;gap:0;display:inline-flex}.hz-num{font-family:var(--font-mono);background:var(--accent);-webkit-text-fill-color:transparent;letter-spacing:-2px;-webkit-background-clip:text;background-clip:text;font-size:2.8rem;font-weight:800}.hz-unit{font-family:var(--font-mono);color:var(--muted);letter-spacing:-1px;font-size:1.6rem;font-weight:600}.connect-sub{color:var(--muted);letter-spacing:.3em;text-transform:uppercase;margin-top:.2rem;font-size:.85rem;display:block}.field{margin-bottom:1.2rem}.field label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;font-size:.78rem;font-weight:600;display:block}.field input,.field select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);font:inherit;outline:none;padding:.8rem 1rem;font-size:.95rem;transition:border-color .2s}.field input:focus,.field select:focus{border-color:var(--violet);box-shadow:0 0 0 3px #9b5de526}.field input::placeholder{color:var(--muted);opacity:.6}.field-row{align-items:center;margin-bottom:1.5rem;display:flex}.checkbox-label{color:var(--text2);cursor:pointer;align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--violet)}.btn-primary{border-radius:var(--radius-sm);background:var(--accent);color:#0a0a0f;width:100%;font:inherit;cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.85rem;font-size:1rem;font-weight:700;transition:transform .15s,box-shadow .2s;display:flex}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #ffd70040}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}.btn-spinner{font-size:1.2rem;animation:.8s linear infinite spin;display:inline-block}.btn-spinner.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:var(--red);text-align:center;border-radius:var(--radius-sm);background:#ff4d6d1a;margin-top:1rem;padding:.5rem;font-size:.85rem}.error-msg.hidden{display:none}.connect-info{color:var(--muted);justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.8rem;display:flex}.connect-info .dot{background:var(--green);width:6px;height:6px;box-shadow:0 0 6px var(--green);border-radius:50%}#screen-chat{flex-direction:row}#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;height:100%;display:flex;overflow:hidden}.sidebar-header{padding:.8rem 1rem;padding-top:max(.8rem, env(safe-area-inset-top));border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.sidebar-logo .hz-mini{font-family:var(--font-mono);background:var(--accent);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:800}.sidebar-actions{gap:.4rem;display:flex}.icon-btn{background:var(--surface2);width:32px;height:32px;color:var(--text2);border-radius:var(--radius-sm);cursor:pointer;border:none;place-items:center;font-size:1.1rem;line-height:1;transition:background .15s;display:grid}.icon-btn:hover{color:var(--text);background:#ffffff14}.sidebar-section-label{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);padding:1rem 1rem .4rem;font-size:.65rem;font-weight:700}.sidebar-section-label.section-row{justify-content:space-between;align-items:center;display:flex}.sidebar-section-label.section-row .icon-btn-sm{color:var(--violet);font-size:1rem}.channel-list{flex:1;padding:.3rem .5rem;overflow-y:auto}.channel-item{border-radius:var(--radius-sm);cursor:pointer;color:var(--text2);align-items:center;gap:.5rem;padding:.45rem .7rem;font-size:.9rem;transition:background .1s;display:flex}.channel-item:hover{background:#ffffff0a}.channel-item.active{color:var(--text);background:#9b5de526;font-weight:600}.channel-item .ch-prefix{color:var(--violet);opacity:.7;margin-right:.1rem}.unread-badge{background:var(--surface2);min-width:18px;height:18px;color:var(--text2);border-radius:9px;place-items:center;margin-left:auto;padding:0 5px;font-size:.7rem;font-weight:700;display:grid}.unread-badge.mention{background:var(--gold);color:#0a0a0f}.channel-item .ch-close{color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:none;margin-left:auto;font-size:.8rem;transition:opacity .1s}.channel-item:hover .ch-close{opacity:1}.channel-item .ch-close:hover{color:var(--red)}.user-list{border-top:1px solid var(--border);max-height:140px;padding:.3rem .5rem;overflow-y:auto}.user-item{color:var(--text2);align-items:center;gap:.4rem;padding:.2rem .7rem;font-size:.82rem;display:flex}.user-item .user-op{color:var(--gold);margin-right:.1rem;font-weight:700}.user-item .user-voice{color:var(--cyan)}.sidebar-footer{border-top:1px solid var(--border);color:var(--muted);align-items:center;gap:.5rem;padding:.7rem 1rem;font-size:.78rem;display:flex}.status-dot{border-radius:50%;flex:none;width:8px;height:8px}.status-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green)}.status-dot.disconnected{background:var(--muted)}.status-dot.error{background:var(--red);box-shadow:0 0 6px var(--red)}.text-btn{color:var(--muted);cursor:pointer;font:inherit;text-underline-offset:2px;background:0 0;border:none;margin-left:auto;font-size:.78rem;text-decoration:underline}.text-btn:hover{color:var(--red)}#main{flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}#channel-header{padding:0 1.5rem;padding-top:env(safe-area-inset-top);min-height:var(--header-h);border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;display:flex}.ch-info h2{font-size:1.1rem;font-weight:700}.ch-topic{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:500px;margin-top:.1rem;font-size:.78rem;display:block;overflow:hidden}.user-count{color:var(--muted);background:var(--surface2);border-radius:999px;padding:.3rem .7rem;font-size:.82rem}.user-list-panel{border-bottom:1px solid var(--border);background:var(--surface);flex:none;max-height:200px;overflow-y:auto}.user-list-panel-header{color:var(--muted);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.1em;justify-content:space-between;align-items:center;padding:.4rem 1rem;font-size:.78rem;font-weight:600;display:flex}.icon-btn-sm{width:24px;height:24px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;place-items:center;font-size:.8rem;display:grid}.icon-btn-sm:hover{background:#ffffff0f}.user-list-panel-body{flex-wrap:wrap;gap:.25rem;padding:.4rem .8rem;display:flex}.user-list-item{border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;align-items:center;gap:.2rem;padding:.2rem .5rem;font-size:.85rem;transition:background .1s;display:inline-flex}.user-list-item:hover{background:#9b5de51f}.user-list-item.ignored{opacity:.45}.user-list-item .user-op{color:var(--gold);font-weight:700}.user-list-item .user-voice{color:var(--cyan)}.user-list-item .ignored-badge{color:var(--muted);background:var(--surface2);border-radius:3px;margin-left:.2rem;padding:0 4px;font-size:.6rem}.user-context-menu{z-index:200;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);min-width:180px;padding:.3rem 0;position:fixed;overflow:hidden;box-shadow:0 8px 32px #00000080}.context-menu-header{color:var(--text);border-bottom:1px solid var(--border);margin-bottom:.2rem;padding:.5rem .8rem;font-size:.85rem;font-weight:700}.context-menu-item{width:100%;color:var(--text2);font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;padding:.45rem .8rem;font-size:.85rem;transition:background .1s;display:block}.context-menu-item:hover{color:var(--text);background:#9b5de526}.context-menu-item:focus-visible{outline:1px solid var(--violet);outline-offset:-1px}#message-area{scroll-behavior:smooth;flex:1;padding:.5rem 0;overflow-y:auto}#message-list{padding:0 1.2rem}.msg{border-radius:4px;align-items:flex-start;gap:.5rem;padding:.25rem .5rem;line-height:1.5;transition:background .1s;display:flex}.msg:hover{background:#ffffff05}.msg-timestamp{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:4.5ch;padding-top:.1rem;font-size:.7rem}.msg-nick{white-space:nowrap;text-overflow:ellipsis;cursor:pointer;flex-shrink:0;min-width:10ch;max-width:14ch;font-weight:600;overflow:hidden}.msg-nick:hover{text-decoration:underline}.msg-text{word-break:break-word;white-space:pre-wrap;flex:1}.msg-system{color:var(--muted);font-size:.85rem;font-style:italic}.msg-action{color:var(--violet);font-style:italic}.msg-action .msg-nick:after{content:" "}.msg-highlight{border-left:2px solid var(--gold);background:#ffd70014;border-radius:0 4px 4px 0}.mention{color:var(--gold);background:#ffd70024;border-radius:3px;padding:0 3px;font-weight:700}.msg-self .msg-nick{opacity:.85}.msg-notice{color:var(--cyan)}#input-area{border-top:1px solid var(--border);padding:.75rem 1.2rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));flex:none;position:relative}.input-row{align-items:center;gap:.5rem;display:flex}.nick-prefix{font-family:var(--font-mono);color:var(--violet);white-space:nowrap;font-size:.85rem;font-weight:700}#msg-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;outline:none;flex:1;padding:.7rem 1rem;font-size:.9rem;transition:border-color .2s}#msg-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #9b5de51f}#msg-input::placeholder{color:var(--muted);opacity:.5}.send-btn{background:var(--accent);color:#0a0a0f;border-radius:var(--radius-sm);cursor:pointer;border:none;flex:none;place-items:center;width:40px;height:40px;font-size:1.2rem;transition:transform .1s,box-shadow .2s;display:grid}.send-btn:hover{transform:scale(1.05);box-shadow:0 0 16px #ffd70033}.send-btn:active{transform:scale(.95)}.autocomplete-box{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm) var(--radius-sm) 0 0;z-index:10;max-height:150px;position:absolute;bottom:100%;left:1.2rem;right:1.2rem;overflow-y:auto}.autocomplete-box.hidden{display:none}.autocomplete-item{cursor:pointer;color:var(--text2);padding:.4rem .8rem;font-size:.85rem}.autocomplete-item:hover,.autocomplete-item.active{color:var(--text);background:#9b5de533}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.hidden{display:none}.modal-card{background:var(--card);border:1px solid var(--border2);width:420px;max-width:90vw;box-shadow:var(--shadow);border-radius:20px;overflow:hidden}.modal-sm{width:340px}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;display:flex}.modal-header h3{font-size:1.1rem;font-weight:700}.modal-close{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;place-items:center;width:32px;height:32px;font-size:1.2rem;transition:background .15s;display:grid}.modal-close:hover{background:#ffffff0f}.modal-body{padding:1.5rem}.modal-footer{padding:0 1.5rem 1.5rem}.modal-footer .btn-primary{width:auto;padding:.7rem 1.5rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}.sidebar-backdrop{display:none}@media (width<=760px){.connect-card{padding:1.8rem 1.2rem}.ch-topic{max-width:45vw}#channel-header{padding:0 1rem}#message-list{padding:0 .8rem}.msg-nick{min-width:7ch;max-width:10ch}#sidebar{z-index:60;width:min(82vw,320px);min-width:0;height:100dvh;box-shadow:var(--shadow);animation:.2s drawer-in;position:fixed;top:0;left:0}.sidebar-backdrop{z-index:55;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000008c;display:block;position:fixed;inset:0}}@keyframes drawer-in{0%{transform:translate(-100%)}to{transform:translate(0)}}