/* ============================================================================
   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;
}

/* 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;
}

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;
    overflow-x: hidden;
}

/* 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 20px;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

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

.sidebar-toggle {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    /* Touch-friendly tap target (Apple recommends 44x44px minimum) */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  /* Prevent double-tap zoom delay */
}

.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;
    object-fit: contain; /* Ensure consistent visual sizing for light/dark logos */
    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;
    }
}

.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: 12px;
}

.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: #11a3f0 !important;
    color: var(--theme-action-text) !important;
    border: 2px solid #11a3f0 !important;
}

.nav-button-primary:hover {
    background: #0d8fd8 !important;
    border-color: #0d8fd8 !important;
    box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

.nav-button-secondary {
    background: transparent !important;
    color: #11a3f0 !important;
    border: 2px solid #11a3f0 !important;
}

.nav-button-secondary:hover {
    background: rgba(74, 144, 226, 0.1) !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;
}

.nav-button-text:hover {
    color: #11a3f0 !important;
    text-decoration: underline;
}

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

.sortable-chosen {
    opacity: 0.8;
}

.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);
}

/* 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);
}

.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 .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;
}

.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;
}

.section {
    margin-bottom: 24px;
}

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

.section-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

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

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

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

/* 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;
        padding: 6px;
        border-radius: 50%;
        transition: all 0.2s ease;
        min-width: 24px;
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .info-icon:active {
        background: var(--hover-bg);
        transform: scale(0.9);
    }
    
    .info-icon.tooltip-active {
        background: var(--theme-primary-light);
        color: var(--theme-action-text);
    }
    
    /* Hide desktop hover tooltips on mobile */
    .info-icon:hover::after,
    .info-icon:hover::before {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


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

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

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    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;
}

/* ========================================
   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;
    }
}

/* 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) */
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    scroll-behavior: smooth;
}

.message {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    /* Buffer for scrollIntoView so messages don't hide behind header */
    scroll-margin-top: 10px; /* Small buffer above message on desktop */
}

.message-wrapper {
    flex: 1;
    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;
    padding-top: 0; /* Remove top padding to eliminate extra space */
    overflow-x: auto; /* Handle horizontal overflow */
    max-width: 100%; /* Ensure content doesn't exceed container */
    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: 8px;
}

/* 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: 8px;
}

[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 */
}

/* 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 {
    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 */
.message-content a[target="_blank"]::after {
    content: " ↗";
    font-size: 12px;
    opacity: 0.7;
    margin-left: 2px;
}

/* 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 {
    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 */
.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 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !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;
}

.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);
}

/* 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-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);
}

/* 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;
}

/* 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: ALWAYS full width, never offset for floating profile */
    /* NOTE: widget-mode uses its own width-based breakpoints (not touch detection) */
    /* transition: none prevents visible "slide" effect during initialization */
    html.embed-mode .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)
       ============================================================================= */
    .sidebar {
        position: fixed !important;
        left: -280px !important;  /* Hidden off-screen by default */
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !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: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        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);
    }
    
    /* 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;
    }
    
    /* Narrower sidebar on small phones (260px vs 280px) */
    .sidebar {
        width: 260px !important;
        left: -260px !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;
}

.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);
}

/* 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 - reduce all modal heights */
@media (max-width: 768px) {
    .modal-content {
        max-height: 80vh;
    }
    
    .modal-body {
        max-height: calc(80vh - 140px);  /* Account for header + footer */
    }
}

.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 */
}

.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);
}

/* Contact Form Modal Styles */
.contact-modal {
    max-width: 500px;
    width: 95%;
}

/* 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);
}

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

.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;
    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);
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
    box-sizing: border-box;
    font-size: 13px;  /* Smaller table font */
}

.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: 11px;  /* Smaller header text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid var(--table-header-gradient-end, var(--theme-primary-dark));  /* Reduced from 3px */
    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: none;
}

.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: 1.5;  /* Tightened from 1.6 */
    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: 13px;  /* Explicit smaller size */
    box-sizing: border-box;
}

.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 */
}

.message-table tbody tr:last-child td {
    border-bottom: none;
}

