/* Browser-local appearance. Classic has no appearance-tone and keeps the
   original CSS. Private mode always retains its existing night skin. */
html[data-appearance-tone] body:not(.private-active) {
  --ap-page: #ffffff;
  --ap-sidebar: #f8f8f7;
  --ap-panel: #ffffff;
  --ap-soft: #f5f5f3;
  --ap-input: #ffffff;
  --ap-hover: rgba(26, 27, 25, .05);
  --ap-selected: rgba(26, 27, 25, .085);
  --ap-focus: rgba(65, 71, 66, .15);
  --ap-shadow: 0 12px 36px rgba(22, 25, 22, .12);
  --ap-input-shadow: 0 2px 14px rgba(25, 28, 25, .055);
  --ap-scrollbar: rgba(34, 39, 35, .25);
  --ap-inline-code: #a34039;
  --ap-success: #37744e;
  --ap-danger: #b84a40;
  --ap-warning-bg: #fff4d9;
  --ap-warning-ink: #795e24;
  --ap-art: none;
  --surface: #f1f2ef;
  --surface2: #e9ebe7;
  --border: rgba(27, 30, 27, .11);
  --border2: rgba(27, 30, 27, .2);
  --text: #222522;
  --text-1: var(--text);
  --text-2: #545a55;
  --text-3: #737a73;
  --accent: #414943;
  --accent-h: #202823;
  --user-bg: #f0f1ee;
  --bg: var(--ap-panel);
  background: var(--ap-page);
  color: var(--text);
  color-scheme: light;
}

html[data-appearance="white"] body:not(.private-active) {
  --ap-sidebar: #ffffff;
  --ap-page: #ffffff;
}

html[data-appearance-tone="dark"] body:not(.private-active) {
  --ap-page: #000000;
  --ap-sidebar: #0d0d0d;
  --ap-panel: #191919;
  --ap-soft: #232323;
  --ap-input: #171717;
  --ap-hover: rgba(255, 255, 255, .065);
  --ap-selected: rgba(255, 255, 255, .105);
  --ap-focus: rgba(235, 235, 230, .15);
  --ap-shadow: 0 14px 40px rgba(0, 0, 0, .42);
  --ap-input-shadow: 0 2px 16px rgba(0, 0, 0, .18);
  --ap-scrollbar: rgba(235, 234, 226, .29);
  --ap-inline-code: #e8afa4;
  --ap-success: #a2c7aa;
  --ap-danger: #eea397;
  --ap-warning-bg: #3b3221;
  --ap-warning-ink: #e8cd91;
  --surface: #262626;
  --surface2: #303030;
  --border: rgba(255, 255, 255, .13);
  --border2: rgba(255, 255, 255, .24);
  --text: #eeefec;
  --text-2: #bec0ba;
  --text-3: #92968e;
  --accent: #d4d8ce;
  --accent-h: #f4f6ef;
  --user-bg: #232323;
  color-scheme: dark;
}

html[data-appearance="waterlilies"] body:not(.private-active) {
  --ap-page: #f8f9f5;
  --ap-art-wash-rgb: 248, 249, 245;
  --ap-sidebar: #eaf0e7;
  --ap-panel: #fcfdf9;
  --ap-soft: #edf2ea;
  --ap-input: #fbfcf8;
  --ap-hover: rgba(59, 92, 75, .065);
  --ap-selected: rgba(59, 92, 75, .11);
  --ap-focus: rgba(69, 103, 83, .15);
  --surface: #e7eee3;
  --surface2: #dce6d8;
  --border: rgba(48, 79, 61, .14);
  --border2: rgba(48, 79, 61, .25);
  --text: #283e34;
  --text-2: #53665b;
  --text-3: #6f8074;
  --accent: #456958;
  --accent-h: #2b4b3c;
  --user-bg: #e7eee4;
}

