/*
 * Account appearance for dashboard and settings only.
 * Room colours remain scoped to #chat-container in chat_workspace.css.
 */

 :is(.dashboard-body, .settings-screen)[data-workspace-theme="slate"] {
    --w-page-top: #f5f8fa;
    --w-page-bottom: #edf2f5;
    --w-topbar: #fafcfd;
    --w-panel: #ffffff;
    --w-card: #fbfdfe;
    --w-hover: #f2f7fa;
    --w-soft: #eaf2f7;
    --w-selected: #dae9f1;
    --w-line: #d3e0e7;
    --w-line-strong: #a8c3d2;
    --w-accent: #304f65;
    --w-accent-hover: #426b86;
    --w-text: #1e313e;
    --w-muted: #5b707d;
    --w-subtle: #5b707d;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="lavender"] {
    --w-page-top: #f8f6fb;
    --w-page-bottom: #f2edf8;
    --w-topbar: #fcfaff;
    --w-panel: #fffefe;
    --w-card: #fdfbff;
    --w-hover: #f7f2fc;
    --w-soft: #f2ebf8;
    --w-selected: #e9def3;
    --w-line: #e0d5ea;
    --w-line-strong: #baa6cc;
    --w-accent: #5f457d;
    --w-accent-hover: #755696;
    --w-text: #2a2036;
    --w-muted: #645a71;
    --w-subtle: #645a71;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="sage"] {
    --w-page-top: #f5f8f2;
    --w-page-bottom: #eef4ea;
    --w-topbar: #fbfdf9;
    --w-panel: #fdfefc;
    --w-card: #fcfefb;
    --w-hover: #f3f9f0;
    --w-soft: #eaf3e7;
    --w-selected: #dcebd7;
    --w-line: #d4e2ce;
    --w-line-strong: #a8c4a1;
    --w-accent: #365b40;
    --w-accent-hover: #456e50;
    --w-text: #243428;
    --w-muted: #5b705f;
    --w-subtle: #5b705f;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="sand"] {
    --w-page-top: #faf8f2;
    --w-page-bottom: #f6f1e7;
    --w-topbar: #fffdf9;
    --w-panel: #fffefd;
    --w-card: #fffdf9;
    --w-hover: #faf6ec;
    --w-soft: #f5eee0;
    --w-selected: #efe2cb;
    --w-line: #e9dec9;
    --w-line-strong: #cbb994;
    --w-accent: #655237;
    --w-accent-hover: #7b6345;
    --w-text: #352f24;
    --w-muted: #6f6756;
    --w-subtle: #6f6756;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="rose"] {
    --w-page-top: #fbf6f8;
    --w-page-bottom: #f8eff2;
    --w-topbar: #fffbfd;
    --w-panel: #fffdfd;
    --w-card: #fffcfd;
    --w-hover: #fcf3f6;
    --w-soft: #f7eaef;
    --w-selected: #efdae3;
    --w-line: #ead8df;
    --w-line-strong: #cda9b8;
    --w-accent: #75475a;
    --w-accent-hover: #92586e;
    --w-text: #342831;
    --w-muted: #715d67;
    --w-subtle: #715d67;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="sky"] {
    --w-page-top: #f3f9fb;
    --w-page-bottom: #eaf3f7;
    --w-topbar: #f9fdff;
    --w-panel: #fcfeff;
    --w-card: #fafeff;
    --w-hover: #f0f8fb;
    --w-soft: #e9f3f8;
    --w-selected: #d9ebf3;
    --w-line: #d5e6ed;
    --w-line-strong: #9dbdce;
    --w-accent: #295a72;
    --w-accent-hover: #376e89;
    --w-text: #1d3340;
    --w-muted: #58707c;
    --w-subtle: #58707c;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="mint"] {
    --w-page-top: #f2faf7;
    --w-page-bottom: #e9f5ef;
    --w-topbar: #f9fefa;
    --w-panel: #fcfefd;
    --w-card: #fafffc;
    --w-hover: #eef9f2;
    --w-soft: #e6f4ea;
    --w-selected: #d9ecdf;
    --w-line: #d2e8d9;
    --w-line-strong: #9fc7af;
    --w-accent: #2f6354;
    --w-accent-hover: #3d7965;
    --w-text: #1f382f;
    --w-muted: #58766b;
    --w-subtle: #58766b;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="lilac"] {
    --w-page-top: #f9f6fb;
    --w-page-bottom: #f4eef8;
    --w-topbar: #fdfaff;
    --w-panel: #fffefe;
    --w-card: #fefcff;
    --w-hover: #f9f3fc;
    --w-soft: #f2eaf8;
    --w-selected: #e9dcf2;
    --w-line: #e1d6e9;
    --w-line-strong: #bfa9cc;
    --w-accent: #654d7c;
    --w-accent-hover: #7b6092;
    --w-text: #2f2637;
    --w-muted: #6b6074;
    --w-subtle: #6b6074;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="peach"] {
    --w-page-top: #fcf7f3;
    --w-page-bottom: #f8f0e9;
    --w-topbar: #fffdf9;
    --w-panel: #fffefd;
    --w-card: #fffcfa;
    --w-hover: #fcf4ef;
    --w-soft: #f8ece3;
    --w-selected: #f0ded0;
    --w-line: #edddd1;
    --w-line-strong: #d0af9b;
    --w-accent: #80543e;
    --w-accent-hover: #97664d;
    --w-text: #3b3029;
    --w-muted: #79685d;
    --w-subtle: #79685d;
}

