/* Stage 16.4C — adaptive surface contract.
   Non-chat app chrome and global portals must not fall back to the retired
   palette atmosphere. Conversation wallpaper and bubble materials stay isolated. */

.primary-pager-page:not([data-primary-page="chat"]),
.inbox-pager-page,
.inbox-shell,
.content-scroll:has(.gallery-swipe-zone),
.gallery-pager-page,
.gallery-filter-toolbar,
.gallery-category-float,
dialog,
#update-banner,
.boot-shell{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
}

.content-scroll:has(.gallery-swipe-zone),
.gallery-pager-page{
 background-color:var(--appearance-canvas);
}

dialog,
#update-banner{
 background-color:var(--appearance-surface);
}


/* Stage 16.4D — Classic thread chrome.
   Header and bottom navigation live outside the primary pager, so bind them
   explicitly to the adaptive surface family while leaving chat canvas alone. */
body[data-ui-theme="classic"] .app-shell > .main > .topbar,
body[data-ui-theme="classic"] .app-shell > .main > .mobile-nav{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
 background-color:var(--appearance-surface);
 border-color:var(--hairline);
}


/* Stage 16.4E — Classic chat chrome + universal startup curtain.
   Keep the chat wallpaper itself isolated; only the toolbar/progress chrome
   and startup curtain inherit the adaptive surface family. */
body[data-ui-theme="classic"] .app-shell > .main > .chat-tools,
body[data-ui-theme="classic"] .app-shell > .main > .read-footer,
.startup-curtain{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
}

body[data-ui-theme="classic"] .app-shell > .main > .chat-tools,
body[data-ui-theme="classic"] .app-shell > .main > .read-footer{
 background-color:var(--appearance-surface);
 border-color:var(--hairline);
}

.startup-curtain{
 background:var(--appearance-canvas);
}


/* Stage 16.4F — Classic inner chat chrome.
   Toolbar and read/progress footer are rendered inside the active Chat pager,
   not as direct children of .main. Bind the actual DOM nodes here. */
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .chat-tools,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .read-footer{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
 background-color:var(--appearance-surface);
 border-color:var(--hairline);
}