html[data-appearance="pearl"] body:not(.private-active) {
  --ap-page: #100f0b;
  --ap-art-wash-rgb: 16, 15, 11;
  --ap-sidebar: #15140f;
  --ap-panel: #211e17;
  --ap-soft: #2a261e;
  --ap-input: #211f18;
  --ap-hover: rgba(230, 213, 168, .075);
  --ap-selected: rgba(230, 213, 168, .12);
  --ap-focus: rgba(199, 171, 111, .18);
  --surface: #2d291f;
  --surface2: #383125;
  --border: rgba(216, 197, 151, .17);
  --border2: rgba(216, 197, 151, .3);
  --text: #eee7d6;
  --text-2: #c1b7a2;
  --text-3: #9a927f;
  --accent: #cbb47b;
  --accent-h: #e0c992;
  --user-bg: #29251c;
}

/* The image is exposed only after its bytes and decoding are complete. */
html[data-appearance="waterlilies"][data-appearance-art-ready="waterlilies"] body:not(.private-active) {
  --ap-art: url("/static/themes/waterlilies-background-v2.webp");
}
html[data-appearance="pearl"][data-appearance-art-ready="pearl"] body:not(.private-active) {
  --ap-art: url("/static/themes/pearl-background-v2.webp");
}

/* Blend only the painting into its exact theme paper. At strength 1 this
   extra background is transparent; at 0 it is the opaque --ap-page color.
   Do not apply opacity to #main or to any text/composer element. */
html:is([data-appearance="waterlilies"], [data-appearance="pearl"]) body:not(.private-active) {
  --ap-art-wash: linear-gradient(
    rgba(var(--ap-art-wash-rgb), calc(1 - var(--ap-art-strength, 1))),
    rgba(var(--ap-art-wash-rgb), calc(1 - var(--ap-art-strength, 1))));
}

/* Background paint only: preserve the sidebar, split-panel, and composer
   geometry. The artwork never creates a layer above clickable controls. */
html[data-appearance-tone] body:not(.private-active) #sidebar {
  background: var(--ap-sidebar);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) #main {
  --ap-canvas-width: calc(100% - var(--legal-w) - var(--redact-w));
  --ap-reading-half: calc(var(--content-w) / 2 + 32px);
  --ap-art-x: calc(100% - var(--legal-w) - var(--redact-w));
  background-color: var(--ap-page);
  background-image: var(--ap-art);
  background-position: var(--ap-art-x) bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
html[data-appearance-tone] body.browser-panel-open:not(.private-active) #main {
  --ap-canvas-width: 100%;
  --ap-art-x: 100%;
}
/* One opaque reading core extends behind ALL turns, gaps, and the composer.
   It stays fixed in the main surface as #chat-box scrolls. Its width exceeds
   the text/composer width by 32px on each side; the 42px fade is outside it. */
html[data-appearance-tone] body:not(.private-active) #main:not(.welcome-mode):not(.project-mode) {
  background-image:
    linear-gradient(90deg,
      transparent calc(50% - var(--ap-reading-half) - 42px),
      var(--ap-page) calc(50% - var(--ap-reading-half)),
      var(--ap-page) calc(50% + var(--ap-reading-half)),
      transparent calc(50% + var(--ap-reading-half) + 42px)),
    var(--ap-art);
  background-position: left bottom, var(--ap-art-x) bottom;
  background-size: var(--ap-canvas-width) 100%, cover;
}
html[data-appearance-tone] body:not(.private-active) #main.project-mode {
  background-image: none;
}
/* Keep the original art position and cover size in the LAST layer. The
   wash covers only the visible main canvas, including split-panel states. */
html:is([data-appearance="waterlilies"], [data-appearance="pearl"]) body:not(.private-active) #main.welcome-mode:not(.project-mode) {
  background-image: var(--ap-art-wash), var(--ap-art);
  background-position: left bottom, var(--ap-art-x) bottom;
  background-size: var(--ap-canvas-width) 100%, cover;
}
/* The fully opaque reading protection stays ABOVE the adjustable wash.
   This selector intentionally has the same specificity as the existing
   mobile chat rule, which still removes every background layer below. */
