/* ============================================================================
   GPTWEB BRAND COLORS - Light Theme (Default)
   ============================================================================ */
:root {
    /* Primary Brand Colors - GPTWeb Blue */
    --theme-primary: #11a3f0;           /* GPTWeb Blue - Main brand color */
    --theme-primary-dark: #0d8fd8;      /* Darker blue for pressed/active states */
    --theme-primary-light: #75d1ff;     /* Light blue for highlights/hovers */
    --theme-accent: #11a3f0;            /* Accent (same as primary) */
    --brand-blue: #11a3f0;              /* Alias for backward compatibility */
    
    /* User Colors (avatars, user messages) */
    --theme-secondary-dark: #e8956a;    /* User avatar, user message border */
    --theme-secondary-light: #f0b08a;   /* Lighter user accents */
    --theme-user: #e8956a;              /* Alias for user color */
    
    /* Action Colors (buttons, CTAs) */
    --theme-action: #f97316;            /* Send button, CTA buttons */
    --theme-action-light: #fb923c;      /* Lighter action states */
    --theme-action-dark: #ea580c;       /* Button hover/pressed */
    --theme-action-text: #ffffff;       /* Text on action/primary buttons */
    
    /* Neutral Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-dark: #0f172a;
    --bg-sidebar: #f8fafc;
    
    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    
    /* Border Colors */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;
    
    /* Interactive Colors */
    --hover-bg: #f1f5f9;
    --active-bg: #e2e8f0;
    --focus-ring: #11a3f0;              /* GPTWeb Blue for focus states */
    
    /* Status Colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Spacing */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 60px;
    --header-height: 60px;
    
    /* Mermaid Theme Variables - Light Theme */
    --mermaid-edge-text-color: #000000;
    --mermaid-edge-bg-color: #ffffff;
    --mermaid-edge-border-color: #000000;
    --diagram-gantt-text: #333333;  /* Gantt task labels - always dark (canvas is always light) */
    
    /* Campaign Theme Variables - Light Theme */
    --campaign-bg-start: transparent;
    --campaign-bg-end: transparent;
    --campaign-text: var(--text-primary);
    --campaign-icon: #ff8c42;  /* Orange bullhorn */
    --campaign-cta-bg: var(--theme-primary);
    --campaign-cta-text: #ffffff;
    --campaign-dismiss-bg: var(--bg-secondary);
    --campaign-dismiss-border: var(--border-light);
    --input-bg: var(--bg-primary);
    
    /* Chat Theme Variables - Bubble Styling */
    --chat-user-bubble-bg: var(--theme-primary);
    --chat-user-bubble-text: #ffffff;
    --chat-user-bubble-radius: 16px 16px 4px 16px;
    --chat-user-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    --chat-ai-bubble-bg: var(--bg-tertiary);
    --chat-ai-bubble-text: var(--text-primary);
    --chat-ai-bubble-radius: 16px 16px 16px 4px;
    --chat-ai-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    /* Chat Input Area */
    --chat-input-bg: var(--bg-secondary);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-input-border: 1px solid var(--border-light);
    --chat-input-radius: 24px;
    
    /* Chat Send Button */
    --chat-send-bg: var(--theme-primary);
    --chat-send-hover-bg: var(--theme-primary-dark);
    --chat-send-icon-color: #ffffff;
    --chat-send-radius: 50%;
    --chat-send-size: 40px;
    
    /* Chat Typography */
    --chat-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --chat-font-size: 14px;
    --chat-line-height: 1.6;
    
    /* Chat Avatars */
    --chat-avatar-size: 36px;
    --chat-avatar-radius: 50%;
    
    /* Chat Container/Layout */
    --chat-container-max-width: 900px;
    --chat-container-padding: 16px;
    --chat-message-spacing: 12px;
    
    /* ========================================
       VISITOR FONT SETTINGS (Admin-configurable)
       These apply to visitor-facing UI only.
       Admin panels use hardcoded GPTWeb brand fonts.
       ======================================== */
    
    /* Global Visitor Font Settings */
    --visitor-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --visitor-base-font-size: 14px;
    --visitor-letter-spacing: 0em;
    --visitor-line-height: 1.5;
    
    /* Menu Font Settings (Sidebar, Prompts, Favorites) */
    --visitor-menu-font-family: inherit;
    --visitor-menu-font-size: 14px;
    --visitor-menu-header-font-size: 12px;
    --visitor-menu-header-font-weight: 600;
    --visitor-menu-item-font-weight: 400;
    
    /* Mobile Font Settings */
    --visitor-mobile-menu-font-size: 15px;
    --visitor-mobile-header-font-size: 12px;
    --visitor-mobile-item-padding: 10px;
    --visitor-mobile-divider-padding: 10px;
    
    /* Menu Color Accent Settings (Admin-configurable) */
    /* These default to inheriting from theme colors when not set */
    /* --visitor-menu-section-text-color: inherit from theme */
    /* --visitor-menu-section-info-icon-color: inherit from theme */
    /* --visitor-menu-divider-icon-color: inherit from theme */
    /* --visitor-menu-divider-text-color: inherit from theme */
    /* --visitor-menu-item-icon-color: inherit from theme */
    /* --visitor-menu-item-text-color: inherit from theme */
    
    /* Response Font Settings (AI Responses) */
    /* NOTE: Works WITH user typography settings (--typo-scale, --typo-spacing-scale) */
    --visitor-response-font-family: inherit;
    --visitor-response-font-size-base: 14px;
    --visitor-response-line-height-base: 1.6;
}

/* Mermaid Edge Label Fallback Styles */
/* Provides global fallback for edge labels before themeCSS is injected */
.mermaid-diagram .edgeLabel text,
.mermaid-diagram .edge-label text,
.mermaid-diagram g.edgeLabel text,
.mermaid-diagram g[class*="edgeLabel"] text {
    fill: var(--mermaid-edge-text-color) !important;
    color: var(--mermaid-edge-text-color) !important;
    stroke: none !important;
}

.mermaid-diagram .edgeLabel rect,
.mermaid-diagram .edge-label rect,
.mermaid-diagram g.edgeLabel rect,
.mermaid-diagram g[class*="edgeLabel"] rect {
    fill: var(--mermaid-edge-bg-color) !important;
    stroke: var(--mermaid-edge-border-color) !important;
    stroke-width: 1px !important;
    opacity: 1 !important;
}

/* Mermaid SVG Cleanup */
/* Hide debug elements and empty artifacts */
.mermaid-diagram svg title,
.mermaid-diagram svg desc,
.diagram-container svg title,
.diagram-container svg desc,
svg[id*="mermaid"] title,
svg[id*="mermaid"] desc {
    display: none !important;
}

/* Hide any floating span elements from Mermaid */
.mermaid-diagram > span,
.diagram-container > span {
    display: none !important;
}

/* Hide only EMPTY edge label foreignObjects (not node labels!) */
.mermaid-diagram svg g.edgeLabel foreignObject[width="4"],
.diagram-container svg g.edgeLabel foreignObject[width="4"],
.mermaid-diagram svg g[class*="edgeLabel"] foreignObject[width="4"] {
    display: none !important;
}

/* Hide empty spans in edge labels */
.mermaid-diagram svg g.edgeLabel span.edgeLabel:empty,
.diagram-container svg g.edgeLabel span.edgeLabel:empty {
    display: none !important;
}

/* ============================================ */
/* COMPREHENSIVE DIAGRAM STYLING (matches print preview) */
/* ============================================ */

/* GANTT DIAGRAM - Alternating swim lane colors */
.mermaid-diagram svg .section0,
.mermaid-diagram svg .section2,
.mermaid-diagram svg .section4,
.mermaid-diagram svg .section6,
.mermaid-diagram svg .section8 {
    fill: #e3f2fd !important;
    opacity: 1 !important;
}

.mermaid-diagram svg .section1,
.mermaid-diagram svg .section3,
.mermaid-diagram svg .section5,
.mermaid-diagram svg .section7,
.mermaid-diagram svg .section9 {
    fill: #f5f5f5 !important;
    opacity: 1 !important;
}

/* Gantt task bars */
.mermaid-diagram svg .task,
.mermaid-diagram svg [class*="task"]:not(text):not(tspan) {
    fill: var(--diagram-node-fill, #11a3f0) !important;
    stroke: var(--diagram-node-stroke, #357ABD) !important;
}

/* Gantt section titles */
.mermaid-diagram svg .sectionTitle,
.mermaid-diagram svg [class*="sectionTitle"] {
    fill: #333333 !important;
}

/* SEQUENCE DIAGRAM - Actor styling */
.mermaid-diagram svg .actor rect,
.mermaid-diagram svg g.actor rect {
    fill: var(--diagram-node-fill, #11a3f0) !important;
    stroke: var(--diagram-node-stroke, #357ABD) !important;
    stroke-width: 2px !important;
}

.mermaid-diagram svg .actor-man circle,
.mermaid-diagram svg .actor-man line {
    fill: var(--diagram-node-fill, #11a3f0) !important;
    stroke: var(--diagram-node-fill, #11a3f0) !important;
    stroke-width: 2px !important;
}

.mermaid-diagram svg .actor text,
.mermaid-diagram svg g.actor text {
    fill: #ffffff !important;
    font-weight: 600 !important;
}

/* Sequence lifelines and messages */
.mermaid-diagram svg .messageLine0,
.mermaid-diagram svg .messageLine1 {
    stroke: var(--diagram-node-stroke, #357ABD) !important;
}

.mermaid-diagram svg .messageText {
    fill: #333333 !important;
}

/* FLOWCHART - Node styling */
.mermaid-diagram svg .node rect,
.mermaid-diagram svg .node polygon,
.mermaid-diagram svg .node circle {
    fill: var(--diagram-node-fill, #11a3f0) !important;
    stroke: var(--diagram-node-stroke, #357ABD) !important;
    stroke-width: 2px !important;
}

.mermaid-diagram svg .node text,
.mermaid-diagram svg .nodeLabel {
    fill: var(--diagram-node-text, #ffffff) !important;
    font-weight: 600 !important;
}

/* Cluster/subgraph styling */
.mermaid-diagram svg .cluster rect {
    fill: var(--diagram-cluster-bg, #f8f9fa) !important;
    stroke: var(--diagram-cluster-border, #357ABD) !important;
}

.mermaid-diagram svg .cluster text,
.mermaid-diagram svg .cluster-label text {
    fill: var(--diagram-cluster-text, #333333) !important;
}

/* Dark Theme - Python/Cursor Inspired Colors */
[data-theme="dark"] {
    /* Primary Colors - Adjusted for dark theme */
    --theme-primary: #75d1ff;
    --brand-blue: #75d1ff; /* Alias for theme-primary - used in many places */
    
    /* Mermaid Theme Variables - Dark Theme */
    --mermaid-edge-text-color: #ffffff;
    --mermaid-edge-bg-color: #1a1a1a;
    --mermaid-edge-border-color: #75d1ff;
    --diagram-gantt-text: #333333;  /* Gantt task labels - always dark (canvas is always light) */
    --theme-primary-dark: #11a3f0;
    --theme-primary-light: #7BB3F0;
    --theme-accent: #75d1ff;
    
    /* Cursor-inspired accent colors */
    --editor-primary: #4ec9b0;         /* Teal accent for special elements */
    --editor-success: #6a9955;        /* Green for success/positive */
    --editor-warning: #dcdcaa;       /* Yellow for highlights */
    --editor-info: #ce9178;       /* Orange for strings/warm accents */
    --editor-special: #c586c0;       /* Purple for keywords */
    
    /* Background Colors - Python/Cursor Dark Theme */
    --bg-primary: #1e1e1e;          /* Main background */
    --bg-secondary: #252526;        /* Secondary panels */
    --bg-tertiary: #2d2d30;         /* Tertiary elements */
    --bg-dark: #0c0c0c;            /* Darkest elements */
    --bg-sidebar: #252526;          /* Sidebar background */
    
    /* Text Colors - High contrast for readability */
    --text-primary: #d4d4d4;        /* Primary text - light gray */
    --text-secondary: #cccccc;      /* Secondary text */
    --text-muted: #969696;          /* Muted text */
    --text-light: #6a6a6a;         /* Light text */
    
    /* Chat-specific colors */
    --chat-user-bg: #2d2d30;        /* User message background */
    --chat-assistant-bg: #252526;   /* Assistant message background */
    --chat-user-text: #4ec9b0;      /* User text - teal */
    --chat-assistant-text: #d4d4d4; /* Assistant text - standard */
    
    /* Border Colors - Subtle borders */
    --border-light: #3e3e42;        /* Light borders */
    --border-medium: #464647;       /* Medium borders */
    --border-dark: #5a5a5a;         /* Dark borders */
    
    /* Interactive Colors */
    --hover-bg: #2a2d2e;           /* Hover background */
    --active-bg: #37373d;          /* Active background */
    --focus-ring: #4ec9b0;         /* Focus ring - teal */
    
    /* Status Colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Input/Search Colors */
    --input-bg: #3c3c3c;           /* Input background */
    --input-border: #464647;       /* Input border */
    --input-focus: #4ec9b0;        /* Input focus - teal */
    
    /* Shadows - Darker shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    
    /* Campaign Theme Variables - Dark Theme */
    --campaign-bg-start: transparent;
    --campaign-bg-end: transparent;
    --campaign-text: var(--text-primary);
    --campaign-icon: #4ec9b0;  /* Teal bullhorn (Cursor-inspired) */
    --campaign-cta-bg: var(--theme-primary);
    --campaign-cta-text: #ffffff;
    --campaign-dismiss-bg: var(--bg-secondary);
    --campaign-dismiss-border: var(--border-light);
    --input-bg: var(--bg-secondary);
    
    /* Chat Theme Variables - Dark Theme */
    --chat-user-bubble-bg: var(--theme-primary);
    --chat-user-bubble-text: #ffffff;
    --chat-user-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    
    --chat-ai-bubble-bg: var(--bg-tertiary);
    --chat-ai-bubble-text: var(--text-primary);
    --chat-ai-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    
    --chat-input-bg: var(--bg-tertiary);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-input-border: 1px solid var(--border-medium);
    
    --chat-send-bg: var(--theme-primary);
    --chat-send-hover-bg: var(--theme-primary-dark);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

html, body {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
}

/* W34p (2026-04-27): hide the hero-footer-brand corner tab by default
   regardless of which layout is active. The element is rendered
   unconditionally by SSR (index.html, just before </body>) for layout-
   loader simplicity — the hero partial is supposed to flip it to
   `display: inline-flex` only when the active layout is hero.
   Previously the default `display: none` rule lived ONLY in
   styles-layout-hero.css, which the layout-loader does NOT load on
   left-nav / top-nav tenants. Result on those tenants: the SSR div
   had zero CSS, applyBrandingToUI populated the inner `<img>` with the
   tenant logo and switched its inline style to `display: inline-block`,
   and visitors saw a full-size logo painted at the very bottom of the
   page (visible after scrolling past short pages or when chat history
   pushed the body height past the viewport — exactly the production
   bug reported on /q/* short-link pages with cached responses on
   gptweb.com).
   The hero override `body[data-layout="hero"]:not(#_) .hero-footer-brand`
   in styles-layout-hero.css still wins (specificity 1,2,2 vs this
   rule's 0,1,0) when the partial loads, so hero pages are unaffected. */
.hero-footer-brand {
    display: none;
}

/* Background Pattern Layer
   Pattern CSS (background-image + background-size) is injected by the theme CSS file
   targeting body.has-bg-pattern directly — the pattern IS the body background.
   Panels get semi-transparent backgrounds so the pattern shows through.
   --glass-header / --glass-sidebar / --glass-footer / --glass-input are set via JS per-panel (default 60%). */

html body.has-bg-pattern .top-nav {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    box-shadow: none !important;
}

html body.has-bg-pattern .sidebar {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-right-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

body.has-bg-pattern .main-content {
    background: transparent;
}

html body.has-bg-pattern .input-bar-fixed {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-input, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-input, 60%), transparent) !important;
}

html body.has-bg-pattern .floating-profile-wrapper {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

/* Frosted glass: blur behind transparent nav elements.
   --glass-frost is set via JS as a px value (0 = off, up to 20px).
   Applied to all panels that have glass transparency. */
body.has-bg-pattern .top-nav,
body.has-bg-pattern .sidebar,
body.has-bg-pattern .input-bar-fixed,
body.has-bg-pattern .sidebar-footer,
body.has-bg-pattern .sidebar-social-icons,
body.has-bg-pattern .floating-profile-wrapper,
body.has-bg-pattern .sidebar-mobile-header {
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

body.has-bg-pattern .floating-dropdown-menu {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-footer, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
    z-index: 1200;
}

body.has-bg-pattern .profile-dropdown-menu {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-footer, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

html body.has-bg-pattern .sidebar-footer {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

html body.has-bg-pattern .sidebar-social-icons {
    background: transparent !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

/* Accordion menu dividers: --glass-accordion is set from JS as sidebar + 10%, min 10% */
/* Glass-accordion tint only shows when Navigation Container Background toggle is ON */
html body.has-bg-pattern .menu-divider-header {
    background: transparent !important;
}

html body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion, 50%), transparent) !important;
}

html body.has-bg-pattern .menu-divider-header:hover {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion-hover, 70%), transparent) !important;
}

html body.has-bg-pattern .chat-item:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .chat-item.active {
    background: color-mix(in srgb, var(--active-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .profile-main:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .profile-main:active {
    background: color-mix(in srgb, var(--active-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .user-profile-card {
    background: transparent !important;
}

html body.has-bg-pattern .section-header {
    background: transparent !important;
}

html body.has-bg-pattern .menu-divider.always-open .menu-divider-header:hover {
    background: transparent !important;
}

html body.has-bg-pattern .floating-profile-card .profile-dropdown-trigger:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .input-bar-fixed.profile-inline > .floating-profile-card {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-right-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

html body.has-bg-pattern .sidebar-toggle:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html body.has-bg-pattern .sidebar-mobile-header {
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

/* Glass Modals: visitor-facing modals (campaign, contact/demo/trial, settings, clear chat).
   Admin panel modals keep their opaque backgrounds. */
html body.has-bg-pattern #campaignDisplayModal .modal-content,
html body.has-bg-pattern .contact-modal,
html body.has-bg-pattern #settingsModal .modal-content,
html body.has-bg-pattern #clearChatModal .modal-content {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-modal, 80%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-modal-frost, 0px));
    backdrop-filter: blur(var(--glass-modal-frost, 0px));
}

html body.has-bg-pattern #campaignDisplayModal,
html body.has-bg-pattern .modal:has(.contact-modal),
html body.has-bg-pattern #settingsModal,
html body.has-bg-pattern #clearChatModal {
    background: color-mix(in srgb, rgba(0,0,0,0.5) var(--glass-modal, 80%), transparent);
}

/* Glass Content: semi-transparent chat bubbles and input when toggled on.
   --glass-content-opacity = sidebar opacity + 10% (capped at 90%), set via JS. */
html body.has-bg-pattern.glass-content .user-message .message-content {
    background: color-mix(in srgb, var(--bg-secondary) var(--glass-content-opacity, 70%), transparent) !important;
}

html body.has-bg-pattern.glass-content .assistant-message .message-content {
    background: color-mix(in srgb, var(--bg-tertiary) var(--glass-content-opacity, 70%), transparent) !important;
}

html[data-theme="dark"] body.has-bg-pattern.glass-content .user-message .message-content {
    background: color-mix(in srgb, var(--chat-user-bg, var(--bg-secondary)) var(--glass-content-opacity, 70%), transparent) !important;
}

html[data-theme="dark"] body.has-bg-pattern.glass-content .assistant-message .message-content {
    background: color-mix(in srgb, var(--chat-assistant-bg, var(--bg-tertiary)) var(--glass-content-opacity, 70%), transparent) !important;
}

html body.has-bg-pattern.glass-content .chat-input-wrapper {
    background: color-mix(in srgb, var(--input-bg, var(--bg-secondary)) var(--glass-content-opacity, 70%), transparent) !important;
}

/* ---- Glass overrides for embed / widget / mobile / no-header layouts ----
   These use higher-specificity selectors to beat the opaque background: !important
   declarations inside those mode-specific rules. */
html.embed-mode body.has-bg-pattern .sidebar,
html.widget-mode body.has-bg-pattern .sidebar {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-right-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .top-nav,
html.widget-mode body.has-bg-pattern .top-nav {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .input-bar-fixed,
html.widget-mode body.has-bg-pattern .input-bar-fixed {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-input, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-input, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .sidebar-footer,
html.widget-mode body.has-bg-pattern .sidebar-footer {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .sidebar-social-icons,
html.widget-mode body.has-bg-pattern .sidebar-social-icons {
    background: transparent !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .floating-profile-wrapper,
html.widget-mode body.has-bg-pattern .floating-profile-wrapper {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}

html.embed-mode body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header,
html.widget-mode body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion, 50%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .menu-divider-header:hover,
html.widget-mode body.has-bg-pattern .menu-divider-header:hover {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion-hover, 70%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .sidebar-mobile-header,
html.widget-mode body.has-bg-pattern .sidebar-mobile-header {
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

html.embed-mode body.has-bg-pattern .chat-item:hover,
html.widget-mode body.has-bg-pattern .chat-item:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html.embed-mode body.has-bg-pattern .chat-item.active,
html.widget-mode body.has-bg-pattern .chat-item.active {
    background: color-mix(in srgb, var(--active-bg) 60%, transparent) !important;
}

html.embed-mode body.has-bg-pattern .profile-main:hover,
html.widget-mode body.has-bg-pattern .profile-main:hover {
    background: color-mix(in srgb, var(--hover-bg) 60%, transparent) !important;
}

html.embed-mode body.has-bg-pattern .user-profile-card,
html.widget-mode body.has-bg-pattern .user-profile-card {
    background: transparent !important;
}

html.embed-mode body.has-bg-pattern .section-header,
html.widget-mode body.has-bg-pattern .section-header {
    background: transparent !important;
}

/* No-header layout glass */
body.has-bg-pattern.layout-no-header .sidebar {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-right-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}
body.has-bg-pattern.layout-no-header .sidebar-footer {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}
body.has-bg-pattern.layout-no-header .sidebar-social-icons {
    background: transparent !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}
body[data-nav-container-bg="true"].has-bg-pattern.layout-no-header .menu-divider-header {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion, 50%), transparent) !important;
}
body.has-bg-pattern.layout-no-header .input-bar-fixed {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-input, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-input, 60%), transparent) !important;
}
body.has-bg-pattern.layout-no-header .sidebar-mobile-header {
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}
html.embed-mode body.has-bg-pattern.layout-no-header .sidebar-mobile-header {
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

/* Sidebar internal toggle (no-header layout hamburger area) glass */
body.has-bg-pattern .sidebar-internal-toggle,
html.embed-mode body.has-bg-pattern .sidebar-internal-toggle,
html.widget-mode body.has-bg-pattern .sidebar-internal-toggle {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}

/* Mobile sidebar glass override - ensures mobile overlay gets glass too */
@media (max-width: 768px) {
    html body.has-bg-pattern .sidebar {
        background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
        border-right-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
    }
    html body.has-bg-pattern .sidebar-footer {
        background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
        border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
    }
    html body.has-bg-pattern .sidebar-social-icons {
        background: transparent !important;
        border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
    }
    html body.has-bg-pattern .top-nav {
        background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
        border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    }
    html body.has-bg-pattern .input-bar-fixed {
        background: color-mix(in srgb, var(--bg-primary) var(--glass-input, 60%), transparent) !important;
        border-top-color: color-mix(in srgb, var(--border-light) var(--glass-input, 60%), transparent) !important;
    }
    html body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header {
        background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion, 50%), transparent) !important;
    }
    html body.has-bg-pattern .sidebar-mobile-header {
        background: transparent !important;
        border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
    }
}

/* Pause background pattern animations when admin panel is open.
   Prevents animated patterns (starfield, pulsegrid, deepspace, etc.) from
   bleeding through the admin overlay or affecting admin panel rendering.
   Force opacity to 1 so patterns don't freeze in a dimmed state. */
body.has-bg-pattern.admin-panel-open,
body.has-bg-pattern.admin-panel-open::before,
body.has-bg-pattern.admin-panel-open::after {
    animation-play-state: paused !important;
    opacity: 1 !important;
}

/* Top Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sidebar-toggle {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    min-width: 42px;
    min-height: 42px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.sidebar-toggle:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    height: 32px;
    width: auto;
    aspect-ratio: auto;
    object-fit: contain;
    max-height: 32px;
}

.app-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: inline;
}

.app-title:empty {
    visibility: hidden;
}

.app-title-mobile {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: none;
}

.app-title-mobile:empty {
    visibility: hidden;
}

/* Mobile devices (phones and small tablets): Show mobile tagline */
@media (max-width: 1365px) {
    .app-title {
        display: none;
    }
    
    .app-title-mobile {
        display: inline;
    }
}

@media (max-width: 768px) {
    .nav-left {
        gap: 8px;
    }
    .sidebar-toggle {
        padding: 4px;
        min-width: 42px;
        min-height: 42px;
        font-size: 18px;
    }
    .top-nav {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--theme-primary);
    background: var(--hover-bg);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-button {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
}

.nav-button:hover {
    background: var(--theme-primary-dark);
    color: var(--theme-action-text);
}

.demo-btn {
    background: transparent;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

/* Enhanced button styles - primary/secondary */
.nav-button-primary {
    background: var(--theme-action, var(--theme-primary)) !important;
    color: var(--theme-action-text) !important;
    border: 2px solid var(--theme-action, var(--theme-primary)) !important;
}

.nav-button-primary:hover {
    background: var(--theme-action-dark, var(--theme-primary-dark)) !important;
    border-color: var(--theme-action-dark, var(--theme-primary-dark)) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.nav-button-secondary {
    background: transparent !important;
    color: var(--theme-primary) !important;
    border: 2px solid var(--theme-primary) !important;
}

.nav-button-secondary:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Text only style - plain link, no decoration */
.nav-button-text {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 10px 12px !important;
    font-weight: 500;
}

/* Tighten gap between social icons and text-only buttons (Login) */
.social-icons-header + .nav-button-text {
    margin-left: -18px;
}

.nav-button-text:hover {
    color: var(--theme-primary) !important;
    text-decoration: underline;
}

/* ==================== HEADER NAV MODE ====================
   All header-nav layout rules are gated behind min-width: 769px so
   they NEVER apply on mobile. On mobile (<=768px) the normal sidebar
   layout takes over — no cascade overrides needed. */
@media (min-width: 769px) {
    .header-nav-mode .top-nav {
        height: var(--header-nav-height, 70px);
    }

    .header-nav-mode .sidebar-toggle {
        display: none !important;
    }

    .header-nav-mode .sidebar {
        display: none !important;
    }

    .header-nav-mode .main-content {
        margin-left: 0 !important;
    }

    .header-nav-mode .header-nav-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* W440 (2026-05-02): width = max(admin slider, viewport-tier floor).
         * The floor is set by stacked @media tiers in styles-layout-top-nav.css
         * (--header-nav-header-floor, default 0). Admin's value wins when it
         * is wider than the floor at the current viewport, so admins who
         * picked 80%+ never see the smooth ramp; admins who picked narrow
         * values (e.g. 55%) ramp up to 65/75/85/90 at intermediate tiers
         * and 95 at the W420 mobile breakpoint. */
        width: calc(max(var(--header-nav-header-width, var(--chat-area-width, 75)), var(--header-nav-header-floor, 0)) * 1vw);
        max-width: 100%;
        margin: 0 auto;
        height: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .header-nav-mode .chat-messages {
        /* W440 — see comment on .header-nav-content above. */
        width: calc(max(var(--header-nav-results-width, var(--chat-area-width, 75)), var(--header-nav-results-floor, 0)) * 1vw) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* padding-top reserves a strip at the top of the chat-messages
           scroll container so the FIRST message renders below the fixed
           top-nav header on initial load. Subsequent scrolling is owned
           by the `scroll-margin-top` override on `.message` below —
           do NOT add `scroll-padding-top` here or scrollIntoView will
           double-offset (container padding + target margin are ADDITIVE
           per the CSS scroll-snap spec; v1.0.407 hit this bug). */
        padding-top: calc(var(--header-nav-height, 70px) + 12px) !important;
    }

    .header-nav-mode .input-bar-fixed {
        left: 0 !important;
        width: 100% !important;
    }

    .header-nav-mode .input-bar-content {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .header-nav-mode .main-container {
        margin-top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    .header-nav-mode .floating-profile-wrapper {
        display: none !important;
    }

    .header-nav-mode .chat-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .header-nav-mode .app-title,
    .header-nav-mode .app-title-mobile {
        display: none !important;
    }
}

.header-nav-mode .header-nav-content.header-content-full {
    width: 100% !important;
    max-width: 100% !important;
}

.header-nav-mode .main-nav {
    gap: 2px;
}

.header-nav-mode .nav-center {
    flex: 1;
    justify-content: flex-start;
    padding-left: 12px;
}

/* Header nav items */
.header-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.header-nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--visitor-menu-divider-text-color, var(--text-primary));
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.header-nav-item-single .header-nav-label {
    color: var(--visitor-menu-item-text-color, var(--text-primary));
}

.header-nav-item-single .header-nav-label i:first-child {
    color: var(--visitor-menu-item-icon-color, var(--text-muted));
}

.header-nav-label:hover {
    background: var(--bg-secondary);
}

.header-nav-item.open .header-nav-label {
    background: var(--bg-secondary);
}

.header-nav-label i:first-child {
    font-size: 13px;
    width: 16px;
    text-align: center;
    color: var(--visitor-menu-divider-icon-color, var(--text-muted));
}

.header-nav-label span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--visitor-menu-divider-text-color, var(--text-primary));
}

.header-nav-chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
    margin-left: 2px;
}

.header-nav-item.open .header-nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown panels */
.header-nav-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-width: min(400px, calc(100vw - 32px));
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    padding: 6px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.header-nav-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.header-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.header-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s ease;
}

.header-nav-dropdown-item:hover {
    background: var(--bg-secondary);
}

.header-nav-dropdown-item i {
    font-size: 12px;
    width: 16px;
    text-align: center;
    color: var(--visitor-menu-item-icon-color, var(--text-muted));
    flex-shrink: 0;
}

.header-nav-dropdown-item span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--visitor-menu-item-text-color, var(--text-primary));
}

/* Header profile avatar */
.header-profile-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.header-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 14px;
    padding: 0;
}

.header-profile-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.2);
}

.header-profile-avatar.open {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.25);
}

.header-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.header-profile-avatar i {
    font-size: 15px;
}

.header-profile-avatar .user-avatar-initials {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-action-text);
}

/* Header profile dropdown */
.header-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1001;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform-origin: top right;
}

.header-profile-wrapper.open .header-profile-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.header-profile-dropdown .profile-info-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg,
        rgba(var(--theme-primary-rgb, 59, 130, 246), 0.08) 0%,
        rgba(var(--theme-primary-rgb, 59, 130, 246), 0.03) 100%);
}

.header-profile-dropdown .profile-info-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
    font-size: 16px;
    overflow: hidden;
}

.header-profile-dropdown .profile-info-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.header-profile-dropdown .profile-info-avatar .user-avatar-initials {
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-action-text);
}

.header-profile-dropdown .profile-info-text {
    flex: 1;
    min-width: 0;
}

.header-profile-dropdown .profile-dropdown-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-profile-dropdown .profile-dropdown-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-profile-dropdown .dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}

.header-profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s ease;
}

.header-profile-dropdown .dropdown-item:hover {
    background: var(--bg-secondary);
}

.header-profile-dropdown .dropdown-item:last-child {
    border-radius: 0 0 12px 12px;
}

.header-profile-dropdown .dropdown-item i {
    font-size: 13px;
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}

/* Context badges (admin panel) */
.context-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.context-badge-desktop { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.context-badge-embed { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.context-badge-flyout { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.context-badge-mobile { background: rgba(249, 115, 22, 0.15); color: #f97316; }
/* W410 (2026-05-02) — Tablet badge sits visually between desktop
 * (blue) and mobile (orange). Used alongside MOBILE on top-nav
 * settings whose ≤1400 breakpoint covers tablets in any
 * orientation (iPad mini, Air, Pro 11", Pro 12.9") so admins
 * scanning the panel can see at a glance which controls also
 * apply on tablets. */
.context-badge-tablet { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.context-badge-all { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.context-badge-sidebar { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* Greyed-out settings group (admin panel) */
.menu-setting-disabled {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}

/* No-JS safety net: force header to full width only at very narrow
   desktop viewports (≤1024px — below hamburger engagement at 1200px).
   At 1025-1599px the admin-configured width is respected and the
   content-aware JS (`_checkHeaderNavOverflow` + resize handler in
   script.js) dynamically adds/removes `.header-content-full` based on
   actual content overflow. Raising this threshold to 1599px caused the
   configured header width (e.g. 75%) to be ignored on every normal
   desktop monitor (v1.0.405 bug). */
@media (max-width: 1024px) {
    .header-nav-mode .header-nav-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Hamburger collapse for header nav ──
   On viewports between 768px and 1024px, the full horizontal nav overflows.
   We hide inline nav items and show a hamburger button that opens a vertical
   overlay dropdown. Logo and profile avatar stay visible in the header.
   Below 768px, the full sidebar takes over as before. */

.header-hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    min-width: 42px;
    min-height: 42px;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.header-hamburger-btn:hover,
.header-hamburger-btn.open {
    background: var(--bg-hover);
}

.header-nav-overlay {
    display: none;
    position: fixed;
    top: var(--header-nav-height, 70px);
    left: 16px;
    width: min(400px, calc(100vw - 32px));
    /* v1.0.492 — `vh` fallback for non-supporting browsers; `dvh`
     * (dynamic viewport height) override for iOS Safari 15.4+ so
     * the overlay sizes against the actual visible viewport instead
     * of the URL-bar-collapsed value. Without dvh, the overlay
     * extends below the visible area on iPhone landscape with the
     * URL bar showing, making bottom items unreachable. */
    max-height: calc(100vh - var(--header-nav-height, 70px) - 24px);
    max-height: calc(100dvh - var(--header-nav-height, 70px) - 24px);
    overflow-y: auto;
    /* v1.0.492 — iOS Safari momentum scroll inside fixed-position
     * overflow containers. Without this, the overlay scrolls but
     * feels stuck/jerky on iPhone, and may not register the swipe
     * past the visible boundary. */
    -webkit-overflow-scrolling: touch;
    /* v1.0.492 — prevent scroll-chaining so when the overlay
     * reaches its top/bottom edge the touch scroll doesn't bleed
     * into the page below. */
    overscroll-behavior: contain;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 10001;
    flex-direction: column;
    font-family: var(--visitor-menu-font-family, inherit);
    font-size: var(--visitor-menu-font-size, 14px);
}

/* v1.0.492 — landscape phone: the chat input bar at the bottom of
 * the visible viewport (~80px on iPhone, position:fixed) sits ON TOP
 * of the overlay's bottom edge. Items in the bottom ~80px of the
 * overlay's scroll area end up hidden behind the input bar — Nick
 * reported the "Explainer" favorite at the bottom became unreachable
 * after expanding an accordion (which pushed it down past the visible
 * scroll area + behind the input bar).
 *
 * Fix: reserve more bottom space so the overlay's max-height stops
 * BEFORE the input bar. 96px = ~80px input bar + 16px breathing
 * room. Only applies on landscape phones (max-height: 500px) since
 * the input bar layout differs at other viewport sizes. */
@media (orientation: landscape) and (max-height: 500px) {
    .header-nav-overlay {
        max-height: calc(100vh - var(--header-nav-height, 70px) - 96px);
        max-height: calc(100dvh - var(--header-nav-height, 70px) - 96px);
    }
}
.header-nav-overlay.open {
    display: flex;
}

.overlay-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--visitor-menu-item-text-color, var(--text-primary));
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.overlay-menu-item:hover {
    background: var(--bg-hover);
}
.overlay-menu-item i:first-child {
    width: 18px;
    text-align: center;
    color: var(--visitor-menu-item-icon-color, var(--text-muted));
    flex-shrink: 0;
    font-size: 14px;
}
.header-nav-overlay .overlay-menu-item span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.overlay-menu-child {
    padding-left: 28px;
    font-size: 13px;
}

.overlay-menu-divider-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--visitor-menu-divider-text-color, var(--text-secondary));
    font-weight: var(--visitor-menu-header-font-weight, 600);
    font-size: var(--visitor-menu-header-font-size, 12px);
    letter-spacing: 0.5px;
    transition: background 0.15s;
}
.overlay-menu-divider-header:hover {
    background: var(--bg-hover);
}
.overlay-menu-divider-header i:first-child {
    width: 18px;
    text-align: center;
    color: var(--visitor-menu-divider-icon-color, var(--text-light));
    flex-shrink: 0;
    font-size: 14px;
}
.header-nav-overlay .overlay-menu-divider-header span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.overlay-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.overlay-menu-divider.open .overlay-chevron {
    transform: rotate(180deg);
}

.overlay-menu-divider-content {
    display: none;
    padding: 2px 0;
}
.overlay-menu-divider.open .overlay-menu-divider-content {
    display: block;
}
.overlay-menu-divider-content.overlay-animate {
    display: block;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    max-height: 500px;
}
.overlay-menu-divider:not(.open) .overlay-menu-divider-content.overlay-animate {
    max-height: 0;
}
.overlay-menu-divider.always-open .overlay-menu-divider-header {
    cursor: default;
}
.overlay-menu-divider.always-open .overlay-menu-divider-content {
    display: block;
}

.overlay-menu-separator {
    height: 1px;
    background: var(--border-light);
    margin: 6px 8px;
}

/* Glass treatment for the overlay when background pattern is active */
html body.has-bg-pattern .header-nav-overlay {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

/* Compact header: 768px to 1200px — hamburger replaces inline nav.
   CTAs, social icons, and profile avatar stay visible in header. */
@media (min-width: 769px) and (max-width: 1200px) {
    .header-nav-mode .header-hamburger-btn {
        display: flex;
    }
    .header-nav-mode .nav-center {
        display: none !important;
    }
}

/* Header nav on mobile: hide header-nav-specific UI elements.
   Base layout rules are gated behind min-width: 769px so sidebar
   layout is the natural default on mobile — no overrides needed. */
@media (max-width: 768px) {
    .header-profile-wrapper {
        display: none !important;
    }
    .header-hamburger-btn {
        display: none !important;
    }
    .header-nav-overlay {
        display: none !important;
    }
}

/* Glass treatment for header-nav dropdowns when background pattern is active */
html body.has-bg-pattern .header-nav-dropdown {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}
html body.has-bg-pattern .header-profile-dropdown {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

/* Sortable states */
.sortable-ghost {
    opacity: 0.3;
}

.sortable-chosen {
    opacity: 0.8;
}

.header-button-config .form-input,
.header-button-config .ie-icon-trigger {
    height: 40px;
    box-sizing: border-box;
}

input[type="color"].form-input {
    width: 48px;
    height: 40px;
    padding: 2px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}

.demo-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.trial-btn {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.trial-btn:hover {
    background: var(--theme-primary-dark);
}

.login-btn {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    font-weight: 500;
}

.login-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.user-avatar:hover {
    background: var(--hover-bg);
}

/* ==================== Social Icon Buttons ==================== */

.social-icons-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-icon-btn.header {
    width: 30px;
    height: 30px;
    border-radius: var(--social-icon-radius, 50%);
    font-size: 14px;
    color: var(--social-icon-color, var(--text-secondary));
    background: var(--social-icon-bg, transparent);
}

.social-icon-btn.header:hover {
    color: var(--social-icon-hover, var(--theme-primary));
}

/* Sidebar social icons — sits between sidebar-content and sidebar-footer in flex column.
   flex-shrink: 0 keeps it visible as the menu scrolls above it. */
.sidebar-social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
}

/* "Show container background" toggle OFF — overrides glass/pattern !important rules */
.sidebar-social-icons.no-container-bg,
.social-icons-mobile.no-container-bg {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* v1.0.491 — viewport-scoped sidebar social icon visibility.
 * The `Show in mobile navigation` toggle (config.show_mobile)
 * should put icons in the mobile sidebar drawer even when the
 * admin's "Show Icons In" placement is "Header" only. We render
 * to #sidebarSocialIcons in both cases and use these classes to
 * scope visibility to the right viewport:
 *   - .desktop-only: placement is sidebar/both AND show_mobile is OFF
 *     → hide on mobile (≤768px) so mobile drawer doesn't show icons
 *       the admin opted out of for the mobile slide-out
 *   - .mobile-only:  placement is header (NOT sidebar/both) AND
 *     show_mobile is ON
 *     → hide on desktop (>768px) so the desktop sidebar doesn't show
 *       icons that the admin only wanted in the mobile drawer
 *
 * When both classes are absent (placement: sidebar/both AND show_mobile:
 * true), icons show at all viewports — the natural intersection. */
@media (max-width: 768px) {
    .sidebar-social-icons.desktop-only {
        display: none !important;
    }
}
@media (min-width: 769px) {
    .sidebar-social-icons.mobile-only {
        display: none !important;
    }
}

.social-icon-btn.in-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--social-icon-radius, 50%);
    font-size: 15px;
    color: var(--social-icon-color, var(--text-secondary));
    background: var(--social-icon-bg, transparent);
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-icon-btn.in-sidebar:hover {
    color: var(--social-icon-hover, var(--theme-primary));
    background: var(--hover-bg);
}

.social-icons-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-light);
    margin-top: 8px;
}

.social-icon-btn.mobile {
    width: 36px;
    height: 36px;
    border-radius: var(--social-icon-radius, 50%);
    font-size: 16px;
    color: var(--social-icon-color, var(--text-secondary));
    background: var(--social-icon-bg, transparent);
}

.social-icon-btn.mobile:hover {
    color: var(--social-icon-hover, var(--theme-primary));
}

/* Admin social buttons config */
.social-network-row {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--bg-primary);
}

.social-networks-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Desktop: hide social icons in mobile nav */
@media (min-width: 769px) {
    .social-icons-mobile { display: none !important; }
}

/* Mobile: hide header social icons (shown in mobile nav instead if toggled) */
@media (max-width: 768px) {
    .social-icons-header { display: none !important; }
}

/* Main Container */
.main-container {
    display: flex;
    margin-top: var(--header-height);
    height: calc(100vh - var(--header-height));
    min-height: 0; /* Prevent flex overflow issues */
    overflow: hidden; /* Contain any overflow within main-container */
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 1000;  /* Below input bar (1001) on mobile */
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Preload collapsed state - applied before JavaScript runs */
.sidebar-collapsed-preload .sidebar {
    width: var(--sidebar-collapsed-width);
    transition: none !important;
}

.sidebar-collapsed-preload .sidebar .sidebar-header h3,
.sidebar-collapsed-preload .sidebar .section-header h4,
.sidebar-collapsed-preload .sidebar .chat-item span {
    display: none;
}

.sidebar-collapsed-preload .sidebar .sidebar-social-icons {
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
}

.sidebar-collapsed-preload .sidebar .social-icon-btn.in-sidebar {
    width: 32px;
    height: 32px;
    border-radius: var(--social-icon-radius, 50%);
    padding: 0;
    font-size: 15px;
}

.sidebar-collapsed-preload .sidebar .chat-item {
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}

.sidebar-collapsed-preload .sidebar .section-header,
.sidebar-collapsed-preload .sidebar .sidebar-header {
    justify-content: center;
}

.sidebar-collapsed-preload .sidebar .footer-button {
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto 8px auto;
    text-align: center;
    display: flex;
}

.sidebar-collapsed-preload .sidebar .footer-button span {
    display: none;
}

.sidebar-collapsed-preload .sidebar .footer-button i {
    margin: 0;
    width: auto;
    text-align: center;
}

.sidebar-collapsed-preload .sidebar .info-icon {
    display: none !important;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

.sidebar-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.add-section-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.add-section-btn:hover {
    background: var(--hover-bg);
    color: var(--theme-primary);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    /* Auto-hide scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.sidebar-content:hover {
    scrollbar-color: var(--border-medium) transparent;
}

.section {
    margin-bottom: 24px;
}

.section-header {
    padding: 10px 16px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Sidebar section headers - configurable vertical padding using sectionBottomGap */
/* Applied evenly to top and bottom for consistent spacing */
.sidebar .section-header,
.sidebar-section .section-header,
[data-section-id] .section-header {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
    padding-bottom: var(--visitor-menu-section-bottom-gap, 10px) !important;
    margin-bottom: 0 !important;
}

.section-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin: 0 !important; /* Reset browser default h4 margin */
    padding: 0 !important; /* Ensure no padding either */
    line-height: 1.2; /* Tighter line-height */
}

/* Info Icon and Tooltip Styles */
.info-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: help;
    color: var(--text-light);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.info-icon:hover {
    color: var(--theme-primary);
}

.info-icon i {
    font-size: 12px;
    pointer-events: none;
}

/* Tooltip */
.info-icon::after {
    content: attr(data-tooltip);
    position: fixed;
    top: var(--tooltip-top, 50px);
    left: calc(var(--sidebar-width) + 20px);
    background: var(--bg-dark);
    color: var(--theme-action-text);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.2s ease;
    z-index: 15000;
    box-shadow: var(--shadow-lg);
    max-width: 300px;
    min-width: 250px;
    white-space: normal;
    line-height: 1.5;
}

/* Tooltip arrow */
.info-icon::before {
    content: '';
    position: fixed;
    top: var(--arrow-top, 58px);
    left: calc(var(--sidebar-width) + 14px);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--bg-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.2s ease;
    z-index: 15000;
}

.info-icon:hover::after,
.info-icon:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Mobile tooltip styling - DOM-based approach */
.mobile-tooltip {
    position: fixed;
    background: var(--bg-dark);
    color: var(--theme-action-text);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: tooltipFadeIn 0.3s ease;
    max-width: calc(100vw - 40px);
}

.mobile-tooltip-content {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.mobile-tooltip-close {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 8px;
    font-style: italic;
}

/* Dark theme mobile tooltip */
[data-theme="dark"] .mobile-tooltip {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile info icon styling */
@media (max-width: 768px) {
    .info-icon {
        cursor: pointer;
        /* Force perfect square */
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        transition: background 0.15s ease, transform 0.15s ease;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        /* Prevent flex stretching */
        align-self: center !important;
        flex: 0 0 28px !important;
        /* Position adjustment */
        position: relative !important;
        margin: 0 !important;
    }
    
    .info-icon i {
        font-size: 13px !important;
        line-height: 1 !important;
        /* Let taps pass through to parent .info-icon */
        pointer-events: none !important;
    }
    
    .info-icon:active {
        background: var(--hover-bg);
        transform: scale(0.95);
    }
    
    .info-icon.tooltip-active {
        background: var(--theme-primary-light);
        color: var(--theme-action-text);
    }
    
    /* Completely hide/reset pseudo-elements on mobile */
    .info-icon::after,
    .info-icon::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* Collapsed sidebar adjustments */
.sidebar.collapsed .info-icon {
    display: none !important;
}

.section-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* First item in section should have minimal top spacing */
.section-items > .menu-divider:first-child {
    margin-top: 0;
}

/* First item spacing - controlled by visitor font settings */
.section-items > .menu-divider:first-child > .menu-divider-header {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px);
}

.section-items > .chat-item:first-child {
    margin-top: 0;
    padding-top: var(--visitor-menu-section-bottom-gap, 10px);
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.chat-item:hover {
    background: var(--hover-bg);
}

.chat-item.active {
    background: var(--active-bg);
    border-right: 3px solid var(--theme-primary);
}

.chat-item i {
    color: var(--text-light);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.chat-item span {
    color: var(--text-secondary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0; /* Allow text to shrink and ellipsis to work */
}

/* ========================================
   MENU DIVIDERS (Hierarchical Sections)
   For Prompt Library and Favorites with nested items
   ======================================== */

.menu-divider {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-divider-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-sidebar);
    transition: all 0.2s ease;
    user-select: none;
    overflow: hidden;
}

.menu-divider-header:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

.menu-divider-header i:first-child {
    color: var(--text-light);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.menu-divider-header span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow text to shrink and ellipsis to work */
}

.menu-divider-header .menu-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.menu-divider.expanded .menu-chevron {
    transform: rotate(180deg);
}

.menu-divider.collapsed .menu-chevron {
    transform: rotate(0deg);
}

/* Always Open mode - sections not collapsible */
.menu-divider.always-open .menu-divider-header {
    cursor: default;
}

.menu-divider.always-open .menu-divider-header:hover {
    background: var(--bg-sidebar); /* No hover effect */
}

/* v1.0.548 — Childless dividers render as flat labels, not expandable
   sections. The chevron is suppressed in the markup; here we also
   collapse the empty content shell so it doesn't push later items
   down, and switch the cursor to default for truly empty containers
   (sectionEnabled childless dividers re-override cursor:pointer
   below). */
.menu-divider.menu-divider-empty > .menu-divider-content {
    display: none;
}
.menu-divider.menu-divider-empty > .menu-divider-header {
    cursor: default;
}
.menu-divider.menu-divider-empty[data-section-page-enabled="true"] > .menu-divider-header {
    cursor: pointer;
}

.menu-divider-content {
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent !important;
}

body[data-nav-container-bg="true"] .menu-divider-content {
    background: var(--bg-secondary) !important;
}

/* Expanded animate state — max-height used only for the collapse/expand
   transition. 3000px is large enough for realistic admin configurations
   (75+ items) while still giving the CSS transition a number to animate
   against. When `toggleMenuSection` fires it overrides this with an
   inline `maxHeight = scrollHeight + 'px'`, so the cap only governs
   initial render for sections that start expanded via SSR / saved state.
   The old 500px cap caused items beyond that height to render OUTSIDE
   the box (no overflow:hidden in expanded state) and visually overlap
   the next accordion header — see image report April 17, fixed v1.0.415. */
.menu-divider-content.animate {
    transition: max-height 0.2s ease-out;
    max-height: 3000px;
    overflow: hidden;
}

.menu-divider.collapsed .menu-divider-content.animate {
    overflow: hidden;
    max-height: 0;
}

.menu-divider.collapsed .menu-divider-content:not(.animate) {
    display: none;
}

.menu-divider-content .chat-item {
    padding-left: 28px; /* Indent children - reduced for compact layout */
    font-size: 13px;
}

.menu-divider-content .chat-item i {
    font-size: 12px;
}

/* Mobile responsive styles for menu sections */
/* Note: min-height removed to allow admin control via padding settings */
/* Apple recommends 44px touch targets, but admins can choose tighter layouts */
@media (max-width: 768px) {
    .menu-divider-header {
        padding-top: var(--visitor-mobile-divider-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-divider-padding, 10px) !important;
        padding-left: 14px;
        padding-right: 14px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
        gap: 6px;
    }
    
    .menu-divider-header i:first-child {
        font-size: 14px;
        width: 18px;
    }
    
    .menu-divider-header .menu-chevron {
        font-size: 10px;
        padding: 4px;
    }
    
    .menu-divider-content .chat-item {
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
        padding-left: 26px;
        padding-right: 12px;
        display: flex;
        align-items: center;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
        gap: 6px;
    }
    
    .menu-divider-content .chat-item i {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .chat-item {
        gap: 6px;
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
        padding-left: 12px;
        padding-right: 12px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .chat-item i {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
        width: 16px;
    }
    
    .chat-item span {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
}

/* =====================================================================
   Long-label wrap for sidebar items (applies in every mode: standard,
   widget, embed; desktop and mobile).
   Narrow sidebars and flyouts can't fit long prompt/favorite titles on
   one line without truncating. Allow up to 2 lines before ellipsing on
   the third. The `title` attribute still gives the full label on hover
   (desktop) or long-press (touch).
   Exclusions:
   - `.sidebar.collapsed` desktop icon-rail — its spans are already
     display:none so they don't need wrap rules and we avoid affecting
     layout of the rail itself.
   - Floating/flyout submenu items have their own wrap rule below.
   ===================================================================== */
.sidebar:not(.collapsed) .chat-item span,
.sidebar:not(.collapsed) .menu-divider-header span {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sidebar:not(.collapsed) .chat-item,
.sidebar:not(.collapsed) .menu-divider-header {
    align-items: center;
}

/* =====================================================================
   FALLBACK FOLDER ICON FOR COLLAPSED SIDEBAR CONTAINERS
   ---------------------------------------------------------------------
   When an admin sets a divider container's icon to "none", nothing shows
   in the collapsed desktop rail except the chevron — confusing for users.
   We always render a hidden fallback `fa-folder` icon, and only reveal it
   when the sidebar is collapsed so visitors have a recognizable folder
   tap target. Expanded mode keeps the admin's "no icon" preference.
   ===================================================================== */
.menu-divider-fallback-icon {
    display: none !important;
}
.sidebar.collapsed .menu-divider-fallback-icon {
    display: inline-block !important;
}

/* Widget/Embed mode menu section adjustments */
html.embed-mode .menu-divider-header,
html.widget-mode .menu-divider-header {
    padding: 10px 12px;
    gap: 6px;
    font-size: 12px;
}

html.embed-mode .menu-divider-content .chat-item,
html.widget-mode .menu-divider-content .chat-item {
    padding-left: 24px;
    gap: 6px;
    font-size: 12px;
}

html.embed-mode .chat-item,
html.widget-mode .chat-item {
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
}

html.embed-mode .chat-item i,
html.widget-mode .chat-item i {
    font-size: 12px;
    width: 14px;
}

/* ========================================
   SIDEBAR FOOTER - USER PROFILE CARD
   Cross-platform compatible (Mac, Windows, Linux)
   Cross-browser compatible (Chrome, Safari, Edge, Firefox)
   Mobile-responsive with touch support
   ======================================== */

.sidebar-footer {
    padding: 0;
    border-top: 1px solid var(--border-light);
    margin-top: auto; /* Push to bottom */
    position: relative;
    background: var(--bg-sidebar);
}

/* User Profile Card Container */
.user-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
    position: relative;
    background: var(--bg-sidebar);
    transition: background-color 0.2s ease;
}

/* Main Profile Area (clickable) */
.profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0; /* Allow text truncation */
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    /* Ensure proper click target on all touch devices */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.profile-main:hover {
    background: var(--hover-bg);
}

.profile-main:active {
    background: var(--active-bg);
}

/* Profile Avatar */
.profile-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
    /* Cross-browser smooth rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.profile-avatar i {
    font-size: 18px;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .user-avatar-initials {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-action-text);
}

/* Profile Info Text */
.profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.profile-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Dropdown Trigger Button */
.profile-dropdown-trigger {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Touch-friendly on mobile */
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin: 0;
}

.profile-dropdown-trigger:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.profile-dropdown-trigger:active {
    background: var(--active-bg);
}

.profile-dropdown-trigger i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.profile-dropdown-trigger.active i {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.profile-dropdown-menu {
    position: fixed;
    z-index: 1100;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px;
    /* Will be positioned via JavaScript for cross-platform compatibility */
}

.dropdown-item {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.15s ease;
    font-family: inherit;
    /* Touch-friendly */
    -webkit-tap-highlight-color: transparent;
}

.dropdown-item:hover {
    background: var(--hover-bg);
}

.dropdown-item:active {
    background: var(--active-bg);
}

.dropdown-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}

/* Dark Theme Support */
[data-theme="dark"] .profile-dropdown-menu {
    background: var(--bg-dark);
    border-color: var(--border-dark);
}

[data-theme="dark"] .profile-dropdown-trigger:hover {
    color: var(--editor-primary);
}

/* Mobile Responsive Styles */
@media (max-width: 768px),
       (max-device-width: 768px),
       screen and (max-width: 768px) and (orientation: portrait),
       screen and (max-width: 768px) and (orientation: landscape) {
    
    .user-profile-card {
        padding: 10px 12px;
    }
    
    .profile-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
    }
    
    .profile-avatar i {
        font-size: 16px;
    }
    
    .profile-avatar .user-avatar-initials {
        font-size: 14px;
    }
    
    .profile-name {
        font-size: 14px;
    }
    
    .profile-subtitle {
        font-size: 11px;
    }
    
    .profile-dropdown-trigger {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .profile-dropdown-menu {
        min-width: 160px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .profile-name {
        font-size: 13px;
    }
    
    .profile-subtitle {
        font-size: 10px;
    }
    
    /* Compact menu items for small phones - use visitor variables */
    .chat-item {
        gap: 5px;
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
        padding-left: 10px;
        padding-right: 10px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .chat-item i {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
        width: 14px;
    }
    
    .chat-item span {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .menu-divider-header {
        padding-top: var(--visitor-mobile-divider-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-divider-padding, 10px) !important;
        padding-left: 10px;
        padding-right: 10px;
        gap: 5px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .menu-divider-header i:first-child {
        font-size: var(--visitor-mobile-menu-font-size, 15px);
        width: 14px;
    }
    
    .menu-divider-content .chat-item {
        padding-left: 22px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
}

/* Cross-browser compatibility fixes */

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    .profile-avatar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    .profile-dropdown-trigger {
        padding: 2px;
    }
}

/* Edge/IE compatibility */
@supports (-ms-ime-align: auto) {
    .profile-main {
        display: -ms-flexbox;
    }
}

/* Windows high contrast mode support */
@media (prefers-contrast: high) {
    .profile-dropdown-menu {
        border-width: 2px;
    }
}

/* Reduced motion support (accessibility) */
@media (prefers-reduced-motion: reduce) {
    .profile-main,
    .profile-dropdown-trigger,
    .profile-dropdown-trigger i,
    .dropdown-item {
        transition: none !important;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
    min-height: 0; /* Prevent flex overflow issues */
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    overflow: hidden;
    position: relative;
    min-height: 0; /* Prevent flex overflow issues */
}

.chat-header {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 0;
    padding-bottom: 280px;  /* Large space for fixed input bar (accounts for expanded textarea) */
    /* W34r (2026-04-27): scroll-padding-bottom so scrollIntoView with
       block:end lands the typing indicator and just-sent user messages
       ABOVE the floating input bar instead of behind it. The Layouts-
       launch (v1.0.443) chat-streaming refactor switched from raw
       scrollTop = scrollHeight (which ignored padding) to
       scrollIntoView (which respects scroll-padding) to fix hero's
       small panel-bottom gap; that broke left-nav and top-nav because
       only the hero partial set scroll-padding-bottom. Setting it
       here as the default fixes it for every layout. Hero overrides
       this with a smaller value (frame-inset + input-height) inside
       the partial so the indicator can ride right at the panel edge. */
    scroll-padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    scroll-behavior: smooth;
}

.message {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    scroll-margin-top: calc(var(--header-height, 60px) + 12px);
}

/* Top-nav mode: mirror sidebar's scroll-margin-top approach but use
   --header-nav-height (variable, admin-configurable) instead of
   --header-height (fixed 60px sidebar default). Same pattern as the
   base .message rule so sidebar and top-nav scroll positioning look
   identical — each new response lands just below the fixed header with
   ~12px of breathing room. The scroll container does NOT set
   `scroll-padding-top` (would stack additively per CSS scroll-snap
   spec, double-offsetting every response — the v1.0.407→v1.0.409 bug
   history has the detailed story). */
body.header-nav-mode .message,
body.header-nav-mode .welcome-message,
body.header-nav-mode #welcomeMessageContainer {
    scroll-margin-top: calc(var(--header-nav-height, 70px) + 12px);
}

.message-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-message .message-avatar {
    background: var(--theme-secondary-dark);
    color: var(--theme-action-text);
    padding: 0;
    overflow: hidden;
}

.user-message .message-avatar i {
    font-size: 20px; /* Make the avatar icon fill the circle better */
}

.assistant-message .message-avatar {
    background: var(--bg-tertiary);
    padding: 4px;
}

.assistant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.message-content {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    overflow-x: auto;
    max-width: 100%;
    font-size: var(--typo-base-size, 14px);  /* Uses typography setting */
    letter-spacing: -0.01em;  /* Slight tightening for Inter */
}

/* Ensure proper block-level display for all headers */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    display: block;
    width: 100%;
    text-indent: 0;
    padding-left: 0;
    margin-left: 0;
}

.message-content p {
    margin-bottom: calc(12px * var(--typo-spacing-scale, 1));
    color: var(--text-primary);
    line-height: calc(1.6 * var(--typo-spacing-scale, 1));
    font-weight: 400; /* Normal weight, not bold */
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 12px 0;
}

.message-content ul {
    margin: 12px 0;
    padding-left: 20px;
}

.message-content li {
    margin-bottom: calc(8px * var(--typo-spacing-scale, 1));
    color: var(--text-secondary);
    line-height: calc(1.6 * var(--typo-spacing-scale, 1));
}

/* Light theme chat message styling - LLM-style */
.user-message .message-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-left: 8px;
    border-left: 3px solid var(--theme-secondary-dark);
}

.user-message .message-content p {
    font-weight: 400; /* Normal weight */
    color: var(--text-primary);
}

.assistant-message .message-content {
    background: var(--bg-tertiary) !important;
    border-radius: 12px;
    padding: 16px;
    margin-left: 8px;
    border-left: 3px solid var(--theme-primary) !important;
}

.assistant-message .message-content p {
    font-weight: 400; /* Normal weight */
    color: var(--text-primary);
}

.assistant-message .message-content h1,
.assistant-message .message-content h2,
.assistant-message .message-content h3,
.assistant-message .message-content h4 {
    font-weight: 500; /* Medium weight for headers */
}

.assistant-message .message-content li {
    font-weight: 400; /* Normal weight for list items */
}

.assistant-message .message-wrapper {
    margin-left: 0;
}

/* Dark theme chat message styling - LLM-style */
[data-theme="dark"] .user-message .message-content {
    background: var(--chat-user-bg);
    border-left: 3px solid var(--editor-primary);
}

[data-theme="dark"] .user-message .message-avatar {
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
}

[data-theme="dark"] .user-message .message-content p {
    color: #e5e7eb;  /* Light text for user messages */
    font-weight: 400; /* Normal weight, not bold */
}

[data-theme="dark"] .assistant-message .message-content {
    background: var(--chat-assistant-bg);
    border-left: 3px solid var(--theme-primary) !important;
}

/* Dark theme uses user/secondary color for user messages */
[data-theme="dark"] .user-message .message-content {
    border-left: 3px solid var(--theme-secondary-dark, var(--theme-user, #e8956a));
}

[data-theme="dark"] .send-button {
    background: var(--send-button-bg, var(--theme-action, #fb923c));
    color: var(--send-icon-color, white);
}

[data-theme="dark"] .send-button:disabled {
    background: var(--send-button-bg, var(--theme-action, #fb923c));
    color: var(--send-icon-color, white);
    opacity: 0.6;
}

[data-theme="dark"] .send-button:not(:disabled) {
    background: var(--send-button-bg, var(--theme-action, #fb923c));
    color: var(--send-icon-color, white);
}

[data-theme="dark"] .send-button.has-text:not(:disabled) {
    background: var(--send-button-hover, var(--theme-primary-dark));
    color: var(--send-icon-color, white);
}

[data-theme="dark"] .send-button:hover:not(:disabled) {
    background: var(--send-button-hover, var(--theme-primary-dark));
    color: var(--send-icon-color, white);
}

[data-theme="dark"] .user-message .message-avatar {
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
}

/* Duplicate dark theme rule removed - see line ~2126 for main dark theme input styling */

[data-theme="dark"] .assistant-message .message-wrapper {
    margin-left: 0;
}

[data-theme="dark"] .assistant-message .message-content p {
    color: #f3f4f6;  /* Mostly white text for assistant */
    font-weight: 400; /* Normal weight, not bold */
}

[data-theme="dark"] .assistant-message .message-content h4 {
    color: #f3f4f6;  /* White for headers */
    font-weight: 500; /* Medium weight */
}

[data-theme="dark"] .assistant-message .message-content li {
    color: #e5e7eb;  /* Light gray for list items */
    font-weight: 400; /* Normal weight */
}

/* Dark theme deep link styling */
[data-theme="dark"] .message-content a.deep-link {
    color: var(--theme-primary-light, var(--theme-primary));
}
[data-theme="dark"] .message-content a.deep-link::after {
    color: var(--theme-primary-light, var(--theme-primary));
}
[data-theme="dark"] .message-content a.deep-link:hover {
    background: rgba(117, 209, 255, 0.1);
}
[data-theme="dark"] .topic-chip {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}
[data-theme="dark"] .topic-chip:hover {
    border-color: var(--campaign-cta-bg, var(--theme-primary-light, var(--theme-primary)));
    color: var(--campaign-cta-text, #fff);
    background: var(--campaign-cta-bg, var(--theme-primary-light, var(--theme-primary)));
}

/* Enhanced message formatting - Balanced LLM-style */
.message-content h1 {
    font-size: 17px;  /* Reduced from 20px */
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 4px 0 8px 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 4px;
    padding-left: 0;
}

/* First header in message should have no top margin */
.message-content h1:first-child {
    margin-top: 0;
}

.message-content h2 {
    font-size: 15px;  /* Reduced from 18px */
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 16px 0 12px 0;
    border-bottom: none;
    padding: 0;
    clear: both;
}

.message-content h3 {
    font-size: 14px;  /* Reduced from 16px */
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 12px 0 10px 0;
    padding: 0;
}

.message-content h4 {
    font-size: 13px;  /* Reduced from 15px */
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 10px 0 8px 0;
    padding: 0;
}

.message-content p {
    margin-bottom: 8px; /* Reduced spacing between paragraphs */
    margin-top: 0px; /* Zero top margin for tighter spacing after headers */
    margin-left: 0; /* Explicit zero left margin for alignment */
    padding: 0; /* Zero padding for consistent alignment with headers */
    text-indent: 0; /* No text indentation */
    line-height: 1.4; /* More readable line height */
    color: var(--text-primary);
    font-weight: 400; /* Normal weight */
}

.message-content p:last-child {
    margin-bottom: 0;
}

/* Enhanced list styling - Compact LLM-style */
.message-content .message-list {
    margin: 0px 0; /* Zero margin around lists for ultra-tight spacing */
    margin-left: 0; /* Explicit zero left margin for alignment */
    padding-left: 20px; /* Standard list indentation */
    text-indent: 0; /* No text indentation */
}

.message-content .message-list li {
    margin-bottom: 5px; /* Add 5px spacing between bullet items */
    margin-left: 0; /* Explicit zero left margin for alignment */
    line-height: 1.2; /* Slightly more relaxed line height */
    color: var(--text-secondary);
    font-weight: 400; /* Normal weight */
    margin-top: 0px; /* Zero top margin */
    padding: 0px; /* Zero padding */
    text-indent: 0; /* No text indentation */
}

.message-content ul.message-list {
    list-style-type: disc;
    margin-bottom: 10px; /* Add 10px space after unordered lists */
}

.message-content ol.message-list {
    list-style-type: decimal;
    margin-bottom: 10px; /* Add 10px space after ordered lists */
}

/* Checkbox list styling */
.message-content ul.checkbox-list {
    list-style-type: none;
    padding-left: 0;
    margin: 2px 0 10px 0; /* Top/side margins tight, 10px bottom spacing */
}

.message-content ul.checkbox-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1px; /* Very compact spacing */
    padding-left: 0;
    line-height: 1.3; /* Tighter line height */
}

.message-content .checkbox-icon {
    margin-right: 8px;
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}

/* Dark theme checkbox styling */
[data-theme="dark"] .message-content ul.checkbox-list li {
    color: #e5e7eb;
}

/* Horizontal rule styling for section separators */
.message-content hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 16px 0;
    opacity: 0.6;
}

[data-theme="dark"] .message-content hr {
    border-top-color: var(--border-medium);
}

/* ============================================================================
   CODE BLOCK STYLING - Modern, Responsive, High-Contrast
   
   Design principles:
   - Dark editor-style background for readability (both themes)
   - Word-wrap on mobile (no horizontal scroll)
   - Token syntax highlighting for {{variables}}
   - Copy button for code blocks
   ============================================================================ */

/* Inline code - small snippets within text */
.message-content code {
    background: #1e293b;  /* Slate-800 - dark for contrast in both themes */
    color: #e2e8f0;       /* Slate-200 - high contrast text */
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    border: 1px solid #334155;  /* Slate-700 border */
    white-space: pre-wrap;
    word-break: break-word;
}

/* Inline code - alternative class */
.message-content .inline-code {
    background: #1e293b;
    color: #38bdf8;       /* Sky-400 - brighter for inline emphasis */
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    font-weight: 500;
    border: 1px solid #334155;
}

/* Code blocks - multi-line code */
.message-content .code-block,
.message-content pre {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);  /* Slate gradient */
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* MOBILE RESPONSIVE: Word wrap instead of horizontal scroll */
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Language label badge */
.message-content .code-block::before,
.message-content pre::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: #94a3b8;       /* Slate-400 */
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #334155;
    padding: 4px 12px;
    border-radius: 0 12px 0 8px;
}

/* Code inside blocks */
.message-content .code-block code,
.message-content pre code {
    background: none !important;
    color: #e2e8f0;       /* Slate-200 - main text */
    padding: 0;
    border: none !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    display: block;
    /* CRITICAL: Word wrap for mobile */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Token syntax highlighting - {{variable}} patterns */
.message-content code .token-var,
.message-content .code-block .token-var {
    color: #22d3ee;       /* Cyan-400 - variables */
    font-weight: 500;
}

.message-content code .token-cond,
.message-content .code-block .token-cond {
    color: #c084fc;       /* Purple-400 - conditionals (if/else/endif) */
    font-weight: 600;
}

.message-content code .token-string,
.message-content .code-block .token-string {
    color: #4ade80;       /* Green-400 - strings */
}

.message-content code .token-comment,
.message-content .code-block .token-comment {
    color: #64748b;       /* Slate-500 - comments */
    font-style: italic;
}

/* Copy button for code blocks */
.code-block-wrapper {
    position: relative;
}

.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #475569;  /* Slate-600 */
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.code-block-wrapper:hover .code-copy-btn,
.message-content pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: #64748b;  /* Slate-500 */
}

.code-copy-btn.copied {
    background: #22c55e;  /* Green-500 */
}

/* MOBILE RESPONSIVE - Code blocks */
@media (max-width: 768px) {
    .message-content .code-block,
    .message-content pre {
        padding: 12px 14px;
        border-radius: 10px;
        margin: 12px 0;
        /* Force word wrap on mobile */
        overflow-x: hidden !important;
    }
    
    .message-content .code-block code,
    .message-content pre code {
        font-size: 12px;
        line-height: 1.5;
        /* Aggressive word wrap for narrow screens */
        white-space: pre-wrap !important;
        word-break: break-all;
    }
    
    .message-content code {
        font-size: 12px;
        padding: 2px 6px;
    }
    
    .message-content .code-block::before,
    .message-content pre::before {
        display: none;  /* Hide language label on mobile - overlaps text */
    }
    
    /* Scroll buffer for mobile - header is 60px + 15px buffer */
    .message,
    .welcome-message,
    #welcomeMessageContainer {
        scroll-margin-top: 75px;
    }
}

@media (max-width: 480px) {
    .message-content .code-block,
    .message-content pre {
        padding: 10px 12px;
        margin: 10px -8px;  /* Bleed slightly for more width */
        border-radius: 8px;
        max-width: calc(100% + 16px);
    }
    
    .message-content .code-block code,
    .message-content pre code {
        font-size: 11px;
    }
}

/* ========================================
   CHAT MESSAGE CONTEXT - Code Block Fit
   Ensures code blocks fit within message bubbles
   ======================================== */

/* Prevent message content from expanding due to code blocks */
.message-content {
    overflow-x: hidden !important;  /* Don't allow horizontal scroll in chat */
}

/* Code blocks within chat messages - constrain to bubble width */
.assistant-message .message-content .code-block,
.assistant-message .message-content pre,
.user-message .message-content .code-block,
.user-message .message-content pre {
    max-width: 100%;
    box-sizing: border-box;
    /* Negative margin to use full bubble width, accounting for padding */
    margin-left: -4px;
    margin-right: -4px;
    width: calc(100% + 8px);
}

/* Ensure inline code wraps within message */
.message-content code:not(pre code) {
    display: inline;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Light theme adjustments - keep dark code blocks for consistency */
/* (Dark code blocks read better in both themes) */

/* Dark theme - subtle enhancements */
[data-theme="dark"] .message-content code {
    background: #0f172a;  /* Slate-900 - slightly darker */
    border-color: #475569;
    color: #f1f5f9;       /* Slate-100 */
}

[data-theme="dark"] .message-content .inline-code {
    background: #0f172a;
    color: #38bdf8;
}

[data-theme="dark"] .message-content .code-block,
[data-theme="dark"] .message-content pre {
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);  /* Deeper slate */
    border-color: #475569;
}

[data-theme="dark"] .message-content .code-block::before,
[data-theme="dark"] .message-content pre::before {
    background: #1e293b;
    color: #cbd5e1;
}

/* ========================================
   MOBILE CHAT CONTEXT - Extra constraints
   ======================================== */
@media (max-width: 768px) {
    /* On mobile, code blocks centered with 12px padding on each side */
    .assistant-message .message-content .code-block,
    .assistant-message .message-content pre,
    .user-message .message-content .code-block,
    .user-message .message-content pre {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
        max-width: none; /* Override base max-width: 100% */
        border-radius: 8px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    /* Very narrow screens - same 12px padding, just smaller font */
    .assistant-message .message-content .code-block,
    .assistant-message .message-content pre,
    .user-message .message-content .code-block,
    .user-message .message-content pre {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
        max-width: none;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    
    /* Smaller font on very narrow screens */
    .message-content .code-block code,
    .message-content pre code {
        font-size: 10px;
        line-height: 1.4;
    }
}

/* Links */
.message-content a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.message-content a:hover:not(.topic-chip):not(.deep-link) {
    border-bottom-color: var(--theme-primary);
    background: rgba(74, 144, 226, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
    margin: -2px -4px;
}

/* Email links - use same color as regular links in light theme */
.message-content a[href^="mailto:"] {
    color: var(--theme-primary);
}

.message-content a[href^="mailto:"]:hover {
    border-bottom-color: var(--theme-primary);
    background: rgba(74, 144, 226, 0.1);
}

/* External links indicator — FA external-link-alt icon */
.message-content a[target="_blank"]::after {
    content: "\f35d";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 9px;
    opacity: 0.55;
    margin-left: 4px;
    vertical-align: 1px;
}

/* Email links indicator — FA envelope overrides the external icon */
.message-content a[href^="mailto:"]::after {
    content: "\f0e0" !important;
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900 !important;
    font-size: 9px;
    opacity: 0.55;
    margin-left: 4px;
    vertical-align: 1px;
}

/* Deep links — internal prompt library links (FA share arrow for cross-reference) */
.message-content a.deep-link {
    color: var(--theme-primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: none;
    transition: text-decoration-style 0.2s, background 0.2s;
}
.message-content a.deep-link:hover {
    text-decoration-style: solid;
    background: rgba(74, 144, 226, 0.08);
    padding: 1px 3px;
    border-radius: 3px;
    margin: -1px -3px;
    border-bottom: none;
}
.message-content a.deep-link::after {
    content: "\f064";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 9px;
    opacity: 0.65;
    margin-left: 3px;
    vertical-align: 1px;
    color: var(--theme-primary);
}

/* Related Topics Footer */
.related-topics-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}
.related-topics-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.related-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.topic-chip:hover {
    border-color: var(--campaign-cta-bg, var(--theme-primary));
    color: var(--campaign-cta-text, #fff);
    background: var(--campaign-cta-bg, var(--theme-primary));
}
.topic-chip i {
    font-size: 12px;
    opacity: 0.7;
}
.topic-chip:hover i {
    opacity: 1;
    color: var(--campaign-cta-text, #fff);
}

/* Text formatting - LLM-style */
.message-content strong {
    font-weight: 500; /* Medium weight instead of bold */
    color: var(--text-primary);
}

/* Technical section headers (like "Real-Time Sync:", "Bidirectional Flow:") */
.message-content strong:has(+ br),
.message-content p:has(strong:contains(":")) {
    margin-bottom: 4px;
}

.message-content strong[contains=":"] {
    display: block;
    margin: 8px 0 4px 0;
    color: var(--text-primary);
}

/* Section headers like Challenge:, Solution:, Results: need proper spacing */
.message-content .section-header {
    display: block;
    margin: 16px 0 6px 0; /* Balanced spacing: 16px top, 6px bottom for section headers with colons */
    padding: 0; /* Zero padding for alignment */
    margin-left: 0; /* Explicit zero left margin */
    text-indent: 0; /* No text indentation */
    font-weight: 600; /* Slightly bolder for section headers */
    color: var(--text-primary);
}

/* Headers that appear before lists should align with list content */
.message-content h2 + .message-list,
.message-content h3 + .message-list {
    margin-top: 8px; /* Add some space between header and list */
}

/* Reduce general header bottom spacing to align better with content */

/* Dark theme strong text */
[data-theme="dark"] .message-content strong {
    color: #f9fafb; /* Near white for emphasis */
    font-weight: 500; /* Medium weight */
}

.message-content em {
    font-style: italic;
    color: var(--text-secondary);
}

/* Dark theme enhancements - LLM-style */
[data-theme="dark"] .message-content h1 {
    border-bottom-color: var(--border-medium);
    color: #f9fafb;  /* Near white for main headers */
    font-weight: 600; /* Less bold */
}

[data-theme="dark"] .message-content h2 {
    border-bottom-color: var(--border-medium);
    color: #f3f4f6;  /* White for section headers */
    font-weight: 500; /* Medium weight */
}

[data-theme="dark"] .message-content h3,
[data-theme="dark"] .message-content h4 {
    color: #f3f4f6;  /* White for sub-headers */
    font-weight: 500; /* Medium weight */
}

/* Dark theme code styling moved to main code section above for better organization */

[data-theme="dark"] .message-content a {
    color: var(--theme-primary);  /* Use branding primary color (teal/brand color) */
    font-weight: 400; /* Normal weight */
    text-decoration: underline; /* Ensure links are visible */
}

/* Ensure all links in dark mode are visible */
[data-theme="dark"] a {
    color: var(--theme-primary);
    text-decoration: underline;
}

/* Specifically for modal content links in dark mode */
[data-theme="dark"] .modal-content-body a,
[data-theme="dark"] .modal-content-display a {
    color: var(--theme-primary) !important;
    text-decoration: underline !important;
}

[data-theme="dark"] .message-content a:hover:not(.topic-chip):not(.deep-link) {
    border-bottom-color: var(--theme-primary, #60a5fa);
    background: rgba(96, 165, 250, 0.1);
    color: var(--theme-accent, #93c5fd); /* Use brand accent on hover */
}

[data-theme="dark"] .message-content a[href^="mailto:"] {
    color: var(--theme-primary-light, #34d399);  /* Use branding teal for email links */
}

[data-theme="dark"] .message-content a[href^="mailto:"]:hover {
    border-bottom-color: var(--theme-primary-light, #34d399);
    background: rgba(52, 211, 153, 0.1);
    color: var(--theme-primary-dark, #6ee7b7); /* Lighter teal on hover */
}

[data-theme="dark"] .message-content .message-list li {
    color: #e5e7eb;  /* Light gray for list items, not orange */
}

/* Conversation Details Modal - Override all other modal styles.
   2026-04-25: `display: flex !important` was previously applied
   unconditionally, which prevented the X button + Escape key from
   closing the modal — `closeConversationModal()` set the inline
   `display: none` on the modal element, but a CSS-level `!important`
   beats inline styles, so the modal stayed visible.  Scoped the
   `display: flex !important` to `.show` so the rule only applies
   when the modal is actually meant to be visible; toggling the class
   (or just clearing `display`) now hides it cleanly. */
.conversation-details-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important; /* Extremely high z-index to appear above everything */
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}
.conversation-details-modal.show {
    display: flex !important;
}

.conversation-details-modal .modal-content {
    max-width: 900px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 99999 !important; /* Ensure modal content is on top */
    background: var(--bg-primary) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.conversation-details-modal .modal-content::-webkit-scrollbar {
    width: 6px;
}

.conversation-details-modal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-details-modal .modal-content::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.conversation-details-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.conversation-details-modal .modal-overlay {
    z-index: 99998; /* Just below modal content but above everything else */
}

.conversation-meta {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-item span {
    color: var(--text-primary);
    font-weight: 500;
}

.conversation-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.conversation-section {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.conversation-section h4 {
    background: var(--bg-tertiary);
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.conversation-text {
    padding: 16px;
    background: var(--bg-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    color: var(--text-primary);
}

.conversation-text.user-prompt {
    background: var(--bg-secondary);
    border-left: 3px solid var(--theme-secondary-dark);
    font-style: italic;
}

.conversation-text.llm-response {
    background: var(--bg-primary);
    border-left: 3px solid var(--theme-primary);
}

.conversation-text.error-text {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #dc2626;
}

.context-list {
    padding: 16px;
    background: var(--bg-primary);
}

.context-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.context-item:last-child {
    border-bottom: none;
}

.relevance-score {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.clickable-row:hover {
    background: var(--bg-secondary);
}

.error-section h4 {
    background: #fef2f2;
    color: #dc2626;
}

/* Dark theme conversation modal */
[data-theme="dark"] .conversation-text.user-prompt {
    background: var(--chat-user-bg);
    border-left-color: var(--theme-primary-dark);
}

[data-theme="dark"] .conversation-text.error-text {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .error-section h4 {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

/* API Configuration Styling */
.config-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
}

.config-section h6 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-section h6 i {
    color: var(--theme-primary);
}

.api-key-input {
    position: relative;
    display: flex;
    align-items: center;
}

.api-key-input input {
    flex: 1;
    padding-right: 45px;
}

.toggle-visibility {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toggle-visibility:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.form-help {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}

/* Dark theme API config */
[data-theme="dark"] .config-section {
    background: var(--bg-primary);
    border-color: var(--border-dark);
}

[data-theme="dark"] .config-section h6 i {
    color: var(--editor-primary);
}

/* App Config tab content spacing */
.appconfig-tab-content .config-section .form-group {
    margin-bottom: 16px;
}
.appconfig-tab-content .config-section .form-group:last-child {
    margin-bottom: 0;
}
.appconfig-tab-content .config-section .checkbox-group {
    margin-top: 14px;
    margin-bottom: 14px;
}
.appconfig-tab-content .config-section .checkbox-group:last-child {
    margin-bottom: 0;
}
.appconfig-tab-content .admin-actions {
    margin-top: 24px;
}
.appconfig-tab-content .config-description {
    margin-bottom: 20px;
}
.appconfig-tab-content .slider-control {
    margin-bottom: 8px;
}
.appconfig-tab-content .config-section .api-key-input + small,
.appconfig-tab-content .config-section .form-input + small {
    margin-top: 2px;
}

/* AI Provider Cards */
.provider-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .provider-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .provider-cards {
        grid-template-columns: 1fr;
    }
}

.provider-card {
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.provider-card:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.provider-card.selected {
    border-color: var(--theme-primary);
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 59, 130, 246), 0.05) 0%, transparent 100%);
}

.provider-card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.provider-card.selected .provider-card-check {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-action-text);
}

.provider-card-check i {
    font-size: 10px;
    opacity: 0;
}

.provider-card.selected .provider-card-check i {
    opacity: 1;
}

.provider-card-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.provider-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
}

.provider-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--theme-action-text);
}

.provider-icon-placeholder.claude {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.provider-icon-placeholder.openai {
    background: linear-gradient(135deg, #10a37f 0%, #0d8a6a 100%);
}

.provider-icon-placeholder.gemini {
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
}

.provider-icon-plus {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.provider-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.provider-card-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.provider-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    font-size: 12px;
}

.provider-card-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.provider-card-features li i.fa-check {
    color: #10b981;
    font-size: 10px;
}

.provider-card-features li i.fa-times {
    color: var(--text-muted);
    font-size: 10px;
}

.provider-card-features li.muted {
    color: var(--text-muted);
}

.provider-card-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.provider-card-tag.recommended {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: var(--theme-action-text);
}

/* Dark theme provider cards */
[data-theme="dark"] .provider-card {
    background: var(--bg-secondary);
    border-color: var(--border-dark);
}

[data-theme="dark"] .provider-card:hover {
    border-color: var(--editor-primary);
}

[data-theme="dark"] .provider-card.selected {
    border-color: var(--editor-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
}

[data-theme="dark"] .provider-card.selected .provider-card-check {
    background: var(--editor-primary);
    border-color: var(--editor-primary);
}

[data-theme="dark"] .provider-card-tag {
    background: var(--bg-primary);
}

/* Message Action Buttons - v1.6.1: Always visible for improved accessibility */
.message-actions {
    display: flex;
    gap: 8px;
    opacity: 1; /* Changed from 0 to 1 - always visible like mobile */
    transition: opacity 0.2s ease;
    margin-top: 8px;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-action-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.message-action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.message-action-btn i {
    font-size: 11px;
}

.copy-btn:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.email-btn:hover {
    color: var(--theme-primary-light);
    border-color: var(--theme-primary-light);
}

/* v1.6.1: Updated to match copy/email button hover colors for consistency */
.print-preview-btn:hover {
    color: var(--theme-primary); /* Changed from --editor-special to match copy button */
    border-color: var(--theme-primary);
}

.forward-btn:hover {
    color: var(--theme-primary-light); /* Changed from --editor-success to match email button */
    border-color: var(--theme-primary-light);
}

.link-btn:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* Dark theme action button styling */
[data-theme="dark"] .message-action-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-muted);
}

[data-theme="dark"] .message-action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .copy-btn:hover {
    color: var(--editor-primary);
    border-color: var(--editor-primary);
}

[data-theme="dark"] .email-btn:hover {
    color: #14b8a6;
    border-color: #14b8a6;
}

[data-theme="dark"] .print-preview-btn:hover {
    color: var(--editor-primary);
    border-color: var(--editor-primary);
}

[data-theme="dark"] .forward-btn:hover {
    color: #14b8a6;
    border-color: #14b8a6;
}

[data-theme="dark"] .link-btn:hover {
    color: var(--editor-primary);
    border-color: var(--editor-primary);
}

/* Chat Input */
/* OLD .chat-input-container removed - now using .input-bar-fixed */

/* New fixed input bar - viewport-level positioning */
.input-bar-fixed {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width, 280px);
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    padding: 24px 24px 16px 24px;  /* Increased top padding: 16px → 24px for more separation */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));  /* iPhone X+ safe area */
    z-index: 100;  /* Above content, below modals */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);  /* Stronger shadow for better separation */
    transition: left 0.3s ease;  /* Smooth sidebar toggle */
}

.input-bar-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsive breakpoints for input bar and sidebar
   MOBILE-ONLY OVERLAY BEHAVIOR:
   - max-width: 768px - small screens (phones portrait, small tablets)
   - (hover: none) and (pointer: coarse) - touch devices of ANY size
   EXCLUDES: Desktop at 1024px with mouse (uses normal desktop sidebar) */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* On mobile/tablet: input bar ALWAYS full width, sidebar ALWAYS overlays */
    /* BUT: if floating profile is shown, leave room for it */
    .input-bar-fixed:not(.floating-profile-active) {
        left: 0 !important;  /* Always full width on mobile - sidebar overlays */
        padding: 16px 16px 12px 16px;
        z-index: 1001 !important;  /* Above sidebar overlay (1000) */
    }
    
    /* EMBED MODE: Full width for layouts WITHOUT sidebar */
    /* NOTE: widget-mode uses its own width-based breakpoints (not touch detection) */
    /* NOTE: layout-full HAS a sidebar - handled by late override rules at end of file */
    /* transition: none prevents visible "slide" effect during initialization */
    html.embed-mode:not(.widget-mode) body:not(.layout-full) .input-bar-fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 16px 16px 12px 16px;
        z-index: 1001 !important;
        transition: none !important;
    }
    
    /* When floating profile is visible AND external (not inline), input bar starts after it */
    /* EXCLUDES widget-mode and embed-mode which should never shift */
    html:not(.widget-mode):not(.embed-mode) .show-floating-profile.floating-profile-mode-minimal .input-bar-fixed:not(.profile-inline) {
        left: 100px !important;
        padding: 16px 16px 12px 16px;
        z-index: 1001 !important;
    }
    
    html:not(.widget-mode):not(.embed-mode) .show-floating-profile.floating-profile-mode-expanded .input-bar-fixed:not(.profile-inline) {
        left: 260px !important;
        padding: 16px 16px 12px 16px;
        z-index: 1001 !important;
    }
    
    /* Fallback when floating profile shown but mode not set - only for external profile */
    /* EXCLUDES widget-mode and embed-mode */
    html:not(.widget-mode):not(.embed-mode) .show-floating-profile:not(.floating-profile-mode-minimal):not(.floating-profile-mode-expanded) .input-bar-fixed:not(.profile-inline) {
        left: 260px !important;
        padding: 16px 16px 12px 16px;
        z-index: 1001 !important;
    }
    
    .chat-messages {
        padding-bottom: 220px;  /* Space for input bar */
    }
    
    /* Sidebar needs bottom padding so menu items aren't cut off by input bar */
    .sidebar-content,
    .sections-container {
        padding-bottom: 120px;  /* Space for overlaying input bar */
    }
    
    /* MOBILE: Sidebar overlays OVER input bar - no shifting needed
       Input bar stays full width, sidebar (z-index 1500) appears above it (z-index 1001) */
    
    /* =============================================================================
       CRITICAL: Sidebar MUST be hidden off-screen and overlay on ALL mobile
       This was missing for 768-932px range (landscape phones)
       Width scales with viewport (85vw) up to a 380px cap so long menu
       labels have more room to breathe on small screens.
       ============================================================================= */
    .sidebar {
        position: fixed !important;
        left: calc(-1 * min(85vw, 380px)) !important;  /* Hidden off-screen by default */
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: min(85vw, 380px) !important;
        z-index: 1500 !important;  /* Above everything when open */
        background: var(--bg-primary) !important;
        box-shadow: var(--shadow-lg);
        transition: left 0.3s ease !important;
    }
    
    .sidebar.open {
        left: 0 !important;  /* Slide in as overlay */
    }
    
    /* Mobile sidebar header - with close button and "Menu" title */
    .sidebar-mobile-header {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--border-light);
        background: var(--bg-secondary);
        flex-shrink: 0;
        min-height: 56px;
    }
    
    .sidebar-mobile-close {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border: none;
        background: transparent;
        color: var(--text-primary);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: background 0.15s;
        touch-action: manipulation;
    }
    
    .sidebar-mobile-close:hover,
    .sidebar-mobile-close:active {
        background: var(--hover-bg);
    }
    
    .sidebar-mobile-title {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-primary);
        flex: 1;
    }
    
    .sidebar-mobile-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }
    
    .sidebar-mobile-action-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: background 0.15s, color 0.15s;
        touch-action: manipulation;
    }
    
    .sidebar-mobile-action-btn:hover,
    .sidebar-mobile-action-btn:active {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
    
    /* Sidebar overlay backdrop */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1400;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .sidebar.open ~ .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    
    /* Main content should be full width on mobile - sidebar overlays, not pushes */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .chat-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Small phones - narrower sidebar and input bar adjustments */
@media (max-width: 480px) {
    .input-bar-fixed {
        left: 0 !important;
        padding: 12px 12px 10px 12px;
        z-index: 1001 !important;
    }
    
    /* Responsive sidebar on small phones — scales with viewport up to 340px cap */
    .sidebar {
        width: min(88vw, 340px) !important;
        left: calc(-1 * min(88vw, 340px)) !important;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    /* No shift needed - sidebar overlays over input bar */
    
    .chat-messages {
        padding: 16px;
        padding-bottom: 200px;
    }
}

/* Sidebar collapsed state */
.sidebar.collapsed ~ .input-bar-fixed {
    left: var(--sidebar-collapsed-width, 60px);
}

.chat-input-wrapper {
    position: relative;
    background: var(--input-bg, var(--bg-secondary));
    border: 2px solid var(--input-border, var(--theme-accent, #10b981));
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* No visual change on focus - wrapper stays the same */

.chat-input {
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
    background: none;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    min-height: 44px;
    height: 44px;
    max-height: 200px;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-input::-webkit-scrollbar {
    display: none;
}

.chat-input::placeholder {
    color: var(--input-placeholder, var(--text-muted));
}

.chat-input:focus,
.chat-input:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Dark theme chat input styling - CONSISTENT 2px border with light theme */
[data-theme="dark"] .chat-input-wrapper {
    background: var(--input-bg, var(--bg-secondary));
    border: 2px solid var(--input-border, var(--editor-primary)); /* Same 2px as light theme */
}

/* No visual change on focus - wrapper stays the same in dark theme too */

[data-theme="dark"] .chat-input {
    color: var(--input-text, var(--text-primary));
}

[data-theme="dark"] .chat-input::placeholder {
    color: var(--input-placeholder, var(--text-muted));
}

[data-theme="dark"] .chat-input {
    border: none;
    outline: none;
}

[data-theme="dark"] .chat-input:focus,
[data-theme="dark"] .chat-input:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
}

/* History Navigation Arrows (inside input bar) */
.history-navigation {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 4px;
    flex-shrink: 0;
}

.history-nav-btn {
    background: transparent;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    width: 22px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
    font-size: 10px;
}

.history-nav-btn:hover:not(:disabled) {
    background: var(--hover-bg, #f0f0f0);
    border-color: var(--theme-secondary-light, #D2691E);
    color: var(--theme-secondary-light, #D2691E);
}

.history-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.history-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Dark theme history navigation */
[data-theme="dark"] .history-nav-btn {
    border-color: var(--border-color, #444);
    color: var(--text-muted);
}

[data-theme="dark"] .history-nav-btn:hover:not(:disabled) {
    background: var(--hover-bg, #333);
    border-color: var(--editor-primary, #4EC9B0);
    color: var(--editor-primary, #4EC9B0);
}

/* Prompt History Settings Section */
.prompt-history-settings {
    padding: 10px 0;
}

.prompt-history-description {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.send-button {
    background: var(--send-button-bg, var(--theme-action, #f97316));
    color: var(--send-icon-color, white);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-button:disabled {
    background: var(--send-button-bg, var(--theme-action, #f97316));
    color: var(--send-icon-color, white);
    cursor: not-allowed;
    opacity: 0.6;
}

.send-button:not(:disabled) {
    background: var(--send-button-bg, var(--theme-action, #f97316));
}

.send-button.has-text:not(:disabled) {
    background: var(--send-button-hover, var(--theme-action-dark, #ea580c));
}

.send-button:hover:not(:disabled) {
    background: var(--send-button-hover, #B8651A);
}

/* Voice Controls (mic + vox icons, stacked vertically on left side of input bar) */
.voice-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.voice-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--send-button-bg, var(--theme-action, #f97316));
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 32px;
    min-height: 20px;
}

.voice-btn:hover {
    color: var(--send-button-hover, var(--theme-action-dark, #ea580c));
}

.voice-btn.active {
    color: #ef4444;
    animation: voiceHeartbeat 1.4s ease-in-out infinite;
}

.voice-btn.active:hover {
    color: #dc2626;
}

.voice-btn.listening {
    color: #ef4444;
    animation: voiceHeartbeat 1.4s ease-in-out infinite;
}

@keyframes voiceHeartbeat {
    0%, 100% {
        filter: drop-shadow(0 0 0px transparent);
    }
    25% {
        filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.2));
    }
    75% {
        filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7));
    }
}

[data-theme="dark"] .voice-btn {
    color: var(--send-button-bg, var(--theme-action, #fb923c));
}

[data-theme="dark"] .voice-btn:hover {
    color: var(--send-button-hover, var(--theme-action-light, #fb923c));
}

[data-theme="dark"] .voice-btn.active,
[data-theme="dark"] .voice-btn.listening {
    color: #f87171;
    animation: voiceHeartbeat 1.4s ease-in-out infinite;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000; /* Above admin panel (10000) and edit modals (15000) */
}

.modal.show {
    display: flex;
}

/* Modal z-index stacking classes */
.modal.z-index-highest {
    z-index: 25000 !important; /* Icon picker, etc. */
}

.modal.z-index-high {
    z-index: 22000 !important; /* Modals that open on top of other modals */
}

/* Modal overlay (for diagram viewer and other full-screen modals) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    z-index: 17000; /* Above full response modal (16000) */
    display: none; /* Hidden by default, shown via style.display = 'flex' */
}

.modal-overlay[style*="display: flex"] {
    display: flex !important;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;  /* Never taller than 90% of viewport */
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Keep for rounded corners */
}

/* Mobile portrait - fallback modal heights (overridden by inline styles when JS sets them) */
@media (max-width: 768px) {
    .modal-content {
        max-height: 80vh;
        max-height: 80dvh;
    }
    
    .modal-body {
        max-height: calc(80vh - 140px);
        max-height: calc(80dvh - 140px);
    }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;  /* Don't shrink header */
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.2s ease;
    /* Touch-friendly tap target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.modal-close:hover {
    background: var(--hover-bg);
}

/* Touch devices: even larger tap target */
@media (hover: none) and (pointer: coarse) {
    .modal-close {
        min-width: 48px;
        min-height: 48px;
        font-size: 28px;
    }
}

.modal-body {
    padding: 20px;
    overflow-y: auto;  /* Scrollable content */
    flex: 1;           /* Takes remaining space between header and footer */
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    overscroll-behavior: contain;       /* Prevent scroll chaining to parent */
    touch-action: pan-y;                /* Immediate touch scroll recognition */
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

/* Modal body scrollbar styling */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.modal-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: all 0.2s ease;
}

.modal-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;  /* Don't shrink footer */
}

.modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Default styling - outlined button */
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.modal-btn.cancel {
    background: none;
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
}

.modal-btn.cancel:hover {
    background: var(--hover-bg);
}

.modal-btn.confirm {
    background: var(--theme-primary);
    border: none;
    color: var(--theme-action-text);
}

.modal-btn.confirm:hover {
    background: var(--theme-primary-dark);
}

/* PDL Field Mappings Table */
.field-mappings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.field-mappings-table th {
    background: var(--bg-secondary);
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-light);
    font-size: 12px;
    text-transform: uppercase;
}

.field-mappings-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.field-mappings-table .mapping-row:hover {
    background: var(--hover-bg);
}

.field-mappings-table .mapping-row.default-mapping {
    background: var(--bg-tertiary);
}

.field-mappings-table .form-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.field-mappings-table .form-select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.field-mappings-table .custom-field-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 13px;
}

/* v1.0.500 Phase 2: combobox affordance.
   Renders a small chevron on the right side of permissive-mode select fields
   (rendered as <input list> + <datalist>) so admins know suggestions are
   available. Native <datalist> handles the popover; this is purely visual.
   Pads right side to keep the value text from overlapping the chevron. */
.combobox-input {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary, #6b7280) 50%),
                      linear-gradient(135deg, var(--text-secondary, #6b7280) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 1px),
                         calc(100% - 11px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.combobox-input:disabled {
    background-image: none;
    padding-right: 10px;
}

.field-mappings-table .btn-icon {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.field-mappings-table .btn-icon:hover {
    background: var(--error-color);
    color: white;
}

.field-mappings-table .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.field-mappings-table .badge-info {
    background: var(--info-color);
    color: white;
}

/* CUSTOM badge for admin-added enrichment mappings (v1.0.505) */
.field-mappings-table .badge-success {
    background: var(--success-color, #10b981);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* v1.0.505: actions-cell wrapper centers DEFAULT/CUSTOM badge + trash on
   a single horizontal axis. Pre-fix the badge and the trash icon sat on
   different baselines (inline-default baseline alignment) so the trash
   floated below the badge text — admin reported the misalignment. */
.field-mappings-table .mapping-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
}
.field-mappings-table .mapping-actions-cell .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================================
   Enrichment Progress Modal (v1.0.506)
   Refactored from inline styles to use platform card patterns + adds
   skipped/errored detail sections so admins can see WHO + WHY, not just
   the counts. Matches the .stat-card / .modal pattern used elsewhere.
   ============================================================================ */
.enrichment-progress-modal {
    max-width: 560px;
}

.enrichment-phase-block {
    text-align: center;
    margin-bottom: 20px;
}
.enrichment-phase {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.enrichment-subtext {
    font-size: 13px;
    color: var(--text-secondary);
}

.enrichment-progress-block {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 18px;
}
.enrichment-progress-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}
.enrichment-progress-row span:last-child {
    font-weight: 600;
}
.enrichment-progress-track {
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
}
.enrichment-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--theme-primary);
    transition: width 0.3s ease, background 0.3s ease;
}

/* Stat card grid — 4-up, color-coded by outcome category. */
.enrichment-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.enrichment-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.enrichment-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.enrichment-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 4px;
}
.enrichment-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.enrichment-stat--success .enrichment-stat-value { color: var(--success-color, #10b981); }
.enrichment-stat--neutral .enrichment-stat-value { color: var(--text-secondary); }
.enrichment-stat--error .enrichment-stat-value { color: var(--error-color, #ef4444); }
.enrichment-stat--info .enrichment-stat-value { color: var(--text-primary); }

/* Detail disclosure sections (skipped + errored). */
.enrichment-detail-section {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.enrichment-detail-toggle {
    width: 100%;
    background: var(--bg-secondary);
    border: 0;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.15s ease;
}
.enrichment-detail-toggle:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
}
.enrichment-detail-chevron {
    width: 12px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.enrichment-detail-title {
    flex: 1;
    font-weight: 500;
}
.enrichment-detail-title span {
    font-weight: 600;
}
.enrichment-detail-hint {
    font-size: 11px;
    color: var(--text-muted);
}
.enrichment-detail-list {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-light);
}
.enrichment-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
}
.enrichment-detail-row:last-child {
    border-bottom: 0;
}
.enrichment-detail-email {
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}
.enrichment-detail-reason {
    color: var(--text-secondary);
    word-break: break-word;
}
.enrichment-detail-overflow {
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}
.enrichment-detail-overflow i {
    margin-right: 6px;
}

/* All-clean banner shown on completion when no skips + no errors. */
.enrichment-allclean {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    color: var(--success-color, #10b981);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
}
.enrichment-allclean i {
    margin-right: 6px;
}

.enrichment-eta {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.enrichment-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.enrichment-footer-text {
    font-size: 13px;
    color: var(--text-secondary);
}
.enrichment-progress-actions {
    display: flex;
    gap: 8px;
}

/* Mobile: stack cards into 2x2, footer wraps. */
@media (max-width: 600px) {
    .enrichment-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .enrichment-progress-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
}

/* Formatter select styling */
.field-mappings-table .formatter-select {
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
}

.mapping-controls {
    margin-bottom: 16px;
}

/* Source type badges for PDL field mappings */
.field-mappings-table .source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    font-size: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

.field-mappings-table .source-badge.person {
    background: var(--info-color);
    color: white;
}

.field-mappings-table .source-badge.company {
    background: var(--success-color);
    color: white;
}

/* PDL field column layout - icon and select inline */
.field-mappings-table td:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-mappings-table td:first-child .form-select {
    flex: 1;
    min-width: 0;
}

/* Contact Form Modal Styles */
.contact-modal {
    max-width: 750px;  /* Increased from 500px for better display on large screens */
    width: 95%;
}

/* Modal Content Builder active — admin-configurable sizing via CSS variables set by JS */
.contact-modal.modal-content-active {
    max-width: var(--modal-max-width, 50vw);
    max-width: var(--modal-max-width, 50dvw);
    max-height: var(--modal-max-height, 90vh);
    max-height: var(--modal-max-height, 90dvh);
    display: flex;
    flex-direction: column;
}

.contact-modal.modal-content-active .modal-body {
    overflow-y: auto;
    max-height: calc(var(--modal-max-height, 90vh) - 120px);
    max-height: calc(var(--modal-max-height, 90dvh) - 120px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.modal-content-section {
    padding: 0 4px;
}

.modal-content-section:first-child {
    margin-bottom: 16px;
}

.modal-content-section:last-child {
    margin-top: 16px;
}

/* Media in content sections: respect editor alignment (text-align on parent <p>).
   height/border-radius are defaults only — inline styles from the media
   properties dialog override them. */
.modal-content-section video,
.modal-content-section img {
    max-width: 100%;
    vertical-align: middle;
    outline: none;
    box-shadow: none;
}

.modal-content-section video {
    background: transparent;
}

/* Iframes (flipbook embeds) always fill their container */
.modal-content-section iframe {
    max-width: 100%;
    width: 100%;
    border: none;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
}

/* Scheduling active - same width, allow scrolling for picker */
.contact-modal.scheduling-active .modal-body {
    overflow-y: auto;
    max-height: 70vh;
}

/* Scheduling section wrapper (additive mode) */
.scheduling-section-wrapper {
    margin-top: 24px;
}

.scheduling-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.scheduling-section-divider span {
    font-weight: 600;
    color: var(--text-primary, #111827);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scheduling-section-divider i {
    color: var(--primary-color, #3b82f6);
}

/* Dark mode for scheduling section divider */
[data-theme="dark"] .scheduling-section-divider,
.dark-theme .scheduling-section-divider {
    border-color: #4b5563;
}

[data-theme="dark"] .scheduling-section-divider span,
.dark-theme .scheduling-section-divider span {
    color: #e5e7eb;
}

/* Scheduling selection error */
.scheduling-selection-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #dc2626;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scheduling-selection-error i {
    font-size: 16px;
}

/* Thank You Modal Styles */
.thank-you-body {
    text-align: center;
    padding: 2rem 1rem;
}

.thank-you-icon {
    font-size: 4rem;
    color: var(--success-color);
    margin-bottom: 1.5rem;
}

.thank-you-icon i {
    animation: checkmark-bounce 0.6s ease-in-out;
}

@keyframes checkmark-bounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.thank-you-message {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.thank-you-support {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

.support-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.support-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.support-link:visited {
    color: var(--accent-color);
}

/* Meeting Confirmation Card (in Thank You Modal) */
.meeting-confirmation-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    margin: 16px 0;
}

.meeting-confirmation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #16a34a;
}

.meeting-confirmation-header i {
    font-size: 1.25rem;
}

.meeting-confirmation-details {
    font-size: 0.95rem;
    color: var(--text-primary, #1f2937);
    line-height: 1.6;
}

.meeting-confirmation-details p {
    margin: 6px 0;
}

.meeting-confirmation-details strong {
    color: var(--text-primary, #111827);
    font-weight: 600;
}

.meeting-confirmation-note {
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

/* Dark mode - Meeting Confirmation Card */
[data-theme="dark"] .meeting-confirmation-card,
.dark-theme .meeting-confirmation-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
    border-color: rgba(34, 197, 94, 0.35);
}

[data-theme="dark"] .meeting-confirmation-header,
.dark-theme .meeting-confirmation-header {
    color: #4ade80;
}

[data-theme="dark"] .meeting-confirmation-details,
.dark-theme .meeting-confirmation-details {
    color: #e5e7eb;
}

[data-theme="dark"] .meeting-confirmation-details strong,
.dark-theme .meeting-confirmation-details strong {
    color: #f3f4f6;
}

[data-theme="dark"] .meeting-confirmation-note,
.dark-theme .meeting-confirmation-note {
    color: #9ca3af;
}

/* Welcome Message HTML Formatting */
.welcome-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* ============================================================================
   WELCOME HERO MODE
   Full-width hero layout that replaces the chat bubble welcome message.
   Activated when Message Bubble toggle is OFF (messageBubble: false).
   ============================================================================ */
.welcome-hero {
    width: 100%;
    padding: 48px 24px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Legacy hero classes (kept for backward compat with old configs) */
.welcome-hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hero-title-color, var(--text-primary));
    margin: 0;
}

.welcome-hero-subtitle {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--hero-subtitle-color, var(--text-secondary));
    margin: 0;
}

.welcome-hero-subtitle p { margin: 0 0 0.75rem; }
.welcome-hero-subtitle p:last-child { margin-bottom: 0; }

.welcome-hero-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}

.welcome-hero-body p { margin: 0 0 0.75rem; }
.welcome-hero-body p:last-child { margin-bottom: 0; }
.welcome-hero-body a { color: var(--theme-primary); text-decoration: underline; }

/* New TinyMCE-produced hero content wrapper */
.welcome-hero-content {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}

/* Remove bottom margin/spacing from the last visible element inside
   hero content so there's no gap before media or dismiss buttons */
.welcome-hero-content > *:last-child {
    margin-bottom: 0 !important;
}
.welcome-hero-content > p:empty:last-child,
.welcome-hero-content > p:last-child:only-child:empty {
    display: none;
}
/* Hide trailing empty paragraphs that may have been saved by the editor */
.welcome-hero-content > p:last-child:not(:first-child) {
    margin-bottom: 0 !important;
}
.welcome-hero-content > p:last-child:not(:first-child):-moz-only-whitespace {
    display: none;
}
.welcome-hero-content > p:last-child:not(:first-child):has(> br:only-child) {
    display: none;
}
.welcome-hero-content > p:last-child:not(:first-child):empty {
    display: none;
}

.welcome-hero-content h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin: 0 0 12px; color: var(--text-primary); }
.welcome-hero-content h2 { font-size: 1.8rem; font-weight: 700; line-height: 1.25; margin: 0 0 12px; color: var(--text-primary); }
.welcome-hero-content h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--text-primary); }
.welcome-hero-content h4 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: var(--text-primary); }
.welcome-hero-content p { margin: 0 0 0.75rem; }
.welcome-hero-content p:empty { min-height: 0.75em; }
.welcome-hero-content p:last-child { margin-bottom: 0; }
.welcome-hero-content a { color: var(--theme-primary); text-decoration: underline; }
.welcome-hero-content a.gptweb-action-link { text-decoration: none; }
.welcome-hero-content ul, .welcome-hero-content ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }

.welcome-hero .welcome-media-container,
.welcome-hero .welcome-media-video,
.welcome-hero .welcome-media-flipbook,
.welcome-hero .welcome-media-image {
    max-width: 100%;
    box-sizing: border-box;
}

.welcome-hero .message-actions {
    margin-top: 16px;
}

@media (max-width: 900px) {
    .welcome-hero { padding: 32px 16px 24px; }
    .welcome-hero-title { font-size: 1.7rem; }
    .welcome-hero-subtitle { font-size: 1rem; }
    .welcome-hero-content h1 { font-size: clamp(1.6rem, 5vw, 2.5rem) !important; }
    .welcome-hero-content h2 { font-size: clamp(1.3rem, 4vw, 2rem) !important; }

    /* Metrics stats row: tighter gap, smaller numbers */
    .welcome-hero-content > div[style*="gap: 48px"],
    .welcome-message .message-content > div[style*="gap: 48px"],
    .message-content div[style*="gap: 48px"] {
        gap: 28px !important;
    }
    .welcome-hero-content > div[style*="gap: 48px"] > div > div:first-child,
    .welcome-message .message-content div[style*="gap: 48px"] > div > div:first-child {
        font-size: 30px !important;
    }
}

@media (max-width: 768px) {
    .welcome-hero-content { overflow-wrap: break-word; word-break: break-word; }
    .welcome-hero-content span[style*="font-size"] { line-height: 1.15 !important; }
    .welcome-hero-title { font-size: 1.5rem; }
    .welcome-hero-content h1 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
    .welcome-hero-content h2 { font-size: clamp(1.2rem, 4vw, 2rem) !important; }
    .welcome-hero-content h3 { font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important; }

    /* Metrics stats row: tighter gap, smaller numbers */
    .welcome-hero-content > div[style*="gap: 48px"],
    .welcome-message .message-content > div[style*="gap: 48px"],
    .message-content div[style*="gap: 48px"] {
        gap: 24px !important;
    }
    .welcome-hero-content > div[style*="gap: 48px"] > div > div:first-child,
    .welcome-message .message-content div[style*="gap: 48px"] > div > div:first-child {
        font-size: 28px !important;
    }
}

html.embed-mode .welcome-hero,
html.widget-mode .welcome-hero {
    padding: 24px 16px 16px;
}

html.embed-mode .welcome-hero-title,
html.widget-mode .welcome-hero-title { font-size: 1.5rem; }

html.embed-mode .welcome-hero-subtitle,
html.widget-mode .welcome-hero-subtitle { font-size: 0.95rem; }

html.embed-mode .welcome-hero-body,
html.widget-mode .welcome-hero-body,
html.embed-mode .welcome-hero-content,
html.widget-mode .welcome-hero-content { font-size: 0.9rem; }

html.embed-mode .welcome-hero-content h1,
html.widget-mode .welcome-hero-content h1 { font-size: 1.5rem; }
html.embed-mode .welcome-hero-content h2,
html.widget-mode .welcome-hero-content h2 { font-size: 1.3rem; }

[data-theme="dark"] .welcome-hero-title { color: var(--hero-title-color, var(--text-primary)); }
[data-theme="dark"] .welcome-hero-subtitle { color: var(--hero-subtitle-color, var(--text-secondary)); }
[data-theme="dark"] .welcome-hero-content h1,
[data-theme="dark"] .welcome-hero-content h2,
[data-theme="dark"] .welcome-hero-content h3,
[data-theme="dark"] .welcome-hero-content h4 { color: var(--text-primary); }
[data-theme="dark"] .welcome-hero-content a { color: var(--theme-primary); }

/* ============================================================================
   WIDGET WIDTH + ALIGNMENT UTILITY (Phase 3r-W1)
   ----------------------------------------------------------------------------
   Applies to any .welcome-hero-content descendant that carries the
   [data-hw-width] attribute. Allowed values: 40, 50, 60, 70, 80, 90, 100.
   Default (unset) = 100%. Alignment via [data-hw-align="left|center|right"];
   default = center. Mobile always forces 100% (per layout-plan P1 invariance).
   Widgets that currently support this: split section, accordion, steps, tabs,
   pricing, video hero, countdown, tiles, metrics, logo strip, testimonials,
   pill badge. Widgets read/write the attribute in their parse/build helpers;
   the sanitizer preserves data-hw-* attributes on widget root elements.
   ============================================================================ */
.welcome-hero-content [data-hw-width] {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}
.welcome-hero-content [data-hw-width="100"] { max-width: 100%; width: 100%; }
.welcome-hero-content [data-hw-width="90"]  { max-width: 90%;  width: 90%;  }
.welcome-hero-content [data-hw-width="80"]  { max-width: 80%;  width: 80%;  }
.welcome-hero-content [data-hw-width="70"]  { max-width: 70%;  width: 70%;  }
.welcome-hero-content [data-hw-width="60"]  { max-width: 60%;  width: 60%;  }
.welcome-hero-content [data-hw-width="50"]  { max-width: 50%;  width: 50%;  }
.welcome-hero-content [data-hw-width="40"]  { max-width: 40%;  width: 40%;  }
.welcome-hero-content [data-hw-width][data-hw-align="left"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.welcome-hero-content [data-hw-width][data-hw-align="right"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/* Mobile invariance: per-layout plan P1, widgets always render full-width
   on mobile regardless of the admin's width choice. */
@media (max-width: 768px) {
    .welcome-hero-content [data-hw-width] {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================================
   HERO TILE GRID SYSTEM
   Responsive card grid for tiles/metrics inside welcome content.
   Works in both bubble and hero display modes.
   ============================================================================ */
.hero-tiles-grid {
    display: grid;
    gap: 16px;
    margin: 16px 0;
}

.hero-tile {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
}
/* Description absorbs remaining height → pushes stat to bottom */
.hero-tile-desc,
.hero-tile > :nth-child(3):not(.hero-tile-stat) {
    flex: 1;
}
/* When both title and desc get .hero-tile-desc, only the last one should grow */
.hero-tile-desc:has(~ .hero-tile-desc) {
    flex: 0 1 auto;
}
/* Stat badge pinned to bottom, content-width only */
.hero-tile-stat {
    margin-top: auto;
    padding-top: 16px;
    align-self: flex-start;
}
/* Backward compat: stat wrapper with padding-top (last child only) */
.hero-tile > :last-child[style*="padding-top:16"],
.hero-tile > :last-child[style*="padding-top: 16"] {
    margin-top: auto;
    align-self: flex-start;
}
/* Backward compat: old tiles without wrapper (badge is direct child) */
.hero-tile > div:last-child[style*="border-radius:20px"],
.hero-tile > div:last-child[style*="border-radius: 20px"] {
    margin-top: auto;
    align-self: flex-start;
}
/* Prevent badge overflow on narrow tiles */
.hero-tile div[style*="border-radius:20px"],
.hero-tile div[style*="border-radius: 20px"] {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

a.hero-tile {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.hero-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

@media (max-width: 900px) {
    .hero-tiles-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    .hero-tile { padding: 20px !important; }
    .hero-tile [style*="font-size: 16px"], .hero-tile [style*="font-size:16px"] { font-size: 15px !important; }
    .hero-tile div[style*="border-radius: 20px"], .hero-tile div[style*="border-radius:20px"],
    .hero-tile-stat div { font-size: 12px !important; }
}

@media (max-width: 768px) {
    .hero-tiles-grid { gap: 12px !important; }
    .hero-tile { padding: 18px !important; }
    .hero-tile [style*="font-size: 16px"], .hero-tile [style*="font-size:16px"] { font-size: 14px !important; }
    .hero-tile [style*="font-size: 14px"], .hero-tile [style*="font-size:14px"] { font-size: 13px !important; }
    .hero-tile div[style*="border-radius: 20px"], .hero-tile div[style*="border-radius:20px"],
    .hero-tile-stat div { font-size: 11px !important; }
}

@media (max-width: 500px) {
    .hero-tiles-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .hero-tile { padding: 16px !important; }
    .hero-tile div[style*="border-radius: 20px"], .hero-tile div[style*="border-radius:20px"],
    .hero-tile-stat div { font-size: 11px !important; padding: 5px 10px !important; }
}

/* Landscape phones: short viewport, wide screen.
   iPhone 17 Pro Max landscape ≈ 430px tall. Force 2-col + compact tiles. */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-tiles-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 10px 0 !important;
    }
    .hero-tile {
        padding: 14px !important;
    }
    .hero-tile [style*="font-size: 16px"], .hero-tile [style*="font-size:16px"] {
        font-size: 13px !important;
    }
    .hero-tile [style*="font-size: 14px"], .hero-tile [style*="font-size:14px"] {
        font-size: 12px !important;
    }
    .hero-tile div[style*="border-radius: 20px"], .hero-tile div[style*="border-radius:20px"],
    .hero-tile-stat div {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .hero-tile [style*="width: 40px"][style*="height: 40px"] {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 8px !important;
    }
    .hero-tile [style*="width: 40px"] i {
        font-size: 13px !important;
    }
    .hero-tile [style*="margin-bottom: 16px"] {
        margin-bottom: 8px !important;
    }
    .hero-tile-stat {
        padding-top: 8px !important;
    }
    .hero-tile-desc {
        min-height: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

/* ============================================================================
   WELCOME CONTENT RESPONSIVE — Cross-device / Cross-browser
   Overrides inline styles from TinyMCE templates on smaller viewports.
   Uses !important because templates carry inline style attributes.
   ============================================================================ */

/* Base: prevent text/content overflow everywhere */
.welcome-hero-content,
.welcome-message .message-content .welcome-hero-content {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Inline-styled headings inside hero/bubble (templates use fixed px) */
.welcome-hero-content [style*="font-size: 42px"],
.welcome-hero-content [style*="font-size: 36px"],
.welcome-hero-content [style*="font-size: 32px"],
.welcome-message [style*="font-size: 42px"],
.welcome-message [style*="font-size: 36px"],
.welcome-message [style*="font-size: 32px"] {
    line-height: 1.2;
}

/* Metrics flex row: always allow wrapping */
.welcome-hero-content > div[style*="display: flex"][style*="flex-wrap"],
.welcome-message .message-content > div[style*="display: flex"][style*="flex-wrap"] {
    flex-wrap: wrap;
}

/* Videos and images respect container bounds */
.welcome-hero-content video,
.welcome-hero-content img,
.welcome-message .message-content video,
.welcome-message .message-content img {
    max-width: 100%;
    height: auto;
}

/* On mobile, clear floats so wrapped media stacks below text */
@media (max-width: 768px) {
    .welcome-hero-content img[data-mp-wrap],
    .welcome-hero-content video[data-mp-wrap],
    .welcome-hero-content img[style*="float"],
    .welcome-hero-content video[style*="float"],
    .welcome-message .message-content img[data-mp-wrap],
    .welcome-message .message-content video[data-mp-wrap],
    .welcome-message .message-content img[style*="float"],
    .welcome-message .message-content video[style*="float"],
    .modal-content-section img[data-mp-wrap],
    .modal-content-section video[data-mp-wrap] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 12px auto !important;
    }
}

@media (max-width: 900px) {
    .welcome-hero-content [style*="font-size: 42px"],
    .welcome-message [style*="font-size: 42px"] {
        font-size: clamp(1.6rem, 5vw, 2.5rem) !important;
    }
    .welcome-hero-content [style*="font-size: 36px"],
    .welcome-message [style*="font-size: 36px"] {
        font-size: clamp(1.5rem, 4.5vw, 2.2rem) !important;
    }
    .welcome-hero-content [style*="font-size: 32px"],
    .welcome-message [style*="font-size: 32px"] {
        font-size: clamp(1.4rem, 4vw, 2rem) !important;
    }
    .welcome-hero-content [style*="font-size: 28px"],
    .welcome-message [style*="font-size: 28px"] {
        font-size: clamp(1.3rem, 3.8vw, 1.75rem) !important;
    }
    .welcome-hero-content [style*="font-size: 24px"],
    .welcome-message [style*="font-size: 24px"] {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;
    }
    .welcome-hero-content [style*="font-size: 20px"],
    .welcome-message [style*="font-size: 20px"] {
        font-size: clamp(1.05rem, 3vw, 1.25rem) !important;
    }

    .welcome-media-video,
    .welcome-media-image,
    .welcome-media-flipbook {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* Hero headline: clamp large inline font-sizes */
    .welcome-hero-content [style*="font-size: 42px"],
    .welcome-message [style*="font-size: 42px"] {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }
    .welcome-hero-content [style*="font-size: 36px"],
    .welcome-message [style*="font-size: 36px"] {
        font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
    }
    .welcome-hero-content [style*="font-size: 32px"],
    .welcome-message [style*="font-size: 32px"] {
        font-size: clamp(1.3rem, 5vw, 2rem) !important;
    }
    .welcome-hero-content [style*="font-size: 28px"],
    .welcome-message [style*="font-size: 28px"] {
        font-size: clamp(1.2rem, 4.5vw, 1.75rem) !important;
    }
    .welcome-hero-content [style*="font-size: 24px"],
    .welcome-message [style*="font-size: 24px"] {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }
    .welcome-hero-content [style*="font-size: 20px"],
    .welcome-message [style*="font-size: 20px"] {
        font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
    }
    .welcome-hero-content [style*="font-size: 18px"],
    .welcome-message [style*="font-size: 18px"] {
        font-size: 16px !important;
    }
    .welcome-hero-content [style*="font-size: 16px"],
    .welcome-message [style*="font-size: 16px"] {
        font-size: 14px !important;
    }

    /* Reduce letter-spacing on mobile to reclaim horizontal space */
    .welcome-hero-content [style*="letter-spacing: 3px"],
    .welcome-message [style*="letter-spacing: 3px"] {
        letter-spacing: 1.5px !important;
    }
    .welcome-hero-content [style*="letter-spacing: 2px"],
    .welcome-message [style*="letter-spacing: 2px"] {
        letter-spacing: 1px !important;
    }

    /* CTA buttons: centered on mobile but keep natural width */
    .welcome-hero-content a.gptweb-action-link[style*="inline-block"],
    .welcome-message a.gptweb-action-link[style*="inline-block"] {
        display: inline-block !important;
        max-width: 90%;
        box-sizing: border-box;
    }

    /* Section header: responsive text */
    .welcome-hero-content [style*="letter-spacing: 1px"],
    .welcome-message [style*="letter-spacing: 1px"] {
        font-size: 12px !important;
    }

    /* Welcome media: ensure responsive aspect ratio */
    .welcome-media-video,
    .welcome-media-image,
    .welcome-media-flipbook {
        max-width: 100% !important;
    }
    .welcome-media-video video,
    .welcome-media-video .welcome-video-cover {
        max-width: 100% !important;
    }
}

@media (max-width: 500px) {
    .welcome-hero { padding: 24px 12px 20px; }
    .welcome-hero-content { font-size: 0.9rem; }

    .welcome-hero-content [style*="font-size: 42px"],
    .welcome-message [style*="font-size: 42px"] {
        font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
    }
    .welcome-hero-content [style*="font-size: 36px"],
    .welcome-message [style*="font-size: 36px"] {
        font-size: clamp(1.2rem, 6vw, 1.6rem) !important;
    }
    .welcome-hero-content [style*="font-size: 32px"],
    .welcome-message [style*="font-size: 32px"] {
        font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important;
    }
    .welcome-hero-content [style*="font-size: 28px"],
    .welcome-message [style*="font-size: 28px"] {
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
    }
    .welcome-hero-content [style*="font-size: 24px"],
    .welcome-message [style*="font-size: 24px"] {
        font-size: clamp(0.95rem, 4.5vw, 1.25rem) !important;
    }
    .welcome-hero-content [style*="font-size: 20px"],
    .welcome-message [style*="font-size: 20px"] {
        font-size: 15px !important;
    }
    .welcome-hero-content [style*="font-size: 16px"],
    .welcome-message [style*="font-size: 16px"] {
        font-size: 13px !important;
    }

    /* Metrics: stack vertically, 2-col on small screens */
    .welcome-hero-content > div[style*="gap: 48px"],
    .welcome-message .message-content div[style*="gap: 48px"] {
        gap: 16px !important;
        justify-content: space-around !important;
    }
    .welcome-hero-content > div[style*="gap: 48px"] > div > div:first-child,
    .welcome-message .message-content div[style*="gap: 48px"] > div > div:first-child {
        font-size: 24px !important;
    }

    /* CTA block: reduce padding */
    .welcome-hero-content > div[style*="padding: 32px"],
    .welcome-message .message-content > div[style*="padding: 32px"] {
        padding: 20px 0 !important;
    }

    /* Tile icon containers: slightly smaller */
    .hero-tile [style*="width: 40px"][style*="height: 40px"] {
        width: 34px !important;
        height: 34px !important;
    }
    .hero-tile [style*="width: 40px"] i {
        font-size: 15px !important;
    }

    /* Pill badges: ensure they wrap */
    .hero-pill-wrap {
        text-align: center;
    }
    .hero-pill-wrap > span,
    .hero-pill-wrap > a {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Last-resort hyphenation for extremely narrow viewports only */
@media (max-width: 380px) {
    .welcome-hero-content,
    .welcome-message .message-content .welcome-hero-content {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Embed / Widget / Flyout mode: compact tile spacing (grid columns
   are handled by the responsive @media breakpoints above so tiles
   naturally adapt to the actual iframe/viewport width). */
html.embed-mode .hero-tiles-grid,
html.widget-mode .hero-tiles-grid {
    gap: 10px !important;
}
html.embed-mode .hero-tile,
html.widget-mode .hero-tile {
    padding: 14px !important;
}
html.embed-mode .hero-tile [style*="font-size: 16px"],
html.widget-mode .hero-tile [style*="font-size: 16px"] {
    font-size: 14px !important;
}
html.embed-mode .hero-tile [style*="font-size: 14px"],
html.widget-mode .hero-tile [style*="font-size: 14px"] {
    font-size: 13px !important;
}
html.embed-mode .welcome-hero-content [style*="font-size: 42px"],
html.widget-mode .welcome-hero-content [style*="font-size: 42px"] {
    font-size: 1.5rem !important;
}
html.embed-mode .welcome-hero-content [style*="font-size: 36px"],
html.widget-mode .welcome-hero-content [style*="font-size: 36px"] {
    font-size: 1.3rem !important;
}
html.embed-mode .welcome-hero-content [style*="font-size: 32px"],
html.widget-mode .welcome-hero-content [style*="font-size: 32px"] {
    font-size: 1.2rem !important;
}
html.embed-mode .welcome-hero-content [style*="gap: 48px"],
html.widget-mode .welcome-hero-content [style*="gap: 48px"] {
    gap: 20px !important;
}
html.embed-mode .welcome-hero-content [style*="gap: 48px"] > div > div:first-child,
html.widget-mode .welcome-hero-content [style*="gap: 48px"] > div > div:first-child {
    font-size: 24px !important;
}

/* Flyout mode: let responsive breakpoints handle grid columns naturally.
   The flyout iframe width (e.g. 40vw) determines which @media query applies. */

/* Touch target: ensure action links/tiles are easily tappable on mobile.
   Only apply to block-level CTA links (inline-block style), not inline
   text links within paragraphs which would disrupt line-height. */
@media (pointer: coarse) {
    a.hero-tile {
        min-height: 44px;
    }
    .welcome-hero-content a.gptweb-action-link[style*="inline-block"],
    .welcome-hero-content a.gptweb-action-link[style*="display: flex"],
    .welcome-hero-content a.gptweb-action-link[style*="display:flex"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Safari iOS: prevent font inflation */
.welcome-hero-content,
.welcome-message .message-content {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Clickable action tiles */
.hero-tile.gptweb-action-link {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-tile.gptweb-action-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Pill badge wrapper */
.hero-pill-wrap {
    margin: 16px 0;
}
.hero-pill-wrap > span,
.hero-pill-wrap > a {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.hero-pill-wrap a.gptweb-action-link {
    cursor: pointer;
}
.hero-pill-wrap a.gptweb-action-link:hover {
    opacity: 0.85;
}
.hero-pill-wrap[data-pill-bevel="raised"] > span:hover,
.hero-pill-wrap[data-pill-bevel="raised"] > a:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.hero-pill-wrap[data-pill-bevel="glass"] > span:hover,
.hero-pill-wrap[data-pill-bevel="glass"] > a:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.hero-pill-wrap[data-pill-bevel="outlined"] > span:hover,
.hero-pill-wrap[data-pill-bevel="outlined"] > a:hover {
    filter: brightness(0.9);
}
.hero-pill-wrap[data-pill-shadow="glow"] > span:hover,
.hero-pill-wrap[data-pill-shadow="glow"] > a:hover {
    filter: brightness(1.05);
}

/* ============================================================================
   HERO EXTENDED WIDGETS — Split Section, Accordion, Tabs, Steps, Pricing,
   Video Hero, Countdown Timer
   ============================================================================ */

/* --- Split Section --- */
.hero-split-section {
    display: grid;
    gap: 48px;
    margin: 24px 0;
}
.hero-split-section[data-split="50-50"] { grid-template-columns: 1fr 1fr; }
.hero-split-section[data-split="60-40"] { grid-template-columns: 3fr 2fr; }
.hero-split-section[data-split="40-60"] { grid-template-columns: 2fr 3fr; }
.hero-split-section[data-split="70-30"] { grid-template-columns: 7fr 3fr; }
.hero-split-section[data-split="30-70"] { grid-template-columns: 3fr 7fr; }
/* W380 (2026-05-01) — container-type on each split column so the
 * @container queries below can scale heading sizes against the
 * column's own width. inline-size only (block-size has no effect
 * here and would prevent height: auto from working downstream). */
.hero-split-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    container-type: inline-size;
    container-name: hero-split-col;
}
.hero-split-col img,
.hero-split-col video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
/* W380 (2026-05-01) — Default 16/9 aspect ratio for embedded video
 * inside a split column. Keeps videos at a sensible shape regardless
 * of column width — without this, narrow columns made videos crammed
 * to the column's own intrinsic content height (often a few hundred
 * pixels), which on a 60/40 split at 800px viewport produced a
 * postage-stamp video next to a wall of wrapping heading text.
 *
 * Admins who set explicit aspect-ratio or pixel height inline (via
 * the media-config widget) still win — the :not([style*="..."])
 * gates exclude any element with an inline override. */
.hero-split-col video:not([style*="aspect-ratio"]):not([style*="height"]) {
    aspect-ratio: 16 / 9;
}
.hero-split-col p {
    width: 100%;
    box-sizing: border-box;
}

/* W380 (2026-05-01) — Container-query font scaling for headings
 * inside split columns. Triggers on the COLUMN's width, not the
 * viewport — perfect for split layouts where a 60/40 at 1100px
 * viewport gives the left column ~640px (still fine for a 48px
 * heading) but at 800px gives ~460px (where 48px wraps to 4-5
 * lines and pushes the rest of the panel content out the bottom
 * of the configured banner height).
 *
 * Each rule is gated on `:not([style*="font-size"])` so admins who
 * pinned a specific pixel size via TinyMCE keep their choice. The
 * scaling only affects headings authored without an explicit size
 * (i.e. semantic `<h1>`/`<h2>`/etc. with the default cascade). */
/* W430 (2026-05-02) — Container-query heading auto-scale, opt-OUT
 * removed.
 *
 * W380 (2026-05-01) introduced container queries that scaled
 * .hero-split-col h1/h2/h3 down at narrow column widths, but gated
 * on `:not([style*="font-size"])` so admin TinyMCE pixel sizes won.
 * In practice, ~every admin who customizes the hero pins a 48-64px
 * heading via the TinyMCE size dropdown — which means the gate
 * triggered for ~every tenant and headings stayed huge on tablets.
 *
 * W430: removes the opt-OUT gate AND adds `!important` so the
 * container-query rule beats inline TinyMCE styles. Tradeoff: an
 * admin who DELIBERATELY wants a 64px heading on a 400px column
 * can't have it without Custom CSS. Per Nick's call ("more hands off
 * for admin") we prioritize the common case (heading fits) over the
 * rare case (admin overrides).
 *
 * The container query still fires on COLUMN width (not viewport),
 * so a 50/50 split at desktop where each col is 600px+ keeps
 * admin's chosen size; only when the column actually narrows does
 * the auto-scale kick in. */
/* W430f (2026-05-02) — Tablet-landscape tier added.
 *
 * The existing ≤600 / ≤420 tiers cover small tablets and side-by-
 * side narrow right columns. But on iPad Pro 11" landscape (1194 ×
 * 834) and iPad Pro 12.9" landscape (1366 × 834) at the 60/40
 * split, the LEFT column lands at ~651px and ~796px respectively
 * — both wider than 600 — so the heading stayed at the admin's
 * pinned size (typically 48-64px). At 64px × 3 wrapped lines that's
 * ~192px of heading alone, and once you add the paragraph + button
 * row it overflows the 50vh banner (417px on a 834-tall viewport),
 * pushing the CTA buttons onto the white area below the banner —
 * the bug Nick reported on gpt.syncari.com production.
 *
 * Adding a tier at ≤1000 catches both iPad Pro landscape sizes
 * (left col 651-796) AND MacBook Air (1280 × 832 → left col 743)
 * but leaves true desktop (≥1440 → left col 838+) untouched at
 * admin's pinned size. The 2.5rem (~40px) middle step gives smooth
 * 64 → 40 → 32 → 26 scaling as columns narrow, so no single jump
 * feels jarring. */
/* W450 (2026-05-02) — Side-by-side media height cap.
 *
 * The base @media (max-width: 600px) stacked block already caps media
 * at max-height: 50vh. W450 extends that defense to the side-by-side
 * range (601-1400px tablet/laptop) by adding a max-height cap inside
 * each existing container-query tier. Heading auto-scale (W380/W430/
 * W430f) already handles the LEFT column's typography overflow at
 * narrow widths; W450 protects the RIGHT column when an admin pins a
 * tall video or image taller than the banner background — a 9:16
 * portrait video at width: 90% in a 60/40 right column would otherwise
 * render at 90% × 40% × 16/9 of viewport which can exceed 50vh.
 *
 * Cap values shrink monotonically as columns narrow (50 → 45 → 40vh)
 * because narrower side-by-side columns imply smaller absolute
 * viewports too — leaving more vertical room for content in the
 * other column.
 *
 * !important required to beat TinyMCE inline `style="height: Npx"`.
 * Admins who deliberately want a taller media element on a narrow
 * column override via Branding → Custom CSS using a more specific
 * selector or by raising the @container value.
 *
 * Heading rules below are unchanged from W380/W430/W430f — W450 only
 * adds the media cap selectors inside each existing tier.
 */
@container hero-split-col (max-width: 1000px) {
    .hero-split-col h1 { font-size: 2.5rem !important; line-height: 1.15 !important; }
    .hero-split-col h2 { font-size: 2rem !important; line-height: 1.2 !important; }
    .hero-split-col h3 { font-size: 1.5rem !important; line-height: 1.25 !important; }
    .hero-split-col img,
    .hero-split-col video { max-height: 50vh !important; }
}
@container hero-split-col (max-width: 600px) {
    .hero-split-col h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    .hero-split-col h2 { font-size: 1.6rem !important; line-height: 1.25 !important; }
    .hero-split-col h3 { font-size: 1.3rem !important; line-height: 1.3 !important; }
    .hero-split-col img,
    .hero-split-col video { max-height: 45vh !important; }
}
@container hero-split-col (max-width: 420px) {
    .hero-split-col h1 { font-size: 1.6rem !important; }
    .hero-split-col h2 { font-size: 1.4rem !important; }
    .hero-split-col h3 { font-size: 1.2rem !important; }
    .hero-split-col img,
    .hero-split-col video { max-height: 40vh !important; }
}
img[data-mp-width], video[data-mp-width] {
    display: block !important;
    box-sizing: border-box !important;
}
img[data-mp-border="1"], video[data-mp-border="1"] {
    padding: 0 !important;
}

/* --- FAQ / Accordion --- */
.hero-accordion { margin: 24px 0; }
.hero-accordion-item {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.hero-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-primary);
    user-select: none;
    transition: background 0.2s;
}
.hero-accordion-header:hover { background: var(--bg-secondary); }
.hero-accordion-item.active .hero-accordion-header i {
    transform: rotate(180deg);
}
.hero-accordion-item .hero-accordion-header i[class*="fa-plus"] { transition: transform 0.3s; }
.hero-accordion-item.active .hero-accordion-header i[class*="fa-plus"] { transform: rotate(45deg); }
.hero-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 20px;
}
.hero-accordion-item.active .hero-accordion-body {
    max-height: 2000px;
    padding-bottom: 16px;
}
.hero-accordion-section-header {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-light);
}

/* --- Tabbed Content --- */
.hero-tabs { margin: 24px 0; }
.hero-tab-headers {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hero-tab-headers::-webkit-scrollbar { display: none; }
.hero-tab-header {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}
.hero-tab-header:hover { color: var(--text-primary); }
.hero-tab-header.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    font-weight: 600;
}
.hero-tab-panel {
    display: none;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}
.hero-tab-panel.active { display: block; }

/* v1.0.528 — Pill tab style. The Edit Tabs modal has offered Pill,
   Underline, and Boxed since launch but only Underline ever had CSS,
   so picking Pill or Boxed silently rendered as Underline. Pill
   style: rounded buttons grouped in a soft container, active pill
   filled with the theme color. Looks great for short tab labels. */
.hero-tabs[data-tab-style="pill"] .hero-tab-headers {
    border-bottom: none;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}
.hero-tabs[data-tab-style="pill"] .hero-tab-header {
    border-bottom: none !important;
    border-radius: 999px;
    padding: 8px 16px;
    transition: background 0.2s, color 0.2s;
}
.hero-tabs[data-tab-style="pill"] .hero-tab-header.active {
    background: var(--theme-primary);
    color: var(--theme-action-text, #fff) !important;
    border-color: transparent !important;
}
.hero-tabs[data-tab-style="pill"] .hero-tab-panel { padding: 24px 0 0; }

/* v1.0.528 — Boxed tab style. Modern card pattern: tabs are
   connected to a bordered panel; the active tab shares a background
   with the panel so it looks "popped out". This is the look most
   modern marketing sites use for feature comparisons / tabbed FAQs. */
.hero-tabs[data-tab-style="boxed"] {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: hidden;
}
.hero-tabs[data-tab-style="boxed"] .hero-tab-headers {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 0;
    gap: 0;
}
.hero-tabs[data-tab-style="boxed"] .hero-tab-header {
    padding: 14px 22px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    background: transparent;
}
.hero-tabs[data-tab-style="boxed"] .hero-tab-header:hover:not(.active) {
    background: color-mix(in srgb, var(--bg-primary) 50%, transparent);
}
.hero-tabs[data-tab-style="boxed"] .hero-tab-header.active {
    background: var(--bg-primary);
    color: var(--text-primary) !important;
    font-weight: 600;
    border-bottom-color: var(--theme-primary) !important;
}
.hero-tabs[data-tab-style="boxed"] .hero-tab-panel {
    padding: 28px 24px;
    color: var(--text-primary);
}

/* --- Process / Steps --- */
.hero-steps {
    display: flex;
    gap: 0;
    margin: 32px 0;
    align-items: flex-start;
}
.hero-step-item { flex: 1; text-align: center; }
.hero-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    flex-shrink: 0;
}
.hero-step-connector {
    flex: 1;
    height: 2px;
    background: var(--border-light);
    margin-top: 24px;
}
.hero-steps[data-layout="vertical"] {
    flex-direction: column;
    gap: 0;
}
.hero-steps[data-layout="vertical"] .hero-step-item {
    text-align: left;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.hero-steps[data-layout="vertical"] .hero-step-number {
    margin: 0;
}
.hero-steps[data-layout="vertical"] .hero-step-connector {
    width: 2px;
    height: 32px;
    margin-left: 24px;
    flex: none;
}
.hero-steps[data-animate="true"] .hero-step-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-steps[data-animate="true"] .hero-step-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Pricing Cards --- */
.hero-pricing-grid {
    display: grid;
    gap: 24px;
    margin: 32px 0;
    align-items: stretch;
}
.hero-pricing-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.hero-pricing-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.hero-pricing-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.hero-pricing-card {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 32px 24px;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.hero-pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.hero-pricing-card[data-featured="true"] {
    border: 2px solid var(--theme-primary);
    transform: scale(1.03);
}
.hero-pricing-card[data-featured="true"]:hover {
    transform: scale(1.03) translateY(-2px);
}
.hero-pricing-feature {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text-muted);
}

/* --- Video Hero Section --- */
.hero-video-section {
    position: relative;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-video-section video,
.hero-video-section iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}
.hero-video-overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 32px;
    width: 100%;
}
.hero-video-section[data-text-align="center"] .hero-video-overlay,
.hero-video-section[data-text-align="center"] .hero-video-overlay h1,
.hero-video-section[data-text-align="center"] .hero-video-overlay h2,
.hero-video-section[data-text-align="center"] .hero-video-overlay h3,
.hero-video-section[data-text-align="center"] .hero-video-overlay p {
    text-align: center !important;
}
.hero-video-section[data-text-align="center"] .hero-video-overlay p {
    margin-left: auto !important;
    margin-right: auto !important;
}
.hero-video-section[data-text-align="left"] .hero-video-overlay,
.hero-video-section[data-text-align="left"] .hero-video-overlay h1,
.hero-video-section[data-text-align="left"] .hero-video-overlay h2,
.hero-video-section[data-text-align="left"] .hero-video-overlay h3,
.hero-video-section[data-text-align="left"] .hero-video-overlay p {
    text-align: left !important;
}
.hero-video-section[data-text-align="right"] .hero-video-overlay,
.hero-video-section[data-text-align="right"] .hero-video-overlay h1,
.hero-video-section[data-text-align="right"] .hero-video-overlay h2,
.hero-video-section[data-text-align="right"] .hero-video-overlay h3,
.hero-video-section[data-text-align="right"] .hero-video-overlay p {
    text-align: right !important;
}
.hero-video-section[data-text-align="right"] .hero-video-overlay p {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* --- Countdown Timer --- */
.hero-countdown { margin: 24px 0; }
.hero-countdown-units {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.hero-countdown-unit {
    text-align: center;
    min-width: 72px;
    padding: 16px 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}
.hero-countdown-digit {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.hero-countdown[data-countdown-style="minimal"] .hero-countdown-units { gap: 0; }
.hero-countdown[data-countdown-style="minimal"] .hero-countdown-unit {
    background: none;
    border: none;
    padding: 8px;
    min-width: 60px;
}
.hero-countdown[data-countdown-style="minimal"] .hero-countdown-digit { font-size: 36px; }
.hero-countdown-expired {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 24px;
}

/* --- Extended Widgets: Responsive Breakpoints --- */

@media (max-width: 1024px) {
    .hero-split-section { gap: 32px !important; }
    .hero-pricing-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* W430e (2026-05-02) — Side-by-side scaled tablet/landscape range.
 *
 * Between 601-960px (phone landscape, small tablets in portrait, iPad
 * mini in portrait) the section stays SIDE-BY-SIDE per Nick's call
 * ("on mobile landscape should be scaled and side by side like ipad
 * mini"). Tighten the gap to give each column more horizontal room
 * since columns are inherently narrow at this width. The container
 * queries on .hero-split-col h1/h2/h3 (≤600 / ≤420 column width)
 * handle text auto-scaling, and admin's inline width % on media
 * renders relative to its now-narrower column. */
@media (max-width: 960px) and (min-width: 601px) {
    .hero-split-section { gap: 16px !important; }
}

/* W430e (2026-05-02) — Stack split columns at ≤600px (true mobile
 * portrait only; was ≤960px in W380).
 *
 * Earlier W380 stacked everything ≤960px but Nick called for landscape
 * phones + small tablets to stay side-by-side and scaled like iPad
 * mini. ≤600px catches every phone in portrait (iPhone Pro Max
 * portrait is 430px) but leaves landscape phones (iPhone Pro Max
 * landscape = 932px) and iPad mini portrait (768px) on the
 * side-by-side path where they get container-query auto-scaling.
 *
 * data-reverse-mobile lives in this block because column order only
 * matters when the columns are stacked.
 *
 * W430d media-sizing decision: when stacked, the column is 100% of
 * the section width and text fills it. Per Nick's call ("when we
 * stack on mobile portrait it needs to be the same width as the
 * rest of the content") we set NO max-width cap on stacked media.
 * The admin's authored `width: N%` applies to the full column so
 * the video/image visually matches the surrounding text. Universal
 * `max-height: 50vh !important` stays so a tall portrait video on a
 * short viewport can't dominate the visible area. */
@media (max-width: 600px) {
    .hero-split-section {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .hero-split-section[data-reverse-mobile="true"] .hero-split-right { order: -1; }

    /* Universal max-height + centering for stacked media. No
     * max-width here — the admin's authored `width: N%` applies
     * to the full stacked column width so media matches the
     * horizontal extent of the surrounding text. */
    .hero-split-col img,
    .hero-split-col video {
        max-height: 50vh !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

@media (max-width: 768px) {
    /* v1.0.525 — Steps mobile stacking. Target the inner flex
       container (.hero-steps-inner) rather than .hero-steps itself.
       The original rule flipped flex-direction on .hero-steps, but
       v1.0.523 set .hero-steps to display:block inside Section Pages
       (so the widget's final CTA always sits below the row, not
       inside it). flex-direction does nothing on a block element, so
       the original mobile rule no-op'd and Steps stayed horizontal
       on phones — three columns squished into ~80px wide each, every
       word wrapping per character.

       Targeting .hero-steps-inner (which carries display:flex inline)
       restores the intended vertical stacking on mobile while keeping
       the v1.0.523 final-CTA-below-the-row contract intact. */
    .hero-steps:not([data-layout="vertical"]) .hero-steps-inner {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .hero-steps:not([data-layout="vertical"]) .hero-step-item {
        text-align: left !important;
        display: flex !important;
        gap: 16px !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
    }
    .hero-steps:not([data-layout="vertical"]) .hero-step-number {
        margin: 0 !important;
    }
    .hero-steps:not([data-layout="vertical"]) .hero-step-connector { display: none; }
    /* Per-step CTAs on mobile — left-align inside the stacked step
       so the pill buttons line up under the description text rather
       than centering awkwardly on a left-aligned step. */
    .hero-steps:not([data-layout="vertical"]) .hero-step-cta {
        text-align: left !important;
    }
    .hero-pricing-grid[data-columns="3"],
    .hero-pricing-grid[data-columns="4"] {
        grid-template-columns: 1fr !important;
    }
    /* v1.0.529 — `!important` is mandatory here. The featured
       pricing card carries inline `transform: scale(1.03)` (set
       by buildPricingHtml so the featured card visually pops out
       on desktop). Without !important, inline beats class on
       specificity and the card stays scaled 1.03× on mobile,
       pushing its grid track 3% wider than the viewport and
       causing the whole Section Page to scroll horizontally. */
    .hero-pricing-card[data-featured="true"] { transform: none !important; }
    .hero-pricing-card[data-featured="true"]:hover { transform: translateY(-2px) !important; }
    /* 2026-04-25: video-hero widget on mobile.
       Two combined fixes so video stays visible above + below the
       overlay card instead of the card consuming the entire section:

         1. min-height: 480px on the section provides a generous
            floor that's reliably taller than typical overlay content.
         2. max-height: 60% on the overlay card caps the card at 60%
            of the section's height. With min-height 480, the card
            tops out at 288px regardless of how much text is inside,
            and overflow:hidden on the card hides any spillover so
            the section can never be pushed past 480 by content
            growth. This guarantees ~96px of video visible at top
            AND bottom.
         3. Fonts/line-heights/margins on h2 and p tightened so all
            the text comfortably fits inside the capped card height
            on a 390-430px-wide phone. */
    /* 2026-04-25 (v7): video-hero widget on mobile.
     *
     * Two changes from v6:
     *
     *   1) Explicit Z-INDEX STACK so nothing paints over the video.
     *      User asked "could it be a zindex? like the video is under
     *      the panel?" — turns out body::before in the hero layout has
     *      `position: fixed; z-index: 0` which paints AFTER (on top of)
     *      in-flow content per CSS stacking-order spec. Without an
     *      explicit z-index on the video element, body::before's
     *      gradient sits ON TOP of the video and shows the panel
     *      gradient in place of video frames. Locking the stacking
     *      explicitly:
     *         section  z-index: 1   (above body::before's 0)
     *         video    z-index: 1   (within the section's own
     *                                stacking context, above any
     *                                section background paint)
     *         overlay  z-index: 2   (above the video — the band)
     *
     *   2) `transform: translateZ(0)` on the section forces the
     *      browser to promote it to its own compositing layer.
     *      iOS Safari has a known bug where flex-parented absolute
     *      children inside an opaque-background ancestor can fail
     *      to paint until the layer is explicitly composited. This
     *      is a very common workaround for "video plays audio but
     *      shows blank" on iOS Safari.
     *
     * Layout (unchanged from v6): section is `display: block` (not
     * flex), height 480px, overlay absolutely centered as a band.
     */
    /* 2026-04-25 (v8): iOS Safari has a documented compositing bug
       where `<video>` with `position: absolute; inset: 0` inside an
       overflow:hidden parent renders as a 0x0 element (the gradient
       overlay shows through where the video should be). The fix is
       to flow the video as a NORMAL block child of the section —
       not absolutely positioned. The section is given an explicit
       height; the video naturally fills that height as a block
       element with width:100%; height:100%. The overlay remains
       absolutely-positioned over the video as a centered band.
       Inline `position:absolute;inset:0` on the video element from
       buildVideoHeroHtml is overridden by `!important` here. */
    .hero-video-section {
        display: block !important;
        position: relative !important;
        height: 480px !important;
        min-height: 480px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        z-index: 0 !important;
        background: var(--video-fallback-bg, #000) !important;
    }
    .hero-video-section video,
    .hero-video-section iframe {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        background: transparent !important;
        z-index: 0 !important;
    }
    .hero-video-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 220px !important;
        padding: 18px 20px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 2 !important;
        /* 2026-04-25: pointer-events:none on the overlay container
           so taps pass THROUGH to the underlying <video> element.
           This lets iOS recognize the tap as a user gesture and
           start playback when muted-autoplay was blocked (Low Power
           Mode, Reduce Motion, etc.). The text + CTA children keep
           pointer-events:auto so they remain interactive. Without
           this, the overlay's solid background swallowed every tap
           on the video band and the user had to tap somewhere ELSE
           on the page first to trigger the video, which is
           non-obvious. */
        pointer-events: none !important;
    }
    .hero-video-overlay h2,
    .hero-video-overlay p,
    .hero-video-overlay .hero-video-cta,
    .hero-video-overlay button,
    .hero-video-overlay a {
        pointer-events: auto !important;
    }
    .hero-video-overlay h2 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 0 6px 0 !important; }
    .hero-video-overlay p { font-size: 13.5px !important; line-height: 1.4 !important; margin: 0 0 10px 0 !important; max-width: 100% !important; }
    .hero-video-overlay .hero-video-cta,
    .hero-video-overlay button { font-size: 13px !important; padding: 8px 14px !important; margin-top: 6px !important; }
    .hero-countdown-digit { font-size: 32px !important; }
    .hero-countdown-unit { min-width: 60px !important; padding: 12px 8px !important; }
    .hero-tabs[data-mobile="accordion"] .hero-tab-headers { display: none; }
    .hero-tabs[data-mobile="accordion"] .hero-tab-panel {
        display: block;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 16px;
    }
    .hero-tabs[data-mobile="stack"] .hero-tab-headers {
        flex-direction: column;
    }
    .hero-tabs[data-mobile="stack"] .hero-tab-header {
        border-bottom: 1px solid var(--border-light);
        border-left: 3px solid transparent;
    }
    .hero-tabs[data-mobile="stack"] .hero-tab-header.active {
        border-left-color: var(--theme-primary);
        border-bottom-color: var(--border-light);
    }
}

@media (max-width: 500px) {
    .hero-split-section { gap: 16px !important; }
    .hero-pricing-grid[data-columns="2"] { grid-template-columns: 1fr !important; }
    .hero-pricing-card { padding: 24px 16px !important; }
    .hero-accordion-header { padding: 14px 16px !important; font-size: 14px !important; }
    .hero-countdown-digit { font-size: 28px !important; }
    .hero-countdown-unit { min-width: 50px !important; }
    /* 2026-04-25 (v5): small-phone overrides — same horizontal-band
       treatment, scaled down. */
    .hero-video-section { height: 420px !important; min-height: 420px !important; }
    .hero-video-overlay { max-height: 200px !important; padding: 16px 18px !important; }
    .hero-video-overlay h2 { font-size: 18px !important; line-height: 1.2 !important; }
    .hero-video-overlay p { font-size: 13px !important; line-height: 1.35 !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .hero-split-section { gap: 16px !important; margin: 12px 0 !important; }
    .hero-accordion-header { padding: 10px 14px !important; }
    .hero-steps { margin: 16px 0 !important; }
    .hero-pricing-grid { margin: 16px 0 !important; gap: 12px !important; }
    /* 2026-04-25: landscape-mobile overrides for video hero. The
       max-width:768 + max-width:500 blocks above set height: 480px /
       420px which OVERFLOW the landscape viewport (most phones are
       ~375-414px tall in landscape) — the overlay then dominates
       and the video has no visible portion above/below the band.
       Force a height that fits inside landscape viewport (`60vh`)
       with a hard 280px cap, plus shrink the overlay band so the
       video shows above and below it. */
    .hero-video-section {
        height: 60vh !important;
        min-height: 200px !important;
        max-height: 280px !important;
    }
    .hero-video-overlay {
        max-height: 140px !important;
        padding: 10px 16px !important;
    }
    .hero-video-overlay h2 { font-size: 16px !important; line-height: 1.15 !important; margin: 0 0 4px 0 !important; }
    .hero-video-overlay p { font-size: 12px !important; line-height: 1.3 !important; margin: 0 0 6px 0 !important; }
    .hero-video-overlay .hero-video-cta,
    .hero-video-overlay button { font-size: 12px !important; padding: 6px 12px !important; margin-top: 4px !important; }
    .hero-countdown { margin: 12px 0 !important; }
    .hero-countdown-digit { font-size: 24px !important; }
}

/* Embed/Widget narrow container fallbacks
   Only collapse split/pricing/steps to a single column when the iframe
   OR widget viewport is genuinely narrow. The global @media (max-width:
   768px) block above already handles mobile, but widget mode can run at
   500-768px where the split ratios would still feel cramped, so we
   collapse there too. Wider iframes (layout-full embed at ≥769px) are
   intentionally left alone so the authored data-split ratio renders. */
@media (max-width: 768px) {
    html.embed-mode .hero-split-section,
    html.widget-mode .hero-split-section {
        gap: 16px !important;
    }
    html.embed-mode .hero-pricing-grid,
    html.widget-mode .hero-pricing-grid {
        grid-template-columns: 1fr !important;
    }
    html.embed-mode .hero-steps:not([data-layout="vertical"]),
    html.widget-mode .hero-steps:not([data-layout="vertical"]) {
        flex-direction: column !important;
    }
}

/* Widget mode at any width: always stack — widget panels are small by
   design (300-500px typical) so split ratios rarely make sense. Embed
   mode is excluded so full-width iframes honor the authored ratio. */
html.widget-mode .hero-split-section {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
html.widget-mode .hero-pricing-grid {
    grid-template-columns: 1fr !important;
}
html.widget-mode .hero-steps:not([data-layout="vertical"]) {
    flex-direction: column !important;
}

/* ============================================================================
   WELCOME: Animated Metric Counters
   ============================================================================ */
.hero-metrics-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin: 32px 0;
    flex-wrap: wrap;
}
.hero-metric-counter {
    text-align: center;
    min-width: 100px;
}
.hero-metrics-row .metric-value {
    font-weight: 700;
    line-height: 1.2;
}
.hero-metrics-row .metric-label {
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
}

/* Flip/slide digit containers */
.metric-digit-flip,
.metric-digit-slide {
    display: inline-block;
    overflow: hidden;
    height: 1.4em;
    line-height: 1.4em;
    position: relative;
    vertical-align: top;
}

/* Responsive: 2-per-row on narrow viewports */
@media (max-width: 500px) {
    .hero-metrics-row {
        gap: 24px 32px !important;
    }
    .hero-metric-counter {
        min-width: 80px;
    }
    .hero-metrics-row .metric-value {
        font-size: 28px !important;
    }
}

/* Embed/widget sizing */
html.embed-mode .hero-metrics-row,
html.widget-mode .hero-metrics-row {
    gap: 24px !important;
    margin: 20px 0 !important;
}

/* ============================================================================
   WELCOME: Logo Strip
   ============================================================================ */
.hero-logo-strip {
    margin: 32px 0;
}
.hero-logo-item {
    transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Grayscale: legacy data-grayscale + new data-logo-style */
.hero-logo-strip[data-grayscale="true"] .hero-logo-item,
.hero-logo-strip[data-logo-style="grayscale"] .hero-logo-item {
    filter: grayscale(100%);
    opacity: 0.6;
}
.hero-logo-strip[data-grayscale="true"] .hero-logo-item:hover,
.hero-logo-strip[data-logo-style="grayscale"] .hero-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
}
/* Grayscale on dark theme: auto-invert to white */
[data-theme="dark"] .hero-logo-strip[data-grayscale="true"] .hero-logo-item,
[data-theme="dark"] .hero-logo-strip[data-logo-style="grayscale"] .hero-logo-item {
    filter: grayscale(100%) brightness(0) invert(1);
    opacity: 0.7;
}
[data-theme="dark"] .hero-logo-strip[data-grayscale="true"] .hero-logo-item:hover,
[data-theme="dark"] .hero-logo-strip[data-logo-style="grayscale"] .hero-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
}
/* White: force white logos regardless of theme */
.hero-logo-strip[data-logo-style="white"] .hero-logo-item {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}
.hero-logo-strip[data-logo-style="white"] .hero-logo-item:hover {
    filter: brightness(0) invert(1);
    opacity: 1;
}
@keyframes heroLogoScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hero-logo-scroll {
    will-change: transform;
}
.hero-logo-strip:hover .hero-logo-scroll {
    animation-play-state: paused;
}

/* ============================================================================
   WELCOME: Testimonial Cards
   ============================================================================ */
.hero-testimonial-grid {
    margin: 32px 0;
}
.hero-testimonial-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-testimonial-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

@media (max-width: 500px) {
    .hero-testimonial-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-logo-strip [style*="gap"] {
        gap: 20px !important;
    }
}

html.embed-mode .hero-testimonial-grid,
html.widget-mode .hero-testimonial-grid {
    gap: 10px !important;
    margin: 20px 0 !important;
}
html.embed-mode .hero-logo-strip,
html.widget-mode .hero-logo-strip {
    margin: 20px 0 !important;
}

/* ============================================================================
   ADMIN: Welcome TinyMCE Editor Container
   ============================================================================ */
.welcome-tinymce-container {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    min-height: 280px;
}

.welcome-tinymce-container .tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
}

.welcome-text {
    line-height: 1.6;
    color: var(--text-primary);
}

.welcome-text b,
.welcome-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

.welcome-text i,
.welcome-text em {
    font-style: italic;
}

.welcome-text br {
    line-height: 1.6;
}

.welcome-text p {
    margin-bottom: 1rem;
}

.welcome-text p:last-child {
    margin-bottom: 0;
}

/* Professional Table Styling for Chat Messages */
.table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    /* USE CSS VARIABLE for border-radius - allows custom CSS override */
    border-radius: var(--table-border-radius, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--table-cell-border, var(--theme-primary-light));
    max-width: 100%;
    width: fit-content;
    min-width: 100%;
    box-sizing: border-box;
    background: transparent;
    position: relative;
}

/* Mobile: table wrapper fits chat area - Extended to include all touch devices */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    /* Force message-content to full width so cards can expand */
    .message-content {
        width: 100%;  /* Force full width (was: auto, causing cards to shrink) */
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: visible !important;  /* CRITICAL: Don't clip bubble borders/radius when cards are present */
    }
    
    /* Ensure assistant message styling persists on mobile */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;  /* CRITICAL: Prevent clipping of bubble styling */
    }
    
    /* Dark theme assistant message on mobile */
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
    
    .table-wrapper {
        width: 100%;  /* Full width of available space */
        min-width: auto;  /* Don't force minimum */
        max-width: 100%;  /* Respect container */
        overflow: visible;  /* No scroll for cards */
        box-sizing: border-box;
        margin: 0.5rem 0;  /* Vertical margin only - stay within bubble padding */
        box-shadow: none;  /* Remove shadow from wrapper, cards have their own */
        border: none;  /* Remove border from wrapper, cards have their own */
    }
}

.message-table {
    width: 100%;
    min-width: 400px;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: var(--bg-primary);
    /* USE CSS VARIABLES for border-radius/overflow - allows custom CSS override */
    border-radius: var(--table-border-radius, 8px);
    overflow: var(--table-overflow, hidden);
    table-layout: fixed;
    box-sizing: border-box;
    font-size: calc(6px + var(--typo-base-size, 14px) * 0.5) !important;
}

.message-table thead {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
}

.message-table th {
    padding: 10px 10px;  /* Reduced from 14px 12px */
    text-align: left;
    font-weight: 600;  /* Reduced from 700 */
    font-size: calc(4px + var(--typo-base-size, 14px) * 0.5) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light));
    border-bottom: 3px solid var(--table-cell-border, var(--theme-primary-light));
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    color: var(--theme-action-text) !important;
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    box-sizing: border-box;
}

.message-table th:last-child {
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light));
}

.message-table td {
    padding: 10px 10px;  /* Reduced from 14px 12px */
    border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light));
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light));
    vertical-align: top;
    line-height: calc(1.5 * var(--typo-spacing-scale, 1));
    color: var(--table-body-text, var(--text-primary));
    background: var(--bg-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    font-size: calc(6px + var(--typo-base-size, 14px) * 0.5) !important;
    box-sizing: border-box;
}

/* DESKTOP ONLY: Remove right border on last column (mobile card view needs borders) */
@media (min-width: 1025px) {
    .message-table td:last-child {
        border-right: none;
    }
}

.message-table tbody tr:nth-child(even) {
    background: var(--table-row-even-bg, var(--bg-secondary));
}

.message-table tbody tr:hover {
    background: var(--table-row-hover, rgba(0, 0, 0, 0.03));
    transition: background 0.2s ease;
    /* No transform, no shadow, no border-color change - keeps borders visible */
}

/* Desktop only: Remove borders on table edges (not needed in mobile card view) */
/* NOTE: .json-table and .chart-data-table are excluded - they need borders for visual closure */
/* IMPORTANT: Must use !important to override mobile card rules when both match */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .message-table:not(.json-table):not(.chart-data-table) th:last-child {
        border-right: none !important;
    }
    
    .message-table:not(.json-table):not(.chart-data-table) td:last-child {
        border-right: none !important;
    }
    
    .message-table:not(.json-table):not(.chart-data-table) tbody tr:last-child td {
        border-bottom: none !important;
    }
    
    /* Override any box-shadow fallbacks from mobile rules */
    .message-table:not(.json-table):not(.chart-data-table) td:last-child {
        box-shadow: none !important;
    }
}

/* Special styling for checkmark/cross cells */
.message-table td:has(.fas.fa-check),
.message-table td:has(.fas.fa-times) {
    text-align: center;
    width: 60px;
    font-size: 1.1rem;
}

/* Enhanced visual separation - Light theme (blue) */
.message-table th:first-child {
    border-left: 4px solid var(--table-first-column, var(--theme-primary-dark));
    font-weight: 800;
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
}

.message-table td:first-child {
    border-left: 4px solid var(--table-first-column, var(--theme-primary-dark));
    font-weight: 600;
    background: var(--table-first-column-bg, rgba(91, 167, 247, 0.1)) !important;
    color: var(--table-first-column-text, var(--text-primary)) !important;
}

/* Better icon styling in tables */
.message-table .fas {
    font-size: 1.2rem;
    margin: 0 4px;
}

.message-table .fa-check-circle,
.message-table .fa-check,
.message-table .fa-check-square {
    color: #10b981 !important;
}

.message-table .fa-times-circle,
.message-table .fa-times {
    color: #ef4444 !important;
}

.message-table .fa-exclamation-triangle {
    color: #f59e0b !important;
}

/* Dark theme table styling - uses customizable colors from branding */
/* DESKTOP ONLY: Wrapper border for table layout (not mobile card view) */
@media (min-width: 1025px) {
    [data-theme="dark"] .table-wrapper {
        border: 1px solid var(--table-cell-border, #14b8a6) !important;
    }

    /* Explicit: Wrapper containing json-table gets themed border */
    .table-wrapper:has(.json-table) {
        border: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    }

    [data-theme="dark"] .table-wrapper:has(.json-table) {
        border: 1px solid var(--table-cell-border, #14b8a6) !important;
    }
}

[data-theme="dark"] .message-table thead {
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488));
    color: var(--theme-action-text);
}

[data-theme="dark"] .message-table th {
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488)) !important;
    color: var(--theme-action-text) !important;
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
    border-bottom: 3px solid var(--table-cell-border, #14b8a6);
}

/* ========================================
   RESPONSIVE TABLE SYSTEM
   ======================================== */

/* Large Tablets & Landscape Phones (iPad Mini, iPhone Pro Max landscape) */
@media (max-width: 1024px) {
    /* Ensure bubble styling on landscape phones and tablets */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;
    }
    
    /* Prevent horizontal overflow on tablets */
    .chat-container {
        width: 100% !important;  /* Override desktop 80% - use full available width */
        max-width: none !important;  /* Remove 1200px desktop constraint */
        padding: 0 16px !important;  /* Tighter padding */
        margin: 0 !important;  /* Remove auto margins */
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .chat-messages {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .message-content {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
}

/* Tablet Optimization */
@media (max-width: 768px) {
    .message-table {
        min-width: 350px;
        font-size: calc(5px + var(--typo-base-size, 14px) * 0.5);
    }
    
    .message-table th,
    .message-table td {
        padding: 10px 8px;
        font-size: calc(5px + var(--typo-base-size, 14px) * 0.5);
    }
    
    .message-table th {
        font-size: calc(3px + var(--typo-base-size, 14px) * 0.5);
    }
    
    /* Ensure bubble styling on tablets too */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;
    }
    
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
}

/* Mobile Optimization - Base Styles - Extended to include all touch devices */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .table-wrapper {
        margin: 1rem 0;
        /* USE CSS VARIABLE for border-radius - allows custom CSS override */
        border-radius: var(--table-border-radius, 6px);
    }
    
    .message-table {
        min-width: 300px;
        font-size: calc(4px + var(--typo-base-size, 14px) * 0.5);
    }
    
    .message-table th,
    .message-table td {
        padding: 8px 6px;
        font-size: calc(4px + var(--typo-base-size, 14px) * 0.5);
        word-break: break-word;
    }
    
    .message-table th {
        font-size: calc(2px + var(--typo-base-size, 14px) * 0.5);
        letter-spacing: 0.3px;
    }
}

/* ========================================
   MOBILE TABLE STRATEGY (≤640px)
   ALL TABLES: Card transform for maximum readability
   ======================================== */

/* Card Transform for ALL Tables on Mobile - Extended to include all touch devices */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    /* CRITICAL: Preserve bubble styling when cards transform */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;
    }
    
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
    
    /* Hide thead for ALL card-style tables */
    .message-table[data-columns="2"] thead,
    .message-table[data-columns="3"] thead,
    .message-table[data-columns="4"] thead,
    .message-table[data-columns="5"] thead,
    .message-table[data-columns="6"] thead,
    .message-table[data-columns="7"] thead,
    .message-table[data-columns="8"] thead,
    .message-table[data-columns="9"] thead,
    .message-table[data-columns="10"] thead {
        display: none !important;  /* Force hide with !important */
    }
    
    .message-table[data-columns="2"] thead tr,
    .message-table[data-columns="3"] thead tr,
    .message-table[data-columns="4"] thead tr,
    .message-table[data-columns="5"] thead tr,
    .message-table[data-columns="6"] thead tr,
    .message-table[data-columns="7"] thead tr,
    .message-table[data-columns="8"] thead tr,
    .message-table[data-columns="9"] thead tr,
    .message-table[data-columns="10"] thead tr,
    .message-table[data-columns="2"] th,
    .message-table[data-columns="3"] th,
    .message-table[data-columns="4"] th,
    .message-table[data-columns="5"] th,
    .message-table[data-columns="6"] th,
    .message-table[data-columns="7"] th,
    .message-table[data-columns="8"] th,
    .message-table[data-columns="9"] th,
    .message-table[data-columns="10"] th {
        display: none !important;  /* Force hide all header elements */
    }
    
    /* Transform table structure for ALL column counts */
    .message-table[data-columns="2"],
    .message-table[data-columns="3"],
    .message-table[data-columns="4"],
    .message-table[data-columns="5"],
    .message-table[data-columns="6"],
    .message-table[data-columns="7"],
    .message-table[data-columns="8"],
    .message-table[data-columns="9"],
    .message-table[data-columns="10"] {
        display: block;
        width: 100%;  /* Span full width of container */
        max-width: 100%;  /* Don't exceed container */
        min-width: 0 !important;  /* Force override ALL min-width rules (400px, 350px, 300px) */
        border: none;
        box-sizing: border-box;
    }
    
    .message-table[data-columns="2"] tbody,
    .message-table[data-columns="3"] tbody,
    .message-table[data-columns="4"] tbody,
    .message-table[data-columns="5"] tbody,
    .message-table[data-columns="6"] tbody,
    .message-table[data-columns="7"] tbody,
    .message-table[data-columns="8"] tbody,
    .message-table[data-columns="9"] tbody,
    .message-table[data-columns="10"] tbody {
        display: block;
    }
    
    /* Each row becomes a card (ALL columns) - no border, cells handle borders */
    .message-table[data-columns="2"] tbody tr,
    .message-table[data-columns="3"] tbody tr,
    .message-table[data-columns="4"] tbody tr,
    .message-table[data-columns="5"] tbody tr,
    .message-table[data-columns="6"] tbody tr,
    .message-table[data-columns="7"] tbody tr,
    .message-table[data-columns="8"] tbody tr,
    .message-table[data-columns="9"] tbody tr,
    .message-table[data-columns="10"] tbody tr {
        display: block;
        width: calc(100% - 16px);  /* Slightly narrower to show bubble around edges */
        max-width: 100%;  /* Don't exceed */
        box-sizing: border-box;  /* Include padding/border in width */
        margin: 0 8px 12px 8px;  /* Add horizontal margin to reveal bubble edges */
        border: none;  /* No card border - cells handle borders */
        border-radius: 8px;
        padding: 0;  /* Remove padding - let cells handle spacing */
        overflow: visible;  /* Don't clip - allow borders to show */
        background: var(--bg-secondary);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);  /* Subtle card shadow */
    }
    
    /* Stack cells vertically (ALL columns) - explicit borders on all 4 sides */
    /* IMPORTANT: Include ALL table types: message-table, json-table, chart-data-table */
    .message-table[data-columns="2"] td,
    .message-table[data-columns="3"] td,
    .message-table[data-columns="4"] td,
    .message-table[data-columns="5"] td,
    .message-table[data-columns="6"] td,
    .message-table[data-columns="7"] td,
    .message-table[data-columns="8"] td,
    .message-table[data-columns="9"] td,
    .message-table[data-columns="10"] td,
    .json-table[data-columns="2"] td,
    .json-table[data-columns="3"] td,
    .json-table[data-columns="4"] td,
    .json-table[data-columns="5"] td,
    .json-table[data-columns="6"] td,
    .json-table[data-columns="7"] td,
    .json-table[data-columns="8"] td,
    .json-table[data-columns="9"] td,
    .json-table[data-columns="10"] td,
    .chart-data-table[data-columns="2"] td,
    .chart-data-table[data-columns="3"] td,
    .chart-data-table[data-columns="4"] td,
    .chart-data-table[data-columns="5"] td,
    .chart-data-table[data-columns="6"] td,
    .chart-data-table[data-columns="7"] td,
    .chart-data-table[data-columns="8"] td,
    .chart-data-table[data-columns="9"] td,
    .chart-data-table[data-columns="10"] td {
        display: block !important;
        text-align: left !important;
        padding: calc(12px * var(--typo-spacing-scale, 1)) calc(16px * var(--typo-spacing-scale, 1)) !important;
        /* Explicit borders on each side - most reliable for mobile browsers */
        border-top: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        border-left: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        margin-top: -1px !important;  /* Collapse adjacent borders */
        max-width: none !important;
        width: calc(100% - 1px) !important;  /* Slightly narrower to ensure right border renders */
        box-sizing: border-box !important;
        font-size: calc(6px + var(--typo-base-size, 14px) * 0.5) !important;
    }
    
    
    /* Card set container - add padding at top/bottom for visual separation */
    .message-table[data-columns] tbody,
    .json-table[data-columns] tbody,
    .chart-data-table[data-columns] tbody {
        display: block !important;
        padding: 12px 0 !important;  /* Top and bottom padding for card set */
    }
    
    /* ALL cards get the same background buffer - not just even rows */
    .message-table[data-columns] tbody tr,
    .json-table[data-columns] tbody tr,
    .chart-data-table[data-columns] tbody tr {
        background: var(--table-row-even-bg, var(--bg-secondary)) !important;
        /* USE CSS VARIABLE for mobile card radius - allows custom CSS override */
        border-radius: var(--mobile-card-border-radius, 12px) !important;
        margin-bottom: 12px !important;
        display: block !important;
        overflow: visible !important;  /* CRITICAL: Don't clip - allow cell borders to show */
    }
    
    /* Last card: remove bottom margin since tbody has padding */
    .message-table[data-columns] tbody tr:last-child,
    .json-table[data-columns] tbody tr:last-child,
    .chart-data-table[data-columns] tbody tr:last-child {
        margin-bottom: 0 !important;
    }
    
    [data-theme="dark"] .message-table[data-columns] tbody tr,
    [data-theme="dark"] .json-table[data-columns] tbody tr,
    [data-theme="dark"] .chart-data-table[data-columns] tbody tr {
        background: var(--table-row-even-bg, #2d2d30) !important;
    }
    
    /* First cell: no negative margin, 4px left border accent, background fill, rounded TOP corners */
    .message-table[data-columns] td:first-child,
    .json-table[data-columns] td:first-child,
    .chart-data-table[data-columns] td:first-child {
        margin-top: 0 !important;  /* First cell doesn't need negative margin */
        border: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;  /* Set all borders first */
        border-left: 4px solid var(--table-first-column, var(--theme-primary-dark)) !important;  /* Left accent uses first column color */
        background: var(--table-first-column-bg, rgba(91, 167, 247, 0.1)) !important;  /* Light blue background fill */
        background-color: var(--table-first-column-bg, rgba(91, 167, 247, 0.1)) !important;  /* Ensure background color */
        font-weight: 600 !important;  /* Bold first column */
        color: var(--table-first-column-text, var(--text-primary)) !important;  /* Text color */
        /* Rounded TOP corners only (bottom corners are on last cell) - uses CSS variable for customization */
        border-top-left-radius: var(--mobile-card-border-radius, 8px) !important;
        border-top-right-radius: var(--mobile-card-border-radius, 8px) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    /* Last cell: override desktop rule that removes right border, add rounded BOTTOM corners */
    .message-table[data-columns="2"] td:last-child,
    .message-table[data-columns="3"] td:last-child,
    .message-table[data-columns="4"] td:last-child,
    .message-table[data-columns="5"] td:last-child,
    .message-table[data-columns="6"] td:last-child,
    .message-table[data-columns="7"] td:last-child,
    .message-table[data-columns="8"] td:last-child,
    .message-table[data-columns="9"] td:last-child,
    .message-table[data-columns="10"] td:last-child,
    .json-table[data-columns="2"] td:last-child,
    .json-table[data-columns="3"] td:last-child,
    .json-table[data-columns="4"] td:last-child,
    .json-table[data-columns="5"] td:last-child,
    .json-table[data-columns="6"] td:last-child,
    .json-table[data-columns="7"] td:last-child,
    .json-table[data-columns="8"] td:last-child,
    .json-table[data-columns="9"] td:last-child,
    .json-table[data-columns="10"] td:last-child,
    .chart-data-table[data-columns="2"] td:last-child,
    .chart-data-table[data-columns="3"] td:last-child,
    .chart-data-table[data-columns="4"] td:last-child,
    .chart-data-table[data-columns="5"] td:last-child,
    .chart-data-table[data-columns="6"] td:last-child,
    .chart-data-table[data-columns="7"] td:last-child,
    .chart-data-table[data-columns="8"] td:last-child,
    .chart-data-table[data-columns="9"] td:last-child,
    .chart-data-table[data-columns="10"] td:last-child {
        border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        /* No box-shadow needed - borders are sufficient */
        box-shadow: none !important;
        /* Rounded BOTTOM corners only (top corners are on first cell) - uses CSS variable for customization */
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: var(--mobile-card-border-radius, 8px) !important;
        border-bottom-right-radius: var(--mobile-card-border-radius, 8px) !important;
    }
    
    /* Last card (last row): ensure all cells have bottom border */
    .message-table[data-columns="2"] tbody tr:last-child td,
    .message-table[data-columns="3"] tbody tr:last-child td,
    .message-table[data-columns="4"] tbody tr:last-child td,
    .message-table[data-columns="5"] tbody tr:last-child td,
    .message-table[data-columns="6"] tbody tr:last-child td,
    .message-table[data-columns="7"] tbody tr:last-child td,
    .message-table[data-columns="8"] tbody tr:last-child td,
    .message-table[data-columns="9"] tbody tr:last-child td,
    .message-table[data-columns="10"] tbody tr:last-child td,
    .json-table[data-columns="2"] tbody tr:last-child td,
    .json-table[data-columns="3"] tbody tr:last-child td,
    .json-table[data-columns="4"] tbody tr:last-child td,
    .json-table[data-columns="5"] tbody tr:last-child td,
    .json-table[data-columns="6"] tbody tr:last-child td,
    .json-table[data-columns="7"] tbody tr:last-child td,
    .json-table[data-columns="8"] tbody tr:last-child td,
    .json-table[data-columns="9"] tbody tr:last-child td,
    .json-table[data-columns="10"] tbody tr:last-child td,
    .chart-data-table[data-columns="2"] tbody tr:last-child td,
    .chart-data-table[data-columns="3"] tbody tr:last-child td,
    .chart-data-table[data-columns="4"] tbody tr:last-child td,
    .chart-data-table[data-columns="5"] tbody tr:last-child td,
    .chart-data-table[data-columns="6"] tbody tr:last-child td,
    .chart-data-table[data-columns="7"] tbody tr:last-child td,
    .chart-data-table[data-columns="8"] tbody tr:last-child td,
    .chart-data-table[data-columns="9"] tbody tr:last-child td,
    .chart-data-table[data-columns="10"] tbody tr:last-child td {
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        border-bottom-color: var(--table-cell-border, var(--theme-primary-light)) !important;
    }
    
    /* Very last cell (last card, last cell): ensure both right AND bottom borders */
    .message-table[data-columns="2"] tbody tr:last-child td:last-child,
    .message-table[data-columns="3"] tbody tr:last-child td:last-child,
    .message-table[data-columns="4"] tbody tr:last-child td:last-child,
    .message-table[data-columns="5"] tbody tr:last-child td:last-child,
    .message-table[data-columns="6"] tbody tr:last-child td:last-child,
    .message-table[data-columns="7"] tbody tr:last-child td:last-child,
    .message-table[data-columns="8"] tbody tr:last-child td:last-child,
    .message-table[data-columns="9"] tbody tr:last-child td:last-child,
    .message-table[data-columns="10"] tbody tr:last-child td:last-child,
    .json-table[data-columns="2"] tbody tr:last-child td:last-child,
    .json-table[data-columns="3"] tbody tr:last-child td:last-child,
    .json-table[data-columns="4"] tbody tr:last-child td:last-child,
    .json-table[data-columns="5"] tbody tr:last-child td:last-child,
    .json-table[data-columns="6"] tbody tr:last-child td:last-child,
    .json-table[data-columns="7"] tbody tr:last-child td:last-child,
    .json-table[data-columns="8"] tbody tr:last-child td:last-child,
    .json-table[data-columns="9"] tbody tr:last-child td:last-child,
    .json-table[data-columns="10"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="2"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="3"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="4"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="5"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="6"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="7"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="8"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="9"] tbody tr:last-child td:last-child,
    .chart-data-table[data-columns="10"] tbody tr:last-child td:last-child {
        border-right-style: solid !important;
        border-right-width: 1px !important;
        border-right-color: var(--table-cell-border, var(--theme-primary-light)) !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        border-bottom-color: var(--table-cell-border, var(--theme-primary-light)) !important;
    }
    
    
    /* Add labels using data attributes (ALL columns) */
    .message-table[data-columns="2"] td::before,
    .message-table[data-columns="3"] td::before,
    .message-table[data-columns="4"] td::before,
    .message-table[data-columns="5"] td::before,
    .message-table[data-columns="6"] td::before,
    .message-table[data-columns="7"] td::before,
    .message-table[data-columns="8"] td::before,
    .message-table[data-columns="9"] td::before,
    .message-table[data-columns="10"] td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--table-header-gradient-end, var(--theme-primary-dark));
        display: block;
        margin-bottom: 4px;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    [data-theme="dark"] .message-table[data-columns="2"] td::before,
    [data-theme="dark"] .message-table[data-columns="3"] td::before,
    [data-theme="dark"] .message-table[data-columns="4"] td::before,
    [data-theme="dark"] .message-table[data-columns="5"] td::before,
    [data-theme="dark"] .message-table[data-columns="6"] td::before,
    [data-theme="dark"] .message-table[data-columns="7"] td::before,
    [data-theme="dark"] .message-table[data-columns="8"] td::before,
    [data-theme="dark"] .message-table[data-columns="9"] td::before,
    [data-theme="dark"] .message-table[data-columns="10"] td::before {
        color: var(--table-header-gradient-start, #14b8a6);
    }
    
    /* Dark theme: use tenant's table border color for all cell borders */
    [data-theme="dark"] .message-table[data-columns="2"] td,
    [data-theme="dark"] .message-table[data-columns="3"] td,
    [data-theme="dark"] .message-table[data-columns="4"] td,
    [data-theme="dark"] .message-table[data-columns="5"] td,
    [data-theme="dark"] .message-table[data-columns="6"] td,
    [data-theme="dark"] .message-table[data-columns="7"] td,
    [data-theme="dark"] .message-table[data-columns="8"] td,
    [data-theme="dark"] .message-table[data-columns="9"] td,
    [data-theme="dark"] .message-table[data-columns="10"] td {
        border-color: var(--table-cell-border, #14b8a6) !important;
    }
    
    /* Dark theme: teal accent and background on first cell */
    [data-theme="dark"] .message-table[data-columns] td:first-child {
        border-color: var(--table-first-column, #14b8a6) !important;  /* Teal borders */
        border-left-color: var(--table-first-column, #14b8a6) !important;  /* Teal accent in dark mode */
        background: var(--table-first-column-bg, rgba(20, 184, 166, 0.15)) !important;  /* Teal background fill */
        background-color: var(--table-first-column-bg, rgba(20, 184, 166, 0.15)) !important;  /* Ensure background color */
        color: var(--table-first-column-text, #ffffff) !important;  /* White text */
    }
    
    /* Dark theme: themed right border on last cell */
    [data-theme="dark"] .message-table[data-columns="2"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="3"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="4"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="5"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="6"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="7"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="8"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="9"] td:last-child,
    [data-theme="dark"] .message-table[data-columns="10"] td:last-child {
        border-right-color: var(--table-cell-border, #14b8a6) !important;
    }
    
    .message-table[data-columns="2"] tbody tr:hover,
    .message-table[data-columns="3"] tbody tr:hover,
    .message-table[data-columns="4"] tbody tr:hover,
    .message-table[data-columns="5"] tbody tr:hover,
    .message-table[data-columns="6"] tbody tr:hover,
    .message-table[data-columns="7"] tbody tr:hover,
    .message-table[data-columns="8"] tbody tr:hover,
    .message-table[data-columns="9"] tbody tr:hover,
    .message-table[data-columns="10"] tbody tr:hover {
        background: rgba(0, 0, 0, 0.03);  /* Subtle neutral gray */
        /* No transform or shadow - keeps table stable */
    }
    
    /* ========================================
       OLD: ULTRA-COMPACT TABLE MODE (4-5 columns) - DISABLED
       Now using card view for ALL tables on mobile
       Code retained for reference if reverting needed
       ======================================== */
    
    /* DISABLED - 4-5 column tables now use card view above
    .message-table[data-columns="4"],
    .message-table[data-columns="5"] {
        font-size: 0.55rem;
        min-width: 0 !important;
        display: table;
    }
    
    .message-table[data-columns="4"] th,
    .message-table[data-columns="5"] th {
        font-size: 0.45rem;
        padding: 3px 2px;
        letter-spacing: 0.2px;
        line-height: 1.2;
        word-break: break-word;
    }
    
    .message-table[data-columns="4"] td,
    .message-table[data-columns="5"] td {
        font-size: 0.5rem;
        padding: 4px 3px;
        line-height: 1.3;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    */
}

/* Extra Small Mobile (iPhone SE, etc) */
@media (max-width: 480px) {
    .message-table {
        min-width: 280px;
        font-size: calc(3px + var(--typo-base-size, 14px) * 0.5);
    }
    
    .message-table th,
    .message-table td {
        padding: 6px 4px;
        font-size: calc(3px + var(--typo-base-size, 14px) * 0.5);
    }
    
    /* Card view adjustments for tiny screens (ALL columns) */
    .message-table[data-columns="2"] tbody tr,
    .message-table[data-columns="3"] tbody tr,
    .message-table[data-columns="4"] tbody tr,
    .message-table[data-columns="5"] tbody tr,
    .message-table[data-columns="6"] tbody tr,
    .message-table[data-columns="7"] tbody tr,
    .message-table[data-columns="8"] tbody tr,
    .message-table[data-columns="9"] tbody tr,
    .message-table[data-columns="10"] tbody tr {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .message-table[data-columns="2"] td,
    .message-table[data-columns="3"] td,
    .message-table[data-columns="4"] td,
    .message-table[data-columns="5"] td,
    .message-table[data-columns="6"] td,
    .message-table[data-columns="7"] td,
    .message-table[data-columns="8"] td,
    .message-table[data-columns="9"] td,
    .message-table[data-columns="10"] td {
        font-size: 0.8rem;
        padding: 5px 0;
    }
    
    .message-table[data-columns="2"] td::before,
    .message-table[data-columns="3"] td::before,
    .message-table[data-columns="4"] td::before,
    .message-table[data-columns="5"] td::before,
    .message-table[data-columns="6"] td::before,
    .message-table[data-columns="7"] td::before,
    .message-table[data-columns="8"] td::before,
    .message-table[data-columns="9"] td::before,
    .message-table[data-columns="10"] td::before {
        font-size: 0.65rem;
    }
    
    /* OLD: Ultra-compact for 4-5 columns - DISABLED (now using card view above)
    .message-table[data-columns="4"],
    .message-table[data-columns="5"] {
        font-size: 0.5rem;
        min-width: 270px;
    }
    
    .message-table[data-columns="4"] th,
    .message-table[data-columns="5"] th {
        font-size: 0.4rem;
        padding: 2px 1px;
    }
    
    .message-table[data-columns="4"] td,
    .message-table[data-columns="5"] td {
        font-size: 0.45rem;
        padding: 3px 2px;
    }
    */
}

/* OLD: Scroll indicator for wide tables - DISABLED (all tables now use cards)
@media (max-width: 640px) {
    .table-wrapper:not(:has(.message-table[data-columns="2"])):not(:has(.message-table[data-columns="3"]))::after {
        content: "← Swipe to see more →";
        display: block;
        text-align: center;
        font-size: 0.65rem;
        color: var(--text-muted);
        padding: 6px;
        background: var(--bg-tertiary);
        border-top: 1px solid var(--border-light);
        font-style: italic;
    }
*/
    
/* Mobile: All tables use card view (no scroll indicator needed) */
@media (max-width: 640px) {
    
    /* Diagram containers also constrained */
    .diagram-container,
    .diagram-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* SVG diagrams scale to fit */
    .diagram-container svg,
    .mermaid svg {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* CRITICAL: Final bubble styling - must be LAST to override all other 640px rules */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;
    }
    
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
}

[data-theme="dark"] .message-table th:first-child {
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488)) !important;
    color: var(--theme-action-text) !important;
    border-left: 4px solid var(--table-first-column, #0d9488);
}

[data-theme="dark"] .message-table td:first-child {
    background: var(--table-first-column-bg, rgba(20, 184, 166, 0.15)) !important;
    color: var(--table-first-column-text, #ffffff) !important;
    border-left: 4px solid var(--table-first-column, #14b8a6);
}

[data-theme="dark"] .message-table td {
    border-bottom: 1px solid var(--table-cell-border, #14b8a6);
    border-right: 1px solid var(--table-cell-border, #14b8a6);
    color: var(--table-body-text, var(--text-primary));
}

/* OLD responsive table code removed - was conflicting with new card transform system */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Container for dynamically generated form fields */
#dynamicFormFields {
    display: flex;
    flex-direction: column;
    gap: 24px;  /* Increased vertical spacing between form rows */
}

/* Edit User Info modal - consistent spacing */
#editUserInfoForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form row for side-by-side fields (e.g., First Name / Last Name) */
#dynamicFormFields > .form-row {
    margin-bottom: 0; /* Remove extra margin since gap handles spacing */
}

/* Individual form groups that are NOT in a row need spacing too */
#dynamicFormFields > .form-group {
    margin-bottom: 0; /* Let gap handle spacing */
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-group label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.form-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

textarea.form-input {
    resize: vertical;
    min-height: 60px;
}

/* LLM Instructions textarea - taller for complex system prompts */
#systemInstructions {
    height: 430px;
    min-height: 430px;
}

/* Phone number formatting */
.form-input[type="tel"] {
    font-family: 'Courier New', monospace;
}

/* ========================================
   DATE INPUT STYLING
   Theme-aware calendar picker icons
   ======================================== */

/* Date input base styling */
.form-input[type="date"] {
    color-scheme: dark; /* Use dark mode picker in dark themes */
    accent-color: var(--theme-primary);
}

/* Calendar picker indicator - theme primary color */
.form-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
    filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(190deg) brightness(100%);
    opacity: 0.8;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(50%) sepia(100%) saturate(600%) hue-rotate(190deg) brightness(110%);
}

/* Light theme override */
[data-theme="light"] .form-input[type="date"] {
    color-scheme: light;
}

[data-theme="light"] .form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(190deg) brightness(90%);
}

/* Required field asterisk indicator — used by contact/trial/demo modals, campaign forms */
.required-asterisk {
    color: var(--theme-primary);
    margin-left: 2px;
    font-weight: 600;
}

/* ========================================
   PROFESSIONAL SLIDER COMPONENT
   Reusable slider with value display
   ======================================== */

.slider-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.slider-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: var(--theme-action-text);
    font-weight: 600;
    font-size: 13px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.slider-value.secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: visible;
}

.slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-light));
    border-radius: 4px;
    transition: width 0.15s ease;
}

.slider-input {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid var(--theme-primary);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-track:hover .slider-thumb {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.slider-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.slider-help i {
    margin-right: 4px;
    opacity: 0.7;
}

/* Dark theme adjustments */
[data-theme="dark"] .slider-track {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .slider-thumb {
    background: var(--bg-primary);
    border-color: var(--theme-primary-light);
}

[data-theme="dark"] .slider-value {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Slider with marks/ticks */
.slider-marks {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 10px;
    color: var(--text-muted);
}

.slider-mark {
    position: relative;
}

.slider-mark::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 4px;
    background: var(--border-medium);
}

/* Number inputs should not show red border - server-side validation handles limits */
.form-input[type="number"] {
    border-color: var(--border-medium);
}

.form-input[type="number"]:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Tablet responsive — widen modals on narrower viewports where 50vw is too cramped.
   Covers iPads (768-1366px) and similar tablet viewports. */
@media (min-width: 769px) and (max-width: 1400px) {
    .contact-modal.modal-content-active {
        max-width: 85vw !important;
        max-width: 85dvw !important;
        width: 85vw !important;
        width: 85dvw !important;
    }
}

/* Mobile responsive form */
@media (max-width: 768px) {
    .contact-modal {
        max-width: 95%;
        margin: 10px;
        max-height: 80vh;
        max-height: 80dvh;
        display: flex;
        flex-direction: column;
    }
    
    .contact-modal .modal-body {
        max-height: calc(80vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Override JS inline styles for modal-content-active on mobile to prevent
       fullscreen bleed. !important beats the non-!important inline styles set
       by modal-handlers.js applyConfig(). Admin-configured width/height are
       respected — we only enforce margin + border-radius so the modal never
       touches the viewport edges. */
    .contact-modal.modal-content-active {
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 10px auto !important;
        border-radius: 12px !important;
    }

    .contact-modal.modal-content-active .modal-body {
        max-height: calc(100vh - 160px) !important;
        max-height: calc(100dvh - 160px) !important;
    }

    .modal-content-section iframe {
        height: 300px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .modal-footer {
        gap: 8px;
    }

    .modal-btn {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile responsive form - scheduling active (same size as non-scheduling) */
@media (max-width: 768px) {
    .contact-modal.scheduling-active {
        max-width: 95%;
        max-height: 80vh;  /* Match non-scheduling modal */
    }
    
    .contact-modal.scheduling-active .modal-body {
        max-height: calc(80vh - 130px);  /* Match non-scheduling modal */
    }
    
    .scheduling-section-wrapper {
        margin-top: 20px;
    }
    
    .scheduling-event-types-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Portrait - constrain modal height */
@media (max-width: 480px) {
    .contact-modal {
        max-height: 75vh;
        max-height: 75dvh;
        margin: 8px;
    }
    
    .contact-modal .modal-body {
        max-height: calc(75vh - 120px);
        padding: 16px;
    }

    .contact-modal.modal-content-active {
        max-width: calc(100vw - 16px) !important;
        height: auto !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
        border-radius: 12px !important;
    }

    .contact-modal.modal-content-active .modal-body {
        max-height: calc(100vh - 150px) !important;
        max-height: calc(100dvh - 150px) !important;
        padding: 12px;
    }

    .modal-content-section iframe {
        height: 250px;
    }

    .modal-content-section video {
        border-radius: 4px;
        -webkit-border-radius: 4px;
    }
    
    .contact-modal .modal-header {
        padding: 14px 16px;
    }
    
    /* Scheduling on mobile portrait - same size as non-scheduling */
    .contact-modal.scheduling-active {
        max-height: 75vh;  /* Match non-scheduling modal */
    }
    
    .contact-modal.scheduling-active .modal-body {
        max-height: calc(75vh - 120px);  /* Match non-scheduling modal */
        padding: 12px;
    }
    
    .scheduling-section-divider {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .scheduling-section-divider span {
        font-size: 0.875rem;
    }
    
    .contact-modal .modal-footer {
        padding: 14px 16px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* About modal styles removed - feature deprecated */

/* Settings Modal Styles */
.settings-modal {
    max-width: 600px;
    width: 95%;
}

.settings-modal-body {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    overscroll-behavior: contain;       /* Prevent scroll chaining to parent */
    touch-action: pan-y;                /* Immediate touch scroll recognition */
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.settings-modal-body::-webkit-scrollbar {
    width: 6px;
}

.settings-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.settings-modal-body::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.settings-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.settings-section {
    padding: 24px;
    border-bottom: 1px solid var(--border-light);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-selection {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.theme-description {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* Typography Settings Styles */
.typography-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.typography-setting {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.typography-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.typography-options {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.typography-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-weight: 600;
}

.typography-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.typography-btn.active {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.typography-btn.tts-voice-btn {
    width: auto;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.tts-voice-options {
    flex-wrap: wrap;
}

.typography-description {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin: 8px 0 0 0;
    max-width: 350px;
    line-height: 1.4;
}

/* Typography Scaling CSS Variables */
:root {
    /* Default typography scale */
    --typo-base-size: 14px;
    --typo-scale: 1;
    --typo-spacing-scale: 1;
}

/* Font Size: Extra Small (10px) */
[data-font-size="xsmall"] {
    --typo-base-size: 10px;
    --typo-scale: 0.714;
}

/* Font Size: Small (12px) */
[data-font-size="small"] {
    --typo-base-size: 12px;
    --typo-scale: 0.857;
}

/* Font Size: Default (14px) */
[data-font-size="default"] {
    --typo-base-size: 14px;
    --typo-scale: 1;
}

/* Font Size: Large (16px) */
[data-font-size="large"] {
    --typo-base-size: 16px;
    --typo-scale: 1.143;
}

/* Font Size: Extra Large (18px) */
[data-font-size="xlarge"] {
    --typo-base-size: 18px;
    --typo-scale: 1.286;
}

/* Density: Compact */
[data-density="compact"] {
    --typo-spacing-scale: 0.75;
}

/* Density: Default */
[data-density="default"] {
    --typo-spacing-scale: 1;
}

/* Density: Relaxed */
[data-density="relaxed"] {
    --typo-spacing-scale: 1.35;
}

/* Apply typography scaling to chat content, Section Pages, and the
   homepage hero welcome-message editor surface.
   v1.0.550 — Added `.section-page-content` + `.welcome-message` so
   user typography settings (Font Size + Density in the user profile
   modal) take effect on Section Pages too — previously only chat
   responses scaled. Caveat: inline font-sizes baked into widget
   markup (e.g. <span style="font-size: 20px;"> from TinyMCE pickers
   or hero widget templates) still win over these class rules per
   normal CSS specificity. Plain typed text + plain headings respect
   the user's pick. */
.message-content,
.json-response,
.section-page-content,
.welcome-message {
    font-size: var(--typo-base-size, 14px);
}

.message-content h1,
.json-response-title,
.section-page-content h1,
.welcome-message h1 {
    font-size: calc(17px * var(--typo-scale, 1));
}

.message-content h2,
.section-page-content h2,
.welcome-message h2 {
    font-size: calc(15px * var(--typo-scale, 1));
}

.message-content h3,
.section-page-content h3,
.welcome-message h3 {
    font-size: calc(14px * var(--typo-scale, 1));
}

.message-content h4,
.section-page-content h4,
.welcome-message h4 {
    font-size: calc(13px * var(--typo-scale, 1));
}

.message-content p,
.json-paragraph,
.json-text-section,
.section-page-content p,
.welcome-message p {
    line-height: calc(1.65 * var(--typo-spacing-scale, 1));
    margin-bottom: calc(12px * var(--typo-spacing-scale, 1));
}

.message-content li,
.section-page-content li,
.welcome-message li {
    margin-bottom: calc(8px * var(--typo-spacing-scale, 1));
}

.message-table td,
.message-table th {
    padding: calc(10px * var(--typo-spacing-scale, 1)) calc(10px * var(--typo-spacing-scale, 1));
}

/* Chart data tables — slightly smaller than regular tables for data-table feel */
.chart-data-table {
    font-size: calc(5px + var(--typo-base-size, 14px) * 0.5);
}
.chart-data-table-wrapper h4 {
    font-size: calc(7px + var(--typo-base-size, 14px) * 0.5);
}
.chart-data-table-wrapper h4 span {
    font-size: calc(5px + var(--typo-base-size, 14px) * 0.5);
}

/* Deep link icon, related topics, and topic chips */
.message-content a.deep-link::after {
    font-size: calc(var(--typo-base-size, 14px) * 0.64);
}
.related-topics-label {
    font-size: calc(var(--typo-base-size, 14px) - 2px);
}
.topic-chip {
    padding: calc(7px * var(--typo-spacing-scale, 1)) calc(14px * var(--typo-spacing-scale, 1));
}
.topic-chip i {
    font-size: calc(var(--typo-base-size, 14px) - 2px);
}

/* ============================================================================
   VISITOR FONT APPLICATION RULES
   These rules apply admin-configured fonts to visitor-facing UI only.
   Admin panels (.admin-panel, .admin-modal, #adminModal, etc.) are PROTECTED.
   ============================================================================ */

/* Admin Panel Font Protection - always use GPTWeb brand fonts */
.admin-panel,
.admin-modal,
#adminModal,
#campaignEditModal,
.campaign-editor-modal,
#editVisitorModal,
#editAccountModal,
.admin-modal-overlay {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========== HEADER & TAGLINES ========== */
.app-title,
.app-title-mobile,
.header .logo-container span {
    font-family: var(--visitor-font-family, inherit);
}

/* ========== SIDEBAR MENU ========== */
/* Section Headers (PROMPT LIBRARY, FAVORITES, SETTINGS, etc.) */
/* Vertical padding applied evenly to top and bottom */
html body .sidebar .section-header:not(.admin-panel .section-header) {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
    padding-bottom: var(--visitor-menu-section-bottom-gap, 10px) !important;
    padding-left: var(--visitor-menu-section-indent, 16px) !important;
}

html body .sidebar .section-header h4:not(.admin-panel .section-header h4) {
    font-family: var(--visitor-menu-font-family, var(--visitor-font-family, 'Inter', system-ui, sans-serif)) !important;
    font-size: var(--visitor-menu-header-font-size, 14px) !important;
    font-weight: var(--visitor-menu-header-font-weight, 600) !important;
    color: var(--visitor-menu-section-text-color, var(--text-secondary)) !important;
    letter-spacing: var(--visitor-letter-spacing, 0em) !important;
}

/* Section Header Info Icon - color accent */
html body .sidebar .section-header .info-icon:not(.admin-panel .info-icon) {
    color: var(--visitor-menu-section-info-icon-color, var(--text-light)) !important;
}

/* Divider Headers (folder groups) - color accents */
html body .sidebar .menu-divider-header:not(.admin-panel .menu-divider-header) {
    color: var(--visitor-menu-divider-text-color, var(--text-secondary)) !important;
}

html body .sidebar .menu-divider-header:not(.admin-panel .menu-divider-header) i:first-child {
    color: var(--visitor-menu-divider-icon-color, var(--text-light)) !important;
}

html body .sidebar .menu-divider-header:not(.admin-panel .menu-divider-header) span {
    color: var(--visitor-menu-divider-text-color, var(--text-secondary)) !important;
}

/* Menu Items (chat items) - color accents */
html body .sidebar .chat-item:not(.admin-panel .chat-item) {
    color: var(--visitor-menu-item-text-color, var(--text-secondary)) !important;
}

html body .sidebar .chat-item:not(.admin-panel .chat-item) i {
    color: var(--visitor-menu-item-icon-color, var(--text-light)) !important;
}

html body .sidebar .chat-item:not(.admin-panel .chat-item) span {
    color: var(--visitor-menu-item-text-color, var(--text-secondary)) !important;
}

/* Top-level Menu Items (NOT inside divider content) */
/* Original CSS: padding: 10px 16px; gap: 8px */
html body .sidebar .section-items > .chat-item:not(.menu-divider .chat-item):not(.menu-divider-content .chat-item) {
    padding: var(--visitor-menu-item-padding, 10px) 16px var(--visitor-menu-item-padding, 10px) var(--visitor-menu-item-indent, 16px) !important;
    gap: var(--visitor-menu-icon-gap, 8px) !important;
}

/* First item after section header - configurable gap */
/* These rules must have higher specificity than the general menu rules */
html body .sidebar .section-items > .chat-item:first-child:not(.menu-divider .chat-item):not(.menu-divider-content .chat-item) {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
}

/* First menu-divider header gets the section gap instead of normal divider padding */
/* Simplified selector without complex :not() */
html body .sidebar .section-items > .menu-divider:first-child > .menu-divider-header {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
    padding-bottom: var(--visitor-menu-divider-padding, 10px) !important;
    padding-left: var(--visitor-menu-divider-indent, 14px) !important;
    padding-right: 14px !important;
}

/* Also target by li element type for extra specificity */
html body .sidebar .section-items > li.menu-divider:first-child > div.menu-divider-header {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
    padding-bottom: var(--visitor-menu-divider-padding, 10px) !important;
    padding-left: var(--visitor-menu-divider-indent, 14px) !important;
    padding-right: 14px !important;
}

/* First chat-item (not inside a folder) */
html body .sidebar .section-items > li.chat-item:first-child {
    padding-top: var(--visitor-menu-section-bottom-gap, 10px) !important;
}

/* Nested Menu Items (inside divider content - folders) */
/* Original CSS: padding-left: 28px */
html body .sidebar .menu-divider-content .chat-item {
    padding: var(--visitor-menu-item-padding, 10px) 16px var(--visitor-menu-item-padding, 10px) var(--visitor-menu-nested-indent, 28px) !important;
    gap: var(--visitor-menu-icon-gap, 8px) !important;
}

html body .sidebar .chat-item span,
html body .sidebar .chat-item .chat-item-text {
    font-family: var(--visitor-menu-font-family, var(--visitor-font-family, 'Inter', system-ui, sans-serif)) !important;
    font-size: var(--visitor-menu-font-size, 14px) !important;
    font-weight: var(--visitor-menu-item-font-weight, 400) !important;
    letter-spacing: var(--visitor-letter-spacing, 0em) !important;
    line-height: var(--visitor-line-height, 1.5) !important;
}

/* Menu Divider Headers (folder/group headers like "Test (2)") */
/* Original CSS: padding: 10px 14px; gap: 8px; font-weight: 600 */
html body .sidebar .menu-divider-header {
    font-family: var(--visitor-menu-font-family, var(--visitor-font-family, 'Inter', system-ui, sans-serif)) !important;
    font-size: var(--visitor-menu-divider-font-size, 14px) !important;
    font-weight: var(--visitor-menu-divider-font-weight, 600) !important;
    padding: var(--visitor-menu-divider-padding, 10px) 14px var(--visitor-menu-divider-padding, 10px) var(--visitor-menu-divider-indent, 14px) !important;
    gap: var(--visitor-menu-icon-gap, 8px) !important;
}

html body .sidebar .menu-divider-header span {
    font-size: var(--visitor-menu-divider-font-size, 14px) !important;
    font-weight: var(--visitor-menu-divider-font-weight, 600) !important;
}

/* ========== AI RESPONSES & CHAT ========== */
/* AI Response Content - high specificity to override existing rules */
.chat-area .message .message-content,
.chat-container .message .message-content,
.assistant-message .message-content,
.user-message .message-content,
.message-content {
    font-family: var(--visitor-response-font-family, var(--visitor-font-family, 'Inter', system-ui, sans-serif)) !important;
    font-size: calc(var(--visitor-response-font-size-base, 14px) * var(--typo-scale, 1)) !important;
    line-height: calc(var(--visitor-response-line-height-base, 1.6) * var(--typo-spacing-scale, 1)) !important;
    letter-spacing: var(--visitor-letter-spacing, 0em) !important;
}

/* AI Response paragraphs, lists, headings */
.assistant-message .message-content p,
.assistant-message .message-content li,
.assistant-message .message-content h1,
.assistant-message .message-content h2,
.assistant-message .message-content h3,
.assistant-message .message-content h4,
.user-message .message-content p,
.user-message .message-content li {
    font-family: var(--visitor-response-font-family, inherit) !important;
}

/* Chat Bubbles */
.chat-bubble:not(.admin-panel .chat-bubble):not(.admin-modal .chat-bubble),
.message-bubble:not(.admin-panel .message-bubble):not(.admin-modal .message-bubble) {
    font-family: var(--visitor-response-font-family, inherit) !important;
}

/* Welcome Message */
.welcome-message:not(.admin-panel .welcome-message),
.welcome-message-content,
.welcome-content,
.welcome-message h1,
.welcome-message h2,
.welcome-message p,
.welcome-message li {
    font-family: var(--visitor-response-font-family, inherit) !important;
}

/* Chat Input */
.chat-input:not(.admin-panel .chat-input):not(#campaignEditModal .chat-input),
#userInput,
.input-area textarea {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== BUTTONS & NAVIGATION ========== */
.nav-button:not(.admin-panel .nav-button),
.nav-button-primary:not(.admin-panel .nav-button-primary),
.demo-btn, .trial-btn, .contact-btn, .login-btn,
.header .nav-right button:not(.admin-panel button) {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== VISITOR MODALS ========== */
/* Contact/Demo/Trial Forms */
.contact-modal,
.contact-modal .modal-content,
.contact-modal .modal-body,
.contact-modal h3,
.contact-modal label,
.contact-modal input,
.contact-modal textarea,
.contact-modal button {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* Settings/Profile Modal */
.settings-modal,
.settings-modal .modal-content,
.settings-modal .modal-body,
.settings-modal h3,
.settings-modal h5,
.settings-modal label,
.settings-modal span,
.settings-modal p,
.settings-modal button,
.settings-modal .btn,
.settings-modal .modal-btn,
.settings-modal .btn-primary,
.settings-modal .btn-secondary,
.settings-modal .btn-danger,
.settings-modal .action-btn,
.settings-modal input,
.settings-modal select {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
}

/* Profile/Settings modal buttons - comprehensive coverage */
#settingsModal,
#settingsModal *:not(.fas):not(.far):not(.fab):not(i),
#profileModal,
#profileModal *:not(.fas):not(.far):not(.fab):not(i),
.profile-actions button,
.profile-actions .btn,
.email-preferences button,
.cookie-preferences button,
.prompt-history-section button {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
}

/* ========== CAMPAIGNS ========== */
/* Campaign Display Modal */
#campaignDisplayModal:not(.admin-panel #campaignDisplayModal),
#campaignDisplayModal .modal-content,
#campaignDisplayModal .campaign-content {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* Campaign Toasters */
.campaign-toaster,
.toaster-campaign,
.campaign-toaster-content,
.toaster-content {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* Campaign Cards & Embedded */
.campaign-embedded:not(#campaignEditModal .campaign-embedded),
.campaign-card:not(#campaignEditModal .campaign-card):not(.campaign-editor-modal .campaign-card),
.campaign-message,
.campaign-title,
.campaign-description,
.in-chat-campaign {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== VISITOR TOASTS ========== */
/* Campaign and visitor action toasts - NOT admin notification toasts */
.toast:not(.admin-toast),
.toast .toast-content,
.toast .toast-message,
.toast .toast-title,
.toast .toast-body,
.ghost-access-toast,
.visitor-toast {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== CHAT INPUT (Visitor Prompt) ========== */
.chat-input:not(.admin-panel .chat-input):not(#campaignEditModal .chat-input),
#userInput,
.input-area textarea,
.chat-input-wrapper textarea {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
    font-size: var(--visitor-input-size-desktop, 15px) !important;
}

@media screen and (max-width: 1024px) {
    .chat-input:not(.admin-panel .chat-input):not(#campaignEditModal .chat-input),
    #userInput,
    .input-area textarea,
    .chat-input-wrapper textarea {
        font-size: var(--visitor-input-size-mobile, 16px) !important;
    }
}

/* ========== MESSAGE ACTION BUTTONS ========== */
.message-actions button,
.message-actions .action-btn,
.response-actions button,
.response-actions .btn,
.message-bubble .message-footer button,
.copy-btn, .email-btn, .print-btn, .forward-btn, .link-btn {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
    font-size: var(--visitor-action-btn-size-desktop, 12px) !important;
}

@media screen and (max-width: 1024px) {
    .message-actions button,
    .message-actions .action-btn,
    .response-actions button,
    .response-actions .btn,
    .message-bubble .message-footer button,
    .copy-btn, .email-btn, .print-btn, .forward-btn, .link-btn {
        font-size: var(--visitor-action-btn-size-mobile, 13px) !important;
    }
}

/* ========== CAMPAIGN TYPOGRAPHY ========== */
/* Campaign Title */
.campaign-title,
.campaign-toaster-title,
.toast-campaign-title,
.campaign-card-title,
.in-chat-campaign-title,
.campaign-embedded .title,
.campaign-modal-title {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
    font-size: var(--visitor-campaign-title-desktop, 18px) !important;
}

@media screen and (max-width: 1024px) {
    .campaign-title,
    .campaign-toaster-title,
    .toast-campaign-title,
    .campaign-card-title,
    .in-chat-campaign-title,
    .campaign-embedded .title,
    .campaign-modal-title {
        font-size: var(--visitor-campaign-title-mobile, 16px) !important;
    }
}

/* Campaign CTA Buttons */
.campaign-cta,
.campaign-cta-btn,
.campaign-btn,
.campaign-toaster button,
.campaign-card button,
.campaign-embedded button,
.in-chat-campaign button,
.toast button.campaign-action,
.campaign-modal button.cta,
.campaign-actions button {
    font-family: var(--visitor-font-family, 'Inter', system-ui, sans-serif) !important;
    font-size: var(--visitor-campaign-cta-desktop, 14px) !important;
}

@media screen and (max-width: 1024px) {
    .campaign-cta,
    .campaign-cta-btn,
    .campaign-btn,
    .campaign-toaster button,
    .campaign-card button,
    .campaign-embedded button,
    .in-chat-campaign button,
    .toast button.campaign-action,
    .campaign-modal button.cta,
    .campaign-actions button {
        font-size: var(--visitor-campaign-cta-mobile, 15px) !important;
    }
}

/* Campaign form and button alignment - ensure left-justify for in-chat campaigns */
.campaign-embedded form,
.campaign-embedded form + div,
.in-chat-campaign form,
.in-chat-campaign form + div,
.message-content .campaign-embedded form + div,
.message-content [data-campaign-id] form + div {
    justify-content: flex-start !important;
}

/* ========== USER PROFILE ========== */
.profile-section:not(.admin-panel .profile-section),
.user-profile-card:not(.admin-panel .user-profile-card),
.profile-main:not(.admin-panel .profile-main),
.profile-name:not(.admin-panel .profile-name),
.profile-subtitle:not(.admin-panel .profile-subtitle),
.profile-info:not(.admin-panel .profile-info) {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== FORMS & INPUTS ========== */
.form-group:not(.admin-panel .form-group):not(.admin-modal .form-group) label,
.form-group:not(.admin-panel .form-group):not(.admin-modal .form-group) input,
.form-group:not(.admin-panel .form-group):not(.admin-modal .form-group) textarea,
.form-group:not(.admin-panel .form-group):not(.admin-modal .form-group) select {
    font-family: var(--visitor-font-family, inherit) !important;
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media screen and (max-width: 1024px) {
    .sidebar .section-header h4:not(.admin-panel .section-header h4) {
        font-size: var(--visitor-mobile-header-font-size, 12px) !important;
    }
    
    .sidebar .chat-item:not(.admin-panel .chat-item) {
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
    }
    
    .sidebar .chat-item:not(.admin-panel .chat-item) span,
    .sidebar .chat-item:not(.admin-panel .chat-item) .chat-item-text {
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
    
    /* Mobile divider header padding */
    .sidebar .menu-divider-header:not(.admin-panel .menu-divider-header) {
        padding-top: var(--visitor-mobile-divider-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-divider-padding, 10px) !important;
    }
    
    .app-title-mobile {
        font-family: var(--visitor-font-family, inherit);
    }
}

/* User Profile Styles */
.user-profile-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.profile-value {
    font-size: 14px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

/* Avatar Settings Styles */
.avatar-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar-preview .message-avatar {
    background: #e5e7eb;
    color: #374151;
}

[data-theme="dark"] .avatar-preview .message-avatar {
    background: #4b5563;
    color: #e5e7eb;
}

.avatar-preview span {
    font-size: 12px;
    color: var(--text-muted);
}

.avatar-options {
    display: flex;
    gap: 20px;
}

.avatar-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar-option input[type="radio"] {
    margin: 0;
}

.avatar-option label {
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.avatar-config {
    width: 100%;
    max-width: 300px;
}

.icon-selector,
.initials-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icon-selector label,
.initials-input label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.user-avatar-initials {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-action-text);
}

.user-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.setting-label i {
    color: var(--text-light);
    width: 16px;
    text-align: center;
}

.setting-label span {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
}

.setting-control {
    display: flex;
    align-items: center;
}

/* Theme Toggle Styles */
.theme-toggle {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.theme-toggle input[type="radio"] {
    display: none;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
}

.theme-option:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.theme-toggle input[type="radio"]:checked + .theme-option {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.theme-option i {
    font-size: 14px;
}

/* Toggle Switch Styles */
/* 2026-02-02: Enhanced for better ON/OFF visibility */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-medium);
    transition: 0.3s;
    border-radius: 24px;
    /* OFF state: subtle inner shadow to show depth */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* OFF state indicator (subtle X) */
.slider:after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size: contain;
    transition: 0.3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    /* Add subtle shadow to the knob */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: var(--theme-primary);
    /* ON state: glow effect to make it more visible */
    box-shadow: 0 0 8px rgba(17, 163, 240, 0.4), inset 0 1px 3px rgba(0,0,0,0.1);
}

/* ON state indicator (checkmark) */
input:checked + .slider:after {
    content: "";
    left: 8px;
    right: auto;
    opacity: 0.9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Dark mode adjustments */
[data-theme="dark"] input:checked + .slider {
    box-shadow: 0 0 10px rgba(117, 209, 255, 0.5), inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Mobile responsive for settings modal */
@media (max-width: 768px) {
    .settings-modal {
        width: 95vw;
        margin: 10px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    .settings-modal-body {
        max-height: calc(80vh - 130px);  /* Match contact modal calc */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    
    .settings-section {
        padding: 16px;
    }
    
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .setting-control {
        width: 100%;
        justify-content: flex-end;
    }
    
    .theme-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile Portrait - settings modal */
@media (max-width: 480px) {
    .settings-modal {
        max-height: 75vh;
        margin: 8px;
    }
    
    .settings-modal-body {
        max-height: calc(75vh - 120px);
    }
    
    .settings-modal .modal-header {
        padding: 14px 16px;
    }
    
    .settings-modal .modal-footer {
        padding: 14px 16px;
    }
}

/* Admin Interface Styles */
.admin-section {
    border-top: 2px solid var(--theme-primary);
    background: var(--bg-secondary);
}

.admin-login {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.admin-tab {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.admin-tab:only-child {
    flex: 0 0 auto;
}

.admin-tab.active {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.admin-tab:hover:not(.active) {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.admin-content {
    min-height: 300px;
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

.admin-tab-content h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Visitor Tabs (inside Manage Visitors admin tab) */
.visitor-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
}

.visitor-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.visitor-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    font-weight: 600;
}

.visitor-tab:hover:not(.active) {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.visitor-tab-content {
    display: none;
}

.visitor-tab-content.active {
    display: block;
}

/* Edit Visitor Modal (nested inside admin modal) */
#editVisitorModal {
    z-index: 15000 !important;  /* Above admin modal (10000) */
}

#editVisitorModal .modal-content {
    max-width: 900px;
    max-height: 80vh;  /* Slightly shorter to fit better */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

#editVisitorModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#editVisitorModal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

#editVisitorModal .modal-content::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

#editVisitorModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Responsive grid for visitor contact fields */
.visitor-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .visitor-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Field Management Modal (above Edit Visitor Modal) */
#fieldManagementModal {
    z-index: 16000 !important;  /* Above Edit Visitor Modal (15000) */
}

/* Field Management Modal (above Edit Visitor Modal) */
#fieldManagementModal {
    z-index: 16000 !important;  /* Above Edit Visitor Modal (15000) */
}

/* Field Builder Modal (above Field Management Modal) */
#fieldBuilderModal {
    z-index: 18000 !important;  /* Above Field Management Modal (16000) - highest in stack */
}

#apiKeyGenerateModal,
#apiKeyDetailsModal,
#apiKeyRotateModal,
#apiKeyRevokeModal {
    z-index: 18000 !important;  /* Same as Field Builder - highest in modal stack */
}

/* Generic Modal System (v1.1 Modal Manager) */
#genericConfirmModal,
#genericAlertModal,
#genericSuccessModal,
#genericErrorModal,
#twoStepConfirmStep1,
#twoStepConfirmStep2 {
    z-index: 19000 !important;  /* Above all other modals */
}

/* Modal Theme Classes */
.modal-theme-danger {
    --modal-accent: #ef4444;
    --modal-bg-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.modal-theme-warning {
    --modal-accent: #f59e0b;
    --modal-bg-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.modal-theme-success {
    --modal-accent: #10b981;
    --modal-bg-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.modal-theme-info {
    --modal-accent: var(--theme-primary);
    --modal-bg-gradient: linear-gradient(135deg, rgba(17, 163, 240, 0.1) 0%, rgba(17, 163, 240, 0.05) 100%);
}

/* Modal Button Variants */
.modal-btn.danger {
    background: #ef4444;
    color: var(--theme-action-text);
    border: none;
}

.modal-btn.danger:hover {
    background: #dc2626;
}

.modal-btn.warning {
    background: #f59e0b;
    color: var(--theme-action-text);
    border: none;
}

.modal-btn.warning:hover {
    background: #d97706;
}

.modal-btn.success {
    background: #10b981;
    color: var(--theme-action-text);
    border: none;
}

.modal-btn.success:hover {
    background: #059669;
}

/* Two-step confirmation input styling */
#twoStepConfirmInput {
    width: 100%;
    padding: 12px;
    border: 2px solid #ef4444;
    border-radius: 6px;
    font-size: 14px;
    font-family: monospace;
    text-transform: uppercase;
    background: var(--bg-primary);
    color: var(--text-primary);
}

#twoStepConfirmInput:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Field category sections */
.field-category-section {
    margin-bottom: 24px;
}

.fields-grid {
    display: grid;
    gap: 12px;
}

.rag-upload {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 2px dashed var(--border-medium);
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.upload-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.rag-upload input[type="file"] {
    width: 100%;
}

.file-upload-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.file-upload-pills:empty {
    display: none;
}

.file-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-primary);
    max-width: 280px;
}

.file-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-pill-size {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 11px;
}

.file-pill-remove {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px;
    transition: color 0.15s;
}

.file-pill-remove:hover {
    color: #ef4444;
}

.rag-documents,
.memory-sessions {
    flex: 1;
    min-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-primary);
}

.document-item,
.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

.document-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.document-item:last-child,
.session-item:last-child {
    border-bottom: none;
}

.document-title,
.session-title {
    font-weight: 500;
    color: var(--text-primary);
}

.document-meta,
.session-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.delete-btn {
    background: #ef4444;
    color: var(--theme-action-text);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.delete-btn:hover {
    background: #dc2626;
}

/* Dark theme admin styles */
[data-theme="dark"] .admin-section {
    background: var(--bg-tertiary);
    border-top-color: var(--editor-primary);
}

[data-theme="dark"] .admin-tabs {
    background: var(--bg-primary);
}

[data-theme="dark"] .admin-tab.active {
    background: var(--editor-primary);
    color: var(--bg-primary);
}

[data-theme="dark"] .rag-upload {
    background: var(--bg-primary);
    border-color: var(--border-medium);
}

/* Admin Interface Improvements */
.admin-tab-content h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}

.admin-tab-content textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    margin-bottom: 16px;
}

.admin-tab-content textarea.form-input[rows="2"] {
    min-height: 60px;
    margin-bottom: 0;
}

.admin-tab-content .modal-btn {
    margin-top: 0;
}

/* Collections Interface Styles */
.collections-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.collection-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.collection-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
}

.collection-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.collection-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-action-text);
    font-size: 14px;
}

.collection-info h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.collection-description {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 12px 0;
    line-height: 1.4;
}

.collection-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.collection-count {
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.collection-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.collection-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collection-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Upload Type Tabs Styles - Matching Branding Tab Pattern */
.upload-type-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
}

.upload-type-tab {
    padding: 12px 24px;
    background: #f5f5f5;
    border: none;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-type-tab:hover {
    background: rgba(74, 144, 226, 0.08);
    color: var(--theme-primary);
}

.upload-type-tab.active {
    background: rgba(74, 144, 226, 0.12);
    color: var(--theme-primary);
    border-left: 3px solid var(--theme-primary);
    border-bottom: 3px solid var(--theme-primary);
    font-weight: 600;
}

/* Image Grid Styles */
.images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.image-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
}

.image-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-md);
}

.image-card-preview {
    position: relative;
    height: 200px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.image-card-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Image Hover Overlay */
.image-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--theme-action-text);
    padding: 15px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}

.image-card-preview:hover .image-hover-overlay {
    display: flex;
}

.image-hover-overlay h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--theme-action-text);
}

.image-hover-overlay p {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.9);
}

.image-hover-overlay .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.image-hover-overlay .keyword-tag {
    background: rgba(74, 144, 226, 0.3);
    border: 1px solid rgba(74, 144, 226, 0.6);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

/* Image Card Info */
.image-card-info {
    padding: 15px;
}

.image-card-info .image-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-info .image-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.image-card-info .image-keywords {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-actions {
    display: flex;
    gap: 8px;
}

.image-card-actions button {
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.image-card-actions button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.image-card-actions button.delete:hover {
    background: #fee;
    color: #ef4444;
    border-color: #ef4444;
}

/* Images Empty State */
.images-empty-state {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.images-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--theme-primary);
    opacity: 0.5;
}

.images-empty-state p {
    font-size: 14px;
    margin-bottom: 8px;
}

.images-empty-state p:last-child {
    font-size: 13px;
    color: var(--text-muted);
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .images-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .upload-type-tabs {
        gap: 5px;
    }
    
    .upload-type-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .image-card-preview {
        height: 150px;
    }
}

/* Activity Reports Styles */
.reports-filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.filter-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.reports-dashboard {
    min-height: 400px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
}

.reports-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.reports-loading i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--theme-primary);
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.report-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.report-card h6 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--theme-primary);
    margin: 0 0 4px 0;
}

.report-label {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-light);
}

.activity-table th,
.activity-table td {
    padding: 12px;
    text-align: left;
}

/* Toaster notifications */
@keyframes toastSlideDown {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toastSlideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100px); opacity: 0; }
}

.toast {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mobile portrait only: Make toasts nearly full width (~90%) */
@media (max-width: 480px) {
    .toast {
        max-width: calc(100vw - 40px) !important;
        min-width: calc(100vw - 40px) !important;
    }
}

/* Hover effects - preserve position transform for all 9 positions */
/* Top row corners */
.toast[data-position="upper-left"]:hover,
.toast[data-position="top-left"]:hover,
.toast[data-position="upper-right"]:hover,
.toast[data-position="top-right"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Top row center */
.toast[data-position="upper-middle"]:hover,
.toast[data-position="top-center"]:hover {
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Middle row sides */
.toast[data-position="middle-left"]:hover,
.toast[data-position="middle-right"]:hover {
    transform: translateY(calc(-50% - 2px)) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Center */
.toast[data-position="center"]:hover {
    transform: translate(-50%, calc(-50% - 2px)) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Bottom row corners */
.toast[data-position="bottom-left"]:hover,
.toast[data-position="bottom-right"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Bottom row center */
.toast[data-position="bottom-center"]:hover {
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
    transition: background-color 0.2s ease;
}

/* NO HOVER EFFECTS AT ALL */
.sortable:hover {
    filter: none !important;
    transform: none !important;
}

.sortable .sort-icon,
.sortable i {
    color: var(--theme-action-text);
    opacity: 0.7;
}

/* Sorted columns - YELLOW TEXT (light) or BLACK TEXT (dark) - ALL TABLES */
[data-theme="light"] .sortable.active,
[data-theme="light"] .sortable.asc,
[data-theme="light"] .sortable.desc {
    background: var(--theme-primary) !important;  /* Same teal background */
    color: #fbbf24 !important;  /* YELLOW TEXT for light theme */
    font-weight: 800;
}

[data-theme="dark"] .sortable.active,
[data-theme="dark"] .sortable.asc,
[data-theme="dark"] .sortable.desc {
    background: var(--theme-primary) !important;  /* Same teal background */
    color: #000000 !important;  /* BLACK TEXT for dark theme */
    font-weight: 800;
}

/* Sort icons match text color */
[data-theme="light"] .sortable.active .sort-icon,
[data-theme="light"] .sortable.active i,
[data-theme="light"] .sortable.asc .sort-icon,
[data-theme="light"] .sortable.asc i,
[data-theme="light"] .sortable.desc .sort-icon,
[data-theme="light"] .sortable.desc i {
    color: #fbbf24 !important;  /* Yellow icon to match text */
    opacity: 1;
}

[data-theme="dark"] .sortable.active .sort-icon,
[data-theme="dark"] .sortable.active i,
[data-theme="dark"] .sortable.asc .sort-icon,
[data-theme="dark"] .sortable.asc i,
[data-theme="dark"] .sortable.desc .sort-icon,
[data-theme="dark"] .sortable.desc i {
    color: #000000 !important;  /* Black icon to match text */
    opacity: 1;
}

.sort-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.2s ease;
    pointer-events: none;
}

.activity-table th,
.activity-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

.activity-table th {
    background: var(--theme-primary) !important;  /* Solid, no gradients */
    font-weight: 700;
    color: var(--theme-action-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    position: relative;
}

/* Sortable column states for activity tables */
.activity-table th.sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 30px;  /* Room for sort icon */
}

/* NO HOVER EFFECTS AT ALL */
.activity-table th.sortable:hover {
    background: var(--theme-primary) !important;  /* No change on hover */
    filter: none;
    transform: none;
}

/* Sorted column styling inherits from .sortable rules above - no need to duplicate */

.activity-table td {
    color: var(--text-secondary);
}

.activity-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.activity-table tr:hover {
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-1px);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-id {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.activity-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.activity-type.chat_message {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.activity-type.anonymous,
.activity-type.user-type-anonymous {
    background: var(--text-muted);
    color: var(--theme-action-text);
}

.activity-type.known,
.activity-type.user-type-known {
    background: #10b981;
    color: var(--theme-action-text);
}

.response-time {
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* Dark theme admin styles */
[data-theme="dark"] .collection-card {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .reports-filters {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .reports-dashboard {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .report-card {
    background: var(--bg-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .report-value {
    color: var(--editor-primary);
}

/* Admin table styles - high specificity to prevent conflicts */
.admin-panel .admin-table-container,
#adminPanel .admin-table-container {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.admin-panel .admin-table,
#adminPanel .admin-table,
.admin-table-container .admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    table-layout: fixed !important;
}

.admin-table thead {
    background: var(--theme-primary) !important;  /* Solid, no gradient */
    border-bottom: 2px solid var(--border-light);
}

.admin-table th {
    padding: 16px 12px;
    text-align: left;
    background: var(--theme-primary) !important;  /* Solid, no gradient */
    color: var(--theme-action-text) !important;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Light theme - dark text on light gradient */
[data-theme="light"] .admin-table th {
    color: #1e293b;  /* Dark slate text */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Sortable hover - theme-aware */
.admin-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .admin-table th.sortable:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Sortable active columns - theme-aware */
.admin-table th.sortable.active {
    background: rgba(251, 191, 36, 0.25) !important;
    font-weight: 800;
}

/* Dark theme sorted - bright yellow */
/* Sorted column colors handled by universal .sortable rules - no admin-table specific overrides needed */

.admin-table th:last-child {
    border-right: none;
}

.admin-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.admin-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.admin-table tbody tr:hover {
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-1px);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-table tbody tr.dragging {
    opacity: 0.5;
    background: var(--editor-primary-light);
}

/* Segments table column sizing for better description readability */
.admin-table th.icon-column,
.admin-table td.icon-column {
    width: 35px;
    text-align: center;
}

.admin-table th.name-column,
.admin-table td.name-column {
    width: 180px;
}

.admin-table th.type-column,
.admin-table td.type-column {
    width: 80px;
    text-align: center;
}

.admin-table th.members-column,
.admin-table td.members-column {
    width: 70px;
    text-align: center;
}

/* Campaigns table specific styles - increased specificity */
.admin-panel .campaigns-table th,
.admin-panel .campaigns-table td,
#adminPanel .campaigns-table th,
#adminPanel .campaigns-table td {
    padding: 8px 6px !important;
    font-size: 11px;
}

.admin-panel .campaigns-table,
#adminPanel .campaigns-table {
    table-layout: fixed !important;
    width: 100%;
}

.admin-panel .campaigns-table td:last-child,
#adminPanel .campaigns-table td:last-child {
    white-space: nowrap;
    min-width: 160px;
}

.admin-panel .admin-table-container,
#adminPanel .admin-table-container {
    overflow-x: auto;
}

.admin-panel .campaigns-table th,
#adminPanel .campaigns-table th {
    font-size: 10px;
    padding: 12px 6px !important;
}

.campaigns-table .text-center {
    text-align: center;
}

.campaigns-table tbody td {
    vertical-align: middle;
}

/* Campaign table column widths (9 columns total)
   Name = 2 units, others = 1 unit each, Actions = fixed
   Total: 2 + 7 = 9 units for flexible columns
   Name gets ~22%, others get ~11% each */
.campaigns-table th:nth-child(1),
.campaigns-table td:nth-child(1) {
    width: 22%;  /* Name - 2x wider */
}

.campaigns-table th:nth-child(2),
.campaigns-table td:nth-child(2),
.campaigns-table th:nth-child(3),
.campaigns-table td:nth-child(3),
.campaigns-table th:nth-child(4),
.campaigns-table td:nth-child(4),
.campaigns-table th:nth-child(5),
.campaigns-table td:nth-child(5),
.campaigns-table th:nth-child(6),
.campaigns-table td:nth-child(6),
.campaigns-table th:nth-child(7),
.campaigns-table td:nth-child(7),
.campaigns-table th:nth-child(8),
.campaigns-table td:nth-child(8) {
    width: 10%;  /* Equal width for Type, Status, Priority, Delivered, Form%, Max, Cool */
}

.campaigns-table th:nth-child(9),
.campaigns-table td:nth-child(9) {
    width: 8%;  /* Actions - slightly narrower */
    min-width: 100px;
}

.admin-table th.description-column,
.admin-table td.description-column {
    min-width: 300px;
    max-width: 400px;
    white-space: normal;
    line-height: 1.4;
}

.admin-table th.created-column,
.admin-table td.created-column,
.admin-table th.updated-column,
.admin-table td.updated-column {
    width: 160px;
    white-space: nowrap;
    font-size: 13px;
}

.admin-table th.actions-column,
.admin-table td.actions-column {
    width: 160px;
    min-width: 160px;
    max-width: 180px;
    text-align: center !important;
    overflow: visible !important;
}

.admin-table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-right: 1px solid var(--border-light);
}

.admin-table td:last-child {
    border-right: none;
}

/* Table column widths */
.drag-column {
    width: 30px;
    text-align: center;
    cursor: grab;
    color: var(--text-tertiary);
}

.drag-column:active {
    cursor: grabbing;
}

.icon-column {
    width: 50px;
    text-align: center;
}

.name-column {
    width: 200px;
    font-weight: 500;
}

.type-column {
    width: 100px;
}

.category-column {
    width: 120px;
}

.url-column {
    width: 250px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-column {
    width: 300px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.description-column {
    width: 200px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usage-column {
    width: 80px;
    text-align: center;
}

.actions-column {
    width: 160px;
    min-width: 160px;
    max-width: 180px;
    text-align: center !important;
    overflow: visible !important;
}

.table-actions {
    display: flex;
    justify-content: flex-start;  /* Left-align action buttons */
    align-items: center;
    gap: 8px;
}

/* Table cell content styles */
.table-icon {
    font-size: 16px;
    color: var(--editor-primary);
}

.table-name {
    font-weight: 500;
    color: var(--text-primary);
}

/* Consistent table cell styling for Manage Users & Manage Visitors */
.table-cell {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 400;
}

.table-cell-code {
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: help;
    max-width: none;
    white-space: nowrap;
}

.default-badge {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 6px;
    font-weight: 400;
}

.table-type {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.table-type.link {
    background: var(--cursor-blue-light);
    color: var(--cursor-blue);
}

.table-type.contact_modal {
    background: var(--editor-success-light);
    color: var(--editor-success);
}

.table-type.trial_modal {
    background: #fff7ed;
    color: #ea580c;
}

.table-type.video_gallery {
    background: var(--editor-special-light);
    color: var(--editor-special);
}

.table-type.custom {
    background: var(--editor-special-light);
    color: var(--editor-special);
}

.table-url {
    color: var(--text-secondary);
    font-size: 12px;
}

.table-prompt {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}

.table-description {
    color: var(--text-tertiary);
    font-size: 12px;
}

.table-category {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.table-usage {
    font-weight: 600;
    color: var(--editor-primary);
}

.table-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}

.table-action-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-action-btn.edit {
    background: var(--cursor-blue-light);
    color: var(--cursor-blue);
}

.table-action-btn.edit:hover {
    background: var(--cursor-blue);
    color: var(--theme-action-text);
}

.table-action-btn.delete {
    background: var(--cursor-red-light);
    color: var(--cursor-red);
}

.table-action-btn.delete:hover {
    background: var(--cursor-red);
    color: var(--theme-action-text);
}

.table-action-btn.test {
    background: var(--editor-success-light);
    color: var(--editor-success);
}

.table-action-btn.test:hover {
    background: var(--editor-success);
    color: var(--theme-action-text);
}

/* Drag handle styling */
.drag-handle {
    cursor: grab;
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.drag-handle:hover {
    color: var(--editor-primary);
    background: var(--editor-primary-light);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Drop target styling for nesting items */
.drop-target-divider {
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.15) !important;
    outline: 2px dashed var(--theme-primary, #3b82f6);
    outline-offset: -2px;
}

.drop-target-divider td {
    background: transparent !important;
}

/* Divider row styling in admin tables */
tr[data-is-divider="true"] {
    background: var(--bg-secondary);
}

tr[data-is-divider="true"]:hover {
    background: var(--bg-tertiary);
}

/* Child item indent indicator */
.child-indent {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
}

.child-indent i {
    color: var(--theme-primary);
    opacity: 0.6;
}

/* Responsive table */
@media (max-width: 1200px) {
    .url-column,
    .prompt-column,
    .description-column {
        max-width: 150px;
    }
}

@media (max-width: 900px) {
    .admin-table-container {
        overflow-x: auto;
    }
    
    .admin-table {
        min-width: 800px;
    }
}

/* Admin Modal Styles */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10000;  /* Base z-index for admin panel */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.admin-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    /* Maximize panel with consistent 25px buffer on all sides */
    width: calc(100vw - 50px);
    height: calc(100vh - 50px);
    max-width: none;  /* Remove cap - use available space on large monitors */
    max-height: none; /* Remove cap - use available space on large monitors */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-medium);
    animation: slideUp 0.3s ease;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    border-radius: 12px 12px 0 0;
}

.admin-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
}

.admin-modal-header h2 i {
    color: var(--theme-primary);
    margin-right: 8px;
}

.admin-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.admin-modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Ghost Access Indicator - Shown when support staff has ghost access */
.ghost-access-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--editor-orange-light, #fef3c7);
    border: 1px solid var(--editor-orange, #f59e0b);
    border-radius: 20px;
    margin-left: auto;
    margin-right: 16px;
}

.ghost-access-indicator .ghost-emoji {
    font-size: 16px;
}

.ghost-access-indicator .ghost-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--editor-orange-dark, #92400e);
    white-space: nowrap;
}

[data-theme="dark"] .ghost-access-indicator {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--editor-orange, #f59e0b);
}

[data-theme="dark"] .ghost-access-indicator .ghost-text {
    color: var(--editor-orange, #f59e0b);
}

/* Admin Authentication */
.admin-auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.admin-auth-content {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.admin-auth-icon {
    font-size: 48px;
    color: var(--theme-primary);
    margin-bottom: 20px;
}

.admin-auth-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.admin-auth-content p {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 16px;
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-login-form .form-group {
    text-align: left;
}

.admin-login-form .modal-btn {
    margin-top: 8px;
    padding: 12px 24px;
    font-size: 16px;
}

/* Responsive Admin Login for short/narrow screens */
@media (max-height: 700px) {
    .admin-auth {
        padding: 20px;
        overflow-y: auto;
    }
    
    .admin-auth-icon {
        font-size: 36px;
        margin-bottom: 12px;
    }
    
    .admin-auth-content h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .admin-auth-content p {
        margin-bottom: 16px;
        font-size: 14px;
    }
    
    .admin-login-form {
        gap: 12px;
    }
    
    .admin-login-form .modal-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-height: 550px) {
    .admin-auth {
        padding: 12px;
        align-items: flex-start;
    }
    
    .admin-auth-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }
    
    .admin-auth-content h3 {
        font-size: 18px;
    }
    
    .admin-auth-content p {
        margin-bottom: 12px;
        font-size: 13px;
    }
    
    .admin-login-form {
        gap: 8px;
    }
    
    .admin-login-form .form-group {
        margin-bottom: 0;
    }
    
    .admin-login-form .form-input {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .admin-auth {
        padding: 16px;
    }
    
    .admin-auth-content {
        max-width: 100%;
    }
    
    .admin-auth-icon {
        font-size: 36px;
    }
    
    .admin-auth-content h3 {
        font-size: 20px;
    }
}

/* Admin Panel in Modal */
.admin-modal .admin-panel {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    min-height: 0;
    position: relative; /* For gear wrapper positioning */
}

.admin-modal .admin-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 8px 24px 0 24px;
    padding-right: 60px; /* Space for gear button */
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden; /* No vertical scroll */
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    align-items: flex-end; /* Align tabs to bottom */
}

/* Tab scrollbar — 1px hint for scrollability, expands on hover */
.admin-modal .admin-tabs {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.admin-modal .admin-tabs::-webkit-scrollbar {
    height: 1px;
}

.admin-modal .admin-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.admin-modal .admin-tabs::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 1px;
}

.admin-modal .admin-tabs:hover::-webkit-scrollbar {
    height: 4px;
}

.admin-modal .admin-tabs:hover::-webkit-scrollbar-thumb {
    border-radius: 2px;
}

.admin-modal .admin-tab {
    background: var(--bg-tertiary);
    border: none;
    border-top: 3px solid transparent; /* Reserve space for accent */
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    height: 55px; /* Fixed height for consistency */
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-modal .admin-tab:hover:not(.active) {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.admin-modal .admin-tab.active {
    background: var(--bg-primary);
    color: var(--theme-primary);
    border-top-color: var(--theme-primary); /* Accent line at top */
    margin-bottom: -1px; /* Overlap container border */
    padding-bottom: 13px; /* Compensate for overlap */
}

.admin-modal .admin-content {
    overflow: hidden;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-modal .admin-tab-content {
    display: none;
}

.admin-modal .admin-tab-content.active {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.admin-modal .admin-tab-content.active::-webkit-scrollbar {
    width: 6px;
}

.admin-modal .admin-tab-content.active::-webkit-scrollbar-track {
    background: transparent;
}

.admin-modal .admin-tab-content.active::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.admin-modal .admin-tab-content.active::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Instructions tab needs flex layout for textarea auto-fill */
.admin-modal #instructionsTab.admin-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Documents tab - document list styling */
.admin-modal #ragTab .rag-documents {
    max-height: calc(100vh - 500px); /* Constrain to prevent overflow */
    overflow-y: auto;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-secondary);
}

/* Responsive adjustments */
@media (max-height: 800px) {
    .admin-modal #ragTab .rag-documents {
        max-height: calc(100vh - 450px);
    }
}

@media (max-height: 600px) {
    .admin-modal #ragTab .rag-documents {
        max-height: calc(100vh - 380px);
    }
}

.admin-modal .admin-tab-content h5 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.admin-modal .tab-description {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.admin-modal .admin-tab-content textarea {
    width: 100%;
    min-height: 200px;
    flex: 1;
    resize: vertical;
    margin-bottom: 16px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.admin-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

/* Dark theme admin modal */
[data-theme="dark"] .admin-modal {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

[data-theme="dark"] .admin-modal-header {
    background: var(--bg-primary);
}

[data-theme="dark"] .admin-modal .admin-tabs {
    background: var(--bg-primary);
    border-bottom-color: var(--border-medium);
}

[data-theme="dark"] .admin-modal .admin-tab {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .admin-modal .admin-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .admin-modal .admin-tab.active {
    background: var(--bg-tertiary);
    color: var(--editor-primary);
    border-top-color: var(--editor-primary);
}

[data-theme="dark"] .admin-modal-footer {
    background: var(--bg-primary);
}

/* ============================================
   Admin Tab Reorder & Settings
   ============================================ */

/* Gear wrapper - positioned at top-right of admin panel, outside scrollable tabs */
.tab-settings-wrapper {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
}

.tab-settings-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-settings-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.tab-settings-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.tab-settings-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.tab-settings-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: background 0.15s ease;
}

.tab-settings-dropdown button:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.tab-settings-dropdown button:disabled {
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.tab-settings-dropdown button i {
    width: 16px;
    color: var(--text-secondary);
}

.tab-settings-dropdown hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

.tab-settings-dropdown .hidden-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Tab Edit Mode Styles */
.admin-modal .admin-tab.edit-mode {
    cursor: grab;
    position: relative;
    padding: 12px 12px 12px 8px; /* Tighter padding in edit mode */
}

.admin-modal .admin-tab.edit-mode:active {
    cursor: grabbing;
}

.admin-modal .admin-tab.dragging {
    opacity: 0.5;
    background: var(--theme-primary) !important;
}

.admin-tab .drag-handle {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    cursor: grab;
    font-size: 12px;
    margin-right: 4px;
}

.admin-tab .drag-handle:hover {
    color: var(--text-secondary);
}

/* Hide/restore button in edit mode - small subtle x or + */
.admin-tab .tab-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 9px;
    transition: all 0.15s ease;
    opacity: 0.5;
}

.admin-tab .tab-hide-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    opacity: 1;
}

/* Hidden tab styling */
.admin-tab.tab-hidden {
    opacity: 0.4;
    background: var(--bg-tertiary) !important;
}

.admin-tab .tab-label {
    white-space: nowrap;
}

.admin-tab.tab-hidden .tab-label {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.admin-tab.tab-hidden .tab-hide-btn {
    color: var(--theme-primary);
    opacity: 1;
}

/* Hidden Tabs Modal List */
.hidden-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.hidden-tab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.hidden-tab-item i:first-child {
    color: var(--text-secondary);
    width: 16px;
    font-size: 14px;
}

.hidden-tab-item span {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.hidden-tab-item button {
    padding: 6px 12px;
    background: var(--bg-secondary);
    color: var(--theme-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.hidden-tab-item button:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

/* Dark theme adjustments */
[data-theme="dark"] .tab-settings-dropdown {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .tab-settings-dropdown button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hidden-tab-item {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .hidden-tab-item button {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .admin-tab .tab-hide-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   Theme Settings Tabs (Branding Panel)
   ============================================ */
.theme-settings-tabs-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.theme-settings-tabs-container::-webkit-scrollbar {
    height: 4px;
}

.theme-settings-tabs-container::-webkit-scrollbar-track {
    background: transparent;
}

.theme-settings-tabs-container::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
}

.theme-settings-tab {
    padding: 14px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-settings-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.theme-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: var(--bg-primary);
    font-weight: 600;
}

.theme-settings-tab i {
    font-size: 12px;
    opacity: 0.8;
}

.theme-settings-tab.active i {
    opacity: 1;
}

/* Light theme specific */
[data-theme="light"] .theme-settings-tab {
    color: #64748b;
}

[data-theme="light"] .theme-settings-tab:hover {
    color: #334155;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .theme-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: #fff;
}

/* Dark theme specific */
[data-theme="dark"] .theme-settings-tab {
    color: #94a3b8;
}

[data-theme="dark"] .theme-settings-tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .theme-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: var(--bg-primary);
}

/* Documents panel card container (matches App Config pattern) */
.documents-section {
    display: flex;
    flex-direction: column;
}

.documents-tab-nav {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* W370 (2026-04-30) — Documents list header.
   Pinned header bar that sits directly above the document list with
   the section search input on the left and a live item count on the
   right. Sits inside .documents-tab-body, ABOVE the active form's
   trailing space and the rag-documents list, so admins don't have to
   scroll back up to the sticky tab nav to filter the list.
   Uses a subtle bottom border + secondary background so it reads as
   chrome (not part of the list) and keeps a calm, professional tone
   that matches the rest of the admin panel.                          */
.documents-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.documents-list-header-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.documents-list-header-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.documents-list-header .paginated-table-search.documents-search {
    flex: 0 0 auto;
    width: 320px;
    max-width: 100%;
    min-width: 0;
}

/* Lighten the input chrome inside the list-header so it sits
   comfortably against the secondary-tone bar (the panel's primary
   background reads cleanly here without competing with the bar). */
.documents-list-header .paginated-table-search-input {
    background: var(--bg-primary);
    padding: 8px 12px 8px 36px;
    font-size: 13px;
}

.documents-list-header .paginated-table-search i {
    font-size: 13px;
}

.documents-list-count {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .documents-list-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }
    .documents-list-header .paginated-table-search.documents-search {
        width: 100%;
    }
    .documents-list-header-right {
        justify-content: flex-end;
    }
}

/* Theme settings content area */
.theme-settings-content {
    animation: fadeIn 0.2s ease;
    padding: 24px;
}

/* Customize tab has its own padding structure */
#customizeContent {
    padding: 0 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Email Templates Panel
   ============================================ */

/* Email template modal z-index hierarchy */
#emailTemplateEditorModal {
    z-index: 14000 !important; /* Above admin modal (10000), below edit visitor (15000) */
}

#emailTemplatePreviewModal {
    z-index: 16000 !important; /* Same as full response modal */
}

#emailVersionHistoryModal {
    z-index: 16000 !important; /* Same as preview modal */
}

.email-templates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-template-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.email-template-row:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.template-main-info {
    flex: 1;
    min-width: 0;
}

.template-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.template-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.template-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.template-meta i {
    margin-right: 4px;
    opacity: 0.7;
}

.template-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.template-badge.draft {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.template-badge.published {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.template-badge.archived {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.template-category-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.template-category-badge.welcome {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.template-category-badge.follow-up {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.template-category-badge.alert {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.template-category-badge.report {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}

.template-actions {
    display: flex;
    gap: 6px;
}

.template-actions .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.template-actions .action-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

.template-actions .action-btn.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
}

/* Token buttons for template editor */
.token-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.token-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.token-btn:active {
    transform: translateY(0);
}

/* Email Template Editor Modal Styles */
#emailTemplateEditorModal .modal-content {
    max-width: 90%;
    width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#emailTemplateEditorModal .modal-body {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow: hidden;
    min-height: 0;
}

.template-editor-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 10px;
}

.template-editor-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-light);
    padding-left: 20px;
    min-height: 0;
}

.template-preview-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.template-preview-tabs .tab-button {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.template-preview-tabs .tab-button.active,
.template-preview-tabs .tab-button:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

.template-preview-frame {
    flex: 1;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: auto;
    background: #fff;
    min-height: 300px;
}

/* Email Editor Tab Styles */
.email-editor-tab {
    flex: 1;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.email-editor-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.email-editor-tab.active {
    color: var(--text-primary);
    border-bottom: 2px solid var(--theme-primary);
    background: var(--bg-primary);
}

/* Mobile Responsive - Email Template Editor */
@media (max-width: 1024px) {
    #emailTemplateEditorModal .modal-content {
        max-width: 95%;
        width: 100%;
    }
    
    #emailTemplateEditorModal .modal-body {
        flex-direction: column;
        overflow-y: auto;
    }
    
    .template-editor-left,
    .template-editor-right {
        flex: none;
        width: 100%;
        overflow: visible;
        padding: 0;
        border: none;
    }
    
    .template-editor-right {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border-light);
    }
    
    .template-preview-frame {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    #emailTemplateEditorModal .modal-content {
        max-height: 95vh;
        margin: 10px;
    }
    
    .template-preview-tabs {
        justify-content: center;
    }
    
    .template-preview-tabs .tab-button {
        flex: 1;
        text-align: center;
        font-size: 11px;
        padding: 8px 6px;
    }
    
    /* Stack token picker categories */
    #emailTemplateEditorModal .token-section {
        margin-bottom: 12px;
    }
    
    /* Email template list mobile */
    .email-template-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .template-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .template-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Dark Mode Support for Email Template Editor */
[data-theme="dark"] .template-preview-frame {
    background: var(--bg-secondary);
}

[data-theme="dark"] #emailPreviewIframe {
    background: #fff; /* Keep email preview white for accurate representation */
}

/* ============================================
   TinyMCE Email Template Editor (New Design)
   ============================================ */

/* Main Modal Container */
.email-template-editor-modal {
    width: 85vw !important;
    max-width: 85vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.ete-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ete-header h4 i {
    color: var(--theme-primary);
}

/* Main Body - Two Column Layout */
.ete-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left Panel - 20% */
.ete-left-panel {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Right Panel - 80% */
.ete-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Left Panel Sections */
.ete-section {
    border-bottom: 1px solid var(--border-light);
}

.ete-section:last-child {
    border-bottom: none;
}

.ete-section-header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ete-section-header i {
    color: var(--theme-primary);
    font-size: 11px;
}

.ete-section-content {
    padding: 16px;
}

/* Form Groups */
.ete-form-group {
    margin-bottom: 12px;
}

.ete-form-group:last-child {
    margin-bottom: 0;
}

.ete-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.ete-form-group label .required {
    color: #EF4444;
}

.ete-form-group .form-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
}

.ete-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Token Panel */
.ete-tokens-panel {
    padding: 8px 16px 16px;
}

.ete-token-group {
    margin-bottom: 4px;
}

.ete-token-group-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-token-group-btn:hover {
    background: var(--bg-hover);
    border-color: var(--theme-primary);
}

.ete-token-group-btn span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ete-token-group-btn span i {
    color: var(--theme-primary);
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.ete-token-group-btn > i {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.ete-token-group-btn.expanded > i {
    transform: rotate(180deg);
}

.ete-token-list {
    padding: 8px 0 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ete-token-btn {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.ete-token-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

/* Token subgroups for categorization */
.ete-token-subgroup {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ete-token-subgroup-label {
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.ete-token-loading {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 0;
}

.ete-custom-token-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
}

/* AI Section Buttons */
.ete-help-text {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.ete-ai-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ete-ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-ai-btn:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.1));
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateX(4px);
}

.ete-ai-btn i {
    color: #A855F7;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

/* Token Pills in TinyMCE Editor */
.tox-tinymce .token-pill,
.mce-content-body .token-pill {
    display: inline-block;
    background: #DBEAFE !important;
    color: #1E40AF !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
    border: 1px solid #93C5FD;
}

.tox-tinymce .token-pill:hover,
.mce-content-body .token-pill:hover {
    background: #BFDBFE !important;
    border-color: #3B82F6;
}

[data-theme="dark"] .tox-tinymce .token-pill,
[data-theme="dark"] .mce-content-body .token-pill {
    background: #1E3A5F !important;
    color: #93C5FD !important;
    border-color: #3B82F6;
}

[data-theme="dark"] .tox-tinymce .token-pill:hover,
[data-theme="dark"] .mce-content-body .token-pill:hover {
    background: #1E4976 !important;
}

/* TinyMCE tooltip fix - ensure readable contrast */
.tox .tox-tooltip {
    background: #1F2937 !important;
    color: #F9FAFB !important;
}

.tox .tox-tooltip__body {
    background: #1F2937 !important;
    color: #F9FAFB !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* CTA Button Tools */
.ete-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ete-cta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-cta-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateX(4px);
}

.ete-cta-btn i {
    color: #3B82F6;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

/* Content Block Widget Buttons */
.ete-widget-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ete-widget-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-widget-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.1));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateX(4px);
}

.ete-widget-btn i {
    color: #8B5CF6;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

/* Editor Tabs */
.ete-editor-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-tab {
    flex: 1;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ete-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: var(--bg-primary);
}

.ete-tab i {
    font-size: 14px;
}

/* Editor Panes */
.ete-editor-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.ete-editor-pane.active {
    display: flex;
}

/* Device Preview Bar */
.ete-device-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-device-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 8px;
}

.ete-device-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-device-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.ete-device-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-action-text);
}

/* Device Bar Divider */
.ete-device-divider {
    width: 1px;
    height: 24px;
    background: var(--border-light);
    margin: 0 8px;
}

/* Preview Mode Dropdown */
.ete-preview-mode select,
.ete-sample-picker select {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 130px;
}

.ete-preview-mode select:hover,
.ete-sample-picker select:hover {
    border-color: var(--theme-primary);
}

.ete-preview-mode select:focus,
.ete-sample-picker select:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary-alpha);
}

/* Sample Picker */
.ete-sample-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ete-sample-picker select {
    min-width: 180px;
    max-width: 220px;
}

.ete-refresh-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ete-refresh-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.ete-refresh-btn.loading i {
    animation: spin 1s linear infinite;
}

/* Preview Loading Indicator */
.ete-preview-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-warning-subtle);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-warning);
}

.ete-preview-loading i {
    font-size: 12px;
}

/* Preview Mode Badge */
.ete-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.ete-preview-badge.sample {
    background: var(--bg-info-subtle);
    color: var(--theme-primary);
}

.ete-preview-badge.ai {
    background: var(--bg-success-subtle);
    color: var(--text-success);
}

/* Preview Mode Visual Feedback */
.ete-tinymce-container[data-preview-mode="sample"]::before,
.ete-tinymce-container[data-preview-mode="ai"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10;
    border-radius: 8px 8px 0 0;
}

.ete-tinymce-container[data-preview-mode="sample"]::before {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-light, #60A5FA));
}

.ete-tinymce-container[data-preview-mode="ai"]::before {
    background: linear-gradient(90deg, var(--color-success, #10B981), var(--color-success-light, #34D399));
}

.ete-tinymce-container[data-preview-mode] {
    position: relative;
}

/* Subtle border highlight in preview mode */
.ete-tinymce-container[data-preview-mode="sample"] .tox-tinymce {
    border-color: var(--theme-primary) !important;
}

.ete-tinymce-container[data-preview-mode="ai"] .tox-tinymce {
    border-color: var(--color-success, #10B981) !important;
}

/* TinyMCE Container */
.ete-tinymce-container {
    flex: 1;
    padding: 16px;
    overflow: auto;
    display: flex;
    justify-content: center;
}

.ete-tinymce-container .tox-tinymce {
    border-radius: 8px !important;
    border: 1px solid var(--border-light) !important;
    transition: max-width 0.3s ease, margin 0.3s ease;
    width: 100% !important;
}

/* Device width states - Applied via JavaScript and CSS */
.ete-tinymce-container[data-device="desktop"] .tox-tinymce {
    max-width: 100% !important;
    margin: 0 !important;
}

.ete-tinymce-container[data-device="tablet"] .tox-tinymce {
    max-width: 520px !important;
    margin: 0 auto !important;
}

.ete-tinymce-container[data-device="mobile"] .tox-tinymce {
    max-width: 360px !important;
    margin: 0 auto !important;
}

/* Also target by ID for specificity */
#tinymceContainer[data-device="desktop"] .tox-tinymce {
    max-width: 100% !important;
}

#tinymceContainer[data-device="tablet"] .tox-tinymce {
    max-width: 520px !important;
    margin: 0 auto !important;
}

#tinymceContainer[data-device="mobile"] .tox-tinymce {
    max-width: 360px !important;
    margin: 0 auto !important;
}

/* Text Email Tab */
.ete-text-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

.ete-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-primary);
}

.ete-text-status {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(16, 185, 129, 0.1);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ete-text-status i {
    color: #10B981;
}

.ete-text-status.unsynced {
    background: rgba(245, 158, 11, 0.1);
}

.ete-text-status.unsynced i {
    color: #F59E0B;
}

.ete-text-editor {
    flex: 1;
    margin: 16px;
    padding: 16px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    resize: none;
}

.ete-text-footer {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Code Editor Tab */
.ete-code-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-code-toolbar .modal-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.ete-code-editor-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
    margin: 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
}

.ete-code-line-numbers {
    padding: 16px 12px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border-light);
    text-align: right;
    user-select: none;
    min-width: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre; /* CRITICAL: Preserve newlines in line numbers */
}

.ete-code-editor {
    flex: 1;
    padding: 16px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #ABB2BF; /* Light gray text for code */
    background: #282C34; /* Dark code editor background */
    border: none;
    resize: none;
    outline: none;
    overflow: auto;
    white-space: pre;
    tab-size: 2;
    -moz-tab-size: 2;
}

/* Dark theme code editor override */
[data-theme="dark"] .ete-code-editor {
    color: #ABB2BF;
    background: #1E1E1E;
}

/* Light theme code editor - use dark background for readability */
[data-theme="light"] .ete-code-editor {
    color: #ABB2BF;
    background: #282C34;
}

/* Override line numbers colors for code editor dark theme */
[data-theme="light"] .ete-code-line-numbers {
    background: #21252B !important;
    color: #636D83 !important;
}

[data-theme="dark"] .ete-code-line-numbers {
    background: #1A1A1A !important;
    color: #5C6370 !important;
}

.ete-code-editor-wrapper {
    background: #282C34 !important;
    border-color: #3E4451 !important;
}

[data-theme="dark"] .ete-code-editor-wrapper {
    background: #1E1E1E !important;
    border-color: #3E4451 !important;
}
    white-space: pre;
    tab-size: 2;
}

.ete-code-footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Footer */
.ete-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ete-footer-right {
    display: flex;
    gap: 12px;
}

.ete-footer .modal-btn {
    padding: 12px 20px;
}

/* Dark Mode Adjustments for TinyMCE Editor */
[data-theme="dark"] .ete-left-panel {
    background: var(--bg-secondary);
}

[data-theme="dark"] .ete-token-group-btn {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ete-ai-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.08));
}

[data-theme="dark"] .ete-code-editor {
    color: #E0E0E0;
}

[data-theme="dark"] .ete-tinymce-container .tox-tinymce {
    border-color: #374151 !important;
}

/* TinyMCE Dark Mode Skin Override - Complete with high specificity */
[data-theme="dark"] .tox.tox-tinymce,
[data-theme="dark"] .tox-tinymce {
    border-color: #374151 !important;
}

[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__overflow,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox.tox-tinymce .tox-toolbar,
[data-theme="dark"] .tox.tox-tinymce .tox-toolbar__primary {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    border-bottom: 1px solid #374151 !important;
}

[data-theme="dark"] .tox .tox-toolbar-overlord,
[data-theme="dark"] .tox.tox-tinymce .tox-toolbar-overlord {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
}

[data-theme="dark"] .tox .tox-toolbar__group,
[data-theme="dark"] .tox.tox-tinymce .tox-toolbar__group {
    border-color: #374151 !important;
}

[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn {
    color: #E5E7EB !important;
    background: transparent !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn:hover {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .tox .tox-tbtn--enabled,
[data-theme="dark"] .tox .tox-tbtn--enabled:hover,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn--enabled {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .tox .tox-tbtn svg,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn svg {
    fill: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover svg,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn:hover svg {
    fill: #F9FAFB !important;
}

[data-theme="dark"] .tox .tox-tbtn--enabled svg,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn--enabled svg {
    fill: #FFFFFF !important;
}

[data-theme="dark"] .tox .tox-split-button,
[data-theme="dark"] .tox.tox-tinymce .tox-split-button {
    background: transparent !important;
}

[data-theme="dark"] .tox .tox-split-button:hover,
[data-theme="dark"] .tox.tox-tinymce .tox-split-button:hover {
    background: #374151 !important;
}

[data-theme="dark"] .tox .tox-tbtn--select,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn--select {
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-tbtn--bespoke,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn--bespoke {
    background: transparent !important;
}

[data-theme="dark"] .tox .tox-tbtn--bespoke .tox-tbtn__select-label,
[data-theme="dark"] .tox.tox-tinymce .tox-tbtn--bespoke .tox-tbtn__select-label {
    color: #E5E7EB !important;
}

/* Force dark mode on ALL TinyMCE toolbar elements */
[data-theme="dark"] .tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    border-bottom: 1px solid #374151 !important;
}

[data-theme="dark"] .tox .tox-toolbar-overlord,
[data-theme="dark"] .tox .tox-anchorbar {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
}

[data-theme="dark"] .tox .tox-editor-container {
    background: #1F2937 !important;
}

/* Force icon colors in dark mode */
[data-theme="dark"] .tox .tox-icon svg,
[data-theme="dark"] .tox .tox-tbtn svg,
[data-theme="dark"] .tox .tox-tbtn__icon-wrap svg {
    fill: #9CA3AF !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover svg,
[data-theme="dark"] .tox .tox-tbtn:focus svg {
    fill: #E5E7EB !important;
}

/* Dropdown chevron */
[data-theme="dark"] .tox .tox-tbtn--select .tox-tbtn__select-chevron svg {
    fill: #9CA3AF !important;
}

/* Active/pressed state */
[data-theme="dark"] .tox .tox-tbtn:active,
[data-theme="dark"] .tox .tox-tbtn--active {
    background: #374151 !important;
}

[data-theme="dark"] .tox .tox-tbtn:active svg,
[data-theme="dark"] .tox .tox-tbtn--active svg {
    fill: #F9FAFB !important;
}

[data-theme="dark"] .tox .tox-edit-area__iframe {
    background: #111827 !important;
}

[data-theme="dark"] .tox .tox-edit-area {
    border-top: 1px solid #374151 !important;
}

/* Status bar / Footer */
[data-theme="dark"] .tox .tox-statusbar {
    background: #1F2937 !important;
    border-top: 1px solid #374151 !important;
    color: #9CA3AF !important;
}

[data-theme="dark"] .tox .tox-statusbar__text-container {
    color: #9CA3AF !important;
}

[data-theme="dark"] .tox .tox-statusbar__path-item {
    color: #9CA3AF !important;
}

[data-theme="dark"] .tox .tox-statusbar__path-divider {
    color: #6B7280 !important;
}

[data-theme="dark"] .tox .tox-statusbar__wordcount {
    color: #9CA3AF !important;
}

[data-theme="dark"] .tox .tox-statusbar__branding {
    display: none !important;
}

/* Dropdown menus - Light mode explicit styles */
.tox .tox-menu {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.tox .tox-collection__item {
    color: #374151 !important;
}

.tox .tox-collection__item:hover {
    background: #f3f4f6 !important;
}

.tox .tox-collection__item--active {
    background: #e5e7eb !important;
}

.tox .tox-collection__item-label {
    color: #374151 !important;
}

.tox .tox-collection__item-icon svg {
    fill: #6b7280 !important;
}

.tox .tox-collection__item-accessory {
    color: #9ca3af !important;
}

/* Dropdown menus in dark mode */
[data-theme="dark"] .tox .tox-menu {
    background: #1F2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .tox .tox-collection__item {
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-collection__item:hover {
    background: #374151 !important;
}

[data-theme="dark"] .tox .tox-collection__item--active {
    background: #374151 !important;
}

[data-theme="dark"] .tox .tox-collection__item-label {
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-collection__item-icon svg {
    fill: #9ca3af !important;
}

[data-theme="dark"] .tox .tox-collection__item-accessory {
    color: #6b7280 !important;
}

/* Dialog dark mode */
[data-theme="dark"] .tox .tox-dialog {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .tox .tox-dialog__header {
    background: #111827 !important;
    border-bottom: 1px solid #374151 !important;
}

[data-theme="dark"] .tox .tox-dialog__title {
    color: #F9FAFB !important;
}

[data-theme="dark"] .tox .tox-dialog__body {
    background: #1F2937 !important;
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-dialog__footer {
    background: #111827 !important;
    border-top: 1px solid #374151 !important;
}

[data-theme="dark"] .tox .tox-label {
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-textfield,
[data-theme="dark"] .tox .tox-textarea {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-menubar {
    background: #1F2937 !important;
}

/* ============================================================================
   TinyMCE Z-INDEX FIX FOR MODAL
   The email template modal is at z-index 14000, so TinyMCE elements must be higher
   ============================================================================ */

/* TinyMCE menus (File, Edit, View, etc.) */
.tox .tox-menu {
    z-index: 15000 !important;
}

/* TinyMCE dropdowns (font size, format, etc.) - must be above all modals */
.tox .tox-collection--list {
    z-index: 21000 !important;
}

/* TinyMCE dialogs (link, image, table, etc.) — above all builder modals */
.tox .tox-dialog-wrap {
    z-index: 21001 !important;
}

.tox .tox-dialog-wrap__backdrop {
    z-index: 21000 !important;
    background: transparent !important;
    opacity: 0 !important;
}

.tox .tox-dialog {
    z-index: 21002 !important;
}

/* TinyMCE color picker */
.tox .tox-swatches-menu {
    z-index: 15000 !important;
}

/* TinyMCE toolbar overflow menu */
.tox .tox-toolbar__overflow {
    z-index: 15000 !important;
}

/* TinyMCE autocomplete/mention menus */
.tox .tox-autocompleter {
    z-index: 15000 !important;
}

/* Token autocomplete styling */
.tox .tox-collection--list .tox-collection__item {
    padding: 8px 12px !important;
}

.tox .tox-collection__item-label .autocomplete-category {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.tox .tox-autocompleter .tox-collection__item--active {
    background: var(--theme-primary) !important;
}

.tox .tox-autocompleter .tox-collection__item--active .tox-collection__item-label * {
    color: var(--theme-action-text) !important;
}

[data-theme="dark"] .tox .tox-autocompleter .tox-menu {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .tox .tox-collection__item {
    color: #E5E7EB !important;
}

[data-theme="dark"] .tox .tox-collection__item:hover {
    background: #374151 !important;
}

/* TinyMCE tooltip */
.tox .tox-tooltip {
    z-index: 15003 !important;
}

/* TinyMCE notification container */
.tox .tox-notifications-container {
    z-index: 15004 !important;
}

/* TinyMCE tinymce-aux container (holds dialogs, menus, dropdowns)
   Must be ABOVE all modals including split section builder (20000) */
.tox.tox-tinymce-aux {
    z-index: 21000 !important;
}

/* TinyMCE silver theme floating elements */
.tox-silver-sink {
    z-index: 21000 !important;
}

/* Body-level TinyMCE auxiliary container (for dialogs, menus appended to body) */
body > .tox.tox-tinymce-aux {
    z-index: 21000 !important;
}

body > .tox-tinymce-aux {
    z-index: 21000 !important;
}

/* All TinyMCE popups and floating panels */
.tox .tox-pop {
    z-index: 21000 !important;
}

/* Widget builder modals must float above the split section modal (z-index:20000)
   when opened from mini TinyMCE editors inside split section columns */
#actionLinkModal,
#metricRowBuilderModal,
#logoStripBuilderModal,
#testimonialBuilderModal,
#pillBuilderModal,
#tileBuilderModal {
    z-index: 21000 !important;
}

.tox .tox-pop__dialog {
    z-index: 15000 !important;
}

/* TinyMCE link preview popup */
.tox .tox-anchorbar {
    z-index: 15000 !important;
}

/* TinyMCE context toolbar */
.tox .tox-tbtn--enabled,
.tox .tox-split-button {
    position: relative;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .email-template-editor-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    
    .ete-left-panel {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }
}

@media (max-width: 900px) {
    .email-template-editor-modal {
        width: 98vw !important;
        height: 95vh !important;
        max-width: 98vw !important;
        max-height: 95vh !important;
    }
    
    .ete-body {
        flex-direction: column;
    }
    
    .ete-left-panel {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    
    .ete-right-panel {
        flex: 1;
    }
    
    .ete-form-row {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] #previewPlainText {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] #previewSource {
    background: #1a1a2e;
    color: #e8e8e8;
}

/* Version History Styles */
.version-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.version-item:hover {
    border-color: var(--theme-primary);
}

.version-info {
    flex: 1;
}

.version-number {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.version-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.version-summary {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.version-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 768px) {
    .version-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .version-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================
   DNS Instructions Panel (Custom Domains)
   ============================================ */
.dns-instructions-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
}

.dns-instructions-title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-primary);
}

.dns-instructions-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 16px;
}

.dns-records-list {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
}

.dns-step-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}

.dns-step-card:last-child {
    margin-bottom: 0;
}

.dns-step-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: inherit;
}

.dns-step-description {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 12px;
    font-family: inherit;
}

.dns-record-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 12px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.dns-record-row {
    display: flex;
    margin-bottom: 4px;
}

.dns-record-row:last-child {
    margin-bottom: 0;
}

.dns-record-label {
    color: var(--text-muted);
    width: 60px;
    flex-shrink: 0;
}

.dns-record-value {
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-all;
}

.dns-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dns-note i {
    color: var(--theme-primary);
}

/* Light theme adjustments */
[data-theme="light"] .dns-instructions-panel {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .dns-step-card {
    background: #fff;
    border-color: #e2e8f0;
}

[data-theme="light"] .dns-record-box {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* Dark theme adjustments */
[data-theme="dark"] .dns-instructions-panel {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .dns-step-card {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .dns-record-box {
    background: var(--bg-primary);
}

/* Dark theme admin table headers - keep teal for dark theme */
/* Light theme - solid blue headers */
[data-theme="light"] .admin-table thead,
[data-theme="light"] .admin-table th,
[data-theme="light"] .activity-table th {
    background: #11a3f0 !important;  /* Blue for light theme */
}

/* Dark theme - solid teal headers */
[data-theme="dark"] .admin-table thead,
[data-theme="dark"] .admin-table th,
[data-theme="dark"] .activity-table th {
    background: #14b8a6 !important;  /* Teal for dark theme */
}

/* Video Modal Styles */
.video-modal {
    width: 95%;
    max-width: 1360px; /* Reduced by 15% from 1600px */
    max-height: 90vh;
}

.video-modal-body {
    padding: 0;
}

.video-player {
    width: 100%;
    height: 765px; /* Reduced by 15% from 900px */
    background: #000;
    position: relative;
}

.video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive video modal */
@media (max-width: 1400px) {
    .video-modal {
        max-width: 1020px; /* Reduced by 15% from 1200px */
    }
    
    .video-player {
        height: 574px; /* Reduced by 15% from 675px */
    }
}

@media (max-width: 1024px) {
    .video-modal {
        width: 90%;
        max-width: 765px; /* Reduced by 15% from 900px */
    }
    
    .video-player {
        height: 425px; /* Reduced by 15% from 500px */
    }
}

@media (max-width: 768px) {
    .video-modal {
        width: 95%;
        max-width: none;
    }
    
    .video-player {
        height: 255px; /* Reduced by 15% from 300px */
    }
}

@media (max-width: 480px) {
    .video-modal {
        width: 98%;
        margin: 10px;
    }
    
    .video-player {
        height: 187px; /* Reduced by 15% from 220px */
    }
}

/* Print Preview Modal Styles */
.print-preview-modal {
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
}

.print-preview-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 500px;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header-actions .print-btn {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary-dark));
    color: var(--theme-action-text);
    border: 2px solid var(--theme-primary-dark);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(91, 167, 247, 0.3);
}

.modal-header-actions .print-btn:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary));
    border-color: var(--theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.print-preview-description {
    padding: 15px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.print-preview-container {
    flex: 1;
    padding: 0;
    padding-bottom: 24px;
    overflow: auto;
    background: var(--bg-primary);
    border-radius: 8px;
    margin: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Hide diagram, image, chart, video, flipbook expand buttons in print preview modal (not needed for print/PDF) */
.modal-content-display .diagram-expand-btn,
#printPreviewContainer .diagram-expand-btn,
.print-preview-container .diagram-expand-btn,
.modal-content-display .image-expand-btn,
#printPreviewContainer .image-expand-btn,
.print-preview-container .image-expand-btn,
.modal-content-display .chart-expand-btn,
#printPreviewContainer .chart-expand-btn,
.print-preview-container .chart-expand-btn,
.modal-content-display .video-expand-btn,
#printPreviewContainer .video-expand-btn,
.print-preview-container .video-expand-btn,
.modal-content-display .flipbook-expand-btn,
#printPreviewContainer .flipbook-expand-btn,
.print-preview-container .flipbook-expand-btn,
.modal-content-display .chat-flipbook-btn,
#printPreviewContainer .chat-flipbook-btn,
.print-preview-container .chat-flipbook-btn {
    display: none !important;
}

/* Hide expand buttons in @media print */
@media print {
    .diagram-expand-btn,
    .image-expand-btn,
    .chart-expand-btn,
    .video-expand-btn,
    .flipbook-expand-btn,
    .chat-flipbook-btn,
    .chat-flipbook-controls,
    .chat-flipbook-nav {
        display: none !important;
    }
}

/* List styles for print preview modal - fixes bullet indentation */
.print-preview-container ul,
#printPreviewContainer ul {
    padding-left: 20px;
    margin: 12px 0;
    list-style-type: disc;
}

#printPreviewContainer li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Ensure tables in print preview modal use correct colors */
.print-preview-container .message-table thead {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
}

.print-preview-container .message-table th {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
    border-bottom: 3px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light));
}

.print-preview-container .message-table th:first-child {
    border-left: 4px solid var(--table-first-column, var(--theme-primary-dark));
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
}

.print-preview-container .message-table td {
    border-bottom: 1px solid var(--theme-primary-light);
    border-right: 1px solid var(--theme-primary-light);
}

.print-preview-container .message-table td:first-child {
    border-left: 4px solid var(--theme-primary-light);
    background: rgba(91, 167, 247, 0.1) !important; /* Light blue with alpha */
    font-weight: 600;
}

.print-preview-container .message-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);  /* Subtle neutral gray */
    /* No shadow or transform - keeps borders visible */
}

.print-preview-error {
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin: 20px;
    color: #dc2626;
}

.print-preview-error h4 {
    margin: 0 0 10px 0;
    color: #dc2626;
}

.print-preview-error pre {
    background: #f9fafb;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
    margin: 10px 0;
}

/* Dark theme print preview modal */
[data-theme="dark"] .print-preview-description {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

[data-theme="dark"] .print-preview-container {
    background: var(--bg-secondary);
}

[data-theme="dark"] .print-preview-error {
    background: #2d1b1b;
    border-color: #5b2c2c;
    color: #f87171;
}

[data-theme="dark"] .print-preview-error pre {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Dark theme tables in print preview modal */
[data-theme="dark"] .print-preview-container .message-table thead {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: var(--theme-action-text) !important;
}

[data-theme="dark"] .print-preview-container .message-table th {
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488)) !important;
    color: var(--theme-action-text) !important;
    border-bottom: 3px solid var(--table-cell-border, #14b8a6) !important;
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
}

[data-theme="dark"] .print-preview-container .message-table th:first-child {
    border-left: 4px solid var(--table-first-column, #0d9488);
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488)) !important;
}

[data-theme="dark"] .print-preview-container .message-table td {
    border-bottom: 1px solid var(--table-cell-border, #14b8a6);
    border-right: 1px solid var(--table-cell-border, #14b8a6);
}

[data-theme="dark"] .print-preview-container .message-table td:first-child {
    border-left: 4px solid var(--table-first-column, #14b8a6);
    background: var(--table-first-column-bg, rgba(20, 184, 166, 0.15)) !important;
}

[data-theme="dark"] .print-preview-container .message-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);  /* Subtle white tint for dark theme */
}

/* Dark theme: Subtle table hover for all tables */
[data-theme="dark"] .message-table tbody tr:hover,
[data-theme="dark"] .json-table tbody tr:hover {
    background: var(--table-row-hover, rgba(255, 255, 255, 0.05)) !important;
    /* No transform, shadow, or border changes */
}

[data-theme="dark"] .message-table tbody tr:nth-child(even) {
    background: var(--table-row-even-bg, #2d2d30);
}

/* React Fallback Styles */
.print-fallback-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.print-fallback-notice {
    background: var(--accent-light);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.print-fallback-notice i {
    color: var(--accent-color);
    margin-top: 2px;
    font-size: 18px;
}

.print-fallback-notice strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.print-fallback-notice p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
}

.print-code-display {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    overflow: auto;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.print-fallback-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.print-fallback-actions .modal-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent-color);
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.print-fallback-actions .modal-btn:hover {
    background: var(--accent-hover);
}

/* Dark theme fallback styles */
[data-theme="dark"] .print-fallback-notice {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
}

[data-theme="dark"] .print-code-display {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
    color: var(--text-muted);
}

[data-theme="dark"] .print-fallback-actions {
    border-color: var(--border-dark);
}

/* Responsive print preview modal */
@media (max-width: 768px) {
    .print-preview-modal {
        width: 95%;
        max-width: none;
        margin: 10px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    .print-preview-body {
        height: auto;
        max-height: calc(80vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    
    .print-fallback-actions {
        flex-direction: column;
    }
    
    .print-fallback-actions .modal-btn {
        width: 100%;
        justify-content: center;
    }
    
    .modal-header-actions .print-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* Mobile Portrait - constrain modal height (match contact/settings modal) */
@media (max-width: 480px) {
    .print-preview-modal {
        max-height: 75vh;
        margin: 8px;
    }
    
    .print-preview-body {
        max-height: calc(75vh - 120px);
        padding: 16px;
    }
    
    .print-preview-modal .modal-header {
        padding: 14px 16px;
    }
    
    .modal-header-actions .print-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Dark theme print button */
[data-theme="dark"] .modal-header-actions .print-btn {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary-dark));
    border-color: var(--theme-primary-dark);
    box-shadow: 0 3px 10px rgba(77, 208, 225, 0.3);
}

[data-theme="dark"] .modal-header-actions .print-btn:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark), #0f766e);
    border-color: #0f766e;
    box-shadow: 0 6px 20px rgba(0, 172, 193, 0.4);
}

/* Data Sheet Styles */
.data-sheet {
    padding: 20px;
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.data-sheet-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
}

.data-sheet-header h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-color);
}

.data-sheet-header p {
    margin: 0;
    font-size: 16px;
    color: var(--text-muted);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.metric-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stat Card Styles (for segment/activity analytics) */
.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card i {
    font-size: 24px;
    color: var(--theme-primary);
    margin-bottom: 12px;
    display: block;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Dark theme stat cards */
[data-theme="dark"] .stat-card {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .stat-card i,
[data-theme="dark"] .stat-value {
    color: var(--editor-primary);
}

.metric-trend {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
}

.metric-trend.up {
    color: #10b981;
}

.metric-trend.down {
    color: #ef4444;
}

/* CRM Integration Hub Styles */
.crm-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .crm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .crm-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* CRM stats grid now uses standard .report-card from segments panel */

.crm-stats-grid .stat-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Clickable stat/report cards */
.report-card[style*="cursor: pointer"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--brand-blue);
}

.report-card[style*="cursor: pointer"]:hover h6,
.report-card[style*="cursor: pointer"]:hover .report-label {
    color: var(--brand-blue);
}

.crm-connect-menu .crm-connect-item:hover:not(.disabled) {
    background: var(--hover-bg);
}

.crm-connect-menu .crm-connect-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.crm-connect-menu .crm-connect-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

/* CRM Provider Icons */
.crm-provider-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.crm-provider-icon.hubspot {
    background: linear-gradient(135deg, #ff6b35 0%, #ff9500 100%);
    color: var(--theme-action-text);
}

.crm-provider-icon.salesforce {
    background: linear-gradient(135deg, #00a1e0 0%, #0176d3 100%);
    color: var(--theme-action-text);
}

/* Sync Status Badges */
.sync-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.sync-status-badge.connected {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.sync-status-badge.disconnected {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.sync-status-badge.syncing {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.sync-status-badge.error {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

/* Sync Type Badges */
.sync-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.sync-type-badge.push {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.sync-type-badge.pull {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.sync-type-badge.scheduled {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

.sync-type-badge.manual {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

/* CRM Sync Results Summary */
.sync-results-summary {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.sync-result-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sync-result-item.pushed {
    color: #059669;
}

.sync-result-item.pulled {
    color: #2563eb;
}

.sync-result-item.errors {
    color: #dc2626;
}

/* ============================================
   BILLING USAGE PILL COMPONENT
   ============================================ */

/* Usage Pill Container - positioned in admin header, before ghost indicator */
.usage-pill-container {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 12px;
}

/* When ghost indicator is also visible, adjust margins */
.usage-pill-container + .ghost-access-indicator {
    margin-left: 0; /* Override auto margin since usage pill already pushed right */
}

.usage-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.usage-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 75-90% - Yellow warning */
.usage-pill.warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
}

/* 90-100% - Orange soft limit */
.usage-pill.soft {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: var(--theme-action-text);
}

/* 100-110% - Orange/amber grace period */
.usage-pill.grace {
    background: linear-gradient(135deg, #f97316 0%, #d97706 100%);
    color: var(--theme-action-text);
    animation: usage-pulse-orange 1.5s ease-in-out infinite;
}

/* 110%+ - Red hard limit */
.usage-pill.hard {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--theme-action-text);
    animation: usage-pulse-red 1.5s ease-in-out infinite;
}

@keyframes usage-pulse-orange {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
    }
}

@keyframes usage-pulse-red {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

/* Billing disabled message for visitors */
.billing-disabled-message {
    background: linear-gradient(135deg, #fef3f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    text-align: center;
}

.billing-disabled-message .icon {
    font-size: 48px;
    color: #dc2626;
    margin-bottom: 12px;
}

.billing-disabled-message h3 {
    color: #991b1b;
    margin: 0 0 8px;
    font-size: 18px;
}

.billing-disabled-message p {
    color: #7f1d1d;
    margin: 0;
    font-size: 14px;
}

/* Dark mode support */
[data-theme="dark"] .usage-pill.warning {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    color: #fef3c7;
}

[data-theme="dark"] .billing-disabled-message {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #991b1b;
}

[data-theme="dark"] .billing-disabled-message h3 {
    color: #fecaca;
}

[data-theme="dark"] .billing-disabled-message p {
    color: #fca5a5;
}

/* ============================================
   BILLING ALERTS (Admin Panel Billing Tab)
   ============================================ */
   
.billing-alert {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.billing-alert-critical {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
}

.billing-alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}

.billing-alert-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.billing-alert-critical .billing-alert-icon {
    background: #dc2626;
    color: var(--theme-action-text);
}

.billing-alert-warning .billing-alert-icon {
    background: #f59e0b;
    color: var(--theme-action-text);
}

.billing-alert-content {
    flex: 1;
}

.billing-alert-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.billing-alert-critical .billing-alert-title {
    color: #991b1b;
}

.billing-alert-warning .billing-alert-title {
    color: #92400e;
}

.billing-alert-message {
    font-size: 14px;
    line-height: 1.5;
}

.billing-alert-critical .billing-alert-message {
    color: #7f1d1d;
}

.billing-alert-warning .billing-alert-message {
    color: #78350f;
}

.billing-alert-action {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    transition: all 0.2s;
}

.billing-alert-critical .billing-alert-action {
    background: #dc2626;
    color: var(--theme-action-text);
}

.billing-alert-critical .billing-alert-action:hover {
    background: #b91c1c;
}

.billing-alert-warning .billing-alert-action {
    background: #f59e0b;
    color: var(--theme-action-text);
}

.billing-alert-warning .billing-alert-action:hover {
    background: #d97706;
}

/* Dark mode billing alerts */
[data-theme="dark"] .billing-alert-critical {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #991b1b;
}

[data-theme="dark"] .billing-alert-critical .billing-alert-title {
    color: #fecaca;
}

[data-theme="dark"] .billing-alert-critical .billing-alert-message {
    color: #fca5a5;
}

[data-theme="dark"] .billing-alert-warning {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #92400e;
}

[data-theme="dark"] .billing-alert-warning .billing-alert-title {
    color: #fef3c7;
}

[data-theme="dark"] .billing-alert-warning .billing-alert-message {
    color: #fde68a;
}

.sync-result-item.skipped {
    color: #6b7280;
}

.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.chart-wrapper {
    background: var(--chart-canvas-bg, #ffffff);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
}

/* Chart sections - contained look matching diagrams */
.chart-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    position: relative;
}

.chart-section .chart-title {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.chart-section .chart-title i {
    color: var(--theme-primary);
}

.chart-section .chart-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Chart expand button - matches diagram and image expand buttons */
.chart-expand-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.chart-expand-btn:hover {
    background: var(--theme-primary-dark, #0d8fd8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.chart-expand-btn i {
    font-size: 13px;
}

[data-theme="dark"] .chart-expand-btn {
    background: var(--theme-primary-light, #4DD0E1);
    color: var(--theme-action-text, #ffffff);
}

[data-theme="dark"] .chart-expand-btn:hover {
    background: var(--theme-primary-dark, #00ACC1);
}

/* Click-to-expand cursor for charts, diagrams, and native flipbooks */
.chart-click-expand,
.diagram-click-expand,
.flipbook-click-expand {
    cursor: pointer;
}

.chart-wrapper h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.chart-container {
    position: relative;
    height: 250px;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
    background: var(--chart-canvas-bg, #ffffff);
}

.chart-wrapper canvas {
    max-width: 100% !important;
    max-height: 250px !important;
    height: 250px !important;
    width: 100% !important;
}

.features-grid {
    margin-top: 40px;
}

.features-grid h3 {
    margin: 0 0 30px 0;
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 3px solid #3b82f6;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-left: 5px solid #3b82f6;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-left-color: #1d4ed8;
}

.feature-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: var(--theme-action-text);
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.feature-content h4 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
    line-height: 1.3;
}

.feature-content p {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Dark theme styles */
[data-theme="dark"] .metric-card,
[data-theme="dark"] .feature-card {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

/* Chart wrapper uses --chart-canvas-bg in both themes */
[data-theme="dark"] .chart-wrapper {
    border-color: var(--border-dark);
}

[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .chart-wrapper:hover,
[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
    .data-sheet {
        padding: 15px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .metric-card {
        padding: 15px;
    }
    
    .metric-value {
        font-size: 24px;
    }
    
    .charts-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .chart-wrapper {
        padding: 15px;
    }
    
    .feature-card {
        padding: 15px;
    }
    
    /* Move expand button to outer border corner on mobile for charts */
    .chart-section {
        padding-top: 24px; /* Make room for button on border */
    }
    
    .chart-section .chart-expand-btn {
        top: -12px;
        right: -6px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
}

/* Data Sheet Modal Styles */
.datasheet-modal-content {
    padding: 30px;
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100%;
    overflow-y: auto;
    line-height: 1.6;
}

.datasheet-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 25px 25px 25px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: var(--theme-action-text);
    border-radius: 12px;
    margin: -10px -10px 40px -10px;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.report-logo-container {
    margin-bottom: 20px;
}

.report-logo {
    height: 60px;
    max-width: 200px;
    object-fit: contain;
}

/* Print-specific logo sizing - 75% reduction (25% of original) */
@media print {
    .report-logo {
        height: 15px !important;        /* 25% of original 60px */
        max-width: 50px !important;     /* 25% of original 200px */
    }
    
    /* Also reduce mobile logo size for print */
    .datasheet-header .report-logo {
        height: 11.25px !important;     /* 25% of mobile 45px */
    }
}

.datasheet-header h2 {
    margin: 0 0 15px 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--theme-action-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.datasheet-header p {
    margin: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.datasheet-content {
    max-width: 100%;
    overflow-x: auto;
}

.datasheet-content h1,
.datasheet-content h2,
.datasheet-content h3,
.datasheet-content h4 {
    margin-top: 35px;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 8px;
}

.datasheet-content h1 {
    font-size: 28px;
    color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.datasheet-content h2 {
    font-size: 24px;
    color: #3b82f6;
}

.datasheet-content h3 {
    font-size: 20px;
    color: #3b82f6;
}

.datasheet-content h4 {
    font-size: 18px;
    color: #2563eb;
}

.datasheet-content p {
    margin: 15px 0;
    line-height: 1.7;
}

.datasheet-content ul,
.datasheet-content ol {
    margin: 15px 0;
    padding-left: 25px;
}

.datasheet-content li {
    margin: 8px 0;
    line-height: 1.6;
}

.datasheet-content .table-wrapper {
    margin: 25px 0;
    /* USE CSS VARIABLE for border-radius - allows custom CSS override */
    border-radius: var(--table-border-radius, 12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    /* Ensure proper containment */
    contain: layout;
}

.datasheet-content .message-table {
    font-size: 15px;
    min-width: 400px;
    max-width: 100%;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
}

.datasheet-content .message-table th {
    background: linear-gradient(135deg, rgb(62, 128, 216), rgb(45, 100, 180));
    color: var(--theme-action-text);
    font-size: 14px;
    padding: 14px 12px;
    max-width: 150px;
    word-wrap: break-word;
}

.datasheet-content .message-table td {
    padding: 14px 12px;
    max-width: 150px;
    word-wrap: break-word;
    font-size: 14px;
    border-bottom: 1px solid var(--theme-primary-light);
    border-right: 1px solid var(--theme-primary-light);
}

[data-theme="dark"] .datasheet-content .message-table td {
    border-bottom: 1px solid #14b8a6;
    border-right: 1px solid #14b8a6;
}

.datasheet-content .message-table th {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
    border-bottom: 3px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
}

.datasheet-content .message-table th:first-child {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
    font-weight: 700;
    border-left: none;
}

.datasheet-content .message-table td:first-child {
    background: rgba(91, 167, 247, 0.1) !important; /* Light blue with alpha */
    color: var(--text-primary) !important;
    font-weight: 600;
    border-left: 4px solid var(--theme-primary-light);
}

.datasheet-content strong {
    color: var(--accent-color);
    font-weight: 600;
}

.datasheet-content .section-header {
    background: var(--accent-light);
    padding: 12px 20px;
    margin: 25px -15px 15px -15px;
    border-left: 5px solid var(--accent-color);
    border-radius: 0 8px 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-color);
}

/* Better emoji and icon spacing in datasheet */
.datasheet-content h1:before,
.datasheet-content h2:before,
.datasheet-content h3:before,
.datasheet-content h4:before {
    margin-right: 10px;
}

/* Clean up checklist items */
.datasheet-content li {
    position: relative;
}

.datasheet-content li:has(.fa-check),
.datasheet-content li:has(.fa-check-circle) {
    list-style: none;
    padding-left: 0;
}

.datasheet-content li .fa-check,
.datasheet-content li .fa-check-circle {
    color: #10b981;
    margin-right: 8px;
    font-size: 16px;
}

/* Quote styling */
.datasheet-content blockquote,
.datasheet-content p:has(em:only-child) {
    border-left: 4px solid var(--accent-color);
    padding: 15px 20px;
    margin: 20px 0;
    background: var(--accent-light);
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* Link styling in datasheet */
.datasheet-content a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s ease;
}

.datasheet-content a:hover {
    border-bottom: 1px solid var(--accent-color);
}

/* Dark theme datasheet styles */
[data-theme="dark"] .datasheet-modal-content {
    background: var(--bg-secondary);
}

/* Responsive datasheet */
@media (max-width: 768px) {
    .datasheet-modal-content {
        padding: 20px 15px;
    }
    
    .datasheet-header {
        padding: 20px 15px;
        margin: -10px -5px 30px -5px;
    }
    
    .report-logo {
        height: 45px;
    }
    
    .datasheet-header h2 {
        font-size: 24px;
    }
    
    .datasheet-header p {
        font-size: 16px;
    }
    
    .datasheet-content h1 {
        font-size: 22px;
    }
    
    .datasheet-content h2 {
        font-size: 20px;
    }
    
    .datasheet-content h3 {
        font-size: 18px;
    }
    
    .datasheet-content .message-table {
        font-size: 12px;
        min-width: 350px;
    }
    
    .datasheet-content .message-table th,
    .datasheet-content .message-table td {
        padding: 10px 8px;
        max-width: 120px;
        font-size: 12px;
    }
}

/* ============================================================================
   JSON RESPONSE STYLING - Consistent spacing system
   ============================================================================
   
   SPACING SCALE (CSS Variables for consistency):
   --json-spacing-xs: 4px   - Minimal gaps (inside elements)
   --json-spacing-sm: 8px   - Small gaps (list items, inline)
   --json-spacing-md: 12px  - Medium gaps (paragraphs, sections)
   --json-spacing-lg: 20px  - Large gaps (major sections)
   --json-spacing-xl: 28px  - Extra large (page sections)
   
   SCOPING: All rules prefixed with .json-response or .message-content
   to avoid affecting campaigns, modals, toasters, etc.
   ============================================================================ */

/* Spacing variables */
:root {
    --json-spacing-xs: 4px;
    --json-spacing-sm: 8px;
    --json-spacing-md: 12px;
    --json-spacing-lg: 20px;
    --json-spacing-xl: 28px;
}

/* JSON Response container - integrated with chat messages */
.json-response {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--typo-base-size, 14px);  /* Uses typography setting */
    font-weight: 400;
    line-height: calc(1.65 * var(--typo-spacing-scale, 1));
    letter-spacing: -0.01em;  /* Slight tightening for Inter */
    /* Remove separate container styling to integrate with message content */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Title at top of JSON response */
.json-response-title {
    color: var(--text-primary);
    font-size: 17px;  /* Reduced from 20px */
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: var(--json-spacing-xs) 0 var(--json-spacing-md) 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--json-spacing-xs);
}

/* JSON Response Error Handling */
.json-response-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    color: #dc2626;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .json-response-error {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

.json-response-error h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.json-response-error p {
    margin: 8px 0;
    font-size: 14px;
}

.section-error {
    background: #fef3cd;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    color: #a16207;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .section-error {
    background: #451a03;
    border-color: #a16207;
    color: #fbbf24;
}

.json-fallback {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
    box-shadow: var(--shadow-sm);
}

.json-raw {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}

.fallback-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

/* Paragraph in JSON response */
.json-paragraph {
    margin: 0 0 calc(var(--json-spacing-md) * var(--typo-spacing-scale, 1)) 0;
    color: var(--text-primary);
    line-height: calc(1.7 * var(--typo-spacing-scale, 1));
}

.json-paragraph:last-child {
    margin-bottom: 0;
}

/* Text section wrapper */
.json-text-section {
    margin: var(--json-spacing-md) 0;
    color: var(--text-primary);
    line-height: 1.7;
}

/* First text section after title needs less top margin */
.json-response-title + .json-text-section {
    margin-top: var(--json-spacing-sm);
}

/* Paragraphs inside text sections */
.json-text-section .json-paragraph {
    margin: 0 0 var(--json-spacing-md) 0;
}

.json-text-section .json-paragraph:last-child {
    margin-bottom: 0;
}

/* Legacy support for p tags (from formatAssistantMessage) */
.json-text-section p {
    margin: 0 0 var(--json-spacing-md) 0;
}

.json-text-section p:last-child {
    margin-bottom: 0;
}

/* Section headers like "Challenge:", "Solution:" */
.json-section-header {
    display: inline;
    color: var(--text-primary);
    font-weight: 600;
}

/* When section header is at start of paragraph, add top spacing */
.json-paragraph:has(.json-section-header:first-child) {
    margin-top: var(--json-spacing-lg);
}

/* Heading elements in JSON */
.json-heading {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: var(--json-spacing-lg) 0 var(--json-spacing-md) 0;
}

/* Heading sizes - refined hierarchy */
.json-heading.h1 { font-size: 17px; }
.json-heading.h2 { font-size: 15px; }
.json-heading.h3 { font-size: 14px; }
.json-heading.h4 { font-size: 13px; font-weight: 500; }

/* First heading needs less top margin */
.json-text-section > .json-heading:first-child,
.json-response > .json-heading:first-child {
    margin-top: 0;
}

/* Quote/blockquote styling */
.json-quote {
    border-left: 3px solid var(--accent-color);
    padding: var(--json-spacing-sm) var(--json-spacing-md);
    margin: var(--json-spacing-md) 0;
    background: var(--accent-light);
    font-style: italic;
    font-size: 13px;
    border-radius: 0 6px 6px 0;
}

/* Inline code - matches main code styling */
.json-code,
.json-response .inline-code {
    background: #1e293b;
    color: #38bdf8;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    border: 1px solid #334155;
}

/* Code block - matches main code block styling */
.json-code-block {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px 20px;
    margin: var(--json-spacing-md) 0;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    max-width: 100%;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Language label for JSON code blocks */
.json-code-block::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: #94a3b8;       /* Slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #1e293b;  /* Slate-800 */
    padding: 4px 12px;
    border-radius: 0 12px 0 8px;
}

.json-code-block code {
    background: none !important;
    color: #e2e8f0;
    padding: 0;
    border: none !important;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Token highlighting for JSON code blocks */
.json-code-block .token-var {
    color: #22d3ee;
    font-weight: 500;
}

.json-code-block .token-cond {
    color: #c084fc;
    font-weight: 600;
}

.json-code-block .token-string {
    color: #4ade80;
}

.json-code-block .token-comment {
    color: #64748b;
    font-style: italic;
}

/* Mobile responsive JSON code blocks */
@media (max-width: 768px) {
    .json-code-block {
        padding: 12px 14px;
        border-radius: 10px;
        overflow-x: hidden !important;
    }
    
    .json-code-block::before {
        display: none;  /* Hide language label on mobile - overlaps text */
    }
    
    .json-code-block code {
        font-size: 12px;
        white-space: pre-wrap !important;
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    .json-code-block {
        padding: 10px 12px;
        margin: 10px -8px;
        border-radius: 8px;
        max-width: calc(100% + 16px);
    }
    
    .json-code-block code {
        font-size: 11px;
    }
}

/* =====================================================================
   ARTIFACT CARDS — emails / letters / memos / social posts / documents
   -------------------------------------------------------------------
   Drafted written content from the LLM. Replaces the dark monospace
   code-block rendering with a clean paper-card UI so emails and
   documents feel like artifacts, not code. Theme-aware via CSS
   variables so light and dark themes both look right. Responsive to
   match code-block behavior on narrow screens (same negative margins
   so the card can go edge-to-edge on mobile). v1.0.421.
   ===================================================================== */
.json-artifact {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin: var(--json-spacing-md) 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    /* overflow: visible — dropdown menu from the Open-in-Mail split
       button needs to extend outside the card bounds. The header and
       body use their own border-radius clipping where needed; the card
       as a whole doesn't need to clip because its children already
       respect the rounded corners. */
    overflow: visible;
    max-width: 100%;
    font-family: inherit; /* prose, not monospace */
}

/* Dark theme gets a slightly lifted card surface so it reads as a
   distinct object on the dark page background — matches the image
   mock the admin shared. */
[data-theme="dark"] .json-artifact,
html.embed-mode[data-theme="dark"] .json-artifact {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.json-artifact-header {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 14px 20px;
    /* No divider line between subject and body — matches the Claude
       artifact style the admin shared. Visual separation comes from
       the tinted header background, not from a hard rule. */
    border-bottom: none;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg-secondary);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

[data-theme="dark"] .json-artifact-header {
    background: var(--bg-tertiary);
}

.json-artifact-label {
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.json-artifact-title {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Header variant for artifacts without a title (e.g. short social posts) */
.json-artifact-header-no-title .json-artifact-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.json-artifact-body {
    padding: 18px 22px;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.65;
    white-space: normal; /* prose flow — line breaks come from <p>s */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.json-artifact-body p,
.json-artifact-body .json-paragraph {
    margin: 0 0 14px 0;
}

.json-artifact-body p:last-child,
.json-artifact-body .json-paragraph:last-child {
    margin-bottom: 0;
}

.json-artifact-body ul,
.json-artifact-body .json-bullet-list {
    margin: 10px 0 14px 0;
    padding-left: 22px;
}

.json-artifact-body li {
    margin: 4px 0;
    line-height: 1.6;
}

.json-artifact-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    /* No divider line between body and footer — matches Claude's
       seamless card look. The footer sits flush to the body on the
       same background; visual weight comes from the buttons, not from
       a hard rule. */
    border-top: none;
    background: transparent;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.json-artifact-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Legacy selectors kept only so stale cached HTML from before
   v1.0.422 doesn't render badly during the cache-bust window. New
   renders use .json-artifact-actions. */
.json-artifact-footer-left,
.json-artifact-footer-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* =====================================================================
   Artifact footer action buttons — shared base.
   CRITICAL: these selectors must overpower the generic message-content
   link styling (see ~line 3592 for `.message-content a` and line 3609
   for `.message-content a[href^="mailto:"]`) which otherwise paints
   "Open in Mail" blue, adds a border-bottom underline on hover, bumps
   padding/margin on hover (layout jump!), and injects envelope /
   external-link ::after glyphs. We bump specificity by scoping to
   .json-artifact and use !important where the generic rule also
   uses !important (::after content) or where it would otherwise
   mutate layout on hover (padding, margin, background, border-bottom).
   ===================================================================== */
.json-artifact .json-artifact-copy,
.json-artifact .json-artifact-mail,
.json-artifact .json-artifact-send-caret {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    /* Kill margin/padding drift from the global .message-content a:hover
       rule which adds padding:2px 4px + margin:-2px -4px. That rule
       recalculates layout on every hover — catastrophic for a dropdown
       menu sitting underneath. Pin the static padding here so hover
       can't change it. */
    margin: 0;
}

[data-theme="dark"] .json-artifact .json-artifact-copy,
[data-theme="dark"] .json-artifact .json-artifact-mail,
[data-theme="dark"] .json-artifact .json-artifact-send-caret {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

/* Hover: subtle bg shift only. NO underline, NO blue color, NO padding
   change, NO margin change. Belt-and-braces !important on the layout
   properties because the global `.message-content a:hover:not(...)` rule
   would otherwise set padding:2px 4px + margin:-2px -4px and shift
   surrounding content. */
.json-artifact .json-artifact-copy:hover,
.json-artifact .json-artifact-mail:hover,
.json-artifact .json-artifact-send-caret:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-color: var(--border-medium) !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border-bottom-color: var(--border-medium) !important;
}

.json-artifact .json-artifact-copy:focus-visible,
.json-artifact .json-artifact-mail:focus-visible,
.json-artifact .json-artifact-send-caret:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.json-artifact .json-artifact-copy i,
.json-artifact .json-artifact-mail i {
    font-size: 13px;
}

/* Kill the global mailto (::after envelope) and target="_blank" (::after
   external-link glyph) decorations that would otherwise show INSIDE our
   buttons. The card's own leading icons already communicate the action
   type; the generic indicator is redundant and visually breaks the pill
   button. */
.json-artifact .json-artifact-mail::after,
.json-artifact .json-artifact-send-menu-item::after,
.json-artifact a[href^="mailto:"]::after,
.json-artifact a[target="_blank"]::after {
    content: none !important;
    display: none !important;
}

/* Neutralize the global .message-content a[href^="mailto:"] blue color
   rule and the inherited `.message-content a` text-decoration.
   
   IMPORTANT — two different treatments:
     1. Button-style links (.json-artifact-mail, .json-artifact-mail--primary)
        keep their full box border from the .json-artifact-copy/mail/caret
        shared rule above. We ONLY reset color + background-image +
        text-decoration here — do NOT touch border-bottom or the
        button loses its bottom edge (regression reported in v1.0.422
        iframe embed context).
     2. Inline menu items (.json-artifact-send-menu-item) have no box
        border, so `border-bottom: none !important` correctly kills
        the underline-like transparent bottom edge inherited from
        `.message-content a { border-bottom: 1px solid transparent; }`.
*/
.json-artifact .json-artifact-mail,
.json-artifact a[href^="mailto:"],
.json-artifact a[target="_blank"] {
    color: var(--text-primary) !important;
    background-image: none !important;
    text-decoration: none !important;
}

.json-artifact .json-artifact-send-menu-item {
    color: var(--text-primary) !important;
    background-image: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

.json-artifact .json-artifact-mail:hover,
.json-artifact a[href^="mailto:"]:hover,
.json-artifact a[target="_blank"]:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    background-image: none !important;
    /* Keep the button's own border intact on hover — the shared
       button-hover rule above handles border-color, we just prevent
       the generic `.message-content a:hover` from painting the
       bottom edge theme-primary blue. */
    border-bottom-color: var(--border-medium) !important;
}

.json-artifact .json-artifact-send-menu-item:hover {
    color: var(--text-primary) !important;
    border-bottom-color: transparent !important;
    text-decoration: none !important;
    background-image: none !important;
}

/* =====================================================================
   Deep-link suppression INSIDE the artifact body.
   
   The renderer runs artifact body text through formatTextContent which
   auto-detects "deep links" (internal prompt-library cross-references)
   and paints them with a dotted underline + share-arrow ::after glyph
   (see .message-content a.deep-link around line 3641). In a drafted
   email / post / memo that's noise — the text is meant to be read as
   prose or pasted into Gmail / LinkedIn / Word, where an internal
   prompt-library link has no context.
   
   Scope is strictly `.json-artifact .json-artifact-body` so deep links
   OUTSIDE artifacts (regular chat responses, knowledge snippets) keep
   their normal styling untouched.
   ===================================================================== */
.json-artifact .json-artifact-body a.deep-link {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-style: initial !important;
    border-bottom: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: inherit !important;
    cursor: text !important;
}

.json-artifact .json-artifact-body a.deep-link::after {
    content: none !important;
    display: none !important;
}

.json-artifact .json-artifact-body a.deep-link:hover {
    color: inherit !important;
    background: none !important;
    text-decoration: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* After-copy acknowledgement — override the plain hover color */
.json-artifact-footer .json-artifact-copy--copied {
    color: #10b981 !important;
    border-color: #10b981 !important;
}

/* =====================================================================
   Send split-button — [✈ Open in Mail ▾] with dropdown menu.
   Primary link + caret button butt against each other as one pill.
   Border is applied ONLY on the outer edges of the combined pill so
   the two halves look like one unified button (no visible seam).
   ===================================================================== */
.json-artifact-send-split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    /* Shared outer border — removed from the children to avoid double
       borders at the seam. */
}

.json-artifact .json-artifact-send-split .json-artifact-mail--primary {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    padding-right: 10px;
}

.json-artifact .json-artifact-send-split .json-artifact-send-caret {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--border-light);
    padding: 6px 8px !important;
    min-width: 32px;
    justify-content: center;
}

[data-theme="dark"] .json-artifact .json-artifact-send-split .json-artifact-send-caret {
    border-left-color: var(--border-medium);
}

.json-artifact-send-caret i {
    font-size: 11px;
    transition: transform 0.15s ease;
}

.json-artifact-send-split[data-menu-state="open"] .json-artifact-send-caret i {
    transform: rotate(180deg);
}

/* Dropdown menu — hidden by default, shown when parent split has
   data-menu-state="open". Anchored below the caret, right-aligned.
   High z-index because chat bubbles / message containers create
   stacking contexts that would otherwise clip this menu. */
.json-artifact-send-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: none;
    z-index: 9999;
}

[data-theme="dark"] .json-artifact-send-menu {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.json-artifact-send-split[data-menu-state="open"] .json-artifact-send-menu {
    display: block;
}

.json-artifact-send-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px !important;
    border-radius: 6px;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.12s ease;
    line-height: 1.4;
    /* Pin margin to 0 so the global .message-content a:hover rule
       (which adds padding:2px 4px + margin:-2px -4px) can't shift
       the item on hover. Without this pin, hover visibly jumps the
       menu items — the "animation gets stuck" symptom. */
    margin: 0 !important;
    border: 1px solid transparent;
}

.json-artifact-send-menu-item + .json-artifact-send-menu-item {
    margin-top: 2px !important;
}

.json-artifact-send-menu-item:hover,
.json-artifact-send-menu-item:focus-visible {
    background: var(--hover-bg) !important;
    background-image: none !important;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    outline: none;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
}

.json-artifact-send-menu-item + .json-artifact-send-menu-item:hover {
    margin-top: 2px !important;
}

.json-artifact-send-menu-item i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Gmail brand tint for the Send via Gmail item */
.json-artifact-gmail-icon {
    color: #ea4335; /* Gmail red */
}

[data-theme="dark"] .json-artifact-gmail-icon {
    color: #ff6b5b;
}

/* Make sure the artifact card and its ancestors don't clip the popover.
   The chat message container typically has overflow:hidden for bubble
   rounding; because our menu is absolutely positioned within the
   split-button it's still constrained by any ancestor with
   overflow:hidden. Best fix is to make sure the artifact card itself
   lets the menu overflow. */
.json-artifact,
.json-artifact-footer,
.json-artifact-footer-right {
    overflow: visible;
}

/* Mobile — reduce padding and expand horizontally like code blocks do */
@media (max-width: 768px) {
    .json-artifact-header,
    .json-artifact-body {
        padding-left: 16px;
        padding-right: 16px;
    }
    .json-artifact-footer {
        padding: 8px 12px;
    }
    .json-artifact-body {
        font-size: 14px;
    }
    .json-artifact-mail span {
        /* Keep the label visible — it's part of the primary affordance. */
    }
}

@media (max-width: 480px) {
    .json-artifact {
        margin: 10px -8px;
        border-radius: 10px;
        max-width: calc(100% + 16px);
    }
    .json-artifact-header {
        padding: 12px 14px;
        font-size: 13px;
    }
    .json-artifact-body {
        padding: 14px;
        font-size: 14px;
    }
    .json-artifact-footer {
        padding: 8px 10px;
    }
}

/* Bullet and numbered lists in JSON text */
.json-bullet-list,
.json-numbered-list {
    margin: var(--json-spacing-sm) 0 var(--json-spacing-md) 0;
    padding-left: var(--json-spacing-lg);
}

.json-bullet-list li,
.json-numbered-list li {
    margin: var(--json-spacing-xs) 0;
    line-height: 1.6;
}

/* Legacy: Old .json-code style */
.json-response .json-code:not(.inline-code) {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* JSON List Styling */
.json-list {
    margin: 15px 0;
    padding-left: 25px;
}

.json-checklist {
    list-style: none;
    margin: 15px 0;
    padding-left: 0;
}

.json-checklist li {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.json-checklist li.checked {
    color: #10b981;
}

.json-checklist li i {
    width: 16px;
    color: var(--accent-color);
}

/* JSON Topic Group - for lists detected as header+subitems */
.json-topic-group {
    margin: 12px 0;
}

.json-topic-header {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1.05em;
    padding-left: 4px;
    border-left: 3px solid var(--accent-color);
    padding-left: 12px;
}

.json-topic-header strong {
    color: var(--accent-color);
}

.json-topic-subitems {
    margin: 0;
    padding-left: 28px;
    list-style-type: disc;
}

.json-topic-subitems li {
    margin: 6px 0;
    line-height: 1.5;
    color: var(--text-secondary);
}

.json-topic-subitems li::marker {
    color: var(--accent-color);
}

/* JSON Table Styling */
.json-table-title {
    color: var(--accent-color);
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 15px 0;
}

.json-table {
    /* Ensure json-table inherits all message-table styles */
    width: 100% !important;
    min-width: 400px !important;
    max-width: 100% !important;
    border-collapse: separate !important; /* Required for border-radius to work */
    border-spacing: 0 !important;
    margin: 0 !important;
    background: var(--bg-primary) !important;
    /* USE CSS VARIABLES for border-radius/overflow - allows custom CSS override */
    border-radius: var(--table-border-radius, 8px) !important;
    overflow: var(--table-overflow, hidden) !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
    /* No border here - wrapper handles outer border */
}

.json-table thead {
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    color: var(--theme-action-text) !important;
}

.json-table th {
    padding: 14px 12px !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: calc(6px + var(--typo-base-size, 14px) * 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    border-bottom: 3px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
    color: var(--theme-action-text) !important;
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
    box-sizing: border-box !important;
}

.json-table th:first-child {
    border-left: 4px solid var(--table-first-column, var(--theme-primary-dark)) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--table-header-gradient-start, var(--theme-primary-light)), var(--table-header-gradient-end, var(--theme-primary-dark))) !important;
}

/* Last header column: themed border instead of semi-transparent white */
.json-table th:last-child {
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
}

[data-theme="dark"] .json-table th:last-child {
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
}

/* Explicit: Last column body cells get themed border */
.json-table td:last-child {
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
}

[data-theme="dark"] .json-table td:last-child {
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
}

.json-table td {
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    color: var(--table-body-text, var(--text-primary)) !important;
    vertical-align: top !important;
    line-height: calc(1.6 * var(--typo-spacing-scale, 1)) !important;
    background: var(--bg-primary) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
    font-size: calc(6px + var(--typo-base-size, 14px) * 0.6) !important;
    box-sizing: border-box !important;
}

/* DESKTOP ONLY: Remove right border on last column (mobile card view needs borders) */
@media (min-width: 1025px) {
    .json-table td:last-child {
        border-right: none !important;
    }
}

.json-table tbody tr:nth-child(even) {
    background: var(--table-row-even-bg, var(--bg-secondary)) !important;
}

.json-table tbody tr:hover {
    background: var(--table-row-hover, rgba(0, 0, 0, 0.03)) !important;
    transition: background 0.2s ease !important;
    /* No transform, shadow, or border changes - keeps borders visible */
}

.json-table td:first-child {
    border-left: 4px solid var(--table-first-column, var(--theme-primary-dark)) !important;
    font-weight: 600 !important;
    background: var(--table-first-column-bg, rgba(91, 167, 247, 0.1)) !important;
    color: var(--table-first-column-text, var(--text-primary)) !important;
}

[data-theme="dark"] .json-table th:first-child {
    border-left: 4px solid var(--table-first-column, #14b8a6) !important;
    background: linear-gradient(135deg, var(--table-header-gradient-start, #14b8a6), var(--table-header-gradient-end, #0d9488)) !important;
}

[data-theme="dark"] .json-table td:first-child {
    background: var(--table-first-column-bg, rgba(20, 184, 166, 0.15)) !important;
    color: var(--table-first-column-text, #ffffff) !important;
    border-left: 4px solid var(--table-first-column, #14b8a6) !important;
}

[data-theme="dark"] .json-table td {
    border-bottom: 1px solid var(--table-cell-border, #14b8a6) !important;
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
    color: var(--table-body-text, var(--text-primary)) !important;
}

/* DESKTOP ONLY: Remove right border on last column (mobile card view needs borders) */
@media (min-width: 1025px) {
    [data-theme="dark"] .json-table td:last-child {
        border-right: none !important;
    }
}

[data-theme="dark"] .json-table tbody tr:nth-child(even) {
    background: var(--table-row-even-bg, #2d2d30) !important;
}

/* Last row styling - remove bottom border (wrapper provides it) and add rounded corners */
/* DESKTOP ONLY: These rules are for table layout, not mobile card layout */
@media (min-width: 1025px) {
    .json-table tbody tr:last-child td {
        border-bottom: none !important;  /* Wrapper provides outer border */
    }

    .json-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--table-border-radius, 8px) !important;
    }

    .json-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--table-border-radius, 8px) !important;
        /* No border-right or border-bottom - wrapper provides outer borders */
    }
}

/* ============================================================================
   CHART DATA TABLE STYLING
   Tables that accompany charts (class="chart-data-table message-table")
   Need same visual closure as json-table - themed borders on all edges
   ============================================================================ */

.chart-data-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    /* USE CSS VARIABLES for border-radius/overflow - allows custom CSS override */
    border-radius: var(--table-border-radius, 8px) !important;
    overflow: var(--table-overflow, hidden) !important;
}

/* Header cells - themed border */
.chart-data-table th {
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    border-bottom: 3px solid var(--table-cell-border, var(--theme-primary-light)) !important;
}

.chart-data-table th:last-child {
    border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
}

[data-theme="dark"] .chart-data-table th:last-child {
    border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
}

/* DESKTOP ONLY: Body cells - themed borders for table layout (not mobile cards) */
@media (min-width: 1025px) {
    .chart-data-table td {
        border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
        border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    }

    .chart-data-table td:last-child {
        border-right: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    }

    [data-theme="dark"] .chart-data-table td {
        border-bottom: 1px solid var(--table-cell-border, #14b8a6) !important;
        border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
    }

    [data-theme="dark"] .chart-data-table td:last-child {
        border-right: 1px solid var(--table-cell-border, #14b8a6) !important;
    }

    /* Last row - keep bottom border */
    .chart-data-table tbody tr:last-child td {
        border-bottom: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    }

    [data-theme="dark"] .chart-data-table tbody tr:last-child td {
        border-bottom: 1px solid var(--table-cell-border, #14b8a6) !important;
    }
}

/* DESKTOP ONLY: Corner radius rules for table layout (not mobile card layout) */
@media (min-width: 1025px) {
    /* First cell of last row (bottom-left corner) - uses CSS variable for customization */
    .chart-data-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--table-border-radius, 8px) !important;
    }

    /* Last cell of last row (bottom-right corner) - uses CSS variable for customization */
    .chart-data-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--table-border-radius, 8px) !important;
    }
}

/* DESKTOP ONLY: First cell styling for table layout */
@media (min-width: 1025px) {
    /* Last cell - no extra borders, wrapper provides outer frame */

    /* First cell styling (left accent) - desktop table only */
    .chart-data-table td:first-child {
        border-left: 4px solid var(--table-first-column, var(--theme-primary-dark)) !important;
    }

    [data-theme="dark"] .chart-data-table td:first-child {
        border-left: 4px solid var(--table-first-column, #14b8a6) !important;
    }
}

/* Inner wrapper for chart-data-table - uses CSS variable for border-radius */
.chart-data-table-inner {
    border-radius: var(--table-border-radius, 6px);
    overflow: var(--table-overflow, hidden);
}

/* LEGACY FIX: Override inline border-radius on old stored chart-data-table HTML */
/* The > div targets the wrapper div that had inline style="border-radius: 6px" */
.chart-data-table-wrapper > div {
    border-radius: var(--table-border-radius, 6px) !important;
    overflow: var(--table-overflow, hidden) !important;
}

/* Wrapper containing chart-data-table - themed border */
/* DESKTOP ONLY: Don't add wrapper border on mobile (cards don't need it) */
@media (min-width: 1025px) {
    .table-wrapper:has(.chart-data-table),
    .chart-data-table-wrapper .table-wrapper {
        border: 1px solid var(--table-cell-border, var(--theme-primary-light)) !important;
    }

    [data-theme="dark"] .table-wrapper:has(.chart-data-table),
    [data-theme="dark"] .chart-data-table-wrapper .table-wrapper {
        border: 1px solid var(--table-cell-border, #14b8a6) !important;
    }
}

/* Error Message Styling */
.error-message {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    color: #c33;
}

.error-message h4 {
    margin: 0 0 8px 0;
    color: #a00;
}

.error-message details {
    margin-top: 12px;
}

.error-message pre {
    background: #f8f8f8;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
}

[data-theme="dark"] .error-message {
    background: #4a1a1a;
    border-color: #6a2a2a;
    color: #ff6b6b;
}

[data-theme="dark"] .error-message h4 {
    color: #ff5555;
}

[data-theme="dark"] .error-message pre {
    background: #2a2a2a;
    color: #ccc;
}

/* Diagram Styling */
.diagram-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.diagram-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.diagram-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.diagram-container {
    background: transparent;
    border-radius: 6px;
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
}

/* White background only for successfully rendered diagrams */
.diagram-container.diagram-rendered {
    background: white;
}

/* Diagram expand button (top-right corner) */
.diagram-expand-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--theme-primary, #11a3f0); /* Fallback for first load */
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    pointer-events: auto; /* Ensure button receives clicks */
}

.diagram-expand-btn:hover {
    background: var(--theme-primary-dark, #0d8fd8); /* Fallback */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.diagram-expand-btn i {
    font-size: 13px;
}

[data-theme="dark"] .diagram-expand-btn {
    background: var(--theme-primary-light, #4DD0E1);
    color: var(--theme-action-text, #ffffff);
}

[data-theme="dark"] .diagram-expand-btn:hover {
    background: var(--theme-primary-dark, #00ACC1); /* Fallback */
}

/* Diagram Viewer Modal - MATCHES print-preview-modal sizing */
.diagram-viewer-modal {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    /* Desktop: 75% of viewport in both dimensions for square-ish aspect */
    width: 75vw;
    height: 75vh;
    max-width: 1400px;  /* Cap for very large screens */
    max-height: 90vh;   /* Safety cap */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Mobile/Touch: Match print-preview-modal responsive sizing */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .diagram-viewer-modal {
        width: 95%;
        max-width: none;
        margin: 10px;
        max-height: 80vh;
        border-radius: 12px;
        border: 1px solid var(--border-light);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
                    0 4px 16px rgba(0, 0, 0, 0.1),
                    0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .diagram-viewer-modal .modal-header {
        border-radius: 12px 12px 0 0;
        padding: 14px 18px;
    }
    
    .diagram-viewer-modal .modal-header h3 {
        font-size: 16px;
        /* Mobile: Limit to 2 lines with ellipsis */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: 2.8em; /* 2 lines × 1.4 line-height */
        cursor: pointer;
        transition: max-height 0.2s ease;
    }
    
    /* Expanded state - show full title */
    .diagram-viewer-modal .modal-header h3.expanded {
        -webkit-line-clamp: unset;
        max-height: none;
    }
    
    /* Visual hint that title is tappable when truncated */
    .diagram-viewer-modal .modal-header h3.truncated::after {
        content: ' ▼';
        font-size: 10px;
        opacity: 0.7;
    }
    
    .diagram-viewer-modal .modal-header h3.truncated.expanded::after {
        content: ' ▲';
    }
    
    .diagram-viewer-controls {
        padding: 12px 14px;
        gap: 8px !important;
    }
    
    .diagram-viewer-controls .modal-btn {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .diagram-viewer-controls .modal-btn i {
        margin-right: 4px;
    }
}

/* Small phones - match print-preview-modal */
@media (max-width: 480px) {
    .diagram-viewer-modal {
        max-height: 75vh;
        margin: 8px;
    }

    .diagram-viewer-modal .modal-header {
        padding: 14px 16px;
    }
}

.diagram-viewer-modal .modal-header {
    flex-shrink: 0;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    padding: 16px 24px;
    border-radius: 12px 12px 0 0;
}

.diagram-viewer-modal .modal-header h3 {
    color: var(--theme-action-text) !important;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.diagram-viewer-modal .modal-close {
    color: var(--theme-action-text);
    opacity: 0.9;
}

.diagram-viewer-modal .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.diagram-viewer-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    background: white;
    padding: 0;
    box-sizing: border-box;
    touch-action: none;
}

.diagram-viewer-body:active {
    cursor: grabbing;
}

.diagram-viewer-body .mermaid-diagram {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    background: white;
    overflow: hidden !important;
}

.diagram-viewer-body .mermaid-diagram svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

/* Override embed-mode rules that force height:auto/overflow:visible on .mermaid-diagram SVGs.
   Must exceed specificity of html.embed-mode .mermaid-diagram svg (0,2,2) */
html.embed-mode .diagram-viewer-body .mermaid-diagram,
html.widget-mode .diagram-viewer-body .mermaid-diagram {
    overflow: hidden !important;
    height: 100% !important;
}

html.embed-mode .diagram-viewer-body .mermaid-diagram svg,
html.widget-mode .diagram-viewer-body .mermaid-diagram svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.diagram-viewer-body svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.diagram-viewer-controls {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    flex-shrink: 0;
    background: var(--diagram-viewer-controls-bg, var(--bg-secondary));
    border-top: 2px solid var(--border-light);
}

.diagram-viewer-controls .modal-btn {
    font-size: 13px;
    padding: 10px 16px;
    font-weight: 500;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Mobile only: Active/Focus states match base state to prevent color sticking */
@media (hover: none) and (pointer: coarse) {
    .diagram-viewer-controls .modal-btn:active,
    .diagram-viewer-controls .modal-btn:focus {
        background: var(--bg-primary);
        color: var(--text-primary);
        border-color: var(--border-light);
        outline: none;
    }
}

/* Desktop: Hover works always, even after button is clicked/focused */
@media (hover: hover) and (pointer: fine) {
    .diagram-viewer-controls .modal-btn:hover {
        background: var(--theme-primary);
        color: var(--theme-action-text);
        border-color: var(--theme-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Remove focus outline on desktop (hover provides enough feedback) */
    .diagram-viewer-controls .modal-btn:focus {
        outline: none;
    }
}

.diagram-viewer-controls .modal-btn i {
    margin-right: 6px;
}

.diagram-viewer-controls .modal-btn:last-child {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

/* Mobile only: Close button active/focus states match base state (blue) */
@media (hover: none) and (pointer: coarse) {
    .diagram-viewer-controls .modal-btn:last-child:active,
    .diagram-viewer-controls .modal-btn:last-child:focus {
        background: var(--theme-primary);
        border-color: var(--theme-primary);
        color: var(--theme-action-text);
        outline: none;
    }
}

/* Desktop: Hover works always for close button */
@media (hover: hover) and (pointer: fine) {
    .diagram-viewer-controls .modal-btn:last-child:hover {
        background: var(--theme-primary-dark);
        border-color: var(--theme-primary-dark);
    }
    
    /* Remove focus outline on desktop */
    .diagram-viewer-controls .modal-btn:last-child:focus {
        outline: none;
    }
}

[data-theme="dark"] .diagram-viewer-modal {
    background: var(--bg-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .diagram-viewer-modal .modal-header {
    background: var(--theme-primary);
}

[data-theme="dark"] .diagram-viewer-body {
    background: white; /* Keep canvas white even in dark theme (like chat) */
}

[data-theme="dark"] .diagram-viewer-controls {
    background: var(--diagram-viewer-controls-bg, var(--bg-tertiary));
    border-color: var(--border-medium);
}

/* Mobile only: Dark theme button active/focus states match base state (prevent teal sticking) */
@media (hover: none) and (pointer: coarse) {
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:active,
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:focus {
        background: var(--bg-primary);
        color: var(--text-primary);
        border-color: var(--border-light);
        outline: none;
    }
}

/* Desktop: Dark theme hover works always */
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:hover {
        background: var(--theme-primary-light);
        border-color: var(--theme-primary-light);
    }
    
    /* Remove focus outline on desktop */
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:focus {
        outline: none;
    }
}

[data-theme="dark"] .diagram-viewer-controls .modal-btn:last-child {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary-light);
}

/* Mobile only: Dark theme close button active/focus states match base state (teal) */
@media (hover: none) and (pointer: coarse) {
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:last-child:active,
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:last-child:focus {
        background: var(--theme-primary-light);
        border-color: var(--theme-primary-light);
        color: var(--theme-action-text);
        outline: none;
    }
}

/* Desktop: Dark theme close button hover works always */
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:last-child:hover {
        background: var(--theme-primary-dark);
        border-color: var(--theme-primary-dark);
    }
    
    /* Remove focus outline on desktop */
    [data-theme="dark"] .diagram-viewer-controls .modal-btn:last-child:focus {
        outline: none;
    }
}

/* Mobile: Icon-only buttons — hide text labels, keep touch-friendly tap targets */
@media (max-width: 768px) {
    .diagram-viewer-controls {
        padding: 10px 14px;
        gap: 6px;
    }

    .diagram-viewer-controls .modal-btn {
        padding: 10px;
        white-space: nowrap;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .diagram-viewer-controls .modal-btn i {
        margin: 0;
    }

    .diagram-viewer-controls .modal-btn:not(:last-child) {
        font-size: 0;
    }

    .diagram-viewer-controls .modal-btn:not(:last-child) i {
        font-size: 16px;
    }

    .diagram-viewer-controls .modal-btn:last-child {
        font-size: 13px;
    }
}

.diagram-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.diagram-loading i {
    color: var(--theme-primary);
}

.mermaid-diagram {
    width: 100%;
    text-align: center;
    overflow: hidden; /* Prevent any negative-width artifacts from showing */
}

.mermaid-diagram svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: visible;
}

/* Hide any invalid rect elements with negative dimensions (Mermaid rendering artifacts) */
.mermaid-diagram svg rect[width^="-"],
.mermaid-diagram svg rect[height^="-"] {
    display: none !important;
}

.mermaid-diagram svg {
    padding: 12px;
    background: white !important;
    border-radius: 4px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
}

.diagram-fallback,
.diagram-error {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

.diagram-fallback i,
.diagram-error i {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--theme-primary);
}

.diagram-error i {
    color: #ff6b6b;
}

.diagram-fallback details,
.diagram-error details {
    margin-top: 12px;
    text-align: left;
}

.diagram-fallback pre,
.diagram-error pre {
    background: var(--bg-tertiary);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* Dark theme diagram styling */
[data-theme="dark"] .diagram-container {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .diagram-fallback pre,
[data-theme="dark"] .diagram-error pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
}

.retry-diagram-btn, .retry-btn {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin: 8px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.retry-diagram-btn:hover, .retry-btn:hover {
    background: var(--theme-primary-dark);
}

/* JSON Metrics Styling */
.json-metrics-title {
    color: var(--accent-color);
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 15px 0;
}

.json-metrics-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin: 20px auto;
    width: 100%;
    max-width: 1000px;
}

.json-metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;  /* Reduced from 20px */
    text-align: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 180px;  /* Reduced from 220px */
    min-height: 110px;  /* Increased from 100px to allow 3-line labels */
    height: auto;  /* Changed from fixed 100px to auto */
    max-height: 140px;  /* Cap the max height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.json-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.json-metric-card .metric-value {
    font-size: 24px;  /* Default, overridden by dynamic sizing in JavaScript */
    font-weight: 700;
    color: var(--accent-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.json-metric-card .metric-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.json-metric-card .metric-label-medium {
    font-size: 10px;
}

.json-metric-card .metric-label-small {
    font-size: 9px;
    letter-spacing: 0.3px;
}

.json-metric-card .metric-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.2;
}

.json-metric-card .metric-trend {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
}

.trend-up { color: #10b981; }
.trend-down { color: #ef4444; }
.trend-neutral { color: var(--text-muted); }

/* JSON Placeholders */
.json-chart-placeholder,
.json-image-placeholder {
    background: var(--bg-secondary);
    border: 2px dashed var(--border-light);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
    color: var(--text-muted);
}

.chart-placeholder,
.image-placeholder {
    font-size: 48px;
    margin-bottom: 15px;
}

.image-caption {
    font-style: italic;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Image sections in chat responses - contained look matching diagrams */
.json-image-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    text-align: center;
    position: relative;
}

.json-image-section .json-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.json-image-section .image-caption {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.json-image-section img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.json-image-section img:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-lg);
}

/* Expand button for images (matches diagram expand button exactly) */
.image-expand-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.image-expand-btn:hover {
    background: var(--theme-primary-dark, #0d8fd8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.image-expand-btn i {
    font-size: 13px;
}

[data-theme="dark"] .image-expand-btn {
    background: var(--theme-primary-light, #4DD0E1);
    color: var(--theme-action-text, #ffffff);
}

[data-theme="dark"] .image-expand-btn:hover {
    background: var(--theme-primary-dark, #00ACC1);
}

@media (max-width: 768px) {
    .json-image-section img {
        max-height: 300px;
    }
    
    /* Move expand button to outer border corner on mobile */
    .json-image-section {
        padding-top: 24px; /* Make room for button on border */
    }
    
    .json-image-section .image-expand-btn {
        top: -12px;
        right: -6px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
}

/* ========================================
   VIDEO SECTIONS IN CHAT RESPONSES
   Cross-platform responsive video player
   iOS Safari: playsinline, webkit-playsinline
   Mobile: Touch-friendly, safe area aware
   Desktop: Hover states, keyboard shortcuts
   ======================================== */

/* Video sections - contained look matching diagrams */
.json-video-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    position: relative;
    max-width: 100%;
}

/* Video wrapper with aspect ratio */
.video-player-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-md);
    /* Default 16:9 aspect ratio container */
    aspect-ratio: 16 / 9;
}

/* Video element - responsive and contained */
.video-player-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

/* Cover image overlay (before play) */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 5;
    /* When no cover image, show transparent so video first frame is visible */
    background: transparent;
}

.video-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* When video-cover has no image, add gradient background so play button is visible */
/* Using both :has() selector (modern) and .no-cover-image class (fallback) */
.video-cover:not(:has(img)) .video-play-overlay,
.video-cover.no-cover-image .video-play-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Ensure no-cover-image state has a visible background even before video loads */
.video-cover.no-cover-image {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
}

/* Play button overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease;
}

.video-cover:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.45);
}

/* Large circular play button */
.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-cover:hover .play-button {
    transform: scale(1.08);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
}

.video-cover:active .play-button {
    transform: scale(0.95);
}

.play-button i {
    font-size: 32px;
    color: var(--theme-primary, #3b82f6);
    margin-left: 4px; /* Visual centering for play icon */
}

/* Duration badge on cover */
.video-duration-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    z-index: 6;
}

/* Expand button overlay (fullscreen toggle) - always visible like diagram/image/chart */
.video-controls-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

/* Hide native fullscreen button from video controls - we use our custom expand button */
.chat-video-player::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Firefox: hide fullscreen button */
.chat-video-player::-moz-fullscreen-button {
    display: none !important;
}

/* Additional webkit shadow DOM targeting */
video.chat-video-player::-webkit-media-controls-enclosure {
    /* Keep other controls but hide fullscreen */
}

video.chat-video-player::-webkit-media-controls-panel {
    /* Style the control panel */
}

/* Video expand button - matches diagram/image/chart expand buttons */
.video-expand-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    pointer-events: auto;
}

.video-expand-btn:hover {
    background: var(--theme-primary-dark, #0d8fd8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.video-expand-btn i {
    font-size: 13px;
}

[data-theme="dark"] .video-expand-btn {
    background: var(--theme-primary-light, #4DD0E1);
    color: var(--theme-action-text, #ffffff);
}

[data-theme="dark"] .video-expand-btn:hover {
    background: var(--theme-primary-dark, #00ACC1);
}

/* Video caption */
.video-caption {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Muted autoplay indicator */
.video-muted-indicator {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 10;
}

.video-muted-indicator:hover {
    background: rgba(0, 0, 0, 0.9);
}

.video-muted-indicator i {
    font-size: 14px;
}

/* Video error state */
.video-error-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ef4444;
    padding: 20px;
}

.video-error-state i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

/* ========================================
   VIDEO SECTION - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .json-video-section {
        margin: 16px 0;
        padding-top: 24px; /* Make room for button on border */
    }
    
    .video-player-wrapper {
        border-radius: 8px;
    }
    
    .play-button {
        width: 64px;
        height: 64px;
    }
    
    .play-button i {
        font-size: 26px;
    }
    
    /* Move expand button to outer border corner on mobile */
    .json-video-section .video-expand-btn {
        top: -12px;
        right: -6px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .video-caption {
        font-size: 13px;
    }
    
    /* Hide fullscreen and PiP buttons on mobile - use our expand button instead */
    .chat-video-player::-webkit-media-controls-fullscreen-button {
        display: none !important;
        -webkit-appearance: none;
    }
    
    .chat-video-player::-webkit-media-controls-picture-in-picture-button {
        display: none !important;
        -webkit-appearance: none;
    }
    
    /* Firefox */
    .chat-video-player::-moz-fullscreen-button {
        display: none !important;
    }
    
    /* Safari iOS specific */
    .chat-video-player::-webkit-media-controls-start-playback-button {
        display: none !important;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .play-button {
        width: 56px;
        height: 56px;
    }
    
    .play-button i {
        font-size: 22px;
    }
    
    .video-duration-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* ========================================
   VIDEO SECTION - DARK THEME
   ======================================== */

[data-theme="dark"] .video-player-wrapper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .play-button {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .video-caption {
    color: var(--text-muted);
}

/* ========================================
   CAMPAIGN VIDEO PLAYER - CROSS-BROWSER STYLES
   ======================================== */

/* Campaign video player wrapper */
.campaign-video-player {
    position: relative;
}

/* Smooth transition for video element */
.campaign-video-player video {
    /* Ensure video fills container */
    display: block;
}

/* Hide PiP button in Webkit browsers (Chrome, Safari, Edge) */
.campaign-video-player video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

/* Hide download button in Webkit browsers */
.campaign-video-player video::-webkit-media-controls-download-button {
    display: none !important;
}

/* Hide overflow menu (3 dots) in Webkit browsers - prevents PiP access */
.campaign-video-player video::-webkit-media-controls-overflow-button {
    display: none !important;
}

/* Firefox: Hide PiP button via attribute-based selector */
.campaign-video-player video[disablepictureinpicture] {
    /* Firefox respects the attribute, no additional CSS needed */
}

/* Firefox: hide controls via CSS instead of toggling video.controls attribute
   (toggling the attribute in Firefox creates duplicate audio controller instances) */
video.controls-hidden::-moz-media-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* iOS Safari: Prevent fullscreen by default (use playsinline attribute) */
.campaign-video-player video {
    -webkit-playsinline: true;
}

/* Touch device optimization */
@media (pointer: coarse) {
    /* Larger touch targets on mobile */
    .campaign-video-player video::-webkit-media-controls-panel {
        min-height: 44px;
    }
}

/* ========================================
   VIDEO PLACEHOLDER (NO VIDEO AVAILABLE)
   ======================================== */

.json-video-placeholder {
    margin: 20px 0;
    text-align: center;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-light);
    border-radius: 12px;
    padding: 40px 20px;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
}

.video-placeholder i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.video-placeholder p {
    margin: 0;
    font-size: 15px;
}

/* ========================================
   REDUCED MOTION PREFERENCE
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .video-play-overlay,
    .play-button,
    .video-expand-btn,
    .video-controls-overlay {
        transition: none;
    }
    
    .video-cover:hover .play-button {
        transform: none;
    }
}

/* ========================================
   PRINT STYLES - HIDE VIDEO CONTROLS
   ======================================== */

@media print {
    .video-expand-btn,
    .video-controls-overlay,
    .video-muted-indicator {
        display: none !important;
    }
    
    .video-player-wrapper video {
        display: none;
    }
    
    /* Show cover image for print if available */
    .video-cover {
        display: block !important;
    }
    
    .video-play-overlay {
        display: none !important;
    }
}

/* Hide video expand button in print preview modal */
.modal-content-display .video-expand-btn,
#printPreviewContainer .video-expand-btn,
.print-preview-container .video-expand-btn {
    display: none !important;
}

/* ========================================
   VIDEO VIEWER MODAL - Matches diagram viewer
   90vh x 90vw with header/body/controls
   ======================================== */

.video-viewer-modal {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    /* 90% viewport for video viewing */
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    max-height: 90vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.video-viewer-modal .modal-header {
    flex-shrink: 0;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    padding: 16px 24px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-viewer-modal .modal-header h3 {
    color: var(--theme-action-text) !important;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-viewer-modal .modal-header h3 i {
    font-size: 18px;
}

.video-viewer-modal .modal-close {
    color: var(--theme-action-text);
    opacity: 0.9;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    transition: opacity 0.2s, background 0.2s;
    border-radius: 4px;
}

.video-viewer-modal .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.video-viewer-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 0;
}

.video-viewer-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#videoViewerPlayer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.video-viewer-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 16px;
    z-index: 2;
}

.video-viewer-loading i {
    font-size: 32px;
    color: var(--theme-primary, #3b82f6);
}

.video-viewer-loading.hidden {
    display: none;
}

.video-viewer-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #ef4444;
    font-size: 16px;
    text-align: center;
    z-index: 2;
}

.video-viewer-error i {
    font-size: 48px;
}

.video-viewer-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 10px 10px;
}

.video-speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.video-speed-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.video-speed-select:focus {
    outline: none;
    border-color: var(--theme-primary);
}

/* Mobile responsive - matches settings modal */
@media (max-width: 768px) {
    .video-viewer-modal {
        width: 95vw;
        max-width: 600px;
        margin: 10px;
        max-height: 80vh;
        height: auto;
        border-radius: 12px;
        border: 1px solid var(--border-light);
        display: flex;
        flex-direction: column;
    }

    .video-viewer-modal .modal-header {
        border-radius: 12px 12px 0 0;
        padding: 14px 18px;
    }

    .video-viewer-modal .modal-header h3 {
        font-size: 16px;
    }

    .video-viewer-body {
        max-height: calc(80vh - 130px);
        overflow: hidden;
    }

    .video-viewer-controls {
        padding: 10px 14px;
        gap: 6px;
    }

    .video-viewer-controls .modal-btn {
        padding: 10px;
        white-space: nowrap;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .video-viewer-controls .modal-btn i {
        margin: 0;
    }

    .video-viewer-controls .modal-btn:not(:last-child) {
        font-size: 0;
    }

    .video-viewer-controls .modal-btn:not(:last-child) i {
        font-size: 16px;
    }

    .video-viewer-controls .modal-btn:last-child {
        font-size: 13px;
    }

    .video-speed-control {
        display: none;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .video-viewer-modal {
        max-height: 75vh;
        margin: 8px;
    }

    .video-viewer-body {
        max-height: calc(75vh - 120px);
    }

    .video-viewer-modal .modal-header {
        padding: 14px 16px;
    }

    .video-viewer-controls {
        padding: 10px 12px;
    }
}

/* v1.0.484 — YouTube mode sizing. The MP4 path uses the body's full
 * available height (above) because the controls bar lives below it and
 * the native <video> with object-fit:contain handles letterboxing
 * gracefully. The YouTube path has NO controls bar (hidden by JS in
 * diagram-renderer.js) and the iframe doesn't gracefully handle being
 * taller than 16/9 — YouTube renders the video at the iframe width
 * with black-bar letterboxing inside, leaving wasted vertical space.
 *
 * The fix: when .youtube-mode is on the modal, size the body itself to
 * the iframe's natural 16/9 aspect ratio. The modal then shrinks to fit
 * (modal max-height still bounds it on tall content; on mobile the
 * iframe is the limiting factor). On desktop the modal is wide enough
 * that 16/9 height is comfortable; on mobile portrait the modal width
 * (95vw) drives a much shorter body height that fits naturally.
 *
 * MP4 mode is unaffected — these rules only fire when the JS explicitly
 * adds .youtube-mode to the modal.
 */
.video-viewer-modal.youtube-mode .video-viewer-body {
    /* v1.0.485 hotfix — the base .video-viewer-body rule has `flex: 1`
     * which makes the body grow to fill all available height in the
     * modal's flex column. That silently overrides intrinsic
     * `aspect-ratio` sizing, leaving the iframe taller than 16/9 and
     * forcing YouTube to letterbox its 16/9 video inside the taller
     * iframe (the "postage stamp" symptom Nick reported on iPhone).
     * `flex: 0 0 auto` opts out of flex-grow so the aspect-ratio rule
     * below actually drives the body's height. */
    flex: 0 0 auto;
    /* Drop the MP4-tuned max-height. The aspect-ratio rule below
     * provides the height instead. */
    max-height: none;
    /* 16/9 aspect ratio sized to whatever the modal width is. */
    aspect-ratio: 16 / 9;
    /* Defensive cap so the YouTube iframe never exceeds 80vh on
     * landscape phones (where 95vw × 9/16 might exceed viewport
     * height). */
    max-block-size: 80vh;
}

.video-viewer-modal.youtube-mode .youtube-viewer-iframe {
    /* Iframe fills the now-aspect-ratio-bound body. */
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    /* v1.0.487 — reverted v1.0.486's tall-modal Option C back to v1.0.485
     * behavior. Reason: real-device testing on iPhone with the Syncari
     * Explainer video revealed the source video is non-16:9 (square),
     * which made Option C's centered-with-letterbox layout look wrong:
     * the playing video was a small square pillarboxed inside a 16:9
     * iframe inside a tall modal. The pre-v1.0.486 small tight modal
     * (modal sized to the iframe's natural 16:9 of 95vw width) is the
     * cleaner fallback when source video aspect is unknown — at least
     * the modal doesn't have wasted vertical space.
     *
     * Real fix tracked as Option 4 in carry-forward: pre-fetch source
     * video aspect via YouTube Data API (or YouTube IFrame Player API
     * + thumbnail probe) before opening the modal, then size the body
     * + iframe to the actual aspect. That produces zero pillarbox / zero
     * letterbox regardless of source aspect — but requires a YouTube
     * Data API key. Defer to a future release. */
    .video-viewer-modal.youtube-mode {
        max-height: none;
        height: auto;
    }

    .video-viewer-modal.youtube-mode .video-viewer-body {
        /* Tighter cap on small viewports — leaves comfortable room
         * for the header + breathing space around the modal. */
        max-block-size: 70vh;
    }
}

/* v1.0.487 — landscape phone fix.
 *
 * Bug Nick reported: in landscape on iPhone Pro Max (932×430), the
 * modal renders at 90vw × 90vh (838 × 387) — looks "bigger than the
 * app" but the video content inside is small in the center with heavy
 * pillarbox. Root cause: 932 > 768 mobile breakpoint, so landscape
 * iPhone gets the DESKTOP rules. Body is sized via `aspect-ratio: 16/9`
 * but capped by `max-block-size: 80vh` (= 344 on a 430-tall viewport),
 * so body's effective aspect is 838/344 = 2.43:1 (much wider than
 * 16:9). Square source video then pillarboxes inside that overly-wide
 * iframe.
 *
 * Fix: when the viewport is landscape AND short (typical phone
 * landscape), constrain the modal's max-width by the available
 * height so the body's 16:9 aspect doesn't exceed the height
 * cap. Specifically: max-width = (90vh - header) × 16/9. That
 * keeps the modal a proper 16:9 envelope rather than a wide flat
 * box. Square videos still pillarbox (Option 4 territory) but the
 * modal frame matches the iframe so it stops looking like wasted
 * space.
 *
 * Applies to: phone-class viewports where height is the limiting
 * dimension. Tablets in landscape (height typically > 768) are
 * unaffected — they have plenty of vertical room for the 16:9
 * body without hitting max-block-size. */
@media (orientation: landscape) and (max-height: 500px) {
    /* v1.0.490 — Two big changes from v1.0.488:
     *
     * 1. DROP the `.youtube-mode` qualifier. Nick reported (with
     *    iPhone Pro Max landscape screenshot, iOS 26.4 Safari)
     *    that the same "too big" issue affects the MP4 path
     *    (streaming GCP-bucket videos via the pan-zoom viewer)
     *    too — the v1.0.488 rule was qualified `.youtube-mode`
     *    so MP4 was never affected.
     *
     * 2. Use `dvh` (dynamic viewport height) instead of `vh`.
     *    iOS Safari computes `vh` against the LARGEST possible
     *    viewport (URL bar collapsed). When the URL bar is showing
     *    (almost always when the modal opens), the visible content
     *    area is smaller than `100vh`. `dvh` adjusts for the actual
     *    visible viewport. iOS 15.4+ supports `dvh`. The vh fallback
     *    line is for older browsers (kept identical so it doesn't
     *    overflow on those). Note: dvh comes SECOND so it wins on
     *    supporting browsers; non-supporting browsers fall back to
     *    the vh line above.
     *
     * 3. Use 75vh (smaller) instead of 90vh — gives breathing room
     *    around the modal so the video doesn't dominate the entire
     *    visible viewport and feel "too big".
     *
     * The math (height = 75vh, body = 75vh - 50 header):
     *   modal_width = (75vh - 50px) * 16 / 9
     *   For iPhone Pro Max landscape (430-tall): (322 - 50) * 16/9 = 484
     *   For iPhone Pro landscape (393-tall):     (294 - 50) * 16/9 = 433
     *   For iPhone SE landscape (320-tall):      (240 - 50) * 16/9 = 337
     *
     * Modal proportionally clamps width via max-width too, so it
     * never exceeds the calc envelope regardless of width: or
     * the cascade. */
    .video-viewer-modal {
        width: calc((75vh - 50px) * 16 / 9) !important;
        max-width: calc((75vh - 50px) * 16 / 9) !important;
        width: calc((75dvh - 50px) * 16 / 9) !important;
        max-width: calc((75dvh - 50px) * 16 / 9) !important;
        height: 75vh !important;
        max-height: 75vh !important;
        height: 75dvh !important;
        max-height: 75dvh !important;
        margin: 0 auto !important;
    }
    /* Iframe + native video element fills body via inherited rules.
     * Explicit fill defends against edge cases where some other
     * inline style or specificity prevents the base rules from
     * applying. */
    .video-viewer-modal .youtube-viewer-iframe,
    .video-viewer-modal #videoViewerPlayer {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Dark theme */
[data-theme="dark"] .video-viewer-modal {
    background: var(--bg-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .video-viewer-modal .modal-header {
    background: var(--theme-primary);
}

[data-theme="dark"] .video-viewer-controls {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .video-speed-select {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

/* Dark theme JSON styling */
[data-theme="dark"] .json-code-block::before {
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .json-metric-card {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

[data-theme="dark"] .json-chart-placeholder,
[data-theme="dark"] .json-image-placeholder {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

/* Global Action Bar Styling */
.global-actions-container {
    padding: 15px 0;
    border-top: 1px solid var(--border-light);
    background: var(--bg-primary);
    margin-bottom: 10px;
}

.global-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.global-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--bg-secondary);
    border: 2px solid var(--theme-primary-light);
    border-radius: 10px;
    color: var(--theme-primary-light);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    min-width: 120px;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.global-action-btn:hover {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary-light);
    color: var(--theme-action-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 167, 247, 0.3);
}

.global-action-btn:active {
    transform: translateY(0);
}

.global-action-btn i {
    font-size: 16px;
}

/* Special styling for report button */
.global-action-btn.report-btn {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary-dark));
    color: var(--theme-action-text);
    border-color: var(--theme-primary-dark);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(91, 167, 247, 0.4);
}

.global-action-btn.report-btn:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary));
    border-color: var(--theme-primary);
    color: var(--theme-action-text);
    box-shadow: 0 8px 25px rgba(74, 144, 226, 0.5);
    transform: translateY(-3px);
}

/* Dark theme global actions */
[data-theme="dark"] .global-actions-container {
    background: var(--bg-secondary);
    border-color: var(--border-dark);
}

[data-theme="dark"] .global-action-btn {
    background: var(--bg-tertiary);
    border-color: #14b8a6;
    color: #14b8a6;
}

[data-theme="dark"] .global-action-btn:hover {
    background: #14b8a6;
    border-color: #14b8a6;
    color: var(--theme-action-text);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3);
}

[data-theme="dark"] .global-action-btn.report-btn {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-color: #0d9488;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
}

[data-theme="dark"] .global-action-btn.report-btn:hover {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    border-color: #0f766e;
    box-shadow: 0 8px 25px rgba(13, 148, 136, 0.5);
}

/* Mobile Header Optimizations - Enhanced mobile detection */
@media (max-width: 768px), 
@media (max-device-width: 768px),
@media screen and (max-width: 768px) and (orientation: portrait),
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Hide top header buttons on mobile */
    .nav-right {
        display: none;
    }
    
    /* Force sidebar footer to be visible on mobile - enhanced */
    .sidebar .sidebar-footer {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        background: var(--bg-secondary) !important;
        /* border: 2px solid orange !important; /* Mobile debug border removed */
    }
    
    /* Adjust app title for mobile — font-size is set by admin tagline config inline styles */
    .app-title {
        font-weight: 600;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Responsive global actions */
    .global-actions {
        gap: 8px;
    }
    
    .global-action-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 80px;
    }
    
    .global-action-btn i {
        font-size: 14px;
    }
    
    /* Mobile Chat Messages - Add space for fixed input bar + Safari dynamic toolbar */
    .chat-messages {
        padding-bottom: 280px !important;  /* Space for: input bar (~100px) + safe area (~34px) + Safari dynamic toolbar (~50px) + buffer */
    }
    
    /* Mobile Chat Input - Enhanced keyboard handling */
    .chat-input-container {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* Handle iPhone notch */
        background: var(--bg-primary);
        border-top: 2px solid var(--border-light);
        z-index: 1000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        
        /* Enhanced mobile keyboard support */
        transform: translateY(0);
        transition: transform 0.2s ease-out;
        will-change: transform;
    }
    
    .chat-input-wrapper {
        padding: 12px;
        border-radius: 25px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .chat-input {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 20px;
        max-height: 120px;
    }
    
    /* Landscape-specific: Ensure full width span */
    @media (max-width: 1024px) and (orientation: landscape), ((hover: none) and (pointer: coarse) and (orientation: landscape)) {
        .chat-input-container {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            top: auto !important;
            width: 100vw !important;
            min-width: 100vw !important;
            max-width: 100vw !important;
            margin: 0 !important;
            padding-left: 16px !important;
            padding-right: 16px !important;
        }
        
        .chat-input-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
        }
    }
    
    /* Adjust main content to account for fixed input */
    .main-content {
        padding-bottom: 80px; /* Space for fixed input */
    }
    
    .chat-messages {
        padding-bottom: 20px;
    }
    
    /* Keyboard open state enhancements */
    body.keyboard-open .chat-input-container {
        /* Enhanced shadow when keyboard is open */
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2);
    }
    
    /* Prevent content jumping when keyboard opens */
    body.keyboard-open .chat-messages {
        /* Use CSS custom property set by JavaScript */
        max-height: var(--viewport-height, 100vh);
        overflow-y: auto;
    }
    
    /* Smooth transitions for keyboard state changes */
    .chat-messages {
        transition: max-height 0.2s ease-out;
    }
}

/* Modal Content Display Styles */
.modal-content-display {
    max-width: 100%;
    margin: 0 auto;
    background: var(--bg-primary);
    border-radius: 8px;
    overflow: hidden;
}

.modal-content-header {
    padding: 0; /* Remove padding for perfect centering */
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    text-align: center;
    height: 120px; /* Fixed height for consistent sizing */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* No gap - tight spacing between logo and date */
    height: 100%;
    justify-content: center;
}

.modal-logo {
    width: 240px; /* Increased 50% from 160px */
    height: 240px;
    object-fit: contain;
    margin: 0;
    margin-top: 30px;
}

.content-timestamp {
    margin: 10px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Remove unused meta styles */
.modal-content-meta {
    text-align: center;
    margin: 0;
}

.modal-content-meta h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-content-body {
    padding: 0 24px 24px 24px; /* No top padding - tight against header */
    line-height: 1.6;
    color: var(--text-primary);
}

.modal-content-body p {
    margin: 0 0 16px 0;
    line-height: 1.8;
}

.modal-content-body ul,
.modal-content-body ol {
    margin: 0 0 16px 0;
    line-height: 1.8;
}

.modal-content-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* Ensure JSON response elements display correctly in modal */
.modal-content-body .json-metrics-grid,
.modal-content-display .json-metrics-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
}

.modal-content-body .json-metric-card,
.modal-content-display .json-metric-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.modal-content-body .json-table,
.modal-content-display .json-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.modal-content-body .json-list,
.modal-content-display .json-list {
    margin: 16px 0;
}

.modal-content-body .diagram-container,
.modal-content-display .diagram-container {
    margin: 20px 0;
    width: 100%;
}

/* ============================================================================
   FALLBACK RESPONSE STYLING - Graceful handling of parse failures
   ============================================================================ */

/* Simplified Response (graceful fallback) */
.simplified-response {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin: 12px 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.simplified-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.simplified-header i {
    font-size: 14px;
    opacity: 0.7;
}

.simplified-notice {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.simplified-notice p {
    margin: 0;
}

.fallback-extracted-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.fallback-extracted-content {
    color: var(--text-primary);
    line-height: 1.6;
}

.fallback-extracted-content p {
    margin: 0 0 12px 0;
}

.fallback-content-preview {
    margin: 12px 0;
    max-width: 100%;
    overflow: hidden;
}

.fallback-content-preview pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.fallback-retry {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.fallback-retry p {
    margin: 0;
}

/* Truncated Response Styling */
.truncated-note {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.truncated-note i {
    color: var(--text-muted);
    flex-shrink: 0;
}

.truncated-response {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.truncated-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #f59e0b;
    font-size: 14px;
    font-weight: 500;
}

.truncated-header i {
    font-size: 16px;
}

.truncated-notice {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.truncated-notice p {
    margin: 0;
}

.truncated-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.truncated-content-preview {
    color: var(--text-primary);
    line-height: 1.6;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 16px;
}

.truncated-content-preview p {
    margin: 0 0 8px 0;
}

.truncated-content-preview p:last-child {
    margin-bottom: 0;
}

.truncated-suggestions {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.truncated-suggestions p {
    margin: 0 0 8px 0;
}

.truncated-suggestions ul {
    margin: 0;
    padding-left: 20px;
}

.truncated-suggestions li {
    margin: 4px 0;
}

/* Technical Details (collapsed raw content) */
.technical-details {
    margin-top: 16px;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

.technical-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.technical-details summary:hover {
    color: var(--text-secondary);
}

.technical-details summary i {
    font-size: 11px;
}

.technical-details pre {
    margin-top: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    font-size: 11px;
}

.technical-details pre code {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

/* Legacy fallback styles (kept for compatibility) */
.code-view-fallback {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fallback-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.fallback-header i {
    font-size: 18px;
}

.fallback-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.fallback-reason {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--text-muted);
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 13px;
}

[data-theme="dark"] .fallback-reason {
    background: var(--bg-tertiary);
}

.fallback-reason p {
    margin: 6px 0;
    color: var(--text-secondary);
}

.fallback-content {
    margin: 16px 0;
    max-width: 100%;
    overflow: hidden;
}

.fallback-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 11px;
}

.fallback-content pre code {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.fallback-actions {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.modal-paragraph {
    margin-bottom: 16px;
}

.modal-list {
    margin-bottom: 16px;
    padding-left: 24px;
}

.modal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modal-table th,
.modal-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    text-align: left;
}

.modal-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.modal-quote {
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-left: 4px solid var(--theme-primary);
    border-radius: 4px;
}

/* Theme-aware header styling for modal content */
.modal-content-body h1,
.modal-content-body h2,
.modal-content-body h3,
.modal-content-body h4,
.modal-content-body h5,
.modal-content-body h6 {
    color: var(--theme-primary);
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
}

.modal-content-body h1 {
    font-size: 28px;
    border-bottom: 2px solid var(--theme-primary);
    padding-bottom: 8px;
}

.modal-content-body h2 {
    font-size: 24px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 6px;
}

.modal-content-body h3 {
    font-size: 20px;
}

.modal-content-body h4 {
    font-size: 18px;
}

.modal-content-body h5,
.modal-content-body h6 {
    font-size: 16px;
}

.modal-content-footer {
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.content-attribution {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.content-attribution a {
    color: var(--theme-primary);
    text-decoration: none;
}

.content-attribution a:hover {
    text-decoration: underline;
}

/* Modal diagram styling */
.modal-content-display .diagram-section {
    margin: 16px 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
}

.modal-content-display .diagram-container {
    background: white;
    min-height: 250px;
}

.modal-content-display .mermaid-diagram svg {
    max-width: 100%;
    max-height: 400px;
}

[data-theme="dark"] .modal-content-display .diagram-container {
    background: var(--bg-tertiary);
}

/* Print-specific styles for modal content */
@media print {
    /* ============================================================
       TYPOGRAPHY - Honor user's font size and density settings
       ============================================================ */
    body,
    .message-content,
    .json-response,
    .json-text-section,
    .json-paragraph {
        font-size: var(--typo-base-size, 14px) !important;
        line-height: calc(1.6 * var(--typo-spacing-scale, 1)) !important;
    }
    
    .message-content h1,
    .json-response-title {
        font-size: calc(17px * var(--typo-scale, 1)) !important;
    }
    
    .message-content h2 {
        font-size: calc(15px * var(--typo-scale, 1)) !important;
    }
    
    .message-content h3 {
        font-size: calc(14px * var(--typo-scale, 1)) !important;
    }
    
    .message-content p,
    .json-paragraph {
        margin-bottom: calc(12px * var(--typo-spacing-scale, 1)) !important;
    }
    
    .message-content li {
        margin-bottom: calc(8px * var(--typo-spacing-scale, 1)) !important;
        line-height: calc(1.6 * var(--typo-spacing-scale, 1)) !important;
    }
    
    .message-table td,
    .message-table th {
        padding: calc(10px * var(--typo-spacing-scale, 1)) !important;
        font-size: var(--typo-base-size, 14px) !important;
    }
    
    /* ============================================================
       MERMAID SVG PRINT STYLES - Comprehensive coverage
       ============================================================ */
    
    /* NODE BACKGROUNDS - Blue fill for all node types */
    svg rect:not(.edgeLabel rect):not(.labelBox),
    svg .node rect,
    svg .node polygon,
    svg g.node rect,
    svg g[class*="node"] rect {
        fill: #11a3f0 !important;
        stroke: #357ABD !important;
        stroke-width: 2px !important;
    }
    
    /* CLUSTER/SUBGRAPH backgrounds - Light gray */
    svg .cluster rect,
    svg g.cluster rect {
        fill: #f8f9fa !important;
        stroke: #357ABD !important;
        stroke-width: 1px !important;
    }
    
    /* SEQUENCE DIAGRAM - Actor boxes */
    svg .actor,
    svg .actor rect,
    svg g.actor rect {
        fill: #11a3f0 !important;
        stroke: #357ABD !important;
        stroke-width: 2px !important;
    }
    
    /* NODE TEXT - White on blue boxes (critical!) */
    svg .node text,
    svg .node tspan,
    svg .nodeLabel,
    svg .nodeLabel text,
    svg .nodeLabel tspan,
    svg g.node text,
    svg g[class*="node"] text,
    svg rect + text,
    svg polygon + text {
        fill: #ffffff !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* SEQUENCE DIAGRAM - Actor text (white on blue) */
    svg .actor text,
    svg .actor tspan,
    svg g.actor text,
    svg g.actor tspan,
    svg text.actor {
        fill: #ffffff !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* foreignObject labels (modern Mermaid) - handle both node and edge */
    svg .node foreignObject div,
    svg .node foreignObject span,
    svg .nodeLabel foreignObject div,
    svg .nodeLabel foreignObject span,
    svg g.node foreignObject div,
    svg g.node foreignObject span {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* CLUSTER/SUBGRAPH LABELS - Black text */
    svg .cluster text,
    svg .cluster tspan,
    svg .cluster-label text,
    svg .cluster-label tspan,
    svg g.cluster text {
        fill: #000000 !important;
        color: #000000 !important;
        font-weight: 600 !important;
    }
    
    /* EDGE/CONNECTION LABELS - Black text */
    svg .edgeLabel text,
    svg .edgeLabel tspan,
    svg .edgeLabel span,
    svg g.edgeLabel text,
    svg .messageText,
    svg text.messageText,
    svg .labelText {
        fill: #000000 !important;
        color: #000000 !important;
        font-weight: 500 !important;
    }
    
    /* Edge label backgrounds - transparent */
    svg .edgeLabel rect,
    svg g.edgeLabel rect,
    svg .labelBox {
        fill: transparent !important;
        opacity: 0 !important;
    }
    
    /* ARROWS AND LINES */
    svg path.flowchart-link,
    svg .edgePath path,
    svg line.messageLine0,
    svg line.messageLine1 {
        stroke: #357ABD !important;
        stroke-width: 2px !important;
    }
    
    /* ALL generic paths (fallback) */
    svg path {
        stroke: #357ABD !important;
        stroke-width: 2px !important;
    }
    
    /* Pie chart slices - preserve colors */
    svg path.slice,
    svg g[class*="pie"] path {
        fill: inherit !important;
        stroke: #ffffff !important;
    }
    
    /* ARROWHEADS */
    svg marker path,
    svg marker polygon,
    svg .arrowMarkerPath {
        fill: #357ABD !important;
        stroke: #357ABD !important;
    }
    
    /* Circles, polygons, ellipses (fallbacks) */
    svg circle:not(.actor) {
        fill: #11a3f0 !important;
        stroke: #357ABD !important;
    }
    
    svg polygon:not(.arrowMarkerPath) {
        fill: #11a3f0 !important;
        stroke: #357ABD !important;
    }
    
    svg ellipse {
        fill: #11a3f0 !important;
        stroke: #357ABD !important;
    }
    
    svg line {
        stroke: #357ABD !important;
    }
    
    /* NOTES (yellow boxes in sequence diagrams) */
    svg .note rect {
        fill: #fff8e1 !important;
        stroke: #ffc107 !important;
    }
    
    svg .note text,
    svg .noteText {
        fill: #000000 !important;
    }
    
    /* Activation boxes in sequence diagrams */
    svg .activation0,
    svg .activation1,
    svg .activation2 {
        fill: #e3f2fd !important;
        stroke: #357ABD !important;
    }
    
    /* Loop/alt boxes in sequence diagrams */
    svg .loopLine {
        stroke: #357ABD !important;
    }
    
    svg .loopText,
    svg text.loopText {
        fill: #000000 !important;
    }
    
    .modal-content-display {
        box-shadow: none;
        border: none;
    }
    
    .modal-content-header,
    .modal-content-footer {
        background: white !important;
        color: black !important;
    }
    
    .content-attribution a {
        color: black !important;
    }
    
    /* Make logo much smaller for print - more specific selector */
    .modal-content-display .modal-logo,
    .modal-header-content .modal-logo,
    #printPreviewContainer .modal-logo {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
    
    /* Tighten spacing for print */
    .modal-content-header {
        padding: 2px 4px !important; /* Minimal print padding */
        height: 50px !important; /* Smaller for 32px logo */
    }
    
    .modal-header-content {
        gap: 2px !important; /* Small gap for print */
    }
    
    /* Force small logo size with multiple selectors */
    .modal-logo,
    [class*="logo"] {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
    
    /* Professional table styling for print */
    .modal-table,
    table {
        border-collapse: collapse !important;
        border: 2px solid black !important;
        width: 100% !important;
        margin: 16px 0 !important;
    }
    
    .modal-table th,
    .modal-table td,
    table th,
    table td {
        border: 1px solid black !important;
        padding: 8px 12px !important;
        text-align: left !important;
    }
    
    .modal-table th,
    table th {
        background: black !important;
        color: var(--theme-action-text) !important;
        font-weight: bold !important;
        text-align: center !important;
    }
    
    .modal-table td,
    table td {
        background: white !important;
        color: black !important;
    }
    
    /* Alternating row colors for better readability */
    .modal-table tr:nth-child(even) td,
    table tr:nth-child(even) td {
        background: #f5f5f5 !important;
    }
    
    /* Professional list styling for print */
    .modal-list,
    ul,
    ol {
        margin: 12px 0 !important;
        padding-left: 20px !important;
    }
    
    .modal-list li,
    ul li,
    ol li {
        margin-bottom: 4px !important;
        color: black !important;
    }
    
    /* Quote/blockquote styling for print */
    .modal-quote,
    blockquote {
        border-left: 4px solid black !important;
        background: #f9f9f9 !important;
        padding: 12px 16px !important;
        margin: 16px 0 !important;
        color: black !important;
        font-style: italic;
    }
    
    /* Header styling for print */
    .modal-content-body h1,
    .modal-content-body h2,
    .modal-content-body h3,
    .modal-content-body h4,
    .modal-content-body h5,
    .modal-content-body h6,
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        font-weight: bold !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }
    
    .modal-content-body h1,
    h1 {
        font-size: 24px !important;
        border-bottom: 2px solid black !important;
        padding-bottom: 6px !important;
    }
    
    .modal-content-body h2,
    h2 {
        font-size: 20px !important;
        border-bottom: 1px solid black !important;
        padding-bottom: 4px !important;
    }
    
    /* Paragraph and text styling */
    .modal-paragraph,
    p {
        color: black !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* Strong/bold text */
    strong, b {
        color: black !important;
        font-weight: bold !important;
    }
    
    /* Links for print */
    a {
        color: black !important;
        text-decoration: underline !important;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-modal {
        width: 95vw;
        height: 90vh;
        margin: 20px;
    }
    
    .admin-modal .admin-tabs {
        flex-wrap: wrap;
        padding: 12px 16px 0 16px;
    }
    
    .admin-modal .admin-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .admin-modal .admin-tab.active {
        padding-bottom: 11px;
    }
    
    .admin-modal .admin-tab-content.active {
        padding: 16px;
    }
    
    .content-source {
        text-align: center;
        margin: 8px 0;
        padding: 4px 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        border: 1px solid var(--border-light);
    }
    
    .content-source small {
        color: var(--text-muted);
        font-size: 11px;
    }
    
    .content-source i {
        margin-right: 4px;
        color: var(--theme-primary);
    }
    
    .about-ai-content {
        padding: 16px;
    }
    
    .ai-content {
        margin-top: 16px;
    }
    
    [data-theme="dark"] .content-source {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }
    
    .section-subtitle {
        color: var(--text-secondary);
        font-size: 14px;
        margin-bottom: 20px;
        font-style: italic;
    }
    
    .advisors-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
    
    .leader.advisor {
        background: var(--bg-secondary);
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--border-light);
    }
    
    .leader.advisor h4 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .leader.advisor .title {
        font-size: 12px;
        line-height: 1.3;
    }
    
    [data-theme="dark"] .leader.advisor {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }
    
    /* Admin Items Styling */
    .admin-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 16px;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        margin-bottom: 12px;
        background: var(--bg-secondary);
    }
    
    .item-info {
        flex: 1;
        margin-right: 16px;
    }
    
    .item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .item-header i {
        color: var(--theme-primary);
        width: 16px;
    }
    
    .item-header h6 {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        flex: 1;
    }
    
    .item-type, .item-category {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
    }
    
    .usage-count {
        background: var(--editor-success);
        color: var(--theme-action-text);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
    }
    
    .item-description {
        color: var(--text-secondary);
        font-size: 14px;
        margin: 4px 0;
        line-height: 1.4;
    }
    
    .item-url {
        color: var(--theme-primary);
        font-size: 12px;
        font-family: monospace;
        margin: 4px 0;
        word-break: break-all;
    }
    
    .item-prompt {
        color: var(--text-muted);
        font-size: 13px;
        font-style: italic;
        margin: 4px 0;
        line-height: 1.3;
    }
    
    .item-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }
    
    .admin-btn {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-light);
        color: var(--text-secondary);
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .admin-btn:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
    
    .admin-btn.edit {
        color: var(--theme-primary);
    }
    
    .admin-btn.edit:hover {
        background: rgba(37, 99, 235, 0.1);
    }
    
    .admin-btn.delete {
        color: #ef4444;
    }
    
    .admin-btn.delete:hover {
        background: rgba(239, 68, 68, 0.1);
    }
    
    .admin-btn.test {
        color: var(--editor-success);
    }
    
    .admin-btn.test:hover {
        background: rgba(16, 185, 129, 0.1);
    }
    
    .no-items {
        text-align: center;
        color: var(--text-muted);
        font-style: italic;
        padding: 40px 20px;
    }
    
    .admin-actions {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .favorite-form, .prompt-form {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-light);
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }
    
    .favorite-form h6, .prompt-form h6 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 16px 0;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 8px;
    }
    
    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        justify-content: flex-end;
    }
    
    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: auto;
        margin: 0;
    }
    
    .checkbox-group label {
        font-size: 14px;
        color: var(--text-secondary);
        cursor: pointer;
        margin: 0;
    }
    
    /* Icon selector styling */
    select optgroup {
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-secondary);
        padding: 8px 0 4px 0;
        margin-top: 8px;
    }
    
    select optgroup:first-of-type {
        margin-top: 0;
    }
    
    select option {
        padding: 6px 12px;
        color: var(--text-primary) !important;
        background: var(--bg-primary) !important;
    }
    
    select option:hover {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }
    
    select option:checked {
        background: var(--theme-primary) !important;
        color: var(--theme-action-text) !important;
    }
    
    [data-theme="dark"] select optgroup {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] select option {
        background: var(--bg-primary);
        color: var(--text-secondary);
    }
    
    /* Privacy Notice Styling */
    .privacy-notice {
        margin-top: 16px;
        padding: 12px;
        background: var(--bg-secondary);
        border-radius: 6px;
        border: 1px solid var(--border-light);
    }
    
    .privacy-notice p {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-secondary);
    }
    
    .privacy-notice a {
        color: var(--editor-primary);
        text-decoration: none;
        font-weight: 500;
    }
    
    .privacy-notice a:visited {
        color: var(--editor-primary);
    }
    
    .privacy-notice a:hover {
        text-decoration: underline;
        color: var(--theme-primary);
    }
    
    [data-theme="dark"] .privacy-notice {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }
    
    [data-theme="dark"] .privacy-notice a {
        color: var(--editor-primary);
    }
    
    [data-theme="dark"] .privacy-notice a:visited {
        color: var(--editor-primary);
    }
    
    [data-theme="dark"] .privacy-notice a:hover {
        color: var(--editor-success);
    }
    
    /* Dark theme admin items */
    [data-theme="dark"] .admin-item {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
    }
    
    [data-theme="dark"] .item-type, 
    [data-theme="dark"] .item-category {
        background: var(--bg-primary);
        color: var(--text-secondary);
    }
    
    [data-theme="dark"] .favorite-form, 
    [data-theme="dark"] .prompt-form {
        background: var(--bg-primary);
        border-color: var(--border-medium);
    }
    
    /* Sortable/Drag-and-Drop Styling */
    .sortable-list {
        position: relative;
    }
    
    .admin-item {
        cursor: move;
        transition: all 0.2s ease;
        position: relative;
    }
    
    .admin-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .admin-item.dragging {
        opacity: 0.5;
        transform: rotate(2deg);
        z-index: 1000;
    }
    
    .admin-item.drag-over {
        border-top: 3px solid var(--theme-primary);
    }
    
    .drag-handle {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        cursor: grab;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .admin-item:hover .drag-handle {
        opacity: 1;
    }
    
    .drag-handle:active {
        cursor: grabbing;
    }
    
    .sort-indicator {
        position: absolute;
        right: 8px;
        top: 8px;
        background: var(--bg-tertiary);
        color: var(--text-muted);
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 12px;
        font-weight: 500;
    }
    
    /* Dark theme drag styling */
    [data-theme="dark"] .admin-item.drag-over {
        border-top-color: var(--editor-primary);
    }
    
    [data-theme="dark"] .sort-indicator {
        background: var(--bg-primary);
    }
    
    .nav-center {
        display: none;
    }
    
    /* Mobile Sidebar - Improved with scrolling and browser UI accommodation */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0; /* Start from top on mobile - menu header replaces nav header */
        height: 100vh;
        height: 100dvh; /* Modern viewport unit */
        z-index: 1500;
        box-shadow: var(--shadow-lg);
        width: 280px;
        background: var(--bg-primary);
        display: flex;
        flex-direction: column;
    }
    
    .sidebar.open {
        left: 0;
        transform: translateX(0);
    }
    
    /* Mobile Sidebar Header - matches simple mobile menu */
    .sidebar-mobile-header {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--border-light);
        background: var(--bg-secondary);
        flex-shrink: 0;
    }
    
    .sidebar-mobile-close {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border: none;
        background: transparent;
        color: var(--text-primary);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: background 0.15s;
    }
    
    .sidebar-mobile-close:hover {
        background: var(--hover-bg);
    }
    
    .sidebar-mobile-title {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-primary);
    }
    
    /* Hide internal toggle on mobile (use mobile header instead) */
    .sidebar-internal-toggle {
        display: none !important;
    }
    
    /* Adjust sidebar content for mobile header */
    .sidebar-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 0;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }
    
    /* Simple scrollable sidebar content */
    .sidebar-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 0;
        padding-bottom: calc(100px + env(safe-area-inset-bottom)); /* Increased padding + safe area for modern phones */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        height: calc(100vh - var(--header-height) - env(safe-area-inset-bottom)); /* Account for safe areas and browser UI */
    }
    
    /* Hide original footer completely on mobile */
    .sidebar-footer {
        display: none !important;
    }
}

/* Additional mobile device targeting via JavaScript class */
.mobile-device .sidebar-footer {
    display: none !important;
}


/* Continue mobile styles */
@media screen and (max-width: 768px),
@media screen and (max-device-width: 768px),
@media screen and (max-width: 768px) and (orientation: portrait),
@media screen and (max-width: 768px) and (orientation: landscape),
@media (hover: none) and (pointer: coarse) {
    
    /* Mobile Accordion Menu Styling */
    .accordion-header {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }
    
    .accordion-header:hover {
        background: var(--hover-bg);
    }
    
    
    
    
    
    /* Remove highlighting on mobile menu items */
    .chat-item,
    .mobile-link,
    .mobile-section-header {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        outline: none !important;
    }
    
    /* Additional bottom clearance for different mobile browsers */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .sidebar-content {
            padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important; /* Extra clearance for browsers with larger UI */
        }
    }
    

}

/* Desktop - Ensure accordion styles don't interfere with normal menu (exclude tablets) */
@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .accordion-header {
        cursor: default !important;
        padding: 20px !important;
    }
    
    .accordion-header:hover {
        background: none !important;
    }
    
    .accordion-icon {
        display: none !important;
    }
    
    .accordion-content {
        display: block !important;
    }
    
    .accordion-section[data-section-id="quick-links"],
    .accordion-section[data-section-id="settings"] {
        display: none !important;
    }
    
    /* Restore highlighting behavior on desktop */
    .chat-item:hover,
    .quick-link:hover,
    .accordion-header:hover {
        background: var(--hover-bg) !important;
    }
    
    /* Restore user selection on desktop */
    .chat-item,
    .quick-link,
    .accordion-header {
        -webkit-user-select: text;
        user-select: text;
    }
}

/* Continue mobile styles - Enhanced mobile detection */
@media screen and (max-width: 768px),
@media screen and (max-device-width: 768px),
@media screen and (max-width: 768px) and (orientation: portrait),
@media screen and (max-width: 768px) and (orientation: landscape),
@media (hover: none) and (pointer: coarse) {
    .main-content {
        margin-left: 0;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        overflow-x: hidden;  /* Prevent horizontal scroll */
        max-width: 100vw;
    }
    
    .chat-container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;  /* Prevent horizontal scroll */
        box-sizing: border-box;
    }
    
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;  /* Prevent horizontal scroll */
        padding-bottom: 100px; /* Extra space for fixed input */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1400;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .sidebar.open + .sidebar-overlay,
    .sidebar.open ~ .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    
    /* Improved mobile sections with reduced spacing */
    .sidebar-section {
        margin-bottom: 12px;
    }
    
    .section-header {
        padding: 8px 16px 4px 16px;
    }
    
    .section-header h4 {
        font-size: 13px;
        margin: 0;
    }
    
    .section-items {
        padding: 0 8px;
    }
    
    /* Reduce padding for Settings section items on mobile */
    [data-section-id="settings"] .section-items {
        padding: 0 8px 8px 8px;
    }
    
    [data-section-id="settings"] {
        margin-bottom: 8px;
    }
    
    .chat-item {
        padding: 8px 16px;
        margin: 1px 8px;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.3;
    }
    
    .chat-item i {
        font-size: 16px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }
    
    /* Always show message actions on mobile */
    .message-actions {
        opacity: 1 !important;
        margin-top: 12px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .message-action-btn {
        flex: 1;
        min-width: 70px;
        justify-content: center;
        font-size: 11px;
        padding: 8px 10px;
    }
    
    .message-action-btn i {
        font-size: 12px;
    }
}

/* Mobile Portrait: Left-justify section headers (Prompt Library, Favorites, Settings) */
@media (max-width: 1180px) and (orientation: portrait) {
    .section-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    
    .section-header h4 {
        text-align: left !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .info-icon {
        flex: 0 0 28px !important;
        align-self: center !important;
        margin-left: auto !important;
    }
}

/* Mobile landscape mode - compact spacing to fit all content */
@media screen and (max-height: 500px) and (orientation: landscape),
       screen and (max-device-height: 500px) and (orientation: landscape) {
    
    /* Reduce all section spacing in landscape */
    .sidebar-section {
        margin-bottom: 4px !important;
    }
    
    [data-section-id="settings"] {
        margin-bottom: 2px !important;
    }
    
    .section-header {
        padding: 4px 12px 2px 12px !important;
    }
    
    .section-header h4 {
        font-size: 12px !important;
    }
    
    .section-items {
        padding: 0 4px !important;
    }
    
    [data-section-id="settings"] .section-items {
        padding: 0 4px 4px 4px !important;
    }
    
    /* Landscape mode uses minimum of visitor setting or 6px for compact layout */
    .chat-item {
        padding: min(var(--visitor-menu-item-padding, 10px), 6px) 12px !important;
        margin: 0px 4px !important;
        font-size: 12px !important;
    }
    
    .chat-item i {
        font-size: 14px !important;
        margin-right: var(--visitor-menu-icon-gap, 8px) !important;
    }
    
    /* Reduce footer profile card in landscape */
    .user-profile-card {
        padding: 6px 8px !important;
    }
    
    .profile-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 14px !important;
    }
    
    .profile-name {
        font-size: 12px !important;
    }
    
    .profile-subtitle {
        font-size: 10px !important;
    }
    
    .profile-dropdown-trigger {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    /* Ensure sidebar content fits in landscape */
    .sidebar-content {
        padding: 4px 0 !important;
    }
}

/* Extra small mobile devices (phones) */
@media (max-width: 480px) {
    /* App title for phones — font-size is set by admin tagline config inline styles */
    .app-title {
        font-weight: 600;
        max-width: 120px;
    }
    
    /* Logo adjustments for phones */
    .logo {
        height: 28px;
        width: auto;
        object-fit: contain;
        max-height: 28px;
    }
    
    /* Sidebar adjustments for phones */
    .sidebar {
        width: 260px; /* Slightly narrower on phones */
    }
    
    .sidebar.open {
        left: 0;
    }
    
    
    
    /* Even more compact menu items for phones - use visitor settings */
    .chat-item {
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
        padding-left: 12px;
        padding-right: 12px;
        margin: 0px 6px;
        font-size: var(--visitor-mobile-menu-font-size, 15px);
    }
    
    .section-header {
        padding-top: var(--visitor-mobile-section-gap, var(--visitor-menu-section-bottom-gap, 10px)) !important;
        padding-bottom: var(--visitor-mobile-section-gap, var(--visitor-menu-section-bottom-gap, 10px)) !important;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .section-header h4 {
        font-size: var(--visitor-mobile-header-font-size, 12px) !important;
    }
    
    /* Adjust sidebar content spacing for phones */
    .sidebar-content {
        padding: 8px 0; /* Reduced top/bottom padding */
    }
    
    /* Chat input adjustments for phones */
    .chat-input-container {
        padding: 8px 12px;
    }
    
    .chat-input-wrapper {
        padding: 10px;
        border-radius: 20px;
    }

    .voice-btn {
        font-size: 13px;
        padding: 3px 6px;
        min-width: 28px;
        min-height: 18px;
    }
    
    .send-button {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    
    .send-button i {
        font-size: 14px;
    }
    
    /* Message adjustments for phones */
    .message {
        gap: 12px;
    }
    
    .message-avatar {
        width: 30px;
        height: 30px;
    }
    
    /* Generic message content sizing (applies to all messages) */
    .message-content {
        font-size: 14px;
    }
    
    /* User message padding for phones */
    .user-message .message-content {
        padding: 12px;
    }
    
    /* Assistant message - preserve bubble styling with adjusted padding */
    .assistant-message .message-content {
        padding: 12px !important;
        /* Explicitly preserve bubble styling on smallest screens */
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
    
    /* Dark theme assistant message bubble on phones */
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
    
    /* Touch-friendly interactions - min-height controlled by admin padding settings */
    /* Apple recommends 44px touch targets, admins can configure via Mobile Overrides */
    
    .footer-button {
        min-height: 44px;
    }
    
    /* Phone-specific message actions */
    .message-actions {
        opacity: 1 !important;
        margin-top: 10px;
        gap: 4px;
    }
    
    .message-action-btn {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 10px;
        min-width: 60px;
        flex: 1;
    }
    
    .message-action-btn i {
        font-size: 11px;
    }
    
    /* Welcome message dismiss button - compact, left-aligned with chat bubble */
    .welcome-message .message-actions {
        justify-content: flex-start;
    }
    
    .welcome-message .message-action-btn {
        flex: 0 0 auto;
        min-width: 85px;
        max-width: 110px;
        padding: 7px 14px;
        font-size: 11px;
    }
    
    /* Mobile diagram adjustments */
    .diagram-section {
        margin: 12px 0;
        padding: 12px;
        padding-top: 24px; /* Make room for button on border */
    }
    
    /* Move expand button to outer border corner on mobile for diagrams */
    .diagram-section .diagram-expand-btn {
        top: -12px;
        right: -6px;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .diagram-container {
        padding: 10px;
        min-height: 80px;
    }

    .mermaid-diagram svg text {
        font-size: 12px !important;
    }

    .mermaid-diagram svg .node text {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .diagram-title {
        font-size: 16px;
    }

    .diagram-description {
        font-size: 13px;
    }

    .mermaid-diagram svg {
        max-width: 100%;
        height: auto;
        padding: 10px;
        overflow: visible;
    }
}

/* Mobile-specific improvements for touch */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .chat-item:active {
        background: var(--hover-bg);
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
    
    .footer-button:active {
        transform: scale(0.95);
        transition: all 0.1s ease;
    }
    
    .global-action-btn:active {
        transform: translateY(0) scale(0.95);
    }
    
    .message-action-btn:active {
        transform: scale(0.95);
        transition: all 0.1s ease;
    }
}

/* Collapsed Sidebar Styles */
.sidebar.collapsed .sidebar-header h3,
.sidebar.collapsed .section-header h4,
.sidebar.collapsed .chat-item span {
    display: none !important;
}

/* Desktop collapsed: vertical column of centered icons */
.sidebar.collapsed .sidebar-social-icons {
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
}

.sidebar.collapsed .social-icon-btn.in-sidebar {
    width: 32px;
    height: 32px;
    border-radius: var(--social-icon-radius, 50%);
    padding: 0;
    font-size: 15px;
}

/* MOBILE OVERRIDE: On mobile screens, collapsed sidebar should NOT hide text
   This ensures section headers like "Prompt Library" and "Favorites" are visible
   even if the collapsed class is accidentally applied on mobile.
   Uses 1024px breakpoint to match JavaScript detectMobileDevice() which also uses 1024px.
   Applies to standard, widget, and embed modes. */
@media (max-width: 1024px) {
    /* Standard mode: restore text visibility - use explicit display values */
    .sidebar.collapsed .sidebar-header h3,
    .sidebar.collapsed .section-header h4,
    .sidebar.collapsed .section-title {
        display: block !important;
    }
    
    .sidebar.collapsed .chat-item span,
    .sidebar.collapsed .menu-divider-header span {
        display: inline !important;
    }
    
    /* Widget mode: restore text visibility (higher specificity) */
    html.widget-mode .sidebar.collapsed .sidebar-header h3,
    html.widget-mode .sidebar.collapsed .section-header h4,
    html.widget-mode .sidebar.collapsed .section-title {
        display: block !important;
    }
    
    html.widget-mode .sidebar.collapsed .chat-item span,
    html.widget-mode .sidebar.collapsed .menu-divider-header span,
    html.widget-mode .sidebar.collapsed .nav-text,
    html.widget-mode .sidebar.collapsed .sidebar-footer-text,
    html.widget-mode .sidebar.collapsed .user-name,
    html.widget-mode .sidebar.collapsed .user-email,
    html.widget-mode .sidebar.collapsed .section-header span {
        display: inline !important;
    }
    
    /* Embed mode: restore text visibility (higher specificity) */
    html.embed-mode .sidebar.collapsed .sidebar-header h3,
    html.embed-mode .sidebar.collapsed .section-header h4,
    html.embed-mode .sidebar.collapsed .section-title {
        display: block !important;
    }
    
    html.embed-mode .sidebar.collapsed .chat-item span,
    html.embed-mode .sidebar.collapsed .menu-divider-header span {
        display: inline !important;
    }
    
    /* Reset collapsed sidebar layout for mobile - show full content */
    .sidebar.collapsed .section-header,
    .sidebar.collapsed .sidebar-header,
    html.widget-mode .sidebar.collapsed .section-header,
    html.widget-mode .sidebar.collapsed .sidebar-header,
    html.embed-mode .sidebar.collapsed .section-header,
    html.embed-mode .sidebar.collapsed .sidebar-header {
        justify-content: flex-start !important;
    }
    
    .sidebar.collapsed .chat-item,
    html.widget-mode .sidebar.collapsed .chat-item,
    html.embed-mode .sidebar.collapsed .chat-item {
        justify-content: flex-start !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Menu dividers should show text on mobile */
    .sidebar.collapsed .menu-divider-header,
    html.widget-mode .sidebar.collapsed .menu-divider-header,
    html.embed-mode .sidebar.collapsed .menu-divider-header {
        padding: 12px 14px !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 44px !important;
        background: transparent !important;
        cursor: pointer !important;
        gap: 8px !important;
    }
    
    .sidebar.collapsed .menu-divider-header i:first-child,
    html.widget-mode .sidebar.collapsed .menu-divider-header i:first-child,
    html.embed-mode .sidebar.collapsed .menu-divider-header i:first-child {
        display: flex !important;
    }
    
    .sidebar.collapsed .menu-divider-header .menu-chevron,
    html.widget-mode .sidebar.collapsed .menu-divider-header .menu-chevron,
    html.embed-mode .sidebar.collapsed .menu-divider-header .menu-chevron {
        display: flex !important;
    }

    /* Social icons: reset to horizontal footer on mobile (sidebar.collapsed is overlay on mobile) */
    .sidebar-social-icons,
    .sidebar.collapsed .sidebar-social-icons,
    html.widget-mode .sidebar.collapsed .sidebar-social-icons,
    html.embed-mode .sidebar.collapsed .sidebar-social-icons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        border-top: 1px solid var(--border-light) !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .social-icon-btn.in-sidebar,
    .sidebar.collapsed .social-icon-btn.in-sidebar,
    html.widget-mode .sidebar.collapsed .social-icon-btn.in-sidebar,
    html.embed-mode .sidebar.collapsed .social-icon-btn.in-sidebar {
        width: 36px !important;
        height: 36px !important;
        border-radius: var(--social-icon-radius, 50%) !important;
        padding: 0 !important;
        font-size: 16px !important;
    }
}

.sidebar.collapsed .chat-item {
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}

.sidebar.collapsed .section-header,
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 12px 0;
}

.sidebar.collapsed .remove-section,
.sidebar.collapsed .add-section-btn {
    display: none;
}

.sidebar.collapsed .mobile-action-buttons {
    display: none !important;
}

/* ===== COLLAPSED SIDEBAR: Submenu-Based Navigation ===== */
/* Show all items with icons, dividers have submenu flyouts */

/* Section items visible when collapsed */
.sidebar.collapsed .section-items {
    display: block !important;
}

/* Menu items in collapsed mode - icon only, centered */
.sidebar.collapsed .chat-item {
    justify-content: center !important;
    padding: 10px 0 !important;
}

.sidebar.collapsed .chat-item span {
    display: none !important;
}

.sidebar.collapsed .chat-item i {
    font-size: 16px;
    margin: 0 !important;
}

/* ===== DIVIDERS IN COLLAPSED MODE ===== */
/* Dividers become submenu triggers with play triangle arrow */

.sidebar.collapsed .menu-divider-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 6px !important;
    cursor: pointer !important;
    gap: 4px !important;
}

/* Hide divider text */
.sidebar.collapsed .menu-divider-header span {
    display: none !important;
}

/* Show folder icon */
.sidebar.collapsed .menu-divider-header i:first-child {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Replace chevron with play triangle - always right-facing */
.sidebar.collapsed .menu-divider-header .menu-chevron {
    display: inline-flex !important;
    font-size: 10px !important;
    margin-left: 2px !important;
    color: var(--text-muted);
    transition: color 0.15s ease;
    /* Override any rotation from expanded state */
    transform: none !important;
}

/* Override the chevron icon to be a caret/triangle - always right */
.sidebar.collapsed .menu-divider-header .menu-chevron::before {
    content: "\f0da" !important; /* fa-caret-right (solid triangle) */
}

/* Ensure no rotation happens in collapsed mode */
.sidebar.collapsed .menu-divider.expanded .menu-chevron {
    transform: none !important;
}

/* Hide divider nested content - shown in submenu instead */
.sidebar.collapsed .menu-divider-content {
    display: none !important;
}

/* Divider hover state */
.sidebar.collapsed .menu-divider-header:hover {
    background: var(--hover-bg) !important;
}

.sidebar.collapsed .menu-divider-header:hover .menu-chevron {
    color: var(--text-secondary);
}

/* Active divider (submenu open) */
.sidebar.collapsed .menu-divider-header.submenu-active {
    background: var(--hover-bg) !important;
}

.sidebar.collapsed .menu-divider-header.submenu-active .menu-chevron {
    color: var(--theme-primary);
}

/* Section divider lines - removed for cleaner collapsed look */
/* .sidebar.collapsed .sidebar-section:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--border-light);
    margin: 8px 10px;
} */

/* ===== SUBMENU FLYOUT (Small popover) ===== */
.sidebar-submenu {
    position: fixed;
    left: var(--sidebar-collapsed-width, 60px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    min-width: 260px;
    max-width: min(340px, calc(100vw - var(--sidebar-collapsed-width, 60px) - 24px));
    max-height: 300px;
    overflow-y: auto;
    transform: translateX(-5px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0.15s ease;
    padding: 6px;
}

.sidebar-submenu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Submenu header (folder name) - aligned with arrow */
.sidebar-submenu-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
    margin-left: 30px; /* Align with item icons/text */
    margin-right: 12px;
    padding-left: 0;
}

/* Submenu items */
.sidebar-submenu .submenu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-secondary);
    gap: 10px;
    font-size: 13px;
}

.sidebar-submenu .submenu-item:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.sidebar-submenu .submenu-item i {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-light);
}

.sidebar-submenu .submenu-item:hover i {
    color: var(--text-secondary);
}

.sidebar-submenu .submenu-item span {
    flex: 1;
    min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Dark theme */
[data-theme="dark"] .sidebar-submenu {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.4);
}

/* Submenu flyout scrollbar — auto-hide like sidebar (Chrome/Edge on Windows shows always otherwise) */
.sidebar-submenu {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.sidebar-submenu:hover {
    scrollbar-color: var(--border-medium) transparent;
}
.sidebar-submenu::-webkit-scrollbar {
    width: 5px;
}
.sidebar-submenu::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-submenu::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.sidebar-submenu:hover::-webkit-scrollbar-thumb {
    background: var(--border-medium);
}

/* Widget/Embed mode: Ensure submenu appears above sidebar and other elements */
/* Fix for collapsed sidebar submenus not showing in widget/embed large format */
html.widget-mode .sidebar-submenu,
html.embed-mode .sidebar-submenu {
    z-index: 10000 !important; /* High enough to be above everything in widget/embed */
}

/* Footer button collapsed styles - applies to both <a> and <button> elements */
.sidebar.collapsed .footer-button {
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto 8px auto;
    text-align: center;
    display: flex;
}

.sidebar.collapsed .footer-button span {
    display: none;
}

.sidebar.collapsed .footer-button i {
    margin: 0;
    width: auto;
    text-align: center;
}

/* Collapsed sidebar: Profile card shows avatar only, no chevron */
.sidebar.collapsed .user-profile-card {
    justify-content: center;
    padding: 12px 0;
}

.sidebar.collapsed .profile-main {
    justify-content: center;
}

.sidebar.collapsed .profile-info {
    display: none;
}

.sidebar.collapsed .profile-dropdown-trigger {
    display: none !important;
}

.sidebar.collapsed .profile-avatar {
    cursor: pointer;
}

/* Collapsed sidebar: Show tooltips on hover for menu items (desktop only) */
.sidebar.collapsed .chat-item {
    position: relative;
}

.sidebar.collapsed .chat-item:hover::after {
    content: attr(title);
    position: fixed;
    left: calc(var(--sidebar-collapsed-width) + 12px);
    top: var(--tooltip-top, 50%);
    transform: translateY(-50%);
    background: var(--bg-dark);
    color: var(--theme-action-text);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

/* Tooltip arrow pointing left */
.sidebar.collapsed .chat-item:hover::before {
    content: '';
    position: fixed;
    left: var(--sidebar-collapsed-width);
    top: var(--tooltip-top, 50%);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--bg-dark);
    pointer-events: none;
    z-index: 10001;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

/* Dark theme tooltips */
[data-theme="dark"] .sidebar.collapsed .chat-item:hover::after {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .sidebar.collapsed .chat-item:hover::before {
    border-right-color: var(--bg-tertiary);
}

/* Collapsed sidebar: Show tooltips on hover for divider headers (desktop only) */
.sidebar.collapsed .menu-divider-header {
    position: relative;
}

.sidebar.collapsed .menu-divider-header:hover::after {
    content: attr(title);
    position: fixed;
    left: calc(var(--sidebar-collapsed-width) + 12px);
    top: var(--tooltip-top, 50%);
    transform: translateY(-50%);
    background: var(--bg-dark);
    color: var(--theme-action-text);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

.sidebar.collapsed .menu-divider-header:hover::before {
    content: '';
    position: fixed;
    left: var(--sidebar-collapsed-width);
    top: var(--tooltip-top, 50%);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--bg-dark);
    pointer-events: none;
    z-index: 10001;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

[data-theme="dark"] .sidebar.collapsed .menu-divider-header:hover::after {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .sidebar.collapsed .menu-divider-header:hover::before {
    border-right-color: var(--bg-tertiary);
}

/* Hide tooltips on mobile (sidebar expands, no need for tooltips) */
@media (max-width: 768px) {
    .sidebar.collapsed .chat-item:hover::after,
    .sidebar.collapsed .chat-item:hover::before,
    .sidebar.collapsed .menu-divider-header:hover::after,
    .sidebar.collapsed .menu-divider-header:hover::before {
        display: none !important;
    }
}

/* Scrollbar Styling */
.sidebar-content::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* Sidebar scrollbar - auto-hide (transparent until hover) */
.sidebar-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s ease;
}

.sidebar-content:hover::-webkit-scrollbar-thumb {
    background: var(--border-medium);
}

.sidebar-content:hover::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Chat messages scrollbar - always visible */
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Messages appear instantly without animation */

/* Streaming preview — live text shown in typing indicator during LLM generation */

/* Override the implicit overflow-y:auto caused by overflow-x:hidden on .message-content.
   Without this, the browser creates a scroll container inside the bubble. */
.typing-message .message-content {
    overflow: visible !important;
}

.streaming-preview {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    padding: 4px 0;
    word-wrap: break-word;
    opacity: 0.85;
    /* v1.0.425 — Paint/layout containment. Tells the browser the
       preview's paint region is self-contained, so any re-layout
       caused by DOM mutation (e.g., the rare innerHTML-replace fallback
       when a partial marker transition breaks the delta-append prefix)
       cannot propagate to the scroll container above (welcome hero) or
       below (typing footer). Zero runtime cost, hardens the v1.0.424
       scroll-thrash fix against any residual jank from future markdown
       transforms that may have transition boundaries. */
    contain: layout paint;
}
.streaming-preview strong {
    font-weight: 600;
}
/* v1.0.425 — Inline code pill. Rendered via `_renderStreamingPart`'s
   backtick transform. Subtle bg, monospace, theme-aware border.
   Designed to match Claude's inline-code rendering so the streaming
   preview's format quality matches the final rendered response. */
.streaming-preview code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    color: var(--text-primary);
    word-break: break-word;
}
[data-theme="dark"] .streaming-preview code {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
@keyframes streamReveal {
    from { opacity: 1; }
    to   { opacity: 1; }
}
.streaming-preview .streaming-line-new {
    animation: none;
    opacity: 1;
}
.streaming-preview .streaming-active {
    opacity: 1;
}
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--theme-primary, #5ba7f7);
    vertical-align: text-bottom;
    margin-left: 2px;
    border-radius: 1px;
    animation: cursorPulse 0.8s ease-in-out infinite;
}
@keyframes cursorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.streaming-preview .streaming-title {
    font-size: 16px;
    margin-bottom: 6px;
}
.streaming-preview .streaming-paragraph {
    margin-bottom: 8px;
}
.streaming-preview .streaming-item {
    margin-bottom: 3px;
    padding-left: 4px;
}
.streaming-preview .streaming-table {
    margin: 10px 0;
}
.streaming-preview .streaming-table-html {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
}
.streaming-preview .streaming-table-html th {
    font-weight: 700;
    text-align: left;
    padding: 7px 12px;
    border-bottom: 2px solid var(--theme-primary, #5ba7f7);
    background: var(--table-first-column-bg, rgba(91, 167, 247, 0.08));
    color: var(--text-primary);
    white-space: nowrap;
}
.streaming-preview .streaming-table-html td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--table-cell-border, rgba(0, 0, 0, 0.06));
    vertical-align: top;
}
.streaming-preview .streaming-table-html tr.alt td {
    background: var(--table-row-even-bg, rgba(0, 0, 0, 0.02));
}
[data-theme="dark"] .streaming-preview .streaming-table-html th {
    background: rgba(91, 167, 247, 0.12);
}
[data-theme="dark"] .streaming-preview .streaming-table-html td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .streaming-preview .streaming-table-html tr.alt td {
    background: rgba(255, 255, 255, 0.03);
}
.streaming-preview .streaming-table-cards {
    display: none;
}
@media (max-width: 768px) {
    .streaming-preview .streaming-table-grid {
        display: none;
    }
    .streaming-preview .streaming-table-cards {
        display: block;
    }
    .streaming-preview .streaming-table-card {
        background: var(--bg-secondary, #f8f9fa);
        border-radius: 0;
        margin-bottom: 10px;
        padding: 0;
        overflow: hidden;
        box-shadow: none;
        border-bottom: 1px solid var(--table-cell-border, rgba(0, 0, 0, 0.08));
    }
    .streaming-preview .streaming-table-card-row {
        display: block;
        padding: 10px 14px;
        border-bottom: 1px solid var(--table-cell-border, rgba(0,0,0,0.06));
        line-height: 1.45;
    }
    .streaming-preview .streaming-table-card-row:last-child {
        border-bottom: none;
    }
    .streaming-preview .streaming-table-card-row:first-child {
        border-left: 4px solid var(--theme-primary, #5ba7f7);
        background: var(--table-first-column-bg, rgba(91, 167, 247, 0.06));
    }
    .streaming-preview .streaming-table-card-row:first-child .streaming-table-card-value {
        font-weight: 700;
        font-size: 15px;
        color: var(--text-primary);
    }
    .streaming-preview .streaming-table-card-label {
        display: block;
        font-weight: 600;
        color: var(--theme-primary, #5ba7f7);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 3px;
    }
    .streaming-preview .streaming-table-card-value {
        display: block;
        color: var(--text-primary);
        font-weight: 400;
        font-size: 14px;
    }
    [data-theme="dark"] .streaming-preview .streaming-table-card {
        background: var(--bg-secondary, #2d2d30);
        box-shadow: none;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    [data-theme="dark"] .streaming-preview .streaming-table-card-row {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
}
[data-theme="dark"] .streaming-preview {
    color: var(--text-primary, #e5e7eb);
}

/* Streaming footer — status bar with stats + stop button */
.streaming-footer {
    margin-top: 12px;
}
.streaming-footer-divider {
    width: 55%;
    height: 1px;
    margin: 0 auto 0;
    border-radius: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border-color, rgba(0,0,0,0.08)) 20%,
        var(--border-color, rgba(0,0,0,0.08)) 80%,
        transparent 100%
    );
    box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
[data-theme="dark"] .streaming-footer-divider {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.08) 20%,
        rgba(255,255,255,0.08) 80%,
        transparent 100%
    );
    box-shadow: 0 1px 0 rgba(255,255,255,0.03);
}
.streaming-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 4px;
}
.streaming-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.streaming-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.streaming-footer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-primary, #4a90e2);
    white-space: nowrap;
    opacity: 0.9;
}
.streaming-footer-message {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.4;
}
.streaming-footer-tokens {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.streaming-footer-pipe {
    width: 1px;
    height: 14px;
    background: var(--border-color, rgba(0,0,0,0.12));
    flex-shrink: 0;
    opacity: 0.5;
}
[data-theme="dark"] .streaming-footer-pipe {
    background: rgba(255,255,255,0.12);
}
.streaming-stop {
    flex-shrink: 0;
}

/* Mobile: streaming footer adjustments */
@media (max-width: 768px) {
    .streaming-footer-content {
        padding: 7px 6px 3px;
        gap: 8px;
    }
    .streaming-footer-label {
        font-size: 10px;
    }
    .streaming-footer-message {
        font-size: 11.5px;
    }
    .streaming-footer-tokens {
        font-size: 11px;
    }
    .streaming-footer-pipe {
        height: 12px;
    }
}
@media (max-width: 480px) {
    .streaming-footer-content {
        padding: 6px 4px 2px;
        gap: 6px;
    }
    .streaming-footer-label {
        font-size: 9px;
    }
    .streaming-footer-message {
        font-size: 10.5px;
    }
    .streaming-footer-tokens {
        font-size: 10px;
    }
    .streaming-footer-divider {
        width: 45%;
    }
    .streaming-footer-pipe {
        height: 10px;
    }
}

/* Typing indicator styles */
.typing-container {
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start for multi-line support */
    justify-content: space-between;
    padding: 12px 0;
    width: 100%;
    gap: 8px;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: center; /* Vertically center when text wraps */
    flex-shrink: 0;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Small phones - bubble styling */
@media (max-width: 480px) and (orientation: portrait) {
    /* CRITICAL: Force bubble styling in portrait mode (iPhone 16 Pro Max = 430px portrait) */
    .assistant-message .message-content {
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-left: 8px !important;
        border-left: 3px solid var(--theme-primary) !important;
        overflow-x: visible !important;
    }
    
    [data-theme="dark"] .assistant-message .message-content {
        background: var(--chat-assistant-bg) !important;
        border-left: 3px solid var(--theme-primary) !important;
    }
    
    /* Hide Forward button on mobile portrait to fit 4 buttons: Copy, Email, Print/PDF, Link */
    .message-actions .forward-btn {
        display: none !important;
    }
}

/* ========================================
   IN-CHAT CAMPAIGN RESPONSIVE STYLES
   ======================================== */

/* Base styles for campaign-embedded - ensure it fits within parent at ALL sizes */
.campaign-embedded {
    max-width: 100% !important;
    width: calc(100% - 1px) !important; /* Force width calculation */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Clip any overflow */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Fix flex children not shrinking - CRITICAL for preventing overflow */
.campaign-embedded > div:first-child {
    min-width: 0 !important; /* Allow flex children to shrink below content size */
    max-width: 100% !important;
    width: 100% !important;
}

/* The flex:1 content area needs min-width:0 to shrink properly */
.campaign-embedded > div:first-child > div:last-child {
    min-width: 0 !important;
    /* NO max-width on desktop - let content flow naturally */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* All direct children of the content area */
.campaign-embedded > div:first-child > div:last-child > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Form inputs must not exceed container */
.campaign-embedded input,
.campaign-embedded textarea,
.campaign-embedded select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Legal footer text wrapping */
.campaign-embedded .legal-footer-text,
.campaign-embedded .legal-footer-checkbox-label {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Button containers - prevent overflow */
.campaign-embedded div[style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Iframe embed flipbooks - responsive at ALL viewport sizes */
.campaign-embedded .campaign-flipbook-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.campaign-embedded .campaign-flipbook-container iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Campaign media centering wrapper - flexbox centering for video/flipbook */
.campaign-media-center {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Campaign video and flipbook containers - center within campaign cards */
.campaign-video-container,
.campaign-flipbook-container {
    display: block !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

/* Mobile: Force all campaign media to fit container */
@media (max-width: 600px) {
    .campaign-media-center,
    .campaign-video-container,
    .campaign-flipbook-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .campaign-video-container video,
    .campaign-flipbook-container iframe {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force inline width styles to respect container */
    .campaign-flipbook-container[style*="width"],
    .campaign-video-container[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Enforce configured width based on data-display-size attribute */
.campaign-flipbook-container[data-display-size="small"] {
    width: 300px !important;
    max-width: 100% !important;
}

.campaign-flipbook-container[data-display-size="medium"] {
    width: 500px !important;
    max-width: 100% !important;
}

.campaign-flipbook-container[data-display-size="large"] {
    width: 700px !important;
    max-width: 100% !important;
}

.campaign-flipbook-container[data-display-size="full"] {
    width: 100% !important;
    max-width: none !important; /* Full width means no max constraint */
}

/* Full-width media should break out to full campaign card width (like forms do) */
/* This uses negative margin to extend past the icon column */

/* When media container has full-width item inside, expand to full card width */
/* Uses !important to override base .campaign-media-center rule */
/* Only applies on desktop (>768px) - mobile keeps content constrained */
/* Negative margins only when icon is present (.has-icon) to break out past icon column */
@media (min-width: 769px) {
    /* Class-based approach (reliable) */
    .campaign-embedded.has-icon .campaign-media-center.media-full-width {
        margin-left: -60px !important; /* icon (44px) + gap (16px) */
        width: calc(100% + 60px) !important;
        max-width: calc(100% + 60px) !important;
    }
    
    /* :has() approach (modern browsers fallback) */
    .campaign-embedded.has-icon .campaign-media-center:has([data-display-size="full"]) {
        margin-left: -60px !important;
        width: calc(100% + 60px) !important;
        max-width: calc(100% + 60px) !important;
    }
    
    /* Forms break out to full campaign card width - left-justified */
    .campaign-embedded.has-icon form,
    .campaign-embedded.has-icon form + div,
    .campaign-embedded.has-icon .campaign-scheduling-info-message {
        margin-left: -60px !important; /* icon (44px) + gap (16px) */
        width: calc(100% + 60px) !important;
        max-width: calc(100% + 60px) !important;
    }
}

/* Also apply directly to video/flipbook containers with full display size */
.campaign-video-container[data-display-size="full"],
.campaign-flipbook-container[data-display-size="full"] {
    width: 100% !important;
}

/* Also support when displaySize is undefined - default to medium */
.campaign-flipbook-container:not([data-display-size]),
.campaign-flipbook-container[data-display-size=""],
.campaign-flipbook-container[data-display-size="undefined"] {
    width: 500px !important;
    max-width: 100% !important;
}

/* Mobile responsiveness for embedded campaigns */
@media (max-width: 768px) {
    .campaign-embedded {
        padding: 12px !important;
        margin: 16px 0 !important;
        width: calc(100% - 2px) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Prevent content from spilling out */
    }
    
    /* Tighter content area on mobile - account for smaller icon (only when icon present) */
    .campaign-embedded.has-icon > div:first-child > div:last-child {
        max-width: calc(100% - 52px) !important; /* icon (36px) + gap (10px) + buffer */
    }
    
    /* Ensure all inner content respects container bounds */
    .campaign-embedded * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Legal text - ensure wrapping */
    .campaign-embedded .legal-footer-text,
    .campaign-embedded .legal-footer-checkbox-label span,
    .campaign-embedded p[style*="By submitting"],
    .campaign-embedded label {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Flipbook slideshow responsive */
    .campaign-embedded .chat-flipbook-slideshow,
    .campaign-embedded .flipbook-slideshow,
    .campaign-embedded .campaign-flipbook-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .campaign-embedded .chat-flipbook-slideshow img,
    .campaign-embedded .flipbook-slideshow img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Video responsive */
    .campaign-embedded video,
    .campaign-embedded .campaign-video-container video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* Iframe embeds responsive (for flipbook embeds like Cryptix, Framer, etc.) */
    .campaign-embedded iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 300px !important; /* Ensure minimum visible height */
    }
    
    /* Campaign flipbook container with iframe - FORCE responsive */
    .campaign-embedded .campaign-flipbook-container,
    .campaign-embedded .campaign-flipbook-container[style],
    .campaign-embedded .campaign-flipbook-container[data-display-size] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Inner div of flipbook container */
    .campaign-embedded .campaign-flipbook-container > div,
    .campaign-embedded .campaign-flipbook-container > div[style] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* The iframe itself - override inline styles */
    .campaign-embedded .campaign-flipbook-container iframe,
    .campaign-embedded .campaign-flipbook-container iframe[style] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Icon and content side by side with wrapping - only when icon present */
    .campaign-embedded.has-icon > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    /* Smaller icon on mobile */
    .campaign-embedded.has-icon > div:first-child > div:first-child {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
    }
    
    .campaign-embedded.has-icon > div:first-child > div:first-child i {
        font-size: 16px !important;
    }
    
    /* Content area - sits next to icon, children can expand full width */
    .campaign-embedded.has-icon > div:first-child > div:last-child {
        flex: 1 1 calc(100% - 50px) !important;
        min-width: calc(100% - 50px) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Title row - ensure min-height matches icon for single-line titles */
    .campaign-embedded.has-icon > div:first-child > div:last-child > div:first-child {
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 4px !important;
    }
    
    /* Content below title - break out to full card width on mobile */
    /* Uses negative margin to extend past the icon column - only when icon present */
    .campaign-embedded.has-icon > div:first-child > div:last-child > p,
    .campaign-embedded.has-icon > div:first-child > div:last-child > form,
    .campaign-embedded.has-icon > div:first-child > div:last-child > div:not(:first-child):not(.campaign-title),
    .campaign-embedded.has-icon > div:first-child > div:last-child > .campaign-media-center,
    .campaign-embedded.has-icon > div:first-child > div:last-child > .campaign-scheduling-info-message {
        margin-left: -46px !important; /* icon (36px) + gap (10px) */
        width: calc(100% + 46px) !important;
        max-width: calc(100% + 46px) !important;
    }
    
    /* Media center wrapper - full width left-aligned */
    .campaign-embedded .campaign-media-center {
        margin-right: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Video and flipbook containers - left-aligned on mobile */
    .campaign-embedded .campaign-video-container,
    .campaign-embedded .campaign-flipbook-container {
        margin-left: 0 !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    /* Add vertical spacing for description text after title */
    .campaign-embedded > div:first-child > div:last-child p[style*="margin: 0"],
    .campaign-embedded > div:first-child > div:last-child > p,
    .campaign-embedded > div:first-child > div:last-child > div[style*="flex: 1"] > p {
        margin-top: 12px !important;
    }
    
    /* Ensure images don't overflow */
    .campaign-embedded img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Form inputs full width on mobile */
    .campaign-embedded form input,
    .campaign-embedded form textarea,
    .campaign-embedded form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Button container - reset margins and center */
    .campaign-embedded form + div,
    .campaign-embedded div[style*="display: flex"][style*="gap"] {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        margin-top: 8px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* CTA buttons - equal width, smaller font, allow 2-line wrap */
    .campaign-embedded button[type="submit"],
    .campaign-embedded .cta-button,
    .campaign-embedded .modal-btn,
    .campaign-embedded .campaign-cta-btn,
    .campaign-embedded button[onclick*="dismiss"],
    .campaign-embedded a.campaign-cta-btn,
    .campaign-embedded button[style*="padding"],
    .campaign-embedded a[style*="padding"] {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: 48% !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 36px !important;
    }
    
    /* Button container - ensure flex layout for side-by-side buttons */
    .campaign-embedded div[style*="display: flex"][style*="gap"] {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    
    /* Legal footer in campaign forms - ensure proper width inheritance */
    .campaign-embedded .campaign-legal-footer,
    .campaign-embedded .legal-footer-container,
    .campaign-embedded .legal-footer-text,
    .campaign-embedded .legal-footer-checkbox,
    .campaign-embedded .legal-footer-checkbox-label {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .campaign-embedded .legal-footer-checkbox-label {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .campaign-embedded .legal-footer-checkbox-label input[type="checkbox"] {
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
        margin-top: 2px !important;
    }
    
    .campaign-embedded .legal-footer-checkbox-label span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .campaign-embedded {
        padding: 10px 8px !important;
        margin: 12px 0 !important;
        overflow: hidden !important;
    }
    
    /* Tighter constraints on very small screens */
    .campaign-embedded .chat-flipbook-slideshow,
    .campaign-embedded .flipbook-slideshow,
    .campaign-embedded .campaign-flipbook-container,
    .campaign-embedded .campaign-video-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .campaign-embedded > div:first-child > div:first-child {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    .campaign-embedded > div:first-child > div:first-child i {
        font-size: 14px !important;
    }
    
    /* Title row - match smaller icon height */
    .campaign-embedded > div:first-child > div:last-child > div:first-child {
        min-height: 32px !important;
    }
    
    /* Even smaller buttons on extra small screens */
    .campaign-embedded button[type="submit"],
    .campaign-embedded .cta-button,
    .campaign-embedded .modal-btn,
    .campaign-embedded .campaign-cta-btn,
    .campaign-embedded button[onclick*="dismiss"],
    .campaign-embedded a.campaign-cta-btn,
    .campaign-embedded button[style*="padding"],
    .campaign-embedded a[style*="padding"] {
        font-size: 11px !important;
        padding: 6px 6px !important;
        min-height: 32px !important;
    }
}

/* Stop button styling - uses customizable color */
.stop-button {
    background: var(--indicator-stop-button, #ef4444);
    color: var(--theme-action-text);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
    align-self: center; /* Vertically center when text wraps */
}

.stop-button:hover {
    background: #dc2626;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.stop-button:active {
    transform: scale(0.95);
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Loading progress bar (indeterminate animation) - uses customizable colors */
.loading-progress-bar {
    flex: 0 0 100px;
    height: 4px;
    background: var(--indicator-background-color, rgba(74, 144, 226, 0.2));
    border-radius: 2px;
    overflow: hidden;
    margin: 0 12px;
    align-self: center; /* Vertically center when text wraps */
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indicator-progress-color, #11a3f0), var(--indicator-progress-color, #75d1ff));
    animation: indeterminate 1.5s infinite;
    border-radius: 2px;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
        width: 30%;
    }
    50% {
        transform: translateX(50%);
        width: 50%;
    }
    100% {
        transform: translateX(200%);
        width: 30%;
    }
}

/* Loading message text */
.loading-message-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 12px;
    transition: opacity 0.3s ease;
    line-height: 1.4;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    align-self: center; /* Vertically center when single or multi-line */
}

/* Mobile responsiveness for loading messages */
@media (max-width: 768px) {
    .loading-progress-bar {
        flex: 0 0 50px; /* Slightly smaller on mobile */
        margin: 0 8px 0 8px;
        align-self: center; /* Center vertically when text wraps */
    }
    
    .loading-message-text {
        font-size: 12px;
        margin: 0 6px;
        /* Allow wrapping to 2-3 lines on mobile */
        max-height: 3.6em; /* ~3 lines at 1.4 line-height */
        overflow: hidden;
        white-space: normal; /* Override the nowrap from desktop */
    }
    
    .typing-container {
        gap: 6px;
        align-items: flex-start; /* Container aligns to top, children can override */
    }
    
    .typing-dots {
        /* Inherits align-self: center from base style */
    }
    
    .stop-button {
        /* Inherits align-self: center from base style */
    }
}

/* Focus states for accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ========================================
   Collection Edit Modal Styles
   ======================================== */

/* Large modal for collection editing */
.modal-large {
    max-width: 900px;
    width: 90%;
}

/* Collection info section */
.collection-edit-info {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.collection-edit-info h5 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

/* Form row for side-by-side inputs (collection edit only) */
.collection-edit-info .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Icon selector with preview */
.icon-selector-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-preview {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-size: 22px;
    transition: all 0.2s ease;
}

.icon-preview i {
    color: var(--theme-primary-light);
}

.icon-selector-container select {
    flex: 1;
}

/* Collection documents section */
.collection-edit-documents {
    margin-top: 20px;
}

.collection-edit-documents h5 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

/* Collection Documents - Tree View Styling */
.collection-edit-documents {
    margin-top: 16px;
}

.collection-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.collection-docs-header h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.collection-docs-header h5 i {
    color: var(--theme-primary);
}

.collection-docs-summary {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 12px;
}

.collection-docs-hint {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--theme-primary);
}

.collection-docs-hint i {
    margin-right: 6px;
    color: var(--theme-primary);
}

/* Tree Container */
.collection-tree-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
}

.collection-tree-container::-webkit-scrollbar {
    width: 6px;
}

.collection-tree-container::-webkit-scrollbar-track {
    background: transparent;
}

.collection-tree-container::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.collection-tree-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Tree Empty State */
.tree-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.tree-empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.tree-empty-state span {
    font-size: 13px;
}

/* File Node (Parent) */
.tree-file-node {
    border-bottom: 1px solid var(--border-light);
}

.tree-file-node:last-child {
    border-bottom: none;
}

.tree-file-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.tree-file-header:hover {
    background: var(--bg-secondary);
}

.tree-file-header.expanded {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.tree-file-header.expanded .tree-toggle {
    transform: rotate(90deg);
}

.tree-file-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-right: 12px;
    color: var(--theme-primary);
    font-size: 14px;
}

.tree-file-info {
    flex: 1;
    min-width: 0;
}

.tree-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.tree-file-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary);
}

.tree-file-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tree-file-meta i {
    font-size: 10px;
    opacity: 0.7;
}

.tree-chunk-badge {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

/* Chunk List (Children) */
.tree-chunks {
    display: none;
    background: var(--bg-secondary);
}

.tree-file-node.expanded .tree-chunks {
    display: block;
}

.tree-chunk-item {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 52px;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
}

.tree-chunk-item:last-child {
    border-bottom: none;
}

.tree-chunk-item:hover {
    background: rgba(var(--theme-primary-rgb, 20, 184, 166), 0.05);
}

.tree-chunk-connector {
    color: var(--border-light);
    margin-right: 8px;
    font-size: 11px;
}

.tree-chunk-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: 4px;
    margin-right: 10px;
    color: var(--text-tertiary);
    font-size: 11px;
    border: 1px solid var(--border-light);
}

.tree-chunk-info {
    flex: 1;
    min-width: 0;
}

.tree-chunk-name {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-chunk-preview {
    color: var(--text-tertiary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-style: italic;
}

.tree-chunk-size {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    margin-left: 12px;
    white-space: nowrap;
}

/* Reassign button in Documents tab - matches delete button size */
.reassign-btn {
    padding: 8px 16px;
    margin-right: 8px;
    background: var(--theme-primary-light);
    color: var(--theme-action-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 115px;
    justify-content: center;
}

.reassign-btn:hover {
    background: var(--theme-primary-dark);
    transform: translateY(-1px);
}

.reassign-btn i {
    font-size: 12px;
}

/* Match delete button size to reassign button */
.document-actions .delete-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 115px;
    justify-content: center;
}

.document-actions .delete-btn i {
    font-size: 12px;
}

/* Campaign modal tabs */
.campaign-modal-tabs {
    display: flex;
    gap: 10px;
    margin-top: 0;  /* Remove any top margin */
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
    /* Sticky positioning - tabs stay at top while content scrolls */
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-primary);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;  /* Tight against header */
    transition: box-shadow 0.2s ease;
}

/* Add subtle shadow when scrolled (makes sticky effect more obvious) */
.campaign-modal-tabs.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark theme sticky tabs */
[data-theme="dark"] .campaign-modal-tabs {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .campaign-modal-tabs.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.campaign-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.campaign-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.campaign-tab.active {
    color: var(--theme-primary-light);
    border-bottom-color: var(--theme-primary-light);
    font-weight: 600;
}

.campaign-tab i {
    font-size: 14px;
}

.campaign-tab-content {
    display: none;
    padding: 20px;  /* Add padding so content doesn't touch edges */
}

.campaign-tab-content.active {
    display: block;
}

/* ============================================
   SEO CONTENT MANAGER MODAL TABS
   ============================================ */

.modal-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.modal-tab-btn.active {
    color: var(--theme-primary-light, var(--theme-primary, #11a3f0));
    border-bottom-color: var(--theme-primary-light, var(--theme-primary, #11a3f0));
    font-weight: 600;
}

.modal-tab-btn i {
    font-size: 14px;
}

/* Targeting option radio labels */
.targeting-option {
    display: block;
    padding: 12px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.targeting-option:hover {
    border-color: var(--theme-primary-light);
    background: var(--bg-secondary);
}

.targeting-option input[type="radio"] {
    margin-right: 10px;
}

.targeting-option input[type="radio"]:checked + strong {
    color: var(--theme-primary-light);
}

/* Ensure z-index layering is correct */
#collectionEditModal {
    z-index: 12000 !important; /* Above admin modal (10000) */
}

#reassignDocumentModal {
    z-index: 11500 !important; /* Above admin modal, below collection edit */
}

#campaignEditModal {
    z-index: 12500 !important; /* Above collection edit */
}

/* ===== CAMPAIGN EDITOR MODAL PROTECTION ===== */
/* Protect ADMIN UI elements (modal shell, inputs, buttons) from Square Everything */
/* But ALLOW the preview content to reflect visitor-facing custom CSS */
/* Custom CSS loads AFTER styles.css, so we need ultra-high specificity */

/* Modal container - the outer shell should always be rounded */
html body .modal#campaignEditModal > .modal-content,
html body .modal.campaign-editor-modal > .modal-content {
    border-radius: 12px !important;
}

/* Form inputs in the MAIN EDITOR AREA (not preview) - always rounded */
html body .modal#campaignEditModal .ce-body > .ce-main input,
html body .modal#campaignEditModal .ce-body > .ce-main textarea,
html body .modal#campaignEditModal .ce-body > .ce-main select,
html body .modal#campaignEditModal .ce-body > .ce-main .form-input,
html body .modal#campaignEditModal .ce-header input,
html body .modal#campaignEditModal .modal-footer input {
    border-radius: 6px !important;
}

/* All direct inputs/selects in modal (excluding preview) */
html body .modal#campaignEditModal .ce-main input:not(.ce-preview-content input),
html body .modal#campaignEditModal .ce-main textarea:not(.ce-preview-content textarea),
html body .modal#campaignEditModal .ce-main select:not(.ce-preview-content select) {
    border-radius: 6px !important;
}

/* Buttons in footer and nav - always rounded */
html body .modal#campaignEditModal .modal-footer button,
html body .modal#campaignEditModal .modal-footer .modal-btn,
html body .modal#campaignEditModal .ce-nav-step {
    border-radius: 6px !important;
}

/* Sidebar container - always rounded */
html body .modal#campaignEditModal .ce-sidebar,
html body .modal#campaignEditModal .ce-nav {
    border-radius: 8px !important;
}

/* Header close button */
html body .modal#campaignEditModal .ce-header button,
html body .modal#campaignEditModal .modal-close {
    border-radius: 6px !important;
}

/* Expand button in preview header - always rounded */
html body .modal#campaignEditModal .ce-preview-expand {
    border-radius: 6px !important;
}

/* Preview CONTAINER frame - always rounded (the wrapper, not content inside) */
html body .modal#campaignEditModal .ce-preview-section {
    border-radius: 8px !important;
}

/* ===== EDIT MODE PROTECTION ===== */
/* When editing, modal gets data-campaign-id attribute. Old custom CSS with */
/* [data-campaign-id] selectors would apply. These rules have HIGHER specificity */
/* because they include [data-campaign-id] ON the modal itself. */
/* Target specific admin containers to avoid affecting preview */
html body .modal#campaignEditModal[data-campaign-id] > .modal-content {
    border-radius: 12px !important;
}
/* Modal header */
html body .modal#campaignEditModal[data-campaign-id] .ce-header input,
html body .modal#campaignEditModal[data-campaign-id] .ce-header button {
    border-radius: 6px !important;
}
/* Modal footer */
html body .modal#campaignEditModal[data-campaign-id] .modal-footer input,
html body .modal#campaignEditModal[data-campaign-id] .modal-footer button,
html body .modal#campaignEditModal[data-campaign-id] .modal-footer .modal-btn {
    border-radius: 6px !important;
}
/* Navigation sidebar */
html body .modal#campaignEditModal[data-campaign-id] .ce-nav {
    border-radius: 8px !important;
}
html body .modal#campaignEditModal[data-campaign-id] .ce-nav-step {
    border-radius: 6px !important;
}
/* Settings sidebar */
html body .modal#campaignEditModal[data-campaign-id] .ce-sidebar {
    border-radius: 8px !important;
}
html body .modal#campaignEditModal[data-campaign-id] .ce-sidebar input,
html body .modal#campaignEditModal[data-campaign-id] .ce-sidebar textarea,
html body .modal#campaignEditModal[data-campaign-id] .ce-sidebar select,
html body .modal#campaignEditModal[data-campaign-id] .ce-sidebar button {
    border-radius: 6px !important;
}
/* Main content tabs (basic, targeting, content, rules) - NOT preview */
html body .modal#campaignEditModal[data-campaign-id] #basicTab input,
html body .modal#campaignEditModal[data-campaign-id] #basicTab textarea,
html body .modal#campaignEditModal[data-campaign-id] #basicTab select,
html body .modal#campaignEditModal[data-campaign-id] #targetingTab input,
html body .modal#campaignEditModal[data-campaign-id] #targetingTab select,
html body .modal#campaignEditModal[data-campaign-id] #contentTab input,
html body .modal#campaignEditModal[data-campaign-id] #contentTab textarea,
html body .modal#campaignEditModal[data-campaign-id] #contentTab select,
html body .modal#campaignEditModal[data-campaign-id] #rulesTab input,
html body .modal#campaignEditModal[data-campaign-id] #rulesTab select {
    border-radius: 6px !important;
}
/* Campaign tab buttons in header */
html body .modal#campaignEditModal[data-campaign-id] .campaign-tab {
    border-radius: 6px !important;
}

/* NOTE: Preview CONTENT (.ce-preview-content, .ce-preview-in-chat) is NOT protected */
/* This allows custom CSS like "Square Everything" to style the preview accurately */

#campaignDisplayModal {
    z-index: 14000 !important; /* Above everything */
}

#campaignDisplayModal .modal-footer {
    padding: 10px 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Campaign Display Modal - Mobile Optimizations */
#campaignDisplayModal .modal-content {
    max-width: 600px;  /* Wider than default for campaign content */
}

/* Campaign display modal dimensions are set dynamically via JS
   (admin-configured desktop/mobile sliders) — no CSS overrides needed */

#campaignDisplayModal .modal-body {
    max-height: none;
}

/* DQL Report Sortable Columns */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    position: relative;
}

th.sortable:hover {
    background: var(--hover-bg);
}

th.sortable.active {
    color: var(--theme-primary-light) !important;  /* Use light variant for visibility in both themes */
    font-weight: 600;
    background: rgba(74, 144, 226, 0.08);
}

th.sortable i {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

th.sortable.active i {
    opacity: 1;
    color: var(--theme-primary-light) !important;
}

.dql-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .dql-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive adjustments for collection edit */
@media (max-width: 768px) {
    .modal-large {
        width: 95%;
        max-width: none;
    }
    
    .collection-edit-info .form-row {
        grid-template-columns: 1fr;
    }
    
    .collection-documents-table-container {
        max-height: 300px;
    }
    
    .action-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* ================================================
   TOKEN PICKER
   ================================================ */

.token-picker {
    position: fixed;
    width: 300px;
    max-height: 350px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 15000;
    overflow: hidden;
    animation: fadeInScale 0.15s ease-out;
}

[data-theme="dark"] .token-picker {
    background: rgba(26, 26, 26, 0.98);
    border-color: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.token-picker-search {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    outline: none;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.token-picker-search:focus {
    border-bottom-color: var(--theme-primary);
}

.token-picker-search::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.token-picker-list {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

.token-picker-list::-webkit-scrollbar {
    width: 6px;
}

.token-picker-list::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.token-category {
    padding: 8px 12px 4px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.token-category:first-child {
    margin-top: 0;
}

.token-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    color: var(--text-primary);
    transition: all 0.1s ease;
    user-select: none;
}

.token-item:hover {
    background: rgba(74, 144, 226, 0.1);
}

.token-item.selected {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.token-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================
   Form Field Drag & Drop Accordion Styles
   ============================================ */

/* Drag handle hover effect */
.drag-handle {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Field card hover effect */
.form-field-card:hover .drag-handle {
    color: #11a3f0 !important;
}

/* Ghost element (preview while dragging) */
.field-ghost {
    opacity: 0.4 !important;
    background: #e3f2fd !important;
    border: 2px dashed #11a3f0 !important;
}

/* Element being dragged */
.field-drag {
    opacity: 0.8;
    transform: rotate(2deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
}

/* Element when grabbed (before drag starts) */
.field-chosen {
    background: #ffffff !important;
    border-color: #11a3f0 !important;
}

/* Smooth transitions for field cards */
.form-field-card {
    transition: all 0.2s ease, max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded field styling */
.form-field-card.expanded {
    border: 2px solid #11a3f0 !important;
}

.form-field-card.expanded .field-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-light);
}

/* Collapsed field hover */
.form-field-card:not(.expanded):hover {
    border-color: var(--border-medium) !important;
}

/* Chevron rotation */
.field-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-field-card.expanded .field-chevron {
    transform: rotate(180deg);
}

/* Field content collapse animation */
.field-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    overflow: hidden;
}

.form-field-card:not(.expanded) .field-content {
    max-height: 0 !important;
    padding: 0 !important;
}

/* Drop indicator line */
.sortable-drag {
    opacity: 0.6;
}

.sortable-ghost {
    opacity: 0.3;
    background: #e3f2fd;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .drag-handle {
        font-size: 20px;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .field-header {
        min-height: 60px;
    }
}

/* ============================================
   API KEYS PANEL STYLES
   ============================================ */

.api-keys-panel {
    padding: 20px;
    color: var(--text-primary);
}

.api-keys-panel .panel-header h2 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 24px;
}

.api-keys-panel .panel-header p {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.api-keys-panel .panel-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.api-keys-info .info-box {
    background: var(--bg-tertiary);
    border-left: 4px solid var(--theme-primary);
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    color: var(--text-primary);
}

.api-keys-info .info-box i {
    margin-right: 8px;
    color: var(--theme-primary);
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 64px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
    display: block;
}

.empty-state h3 {
    margin: 16px 0;
    color: var(--text-primary);
    font-size: 20px;
}

.empty-state p {
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

.api-key-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.api-key-card.active {
    border-color: var(--theme-primary);
}

.api-key-card.revoked {
    opacity: 0.6;
    border-color: var(--border-light);
}

.key-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.key-title h3 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 18px;
}

.key-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.key-status.status-active {
    background: #10b981;
    color: var(--theme-action-text);
}

.key-status.status-revoked {
    background: #ef4444;
    color: var(--theme-action-text);
}

.key-status.status-expired {
    background: #f59e0b;
    color: var(--theme-action-text);
}

.key-actions {
    display: flex;
    gap: 8px;
}

.key-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.key-prefix {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    color: var(--text-primary);
}

.key-display {
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--theme-primary);
    font-weight: 600;
}

.key-hidden {
    color: var(--text-tertiary);
}

.key-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.info-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.info-item i {
    color: var(--theme-primary);
    font-size: 18px;
}

.info-item small {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
}

.info-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.key-permissions strong,
.key-ip-whitelist strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.permission-tags,
.ip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-tag {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.permission-tag.none {
    background: var(--text-tertiary);
}

.ip-tag {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
}

.key-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* Badge styles for status indicators */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success {
    background: #10b981;
    color: var(--theme-action-text);
}

.badge-danger {
    background: #ef4444;
    color: var(--theme-action-text);
}

.badge-warning {
    background: #f59e0b;
    color: var(--theme-action-text);
}

.badge-secondary {
    background: var(--text-tertiary);
    color: var(--theme-action-text);
}

/* Customer badge - pill style with theme-aware colors */
.customer-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 6px;
    white-space: nowrap;
    color: var(--theme-action-text);
}

/* Light theme - blue */
:root .customer-badge {
    background: #11a3f0;
}

/* Dark theme - green/teal */
[data-theme="dark"] .customer-badge {
    background: #10b981;
}

/* DQL badge - Discussion Qualified Lead - 2025-11-26 */
.dql-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 6px;
    white-space: nowrap;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: var(--theme-action-text);
    animation: dql-glow 2s ease-in-out infinite alternate;
}

@keyframes dql-glow {
    from { box-shadow: 0 0 3px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
}

/* Internal badge - Tenant Admin visitor */
.internal-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 6px;
    white-space: nowrap;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ==============================================
   CRM SYNC PANEL STYLES
   ============================================== */

.connections-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.connection-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.section-actions {
    display: flex;
    gap: 10px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.empty-state-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
    border-color: var(--border-dark);
}

.btn-icon.btn-danger:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #ef4444;
}

.connection-details {
    display: grid;
    gap: 16px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
}

.detail-value {
    font-size: 14px;
    color: var(--text-primary);
}

.error-text {
    color: #ef4444;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.sync-logs-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    min-height: 200px;
}

.status-success {
    background: #10b981;
}

.status-error {
    background: #ef4444;
}

.status-warning {
    background: #f59e0b;
}

.btn-primary {
    background: var(--brand-blue);
    color: var(--theme-action-text);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--brand-dark-blue);
}

.btn-primary i {
    margin-right: 6px;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-dark);
}

.btn-secondary i {
    margin-right: 6px;
}

/* CRM Sync Panel Responsive Scaling */
.connections-container table {
    width: 100%;
    table-layout: auto;
}

.connections-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
    .connections-container table {
        font-size: 13px;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .connections-container {
        font-size: 12px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .section-actions {
        width: 100%;
    }
    
    .section-actions button {
        flex: 1;
    }
}

.crm-provider-content {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==============================================
   SEARCHABLE DROPDOWN COMPONENT
   ============================================== */

.searchable-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 38px;
}

.dropdown-trigger:hover {
    border-color: var(--border-dark);
    background: var(--bg-hover);
}

.dropdown-trigger.open {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.dropdown-display {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 12px;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}

.dropdown-trigger.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.dropdown-search {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
}

.dropdown-search i {
    color: var(--text-tertiary);
    font-size: 14px;
}

.dropdown-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
}

.dropdown-search-input::placeholder {
    color: var(--text-tertiary);
}

.dropdown-options {
    overflow-y: auto;
    max-height: 300px;
    padding: 4px;
}

.dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: var(--brand-blue);
    border-radius: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
    background: var(--brand-dark-blue);
}

.dropdown-group-label {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--text-primary);
}

.dropdown-option:hover {
    background: var(--bg-hover);
}

.dropdown-option.selected {
    background: rgba(74, 144, 226, 0.1);
    color: var(--brand-blue);
    font-weight: 600;
}

.dropdown-option i {
    font-size: 12px;
    width: 16px;
    flex-shrink: 0;
}

.dropdown-option.selected i {
    color: var(--brand-blue);
}

.dropdown-option span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-hint {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dropdown-hint i {
    color: var(--brand-blue);
}

.dropdown-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dropdown-empty i {
    font-size: 32px;
    opacity: 0.3;
}

.dropdown-empty span {
    font-size: 13px;
}

/* ============================================
   AI SCORING PANEL STYLES
   ============================================ */

/* Panel container removed - now uses standard admin tab layout */

/* Dashboard Tiles - 5 columns */
.scoring-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .scoring-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .scoring-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.score-tile {
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.score-tile.average-score {
    border-color: #11a3f0;
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
}

.score-tile.hot-leads {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.score-tile.customers {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #fff 0%, #f5f3ff 100%);
}

.score-tile.trending {
    border-color: #51cf66;
    background: linear-gradient(135deg, #fff 0%, #f3faf4 100%);
}

.score-tile.scored-visitors {
    border-color: #11a3f0;
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
}

.tile-content {
    flex: 1;
}

.tile-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1;
}

.tile-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.tile-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Scoring Section */
.scoring-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Responsive section header */
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-header > div {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Top Visitors List */
.top-visitors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.visitor-score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.2s;
}

.visitor-score-card:hover {
    border-color: var(--theme-primary);
    box-shadow: var(--shadow-md);
}

.visitor-info {
    flex: 1;
}

.visitor-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.visitor-email {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.visitor-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.visitor-meta span {
    margin-right: 12px;
}

.visitor-score {
    display: flex;
    align-items: center;
    gap: 12px;
}

.score-badge {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 20px;
    min-width: 70px;
    text-align: center;
}

.score-badge.score-high {
    background: #d4edda;
    color: #155724;
}

.score-badge.score-medium {
    background: #fff3cd;
    color: #856404;
}

.score-badge.score-low {
    background: #f8d7da;
    color: #721c24;
}

.trend-up {
    color: #28a745;
    font-size: 12px;
    margin-left: 4px;
}

.trend-down {
    color: #dc3545;
    font-size: 12px;
    margin-left: 4px;
}

.trend-neutral {
    color: #6c757d;
    font-size: 12px;
    margin-left: 4px;
}

/* Configuration Section */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Scoring Config Grid - 2 column layout */
.scoring-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .scoring-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Checkbox item styling for scoring config */
.config-checkbox-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.config-checkbox-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 8px;
}

.config-checkbox-item .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--theme-primary);
    cursor: pointer;
}

.config-checkbox-item .checkbox-text {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.config-checkbox-item .slider-help {
    margin-left: 32px;
}

/* Slider help text for scoring */
.slider-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.slider-help i {
    margin-right: 6px;
    opacity: 0.7;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-item label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.config-item input[type="number"],
.config-item input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
}

.config-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.config-help {
    font-size: 12px;
    color: var(--text-muted);
}

/* Tuning Modal Sections */
.tuning-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.tuning-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tuning-section h3 i {
    color: var(--theme-primary);
    font-size: 14px;
}

.tuning-section .section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
}

.tuning-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.tuning-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .tuning-grid,
    .tuning-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Dark theme tuning section */
[data-theme="dark"] .tuning-section {
    background: var(--bg-tertiary);
}

.config-actions {
    display: flex;
    gap: 12px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-state p {
    margin: 8px 0;
}

.help-text {
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   SCORE DETAIL MODAL STYLES
   ============================================ */

.score-modal {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.score-modal::-webkit-scrollbar {
    width: 6px;
}

.score-modal::-webkit-scrollbar-track {
    background: transparent;
}

.score-modal::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.score-modal::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.score-summary {
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 30px;
}

.score-total {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 20px 40px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.score-total.score-high {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.score-total.score-medium {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    color: #856404;
}

.score-total.score-low {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.score-value {
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
}

.score-label {
    font-size: 32px;
    font-weight: 600;
    opacity: 0.7;
}

.confidence-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Score Breakdown */
.score-breakdown {
    margin-bottom: 30px;
}

.score-breakdown h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.breakdown-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-item {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    gap: 12px;
    align-items: center;
    cursor: help;
    padding: 8px 10px;
    margin: -8px -10px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.breakdown-item:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

[data-theme="dark"] .breakdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.breakdown-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.breakdown-progress {
    background: var(--bg-secondary);
    border-radius: 8px;
    height: 24px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%);
    transition: width 0.3s ease;
}

.breakdown-item.engagement .progress-fill {
    background: linear-gradient(90deg, #11a3f0 0%, #75d1ff 100%);
}

.breakdown-item.behavioral .progress-fill {
    background: linear-gradient(90deg, #51cf66 0%, #69db7c 100%);
}

.breakdown-item.firmographic .progress-fill {
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
}

.breakdown-item.demographic .progress-fill {
    background: linear-gradient(90deg, #9775fa 0%, #b197fc 100%);
}

.breakdown-value {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    font-size: 14px;
}

/* LLM Analysis */
.llm-analysis {
    margin-bottom: 30px;
}

.llm-analysis h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.analysis-text {
    padding: 16px;
    background: var(--bg-secondary);
    border-left: 4px solid var(--theme-primary);
    border-radius: 6px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.analysis-text p:last-child {
    margin-bottom: 0;
}

/* Intent Signals */
.intent-signals {
    margin-bottom: 30px;
}

.intent-signals h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.signals-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signal-badge {
    padding: 6px 12px;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.signal-badge--positive {
    background: #10b981;
    color: white;
}

.signal-badge--neutral {
    background: #d97706;
    color: white;
}

.signal-badge--negative {
    background: #ef4444;
    color: white;
}

/* Persona Badge - Uses brand color to match app theme */
.persona-badge {
    position: relative;
    padding: 6px 12px;
    background: var(--brand-blue, #4a90e2);
    color: white;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: default;
}

/* Confidence tooltip - matches .info-icon tooltip pattern */
.persona-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Tooltip arrow */
.persona-badge[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
    z-index: 1000;
}

.persona-badge[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.persona-badge[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Derived Personas section styling */
.derived-personas {
    margin-bottom: 30px;
}

.derived-personas h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
}

/* Key Factors */
.key-factors {
    margin-bottom: 30px;
}

.key-factors h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.factors-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.factors-list li {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--theme-primary);
    border-radius: 4px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.factors-list li:before {
    content: "✓";
    color: var(--theme-primary);
    font-weight: bold;
    margin-right: 8px;
}

/* Score History */
.score-history {
    margin-bottom: 30px;
}

.score-history h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.history-date {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 100px;
}

.history-score {
    font-weight: 600;
    color: var(--text-primary);
}

.history-change {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.history-change.positive {
    color: #28a745;
    background: #d4edda;
}

.history-change.negative {
    color: #dc3545;
    background: #f8d7da;
}

/* Recent Activities */
.recent-activities {
    margin-bottom: 30px;
}

.recent-activities h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

/* Dark Theme Overrides */
[data-theme="dark"] .score-tile {
    background: var(--bg-secondary);
}

[data-theme="dark"] .score-tile.average-score {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a2430 100%);
    border-color: #75d1ff;
}

[data-theme="dark"] .score-tile.hot-leads {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a1f1f 100%);
    border-color: #ff6b6b;
}

[data-theme="dark"] .score-tile.customers {
    background: linear-gradient(135deg, #1a1a1a 0%, #251f2a 100%);
    border-color: #8b5cf6;
}

[data-theme="dark"] .score-tile.trending {
    background: linear-gradient(135deg, #1a1a1a 0%, #1f2a1f 100%);
    border-color: #51cf66;
}

[data-theme="dark"] .score-tile.scored-visitors {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a2430 100%);
    border-color: #75d1ff;
}

[data-theme="dark"] .visitor-score-card {
    background: var(--bg-secondary);
}

[data-theme="dark"] .score-badge.score-high {
    background: #1e3a2e;
    color: #90ee90;
}

[data-theme="dark"] .score-badge.score-medium {
    background: #3a3a1e;
    color: #ffd700;
}

[data-theme="dark"] .score-badge.score-low {
    background: #3a1e1e;
    color: #ff6b6b;
}

[data-theme="dark"] .analysis-text,
[data-theme="dark"] .factors-list li,
[data-theme="dark"] .history-entry {
    background: var(--bg-tertiary);
}

/* Score Modal Footer - matches header styling */
.score-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-primary);
    flex-shrink: 0;
}

/* Score Modal Header styling */
.score-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
}

.score-modal .modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.score-modal .user-identifier {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Dark theme - Score modal header and footer */
[data-theme="dark"] .score-modal .modal-header,
[data-theme="dark"] .score-modal-footer {
    background: var(--bg-primary);
    border-color: var(--border-medium);
}

/* ============================================
   AI SCORING - SEARCH & FILTER STYLES
   ============================================ */

/* Search Section Container */
.scoring-search-section {
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.scoring-search-section .search-header h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.scoring-search-section .search-header h3 i {
    color: var(--theme-primary);
}

/* Search Bar */
.search-bar-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.visitor-search-input {
    width: 100%;
    padding: 12px 40px 12px 42px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.visitor-search-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.visitor-search-input::placeholder {
    color: var(--text-muted);
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.search-clear-btn:hover {
    background: var(--text-muted);
    color: var(--theme-action-text);
}

/* Quick Filter Pills */
.quick-filters-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.quick-filters-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.quick-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-filter-pill:hover {
    border-color: var(--theme-primary);
    background: rgba(59, 130, 246, 0.05);
    color: var(--theme-primary);
}

.quick-filter-pill.active {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.quick-filter-pill.active:hover {
    background: var(--theme-primary);
    opacity: 0.9;
}

.quick-filter-pill i {
    font-size: 12px;
}

/* Special coloring for specific quick filters when active */
.quick-filter-pill[data-filter="dqls"].active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
}

.quick-filter-pill[data-filter="trending"].active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
}

.quick-filter-pill[data-filter="newThisWeek"].active {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
}

.quick-filter-pill[data-filter="highScore"].active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
}

.quick-filter-pill[data-filter="mediumScore"].active {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-color: #0891b2;
}

.quick-filter-pill[data-filter="needsAttention"].active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
}

/* Account tab quick filter pill colors when active */
.quick-filter-pill[data-account-filter="highScore"].active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
}

.quick-filter-pill[data-account-filter="decision"].active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
}

.quick-filter-pill[data-account-filter="target"].active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
}

.quick-filter-pill[data-account-filter="buyerGroup"].active {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border-color: #9333ea;
}

.quick-filter-pill[data-account-filter="recentActivity"].active {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-color: #0891b2;
}

/* Advanced Filters Toggle */
.advanced-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.advanced-filters-toggle:hover {
    color: var(--theme-primary);
}

.advanced-filters-toggle i {
    font-size: 12px;
    transition: transform 0.2s;
}

/* Advanced Filters Panel */
.advanced-filters-panel {
    margin-top: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

.advanced-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group-wide {
    grid-column: span 2;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label i {
    color: var(--theme-primary);
    font-size: 12px;
}

/* Score Range Inputs */
.score-range-inputs {
    display: flex;
    gap: 12px;
}

.range-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-input-group span {
    font-size: 13px;
    color: var(--text-secondary);
}

.form-input.small {
    width: 70px;
    padding: 8px 10px;
    font-size: 13px;
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.radio-option input[type="radio"] {
    accent-color: var(--theme-primary);
}

/* Checkbox Row */
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    accent-color: var(--theme-primary);
}

/* Advanced Filters Actions */
.advanced-filters-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* Active Filters Display */
.active-filters-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.active-filters-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary);
    white-space: nowrap;
}

.active-filter-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.clear-filters-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Dark Theme Overrides for Search/Filter */
[data-theme="dark"] .scoring-search-section {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .visitor-search-input {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .quick-filter-pill {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .advanced-filters-panel {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .active-filters-display {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-filter-pills {
        width: 100%;
    }
    
    .quick-filters-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-bar-container {
        flex-direction: column;
    }
    
    .advanced-filters-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-group-wide {
        grid-column: span 1;
    }
    
    .checkbox-row {
        flex-direction: column;
        gap: 8px;
    }
}

/* Activity Timeline Styles */
.activities-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--theme-primary);
    border-radius: 6px;
}

.activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-description {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 4px;
}

.activity-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
}

.activity-time {
    color: var(--text-muted);
}

.activity-impact {
    color: var(--theme-primary);
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(74, 144, 226, 0.1);
    border-radius: 4px;
}

.history-reason {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

/* Dark theme */
[data-theme="dark"] .activity-item {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .activity-impact {
    background: rgba(91, 167, 247, 0.2);
}

/* AI Score Slider Styles */
.ai-score-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--border-light);
    border-radius: 5px;
    outline: none;
}

.ai-score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--theme-primary);
    cursor: not-allowed;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ai-score-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--theme-primary);
    cursor: not-allowed;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ai-score-slider::-webkit-slider-track {
    background: linear-gradient(to right, 
        #dc3545 0%, 
        #ffc107 40%, 
        #28a745 70%);
    border-radius: 5px;
}

.ai-score-slider::-moz-range-track {
    background: linear-gradient(to right, 
        #dc3545 0%, 
        #ffc107 40%, 
        #28a745 70%);
    border-radius: 5px;
}

/* ============================================================================
   LEGAL PANEL STYLES
   ============================================================================ */

/* Legal Panel Container */
.legal-panel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.legal-panel-header {
    margin-bottom: 30px;
}

.legal-panel-header h2 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
}

.legal-panel-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Document Tabs */
.legal-document-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.legal-tab-button {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.legal-tab-button:hover {
    color: var(--theme-primary);
    background: var(--bg-secondary);
}

.legal-tab-button.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}

/* Document Editor */
.legal-document-editor {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
}

.legal-editor-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Settings Section */
.legal-settings-section {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.legal-settings-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.legal-settings-row {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.legal-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.legal-checkbox-label input[type="checkbox"] {
    cursor: pointer;
}

.legal-input-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.legal-number-input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}

/* Content Section */
.legal-content-section h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.legal-input-group {
    margin-bottom: 20px;
}

.legal-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
}

.legal-title-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: border-color 0.2s;
}

.legal-title-input:focus {
    outline: none;
    border-color: var(--theme-primary);
}

.legal-textarea-container {
    position: relative;
}

.legal-content-textarea {
    width: 100%;
    min-height: 400px;
    padding: 12px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    resize: vertical;
    transition: border-color 0.2s;
}

.legal-content-textarea:focus {
    outline: none;
    border-color: var(--theme-primary);
}

.legal-number-input {
    width: 80px;
    padding: 6px 10px;
    border: 2px solid var(--border-light);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.legal-number-input:focus {
    outline: none;
    border-color: var(--theme-primary);
}

.legal-textarea-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
}

.legal-help-text {
    color: var(--text-secondary);
}

.legal-help-text code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.legal-char-count {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Translations Section */
.legal-translations-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.legal-translations-info {
    margin-bottom: 15px;
}

.legal-no-translations {
    color: var(--text-secondary);
    font-style: italic;
    margin: 10px 0;
}

.legal-translations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.legal-translation-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.legal-translation-lang {
    font-weight: 600;
    color: var(--theme-primary);
    min-width: 150px;
}

.legal-translation-title {
    flex: 1;
    color: var(--text-primary);
}

.legal-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.legal-btn-icon:hover {
    opacity: 1;
}

/* Statistics Section */
.legal-stats-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.legal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.legal-stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legal-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legal-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.legal-status-active {
    color: #10b981;
}

.legal-status-inactive {
    color: #ef4444;
}

/* Action Buttons */
.legal-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.legal-actions-right {
    display: flex;
    gap: 10px;
}

.legal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.legal-btn-primary {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.legal-btn-primary:hover {
    background: var(--theme-primary-dark);
}

.legal-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.legal-btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* Unsaved Changes Warning */
.legal-unsaved-warning {
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
}

/* Select Input */
.legal-select-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Translation Help */
.legal-translation-help {
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-top: 15px;
}

.legal-translation-help p {
    margin: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Loading State */
.legal-document-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

/* Dark Theme Support */
[data-theme="dark"] .legal-panel-container {
    color: var(--text-primary);
}

[data-theme="dark"] .legal-content-textarea,
[data-theme="dark"] .legal-title-input,
[data-theme="dark"] .legal-number-input,
[data-theme="dark"] .legal-select-input {
    background: var(--bg-dark);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .legal-settings-section,
[data-theme="dark"] .legal-translation-item {
    background: var(--bg-secondary);
}

[data-theme="dark"] .legal-unsaved-warning {
    background: #78350f;
    border-color: #b45309;
    color: #fef3c7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-panel-container {
        padding: 15px;
    }
    
    .legal-document-tabs {
        flex-wrap: wrap;
    }
    
    .legal-tab-button {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .legal-document-editor {
        padding: 20px;
    }
    
    .legal-settings-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .legal-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .legal-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .legal-actions-right {
        width: 100%;
    }
    
    .legal-btn {
        width: 100%;
    }
}

/* Token Modal Styles */
.legal-btn-link {
    background: none;
    border: none;
    color: var(--theme-primary);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    font-size: inherit;
}

.legal-btn-link:hover {
    color: var(--theme-primary-dark);
}

.token-category {
    margin-bottom: 30px;
}

.token-category h4 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.token-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.token-table thead {
    background: var(--bg-secondary);
}

.token-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.token-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.token-table tr:last-child td {
    border-bottom: none;
}

.token-table code {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    color: var(--theme-primary);
}

.token-example {
    color: var(--text-secondary);
    font-style: italic;
}

.legal-btn-copy {
    background: none;
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.legal-btn-copy:hover {
    background: var(--bg-secondary);
    border-color: var(--theme-primary);
}

.modal-description {
    margin: 0 0 20px 0;
    padding: 15px;
    background: var(--bg-secondary);
    border-left: 4px solid var(--theme-primary);
    border-radius: 4px;
    color: var(--text-primary);
}

/* Dark theme support for token modal */
[data-theme="dark"] .token-table {
    background: var(--bg-dark);
}

[data-theme="dark"] .token-table th,
[data-theme="dark"] .token-table td {
    color: var(--text-primary);
}

[data-theme="dark"] .token-table code {
    background: var(--bg-tertiary);
    color: var(--theme-primary-light);
}

/* ============================================================================
   LEGAL DOCUMENT VIEWER MODAL STYLES
   ============================================================================ */

.legal-viewer-overlay {
    z-index: 100000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.legal-viewer-modal {
    pointer-events: auto !important;
}

.legal-viewer-modal {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 100001 !important;
    position: relative !important;
    background: var(--bg-primary) !important;
    border-radius: 12px !important;
}

/* Legal document viewer - clean shadow to stand out from UI */
#legal-viewer {
    border: 1px solid var(--border-light) !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

.legal-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 2px solid var(--border-color);
}

.legal-viewer-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-viewer-icon {
    font-size: 24px;
}

.legal-viewer-title h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.legal-viewer-meta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.legal-viewer-language {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-viewer-language label {
    font-size: 14px;
    color: var(--text-secondary);
}

.legal-viewer-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.legal-viewer-version {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.legal-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    max-height: calc(85vh - 180px);
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.legal-viewer-body::-webkit-scrollbar {
    width: 6px;
}

.legal-viewer-body::-webkit-scrollbar-track {
    background: transparent;
}

.legal-viewer-body::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.legal-viewer-body::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.legal-viewer-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    color: var(--text-primary);
    font-size: 15px;
}

.legal-viewer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-top: 2px solid var(--border-color);
    gap: 20px;
}

.legal-viewer-footer-left {
    flex: 1;
}

.legal-viewer-footer-right {
    display: flex;
    gap: 10px;
}

.legal-acknowledgement-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.legal-acknowledgement-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.legal-viewer-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.legal-viewer-btn-primary {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.legal-viewer-btn-primary:hover:not(:disabled) {
    background: var(--theme-primary-dark);
}

.legal-viewer-btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.5;
}

.legal-viewer-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.legal-viewer-btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* Dark theme support */
[data-theme="dark"] .legal-viewer-modal {
    background: var(--bg-dark);
}

/* Dark theme - legal viewer by ID */
[data-theme="dark"] #legal-viewer {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 25px 60px -12px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .legal-viewer-content {
    color: var(--text-primary);
}

[data-theme="dark"] .legal-viewer-select {
    background: var(--bg-dark);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Responsive design */
@media (max-width: 768px) {
    .legal-viewer-modal {
        max-width: 95vw;
        max-height: 80vh;
    }
    
    .legal-viewer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 16px 20px;
    }
    
    .legal-viewer-meta {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .legal-viewer-body {
        padding: 20px;
        max-height: calc(80vh - 160px);
    }
    
    .legal-viewer-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
    }
    
    .legal-viewer-footer-right {
        width: 100%;
        flex-direction: column;
    }
    
    .legal-viewer-btn {
        width: 100%;
    }
}

/* ============================================================================
   LEGAL FOOTER COMPONENT STYLES (For Forms)
   ============================================================================ */

.legal-footer-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}


.legal-footer-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

.legal-link {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
}

.legal-link:hover {
    text-decoration: underline;
}

.legal-footer-checkbox {
    margin-top: 8px;
    width: 100%;
}

.legal-footer-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.legal-footer-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.legal-footer-checkbox-label span {
    line-height: 1.5;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Dark theme support */
[data-theme="dark"] .legal-footer-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .legal-link {
    color: var(--theme-primary-light);
}

[data-theme="dark"] .legal-footer-checkbox-label {
    color: var(--text-primary);
}

/* Form integration helpers */
.form-with-legal-footer {
    display: flex;
    flex-direction: column;
}

.form-with-legal-footer .legal-footer-container {
    order: 999; /* Ensure footer appears at bottom */
}

/* Submit button styling when disabled by legal footer */
button[disabled].legal-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================================================
   LEGAL PANEL LIGHT THEME IMPROVEMENTS
   ============================================================================ */

/* Legal Panel with better contrast */
.legal-panel-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.legal-settings-section,
.legal-content-section,
.legal-translations-section,
.legal-stats-section {
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Subtle background tints for section distinction */
.legal-settings-section {
    background: var(--bg-secondary);
}

.legal-content-section {
    background: var(--bg-primary);
    border-color: #e0e7ff;
}

.legal-translations-section {
    background: var(--bg-secondary);
}

.legal-stats-section {
    background: var(--bg-primary);
    border-color: #fef3c7;
}

.legal-settings-section h3,
.legal-content-section h3,
.legal-translations-section h3,
.legal-stats-section h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 12px;
}

/* Dark theme */
[data-theme="dark"] .legal-settings-section,
[data-theme="dark"] .legal-content-section,
[data-theme="dark"] .legal-translations-section,
[data-theme="dark"] .legal-stats-section {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

/* Token Autocomplete Dropdown */
.token-autocomplete-dropdown {
    position: absolute;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-height: 300px;
    overflow-y: auto;
    min-width: 400px;
}

.token-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.15s;
}

.token-autocomplete-item:last-child {
    border-bottom: none;
}

.token-autocomplete-item:hover {
    background: #eff6ff;
}

.token-autocomplete-item code {
    color: #1e40af;
    font-weight: 600;
    font-size: 13px;
}

.token-autocomplete-item .token-desc {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
}

/* Dark theme autocomplete */
[data-theme="dark"] .token-autocomplete-dropdown {
    background: #1f2937;
    border-color: #3b82f6;
}

[data-theme="dark"] .token-autocomplete-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .token-autocomplete-item:hover {
    background: #374151;
}

[data-theme="dark"] .token-autocomplete-item code {
    color: #60a5fa;
}

[data-theme="dark"] .token-autocomplete-item .token-desc {
    color: #9ca3af;
}

/* =============================================================================
   COOKIE CONSENT WIDGET
   Beautiful, minimal bottom-right consent dialog
   ============================================================================= */

.cookie-consent-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 24px;
    z-index: 25000; /* Above all modals including settings (16000) and two-step confirm (19000) */
    animation: cookieSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
}

.cookie-consent-widget.bottom-left {
    right: auto;
    left: 24px;
}

.cookie-consent-widget.bottom-banner {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-consent-widget.bottom-banner .cookie-consent-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cookie-consent-widget.bottom-banner .cookie-consent-icon {
    margin-bottom: 0;
}

.cookie-consent-widget.bottom-banner .cookie-consent-text {
    margin-bottom: 0;
}

@keyframes cookieSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cookieSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.cookie-consent-widget.hiding {
    animation: cookieSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cookie-consent-icon {
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}

.cookie-consent-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.cookie-consent-link {
    display: inline-block;
    font-size: 13px;
    color: var(--theme-primary);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.cookie-consent-link:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
}

.cookie-consent-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cookie-consent-btn.secondary {
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
}

.cookie-consent-btn.secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--border-dark);
    color: var(--text-primary);
}

.cookie-consent-btn.primary {
    background: var(--theme-primary);
    color: var(--theme-action-text);
}

.cookie-consent-btn.primary:hover {
    background: var(--theme-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}

/* Cookie Consent Preferences View */
.cookie-consent-preferences {
    display: none;
}

.cookie-consent-widget.show-preferences .cookie-consent-main {
    display: none;
}

.cookie-consent-widget.show-preferences .cookie-consent-preferences {
    display: block;
}

.cookie-consent-pref-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.cookie-consent-pref-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.cookie-consent-category {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cookie-consent-category:last-of-type {
    margin-bottom: 16px;
}

.cookie-consent-category-info {
    flex: 1;
}

.cookie-consent-category-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cookie-consent-category-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cookie-consent-category.essential .cookie-consent-category-name::after {
    content: '(Required)';
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Toggle switch for consent categories */
.cookie-consent-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-consent-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-consent-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-medium);
    transition: 0.3s;
    border-radius: 24px;
}

.cookie-consent-toggle .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--theme-action-text);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.cookie-consent-toggle input:checked + .slider {
    background-color: var(--theme-primary);
}

.cookie-consent-toggle input:disabled + .slider {
    background-color: var(--theme-primary);
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-consent-toggle input:checked + .slider:before {
    transform: translateX(20px);
}

/* Dark theme for cookie consent */
[data-theme="dark"] .cookie-consent-widget {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cookie-consent-category {
    background: var(--bg-tertiary);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .cookie-consent-widget {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
        padding: 20px;
    }
    
    .cookie-consent-widget.bottom-left {
        right: 16px;
    }
    
    .cookie-consent-widget.bottom-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .cookie-consent-widget.bottom-banner .cookie-consent-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cookie-consent-buttons {
        flex-direction: column;
    }
}

/* =============================================================================
   LEGAL PANEL - MODERN TAB STYLING (matches Branding panel)
   ============================================================================= */

.legal-tabs-container {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
    margin-bottom: 0;
}

.legal-tabs-container::-webkit-scrollbar {
    height: 4px;
}

.legal-tabs-container::-webkit-scrollbar-track {
    background: transparent;
}

.legal-tabs-container::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
}

.legal-tabs-wrapper {
    display: flex;
    padding: 0;
    min-width: max-content;
}

.legal-settings-tab {
    padding: 14px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-settings-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.legal-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: var(--bg-primary);
    font-weight: 600;
}

.legal-settings-tab i {
    font-size: 12px;
    opacity: 0.8;
}

.legal-settings-tab.active i {
    opacity: 1;
}

/* Light theme specific */
[data-theme="light"] .legal-settings-tab {
    color: #64748b;
}

[data-theme="light"] .legal-settings-tab:hover {
    color: #334155;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .legal-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: #fff;
}

/* Dark theme specific */
[data-theme="dark"] .legal-settings-tab {
    color: #94a3b8;
}

[data-theme="dark"] .legal-settings-tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .legal-settings-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    background: var(--bg-primary);
}

/* Legal tab content area */
.legal-settings-content {
    animation: fadeIn 0.2s ease;
    padding: 24px;
}

/* Legal panel responsive adjustments */
@media (max-width: 900px) {
    #legal-panel [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Consent Settings Section Styles */
.consent-settings-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.consent-settings-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.consent-settings-section h4 i {
    color: var(--theme-primary);
    font-size: 16px;
}

.consent-mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consent-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.consent-mode-option:hover {
    border-color: var(--border-medium);
}

.consent-mode-option.selected {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.05);
}

.consent-mode-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.consent-mode-option .option-content {
    flex: 1;
}

.consent-mode-option .option-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.consent-mode-option .option-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.consent-mode-option .option-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
}

.consent-mode-option .option-badge.gdpr {
    background: #dbeafe;
    color: #1e40af;
}

.consent-mode-option .option-badge.recommended {
    background: #d1fae5;
    color: #065f46;
}

[data-theme="dark"] .consent-mode-option .option-badge.gdpr {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-theme="dark"] .consent-mode-option .option-badge.recommended {
    background: #064e3b;
    color: #6ee7b7;
}

.consent-info-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.consent-info-note i {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

.consent-checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.consent-checkbox-row + .consent-checkbox-row {
    border-top: 1px solid var(--border-light);
}

.consent-checkbox-row .checkbox-content {
    flex: 1;
}

.consent-checkbox-row .checkbox-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.consent-checkbox-row .checkbox-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Consent Preview */
.consent-preview-container {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.consent-preview-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.consent-preview-widget {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-width: 340px;
}

/* Legal Translation Modal - High z-index to appear over admin panel */
#translation-modal-overlay {
    z-index: 100000 !important;
}

#tokens-modal-overlay {
    z-index: 100000 !important;
}

/* Ensure modal dialogs inside these overlays are also high */
#translation-modal-overlay .modal-dialog,
#tokens-modal-overlay .modal-dialog {
    z-index: 100001 !important;
    position: relative;
}

/* ============================================ */
/* GPTWeb Logo Theme Awareness */
/* ============================================ */

/* Light theme: Show light logo, hide dark logo */
:root .light-theme-only,
[data-theme="light"] .light-theme-only {
    display: inline-block;
}

:root .dark-theme-only,
[data-theme="light"] .dark-theme-only {
    display: none;
}

/* Dark theme: Hide light logo, show dark logo */
[data-theme="dark"] .light-theme-only {
    display: none;
}

[data-theme="dark"] .dark-theme-only {
    display: inline-block;
}

/* Admin logo styling */
.admin-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    max-width: 300px;
}

/* ============================================================================
   CUSTOMIZE PANEL - Chat UI Customization System
   ============================================================================ */

/* Main Container - Flex layout with left nav and content */
#customizeContent {
    display: flex;
    min-height: 600px;
    background: var(--bg-primary);
}

/* Left Navigation Panel */
.customize-left-nav {
    width: 200px;
    min-width: 200px;
    max-width: 200px; /* Prevent horizontal expansion */
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-light);
    padding: 16px 0;
    overflow-y: auto;
    /* Fixed width, stretch to fill height */
    flex: 0 0 200px;
    align-self: stretch;
}

.customize-nav-section {
    margin-bottom: 20px;
}

.customize-nav-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 16px;
    margin-bottom: 4px;
}

.customize-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.customize-nav-item:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.customize-nav-item.active {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 0 20px 20px 0;
    margin-right: 8px;
}

.customize-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

/* Mobile Dropdown (hidden on desktop) */
.customize-mobile-dropdown {
    display: none;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.customize-mobile-dropdown select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

/* Content Area */
.customize-content-area {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 500px;
}

.customize-section {
    max-width: 1200px;
}

.customize-section-header {
    margin-bottom: 24px;
}

.customize-section-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.customize-section-header h4 i {
    color: var(--theme-primary);
}

.customize-section-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ========================================== */
/* FONTS & TYPOGRAPHY SECTION */
/* ========================================== */

/* Fonts Section - Split layout with fixed preview */
.font-settings-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    min-height: 500px;
}

.font-settings-config {
    flex: 1;
    min-width: 0;
    padding-right: 16px;
}

/* Fixed Preview Panel - stays in place while settings scroll */
.font-preview-sticky {
    width: 400px;
    min-width: 400px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.font-preview-sticky h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.font-preview-sticky h5 i {
    color: var(--theme-primary);
}

.font-preview-device {
    margin-bottom: 16px;
}

.font-preview-device:last-child {
    margin-bottom: 0;
}

.font-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.font-preview-label i {
    font-size: 10px;
}

/* Both previews use same styling and same width - this is about fonts, not device size */
.font-preview-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px;
    width: 100%;
}

/* Desktop preview container */
.font-preview-desktop {
    /* Full width */
}

/* Mobile preview - SAME width as desktop (this is about fonts, not device simulation) */
.font-preview-mobile {
    /* Same as desktop - we're showing font settings, not simulating device width */
}

/* Responsive: stack preview below on smaller screens */
@media (max-width: 1100px) {
    .font-settings-layout {
        flex-direction: column;
        max-height: none;
        overflow: visible;
    }
    
    .font-settings-config {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    
    .font-preview-sticky {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        position: relative;
        max-height: none;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 24px;
    }
    
    .font-preview-sticky h5 {
        width: 100%;
    }
    
    .font-preview-device {
        flex: 1;
        min-width: 200px;
    }
    
    .font-preview-desktop,
    .font-preview-mobile {
        width: 100%;
        max-width: 100%;
    }
}

.font-settings-group {
    margin-bottom: 8px;
}

.font-settings-group h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-settings-group h5 i {
    color: var(--theme-primary);
    font-size: 14px;
}

.font-settings-group .group-description {
    font-size: 13px;
    color: var(--text-muted);
    margin: -8px 0 16px 0;
}

.font-settings-group .form-group {
    margin-bottom: 16px;
}

.font-settings-group .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.font-settings-group .form-input {
    width: 100%;
}

.font-settings-group .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.font-settings-group .form-row .form-group {
    margin-bottom: 16px;
}

/* Font Subsection Styling */
.font-subsection {
    background: var(--bg-tertiary, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-light);
}

.font-subsection h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.font-subsection h6 i {
    color: var(--theme-primary);
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.font-subsection h6 small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.font-subsection .form-group {
    margin-bottom: 12px;
}

.font-subsection .form-group:last-child {
    margin-bottom: 0;
}

.font-subsection .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.font-subsection .form-row:last-child {
    margin-bottom: 0;
}

.font-subsection .form-help {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.settings-divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

/* Slider with value display */
.slider-with-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-with-value .form-range {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.slider-with-value .form-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-with-value .form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-with-value .slider-value {
    min-width: 50px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-action-text, #fff);
    background: var(--theme-primary);
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Font Preview Container */
.font-preview-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
}

.font-preview-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.font-preview-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 6px 10px 0 10px;
}

.font-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--border-light);
}

.font-preview-item i {
    color: var(--theme-primary);
    font-size: 14px;
}

.font-preview-item.nested {
    margin-left: 20px;
}

.font-preview-item.nested i {
    color: var(--text-muted);
}

.font-preview-response {
    background: var(--bg-primary);
    border-radius: 6px;
    padding: 10px;
    border-left: 3px solid var(--theme-primary);
    margin-bottom: 8px;
}

.font-preview-response p {
    margin: 0;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.5;
}

/* Preview Input Field */
.font-preview-input {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.font-preview-input span {
    color: var(--text-muted);
    font-size: 11px;
}

/* Preview Action Buttons */
.font-preview-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.font-preview-actions .action-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.font-preview-actions .action-btn i {
    font-size: 9px;
}

/* Font Settings Actions */
.font-settings-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-settings-group .form-row {
        grid-template-columns: 1fr;
    }
    
    .font-settings-actions {
        flex-direction: column;
    }
    
    .font-settings-actions .modal-btn {
        width: 100%;
    }
}

/* ========================================== */
/* TOGGLE OPTION ROW - For Menu Behavior */
/* ========================================== */

.toggle-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.toggle-option-row:last-child {
    border-bottom: none;
}

.toggle-option-info {
    flex: 1;
    min-width: 0;
}

.toggle-option-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.toggle-option-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

/* ========================================== */
/* COLOR REFERENCE PANEL - Menu Color Accents */
/* ========================================== */

.color-reference-panel {
    background: var(--bg-tertiary, rgba(0,0,0,0.05));
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-light);
}

.color-reference-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.color-reference-row:first-child {
    padding-top: 0;
}

.color-reference-row:last-child {
    padding-bottom: 0;
}

.color-ref-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 90px;
}

.color-ref-swatches {
    display: flex;
    gap: 12px;
}

.color-ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.color-ref-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid var(--border-medium);
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-ref-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.color-ref-name {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Light theme swatches - 6 Quick Setup colors */
.color-ref-swatch.color-ref-light[data-color="primary"] { background: var(--light-theme-primary, #11a3f0); }
.color-ref-swatch.color-ref-light[data-color="accent"] { background: var(--light-theme-secondary, #11a3f0); }
.color-ref-swatch.color-ref-light[data-color="user"] { background: var(--light-theme-user, #e8956a); }
.color-ref-swatch.color-ref-light[data-color="bg"] { background: var(--light-bg-primary, #ffffff); border: 1px solid var(--border-medium); }
.color-ref-swatch.color-ref-light[data-color="text"] { background: var(--light-text-primary, #0f172a); }
.color-ref-swatch.color-ref-light[data-color="action"] { background: var(--light-theme-action, #11a3f0); }

/* Dark theme swatches - 6 Quick Setup colors */
.color-ref-swatch.color-ref-dark[data-color="primary"] { background: var(--dark-theme-primary, #75d1ff); }
.color-ref-swatch.color-ref-dark[data-color="accent"] { background: var(--dark-theme-secondary, #4ade80); }
.color-ref-swatch.color-ref-dark[data-color="user"] { background: var(--dark-theme-user, #4ade80); }
.color-ref-swatch.color-ref-dark[data-color="bg"] { background: var(--dark-bg-primary, #1e1e1e); }
.color-ref-swatch.color-ref-dark[data-color="text"] { background: var(--dark-text-primary, #d4d4d4); }
.color-ref-swatch.color-ref-dark[data-color="action"] { background: var(--dark-theme-action, #4ade80); }

/* Color picker select with color indicator */
.color-picker-select {
    padding-left: 32px !important;
    background-position: 8px center !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
}

/* ========================================== */
/* LOGOS & IDENTITY SECTION - Modern UI */
/* ========================================== */

.logo-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.logo-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.logo-card:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.logo-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.logo-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.logo-card-icon.light {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
}

.logo-card-icon.dark {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    color: #9ca3af;
}

.logo-card-title h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.logo-card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.logo-preview-area {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px;
    border-radius: 8px;
    border: 2px dashed var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.logo-preview-area.light {
    background: #ffffff;
}

.logo-preview-area.dark {
    background: #1a1a1a;
}

.logo-preview-area:hover {
    border-color: var(--theme-primary);
    background: var(--bg-hover);
}

.logo-preview-area.dark:hover {
    background: #252525;
}

.logo-preview-area img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.logo-placeholder i {
    font-size: 32px;
    opacity: 0.4;
}

.logo-placeholder span {
    font-size: 12px;
}

.logo-card-footer {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.logo-info {
    flex: 1;
    min-width: 0;
}

.logo-filename {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-info small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.logo-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.logo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    border: none;
}

.logo-upload-btn:hover {
    background: var(--theme-primary-hover);
    transform: translateY(-1px);
}

.logo-upload-btn.small {
    padding: 6px 10px;
    font-size: 12px;
}

.logo-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logo-remove-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.logo-remove-btn.small {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* Browser Identity Section */
.browser-identity-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.browser-identity-section .section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.browser-identity-section .section-title i {
    color: var(--theme-primary);
}

.browser-identity-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .browser-identity-grid {
        grid-template-columns: 1fr;
    }
}

/* Favicon Card */
.favicon-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.favicon-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.favicon-preview {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 2px dashed var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    overflow: hidden;
    flex-shrink: 0;
}

.favicon-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.favicon-placeholder {
    color: var(--text-muted);
    font-size: 24px;
    opacity: 0.3;
}

.favicon-info h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.favicon-filename {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0;
}

.favicon-info small {
    font-size: 11px;
    color: var(--text-muted);
}

.favicon-actions {
    display: flex;
    gap: 8px;
}

/* App Title Card */
.app-title-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-title-input-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.app-title-input-wrapper input {
    width: 100%;
}

/* Mock Browser Tab Preview */
.browser-tab-preview {
    display: flex;
    justify-content: center;
}

.mock-browser-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #e8e8e8 0%, #d0d0d0 100%);
    border-radius: 8px 8px 0 0;
    border: 1px solid #bbb;
    border-bottom: none;
    font-size: 13px;
    color: #333;
    max-width: 200px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .mock-browser-tab {
    background: linear-gradient(180deg, #3a3a3a 0%, #2d2d2d 100%);
    border-color: #555;
    color: #ddd;
}

.tab-favicon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tab-favicon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.tab-favicon i {
    font-size: 12px;
    color: #888;
}

.tab-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.tab-close {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

/* Save Section */
.logos-save-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
}

/* Split View (Options + Preview) */
.customize-split-view {
    display: flex;
    gap: 32px;
}

.customize-options {
    flex: 1;
    min-width: 300px;
}

.customize-preview {
    flex: 0 0 350px;
    max-width: 400px;
}

/* Preview Header */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.preview-theme-toggle {
    display: flex;
    gap: 4px;
}

.preview-theme-btn {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.preview-theme-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-action-text);
}

/* ============================================================================
   REALISTIC APP PREVIEW - Mimics actual GPTWeb interface
   ============================================================================ */

.preview-app-mockup {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

/* App Header */
.preview-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.preview-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-logo-area {
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-logo-icon {
    width: 20px;
    height: 20px;
    background: var(--theme-primary, #11a3f0);
    border-radius: 4px;
}

.preview-brand-name {
    font-weight: 600;
    font-size: 12px;
    color: #1f2937;
}

.preview-header-right {
    display: flex;
    gap: 6px;
}

.preview-cta-btn {
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 3px;
}

.preview-cta-green {
    background: transparent;
    border-color: #10b981;
    color: #10b981;
}

.preview-cta-primary {
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    border-color: var(--theme-primary, #11a3f0);
}

/* App Body */
.preview-app-body {
    flex: 1;
    display: flex;
    background: #f9fafb;
}

/* Sidebar */
.preview-sidebar {
    width: 120px;
    background: #f3f4f6;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.preview-sidebar-content {
    flex: 1;
    padding: 8px 6px;
    overflow-y: auto;
}

.preview-sidebar-section {
    margin-bottom: 12px;
}

.preview-sidebar-title {
    font-size: 8px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 4px;
    padding-left: 4px;
}

.preview-sidebar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 9px;
    color: #4b5563;
    border-radius: 4px;
    cursor: pointer;
}

.preview-sidebar-item:hover {
    background: #e5e7eb;
}

.preview-sidebar-item i {
    font-size: 8px;
    width: 12px;
    color: #9ca3af;
}

/* Chat Area */
.preview-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
}

.preview-messages {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.preview-msg {
    display: flex;
    gap: 8px;
}

.preview-msg-user,
.preview-msg-ai {
    justify-content: flex-start;
}

.preview-msg-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    flex-shrink: 0;
}

.preview-msg-avatar.preview-avatar-user {
    background: #e8956a;
    color: var(--theme-action-text);
}

.preview-msg-avatar.preview-avatar-ai {
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    font-size: 10px;
}

.preview-msg-content {
    padding: 6px 10px;
    background: #e5e7eb;
    border-radius: 14px;
    font-size: 9px;
    color: #374151;
    max-width: 75%;
}

.preview-msg-bubble {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px;
    border-left: 3px solid var(--theme-primary, #11a3f0);
    max-width: 85%;
}

.preview-msg-title {
    font-weight: 600;
    font-size: 9px;
    margin-bottom: 3px;
    color: #1f2937;
}

.preview-msg-bubble p {
    font-size: 8px;
    color: #4b5563;
    line-height: 1.3;
    margin: 0;
}

.preview-msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid #e5e7eb;
}

.preview-msg-actions button {
    padding: 2px 5px;
    font-size: 7px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    color: #6b7280;
    cursor: pointer;
}

.preview-msg-actions button i {
    margin-right: 2px;
}

/* Input Area in Preview */
.preview-input-area {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    align-items: center;
}

.preview-input-area input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 9px;
    background: #ffffff;
    color: #9ca3af;
}

.preview-send-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--theme-primary, #11a3f0);
    border: none;
    color: var(--theme-action-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
}

/* User Profile at bottom of sidebar */
.preview-user-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
}

.preview-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8956a;
    color: var(--theme-action-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
}

.preview-user-info {
    flex: 1;
    min-width: 0;
}

.preview-user-name {
    font-size: 9px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-user-email {
    font-size: 7px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark theme preview */
.preview-app-mockup.preview-dark {
    background: #1e1e1e;
}

.preview-app-mockup.preview-dark .preview-app-header {
    background: #252526;
    border-color: #3e3e42;
}

.preview-app-mockup.preview-dark .preview-brand-name {
    color: #d4d4d4;
}

.preview-app-mockup.preview-dark .preview-app-body {
    background: #1e1e1e;
}

.preview-app-mockup.preview-dark .preview-sidebar {
    background: #252526;
    border-color: #3e3e42;
}

.preview-app-mockup.preview-dark .preview-sidebar-item {
    color: #a0a0a0;
}

.preview-app-mockup.preview-dark .preview-chat-area {
    background: #1e1e1e;
}

.preview-app-mockup.preview-dark .preview-msg-bubble {
    background: #252526;
    border-color: #3e3e42;
}

.preview-app-mockup.preview-dark .preview-msg-title {
    color: #d4d4d4;
}

.preview-app-mockup.preview-dark .preview-msg-bubble p {
    color: #a0a0a0;
}

.preview-app-mockup.preview-dark .preview-input-area {
    background: #252526;
    border-color: #3e3e42;
}

.preview-app-mockup.preview-dark .preview-input-area input {
    background: #1e1e1e;
    border-color: #3e3e42;
    color: #d4d4d4;
}

.preview-app-mockup.preview-dark .preview-user-profile {
    background: #252526;
    border-color: #3e3e42;
}

.preview-app-mockup.preview-dark .preview-user-name {
    color: #d4d4d4;
}

/* Legacy Preview Chat Mockup (keep for backward compat) */
.preview-chat-mockup {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    min-height: 300px;
}

.preview-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.preview-logo-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.preview-app-name {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.preview-help-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-muted);
}

.preview-chat-messages {
    padding: 16px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.preview-message-user {
    justify-content: flex-end;
}

.preview-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.preview-avatar-ai {
    background: var(--theme-primary);
}

.preview-avatar-user {
    background: var(--theme-secondary-dark);
}

.preview-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 70%;
    font-size: 13px;
    line-height: 1.4;
}

.preview-bubble-ai {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 16px 16px 16px 4px;
}

.preview-bubble-user {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-radius: 16px 16px 4px 16px;
}

.preview-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-primary);
}

.preview-chat-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg-secondary);
}

.preview-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: none;
    color: var(--theme-action-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preview Toggle Button (Mobile) */
.preview-toggle-btn {
    display: none;
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* ============================================================================
   QUICK SETUP - Dual Theme Columns (Light & Dark)
   ============================================================================ */

.quick-setup-dual-themes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .quick-setup-dual-themes {
        grid-template-columns: 1fr;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }
}

.quick-setup-theme-column {
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 500px;
}

.quick-setup-theme-column[data-theme="dark"] {
    background: #1e1e1e;
    border-color: #3e3e42;
}

.quick-theme-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #f59e0b;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
}

.quick-theme-header i {
    font-size: 18px;
}

.quick-theme-header.dark {
    color: #8b5cf6;
    border-color: #3e3e42;
}

.quick-theme-header.dark span {
    color: #d4d4d4;
}


/* Large Preview Container */
.quick-preview-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.quick-preview-container.dark {
    background: #1e1e1e;
    border-color: #3e3e42;
}

/* Color Swatch Bar */
.quick-color-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid #e5e7eb;
    justify-content: center;
}

.quick-preview-container.dark .quick-color-bar {
    background: rgba(255,255,255,0.03);
    border-color: #3e3e42;
}

.color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.color-swatch input[type="color"] {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.color-swatch input[type="color"]:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.quick-preview-container.dark .color-swatch input[type="color"] {
    border-color: #4a4a4a;
}

.swatch-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-preview-container.dark .swatch-label {
    color: #9ca3af;
}

/* Background Pattern Controls */
.quick-pattern-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    align-items: start;
    padding: 8px 12px;
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid #e5e7eb;
    align-items: flex-end;
}

.quick-preview-container.dark .quick-pattern-row {
    background: rgba(255,255,255,0.02);
    border-color: #3e3e42;
}

.pattern-select-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pattern-opacity-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pattern-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pattern-label i {
    margin-right: 3px;
    font-size: 9px;
}

.pattern-select-wrapper select {
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.quick-preview-container.dark .pattern-select-wrapper select {
    background: #2d2d30;
    color: #d4d4d4;
    border-color: #4a4a4e;
}

.opacity-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.opacity-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: var(--theme-primary, #11a3f0);
}

.opacity-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    min-width: 32px;
    text-align: right;
}

/* Pattern Controls — Grouped Sections */
.pattern-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

.pattern-section {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 10px 16px 12px 16px;
    background: rgba(0,0,0,0.015);
}

.quick-setup-theme-column[data-theme="dark"] .pattern-section {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.pattern-section-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pattern-section-title i {
    font-size: 9px;
    opacity: 0.7;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-section-title {
    color: #9ca3af;
}

.pattern-slider-row {
    display: grid;
    grid-template-columns: 52px 1fr 46px;
    align-items: center;
    gap: 0 8px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    height: 28px;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row {
    color: #9ca3af;
}

.pattern-slider-row input[type="range"],
.pattern-content-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    width: 100%;
    cursor: pointer;
    outline: none;
}

.pattern-slider-row input[type="range"]::-webkit-slider-runnable-track,
.pattern-content-row input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
}

.pattern-slider-row input[type="range"]::-webkit-slider-thumb,
.pattern-content-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-primary, #3b82f6);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    margin-top: -5px;
}

.pattern-slider-row input[type="range"]::-moz-range-track,
.pattern-content-row input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
}

.pattern-slider-row input[type="range"]::-moz-range-thumb,
.pattern-content-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-primary, #3b82f6);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row input[type="range"],
.quick-setup-theme-column[data-theme="dark"] .pattern-content-row input[type="range"] {
    background: #4a4a4e;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row input[type="range"]::-webkit-slider-runnable-track,
.quick-setup-theme-column[data-theme="dark"] .pattern-content-row input[type="range"]::-webkit-slider-runnable-track {
    background: #4a4a4e;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row input[type="range"]::-webkit-slider-thumb,
.quick-setup-theme-column[data-theme="dark"] .pattern-content-row input[type="range"]::-webkit-slider-thumb {
    border-color: #fff;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row input[type="range"]::-moz-range-track,
.quick-setup-theme-column[data-theme="dark"] .pattern-content-row input[type="range"]::-moz-range-track {
    background: #4a4a4e;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row input[type="range"]::-moz-range-thumb,
.quick-setup-theme-column[data-theme="dark"] .pattern-content-row input[type="range"]::-moz-range-thumb {
    border-color: #fff;
}

.pattern-slider-row .slider-value {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    color: #fff !important;
    white-space: nowrap;
    min-width: 36px;
    padding: 2px 6px;
    border-radius: 12px;
    box-sizing: border-box;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-slider-row .slider-value {
    color: #fff !important;
}

.pattern-grid-2x2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pattern-content-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pattern-content-row .toggle-switch {
    margin: 0;
    flex-shrink: 0;
    transform: scale(0.8);
}

.pattern-content-row input[type="range"] {
    flex: 1;
}

.pattern-content-row .slider-value {
    font-size: 10px;
    color: #fff !important;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 12px;
    box-sizing: border-box;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-content-row .slider-value {
    color: #fff !important;
}

.pattern-section select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 11px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.quick-setup-theme-column[data-theme="dark"] .pattern-section select {
    background: #2d2d30;
    color: #d4d4d4;
    border-color: #4a4a4e;
}


/* Glass Settings Modal */
.glass-settings-section {
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

[data-theme="dark"] .glass-settings-section {
    background: rgba(255,255,255,0.05);
}

.glass-settings-section:last-child {
    margin-bottom: 0;
}

.glass-settings-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.glass-settings-section-title i {
    font-size: 10px;
    opacity: 0.6;
}

.glass-settings-sliders {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glass-settings-sliders .pattern-slider-row {
    grid-template-columns: 64px 1fr 46px;
}

.glass-settings-content-row {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light, #e5e7eb);
}

[data-theme="dark"] .glass-settings-content-row {
    border-top-color: rgba(255,255,255,0.08);
}

#glassSettingsModal .pattern-slider-row .slider-value {
    background: var(--primary, #4f46e5);
}

/* Side-by-side row: pattern (left, flex) + glass (right, auto-width) */
.pattern-controls-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.glass-section-compact {
    width: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
}

.glass-section-compact .pattern-section-title {
    font-size: 9px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.glass-settings-launch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border-light, #d1d5db);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #6b7280);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.glass-settings-launch-btn i {
    font-size: 10px;
    opacity: 0.7;
}

.glass-settings-launch-btn:hover {
    border-color: var(--primary, #4f46e5);
    color: var(--primary, #4f46e5);
    background: rgba(79, 70, 229, 0.04);
}

.quick-setup-theme-column[data-theme="dark"] .glass-settings-launch-btn {
    border-color: #4a4a4e;
    color: #9ca3af;
    background: rgba(255,255,255,0.04);
}

.quick-setup-theme-column[data-theme="dark"] .glass-settings-launch-btn:hover {
    border-color: var(--primary, #818cf8);
    color: var(--primary, #818cf8);
    background: rgba(129, 140, 248, 0.06);
}

/* Large App Preview */
.quick-app-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    font-size: 11px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
}

.quick-app-preview.dark {
    background: #171717;
    border-color: #2d2d2d;
}

/* Preview Header */
.qp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.quick-app-preview.dark .qp-header {
    background: #1e1e1e;
    border-color: #2d2d2d;
}

.qp-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qp-menu-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: default;
    font-size: 12px;
    border-radius: 4px;
}

.quick-app-preview.dark .qp-menu-btn {
    color: #9ca3af;
}

.qp-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
    font-size: 14px;
    border-radius: 6px;
}

.qp-title {
    font-weight: 700;
    font-size: 12px;
    color: #1f2937;
}

.quick-app-preview.dark .qp-title {
    color: #f3f4f6;
}

.qp-header-right {
    display: flex;
    gap: 6px;
}

.qp-btn {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 4px;
}

.qp-btn i {
    font-size: 9px;
}

.qp-btn-accent {
    background: transparent;
    border: 1.5px solid #10b981;
    color: #10b981;
}

.qp-btn-primary {
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
}

/* Preview Body */
.qp-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* Preview Sidebar */
.qp-sidebar {
    width: 130px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quick-app-preview.dark .qp-sidebar {
    background: #1e1e1e;
    border-color: #2d2d2d;
}

.qp-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qp-sidebar-title {
    font-size: 8px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quick-app-preview.dark .qp-sidebar-title {
    color: #94a3b8;
}

.qp-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 10px;
    color: #475569;
    background: transparent;
    cursor: default;
}

.quick-app-preview.dark .qp-sidebar-item {
    color: #cbd5e1;
}

/* Item icon styling moved to .qp-item-icon */

/* User Profile in Sidebar */
.qp-user-profile {
    margin-top: auto;
    padding: 10px 8px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.quick-app-preview.dark .qp-user-profile {
    border-color: #2d2d2d;
}

.qp-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--theme-user, #e8956a);
    color: var(--theme-action-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.qp-user-info {
    flex: 1;
    min-width: 0;
}

.qp-user-name {
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-app-preview.dark .qp-user-name {
    color: #e5e7eb;
}

.qp-user-email {
    font-size: 9px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Preview Tagline */
.qp-tagline {
    font-size: 9px;
    color: #6b7280;
    margin-left: 4px;
    font-weight: 400;
}

.quick-app-preview.dark .qp-tagline {
    color: #9ca3af;
}

/* Preview Sidebar Title Info Icon */
.qp-sidebar-title i {
    font-size: 8px;
    opacity: 0.5;
    margin-left: 4px;
}

/* Preview Item Icons */
.qp-item-icon {
    font-size: 10px;
    width: 14px;
    text-align: center;
    margin-right: 6px;
    color: #94a3b8;
}

.quick-app-preview.dark .qp-item-icon {
    color: #64748b;
}

/* Preview User Chevron */
.qp-user-chevron {
    font-size: 8px;
    color: #9ca3af;
    margin-left: auto;
}

/* Preview Chat */
.qp-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #f8fafc;
}

.quick-app-preview.dark .qp-chat {
    background: #1a1a1a;
}

.qp-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.qp-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.qp-msg-user {
    /* User messages align left like AI messages in actual product */
}

.qp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    flex-shrink: 0;
}

.qp-avatar-user {
    background: #e8956a;
    color: var(--theme-action-text);
}

.qp-avatar-ai {
    background: var(--theme-primary, #11a3f0);
    color: var(--theme-action-text);
}

.qp-bubble {
    padding: 10px 12px;
    border-radius: 12px;
    max-width: 85%;
    font-size: 10px;
    line-height: 1.5;
}

/* User bubble - styled by updateThemePreview() via inline styles */
.qp-bubble.qp-bubble-user,
.quick-app-preview .qp-bubble.qp-bubble-user {
    background: #f8fafc;
    color: #ffffff;
    border-radius: 4px 12px 12px 4px;
    padding: 10px 12px;
    border: none;
}

.qp-bubble-ai {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--theme-primary, #11a3f0);
    border-radius: 4px 12px 12px 4px;
    color: #1e293b;
}

/* Dark mode user bubble - styled by updateThemePreview() via inline styles */
.quick-app-preview.dark .qp-bubble.qp-bubble-user {
    background: #262626;
    color: #ffffff;
    border: none;
}

.quick-app-preview.dark .qp-bubble-ai {
    background: #262626;
    border-color: #3f3f46;
    border-left-color: var(--theme-primary, #11a3f0);
    color: #e5e7eb;
}

.qp-bubble-title {
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 4px;
    color: #1f2937;
}

.quick-app-preview.dark .qp-bubble-title {
    color: #e5e7eb;
}

.qp-bubble-ai p {
    margin: 0 0 6px 0;
}

.qp-bubble-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.qp-bubble-actions button {
    padding: 3px 6px;
    font-size: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 3px;
}

.quick-app-preview.dark .qp-bubble-actions button {
    border-color: #3e3e42;
    color: #9ca3af;
}

/* Preview Input */
.qp-input-area {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    padding: 12px;
    background: transparent;
}

.qp-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--theme-accent, #10b981);
    border-radius: 12px;
    background: #ffffff;
}

.qp-input-area input {
    flex: 1;
    padding: 4px 0;
    border: none;
    font-size: 10px;
    background: transparent;
    color: #64748b;
    outline: none;
}

.qp-input-area input::placeholder {
    color: #94a3b8;
}

.quick-app-preview.dark .qp-input-wrapper {
    background: #262626;
    border-color: var(--theme-accent, #10b981);
}

.quick-app-preview.dark .qp-input-area input {
    color: #e2e8f0;
}

.quick-app-preview.dark .qp-input-area input::placeholder {
    color: #64748b;
}

.qp-send-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--theme-action, #f97316);
    color: var(--theme-action-text, #ffffff);
    cursor: default;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Apply Buttons */
.quick-apply-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f59e0b;
    color: var(--theme-action-text);
    transition: all 0.2s;
}

.quick-apply-btn:hover {
    background: #d97706;
}

.quick-apply-btn.dark {
    background: #8b5cf6;
}

.quick-apply-btn.dark:hover {
    background: #7c3aed;
}

/* Global Actions */
.quick-setup-global-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.quick-setup-note {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    border-left: 3px solid var(--theme-primary);
}

/* Chat Theme Sections */
.chat-theme-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.chat-theme-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.chat-theme-section h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.bubble-shape-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bubble-shape-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bubble-shape-option:hover {
    border-color: var(--theme-primary);
}

.bubble-shape-option input:checked + .bubble-shape-preview {
    border-color: var(--theme-primary);
}

.bubble-shape-preview {
    width: 40px;
    height: 24px;
    background: var(--theme-primary);
}

.bubble-shape-preview.rounded { border-radius: 12px; }
.bubble-shape-preview.soft { border-radius: 8px; }
.bubble-shape-preview.square { border-radius: 2px; }
.bubble-shape-preview.pill { border-radius: 24px; }

.chat-theme-colors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.chat-theme-color {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-theme-color label {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-theme-color input[type="color"] {
    width: 100%;
    height: 36px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
}

.chat-theme-typography {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.chat-theme-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.chat-theme-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Layout Presets */
.layout-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.layout-preset-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.layout-preset-option:hover {
    border-color: var(--theme-primary);
    background: var(--bg-tertiary);
}

/* Highlight the ENTIRE tile when selected */
.layout-preset-option:has(input:checked) {
    border-color: var(--theme-primary);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.layout-preset-option:has(input:checked) .layout-preset-preview {
    border-color: var(--theme-primary);
}

.layout-preset-option:has(input:checked) .layout-preset-name {
    color: var(--theme-primary);
    font-weight: 700;
}

.layout-preset-option:has(input:checked) .layout-preset-desc {
    color: var(--theme-primary);
    opacity: 0.8;
}

/* Fallback for browsers without :has() support - JS adds this class */
.layout-preset-option.selected {
    border-color: var(--theme-primary);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.layout-preset-option.selected .layout-preset-preview {
    border-color: var(--theme-primary);
}

.layout-preset-option.selected .layout-preset-name {
    color: var(--theme-primary);
    font-weight: 700;
}

.layout-preset-option.selected .layout-preset-desc {
    color: var(--theme-primary);
    opacity: 0.8;
}

.layout-preset-option input {
    display: none;
}

/* Layout preset name and description styling */
.layout-preset-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 8px;
}

.layout-preset-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.layout-preset-preview {
    width: 100%;
    aspect-ratio: 16/10;
    background: #f8f9fa;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Realistic Layout Preview - mimics actual app structure */
.lp-realistic {
    padding: 0;
}

/* Header section */
.lp-realistic .lp-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.lp-realistic .lp-logo {
    width: 14px;
    height: 14px;
    background: var(--theme-primary);
    border-radius: 3px;
}

.lp-realistic .lp-title {
    flex: 1;
    height: 6px;
    background: #374151;
    border-radius: 2px;
    max-width: 60px;
}

.lp-realistic .lp-ctas {
    display: flex;
    gap: 3px;
}

.lp-realistic .lp-cta {
    width: 24px;
    height: 8px;
    background: var(--theme-primary);
    border-radius: 2px;
    opacity: 0.7;
}

.lp-realistic .lp-cta:first-child {
    background: #10b981;
}

/* Body section */
.lp-realistic .lp-body {
    flex: 1;
    display: flex;
    gap: 0;
}

.lp-realistic .lp-body-full {
    height: 100%;
}

/* Sidebar */
.lp-realistic .lp-sidebar {
    width: 40px;
    background: #f3f4f6;
    border-right: 1px solid #e5e7eb;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lp-realistic .lp-nav-item {
    height: 6px;
    background: #d1d5db;
    border-radius: 2px;
}

/* Chat area */
.lp-realistic .lp-chat {
    flex: 1;
    background: #f9fafb;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-realistic .lp-chat-full {
    width: 100%;
}

/* Messages */
.lp-realistic .lp-message {
    height: 12px;
    border-radius: 4px;
    max-width: 70%;
}

.lp-realistic .lp-message.lp-ai {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    align-self: flex-start;
}

.lp-realistic .lp-message.lp-user {
    background: var(--theme-primary);
    align-self: flex-end;
}

/* Input */
.lp-realistic .lp-input {
    height: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-top: auto;
}

.layout-preset-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.layout-preset-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.layout-note {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.layout-note i {
    color: var(--theme-primary);
    margin-right: 6px;
}

/* Layout Context Sections (Standard, Iframe, Widget) */
.layout-context-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.layout-context-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.layout-context-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-action-text);
    font-size: 18px;
    flex-shrink: 0;
}

.layout-context-info h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.layout-context-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.layout-context-section .layout-presets-grid {
    gap: 12px;
}

.layout-context-section .layout-preset-option {
    padding: 12px;
}

.layout-context-section .layout-preset-preview {
    aspect-ratio: 16/9;
    margin-bottom: 8px;
}

/* Compact Context Options (per-context width/profile settings) */
.layout-context-options {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-light);
    padding: 12px 16px;
    margin: 0 -16px -16px -16px;
    border-radius: 0 0 12px 12px;
}

.context-option-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.context-option {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.context-option-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.context-option-label i {
    font-size: 11px;
    opacity: 0.7;
}

.context-option input[type="range"] {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 2px;
    outline: none;
}

.context-option input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.context-option input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.context-option input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: none;
}

.context-option-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-primary);
    min-width: 36px;
    text-align: right;
}

.context-option.context-option-toggle {
    flex: 0 0 auto;
    min-width: auto;
}

/* Small toggle switch variant for compact options */
.toggle-switch-sm {
    width: 32px;
    height: 18px;
}

.toggle-switch-sm .toggle-slider {
    width: 32px;
    height: 18px;
}

.toggle-switch-sm .toggle-slider:before {
    width: 14px;
    height: 14px;
    bottom: 2px;
    left: 2px;
}

.toggle-switch-sm input:checked + .toggle-slider:before {
    transform: translateX(14px);
}

/* Hide profile toggle for layouts that have sidebar */
.layout-context-section[data-context] .context-option-toggle {
    transition: opacity 0.2s ease;
}

.layout-context-section[data-context].has-sidebar .context-option-toggle {
    opacity: 0.4;
    pointer-events: none;
}

/* Responsive adjustments for compact options */
@media (max-width: 768px) {
    .context-option-row {
        gap: 16px;
    }
    
    .context-option {
        min-width: 150px;
    }
    
    .context-option input[type="range"] {
        max-width: 100px;
    }
}

/* Widget Button Configuration */
.widget-button-config,
.notification-dot-config {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.widget-button-config h5,
.notification-dot-config h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-button-config h5 i,
.notification-dot-config h5 i {
    color: var(--theme-primary);
}

.config-desc {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Shape Options */
.shape-options {
    display: flex;
    gap: 16px;
}

.shape-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.shape-option input {
    display: none;
}

.shape-preview {
    width: 48px;
    height: 48px;
    background: var(--theme-primary);
    transition: all 0.15s ease;
}

.shape-preview.shape-round {
    border-radius: 50%;
}

.shape-preview.shape-square {
    border-radius: 8px;
}

.shape-option input:checked + .shape-preview {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    transform: scale(1.05);
}

.shape-option span {
    font-size: 12px;
    color: var(--text-secondary);
}

.shape-option input:checked ~ span {
    color: var(--theme-primary);
    font-weight: 600;
}

/* Icon Source Options */
.icon-source-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.icon-source-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.icon-source-option input {
    display: none;
}

.icon-source-option i {
    color: var(--text-muted);
    font-size: 14px;
}

.icon-source-option span {
    font-size: 13px;
    color: var(--text-secondary);
}

.icon-source-option:hover {
    border-color: var(--theme-primary);
}

.icon-source-option:has(input:checked) {
    border-color: var(--theme-primary);
    background: rgba(16, 185, 129, 0.05);
}

.icon-source-option:has(input:checked) i,
.icon-source-option:has(input:checked) span {
    color: var(--theme-primary);
}

/* Widget Icon Chooser */
.widget-icon-chooser {
    max-width: 200px;
}

/* Widget Image Upload */
.widget-image-upload {
    max-width: 400px;
}

.upload-area {
    border: 2px dashed var(--border-light);
    border-radius: 12px;
    background: var(--bg-primary);
    transition: all 0.15s ease;
}

.upload-area:hover {
    border-color: var(--theme-primary);
    background: rgba(16, 185, 129, 0.02);
}

.upload-placeholder {
    padding: 24px;
    text-align: center;
    cursor: pointer;
}

.upload-placeholder i {
    font-size: 32px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

.upload-placeholder span {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.upload-placeholder small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.upload-preview {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.upload-preview img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.remove-upload-btn {
    background: var(--bg-tertiary);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.remove-upload-btn:hover {
    background: #ef4444;
    color: var(--theme-action-text);
}

/* Color Picker Row */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.use-theme-color {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}

.custom-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-color-picker input[type="color"] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
}

/* Notification Dot Options */
.notification-triggers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trigger-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.trigger-option input {
    accent-color: var(--theme-primary);
}

.dot-position-options {
    display: flex;
    gap: 16px;
}

.dot-pos-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.dot-pos-option input {
    accent-color: var(--theme-primary);
}

.notification-dot-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--theme-primary);
}

.notification-dot-note i {
    color: var(--theme-primary);
    margin-right: 6px;
}

/* ===== WIDGET CONTAINER STYLING ===== */
.widget-container-config {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.widget-container-config h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-container-config h5 i {
    color: var(--theme-primary);
}

.widget-container-options {
    margin-top: 16px;
}

/* Styling Subsections */
.styling-subsection {
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 16px;
}

.styling-subsection:last-child {
    margin-bottom: 0;
}

.styling-subsection h6 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.styling-subsection h6 i {
    color: var(--theme-primary);
    font-size: 12px;
}

/* Slider with Value Display */
.slider-with-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-with-value input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border-medium);
    -webkit-appearance: none;
    appearance: none;
}

.slider-with-value input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.slider-with-value span {
    min-width: 40px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Header Style Options */
.header-style-options {
    display: flex;
    gap: 16px;
}

.header-style-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.header-style-option input[type="radio"] {
    display: none;
}

.header-style-option .style-preview {
    width: 60px;
    height: 50px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.header-style-option:hover .style-preview {
    border-color: var(--theme-primary);
}

.header-style-option input[type="radio"]:checked + .style-preview {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.style-preview .style-header {
    height: 14px;
    background: var(--theme-primary);
}

.style-preview .style-body {
    flex: 1;
    background: var(--bg-secondary);
}

.style-preview.style-square {
    border-radius: 0;
}

.style-preview.style-square .style-header {
    border-radius: 0;
}

.style-preview.style-rounded {
    border-radius: 8px 8px 0 0;
}

.style-preview.style-rounded .style-header {
    border-radius: 6px 6px 0 0;
}

.header-style-option span {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.header-style-option input[type="radio"]:checked ~ span {
    color: var(--theme-primary);
    font-weight: 600;
}

/* Toggle Hint Text */
.toggle-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Widget Notification Dot Preview */
.embed-preview-launcher {
    position: relative;
}

.widget-notification-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
    animation: dot-pulse 2s infinite;
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Launcher shape classes */
.embed-preview-launcher.shape-square {
    border-radius: 12px !important;
}

.embed-preview-launcher.shape-round {
    border-radius: 50% !important;
}

/* Launcher with image */
.embed-preview-launcher img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

/* Layout Options Section */
.layout-options-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.layout-option-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
}

.layout-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.layout-option-label i {
    color: var(--theme-primary);
}

.layout-option-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.layout-option-sublabel {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}

/* Slider Row */
.layout-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.layout-slider-row input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.layout-slider-row input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.layout-slider-row input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: none;
}

.slider-value {
    min-width: 55px;
    padding: 6px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-action-text);
    background: var(--theme-primary);
    border-radius: 16px;
}

/* Range Inputs - Global Admin Styling */
.modal-content input[type="range"],
.admin-panel input[type="range"],
#welcomeImagePreview input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--theme-primary) 0%, var(--theme-primary) 0%, var(--border-medium) 0%, var(--border-medium) 100%);
    background: var(--border-medium);
    cursor: pointer;
    outline: none;
}

.modal-content input[type="range"]::-webkit-slider-runnable-track,
.admin-panel input[type="range"]::-webkit-slider-runnable-track,
#welcomeImagePreview input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-medium);
}

.modal-content input[type="range"]::-webkit-slider-thumb,
.admin-panel input[type="range"]::-webkit-slider-thumb,
#welcomeImagePreview input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: -6px;
}

.modal-content input[type="range"]::-webkit-slider-thumb:hover,
.admin-panel input[type="range"]::-webkit-slider-thumb:hover,
#welcomeImagePreview input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.modal-content input[type="range"]::-moz-range-track,
.admin-panel input[type="range"]::-moz-range-track,
#welcomeImagePreview input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-medium);
}

.modal-content input[type="range"]::-moz-range-thumb,
.admin-panel input[type="range"]::-moz-range-thumb,
#welcomeImagePreview input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Toggle Row */
.layout-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.layout-toggle-row span {
    font-size: 13px;
    color: var(--text-primary);
}

/* Profile Note */
.profile-mode-note {
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.profile-mode-note i {
    color: var(--theme-primary);
    margin-right: 4px;
}

.layout-actions {
    margin-top: 24px;
    text-align: center;
}

/* ============================================================================
   LAYOUT PRESET CLASSES - Applied to the chat interface
   These layouts apply to main app, widget, and iframe embed
   ============================================================================ */

/* Chat Area Width Variable - set via layout options (50-100) */
:root {
    --chat-area-width: 100;
}

/* ============================================================================
   CHAT AREA WIDTH CONTROL
   The --chat-area-width variable (50-100) controls the width of chat content.
   Applied to BOTH .chat-container (for messages) AND .input-bar-content (for input)
   ============================================================================ */

/* Chat container width - controlled by slider, floored by tier ramp.
   v1.0.512 — `--chat-area-width-floor` is set by styles-layout-left-nav.css
   in tiered @media blocks (W420 mobile-bp tiers + W440 smooth tiers) to
   auto-widen left-nav chat content as the viewport narrows, mirroring
   top-nav's `--header-nav-{header,results,input}-floor` system.
   Default floor is 0 so absent ramp is a no-op for non-left-nav layouts
   and for tenants who turned `tablet_widths_auto` off. */
.chat-container {
    width: calc(max(var(--chat-area-width), var(--chat-area-width-floor, 0)) * 1%) !important;
    max-width: calc(max(var(--chat-area-width), var(--chat-area-width-floor, 0)) * 1%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: width 0.3s ease, max-width 0.3s ease;
}

/* Input bar content width - matches chat container */
.input-bar-content {
    width: calc(max(var(--chat-area-width), var(--chat-area-width-floor, 0)) * 1%) !important;
    max-width: calc(max(var(--chat-area-width), var(--chat-area-width-floor, 0)) * 1%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: width 0.3s ease, max-width 0.3s ease;
}

/* Full width mode (100%) - remove all constraints */
.chat-area-full-width .chat-container {
    width: 100% !important;
    max-width: 100% !important;
}

.chat-area-full-width .input-bar-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Header nav mode: per-zone widths override global chat-area-width.
   Must appear AFTER the global .input-bar-content rule to win the cascade.
   Gated behind min-width: 769px so it never applies on mobile. */
@media (min-width: 769px) {
    .header-nav-mode .input-bar-content {
        /* W440 (2026-05-02): max(adminValue, viewport-tier floor). See
         * the equivalent rule on .header-nav-content for full rationale. */
        width: calc(max(var(--header-nav-input-width, var(--chat-area-width, 75)), var(--header-nav-input-floor, 0)) * 1vw) !important;
        max-width: calc(max(var(--header-nav-input-width, var(--chat-area-width, 75)), var(--header-nav-input-floor, 0)) * 1vw) !important;
    }
}

/* Full Layout - Header + Sidebar + Chat (default) */
.layout-full .chat-container {
    padding: var(--chat-container-padding, 0 20px);
}

/* ===== FLOATING PROFILE (for layouts without sidebar) ===== */
/* MUST match input bar height exactly: border-top + padding + content + padding */
/* Input bar: 1px border + 24px top pad + 80px content (wrapper) + 16px bottom pad = 121px */

/* CSS Variables for floating profile width */
:root {
    --floating-profile-width-minimal: 100px;  /* Avatar (48px) + gap + chevron (32px) + padding */
    --floating-profile-width-expanded: 260px; /* Full width with name/email */
    --floating-profile-width: var(--floating-profile-width-expanded);
}

/* Wrapper container - fixed at bottom-left */
.floating-profile-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1001;
    display: none;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    width: var(--floating-profile-width);
    box-sizing: border-box;
    transition: width 0.2s ease;
}

/* Show floating profile when enabled */
.show-floating-profile .floating-profile-wrapper {
    display: flex;
}

/* Profile card container - EXACTLY matches input bar inner height (80px from wrapper) */
/* Plus same padding as input bar (24px top, 16px bottom) */
.floating-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 16px 16px 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 12px;
    cursor: pointer;
    min-height: 80px; /* Same as .chat-input-wrapper height */
    box-sizing: content-box;
}

.floating-profile-card .profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.floating-profile-card .profile-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    color: var(--theme-action-text);
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.floating-profile-card .profile-info {
    flex: 1;
    min-width: 0;
}

.floating-profile-card .profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-profile-card .profile-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-profile-card .profile-dropdown-trigger {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.floating-profile-card .profile-dropdown-trigger:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.floating-profile-card .profile-dropdown-trigger.active i {
    transform: rotate(180deg);
}

/* ===== MINIMAL MODE: Avatar + Chevron side by side ===== */
.floating-profile-mode-minimal {
    --floating-profile-width: var(--floating-profile-width-minimal);
}

.floating-profile-mode-minimal .floating-profile-wrapper {
    width: var(--floating-profile-width-minimal);
}

.floating-profile-mode-minimal .floating-profile-card {
    /* Center the avatar+chevron group */
    justify-content: center;
    padding: 24px 12px 16px 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px; /* Gap between avatar and chevron */
}

.floating-profile-mode-minimal .floating-profile-card .profile-main {
    flex: 0 0 auto; /* Don't grow, don't shrink */
    gap: 0;
}

.floating-profile-mode-minimal .floating-profile-card .profile-info {
    display: none !important;
}

.floating-profile-mode-minimal .floating-profile-card .profile-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

/* Chevron MUST be visible and to the right of avatar in minimal mode */
.floating-profile-mode-minimal .floating-profile-card .profile-dropdown-trigger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
}

/* ===== EXPANDED MODE ===== */
.floating-profile-mode-expanded {
    --floating-profile-width: var(--floating-profile-width-expanded);
}

.floating-profile-mode-expanded .floating-profile-wrapper {
    width: var(--floating-profile-width-expanded);
}

/* ===== INPUT BAR POSITIONING ===== */
/* When floating profile is shown, input bar starts AFTER the profile */
/* Note: show-floating-profile is the primary indicator - layout class may not always be present */

/* OLD: External floating profile - offset input bar to make room for profile
   These rules only apply when profile is NOT inline (i.e., external position)
   When profile is inline (.profile-inline), input bar starts at left: 0 */

/* Minimal profile mode: 100px - ONLY when profile is external (not inline) */
.show-floating-profile.floating-profile-mode-minimal .input-bar-fixed:not(.profile-inline) {
    left: 100px !important;
    transition: left 0.2s ease;
}

/* Expanded profile mode: 260px - ONLY when profile is external (not inline) */
.show-floating-profile.floating-profile-mode-expanded .input-bar-fixed:not(.profile-inline) {
    left: 260px !important;
    transition: left 0.2s ease;
}

/* Fallback when mode class not set: assume expanded (260px) - ONLY when external */
.show-floating-profile .input-bar-fixed:not(.profile-inline) {
    left: 260px !important;
    transition: left 0.2s ease;
}

/* Input bar content: fill the container which is already positioned correctly */
.show-floating-profile .input-bar-content {
    /* Container (.input-bar-fixed) already has left: 260px and right: 0 */
    /* Content just needs to fill it */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Chat container also uses percentage of available space */
.show-floating-profile .chat-container {
    width: calc(var(--chat-area-width, 100) * 1%) !important;
    max-width: none !important;
}

/* ===== DROPDOWN MENU - Positioned above floating profile card ===== */
.floating-dropdown-menu {
    position: fixed;
    z-index: 1200; /* Above sidebar dropdown (1100), below modals */
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    max-width: 250px;
    padding: 6px;
}

.floating-dropdown-menu.show {
    /* display is controlled via inline style in JavaScript */
    animation: floatMenuFadeIn 0.15s ease-out;
}

@keyframes floatMenuFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dropdown items */
.floating-dropdown-menu .dropdown-item {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.floating-dropdown-menu .dropdown-item:hover {
    background: var(--hover-bg);
}

.floating-dropdown-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
}

/* ===== MOBILE: Hide floating profile ===== */
@media (max-width: 768px) {
    .floating-profile-wrapper {
        display: none !important;
    }
    
    /* transition: none prevents visible "slide" effect during initialization */
    .show-floating-profile.layout-no-sidebar .input-bar-fixed,
    .show-floating-profile.layout-minimal .input-bar-fixed,
    .show-floating-profile.floating-profile-mode-minimal.layout-no-sidebar .input-bar-fixed,
    .show-floating-profile.floating-profile-mode-minimal.layout-minimal .input-bar-fixed,
    .show-floating-profile.floating-profile-mode-expanded.layout-no-sidebar .input-bar-fixed,
    .show-floating-profile.floating-profile-mode-expanded.layout-minimal .input-bar-fixed {
        left: 0 !important;
        transition: none !important;
    }
}

/* ===== PROFILE MODE SELECTOR (Admin Panel) ===== */
.profile-mode-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-mode-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Profile mode selector container */
.profile-mode-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.profile-mode-label {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-mode-label i {
    color: var(--text-muted);
}

.profile-mode-options {
    display: flex;
    gap: 16px;
}

.profile-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.profile-mode-option input[type="radio"] {
    display: none;
}

.profile-mode-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    transition: all 0.2s;
}

.profile-mode-option input[type="radio"]:checked + .profile-mode-preview {
    border-color: var(--theme-secondary);
    background: rgba(var(--theme-secondary-rgb), 0.1);
}

.profile-mode-option span {
    font-size: 12px;
    color: var(--text-secondary);
}

.profile-mode-option input[type="radio"]:checked ~ span {
    color: var(--theme-secondary);
    font-weight: 600;
}

/* Mini preview avatars */
.pmp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme-secondary-dark, var(--theme-user, #e8956a));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-action-text);
    font-size: 12px;
}

.pmp-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pmp-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.pmp-email {
    font-size: 8px;
    color: var(--text-secondary);
}

.pmp-chevron {
    font-size: 10px;
    color: var(--text-muted);
}

.profile-mode-minimal-preview {
    padding: 10px;
}
.layout-full .top-nav,
.layout-full header.top-nav,
.layout-full .sidebar {
    display: flex;
}

/* Desktop only: Fix sidebar scroll issue in full layout - use fixed positioning */
@media (min-width: 769px) {
    .layout-full .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        height: calc(100vh - var(--header-height));
        z-index: 1000;
    }

    /* Offset main-content to account for fixed sidebar */
    .layout-full .main-content {
        margin-left: var(--sidebar-width);
    }

    .layout-full .sidebar.collapsed ~ .main-content,
    .layout-full:has(.sidebar.collapsed) .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* No Sidebar Layout - Header + Chat */
.layout-no-sidebar .sidebar,
.layout-no-sidebar #sidebar {
    display: none !important;
}

/* Hide hamburger/sidebar toggle in header when there's no sidebar (desktop only) */
.layout-no-sidebar .sidebar-toggle,
.layout-no-sidebar #sidebarToggle {
    display: none !important;
}

/* On mobile, show hamburger in No Sidebar layout for accessing settings/options */
@media (max-width: 768px) {
    .layout-no-sidebar .sidebar-toggle,
    .layout-no-sidebar #sidebarToggle {
        display: flex !important;
    }
}

/* ===== SIMPLIFIED MOBILE MENU (for No Sidebar layout) ===== */
.simple-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: -280px;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-sidebar);
    z-index: 100000 !important; /* Very high z-index */
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.simple-mobile-menu.open {
    left: 0 !important;
}

.simple-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.simple-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.simple-menu-close:hover {
    background: var(--hover-bg);
}

.simple-menu-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.simple-menu-content {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simple-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s;
    width: 100%;
}

.simple-menu-item:hover {
    background: var(--hover-bg);
}

.simple-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
}

.simple-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999 !important; /* Just below the menu */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Don't block clicks when hidden */
    transition: opacity 0.3s, visibility 0.3s;
}

.simple-menu-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Allow clicks when shown */
}

/* ===== SIMPLE MOBILE MENU (No Sidebar layout only) ===== */
.simple-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important; /* Off-screen by default */
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-primary) !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transition: left 0.3s ease !important;
    transform: translateX(0) !important; /* Ensure no transform interference */
    visibility: visible !important;
    opacity: 1 !important;
}

.simple-mobile-menu.open {
    left: 0 !important;
    transform: translateX(0) !important;
}

.simple-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.simple-menu-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.15s;
}

.simple-menu-close:hover {
    background: var(--hover-bg);
}

.simple-menu-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.simple-menu-content {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simple-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}

.simple-menu-item:hover {
    background: var(--hover-bg);
}

.simple-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
}

.layout-no-sidebar .main-content,
.layout-no-sidebar .chat-main,
.layout-no-sidebar .main-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.layout-no-sidebar .top-nav,
.layout-no-sidebar header.top-nav {
    display: flex;
    left: 0 !important;
    width: 100% !important;
}
/* No Sidebar - container uses width variable, not hardcoded 100% */
.layout-no-sidebar .chat-container {
    /* Width controlled by --chat-area-width variable */
}
/* Chat width respects the --chat-area-width variable */
.layout-no-sidebar .chat-messages {
    /* Width controlled by CSS variable */
}
/* Input bar left handled by floating profile rules when profile is shown */

/* No Header Layout - Sidebar + Chat (no top navigation bar) */
.layout-no-header .top-nav,
.layout-no-header header.top-nav {
    display: none !important;
}

/* Sidebar starts at top of viewport, full height */
.layout-no-header .sidebar,
.layout-no-header #sidebar {
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Desktop only: Fix sidebar to prevent scroll coupling */
@media (min-width: 769px) {
    .layout-no-header .sidebar,
    .layout-no-header #sidebar {
        position: fixed !important;
        left: 0 !important;
        z-index: 1000 !important;
    }
    
    /* Offset main-content for fixed sidebar */
    .layout-no-header .main-content {
        margin-left: var(--sidebar-width) !important;
    }
    
    .layout-no-header .sidebar.collapsed ~ .main-content,
    .layout-no-header:has(.sidebar.collapsed) .main-content {
        margin-left: var(--sidebar-collapsed-width) !important;
    }
}

/* Show mobile action buttons in no-header layout (sidebar acts as mobile menu) */
.layout-no-header .mobile-action-buttons:not(:empty) {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}

/* ===== FLOATING HAMBURGER FOR NO HEADER MOBILE ===== */
/* Hidden by default */
.no-header-mobile-hamburger {
    display: none;
}

/* Show only on mobile for No Header layout */
@media (max-width: 768px) {
    .layout-no-header .no-header-mobile-hamburger {
        display: flex !important;
        position: fixed !important;
        top: 13px !important;
        left: 16px !important;
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        color: var(--text-secondary) !important;
        font-size: 20px !important;
        cursor: pointer !important;
        z-index: 9999 !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        transition: background 0.15s, color 0.15s !important;
    }
    
    .layout-no-header .no-header-mobile-hamburger:hover {
        background: var(--hover-bg) !important;
        color: var(--text-primary) !important;
    }
    
    /* Hide floating hamburger when sidebar is open */
    .layout-no-header .sidebar.open ~ .no-header-mobile-hamburger,
    .layout-no-header.sidebar-open .no-header-mobile-hamburger {
        display: none !important;
    }
}

/* ===== MOBILE SIDEBAR HEADER ===== */
/* Hidden by default on desktop */
.sidebar-mobile-header {
    display: none;
}

/* Show mobile sidebar header on mobile screens (touch OR small) */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .sidebar-mobile-header {
        display: flex !important;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-light);
        background: var(--bg-secondary);
        min-height: 56px;
    }
    
    .sidebar-mobile-title {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-primary);
    }
    
    /* For No Header layout, hide the internal close button (floating hamburger handles it) */
    .layout-no-header .sidebar-mobile-header .sidebar-mobile-close {
        display: none !important;
    }
    
    /* For No Header layout, add left padding to position Menu text to the right of floating hamburger */
    .layout-no-header .sidebar-mobile-header {
        padding-left: 60px; /* 16px (hamburger left) + 36px (hamburger width) + 8px gap */
        padding-top: 19px; /* Align with hamburger vertically */
    }
}

/* ===== MOBILE ACTION BUTTONS (Contact/Demo/Trial above Prompt Library) ===== */
.mobile-action-buttons {
    display: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .mobile-action-buttons:not(:empty) {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-light);
        background: transparent;
    }
}

.mobile-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    line-height: 1.2;
}

.mobile-cta-btn:active {
    opacity: 0.8;
}

.mobile-cta-btn i {
    font-size: 0.9em;
}

.mobile-cta-primary {
    background: var(--theme-primary);
    color: var(--theme-action-text, #fff);
}

.mobile-cta-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.mobile-cta-outline {
    background: transparent;
    color: var(--theme-primary);
    border: 1.5px solid var(--theme-primary);
}

/* ===== INTERNAL SIDEBAR TOGGLE (for No Header layout) ===== */
/* Hidden by default */
.sidebar-internal-toggle {
    display: none;
}

/* Show in No Header layout (desktop and mobile) */
.layout-no-header .sidebar-internal-toggle {
    display: flex !important;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-sidebar);
}

/* On mobile for No Header, HIDE the internal toggle (external toggle is used) */
@media (max-width: 768px) {
    .layout-no-header .sidebar-internal-toggle {
        display: none !important;
    }
}

.sidebar-internal-toggle .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.sidebar-internal-toggle .sidebar-toggle-btn i.sidebar-icon-open {
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.sidebar-internal-toggle .sidebar-icon-open.fa-bars::before { content: "\f0c9" !important; }
.sidebar-internal-toggle .sidebar-icon-open.fa-grip-lines::before { content: "\f7a4" !important; }
.sidebar-internal-toggle .sidebar-icon-open.fa-ellipsis-vertical::before { content: "\f142" !important; }
.sidebar-internal-toggle .sidebar-icon-open.fa-bars-staggered::before { content: "\f550" !important; }
.sidebar-internal-toggle .sidebar-icon-open.fa-grip::before { content: "\f58d" !important; }
.sidebar-internal-toggle .sidebar-icon-open.fa-layer-group::before { content: "\f5fd" !important; }

.sidebar-internal-toggle .sidebar-toggle-btn:hover {
    background: var(--hover-bg);
}

/* Toggle icon visibility based on sidebar state */
/* Always show hamburger icon for consistent toggle behavior */
.sidebar-internal-toggle .sidebar-icon-open {
    display: block;
}
.sidebar-internal-toggle .sidebar-icon-close {
    display: none;
}

/* When sidebar is collapsed in No Header layout, show expand button */
.layout-no-header .sidebar.collapsed .sidebar-internal-toggle {
    justify-content: center;
    padding: 12px 0;
}
.layout-no-header .sidebar.collapsed .sidebar-internal-toggle .sidebar-toggle-btn {
    width: 42px;
    height: 42px;
    font-size: 18px;
    padding: 0;
    margin: 0 auto;
}

/* Ensure sidebar profile is visible (unless floating profile is enabled) */
.layout-no-header .sidebar-profile,
.layout-no-header .user-profile-card {
    display: flex !important;
}

/* No Header layout: Sidebar is always visible (has its own profile at bottom) */

/* Remove any top padding/margin from containers */
.layout-no-header .app-container,
.layout-no-header .main-wrapper,
.layout-no-header .main-container,
.layout-no-header body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Main container should not have header height margin */
.layout-no-header .main-container {
    margin-top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Main content area starts at top of viewport */
.layout-no-header .main-content,
.layout-no-header .chat-main,
.layout-no-header .main-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Chat container fills viewport from top */
.layout-no-header .chat-container {
    height: 100vh !important;
    height: 100dvh !important;
    padding-top: 20px;
}

/* Chat messages area starts at top */
.layout-no-header .chat-messages {
    top: 0 !important;
    padding-top: 20px !important;
}

/* Input bar in No Header layout follows normal sidebar width */

/* Minimal Layout - Chat only (no header, no sidebar) */
.layout-minimal .top-nav,
.layout-minimal header.top-nav,
.layout-minimal .sidebar,
.layout-minimal #sidebar {
    display: none !important;
}
.layout-minimal .main-content,
.layout-minimal .chat-main,
.layout-minimal .main-area {
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    padding-top: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}
.layout-minimal .app-container,
.layout-minimal .main-wrapper {
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

/* Ensure no header gap in minimal mode */
.layout-minimal .chat-messages {
    margin-top: 0 !important;
    padding-top: 16px !important;  /* Small padding for first message */
}
/* Minimal - container uses width variable, not hardcoded 100% */
.layout-minimal .chat-container {
    /* Width controlled by --chat-area-width variable */
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 20px !important;  /* No top/bottom padding - only horizontal */
    padding-top: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}
/* Chat width respects the --chat-area-width variable */
.layout-minimal .chat-messages {
    height: calc(100vh - 120px) !important;
    height: calc(100dvh - 120px) !important;
}
/* Input bar left handled by floating profile rules when profile is shown */

/* ===== INPUT BAR ADJUSTMENTS FOR LAYOUTS ===== */
/* Width controlled by --chat-area-width CSS variable */

/* No Sidebar - input bar full width from left edge (only when NO floating profile) */
/* transition: none prevents visible "slide" effect during initialization */
.layout-no-sidebar:not(.show-floating-profile) .input-bar-fixed {
    left: 0 !important;
    transition: none !important;
}

/* CROSS-BROWSER FIX: Ensure no-sidebar/minimal layouts NEVER shift input bar
   Even if sidebar somehow gets .open class, input bar stays at left: 0
   Sidebar is hidden in these layouts anyway, but explicit for safety */
.layout-no-sidebar .sidebar.open ~ .input-bar-fixed,
.layout-minimal .sidebar.open ~ .input-bar-fixed {
    left: 0 !important;
    transition: none !important;
}

/* No Header - no change to input bar horizontal position */
.layout-no-header .input-bar-fixed {
    /* Sidebar still present, so left stays at sidebar width */
}

/* Minimal - input bar full width, no sidebar (only when NO floating profile) */
/* transition: none prevents visible "slide" effect during initialization */
.layout-minimal:not(.show-floating-profile) .input-bar-fixed {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transition: none !important;
}

/* ===== CHAT MESSAGES AREA ADJUSTMENTS ===== */
/* Width controlled by --chat-area-width CSS variable */

/* Minimal - ensure space for fixed input bar */
.layout-minimal .chat-messages {
    padding-bottom: 120px; /* Space for fixed input bar */
}

/* ===== MAIN CONTENT ADJUSTMENTS ===== */

/* No Sidebar - main content starts at left edge */
.layout-no-sidebar .main-content {
    margin-left: 0 !important;
}

/* No Header - main content starts at top edge */
.layout-no-header .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Minimal - main content fills entire viewport */
.layout-minimal .main-content {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

.layout-minimal .chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Width controlled by --chat-area-width CSS variable */
}

/* Layout transitions */
.layout-full,
.layout-no-sidebar,
.layout-no-header,
.layout-minimal {
    transition: all 0.3s ease;
}

/* Responsive behavior for all layouts */
@media (max-width: 768px) {
    /* CRITICAL: On mobile, chat area width ALWAYS 100% regardless of slider setting */
    .chat-container,
    .input-bar-content,
    .chat-messages {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* On mobile, sidebar always collapses to menu */
    .layout-full .sidebar,
    .layout-no-header .sidebar {
        position: fixed;
        left: -280px;
        transition: left 0.3s ease;
    }
    
    .layout-full .sidebar.open,
    .layout-no-header .sidebar.open {
        left: 0;
    }
    
    /* Header CTAs collapse on mobile */
    .layout-full .nav-right,
    .layout-no-sidebar .nav-right {
        display: none;
    }
    
    .layout-full .sidebar-toggle,
    .layout-no-sidebar .sidebar-toggle {
        display: flex;
    }
    
    /* Mobile: Always use full width regardless of slider setting */
    .chat-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Balance avatar offset so chat messages appear centered */
    .message {
        padding-right: 28px;
    }
    
    .input-bar-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* No Header - mobile adjustments */
    .layout-no-header .chat-container {
        padding-top: 12px;
    }
    .layout-no-header .main-content {
        padding-top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    /* Minimal - mobile adjustments */
    .layout-minimal .chat-container {
        padding: 12px !important;
    }
    .layout-minimal .chat-messages {
        padding: 12px;
        padding-bottom: 100px;
    }
    .layout-minimal .input-bar-fixed {
        padding: 12px !important;
    }
}

/* Custom CSS Editor */
.custom-css-editor-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
}

.custom-css-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

.custom-css-toolbar span {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.snippet-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.snippet-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

.custom-css-textarea {
    width: 100%;
    min-height: 300px;
    padding: 16px;
    font-family: 'Fira Code', 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.5;
    border: none;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.custom-css-warnings {
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-top: 1px solid var(--border-light);
}

.custom-css-warnings p {
    margin: 0;
    font-size: 12px;
    color: var(--warning-color);
}

.custom-css-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-light);
    justify-content: flex-end;
}

/* Embed Widget Configuration */
.embed-mode-section {
    margin-bottom: 24px;
}

.embed-mode-header {
    margin-bottom: 16px;
}

.embed-separator {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 32px 0;
}

.embed-enable-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.toggle-label-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-label-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.toggle-label-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.embed-shared-settings {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 20px;
}

.embed-shared-settings h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.settings-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.domain-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.code-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.iframe-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* 2026-02-02: .toggle-slider is an alternate slider style that works with .toggle-switch */
/* Uses same dimensions as .slider for consistency */
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-medium);
    border-radius: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    /* Same as .slider: 18px knob, 3px padding */
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--theme-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(26px);
}

/* Small toggle: override knob size and position (must come after general toggle-slider) */
.toggle-switch-sm .toggle-slider {
    width: 32px;
    height: 18px;
}

.toggle-switch-sm .toggle-slider::before {
    width: 14px;
    height: 14px;
    bottom: 2px;
    left: 2px;
}

.toggle-switch-sm input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

.toggle-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.embed-option-group {
    margin-bottom: 20px;
}

.embed-option-group > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 180px;
}

.pos-btn {
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pos-btn:hover, .pos-btn.active {
    background: var(--theme-primary);
    color: var(--theme-action-text);
    border-color: var(--theme-primary);
}

.dimension-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.launcher-styles {
    display: flex;
    gap: 16px;
}

.launcher-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.allowed-domains-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.allowed-domain-item {
    display: flex;
    gap: 8px;
}

.allowed-domain-item input {
    flex: 1;
}

.remove-domain-btn {
    padding: 8px 12px;
    background: var(--error-color);
    color: var(--theme-action-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.add-domain-btn {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-medium);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
}

.add-domain-btn:hover {
    background: var(--hover-bg);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* Embed Preview */
.embed-preview-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
}

.embed-preview-page {
    background: white;
    border-radius: 8px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.embed-preview-header {
    padding: 12px 16px;
    background: #f5f5f5;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.embed-preview-content {
    padding: 20px;
    color: #999;
    font-size: 12px;
}

.embed-preview-launcher {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: var(--theme-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-action-text);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 14px;
}

/* Enhanced Preview Page - show bottom-right corner for widget */
.embed-preview-page {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.embed-preview-content {
    padding: 20px;
    color: #64748b;
    font-size: 12px;
}

.embed-preview-content p {
    margin: 0 0 8px 0;
}

.preview-content-secondary {
    color: #94a3b8;
    font-style: italic;
}

/* Preview Header Toggle */
.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.preview-toggle-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
}

/* Compact version for tight spaces */
.preview-toggle-btn.compact {
    width: auto !important;
    padding: 4px 10px;
    font-size: 11px;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.preview-toggle-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--theme-primary);
}

.preview-toggle-btn.closed {
    opacity: 0.7;
}

.preview-toggle-btn.closed i {
    transform: rotate(180deg);
}

/* Widget Container Preview - bottom-right only (v1 release) */
/* Widget's bottom-right corner aligns with launcher's upper-left corner */
/* Launcher is 36px at bottom:12px, right:12px */
/* Widget right = 12px + 36px = 48px (no gap for closer feel) */
.embed-preview-widget {
    position: absolute;
    bottom: 50px;
    right: 48px;
    width: 180px;
    height: 200px;
    background: var(--bg-primary);
    border-radius: 8px;
    /* Shadow on LEFT side since widget is on right
       Use drop-shadow filter instead of box-shadow to respect border-radius and transparency */
    filter: drop-shadow(-4px 4px 8px rgba(0,0,0,0.15)) drop-shadow(-2px 2px 4px rgba(0,0,0,0.1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
    transition: all 0.3s ease;
}

.embed-preview-widget.hidden {
    display: none;
}

/* Disabled overlay when widget is toggled off */
.embed-preview-disabled {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    z-index: 30;
}

.embed-preview-disabled.active {
    display: flex;
}

.embed-preview-disabled i {
    font-size: 32px;
    color: #94a3b8;
}

.embed-preview-disabled span {
    font-size: 12px;
    color: #64748b;
    text-align: center;
}

/* Widget split view - align toggle with preview */
.widget-split-view {
    align-items: flex-start;
}

.widget-split-view .customize-options {
    flex: 1;
}

/* Widget Header Preview */
.widget-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 40px;
    background: var(--theme-primary);
    color: white;
    flex-shrink: 0;
}

.widget-preview-close-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: inherit;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-preview-title {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}

/* Widget Content Preview */
.widget-preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow: hidden;
}

.widget-preview-messages {
    flex: 1;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-preview-msg {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px;
    max-width: 85%;
}

.widget-preview-msg.assistant {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.widget-preview-msg.user {
    background: var(--theme-primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.widget-preview-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    font-size: 11px;
    color: var(--text-muted);
}

.widget-preview-input i {
    color: var(--theme-primary);
}

/* Integration Code */
.embed-integration-code {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.embed-integration-code h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.code-option {
    margin-bottom: 16px;
}

.code-option > label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.code-block {
    position: relative;
    background: var(--bg-dark);
    border-radius: 8px;
    overflow: hidden;
}

.code-block pre {
    margin: 0;
    padding: 16px;
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #d4d4d4;
    overflow-x: auto;
}

.copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 4px;
    color: #d4d4d4;
    cursor: pointer;
    font-size: 12px;
}

.copy-code-btn:hover {
    background: rgba(255,255,255,0.2);
}

.embed-actions {
    margin-top: 24px;
    text-align: center;
}

/* Responsive - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .customize-left-nav {
        width: 160px;
        min-width: 160px;
    }
    
    .customize-nav-item span {
        font-size: 12px;
    }
    
    .customize-split-view {
        flex-direction: column;
    }
    
    .customize-preview {
        flex: 1;
        max-width: 100%;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border-light);
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    #customizeContent {
        flex-direction: column;
    }
    
    .customize-left-nav {
        display: none;
    }
    
    .customize-mobile-dropdown {
        display: block;
    }
    
    .customize-content-area {
        padding: 16px;
    }
    
    .customize-split-view {
        flex-direction: column;
    }
    
    .customize-preview {
        display: none;
        margin-top: 16px;
    }
    
    .customize-preview.expanded {
        display: block;
    }
    
    .preview-toggle-btn {
        display: flex;
    }
    
    .quick-setup-actions {
        flex-direction: column;
    }
    
    .bubble-shape-options {
        grid-template-columns: 1fr;
    }
    
    .chat-theme-colors-grid {
        grid-template-columns: 1fr;
    }
    
    .chat-theme-typography {
        grid-template-columns: 1fr;
    }
    
    .layout-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .custom-css-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .custom-css-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================================
   EMBED MODE STYLES
   Applied when the app is running inside an iframe via ?embed=true
   ============================================================================ */

/* Base embed mode - remove unnecessary spacing for iframe */
html.embed-mode,
html.embed-mode body {
    /* Allow iframe to control dimensions */
    height: 100%;
    overflow: hidden;
}

/* Hide "Powered by" branding in embed mode */
html.embed-mode .powered-by-footer,
html.embed-mode .gptweb-branding {
    display: none !important;
}

/* Remove margins in embed mode for cleaner iframe look */
html.embed-mode .main-container {
    margin: 0;
    border-radius: 0;
}

/* Ensure full height in embed mode */
html.embed-mode .main-content,
html.embed-mode .chat-main {
    height: 100%;
}

/* Optional: Hide header in embed mode (can be controlled via layout) */
html.embed-mode.embed-no-header .top-nav,
html.embed-mode.embed-no-header header.top-nav {
    display: none !important;
}

/* Optional: Hide sidebar in embed mode (can be controlled via layout) */
html.embed-mode.embed-no-sidebar .sidebar,
html.embed-mode.embed-no-sidebar #sidebar {
    display: none !important;
}

/* Embed + Minimal layout - ensure content starts at top with no gaps */
html.embed-mode body.layout-minimal,
html.embed-mode body.layout-no-sidebar,
html.embed-mode body.layout-no-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

html.embed-mode body.layout-minimal .main-content,
html.embed-mode body.layout-minimal .chat-main,
html.embed-mode body.layout-minimal .main-area {
    top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Ensure chat messages start from top with minimal padding */
html.embed-mode body.layout-minimal .chat-messages,
html.embed-mode body.layout-minimal #chatMessages {
    padding-top: 8px !important;
    margin-top: 0 !important;
}

/* Ensure chat container fills embed from top */
html.embed-mode .chat-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding: 8px !important; /* Minimal padding all around */
}

/* Override the normal minimal layout 20px padding */
html.embed-mode body.layout-minimal .chat-container {
    padding: 0 8px !important; /* Less horizontal padding, no top padding */
}

html.embed-mode body.layout-minimal .app-container,
html.embed-mode body.layout-minimal .main-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove any potential spacer elements */
html.embed-mode body.layout-minimal .top-nav,
html.embed-mode body.layout-minimal header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================================
   EMBED/WIDGET SVG AND DIAGRAM OVERFLOW FIX
   Prevent diagrams from stretching past container bounds
   ============================================================================ */

/* Constrain message content in embeds */
html.embed-mode .message-content,
html.widget-mode .message-content {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Constrain diagrams and SVGs in embeds */
html.embed-mode .mermaid-diagram,
html.embed-mode .diagram-container,
html.widget-mode .mermaid-diagram,
html.widget-mode .diagram-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

html.embed-mode .mermaid-diagram svg,
html.embed-mode .diagram-container svg,
html.widget-mode .mermaid-diagram svg,
html.widget-mode .diagram-container svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Constrain message bubbles in embeds */
html.embed-mode .message-bubble,
html.widget-mode .message-bubble {
    max-width: calc(100% - 20px) !important;
    overflow-x: auto !important;
}

/* Ensure chat messages don't overflow horizontally */
html.embed-mode .chat-messages,
html.embed-mode #chatMessages,
html.widget-mode .chat-messages,
html.widget-mode #chatMessages {
    overflow-x: hidden !important;
}

/* ============================================================================
   EMBED MODE: HIDE DUPLICATE PROFILE DROPDOWN
   In embed full layout mode, only show sidebar profile, not floating profile
   ============================================================================ */

/* Hide floating profile in embed mode when sidebar is visible (full layout) */
html.embed-mode body.layout-full .floating-profile-wrapper,
html.embed-mode body.layout-full .floating-profile-card,
html.embed-mode body.layout-full #floatingProfileWrapper,
html.embed-mode body.layout-full #floatingDropdownMenu {
    display: none !important;
}

/* ============================================================================
   EMBED MODE: FULL LAYOUT FIXES
   Ensure full layout works properly in embeds on larger viewports
   ============================================================================ */

/* For embeds wider than mobile, ensure proper full layout */
@media (min-width: 769px) {
    html.embed-mode body.layout-full .sidebar {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        height: auto !important;
        transform: none !important;
    }
    
    html.embed-mode body.layout-full .main-container {
        display: flex !important;
        margin-top: var(--header-height, 60px) !important;
        height: calc(100% - var(--header-height, 60px)) !important;
    }
    
    /* Ensure header is visible and above sidebar */
    html.embed-mode body.layout-full .top-nav,
    html.embed-mode body.layout-full header.top-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important;
    }
    
    /* CRITICAL: Main content area must be positioned AFTER sidebar in full layout */
    /* Override the generic embed-mode rules that force 100% width */
    html.embed-mode body.layout-full .main-content {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
    
    /* CRITICAL: Chat container should fill the main content area, not stretch under sidebar */
    html.embed-mode body.layout-full .chat-container {
        width: 100% !important;
        max-width: var(--chat-area-width, 100%) !important;
        margin: 0 auto !important;
    }
    
    /* CRITICAL: Input bar must start AFTER sidebar in full layout */
    /* Override the generic embed-mode rule that sets left: 0 */
    /* Responds to sidebar collapsed/expanded state */
    html.embed-mode body.layout-full .input-bar-fixed {
        left: var(--sidebar-width, 280px) !important;
        width: auto !important;
        transition: left 0.3s ease !important;
    }
    
    /* When sidebar is collapsed, input bar moves left */
    html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed {
        left: var(--sidebar-collapsed-width, 60px) !important;
    }
    
    /* Input bar content fills the container */
    html.embed-mode body.layout-full .input-bar-content {
        width: 100% !important;
        max-width: var(--chat-area-width, 100%) !important;
        margin: 0 auto !important;
    }
}

/* ============================================================================
   MOBILE MENU HEADER ALIGNMENT FIX
   Ensure consistent left alignment across all mobile menus
   ============================================================================ */

.simple-menu-header,
.sidebar-mobile-header {
    justify-content: flex-start !important;
    text-align: left !important;
}

.simple-menu-header .simple-menu-title,
.sidebar-mobile-header .sidebar-mobile-title {
    text-align: left !important;
}

/* ============================================================================
   SIDEBAR SECTION HEADER ALIGNMENT FIX
   Ensure section headers (PROMPT LIBRARY, FAVORITES, SETTINGS) stay in a row
   ============================================================================ */

/* Force row layout for section headers at all sizes */
.sidebar .section-header,
html.embed-mode .section-header,
html.widget-mode .section-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 8px !important;
}

.sidebar .section-header h4,
html.embed-mode .section-header h4,
html.widget-mode .section-header h4 {
    text-align: left !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar .section-header .info-icon,
html.embed-mode .section-header .info-icon,
html.widget-mode .section-header .info-icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    margin-left: auto !important;
}

/* Hide info icons when sidebar is collapsed (desktop only) */
.sidebar.collapsed .section-header .info-icon,
html.embed-mode .sidebar.collapsed .section-header .info-icon,
html.widget-mode .sidebar.collapsed .section-header .info-icon {
    display: none !important;
}

/* ============================================================================
   EMBED/WIDGET: Collapsed sidebar override
   The @media(max-width:1024px) restoration block above incorrectly restores text
   in collapsed sidebars for embed/widget iframes whose viewport is < 1024px.
   These rules re-hide text WITHOUT a media query, using :not(.open) to preserve
   mobile overlay behavior. Scoped to embed/widget only — core layout unaffected.
   ============================================================================ */
html.embed-mode .sidebar.collapsed:not(.open) .nav-text,
html.embed-mode .sidebar.collapsed:not(.open) .section-header span,
html.embed-mode .sidebar.collapsed:not(.open) .section-header h4,
html.embed-mode .sidebar.collapsed:not(.open) .section-title,
html.embed-mode .sidebar.collapsed:not(.open) .sidebar-header h3,
html.embed-mode .sidebar.collapsed:not(.open) .sidebar-footer-text,
html.embed-mode .sidebar.collapsed:not(.open) .user-name,
html.embed-mode .sidebar.collapsed:not(.open) .user-email,
html.embed-mode .sidebar.collapsed:not(.open) .chat-item span,
html.embed-mode .sidebar.collapsed:not(.open) .menu-divider-header span {
    display: none !important;
}
html.embed-mode .sidebar.collapsed:not(.open) {
    overflow: hidden !important;
}
html.embed-mode .sidebar.collapsed:not(.open) .section-header,
html.embed-mode .sidebar.collapsed:not(.open) .sidebar-header {
    justify-content: center !important;
}
html.embed-mode .sidebar.collapsed:not(.open) .menu-divider-header {
    justify-content: center !important;
    padding: 10px 6px !important;
    gap: 4px !important;
}
html.embed-mode .sidebar.collapsed:not(.open) .menu-divider-header .menu-chevron {
    display: inline-flex !important;
    font-size: 10px !important;
    margin-left: 2px !important;
    transform: none !important;
}
html.embed-mode .sidebar.collapsed:not(.open) .menu-divider-content {
    display: none !important;
}
html.embed-mode .sidebar.collapsed:not(.open) .chat-item {
    justify-content: center !important;
    padding: 10px 0 !important;
}

/* ============================================================================
   WIDGET MODE STYLES
   Applied when running in floating widget (smaller container)
   ============================================================================ */

/* Widget mode - optimized for compact display */
html.widget-mode,
html.widget-mode body {
    height: 100%;
    overflow: hidden;
}

/* ============================================================================
   EMBED/WIDGET MODE: FLOATING PROFILE DISPLAY
   Show floating profile when enabled - same behavior as standard site
   Profile appears for No Sidebar and Minimal layouts when enabled
   ============================================================================ */

/* ============================================================================
   EMBED/WIDGET MODE: Profile is now INLINE inside input bar
   The profile card is MOVED from the external wrapper INTO the input-bar-fixed.
   This ensures perfect height alignment using flexbox.
   Old external profile rules have been removed.
   See: .input-bar-fixed.profile-inline rules above for the new approach.
   ============================================================================ */

/* Ensure chat fills the widget container */
html.widget-mode .main-container {
    height: 100%;
    margin: 0;
    border-radius: 0;
    width: 100% !important;
}

html.widget-mode .chat-main {
    height: 100%;
    width: 100% !important;
}

/* CRITICAL: Force chat container to 100% width in embed/widget mode */
/* Override the --chat-area-width variable constraint (flyout respects width slider) */
html.embed-mode:not(.flyout-mode) .chat-container,
html.widget-mode .chat-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
}

/* Also force main-content to full width */
html.embed-mode .main-content,
html.widget-mode .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NOTE: Widget input bar positioning is now handled by responsive media queries:
   - Desktop (>768px): sidebar offset in @media (min-width: 769px) section
   - Mobile (≤768px): full width in @media (max-width: 768px) section
   The old global rules that forced left: 0 have been removed to allow
   desktop widget to properly offset for the sidebar. */

/* WIDGET: Desktop (>768px) - collapsible sidebar like main desktop */
/* Desktop JS uses .collapsed class (not .open) for toggle */
@media (min-width: 769px) {
    /* Sidebar - starts EXPANDED (full width), .collapsed makes it icons-only */
    html.widget-mode .sidebar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: var(--sidebar-width, 260px) !important;
        z-index: 100 !important;
        background: var(--bg-primary) !important;
        transition: width 0.3s ease !important;
    }
    /* Sidebar collapsed (icons only) */
    html.widget-mode .sidebar.collapsed {
        width: var(--sidebar-collapsed-width, 60px) !important;
    }
    /* Text hiding for collapsed sidebar is handled by the non-media-query
       embed-mode rules above (html.embed-mode covers widget-mode too) */
    /* Show hamburger toggle for collapse/expand - keep in header flow */
    html.widget-mode .sidebar-toggle,
    html.widget-mode #sidebarToggle {
        display: flex !important;
        position: relative !important;
        z-index: 110 !important;
    }
    /* Hide mobile header on desktop */
    html.widget-mode .sidebar-mobile-header {
        display: none !important;
    }
    /* Main content - default expanded sidebar */
    /* EXCLUDE layouts without sidebar: minimal, no-sidebar */
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .main-content {
        margin-left: var(--sidebar-width, 260px) !important;
        width: calc(100% - var(--sidebar-width, 260px)) !important;
        padding-left: 0 !important;
        transition: margin-left 0.3s ease, width 0.3s ease !important;
    }
    /* Main content when sidebar is collapsed */
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .sidebar.collapsed ~ .main-content {
        margin-left: var(--sidebar-collapsed-width, 60px) !important;
        width: calc(100% - var(--sidebar-collapsed-width, 60px)) !important;
    }
    /* Minimal/No-Sidebar layouts: main content full width */
    html.widget-mode body.layout-minimal .main-content,
    html.widget-mode body.layout-no-sidebar .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    
    /* Input bar - default expanded sidebar */
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .input-bar-fixed,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .input-bar-fixed.profile-inline,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .input-bar-fixed.profile-inline-minimal,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar) .input-bar-fixed.profile-inline-expanded {
        left: var(--sidebar-width, 260px) !important;
        width: calc(100% - var(--sidebar-width, 260px)) !important;
        right: auto !important;
        transition: left 0.3s ease, width 0.3s ease !important;
    }
    /* Input bar when sidebar is collapsed */
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar):has(.sidebar.collapsed) .input-bar-fixed,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar):has(.sidebar.collapsed) .input-bar-fixed.profile-inline,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar):has(.sidebar.collapsed) .input-bar-fixed.profile-inline-minimal,
    html.widget-mode body:not(.layout-minimal):not(.layout-no-sidebar):has(.sidebar.collapsed) .input-bar-fixed.profile-inline-expanded {
        left: var(--sidebar-collapsed-width, 60px) !important;
        width: calc(100% - var(--sidebar-collapsed-width, 60px)) !important;
        right: auto !important;
    }
    
    /* Minimal and No-Sidebar layouts: input bar full width from left edge */
    html.widget-mode body.layout-minimal .input-bar-fixed,
    html.widget-mode body.layout-minimal .input-bar-fixed.profile-inline,
    html.widget-mode body.layout-minimal .input-bar-fixed.profile-inline-minimal,
    html.widget-mode body.layout-minimal .input-bar-fixed.profile-inline-expanded,
    html.widget-mode body.layout-no-sidebar .input-bar-fixed,
    html.widget-mode body.layout-no-sidebar .input-bar-fixed.profile-inline,
    html.widget-mode body.layout-no-sidebar .input-bar-fixed.profile-inline-minimal,
    html.widget-mode body.layout-no-sidebar .input-bar-fixed.profile-inline-expanded {
        left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        transition: none !important;
    }
}

/* WIDGET: Mobile (<769px) - overlay menu behavior */
@media (max-width: 768px) {
    html.widget-mode .sidebar {
        position: fixed !important;
        left: calc(-1 * min(85vw, 380px)) !important;
        top: 0 !important;
        height: 100% !important;
        width: min(85vw, 380px) !important;
        z-index: 1500 !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-primary) !important;
        transition: left 0.3s ease !important;
    }
    html.widget-mode .sidebar.open {
        left: 0 !important;
    }
    html.widget-mode .sidebar-mobile-header {
        display: flex !important;
    }
    html.widget-mode .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    html.widget-mode .chat-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html.widget-mode .chat-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    html.widget-mode .chat-messages,
    html.widget-mode #chatMessages {
        margin-left: 0 !important;
        width: 100% !important;
    }
    html.widget-mode .input-bar-fixed {
        left: 0 !important;
        width: 100% !important;
    }
    html.widget-mode .sidebar-toggle,
    html.widget-mode #sidebarToggle {
        display: flex !important;
    }
}

/* WIDGET: Chat messages padding */
html.widget-mode .chat-messages,
html.widget-mode #chatMessages {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* EMBED: Mobile (<769px) - sidebar becomes overlay like widget-mode */
@media (max-width: 768px) {
    html.embed-mode .sidebar {
        position: fixed !important;
        left: calc(-1 * min(85vw, 380px)) !important;
        top: 0 !important;
        height: 100% !important;
        width: min(85vw, 380px) !important;
        z-index: 1500 !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-primary) !important;
        transition: left 0.3s ease !important;
    }
    html.embed-mode .sidebar.open {
        left: 0 !important;
    }
    html.embed-mode .sidebar-mobile-header {
        display: flex !important;
    }
    html.embed-mode .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    html.embed-mode .chat-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html.embed-mode .chat-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    html.embed-mode .chat-messages,
    html.embed-mode #chatMessages {
        margin-left: 0 !important;
        width: 100% !important;
    }
    html.embed-mode .input-bar-fixed {
        left: 0 !important;
        width: 100% !important;
    }
    html.embed-mode .sidebar-toggle,
    html.embed-mode #sidebarToggle {
        display: flex !important;
    }
}

/* EMBED MODE: Input bar at left edge by default - ONLY for layouts WITHOUT sidebar */
/* For layout-full (with sidebar), the desktop rules at the end of file set sidebar offset */
/* transition: none prevents visible "slide" effect during initialization */
html.embed-mode:not(.widget-mode) body:not(.layout-full) .input-bar-fixed,
html.embed-mode:not(.widget-mode) body.layout-no-sidebar .input-bar-fixed,
html.embed-mode:not(.widget-mode) body.layout-minimal .input-bar-fixed {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transition: none !important;
}

/* CROSS-BROWSER FIX: Ensure embed mode NEVER shifts input bar when sidebar opens
   This protects against the .sidebar.open ~ .input-bar-fixed rule from standard layout
   NOTE: widget-mode now uses responsive rules - desktop has sidebar, mobile is overlay
   IMPORTANT: Exclude layout-full which HAS a sidebar and needs proper offset */
html.embed-mode:not(.widget-mode) body:not(.layout-full) .sidebar.open ~ .input-bar-fixed {
    left: 0 !important;
    width: 100% !important;
    transition: none !important;
}

/* Input bar content must also be 100% width in embed/widget mode */
/* Override the --chat-area-width variable constraint (flyout respects width slider) */
html.embed-mode:not(.flyout-mode) .input-bar-content,
html.widget-mode .input-bar-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Compact header for widget */
html.widget-mode .top-nav {
    padding: 8px 12px;
}

html.widget-mode .top-nav h1 {
    font-size: 14px;
}

/* Compact input area for widget */
html.widget-mode .input-area {
    padding: 8px 12px;
}

html.widget-mode .message-input {
    font-size: 14px;
    padding: 10px 12px;
}

/* Compact messages for widget */
html.widget-mode .message {
    padding: 8px 12px;
    font-size: 14px;
}

html.widget-mode .message-content {
    font-size: 14px;
}

/* Hide elements that don't fit in widget */
html.widget-mode .sidebar-footer,
html.widget-mode .powered-by-footer {
    display: none !important;
}

/* ============================================================================
   EMBED/WIDGET + NO-HEADER LAYOUT: DESKTOP SIDEBAR FOOTER FIX
   On desktop (>768px) with no-header layout, the sidebar is always visible,
   so we NEED the sidebar-footer to give users access to Settings/Start New Chat.
   Override the generic widget-mode hide rule for this specific case.
   ============================================================================ */

@media (min-width: 769px) {
    /* Show sidebar-footer in no-header layout on desktop - it's the only way to access Settings */
    /* NOTE: embed-mode only - widget-mode NEVER has sidebar */
    html.embed-mode body.layout-no-header .sidebar-footer {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure profile card is visible */
    html.embed-mode body.layout-no-header .sidebar-footer .user-profile-card {
        display: flex !important;
    }
    
    /* Input bar must offset for sidebar in no-header layout */
    /* NOTE: embed-mode only - widget-mode NEVER has sidebar offset */
    html.embed-mode:not(.widget-mode) body.layout-no-header .input-bar-fixed {
        left: var(--sidebar-width, 280px) !important;
        right: 0 !important;
        width: auto !important;
        transition: left 0.3s ease !important;
    }
    
    /* When sidebar is collapsed, input bar moves left */
    /* Using :has() for modern browsers */
    html.embed-mode:not(.widget-mode) body.layout-no-header:has(.sidebar.collapsed) .input-bar-fixed {
        left: var(--sidebar-collapsed-width, 60px) !important;
    }
    /* Fallback using sibling selector for older browsers */
    /* NOTE: .input-bar-fixed is a SIBLING of .main-content, not nested inside it */
    html.embed-mode:not(.widget-mode) body.layout-no-header .sidebar.collapsed ~ .input-bar-fixed {
        left: var(--sidebar-collapsed-width, 60px) !important;
    }
    
    /* Main content area must also offset for sidebar */
    /* NOTE: embed-mode only - widget-mode NEVER has sidebar offset */
    html.embed-mode:not(.widget-mode) body.layout-no-header .main-content {
        margin-left: var(--sidebar-width, 280px) !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* When sidebar is collapsed, main content moves left */
    /* Using :has() for modern browsers */
    html.embed-mode:not(.widget-mode) body.layout-no-header:has(.sidebar.collapsed) .main-content {
        margin-left: var(--sidebar-collapsed-width, 60px) !important;
    }
    /* Fallback using sibling selector for older browsers */
    html.embed-mode:not(.widget-mode) body.layout-no-header .sidebar.collapsed ~ .main-content {
        margin-left: var(--sidebar-collapsed-width, 60px) !important;
    }
    
    /* Chat container should fill available space */
    html.embed-mode body.layout-no-header .chat-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================================
   EMBED/WIDGET: FIX SHADOW BLEED FROM OFF-SCREEN MENUS
   Remove shadow when menu is closed to prevent visual artifacts
   Menus still function normally when opened (same layouts as standard site)
   ============================================================================ */

/* Remove shadow from off-screen menus in embed/widget mode to prevent shadow bleed */
html.embed-mode .simple-mobile-menu:not(.open),
html.widget-mode .simple-mobile-menu:not(.open) {
    box-shadow: none !important;
}

/* Also remove shadow from off-screen sidebar in embed/widget mode */
html.embed-mode .sidebar:not(.open),
html.widget-mode .sidebar:not(.open) {
    box-shadow: none !important;
}

/* Clip overflow to prevent any shadow bleed in embeds */
html.embed-mode,
html.widget-mode {
    overflow: hidden;
}

/* ============================================================================
   EMBED/WIDGET: LOADING MESSAGE TEXT FIX
   Smaller font to prevent text cutoff in small containers
   ============================================================================ */

html.embed-mode:not(.flyout-mode) .loading-message-text,
html.widget-mode .loading-message-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

@media (max-width: 768px) {
    html.flyout-mode .loading-message-text {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }
}

/* ============================================================================
   EMBED/WIDGET: MOBILE BREAKPOINT BEHAVIOR
   At 768px and below, the hamburger menu shows and there's limited space.
   Profile should HIDE at this breakpoint to give room for the hamburger menu.
   The hide rules are defined at the END of this file to ensure they take precedence.
   ============================================================================ */

/* ============================================================================
   EMBED/WIDGET: INLINE PROFILE IN INPUT BAR
   In embed/widget mode, the profile is moved INSIDE the input bar container.
   This ensures perfect height alignment automatically via flexbox.
   ============================================================================ */

/* Input bar with inline profile: use flexbox layout */
/* NOTE: Widget mode on desktop (>768px) has its own rules that override left position */
html.embed-mode .input-bar-fixed.profile-inline,
html.widget-mode .input-bar-fixed.profile-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    /* left: 0 is handled by embed-mode only; widget uses sidebar offset */
}

/* Embed-mode profile-inline: full width ONLY for layouts without sidebar */
/* For layout-full, the sidebar offset rules at end of file take precedence */
html.embed-mode:not(.widget-mode) body:not(.layout-full) .input-bar-fixed.profile-inline {
    left: 0 !important;
}

/* Profile card when inline - fill the height of the input bar */
html.embed-mode .input-bar-fixed.profile-inline > .floating-profile-card,
html.widget-mode .input-bar-fixed.profile-inline > .floating-profile-card {
    position: relative !important;
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border-light) !important;
    background: var(--bg-secondary) !important;
}

/* Minimal mode inline profile - narrower */
html.embed-mode .input-bar-fixed.profile-inline-minimal > .floating-profile-card,
html.widget-mode .input-bar-fixed.profile-inline-minimal > .floating-profile-card {
    width: 80px !important;
    padding: 12px 8px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: center !important;
}

/* Expanded mode inline profile - wider */
html.embed-mode .input-bar-fixed.profile-inline-expanded > .floating-profile-card,
html.widget-mode .input-bar-fixed.profile-inline-expanded > .floating-profile-card {
    width: 220px !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Input bar content - fill remaining space */
html.embed-mode .input-bar-fixed.profile-inline > .input-bar-content,
html.widget-mode .input-bar-fixed.profile-inline > .input-bar-content {
    flex: 1 !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hide external floating profile wrapper when inline mode active */
html.embed-mode body.show-floating-profile .floating-profile-wrapper,
html.widget-mode body.show-floating-profile .floating-profile-wrapper {
    display: none !important;
}

/* Profile avatar adjustments for inline */
html.embed-mode .input-bar-fixed.profile-inline .profile-avatar,
html.widget-mode .input-bar-fixed.profile-inline .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
}

/* Profile info adjustments for inline */
html.embed-mode .input-bar-fixed.profile-inline .profile-info,
html.widget-mode .input-bar-fixed.profile-inline .profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html.embed-mode .input-bar-fixed.profile-inline .profile-name,
html.widget-mode .input-bar-fixed.profile-inline .profile-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html.embed-mode .input-bar-fixed.profile-inline .profile-subtitle,
html.widget-mode .input-bar-fixed.profile-inline .profile-subtitle {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Hide profile info in minimal mode */
html.embed-mode .input-bar-fixed.profile-inline-minimal .profile-info,
html.widget-mode .input-bar-fixed.profile-inline-minimal .profile-info {
    display: none !important;
}

/* Dropdown trigger adjustments */
html.embed-mode .input-bar-fixed.profile-inline .profile-dropdown-trigger,
html.widget-mode .input-bar-fixed.profile-inline .profile-dropdown-trigger {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
}

/* ============================================================================
   STANDARD MODE: INLINE PROFILE IN INPUT BAR
   Same layout as embed/widget for consistent height matching.
   Standard mode = html without .embed-mode or .widget-mode classes.
   ============================================================================ */

/* Input bar with inline profile: use flexbox layout (ALL MODES) */
.input-bar-fixed.profile-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    left: 0 !important;  /* Full width - profile is INSIDE the bar now */
}

/* Profile card when inline - fill the height of the input bar */
.input-bar-fixed.profile-inline > .floating-profile-card {
    position: relative !important;
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border-light) !important;
    background: var(--bg-secondary) !important;
}

/* Minimal mode inline profile - narrower */
.input-bar-fixed.profile-inline-minimal > .floating-profile-card {
    width: 80px !important;
    padding: 12px 8px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: center !important;
}

/* Expanded mode inline profile - wider */
.input-bar-fixed.profile-inline-expanded > .floating-profile-card {
    width: 220px !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Input bar content - fill remaining space */
.input-bar-fixed.profile-inline > .input-bar-content {
    flex: 1 !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hide external floating profile wrapper when inline mode active (ALL MODES) */
body.show-floating-profile .floating-profile-wrapper {
    display: none !important;
}

/* Profile avatar adjustments for inline */
.input-bar-fixed.profile-inline .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
}

/* Profile info adjustments for inline */
.input-bar-fixed.profile-inline .profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-bar-fixed.profile-inline .profile-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.input-bar-fixed.profile-inline .profile-subtitle {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Hide profile info in minimal mode */
.input-bar-fixed.profile-inline-minimal .profile-info {
    display: none !important;
}

/* Dropdown trigger adjustments */
.input-bar-fixed.profile-inline .profile-dropdown-trigger {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
}

/* ============================================================================
   ALL MODES: HIDE PROFILE AT 768px (when hamburger menu shows)
   At 768px and below, the hamburger menu shows in No Sidebar/Minimal layouts.
   Profile should HIDE to give more room for content.
   ============================================================================ */

@media (max-width: 768px) {
    /* HIDE inline profile card when hamburger menu is available */
    /* Profile is now INSIDE the input bar, so just hide the card */
    .input-bar-fixed.profile-inline > .floating-profile-card {
        display: none !important;
    }
    
    /* Input bar content fills full width when profile is hidden */
    .input-bar-fixed.profile-inline > .input-bar-content {
        flex: 1 !important;
        width: 100% !important;
    }
    
    /* Also hide any external floating profile (fallback) */
    body.show-floating-profile .floating-profile-wrapper {
        display: none !important;
    }
}

/* ============================================================================
   EMBED/WIDGET: DROPDOWN MENU POSITIONING
   Ensure dropdown appears correctly above the inline profile card
   ============================================================================ */
html.embed-mode .floating-dropdown-menu,
html.widget-mode .floating-dropdown-menu {
    z-index: 10000 !important; /* Very high to appear above everything in embed */
}

/* When dropdown is shown, ensure it's visible */
html.embed-mode .floating-dropdown-menu.show,
html.widget-mode .floating-dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   EMBED MODE + FULL LAYOUT: LATE OVERRIDE
   Ensure chat area and input bar are positioned AFTER sidebar, not under it.
   This must come LATE in the file to override earlier generic embed-mode rules.
   ============================================================================ */

/* GLOBAL FALLBACK: Ensure layout-full in embed mode ALWAYS has proper input bar offset */
/* This catches cases where media queries might not match as expected */
html.embed-mode body.layout-full .input-bar-fixed {
    left: var(--sidebar-width, 280px) !important;
    right: 0 !important;
    width: auto !important;
}

html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed,
html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed {
    left: var(--sidebar-collapsed-width, 60px) !important;
}

/* On narrow viewports (mobile), sidebar overlays and input bar should be full width */
@media (max-width: 768px) {
    html.embed-mode body.layout-full .input-bar-fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    /* Main content fills space after sidebar in flexbox layout */
    html.embed-mode body.layout-full .main-content {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        position: relative !important;
    }
    
    /* Chat container fills the main content area */
    html.embed-mode body.layout-full .chat-container {
        width: 100% !important;
        max-width: var(--chat-area-width, 100%) !important;
        margin: 0 auto !important;
    }
    
    /* Input bar starts AFTER sidebar - responds to collapsed/expanded state */
    html.embed-mode body.layout-full .input-bar-fixed {
        left: var(--sidebar-width, 280px) !important;
        right: 0 !important;
        width: auto !important;
        transition: left 0.3s ease !important;
    }
    
    /* When sidebar is collapsed, input bar moves left */
    /* NOTE: .input-bar-fixed is a SIBLING of .main-content, not nested inside it */
    html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed,
    html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed {
        left: var(--sidebar-collapsed-width, 60px) !important;
    }
    
    /* Input bar content fills available space */
    html.embed-mode body.layout-full .input-bar-content {
        width: 100% !important;
        max-width: var(--chat-area-width, 100%) !important;
        margin: 0 auto !important;
    }
    
    /* Chat messages should not overflow under sidebar */
    html.embed-mode body.layout-full .chat-messages,
    html.embed-mode body.layout-full #chatMessages {
        overflow-x: hidden !important;
    }
}

/* ============================================================================
   AI ANALYTICS CHAT INTERFACE
   Conversational analytics interface for querying data with natural language
   ============================================================================ */

/* Main Container - Responsive with equal buffer on all sides */
.ai-analytics-container {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

/* AI Analytics Report - fits within the admin modal content area */
#aiAnalyticsReport {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Fullscreen mode - fills entire tab area, no header */
#aiAnalyticsReport.ai-analytics-fullscreen {
    margin: 0;
    border-radius: 0 0 12px 12px;
    border-top: none;
    /* Height: fills available space in tab container */
    height: clamp(400px, calc(85vh - 200px), 700px);
}

/* Hide header in fullscreen mode (header removed from HTML) */
.ai-analytics-fullscreen .ai-analytics-header {
    display: none;
}

/* PII notice in footer - compact inline style */
.ai-analytics-footer-buttons .ai-analytics-pii-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: help;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.ai-analytics-footer-buttons .ai-analytics-pii-notice:hover {
    background: var(--theme-primary);
    color: white;
}

.ai-analytics-footer-buttons .ai-analytics-pii-notice i {
    font-size: 14px;
}

.ai-analytics-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}

.ai-analytics-logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
}

.ai-analytics-title i {
    font-size: 20px;
    opacity: 0.9;
}

.ai-analytics-pii-notice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

.ai-analytics-pii-notice:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.25);
}

.ai-analytics-pii-notice i {
    font-size: 14px;
}

/* Custom tooltip - shows immediately on hover */
.ai-analytics-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ai-analytics-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

.ai-analytics-pii-notice:hover .ai-analytics-tooltip,
.ai-analytics-pii-notice:focus .ai-analytics-tooltip,
.ai-analytics-pii-notice.active .ai-analytics-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Chat Container - Scrollable message area */
.ai-analytics-chat-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-primary);
    min-height: 0; /* Important for flex container to allow shrinking */
}

/* Welcome Screen - Centered vertically and horizontally */
.ai-analytics-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    flex: 1; /* Take up available space to center content */
    min-height: 100%;
    color: var(--text-secondary);
}

.ai-analytics-welcome h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.ai-analytics-welcome p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.ai-analytics-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}

.ai-analytics-suggestions .suggestions-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.suggestion-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.suggestion-btn:hover {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 163, 240, 0.2);
}

.suggestion-btn i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Chat Messages */
.ai-analytics-message {
    display: flex;
    gap: 12px;
    max-width: 95%;
    width: fit-content;
    animation: fadeInUp 0.3s ease;
    box-sizing: border-box;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-analytics-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-analytics-message.assistant {
    align-self: flex-start;
}

.ai-analytics-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.ai-analytics-message.user .ai-analytics-avatar {
    background: var(--theme-secondary-dark);
    color: white;
}

.ai-analytics-message.assistant .ai-analytics-avatar {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary));
    color: white;
}

.ai-analytics-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
}

.ai-analytics-message.user .ai-analytics-bubble {
    background: var(--theme-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-analytics-message.assistant .ai-analytics-bubble {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 4px;
}

/* Formatted Message Text */
.ai-query-example {
    background: var(--bg-tertiary);
    color: var(--theme-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95em;
    white-space: nowrap;
}

.ai-category-item {
    display: inline-block;
    margin-top: 8px;
}

.ai-category-icon {
    margin-right: 4px;
}

/* List items in AI messages */
.ai-list-item {
    display: block;
    margin: 6px 0;
    padding-left: 4px;
}

.ai-list-number,
.ai-list-letter {
    display: inline-block;
    min-width: 20px;
    font-weight: 600;
    color: var(--theme-primary);
}

[data-theme="dark"] .ai-query-example {
    background: rgba(255, 255, 255, 0.1);
    color: var(--theme-primary-light);
}

[data-theme="dark"] .ai-list-number,
[data-theme="dark"] .ai-list-letter {
    color: var(--theme-primary-light);
}

/* Data Visualization in Messages */
.ai-analytics-data {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.ai-analytics-chart-container {
    width: 100%;
    max-width: 100%;
    height: 280px;
    min-height: 200px;
    max-height: 350px;
    margin: 12px 0;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ensure canvas fills container properly */
.ai-analytics-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.ai-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 12px 0;
}

.ai-analytics-table th,
.ai-analytics-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

/* Allow name column to wrap */
.ai-analytics-table td:first-child {
    white-space: normal;
    max-width: 180px;
    min-width: 100px;
}

/* Allow description/second column to wrap */
.ai-analytics-table td:nth-child(2) {
    white-space: normal;
    max-width: 300px;
    min-width: 150px;
}

.ai-analytics-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-analytics-table tr:hover {
    background: var(--hover-bg);
}

.ai-analytics-table tr:last-child td {
    border-bottom: none;
}

/* KPI Cards in Messages */
.ai-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.ai-analytics-kpi {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.ai-analytics-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 4px;
}

.ai-analytics-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Comparison Cards */
.ai-analytics-comparison {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}

.ai-analytics-comparison-card {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.comparison-metric-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.comparison-periods {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.comparison-period {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
}

.comparison-period .period-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.comparison-period .period-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.comparison-arrow {
    color: var(--text-muted);
    font-size: 14px;
}

.comparison-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;
}

.comparison-change.positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.comparison-change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error-color);
}

.comparison-change.neutral {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* Follow-up Suggestions */
.ai-analytics-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.followup-btn {
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.followup-btn:hover {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

/* Loading State */
.ai-analytics-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.ai-analytics-loading .dots {
    display: flex;
    gap: 4px;
}

.ai-analytics-loading .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary);
    animation: bounce 1.4s infinite ease-in-out both;
}

.ai-analytics-loading .dot:nth-child(1) { animation-delay: -0.32s; }
.ai-analytics-loading .dot:nth-child(2) { animation-delay: -0.16s; }
.ai-analytics-loading .dot:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* AI Analytics Message Styling (uses main chat message classes) */
.ai-analytics-msg {
    margin-bottom: 12px;
}

.ai-analytics-msg .message-avatar {
    flex-shrink: 0;
}

.ai-analytics-msg .ai-avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--theme-primary);
}

.ai-analytics-msg .message-content {
    flex: 1;
    min-width: 0;
}

/* Error State */
.ai-analytics-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: var(--error-color);
    font-size: 13px;
}

/* Input Container - Fixed at bottom with matching padding */
.ai-analytics-input-container {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ai-analytics-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color 0.2s ease;
}

.ai-analytics-input-wrapper:focus-within {
    border-color: var(--theme-primary);
}

.ai-analytics-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    resize: none !important;
    height: 24px !important; /* Single line height */
    min-height: 24px !important;
    max-height: 60px !important; /* Allow growth when typing long text */
    line-height: 1.5;
    padding: 2px 0;
    overflow-y: hidden;
    font-family: inherit;
    overflow-y: auto;
}

.ai-analytics-input:focus {
    outline: none;
}

.ai-analytics-input::placeholder {
    color: var(--text-muted);
}

.ai-analytics-send-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--theme-primary);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ai-analytics-send-btn:hover:not(:disabled) {
    background: var(--theme-primary-dark);
}

.ai-analytics-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-analytics-send-btn i {
    font-size: 12px;
}

.ai-analytics-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 0 2px;
}

.token-usage {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.token-usage i {
    color: var(--warning-color);
}

.reset-btn {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.reset-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Footer buttons container */
.ai-analytics-footer-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sample Prompts Button */
.sample-prompts-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.sample-prompts-btn:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: white;
}

.sample-prompts-btn i {
    color: var(--warning-color);
}

.sample-prompts-btn:hover i {
    color: white;
}

/* Sample Prompts Modal Styles */
.sample-prompts-modal {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.sample-prompts-modal::-webkit-scrollbar {
    width: 6px;
}

.sample-prompts-modal::-webkit-scrollbar-track {
    background: transparent;
}

.sample-prompts-modal::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.sample-prompts-modal::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

.sample-prompts-intro {
    background: var(--bg-tertiary);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 3px solid var(--theme-primary);
}

.sample-prompts-intro p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.sample-prompts-category {
    margin-bottom: 20px;
}

.sample-prompts-category h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.sample-prompts-category h4 i {
    color: var(--theme-primary);
}

.sample-prompts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sample-prompt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sample-prompt-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--theme-primary-light);
}

.sample-prompt-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.sample-prompt-use-btn {
    padding: 6px 12px;
    background: var(--theme-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sample-prompt-use-btn:hover {
    background: var(--theme-primary-dark);
    transform: translateY(-1px);
}

.sample-prompt-use-btn i {
    font-size: 11px;
}

/* Dark Theme Overrides */
[data-theme="dark"] .ai-analytics-container {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ai-analytics-chat-container {
    background: var(--bg-secondary);
}

[data-theme="dark"] .suggestion-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .suggestion-btn:hover {
    background: var(--editor-primary);
    border-color: var(--editor-primary);
}

[data-theme="dark"] .ai-analytics-message.assistant .ai-analytics-bubble {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ai-analytics-data {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ai-analytics-chart-container {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ai-analytics-kpi {
    background: var(--bg-secondary);
}

[data-theme="dark"] .ai-analytics-input-container {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .ai-analytics-input-wrapper {
    background: var(--bg-secondary);
    border-color: var(--theme-primary);
}

[data-theme="dark"] .ai-analytics-input-wrapper:focus-within {
    border-color: var(--theme-primary-light);
}

[data-theme="dark"] .followup-btn {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .followup-btn:hover {
    background: var(--editor-primary);
    border-color: var(--editor-primary);
}

[data-theme="dark"] #aiAnalyticsReport {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

/* Export Button in Data Results */
.ai-analytics-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.ai-analytics-export-btn:hover {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

/* Responsive - AI Analytics Report */
@media (max-width: 1200px) {
    #aiAnalyticsReport {
        margin: 14px 6px 6px 6px;
        height: clamp(342px, calc(85vh - 248px), 572px);
    }
}

@media (max-width: 900px) {
    #aiAnalyticsReport {
        margin: 14px 6px 6px 6px;
        height: clamp(312px, calc(90vh - 228px), 542px);
    }
}

@media (max-width: 768px) {
    #aiAnalyticsReport {
        margin: 14px 6px 6px 6px;
        height: clamp(292px, calc(90vh - 208px), 492px);
    }
    
    .ai-analytics-container {
        min-height: 280px;
    }
    
    .ai-analytics-header {
        padding: 10px 12px;
        border-radius: 12px 12px 0 0;
    }
    
    .ai-analytics-chat-container {
        padding: 12px;
    }
    
    .ai-analytics-input-container {
        padding: 12px;
    }
    
    .ai-analytics-pii-notice {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .ai-analytics-message {
        max-width: 95%;
    }
    
    .ai-analytics-welcome {
        padding: 16px;
    }
    
    .ai-analytics-welcome h4 {
        font-size: 18px;
    }
    
    .ai-analytics-suggestions {
        max-width: 100%;
    }
    
    .suggestion-btn {
        font-size: 12px;
        padding: 10px 14px;
    }
    
    .ai-analytics-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
 * Top-Nav Banner Tweaks UI — 2026-04-29 W350-r6 professional refactor
 *
 * Cleaner visual hierarchy than the previous flat radio/toggle list.
 * Three subsections (Images, Placement, Mobile) each with their own
 * header label so the admin can scan the panel at a glance. Components:
 *
 *   - .banner-tweak-subsection-header   small caps label + hint pair
 *   - .banner-image-grid                2-col responsive image upload
 *   - .banner-image-card                light/dark image upload card
 *   - .banner-position-options          stacked radio cards (Position)
 *   - .banner-size-segmented            segmented buttons (Size)
 *   - .banner-mobile-toggle-row         labeled toggle + multi-line desc
 *
 * All components inherit from existing CSS variables for theme-aware
 * coloring (light + dark) and respect the wider --theme-primary brand
 * color so they match each tenant's accent.
 *
 * NOTE on placement: this block lives ABOVE the FINAL OVERRIDE: EMBED
 * MODE section because that section's contract requires it to stay
 * in the last 5% of the file (asserted by tests/unit/frontend/input-
 * bar-positioning.test.js → 'final override is at end of file').
 * ===================================================================== */

/* Subsection header — small caps label aligned with a one-line hint */
.banner-tweak-subsection-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-light);
    flex-wrap: wrap;
}
.banner-tweak-subsection-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.banner-tweak-subsection-label .context-badge {
    margin-left: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.banner-tweak-subsection-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Image grid — 2 columns at ≥640px, 1 column on phones */
.banner-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .banner-image-grid {
        grid-template-columns: 1fr;
    }
}

/* Image upload card — preview + actions */
.banner-image-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.banner-image-card:hover {
    border-color: var(--border-medium);
}
.banner-image-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.banner-image-card-icon {
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.banner-image-card-icon-light {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.banner-image-card-icon-dark {
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
}
.banner-image-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.banner-image-card-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.banner-image-preview {
    background: var(--bg-secondary);
    height: 100px;
    border-radius: 8px;
    border: 1px dashed var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.banner-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.banner-image-empty-hint {
    font-size: 12px;
    color: var(--text-muted);
}
.banner-image-actions {
    display: flex;
    gap: 8px;
}
.banner-image-btn {
    font-size: 12px;
    padding: 6px 12px;
    flex: 0 0 auto;
}
.banner-image-btn-remove {
    color: var(--error-color);
}

/* Placement label (shared by Position + Size groups) */
.banner-placement-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* Position — stacked radio cards */
.banner-position-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.banner-position-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.banner-position-option:hover {
    border-color: var(--border-medium);
}
.banner-position-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--theme-primary);
}
.banner-position-option:has(input[type="radio"]:checked) {
    border-color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 5%, var(--bg-primary));
}
.banner-position-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.banner-position-option-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.banner-position-option-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Size — segmented control. 5 segments (off / ¼ / ½ / ¾ / full)
 * since W360b (2026-04-30). On narrow modal widths the grid collapses
 * to 5 → 3 → 2 columns so segments never get crushed below ~64px wide.
 *
 * Tighter horizontal padding than the old 4-segment control because
 * 5 segments share the same modal real-estate. Keeps the segments on
 * one row at the typical admin modal width (~880-960px). */
.banner-size-segmented {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 4px;
}
@media (max-width: 720px) {
    .banner-size-segmented {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .banner-size-segmented {
        grid-template-columns: repeat(2, 1fr);
    }
}
.banner-size-segment {
    position: relative;
    cursor: pointer;
}
.banner-size-segment input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.banner-size-segment-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 44px;
}
.banner-size-segment input[type="radio"]:checked ~ .banner-size-segment-label {
    background: var(--theme-primary);
    color: var(--theme-action-text, #ffffff);
}
.banner-size-segment input[type="radio"]:checked ~ .banner-size-segment-label .banner-size-segment-vh {
    color: var(--theme-action-text, #ffffff);
    opacity: 0.85;
}
.banner-size-segment:not(:has(input[type="radio"]:checked)):hover .banner-size-segment-label {
    background: var(--bg-secondary);
}
.banner-size-segment-title {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}
.banner-size-segment-vh {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Mobile toggle row — title + desc on the left, switch on the right */
.banner-mobile-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px;
}
.banner-mobile-toggle-text {
    flex: 1 1 auto;
    min-width: 0;
}
.banner-mobile-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.banner-mobile-toggle-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.banner-mobile-toggle-desc code {
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-secondary);
}
.banner-mobile-toggle-switch {
    flex: 0 0 auto;
    margin-top: 2px;
}
@media (max-width: 540px) {
    .banner-mobile-toggle-row {
        flex-direction: column;
        gap: 10px;
    }
    .banner-mobile-toggle-switch {
        align-self: flex-start;
    }
}

/* v1.0.523 — Section Page widget overflow guards.
   Authored Section Page content paints into `.section-page-content`
   inside the chat surface. Hero widgets internally use CSS Grid +
   Flexbox (.hero-split-section grid-template-columns: 3fr 2fr;
   .hero-steps-inner display:flex flex-direction:row; etc.) and
   children of those flex/grid tracks default to `min-width: auto`,
   which lets long content (an h1 headline, a long step description,
   a multi-word CTA label) push the track wider than its declared
   share. The track stretches, the section content overflows the
   chat surface, and authored text gets clipped at the viewport
   edge — exactly what Nick QA'd on /page/marketers (image: hero
   headline truncated at "for", final-CTA "Walk me through the
   architecture" wrapped into 3 lines on the right).

   Fix: scope `min-width: 0` and `min-height: 0` to every flex/grid
   child of every hero widget when it lives inside .section-page-
   content. This is the standard remedy for the flex auto min-size
   gotcha (https://www.w3.org/TR/css-flexbox-1/#min-size-auto). We
   ALSO add `overflow-wrap: break-word` to the surface so a single
   pathologically long word (URL, no-break compound) breaks rather
   than overflows. `overflow-x: clip` on the surface itself prevents
   any residual overflow from causing horizontal scroll on the page.

   Scoped to .section-page-content ONLY — does not affect homepage
   hero, campaign modals, or any other widget render path. */
.section-page-content {
    /* v1.0.523 / v1.0.529 / v1.0.530 — Section Page surface guards.
       History:
       - v523 used `overflow-x: clip` for cleanest containment.
       - v529 switched to `overflow-x: hidden` (universal browser
         support, iOS Safari < 16 ignored `clip`).
       - v530 MOVES overflow-x:hidden up to `body.section-page-active`
         so it lives at the document level, NOT on this surface.
         Reason: clipping at the surface level also clipped widget
         hover effects (focus rings, box-shadows on buttons) that
         paint just outside an element's content box at the surface
         boundary. Visible edge-clipping on tap/hover, especially
         visible on the closing CTA's full-width buttons that sit
         flush with the panel's inner padding edge.
       The surface keeps the wrapping + max-width + box-sizing
       guards so authored content still flows correctly. */
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}
/* v1.0.530 — Document-level horizontal scroll prevention. The
   `body.section-page-active` class is toggled by section-page-
   renderer.js's paintSectionContent() and cleared on home
   navigation, so this rule applies only while the visitor is on
   a Section Page. Document-scoped `overflow-x: hidden` means any
   widget that paints beyond viewport (e.g., hover shadow at the
   far edge of the surface) is clipped at the body — never at the
   widget's own surface — so hover effects within the surface
   render freely without producing document horizontal scroll. */
body.section-page-active {
    overflow-x: hidden;
}
.section-page-content .hero-split-section > .hero-split-col,
.section-page-content .hero-steps-inner > .hero-step-item,
.section-page-content .hero-tab-panels > .hero-tab-panel,
.section-page-content .hero-pricing-grid > .hero-pricing-card,
.section-page-content .hero-accordion > .hero-accordion-item {
    min-width: 0;
    min-height: 0;
}
/* Defensively wrap heading + paragraph text inside widget panels so
   any super-long unbreakable string still wraps. */
.section-page-content .hero-split-col :where(h1, h2, h3, h4, h5, h6, p),
.section-page-content .hero-step-item :where(.hero-step-title, .hero-step-desc),
.section-page-content .hero-pricing-card :where(.hero-pricing-name, .hero-pricing-price, .hero-pricing-period),
.section-page-content .hero-tab-panel :where(h1, h2, h3, h4, h5, h6, p) {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
/* The widget-level final CTA inside .hero-steps must remain BELOW
   the .hero-steps-inner row, never alongside it. Since .hero-steps
   has no display rule of its own (default block), this normally
   holds — but a pasted page that lost the closing `</div>` for
   .hero-steps-inner could leave the .hero-widget-cta inside the
   flex row. Force a clean block-display on the widget root just to
   be safe; the CTA is always in flow below the row. */
.section-page-content .hero-steps {
    display: block;
}
.section-page-content .hero-steps-inner {
    width: 100%;
}

/* v1.0.527 — Section Page split-section mobile alignment reset.
   On desktop, admins commonly author the right column of a closing
   CTA section with `data-col-halign="right"` so the buttons sit at
   the right edge of the column, opposite the heading text on the
   left. When the grid stacks to 1fr on mobile (≤ 600px), the right
   column becomes its own full-width row, but the inline
   `align-items: flex-end` and `justify-content: flex-end` on inner
   wrappers KEEP the CTAs glued to the right edge — leaving an
   awkward visual gap between the left-aligned heading and the
   right-clinging buttons.

   Reset alignment to `flex-start` on mobile for both the column
   itself (when it was authored as right or center halign) and any
   direct child wrapper that uses `justify-content: flex-end / center`.
   The attribute substring selector matches both `flex-end` and
   `center`, with and without a space after the colon — covering
   the inline styles authored by both buildSplitSectionHtml and the
   syncari-section-page.html template. */
@media (max-width: 768px) {
    .section-page-content .hero-split-col[data-col-halign="right"],
    .section-page-content .hero-split-col[data-col-halign="center"] {
        align-items: flex-start !important;
    }
    .section-page-content .hero-split-col > [style*="justify-content:flex-end"],
    .section-page-content .hero-split-col > [style*="justify-content: flex-end"],
    .section-page-content .hero-split-col > [style*="justify-content:center"],
    .section-page-content .hero-split-col > [style*="justify-content: center"] {
        justify-content: flex-start !important;
    }
}
/* On phones (≤ 480px) make CTA buttons inside a Section Page split
   section fill the full row width for thumb-friendly tap targets.
   The buttons are authored as `display: inline-flex` so they don't
   stretch by default; `width: 100%` + `justify-content: center`
   gives a clean stacked-button look. Limited to .hero-split-col
   .gptweb-action-link so this doesn't affect inline links inside
   the heading column or anywhere else on the page. */
@media (max-width: 480px) {
    .section-page-content .hero-split-col .gptweb-action-link {
        width: 100%;
        justify-content: center !important;
    }
}

/* v1.0.524 / v1.0.526 — Strip the chat-message h1 underline rule
   from authored Section Page headings.

   Background: `.message-content h1` (styles.css ~line 3281) carries
     border-bottom: 1px solid var(--border-light);
     padding-bottom: 4px;
   which is the right look for streamed chat answers (h1 used as a
   section divider) but renders an unwanted horizontal line under
   hero headlines on Section Pages. Made worse by v1.0.525 which
   redefines --border-light to a translucent white inside surface-
   dark scope, turning that line into a faint white stripe on dark
   hero panels.

   v1.0.524 first attempted this with `:where(h1, h2, ...)` but
   :where() contributes ZERO to specificity, so the override
   (specificity 0,1,0) lost to .message-content h1 (specificity
   0,1,1) and the line stayed visible. v1.0.526 corrects the
   selector: `.section-page-content .message-content h1` has
   specificity 0,2,1 which definitively beats .message-content h1.
   Author-set inline `border-bottom` overrides on individual
   headings still win because inline always beats class. */
.section-page-content .message-content h1,
.section-page-content .message-content h2,
.section-page-content .message-content h3,
.section-page-content .message-content h4,
.section-page-content .message-content h5,
.section-page-content .message-content h6,
.section-page-content h1,
.section-page-content h2,
.section-page-content h3,
.section-page-content h4,
.section-page-content h5,
.section-page-content h6 {
    border-bottom: none;
    padding-bottom: 0;
}
[data-theme="dark"] .section-page-content .message-content h1,
[data-theme="dark"] .section-page-content .message-content h2,
[data-theme="dark"] .section-page-content .message-content h3,
[data-theme="dark"] .section-page-content .message-content h4,
[data-theme="dark"] .section-page-content .message-content h5,
[data-theme="dark"] .section-page-content .message-content h6,
[data-theme="dark"] .section-page-content h1,
[data-theme="dark"] .section-page-content h2,
[data-theme="dark"] .section-page-content h3,
[data-theme="dark"] .section-page-content h4,
[data-theme="dark"] .section-page-content h5,
[data-theme="dark"] .section-page-content h6 {
    border-bottom: none;
    padding-bottom: 0;
}

/* v1.0.522 / v1.0.525 — Section page surface-aware contrast.
   section-page-renderer computes the relative luminance of the chat
   surface a Section Page paints onto and toggles
   `body.section-page-surface-dark` when the surface is dark enough
   that var(--text-primary) might fail contrast.

   v1.0.525 rewrites the override to redefine the CSS variables
   themselves inside the section page surface. The original v1.0.522
   approach used `:where(...) { color: #fff }` which is correctly low
   specificity, but loses to inline `color: var(--text-primary)` on
   author headings (specificity of inline > class regardless of
   :where). By redefining `--text-primary` and `--text-muted` at the
   .section-page-content scope, every cascade reference — inline,
   class, attribute selector — resolves to the surface-appropriate
   color automatically. No !important needed. Per-author overrides
   that hard-code a literal color (e.g., style="color: #ff0000") still
   win as expected.

   NOTE: Block placed BEFORE the input-bar FINAL OVERRIDE so the
   input-bar contract (it owns the very end of the file) stays
   intact. */
body.section-page-surface-dark .section-page-content {
    /* Variables that authored Section Page widgets read for body
       text, headings, and surface chrome. Redefining at this scope
       wins for every descendant including inline color references. */
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.78);
    --border-light: rgba(255, 255, 255, 0.18);
    /* Last-resort baseline color for any element that doesn't set
       its own color (rare but safe). */
    color: #ffffff;
}
/* Hero widget panels that establish their own background (e.g.,
   .hero-pricing-card with bg-primary, .hero-split-section with
   data-bg-color) DO control their own contrast — those panels paint
   on a known light-themed surface, so text inside them should
   resolve to the original light-theme values, NOT the surface-dark
   inversions. Hard-code light-theme neutral defaults at the panel
   scope so text variables inside backed panels stay legible.
   (CSS variable substitution is lazy, so a "capture" pattern via
   :root would re-resolve to the surface-dark values — hard-coded
   hexes are the simplest correct approach.) */
body.section-page-surface-dark .section-page-content .hero-pricing-card,
body.section-page-surface-dark .section-page-content .hero-split-section[data-bg-color] {
    --text-primary: #1f2937;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;
    color: var(--text-primary);
}
/* v1.0.528 — Boxed-style tabs on a dark hero panel surface. The
   v1.0.525 variable redefinition turns the boxed panel's bg-primary
   transparent-on-dark, which destroys the card aesthetic. Re-pin
   the panel to a light surface AND restore the inner text color
   variables to neutral light-theme defaults so the card stays
   readable. Same approach as the pricing-card / split-section
   panel rule above. */
body.section-page-surface-dark .section-page-content .hero-tabs[data-tab-style="boxed"] {
    --text-primary: #1f2937;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    color: var(--text-primary);
}

/* v1.0.533 — Topic Cards / Blog widget on a dark hero panel surface.
   Same treatment: each card paints its own light-themed surface so
   inner text resolves to neutral light-theme defaults regardless of
   the surrounding hero surface luminance. */
body.section-page-surface-dark .section-page-content .hero-blog-card {
    --text-primary: #1f2937;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    color: var(--text-primary);
}

/* v1.0.533 / v1.0.534 / v1.0.539 — Topic Cards widget styling.
   Hover lift, native scrollbar styling, and aggressive mobile stack
   so blog hubs are thumb-friendly on phones and don't horizontally
   scroll out of the viewport. */
.hero-blog-card {
    box-sizing: border-box;
    /* Defensive guard against any parent-applied transform escaping
       the card's own bounding box on hover — prevents the lift effect
       from clipping when the card sits inside an overflow:hidden rail. */
    will-change: transform;
}
/* v1.0.539 / v1.0.549 — Image extends past the card border so the
   colored border paints OVER the image's outermost pixels (no
   anti-aliased gap between the image's clipped corner and the
   card's inset border-radius — visible on hover when the border
   tints to a saturated color, Nick's reproduction at
   cardBorderWidth=2 and =3).
   v1.0.549 root cause: Chrome's flex column `align-items: stretch`
   was NOT expanding the image div's width when given negative
   left/right margins — DevTools showed the image div 2px NARROWER
   than the card's content area instead of 6px WIDER. With
   `box-sizing: border-box` globally, explicit `width: calc(100% +
   6px)` bypasses the flex stretch quirk and forces the box wider.
   The `-3px` left/right margins then position the wider box to
   extend 3px past the card on each side. overflow:hidden on the
   card clips back to the rounded outer shape; the border paints
   over the image's outer 1–3px. Zero gap regardless of admin-set
   border width (1px, 2px, or 3px — covered by the 3px overlap). */
.hero-blog-card .hero-blog-card-image {
    /* v1.0.549 — `!important` overrides any baked-in inline styles
       from older saved widget markup (the DB may contain old
       `width: calc(100% + 3px)` from earlier v549 iterations).
       Big overshoot (24px / 12px each side) defeats Chrome's silent
       flex-stretch shrink (~1.5–8px observed in DevTools). The
       overshoot extends well past the 3px max admin border width
       — overflow:hidden on the card clips back to the rounded outer
       shape and the border paints over the outermost 1–3px. */
    width: calc(100% + 24px) !important;
    margin: -12px -12px 0 -12px !important;
}
.hero-blog-card-featured .hero-blog-card-image {
    /* Featured card uses flex-row layout (image left, text right).
       Image only overshoots LEFT side; right stays 0 so it doesn't
       bleed into the body column. */
    width: calc(100% + 12px) !important;
    margin: -12px 0 -12px -12px !important;
}
@media (max-width: 900px) {
    /* When the featured card stacks below 900px, switch back to
       the regular card image margin pattern. */
    .hero-blog-card-featured .hero-blog-card-image {
        width: calc(100% + 24px) !important;
        margin: -12px -12px 0 -12px !important;
    }
}
.hero-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    /* v1.0.535 — Hover border color is admin-configurable per widget
       via the `--blog-hover-border` custom property set by the
       activator from data-hover-border-color. Falls through to
       theme-primary when the property isn't set. */
    border-color: var(--blog-hover-border, var(--theme-primary, #3b82f6)) !important;
}
.hero-blog-cards-row {
    /* Hide the native scrollbar — these horizontal rails read better
       without browser-painted bars and the user can swipe / wheel
       freely. Falls back gracefully to the default scrollbar in
       browsers that don't support these properties. */
    scrollbar-width: thin;
}
.hero-blog-cards-row::-webkit-scrollbar { height: 6px; }
.hero-blog-cards-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

/* v1.0.534 — Search bar focus state matches the surrounding theme. */
.hero-blog-search:focus {
    border-color: var(--theme-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* v1.0.540 — Search filter uses a class toggle (not inline style.display)
   to hide cards / cells / sections / featured wraps. The cards + cell
   wrappers carry inline `display: flex` as their layout baseline; the
   v1.0.534/537/538 search filter cleared it via `style.display = ''`,
   which DELETED the inline flex declaration, leaving orphaned
   flex-direction / align-items rules and a broken layout (Nick saw
   the featured card's image jump full-width + stacked + stray border
   fragments after typing in search). Class toggle preserves inline
   styles untouched — display:none wins via specificity + !important.
   Same `.hero-blog-hidden` class is used by the inline activator in
   index.html and the admin-bundle activator in hero-widgets-extended.js. */
.hero-blog-hidden {
    display: none !important;
}

/* v1.0.542 — Section header layout overrides. Saved widgets from
   v1.0.534–v1.0.540 baked `flex-wrap: wrap` into the inline style and
   left the h3 without `flex / min-width:0 / text-overflow:ellipsis`,
   which made arrows wrap to a 2nd line and the title overflow the row.
   The v1.0.541 builder fix only applies to NEWLY-inserted widgets;
   existing saved widgets keep their old inline markup. These CSS
   overrides force the right layout regardless of which builder
   version saved the HTML, so admins don't have to re-insert every
   widget after upgrading. `!important` is used because the rules are
   overriding inline style declarations. */
.hero-blog-section-header {
    flex-wrap: nowrap !important;
}
.hero-blog-section-header h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.hero-blog-section-nav {
    flex-shrink: 0 !important;
}

/* v1.0.543 — Disable CSS scroll-snap on the cards row and cells.
   Pre-v1.0.543 saved markup baked `scroll-snap-type: x proximity`
   into the row + `scroll-snap-align: start` on every cell. Browser
   snap engines (Chrome / Safari) compute snap-aligned scroll
   positions on initial layout and AFTER our `scrollLeft = 0`
   write, overriding it. Result: first card painted partially
   clipped on the left; visitor had to click the prev arrow to
   see it fully. Disabling snap entirely removes the variable —
   row still scrolls smoothly via `overflow-x: auto`, cards still
   anchor at their natural width. We lose touch-snap behavior
   (which felt nice but caused this bug) — net positive UX. */
.hero-blog-cards-row {
    scroll-snap-type: none !important;
}
.hero-blog-cards-row-cell {
    scroll-snap-align: none !important;
}

/* v1.0.536 — Section nav arrow buttons (prev / next).
   Replaces the v1.0.534 "See all" prompt link with a visitor-
   friendly horizontal-scroll affordance modeled on Hubspot /
   Forbes / BBC blog hubs. Inline-styled defaults are in the
   builder; these rules layer on hover, focus, and disabled
   states. The activator wires up the click → scrollBy +
   disable-at-edges logic. */
.hero-blog-nav-btn:hover:not(:disabled) {
    border-color: var(--theme-primary, #3b82f6) !important;
    color: var(--theme-primary, #3b82f6) !important;
    background: var(--bg-secondary, #f9fafb) !important;
    transform: translateY(-1px);
}
.hero-blog-nav-btn:focus-visible {
    outline: 2px solid var(--theme-primary, #3b82f6);
    outline-offset: 2px;
}
.hero-blog-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
/* Phone breakpoint: shrink slightly + drop the hover translate
   (touch devices stick on hover, see same pattern on .hero-blog-card). */
@media (max-width: 640px) {
    .hero-blog-nav-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .hero-blog-nav-btn:hover {
        transform: none !important;
    }
}

/* v1.0.534 — Tablet breakpoint (≤900px): featured card flips back to
   stacked (image on top + text below) so the side-by-side layout
   doesn't crush either column. Card grid keeps multi-column. */
@media (max-width: 900px) {
    .hero-blog-card-featured {
        flex-direction: column !important;
    }
    .hero-blog-card-featured .hero-blog-card-image {
        max-height: 280px !important;
        flex: 0 0 auto !important;
    }
    .hero-blog-card-featured .hero-blog-card-body {
        flex: 1 1 auto !important;
    }
}

/* v1.0.534 — Phone breakpoint (≤640px): stack everything single-column
   for thumb-friendly browsing. Cards take full width, horizontal-scroll
   rails convert to vertical stacks, headline sizes drop, and image
   placeholders shrink. */
@media (max-width: 640px) {
    .hero-blog-cards {
        margin: 24px 0 !important;
    }
    .hero-blog-cards .hero-blog-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .hero-blog-cards .hero-blog-cards-row {
        flex-direction: column !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
        gap: 16px !important;
    }
    .hero-blog-cards .hero-blog-cards-row > .hero-blog-cards-row-cell,
    .hero-blog-cards .hero-blog-cards-row > div {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .hero-blog-card-featured .hero-blog-card-title {
        font-size: 19px !important;
    }
    .hero-blog-card-featured .hero-blog-card-image {
        max-height: 200px !important;
    }
    .hero-blog-card .hero-blog-card-image {
        max-height: 180px !important;
    }
    .hero-blog-card-body {
        padding: 16px 18px !important;
    }
    .hero-blog-section-header {
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
    .hero-blog-section-header h3 {
        font-size: 17px !important;
    }
    .hero-blog-section-see-all {
        font-size: 13px !important;
    }
    /* On hover-less touch devices, drop the lift transition — taps
       on phones briefly trigger :hover before navigating, leaving
       the card in a "lifted" state until the visitor scrolls past. */
    .hero-blog-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
}

/* ============================================================================
   FINAL OVERRIDE: EMBED MODE LAYOUT-FULL INPUT BAR POSITIONING
   This section MUST be at the VERY END of the file to override ALL other rules.
   The input bar in embed-mode layout-full MUST be positioned after the sidebar.
   ============================================================================ */

/* Global rule: layout-full input bar starts after sidebar */
/* IMPORTANT: Uses both sibling selector (~) and :has() for browser compatibility */
html.embed-mode body.layout-full .input-bar-fixed,
html.embed-mode body.layout-full .input-bar-fixed.profile-inline,
html.embed-mode body.layout-full .input-bar-fixed.profile-inline-minimal,
html.embed-mode body.layout-full .input-bar-fixed.profile-inline-expanded {
    left: var(--sidebar-width, 280px) !important;
    right: 0 !important;
    width: auto !important;
    transition: left 0.3s ease !important;
}

/* When sidebar is collapsed - using multiple selectors for reliability */
/* Method 1: Sibling selector (works if input-bar-fixed is sibling of sidebar) */
html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed,
html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed.profile-inline,
html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed.profile-inline-minimal,
html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed.profile-inline-expanded,
/* Method 2: :has() selector (modern browsers, works regardless of DOM structure) */
html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed,
html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed.profile-inline,
html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed.profile-inline-minimal,
html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed.profile-inline-expanded {
    left: var(--sidebar-collapsed-width, 60px) !important;
}

/* Mobile override: on narrow viewports, sidebar overlays so input bar is full width */
/* Using max-width to detect mobile */
@media (max-width: 768px) {
    html.embed-mode body.layout-full .input-bar-fixed,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline-minimal,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline-expanded,
    /* Also reset collapsed state on mobile */
    html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed,
    html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* CRITICAL FIX: Touch devices at LARGER widths (>768px) need sidebar offset
   The earlier rule at line ~3000 targets (hover: none) and (pointer: coarse) with left: 0
   This explicit override ensures layouts with sidebars respect sidebar width on large touch devices
   Applies to: layout-full, layout-no-header */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    /* layout-full: sidebar offset for expanded state */
    html.embed-mode body.layout-full .input-bar-fixed,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline-minimal,
    html.embed-mode body.layout-full .input-bar-fixed.profile-inline-expanded,
    /* layout-no-header: sidebar offset for expanded state */
    html.embed-mode body.layout-no-header .input-bar-fixed,
    html.embed-mode body.layout-no-header .input-bar-fixed.profile-inline,
    html.embed-mode body.layout-no-header .input-bar-fixed.profile-inline-minimal,
    html.embed-mode body.layout-no-header .input-bar-fixed.profile-inline-expanded {
        left: var(--sidebar-width, 280px) !important;
        right: 0 !important;
        width: auto !important;
    }
    
    /* Collapsed sidebar state on touch devices - layout-full */
    html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed,
    html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed,
    html.embed-mode body.layout-full .sidebar.collapsed ~ .input-bar-fixed.profile-inline,
    html.embed-mode body.layout-full:has(.sidebar.collapsed) .input-bar-fixed.profile-inline,
    /* Collapsed sidebar state on touch devices - layout-no-header */
    html.embed-mode body.layout-no-header .sidebar.collapsed ~ .input-bar-fixed,
    html.embed-mode body.layout-no-header:has(.sidebar.collapsed) .input-bar-fixed,
    html.embed-mode body.layout-no-header .sidebar.collapsed ~ .input-bar-fixed.profile-inline,
    html.embed-mode body.layout-no-header:has(.sidebar.collapsed) .input-bar-fixed.profile-inline {
        left: var(--sidebar-collapsed-width, 60px) !important;
    }
}

/* ============================================================================
   WELCOME MESSAGE MEDIA STYLES
   Default rounded corners that can be overridden by custom CSS snippets
   ============================================================================ */

/* Welcome message: ensure media never overflows the chat bubble */
.welcome-message .message-content {
    overflow: hidden;
}

/* Welcome media containers have default rounded corners */
.welcome-media-container,
.welcome-media-video,
.welcome-media-flipbook,
.welcome-media-image {
    border-radius: 10px;
    display: block;
    box-sizing: border-box;
}

/* Welcome media must never exceed its parent (the message bubble) */
.welcome-message .message-content .welcome-media-container,
.welcome-message .message-content .welcome-media-video,
.welcome-message .message-content .welcome-media-flipbook,
.welcome-message .message-content .welcome-media-image {
    max-width: 100%;
    box-sizing: border-box;
}

/* Welcome media images/videos have default rounded corners */
.welcome-media-img,
.welcome-media-video img,
.welcome-media-video video,
.welcome-media-flipbook img,
.welcome-image img {
    border-radius: 8px;
}

/* Ensure flipbook slideshow fills container width */
.welcome-media-flipbook .chat-flipbook-slideshow {
    display: block;
    width: 100%;
    max-width: 100%;
}


/* Override for square corners snippet - add this class or use custom CSS to override */
/* Example snippet to make everything square:
   .welcome-media-container, .welcome-media-img, .welcome-image img { border-radius: 0 !important; }
*/

/* Welcome media visibility button states */
.media-visibility-btn {
    transition: opacity 0.2s ease, color 0.2s ease;
}
.media-visibility-btn:hover {
    opacity: 0.8 !important;
    color: var(--theme-primary) !important;
}
.media-visibility-btn.visibility-active {
    opacity: 1 !important;
    color: var(--theme-primary) !important;
}

/* Visibility modal toggle pills */
.vis-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vis-toggle-pill {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.vis-toggle-pill:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}
.vis-toggle-pill.selected {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

/* Three-state toggle for DQL/Customer */
.vis-tristate {
    display: inline-flex;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}
.vis-tristate-opt {
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    border-right: 1px solid var(--border-light);
    transition: all 0.15s ease;
}
.vis-tristate-opt:last-child {
    border-right: none;
}
.vis-tristate-opt:hover {
    background: var(--bg-tertiary);
}
.vis-tristate-opt.selected {
    background: var(--theme-primary);
    color: white;
}

/* Visibility modal form section spacing */
.vis-form-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.vis-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.vis-form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: 14px;
}
.vis-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================================================
   TOAST NOTIFICATION - MOBILE RESPONSIVE
   Compact styling for portrait mobile devices
   Added 2026-01-29
   ============================================================================ */

/* Mobile portrait: More compact toast notifications */
@media (max-width: 480px) {
    .notification {
        /* Reduce padding for more compact appearance (~30% smaller) */
        padding: 10px 18px !important;
        /* Smaller font for mobile */
        font-size: 12px !important;
        /* Slightly smaller border radius to match reduced size */
        border-radius: 40px !important;
        /* Position closer to top edge on mobile */
        top: 16px !important;
        /* Ensure readable max-width */
        max-width: 92vw !important;
    }
    
    /* Reduce icon size in notification */
    .notification i.fas,
    .notification i.far,
    .notification i.fa {
        font-size: 13px !important;
        margin-right: 8px !important;
    }
    
    /* Reduce message text weight slightly for smaller size */
    .notification span {
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }
}

/* Small mobile (very narrow screens) */
@media (max-width: 360px) {
    .notification {
        /* Even more compact for tiny screens */
        padding: 8px 14px !important;
        font-size: 11px !important;
        border-radius: 30px !important;
        top: 12px !important;
    }
    
    .notification i.fas,
    .notification i.far,
    .notification i.fa {
        font-size: 12px !important;
        margin-right: 6px !important;
    }
}

/* ============================================================================
   CRITICAL: MOBILE MENU SECTION HEADER FIX
   Force section headers (Prompt Library, Favorites, Settings) to be visible
   on mobile devices. This rule is placed at END of stylesheet for highest priority.
   Added 2026-01-29
   ============================================================================ */

/* MOBILE: Force sidebar section headers to be visible - ALL screen sizes under 1024px */
/* Using multiple media query syntaxes for maximum browser compatibility */
@media screen and (max-width: 1024px) {
    /* Force h4 section titles to be visible with explicit styling */
    .sidebar .section-header h4,
    .sidebar .section-header .section-title,
    .sidebar-section .section-header h4,
    .sidebar-section .section-header .section-title,
    #sectionsContainer .section-header h4,
    #sectionsContainer .section-header .section-title,
    [data-section-id] .section-header h4,
    [data-section-id] .section-header .section-title,
    .sections-container .section-header h4,
    .sections-container .section-header .section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px !important;
        /* Use menu color accent variable with fallback to text-secondary */
        color: var(--visitor-menu-section-text-color, var(--text-secondary, #6b7280)) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 100px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Widget mode override — only when sidebar is NOT collapsed */
    html.widget-mode .sidebar:not(.collapsed) .section-header h4,
    html.widget-mode .sidebar:not(.collapsed) .section-header .section-title,
    html.widget-mode .sidebar-section .section-header h4,
    html.widget-mode .sidebar-section .section-header .section-title,
    html.widget-mode #sectionsContainer .section-header h4,
    html.widget-mode #sectionsContainer .section-header .section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--visitor-menu-section-text-color, var(--text-secondary)) !important;
    }
    /* Widget: HIDE section headers when collapsed */
    html.widget-mode .sidebar.collapsed .section-header h4,
    html.widget-mode .sidebar.collapsed .section-header .section-title,
    html.widget-mode .sidebar.collapsed ~ #sectionsContainer .section-header h4,
    html.widget-mode .sidebar.collapsed ~ #sectionsContainer .section-header .section-title,
    html.widget-mode .sidebar.collapsed #sectionsContainer .section-header h4,
    html.widget-mode .sidebar.collapsed #sectionsContainer .section-header .section-title {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Embed mode override — only when sidebar is NOT collapsed */
    html.embed-mode .sidebar:not(.collapsed) .section-header h4,
    html.embed-mode .sidebar:not(.collapsed) .section-header .section-title,
    html.embed-mode .sidebar-section .section-header h4,
    html.embed-mode .sidebar-section .section-header .section-title,
    html.embed-mode #sectionsContainer .section-header h4,
    html.embed-mode #sectionsContainer .section-header .section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--visitor-menu-section-text-color, var(--text-secondary)) !important;
    }
    /* Embed: HIDE section headers when collapsed */
    html.embed-mode .sidebar.collapsed .section-header h4,
    html.embed-mode .sidebar.collapsed .section-header .section-title,
    html.embed-mode .sidebar.collapsed ~ #sectionsContainer .section-header h4,
    html.embed-mode .sidebar.collapsed ~ #sectionsContainer .section-header .section-title,
    html.embed-mode .sidebar.collapsed #sectionsContainer .section-header h4,
    html.embed-mode .sidebar.collapsed #sectionsContainer .section-header .section-title {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure section-header is flex row for proper layout */
    .sidebar .section-header,
    .sidebar-section .section-header,
    #sectionsContainer .section-header,
    .sections-container .section-header,
    [data-section-id] .section-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 24px !important;
    }
    
    /* Also target the preload state to ensure headers show even during initial load */
    .sidebar-collapsed-preload .sidebar .section-header h4,
    .sidebar-collapsed-preload .sidebar .section-title {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Override ANY collapsed state on mobile - force show text */
    .sidebar.collapsed .section-header h4,
    .sidebar.collapsed .section-title,
    .sidebar.collapsed .section-header .section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--visitor-menu-section-text-color, var(--text-secondary, #6b7280)) !important;
    }
}

/* Touch devices (tablets, phones) regardless of width */
@media (hover: none) and (pointer: coarse) {
    .sidebar .section-header h4,
    .sidebar .section-header .section-title,
    .sidebar-section .section-header h4,
    #sectionsContainer .section-header h4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobile section header alignment - Cross-browser compatible */
/* Tested: Chrome, Safari, Edge, Firefox on Windows, macOS, iOS, Android */
@media screen and (max-width: 1024px) {
    /* Proper section header layout on mobile - MUST be flex row */
    .sidebar .section-header,
    .sidebar-section .section-header,
    [data-section-id] .section-header {
        display: -webkit-box !important;      /* iOS Safari 9-12 */
        display: -webkit-flex !important;     /* Safari 6-8 */
        display: -ms-flexbox !important;      /* IE10 */
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-box-align: center !important;
        -webkit-align-items: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: justify !important;
        -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        /* Use mobile-specific CSS variable for configurable vertical padding */
        padding-top: var(--visitor-mobile-section-gap, var(--visitor-menu-section-bottom-gap, 10px)) !important;
        padding-bottom: var(--visitor-mobile-section-gap, var(--visitor-menu-section-bottom-gap, 10px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 8px !important;                  /* Modern browsers */
        position: relative !important;
        margin-bottom: 0 !important;
    }
    
    /* Section title text styling */
    .section-header h4,
    .section-header .section-title,
    h4.section-title {
        display: block !important;
        visibility: visible !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--visitor-menu-section-text-color, var(--text-secondary, #6b7280)) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-box-flex: 1 !important;
        -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        /* Fallback for gap - add right margin (Safari < 14.1) */
        margin-right: 8px !important;
    }
    
    /* Info icon positioning - ensure it stays on the right */
    .sidebar .section-header .info-icon,
    .sidebar-section .section-header .info-icon,
    [data-section-id] .section-header .info-icon {
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 auto !important;
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        position: relative !important;
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -webkit-align-items: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -webkit-justify-content: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        /* Remove gap fallback margin from last child */
        margin-right: 0 !important;
    }
}

/* Safari-specific fixes using @supports */
@supports not (gap: 8px) {
    @media screen and (max-width: 1024px) {
        .sidebar .section-header > *:not(:last-child),
        .sidebar-section .section-header > *:not(:last-child),
        [data-section-id] .section-header > *:not(:last-child) {
            margin-right: 8px !important;
        }
    }
}

/* Mobile menu spacing and font size improvements */
@media screen and (max-width: 1024px) {
    /* Reduce top padding on section-items to tighten gap */
    .sidebar .section-items,
    .sidebar-section .section-items,
    [data-section-id] .section-items {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Menu dividers (folders) - tighter spacing */
    .sidebar .menu-divider,
    .sidebar-section .menu-divider,
    [data-section-id] .menu-divider {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .sidebar .menu-divider-header,
    .sidebar-section .menu-divider-header,
    [data-section-id] .menu-divider-header {
        padding: var(--visitor-menu-divider-padding, 10px) var(--visitor-menu-divider-indent, 14px) !important;
        margin-top: 0 !important;
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
    
    .sidebar .menu-divider-header span,
    .sidebar-section .menu-divider-header span {
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
    
    /* Larger, more readable font for mobile menu items - use visitor variables */
    .sidebar .chat-item,
    .sidebar-section .chat-item,
    [data-section-id] .chat-item {
        padding-top: var(--visitor-mobile-item-padding, 10px) !important;
        padding-bottom: var(--visitor-mobile-item-padding, 10px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
    
    .sidebar .chat-item span,
    .sidebar-section .chat-item span,
    [data-section-id] .chat-item span {
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
    
    .sidebar .chat-item i,
    .sidebar-section .chat-item i,
    [data-section-id] .chat-item i {
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
        width: 20px !important;
    }
    
    /* Nested menu items */
    .sidebar .menu-divider-content .chat-item,
    .sidebar-section .menu-divider-content .chat-item {
        padding-left: var(--visitor-menu-nested-indent, 32px) !important;
        font-size: var(--visitor-mobile-menu-font-size, 15px) !important;
    }
}

/* ============================================================================
   FLYOUT MODE
   The flyout panel is rendered on the HOST page by flyout.js with its own header,
   so the iframe content inside inherits embed-mode styles. These rules ensure the
   iframe content fills the flyout panel correctly and the main-container has no
   extra borders or rounded corners.
   ============================================================================ */
/* Flyout & embed diagrams: fit to available panel space instead of full-page sizing */
html.flyout-mode .diagram-container,
html.embed-mode .diagram-container,
html.widget-mode .diagram-container {
    min-height: 150px;
    padding: 8px;
}

html.flyout-mode .mermaid-diagram svg,
html.embed-mode .mermaid-diagram svg,
html.widget-mode .mermaid-diagram svg {
    max-width: 100% !important;
    max-height: 50vh !important;
    height: auto !important;
    padding: 8px;
}

html.flyout-mode .main-container {
    height: 100%;
    margin: 0;
    border-radius: 0;
    width: 100% !important;
}

html.flyout-mode .chat-main {
    height: 100%;
    width: 100% !important;
}

html.flyout-mode .chat-container {
    width: calc(var(--chat-area-width, 100) * 1%) !important;
    max-width: calc(var(--chat-area-width, 100) * 1%) !important;
    padding: 8px !important;
    margin: 0 auto !important;
}

html.flyout-mode .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* v1.0.510 — Sidekick flyout on Top Nav: respect the Display Context
   width literally. Without this override, the W440 smooth-tier floor
   system on `.header-nav-mode .chat-messages` (client/styles.css:1041)
   AND `.header-nav-mode .input-bar-content` (client/styles.css:31511)
   both use `max(--header-nav-{results,input}-width, --chat-area-width, 75)
    * 1vw` with a viewport-tier floor that ramps the minimum width upward
   at intermediate viewports — designed for the main page so top_nav
   admins don't accidentally render too-narrow chat on tablets. In a
   flyout drawer that's a hidden floor: admin sets Display Context
   width to 50%, sees the chat render at ~65% AND the input bar centered
   with whitespace on both sides because both floors clamp the values.
   The W440 floor is meant for full-page top_nav rendering; in a drawer
   the admin already picked the panel size and the chat width and
   expects them to compose literally.

   We use `*` for both the legacy `.header-nav-mode` body class and the
   modern `body[data-layout="top_nav"]` selector so the override fires
   on every top_nav rendering path. `1%` (parent-relative) replaces
   `1vw` (viewport-relative) so the chat-messages and input-bar-content
   boxes fill their containers exactly — `.chat-container` itself is
   already sized to the Display Context width via the
   `html.flyout-mode .chat-container` rule above. Both selectors
   include `.input-bar-content` so the visible input bar at the bottom
   of the drawer also stretches edge-to-edge instead of being clamped
   by `--header-nav-input-floor`. */
html.flyout-mode .header-nav-mode .chat-messages,
html.flyout-mode .header-nav-mode .input-bar-content,
html.flyout-mode body[data-layout="top_nav"] .chat-messages,
html.flyout-mode body[data-layout="top_nav"] .input-bar-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* v1.0.510 — Sidekick flyout on Top Nav: make the chat chrome containers
   transparent so the `.layout-banner` element (at `z-index: -1` BEHIND the
   body) can show through. Without this, three issues stack:
     1. `.main-content` carries `background: var(--bg-primary)` (opaque white
        in light theme) from the global rule at client/styles.css:2934.
     2. When the admin picks "Minimal" chrome for the Flyout context,
        client/styles.css:33497 forces `.main-content { position: fixed }`,
        creating a new stacking context that paints OVER the negative-z
        banner.
     3. Without the `body.has-bg-pattern .main-content { background: transparent }`
        rule from client/styles.css:477 (which only fires when the tenant
        has a bg-pattern picked), main-content stays opaque and hides the
        banner.
   This rule mirrors the equivalent transparency override the Hero layout
   already uses at backend/server.js:4078-4082 for the same reason — the
   hero panel is painted as a body::before pseudo at z-index:1, and
   .main-content needed to be transparent so the panel showed through.
   Top Nav has the same architectural issue with the layout-banner.

   Scoped to flyout-mode + top_nav so the rule is a no-op on:
     - Hero layout (has its own equivalent rule, server-side critical CSS)
     - Left Nav layout (no banner at all)
     - Top Nav main page (banner shows because main-content is in normal
       flow and the banner extends past main-content's coverage area —
       only flyout's layout-minimal forces position:fixed which traps it). */
html.flyout-mode body[data-layout="top_nav"] .main-content,
html.flyout-mode body[data-layout="top_nav"] .main-container,
html.flyout-mode body[data-layout="top_nav"] .chat-container,
html.flyout-mode body[data-system-layout="top_nav"] .main-content,
html.flyout-mode body[data-system-layout="top_nav"] .main-container,
html.flyout-mode body[data-system-layout="top_nav"] .chat-container {
    background: transparent !important;
}

/* v1.0.511b — Sidekick flyout on Top Nav system + Minimal/No-Header chrome:
   anchor banner to top:0 instead of leaving the 70px header-nav-height
   reservation. The default `data-position="below"` rule (see
   client/layouts/styles-layout-top-nav.css) sets
   `top: var(--header-nav-height, ..., 70px)` so the banner starts BELOW
   the fixed top-nav header on the main page. In the flyout iframe with
   No-Header or Minimal chrome, no header is rendered (layout-loader
   strips `header-nav-mode` AND the chrome class hides `.top-nav`), so
   that 70px ends up as a blank strip between the drawer's own
   "Ask AI" header bar and the banner. Anchoring the banner to top:0
   removes the gap and lets the banner fill the actually-available
   space. Only fires in flyout-mode + Minimal/No-Header — Full / No
   Sidebar chrome keep the header-clearance in case a tenant sets one
   of those for the flyout context (rare but supported). Hero/left_nav
   systems are unaffected because they never reach the banner-positioning
   rules — banner element is only rendered when system is top_nav. */
html.flyout-mode body.layout-no-header[data-system-layout="top_nav"] .layout-banner[data-position="below"],
html.flyout-mode body.layout-minimal[data-system-layout="top_nav"] .layout-banner[data-position="below"] {
    top: 0 !important;
}

/* v1.0.510 / v1.0.555 — Sidekick flyout: "Suppress home page hero" toggle
   couples the home page welcome message and the top-nav banner. The
   banner is the visual backdrop the welcome message renders against
   (hero text positioned over the banner image on top_nav layout). When
   the admin chooses to suppress the home hero in the drawer, hide the
   banner too — rendering an empty banner slab with no content on top
   reserved a giant chunk of the drawer's vertical space for nothing.

   v1.0.555 — Scope this hide to NON-section-page contexts. Pre-v555
   the toggle hid the banner everywhere in flyout-mode, including on
   Section Pages, even though Section Pages have their own per-page
   banner-suppress toggle (section_page_suppress_banner) for that
   exact purpose. Nick's report: "I thought the welcome-suppress
   toggle only applied to the hero / home page — Section Pages
   are already individually controlled."

   Scoping fix: `body:not(.section-page-active)` excludes Section Page
   renders (section-page-renderer.js adds .section-page-active to the
   body when painting a section page). Home page in flyout still gets
   the welcome + banner hidden when the admin enables the toggle.

   When suppress is OFF (default), banner renders unchanged everywhere.
   When suppress is ON: home page hides banner, Section Pages defer
   to their own per-page toggle.

   The class `html.flyout-suppress-welcome` is still set in the embed-
   mode inline script (backend/server.js) when isFlyout AND
   req.query.suppressWelcome === 'true'. */
html.flyout-suppress-welcome body:not(.section-page-active) .layout-banner {
    display: none !important;
}

/* v1.0.517 — Per-section banner suppression. The body class
   `section-page-no-banner` is toggled by section-page-renderer.js
   when window.GPTWEB_SECTION_PAGE.suppressBanner === true (set per
   section page via the prompt-editor "Suppress banner on this page"
   toggle, persisted in prompt_library.section_page_suppress_banner).
   Class is cleared on home navigation so the homepage banner always
   shows even if the previous section had it suppressed. Selector
   matches .layout-banner only — no effect on left_nav or hero
   layouts (where the banner element doesn't render). */
body.section-page-no-banner .layout-banner {
    display: none !important;
}

/* ============================================================================
   GLASS PANEL OVERRIDES — FINAL (must be last to win cascade)
   These ensure glass effects win over all layout-specific background rules.
   ============================================================================ */
html body.has-bg-pattern .top-nav,
html.embed-mode body.has-bg-pattern .top-nav,
html.widget-mode body.has-bg-pattern .top-nav {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    box-shadow: none !important;
}
html body.has-bg-pattern .sidebar,
html.embed-mode body.has-bg-pattern .sidebar,
html.widget-mode body.has-bg-pattern .sidebar,
body.has-bg-pattern.layout-no-header .sidebar {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-right-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}
html body.has-bg-pattern .sidebar-footer,
html.embed-mode body.has-bg-pattern .sidebar-footer,
html.widget-mode body.has-bg-pattern .sidebar-footer,
body.has-bg-pattern.layout-no-header .sidebar-footer {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}
html body.has-bg-pattern .sidebar-social-icons,
html.embed-mode body.has-bg-pattern .sidebar-social-icons,
html.widget-mode body.has-bg-pattern .sidebar-social-icons,
body.has-bg-pattern.layout-no-header .sidebar-social-icons {
    background: transparent !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}
html body.has-bg-pattern .input-bar-fixed,
html.embed-mode body.has-bg-pattern .input-bar-fixed,
html.widget-mode body.has-bg-pattern .input-bar-fixed,
body.has-bg-pattern.layout-no-header .input-bar-fixed {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-input, 60%), transparent) !important;
    border-top-color: color-mix(in srgb, var(--border-light) var(--glass-input, 60%), transparent) !important;
}
html body.has-bg-pattern .floating-profile-wrapper,
html.embed-mode body.has-bg-pattern .floating-profile-wrapper,
html.widget-mode body.has-bg-pattern .floating-profile-wrapper {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-footer, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-footer, 60%), transparent) !important;
}
html body.has-bg-pattern .sidebar-mobile-header,
html.embed-mode body.has-bg-pattern .sidebar-mobile-header,
html.widget-mode body.has-bg-pattern .sidebar-mobile-header,
body.has-bg-pattern.layout-no-header .sidebar-mobile-header,
html.embed-mode body.has-bg-pattern.layout-no-header .sidebar-mobile-header {
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}
html body.has-bg-pattern .sidebar-internal-toggle,
html.embed-mode body.has-bg-pattern .sidebar-internal-toggle,
html.widget-mode body.has-bg-pattern .sidebar-internal-toggle,
body.has-bg-pattern.layout-no-header .sidebar-internal-toggle {
    background: color-mix(in srgb, var(--bg-sidebar, var(--bg-primary)) var(--glass-sidebar, 60%), transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-light) var(--glass-sidebar, 60%), transparent) !important;
}
html body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header,
html.embed-mode body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header,
html.widget-mode body[data-nav-container-bg="true"].has-bg-pattern .menu-divider-header,
body[data-nav-container-bg="true"].has-bg-pattern.layout-no-header .menu-divider-header {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion, 50%), transparent) !important;
}
html body.has-bg-pattern .menu-divider-header:hover,
html.embed-mode body.has-bg-pattern .menu-divider-header:hover,
html.widget-mode body.has-bg-pattern .menu-divider-header:hover {
    background: color-mix(in srgb, var(--hover-bg) var(--glass-accordion-hover, 70%), transparent) !important;
}

/* Header nav dropdowns: glass + frost */
html body.has-bg-pattern .header-nav-dropdown,
html body.has-bg-pattern .header-profile-dropdown {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-header, 60%), transparent) !important;
    border-color: color-mix(in srgb, var(--border-light) var(--glass-header, 60%), transparent) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    -webkit-backdrop-filter: blur(var(--glass-frost, 0px));
    backdrop-filter: blur(var(--glass-frost, 0px));
}

/* Glass layout: extend main-container to full viewport so chat content can
   scroll behind the transparent/frosted fixed header and input bar. */
html body.has-bg-pattern .main-container {
    margin-top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}
html body.has-bg-pattern .chat-messages {
    padding-top: var(--header-height, 60px);
}
@media (min-width: 769px) {
    html body.has-bg-pattern.header-nav-mode .chat-messages {
        padding-top: calc(var(--header-nav-height, 70px) + 24px);
    }
}

/* ============================================================================
   v1.0.426 — Modal History Sections
   Shared styles for Memory Facts / Recent Prompts / Recent Activity sections
   used by the Visitor AI Score modal, the Account Score Analysis modal, and
   (as the source pattern) the Live Visitors detail modal.

   All colors come in light + dark variants via CSS custom properties declared
   on :root and [data-theme="dark"] so any future category additions can be
   done by adding a single pair of variable declarations.
   ============================================================================ */

/* Category pill color tokens — light theme */
:root {
    --mh-cat-goal-bg:        rgba(34, 197, 94, 0.14);    /* green */
    --mh-cat-goal-text:      #15803d;
    --mh-cat-behavior-bg:    rgba(245, 158, 11, 0.14);   /* amber */
    --mh-cat-behavior-text:  #b45309;
    --mh-cat-technical-bg:   rgba(99, 102, 241, 0.14);   /* indigo */
    --mh-cat-technical-text: #4338ca;
    --mh-cat-pain-bg:        rgba(239, 68, 68, 0.14);    /* red */
    --mh-cat-pain-text:      #b91c1c;
    --mh-cat-preference-bg:  rgba(59, 130, 246, 0.14);   /* blue */
    --mh-cat-preference-text:#1d4ed8;
    --mh-cat-context-bg:     rgba(168, 85, 247, 0.14);   /* purple */
    --mh-cat-context-text:   #7c3aed;
    --mh-cat-default-bg:     rgba(107, 114, 128, 0.14);  /* gray fallback */
    --mh-cat-default-text:   #4b5563;
}

/* Category pill color tokens — dark theme (higher alpha + brighter text for contrast) */
[data-theme="dark"] {
    --mh-cat-goal-bg:        rgba(34, 197, 94, 0.22);
    --mh-cat-goal-text:      #86efac;
    --mh-cat-behavior-bg:    rgba(245, 158, 11, 0.22);
    --mh-cat-behavior-text:  #fcd34d;
    --mh-cat-technical-bg:   rgba(129, 140, 248, 0.22);
    --mh-cat-technical-text: #c7d2fe;
    --mh-cat-pain-bg:        rgba(248, 113, 113, 0.22);
    --mh-cat-pain-text:      #fca5a5;
    --mh-cat-preference-bg:  rgba(96, 165, 250, 0.22);
    --mh-cat-preference-text:#bfdbfe;
    --mh-cat-context-bg:     rgba(192, 132, 252, 0.22);
    --mh-cat-context-text:   #e9d5ff;
    --mh-cat-default-bg:     rgba(156, 163, 175, 0.18);
    --mh-cat-default-text:   #d1d5db;
}

/* Category pill — applied as `.memory-fact-category memory-fact-category-<type>`.
   The base class handles layout; the modifier picks the color pair. */
.memory-fact-category {
    display: inline-block;
    background: var(--mh-cat-default-bg);
    color: var(--mh-cat-default-text);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    min-width: 72px;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
}
.memory-fact-category-goal        { background: var(--mh-cat-goal-bg);       color: var(--mh-cat-goal-text); }
.memory-fact-category-behavior    { background: var(--mh-cat-behavior-bg);   color: var(--mh-cat-behavior-text); }
.memory-fact-category-technical   { background: var(--mh-cat-technical-bg);  color: var(--mh-cat-technical-text); }
.memory-fact-category-pain_point  { background: var(--mh-cat-pain-bg);       color: var(--mh-cat-pain-text); }
.memory-fact-category-preference  { background: var(--mh-cat-preference-bg); color: var(--mh-cat-preference-text); }
.memory-fact-category-context     { background: var(--mh-cat-context-bg);    color: var(--mh-cat-context-text); }

/* Modal history section wrapper — uses Live View section-header style per
   decision A (two-tier hierarchy: analytical sections keep their h3, these
   supporting sections use the uppercase h6 Live View pattern). */
.modal-history-section {
    margin-bottom: 24px;
}
.modal-history-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
}
.modal-history-section-header i {
    color: var(--text-secondary);
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.modal-history-section-header h6 {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* Infinite-scroll container — max-height with internal scroll. Loads next
   page when the user scrolls within 60px of the bottom sentinel. */
.modal-history-container {
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.modal-history-container::-webkit-scrollbar {
    width: 6px;
}
.modal-history-container::-webkit-scrollbar-track {
    background: transparent;
}
.modal-history-container::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}
[data-theme="dark"] .modal-history-container::-webkit-scrollbar-thumb {
    background: var(--border-medium);
}

/* Row base — flex with left icon, middle text, right meta. Dividers
   between rows via :not(:last-child) so the inner scroll container looks
   clean at any scroll position. */
.modal-history-row {
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    font-size: 13px;
    gap: 10px;
}
.modal-history-row:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}
.modal-history-row-icon {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-secondary);
}
.modal-history-row-icon.primary   { color: var(--theme-primary); }
.modal-history-row-icon.success   { color: #10b981; }
.modal-history-row-icon.warning   { color: #f59e0b; }
.modal-history-row-icon.danger    { color: #ef4444; }
.modal-history-row-icon.info      { color: #3b82f6; }
.modal-history-row-icon.accent    { color: #8b5cf6; }
[data-theme="dark"] .modal-history-row-icon.success { color: #34d399; }
[data-theme="dark"] .modal-history-row-icon.warning { color: #fbbf24; }
[data-theme="dark"] .modal-history-row-icon.danger  { color: #f87171; }
[data-theme="dark"] .modal-history-row-icon.info    { color: #60a5fa; }
[data-theme="dark"] .modal-history-row-icon.accent  { color: #a78bfa; }

.modal-history-row-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.modal-history-row-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.modal-history-row-time-inline {
    color: var(--text-secondary);
    font-size: 12px;
    margin-right: 6px;
}

/* Visitor-name pill — used on the Account modal for row attribution (decision B:
   name THEN category). Kept subtle so it doesn't compete with the category pill
   or fact text. */
.modal-history-visitor-pill {
    display: inline-block;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .modal-history-visitor-pill {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-color: var(--border-medium);
}

/* Empty-state text for the three new sections */
.modal-history-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 16px 4px;
    text-align: center;
}

/* Loading sentinel shown at the bottom of the scroll container while a
   pagination page is in flight. Centered + subtle. */
.modal-history-loading {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* Clear Memory button — scoped variant of .modal-btn.danger for inline use
   below the Memory Facts list (visitor modal only). */
.modal-history-clear-btn {
    margin-top: 12px;
    font-size: 12px;
    padding: 6px 14px;
}

/* v1.0.426 — Sticky time-period group header. Inserted between rows in
   Recent Prompts and Recent Activity (NOT Memory Facts — those sort by
   confidence). As the user scrolls, the currently-active group header
   sticks to the top of the container until the next header pushes it up.
   Uses `position: sticky` inside the `.modal-history-container` which has
   `overflow-y: auto` — standard sticky-within-scroll pattern. */
.modal-history-group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border-light);
    /* Matches the uppercase section header style so the two visually
       harmonize. Group header is slightly smaller (11px vs 12px) to
       indicate it's a sub-breakpoint within the section. */
}
[data-theme="dark"] .modal-history-group-header {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-bottom-color: var(--border-medium);
}