/* ════════════════════════════════════════
   AASM Link Theme System
   CSS Custom Properties for Light/Dark mode
   ════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --bg-primary: #fff;
    --bg-secondary: #fdfdfd;
    --bg-tertiary: #f9fafb;
    --bg-chat-user: #007cb2;
    --bg-hover: #f0f0f0;
    --bg-hover-subtle: #f2f2f2;
    --bg-active-subtle: rgba(0, 0, 0, 0.05);
    --bg-loading: #e0e0e0;
    --bg-upload-processing: #f3f4f6;

    /* Text */
    --text-primary: #313131;
    --text-secondary: #575757;
    --text-muted: #888;
    --text-hint: #999;
    --text-search: #959595;
    --text-heading: #656565;
    --text-icon: rgb(55, 65, 81);
    --text-on-primary: #fff;
    --text-code: #c02d76;
    --text-loading: #333;

    /* Borders */
    --border-default: #E5E7EB;
    --border-table: silver;
    --border-header: #dee2e6;
    --border-input-focus: #4152d5;
    --bg-sending-pulse: #b0baee;
    --bg-sending-pulse-center: #f4f5fc;
    --border-btn-default: #9CA3AF;
    --border-btn-subtle: #D1D5DB;

    /* Brand */
    --brand-primary: #007cb2;
    --brand-accent: #FF6C0C;
    --brand-accent-hover: #F99C25;
    --bg-badge-category: #F99C25;
    --brand-link: #137cc5;
    --brand-btn-primary: #1b6ec2;
    --brand-btn-primary-border: #1861ac;
    --brand-progress: #0078d7;
    --brand-input-accent: #4152d5;
    --brand-scroll-btn: #007bff;

    /* Feature-specific */
    --bg-takeaway: #e8f4fd;
    --border-takeaway: #007cb2;
    --text-takeaway-icon: #007cb2;
    --bg-mermaid: #f9fafb;
    --border-mermaid: #E5E7EB;
    --bg-shimmer-base: #e5e7eb;
    --bg-shimmer-highlight: #f3f4f6;
    --bg-tooltip: #fff;
    --border-tooltip: #E5E7EB;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-chat-input: 0 -2px 10px rgba(0, 0, 0, 0.05);
    --shadow-scroll-arrow: 0 2px 4px rgba(0, 0, 0, 0.08);

    /* Feedback */
    --bg-feedback-hover: #cbcbcb;
    --bg-btn-default: #D1D5DB;
    --bg-btn-default-hover: #E5E7EB;

    /* Citations */
    --bg-citation: #ffffff;
    --border-citation: #FF6C0C;
    --bg-citation-active: rgba(0, 0, 0, 0.05);

    /* Misc */
    --bg-chat-header: rgba(255, 255, 255, 0.85);
    --bg-scroll-arrow: #fff;
    --text-scroll-arrow: #7d7d7d;
    --bg-error-boundary: #b32121;
    --bg-error-ui: lightyellow;
    --bg-valid: #26b050;
    --bg-invalid: #e50000;
    --text-invalid: #e50000;

    /* Table enhancements */
    --bg-table-header: rgba(0, 0, 0, 0.05);
    --bg-table-stripe: rgba(0, 0, 0, 0.05);
    --border-table-copy-btn: #D1D5DB;
    --bg-table-copy-btn: #fff;
    --bg-table-copy-btn-hover: #f9fafb;

    /* Inline citations */
    --text-citation-ref: #007cb2;
    --bg-citation-tooltip: #fff;
    --border-citation-tooltip: #E5E7EB;
    --shadow-citation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ════════════════════════════════════════
   Dark Mode
   ════════════════════════════════════════ */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-chat-user: #005f8a;
    --bg-hover: #2a2a4a;
    --bg-hover-subtle: #252545;
    --bg-active-subtle: rgba(255, 255, 255, 0.08);
    --bg-loading: #333;
    --bg-upload-processing: #2a2a4a;

    /* Text */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --text-hint: #777;
    --text-search: #888;
    --text-heading: #a0a0a0;
    --text-icon: #b0b0b0;
    --text-on-primary: #fff;
    --text-code: #f08cb4;
    --text-loading: #ccc;

    /* Borders */
    --border-default: #333;
    --border-table: #555;
    --border-header: #333;
    --border-input-focus: #6c7ce6;
    --bg-sending-pulse: #253a68;
    --bg-sending-pulse-center: #121a2e;
    --border-btn-default: #555;
    --border-btn-subtle: #444;

    /* Brand */
    --brand-primary: #1a9fd4;
    --brand-accent: #ff8c3a;
    --brand-accent-hover: #ffaa5e;
    --bg-badge-category: #b86a1a;
    --brand-link: #4da8e8;
    --brand-btn-primary: #2a7dd4;
    --brand-btn-primary-border: #2568b0;
    --brand-progress: #2a7dd4;
    --brand-input-accent: #6c7ce6;
    --brand-scroll-btn: #2a7dd4;

    /* Feature-specific */
    --bg-takeaway: #0f3460;
    --border-takeaway: #1a9fd4;
    --text-takeaway-icon: #4da8e8;
    --bg-mermaid: #16213e;
    --border-mermaid: #333;
    --bg-shimmer-base: #1a2744;
    --bg-shimmer-highlight: #243b5e;
    --bg-tooltip: #1a1a2e;
    --border-tooltip: #444;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-chat-input: 0 -2px 10px rgba(0, 0, 0, 0.3);
    --shadow-scroll-arrow: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* Feedback */
    --bg-feedback-hover: #3a3a5a;
    --bg-btn-default: #333;
    --bg-btn-default-hover: #444;

    /* Citations */
    --bg-citation: #16213e;
    --border-citation: #ff8c3a;
    --bg-citation-active: rgba(255, 255, 255, 0.08);

    /* Sidebar */
    --sidebar-gradient: linear-gradient(180deg, #0d1b3e 70%, #1a1a2e 100%);
    --sidebar-divider: rgba(255, 255, 255, 0.15);
    --sidebar-text: #e0e0e0;
    --sidebar-status-bg: rgba(255, 255, 255, 0.08);

    /* Resource viewer */
    --gradient-toolbar-left: linear-gradient(to right, rgba(26, 26, 46, 0.9), transparent);
    --gradient-toolbar-right: linear-gradient(to left, rgba(26, 26, 46, 0.9), transparent);

    /* Misc */
    --bg-lock-overlay: rgba(26, 26, 46, 0.75);
    --bg-loading-overlay: rgba(26, 26, 46, 0.85);
    --bg-chat-header: rgba(26, 26, 46, 0.95);
    --bg-scroll-arrow: #1a1a2e;
    --text-scroll-arrow: #888;
    --bg-error-boundary: #8b2222;
    --bg-error-ui: #3a3520;
    --bg-valid: #26b050;
    --bg-invalid: #ff4444;
    --text-invalid: #ff4444;

    /* Table enhancements */
    --bg-table-header: rgba(255, 255, 255, 0.08);
    --bg-table-stripe: rgba(255, 255, 255, 0.04);
    --border-table-copy-btn: #444;
    --bg-table-copy-btn: #1a1a2e;
    --bg-table-copy-btn-hover: #2a2a4a;

    /* Inline citations */
    --text-citation-ref: #4da8e8;
    --bg-citation-tooltip: #1a1a2e;
    --border-citation-tooltip: #444;
    --shadow-citation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* ════════════════════════════════════════
   Mermaid Dark Mode Text Contrast
   Ensures text is readable on any node
   background color (light or dark).
   ════════════════════════════════════════ */

/* SVG <text> elements: dark stroke drawn behind the fill */
[data-theme="dark"] .mermaid-container svg text,
[data-theme="dark"] .mermaid-fullscreen-container svg text {
    stroke: rgba(0, 0, 0, 0.8);
    stroke-width: 3px;
    paint-order: stroke fill;
}

/* HTML labels inside foreignObject: dark text-shadow halo */
[data-theme="dark"] .mermaid-container svg .nodeLabel,
[data-theme="dark"] .mermaid-container svg .edgeLabel,
[data-theme="dark"] .mermaid-fullscreen-container svg .nodeLabel,
[data-theme="dark"] .mermaid-fullscreen-container svg .edgeLabel {
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.8),
         1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px  1px 0 rgba(0, 0, 0, 0.8),
         1px  1px 0 rgba(0, 0, 0, 0.8),
         0    0   4px rgba(0, 0, 0, 0.6);
}

