/* Yggdrasil Agent - Custom Theme (Refactored)
 * Originally 5517 lines → ~1800 lines via CSS custom properties & deduplication
 */

/* Import elegant fonts */
/* Fonts loaded non-blocking via auto-expand.js earlyInit() */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: CSS CUSTOM PROPERTIES (Theme Tokens)
   Single source of truth for all colors, eliminating dark/light duplication
   ═══════════════════════════════════════════════════════════════════════════ */

/* Browser preferred color scheme (matches default_theme = "dark") */
:root { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

:root, html:not(.dark) {
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.86);
    --glass-bg-strong: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(255, 255, 255, 0.92);
    --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --glass-blur: blur(20px) saturate(180%);
    /* Text */
    --text-primary: #1f2937;
    --text-heading: #111827;
    --text-muted: #374151;
    --text-link: #0891b2;
    --text-link-hover: #06b6d4;
    --text-link-glow: rgba(34, 211, 238, 0.4);
    --text-link-glow-hover: rgba(34, 211, 238, 0.6);
    /* Message list */
    --msg-list-bg: rgba(255, 255, 255, 0.42);
    /* User message */
    --user-msg-bg: #334155;
    --user-msg-color: #f8fafc;
    --user-msg-border: 1px solid rgba(255, 255, 255, 0.28);
    --user-msg-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
    --user-msg-radius: 20px;
    /* Buttons */
    --btn-color: #374151;
    --btn-hover-color: #111827;
    --btn-icon-color: #9ca3af;
    --btn-icon-hover: #4b5563;
    --btn-action-bg: rgba(255, 255, 255, 0.85);
    --btn-action-border: rgba(0, 0, 0, 0.15);
    --btn-action-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.8);
    /* Stops/Cancel */
    --stop-color: rgba(107, 114, 128, 1);
    /* Header */
    --header-bg: rgba(255, 255, 255, 0.92);
    --header-border: 1px solid rgba(0, 0, 0, 0.05);
    --header-text: #1f2937;
    --header-btn: #4b5563;
    /* Input */
    --input-bg: hsl(0 0% 99%);
    --input-border: 1px solid rgba(0, 0, 0, 0.1);
    --composer-bg: transparent;
    --textarea-color: #1f2937;
    /* Steps */
    --step-text: #374151;
    --step-header-text: #1f2937;
    --step-header-svg: #4b5563;
    --step-bold: #111827;
    /* CLI terminal panels (steps + stats) */
    --cli-font: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --cli-panel-bg: rgba(13, 17, 23, 0.72);
    --cli-panel-border: rgba(55, 65, 81, 0.55);
    --cli-accent: #0891b2;
    --cli-dim: #6b7280;
    --cli-chip-bg: rgba(15, 23, 42, 0.55);
    --cli-chip-border: rgba(55, 65, 81, 0.65);
    --cli-chip-label: #0891b2;
    --cli-chip-value: #111827;
    --cli-tagline: #4b5563;
    /* Code */
    --code-inline-bg: rgba(0, 0, 0, 0.06);
    --code-inline-color: #c7254e;
    /* Tables */
    --table-border: rgba(0, 0, 0, 0.15);
    --table-th-bg: rgba(0, 0, 0, 0.06);
    --table-th-color: #111827;
    --table-td-color: #374151;
    --table-stripe: rgba(0, 0, 0, 0.03);
    /* User msg tables (inverted because user bg is dark in light mode) */
    --user-table-border: rgba(255, 255, 255, 0.28);
    --user-table-th-bg: rgba(255, 255, 255, 0.08);
    --user-table-text: #ffffff;
    /* Dialog */
    --dialog-bg: #f8f6f3;
    --dialog-section-border: rgba(0, 0, 0, 0.1);
    --dialog-form-bg: rgba(0, 0, 0, 0.02);
    --dialog-form-border: rgba(0, 0, 0, 0.08);
    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
    /* Sidebar */
    --sidebar-bg: rgba(244, 247, 252, 0.58);
    --sidebar-border: 1px solid rgba(255, 255, 255, 0.45);
    --sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --sidebar-date-color: rgba(109, 84, 18, 0.96);
    --sidebar-date-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    --sidebar-text: rgba(17, 24, 39, 0.98);
    --sidebar-link: rgba(76, 29, 149, 0.98);
    --sidebar-link-hover: rgba(124, 58, 237, 1);
    --sidebar-hover-bg: rgba(0, 0, 0, 0.11);
    --sidebar-active-bg: rgba(124, 58, 237, 0.2);
    --sidebar-active-border: rgba(124, 58, 237, 0.92);
    --sidebar-svg: rgba(60, 60, 80, 0.7);
    --sidebar-svg-hover: rgba(124, 58, 237, 0.9);
    --sidebar-toggle-bg: rgba(255, 255, 255, 0.6);
    --sidebar-toggle-border: rgba(124, 58, 237, 0.3);
    --sidebar-scrollbar: rgba(124, 58, 237, 0.25);
    --sidebar-scrollbar-hover: rgba(124, 58, 237, 0.4);
    /* Misc */
    --selection-bg: rgba(37, 99, 235, 0.25);
    --card-bg: rgba(255, 255, 255, 0.55);
    --card-border: rgba(0, 0, 0, 0.06);
    --divider: rgba(0, 0, 0, 0.1);
    --focus-ring: rgba(37, 99, 235, 0.5);
    --overlay-radius: 8px;
    --bg-overlay: rgba(242, 247, 255, 0.26);
    --bg-fallback: #eef4ff;
    --switch-off: #d1d5db;
    /* Mode icons border */
    --mode-icons-border: rgba(0, 0, 0, 0.08);
    /* Resize handle */
    --resize-handle-bg: rgba(0, 0, 0, 0.05);
    /* Button grey reset */
    --btn-grey-reset: transparent;
}

