/* Compact navy/red chat client. All styling and assets are served locally. */
:root{--font:Arial,Helvetica,sans-serif;--text:#fff;--canvas:#000030;--red:#d60000;--grey:#8a9ab8;--light:#bdc9e4;--bevel-light:#c7d1e7;--bevel-dark:#35405c}
html,body{background:#e4e5ec;color:#000030;color-scheme:light;font:12px var(--font)}
a{color:#000030}input[type=checkbox]{accent-color:#607593}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell{width:min(980px,calc(100% - 28px));margin:10px auto 0}
.masthead{min-height:62px;gap:12px;padding:0 4px 8px;align-items:center}
.brand{color:#000030;gap:8px}.classic-logo{width:112px;height:46px;object-fit:contain}
.brand-caption{font-size:8px;letter-spacing:1px;line-height:1.45}.brand-caption strong{color:#d60000;font-size:16px;letter-spacing:2px}
.masthead-right{gap:10px;align-self:center;font-size:11px}.own-nick{font-weight:400;color:#000030}.tagline{color:#636980;font-size:10px;margin:0}
.retro-button{padding:2px 7px;background:#8a9ab8;color:#fff;font-weight:400;font-size:11px;line-height:13px;text-shadow:none;border-color:#c7d1e7 #35405c #35405c #c7d1e7;box-shadow:inset 1px 1px #abbad6,inset -1px -1px #647696}
.retro-button:hover:not(:disabled){background:#9baac7}.retro-button:active:not(:disabled){box-shadow:inset 1px 1px #647696}
.retro-button:disabled{opacity:1;color:#bdc5d7;text-shadow:1px 1px #52617e}
.chat-window{background:#000030;color:#fff;color-scheme:dark;border-color:#c7d1e7 #3b4661 #3b4661 #c7d1e7;box-shadow:1px 1px #8695b3;padding:2px}
.window-title{background:#000030;color:#cdd5e8;font-weight:400;font-size:10px;min-height:18px;height:18px;padding:0 3px}
.window-title-right{gap:6px}.title-button{background:#8a9ab8;color:#fff;text-shadow:none;border-color:#c7d1e7 #35405c #35405c #c7d1e7;width:16px;height:16px;line-height:11px;font-size:11px}
#demoBadge{color:#cdd5e8;font-size:9px}
.channel-toolbar{display:flex;gap:3px;padding:2px 3px 4px;align-items:center;min-width:0}
.channel-bar{background:#000030;gap:3px;padding:0;overflow:auto;min-width:0;scrollbar-width:none}
.channel-bar::-webkit-scrollbar{display:none}.channel-bar .retro-button{font-weight:700;font-size:10px;min-width:29px;padding:1px 5px;line-height:13px;flex-shrink:0}
.channel-bar .retro-button[aria-selected=true]{background:#d60000;color:#fff}
.channel-actions{display:flex;gap:3px;padding:0;flex-wrap:nowrap;flex-shrink:0}.channel-actions .retro-button{font-size:10px;padding:1px 5px;line-height:13px}
.chat-tabs{border-bottom:0;min-height:0;padding:0 3px 3px;gap:3px;scrollbar-width:thin}
.chat-tab{padding:2px 6px;gap:7px;background:#7185a6;color:#fff;font-size:10px;line-height:13px;border:1px solid;border-color:#bdc9e4 #35405c #35405c #bdc9e4}
.chat-tab.active{background:#000030;border-color:#c7d1e7;color:#fff}.chat-tab button{color:#b5c3dc;font-size:10px;line-height:12px}
.chat-stage{display:grid;grid-template-columns:minmax(0,1fr) 24%;gap:4px;padding:0 3px 3px;height:clamp(340px,calc(var(--app-height,100dvh) - 158px),620px);min-height:340px;max-height:none}
.chat-left{min-height:0;min-width:0;display:flex;flex-direction:column;border:2px solid;border-color:#b7c2df #3b4661 #3b4661 #b7c2df;padding:1px}
.conversation{flex:1;min-height:0;border:0;background:#000030;position:relative}
.channel-heading{background:#d60000;color:#fff;min-height:19px;height:19px;padding:1px 3px;font-size:11px;line-height:16px;font-weight:700;gap:0;flex-shrink:0}
.message-log{background:#000030;color:#fff;padding:2px 3px;font:12px/15px Arial,Helvetica,sans-serif;scrollbar-width:auto;scrollbar-color:#bdc9e4 #000030;overflow-y:scroll}
.message-log p{margin:0}.chat-line{min-height:15px}.chat-nick{font-weight:700}
.chat-line.mention{background:#17234b}.chat-line time{color:#a8b8d5;font-size:9px;margin-right:5px}
.system-line,.local-line{font-size:12px;line-height:15px}.system-line{color:#ffff00}.local-line{color:#b9c5df}
.message-log .log-welcome{color:#b9c5df;font-size:12px;line-height:17px;margin:3px 0 10px}.log-welcome strong{color:#fff}
.emoticon{width:13px;height:13px;vertical-align:-2px}
.message-options{color:#b9c5df;font-size:11px;min-width:17px;padding:0 2px;line-height:15px}.message-options:hover{color:#fff}
.conversation-notes{padding:0 3px;font-size:9px;color:#aab8d3;flex-shrink:0;line-height:14px;display:flex;justify-content:space-between;gap:5px}.conversation-notes:not(:has(#conversationHint:not(:empty),#typingLine:not(:empty))){display:none}
.typing-line{padding:0;min-height:0;font-size:9px;color:#aab8d3}.typing-line:empty{display:none}
.new-messages{bottom:18px;font-size:10px}
.composer{padding:3px 1px 2px;background:#000030;color:#fff;flex-shrink:0}.composer-row{gap:2px}
.composer-row input{padding:1px 4px;font-size:12px;line-height:18px;height:24px;min-height:0;background:#fff;color:#111;color-scheme:light;border:2px solid;border-color:#7d8eac #dbe2f1 #dbe2f1 #7d8eac}
.composer-row input::placeholder{color:#808694;font-size:11px}.composer-row input:disabled{background:#e8edf5;color:#737b8b}
.composer-row .retro-button{height:24px;padding:1px 6px;font-size:11px;min-width:28px}.composer-row #sendButton{min-width:43px}
.chat-footer{display:flex;align-items:center;gap:2px;padding:1px 1px 0;min-height:23px;flex-shrink:0}.chat-footer>.retro-button{min-width:78px;height:21px;padding:1px 7px}
.status-bar{min-width:0;min-height:0;flex:1;padding:0 3px;background:#000030;color:#aab8d3;gap:7px;font-size:9px;line-height:15px;border:0;overflow:hidden;white-space:nowrap}
.connection-state{min-width:0;border:0;padding:0;gap:4px;overflow:hidden;text-overflow:ellipsis}.connection-state i{width:5px;height:5px;flex-shrink:0}.server-clock{margin-left:auto;font-size:9px;color:#aab8d3}#onlineCount{display:none}
.user-panel{background:#000030;border:2px solid;border-color:#b7c2df #3b4661 #3b4661 #b7c2df;min-width:0;padding:1px;color-scheme:dark}
.user-panel-tabs{display:flex;gap:2px;padding:0 0 4px;background:#000030;flex-shrink:0;min-width:0}
.user-panel-tabs .retro-button{flex:1;min-width:0;font-size:10px;font-weight:700;line-height:13px;padding:1px 3px;height:19px}
.user-panel-tabs [aria-selected=true]{background:#7185a6;border-color:#35405c #c7d1e7 #c7d1e7 #35405c;box-shadow:inset 1px 1px #526381}
.side-view{display:flex;flex-direction:column;flex:1;min-height:0}
.user-panel-title{background:#d60000;color:#fff;display:block;font-weight:700;font-size:11px;min-height:19px;height:19px;line-height:16px;padding:1px 3px;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.user-list{padding:2px 1px 2px 4px;scrollbar-width:auto;scrollbar-color:#bdc9e4 #000030;overflow-y:scroll}
.user-list button{font:700 12px/15px Arial,Helvetica,sans-serif;color:#fff;padding:0 2px;height:16px;min-height:16px;border:0;background:none}
.user-list button.selected{background:#4d6594;color:#fff}.user-list button.away{color:#a9bad8}.empty-users{padding:3px 1px;font-size:11px;line-height:15px;color:#b9c5df}
.user-actions{display:grid;grid-template-columns:1fr 1fr 42px;gap:2px;padding:1px 0 0;min-height:24px;flex-shrink:0;align-items:stretch}
.user-actions #ignoreButton{grid-column:auto}.user-actions .retro-button{font-size:10px;padding:1px 3px;line-height:16px}
.identity-button{background:#d60000;color:#fff;font:bold 22px/24px Georgia,serif;text-shadow:1px 1px #840000;padding:0;border:1px solid;border-color:#f45555 #8b0000 #8b0000 #f45555;opacity:1!important}
.identity-button:disabled{color:#fff;cursor:default}.identity-button:enabled:hover{background:#e31515}
.chatter-search{width:100%;height:21px;min-height:21px;font-size:10px;padding:1px 3px;flex-shrink:0}
.side-search{margin:3px 0 0;padding:1px 3px;background:#fff;color:#111;color-scheme:light;font-size:11px;height:23px;min-height:0;border-color:#7d8eac #dbe2f1 #dbe2f1 #7d8eac}
.side-room-list button{font-weight:400;display:flex;justify-content:space-between;gap:4px;height:20px;line-height:20px}.side-room-list button.selected{background:#4d6594}.side-room-list .room-count{color:#b9c5df;font-size:10px}
.side-options .inline-check{display:flex;align-items:center;gap:4px;font-size:11px;line-height:16px;margin:7px 4px 0}.side-options input{margin:0;width:13px;height:13px;padding:0}
.side-option-buttons{display:flex;flex-direction:column;gap:4px;padding:12px 3px 5px}.side-option-buttons .retro-button{white-space:normal;text-align:left;line-height:15px;padding:3px 5px}
.user-legend{padding:10px 5px;font-size:10px;line-height:15px;color:#b9c5df;margin-top:auto}
.site-footer{color:#72788c;font-size:9px;padding:8px 2px 12px;line-height:12px;gap:8px}.site-footer .tiny-link{font-size:9px}
.dialog-window{background:#d4deee;color:#111b30;color-scheme:light;border-color:#edf3fb #39445f #39445f #edf3fb;box-shadow:1px 1px #6b7997}
.dialog-title{background:#d60000;color:#fff;font:700 12px/16px Arial,sans-serif;min-height:23px;padding:2px 4px}.dialog-body{font-size:12px;line-height:1.4;padding:12px}
.dialog-body h1{font-size:21px}.dialog-body .retro-button,.room-picker li button,.smiley-menu button{background:#8a9ab8;color:#fff;border-color:#edf3fb #39445f #39445f #edf3fb;text-shadow:none;box-shadow:inset 1px 1px #abbad6,inset -1px -1px #647696}
.dialog-body .retro-button:hover{background:#9baac7}.dialog-body .retro-button[aria-selected=true]{background:#d60000;color:#fff}
.dialog-body a{color:#000030}.welcome-symbol,.profile-nick,.code-list code{color:#000030}.dialog-body fieldset{border-color:#8c9dbc}
.dialog-body label,.dialog-body select,.dialog-body input,.dialog-body textarea{color-scheme:light}.dialog-body .welcome-symbol{font-size:21px;letter-spacing:0}
.auth-tabs{margin-bottom:12px}.setup-body{background:#e4e5ec}.toast{background:#d4deee;color:#111b30;border-color:#677b9a}
.chat-window:fullscreen{padding:4px}.chat-window:fullscreen .chat-stage{min-height:0;max-height:none;flex:1}.chat-window:fullscreen .chat-footer{margin-top:0}
.message-log,.user-list{scrollbar-color:auto}
.side-options{overflow-y:auto}
.message-log::-webkit-scrollbar,.user-list::-webkit-scrollbar{width:14px;background:#000030}
.message-log::-webkit-scrollbar-thumb,.user-list::-webkit-scrollbar-thumb{background:#b8c5de;border:1px solid;border-color:#e2e8f4 #7a88a5 #7a88a5 #e2e8f4;box-shadow:inset 1px 1px #d7e0f1,inset -1px -1px #909dbc}
.message-log::-webkit-scrollbar-button:single-button,.user-list::-webkit-scrollbar-button:single-button{display:block;height:14px;background-color:#bdc9e4;border:1px solid;border-color:#e2e8f4 #7a88a5 #7a88a5 #e2e8f4;background-repeat:no-repeat;background-position:center}
.message-log::-webkit-scrollbar-button:single-button:vertical:decrement,.user-list::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("scroll-up.svg")}
.message-log::-webkit-scrollbar-button:single-button:vertical:increment,.user-list::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("scroll-down.svg")}
@media(max-width:760px){.site-shell{width:calc(100% - 12px);margin-top:4px}.masthead{min-height:50px;padding-bottom:4px}.classic-logo{width:88px;height:36px}.brand-caption{font-size:7px}.brand-caption strong{font-size:14px}.tagline{display:none}.chat-stage{grid-template-columns:minmax(0,1fr) 190px;height:calc(var(--app-height,100dvh) - 135px);min-height:280px;max-height:none}.channel-bar .retro-button{min-width:26px}.channel-toolbar{gap:3px}}
@media(max-width:600px){html,body{height:100%;overflow:hidden}.site-shell{width:100%;height:var(--app-height,100dvh);padding:0 4px;margin:0;display:flex;flex-direction:column}.masthead{min-height:47px;max-height:47px;padding:3px 4px;flex-shrink:0}.classic-logo{width:80px;height:33px}.brand{gap:5px}.brand-caption{font-size:6px;letter-spacing:.6px}.brand-caption strong{font-size:13px;letter-spacing:1.5px}.own-nick{max-width:115px;font-size:11px}.chat-window{flex:1;min-height:0;display:flex;flex-direction:column}.window-title{min-height:17px;height:17px;font-size:9px;flex-shrink:0}#demoBadge{font-size:8px}.channel-toolbar{flex-shrink:0;padding:3px 2px;min-height:28px}.channel-bar{gap:3px;flex:1}.channel-bar .retro-button{min-width:29px;padding:3px 5px;font-size:10px;line-height:15px;height:25px}.channel-actions #newRoomButton{display:none}.channel-actions .retro-button{padding:3px 5px;line-height:15px;height:25px;font-size:10px}.mobile-people{display:inline-block!important;margin-left:0}.chat-tabs{flex-shrink:0;padding:0 2px 3px;min-height:0}.chat-tab{font-size:10px;line-height:15px;padding:3px 6px}.chat-stage{display:block;position:relative;flex:1;min-height:0;height:auto;padding:0 2px 2px}.chat-left{height:100%;padding:1px}.channel-heading{font-size:10px;min-height:20px;height:20px;line-height:17px}.message-log{font-size:12px;line-height:16px;padding:2px 3px}.chat-line{min-height:16px}.system-line,.local-line{font-size:12px;line-height:16px}.chat-line time{font-size:9px}.message-options{opacity:1;min-width:24px;line-height:16px;padding:1px 4px;margin:0 0 0 auto;color:#8799b8}.composer{padding:3px 1px 2px}.composer-row input{font-size:16px;line-height:24px;height:34px;min-height:34px;padding:3px 4px}.composer-row input::placeholder{font-size:12px}.composer-row .retro-button{height:34px;font-size:11px;padding:3px 7px}.chat-footer{min-height:26px}.chat-footer>.retro-button{min-width:54px;height:25px;font-size:11px;padding:3px 7px}.status-bar{font-size:9px;gap:4px;min-height:0}.connection-state{min-width:0}.server-clock{font-size:9px}.user-panel{display:none;position:absolute;right:2px;top:0;bottom:2px;width:220px;z-index:5;box-shadow:-3px 0 #0009}.user-panel.visible{display:flex}.user-panel-tabs{padding-bottom:3px;gap:2px}.user-panel-tabs .retro-button{height:26px;font-size:10px;line-height:19px;padding:1px 2px}.mobile-close{display:block;width:24px;height:26px;line-height:20px;flex-shrink:0;font-size:16px}.user-list button{font-size:12px;line-height:24px;height:24px;min-height:24px}.user-actions{min-height:30px;grid-template-columns:1fr 1fr 42px}.user-actions .retro-button{font-size:11px;line-height:22px}.identity-button{font-size:24px;line-height:28px}.chatter-search{height:28px;min-height:28px;font-size:11px}.side-search{font-size:16px;height:31px}.side-room-list button{font-size:12px;line-height:28px;height:28px}.side-options .inline-check{font-size:12px;line-height:20px;margin:9px 5px 0}.side-option-buttons .retro-button{font-size:12px;line-height:19px;padding:4px 5px}.site-footer{font-size:8px;padding:5px 2px calc(5px + env(safe-area-inset-bottom));line-height:10px;flex-shrink:0}.site-footer .tiny-link{font-size:8px}.site-footer>span{max-width:none}.modal-overlay{padding:10px;background:#000030b3}.dialog-window{max-height:calc(var(--app-height,100dvh) - 20px)}.dialog-body{padding:12px}.dialog-body input:not([type=checkbox]),.dialog-body textarea,.dialog-body select{font-size:16px}.setup-body{height:auto;overflow:auto;padding:18px 10px}.setup-window{max-height:none}.toast{bottom:70px}}