/*
 * Final light-surface contrast contract.
 *
 * User text colours are preferences for dark/custom surfaces. On a light
 * theme, readable ink wins without deleting that preference. This file loads
 * after every component stylesheet so panels created at runtime follow the
 * same contract as the main application shell.
 */

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active) {
    color-scheme: light;
    --text-color: #111111;
    --text-primary: #111111;
    --text-secondary: #4b5563;
    --user-text-color-final: #111111 !important;
    --ai-text-color-final: #111111 !important;
    --input-bg: rgba(255, 255, 255, 0.92);
    --border-color: rgba(17, 24, 39, 0.20);
}

/* Main shell copy and controls. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(body, .app-header-title, .sidebar, .sidebar-btn, .history-item,
        #message-input, .message, .message-content, .watermark) {
    color: #111111;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(input, textarea, select) {
    color: #111111;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(input, textarea)::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Dialogs, sheets, popovers, drawers and tool panels share readable ink. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(.settings-modal, .theme-modal, .wallpaper-modal, .welcome-lang-modal,
        .feature-intro-modal, .universal-sheet, .popover-menu, [role="dialog"])
    :is(h1, h2, h3, h4, h5, h6, p, label, li, summary, strong, small) {
    color: #111111 !important;
    text-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(.settings-modal, .theme-modal, .wallpaper-modal, .welcome-lang-modal,
        .feature-intro-modal, .universal-sheet, .popover-menu, [role="dialog"])
    :is(input, textarea, select) {
    color: #111111 !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(17, 24, 39, 0.22) !important;
}

/* Close/dismiss controls frequently carried hard-coded white icon colours. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(button[aria-label*="close" i], button[title*="close" i],
        [class*="close-btn"], [class*="modal-close"], .fa-times, .fa-xmark) {
    color: #374151 !important;
    text-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(button[aria-label*="close" i], button[title*="close" i],
        [class*="close-btn"], [class*="modal-close"]):hover {
    color: #111827 !important;
    background-color: rgba(17, 24, 39, 0.08) !important;
}

/* Component stylesheets that intentionally default to a dark model picker. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-title-group h3, .us-category summary, .us-btn, .us-persona) {
    color: #111827 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-title-group p, .us-footer) {
    color: #4b5563 !important;
}

/* Preserve white copy on filled semantic/primary buttons. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    :is(.primary-action, .destructive-action, .us-btn.active) {
    color: #ffffff !important;
}

/* Model picker: treat light-surface-active as a complete light palette.
   Previously only its foreground changed, leaving dark cards with dark text. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay .universal-sheet {
    background: rgba(248, 250, 252, 0.98) !important;
    border-color: rgba(51, 65, 85, 0.22) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-header, .us-footer) {
    background: rgba(241, 245, 249, 0.96) !important;
    border-color: rgba(51, 65, 85, 0.16) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay .us-category {
    background: #ffffff !important;
    border-color: rgba(51, 65, 85, 0.18) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-category summary, .us-category[open] summary) {
    color: #172033 !important;
    background: #f8fafc !important;
    border-color: rgba(51, 65, 85, 0.14) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-btn, .us-persona) {
    color: #1f2937 !important;
    background: #ffffff !important;
    border-color: rgba(51, 65, 85, 0.2) !important;
    text-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-btn, .us-persona):hover {
    color: #312e81 !important;
    background: #eef2ff !important;
    border-color: rgba(79, 70, 229, 0.46) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-btn, .us-persona).active {
    color: #ffffff !important;
    background: #4338ca !important;
    border-color: #312e81 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.light-surface-active)
    #universal-model-overlay :is(.us-title-group h3, .us-title-group p, .us-persona-label) {
    color: #172033 !important;
    text-shadow: none !important;
}

/* Final application contrast contract. These state classes are updated only
   after the effective preset/mode has been resolved, so stale inline user
   colour preferences cannot survive a light ↔ dark switch. */
html.theme-contrast-dark {
    color-scheme: dark;
    --text-color: #f8fafc !important;
    --text-primary: #f8fafc !important;
    --text-secondary: #cbd5e1 !important;
    --user-text-color-final: #ffffff !important;
    --ai-text-color-final: #f8fafc !important;
}

html.theme-contrast-light {
    color-scheme: light;
    --text-color: #111111 !important;
    --text-primary: #111111 !important;
    --text-secondary: #4b5563 !important;
    --user-text-color-final: #111111 !important;
    --ai-text-color-final: #111111 !important;
}

html.theme-contrast-dark body :is(
    .message, .message-content, .message-content-column,
    .message p, .message li, .message strong, .message b,
    .date-divider, .sidebar, .sidebar-btn, .history-item,
    #message-input, #char-counter, .input-controls label,
    .watermark, .app-header-title
) {
    color: #f8fafc !important;
}

html.theme-contrast-light body :is(
    .message, .message-content, .message-content-column,
    .message p, .message li, .message strong, .message b,
    .date-divider, .sidebar, .sidebar-btn, .history-item,
    #char-counter, .input-controls label, .watermark, .app-header-title
) {
    color: #111111 !important;
}

html.theme-contrast-dark body :is(input, textarea, select) {
    color: #f8fafc !important;
}

html.theme-contrast-light body :is(input, textarea, select) {
    color: #111111 !important;
}

html.theme-contrast-dark body :is(input, textarea)::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

html.theme-contrast-light body :is(input, textarea)::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

/* Date separators need an explicit final colour because older theme rules can
   leave the label inheriting white after a dark → light mode transition. */
html.theme-contrast-light body #chat .date-divider {
    color: #374151 !important;
    text-shadow: none !important;
}

html.theme-contrast-light body #chat .date-divider::before,
html.theme-contrast-light body #chat .date-divider::after {
    border-bottom-color: #9ca3af !important;
}

html.theme-contrast-dark body #chat .date-divider {
    color: #cbd5e1 !important;
}

html.theme-contrast-dark body #chat .date-divider::before,
html.theme-contrast-dark body #chat .date-divider::after {
    border-bottom-color: #475569 !important;
}

html.theme-contrast-light body #workspace-suite-switch {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.theme-contrast-light body #workspace-suite-switch option {
    color: #111827 !important;
    background: #ffffff !important;
}

html.theme-contrast-light body #workspace-suite-switch-wrap .workspace-suite-chevron {
    color: #64748b !important;
}

html.theme-contrast-dark body #workspace-suite-switch {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html.theme-contrast-dark body #workspace-suite-switch option {
    color: #f8fafc !important;
    background: #111827 !important;
}