/* 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 */
[data-theme="dark"] .table-wrapper {
    border-color: var(--table-cell-border, #14b8a6);
}

[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-bottom: 3px solid var(--table-header-gradient-end, #0d9488);
}

/* ========================================
   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;  /* Reduce from 400px */
        font-size: 0.8rem;
    }
    
    .message-table th,
    .message-table td {
        padding: 10px 8px;
        font-size: 0.75rem;
    }
    
    .message-table th {
        font-size: 0.7rem;
    }
    
    /* 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;
        border-radius: 6px;
    }
    
    .message-table {
        min-width: 300px;  /* Further reduce for mobile */
        font-size: 0.7rem;
    }
    
    .message-table th,
    .message-table td {
        padding: 8px 6px;
        font-size: 0.65rem;
        word-break: break-word;
    }
    
    .message-table th {
        font-size: 0.6rem;
        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 have their own */
        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) - 1px borders with negative margin to collapse */
    .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 {
        display: block;
        text-align: left;
        padding: 12px 16px;  /* Better padding for card sections */
        border: 1px solid var(--theme-primary-light) !important;  /* 1px borders on all 4 sides */
        margin-top: -1px !important;  /* Collapse adjacent borders */
        max-width: none !important;  /* Remove base 150px limit */
        width: 100% !important;      /* Force full card width */
        box-sizing: border-box !important;
        font-size: 0.85rem;
    }
    
    /* First cell: no negative margin, 4px left border accent, background fill */
    .message-table[data-columns] td:first-child {
        margin-top: 0 !important;  /* First cell doesn't need negative margin */
        border: 1px solid var(--theme-primary-light) !important;  /* Set all borders first */
        border-left: 4px solid var(--theme-primary-light) !important;  /* Then override left with 4px */
        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 */
    }
    
    /* Last cell: override desktop rule that removes right border */
    .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 {
        border-right: 1px solid var(--theme-primary-light) !important;  /* Restore right border in card mode */
    }
    
    
    /* 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(--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: #14b8a6;
    }
    
    /* Dark theme: use teal 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: #14b8a6 !important;  /* Teal borders in dark mode */
    }
    
    /* 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: teal 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: #14b8a6 !important;  /* Teal right border in dark mode */
    }
    
    .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: 0.65rem;
    }
    
    .message-table th,
    .message-table td {
        padding: 6px 4px;
        font-size: 0.6rem;
    }
    
    /* 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, #14b8a6, #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 {
    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);
}

.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: 100px;
}

/* 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;
}

/* Form validation styles - only show for required fields, not number inputs */
.form-input:required:invalid {
    border-color: #ef4444;
}

.form-input:required:invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ========================================
   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);
}

/* Required field indicator */
.form-group label::after {
    content: '';
}

.form-group:has(input[required]) label::after,
.form-group:has(textarea[required]) label::after,
.form-group:has(select[required]) label::after {
    content: ' *';
    color: #ef4444;
}

/* Mobile responsive form */
@media (max-width: 768px) {
    .contact-modal {
        max-width: 95%;
        margin: 10px;
        max-height: 80vh;
        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;
    }
    
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 12px;
    }
    
    .modal-btn {
        width: 100%;
    }
}

/* Mobile Portrait - constrain modal height */
@media (max-width: 480px) {
    .contact-modal {
        max-height: 75vh;
        margin: 8px;
    }
    
    .contact-modal .modal-body {
        max-height: calc(75vh - 120px);
        padding: 16px;
    }
    
    .contact-modal .modal-header {
        padding: 14px 16px;
    }
    
    .contact-modal .modal-footer {
        padding: 14px 16px;
    }
}

/* 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 */
}

.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-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 */
.message-content,
.json-response {
    font-size: var(--typo-base-size, 14px);
}

.message-content h1,
.json-response-title {
    font-size: calc(17px * var(--typo-scale, 1));
}

.message-content h2 {
    font-size: calc(15px * var(--typo-scale, 1));
}

.message-content h3 {
    font-size: calc(14px * var(--typo-scale, 1));
}

.message-content h4 {
    font-size: calc(13px * var(--typo-scale, 1));
}