html:is([data-appearance="waterlilies"], [data-appearance="pearl"]) body:not(.private-active) #main:not(.welcome-mode):not(.project-mode) {
  background-image:
    linear-gradient(90deg,
      transparent calc(50% - var(--ap-reading-half) - 42px),
      var(--ap-page) calc(50% - var(--ap-reading-half)),
      var(--ap-page) calc(50% + var(--ap-reading-half)),
      transparent calc(50% + var(--ap-reading-half) + 42px)),
    var(--ap-art-wash),
    var(--ap-art);
  background-position: left bottom, left bottom, var(--ap-art-x) bottom;
  background-size: var(--ap-canvas-width) 100%, var(--ap-canvas-width) 100%, cover;
}
html[data-appearance-tone] body:not(.private-active) .input-box {
  background: var(--ap-input);
  border-color: var(--border2);
  box-shadow: var(--ap-input-shadow);
  backdrop-filter: none;
}
html[data-appearance-tone] body:not(.private-active) .input-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ap-input-shadow), 0 0 0 3px var(--ap-focus);
}
html[data-appearance-tone] body:not(.private-active) #user-input {
  color: var(--text);
  caret-color: var(--text);
}
/* Small welcome-page controls also get a quiet backing where the artwork
   rises behind them on narrow screens. No padding or layout is changed. */
html:is([data-appearance="waterlilies"], [data-appearance="pearl"]) body:not(.private-active) #main.welcome-mode #model-bar > :is(button, .model-bar-hint) {
  background: var(--ap-page);
  color: var(--text-2);
  box-shadow: 0 0 9px 4px var(--ap-page);
  border-radius: 5px;
}
html[data-appearance-tone] body:not(.private-active) #drop-overlay {
  background: var(--ap-panel);
}
html[data-appearance-tone] body:not(.private-active) #drop-overlay .drop-border {
  border-color: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) #drop-overlay .drop-icon {
  color: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) #drop-overlay .drop-title {
  color: var(--text);
}
html[data-appearance-tone] body:not(.private-active) #drop-overlay .drop-sub {
  color: var(--text-2);
}
html[data-appearance-tone] body:not(.private-active) .user-bubble {
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) ::-webkit-scrollbar-thumb {
  background: var(--ap-scrollbar);
}

/* Shared menus and dialogs with legacy hard-coded white backgrounds. */
html[data-appearance-tone] body:not(.private-active) :is(
  #sidebar-open-btn, .search-modal, .project-modal, .conv-dropdown,
  .conv-confirm-box, #user-menu, .profile-box, #model-dropdown, #md-flyout,
  #tools-menu, #share-modal, #ann-modal, #ann-detail-modal, #stats-modal,
  #schedule-modal, .file-card, .pv-new-chat, #live-voice-panel, #live-voice-tasks
) {
  background: var(--ap-panel);
  color: var(--text);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .search-modal, .project-modal, .conv-dropdown, .conv-confirm-box, #user-menu,
  .profile-box, #model-dropdown, #md-flyout, #tools-menu, #share-modal,
  #ann-modal, #ann-detail-modal, #stats-modal, #schedule-modal
) { box-shadow: var(--ap-shadow); }