html.dark {
    --glass-bg: rgba(0, 0, 0, 0.5);
    --glass-bg-strong: rgba(0, 0, 0, 0.5);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --glass-blur: blur(20px) saturate(200%);
    --text-primary: #e5e7eb;
    --text-heading: #f9fafb;
    --text-muted: #e5e7eb;
    --text-link: #22d3ee;
    --text-link-hover: #67e8f9;
    --text-link-glow: rgba(34, 211, 238, 0.4);
    --text-link-glow-hover: rgba(34, 211, 238, 0.7);
    --msg-list-bg: rgba(0, 0, 0, 0.15);
    --user-msg-bg: #f0f0f5;
    --user-msg-color: #1a1a2e;
    --user-msg-border: 1px solid rgba(255, 255, 255, 0.2);
    --user-msg-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --user-msg-radius: 16px;
    --btn-color: #f3f4f6;
    --btn-hover-color: #ffffff;
    --btn-icon-color: #e5e7eb;
    --btn-icon-hover: #ffffff;
    --btn-action-bg: rgba(0, 0, 0, 0.65);
    --btn-action-border: rgba(255, 255, 255, 0.25);
    --btn-action-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    --stop-color: rgba(255, 255, 255, 0.85);
    --header-bg: rgba(0, 0, 0, 0.4);
    --header-border: 1px solid rgba(255, 255, 255, 0.1);
    --header-text: #f3f4f6;
    --header-btn: #e5e7eb;
    --input-bg: hsl(0, 0%, 15%);
    --input-border: 1px solid rgba(255, 255, 255, 0.1);
    --composer-bg: transparent;
    --textarea-color: #e5e7eb;
    --step-text: #e5e7eb;
    --step-header-text: #f9fafb;
    --step-header-svg: #d1d5db;
    --step-bold: #f3f4f6;
    --cli-font: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --cli-panel-bg: rgba(8, 10, 14, 0.78);
    --cli-panel-border: rgba(75, 85, 99, 0.45);
    --cli-accent: #44ddff;
    --cli-dim: #9ca3af;
    --cli-chip-bg: rgba(0, 0, 0, 0.45);
    --cli-chip-border: rgba(75, 85, 99, 0.55);
    --cli-chip-label: #67e8f9;
    --cli-chip-value: #e5e7eb;
    --cli-tagline: #9ca3af;
    --code-inline-bg: rgba(255, 255, 255, 0.1);
    --code-inline-color: #f8b4c8;
    --table-border: rgba(255, 255, 255, 0.35);
    --table-th-bg: rgba(255, 255, 255, 0.12);
    --table-th-color: #ffffff;
    --table-td-color: rgba(255, 255, 255, 0.9);
    --table-stripe: rgba(255, 255, 255, 0.05);
    --user-table-border: rgba(0, 0, 0, 0.15);
    --user-table-th-bg: rgba(0, 0, 0, 0.06);
    --user-table-text: #1a1a2e;
    --dialog-bg: #1a1a1a;
    --dialog-section-border: rgba(255, 255, 255, 0.1);
    --dialog-form-bg: rgba(255, 255, 255, 0.03);
    --dialog-form-border: rgba(255, 255, 255, 0.1);
    --scrollbar-track: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
    --sidebar-bg: rgba(10, 10, 18, 0.55);
    --sidebar-border: 1px solid rgba(255, 255, 255, 0.08);
    --sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --sidebar-date-color: rgba(201, 162, 39, 0.85);
    --sidebar-date-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sidebar-text: rgba(255, 255, 255, 0.85);
    --sidebar-link: rgba(200, 180, 255, 0.95);
    --sidebar-link-hover: rgba(201, 162, 39, 1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(201, 162, 39, 0.15);
    --sidebar-active-border: rgba(201, 162, 39, 0.8);
    --sidebar-svg: rgba(255, 255, 255, 0.7);
    --sidebar-svg-hover: rgba(201, 162, 39, 0.9);
    --sidebar-toggle-bg: rgba(10, 10, 18, 0.6);
    --sidebar-toggle-border: rgba(201, 162, 39, 0.4);
    --sidebar-scrollbar: rgba(201, 162, 39, 0.3);
    --sidebar-scrollbar-hover: rgba(201, 162, 39, 0.5);
    --selection-bg: rgba(78, 205, 196, 0.3);
    --card-bg: rgba(0, 0, 0, 0.3);
    --card-border: rgba(255, 255, 255, 0.1);
    --divider: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(78, 205, 196, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.45);
    --bg-fallback: #0a0a0a;
    --switch-off: #4a4a4a;
    --mode-icons-border: rgba(255, 255, 255, 0.1);
    --resize-handle-bg: rgba(255, 255, 255, 0.05);
    --btn-grey-reset: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: BASE & BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
    height: 100%;
    min-height: 100%;
    background-color: transparent;
    font-weight: 400;
}

html.dark body {
    background: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
        url('/public/bg-dark-desktop.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

html:not(.dark) body {
    background: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
        url('/public/bg-light-desktop.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-fallback) !important;
}

@media (max-width: 768px) {
    html.dark body {
        background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
            url('/public/bg-dark-mobile.png') !important;
        background-attachment: scroll !important;
    }
    html:not(.dark) body {
        background-image: linear-gradient(rgba(245,240,235,0.25), rgba(245,240,235,0.25)),
            url('/public/bg-light-mobile.png') !important;
        background-attachment: scroll !important;
    }
}

/* Layout containers transparent EXCEPT main content pane */
#root, #root > div, #root > div > div, #root > div > div > div,
[class*="chat"], [class*="Chat"] {
    background: transparent !important;
}

/* Main content pane: subtle glassmorphism */
main {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    border-radius: 0 !important;
}

/* Force first 6 DOM levels transparent (light mode bg visibility)
   EXCLUDE: dialogs, menus, popovers, radix portals */
html:not(.dark) body > *:not([role="dialog"]):not([data-radix-popper-content-wrapper]):not(.MuiPopover-root):not(.MuiMenu-root):not([role="tooltip"]),
html:not(.dark) body > *:not([role="dialog"]):not([data-radix-popper-content-wrapper]):not([role="tooltip"]) > *:not([role="dialog"]):not([role="menu"]):not([data-radix-menu-content]):not([role="tooltip"]),
html:not(.dark) body > *:not([role="dialog"]) > *:not([role="dialog"]) > *:not([role="dialog"]):not([role="menu"]):not([role="tooltip"]),
html:not(.dark) body > * > * > * > *:not([role="dialog"]):not([role="menu"]):not([role="tooltip"]),
html:not(.dark) body > * > * > * > * > *:not([role="dialog"]):not([role="menu"]):not([role="tooltip"]),
html:not(.dark) body > * > * > * > * > * > *:not([role="dialog"]):not([role="menu"]):not([role="tooltip"]) {
    background: transparent !important;
}
/* Restore opaque backgrounds for overlay UI elements in light mode */
html:not(.dark) [role="dialog"],
html:not(.dark) [role="dialog"] > * {
    background: var(--dialog-bg, #f8f6f3) !important;
}
html:not(.dark) [role="menu"],
html:not(.dark) [role="alertdialog"],
html:not(.dark) [role="tooltip"],
html:not(.dark) [data-radix-menu-content],
html:not(.dark) [data-radix-popper-content-wrapper],
html:not(.dark) [data-radix-popper-content-wrapper] > *,
html:not(.dark) .MuiPopover-paper,
html:not(.dark) .MuiMenu-paper {
    background: var(--dialog-bg, #f8f6f3) !important;
    border-radius: var(--overlay-radius) !important;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: MESSAGE LIST & MESSAGES
   Glassmorphism applied at ONE level only (message wrapper)
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-message-list {
    background: var(--msg-list-bg) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    overflow-y: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
.cl-message-list::before { content: none !important; flex: 0 !important; }
.cl-message-list::after { content: '' !important; flex: 1 1 auto !important; }
.cl-message-list > * { position: relative !important; flex-shrink: 0 !important; }

/* Assistant messages: glass effect (SINGLE LEVEL) — exclude hidden mode-switch carrier rows */
.cl-message-list > div:not(:has([data-author="user"])):not(:has(button[name="mode_switch"])):not(:has(button[data-name="mode_switch"])):not(:has(.ygg-mode-switch-hidden-row)):not(:has([data-author="mode_switch_hidden"])):has(.cl-message),
.cl-message-list > section:not(:has([data-author="user"])):not(:has(button[name="mode_switch"])):not(:has(button[data-name="mode_switch"])):not(:has(.ygg-mode-switch-hidden-row)):not(:has([data-author="mode_switch_hidden"])):has(.cl-message) {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    padding: 8px !important;
}

/* Inner content: transparent to not double-apply glass */
.cl-message:not([data-author="user"]) .cl-message-content > *,
.cl-message:not([data-author="user"]) .prose,
.cl-message:not([data-author="user"]) .markdown,
.cl-step .prose, .cl-step .markdown {
    background: transparent !important;
}

/* Aura messages: stronger glassmorphism card (weather, air quality, allergens) */
.cl-message-list > div:has(.cl-message[data-author="Aura"]),
.cl-message-list > section:has(.cl-message[data-author="Aura"]) {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    padding: 16px 20px !important;
}
html.dark .cl-message-list > div:has(.cl-message[data-author="Aura"]),
html.dark .cl-message-list > section:has(.cl-message[data-author="Aura"]) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Banner containers: no glass */
.cl-message-list > div:has(.ygg-responsive-banner),
.cl-message-list > section:has(.ygg-responsive-banner) {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* User messages: solid bubble, no glass */
.cl-message-list > div:has([data-author="user"]),
.cl-message-list > section:has([data-author="user"]) {
    background: var(--user-msg-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: var(--user-msg-border) !important;
    box-shadow: var(--user-msg-shadow) !important;
    border-radius: var(--user-msg-radius) !important;
    color: var(--user-msg-color) !important;
    padding: 10px 16px !important;
    margin-bottom: 12px !important;
}

.cl-message[data-author="user"] {
    width: fit-content !important;
    max-width: 70% !important;
    margin-left: auto !important;
    margin-right: 16px !important;
}
.cl-message-list > *:has(.cl-message[data-author="user"]) {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}
.cl-message[data-author="user"] .cl-message-content { width: auto !important; max-width: none !important; }

/* User message text colors — wrapper + [data-author] for Chainlit DOM variants */
.cl-message[data-author="user"],
[data-author="user"],
.cl-message[data-author="user"] > *,
[data-author="user"] > *,
.cl-message[data-author="user"] .cl-message-content,
[data-author="user"] .cl-message-content,
.cl-message-list > *:has([data-author="user"]) .cl-message-content,
.cl-message[data-author="user"] p,
[data-author="user"] p,
.cl-message[data-author="user"] span,
[data-author="user"] span,
.cl-message[data-author="user"] div,
[data-author="user"] div {
    color: var(--user-msg-color) !important;
    background: transparent !important;
    font-weight: normal !important;
}
/* Force strong contrast for all nested markdown/rich text in user bubbles */
.cl-message[data-author="user"] .prose,
[data-author="user"] .prose,
.cl-message-list > *:has([data-author="user"]) .prose,
.cl-message[data-author="user"] .markdown,
[data-author="user"] .markdown,
.cl-message-list > *:has([data-author="user"]) .markdown,
.cl-message[data-author="user"] .prose *,
[data-author="user"] .prose *,
.cl-message-list > *:has([data-author="user"]) .prose *,
.cl-message[data-author="user"] .markdown *,
[data-author="user"] .markdown *,
.cl-message-list > *:has([data-author="user"]) .markdown *,
.cl-message[data-author="user"] li,
[data-author="user"] li,
.cl-message[data-author="user"] strong,
[data-author="user"] strong,
.cl-message[data-author="user"] b,
[data-author="user"] b,
.cl-message[data-author="user"] .text-foreground,
[data-author="user"] .text-foreground,
.cl-message-list > *:has([data-author="user"]) .text-foreground {
    color: var(--user-msg-color) !important;
}
.cl-message[data-author="user"] a {
    color: #93c5fd !important;
    text-decoration-color: rgba(147, 197, 253, 0.9) !important;
    text-shadow: none !important;
}
.cl-message[data-author="user"] :not(pre) > code {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

/* Chainlit 2.9+: user bubble is data-step-type + bg-accent (no cl-message / data-author) */
[data-step-type="user_message"] div.bg-accent,
[data-step-type="user_message"] .rounded-3xl.bg-accent {
    background: var(--user-msg-bg) !important;
    color: var(--user-msg-color) !important;
    border: var(--user-msg-border) !important;
    box-shadow: var(--user-msg-shadow) !important;
}
[data-step-type="user_message"] .message-content,
[data-step-type="user_message"] .message-content *,
[data-step-type="user_message"] .prose,
[data-step-type="user_message"] .prose :where(p, li, span, div, strong, em, h1, h2, h3, h4, h5, h6),
[data-step-type="user_message"] .text-foreground {
    color: var(--user-msg-color) !important;
    -webkit-text-fill-color: var(--user-msg-color) !important;
}
[data-step-type="user_message"] a:not(.command-span) {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
}
html.dark [data-step-type="user_message"] a:not(.command-span) {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}
[data-step-type="user_message"] :not(pre) > code {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}
html.dark [data-step-type="user_message"] :not(pre) > code {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1a1a2e !important;
}

/* User message table overrides */
.cl-message[data-author="user"] table { border: 1px solid var(--user-table-border) !important; background: transparent !important; }
.cl-message[data-author="user"] th { background: var(--user-table-th-bg) !important; border: 1px solid var(--user-table-border) !important; color: var(--user-table-text) !important; }
.cl-message[data-author="user"] td { border: 1px solid var(--user-table-border) !important; color: var(--user-table-text) !important; background: transparent !important; }

/* Full width for assistant messages */
.cl-message:not([data-author="user"]),
.cl-message:not([data-author="user"]) .cl-message-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.prose, .markdown { max-width: 100% !important; }

/* Font weight: normal for message body, bold for headings/strong */
.cl-message:not([data-author="user"]),
.cl-message:not([data-author="user"]) *:not(strong):not(b):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(th):not(button) {
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
}
.cl-message strong, .cl-message b,
.cl-message h1, .cl-message h2, .cl-message h3, .cl-message h4, .cl-message h5, .cl-message h6,
.cl-message th, .cl-message button {
    font-weight: 600 !important;
}
/* Override Tailwind font-weight utility classes in messages */
.cl-message .font-medium, .cl-message .font-semibold, .cl-message .font-bold,
.cl-message [class*="font-medium"], .cl-message [class*="font-semibold"], .cl-message [class*="font-bold"] {
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

header, [class*="header"]:not([class*="step-header"]) {
    background: var(--header-bg) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: var(--header-border) !important;
    gap: 4px !important;
}
header *, [class*="header"]:not([class*="step-header"]) * { color: var(--header-text) !important; }
header a, header [class*="logo"], header [class*="title"] { color: var(--text-heading) !important; font-weight: 600 !important; }
/* Spread tagline / description in header (e.g. "Get Instant Insight") */
header [class*="title"], header [class*="description"], header p, header span:first-of-type { letter-spacing: 0.08em !important; }
header button, header svg { color: var(--header-btn) !important; }
/* header button hover: color handled by JS rainbow, no bold jump */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: CHAT INPUT / COMPOSER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Composer: glassmorphism effect */
[class*="composer"], [class*="Composer"],
#message-composer,
form:has(textarea[name="message"]) {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 16px !important;
    padding: 12px !important;
}
html:not(.dark) [class*="composer"],
html:not(.dark) [class*="Composer"],
html:not(.dark) #message-composer,
html:not(.dark) form:has(textarea[name="message"]) {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
/* Remove bright blue focus ring on message composer */
html:not(.dark) [class*="composer"]:focus-within,
html:not(.dark) [class*="Composer"]:focus-within,
html:not(.dark) #message-composer:focus-within,
html:not(.dark) form:has(textarea[name="message"]):focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}
html:not(.dark) textarea[name="message"]:focus,
html:not(.dark) textarea[name="message"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* Remove inner border around text input (no nested box) */
html:not(.dark) form:has(textarea[name="message"]) > div:first-child,
html:not(.dark) #message-composer > div:first-child {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none !important;
}
html:not(.dark) form:has(textarea[name="message"]) > div:first-child:focus-within,
html:not(.dark) #message-composer > div:first-child:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
html:not(.dark) form:has(textarea[name="message"]) textarea[name="message"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
textarea, textarea:focus, textarea:active {
    background: transparent !important;
    color: var(--textarea-color) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* All buttons inside composer area: transparent */
*:has(textarea) button,
[class*="composer"] button,
[class*="Composer"] button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--btn-icon-color) !important;
}
/* composer button hover: color handled by JS rainbow, no bold jump */
*:has(textarea) button svg, [class*="composer"] button svg { color: inherit !important; }

/* Send button hover (no rainbow glow) */
button[type="submit"]:hover, button[type="submit"]:hover svg,
button[aria-label*="send" i]:hover, button[aria-label*="send" i]:hover svg {
    animation: none !important;
    transform: scale(1.05) !important;
}

/* Stop/cancel button colors */
button[aria-label*="stop" i] svg, button[aria-label*="stop" i] svg *,
button[aria-label*="cancel" i] svg, button[aria-label*="cancel" i] svg *,
button:has(svg rect:only-child) svg, button:has(svg rect:only-child) svg * {
    color: var(--stop-color) !important;
    fill: var(--stop-color) !important;
    stroke: var(--stop-color) !important;
}
button[aria-label*="stop" i]:hover, button[aria-label*="cancel" i]:hover {
    animation: none !important;
    transform: scale(1.05) !important;
}
button[aria-label*="stop" i]:hover svg *, button[aria-label*="cancel" i]:hover svg * {
    color: currentColor !important; fill: currentColor !important; stroke: currentColor !important;
}

/* Composer icons (attach, upload, settings, copy): smooth rainbow on hover, NO background highlight */
*:has(textarea) button[aria-label*="attach" i],
*:has(textarea) button[aria-label*="upload" i],
*:has(textarea) button[aria-label*="settings" i],
*:has(textarea) button[aria-label*="copy" i],
[class*="composer"] button[aria-label*="attach" i],
[class*="composer"] button[aria-label*="upload" i],
[class*="composer"] button[aria-label*="settings" i],
[class*="composer"] button[aria-label*="copy" i] {
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
    background-color: transparent !important;
}
*:has(textarea) button[aria-label*="attach" i]:hover,
*:has(textarea) button[aria-label*="upload" i]:hover,
*:has(textarea) button[aria-label*="settings" i]:hover,
*:has(textarea) button[aria-label*="copy" i]:hover,
[class*="composer"] button[aria-label*="attach" i]:hover,
[class*="composer"] button[aria-label*="upload" i]:hover,
[class*="composer"] button[aria-label*="settings" i]:hover,
[class*="composer"] button[aria-label*="copy" i]:hover {
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
    background-color: transparent !important;
}
/* No background on focus/active for these icons */
*:has(textarea) button[aria-label*="attach" i]:focus,
*:has(textarea) button[aria-label*="upload" i]:focus,
*:has(textarea) button[aria-label*="settings" i]:focus,
*:has(textarea) button[aria-label*="copy" i]:focus,
*:has(textarea) button[aria-label*="attach" i]:active,
*:has(textarea) button[aria-label*="upload" i]:active,
*:has(textarea) button[aria-label*="settings" i]:active,
*:has(textarea) button[aria-label*="copy" i]:active,
[class*="composer"] button[aria-label*="attach" i]:focus,
[class*="composer"] button[aria-label*="upload" i]:focus,
[class*="composer"] button[aria-label*="settings" i]:focus,
[class*="composer"] button[aria-label*="copy" i]:focus,
[class*="composer"] button[aria-label*="attach" i]:active,
[class*="composer"] button[aria-label*="upload" i]:active,
[class*="composer"] button[aria-label*="settings" i]:active,
[class*="composer"] button[aria-label*="copy" i]:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Kill parent wrapper highlight when composer icons hovered */
*:has(textarea) *:has(> button[aria-label*="attach" i]:hover),
*:has(textarea) *:has(> button[aria-label*="upload" i]:hover),
*:has(textarea) *:has(> button[aria-label*="settings" i]:hover),
*:has(textarea) *:has(> button[aria-label*="copy" i]:hover),
[class*="composer"] *:has(> button[aria-label*="attach" i]:hover),
[class*="composer"] *:has(> button[aria-label*="upload" i]:hover),
[class*="composer"] *:has(> button[aria-label*="settings" i]:hover),
[class*="composer"] *:has(> button[aria-label*="copy" i]:hover) {
    background: none !important;
    background-color: transparent !important;
}
*:has(textarea) button[aria-label*="attach" i]:hover svg,
*:has(textarea) button[aria-label*="upload" i]:hover svg,
*:has(textarea) button[aria-label*="settings" i]:hover svg,
*:has(textarea) button[aria-label*="copy" i]:hover svg,
[class*="composer"] button[aria-label*="attach" i]:hover svg,
[class*="composer"] button[aria-label*="upload" i]:hover svg,
[class*="composer"] button[aria-label*="settings" i]:hover svg,
[class*="composer"] button[aria-label*="copy" i]:hover svg,
*:has(textarea) button[aria-label*="attach" i]:hover svg *,
*:has(textarea) button[aria-label*="upload" i]:hover svg *,
*:has(textarea) button[aria-label*="settings" i]:hover svg *,
*:has(textarea) button[aria-label*="copy" i]:hover svg * {
    color: currentColor !important;
    stroke: currentColor !important;
    fill: currentColor !important;
}

/* Upload button / label transparent */
label:has(input[type="file"]), label:has(input[type="file"]) *,
[class*="upload-button"], [class*="upload-button"] * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: STEPS
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-step {
    background: var(--cli-panel-bg) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    border: 1px solid var(--cli-panel-border) !important;
    border-left: 3px solid var(--step-accent, var(--cli-accent)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
    padding: 6px 10px 8px !important;
    margin: 4px 0 !important;
    font-family: var(--cli-font) !important;
}

/* Nested activity steps: terminal tree indent */
.cl-step .cl-step {
    margin-left: 10px !important;
    border-left-width: 2px !important;
    border-left-color: color-mix(in srgb, var(--step-accent, var(--cli-accent)) 55%, transparent) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    padding: 4px 8px 6px !important;
}

html:not(.dark) .cl-step .cl-step {
    background: rgba(15, 23, 42, 0.06) !important;
}

.cl-step .prose, .cl-step .markdown, .cl-step-content,
.cl-step > div:not(:first-child), .cl-step [class*="content"] {
    color: var(--step-text) !important;
    text-shadow: none !important;
    animation: none !important;
}
.cl-step .prose strong, .cl-step .prose b,
.cl-step .markdown strong, .cl-step .markdown b {
    color: var(--step-bold) !important;
}
.cl-step .prose p, .cl-step .prose li, .cl-step .prose span,
.cl-step .markdown p, .cl-step .markdown li, .cl-step .markdown span {
    color: inherit !important;
    text-shadow: none !important;
    animation: none !important;
}

/* Step headers — CLI log line: bold label + dim detail */
.cl-step-header, .cl-step-header span {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    font-family: var(--cli-font) !important;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em !important;
}
.cl-step-header {
    color: var(--step-header-text) !important;
    font-weight: 600 !important;
    padding: 2px 0 !important;
}
.cl-step-header .ygg-step-label {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}
.cl-step-header .ygg-step-detail:not(.ygg-bifrost-part) {
    color: var(--cli-dim) !important;
    font-weight: 400 !important;
}
.cl-step-header.ygg-step-split-title .ygg-step-detail.ygg-bifrost-part {
    font-weight: 600 !important;
}

/* Step rune/emoji icons stay white (dark) or light gray — not realm-tinted */
.cl-step-header .ygg-step-icon,
html.dark .cl-step-header .ygg-step-icon {
    color: #ffffff !important;
}
html:not(.dark) .cl-step-header .ygg-step-icon {
    color: #d1d5db !important;
}

/* CLI rainbow realm colors — sync with yggdrasil/interfaces/chainlit/cli_theme.py */
:root {
    --ygg-realm-asgard: #ff595e;
    --ygg-realm-midgard: #ff9f1c;
    --ygg-realm-jotunheim: #8ac926;
    --ygg-realm-muspelheim: #1982c4;
    --ygg-realm-niflheim: #ffbf00;
    --ygg-realm-vanaheim: #8338ec;
    --ygg-realm-alfheim: #ffb5a7;
    --ygg-realm-nidavellir: #06d6a0;
    --ygg-realm-helheim: #118ab2;
    --ygg-realm-runegard: #ef476f;
    --ygg-routing: #00e5ff;
    --ygg-tool: #44ddff;
}

/* Yggdrasil realm colors: label + realm slug (detail stays dim via --cli-dim) */
.cl-step-header[class*="ygg-realm-"] .ygg-step-label,
.cl-step-header[class*="ygg-realm-"] .ygg-step-realm { font-weight: 700 !important; }
.cl-step-header.ygg-realm-routing .ygg-step-label:not(.ygg-routing-label),
.cl-step-header.ygg-realm-routing .ygg-step-realm:not(.ygg-routing-target) { color: var(--ygg-routing) !important; }

/* Sleipnir routing step: badge layout (𐂃 Routing → ᛗ Practical — desc) */
.cl-step-header.ygg-routing-step,
.cl-step > button.ygg-routing-step,
button[id^="step-"].ygg-routing-step {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    text-align: left !important;
    height: auto !important;
}
.ygg-routing-title {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
}
.ygg-routing-badge,
.ygg-routing-target-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 9px !important;
    border-radius: 5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}
.ygg-routing-badge {
    background: color-mix(in srgb, var(--ygg-routing) 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ygg-routing) 42%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.ygg-routing-target-badge {
    background: color-mix(in srgb, var(--ygg-routing-target, var(--ygg-realm-midgard)) 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ygg-routing-target, var(--ygg-realm-midgard)) 48%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-label,
.ygg-routing-badge .ygg-routing-label {
    color: var(--ygg-routing) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-source-icon,
.ygg-routing-badge .ygg-routing-source-icon {
    color: var(--ygg-routing) !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-arrow,
.ygg-routing-title > .ygg-routing-arrow {
    color: var(--cli-dim) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0 1px !important;
    opacity: 0.85 !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-target,
.ygg-routing-target-badge .ygg-routing-target {
    color: var(--ygg-routing-target, inherit) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.8125rem !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-target-icon,
.ygg-routing-target-badge .ygg-routing-target-icon {
    color: var(--ygg-routing-target, inherit) !important;
    font-size: 0.875rem !important;
}
.ygg-routing-desc-row {
    flex: 1 1 100% !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding-left: 0.15rem !important;
    margin-top: 1px !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-desc-sep,
.ygg-routing-desc-row .ygg-routing-desc-sep {
    color: var(--cli-dim) !important;
    font-weight: 400 !important;
    opacity: 0.7 !important;
}
.cl-step-header.ygg-routing-step .ygg-routing-desc,
.ygg-routing-desc-row .ygg-routing-desc {
    color: var(--cli-dim) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 0.8125rem !important;
    white-space: normal !important;
}
/* Live progress dashboard routing line */
.ygg-progress-routing-line .ygg-routing-title {
    gap: 4px 6px !important;
}
.ygg-progress-routing-line .ygg-routing-badge,
.ygg-progress-routing-line .ygg-routing-target-badge {
    padding: 1px 7px !important;
    font-size: 0.75rem !important;
}
.ygg-progress-routing-line .ygg-routing-desc-row {
    display: none !important;
}
.ygg-progress-routing-label { color: var(--ygg-routing) !important; font-weight: 700 !important; }
.ygg-progress-finalsynth-label { color: #ff66cc !important; font-weight: 700 !important; }
.cl-step-header.ygg-realm-extraction .ygg-step-label, .cl-step-header.ygg-realm-extraction .ygg-step-realm { color: #00b894 !important; }
.cl-step-header.ygg-realm-finalsynth .ygg-step-label, .cl-step-header.ygg-realm-finalsynth .ygg-step-realm { color: #ff66cc !important; }
.cl-step .ygg-realm-finalsynth .ygg-step-label, .cl-step .ygg-realm-finalsynth .ygg-step-realm { color: #ff66cc !important; }
.cl-step-header.ygg-realm-logic .ygg-step-label, .cl-step-header.ygg-realm-logic .ygg-step-realm { color: var(--ygg-realm-asgard) !important; }
.cl-step .ygg-realm-logic .ygg-step-label, .cl-step .ygg-realm-logic .ygg-step-realm { color: var(--ygg-realm-asgard) !important; }
.cl-step-header.ygg-realm-practical .ygg-step-label, .cl-step-header.ygg-realm-practical .ygg-step-realm { color: var(--ygg-realm-midgard) !important; }
.cl-step .ygg-realm-practical .ygg-step-label, .cl-step .ygg-realm-practical .ygg-step-realm { color: var(--ygg-realm-midgard) !important; }
.cl-step-header.ygg-realm-practical .ygg-step-icon, .cl-step .ygg-realm-practical .ygg-step-icon,
button.ygg-realm-practical .ygg-step-icon, button.ygg-realm-practical .ygg-step-label { color: var(--ygg-realm-midgard) !important; }
.cl-step-header.ygg-realm-code .ygg-step-label, .cl-step-header.ygg-realm-code .ygg-step-realm { color: var(--ygg-realm-nidavellir) !important; }
.cl-step .ygg-realm-code .ygg-step-label, .cl-step .ygg-realm-code .ygg-step-realm { color: var(--ygg-realm-nidavellir) !important; }
.cl-step-header.ygg-realm-synthesis .ygg-step-label, .cl-step-header.ygg-realm-synthesis .ygg-step-realm { color: var(--ygg-realm-vanaheim) !important; }
.cl-step .ygg-realm-synthesis .ygg-step-label, .cl-step .ygg-realm-synthesis .ygg-step-realm { color: var(--ygg-realm-vanaheim) !important; }
.cl-step-header.ygg-realm-exploration .ygg-step-label, .cl-step-header.ygg-realm-exploration .ygg-step-realm { color: var(--ygg-realm-niflheim) !important; }
.cl-step .ygg-realm-exploration .ygg-step-label, .cl-step .ygg-realm-exploration .ygg-step-realm { color: var(--ygg-realm-niflheim) !important; }
.cl-step-header.ygg-realm-exploration .ygg-step-icon, .cl-step .ygg-realm-exploration .ygg-step-icon,
button.ygg-realm-exploration .ygg-step-icon, button.ygg-realm-exploration .ygg-step-label { color: var(--ygg-realm-niflheim) !important; }
.cl-step-header.ygg-realm-tools .ygg-step-label, .cl-step-header.ygg-realm-tools .ygg-step-realm { color: var(--ygg-tool) !important; }
.cl-step .ygg-realm-tools .ygg-step-label, .cl-step .ygg-realm-tools .ygg-step-realm { color: var(--ygg-tool) !important; }
.cl-step-header.ygg-realm-critical .ygg-step-label, .cl-step-header.ygg-realm-critical .ygg-step-realm { color: var(--ygg-realm-jotunheim) !important; }
.cl-step .ygg-realm-critical .ygg-step-label, .cl-step .ygg-realm-critical .ygg-step-realm { color: var(--ygg-realm-jotunheim) !important; }
.cl-step-header.ygg-realm-firstprinciples .ygg-step-label, .cl-step-header.ygg-realm-firstprinciples .ygg-step-realm { color: var(--ygg-realm-muspelheim) !important; }
.cl-step .ygg-realm-firstprinciples .ygg-step-label, .cl-step .ygg-realm-firstprinciples .ygg-step-realm { color: var(--ygg-realm-muspelheim) !important; }
.cl-step-header.ygg-realm-refinement .ygg-step-label, .cl-step-header.ygg-realm-refinement .ygg-step-realm { color: var(--ygg-realm-alfheim) !important; }
.cl-step .ygg-realm-refinement .ygg-step-label, .cl-step .ygg-realm-refinement .ygg-step-realm { color: var(--ygg-realm-alfheim) !important; }
.cl-step-header.ygg-realm-learning .ygg-step-label, .cl-step-header.ygg-realm-learning .ygg-step-realm { color: var(--ygg-realm-helheim) !important; }
.cl-step .ygg-realm-learning .ygg-step-label, .cl-step .ygg-realm-learning .ygg-step-realm { color: var(--ygg-realm-helheim) !important; }
.cl-step-header.ygg-realm-clarification .ygg-step-label, .cl-step-header.ygg-realm-clarification .ygg-step-realm { color: var(--ygg-realm-runegard) !important; }
.cl-step .ygg-realm-clarification .ygg-step-label, .cl-step .ygg-realm-clarification .ygg-step-realm { color: var(--ygg-realm-runegard) !important; }
.cl-step-header.ygg-realm-default .ygg-step-label, .cl-step-header.ygg-realm-default .ygg-step-realm { color: #ffcc00 !important; }
.cl-step .ygg-realm-default .ygg-step-label, .cl-step .ygg-realm-default .ygg-step-realm { color: #ffcc00 !important; }
.cl-step-header.ygg-realm-iteration .ygg-step-label, .cl-step-header.ygg-realm-iteration .ygg-step-realm { color: #4488ff !important; }
/* Bifrost: animated rainbow on label text via JS; bridge icon (⋒) stays white */
.cl-step-header.ygg-realm-bifrost .ygg-step-icon,
.cl-step-header.ygg-realm-bifrost .ygg-chip-icon {
    color: #ffffff !important;
}
html:not(.dark) .cl-step-header.ygg-realm-bifrost .ygg-step-icon,
html:not(.dark) .cl-step-header.ygg-realm-bifrost .ygg-chip-icon {
    color: #d1d5db !important;
}
.cl-step-header.ygg-realm-bifrost .ygg-step-label,
.cl-step-header.ygg-realm-bifrost .ygg-step-detail.ygg-bifrost-part,
.cl-step-header.ygg-realm-bifrost .ygg-bifrost-part:not(.ygg-step-icon) {
    font-weight: 600 !important;
}
.cl-step-header.ygg-realm-bifrost .ygg-step-realm,
.cl-step-header.ygg-realm-bifrost .ygg-step-detail:not(.ygg-bifrost-part) {
    font-weight: 600 !important;
}
.cl-step-header svg { color: var(--step-header-svg) !important; }
.cl-step-header, [class*="step-header"], [class*="StepHeader"] {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.cl-step-header:hover, .cl-step-header:hover span { opacity: 1 !important; visibility: visible !important; background: transparent !important; }
.cl-step-header *, [class*="step-header"] * { transition: color 0.25s ease !important; }
/* Loading */
.cl-step[data-loading="true"] .cl-step-header, .cl-step[data-loading="true"] .cl-step-header *,
.cl-step[data-state="running"] .cl-step-header, .cl-step[data-state="running"] .cl-step-header * {
    opacity: 1 !important; visibility: visible !important;
}
/* Exclude dialogs from rainbow hover */
[role="dialog"] .cl-step-header:hover, [role="dialog"] .cl-step-header:hover *,
.prose .cl-step-header:hover, .prose .cl-step-header:hover * {
    animation: none !important; color: inherit !important; text-shadow: none !important;
}

/* Override muted text in steps */
.cl-step .text-muted-foreground, .cl-step [class*="muted"] { color: var(--text-muted) !important; }

/* Step body content: dim prose like CLI log output */
.cl-step .prose p, .cl-step .markdown p {
    font-family: var(--cli-font) !important;
    font-size: 0.8125rem !important;
    color: var(--cli-dim) !important;
    line-height: 1.5 !important;
}
.cl-step .prose strong, .cl-step .markdown strong {
    color: var(--step-bold) !important;
}

/* Run stats footer — terminal panel (replaces inline code pills) */
.ygg-stats-footer-wrap {
    margin: 10px 0 4px !important;
    font-family: var(--cli-font) !important;
}
.ygg-stats-footer {
    background: var(--cli-panel-bg) !important;
    border: 1px solid var(--cli-panel-border) !important;
    border-left: 3px solid var(--cli-accent) !important;
    border-radius: 4px !important;
    padding: 10px 12px 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.ygg-stats-footer-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--cli-chip-label) !important;
}
.ygg-stats-footer-header::before {
    content: '>';
    color: var(--cli-accent) !important;
    font-weight: 700 !important;
}
.ygg-stats-footer-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.ygg-stat-chip {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    background: var(--cli-chip-bg) !important;
    border: 1px solid var(--cli-chip-border) !important;
    border-radius: 3px !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}
.ygg-stat-chip-label {
    color: var(--cli-chip-label) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.6875rem !important;
}
.ygg-stat-chip-value {
    color: var(--cli-chip-value) !important;
    font-weight: 500 !important;
}
.ygg-stat-chip.ygg-stat-cost .ygg-stat-chip-value {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
.ygg-stats-footer-tagline {
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--cli-panel-border) !important;
    font-size: 0.75rem !important;
    font-style: italic !important;
    color: var(--cli-tagline) !important;
    line-height: 1.4 !important;
}
/* Hide raw backtick stats once JS has structured them */
.ygg-stats-footer-wrap[data-ygg-stats-styled="true"] .ygg-stats-raw {
    display: none !important;
}
/* Legacy empty stats Text elements (content lost before resume fix) */
.ygg-stats-empty {
    display: none !important;
}
.cl-message .ygg-stats-footer-wrap:not([data-ygg-stats-styled="true"]) code {
    font-family: var(--cli-font) !important;
    font-size: 0.75rem !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    background: var(--cli-chip-bg) !important;
    border: 1px solid var(--cli-chip-border) !important;
    color: var(--cli-chip-value) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: CODE BLOCKS & BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

pre, .prose pre, .markdown pre { background: #1f1f1f !important; color: #e8e8e8 !important; border-radius: 8px !important; }
code { background: transparent !important; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important; }
pre *, code * { background-color: transparent !important; }
:not(pre) > code { background: var(--code-inline-bg) !important; color: var(--code-inline-color) !important; padding: 2px 6px !important; border-radius: 4px !important; }
.prose pre, .prose code, .markdown pre, .markdown code { max-width: 100% !important; width: 100% !important; }

/* Light mode: preserve code bg after DOM transparency nuke */
html:not(.dark) pre, html:not(.dark) pre:has(code) { background: #0d0d0d !important; }

/* Yggdrasil banner: transparent */
.ygg-responsive-banner, pre.ygg-responsive-banner,
div:has(> .ygg-responsive-banner), div:has(> pre.ygg-responsive-banner) {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}
.ygg-responsive-banner, pre.ygg-responsive-banner {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    line-height: 1 !important;
    white-space: pre !important;
    font-variant-ligatures: none !important;
    text-rendering: geometricPrecision !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 20px !important;
}
.ygg-responsive-banner span, pre.ygg-responsive-banner span { margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; line-height: 1 !important; }
/* Web/Tools/Images status: red when OFF (config toggled off), ON uses theme STATUS color from JS */
.ygg-responsive-banner .ygg-status-off, pre.ygg-responsive-banner .ygg-status-off { color: #ef4444 !important; font-weight: 600 !important; }
html.dark .ygg-responsive-banner, html.dark pre.ygg-responsive-banner { color: #f9fafb !important; }
html:not(.dark) .ygg-responsive-banner, html:not(.dark) pre.ygg-responsive-banner { color: #1f2937 !important; }

/* Hide copy/language buttons on banner */
div:has(> .ygg-responsive-banner) button,
div:has(code.language-yggdrasil-banner) button,
code.language-yggdrasil-banner ~ button,
.ygg-responsive-banner + span, pre.ygg-responsive-banner + span,
div:has(> .ygg-responsive-banner) > span {
    display: none !important;
}
@media (max-width: 520px) {
    .ygg-responsive-banner, pre.ygg-responsive-banner { padding: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-message table, .cl-step table, .prose table, .markdown table,
table { border-collapse: collapse !important; border: 1px solid var(--table-border) !important; width: 100% !important; margin: 1em 0 !important; background: transparent !important; }
.cl-message th, .cl-step th, .prose th, .markdown th,
th { border: 1px solid var(--table-border) !important; padding: 8px 12px !important; background: var(--table-th-bg) !important; font-weight: 600 !important; color: var(--table-th-color) !important; }
.cl-message td, .cl-step td, .prose td, .markdown td,
td { border: 1px solid var(--table-border) !important; padding: 8px 12px !important; color: var(--table-td-color) !important; background: transparent !important; }
.cl-message tr, .cl-step tr, .prose tr, .markdown tr,
tr { background: transparent !important; }
.cl-message tr:nth-child(even), .cl-step tr:nth-child(even), .prose tr:nth-child(even), .markdown tr:nth-child(even),
tr:nth-child(even) { background: var(--table-stripe) !important; }

/* Tables in realm/vault panels: same style as MUNINN'S MEMORY VAULT / THE TEN REALMS (dashed border, monospace) */
.cl-message:has(.ygg-responsive-banner) table,
.cl-message:has([data-rainbow-applied="true"]) table,
.cl-message:has(pre code[class*="yggdrasil-banner"]) table {
    border-collapse: collapse !important;
    border: 2px dashed rgba(255, 255, 255, 0.5) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em auto !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    font-family: "Courier New", Consolas, monospace !important;
    box-sizing: border-box !important;
}
.cl-message:has(.ygg-responsive-banner) th,
.cl-message:has([data-rainbow-applied="true"]) th,
.cl-message:has(pre code[class*="yggdrasil-banner"]) th {
    border: 1px dashed rgba(255, 255, 255, 0.4) !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: inherit !important;
}
.cl-message:has(.ygg-responsive-banner) td,
.cl-message:has([data-rainbow-applied="true"]) td,
.cl-message:has(pre code[class*="yggdrasil-banner"]) td {
    border: 1px dashed rgba(255, 255, 255, 0.35) !important;
    padding: 12px 16px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
    font-family: inherit !important;
}
.cl-message:has(.ygg-responsive-banner) tr:nth-child(even) td,
.cl-message:has([data-rainbow-applied="true"]) tr:nth-child(even) td,
.cl-message:has(pre code[class*="yggdrasil-banner"]) tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04) !important;
}
/* Light mode: realm-style tables use dark frame to match banner */
html:not(.dark) .cl-message:has(.ygg-responsive-banner) table,
html:not(.dark) .cl-message:has([data-rainbow-applied="true"]) table,
html:not(.dark) .cl-message:has(pre code[class*="yggdrasil-banner"]) table {
    border: 2px dashed rgba(13, 115, 119, 0.6) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) .cl-message:has(.ygg-responsive-banner) th,
html:not(.dark) .cl-message:has([data-rainbow-applied="true"]) th,
html:not(.dark) .cl-message:has(pre code[class*="yggdrasil-banner"]) th {
    border: 1px dashed rgba(13, 115, 119, 0.4) !important;
    background: rgba(13, 115, 119, 0.08) !important;
    color: #0f172a !important;
}
html:not(.dark) .cl-message:has(.ygg-responsive-banner) td,
html:not(.dark) .cl-message:has([data-rainbow-applied="true"]) td,
html:not(.dark) .cl-message:has(pre code[class*="yggdrasil-banner"]) td {
    border: 1px dashed rgba(13, 115, 119, 0.3) !important;
    color: #1e293b !important;
}
html:not(.dark) .cl-message:has(.ygg-responsive-banner) tr:nth-child(even) td,
html:not(.dark) .cl-message:has([data-rainbow-applied="true"]) tr:nth-child(even) td,
html:not(.dark) .cl-message:has(pre code[class*="yggdrasil-banner"]) tr:nth-child(even) td {
    background: rgba(13, 115, 119, 0.03) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: DIALOGS & SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */

body:has([role="dialog"])::after {
    content: ""; position: fixed; inset: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); z-index: 99990; pointer-events: none;
}
[role="dialog"], [class*="modal"], [class*="Modal"] { z-index: 99999 !important; }
.MuiPopover-root, .MuiMenu-root, [data-radix-popper-content-wrapper] { z-index: 100000 !important; }

[role="dialog"] {
    background: var(--dialog-bg) !important;
    overflow-y: auto !important;
}
/* Full-viewport dialog ONLY for settings panel in light mode */
html:not(.dark) [role="dialog"]:has(label[for*="max_iterations"]) {
    position: fixed !important; top: 0; left: 0;
    width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;
    transform: none !important; border-radius: 0 !important; box-shadow: none !important;
    isolation: isolate !important;
}
html:not(.dark) [role="dialog"]:has(label[for*="max_iterations"])::before {
    content: ""; position: absolute; inset: 0; background: var(--dialog-bg); z-index: -1;
}
/* Non-settings dialogs (confirm, alert, etc.): centered with opaque bg */
html:not(.dark) [role="dialog"]:not(:has(label[for*="max_iterations"])) {
    background: var(--dialog-bg) !important;
    isolation: isolate !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}
html:not(.dark) [role="dialog"]:not(:has(label[for*="max_iterations"]))::before {
    content: ""; position: absolute; inset: 0; background: var(--dialog-bg); z-index: -1;
    border-radius: inherit;
}
/* Force dialog children solid bg in light mode */
html:not(.dark) [role="dialog"] > *, html:not(.dark) [role="dialog"] > * > *,
html:not(.dark) [role="dialog"] > * > * > *, html:not(.dark) [role="dialog"] > * > * > * > * {
    background: var(--dialog-bg) !important;
}
html:not(.dark) [role="dialog"] button, html:not(.dark) [role="dialog"] svg,
html:not(.dark) [role="dialog"] [role="switch"] { background: transparent !important; }

/* Settings panel */
[role="dialog"]:has(label[for*="max_iterations"]) {
    max-height: 85vh !important; width: 700px !important; max-width: 90vw !important;
    min-width: min(600px, 95vw) !important;
    position: fixed !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important; overflow-y: auto !important;
}
html:not(.dark) [role="dialog"]:has(label[for*="max_iterations"]) {
    width: 700px !important; height: auto !important; max-height: 85vh !important;
    border-radius: 16px !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2) !important;
}
@media (max-width: 768px) {
    [role="dialog"]:has(label[for*="max_iterations"]) {
        min-width: 95vw !important; width: 95vw !important; max-width: 98vw !important; max-height: 92vh !important;
    }
}
[role="dialog"]:has(label[for*="max_iterations"]) form,
[role="dialog"]:has(label[for*="max_iterations"]) > div > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px 24px !important; width: 100% !important;
}
[role="dialog"]:has(label[for*="max_iterations"]) .MuiFormControl-root,
[role="dialog"]:has(label[for*="max_iterations"]) [class*="formControl"] {
    margin-bottom: 4px !important; padding: 12px 16px !important;
    display: flex !important; justify-content: space-between !important;
    background: var(--dialog-form-bg) !important; border-radius: 8px !important;
    border: 1px solid var(--dialog-form-border) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    width: 100% !important; box-sizing: border-box !important;
}
/* Section headers in settings */
[role="dialog"]:has(label[for*="max_iterations"]) *:has(> label:is(
    [for*="max_iterations"],[for*="run_jormungandur"],
    [for*="run_muninn"]:not([for*="retrospective"]),
    [for*="enable_tools"],[for*="private_mode"],[for*="expand_reasoning"]
)) {
    grid-column: 1 / -1 !important;
    margin-top: 24px !important; padding-top: 16px !important;
    border-top: 1px solid var(--dialog-section-border) !important;
    background: transparent !important;
}
[role="dialog"]:has(label[for*="max_iterations"]) *:has(> label[for*="max_iterations"]) {
    margin-top: 0 !important; padding-top: 0 !important; border-top: none !important;
}
/* Slider */
[role="dialog"]:has(label[for*="max_iterations"]) *:has(> .MuiSlider-root),
[role="dialog"]:has(label[for*="max_iterations"]) *:has(.MuiSlider-root) {
    grid-column: 1 / -1 !important; display: flex !important; flex-direction: column !important;
    min-height: 80px !important; padding: 16px 20px !important;
}
[role="dialog"]:has(label[for*="max_iterations"]) .MuiSlider-root {
    margin-top: 24px !important; margin-bottom: 24px !important; width: 95% !important; align-self: center !important;
}
/* Light mode slider */
html:not(.dark) [role="dialog"] .MuiSlider-track { background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important; border: none !important; height: 6px !important; }
html:not(.dark) [role="dialog"] .MuiSlider-rail { background: #d1d5db !important; opacity: 1 !important; height: 6px !important; }
html:not(.dark) [role="dialog"] .MuiSlider-thumb { background: #3b82f6 !important; border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; width: 18px !important; height: 18px !important; }
/* Dialog title */
[role="dialog"] h2, [role="dialog"] [class*="title"] { font-size: 16px !important; font-weight: 600 !important; margin-bottom: 20px !important; }
/* Dialog text colors - ensure visibility in light mode */
html:not(.dark) [role="dialog"] h2,
html:not(.dark) [role="dialog"] [class*="title"],
html:not(.dark) [role="dialog"] [class*="description"],
html:not(.dark) [role="dialog"] p,
html:not(.dark) [role="dialog"] span,
html:not(.dark) [role="dialog"] label {
    color: #111827 !important;
}
html:not(.dark) [role="dialog"] [class*="description"],
html:not(.dark) [role="dialog"] [class*="muted"] {
    color: #4b5563 !important;
}
/* Dialog buttons: ensure readable in light mode */
html:not(.dark) [role="dialog"] button {
    color: #374151 !important;
}
html:not(.dark) [role="dialog"] button[class*="destructive"],
html:not(.dark) [role="dialog"] button[class*="danger"],
html:not(.dark) [role="dialog"] button[class*="delete" i] {
    color: #dc2626 !important;
}
html:not(.dark) [role="dialog"] button[class*="primary"],
html:not(.dark) [role="dialog"] button[class*="default"]:last-child {
    color: #374151 !important;
}
/* Button row */
[role="dialog"] [class*="actions"], [role="dialog"] [class*="footer"] {
    margin-top: 24px !important; padding-top: 16px !important; border-top: 1px solid var(--dialog-section-border) !important;
}
/* Select dropdowns */
[role="dialog"]:has(label[for*="max_iterations"]) *:has(> .MuiSelect-root),
[role="dialog"]:has(label[for*="max_iterations"]) *:has(select) { grid-column: 1 / -1 !important; }

/* Hide mode icons when dialog is open */
body:has([role="dialog"]) .loki-input-icons { display: none !important; }

/* Toggle switch */
[role="switch"][aria-checked="true"] { background-color: #22c55e !important; }
[role="switch"][aria-checked="false"] { background-color: var(--switch-off) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: ACTION BUTTONS & WELCOME BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="step"]:has([class*="action"]) [class*="actions"],
[class*="message"]:has(button[class*="action"]) > div:has(button),
.cl-step [class*="action-container"],
.cl-step-actions,
[class*="ask"] [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

[class*="step"]:has([name="select_option"]) [class*="actions"],
[class*="step"]:has([name="custom_answer"]) [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 !important;
}

[class*="step"] button[class*="action"],
[class*="ask"] button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Action buttons (realm selectors, etc.) - improved readability */
.cl-actions button,
[class*="actions"] button,
button[class*="action"] {
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}

/* Welcome nav [REALMS] [ALLIES] [MEMORY]: text-only, no glass pill or border */
html.dark .cl-message[data-author="Welcome Banner"] button,
html.dark [data-author="Welcome Banner"] button,
html.dark button[name="explore_realms"],
html.dark button[data-name="explore_realms"],
html.dark button[name="show_advanced"],
html.dark button[data-name="show_advanced"],
html.dark button[name="my_data"],
html.dark button[data-name="my_data"],
html.dark button.ygg-welcome-nav,
html:not(.dark) .cl-message[data-author="Welcome Banner"] button,
html:not(.dark) [data-author="Welcome Banner"] button,
html:not(.dark) button[name="explore_realms"],
html:not(.dark) button[data-name="explore_realms"],
html:not(.dark) button[name="show_advanced"],
html:not(.dark) button[data-name="show_advanced"],
html:not(.dark) button[name="my_data"],
html:not(.dark) button[data-name="my_data"],
html:not(.dark) button.ygg-welcome-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.dark .cl-message[data-author="Welcome Banner"] button,
html.dark [data-author="Welcome Banner"] button,
html.dark button[name="explore_realms"],
html.dark button[name="show_advanced"],
html.dark button[name="my_data"],
html.dark button.ygg-welcome-nav {
    color: rgba(255, 255, 255, 0.98) !important;
}

html:not(.dark) .cl-message[data-author="Welcome Banner"] button,
html:not(.dark) [data-author="Welcome Banner"] button,
html:not(.dark) button[name="explore_realms"],
html:not(.dark) button[name="show_advanced"],
html:not(.dark) button[name="my_data"],
html:not(.dark) button.ygg-welcome-nav {
    color: rgba(0, 0, 0, 0.95) !important;
}

html.dark .cl-message[data-author="Welcome Banner"] button:hover,
html.dark [data-author="Welcome Banner"] button:hover,
html.dark button[name="explore_realms"]:hover,
html.dark button[name="show_advanced"]:hover,
html.dark button[name="my_data"]:hover,
html.dark button.ygg-welcome-nav:hover {
    background: transparent !important;
    border: none !important;
}

html:not(.dark) .cl-message[data-author="Welcome Banner"] button:hover,
html:not(.dark) [data-author="Welcome Banner"] button:hover,
html:not(.dark) button[name="explore_realms"]:hover,
html:not(.dark) button[name="show_advanced"]:hover,
html:not(.dark) button[name="my_data"]:hover,
html:not(.dark) button.ygg-welcome-nav:hover {
    background: transparent !important;
    border: none !important;
}

/* Realm buttons specifically - spacing only (background via rules above) */
.cl-message[data-author="Welcome Banner"] button,
[data-author="Welcome Banner"] button,
button[name="explore_realms"],
button[name="show_advanced"],
button[name="my_data"],
button.ygg-welcome-nav {
    margin: 4px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 8px 14px !important;
}

/* All buttons in actions - consistent bold weight (welcome nav + entity chips excluded) */
html.dark .cl-actions button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]),
html.dark [class*="actions"] button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]),
html.dark .cl-step button,
html.dark .cl-message button:not([type="submit"]):not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]) {
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    color: #f3f4f6 !important;  /* Bright white-gray for readability */
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(6px) !important;
}

/* Override muted text classes on buttons for better readability in dark mode */
html.dark button.text-muted-foreground,
html.dark button[class*="muted"],
html.dark .cl-step button,
html.dark .cl-message button:not([type="submit"]) {
    color: #f3f4f6 !important;
}

html:not(.dark) .cl-actions button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]),
html:not(.dark) [class*="actions"] button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]),
html:not(.dark) .cl-step button,
html:not(.dark) .cl-message button:not([type="submit"]):not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]) {
    font-weight: 600 !important;
    text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.8) !important;
    color: #1f2937 !important;  /* Dark gray for better readability */
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(6px) !important;
}

/* Hover states for better visibility */
html.dark .cl-message[data-author="Welcome Banner"] button:hover,
html.dark [data-author="Welcome Banner"] button:hover,
html.dark .cl-actions button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]):hover,
html.dark [class*="actions"] button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]):hover {
    background: rgba(0, 0, 0, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

html:not(.dark) .cl-message[data-author="Welcome Banner"] button:hover,
html:not(.dark) [data-author="Welcome Banner"] button:hover,
html:not(.dark) .cl-actions button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]):hover,
html:not(.dark) [class*="actions"] button:not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]):hover,
html:not(.dark) .cl-step button:hover,
html:not(.dark) .cl-message button:not([type="submit"]):not(.ygg-welcome-nav):not(.ygg-entity-chip):not([name="explore_realms"]):not([data-name="explore_realms"]):not([name="show_advanced"]):not([data-name="show_advanced"]):not([name="my_data"]):not([data-name="my_data"]):hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #111827 !important;  /* Even darker on hover */
}

/* Override muted text classes on buttons for better readability in light mode */
html:not(.dark) button.text-muted-foreground,
html:not(.dark) button[class*="muted"],
html:not(.dark) .cl-step button,
html:not(.dark) .cl-message button:not([type="submit"]) {
    color: #1f2937 !important;
}

/* Welcome banner centered - high specificity to override action defaults */
.cl-message[data-author="Welcome Banner"], [data-author="Welcome Banner"],
.cl-message[data-author="Ten Realms"], [data-author="Ten Realms"],
.cl-message[data-author="Allies"], [data-author="Allies"],
.cl-message[data-banner-centered="true"] { text-align: center !important; width: 100% !important; }
.cl-message-list > *:has([data-author="Welcome Banner"]),
.cl-message-list > *:has([data-author="Ten Realms"]),
.cl-message-list > *:has([data-author="Allies"]),
.cl-message-list > *:has(.ygg-responsive-banner),
.cl-message-list > *:has(code.language-yggdrasil-banner),
.cl-message-list > *:has([data-banner-centered="true"]),
.cl-message-list > *:has(button[name="explore_realms"]):has(button[name="show_advanced"]),
.cl-message-list > *:has(button[name="realm_click"]),
.cl-message-list > *:has(button[name="realms_placeholder"]),
.cl-message-list > *:has(button[name="advanced_placeholder"]),
.cl-message-list > *:has(button[name="advanced_click"]) {
    display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important;
}
/* Center banner/table block inside message (Welcome Banner, ALLIES & DIAGNOSTICS, Ten Realms, etc.) */
.cl-message-list > *:has([data-author="Welcome Banner"]) .cl-message-content,
.cl-message[data-author="Welcome Banner"] .cl-message-content,
.cl-message-list > *:has(.ygg-responsive-banner) .cl-message-content,
.cl-message:has(.ygg-responsive-banner) .cl-message-content,
.cl-message-list > *:has([data-author="Ten Realms"]) .cl-message-content,
.cl-message-list > *:has([data-author="Allies"]) .cl-message-content,
.cl-message-list > *:has(button[name="realms_placeholder"]) .cl-message-content,
.cl-message-list > *:has(button[name="advanced_placeholder"]) .cl-message-content,
.cl-message-list > *:has(button[name="advanced_click"]) .cl-message-content,
.cl-message-list > *:has(code.language-yggdrasil-banner) .cl-message-content,
.cl-message[data-author="Ten Realms"] .cl-message-content,
.cl-message[data-author="Allies"] .cl-message-content,
.cl-message:has(button[name="realms_placeholder"]) .cl-message-content,
.cl-message:has(button[name="advanced_placeholder"]) .cl-message-content,
.cl-message:has(button[name="advanced_click"]) .cl-message-content,
.cl-message:has(code.language-yggdrasil-banner) .cl-message-content {
    display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important;
}
.cl-message:has(code.language-yggdrasil-banner) pre:has(code.language-yggdrasil-banner),
.cl-message:has(.ygg-responsive-banner) pre.ygg-responsive-banner {
    margin-left: auto !important; margin-right: auto !important;
}
/* Ten Realms / banner messages: make message a flex column so actions row centers */
.cl-message-list > *:has([data-author="Ten Realms"]) .cl-message,
.cl-message-list > *:has([data-author="Allies"]) .cl-message,
.cl-message-list > *:has(button[name="realm_click"]) .cl-message,
.cl-message-list > *:has(button[name="realms_placeholder"]) .cl-message,
.cl-message-list > *:has(button[name="advanced_placeholder"]) .cl-message,
.cl-message-list > *:has(button[name="advanced_click"]) .cl-message,
.cl-message-list > *:has(code.language-yggdrasil-banner) .cl-message,
.cl-message[data-author="Ten Realms"],
.cl-message[data-author="Allies"],
.cl-message:has(button[name="realm_click"]),
.cl-message:has(button[name="realms_placeholder"]),
.cl-message:has(button[name="advanced_placeholder"]),
.cl-message:has(button[name="advanced_click"]),
.cl-message:has(code.language-yggdrasil-banner) {
    display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important;
}
.cl-message[data-author="Welcome Banner"] .cl-actions, [data-author="Welcome Banner"] .cl-actions,
.cl-message[data-author="Ten Realms"] .cl-actions, [data-author="Ten Realms"] .cl-actions,
.cl-message[data-author="Allies"] .cl-actions, [data-author="Allies"] .cl-actions,
.cl-message[data-banner-centered="true"] .cl-actions,
.cl-message-list > *:has([data-author="Welcome Banner"]) .cl-actions,
.cl-message-list > *:has([data-author="Ten Realms"]) .cl-actions,
.cl-message-list > *:has([data-author="Allies"]) .cl-actions,
.cl-message-list > *:has(.ygg-responsive-banner) .cl-actions,
.cl-message-list > *:has(.ygg-responsive-banner) [class*="actions"],
.cl-message-list > *:has(code.language-yggdrasil-banner) .cl-actions,
.cl-message-list > *:has(code.language-yggdrasil-banner) [class*="actions"],
.cl-message-list > *:has(button[name="realm_click"]) .cl-actions,
.cl-message-list > *:has(button[name="realm_click"]) [class*="actions"] {
    justify-content: center !important; align-self: center !important; width: 100% !important; display: flex !important;
    max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;
}
.cl-message[data-author="Welcome Banner"] button, [data-author="Welcome Banner"] button {
    display: inline-flex !important; visibility: visible !important; opacity: 1 !important;
}
/* Action containers - default left-aligned (entity panels override below) */
.cl-actions, [class*="actions"]:not([role="dialog"] [class*="actions"]) {
    justify-content: flex-start !important; align-items: center !important; width: auto !important;
}
.cl-message:not(:has(.ygg-responsive-banner)):not(:has(code.language-yggdrasil-banner)):not(:has(.ygg-entity-panel-actions)) .cl-actions {
    display: inline-flex !important; gap: 8px !important; width: auto !important; max-width: max-content !important;
}
.cl-message[data-author="user"] .cl-actions { align-self: flex-end !important; }
.cl-message[data-author="assistant"]:not(:has(.ygg-responsive-banner)):not(:has(code.language-yggdrasil-banner)):not(:has(.ygg-entity-panel-actions)) .cl-actions {
    align-self: flex-start !important;
}
/* Ten Realms / Allies: full-width centered flex wrap (beats assistant left-align + max-content) */
.cl-message:has(.ygg-responsive-banner) .cl-actions,
.cl-message:has(.ygg-responsive-banner) [class*="actions"],
.cl-message:has(code.language-yggdrasil-banner) .cl-actions,
.cl-message:has(code.language-yggdrasil-banner) [class*="actions"],
.ygg-entity-panel-actions,
.cl-message-list > *:has(.ygg-responsive-banner) .cl-actions,
.cl-message-list > *:has(.ygg-responsive-banner) [class*="actions"],
.cl-message-list > *:has(code.language-yggdrasil-banner) .cl-actions,
.cl-message-list > *:has(code.language-yggdrasil-banner) [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important;
}
.cl-message[data-author="assistant"]:has(.ygg-responsive-banner) .cl-actions,
.cl-message[data-author="assistant"]:has(code.language-yggdrasil-banner) .cl-actions,
.cl-message[data-author="assistant"]:has(.ygg-entity-panel-actions) {
    align-self: center !important;
}
/* Ten Realms / Allies entity panels: override assistant left-align so partial rows center */
.cl-message[data-author="assistant"]:has(button[name="realm_click"]) .cl-actions,
.cl-message[data-author="assistant"]:has(button[name="advanced_click"]) .cl-actions,
.cl-message[data-author="assistant"]:has(button[name="realms_placeholder"]) .cl-actions,
.cl-message[data-author="assistant"]:has(button[name="advanced_placeholder"]) .cl-actions {
    align-self: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
}
/* Realm buttons (Ten Realms panel): center the actions row */
.cl-message:has(button[name="realm_click"]) .cl-actions,
.cl-message-list > *:has(button[name="realm_click"]) .cl-actions {
    align-self: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Realm/Tool/Advanced actions: centered */
.cl-message .cl-actions:has(button[name="explore_realms"]),
.cl-message .cl-actions:has(button[name="show_advanced"]),
.cl-message .cl-actions:has(button[name="show_tools"]),
.cl-message .cl-actions:has(button[name="advanced_click"]),
.cl-message .cl-actions:has(button[name="advanced_placeholder"]),
.cl-message .cl-actions:has(button[name="realms_placeholder"]),
.cl-message .cl-actions:has(button[name*="realm"]),
.cl-message .cl-actions:has(button[name*="tool"]),
.cl-message .cl-actions:has(button[name*="category"]) {
    justify-content: center !important; align-self: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important;
}
/* Welcome Banner actions + Ten Realms buttons: centered - override above */
.cl-message[data-author="Welcome Banner"] .cl-actions,
[data-author="Welcome Banner"] .cl-actions,
.cl-message[data-author="Ten Realms"] .cl-actions,
[data-author="Ten Realms"] .cl-actions,
.cl-message[data-author="Allies"] .cl-actions,
[data-author="Allies"] .cl-actions,
.cl-message[data-banner-centered="true"] .cl-actions,
.cl-message-list > *:has([data-author="Welcome Banner"]) .cl-actions,
.cl-message-list > *:has([data-author="Ten Realms"]) .cl-actions,
.cl-message-list > *:has([data-author="Allies"]) .cl-actions,
.cl-message-list > *:has(.ygg-responsive-banner) .cl-actions,
.cl-message-list > *:has(.ygg-responsive-banner) [class*="actions"],
.cl-message-list > *:has(code.language-yggdrasil-banner) .cl-actions,
.cl-message-list > *:has(code.language-yggdrasil-banner) [class*="actions"],
.cl-message-list > *:has(button[name="realm_click"]) .cl-actions,
.cl-message-list > *:has(button[name="realm_click"]) [class*="actions"],
.cl-message-list > *:has(button[name="realms_placeholder"]) .cl-actions,
.cl-message-list > *:has(button[name="advanced_placeholder"]) .cl-actions,
.cl-message-list > *:has(button[name="advanced_click"]) .cl-actions,
.cl-message:has(button[name="realm_click"]) .cl-actions,
.cl-message:has(button[name="realms_placeholder"]) .cl-actions,
.cl-message:has(button[name="advanced_placeholder"]) .cl-actions,
.cl-message:has(button[name="advanced_click"]) .cl-actions,
.cl-message:has(button[name="explore_realms"]):has(button[name="show_advanced"]) .cl-actions,
.cl-message:has(button[name="my_data"]) .cl-actions {
    justify-content: center !important; align-self: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important;
}
div:has(> button[data-rainbow-applied]) { justify-content: center !important; width: 100% !important; margin: 0 auto !important; }

/* Runegard clarification buttons */
[class*="step"]:has([name="select_option"]),
[class*="step"]:has([name="skip_question"]),
[class*="step"]:has([name="custom_answer"]),
.cl-step:has(button[name="select_option"]) {
    max-height: none !important;
    overflow: visible !important;
}

[class*="step"]:has([name="select_option"]) [class*="scroll"],
[class*="step"]:has([name="select_option"]) [class*="overflow"],
[class*="step"]:has([name="custom_answer"]) [class*="scroll"],
.cl-step:has([name="select_option"]) > div,
.cl-step:has([name="custom_answer"]) > div {
    max-height: none !important;
    overflow: visible !important;
}

[class*="step"]:has([name="select_option"]) > div,
[class*="step"]:has([name="custom_answer"]) > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
}

button[name="select_option"],
button[name="custom_answer"],
button[name="skip_question"],
button[name="not_sure"] {
    flex-shrink: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* Dark mode hover - no transform to avoid layout shift */
html.dark button[name="select_option"]:hover,
html.dark button[name="custom_answer"]:hover,
html.dark button[name="skip_question"]:hover,
html.dark button[name="not_sure"]:hover,
html.dark .cl-step button[name="select_option"]:hover,
html.dark .cl-step button[name="custom_answer"]:hover,
html.dark .cl-step button[name="skip_question"]:hover,
html.dark .cl-step button[name="not_sure"]:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid #4ade80 !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5), 0 0 24px rgba(74, 222, 128, 0.25) !important;
    transform: none !important;
    animation: none !important;
}

/* Light mode hover - no transform to avoid layout shift */
html:not(.dark) button[name="select_option"]:hover,
html:not(.dark) button[name="custom_answer"]:hover,
html:not(.dark) button[name="skip_question"]:hover,
html:not(.dark) button[name="not_sure"]:hover,
html:not(.dark) .cl-step button[name="select_option"]:hover,
html:not(.dark) .cl-step button[name="custom_answer"]:hover,
html:not(.dark) .cl-step button[name="skip_question"]:hover,
html:not(.dark) .cl-step button[name="not_sure"]:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 2px solid #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), 0 0 24px rgba(34, 197, 94, 0.2) !important;
    transform: none !important;
    animation: none !important;
}
/* Runegard Q&A control buttons - glassmorphism for readable icons + inline layout
   Target by button name inside .cl-step or .cl-message (Chainlit may not use "ask" in class) */
.cl-step button[name="select_all"],
.cl-step button[name="done_multiselect"],
.cl-step button[name="custom_answer"],
.cl-step button[name="skip_question"],
.cl-step button[name="not_sure"],
.cl-step button[name="toggle_option"],
.cl-step button[name="select_option"],
.cl-message button[name="select_all"],
.cl-message button[name="done_multiselect"],
.cl-message button[name="custom_answer"],
.cl-message button[name="skip_question"],
.cl-message button[name="not_sure"],
.cl-message button[name="toggle_option"],
.cl-message button[name="select_option"],
[class*="ask" i] button[name="select_all"],
[class*="ask" i] button[name="done_multiselect"],
[class*="ask" i] button[name="custom_answer"],
[class*="ask" i] button[name="skip_question"],
[class*="ask" i] button[name="not_sure"],
[class*="ask" i] button[name="toggle_option"],
[class*="ask" i] button[name="select_option"] {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 6px 12px !important;
    /* Fallback base glass — overridden by html.dark/html:not(.dark) blocks below */
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}
.cl-step button[name="select_all"] svg,
.cl-step button[name="done_multiselect"] svg,
.cl-step button[name="custom_answer"] svg,
.cl-step button[name="skip_question"] svg,
.cl-step button[name="not_sure"] svg,
.cl-step button[name="toggle_option"] svg,
.cl-step button[name="select_option"] svg,
.cl-message button[name="select_all"] svg,
.cl-message button[name="done_multiselect"] svg,
.cl-message button[name="custom_answer"] svg,
.cl-message button[name="skip_question"] svg,
.cl-message button[name="not_sure"] svg,
.cl-message button[name="toggle_option"] svg,
.cl-message button[name="select_option"] svg,
[class*="ask" i] button[name="select_all"] svg,
[class*="ask" i] button[name="done_multiselect"] svg,
[class*="ask" i] button[name="custom_answer"] svg,
[class*="ask" i] button[name="skip_question"] svg,
[class*="ask" i] button[name="not_sure"] svg,
[class*="ask" i] button[name="toggle_option"] svg,
[class*="ask" i] button[name="select_option"] svg,
.cl-step button[name="select_all"] svg *,
.cl-step button[name="done_multiselect"] svg *,
.cl-step button[name="custom_answer"] svg *,
.cl-step button[name="skip_question"] svg *,
.cl-step button[name="not_sure"] svg *,
.cl-step button[name="toggle_option"] svg *,
.cl-step button[name="select_option"] svg *,
.cl-message button[name="select_all"] svg *,
.cl-message button[name="done_multiselect"] svg *,
.cl-message button[name="custom_answer"] svg *,
.cl-message button[name="skip_question"] svg *,
.cl-message button[name="not_sure"] svg *,
.cl-message button[name="toggle_option"] svg *,
.cl-message button[name="select_option"] svg *,
[class*="ask" i] button[name="select_all"] svg *,
[class*="ask" i] button[name="done_multiselect"] svg *,
[class*="ask" i] button[name="custom_answer"] svg *,
[class*="ask" i] button[name="skip_question"] svg *,
[class*="ask" i] button[name="not_sure"] svg *,
[class*="ask" i] button[name="toggle_option"] svg *,
[class*="ask" i] button[name="select_option"] svg * {
    color: inherit !important;
    fill: currentColor !important;
}
/* Q&A glass: HIGH-SPECIFICITY dark mode (specificity 0-3-2, beats blanket 0-2-2 rule).
   Uses "brighter than background" rgba-white so the frosted look is visible
   even though the parent .cl-message already has backdrop-filter (nested stacking context). */
html.dark .cl-step button[name="select_all"],
html.dark .cl-step button[name="done_multiselect"],
html.dark .cl-step button[name="custom_answer"],
html.dark .cl-step button[name="skip_question"],
html.dark .cl-step button[name="not_sure"],
html.dark .cl-step button[name="toggle_option"],
html.dark .cl-step button[name="select_option"],
html.dark .cl-message button[name="select_all"],
html.dark .cl-message button[name="done_multiselect"],
html.dark .cl-message button[name="custom_answer"],
html.dark .cl-message button[name="skip_question"],
html.dark .cl-message button[name="not_sure"],
html.dark .cl-message button[name="toggle_option"],
html.dark .cl-message button[name="select_option"],
html.dark [class*="ask" i] button[name="select_all"],
html.dark [class*="ask" i] button[name="done_multiselect"],
html.dark [class*="ask" i] button[name="custom_answer"],
html.dark [class*="ask" i] button[name="skip_question"],
html.dark [class*="ask" i] button[name="not_sure"],
html.dark [class*="ask" i] button[name="toggle_option"],
html.dark [class*="ask" i] button[name="select_option"] {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}
/* Q&A glass: HIGH-SPECIFICITY light mode */
html:not(.dark) .cl-step button[name="select_all"],
html:not(.dark) .cl-step button[name="done_multiselect"],
html:not(.dark) .cl-step button[name="custom_answer"],
html:not(.dark) .cl-step button[name="skip_question"],
html:not(.dark) .cl-step button[name="not_sure"],
html:not(.dark) .cl-step button[name="toggle_option"],
html:not(.dark) .cl-step button[name="select_option"],
html:not(.dark) .cl-message button[name="select_all"],
html:not(.dark) .cl-message button[name="done_multiselect"],
html:not(.dark) .cl-message button[name="custom_answer"],
html:not(.dark) .cl-message button[name="skip_question"],
html:not(.dark) .cl-message button[name="not_sure"],
html:not(.dark) .cl-message button[name="toggle_option"],
html:not(.dark) .cl-message button[name="select_option"],
html:not(.dark) [class*="ask" i] button[name="select_all"],
html:not(.dark) [class*="ask" i] button[name="done_multiselect"],
html:not(.dark) [class*="ask" i] button[name="custom_answer"],
html:not(.dark) [class*="ask" i] button[name="skip_question"],
html:not(.dark) [class*="ask" i] button[name="not_sure"],
html:not(.dark) [class*="ask" i] button[name="toggle_option"],
html:not(.dark) [class*="ask" i] button[name="select_option"] {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* Q&A buttons: no layout change on focus/active (stable click) */
.cl-step button[name="select_all"]:focus,
.cl-step button[name="select_all"]:active,
.cl-step button[name="done_multiselect"]:focus,
.cl-step button[name="done_multiselect"]:active,
.cl-step button[name="custom_answer"]:focus,
.cl-step button[name="custom_answer"]:active,
.cl-step button[name="skip_question"]:focus,
.cl-step button[name="skip_question"]:active,
.cl-step button[name="not_sure"]:focus,
.cl-step button[name="not_sure"]:active,
.cl-step button[name="toggle_option"]:focus,
.cl-step button[name="toggle_option"]:active,
.cl-step button[name="select_option"]:focus,
.cl-step button[name="select_option"]:active,
.cl-step button[name^="opt_"]:focus,
.cl-step button[name^="opt_"]:active,
.cl-message button[name="select_all"]:focus,
.cl-message button[name="select_all"]:active,
.cl-message button[name="done_multiselect"]:focus,
.cl-message button[name="done_multiselect"]:active,
.cl-message button[name="custom_answer"]:focus,
.cl-message button[name="custom_answer"]:active,
.cl-message button[name="skip_question"]:focus,
.cl-message button[name="skip_question"]:active,
.cl-message button[name="not_sure"]:focus,
.cl-message button[name="not_sure"]:active,
.cl-message button[name="toggle_option"]:focus,
.cl-message button[name="toggle_option"]:active,
.cl-message button[name="select_option"]:focus,
.cl-message button[name="select_option"]:active,
.cl-message button[name^="opt_"]:focus,
.cl-message button[name^="opt_"]:active,
[class*="ask" i] button[name="select_all"]:focus,
[class*="ask" i] button[name="select_all"]:active,
[class*="ask" i] button[name="done_multiselect"]:focus,
[class*="ask" i] button[name="done_multiselect"]:active,
[class*="ask" i] button[name="custom_answer"]:focus,
[class*="ask" i] button[name="custom_answer"]:active,
[class*="ask" i] button[name="skip_question"]:focus,
[class*="ask" i] button[name="skip_question"]:active,
[class*="ask" i] button[name="not_sure"]:focus,
[class*="ask" i] button[name="not_sure"]:active,
[class*="ask" i] button[name="toggle_option"]:focus,
[class*="ask" i] button[name="toggle_option"]:active,
[class*="ask" i] button[name="select_option"]:focus,
[class*="ask" i] button[name="select_option"]:active,
[class*="ask" i] button[name^="opt_"]:focus,
[class*="ask" i] button[name^="opt_"]:active,
button[name="select_option"]:focus,
button[name="select_option"]:active,
button[name="custom_answer"]:focus,
button[name="custom_answer"]:active,
button[name="skip_question"]:focus,
button[name="skip_question"]:active,
button[name="not_sure"]:focus,
button[name="not_sure"]:active {
    transform: none !important;
    outline-offset: 0 !important;
}

/* Multi-select option buttons (unselected state) - glass for readability */
.cl-step button[name^="opt_"]:not([name^="opt_selected_"]),
.cl-message button[name^="opt_"]:not([name^="opt_selected_"]),
[class*="ask" i] button[name^="opt_"]:not([name^="opt_selected_"]) {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 6px 12px !important;
    transition: all 0.15s ease !important;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
}
/* opt_ glass: HIGH-SPECIFICITY to beat the blanket html.dark .cl-step button (0-2-2) rule */
html.dark .cl-step button[name^="opt_"]:not([name^="opt_selected_"]),
html.dark .cl-message button[name^="opt_"]:not([name^="opt_selected_"]),
html.dark [class*="ask" i] button[name^="opt_"]:not([name^="opt_selected_"]) {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}
html:not(.dark) .cl-step button[name^="opt_"]:not([name^="opt_selected_"]),
html:not(.dark) .cl-message button[name^="opt_"]:not([name^="opt_selected_"]),
html:not(.dark) [class*="ask" i] button[name^="opt_"]:not([name^="opt_selected_"]) {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: #1e293b !important;
    font-weight: 500 !important;
}
.cl-step button[name^="opt_"]:not([name^="opt_selected_"]) svg,
.cl-step button[name^="opt_"]:not([name^="opt_selected_"]) svg *,
.cl-message button[name^="opt_"]:not([name^="opt_selected_"]) svg,
.cl-message button[name^="opt_"]:not([name^="opt_selected_"]) svg *,
[class*="ask" i] button[name^="opt_"]:not([name^="opt_selected_"]) svg,
[class*="ask" i] button[name^="opt_"]:not([name^="opt_selected_"]) svg * {
    color: inherit !important;
    fill: currentColor !important;
}

/* Multi-select option buttons (SELECTED state) - same size as unselected to prevent layout shift on click */
.cl-step button[name^="opt_selected_"],
.cl-message button[name^="opt_selected_"],
[class*="ask" i] button[name^="opt_selected_"] {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    border: 1px solid #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: none !important;
    transition: all 0.15s ease !important;
}

/* Dark mode selected state - same 1px border so no layout shift */
html.dark .cl-step button[name^="opt_selected_"],
html.dark .cl-message button[name^="opt_selected_"],
html.dark [class*="ask" i] button[name^="opt_selected_"] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    border: 1px solid #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 8px rgba(96, 165, 250, 0.3) !important;
}

/* Force action button container to row layout (IMPORTANT: override flex-col) */
[class*="AskAction"] > div,
[class*="ask-action"] > div,
[class*="ask"] [class*="actions"],
[class*="ask"] [class*="flex"],
[class*="step"]:has(button[name="select_all"]) > div,
[class*="step"]:has(button[name="toggle_option"]) > div,
[class*="step"]:has(button[name="select_option"]) > div,
[class*="step"]:has(button[name^="opt_"]) > div,
div:has(> button[name="select_all"]),
div:has(> button[name="toggle_option"]),
div:has(> button[name="select_option"]),
div:has(> button[name^="opt_"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Skip always on the right (as at 7f64ebef) */
.cl-step button[name="skip_question"],
.cl-message button[name="skip_question"],
[class*="ask" i] button[name="skip_question"] {
    margin-left: auto !important;
}

/* Shadow-banner placeholders (REALMS:, ALLIES:) - subtle ONLINE:-style, not prominent banner */
.cl-message[data-author="Ten Realms"] button[name="realms_placeholder"],
.cl-message[data-author="Allies"] button[name="advanced_placeholder"],
[data-author="Ten Realms"] button[name="realms_placeholder"],
[data-author="Allies"] button[name="advanced_placeholder"],
.cl-message:has(button[name="realm_click"]) button[name="realms_placeholder"],
.cl-message:has(button[name="advanced_click"]) button[name="advanced_placeholder"],
button[name="realms_placeholder"],
button[name="advanced_placeholder"] {
    font-size: 11px !important;
    font-weight: 500 !important;
    opacity: 0.5 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 4px 8px !important;
    cursor: default !important;
}
.cl-message[data-author="Ten Realms"] button[name="realms_placeholder"]:hover,
.cl-message[data-author="Allies"] button[name="advanced_placeholder"]:hover,
button[name="realms_placeholder"]:hover,
button[name="advanced_placeholder"]:hover {
    opacity: 0.6 !important;
    background: transparent !important;
}

html:not(.dark) button[name="realms_placeholder"],
html:not(.dark) button[name="advanced_placeholder"] {
    color: rgba(0, 0, 0, 0.4) !important;
}
html:not(.dark) button[name="realms_placeholder"]:hover,
html:not(.dark) button[name="advanced_placeholder"]:hover {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Realm/Tool buttons */
button[name="explore_realms"],
button[name="show_advanced"],
button[name="show_tools"],
button[name*="tool"],
button[name*="category"] {
    border: none !important;
    box-shadow: none !important;
}

/* Entity action chips: realm names colored at rest (icon white); allies white at rest; bifrost rainbow via JS */
button[name="realm_click"],
.cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]),
[data-author="Ten Realms"] button:not([name="realms_placeholder"]) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

button[name="advanced_click"],
button.ygg-entity-chip:not([data-realm-chip="true"]):not([data-bifrost-rainbow="true"]),
.cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]),
[data-author="Allies"] button:not([name="advanced_placeholder"]) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #ffffff !important;
}

button[name="realm_click"] .ygg-chip-icon,
.cl-message[data-author="Ten Realms"] button .ygg-chip-icon,
[data-author="Ten Realms"] button .ygg-chip-icon {
    color: #ffffff !important;
}

html:not(.dark) button[name="realm_click"] .ygg-chip-icon,
html:not(.dark) .cl-message[data-author="Ten Realms"] button .ygg-chip-icon,
html:not(.dark) [data-author="Ten Realms"] button .ygg-chip-icon {
    color: #d1d5db !important;
}

html:not(.dark) button[name="advanced_click"],
html:not(.dark) button.ygg-entity-chip:not([data-realm-chip="true"]):not([data-bifrost-rainbow="true"]),
html:not(.dark) .cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]),
html:not(.dark) [data-author="Allies"] button:not([name="advanced_placeholder"]) {
    color: #374151 !important;
}

button.ygg-entity-chip span,
button.ygg-entity-chip div,
button.ygg-entity-chip p,
.cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]) span,
.cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]) div,
.cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]) p,
.cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]) span,
.cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]) div,
.cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]) p,
.cl-message:has(code.language-yggdrasil-banner) button span,
.cl-message:has(.ygg-responsive-banner) button span {
    color: inherit !important;
}