.message-content p,
.json-paragraph,
.json-text-section {
    line-height: calc(1.65 * var(--typo-spacing-scale, 1));
    margin-bottom: calc(12px * var(--typo-spacing-scale, 1));
}

.message-content 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));
}

/* 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 */
.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;
}

.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%;
}

input:checked + .slider {
    background-color: var(--theme-primary);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* 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.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;
}

/* 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%;
}

.rag-documents,
.memory-sessions {
    max-height: 200px;
    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 .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: #11a3f0;
}

.upload-type-tab.active {
    background: rgba(74, 144, 226, 0.12);
    color: #11a3f0;
    border-left: 3px solid #11a3f0;
    border-bottom: 3px solid #11a3f0;
    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: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center !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: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center !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.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;
}

/* 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);
    width: 95vw;
    max-width: 1400px; /* Increased from 1200px to accommodate more tabs */
    height: 85vh;
    max-height: 900px; /* Increased height for better usability */
    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;
}

/* Admin Panel in Modal */
.admin-modal .admin-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal .admin-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 12px 24px 0 24px;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    position: relative;
}

.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;
}

.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 {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.admin-modal .admin-tab-content {
    display: none;
}

.admin-modal .admin-tab-content.active {
    display: block;
}

.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;
    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;
}

/* 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);
}

/* ============================================
   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: #11a3f0;
    border-bottom-color: #11a3f0;
    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: #14b8a6;
    border-bottom-color: #14b8a6;
    background: var(--bg-primary);
}

/* 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);
}

/* 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.) */
.tox .tox-collection--list {
    z-index: 15000 !important;
}

/* TinyMCE dialogs (link, image, table, etc.) */
.tox .tox-dialog-wrap {
    z-index: 15001 !important;
}

.tox .tox-dialog-wrap__backdrop {
    z-index: 15000 !important;
    background: transparent !important;
    opacity: 0 !important;
}

.tox .tox-dialog {
    z-index: 15002 !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-collection__item--active {
    background: var(--theme-primary) !important;
}

.tox .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 and menus) */
.tox.tox-tinymce-aux {
    z-index: 15000 !important;
}

/* TinyMCE silver theme floating elements */
.tox-silver-sink {
    z-index: 15000 !important;
}

/* Body-level TinyMCE auxiliary container (for dialogs, menus appended to body) */
body > .tox.tox-tinymce-aux {
    z-index: 15000 !important;
}

body > .tox-tinymce-aux {
    z-index: 15000 !important;
}

/* All TinyMCE popups and floating panels */
.tox .tox-pop {
    z-index: 15000 !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 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 {
    display: none !important;
}

/* Hide expand buttons in @media print */
@media print {
    .diagram-expand-btn,
    .image-expand-btn,
    .chart-expand-btn,
    .video-expand-btn {
        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 rgb(45, 100, 180) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.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, #14b8a6, #0d9488) !important;
    color: var(--theme-action-text) !important;
    border-bottom: 3px solid #0d9488 !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, #14b8a6, #0d9488) !important;
}

[data-theme="dark"] .print-preview-container .message-table td {
    border-bottom: 1px solid #14b8a6;
    border-right: 1px solid #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(--bg-primary, #1e1e1e);
}

[data-theme="dark"] .chart-expand-btn:hover {
    background: var(--theme-primary-dark, #00ACC1);
}

.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;
    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 rgb(45, 100, 180) !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;
    }
}

/* 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;
    border-radius: 8px !important;
    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: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: 3px solid var(--table-header-gradient-end, var(--theme-primary-dark)) !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:last-child {
    border-right: none !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;
}

.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: 1.6 !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: 0.9rem !important;
    box-sizing: border-box !important;
}

.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;
}

[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;
}

/* Remove bottom border from last row so rounded corners show cleanly */
.json-table tbody tr:last-child td {
    border-bottom: none !important;
}

[data-theme="dark"] .json-table tbody tr:last-child td {
    border-bottom: none !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: 450px; /* Even larger for better readability */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow diagrams to use full space */
    position: relative; /* For absolute positioning of expand button */
}

/* 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); /* Fallback */
    color: var(--bg-primary, #1e1e1e); /* Fallback */
}

[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: linear-gradient(135deg, var(--diagram-viewer-header-start, var(--theme-primary)), var(--diagram-viewer-header-end, var(--theme-primary-dark)));
    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; /* Always white canvas for diagram (like chat) */
    padding: 8px; /* Minimal buffer around diagram */
    box-sizing: border-box;
}

.diagram-viewer-body:active {
    cursor: grabbing;
}

.diagram-viewer-body .mermaid-diagram {
    width: 100%;
    height: 100%;
    display: block; /* Changed from flex to prevent shrink-wrapping */
    position: relative;
    background: white; /* White background on diagram wrapper too */
}

.diagram-viewer-body svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    /* Removed drop-shadow to maximize diagram space */
}

