/**
 * PolicyBox Reader styles — part 1/7: Variables, themes, base layout, node media (images, charts, videos, lightbox), loading overlay.
 * Split from reader.css (2026-06). Load order matters (cascade);
 * link tags in layouts/policy_reader.html preserve the original order.
 */

/**
 * PolicyBox Reader Styles - Professional Academic Design
 *
 * Optimized, space-efficient design with collapsible header
 * for reading policy documents conversationally.
 */

/* ===========================
   Variables & Theme
   =========================== */

:root {
    /* Academic color palette (light theme default) */
    --color-bg-primary: #f5f3ef;
    --color-bg-secondary: #fff;
    --color-bg-tertiary: #fafaf8;
    --color-text-primary: #2d2a26;
    --color-text-secondary: #6b5d52;
    --color-text-tertiary: #9b8b7e;
    --color-border: #d4c5b9;
    --color-border-light: #e8e3dc;
    --color-accent: #8b7355;
    --color-accent-hover: #6b5d52;

    /* Layout - optimized for content */
    --header-height: 56px;
    --header-height-collapsed: 32px;
    --input-height: auto;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Typography */
    --font-sans: "Helvetica", Arial, sans-serif;
    --font-serif: "Georgia", "Times New Roman", serif;
    --font-body: var(--font-serif);

    /* Animations */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme adjustments */
[data-theme="dark"] {
    --color-bg-primary: #1a1715;
    --color-bg-secondary: #2d2a26;
    --color-bg-tertiary: #3a3632;
    --color-text-primary: #f5f3ef;
    --color-text-secondary: #c9bfb5;
    --color-text-tertiary: #9b8b7e;
    --color-border: #4a4238;
    --color-border-light: #3a3632;
}

/* Sepia theme */
[data-theme="sepia"] {
    --color-bg-primary: #f4ecd8;
    --color-bg-secondary: #fff;
    --color-bg-tertiary: #faf8f3;
    --color-text-primary: #5c4a2a;
    --color-text-secondary: #8b7355;
    --color-text-tertiary: #9b8b7e;
    --color-border: #c9b89a;
    --color-border-light: #e0d5c7;
}

/* Font family options */
[data-font="serif"] {
    --font-body: var(--font-serif);
}

[data-font="sans-serif"] {
    --font-body: var(--font-sans);
}

/* Text size options */
[data-text-size="small"] {
    --text-size-base: 14px;
    --text-size-node: 0.875rem;
}

[data-text-size="medium"] {
    --text-size-base: 16px;
    --text-size-node: 0.9375rem;
}

[data-text-size="large"] {
    --text-size-base: 18px;
    --text-size-node: 1rem;
}


/* ===========================
   Base Layout
   =========================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-size-base, 16px);
    line-height: 1.8;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    overflow-x: hidden;
}

/* ===========================
   INLINE/NODE IMAGES (figure.node-image structure)
   Larger images for charts/data that need detail visibility
   Float with text wrap, caption and source styled below
   =========================== */

/* Figure wrapper floats left - contains image + caption + source.
   40% max-width keeps text beside it readable (60% for text). */
figure.node-image,
.conversation-container figure,
.conversation-node figure,
#conversationContainer figure {
    float: left !important;
    max-width: 40% !important;
    margin: 0.5rem 1.5rem 1rem 0 !important;
    padding: 0;
    shape-outside: margin-box;
}

/* Image inside figure - constrained to parent figure */
figure.node-image img,
.conversation-container figure img,
.conversation-node figure img,
#conversationContainer figure img {
    display: block !important;
    float: none !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 6px;
    object-fit: contain !important;
}

/* Standalone images (not in figure) */
.conversation-container > img,
.conversation-node > img,
.conversation-node .node-content > img,
#conversationContainer > img,
.assistant-response-node > img {
    float: left !important;
    max-width: 40% !important;
    width: auto !important;
    height: auto !important;
    margin: 0.5rem 1.5rem 1rem 0 !important;
    border-radius: 6px;
    object-fit: contain !important;
    shape-outside: margin-box;
}