/* Beat html.dark .cl-actions button glass defaults for entity chips */
html.dark .cl-actions button.ygg-entity-chip,
html.dark .cl-actions button[name="realm_click"],
html.dark .cl-actions button[name="advanced_click"],
html.dark [class*="actions"] button.ygg-entity-chip,
html.dark [class*="actions"] button[name="realm_click"],
html.dark [class*="actions"] button[name="advanced_click"],
html.dark .cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]),
html.dark .cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Beat html.dark .cl-actions button glass defaults for welcome nav */
html.dark .cl-actions button.ygg-welcome-nav,
html.dark .cl-actions button[name="explore_realms"],
html.dark .cl-actions button[data-name="explore_realms"],
html.dark .cl-actions button[name="show_advanced"],
html.dark .cl-actions button[data-name="show_advanced"],
html.dark .cl-actions button[name="my_data"],
html.dark .cl-actions button[data-name="my_data"],
html.dark [class*="actions"] button.ygg-welcome-nav,
html.dark [class*="actions"] button[name="explore_realms"],
html.dark [class*="actions"] button[data-name="explore_realms"],
html.dark [class*="actions"] button[name="show_advanced"],
html.dark [class*="actions"] button[data-name="show_advanced"],
html.dark [class*="actions"] button[name="my_data"],
html.dark [class*="actions"] button[data-name="my_data"] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html:not(.dark) .cl-actions button.ygg-entity-chip,
html:not(.dark) .cl-actions button[name="realm_click"],
html:not(.dark) .cl-actions button[name="advanced_click"],
html:not(.dark) [class*="actions"] button.ygg-entity-chip,
html:not(.dark) [class*="actions"] button[name="realm_click"],
html:not(.dark) [class*="actions"] button[name="advanced_click"],
html:not(.dark) .cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]),
html:not(.dark) .cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