html[data-appearance-tone] body:not(.private-active) :is(
  .pgroup-rename-input, .project-rename-input, #project-name-input,
  #group-name-input, .profile-field input, .sched-field input,
  .sched-field textarea, .sched-field select, #share-url-input
) {
  background: var(--ap-soft);
  color: var(--text);
  border-color: var(--border2);
  caret-color: var(--text);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .pgroup-rename-input, .project-rename-input, #project-name-input,
  #group-name-input, .profile-field input, .sched-field input,
  .sched-field textarea, .sched-field select
):focus {
  background: var(--ap-panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ap-focus);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .project-modal-icon, .profile-modal-icon, .profile-avatar-camera,
  .sched-title-icon, .project-modal-hint, .sched-hint, .stats-card,
  #stats-period-btns, .profile-field input[readonly], .file-card.image,
  .conv-project-tag, .pgroup-count, .model-soon, .tg-subrows, .tg-subtext
) {
  background: var(--ap-soft);
  color: var(--text-2);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .project-modal-cancel, .profile-btn.secondary, .sched-btn.secondary,
  .stats-period-btn.active, #stats-table th
) {
  background: var(--ap-panel);
  color: var(--text-2);
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .project-modal-create, .profile-btn.primary, .sched-btn.primary
) {
  background: var(--accent);
  color: var(--ap-page);
  box-shadow: none;
}
html[data-appearance-tone] body:not(.private-active) :is(
  .project-modal-create, .profile-btn.primary, .sched-btn.primary
):hover:not(:disabled) { background: var(--accent-h); }
html[data-appearance-tone] body:not(.private-active) :is(
  .project-modal-create, .profile-btn.primary, .sched-btn.primary
):disabled {
  background: var(--ap-soft);
  color: var(--text-3);
  box-shadow: none;
}

/* Paired hover/active surfaces stay visible on both black and white. */
html[data-appearance-tone] body:not(.private-active) :is(
  .conv-item, .conv-dropdown-item:not(.danger), .user-menu-item:not(.danger),
  .user-info-wrap, .tools-menu-item, .model-option:not(.disabled),
  .project-row, .project-menu-btn, .conv-menu-btn, .proj-chats-more,
  .project-modal-cancel, .profile-btn.secondary, .sched-btn.secondary,
  .sched-btn.ghost, .project-modal-close, .pv-new-chat, .pv-chat,
  .action-btn, .rewind-btn, .download-btn, .new-chat-btn, .nav-item,
  #sidebar-open-btn, #sidebar-close-btn, #model-picker-btn, #tools-btn,
  #share-btn, #legal-btn, #redact-btn, #share-copy-btn
):hover {
  background: var(--ap-hover);
  color: var(--text);
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .conv-item.active, .nav-item.active, #projects-btn.active, #tools-btn.open,
  .model-option.selected, #legal-btn.active, #redact-btn.active
) {
  background: var(--ap-selected);
  color: var(--text);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .menu-switch, .md-toggle
) { background: var(--border2); }
html[data-appearance-tone] body:not(.private-active) :is(
  .user-menu-item.on .menu-switch, .tools-menu-item.on .menu-switch,
  .md-toggle.on
) { background: var(--accent); }
html[data-appearance-tone] body:not(.private-active) #tools-btn-dot {
  box-shadow: 0 0 0 1.5px var(--ap-page);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .rd-chip, .asst-content .evidence-cite
) {
  background: var(--ap-soft);
  border-color: var(--border2);
  color: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) #record-btn:hover:not(.recording):not(:disabled) {
  background: var(--ap-hover);
}

/* Markdown, code headers, tool traces, and long-answer navigation. */
html[data-appearance-tone] body:not(.private-active) .asst-content pre:not(.stream-pre) {
  background: var(--ap-soft);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) .asst-content pre code {
  background: transparent;
  color: var(--text);
}
html[data-appearance-tone] body:not(.private-active) .asst-content :not(pre) > code {
  background: var(--ap-soft);
  color: var(--ap-inline-code);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .asst-content th, .tool-row, .tg-row
) { background: var(--ap-soft); }
html[data-appearance-tone] body:not(.private-active) :is(
  .asst-content tr:hover td, .download-btn:hover
) { background: var(--ap-hover); }
html[data-appearance-tone] body:not(.private-active) :is(
  .asst-content th, .asst-content td, .asst-content blockquote,
  .code-header, .rewind-btn, .download-btn
) { border-color: var(--border2); }
html[data-appearance-tone] body:not(.private-active) .asst-content a {
  color: var(--text-2);
  text-decoration-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) .asst-content a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) #turn-nav {
  --tnav-ink: var(--text);
  --tnav-mute: var(--text-3);
  --tnav-text: var(--text-2);
}
html[data-appearance-tone] body:not(.private-active) #turn-nav:is(:hover, :focus-within) {
  background: var(--ap-panel);
  border-color: var(--border);
  box-shadow: var(--ap-shadow);
}
html[data-appearance-tone] body:not(.private-active) #turn-nav:hover .tnav-item:hover {
  background: var(--ap-hover);
}
html[data-appearance-tone] body:not(.private-active) #scroll-to-bottom {
  background: var(--ap-panel);
  color: var(--text);
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) #scroll-to-bottom:hover {
  background: var(--ap-soft);
}
html[data-appearance-tone] body:not(.private-active) :is(
  #live-voice-time, #live-voice-note
) { color: var(--text-3); }
html[data-appearance-tone] body:not(.private-active) .live-voice-controls button {
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .live-voice-controls .live-end, .live-task-error, .oa-login-status.err,
  .conv-dropdown-item.danger
) { color: var(--ap-danger); }