/* Stage 16.4G — Classic chat transient chrome.
   Timeline and transient chat controls live inside the Chat pager and must use
   adaptive app chrome surfaces without changing wallpaper or message bubbles. */
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .time-panel,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .time-rail-handle,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .return-position,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .collapsible-tools .utility-actions,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .utility-handle,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .chat-search-box,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .floating-chat-date,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .memory-selection-bar{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .time-panel{
 background:color-mix(in srgb,var(--appearance-surface) 94%,transparent);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .time-rail-handle{
 background:color-mix(in srgb,var(--appearance-surface) 92%,transparent);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .return-position,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .collapsible-tools .utility-actions,
body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .memory-selection-bar{
 background:var(--appearance-surface);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .utility-handle{
 background:color-mix(in srgb,var(--appearance-surface) 96%,transparent);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .chat-search-box{
 background:var(--appearance-canvas);
}

body[data-ui-theme="classic"] .primary-pager-page[data-primary-page="chat"] .floating-chat-date{
 background:color-mix(in srgb,var(--appearance-surface) 88%,transparent);
}


/* Stage 16.4H — legacy palette isolation.
   Move remaining app chrome off body-level legacy palette tokens while keeping
   wallpaper canvas and message bubble materials independent. */

/* Body-mounted Classic message context menu. */
body[data-ui-theme="classic"] .message-context-layer .message-context-menu{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
 background:var(--appearance-surface);
}

/* Desktop shell/sidebar chrome. Do not override .main so chat wallpaper/canvas stays isolated. */
@media(min-width:761px){
 body[data-ui-theme="classic"] .app-shell,
 body[data-ui-theme="classic"] .app-shell > .sidebar{
  --canvas:var(--appearance-canvas);
  --surface:var(--appearance-surface);
  --surface-raised:var(--appearance-surface-raised);
  --bg:var(--appearance-canvas);
  --panel:var(--appearance-surface);
 }
 body[data-ui-theme="classic"] .app-shell,
 body[data-ui-theme="classic"] .app-shell > .sidebar{
  background:var(--appearance-surface);
 }
}

/* Empty-library onboarding / import screen. */
.welcome{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
 background:var(--appearance-canvas);
}
.welcome .import-card{
 background:var(--appearance-surface);
}

/* Wallpaper editor chrome follows app appearance; wallpaper canvas and preview bubbles remain independent. */
.wallpaper-editor{
 --canvas:var(--appearance-canvas);
 --surface:var(--appearance-surface);
 --surface-raised:var(--appearance-surface-raised);
 --bg:var(--appearance-canvas);
 --panel:var(--appearance-surface);
 background:var(--appearance-canvas);
}
.wallpaper-editor .wallpaper-editor-bar,
.wallpaper-editor .wallpaper-editor-controls{
 background:var(--appearance-surface);
}


/* Stage 16.6B — saved-message note material parity in Temporal Glass */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card>.result-note{
 margin:12px 0 0!important;
 padding:10px 12px!important;
 border:1px solid color-mix(in srgb,var(--brand) 20%,rgba(255,255,255,.12))!important;
 border-left:3px solid color-mix(in srgb,var(--brand) 66%,var(--accent))!important;
 border-radius:12px!important;
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.055))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
 line-height:1.45;
 backdrop-filter:blur(10px) saturate(1.08);
 -webkit-backdrop-filter:blur(10px) saturate(1.08);
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card>.result-note{
 border-color:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.56))!important;
 background:color-mix(in srgb,var(--brand) 6%,rgba(255,255,255,.18))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.52)!important;
}


/* Stage 16.6C — Wallpaper Editor Temporal Glass chrome parity.
   Only editor chrome follows TG; wallpaper canvas + preview bubbles stay independent. */
body[data-ui-theme="temporal-glass"] .wallpaper-editor{
 background:color-mix(in srgb,var(--appearance-canvas) 88%,transparent)!important;
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-bar,
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls{
 position:relative;
 isolation:isolate;
 border-color:color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.10))!important;
 background:color-mix(in srgb,var(--appearance-surface) 72%,transparent)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  0 10px 28px rgba(0,0,0,.10)!important;
 backdrop-filter:blur(22px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-bar{
 border-bottom-width:1px!important;
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls{
 border-top-width:1px!important;
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-bar::before,
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background:
  radial-gradient(120% 180% at 8% -40%,rgba(255,255,255,.12),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.035),transparent 62%);
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-bar .icon-btn{
 border:1px solid color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.10));
 background:rgba(255,255,255,.035);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-apply{
 border:1px solid color-mix(in srgb,var(--brand) 52%,rgba(255,255,255,.18));
 background:color-mix(in srgb,var(--brand) 74%,rgba(255,255,255,.08));
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.20),
  0 6px 18px color-mix(in srgb,var(--brand) 16%,transparent);
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls input[type="range"]{
 accent-color:var(--brand);
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls input[type="range"]::-webkit-slider-runnable-track{
 height:4px;
 border:1px solid color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.12));
 border-radius:999px;
 background:color-mix(in srgb,var(--appearance-surface-raised) 58%,rgba(255,255,255,.05));
}
body[data-ui-theme="temporal-glass"] .wallpaper-editor .wallpaper-editor-controls input[type="range"]::-webkit-slider-thumb{
 margin-top:-6px;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .wallpaper-editor .wallpaper-editor-bar,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .wallpaper-editor .wallpaper-editor-controls{
 border-color:color-mix(in srgb,var(--brand) 11%,rgba(255,255,255,.58))!important;
 background:color-mix(in srgb,var(--appearance-surface) 68%,rgba(255,255,255,.18))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.58),
  0 10px 28px rgba(15,23,42,.07)!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .wallpaper-editor .wallpaper-editor-bar,
body[data-ui-theme="temporal-glass"][data-theme=dark] .wallpaper-editor .wallpaper-editor-controls{
 border-color:color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.07))!important;
 background:color-mix(in srgb,var(--appearance-surface) 70%,rgba(5,9,13,.18))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.055),
  0 10px 28px rgba(0,0,0,.20)!important;
}