button[name="show_tools"]:hover,
button[name*="realm"]:not([name="realm_click"]):not([name="explore_realms"]):hover,
button[name*="tool"]:hover,
button[name*="category"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #4ecdc4 !important;
    border: none !important;
    box-shadow: none !important;
}

button[name="explore_realms"]:hover,
button[data-name="explore_realms"]:hover,
button[name="show_advanced"]:hover,
button[data-name="show_advanced"]:hover,
button[name="my_data"]:hover,
button[data-name="my_data"]:hover,
button.ygg-welcome-nav:hover,
html.dark .cl-message[data-author="Welcome Banner"] button:hover,
html.dark [data-author="Welcome Banner"] button:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

button[name="realm_click"]:hover,
button[name="advanced_click"]:hover,
button.ygg-entity-chip:hover,
.cl-message[data-author="Ten Realms"] button:not([name="realms_placeholder"]):hover,
[data-author="Ten Realms"] button:not([name="realms_placeholder"]):hover,
.cl-message[data-author="Allies"] button:not([name="advanced_placeholder"]):hover,
[data-author="Allies"] button:not([name="advanced_placeholder"]):hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* After click/focus: rest color comes from JS reset handlers; no glass pill on focus */
button[name="realm_click"]:focus:not(:hover),
button[name="advanced_click"]:focus:not(:hover),
button.ygg-entity-chip:focus:not(:hover),
button[name="explore_realms"]:focus:not(:hover),
button[name="show_advanced"]:focus:not(:hover),
button[name="my_data"]:focus:not(:hover) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:not(.dark) button[name="explore_realms"],
html:not(.dark) button[data-name="explore_realms"],
html:not(.dark) button[name="show_advanced"],
html:not(.dark) button[data-name="show_advanced"],
html:not(.dark) button[name="my_data"],
html:not(.dark) button[data-name="my_data"],
html:not(.dark) button.ygg-welcome-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