/* Project/browser/evidence/finance panels own local tokens. Change their
   shell colors, never the remote browser page or iframe contents. */
html[data-appearance-tone] body:not(.private-active) #project-browser {
  --pbx-paper: var(--ap-panel);
  --pbx-paper2: var(--ap-soft);
  --pbx-ink: var(--text);
  --pbx-ink2: var(--text-2);
  --pbx-ink3: var(--text-3);
  --pbx-rule: var(--border);
  --pbx-hover: var(--ap-hover);
  --pbx-sel: var(--ap-selected);
  --pbx-live: var(--ap-success);
}
html[data-appearance-tone] body:not(.private-active) #browser-panel {
  --browser-paper: var(--ap-panel);
  --browser-paper2: var(--ap-soft);
  --browser-ink: var(--text);
  --browser-ink2: var(--text-2);
  --browser-ink3: var(--text-3);
  --browser-rule: var(--border);
  --browser-hover: var(--ap-hover);
  --browser-active: var(--ap-selected);
  --browser-live: var(--ap-success);
}
html[data-appearance-tone] body:not(.private-active) #browser-stage {
  background: var(--ap-soft);
}
html[data-appearance-tone] body:not(.private-active) :is(
  #legal-panel, #redact-panel, #legal-panel-toolbar, #redact-panel-toolbar
) {
  background: var(--ap-panel);
  color: var(--text);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) .evidence-overlay {
  --ev-bg: var(--ap-panel);
  --ev-soft: var(--ap-soft);
  --ev-line: var(--border);
  --ev-ink: var(--text);
  --ev-muted: var(--text-2);
  --ev-accent: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) .evidence-source-number {
  background: var(--ap-soft);
  color: var(--accent);
}
html[data-appearance-tone] body:not(.private-active) .evidence-saved {
  color: var(--ap-success);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .evidence-raw mark, .fin-disputed, .fin-summary-card.fin-disputed
) {
  background: var(--ap-warning-bg);
  color: var(--ap-warning-ink);
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) .fin-overlay {
  --fin-bg: var(--ap-panel);
  --fin-soft: var(--ap-soft);
  --fin-border: var(--border);
  --fin-ink: var(--text);
  --fin-muted: var(--text-2);
  --fin-accent: var(--accent);
  background: var(--ap-panel);
  color: var(--text);
}
html[data-appearance-tone] body:not(.private-active) .fin-grid .fin-review-label {
  color: var(--ap-warning-ink);
}
html[data-appearance-tone] body:not(.private-active) .fin-primary {
  color: var(--ap-page) !important;
}
html[data-appearance-tone="dark"] body:not(.private-active) :is(
  .fin-grid td.fin-extension, .fin-grid th.fin-extension
) { background: var(--ap-warning-bg); }
html[data-appearance-tone="dark"] body:not(.private-active) :is(
  .fin-issues, .fin-grid th small
) { color: var(--ap-warning-ink); }
html[data-appearance-tone="dark"] body:not(.private-active) #fin-message.fin-error {
  color: var(--ap-danger);
}
html[data-appearance-tone] body:not(.private-active) .oa-login-card {
  background: var(--ap-panel);
  border-color: var(--border);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .oa-login-title, .oa-login-input
) { color: var(--text); border-color: var(--border2); }
html[data-appearance-tone] body:not(.private-active) .oa-login-sys {
  background: var(--ap-soft);
  color: var(--accent);
  border-color: var(--border2);
}
html[data-appearance-tone] body:not(.private-active) .oa-login-done {
  color: var(--ap-success);
}
html[data-appearance-tone] body:not(.private-active) :is(
  .oa-login-head svg, .oa-login-link-btn
) { color: var(--accent); }
html[data-appearance-tone] body:not(.private-active) .oa-login-link-btn:hover:not(:disabled) {
  color: var(--accent-h);
}
/* These independent legacy tool surfaces keep their intentional paper
   palette. Supply their own foreground instead of inheriting dark text. */