.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;
    /* Prevent double-tap zoom on mobile */
    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: linear-gradient(135deg, var(--diagram-viewer-header-start, var(--theme-primary-light)), var(--diagram-viewer-header-end, var(--theme-primary-dark)));
}

[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: Hide text labels on zoom buttons to save space */
@media (max-width: 768px) {
    .diagram-viewer-controls .modal-btn {
        padding: 8px 10px;
    }
    
    .diagram-viewer-controls .modal-btn i {
        margin: 0;
    }
    
    .diagram-viewer-controls .modal-btn:not(:last-child) {
        /* Hide text, keep icons */
    }
    
    .diagram-viewer-controls .modal-btn:not(:last-child)::after {
        content: '';
    }
}

.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;
    min-height: 400px; /* Larger minimum height */
    border-radius: 4px;
    overflow: visible; /* Allow diagram to expand */
}

/* Hide any invalid rect elements with negative dimensions (Mermaid rendering artifacts) */
.mermaid-diagram svg rect[width^="-"],
.mermaid-diagram svg rect[height^="-"] {
    display: none !important;
}

/* Clean Mermaid diagram container styling (no color overrides - let themeCSS handle it!) */
.mermaid-diagram svg {
    padding: 20px;
    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);
    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(--bg-primary, #1e1e1e);
}

[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(--bg-primary, #1e1e1e);
}

[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"] .video-expand-btn {
    background: var(--theme-primary-light, #60a5fa);
}

[data-theme="dark"] .video-expand-btn:hover {
    background: var(--theme-primary, #3b82f6);
}

[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 */
}

/* 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: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: var(--theme-action-text);
    padding: 16px 24px;
    border-radius: 10px 10px 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;
    flex-wrap: wrap;
}

.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: 12px 14px;
        gap: 8px;
    }
    
    .video-viewer-controls .modal-btn {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Small phones - matches settings modal */
@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: 14px 16px;
        gap: 6px;
    }
    
    .video-speed-control {
        display: none; /* Hide speed on very small screens */
    }
    
    .video-viewer-controls .modal-btn {
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* 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: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary-dark));
}

