/* Every skin rule is opt-in. The original stylesheets remain authoritative for Default. */
html[data-skin] body{background-color:var(--skin-base);color:var(--skin-text)}
html[data-skin] :is(.app-shell,.workspace,.chat-panel,.roster-panel,.composer,.roster-panel header){background-color:var(--skin-base);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] .console-host .console{background-color:var(--skin-base)!important;color:var(--skin-text)}
html[data-skin] :is(.titlebar,.menubar,.session-tabs,.irc-profile-tabs,.menu-dropdown,.modal){background-color:var(--skin-surface);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] :is(button,input,select,textarea){background-color:var(--skin-surface);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] :is(button:enabled:hover,.menu-item.open>button,.tab.active,.irc-profile-tab.active){background-color:var(--skin-accent);color:var(--skin-on-accent)}
html[data-skin] :is(input,select,textarea):focus{outline-color:var(--skin-accent)}
html[data-skin] :is(.roster-panel h1,.discord-name){color:var(--skin-text)}
html[data-skin] .chat{color:var(--skin-chat)}
html[data-skin] :is(.time,.system,.server-label){color:var(--skin-muted)}
html[data-skin] :is(.self,.whisper-syntax){color:var(--skin-accent)}
html[data-skin]:not([data-skin="classic"]) .app-shell{grid-template-rows:38px 36px minmax(0,1fr)}
html[data-skin]:not([data-skin="classic"]) .titlebar{height:38px;padding:0 14px}
html[data-skin]:not([data-skin="classic"]) .menubar{height:36px;padding:0 10px}
html[data-skin]:not([data-skin="classic"]) .workspace{padding:16px;gap:16px;grid-template-columns:minmax(0,1fr) 260px}
html[data-skin]:not([data-skin="classic"]) :is(.chat-panel,.roster-panel){border-radius:14px;box-shadow:0 8px 30px #0003}
html[data-skin]:not([data-skin="classic"]) .chat-panel{grid-template-rows:42px minmax(0,1fr) 54px}
html[data-skin]:not([data-skin="classic"]) .chat-panel:has(>.irc-profile-tabs:not([hidden])){grid-template-rows:42px 30px minmax(0,1fr) 54px}
html[data-skin]:not([data-skin="classic"]) .session-tabs{padding:5px;gap:4px}
html[data-skin]:not([data-skin="classic"]) .session-tabs .tab{height:31px;border-radius:8px;font-size:12px}
html[data-skin]:not([data-skin="classic"]) .console-host .console{padding:16px;font-size:14px;line-height:1.65}
html[data-skin]:not([data-skin="classic"]) .composer{padding:9px;gap:10px}
html[data-skin]:not([data-skin="classic"]) .roster-panel{grid-template-rows:54px minmax(0,1fr)}
html[data-skin]:not([data-skin="classic"]) .roster-panel header{justify-content:space-between;padding:12px}
html[data-skin]:not([data-skin="classic"]) #roster>li{padding-top:7px;padding-bottom:7px}
/* Studio puts the channel roster on the left, without moving live DOM nodes. */
html[data-skin="studio"] .app-shell .workspace{grid-template-columns:240px minmax(0,1fr)}
html[data-skin="studio"] .roster-panel{grid-column:1;grid-row:1}
html[data-skin="studio"] .chat-panel{grid-column:2;grid-row:1}
/* Dock places the main session switcher below chat. */
html[data-skin="dock"] .chat-panel{display:flex;flex-direction:column}
html[data-skin="dock"] .console-host{flex:1;min-height:0;order:1}
html[data-skin="dock"] .composer{order:2;flex-shrink:0;min-height:54px}
html[data-skin="dock"] .session-tabs{order:3;flex-shrink:0;min-height:42px;border-top:1px solid var(--skin-border)}
html[data-skin="dock"] .irc-profile-tabs{order:0;flex-shrink:0}
html[data-skin="dock"] :is(.chat-panel,.roster-panel){border-radius:0}
#themeDialog{max-height:calc(100vh - 50px);overflow:auto;padding:12px}
#themeDialog .theme-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
#themeDialog input[type=color]{width:100%;height:28px;padding:3px}
#themeDialog fieldset{border:0;padding:0;margin:0}
#themeDialog fieldset:disabled{opacity:.45}
#themeDialog footer{flex-wrap:wrap}
#themeDialog #themeStatus{min-height:16px}
/* The editor previews the same palette as the client, including its controls. */
html[data-skin] #themeDialog{background-color:var(--skin-surface);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] #themeDialog p{color:var(--skin-muted)}
html[data-skin] #themeDialog label{color:var(--skin-text)}
html[data-skin] #themeDialog :is(input,select,button){background-color:var(--skin-base)!important;color:var(--skin-text)!important;border-color:var(--skin-border)!important}
html[data-skin] #themeDialog :is(input,select):focus{outline-color:var(--skin-accent)}
html[data-skin] #themeDialog :is(#themeApply,button:enabled:hover){background-color:var(--skin-accent)!important;color:var(--skin-on-accent)!important}
html[data-skin] #themeDialog button:disabled{color:var(--skin-muted)!important;opacity:.45}
html[data-skin]:not([data-skin="classic"]) #themeDialog{padding:24px;border-radius:14px;box-shadow:0 8px 30px #0003}

html[data-skin] #roster{background-color:var(--skin-base);color:var(--skin-text)}
html[data-skin] .session-tabs :is(.tab,.add-tab),html[data-skin] .composer button{background-color:var(--skin-surface);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] .session-tabs .tab.active{background-color:var(--skin-accent);color:var(--skin-on-accent)}

/* Artwork is content: all skins inherit the original dimensions and rendering.
   Palette rules use background-color so they cannot erase background images. */
html[data-skin] :is(.roster-icon,.icon-badge){object-fit:contain;flex-shrink:0}
/* Rail: persistent vertical session navigation beside the conversation. */
html[data-skin="rail"]:not([data-skin="classic"]) .chat-panel,
html[data-skin="rail"]:not([data-skin="classic"]) .chat-panel:has(>.irc-profile-tabs:not([hidden])){grid-template-columns:148px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 54px}
html[data-skin="rail"]:not([data-skin="classic"]) .session-tabs{grid-column:1;grid-row:1 / 4;flex-direction:column;border-right:1px solid var(--skin-border);border-bottom:0;padding:10px 6px}
html[data-skin="rail"]:not([data-skin="classic"]) .session-tab-list{flex-direction:column;overflow-x:hidden;overflow-y:auto;gap:6px}
html[data-skin="rail"]:not([data-skin="classic"]) .session-tabs .tab{width:100%;max-width:none;min-height:38px;justify-content:flex-start}
html[data-skin="rail"]:not([data-skin="classic"]) .session-tabs .add-tab{width:100%;min-height:30px;border:0;border-radius:8px}
html[data-skin="rail"]:not([data-skin="classic"]) .irc-profile-tabs{grid-column:2;grid-row:1}
html[data-skin="rail"]:not([data-skin="classic"]) .console-host{grid-column:2;grid-row:2}
html[data-skin="rail"]:not([data-skin="classic"]) .composer{grid-column:2;grid-row:3}
html[data-skin="rail"]:not([data-skin="classic"]) .workspace{gap:10px;padding:10px;grid-template-columns:minmax(0,1fr) 230px}
/* Paper: a quiet reading surface, ruled messages and understated tabs. */
html[data-skin="paper"]:not([data-skin="classic"]){color-scheme:light}
html[data-skin="paper"]:not([data-skin="classic"]) body{color-scheme:light}
html[data-skin="paper"]:not([data-skin="classic"]) .workspace{padding:22px;gap:22px;grid-template-columns:minmax(0,1fr) 240px}
html[data-skin="paper"]:not([data-skin="classic"]) :is(.chat-panel,.roster-panel){border-radius:3px;box-shadow:0 3px 8px #302d2812}
html[data-skin="paper"]:not([data-skin="classic"]) .console-host .console{padding:24px;line-height:1.8}
html[data-skin="paper"]:not([data-skin="classic"]) .message{padding:6px 0;border-bottom:1px solid var(--skin-border)}
html[data-skin="paper"]:not([data-skin="classic"]) .session-tabs .tab{border-radius:0;background-color:transparent;border-bottom:2px solid transparent}
html[data-skin="paper"]:not([data-skin="classic"]) .session-tabs .tab.active{color:var(--skin-accent);border-bottom-color:var(--skin-accent)}
html[data-skin="paper"]:not([data-skin="classic"]) :is(.user,.chat-name,.discord-name,.message .arg,.message .paren,.chat-brackets,.user-count){color:var(--skin-text)}
html[data-skin="paper"]:not([data-skin="classic"]) :is(.roster-name,.botnet-name){color:var(--skin-chat)}
html[data-skin="paper"]:not([data-skin="classic"]) :is(.roster-name.channel-op,.roster-name.roster-away,.roster-name.roster-busy){color:var(--skin-accent)!important}
html[data-skin="paper"]:not([data-skin="classic"]) :is(.roster-presence-detail,.roster-last-seen,.discord-meta,.discord-hint){color:var(--skin-muted)}
html[data-skin="paper"]:not([data-skin="classic"]) .roster-item:hover{background-color:var(--skin-surface)}
/* Signal: dense, square split panes with a left roster and compact rhythm. */
html[data-skin="terminal"]:not([data-skin="classic"]) .app-shell .workspace{grid-template-columns:220px minmax(0,1fr);gap:1px;padding:0}
html[data-skin="terminal"]:not([data-skin="classic"]) .roster-panel{grid-column:1;grid-row:1}
html[data-skin="terminal"]:not([data-skin="classic"]) .chat-panel{grid-column:2;grid-row:1;grid-template-rows:42px minmax(0,1fr) 54px}
html[data-skin="terminal"]:not([data-skin="classic"]) :is(.chat-panel,.roster-panel){border-radius:0;box-shadow:none;border-top:2px solid var(--skin-accent)}
html[data-skin="terminal"]:not([data-skin="classic"]) .console-host .console{font-family:Consolas,'Cascadia Mono',monospace;font-size:13px;line-height:1.5;padding:12px}
html[data-skin="terminal"]:not([data-skin="classic"]) #roster>li{padding-top:3px;padding-bottom:3px}
html[data-skin="terminal"]:not([data-skin="classic"]) .session-tabs .tab{border-radius:2px}
@media(max-width:950px){
 html[data-skin="rail"]:not([data-skin="classic"]) .chat-panel{grid-template-columns:112px minmax(0,1fr)}
 html[data-skin="paper"]:not([data-skin="classic"]) .workspace{padding:10px;gap:10px;grid-template-columns:minmax(0,1fr) 210px}
}

html[data-skin="paper"]:not([data-skin="classic"]) .session-tabs .tab.active{background-color:var(--skin-surface);color:var(--skin-accent)}