:is(.dashboard-body, .settings-screen)[data-workspace-theme="graphite"] {
    --w-page-top: #f5f7f7;
    --w-page-bottom: #eceff0;
    --w-topbar: #fbfcfc;
    --w-panel: #fdfefe;
    --w-card: #fcfdfd;
    --w-hover: #f3f6f6;
    --w-soft: #ebf0f0;
    --w-selected: #dfe8e8;
    --w-line: #d9e1e2;
    --w-line-strong: #aabec1;
    --w-accent: #334a50;
    --w-accent-hover: #435e65;
    --w-text: #233237;
    --w-muted: #64747a;
    --w-subtle: #64747a;
}

/* Shared readable surface colours. No rules target room or guest pages. */
:is(.dashboard-body, .settings-screen)[data-workspace-theme] {
    --background: var(--w-page-top);
    --surface: var(--w-panel);
    --surface-soft: var(--w-soft);
    --surface-selected: var(--w-selected);
    --text-primary: var(--w-text);
    --text-secondary: var(--w-muted);
    --text-tertiary: var(--w-subtle);
    --border: var(--w-line);
    --border-strong: var(--w-line-strong);
    --black: var(--w-accent);
    background: linear-gradient(145deg, var(--w-page-top), var(--w-page-bottom));
    color: var(--w-text);
}

/* Dashboard: override only colours; existing layout and behaviour stay put. */
.dashboard-body[data-workspace-theme] .app-topbar {
    background: var(--w-topbar);
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] .dashboard-brand-mark {
    background: var(--w-selected);
    border-color: var(--w-line-strong);
    color: var(--w-accent);
}

.dashboard-body[data-workspace-theme] .dashboard-account-label,
.dashboard-body[data-workspace-theme] .dashboard-selection-bar,
.dashboard-body[data-workspace-theme] .dashboard-scroll-cue,
.dashboard-body[data-workspace-theme] .dashboard-detail-copy {
    color: var(--w-muted);
}

.dashboard-body[data-workspace-theme] .dashboard-selection-limit,
.dashboard-body[data-workspace-theme] .dashboard-detail-footnote {
    color: var(--w-subtle);
}

.dashboard-body[data-workspace-theme] .dashboard-settings-button {
    background: var(--w-card);
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] .topbar-destroy-button {
    background: var(--w-card);
}

.dashboard-body[data-workspace-theme] .dashboard-settings-button {
    color: var(--w-accent);
}

.dashboard-body[data-workspace-theme] .dashboard-settings-button:hover {
    background: var(--w-hover);
    border-color: var(--w-line-strong);
}

.dashboard-body[data-workspace-theme] .topbar-create-button,
.dashboard-body[data-workspace-theme] #create-room-form .room-action-button.primary {
    background: var(--w-accent);
    color: #fff;
}

.dashboard-body[data-workspace-theme] .topbar-create-button:hover,
.dashboard-body[data-workspace-theme] #create-room-form .room-action-button.primary:hover {
    background: var(--w-accent-hover);
}

.dashboard-body[data-workspace-theme] .dashboard-room-panel,
.dashboard-body[data-workspace-theme] .dashboard-detail-panel {
    background: var(--w-panel);
    border-color: var(--w-line);
    box-shadow: 0 12px 36px rgba(26, 35, 37, .035);
}

.dashboard-body[data-workspace-theme] .dashboard-detail-eyebrow,
.dashboard-body[data-workspace-theme] .dashboard-detail-panel h2,
.dashboard-body[data-workspace-theme] #empty-room-state strong {
    color: var(--w-accent);
}

.dashboard-body[data-workspace-theme] .dashboard-detail-footnote,
.dashboard-body[data-workspace-theme] .dashboard-selection-bar {
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] .room-list {
    scrollbar-color: var(--w-line-strong) var(--w-soft);
}

.dashboard-body[data-workspace-theme] .room-list-item {
    background: var(--w-card);
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] .room-list-item:hover {
    background: var(--w-hover);
    border-color: var(--w-line-strong);
}

.dashboard-body[data-workspace-theme] .room-list-item.selected {
    background: var(--w-selected);
    border-color: var(--w-line-strong);
}

.dashboard-body[data-workspace-theme] .room-selector-circle {
    border-color: var(--w-line-strong);
}

.dashboard-body[data-workspace-theme] .room-selector[aria-pressed="true"] .room-selector-circle {
    border-color: var(--w-accent);
}