/* ════════════════════════════════════════
   Mermaid Fullscreen Viewer
   (appended to <body>, must be global)
   ════════════════════════════════════════ */

.mermaid-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mermaidFsIn 0.2s ease-in-out;
}

@keyframes mermaidFsIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mermaid-fullscreen-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: background-color 0.2s;
}

.mermaid-fullscreen-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mermaid-fullscreen-close:active {
    transform: scale(0.95);
}

.mermaid-fullscreen-container {
    width: 90vw;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center center;
}

.mermaid-fullscreen-container:active {
    cursor: grabbing;
}

.mermaid-fullscreen-container svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mermaid-fullscreen-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 8px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

.mermaid-zoom-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
    line-height: 1;
}

.mermaid-zoom-control.mermaid-zoom-text {
    width: auto;
    border-radius: 20px;
    padding: 0 14px;
    font-size: 0.8rem;
}

.mermaid-zoom-control:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.mermaid-zoom-control:active {
    transform: scale(0.95);
}

/* Prevent body scroll when mermaid fullscreen is open */
body:has(.mermaid-fullscreen-overlay) {
    overflow: hidden;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mermaid-fullscreen-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .mermaid-fullscreen-container {
        width: 100vw;
        height: 90vh;
    }

    .mermaid-fullscreen-controls {
        bottom: 20px;
        padding: 6px;
    }

    .mermaid-zoom-control {
        width: 36px;
        height: 36px;
    }

    .mermaid-zoom-control.mermaid-zoom-text {
        padding: 0 10px;
    }
}