/* Interface shape is independent of the selected color palette. */
:root{--interface-line:var(--ui-line,#526379);--interface-surface:var(--site-head,var(--admin-head,#23374b));--interface-accent:var(--site-accent,var(--admin-accent,#17699a))}
:root[data-theme="light"]{--interface-line:var(--ui-line,#a6b7c8)}
:root[data-ui-style="windows"] body{font-family:"Segoe UI",system-ui,sans-serif}
:root[data-ui-style="windows"] .app{padding:10px;gap:10px;background:var(--site-chat,var(--admin-body,#172333))}
:root[data-ui-style="windows"] .rail,:root[data-ui-style="windows"] .list-pane,:root[data-ui-style="windows"] .chat,:root[data-ui-style="windows"] .panel{border:1px solid var(--interface-line);border-radius:12px;box-shadow:0 4px 12px #00000012}
:root[data-ui-style="windows"] .titlebar,:root[data-ui-style="windows"] .chat-head,:root[data-ui-style="windows"] .topbar{border-bottom:1px solid var(--interface-line);background:var(--interface-surface)}
:root[data-ui-style="windows"] #modal .modal-box{border-radius:12px;border:1px solid var(--interface-line);box-shadow:0 16px 42px #00000035}
:root[data-ui-style="windows"] #modal .modal-box>header{padding:12px 16px;border-bottom:1px solid var(--interface-line);background:var(--site-selected,#315675)}
:root[data-ui-style="windows"] .nav,:root[data-ui-style="windows"] .service-link,:root[data-ui-style="windows"] .sidebar nav a{border-radius:6px}
:root[data-ui-style="windows"] .nav.active,:root[data-ui-style="windows"] .sidebar nav a.active{box-shadow:inset 3px 0 var(--interface-accent)}
:root[data-ui-style="windows"] .bubble{border-radius:10px;box-shadow:0 1px 3px #00000012}
:root[data-ui-style="windows"] button,:root[data-ui-style="windows"] input,:root[data-ui-style="windows"] select,:root[data-ui-style="windows"] textarea{font-family:inherit}
:root[data-ui-style="game"] body{font-family:system-ui,sans-serif}
:root[data-ui-style="game"] .brand,:root[data-ui-style="game"] .titlebar h1,:root[data-ui-style="game"] .topbar h1{font-weight:900;letter-spacing:.06em}
:root[data-ui-style="game"] .rail,:root[data-ui-style="game"] .sidebar{border-right:3px solid var(--interface-accent)}
:root[data-ui-style="game"] .chat-head,:root[data-ui-style="game"] .list-top,:root[data-ui-style="game"] .topbar{border-bottom:3px solid var(--interface-accent)}
:root[data-ui-style="game"] .nav,:root[data-ui-style="game"] .service-link,:root[data-ui-style="game"] .sidebar nav a{border-radius:3px;border:1px solid var(--interface-line);margin-bottom:4px;font-weight:800}
:root[data-ui-style="game"] .nav.active,:root[data-ui-style="game"] .sidebar nav a.active{border-left:6px solid var(--interface-accent)}
:root[data-ui-style="game"] .row{border-left:4px solid var(--interface-accent);border-bottom:1px solid var(--interface-line);border-radius:3px;margin:5px 0}
:root[data-ui-style="game"] .avatar{border-radius:8px;border:2px solid var(--interface-accent)}
:root[data-ui-style="game"] #modal .modal-box,:root[data-ui-style="game"] .panel,:root[data-ui-style="game"] .card,:root[data-ui-style="game"] .stat-card{border-radius:3px;border:2px solid var(--interface-line);box-shadow:5px 5px 0 #00000018}
:root[data-ui-style="game"] #modal .modal-box>header{border-bottom:3px solid var(--interface-accent)}
:root[data-ui-style="game"] button.primary,:root[data-ui-style="game"] .button.primary,:root[data-ui-style="game"] .composer button.send{border-radius:3px;border-bottom:4px solid var(--interface-line);font-weight:900;letter-spacing:.04em}
:root[data-ui-style="game"] .bubble{border-radius:3px 12px 12px 12px;border-left:3px solid var(--interface-accent)}
:root[data-ui-style="game"] .own .bubble{border-radius:12px 3px 12px 12px}
:root[data-ui-style="hacker"] body,:root[data-ui-style="hacker"] button,:root[data-ui-style="hacker"] input,:root[data-ui-style="hacker"] textarea,:root[data-ui-style="hacker"] select{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
:root[data-ui-style="hacker"] .brand,:root[data-ui-style="hacker"] .titlebar h1,:root[data-ui-style="hacker"] .topbar h1{letter-spacing:.04em}
:root[data-ui-style="hacker"] .brand-icon{border-radius:0}
:root[data-ui-style="hacker"] .rail,:root[data-ui-style="hacker"] .sidebar,:root[data-ui-style="hacker"] .list-pane{border-right:1px dashed var(--interface-accent)}
:root[data-ui-style="hacker"] .nav,:root[data-ui-style="hacker"] .service-link,:root[data-ui-style="hacker"] .sidebar nav a,:root[data-ui-style="hacker"] .row,:root[data-ui-style="hacker"] .bubble,:root[data-ui-style="hacker"] .avatar,:root[data-ui-style="hacker"] .panel,:root[data-ui-style="hacker"] .card,:root[data-ui-style="hacker"] .stat-card{border-radius:0;box-shadow:none}
:root[data-ui-style="hacker"] .nav.active,:root[data-ui-style="hacker"] .sidebar nav a.active{border-left:4px solid var(--interface-accent)}
:root[data-ui-style="hacker"] .chat-head,:root[data-ui-style="hacker"] .topbar{border-bottom:1px dashed var(--interface-accent)}
:root[data-ui-style="hacker"] .row{border-bottom:1px dashed var(--interface-line)}
:root[data-ui-style="hacker"] .bubble{border:1px solid var(--interface-line)}
:root[data-ui-style="hacker"] #modal .modal-box{border-radius:0;border:1px solid var(--interface-accent);box-shadow:8px 8px 0 #00000020}
:root[data-ui-style="hacker"] #modal .modal-box>header{border-bottom:1px dashed var(--interface-accent)}
:root[data-ui-style="hacker"] #modal input,:root[data-ui-style="hacker"] #modal textarea,:root[data-ui-style="hacker"] #modal select,:root[data-ui-style="hacker"] .secondary,:root[data-ui-style="hacker"] .primary,:root[data-ui-style="hacker"] .button,:root[data-ui-style="hacker"] .search{border-radius:0}
/* A dense list, a directory, a top toolbar and a focused chat are different structures. */
:root[data-layout="compact"] .row{min-height:60px;padding:7px 10px;gap:8px}
:root[data-layout="compact"] .row .avatar{width:32px;height:32px;min-width:32px}
:root[data-layout="compact"] .row-preview{font-size:12px;line-height:1.3}
:root[data-layout="compact"] .messages{padding-top:12px;padding-bottom:12px}
:root[data-layout="compact"] .bubble{padding:7px 10px}
:root[data-layout="compact"] .chat-head{height:58px;min-height:58px}
:root[data-layout="cards"] .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;padding:12px}
:root[data-layout="cards"] .row{display:flex;flex-direction:column;align-items:flex-start;min-height:164px;padding:15px;border:1px solid var(--interface-line);border-radius:12px;background:var(--interface-surface)}
:root[data-layout="cards"] .row-info{width:100%}
:root[data-layout="cards"] .row .avatar{width:48px;height:48px;min-width:48px;margin-bottom:5px}
:root[data-layout="cards"] .row-head{width:100%}
:root[data-layout="cards"] .row-preview{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root[data-layout="cards"] .row-head small{display:none}
:root[data-ui-style="hacker"][data-layout="cards"] .row,:root[data-ui-style="game"][data-layout="cards"] .row{border-radius:0}
@media(min-width:1101px){
 :root[data-layout="classic"] .app{grid-template-columns:220px 340px minmax(0,1fr)}
 :root[data-layout="compact"] .app{grid-template-columns:190px 300px minmax(0,1fr)}
 :root[data-layout="cards"] .app:not(.conversation-open){grid-template-columns:220px minmax(0,1fr)}
 :root[data-layout="cards"] .app:not(.conversation-open) .chat{display:none}
 :root[data-layout="cards"] .app:not(.conversation-open) .rows{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
 :root[data-layout="cards"] .app.conversation-open{grid-template-columns:210px 430px minmax(0,1fr)}
 :root[data-layout="focus"] .app:not(.conversation-open){grid-template-columns:220px minmax(0,1fr)}
 :root[data-layout="focus"] .app:not(.conversation-open) .chat{display:none}
 :root[data-layout="focus"] .app:not(.conversation-open) .rows{max-width:960px;width:100%;margin:auto}
 :root[data-layout="focus"] .app.conversation-open{grid-template-columns:220px minmax(0,1fr)}
 :root[data-layout="focus"] .app.conversation-open .list-pane{display:none}
 :root[data-layout="focus"] .app.conversation-open #back{display:inline-block}
 :root[data-layout="focus"] .messages,:root[data-layout="focus"] .composer{width:100%;max-width:980px;margin-left:auto;margin-right:auto}
 :root[data-layout="wide"] .app{grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 :root[data-layout="wide"] .rail{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:180px minmax(300px,1fr) minmax(280px,400px);gap:10px;padding:8px 12px;max-height:160px;overflow:auto;border-right:0;border-bottom:1px solid var(--interface-line);scrollbar-gutter:auto}
 :root[data-layout="wide"] .rail>.brand{grid-column:1;grid-row:1;margin:0;padding:0}
 :root[data-layout="wide"] .rail>nav{grid-column:2;grid-row:1;display:flex;gap:6px;margin:0;align-items:center}
 :root[data-layout="wide"] .rail>nav .nav{padding:8px;white-space:nowrap}
 :root[data-layout="wide"] .rail>.user-services{grid-column:1/3;grid-row:2;display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;min-width:0}
 :root[data-layout="wide"] .user-services .service-heading{display:none}
 :root[data-layout="wide"] .user-services .service-balance{min-width:130px;width:130px;flex-shrink:0;margin:0}
 :root[data-layout="wide"] .user-services .service-nav{display:flex;overflow-x:auto;gap:6px;min-width:0;padding-bottom:4px}
 :root[data-layout="wide"] .service-link{flex-shrink:0;width:auto;white-space:nowrap;min-height:36px;padding:7px 9px}
 :root[data-layout="wide"] .service-link b{white-space:nowrap}
 :root[data-layout="wide"] .rail>.rail-bottom{grid-column:3;grid-row:1/3;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;border:0;min-width:0}
 :root[data-layout="wide"] .rail-bottom p{display:none}
 :root[data-layout="wide"] .rail-bottom .language-picker,:root[data-layout="wide"] .rail-bottom .theme-toggle{margin:0;width:auto;flex:1}
 :root[data-layout="wide"] #identity{width:100%}
 :root[data-layout="wide"] #identity .identity{padding:2px}
 :root[data-layout="wide"] .list-pane{grid-column:1;grid-row:2}
 :root[data-layout="wide"] .chat{grid-column:2;grid-row:2}
 :root[data-layout="wide"] .messages,:root[data-layout="wide"] .composer{max-width:1200px;width:100%;margin:auto}
}
@media(max-width:720px){
 :root[data-ui-style="windows"] .app{padding:0;gap:0}
 :root[data-ui-style="windows"] .list-pane,:root[data-ui-style="windows"] .chat{border-radius:0;border:0}
 :root[data-layout="cards"] .rows{gap:8px;padding:8px}
 :root[data-layout="cards"] .row{min-height:148px;padding:10px}
 :root[data-layout="compact"] .row{min-height:64px}
}
@media(max-width:359px){:root[data-layout="cards"] .rows{grid-template-columns:1fr}}
:root[data-ui-style="hacker"] button{border-radius:0}
:root[data-ui-style="game"] button.icon,:root[data-ui-style="game"] button.add{border-radius:4px}
:root[data-layout="cards"] .rows>.empty{grid-column:1/-1}
.embed-selection-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;position:sticky;top:0;background:var(--site-head,#23374b);z-index:5}
.embed-selection-toolbar span{font-size:12px;flex:1;min-width:100px}
.space-media-item{position:relative;min-width:0}
.embed-select-label{position:absolute;top:5px;left:5px;z-index:4;display:flex!important;align-items:center;gap:5px!important;min-height:36px;padding:6px 9px;border:1px solid var(--ui-line);border-radius:6px;background:var(--site-head,#23374b);color:var(--ui-text)!important;cursor:pointer}
#modal .embed-select-label input{width:18px!important;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--site-accent)}
.space-media-item.embed-selected{outline:3px solid var(--site-accent);outline-offset:-3px}
@media(max-width:480px){.embed-selection-toolbar button{flex:1;min-height:40px}.embed-selection-toolbar span{flex-basis:100%}}

#modal .embed-selection-toolbar select{width:auto;flex:1;min-width:min(190px,100%)}
@media(max-height:500px){.embed-selection-toolbar{position:static}}
/* Trusted role identity remains separate from editable decoration and avatars. */
.user-avatar-shell{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;padding:3px;border:2px solid transparent;border-radius:50%;box-sizing:border-box;max-width:100%}
.user-avatar-shell .avatar{margin:0;flex-shrink:0;overflow:hidden}
.user-avatar-shell[data-avatar-frame=ring]{border-color:var(--avatar-frame-color)}
.user-avatar-shell[data-avatar-frame=double]{border:3px double var(--avatar-frame-color)}
.user-avatar-shell[data-avatar-frame=square]{border-color:var(--avatar-frame-color);border-radius:8px}
.user-avatar-shell[data-avatar-frame=diamond]{border-color:var(--avatar-frame-color);border-radius:14px 3px}
.system-role-badge{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;flex:0 0 auto;white-space:nowrap;background:#1248a0;color:#fff!important;border:1px solid #fff;border-radius:5px;padding:2px 5px;font:700 10px/1.3 system-ui;letter-spacing:.4px;animation:none!important;text-shadow:none;opacity:1!important}
.system-role-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.user-handle{font:11px/1.4 system-ui;color:var(--site-muted);overflow-wrap:anywhere;min-width:0;unicode-bidi:plaintext}
.message-sender{flex-wrap:wrap;min-width:0;row-gap:4px}
.message-sender .sender-avatar{width:auto;height:auto;flex:0 0 auto;overflow:visible;background:none;border-radius:0}
.message-sender .user-avatar-shell .avatar{width:26px;height:26px;font-size:12px}
.message-sender .sender-name{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;unicode-bidi:plaintext}
.member{flex-wrap:wrap;gap:8px;min-width:0}.member-profile{min-width:0;overflow-wrap:anywhere;white-space:normal}
.identity .person{min-width:0}.identity .person strong{white-space:normal;overflow-wrap:anywhere}.identity .user-handle{display:block}
.user-profile-card{min-width:0;flex-wrap:wrap}.user-profile-card h3{overflow-wrap:anywhere}
@media(max-width:480px){.message-sender .user-handle{flex-basis:100%;padding-left:41px}.member .user-handle{flex-basis:100%}.identity .system-role-badge{font-size:9px}}
/* Compact sender identity and message layout. */
.avatar-role-badge{position:absolute;right:-2px;bottom:-2px;z-index:1;width:17px;height:17px;display:grid;place-items:center;border:2px solid var(--site-pane,#fff);border-radius:50%;background:#1248a0;color:#fff;pointer-events:none;animation:none!important;opacity:1!important}
.avatar-role-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4}
#chat .bubble-wrap{width:fit-content;align-self:flex-start;max-width:calc(100% - 46px);gap:0}
#chat .bubble-wrap.own{align-self:flex-end}
#chat .bubble-wrap.album-wrap{width:min(calc(100% - 46px),740px)}
#chat .message-sender{align-self:flex-start;flex-wrap:nowrap;gap:6px;margin:0 0 4px;padding:0;max-width:100%;min-height:30px}
#chat .own .message-sender{align-self:flex-end}
#chat .message-sender .sender-avatar{padding:0;border:0;background:none;width:30px;height:30px;flex:0 0 30px;overflow:visible;box-shadow:none}
#chat .message-sender .user-avatar-shell{padding:1px;border-width:1px}
#chat .message-sender .avatar{width:26px;height:26px;font-size:11px}
#chat .sender-name{font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:230px;padding:0;background:none;border-radius:0}
#chat .message-sender .vip-name-badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;flex:0 1 auto;font-size:9px}
#chat .bubble{padding:8px 11px;min-width:42px;box-shadow:0 1px 2px #0000000a}
#chat .bubble p{margin:0;line-height:1.45}
#chat .bubble p+p{margin-top:6px}
#chat .message-footer{padding:3px 1px;gap:5px;min-height:18px}
#chat .message-footer .bubble-actions{display:none}
#chat .bubble-wrap>.outside-options{top:auto;bottom:0;transform:none}
#chat .messages{gap:12px}
@media(max-width:720px){#chat .messages{padding:14px 12px}#chat .sender-name{max-width:180px}#chat .message-sender{min-height:30px}#chat .chat-utilities .secondary{padding:5px 8px;min-height:28px}#chat .bubble{padding:8px 10px}}
.draft-media-item progress{grid-column:1/-1;width:100%;height:4px;accent-color:var(--site-accent,#518fce)}
.draft-upload-status{font-variant-numeric:tabular-nums}
.list-foot{gap:8px;min-height:49px;height:auto;flex:0 0 auto;padding:7px 12px;flex-wrap:wrap}
.list-sort-label{min-width:0;flex:1;margin:0}
.list-sort-label select{width:100%;max-width:210px;min-width:0;padding:6px 7px;font-size:11px;border:1px solid var(--site-border,#8098ab44);border-radius:6px;background:var(--site-pane,#fff);color:var(--site-text,inherit)}
#listCount{font-size:10px;white-space:nowrap}
@media(max-width:400px){.list-sort-label select{max-width:180px}.list-foot{padding:6px 8px;gap:5px}}
.list-sort-label .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}