[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 */
    .app-title {
        font-size: 16px !important;
        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-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-content {
        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-claude-content {
        padding: 16px;
    }
    
    .claude-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: 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;
    }
    
    .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 auto !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;
    }
    
    .chat-item {
        padding: 6px 12px !important;
        margin: 0px 4px !important;
        font-size: 12px !important;
    }
    
    .chat-item i {
        font-size: 14px !important;
        margin-right: 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 - larger since it's shorter */
    .app-title {
        font-size: 14px !important;
        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 */
    .chat-item {
        padding: 6px 12px;
        margin: 0px 6px;
        font-size: 12px;
    }
    
    .section-header {
        padding: 6px 12px 2px 12px;
    }
    
    .section-header h4 {
        font-size: 12px;
    }
    
    /* 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;
    }
    
    .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 */
    .chat-item {
        min-height: 44px; /* Apple's recommended touch target */
    }
    
    .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: 16px;
        min-height: 250px; /* Larger for mobile readability */
    }
    
    /* Mobile diagram text improvements */
    .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%;
        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;
}

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

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

.sidebar.collapsed .remove-section,
.sidebar.collapsed .add-section-btn {
    display: none;
}

/* 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);
}

/* 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 {
        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-content::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Messages appear instantly without animation */

/* 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;
    }
}

/* ========================================
   IN-CHAT CAMPAIGN RESPONSIVE STYLES
   ======================================== */

/* Mobile responsiveness for embedded campaigns */
@media (max-width: 600px) {
    .campaign-embedded {
        padding: 12px !important;
        margin: 16px 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Icon and content side by side with wrapping */
    .campaign-embedded > 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 > div:first-child > div:first-child {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
    }
    
    .campaign-embedded > div:first-child > div:first-child i {
        font-size: 16px !important;
    }
    
    /* Content area - sits next to icon, children can expand full width */
    .campaign-embedded > 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 > div:first-child > div:last-child > div:first-child {
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 4px !important;
    }
    
    /* Form fields and description take full container width */
    .campaign-embedded > div:first-child > div:last-child > form,
    .campaign-embedded > div:first-child > div:last-child > p,
    .campaign-embedded > div:first-child > div:last-child > div:not(:first-child) {
        margin-left: -46px !important;
        width: calc(100% + 46px) !important;
        max-width: calc(100% + 46px) !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, contained */
    .campaign-embedded button[type="submit"],
    .campaign-embedded .cta-button,
    .campaign-embedded .modal-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: 48% !important;
        box-sizing: border-box !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 12px !important;
        margin: 12px 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;
    }
}

/* 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 */
.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 */
}

#campaignDisplayModal {
    z-index: 14000 !important; /* Above everything */
}

/* Campaign Display Modal - Mobile Optimizations */
#campaignDisplayModal .modal-content {
    max-width: 600px;  /* Wider than default for campaign content */
}

/* Mobile Portrait - 85% viewport height */
@media (max-width: 768px) and (orientation: portrait) {
    #campaignDisplayModal .modal-content {
        width: 95%;
        max-width: none;
        max-height: 85vh;  /* 85% on portrait (conservative for URL bars) */
    }
    
    #campaignDisplayModal .modal-body {
        max-height: calc(85vh - 140px);  /* Viewport - header - footer */
    }
}

/* Mobile Landscape - 90% viewport height */
@media (max-width: 1024px) and (orientation: landscape),
       ((hover: none) and (pointer: coarse) and (orientation: landscape)),
       (max-height: 500px) and (orientation: landscape) {
    #campaignDisplayModal .modal-content {
        width: 90%;
        max-width: 700px;
        max-height: 90vh;  /* 90% on landscape (use more vertical space) */
    }
    
    #campaignDisplayModal .modal-body {
        max-height: calc(90vh - 120px);  /* Reduced header/footer on landscape */
    }
    
    #campaignDisplayModal .modal-header,
    #campaignDisplayModal .modal-footer {
        padding: 12px 20px;  /* Reduce vertical padding on landscape */
    }
}

/* 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;
    }
    
    .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); }
}

/* ==============================================
   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
   ============================================ */

.scoring-panel-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.scoring-header {
    margin-bottom: 30px;
}

.scoring-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.scoring-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Dashboard Tiles */
.scoring-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.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.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-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h3 {
    font-size: 20px;
    color: var(--text-primary);
    margin: 0;
}

/* 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;
}

.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: 120px 1fr 60px;
    gap: 12px;
    align-items: center;
}

.breakdown-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.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);
}

/* 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;
}

/* 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.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="needsAttention"].active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
}

/* 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;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !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);
}

.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);
}

[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: #11a3f0;
    border-bottom-color: #11a3f0;
    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: #14b8a6;
    border-bottom-color: #14b8a6;
    background: var(--bg-primary);
}

/* Legal tab content area */
.legal-settings-content {
    animation: fadeIn 0.2s ease;
    padding: 24px;
}