html[data-appearance-tone] body:not(.private-active) :is(#oah-drawer, #whatsnew-modal) {
  color: #1c1b19;
  color-scheme: light;
}
html[data-appearance-tone] body:not(.private-active) #login-overlay {
  color-scheme: light;
}
html[data-appearance-tone="dark"] body:not(.private-active) #browser-message.is-error {
  background: #392720;
  color: #efb8a6;
}

/* Appearance uses the existing account-menu row; only its trailing label
   and keyboard focus indicator need component-specific styling. */
#appearance-current-name {
  margin-left: auto;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-3);
}
#appearance-open-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A calm gallery, with the ORIGINAL artworks fully visible. Component
   defaults are independent of the product theme, including private mode. */
.appearance-dialog {
  --gallery-paper: #fbfaf7;
  --gallery-card: #ffffff;
  --gallery-soft: #f0eee8;
  --gallery-ink: #292c27;
  --gallery-muted: #71766c;
  --gallery-line: #dedfd6;
  --gallery-accent: #52654b;
  position: fixed;
  inset: 0;
  width: min(980px, calc(100vw - 48px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--gallery-line);
  border-radius: 22px;
  background: var(--gallery-paper);
  color: var(--gallery-ink);
  box-shadow: 0 24px 100px rgba(0, 0, 0, .24);
  font-family: var(--font);
  color-scheme: light;
  overflow: hidden;
}
.appearance-dialog:not([open]) { display: none; }
.appearance-dialog[open] { display: block; }
.appearance-dialog::backdrop { background: rgba(15, 18, 15, .48); backdrop-filter: blur(6px); }
.appearance-panel { display: flex; flex-direction: column; max-height: min(900px, calc(100dvh - 48px)); }
.appearance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-shrink: 0; padding: 27px 30px 21px; }
.appearance-heading { min-width: 0; }
.appearance-title { margin: 0; font-family: 'Noto Serif SC', var(--font-serif); font-size: 25px; line-height: 1.5; font-weight: 500; letter-spacing: .04em; }
.appearance-subtitle { margin: 8px 0 0; color: var(--gallery-muted); font-size: 12.5px; line-height: 1.7; }
.appearance-close { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gallery-muted); font: 27px/1 sans-serif; cursor: pointer; }
.appearance-close:hover { background: var(--gallery-soft); color: var(--gallery-ink); }
.appearance-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; padding: 4px 30px 26px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.appearance-item { min-width: 0; grid-column: span 2; }
.appearance-item:has(.appearance-preview--art) { grid-column: span 3; }
.appearance-card { display: block; width: 100%; padding: 0; border: 1px solid var(--gallery-line); border-radius: 13px; overflow: hidden; background: var(--gallery-card); color: var(--gallery-ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.appearance-card:hover { border-color: var(--gallery-accent); box-shadow: 0 4px 16px rgba(28, 36, 27, .07); }
.appearance-card.is-selected { border-color: var(--gallery-accent); box-shadow: 0 0 0 1px var(--gallery-accent); }
.appearance-dialog :is(button, a):focus-visible { outline: 2px solid var(--gallery-accent); outline-offset: 3px; }
.appearance-card-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; padding: 13px 15px 15px; align-items: start; }
.appearance-card-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.appearance-card-description { display: block; grid-column: 1 / -1; color: var(--gallery-muted); font-size: 11.5px; line-height: 1.65; }
.appearance-selected-indicator { grid-column: 2; grid-row: 1; display: inline-block; padding: 2px 7px; border-radius: 999px; color: var(--gallery-muted); font-size: 10px; line-height: 1.7; white-space: nowrap; }
.is-selected .appearance-selected-indicator { background: var(--gallery-soft); color: var(--gallery-accent); font-weight: 600; }
.appearance-preview { display: flex; width: 100%; height: 112px; position: relative; overflow: hidden; background: #fff; color: #333; }
.appearance-preview--classic { background: radial-gradient(ellipse at 0 0, #e5dcff, transparent 72%), radial-gradient(ellipse at 100% 100%, #e0edff, transparent 70%), #fff; }
.appearance-preview--white { background: #fff; color: #333; }
.appearance-preview--black { background: #000; color: #e7e7e3; }
.appearance-mini-sidebar { display: block; width: 20%; flex: 0 0 auto; border-right: 1px solid rgba(127, 127, 127, .18); background: rgba(127, 127, 127, .025); }
.appearance-preview--black .appearance-mini-sidebar { background: #111; }
.appearance-mini-content { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 15px; }
.appearance-mini-title { font-family: var(--font-serif); font-size: 16px; letter-spacing: .01em; }
.appearance-mini-composer { display: block; width: 83%; height: 22px; border-radius: 7px; border: 1px solid rgba(127, 127, 127, .25); background: rgba(255, 255, 255, .8); }
.appearance-preview--black .appearance-mini-composer { background: #191919; border-color: #353535; }
.appearance-preview--art { display: block; height: 226px; padding: 12px; background: #e9e9e0; }
.appearance-preview--pearl { background: #17150f; }
.appearance-preview--art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.appearance-art-credit { display: flex; flex-direction: column; gap: 3px; padding: 10px 3px 0; line-height: 1.6; }
.appearance-art-title { font-size: 11px; color: var(--gallery-muted); }
.appearance-art-source { width: fit-content; max-width: 100%; color: var(--gallery-accent); font-size: 10.5px; text-decoration: none; text-underline-offset: 3px; }
.appearance-art-source:hover { text-decoration: underline; }
.appearance-footer { flex-shrink: 0; padding: 14px 30px 18px; border-top: 1px solid var(--gallery-line); }
.appearance-status { margin: 0; color: var(--gallery-muted); font-size: 11px; line-height: 1.7; }
.appearance-strength-control { display: block; margin: 0 0 11px; padding: 0 0 11px; border-bottom: 1px solid var(--gallery-line); }
.appearance-strength-control[hidden] { display: none !important; }
.appearance-strength-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appearance-strength-heading label { color: var(--gallery-ink); font-size: 12px; line-height: 1.7; cursor: pointer; }
#appearance-strength-value { flex: 0 0 auto; min-width: 42px; text-align: right; color: var(--gallery-accent); font-size: 12px; line-height: 1.7; font-weight: 600; font-variant-numeric: tabular-nums; }
.appearance-strength-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; padding: 0; margin: 4px 0 0; border: 0; border-radius: 5px; background: transparent; accent-color: var(--gallery-accent); cursor: pointer; }
.appearance-strength-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--gallery-accent) calc(var(--ap-art-strength, 1) * 100%), var(--gallery-line) calc(var(--ap-art-strength, 1) * 100%)); }
.appearance-strength-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 17px; height: 17px; margin-top: -6.5px; border: 3px solid var(--gallery-paper); border-radius: 50%; background: var(--gallery-accent); box-shadow: 0 0 0 1px var(--gallery-accent); }
.appearance-strength-range::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: var(--gallery-line); }
.appearance-strength-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--gallery-accent); }
.appearance-strength-range::-moz-range-thumb { box-sizing: border-box; width: 17px; height: 17px; border: 3px solid var(--gallery-paper); border-radius: 50%; background: var(--gallery-accent); box-shadow: 0 0 0 1px var(--gallery-accent); }
.appearance-strength-range:focus-visible { outline: 2px solid var(--gallery-accent); outline-offset: 3px; }
.appearance-strength-range:disabled { cursor: not-allowed; }
.appearance-strength-hints { display: flex; justify-content: space-between; gap: 12px; color: var(--gallery-muted); font-size: 10px; line-height: 1.5; }
html[data-appearance-tone="dark"] body:not(.private-active) .appearance-dialog {
  --gallery-paper: #191914;
  --gallery-card: #22221c;
  --gallery-soft: #303126;
  --gallery-ink: #e9e8dd;
  --gallery-muted: #b0b2a1;
  --gallery-line: #3c3e32;
  --gallery-accent: #c9d0af;
  color-scheme: dark;
}

@media (max-width: 640px) {
  /* Override the old mobile white sidebar without altering drawer behavior. */
  html[data-appearance-tone] body:not(.private-active) #sidebar { background: var(--ap-sidebar); }
  html[data-appearance-tone] body:not(.private-active) #main { --ap-art-x: 100%; }
  /* No readable side margins exist at this size. Keep all chat text clean;
     the full artwork remains present on the welcome page. */
  html[data-appearance-tone] body:not(.private-active) #main:not(.welcome-mode):not(.project-mode) {
    background-image: none;
  }
  .appearance-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 17px; }
  .appearance-panel { max-height: calc(100dvh - 20px); }
  .appearance-header { padding: 20px 19px 17px; gap: 12px; }
  .appearance-title { font-size: 23px; }
  .appearance-subtitle { font-size: 12px; }
  .appearance-close { width: 36px; height: 36px; }
  .appearance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 10px; padding: 4px 19px 20px; }
  .appearance-item { grid-column: span 1; }
  .appearance-item:has(.appearance-preview--art) { grid-column: 1 / -1; }
  .appearance-preview:not(.appearance-preview--art) { height: 77px; }
  .appearance-mini-content { padding: 7px; gap: 9px; }
  .appearance-mini-title { font-size: 12px; }
  .appearance-mini-composer { height: 17px; width: 94%; border-radius: 5px; }
  .appearance-card-copy { padding: 10px 9px; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .appearance-card-title { font-size: 12px; }
  .appearance-card-description { font-size: 10px; }
  .appearance-selected-indicator { grid-column: 1; grid-row: auto; justify-self: start; padding: 1px 5px; font-size: 9px; }
  .appearance-item:has(.appearance-preview--art) .appearance-card-copy { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 14px; }
  .appearance-item:has(.appearance-preview--art) .appearance-card-title { font-size: 14px; }
  .appearance-item:has(.appearance-preview--art) .appearance-selected-indicator { grid-column: 2; grid-row: 1; }
  .appearance-item:has(.appearance-preview--art) .appearance-card-description { font-size: 11px; }
  .appearance-preview--art { height: 230px; }
  .appearance-footer { padding: 12px 19px max(15px, env(safe-area-inset-bottom)); }
}
@media (max-height: 560px) {
  /* In short windows the extra control must remain reachable. Use one
     scrollable gallery with its close button pinned in the header. */
  .appearance-panel:has(.appearance-strength-control:not([hidden])) {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 112px;
  }
  .appearance-panel:has(.appearance-strength-control:not([hidden])) .appearance-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gallery-paper);
  }
  .appearance-panel:has(.appearance-strength-control:not([hidden])) .appearance-grid {
    flex: 0 0 auto;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-card { transition: none; }
}