*,*:before,*:after{box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{display:flex;flex-direction:column;height:100vh}div#main-area{flex:1;min-height:0;display:flex;flex-direction:column}section#connecting-screen,section#auth-screen{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}section#connecting-screen[hidden],section#auth-screen[hidden]{display:none}section#connecting-screen p#connecting-text{margin:0;font-size:1.5rem}section#connecting-screen span.connecting-dots span{opacity:0;animation:connecting-dot-fade 1.4s infinite}section#connecting-screen span.connecting-dots span:nth-child(2){animation-delay:.2s}section#connecting-screen span.connecting-dots span:nth-child(3){animation-delay:.4s}@keyframes connecting-dot-fade{0%,80%,to{opacity:0}40%{opacity:1}}section#auth-screen form#auth-form{display:flex;flex-direction:column;width:min(22rem,calc(100vw - 2rem));padding:2rem;border-radius:8px}section#auth-screen form#auth-form h1{margin:0 0 .25rem;font-size:1.4rem}section#auth-screen form#auth-form p#auth-subtitle{margin:0 0 1.25rem}section#auth-screen form#auth-form label{margin:.75rem 0 .3rem;font-size:.85rem}section#auth-screen form#auth-form label:first-of-type{margin-top:0}section#auth-screen form#auth-form input{padding:.5rem .6rem;font:inherit}section#auth-screen form#auth-form button#auth-submit{margin-top:1.25rem;padding:.6rem;font:inherit;cursor:pointer}section#auth-screen form#auth-form p#auth-error{margin:.75rem 0 0}section#auth-screen form#auth-form p#auth-error[hidden]{display:none}section#auth-screen form#auth-form p#auth-toggle{margin:1rem 0 0;text-align:center;font-size:.85rem}section#auth-screen form#auth-form p#auth-toggle button#auth-mode-toggle{border:none;background:none;padding:0;font:inherit;text-decoration:underline;cursor:pointer}div#app-panes{flex:1;min-height:0;display:grid;grid-template-columns:220px 1fr 220px}div#app-panes[hidden]{display:none}nav#channels{grid-column:1;display:flex;flex-direction:column;overflow-y:auto}nav#channels h2#channel-list-heading{margin:0;padding:.5rem .75rem;font-size:.9rem}nav#channels ul#channel-list{flex:1;list-style:none;margin:0;padding:0;overflow-y:auto}nav#channels ul#channel-list li{display:flex;align-items:stretch}nav#channels ul#channel-list li button:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nav#channels ul#channel-list button.channel-leave{display:block;width:auto;flex:0 0 auto;padding:0 .5rem;font-size:.75rem;line-height:1;cursor:pointer}footer#status-bar{flex-shrink:0;display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem}footer#status-bar span#connection-status{flex-shrink:0;width:.6rem;height:.6rem;border-radius:50%}footer#status-bar button#console-toggle{flex-shrink:0;margin-inline-start:auto;border:none;background:none;padding:0;font:inherit;font-size:.85rem;line-height:1;cursor:pointer}main#chat{grid-column:2;display:flex;flex-direction:column;overflow-y:auto}main#chat header#topic{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem .75rem}main#chat header#topic div#topic-info{flex:1;min-width:0}main#chat header#topic p#topic-text{margin:0;overflow-wrap:break-word}main#chat header#topic p#topic-meta{margin:.15rem 0 0;overflow-wrap:break-word}main#chat header#topic p#topic-meta[hidden]{display:none}main#chat header#topic button#channel-info-toggle{flex-shrink:0;border:none;background:none;padding:0;font:inherit;font-size:.85rem;line-height:1;cursor:pointer}main#chat header#topic button#channel-info-toggle[hidden]{display:none}main#chat ul#channel-modes{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:.5rem .75rem;list-style:none}main#chat ul#channel-modes[hidden]{display:none}main#chat ul#channel-modes li{white-space:nowrap}main#chat ul#messages{flex:1;list-style:none;margin:0;padding:.5rem;overflow-y:auto}main#chat ul#messages li.message{margin-bottom:.5rem}main#chat ul#messages li.message.message-pending{opacity:.6}main#chat ul#messages .message-meta{display:flex;align-items:baseline;gap:.5rem}main#chat ul#messages .message-body{margin:.1rem 0 0;overflow-wrap:break-word;white-space:pre-wrap}main#chat ul#messages .message-body code{padding:.1rem .3rem;border-radius:3px}main#chat ul#messages .message-reactions{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:.25rem 0 0;padding:0}main#chat ul#messages .message-reactions li{padding:.05rem .4rem;border-radius:999px;font-size:.85rem}main#chat form#composer{display:flex;gap:.5rem;padding:.5rem}main#chat form#composer textarea#composer-input{flex:1;resize:none;max-height:8rem;font:inherit}aside#users{grid-column:3;overflow-y:auto}aside#users h2#user-list-heading{margin:0;padding:.5rem .75rem;font-size:.9rem}aside#users ul#user-list{list-style:none;margin:0;padding:.5rem}aside#users ul#user-list li{line-height:1.4}section#console{position:relative;flex-shrink:0;height:30vh;display:flex;flex-direction:column}section#console[hidden]{display:none}section#console button#console-copy{position:absolute;top:.4rem;right:1.6rem;z-index:1;border-radius:4px;padding:.15rem .5rem;font:inherit;font-size:.75rem;line-height:1.4;cursor:pointer}section#console ul#console-log{flex:1;list-style:none;margin:0;padding:.5rem;overflow-y:auto}section#console ul#console-log li{line-height:1.6}section#console ul#console-log span.console-timestamp{display:inline-block;margin-right:.5rem;font-variant-numeric:tabular-nums}section#console ul#console-log code{white-space:pre-wrap;overflow-wrap:break-word}ul#toasts{position:fixed;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0;width:280px;z-index:10}ul#toasts li.toast{position:relative;padding:.75rem 2rem .75rem .75rem;border-radius:6px}ul#toasts li.toast p.toast-text{margin:0 0 .5rem}ul#toasts li.toast button.toast-dismiss{position:absolute;top:.4rem;right:.4rem;border:none;background:none;cursor:pointer;font-size:1.1rem;line-height:1}ul#toasts li.toast div.toast-actions{display:flex;gap:.5rem}ul#toasts li.toast div.toast-actions button{cursor:pointer}:root{color-scheme:dark;--bg: #1a1b1e;--bg-alt: #202225;--text: #d8d9db;--text-muted: #8a8d91;--border: #000;--accent: #3b6ea5;--action: #f783ac}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}section#connecting-screen,section#auth-screen{background:var(--bg)}section#connecting-screen p#connecting-text{color:var(--text-muted)}section#auth-screen form#auth-form{background:var(--bg-alt);border:1px solid var(--border);color:var(--text);box-shadow:0 2px 8px #0006}section#auth-screen form#auth-form p#auth-subtitle,section#auth-screen form#auth-form label{color:var(--text-muted)}section#auth-screen form#auth-form input{background:var(--bg);color:var(--text);border:1px solid var(--border)}section#auth-screen form#auth-form button#auth-submit{background:var(--accent);color:#fff;border:none}section#auth-screen form#auth-form p#auth-error{color:#ff6b6b}section#auth-screen form#auth-form p#auth-toggle{color:var(--text-muted)}section#auth-screen form#auth-form p#auth-toggle button#auth-mode-toggle{color:var(--accent)}nav#channels{background:var(--bg-alt);border-right:1px solid var(--border)}nav#channels h2#channel-list-heading{color:var(--text-muted)}nav#channels ul#channel-list button{display:block;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:.5rem .75rem;cursor:pointer}nav#channels ul#channel-list button:hover{background:var(--border)}nav#channels ul#channel-list button[aria-current=true]{background:var(--accent);color:#fff}nav#channels ul#channel-list button.channel-unjoined{color:var(--text-muted)}nav#channels ul#channel-list button.channel-leave{background:none;border:none;color:var(--text-muted)}nav#channels ul#channel-list button.channel-leave:hover{background:var(--border);color:var(--text)}footer#status-bar{background:var(--bg-alt);color:var(--text);border-top:1px solid var(--border)}footer#status-bar span#connection-status.connection-disconnected{background:#ff6b6b}footer#status-bar span#connection-status.connection-connecting{background:#ffd43b}footer#status-bar span#connection-status.connection-connected{background:#51cf66}footer#status-bar button#console-toggle{color:var(--text-muted)}footer#status-bar button#console-toggle:hover{color:var(--text)}aside#users{background:var(--bg-alt);border-left:1px solid var(--border);color:var(--text-muted)}main#chat div#chat-header{background:var(--bg-alt);border-bottom:1px solid var(--border)}main#chat header#topic{color:var(--text-muted)}main#chat header#topic button#channel-info-toggle{background:none;border:none;color:var(--text-muted)}main#chat header#topic button#channel-info-toggle:hover{color:var(--text)}main#chat ul#channel-modes{color:var(--text-muted)}main#chat ul#channel-modes code{font-family:ui-monospace,monospace;background:var(--bg);padding:.05rem .3rem;border-radius:3px}main#chat ul#messages .message-author{font-weight:600}main#chat ul#messages .message-time{color:var(--text-muted);font-size:.75rem}main#chat ul#messages .message-body code{background:var(--bg-alt);font-family:ui-monospace,monospace}main#chat ul#messages .message-body s{color:var(--text-muted)}main#chat ul#messages .message-body.message-action{font-style:italic;color:var(--action)}main#chat ul#messages .message-body a,main#chat header#topic p#topic-text a{color:var(--accent)}main#chat ul#messages .message-body a:hover,main#chat header#topic p#topic-text a:hover{text-decoration-thickness:2px}main#chat ul#messages .message-reactions li{background:var(--bg-alt);border:1px solid var(--border);color:var(--text)}main#chat form#composer{background:var(--bg-alt);border-top:1px solid var(--border)}main#chat form#composer textarea#composer-input{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:.4rem .6rem}main#chat form#composer textarea#composer-input:disabled{color:var(--text-muted)}main#chat form#composer button{background:var(--accent);color:#fff;border:none;padding:.4rem .8rem;cursor:pointer}section#console{background:#000;color:var(--text);border-top:1px solid var(--border);font-family:ui-monospace,monospace;font-size:.85rem}section#console button#console-copy{background:var(--bg-alt);color:var(--text-muted);border:1px solid var(--border);font-family:system-ui,sans-serif}section#console button#console-copy:hover{color:var(--text);border-color:var(--text-muted)}section#console ul#console-log span.console-timestamp{color:var(--text-muted)}section#console ul#console-log li.log-trace{color:var(--text)}section#console ul#console-log li.log-debug{color:#51cf66}section#console ul#console-log li.log-info{color:#3bc9db}section#console ul#console-log li.log-warn{color:#ffd43b}section#console ul#console-log li.log-error{color:#ff6b6b}ul#toasts li.toast{background:var(--bg-alt);border:1px solid var(--border);color:var(--text);box-shadow:0 2px 8px #0006}ul#toasts li.toast button.toast-dismiss{color:var(--text-muted)}ul#toasts li.toast button.toast-dismiss:hover{color:var(--text)}ul#toasts li.toast div.toast-actions button{background:var(--accent);color:#fff;border:none;border-radius:4px;padding:.3rem .7rem}.user-color-0{color:#ff6b6b}.user-color-1{color:#ffa94d}.user-color-2{color:#ffd43b}.user-color-3{color:#94d82d}.user-color-4{color:#51cf66}.user-color-5{color:#38d9a9}.user-color-6{color:#22b8cf}.user-color-7{color:#4dabf7}.user-color-8{color:#748ffc}.user-color-9{color:#9775fa}.user-color-10{color:#da77f2}.user-color-11{color:#f783ac}