.dashboard-body[data-workspace-theme] .dashboard-feedback {
    background: var(--w-soft);
    color: var(--w-accent);
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] .dashboard-feedback[data-tone="error"] {
    border-color: #ebd2cd;
    background: #fdf3f1;
    color: #8b3e36;
}

.dashboard-body[data-workspace-theme] #create-room-dialog {
    background: var(--w-panel);
    color: var(--w-text);
    border-color: var(--w-line);
}

.dashboard-body[data-workspace-theme] #room-duration-select {
    background: var(--w-soft);
    color: var(--w-text);
    border-color: var(--w-line-strong);
}

.dashboard-body[data-workspace-theme] #create-room-form .room-action-button.secondary {
    background: var(--w-soft);
    color: var(--w-text);
}

.dashboard-body[data-workspace-theme] :is(button, a, select):focus-visible,
.settings-screen[data-workspace-theme] :is(button, a, input):focus-visible {
    outline-color: var(--w-accent);
}

/* Settings inherit the same account palette without a second preference. */
.settings-screen[data-workspace-theme] .settings-topbar {
    background: var(--w-topbar);
    border-color: var(--w-line);
}

.settings-screen[data-workspace-theme] .settings-nav-icon {
    background: var(--w-soft);
    color: var(--w-accent);
}

.settings-screen[data-workspace-theme] .settings-nav-button:hover {
    background: var(--w-hover);
}

.settings-screen[data-workspace-theme] .settings-nav-button[aria-expanded="true"] {
    background: var(--w-selected);
    border-color: var(--w-line-strong);
    color: var(--w-text);
}

.settings-screen[data-workspace-theme] .settings-button.primary {
    background: var(--w-accent);
    color: #fff;
}

.settings-screen[data-workspace-theme] .settings-button.primary:not(:disabled):hover {
    background: var(--w-accent-hover);
}

.settings-screen[data-workspace-theme] .settings-button.secondary {
    background: var(--w-soft);
    color: var(--w-text);
}

.settings-screen[data-workspace-theme] .settings-input:focus {
    border-color: var(--w-accent);
}

/* Small appearance control next to the Chats heading. */
.dashboard-body .dashboard-room-panel.workspace-picker-open {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.dashboard-body .dashboard-heading {
    position: relative;
    z-index: 2;
}

.dashboard-heading-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-body .dashboard-heading-title h1 {
    margin: 0;
}

.workspace-theme-picker {
    flex: 0 0 auto;
}

.workspace-theme-picker > summary {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--w-line);
    border-radius: 10px;
    background: var(--w-card);
    cursor: pointer;
    list-style: none;
}

.workspace-theme-picker > summary::-webkit-details-marker {
    display: none;
}

.workspace-theme-picker > summary::marker {
    content: "";
}

.workspace-theme-picker > summary::before {
    content: "";
    width: 19px;
    height: 19px;
    border: 2px solid var(--w-panel);
    border-radius: 50%;
    background: conic-gradient(#d6e6d3, #d2e8f1, #e1d6ef, #f2ddd0, #d6e6d3);
    box-shadow: 0 0 0 1px var(--w-line-strong);
}

.workspace-theme-picker > summary:hover,
.workspace-theme-picker[open] > summary {
    background: var(--w-soft);
    border-color: var(--w-line-strong);
}

.workspace-theme-picker > summary:focus-visible {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
}

.workspace-theme-popover {
    position: absolute;
    z-index: 20;
    top: 43px;
    left: 0;
    width: min(266px, calc(100vw - 48px));
    padding: 13px;
    border: 1px solid var(--w-line-strong);
    border-radius: 15px;
    background: var(--w-panel);
    box-shadow: 0 18px 48px rgba(23, 34, 35, .15);
}

.workspace-theme-popover strong {
    display: block;
    margin-bottom: 10px;
    color: var(--w-text);
    font-size: 12px;
}

.workspace-theme-choices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.workspace-theme-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 57px;
    padding: 5px 1px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--w-muted);
    cursor: pointer;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
}

.workspace-theme-choice::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 1px solid var(--w-line-strong);
    border-radius: 50%;
    background: var(--workspace-swatch);
}

.workspace-theme-choice:hover {
    background: var(--w-soft);
}

.workspace-theme-choice[aria-pressed="true"] {
    border-color: var(--w-line-strong);
    background: var(--w-selected);
    color: var(--w-text);
    font-weight: 700;
}

.workspace-theme-choice[aria-pressed="true"]::before {
    box-shadow: 0 0 0 2px var(--w-panel), 0 0 0 3px var(--w-accent);
}

.dashboard-body .workspace-theme-popover p {
    margin: 10px 0 0;
    color: var(--w-muted);
    font-size: 11px;
    line-height: 1.4;
}

.workspace-theme-popover #workspace-theme-message {
    color: #8b3e36;
}

@media (max-width: 767px) {
    .workspace-theme-popover {
        top: 41px;
    }
}