.login-page{display:flex;flex-direction:column;justify-content:center;align-items: center;gap:20px;height:100%}.login-box{background:0 0;border:none;width:90%;max-width:400px;padding:0 32px}.login-box h1{font-size:var(--font-size-big);color:var(--text-header);text-align:center;text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;font-weight:400}.login-box .subtitle{text-align:center;color:var(--text-dim);font-size:var(--font-size-small);margin-bottom:16px}.login-tabs{display:flex;gap:0;margin-bottom:16px}.login-tab{text-align:center;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);font-size:var(--font-size-small);flex:1;padding:6px}.login-tab.active{background:var(--bg-header);color:var(--text-header);border-color:var(--border-light)}.login-field{margin-bottom:12px}.login-field label{display:block;color:var(--text-dim);font-size:var(--font-size-small);margin-bottom:4px}.login-field input{width:100%;font-size:16px}.login-submit{font-size:var(--font-size);letter-spacing:1px;display:flex;justify-content:center;align-items: center;gap:6px;width:100%;margin-top:8px;padding:6px}.login-submit:disabled{opacity:.7;cursor:not-allowed}.spinner{display:inline-block;border:2px solid var(--bg-header);animation:spin .6s linear infinite;border-top-color:#0000;border-radius:50%;width:12px;height:12px}@keyframes spin{to{transform:rotate(360deg)}}.login-passkey-btn{font-size:var(--font-size);letter-spacing:1px;background:var(--bg);border:1px solid var(--border-light);color:var(--text);cursor:pointer;width:100%;margin-top:8px;padding:6px}.login-passkey-btn:hover{background:var(--bg-header);color:var(--text-header)}.login-passkey-btn:disabled{opacity:.7;cursor:not-allowed}.passkey-offer{position:fixed;background:var(--bg-header);border:1px solid var(--border-light);display:flex;font-size:var(--font-size);color:var(--text);z-index:1000;white-space:nowrap;flex-direction:column;align-items: center;gap:12px;padding:16px 24px;top:50%;left:50%;transform:translate(-50%,-50%)}.passkey-offer button{font-size:var(--font-size);cursor:pointer;padding:6px 20px}.passkey-offer-device{display:flex;flex-direction:column;gap:4px;width:100%}.passkey-offer-device label{font-size:var(--font-size-small);color:var(--text-dim)}.passkey-offer-device input{width:100%;padding:4px 6px;font-size:16px}.passkey-offer-buttons{display:flex;gap:12px}.login-error{color:var(--accent-red);text-align:center;font-size:var(--font-size-small);min-height:1.4em;margin-top:8px}.login-version{text-align:center;color:var(--text-dim);opacity:.5;margin-top:12px;font-size:7pt}.login-footer{color:var(--text-dim);font-size:var(--font-size-small);text-align:center}.login-logo-block{background:var(--bg-header);text-align:center;border:1px solid var(--border);padding:16px 24px 12px}.login-logo{display:block;width:120px;height:auto;margin:0 auto 8px}.login-logo-title{color:var(--text-header);font-size:var(--font-size-big);letter-spacing:1px;margin-bottom:4px;font-weight:700}.login-logo-since{color:var(--text-dim);font-size:var(--font-size-small);font-weight:400}.login-logo-url{color:#ffffef;font-weight:700}@media (max-width:768px){.login-page{justify-content:flex-start;gap:12px;padding-top:0}.login-logo-block{padding:12px 16px 8px}.login-logo{width:80px}.login-logo-title{font-size:var(--font-size)}.login-logo-since{font-size:7pt}.login-box{padding:16px 20px}}.chat-layout{display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr 4px 240px;height:var(--app-height,100%);gap:0;padding-top:26px}.status-bar{position:fixed;top:var(--vv-offset,0px);z-index:50;background:var(--bg-header);color:var(--text-header);display:flex;font-size:var(--font-size-small);border-bottom:1px solid var(--border);justify-content:space-between;align-items: center;height:26px;padding:0 10px;left:0;right:0}.status-clock .clock-colon-hidden{visibility:hidden}.status-bar .status-left{display:flex;align-items: center;gap:8px}.status-bar .status-right{display:flex;align-items: center;gap:12px}.status-bar .online-count{color:var(--accent-green)}.logout-btn{display:flex;color:var(--accent-red);cursor:pointer;border-radius:3px;align-items: center;padding:2px}.logout-btn:hover{background:#f333}.burger-btn{display:none;color:var(--text-header);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:2px;line-height:1}.burger-btn:hover{background:#ebbf8833}.column-divider{grid-column:2;grid-row:1;cursor:col-resize;background:var(--border);touch-action:none}.column-divider:hover{background:var(--accent-amber)}.message-area{grid-column:1;grid-row:1;overflow-y:auto;padding:4px 8px}.message-area .msg{word-wrap:break-word;animation:msg-in .3s ease-out;margin:1px 0;line-height:1.35}.message-area.no-animate .msg{animation:none}@keyframes msg-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.msg .nick-link{cursor:pointer;font-weight:400}.msg .nick-link:hover{background:var(--link-hover-bg)}.msg .nick-link.mine{color:var(--accent-red)!important}.msg-time{color:var(--text-dim);font-size:var(--font-size-small);margin-right:4px}.msg-login,.msg-logout{color:var(--text-dim);font-size:var(--font-size-small)}.msg-login .nick-inline{color:var(--accent-green)}.msg-logout .nick-inline{color:var(--text-dim)}.msg-kill{color:var(--accent-red);font-size:var(--font-size-small)}.msg-action{font-size:var(--font-size-small)}.msg-whisper{border-left:2px solid var(--accent-cyan);background:#00cccc0d;padding-left:6px}.msg-whisper .whisper-tag{color:var(--accent-cyan);font-size:var(--font-size-small)}.msg-system{color:var(--accent-amber);font-weight:400;font-size:var(--font-size-small)}.msg-invite{color:var(--accent-magenta);font-size:var(--font-size-small)}.input-area{grid-column:1/-1;grid-row:2;display:flex;background:var(--bg-panel);align-items: center;gap:6px;padding:4px 8px}.input-wrap{position:relative;display:flex;flex:1;align-items: center;min-width:0}.input-wrap input[type=text]{width:100%;height:28px;padding-right:48px}.input-btn{position:absolute;display:flex;cursor:pointer;user-select:none;justify-content:center;align-items: center;width:24px;height:28px;font-size:12px;top:0;right:0}.input-btn-clear{color:var(--accent-red);right:0}.input-btn-send{color:var(--accent-green);right:24px}.input-btn:hover{background:var(--bg-hover)}.burger-menu-wrap{position:relative;flex-shrink:0}.btn-burger{background:var(--bg-header);color:var(--text-header);border:1px solid var(--border);cursor:pointer;display:flex;align-items: center;height:28px;padding:4px 8px}.btn-burger:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}.burger-dropdown{position:absolute;background:var(--bg-header);border:1px solid var(--border-light);z-index:100;min-width:140px;margin-bottom:4px;bottom:100%;right:0}.burger-item{cursor:pointer;font-size:var(--font-size-small);color:var(--text);white-space:nowrap;padding:6px 12px}.burger-item:hover{color:var(--accent-cyan);background:#ffffff0d}.burger-item.disabled{opacity:.4;cursor:default}.burger-item.disabled:hover{color:var(--text);background:0 0}.burger-soon{opacity:.5;margin-left:4px;font-size:7pt}.settings-modal{background:var(--bg);border:1px solid var(--border);display:flex;flex-direction:column;width:90%;max-width:420px;max-height:80vh}.settings-header{display:flex;background:var(--bg-header);border-bottom:1px solid var(--border);color:var(--text-header);justify-content:space-between;align-items: center;padding:8px 12px;font-weight:700}.settings-body{overflow-y:auto;padding:12px}.settings-section{margin-bottom:16px}.settings-section-title{color:var(--text-header);font-weight:700;font-size:var(--font-size);margin-bottom:8px}.settings-section-subtitle,.settings-empty{color:var(--text-dim);font-size:var(--font-size-small);margin-bottom:8px}.passkey-row{display:flex;border:1px solid var(--border);justify-content:space-between;align-items: center;margin-bottom:4px;padding:6px 8px}.passkey-row-info{display:flex;flex-direction:column;gap:2px}.passkey-row-name{color:var(--text);font-size:var(--font-size-small)}.passkey-row-date{color:var(--text-dim);font-size:7pt}.passkey-row-delete{color:var(--accent-red);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:14px}.settings-add-btn{font-size:var(--font-size-small);cursor:pointer;background:var(--bg-header);border:1px solid var(--border);color:var(--text);margin-top:8px;padding:4px 12px}.settings-add-btn:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}.passkey-add-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}.passkey-add-form input{padding:4px 6px;font-size:16px}.passkey-add-actions{display:flex;gap:8px}.passkey-add-actions button{font-size:var(--font-size-small);cursor:pointer;padding:4px 12px}.input-area .btn-whisper{background:var(--bg-header);color:var(--accent-cyan);border-color:var(--accent-cyan);white-space:nowrap;height:28px}.input-area .btn-whisper:hover{background:#00cccc26}.whisper-indicator{color:var(--accent-cyan);font-size:var(--font-size-small);display:flex;align-items: center;gap:4px}.whisper-indicator .cancel{cursor:pointer;color:var(--accent-red)}.private-overlay{position:fixed;display:flex;z-index:100;background:#000000b3;justify-content:center;align-items: center;inset:0}.private-chat{background:var(--bg);border:1px solid var(--accent-cyan);display:flex;flex-direction:column;width:500px;max-height:80vh}.private-chat .private-header{background:var(--bg-header);display:flex;color:var(--text-header);justify-content:space-between;align-items: center;padding:6px 10px}.private-chat .private-header .close-btn{cursor:pointer;color:var(--accent-red)}.private-chat .private-messages{overflow-y:auto;flex:1;min-height:200px;padding:8px}.private-chat .private-input{display:flex;border-top:1px solid var(--border);gap:4px;padding:6px}.private-chat .private-input input{flex:1}.kill-overlay{position:fixed;display:flex;z-index:100;background:#000000b3;justify-content:center;align-items: center;inset:0}.kill-menu{background:var(--bg);border:1px solid var(--accent-red);width:360px;padding:16px}.kill-menu h3{color:var(--accent-red);font-size:var(--font-size);margin-bottom:12px}.kill-menu .kill-field{margin-bottom:10px}.kill-menu .kill-field label{display:block;color:var(--text-dim);font-size:var(--font-size-small);margin-bottom:4px}.kill-menu .kill-field select,.kill-menu .kill-field input{width:100%}.kill-menu .kill-buttons{display:flex;justify-content:flex-end;gap:8px}.modal-overlay{position:fixed;display:flex;z-index:300;background:#000000b3;justify-content:center;align-items: center;inset:0}.modal-box{background:var(--bg-panel);border:1px solid var(--border);min-width:240px;max-width:90vw;padding:16px 24px}.modal-title{color:var(--text-header);font-size:var(--font-size);text-align:center;margin-bottom:12px}.modal-body{text-align:center;margin-bottom:16px}.modal-buttons{display:flex;justify-content:center;gap:8px}.mail-modal{background:var(--bg-panel);border:1px solid var(--border);display:flex;flex-direction:column;width:800px;max-width:95vw;height:70vh;max-height:80vh}.mail-header{display:flex;background:var(--bg-header);color:var(--text-header);font-size:var(--font-size);flex-direction:column;gap:4px;padding:6px 12px}.mail-header-top{display:flex;justify-content:space-between;align-items: center}.mail-search-wrap input{background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:var(--font-size-small);width:100%;height:24px;padding:0 24px 0 8px}.mail-close{cursor:pointer;font-size:18px}.mail-body-split{display:flex;overflow:hidden;flex:1}.mail-list-pane{border-right:1px solid var(--border);display:flex;overflow:hidden;flex-direction:column;flex-shrink:0;width:280px;min-width:200px}.mail-list-scroll{overflow-y:auto;flex:1}.mail-content-pane{overflow-y:auto;display:flex;flex-direction:column;flex:1}.mail-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.mail-tabs button{color:var(--text-dim);cursor:pointer;font-size:var(--font-size-small);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:6px 4px}.mail-tabs button.active{color:var(--text-header);border-bottom-color:var(--accent-cyan)}.mail-tabs button:hover{color:var(--text)}.mail-dir-in{color:var(--accent-green);font-weight:700}.mail-dir-out{color:var(--accent-amber);font-weight:700}.mail-row-top{display:flex;align-items: center;gap:4px}.mail-row-top .mail-row-nick{flex:1}.mail-row-top .mail-row-time{flex-shrink:0}.mail-loading,.mail-empty,.mail-content-empty{text-align:center;color:var(--text-dim);display:flex;flex:1;justify-content:center;align-items: center;padding:20px}.mail-row{cursor:pointer;border-bottom:1px solid var(--border);padding:6px 10px;transition:background .1s}.mail-row:hover{background:var(--bg-hover)}.mail-row.active{background:var(--bg-header);color:var(--text-header)}.mail-row.unread .mail-row-nick{color:var(--accent-cyan);font-weight:700}.mail-row-nick{font-size:var(--font-size-small)}.mail-row-time{color:var(--text-dim);font-size:7pt}.mail-row-preview{color:var(--text-dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:7pt;line-height:1.4}.mail-content-header{display:flex;border-bottom:1px solid var(--border);font-size:var(--font-size-small);justify-content:space-between;align-items:baseline;padding:10px 14px}.mail-content-header span{color:var(--text-dim);font-size:7pt}.mail-content-body{font-size:var(--font-size-small);white-space:pre-wrap;word-break:break-word;animation:msg-in .2s ease-out;flex:1;padding:12px 14px}.mail-search-wrap{position:relative;flex:1}.mail-search-clear{position:absolute;cursor:pointer;color:var(--accent-red);font-size:16px;line-height:1;top:50%;right:6px;transform:translateY(-50%)}.mail-content-header-right{display:flex;align-items: center;gap:8px}.mail-reply-btn{background:var(--bg-header);color:var(--accent-cyan);border:1px solid var(--accent-cyan);cursor:pointer;font-size:var(--font-size-small);padding:2px 10px}.mail-reply-btn:hover{background:#00cccc26}.mail-compose{display:flex;border-top:1px solid var(--border);flex-direction:column;flex:1}.mail-compose-to{font-size:var(--font-size-small);color:var(--text-dim);border-bottom:1px solid var(--border);padding:6px 14px}.mail-compose-text{font-size:var(--font-size-small);background:var(--bg);color:var(--text);resize:none;outline:none;border:none;flex:1;min-height:100px;padding:10px 14px;font-family:inherit}.mail-compose-actions{display:flex;border-top:1px solid var(--border);align-items: center;gap:6px;padding:6px 14px}.mail-send-btn{background:var(--bg-header);color:var(--accent-cyan);border:1px solid var(--accent-cyan);cursor:pointer;font-size:var(--font-size-small);padding:4px 16px}.mail-send-btn:hover{background:#00cccc26}.mail-send-btn:disabled{opacity:.3;cursor:default}.mail-cancel-btn{background:var(--bg-header);color:var(--text-header);border:1px solid var(--border);cursor:pointer;font-size:var(--font-size-small);padding:4px 12px}.mail-cancel-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}.mail-compose-hint{color:var(--text-dim);margin-left:auto;font-size:7pt}.mail-pager{display:flex;border-top:1px solid var(--border);justify-content:center;align-items: center;gap:8px;padding:6px;font-size:7pt}.mail-pager button{background:var(--bg-header);color:var(--text-header);border:1px solid var(--border);cursor:pointer;padding:2px 8px}.mail-pager button:disabled{opacity:.3;cursor:default}.modal-buttons button{min-width:60px}.drawer-overlay{display:none}@media (max-width:768px){.chat-layout{grid-template-columns:1fr}.column-divider,.chat-layout>.user-list{display:none}.message-area{grid-column:1}.burger-btn{display:inline-block}.status-bar .online-count{cursor:pointer}.drawer-overlay{display:block;position:fixed;z-index:200;background:#0009;inset:0}.drawer{position:absolute;background:var(--bg);border-left:1px solid var(--border);display:flex;overflow:hidden;flex-direction:column;width:260px;top:0;bottom:0;right:0}.drawer-header{background:var(--bg-header);color:var(--text-header);display:flex;font-size:var(--font-size);border-bottom:1px solid var(--border);justify-content:space-between;align-items: center;padding:8px 12px}.drawer-close{cursor:pointer;color:var(--accent-red);display:flex;border-radius:3px;align-items: center;padding:2px}.drawer-close:hover{background:#f333}.drawer .user-list{overflow-y:auto;grid-column:unset;grid-row:unset;flex:1}.input-area{grid-column:1}.input-wrap input[type=text]{font-size:16px}.private-chat{width:95vw;max-height:90vh}.kill-menu{width:90vw}.modal-overlay:has(.mail-modal){justify-content:stretch;align-items:stretch}.mail-modal{border:none;width:100%;max-width:none;height:100%;max-height:none}.mail-list-pane{width:40%;min-width:120px}.mail-search-wrap input{height:28px;font-size:16px}.mail-compose-text{font-size:16px}}.user-list{grid-column:3;grid-row:1;overflow-y:auto;font-size:var(--font-size-small);padding:4px 6px}.user-list .mates-section{margin-bottom:2px}.user-list .mates-separator{border:none;border-top:1px solid var(--text);width:35px;margin:2px 0}.user-entry{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px;line-height:1.5}.user-entry .user-time{color:var(--text-dim);font-size:7pt}.user-entry .user-nick{cursor:pointer;font-size:9pt;font-weight:400}.user-entry .user-nick:hover{background:var(--link-hover-bg)}.user-entry .user-status{font-size:7pt;font-weight:400}.user-entry .user-city{color:var(--text-dim);font-size:7pt}.user-entry.ignored .user-nick{text-decoration:line-through}.user-entry .sleeping-icon{color:var(--text-dim);font-size:7pt}.user-entry .typing-icon{color:var(--accent-cyan);animation:typing-pulse .8s ease-in-out infinite;font-size:9pt}@keyframes typing-pulse{0%,to{opacity:1}50%{opacity:.3}}.user-entry .invisible-icon{color:var(--accent-cyan);font-size:7pt}.user-entry .altnick-marker{color:var(--text-dim);font-size:7pt}.user-list .user-count{color:var(--text-dim);font-size:var(--font-size-small);margin-top:4px}.user-context-menu{position:fixed;background:var(--bg-panel);border:1px solid var(--border-light);z-index:50;min-width:140px;padding:4px 0}.user-context-menu .menu-item{cursor:pointer;font-size:var(--font-size-small);color:var(--text);padding:3px 12px}.user-context-menu .menu-item:hover{background:var(--bg-header);color:var(--text-header)}.user-context-menu .menu-item.danger{color:var(--accent-red)}.user-context-menu .menu-separator{border-top:1px solid var(--border);margin:2px 0}:root{--bg:#000;--bg-panel:#0a0805;--bg-header:#403425;--bg-input:#1a1108;--bg-hover:#1a1108;--bg-user-highlight:#1a1108;--text:#d6ae7c;--text-dim:#8a7050;--text-header:#ebbf88;--text-bright:#ffffef;--link:#ffffef;--link-hover-bg:#905000;--accent-green:#00ff41;--accent-red:#f33;--accent-cyan:#0cc;--accent-amber:#fa0;--accent-magenta:#f0f;--border:#403425;--border-light:#ebbf88;--input-bg:#ebbf88;--input-border:#ebbf88;--input-text:#000;--scrollbar-thumb:#ebbf88;--scrollbar-track:#0a0805;--font:Arial,Helvetica,sans-serif;--font-size:10pt;--font-size-small:8pt;--font-size-big:12pt}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;overflow:hidden;width:100%;height:100dvh}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--font-size);-webkit-font-smoothing:none;-moz-osx-font-smoothing:auto;font-weight:700;line-height:1.4}a{color:var(--link);text-decoration:none;cursor:pointer;font-size:9pt;font-weight:400}a:hover{background:var(--link-hover-bg)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:1px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:var(--text)}*{scrollbar-color:var(--scrollbar-thumb)var(--scrollbar-track);scrollbar-width:thin}body:after{content:"";position:fixed;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000008 2px 4px);width:100%;height:100%;top:0;left:0}::selection{background:var(--accent-amber);color:var(--bg)}input,textarea,select{font-family:var(--font);font-size:var(--font-size);background:var(--input-bg);color:var(--input-text);border:1px solid var(--border);outline:none;padding:3px 6px}input:focus,textarea:focus{border-color:var(--input-border)}button,.btn{font-family:var(--font);background:var(--border-light);color:var(--bg-header);border:1px solid var(--text);cursor:pointer;border-radius:2px;padding:2px 12px;font-size:9pt;font-weight:700}button:hover,.btn:hover{background:var(--text);border-color:var(--text-dim)}button:active,.btn:active{background:var(--bg-header);color:var(--text-header)}hr{border:none;border-top:1px solid var(--border);margin:4px 0}small{font-size:var(--font-size-small)}big,strong{font-size:var(--font-size-big)}.toast-container{position:fixed;z-index:10000;display:flex;pointer-events:none;flex-direction:column;gap:4px;top:8px;right:8px}.toast{font-size:var(--font-size-small);border:1px solid var(--border);background:var(--bg-header);color:var(--text);pointer-events:auto;animation:toast-in .2s ease-out;padding:6px 14px}.toast-error{border-color:var(--accent-red);color:var(--accent-red)}@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}