html:not(.dark) button[name="show_tools"] {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #374151 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) button[name="explore_realms"]:hover,
html:not(.dark) button[data-name="explore_realms"]:hover,
html:not(.dark) button[name="show_advanced"]:hover,
html:not(.dark) button[data-name="show_advanced"]:hover,
html:not(.dark) button[name="my_data"]:hover,
html:not(.dark) button[data-name="my_data"]:hover,
html:not(.dark) button.ygg-welcome-nav:hover,
html:not(.dark) button[name="show_tools"]:hover,
html:not(.dark) button[name*="realm"]:not([name="realm_click"]):hover,
html:not(.dark) button[name*="tool"]:hover,
html:not(.dark) button[name*="category"]:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #0d7377 !important;
}

html:not(.dark) button[name="realm_click"]:hover,
html:not(.dark) button[name="advanced_click"]:hover,
html:not(.dark) button.ygg-entity-chip:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:not(.dark) button[name="explore_realms"]:hover,
html:not(.dark) button[data-name="explore_realms"]:hover,
html:not(.dark) button[name="show_advanced"]:hover,
html:not(.dark) button[data-name="show_advanced"]:hover,
html:not(.dark) button[name="my_data"]:hover,
html:not(.dark) button[data-name="my_data"]:hover,
html:not(.dark) button.ygg-welcome-nav:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