/* Figcaption container - appears directly under image, constrained to figure width */
figure.node-image figcaption,
.conversation-container figure figcaption,
.conversation-node figure figcaption,
#conversationContainer figure figcaption {
    display: block !important;
    max-width: 100% !important;
    padding: 0.5rem 0 0.25rem 0;
    text-align: left;
}

/* Caption text - citation-like styling */
figure.node-image .image-caption,
figure.node-image figcaption .image-caption,
.conversation-container figure .image-caption,
.conversation-node figure .image-caption,
#conversationContainer figure .image-caption,
span.image-caption {
    display: block !important;
    font-family: var(--font-sans, system-ui, sans-serif) !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    color: var(--color-text-secondary, #6b5d52) !important;
    font-weight: 500 !important;
    font-style: italic !important;
}

/* Source text - smaller, lighter */
figure.node-image .image-source,
figure.node-image figcaption .image-source,
.conversation-container figure .image-source,
.conversation-node figure .image-source,
#conversationContainer figure .image-source,
cite.image-source {
    display: block !important;
    font-family: var(--font-sans, system-ui, sans-serif) !important;
    font-size: 0.75rem !important;
    color: var(--color-text-tertiary, #9b8b7e) !important;
    margin-top: 0.25rem !important;
    font-style: normal !important;
}

/* Clear floats after node content */
.conversation-node .node-content::after,
.conversation-container .node-content::after {
    content: "";
    display: table;
    clear: both;
}

/* ===========================
   Node Source Layout — side-by-side header image + source text
   =========================== */

.node-source-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* Header image inside layout — no float, flex sizing.
   Use #conversationContainer prefix to override ID-level specificity
   from the generic figure float rules. */
.node-source-layout > .node-image.header-image,
#conversationContainer .node-source-layout > figure {
    float: none !important;
    flex: 0 0 auto;
    max-width: 40% !important;
    margin: 0 !important;
}

.node-source-layout > .node-image.header-image img {
    max-height: 360px !important;
}

/* Source text block inside layout — fills remaining space */
.node-source-layout > .source-text-block {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .node-source-layout {
        flex-direction: column;
        gap: 0.75rem;
    }

    .node-source-layout > .node-image.header-image {
        max-width: 100% !important;
    }
}

/* ===========================
   Inline Images Container — responsive grid gallery
   =========================== */

.node-inline-images {
    width: 100%;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Override float for figures inside inline images container.
   Include ID-level selectors to beat #conversationContainer figure rules. */
.node-inline-images > figure,
.node-inline-images > .node-image,
#conversationContainer .node-inline-images > figure,
.conversation-node .node-inline-images > figure {
    float: none !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Chart figures inside inline grid — must also override chart-specific float rules */
#conversationContainer .node-inline-images > figure.chart,
.node-inline-images > figure.chart {
    float: none !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.node-inline-images > figure img,
.node-inline-images > .node-image img,
#conversationContainer .node-inline-images > figure img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px;
    object-fit: contain;
}

/* ===========================
   Chart Images (figure.node-image.chart)
   Larger size for data visualization readability
   Must override #conversationContainer selectors (ID has higher specificity)
   =========================== */

figure.node-image.chart,
figure.chart,
.node-inline-images figure.chart,
.conversation-container figure.chart,
.conversation-node figure.chart,
#conversationContainer figure.chart,
.node-content figure.chart,
.node-inline-images .chart {
    float: left !important;
    max-width: 608px !important;
    margin: 0.5rem 1.5rem 1rem 0 !important;
}

figure.node-image.chart img,
figure.chart img,
.node-inline-images figure.chart img,
.conversation-container figure.chart img,
.conversation-node figure.chart img,
#conversationContainer figure.chart img,
.node-content figure.chart img,
.node-inline-images .chart img {
    display: block !important;
    max-width: 608px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 6px;
}

figure.node-image.chart figcaption,
figure.chart figcaption,
.node-inline-images figure.chart figcaption,
.conversation-container figure.chart figcaption,
.conversation-node figure.chart figcaption,
#conversationContainer figure.chart figcaption,
.node-content figure.chart figcaption,
.node-inline-images .chart figcaption {
    max-width: 608px !important;
}

/* ===========================
   Interactive Inline Charts (Chart.js)
   Replaces static PNG chart images with compact, responsive charts
   =========================== */

figure.node-image.chart .inline-chart-container canvas {
    width: 100% !important;
}

/* Override float/sizing for figures containing interactive charts */
figure.node-image.interactive-chart,
figure.node-image.chart:has(.inline-chart-container) {
    float: none !important;
    max-width: 620px !important;
    margin: 1.25rem auto !important;
    background: var(--bb-surface, #f3f4f6);
    border: none;
    border-radius: 8px;
    padding: 1.125rem 1.5rem 1.125rem;
}

.chart-question {
    margin: 0 0 0.75rem;
    padding: 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bb-text);
}

figure.node-image.chart .inline-chart-container,
.node-inline-images .chart .inline-chart-container {
    width: 100%;
    max-width: 580px;
    position: relative;
    padding: 0.25rem;
}

/* Figcaption inside chart containers needs padding to clear the border */
figure.node-image.interactive-chart > figcaption,
figure.node-image.chart:has(.inline-chart-container) > figcaption {
    padding: 0.5rem 0.25rem 0.25rem 0.25rem !important;
}

/* Dark mode adjustments for chart text */
[data-theme="dark"] .chart-question {
    color: var(--bb-text, #e5e7eb);
}

/* Sepia mode */
[data-theme="sepia"] .chart-question {
    color: var(--bb-text, #3d3529);
}

/* Mobile: full-width charts */
@media (max-width: 640px) {
    figure.node-image.interactive-chart,
    figure.node-image.chart:has(.inline-chart-container) {
        max-width: 100% !important;
    }

    figure.node-image.chart .inline-chart-container {
        max-width: 100%;
    }

    .chart-question {
        font-size: 0.875rem;
    }
}

/* ===========================
   Embedded Videos (YouTube)
   Responsive 16:9 iframe embeds with caption
   =========================== */

.node-inline-videos {
    margin: 1.25rem 0;
}

figure.node-video {
    float: none;
    max-width: 620px;
    margin: 1.25rem auto;
    background: var(--bb-surface, #f3f4f6);
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.video-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

figure.node-video figcaption {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bb-text-secondary, #6b7280);
}

figure.node-video figcaption .video-caption {
    display: block;
    font-weight: 500;
    color: var(--bb-text, #1f2937);
}

figure.node-video figcaption .video-source {
    display: block;
    font-style: italic;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* Dark mode */
[data-theme="dark"] figure.node-video {
    background: var(--bb-surface, #1f2937);
    border-color: var(--bb-border, #374151);
}

[data-theme="dark"] figure.node-video figcaption .video-caption {
    color: var(--bb-text, #e5e7eb);
}

/* Sepia mode */
[data-theme="sepia"] figure.node-video {
    background: var(--bb-surface, #f5f0e8);
    border-color: var(--bb-border, #d4c9b8);
}

/* Mobile: full-width videos */
@media (max-width: 640px) {
    figure.node-video {
        max-width: 100% !important;
        border-radius: 0;
        margin: 1rem 0;
    }
}

/* ===========================
   Inline media link chips
   (compact thumbnail for [text](youtube/image url) deep-links)
   =========================== */
.media-link-card {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 100%;
    margin: 0.4rem 0;
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    border: 1px solid var(--bb-border, #e5e7eb);
    border-radius: 10px;
    background: var(--bb-surface, #f9fafb);
    text-decoration: none;
    color: var(--bb-text, #1f2937);
    vertical-align: middle;
    line-height: 1.3;
    font-style: normal; /* stay upright inside italic evidence-quotes */
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.media-link-card:hover {
    border-color: var(--bb-accent, #2563eb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.media-link-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.media-link-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* If the thumbnail fails to load, hide the (now-black) thumb box */
.media-link-card.no-thumb .media-link-thumb {
    display: none;
}

.media-link-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.65rem;
    padding-left: 2px; /* optically center the triangle */
    pointer-events: none;
}

.media-link-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.media-link-label {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.media-link-host {
    font-size: 0.7rem;
    color: var(--bb-text-secondary, #6b7280);
    margin-top: 1px;
}

/* Drop the list bullet when a list item is just a media chip
   (e.g. the "Jump to a moment" / "Watch this session" lists) */
.node-content li:has(> .media-link-card) {
    list-style: none;
}

/* Dark mode */
[data-theme="dark"] .media-link-card {
    background: var(--bb-surface, #1f2937);
    border-color: var(--bb-border, #374151);
    color: var(--bb-text, #e5e7eb);
}

[data-theme="dark"] .media-link-host {
    color: var(--bb-text-secondary, #9ca3af);
}

/* Sepia mode */
[data-theme="sepia"] .media-link-card {
    background: var(--bb-surface, #f5f0e8);
    border-color: var(--bb-border, #d4c9b8);
}

@media (max-width: 640px) {
    .media-link-thumb {
        width: 80px;
    }
}

/* ===========================
   Referenced Videos Section
   (Tier 3 LLM responses with video citations)
   =========================== */

.referenced-videos-section {
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.referenced-videos-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.referenced-videos-icon {
    font-size: 1rem;
}

/* Dark mode */
[data-theme="dark"] .referenced-videos-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .referenced-videos-header {
    color: var(--text-secondary-dark, #aaa);
}

/* Sepia mode */
[data-theme="sepia"] .referenced-videos-section {
    border-top-color: rgba(101, 67, 33, 0.15);
}

[data-theme="sepia"] .referenced-videos-header {
    color: var(--text-secondary-sepia, #8b6f4e);
}

/* ===========================
   Image Lightbox/Popup
   Click any image to view full size
   =========================== */

.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    cursor: zoom-out;
    overflow: auto;
    padding: 2rem;
    box-sizing: border-box;
}

.image-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox img {
    max-width: 95%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.image-lightbox .lightbox-caption {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    max-width: 80%;
    text-align: center;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.875rem;
    line-height: 1.4;
}

.image-lightbox .lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    background: none;
    border: none;
    padding: 0.5rem;
    line-height: 1;
}

.image-lightbox .lightbox-close:hover {
    opacity: 1;
}

/* Make all images clickable */
figure.node-image img,
.node-header-image img,
.conversation-node figure img {
    cursor: zoom-in;
    transition: opacity 0.2s;
}

figure.node-image img:hover,
.node-header-image img:hover,
.conversation-node figure img:hover {
    opacity: 0.9;
}

/* ===========================
   Node Header Images (div.node-header-image structure)
   Actual DOM: <div class="node-header-image"><img><figcaption class="image-caption">
   =========================== */

/* Container div floats left for text wrap */
.node-header-image {
    float: left !important;
    max-width: 40% !important;
    margin: 0.25rem 1.5rem 1rem 0 !important;
    padding: 0;
    shape-outside: margin-box;
}

/* Image inside the container - constrained, not floated */
.node-header-image img {
    display: block !important;
    float: none !important;
    max-width: 100% !important;
    max-height: 310px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 8px;
    object-fit: contain !important;
}

/* Caption styling - citation-like appearance, constrained to image width */
.node-header-image figcaption,
.node-header-image .image-caption {
    display: block !important;
    max-width: 310px !important;
    padding: 0.5rem 0 0.25rem 0;
    text-align: left;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-secondary, #6b5d52);
    font-weight: 500;
    font-style: italic;
}

/* ===========================
   Loading Overlay
   =========================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition-normal);
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;  /* CRITICAL: Allow mouse events to pass through when hidden */
}

/* Also ensure completely hidden overlays don't block interaction */
.loading-overlay.hidden,
.loading-overlay[style*="display: none"] {
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-overlay p {
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
}