/* 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;
}

/* ========================================== */
/* 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;
}

/* 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;
}

.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 - gray background with coral left border accent (matches AI style) */
.qp-bubble.qp-bubble-user,
.quick-app-preview .qp-bubble.qp-bubble-user {
    background: #f8fafc !important;
    color: #374151 !important;
    border-radius: 4px 12px 12px 4px !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid var(--theme-user, #e8956a) !important;
}

.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 - dark background with coral left border accent */
.quick-app-preview.dark .qp-bubble.qp-bubble-user {
    background: #262626 !important;
    color: #e5e7eb !important;
    border: 1px solid #3f3f46 !important;
    border-left: 3px solid var(--theme-user, #e8956a) !important;
}

.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: 10px;
    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: 8px;
    background: var(--theme-action, #f97316);
    color: var(--theme-action-text);
    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;
}

/* 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 */
.chat-container {
    width: calc(var(--chat-area-width) * 1%) !important;
    max-width: calc(var(--chat-area-width) * 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(var(--chat-area-width) * 1%) !important;
    max-width: calc(var(--chat-area-width) * 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;
}

/* 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: 101;
    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;
    }
}

/* ===== 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 */
    }
}

/* ===== 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: 16px;
    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: 40px;
    height: 40px;
    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: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;
}

.layout-no-header .sidebar.collapsed .sidebar-internal-toggle .sidebar-toggle-btn {
    width: 36px;
    height: 36px;
}

/* 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;
    }
    
    .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;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-medium);
    border-radius: 28px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--theme-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.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;
}

/* ============================================================================
   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 */
html.embed-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;
    }
    /* Hide text labels when collapsed */
    html.widget-mode .sidebar.collapsed .nav-text,
    html.widget-mode .sidebar.collapsed .section-header span,
    html.widget-mode .sidebar.collapsed .sidebar-footer-text,
    html.widget-mode .sidebar.collapsed .user-name,
    html.widget-mode .sidebar.collapsed .user-email {
        display: none !important;
    }
    /* Show hamburger toggle for collapse/expand */
    html.widget-mode .sidebar-toggle,
    html.widget-mode #sidebarToggle {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        left: 12px !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 */
    /* CRITICAL: Must override profile-inline and all other rules */
    /* Use CSS variable to match actual sidebar width (fixes 20px gap bug) */
    /* EXCLUDE layouts without sidebar: minimal, no-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 */
    /* EXCLUDE layouts without sidebar: minimal, no-sidebar */
    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 (WIDTH-ONLY, no touch detection) - overlay menu behavior
   Widget uses width-based breakpoints only, NOT touch detection.
   This prevents touch devices at large sizes from getting mobile layout. */
@media (max-width: 768px) {
    /* Sidebar slides in from left as overlay */
    html.widget-mode .sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100% !important;
        width: 280px !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;
    }
    /* Show mobile header with hamburger and "Menu" */
    html.widget-mode .sidebar-mobile-header {
        display: flex !important;
    }
    /* Main content full width - sidebar is OVERLAY */
    html.widget-mode .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    /* Chat container full width */
    html.widget-mode .chat-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Chat main area full width */
    html.widget-mode .chat-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* Chat messages full width */
    html.widget-mode .chat-messages,
    html.widget-mode #chatMessages {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* Input bar full width - sidebar is overlay */
    html.widget-mode .input-bar-fixed {
        left: 0 !important;
        width: 100% !important;
    }
    /* Show the hamburger toggle */
    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 MODE: Input bar at left edge by default */
/* transition: none prevents visible "slide" effect during initialization */
html.embed-mode .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 */
html.embed-mode .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 */
html.embed-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/Clear History.
   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 */
    html.embed-mode:not(.widget-mode) body.layout-no-header .sidebar.collapsed ~ .main-content .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 .loading-message-text,
html.widget-mode .loading-message-text {
    font-size: 11px !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 (no sidebar) */
html.embed-mode .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.
   ============================================================================ */
@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 */
    html.embed-mode body.layout-full .sidebar.collapsed ~ .main-content .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;
    margin: 14px 6px 6px 6px; /* top: 14px, right/bottom/left: 6px */
    /* Height: admin modal (85vh) - header(70) - tabs(50) - report type row(60) - footer(60) - margins(20) */
    height: clamp(372px, calc(85vh - 260px), 612px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header - Consistent padding with content */
.ai-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: white;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0; /* Match parent container border-radius */
}

.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: #ffffff;
    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;
}

.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-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);
    }
}