html:not(.dark) button[name="show_tools"]:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #0d7377 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11: MODE ICONS (Loki/Odin/Tyr/Eir/Sindri/Kvasir)
   ═══════════════════════════════════════════════════════════════════════════ */

.loki-input-icons {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 0 0 0 12px !important; order: 100 !important; margin-left: auto !important;
    z-index: 1 !important; border-left: 1px solid var(--mode-icons-border) !important;
}
.loki-input-icon-btn {
    display: inline-flex !important; width: 32px !important; height: 32px !important; min-width: 32px !important;
    border-radius: 8px !important; border: none !important; background: transparent !important;
    cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important;
    opacity: 0.9 !important; position: relative !important; z-index: 1 !important;
    caret-color: transparent !important;
    font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important;
    align-items: center !important; justify-content: center !important; text-align: center !important;
}
.loki-input-icon-btn svg { width: 20px !important; height: 20px !important; stroke: currentColor !important; stroke-width: 1.5 !important; }
.loki-input-icon-btn.kvasir-btn, .loki-input-icon-btn.med-btn { font-size: 20px !important; font-weight: 400 !important; }

/* Colors: INACTIVE state */
.loki-btn:not(.active) { color: #f47272 !important; opacity: 0.7 !important; filter: none !important; }
.kvasir-btn:not(.active) { color: #f97316 !important; opacity: 0.7 !important; filter: none !important; }
.tyr-btn:not(.active) { color: #fbbf24 !important; opacity: 0.7 !important; filter: none !important; }
.med-btn:not(.active) { color: #4ade80 !important; opacity: 0.7 !important; filter: none !important; }
.odin-btn:not(.active) { color: #22d3ee !important; opacity: 0.7 !important; filter: none !important; }
.sindri-btn:not(.active) { color: #a855f7 !important; opacity: 0.7 !important; filter: none !important; }

/* SVG icons inherit */
.loki-input-icon-btn svg { color: inherit !important; stroke: currentColor !important; }

/* Hover on INACTIVE: color change only (no scale, no glow — keep icons visually calm) */
.loki-btn:not(.active):hover { color: #ff1a1a !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }
.odin-btn:not(.active):hover { color: #00e5ff !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }
.tyr-btn:not(.active):hover { color: #ffc800 !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }
.med-btn:not(.active):hover { color: #00ff6a !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }
.sindri-btn:not(.active):hover { color: #c084fc !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }
.kvasir-btn:not(.active):hover { color: #fb923c !important; opacity: 0.9 !important; filter: none !important; transform: none !important; }

/* ACTIVE state: bright glow, 20% larger for readability (scale only, no bolder stroke) */
.loki-btn.active { color: #ff1a1a !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(255,26,26,1)) drop-shadow(0 0 16px rgba(255,26,26,0.7)) drop-shadow(0 0 24px rgba(255,26,26,0.4)) !important; transform: scale(1.2) !important; }
.odin-btn.active { color: #00e5ff !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(0,229,255,1)) drop-shadow(0 0 16px rgba(0,229,255,0.7)) drop-shadow(0 0 24px rgba(0,229,255,0.4)) !important; transform: scale(1.2) !important; }
.tyr-btn.active { color: #ffc800 !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(255,200,0,1)) drop-shadow(0 0 16px rgba(255,200,0,0.7)) drop-shadow(0 0 24px rgba(255,200,0,0.4)) !important; transform: scale(1.2) !important; }
.med-btn.active { color: #00ff6a !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(0,255,106,1)) drop-shadow(0 0 16px rgba(0,255,106,0.7)) drop-shadow(0 0 24px rgba(0,255,106,0.4)) !important; transform: scale(1.2) !important; }
.sindri-btn.active { color: #c084fc !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(192,132,252,1)) drop-shadow(0 0 16px rgba(192,132,252,0.7)) drop-shadow(0 0 24px rgba(192,132,252,0.4)) !important; transform: scale(1.2) !important; }
.kvasir-btn.active { color: #f97316 !important; opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(249,115,22,1)) drop-shadow(0 0 16px rgba(249,115,22,0.7)) drop-shadow(0 0 24px rgba(249,115,22,0.4)) !important; transform: scale(1.2) !important; }

/* Hover on ACTIVE: no extra glow or scale bump — active state's own color/glow stays */
.loki-btn.active:hover,
.odin-btn.active:hover,
.tyr-btn.active:hover,
.med-btn.active:hover,
.sindri-btn.active:hover,
.kvasir-btn.active:hover {
    /* intentionally no filter/transform overrides: keep the active state as-is on hover */
}

.loki-input-icon-btn:active { transform: scale(0.95) !important; }
.loki-input-icon-btn:hover svg { stroke: currentColor !important; fill: none !important; }

/* Tooltip */
.loki-input-icon-btn::after {
    content: attr(title); position: absolute; bottom: 125%; left: 50%;
    transform: translateX(-50%) translateY(5px); padding: 5px 10px;
    background: #1a1a1a; color: white; font-size: 11px; font-weight: 500;
    border-radius: 4px; white-space: nowrap; z-index: 10; pointer-events: none;
    opacity: 0; transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
html:not(.dark) .loki-input-icon-btn::after { background: #374151; border: 1px solid rgba(0,0,0,0.1); }
.loki-input-icon-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
    .loki-input-icons { gap: 6px; padding: 0 4px; }
    .loki-input-icon-btn { width: 30px; height: 30px; }
    .loki-input-icon-btn svg { width: 16px; height: 16px; }
}

/* NUCLEAR OPTION: Hide mode switch carrier row (avatar + author badge + buttons) */
.cl-message-list > *:has(button:is(
    [name="mode_switch"],
    [data-name="mode_switch"],
    [data-mode-button="true"],
    [aria-label*="Loki On"],
    [aria-label*="Odin On"],
    [aria-label*="Tyr On"],
    [aria-label*="Eir On"],
    [aria-label*="Sindri On"],
    [aria-label*="Kvasir On"],
    [aria-label*="Normal On"]
)),
.cl-message-list > *.ygg-mode-switch-hidden-row,
.ygg-mode-switch-hidden-row,
[data-step-type="assistant_message"]:has(button[name="mode_switch"]),
[data-step-type="assistant_message"]:has(button[data-name="mode_switch"]),
.cl-message[data-author="mode_switch_hidden"],
[data-author="mode_switch_hidden"],
.cl-message-list > *:has([data-author="mode_switch_hidden"]) {
    clip-path: inset(100%) !important;
    height: 1px !important;
    max-height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Hide Yggdrasil avatar/icon on mode-switch carrier rows */
.cl-message-list > *:has(button[name="mode_switch"]) img,
.cl-message-list > *:has(button[data-name="mode_switch"]) img,
.cl-message-list > *:has(button[data-mode-button="true"]) img,
.ygg-mode-switch-hidden-row img,
.cl-message-list > *:has([data-author="mode_switch_hidden"]) img,
.cl-message-list > *:has(button[name="mode_switch"]) [class*="avatar"],
.cl-message-list > *:has(button[data-name="mode_switch"]) [class*="avatar"],
.ygg-mode-switch-hidden-row [class*="avatar"],
.cl-message-list > *:has([data-author="mode_switch_hidden"]) [class*="avatar"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Keep buttons themselves clickable for JS (positioned off-screen) */
button[name="mode_switch"],
button[data-name="mode_switch"],
button[data-mode-button="true"],
.cl-message[data-author="mode_switch_hidden"] button,
[data-author="mode_switch_hidden"] button {
    position: fixed !important;
    top: -1px !important;
    left: -1px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    clip: rect(0,0,0,0) !important;
    z-index: -9998 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12: ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fluid rainbow: many steps so transitions blend smoothly */
@keyframes rainbowProgress {
    0%   { color: #ff0055; }
    6%   { color: #ff3333; }
    12%  { color: #ff6633; }
    18%  { color: #ff9900; }
    24%  { color: #ffcc00; }
    30%  { color: #ddff22; }
    36%  { color: #88ff00; }
    42%  { color: #44ff66; }
    48%  { color: #00ff88; }
    54%  { color: #00ffbb; }
    60%  { color: #00ddff; }
    66%  { color: #00aaff; }
    72%  { color: #4466ff; }
    78%  { color: #7744ff; }
    84%  { color: #bb44ff; }
    90%  { color: #dd22cc; }
    96%  { color: #ff00aa; }
    100% { color: #ff0055; }
}

/* Fluid rainbow glow: layered halos that blend like liquid */
@keyframes rainbowGlow {
    0%   { text-shadow: 0 0 4px #ff0055, 0 0 10px rgba(255,0,85,0.6), 0 0 20px rgba(255,0,85,0.25); }
    7%   { text-shadow: 0 0 4px #ff4433, 0 0 10px rgba(255,68,51,0.6), 0 0 20px rgba(255,100,0,0.25); }
    14%  { text-shadow: 0 0 4px #ffaa00, 0 0 10px rgba(255,170,0,0.6), 0 0 20px rgba(255,200,0,0.25); }
    21%  { text-shadow: 0 0 4px #ccff00, 0 0 10px rgba(136,255,0,0.6), 0 0 20px rgba(100,255,50,0.25); }
    28%  { text-shadow: 0 0 4px #00ff88, 0 0 10px rgba(0,255,136,0.6), 0 0 20px rgba(0,255,150,0.25); }
    35%  { text-shadow: 0 0 4px #00ffcc, 0 0 10px rgba(0,255,200,0.6), 0 0 20px rgba(0,220,255,0.25); }
    42%  { text-shadow: 0 0 4px #00bbff, 0 0 10px rgba(0,187,255,0.6), 0 0 20px rgba(68,136,255,0.25); }
    50%  { text-shadow: 0 0 4px #4488ff, 0 0 10px rgba(68,136,255,0.6), 0 0 20px rgba(100,68,255,0.25); }
    57%  { text-shadow: 0 0 4px #8844ff, 0 0 10px rgba(136,68,255,0.6), 0 0 20px rgba(180,68,255,0.25); }
    64%  { text-shadow: 0 0 4px #cc44ff, 0 0 10px rgba(204,68,255,0.6), 0 0 20px rgba(255,0,200,0.25); }
    71%  { text-shadow: 0 0 4px #ff44dd, 0 0 10px rgba(255,68,221,0.6), 0 0 20px rgba(255,0,150,0.25); }
    78%  { text-shadow: 0 0 4px #ff0088, 0 0 10px rgba(255,0,136,0.6), 0 0 20px rgba(255,0,100,0.25); }
    85%  { text-shadow: 0 0 4px #ff2266, 0 0 10px rgba(255,34,102,0.6), 0 0 20px rgba(255,0,85,0.25); }
    92%  { text-shadow: 0 0 4px #ff0055, 0 0 10px rgba(255,0,85,0.6), 0 0 20px rgba(255,0,90,0.25); }
    100% { text-shadow: 0 0 4px #ff0055, 0 0 10px rgba(255,0,85,0.6), 0 0 20px rgba(255,0,85,0.25); }
}

/* Flowing rainbow gradient on background */
@keyframes rainbowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.dark body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 55% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 85, 0.12) 0%,
        rgba(255, 102, 0, 0.1) 20%,
        rgba(255, 204, 0, 0.1) 40%,
        rgba(0, 255, 136, 0.1) 60%,
        rgba(0, 221, 255, 0.12) 80%,
        rgba(187, 68, 255, 0.12) 100%
    ) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    animation: rainbowFlow 10s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Flowing rainbow gradient on background */
@keyframes rainbowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.dark body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 55% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 85, 0.12) 0%,
        rgba(255, 102, 0, 0.1) 20%,
        rgba(255, 204, 0, 0.1) 40%,
        rgba(0, 255, 136, 0.1) 60%,
        rgba(0, 221, 255, 0.12) 80%,
        rgba(187, 68, 255, 0.12) 100%
    ) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    animation: rainbowFlow 10s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Progress bar: CSS rainbow cycle so refresh never blinks white; JS only injects .progress-filled */
code .progress-filled {
    animation: rainbowProgress 2.2s linear infinite !important;
    transition: none !important;
    text-shadow: 0 0 6px currentColor, 0 0 12px currentColor !important;
}
code .progress-bracket, code .progress-empty, code .progress-rest { transition: none !important; }

/* Progress bar code block: use same as inline code so re-renders don’t blink white */
code.ygg-progress-bar {
    background: var(--code-inline-bg) !important;
    transition: background-color 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13: LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-message a, .prose a, .markdown a {
    color: var(--text-link) !important;
    text-shadow: 0 0 8px var(--text-link-glow) !important;
    transition: all 0.2s ease !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}
.cl-message a:hover, .prose a:hover, .markdown a:hover {
    color: var(--text-link-hover) !important;
    text-shadow: 0 0 12px var(--text-link-glow-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14: TEXT COLORS
   ═══════════════════════════════════════════════════════════════════════════ */

html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3,
html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 { color: #111827 !important; }
html:not(.dark) a { color: var(--text-link) !important; }
html:not(.dark) a:hover { color: var(--text-link-hover) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 15: SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* Selection */
::selection { background-color: var(--selection-bg) !important; color: inherit !important; }
::-moz-selection { background-color: var(--selection-bg) !important; color: inherit !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 16: BROKKR IMAGE CENTERING
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-message[data-author="Brokkr"] { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; }
.cl-message[data-author="Brokkr"] > div,
.cl-message[data-author="Brokkr"] .cl-message-content,
.cl-message[data-author="Brokkr"] [class*="prose"] {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    width: 100% !important; margin: 0 auto !important;
}
.cl-message[data-author="Brokkr"] img { display: block !important; margin: 0 auto !important; max-width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 17: AUTODOWNLOAD HIDDEN MESSAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-message[data-author="AutoDownload"],
[data-author="AutoDownload"],
.cl-message-list > *:has([data-author="AutoDownload"]) {
    position: fixed !important; left: -9999px !important; top: -9999px !important;
    width: 1px !important; height: 1px !important; overflow: hidden !important;
    opacity: 0 !important; z-index: -1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 18: SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

body.ygg-sidebar-closed aside[data-sidebar="sidebar"],
body.ygg-sidebar-closed .MuiDrawer-paper {
    display: none !important;
}

body.ygg-sidebar-closed [class*="group-data-"][class*="collapsible"]:has(> aside[data-sidebar="sidebar"]) {
    width: 0 !important;
    min-width: 0 !important;
}

body.ygg-sidebar-closed main,
body.ygg-sidebar-closed .cl-message-list {
    width: 100% !important;
    margin-left: 0 !important;
}

.MuiDrawer-paper, aside[class*="flex"][class*="flex-col"],
aside[data-sidebar="sidebar"],
[class*="group-data-"][class*="collapsible"]:has(> aside[data-sidebar="sidebar"]) {
    background: var(--sidebar-bg) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border-right: var(--sidebar-border) !important;
    box-shadow: var(--sidebar-shadow) !important;
    position: relative !important;
}

/* Glass shine highlight along top edge of sidebar */
.MuiDrawer-paper::before, aside[data-sidebar="sidebar"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
html.dark .MuiDrawer-paper::before, html.dark aside[data-sidebar="sidebar"]::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent 100%) !important;
}

/* Force ALL sidebar descendants transparent so glass shows through */
.MuiDrawer-paper *, aside[class*="flex"][class*="flex-col"] *,
aside[data-sidebar="sidebar"] *,
[class*="group-data-"][class*="collapsible"]:has(> aside[data-sidebar="sidebar"]) * {
    background-color: transparent !important;
    background: transparent !important;
}

/* Re-apply specific hover/active backgrounds */
.MuiDrawer-paper button:hover, aside[data-sidebar="sidebar"] button:hover {
    background: var(--sidebar-hover-bg) !important;
}
.MuiDrawer-paper button[aria-selected="true"], aside[data-sidebar="sidebar"] button[aria-selected="true"],
aside[data-sidebar="sidebar"] a[data-active="true"], aside[data-sidebar="sidebar"] [data-active="true"] {
    background: var(--sidebar-active-bg) !important;
}

/* Sidebar typography */
.MuiDrawer-paper p[class*="text-muted"], .MuiDrawer-paper span[class*="text-muted"],
aside[class*="flex"][class*="flex-col"] p[class*="text-muted"] {
    font-family: 'Cinzel', 'Georgia', serif !important;
    font-weight: 500 !important; font-size: 11px !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
    color: var(--sidebar-date-color) !important;
    text-shadow: var(--sidebar-date-shadow) !important;
    margin-top: 16px !important; margin-bottom: 8px !important;
}
.MuiDrawer-paper p:not([class*="text-muted"]),
.MuiDrawer-paper span:not([class*="text-muted"]),
.MuiDrawer-paper button span {
    font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif !important;
    font-weight: 400 !important; font-size: 13px !important; color: var(--sidebar-text) !important;
}
/* Spread app tagline/description in sidebar (e.g. "Get Instant Insight") */
aside[data-sidebar="sidebar"] p:first-of-type,
aside[data-sidebar="sidebar"] [class*="description"],
.MuiDrawer-paper p:first-of-type { letter-spacing: 0.08em !important; }
html:not(.dark) .MuiDrawer-paper p,
html:not(.dark) .MuiDrawer-paper span,
html:not(.dark) .MuiDrawer-paper button span,
html:not(.dark) aside[data-sidebar="sidebar"] p,
html:not(.dark) aside[data-sidebar="sidebar"] span,
html:not(.dark) aside[data-sidebar="sidebar"] button span {
    color: #111827 !important;
    opacity: 1 !important;
}
html:not(.dark) .MuiDrawer-paper p[class*="text-muted"],
html:not(.dark) .MuiDrawer-paper span[class*="text-muted"],
html:not(.dark) aside[data-sidebar="sidebar"] p[class*="text-muted"] {
    color: #6b4f1d !important;
    opacity: 0.95 !important;
}
/* Cancel global descendant transparency inside light-mode sidebar only */
html:not(.dark) .MuiDrawer-paper > *,
html:not(.dark) aside[data-sidebar="sidebar"] > *,
html:not(.dark) aside[data-sidebar="sidebar"] > * > * {
    background-color: transparent !important;
}

/* Sidebar links */
.MuiDrawer-paper a { color: var(--sidebar-link) !important; text-decoration: none !important; transition: all 0.3s ease !important; }
.MuiDrawer-paper a:hover { color: var(--sidebar-link-hover) !important; filter: drop-shadow(0 0 4px var(--sidebar-link-hover)) !important; transform: translateX(2px) !important; }

/* Thread item hover/active - glassmorphism */
.MuiDrawer-paper button:hover, aside[data-sidebar="sidebar"] button:hover {
    background: var(--sidebar-hover-bg) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.MuiDrawer-paper button[aria-selected="true"], aside[data-sidebar="sidebar"] button[aria-selected="true"],
aside[data-sidebar="sidebar"] a[data-active="true"], aside[data-sidebar="sidebar"] [data-active="true"] {
    background: var(--sidebar-active-bg) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 2px solid var(--sidebar-active-border) !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar icons */
.MuiDrawer-paper svg { color: var(--sidebar-svg) !important; opacity: 0.8 !important; transition: all 0.2s ease !important; }
.MuiDrawer-paper svg:hover { color: var(--sidebar-svg-hover) !important; opacity: 1 !important; }

/* Hide mode icons from sidebar */
.MuiDrawer-paper .loki-input-icons, .MuiDrawer-paper .loki-input-icon-btn,
.MuiDrawer-paper #loki-mode-icons-wrapper,
aside .loki-input-icons, aside .loki-input-icon-btn {
    display: none !important; width: 0 !important; height: 0 !important;
}

/* Reset negative margin on Chainlit wrapper */
.-ml-1\.5, [class*="-ml-1"] {
    margin-left: 0 !important;
}

/* Sidebar scrollbar - glassmorphism */
.MuiDrawer-paper::-webkit-scrollbar, aside[data-sidebar="sidebar"]::-webkit-scrollbar { width: 6px !important; }
.MuiDrawer-paper::-webkit-scrollbar-track, aside[data-sidebar="sidebar"]::-webkit-scrollbar-track { background: transparent !important; }
.MuiDrawer-paper::-webkit-scrollbar-thumb, aside[data-sidebar="sidebar"]::-webkit-scrollbar-thumb { background: var(--sidebar-scrollbar) !important; border-radius: 3px !important; }
.MuiDrawer-paper::-webkit-scrollbar-thumb:hover, aside[data-sidebar="sidebar"]::-webkit-scrollbar-thumb:hover { background: var(--sidebar-scrollbar-hover) !important; }

/* Toggle button */
button[aria-label*="Toggle Sidebar"], button[data-sidebar="trigger"] {
    border: none !important; border-left: none !important;
    background: var(--sidebar-toggle-bg) !important;
    backdrop-filter: blur(12px) !important;
    cursor: pointer !important; transition: all 0.2s ease !important;
}

/* Sidebar edge */
.MuiDrawer-paper, aside[class*="flex"][class*="flex-col"] { border-right-width: 1px !important; cursor: default !important; resize: none !important; }

/* Resize handle */
[data-resize-handle], [data-resize-handle-active] {
    width: 1px !important; min-width: 1px !important; max-width: 1px !important;
    background: var(--resize-handle-bg) !important; border: none !important; cursor: default !important;
}

/* Remove grey from sidebar header buttons */
.MuiDrawer-paper button[class*="bg-"], aside button[class*="bg-"],
header button[class*="bg-"], header button[class*="rounded"],
button[class*="bg-gray"], button[class*="bg-zinc"], button[class*="bg-neutral"], button[class*="bg-slate"] {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 19: LOGIN PAGE
   Professional centered auth card on a muted brand surface.
   Chainlit's default markup is a 2-col grid (form | image) — collapse it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-viewport fixed layer — body background-attachment:fixed often paints
   only the first half of the viewport (esp. with nested transforms / 100dvh). */
html:has(body.ygg-login-page),
html:has(body:not(:has(.cl-message-list)):has(form)),
body.ygg-login-page,
body:not(:has(.cl-message-list)):has(form) {
    color: #e8e8ed !important;
    background: #080b16 !important;
    background-image: none !important;
    min-height: 100dvh !important;
    height: 100% !important;
    overflow-x: hidden !important;
}
body.ygg-login-page::before,
body:not(:has(.cl-message-list)):has(form)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100% !important;
    height: 100dvh !important;
    min-height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Uniform veil hides the artwork horizon that otherwise looks like a mid-screen cut. */
    background-color: #080b16 !important;
    background-image:
        linear-gradient(rgba(8, 11, 22, 0.84), rgba(8, 11, 22, 0.84)),
        url('/public/bg-dark-desktop.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}
body.ygg-login-page #root,
body:not(:has(.cl-message-list)):has(form) #root,
body:not(:has(.cl-message-list)):has(form) main,
body:not(:has(.cl-message-list)):has(form) #root > .grid,
body:not(:has(.cl-message-list)):has(form) #root > .grid > div {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}
body:not(:has(.cl-message-list)):has(form) .loki-input-icons,
body:not(:has(.cl-message-list)):has(form) #loki-mode-icons-wrapper {
    display: none !important;
}

/* Drop Chainlit's decorative right-hand image pane (outer column only). */
body:not(:has(.cl-message-list)):has(form) .bg-muted,
body:not(:has(.cl-message-list)):has(form) img[alt="Image"],
body:not(:has(.cl-message-list)):has(form) #root > .grid > div:nth-child(2) {
    display: none !important;
}

/* Outer page shell only — never match the form's inner `.grid gap-6`. */
body:not(:has(.cl-message-list)):has(form) #root > .grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    width: 100% !important;
    grid-template-columns: none !important;
    padding: 32px 16px !important;
}
body:not(:has(.cl-message-list)):has(form) #root > .grid > div:first-child {
    width: min(440px, 100%) !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Chainlit wraps the form in flex-1; stop it from stretching the card. */
body:not(:has(.cl-message-list)):has(form) .flex-1 {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Outer logo slot is emptied by auto-expand.js (logo moves into the form). */
body:not(:has(.cl-message-list)):has(form) #root > .grid > div:first-child > div:first-child:not(:has(img)) {
    display: none !important;
}
body.ygg-login-page #root > .grid > div:first-child > div:first-child:empty {
    display: none !important;
}
/* Restore the OAuth button stack — must not inherit the outer page-grid rules. */
body:not(:has(.cl-message-list)):has(form) form .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 12px !important;
    flex: none !important;
}

body:not(:has(.cl-message-list)):has(form) .max-w-xs,
body.ygg-login-page .max-w-xs {
    width: min(440px, 100%) !important;
    max-width: min(440px, 100%) !important;
    height: auto !important;
    flex: none !important;
}

body:not(:has(.cl-message-list)):has(form) form {
    width: min(440px, calc(100vw - 48px)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    align-self: center !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
}
/* Padded card: logo + title + Google button live inside this container. */
body:not(:has(.cl-message-list)):has(form) form .ygg-login-card {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 96px 80px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 42%,
            rgba(12, 16, 28, 0.28) 100%
        ) !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}
body:not(:has(.cl-message-list)):has(form) form .ygg-login-card > * {
    width: 100% !important;
    flex: none !important;
}
/* Logo relocated into the card by auto-expand.js */
body:not(:has(.cl-message-list)):has(form) form img.logo,
body:not(:has(.cl-message-list)):has(form) form img.ygg-login-logo,
body.ygg-login-page form img.logo {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    margin: 0 auto 4px !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 14px rgba(201, 162, 39, 0.28));
}
body:not(:has(.cl-message-list)):has(form) form .ygg-login-card > img.logo,
body:not(:has(.cl-message-list)):has(form) form .ygg-login-card > img.ygg-login-logo {
    width: 68px !important;
}
body:not(:has(.cl-message-list)):has(form) form h1,
body:not(:has(.cl-message-list)):has(form) form [class*="text-2xl"] {
    font-family: inherit !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 0 4px !important;
    color: #c8d0da !important; /* quicksilver fallback if clip unsupported */
}
/* Quicksilver: cool liquid-metal silver on the title copy. */
body:not(:has(.cl-message-list)):has(form) form h1 span,
body:not(:has(.cl-message-list)):has(form) form [class*="text-2xl"] span {
    background: linear-gradient(
        125deg,
        #f4f6f8 0%,
        #c8d0da 28%,
        #eef1f4 48%,
        #9aa5b4 68%,
        #d5dce6 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 8px rgba(180, 195, 215, 0.28));
}
body:not(:has(.cl-message-list)):has(form) form button {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: background .18s ease, transform .18s ease, filter .18s ease !important;
}
/* Thin rainbow frame — always on, not hover-only. */
body:not(:has(.cl-message-list)):has(form) form button::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1px !important;
    background: linear-gradient(
        105deg,
        rgba(255, 61, 119, 0.95),
        rgba(255, 154, 61, 0.95),
        rgba(255, 217, 61, 0.95),
        rgba(61, 255, 147, 0.95),
        rgba(61, 157, 255, 0.95),
        rgba(138, 61, 255, 0.95),
        rgba(255, 61, 200, 0.95)
    ) !important;
    opacity: 0.72 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
    box-shadow: 0 0 10px rgba(138, 61, 255, 0.18) !important;
}
body:not(:has(.cl-message-list)):has(form) form button > * {
    position: relative !important;
    z-index: 1 !important;
}
body:not(:has(.cl-message-list)):has(form) form button:hover {
    background: rgba(201, 162, 39, 0.12) !important;
    transform: translateY(-1px) !important;
}
body:not(:has(.cl-message-list)):has(form) form button:hover::before {
    opacity: 0.95 !important;
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.22) !important;
}
body:not(:has(.cl-message-list)):has(form) form button:focus-visible {
    outline: 2px solid #c9a227 !important;
    outline-offset: 3px !important;
}
body:not(:has(.cl-message-list)):has(form) form input {
    min-height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    background: rgba(5, 8, 17, 0.55) !important;
    color: #f8fafc !important;
    font-family: inherit !important;
}
body:not(:has(.cl-message-list)):has(form) form input:focus-visible {
    border-color: rgba(201, 162, 39, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
}

@media (max-width: 640px) {
    body.ygg-login-page::before,
    body:not(:has(.cl-message-list)):has(form)::before {
        background-image:
            linear-gradient(rgba(8, 11, 22, 0.84), rgba(8, 11, 22, 0.84)),
            url('/public/bg-dark-mobile.png') !important;
        background-position: center top !important;
    }
    body:not(:has(.cl-message-list)):has(form) #root > .grid {
        padding: 20px 12px !important;
    }
    body:not(:has(.cl-message-list)):has(form) #root > .grid > div:first-child,
    body:not(:has(.cl-message-list)):has(form) .max-w-xs {
        width: min(100%, calc(100vw - 32px)) !important;
        max-width: min(100%, calc(100vw - 32px)) !important;
    }
    body:not(:has(.cl-message-list)):has(form) form {
        width: min(440px, calc(100vw - 32px)) !important;
    }
    body:not(:has(.cl-message-list)):has(form) form .ygg-login-card {
        padding: 80px 64px !important;
        border-radius: 14px !important;
        gap: 18px !important;
    }
    body:not(:has(.cl-message-list)):has(form) form img.logo,
    body:not(:has(.cl-message-list)):has(form) form img.ygg-login-logo {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
    }
    body:not(:has(.cl-message-list)):has(form) form h1,
    body:not(:has(.cl-message-list)):has(form) form [class*="text-2xl"] {
        font-size: 25px !important;
    }
}

@media (max-width: 380px) {
    body:not(:has(.cl-message-list)):has(form) form {
        width: calc(100vw - 24px) !important;
    }
    body:not(:has(.cl-message-list)):has(form) form .ygg-login-card {
        padding: 64px 44px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 21: DROPDOWNS & MISC
   ═══════════════════════════════════════════════════════════════════════════ */

[role="menu"], [role="listbox"], .MuiMenu-paper, .MuiPopover-paper,
[data-radix-popper-content-wrapper] > *, [data-radix-menu-content],
[class*="popover"], [class*="Popover"], [class*="dropdown"], [class*="Dropdown"],
[class*="context-menu"], [class*="ContextMenu"] {
    background: rgba(248, 246, 243, 0.98) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    color: #374151 !important;
    border-radius: var(--overlay-radius) !important;
    overflow: hidden;
}
html.dark [role="menu"], html.dark [role="listbox"], html.dark .MuiMenu-paper,
html.dark [data-radix-popper-content-wrapper] > *, html.dark [data-radix-menu-content] {
    background: rgba(30, 30, 40, 0.98) !important;
    color: #e5e7eb !important;
}
/* Ensure menu/popover children have readable text; keep container bg opaque */
html:not(.dark) [role="menu"] *:not([role="menu"]),
html:not(.dark) [role="listbox"] *:not([role="listbox"]),
html:not(.dark) [data-radix-popper-content-wrapper] *:not([role="tooltip"]):not([role="menu"]):not([data-radix-menu-content]),
html:not(.dark) [data-radix-menu-content] *:not([data-radix-menu-content]),
html:not(.dark) .MuiPopover-paper *:not(.MuiPopover-paper),
html:not(.dark) .MuiMenu-paper *:not(.MuiMenu-paper),
html:not(.dark) [class*="popover"] *:not([class*="popover"]),
html:not(.dark) [class*="Popover"] *:not([class*="Popover"]),
html:not(.dark) [class*="dropdown"] *:not([class*="dropdown"]),
html:not(.dark) [class*="Dropdown"] *:not([class*="Dropdown"]) {
    background: transparent !important;
    color: #374151 !important;
}
/* Destructive/delete menu items: red text visible in both modes */
html:not(.dark) [role="menuitem"][class*="destructive"],
html:not(.dark) [role="menuitem"][class*="danger"],
html:not(.dark) [role="menuitem"][class*="delete" i],
html:not(.dark) [role="menuitem"]:last-child:not(:first-child),
html:not(.dark) [data-radix-menu-content] [class*="destructive"],
html:not(.dark) [data-radix-menu-content] [class*="text-red"],
html:not(.dark) button[class*="destructive"],
html:not(.dark) [class*="popover"] [class*="destructive"],
html:not(.dark) [class*="popover"] [class*="text-red"] {
    color: #dc2626 !important;
}
html:not(.dark) [role="menuitem"][class*="destructive"] *,
html:not(.dark) [role="menuitem"][class*="danger"] *,
html:not(.dark) [data-radix-menu-content] [class*="destructive"] *,
html:not(.dark) [class*="popover"] [class*="destructive"] * {
    color: inherit !important;
}
[role="menuitem"]:hover, [role="option"]:hover, .MuiMenuItem-root:hover {
    background: var(--sidebar-hover-bg) !important;
}

/* Cards */
[class*="card"], [class*="Card"] { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; }

/* Dividers */
hr, [class*="divider"], [class*="Divider"] { border-color: var(--divider) !important; }

/* Blockquotes */
html:not(.dark) blockquote { border-left: 4px solid #d1d5db !important; background: rgba(0,0,0,0.02) !important; color: #4b5563 !important; }

/* Focus */
html:not(.dark) *:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; }

/* Tooltips */
[role="tooltip"], .MuiTooltip-tooltip {
    border-radius: var(--overlay-radius) !important;
    overflow: hidden;
}
html.dark [role="tooltip"], html.dark .MuiTooltip-tooltip {
    background: #1f2937 !important;
    color: white !important;
}
html:not(.dark) [role="tooltip"], html:not(.dark) .MuiTooltip-tooltip {
    background: var(--dialog-bg, #f8f6f3) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* AI disclosure ribbon (first login + medical/law/finance) — not a chat message */
#ygg-safety-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px 10px 18px;
    background: linear-gradient(90deg, rgba(120, 80, 20, 0.96), rgba(90, 60, 16, 0.94));
    color: #fff8e8;
    font-family: Raleway, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid rgba(255, 220, 140, 0.35);
    transform: translateY(-110%);
    transition: transform 0.28s ease;
}
#ygg-safety-ribbon.ygg-safety-ribbon--visible {
    transform: translateY(0);
}
#ygg-safety-ribbon .ygg-safety-ribbon__text {
    flex: 1;
    min-width: 0;
}
#ygg-safety-ribbon .ygg-safety-ribbon__close {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff8e8;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}
#ygg-safety-ribbon .ygg-safety-ribbon__close:hover {
    background: rgba(255, 255, 255, 0.22);
}
html:not(.dark) #ygg-safety-ribbon {
    background: linear-gradient(90deg, rgba(255, 244, 214, 0.98), rgba(255, 236, 188, 0.96));
    color: #4a3410;
    border-bottom: 1px solid rgba(180, 130, 40, 0.35);
    box-shadow: 0 4px 16px rgba(80, 50, 10, 0.12);
}
html:not(.dark) #ygg-safety-ribbon .ygg-safety-ribbon__close {
    background: rgba(80, 50, 10, 0.08);
    color: #4a3410;
}