/**
 * 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: 1px solid var(--bb-border, #e5e7eb);
    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;
    }
}

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

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


/* ===========================
   Header - Collapsible Academic Style
   =========================== */

.reader-header {
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-normal);
}

.reader-header.collapsed {
    padding: 0.375rem 1rem;
}

.header-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-normal);
}

.header-left {
    flex: 1;
    min-width: 0;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.reader-header.collapsed .header-left {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.document-category {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.125rem;
    transition: all var(--transition-normal);
}

.reader-header.collapsed .document-category {
    font-size: 0;
    margin-bottom: 0;
}

.document-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--transition-normal);
}

.reader-header.collapsed .document-title {
    font-size: 0.8125rem;
}

.document-meta {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
    transition: all var(--transition-normal);
}

.reader-header.collapsed .document-meta {
    font-size: 0;
    margin-top: 0;
}

/* Header actions */
.header-right,
.header-left,
.header-center {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.header-right {
    transition: all var(--transition-normal);
    align-items: stretch; /* Make all buttons same height */
}

.reader-header.collapsed .header-right {
    gap: 0.375rem;
}

/* Collapse toggle button */
.collapse-toggle {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.collapse-toggle:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.collapse-icon {
    transition: transform var(--transition-normal);
    display: inline-block;
}

.reader-header.collapsed .collapse-icon {
    transform: rotate(180deg);
}

/* Collapsed header minimized info */
.header-collapsed-info {
    display: none;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    margin-right: 1rem;
}

.reader-header.collapsed .header-collapsed-info {
    display: block;
}

/* Header buttons */
.header-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reader-header.collapsed .header-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}

.header-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.header-btn:active {
    transform: translateY(1px);
}

/* Labeled header buttons (Language, Listen) */
.header-btn--labeled {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
}

.header-btn--labeled .btn-icon {
    font-size: 0.875rem;
}

.header-btn--labeled .btn-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.header-btn--labeled .btn-caret {
    font-size: 0.625rem;
    opacity: 0.6;
    margin-left: 0.125rem;
}

/* Feature highlight button (Listen) */
.header-btn--feature {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.header-btn--feature .btn-label {
    color: white;
}

.header-btn--feature:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Language dropdown */
.header-dropdown {
    position: relative;
    display: flex;
}

.header-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    z-index: 1000;
    overflow: hidden;
}

.header-dropdown.open .header-dropdown-menu {
    display: block;
}

.header-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    transition: background 0.15s ease;
}

.header-dropdown-menu button:hover {
    background: var(--color-bg-tertiary);
}

.header-dropdown-menu button[aria-selected="true"] {
    background: var(--color-bg-tertiary);
    font-weight: 600;
}

.language-note--dropdown {
    padding: 0.375rem 0.75rem;
    margin: 0;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border);
}

/* Audio dropdown menu */
.audio-dropdown-menu {
    min-width: 240px;
    padding: 0.5rem;
}

.audio-menu-item {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem !important;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

.audio-menu-item:last-child {
    margin-bottom: 0;
}

.audio-menu-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.audio-menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: left;
}

.audio-menu-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.audio-menu-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.audio-menu-toggle {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.audio-menu-toggle.active {
    background: var(--color-accent);
    color: #fff;
}

.audio-menu-arrow {
    font-size: 1rem;
    color: var(--color-text-tertiary);
}

/* Listen button playing state */
.header-btn--listening {
    animation: listen-pulse 1.5s infinite;
}

@keyframes listen-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(139, 115, 85, 0); }
}

/* Mobile: hide labels, keep icons */
@media (max-width: 768px) {
    .header-btn--labeled .btn-label,
    .header-btn--labeled .btn-caret {
        display: none;
    }

    .header-btn--labeled {
        padding: 0.375rem 0.5rem;
    }

    .header-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        min-width: 100%;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .header-dropdown-menu button {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* Bump header z-index when dropdown is open so bottom sheet clears input area */
    .reader-header.dropdown-open {
        z-index: 200;
    }
}

/* Mobile bottom sheet backdrop (appended to body via JS) */
.header-dropdown-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
}


/* ===========================
   Main Conversation Area
   =========================== */

.reader-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-lg) var(--spacing-md);
    padding-top: 20px; /* Tight spacing below header */
    padding-bottom: 16rem; /* Increased to accommodate fixed input area height */
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.conversation-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}


/* ===========================
   Conversation Nodes - Conversational Style
   =========================== */

.conversation-node {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.75rem 0;
    position: relative;
    animation: fadeInMessage 0.3s ease;
}

.conversation-node:hover {
    /* No hover effect for conversational style */
}

.conversation-node::before {
    /* Remove the left border indicator */
    display: none;
}

.conversation-node.user-question-node {
    /* User questions slightly indented */
    padding-left: 1rem;
    border-left: 2px solid var(--color-accent);
    background: var(--color-bg-tertiary);
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

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

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    bottom: 45%;
    right: 1.5rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-accent-500, #9B4444);
    border: 2px solid var(--color-accent-600, #7D3636);
    box-shadow: 0 2px 10px rgba(155, 68, 68, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator--visible {
    opacity: 0.85;
    pointer-events: auto;
}

.scroll-indicator--visible:hover {
    opacity: 1;
}

.scroll-indicator svg {
    color: white;
}

.scroll-indicator:hover {
    background: var(--color-accent-600, #7D3636);
    border-color: var(--color-accent-700, #632B2B);
    transform: scale(1.1);
}

.scroll-indicator:hover svg {
    color: white;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.node-header {
    /* Hide the node header for conversational flow */
    display: none;
}

.node-icon {
    /* Hidden with node-header */
    display: none;
}

.node-meta {
    /* Hidden with node-header */
    display: none;
}

.node-type {
    /* Hidden with node-header */
    display: none;
}

.node-speaker {
    /* Hidden with node-header */
    display: none;
}

.node-content {
    font-size: var(--text-size-node, 0.9375rem);
    line-height: 1.7;
    color: var(--color-text-primary);
}

.node-content p {
    margin-bottom: var(--spacing-md);
}

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

/* Collapse empty paragraphs */
.node-content p:empty {
    margin: 0;
    display: none;
}

/* Tighter hr spacing */
.node-content hr {
    margin: 0.75rem 0;
}

.node-content strong {
    font-weight: 700;
    color: var(--color-text-primary);
}

.node-content em {
    font-style: italic;
}

.node-content ul,
.node-content ol {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* Constrained headings within node content - smaller than global defaults */
.node-content h1 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: var(--color-text-primary);
}

.node-content h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.875rem 0 0.375rem 0;
    color: var(--color-text-primary);
}

/* No top margin on first h2 in content */
.node-content h2:first-child {
    margin-top: 0;
}

.node-content h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem 0;
    color: var(--color-text-secondary);
}

/* Subtle inline code styling */
.node-content code {
    font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace);
    font-size: 0.875em;
    background: var(--color-bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    color: var(--color-text-primary);
}

/* Clickable inline citations */
.node-content .inline-citation {
    color: var(--color-accent);
    font-size: 0.875em;
    cursor: pointer;
    text-decoration: none;
    /* CRITICAL: Ensure citations are selectable as part of surrounding text */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.node-content .inline-citation:hover {
    text-decoration: underline;
}

.node-badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

.node-badge {
    padding: 0.25rem 0.625rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
}

.node-badge.critical {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* Citations - Academic Footnote Style */
.node-citations {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.citations-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.citation-item {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.citation-number {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--color-accent);
}

.citation-ref {
    font-size: 0.8125rem;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    transition: background var(--transition-fast);
    font-family: var(--font-sans);
    font-weight: 600;
}

.citation-ref:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}


/* ===========================
   Input Area - Compact Academic Form
   =========================== */

.reader-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 100;
    min-height: 3.5rem;
}

.input-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Processing indicator (shown while waiting for response)
   display is toggled between 'none' and 'flex' by JS inline styles */
.processing-indicator {
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

.processing-spinner .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bb-border, var(--color-border, #d4c5b9));
    border-top-color: var(--bb-primary, var(--color-accent, #8b7355));
    border-radius: 50%;
    animation: processingSpinner 0.8s linear infinite;
}

@keyframes processingSpinner {
    to { transform: rotate(360deg); }
}

.processing-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.processing-label {
    font-weight: 600;
}

.processing-divider {
    margin: 0 0.25rem;
    opacity: 0.5;
}

.processing-phrase {
    font-style: italic;
    transition: opacity 0.15s ease;
}

.processing-phrase.phrase-changing {
    opacity: 0;
}

.ellipsis-animation {
    display: inline-block;
    width: 1.5em;
    text-align: left;
}

/* Text input container for open questions */
.text-input-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Auto-growing textarea for user input */
.user-input-field {
    flex: 1;
    min-height: 44px;
    max-height: 200px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    font-size: 0.9375rem;
    font-family: var(--font-body, inherit);
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    background: var(--color-bg-primary, #ffffff);
    color: var(--color-text-primary, #1f2937);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.user-input-field:focus {
    outline: none;
    border-color: var(--accent-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.user-input-field::placeholder {
    color: var(--color-text-tertiary, #9ca3af);
}

/* Send button */
.send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--accent-color, #2563eb);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s, transform 0.1s;
}

.send-btn:hover {
    background: var(--accent-hover, #1d4ed8);
}

.send-btn:active {
    transform: scale(0.95);
}

.send-btn svg {
    width: 20px;
    height: 20px;
}

/* Dark theme support */
[data-theme="dark"] .user-input-field {
    background: var(--color-bg-secondary, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text-primary, #f9fafb);
}

[data-theme="dark"] .user-input-field:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Sepia theme support */
[data-theme="sepia"] .user-input-field {
    background: #faf7f0;
    border-color: #d6c9b5;
    color: #5c4a32;
}

[data-theme="sepia"] .send-btn {
    background: #8b5a2b;
}

[data-theme="sepia"] .send-btn:hover {
    background: #704821;
}

/* Compact form layout - single row with inline elements */
.question-form.question-form--compact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 8px;
}

.input-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.input-hint {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: var(--color-text-tertiary);
    text-align: center;
    opacity: 0.7;
}

.input-disclosure {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-style: italic;
    color: var(--color-text-tertiary);
    text-align: center;
    margin: 4px 0 0;
    opacity: 0.6;
}

.input-disclosure a {
    color: var(--color-text-tertiary);
    text-decoration: underline;
}

.input-disclosure a:hover {
    color: var(--color-accent);
}

/* Legacy form styles (keep for backwards compatibility) */
.question-form:not(.question-form--compact) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Compact textarea - single line by default, grows on focus */
.question-input.question-input--compact {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 0.875rem;
    font-family: var(--font-body);
    resize: none;
    transition: all var(--transition-fast);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
}

.question-input.question-input--compact:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.1);
}

/* Legacy textarea styles */
.question-input:not(.question-input--compact) {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    resize: none;
    transition: all var(--transition-fast);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.question-input:not(.question-input--compact):focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.question-input::placeholder {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* Icon-only button variant */
.action-btn.action-btn--icon {
    padding: 0.4rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn.action-btn--icon:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-tertiary);
    color: var(--color-accent);
}

.action-btn.action-btn--subtle {
    border-color: transparent;
    background: transparent;
    opacity: 0.6;
}

.action-btn.action-btn--subtle:hover {
    opacity: 1;
    border-color: transparent;
    background: var(--color-bg-tertiary);
}

/* Legacy action button */
.action-btn:not(.action-btn--icon) {
    padding: 0.625rem 1rem;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.action-btn:not(.action-btn--icon):hover {
    border-color: var(--color-accent);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Compact submit button */
.submit-btn.submit-btn--compact {
    padding: 0.4rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.submit-btn.submit-btn--compact:hover:not(:disabled) {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

.submit-btn.submit-btn--compact:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.submit-btn.submit-btn--compact svg {
    width: 18px;
    height: 18px;
}

/* Legacy submit button */
.submit-btn:not(.submit-btn--compact) {
    padding: 0.625rem 1rem;
    background: var(--color-accent);
    color: white;
    border: 1.5px solid var(--color-accent);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.submit-btn:not(.submit-btn--compact):hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.submit-btn:not(.submit-btn--compact):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.char-counter {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
}


/* ===========================
   Welcome Message - Enhanced Academic Style
   =========================== */

.welcome-node {
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: fadeInWelcome 0.5s ease;
}

@keyframes fadeInWelcome {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-ornament {
    font-size: 1.5rem;
    color: var(--color-border);
    margin-bottom: 0.75rem;
}

.welcome-node h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.welcome-node p {
    font-family: var(--font-sans);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Constrained styling for welcome and response content */
/* Keep text inline and simple - no block-level transformations */
.conversation-node.welcome-node .node-content,
.conversation-node[data-node-id="welcome"] .node-content {
    line-height: 1.6;
}

/* Bold stays inline, just slightly emphasized */
.conversation-node.welcome-node .node-content strong,
.conversation-node[data-node-id="welcome"] .node-content strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Italic stays inline */
.conversation-node.welcome-node .node-content em,
.conversation-node[data-node-id="welcome"] .node-content em {
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Standard list styling */
.conversation-node.welcome-node .node-content ul,
.conversation-node[data-node-id="welcome"] .node-content ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.conversation-node.welcome-node .node-content li,
.conversation-node[data-node-id="welcome"] .node-content li {
    padding: 0.25rem 0;
    color: var(--color-text-primary);
}


/* ===========================
   Citations Panel
   =========================== */

.citations-panel {
    position: fixed;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 200;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
}

.citations-panel.open {
    transform: translateX(0);
}

.panel-header {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
}

.panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.panel-close:hover {
    background: var(--color-bg-tertiary);
}

.panel-content {
    padding: var(--spacing-md);
}

.panel-empty {
    text-align: center;
    color: var(--color-text-secondary);
    padding: var(--spacing-lg);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}


/* ===========================
   Modals
   =========================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-md);
}

.modal-content {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-sans);
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

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

.modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
}

.modal-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}


/* ===========================
   Settings Panel
   =========================== */

.settings-panel {
    position: fixed;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    width: 350px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 300;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
}

.settings-panel.open {
    transform: translateX(0);
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.settings-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.settings-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

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

.setting-group {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

/* Compact setting group for AI Settings */
.setting-group--compact {
    padding: var(--spacing-sm) var(--spacing-md);
}

.setting-group--compact h3 {
    margin-bottom: var(--spacing-xs);
}

.compact-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0;
    gap: var(--spacing-sm);
}

.compact-setting-row label {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    font-weight: 400;
}

.language-select--compact {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    min-width: 100px;
    cursor: pointer;
}

.language-select--compact:focus {
    outline: none;
    border-color: var(--color-accent);
}

.language-select--compact option,
.language-select option {
    direction: ltr;
    text-align: left;
}

/* Toggle checkbox styling */
.toggle-checkbox {
    width: 36px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-checkbox::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-text-secondary);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.toggle-checkbox:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.toggle-checkbox:checked::before {
    left: 18px;
    background: white;
}

.language-note {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin: 0.25rem 0 0;
    font-style: italic;
}

.setting-group h3,
.setting-group h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
}

.theme-options,
.font-options,
.text-size-options {
    display: flex;
    gap: var(--spacing-xs);
}

.theme-option,
.font-option,
.size-option {
    flex: 1;
    border: 2px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 6px;
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.theme-option:hover,
.font-option:hover,
.size-option:hover {
    border-color: var(--color-accent);
}

.theme-option.active,
.font-option.active,
.size-option.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: white;
}

/* Language Selector */
.setting-description {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.language-selector-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.language-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.language-select:hover,
.language-select:focus {
    border-color: var(--color-accent);
    outline: none;
}

.language-note {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin: 0;
    padding: var(--spacing-xs);
    background: var(--color-bg-secondary);
    border-radius: 4px;
}


/* ===========================
   Responsive Design
   =========================== */

/* Suggested Questions */
.suggested-questions-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.suggested-questions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.suggestions-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-sans);
}

.suggestions-close {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.suggested-questions-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.suggestion-item {
    padding: 0.875rem 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.suggestion-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
}

.suggestion-category {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
}


/* ===========================
   Topic Suggestions (Dynamic Grid)
   =========================== */

.topic-suggestions {
    max-width: 1000px;
    margin: 0.75rem auto;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.topic-suggestions.suggestions-visible {
    opacity: 1;
    transform: translateY(0);
}

.topic-suggestions.suggestions-fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

.suggestions-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    padding-left: 0.125rem;
}

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    width: 100%;
}

.suggestion-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-tertiary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
    min-height: 90px;
    opacity: 0;
    animation: fadeInSuggestion 0.4s ease forwards;
}

@keyframes fadeInSuggestion {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.suggestion-button:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.suggestion-button:active,
.suggestion-button.suggestion-clicked {
    transform: translateY(0);
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.suggestion-button.suggestion-clicked .suggestion-icon {
    opacity: 0.9;
}

.suggestion-button.suggestion-clicked .suggestion-text {
    color: white;
}

.suggestion-icon {
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

/* Text-based title for suggestion cards (instead of emoji icon) */
.suggestion-title {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    padding: 0.25rem 0.5rem;
    background: var(--color-accent-light, rgba(37, 99, 235, 0.1));
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.suggestion-button:hover .suggestion-title {
    background: var(--color-accent);
    color: white;
}

.suggestion-button.suggestion-clicked .suggestion-title {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.suggestion-text {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.suggestion-button:hover .suggestion-icon {
    opacity: 1;
}

/* Mobile responsive grid */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .suggestion-button {
        min-height: 80px;
        padding: 0.875rem 1rem;
    }

    .topic-suggestions {
        margin: 0.5rem auto;
        padding: var(--spacing-sm);
    }
}

/* Tablet responsive grid */
@media (min-width: 769px) and (max-width: 1024px) {
    .suggestions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens - 3 columns */
@media (min-width: 1025px) {
    .suggestions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* BanterBox onboarding card - secondary/meta style */
.suggestion-button[data-suggestion-id="banterbox_onboarding"] {
    grid-column: 1 / -1;  /* Full width - span all columns */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: auto;
    padding: 0.625rem 1.25rem;
    margin-top: 0.5rem;
    background: transparent;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    opacity: 0.7;
}

.suggestion-button[data-suggestion-id="banterbox_onboarding"] .suggestion-icon {
    font-size: 1rem;
    opacity: 0.6;
}

.suggestion-button[data-suggestion-id="banterbox_onboarding"] .suggestion-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.suggestion-button[data-suggestion-id="banterbox_onboarding"]:hover {
    opacity: 1;
    background: var(--color-bg-tertiary);
    border-style: solid;
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
}

.suggestion-button[data-suggestion-id="banterbox_onboarding"]:active,
.suggestion-button[data-suggestion-id="banterbox_onboarding"].suggestion-clicked {
    background: var(--color-accent);
    border-color: var(--color-accent);
    opacity: 1;
}

.suggestion-button[data-suggestion-id="banterbox_onboarding"].suggestion-clicked .suggestion-text {
    color: white;
}


/* ===========================
   Next Steps Cards (Explore Next)
   =========================== */

.next-steps-container {
    margin-top: 2rem;
    margin-bottom: 2rem; /* Extra clearance from fixed input area */
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-light);
}

.next-steps-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.next-steps-icon {
    font-size: 1.25rem;
    color: var(--color-accent);
    font-weight: 600;
}

.next-steps-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin: 0;
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: 1rem;
}

.next-step-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bg-tertiary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
    width: 100%;
    font-family: var(--font-body);
    /* Don't create stacking context on hover to allow tooltip to escape */
    z-index: auto;
}

.next-step-card:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    /* Elevate the hovered card slightly to help with tooltip stacking */
    z-index: 1;
}

.next-step-card:active,
.next-step-card.next-step-selected {
    transform: translateY(0) scale(0.98);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.next-step-card.next-step-selected .next-step-number,
.next-step-card.next-step-selected .next-step-title,
.next-step-card.next-step-selected .next-step-description,
.next-step-card.next-step-selected .next-step-rationale {
    color: white;
}

.next-step-card.next-step-selected .next-step-arrow svg {
    stroke: white;
}

.next-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    transition: all var(--transition-fast);
}

.next-step-card:hover .next-step-number {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* Disabled state while processing */
.next-step-card:disabled,
.next-step-card[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    pointer-events: none;
}

.next-step-card:disabled:hover,
.next-step-card[disabled]:hover {
    transform: none;
    box-shadow: none;
}

.next-step-content {
    flex: 1;
    min-width: 0;
}

.next-step-title {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.next-step-description-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.next-step-description {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
    flex: 1;
    transition: color var(--transition-fast);
}

/* Info icon for rationale tooltip */
.next-step-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: help;
    color: var(--color-text-tertiary);
    transition: color var(--transition-fast);
}

.next-step-info-icon:hover {
    color: var(--color-accent);
}

.next-step-info-icon svg {
    width: 16px;
    height: 16px;
}

/* Tooltip bubble */
.next-step-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    width: 240px;
    max-width: 240px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tooltip arrow */
.next-step-info-icon::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 10001;
}

/* Show tooltip on hover */
.next-step-info-icon:hover::after,
.next-step-info-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Elevate parent card when hovering info icon to ensure tooltip is above siblings */
.next-step-card:has(.next-step-info-icon:hover) {
    z-index: 2;
}

/* Old rationale style - now unused but kept for backwards compatibility */
.next-step-rationale {
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-text-tertiary);
    margin: 0;
    transition: color var(--transition-fast);
    display: none; /* Hidden - now shown in tooltip */
}

.next-step-arrow {
    flex-shrink: 0;
    opacity: 0.4;
    transition: all var(--transition-fast);
}

.next-step-card:hover .next-step-arrow {
    opacity: 1;
    transform: translateX(4px);
}

.next-step-arrow svg {
    stroke: var(--color-accent);
    transition: stroke var(--transition-fast);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .next-steps-container {
        margin-bottom: 3rem; /* Extra clearance from fixed input area on mobile */
    }

    .next-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .next-step-card {
        padding: 1rem;
    }

    .next-step-number {
        width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }

    .next-step-title {
        font-size: 0.875rem;
    }

    .next-step-description {
        font-size: 0.75rem;
    }

    /* Tooltip adjustments for mobile */
    .next-step-info-icon::after {
        width: 200px;
        max-width: calc(100vw - 2rem);
        left: auto;
        right: 0;
        transform: none;
    }

    .next-step-info-icon::before {
        left: auto;
        right: 6px;
        transform: none;
    }

    .next-step-rationale {
        font-size: 0.6875rem;
    }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .next-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===========================
   Policy Suggestions Selector (Suggest Response Cards)
   =========================== */

.policy-suggestions-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border-top: 2px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-lg);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 950;  /* Above audio/annotation toggles (z-index: 900) */
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.policy-suggestions-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

.policy-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    z-index: 1;  /* Ensure header content is above any overlapping elements */
}

.suggestions-header-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.suggestions-close-btn {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 6px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
}

.suggestions-close-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-accent);
}

.suggestions-close-btn:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.policy-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.policy-suggestion-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem;
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
    font-family: var(--font-body);
    opacity: 0;
    transform: translateY(20px);
}

.policy-suggestion-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.policy-suggestion-card:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.policy-suggestion-card:active,
.policy-suggestion-card.selected {
    transform: translateY(0) scale(0.98);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.policy-suggestion-card.selected .suggestion-icon,
.policy-suggestion-card.selected .suggestion-topic,
.policy-suggestion-card.selected .suggestion-question {
    color: white;
}

.policy-suggestion-card.selected .suggestion-arrow svg {
    stroke: white;
}

/* Color variations */
.policy-suggestion-card.suggestion-primary {
    border-left-width: 4px;
    border-left-color: #3b82f6;
}

.policy-suggestion-card.suggestion-secondary {
    border-left-width: 4px;
    border-left-color: #8b5cf6;
}

.policy-suggestion-card.suggestion-tertiary {
    border-left-width: 4px;
    border-left-color: #10b981;
}

.policy-suggestion-card.suggestion-quaternary {
    border-left-width: 4px;
    border-left-color: #f59e0b;
}

.suggestion-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.8;
    transition: all var(--transition-fast);
}

.policy-suggestion-card:hover .suggestion-icon {
    opacity: 1;
    transform: scale(1.1);
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-topic {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 0.375rem;
    transition: color var(--transition-fast);
}

.suggestion-question {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.suggestion-arrow {
    flex-shrink: 0;
    opacity: 0.3;
    transition: all var(--transition-fast);
}

.policy-suggestion-card:hover .suggestion-arrow {
    opacity: 1;
    transform: translateX(4px);
}

.suggestion-arrow svg {
    stroke: var(--color-accent);
    transition: stroke var(--transition-fast);
}

/* Mobile responsive for suggestions */
@media (max-width: 768px) {
    .policy-suggestions-wrapper {
        padding: var(--spacing-md);
        max-height: 60vh;
    }

    .policy-suggestions-header {
        padding-right: 0;  /* No extra padding needed - wrapper z-index handles overlap */
    }

    .suggestions-close-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.625rem;
    }

    .policy-suggestions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .policy-suggestion-card {
        padding: 1rem;
    }

    .suggestion-icon {
        font-size: 1.25rem;
    }

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

/* Tablet responsive for suggestions */
@media (min-width: 769px) and (max-width: 1024px) {
    .policy-suggestions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 768px) {
    .reader-main {
        padding: var(--spacing-md) 0.75rem;
        padding-top: 10px; /* Tight spacing below header on mobile */
        padding-bottom: calc(280px + env(safe-area-inset-bottom, 0)); /* Accommodate input area + suggestion chips */
        /* Ensure scrolling works on mobile */
        -webkit-overflow-scrolling: touch;
    }

    .reader-header {
        padding: 0.625rem 0.75rem;
    }

    /* Hide document title on mobile - saves vertical space */
    .document-title {
        display: none;
    }

    /* Keep header elements in a single row on mobile */
    .header-content {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .header-center {
        flex: 1;
        min-width: 0;
    }

    .header-right {
        margin-left: auto;
        flex-shrink: 0;
    }

    .header-btn,
    .collapse-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* Hide keyboard hints on mobile - no physical keyboard */
    .input-hint {
        display: none;
    }

    .conversation-node {
        padding: 0.75rem 0;
    }

    .conversation-node.user-question-node {
        padding: 0.75rem 0.875rem;
    }

    .citations-panel,
    .settings-panel {
        width: 100vw;
    }

    /* Legacy form footer styles */
    .form-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions {
        width: 100%;
        flex-direction: column;
    }

    .action-btn:not(.action-btn--icon),
    .submit-btn:not(.submit-btn--compact) {
        width: 100%;
    }

    .reader-input {
        padding: 0.5rem 0.75rem;
    }

    /* Compact input row adjustments for mobile */
    .input-row {
        gap: 0.375rem;
    }

    /* Hide clear button on mobile - saves space, users can select-all + type instead */
    #clearBtn {
        display: none;
    }

    .action-btn.action-btn--icon {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .submit-btn.submit-btn--compact {
        width: 32px;
        height: 32px;
    }

    .submit-btn.submit-btn--compact svg {
        width: 16px;
        height: 16px;
    }

    .question-input.question-input--compact {
        padding: 0.4rem 0.625rem;
        font-size: 0.8125rem;
    }

    .input-hint {
        font-size: 0.5625rem;
    }
}

@media (min-width: 1400px) {
    .reader-main,
    .header-content,
    .input-container {
        max-width: 1000px;
    }
}


/* ===========================
   Print Styles
   =========================== */

@media print {
    .reader-header .header-right,
    .reader-input,
    .citations-panel,
    .settings-panel {
        display: none;
    }

    body {
        background: white;
    }

    .conversation-node {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* =============================================================================
   TYPING INDICATOR - Perceived latency improvement
   ============================================================================= */

.typing-indicator-node {
    padding: 0.75rem 1rem;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    width: fit-content;
    animation: fadeInMessage 0.3s ease;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem;
}

/* Rotating phrase label */
.typing-indicator .typing-label {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-right: 4px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.typing-indicator .typing-label.phrase-changing {
    opacity: 0.3;
    transform: translateY(-2px);
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    opacity: 0.4;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0s; }
.typing-dot:nth-child(3) { animation-delay: 0.2s; }
.typing-dot:nth-child(4) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

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

/* Streaming response thinking indicator */
.thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    padding-left: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.thinking-indicator .thinking-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

.thinking-indicator .thinking-divider {
    color: var(--color-text-secondary);
    opacity: 0.5;
    margin: 0 2px;
}

.thinking-indicator .thinking-phrase {
    font-style: italic;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.thinking-indicator .thinking-phrase.phrase-changing {
    opacity: 0.3;
    transform: translateY(-2px);
}

.thinking-indicator .ellipsis-animation {
    display: inline-block;
    animation: ellipsisPulse 1.5s ease-in-out infinite;
}

@keyframes ellipsisPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Tier-specific styling */
.thinking-indicator.tier-1 { color: var(--color-success, #22c55e); }
.thinking-indicator.tier-2 { color: var(--color-info, #3b82f6); }
.thinking-indicator.tier-3 { color: var(--color-text-secondary); }

/* Elapsed time in thinking indicator */
.thinking-elapsed {
    font-size: 0.8rem;
    color: var(--color-text-tertiary, #9ca3af);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.thinking-elapsed.visible {
    opacity: 1;
}

/* Progress bar below thinking indicator */
.thinking-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--color-bg-tertiary, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.thinking-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #3b82f6), var(--color-primary-light, #60a5fa));
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

/* Indeterminate sliding animation */
.thinking-progress-fill.indeterminate {
    width: 40%;
    animation: thinkingProgressSlide 1.5s ease-in-out infinite;
}

@keyframes thinkingProgressSlide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(250%); }
    100% { transform: translateX(250%); }
}

/* TTS Pipeline Steps */
.tts-pipeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.pipeline-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    animation: pipelineStepFadeIn 0.3s ease-out;
}

.pipeline-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.pipeline-text {
    font-style: italic;
}

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

/* Dark mode */
[data-theme="dark"] .thinking-progress-bar {
    background: var(--color-bg-tertiary, #374151);
}

[data-theme="dark"] .thinking-elapsed {
    color: var(--color-text-tertiary, #6b7280);
}

/* =============================================================================
   DEGRADATION NOTICE - Subtle note when response quality may be reduced
   ============================================================================= */

.response-degradation-notice {
    font-size: 0.8rem;
    color: var(--color-text-tertiary, #9ca3af);
    font-style: italic;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-light, #e5e7eb);
    line-height: 1.4;
}

[data-theme="dark"] .response-degradation-notice {
    color: var(--color-text-tertiary, #6b7280);
    border-top-color: var(--color-border-light, #374151);
}

/* =============================================================================
   SUBMIT BUTTON SENDING STATE - Instant feedback
   ============================================================================= */

.submit-btn.btn-sending {
    background: var(--color-accent);
    opacity: 0.8;
    cursor: wait;
    min-width: 80px;
}

.sending-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Button spinner for action buttons (e.g., suggest questions) */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: var(--color-primary, #2563eb);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* =============================================================================
   STREAMING RESPONSE STYLES - Real-time text display
   ============================================================================= */

/* Streaming node visual indicator */
.conversation-node.streaming {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

/* Streaming indicator dot (pulsing) */
.streaming-indicator {
    display: inline-block;
    color: var(--color-accent);
    animation: streamingPulse 1.5s ease-in-out infinite;
    margin-left: 8px;
    font-size: 0.875rem;
}

@keyframes streamingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Streaming content - show text as it arrives */
.conversation-node.streaming .streaming-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Blinking cursor at end of streaming content */
.conversation-node.streaming .streaming-content::after {
    content: '▋';
    display: inline;
    color: var(--color-accent);
    animation: streamingBlink 1s step-end infinite;
    margin-left: 2px;
}

/* Remove cursor when streaming completes */
.conversation-node:not(.streaming) .streaming-content::after {
    display: none;
}

/* Hide cursor when thinking indicator is showing */
.conversation-node.streaming .streaming-content:has(.thinking-indicator)::after {
    display: none;
}

/* Reduce whitespace when showing thinking indicator (before content arrives) */
.conversation-node.streaming:has(.thinking-indicator) {
    padding: 0.5rem 0;
}

.conversation-node.streaming .streaming-content:has(.thinking-indicator) {
    line-height: 1.2;
    min-height: auto;
    white-space: normal;
}

@keyframes streamingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =============================================================================
   PROGRESSIVE LOADING ENHANCEMENTS
   ============================================================================= */

/* Streaming text content wrapper */
.streaming-text-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Word count indicator during streaming */
.streaming-word-count {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--color-text-tertiary, #9ca3af);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-light, #f3f4f6);
    opacity: 0.7;
}

.streaming-word-count .word-count-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* "Still working..." message after delay */
.still-working-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-tertiary, #f9fafb);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    animation: stillWorkingFadeIn 0.3s ease-out;
}

.still-working-indicator svg {
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

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

/* Skeleton paragraph placeholders */
.skeleton-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.skeleton-line {
    height: 1rem;
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary, #e5e7eb) 25%,
        var(--color-bg-tertiary, #f3f4f6) 50%,
        var(--color-bg-secondary, #e5e7eb) 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-line:nth-child(1) { width: 95%; }
.skeleton-line:nth-child(2) { width: 88%; }
.skeleton-line:nth-child(3) { width: 92%; }
.skeleton-line:nth-child(4) { width: 70%; animation-delay: 0.1s; }

/* Fade-in animation for streamed content */
.streaming-content.content-arriving {
    animation: contentFadeIn 0.2s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* Dark mode skeleton */
[data-theme="dark"] .skeleton-line {
    background: linear-gradient(
        90deg,
        #374151 25%,
        #4b5563 50%,
        #374151 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .still-working-indicator {
    background: var(--color-bg-secondary, #1f2937);
}

/* =============================================================================
   ROUTER PROGRESS - Intermediate content preview during DAG processing
   ============================================================================= */

.router-progress-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.router-progress-container .thinking-indicator {
    padding-left: 0;
}

/* Progress bar */
.router-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--color-bg-tertiary, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
}

.router-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #3b82f6), var(--color-primary-light, #60a5fa));
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

/* Categories preview (shown after classification) */
.router-categories-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.router-categories-preview .categories-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.router-categories-preview .categories-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.router-categories-preview .category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-primary, #3b82f6);
    background: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
    border-radius: 4px;
    animation: categoryBadgeFadeIn 0.3s ease-out;
}

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

/* Preview content (greyed out partial answers) */
.router-preview-content {
    padding: 0.75rem;
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: 6px;
    border-left: 3px solid var(--color-primary, #3b82f6);
    opacity: 0.7;
    animation: previewSlideIn 0.4s ease-out;
}

.router-preview-content .preview-category-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary, #3b82f6);
    margin-bottom: 0.375rem;
}

.router-preview-content .preview-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-style: italic;
}

@keyframes previewSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 0.7;
        transform: translateX(0);
    }
}

/* Faded skeleton (shown below preview) */
.skeleton-paragraphs.skeleton-faded {
    opacity: 0.4;
}

.skeleton-paragraphs.skeleton-faded .skeleton-line {
    height: 0.75rem;
}

/* Search targets display (after classification) */
.router-search-targets {
    padding: 0.75rem;
    background: var(--color-bg-secondary, #f0f9ff);
    border-radius: 8px;
    border-left: 3px solid var(--color-info, #3b82f6);
    margin-bottom: 0.75rem;
    animation: searchTargetsFadeIn 0.4s ease-out;
}

.router-search-targets .search-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.router-search-targets .search-categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.router-search-targets .search-category-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    padding: 0.25rem 0;
}

.router-search-targets .search-icon {
    font-size: 0.9rem;
    opacity: 0.8;
}

.router-search-targets .search-category-name {
    font-weight: 500;
}

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

/* Previews container for accumulated partial answers */
.router-previews-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.router-previews-container .router-preview-content {
    animation: previewSlideIn 0.4s ease-out both;
}

/* Synthesis indicator */
.router-synthesis-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--color-primary-bg, #eff6ff) 0%, var(--color-bg-secondary, #f9fafb) 100%);
    border-radius: 8px;
    margin-top: 0.5rem;
    animation: synthesisGlow 2s ease-in-out infinite;
}

.router-synthesis-indicator .synthesis-icon {
    font-size: 1.1rem;
    animation: synthesisIconPulse 1.5s ease-in-out infinite;
}

.router-synthesis-indicator .synthesis-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary, #3b82f6);
}

@keyframes synthesisGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(59, 130, 246, 0.15);
    }
}

@keyframes synthesisIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Dark mode search targets */
[data-theme="dark"] .router-search-targets {
    background: var(--color-bg-tertiary, #1e3a5f);
}

[data-theme="dark"] .router-synthesis-indicator {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, var(--color-bg-tertiary, #1f2937) 100%);
}

/* Dark mode router progress */
[data-theme="dark"] .router-preview-content {
    background: var(--color-bg-tertiary, #1f2937);
}

[data-theme="dark"] .router-progress-bar {
    background: var(--color-bg-tertiary, #374151);
}

[data-theme="dark"] .router-categories-preview .category-badge {
    background: rgba(59, 130, 246, 0.2);
}

/* Streaming node header styling (shown during streaming) */
.conversation-node.streaming .node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

.conversation-node.streaming .node-meta {
    display: flex;
    align-items: center;
}

.conversation-node.streaming .node-type {
    display: inline;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.conversation-node.streaming .node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.875rem;
}

/* ===========================
   Skeleton Loading (Next Steps)
   =========================== */

/* Skeleton container (shown while fetching metadata) */
.skeleton-next-steps .next-steps-title {
    animation: skeleton-fade 1.5s ease-in-out infinite;
}

/* Skeleton cards (shimmer effect) */
.next-step-card.skeleton {
    height: 80px;
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-border-light) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border: none;
    cursor: default;
    pointer-events: none;
}

.next-step-card.skeleton:hover {
    transform: none;
    box-shadow: none;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes skeleton-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===========================
   Card Reveal Animations
   =========================== */

/* Populated cards (slide in with stagger) */
.next-step-card.populated {
    animation: card-reveal 0.4s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

.next-step-card.populated:nth-child(1) { animation-delay: 0ms; }
.next-step-card.populated:nth-child(2) { animation-delay: 100ms; }
.next-step-card.populated:nth-child(3) { animation-delay: 200ms; }

@keyframes card-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content reveal animation (after streaming completes) */
.node-content.revealing p,
.node-content.revealing ul,
.node-content.revealing ol,
.node-content.revealing h2,
.node-content.revealing h3 {
    animation: content-reveal 0.3s ease-out forwards;
}

@keyframes content-reveal {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* ===========================
   Dark Mode - Skeleton
   =========================== */

[data-theme="dark"] .next-step-card.skeleton {
    background: linear-gradient(
        90deg,
        #2d2d2d 25%,
        #3d3d3d 50%,
        #2d2d2d 75%
    );
    background-size: 200% 100%;
}

/* ===========================
   Scripted Suggestions
   Using next-steps design for hardcoded navigation options
   =========================== */

/* Container modifier for scripted suggestions */
.next-steps-container.scripted-suggestions {
    margin-top: 0;
    padding-top: 0;
    border-top: none; /* Remove border for standalone suggestions */
}

/* Fade out animation for suggestions */
.next-steps-container.suggestions-fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Visibility animation trigger */
.next-steps-container.suggestions-visible {
    opacity: 1;
}

/* ===========================
   Collapsed Navigation History
   Shows previous choices as compact, expandable summaries
   =========================== */

.next-steps-container.collapsed {
    max-height: 52px !important;
    overflow: hidden;
    opacity: 0.7;
    cursor: pointer;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important;
    border-radius: 8px;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important; /* Override parent padding */
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important; /* Keep border consistent */
    transition: max-height 0.3s ease, opacity 0.2s ease, border-color 0.2s ease;
    background: var(--surface-secondary, rgba(0, 0, 0, 0.03));
}

.next-steps-container.collapsed:hover {
    opacity: 1;
    border-color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.next-steps-container.collapsed .next-steps-grid {
    display: none;
}

.next-steps-container.collapsed .next-steps-header {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: block !important;
}

/* Expanded state for collapsed containers */
.next-steps-container.collapsed.expanded {
    max-height: none !important; /* Remove height constraint */
    opacity: 1;
    overflow: visible;
    padding-bottom: 1rem !important;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--color-warning, #f59e0b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10; /* Ensure it appears above subsequent content */
    margin-bottom: 1rem !important;
}

.next-steps-container.collapsed.expanded .next-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 1rem;
    gap: 0.75rem;
    background: var(--surface-primary, #fff);
    margin-top: 0; /* Override base margin since we have padding on container */
}

/* Collapsed summary bar */
.collapsed-summary {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666) !important;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
    background: transparent;
}

/* Ensure collapsed container shows the summary */
.next-steps-container.collapsed .collapsed-summary {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.collapsed-summary .collapsed-label {
    opacity: 0.8;
    white-space: nowrap;
    font-size: 0.8rem;
}

.collapsed-summary .collapsed-hint {
    opacity: 0.5;
    font-size: 0.75rem;
    font-style: italic;
    white-space: nowrap;
}

.collapsed-summary .collapsed-title {
    color: var(--text-primary, #333);
    font-weight: 500;
}

.collapsed-summary .expand-icon {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.next-steps-container.collapsed:hover .expand-icon {
    opacity: 1;
}

.next-steps-container.collapsed.expanded .expand-icon {
    transform: rotate(90deg);
}

/* Re-enable cards in expanded collapsed container */
.next-steps-container.collapsed.expanded .next-step-card {
    pointer-events: auto;
    opacity: 1;
}

/* Visited/selected card state - orange to indicate previously explored */
.next-step-card.visited {
    border-color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    position: relative;
}

.next-step-card.visited::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-warning, #f59e0b);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.next-step-card.visited .next-step-type {
    background: var(--color-warning, #f59e0b);
    color: white;
}

.next-step-card.visited:hover {
    border-color: var(--color-warning-dark, #d97706);
    background: rgba(245, 158, 11, 0.12);
}

/* Override white text from .next-step-selected when card is also .visited */
.next-step-card.visited.next-step-selected {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--color-warning, #f59e0b);
}

.next-step-card.visited.next-step-selected .next-step-title,
.next-step-card.visited.next-step-selected .next-step-description,
.next-step-card.visited.next-step-selected .next-step-rationale {
    color: var(--color-warning-dark, #92400e) !important;
}

.next-step-card.visited.next-step-selected .next-step-arrow svg {
    stroke: var(--color-warning-dark, #92400e) !important;
}

/* Collapsed summary with multiple visited titles */
.collapsed-summary .visited-titles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

.collapsed-summary .visited-title {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning-dark, #b45309);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.8rem;
}

/* Scripted cards use same animation as populated */
.next-step-card.scripted {
    animation: card-reveal 0.4s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

/* Staggered animation for scripted cards */
.next-step-card.scripted:nth-child(1) { animation-delay: 0ms; }
.next-step-card.scripted:nth-child(2) { animation-delay: 100ms; }
.next-step-card.scripted:nth-child(3) { animation-delay: 200ms; }
.next-step-card.scripted:nth-child(4) { animation-delay: 300ms; }
.next-step-card.scripted:nth-child(5) { animation-delay: 400ms; }

/* Hide info icon for scripted cards (no rationale available) */
.next-step-card.scripted .next-step-info-icon {
    display: none;
}

/* Ensure description wrapper doesn't expect info icon */
.next-step-card.scripted .next-step-description-wrapper {
    padding-right: 0;
}

/* BanterBox Help Card - Subtle, almost invisible until hovered */
.next-step-card.banterbox-help {
    grid-column: 1 / -1;
    background: transparent;
    border: none;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    opacity: 0.4;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.next-step-card.banterbox-help .next-step-number {
    background: transparent;
    border: none;
    padding: 0;
    align-self: center;
}

.next-step-card.banterbox-help .next-step-number .banterbox-favicon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.next-step-card.banterbox-help:hover .next-step-number .banterbox-favicon {
    opacity: 1;
}

.next-step-card.banterbox-help .next-step-title {
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    font-weight: 400;
}

.next-step-card.banterbox-help .next-step-description {
    color: var(--color-text-tertiary);
    font-size: 0.6875rem;
    line-height: 1.3;
}

.next-step-card.banterbox-help .next-step-arrow {
    color: var(--color-text-tertiary);
    opacity: 0.5;
    align-self: center;
}

.next-step-card.banterbox-help .next-step-arrow svg {
    width: 12px;
    height: 12px;
}

.next-step-card.banterbox-help:hover {
    opacity: 1;
    background: var(--color-bg-tertiary);
    transform: none;
    box-shadow: none;
}

.next-step-card.banterbox-help:hover .next-step-arrow {
    opacity: 1;
}

/* =============================================================================
   NAVIGATION TYPE BADGES
   Category-based navigation: Go Deeper, Related, Pull Back, Why?
   ============================================================================= */

/* Navigation Type Badge - replaces numeric badge */
.next-step-type {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: all var(--transition-fast);
    min-width: 70px;
}

/* Type-specific colors - Deeper (Blue) */
.next-step-type[data-nav-type="deeper"] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Type-specific colors - Pivot/Related (Amber) */
.next-step-type[data-nav-type="pivot"] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Type-specific colors - Broader/Pull Back (Green) */
.next-step-type[data-nav-type="broader"] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Type-specific colors - Meta/Why? (Purple) */
.next-step-type[data-nav-type="meta"] {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Type-specific colors - Explore (Cyan/Teal) - for entry/orientation nodes */
.next-step-type[data-nav-type="explore"] {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

/* Type-specific colors - Expert Insight (Rose/Pink) - for expert commentary */
.next-step-type[data-nav-type="expert_insight"] {
    background: rgba(236, 72, 153, 0.1);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

/* Type-specific colors - Sequential (Indigo) - for linear reading order */
.next-step-type[data-nav-type="sequential"] {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.3);
}


/* Card left border accent based on type */
.next-step-card[data-nav-type="deeper"] {
    border-left: 3px solid #3b82f6;
}

.next-step-card[data-nav-type="pivot"] {
    border-left: 3px solid #f59e0b;
}

.next-step-card[data-nav-type="broader"] {
    border-left: 3px solid #10b981;
}

.next-step-card[data-nav-type="meta"] {
    border-left: 3px solid #8b5cf6;
}

.next-step-card[data-nav-type="explore"] {
    border-left: 3px solid #06b6d4;
}

.next-step-card[data-nav-type="expert_insight"] {
    border-left: 3px solid #ec4899;
}

.next-step-card[data-nav-type="sequential"] {
    border-left: 3px solid #6366f1;
}

/* Hover states - badge fills with color */
.next-step-card:hover .next-step-type[data-nav-type="deeper"] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.next-step-card:hover .next-step-type[data-nav-type="pivot"] {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.next-step-card:hover .next-step-type[data-nav-type="broader"] {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.next-step-card:hover .next-step-type[data-nav-type="meta"] {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

.next-step-card:hover .next-step-type[data-nav-type="explore"] {
    background: #06b6d4;
    color: white;
    border-color: #06b6d4;
}

.next-step-card:hover .next-step-type[data-nav-type="expert_insight"] {
    background: #ec4899;
    color: white;
    border-color: #ec4899;
}


.next-step-card:hover .next-step-type[data-nav-type="sequential"] {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

/* Dark theme adjustments */
[data-theme="dark"] .next-step-type[data-nav-type="deeper"] {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="pivot"] {
    background: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="broader"] {
    background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="meta"] {
    background: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="explore"] {
    background: rgba(6, 182, 212, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="expert_insight"] {
    background: rgba(236, 72, 153, 0.2);
}

[data-theme="dark"] .next-step-type[data-nav-type="sequential"] {
    background: rgba(99, 102, 241, 0.2);
}

/* Sepia theme adjustments */
[data-theme="sepia"] .next-step-type[data-nav-type="deeper"] {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="pivot"] {
    background: rgba(245, 158, 11, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="broader"] {
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="meta"] {
    background: rgba(139, 92, 246, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="explore"] {
    background: rgba(6, 182, 212, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="expert_insight"] {
    background: rgba(236, 72, 153, 0.15);
}

[data-theme="sepia"] .next-step-type[data-nav-type="sequential"] {
    background: rgba(99, 102, 241, 0.15);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .next-step-type {
        padding: 0.2rem 0.375rem;
        font-size: 0.625rem;
        min-width: 60px;
    }
}


/* Per-author accent colors (used by author chat sidebar) */
.author-truth { --author-accent-color: #7B4B94; }
.author-douglass { --author-accent-color: #8B4513; }
.author-lincoln { --author-accent-color: #2F4F4F; }
.author-washington { --author-accent-color: #556B2F; }
.author-dubois { --author-accent-color: #191970; }
.author-warren { --author-accent-color: #8B0000; }


/* =============================================================================
   VISUALIZATION CONTAINERS
   Interactive charts, tables, and timelines from LLM responses
   ============================================================================= */

/* Placeholder while loading */
.viz-placeholder {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.viz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Main visualization container */
.viz-container {
    margin: 1.5rem 0;
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.viz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
}

.viz-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.viz-controls {
    display: flex;
    gap: 0.5rem;
}

.viz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.viz-btn:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.viz-btn svg {
    width: 16px;
    height: 16px;
}

.viz-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-tertiary);
}

.viz-source {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-tertiary);
}

/* ===========================
   Data Tables
   =========================== */

.viz-table .table-wrapper {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.data-table th {
    position: sticky;
    top: 0;
    background: var(--color-bg-tertiary);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    z-index: 1;
}

.data-table tbody tr:hover {
    background: var(--color-bg-tertiary);
}

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

/* Sortable table columns */
.data-table.sortable th {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.data-table.sortable th:hover {
    background: var(--color-bg-secondary);
}

.data-table.sortable th::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    opacity: 0.3;
    vertical-align: middle;
}

.data-table.sortable th.sorted-asc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--color-accent);
    opacity: 1;
}

.data-table.sortable th.sorted-desc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-accent);
    opacity: 1;
}

/* ===========================
   Charts (Chart.js)
   =========================== */

.viz-chart .chart-wrapper {
    position: relative;
    height: 300px;
    padding: 1rem;
}

.viz-chart .chart-wrapper canvas {
    max-height: 100%;
}

/* ===========================
   Timelines
   =========================== */

.viz-timeline .timeline-wrapper {
    position: relative;
    padding: 1.5rem 1rem;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: var(--color-border);
    transform: translateX(-50%);
}

.timeline-event {
    position: relative;
    width: calc(50% - 2rem);
    margin-bottom: 1.5rem;
}

.timeline-event.left {
    margin-right: auto;
    padding-right: 2rem;
    text-align: right;
}

.timeline-event.right {
    margin-left: auto;
    padding-left: 2rem;
    text-align: left;
}

.timeline-marker {
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border: 2px solid var(--color-bg-secondary);
    border-radius: 50%;
    z-index: 1;
}

.timeline-event.left .timeline-marker {
    right: -6px;
}

.timeline-event.right .timeline-marker {
    left: -6px;
}

.timeline-content {
    background: var(--color-bg-tertiary);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--color-border-light);
}

.timeline-date {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 0.375rem;
}

.timeline-event-title {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.375rem 0;
}

.timeline-event-description {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================
   Comparison Grid
   =========================== */

.viz-comparison .comparison-grid {
    display: grid;
    gap: 1px;
    background: var(--color-border-light);
}

.comparison-header {
    padding: 0.875rem;
    background: var(--color-bg-tertiary);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    text-align: center;
}

.comparison-cell {
    padding: 0.875rem;
    background: var(--color-bg-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ===========================
   Fallback & Error States
   =========================== */

.viz-fallback .viz-fallback-content,
.viz-error .viz-error-content {
    padding: 1rem;
}

.viz-fallback details {
    margin-top: 0.75rem;
}

.viz-fallback summary {
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.8125rem;
}

.viz-fallback pre {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    font-size: 0.75rem;
    overflow-x: auto;
}

.viz-error {
    border-color: #ef4444;
}

.viz-error .viz-header {
    background: #fef2f2;
    border-color: #fecaca;
}

.viz-error .viz-title {
    color: #dc2626;
}

.viz-error-content {
    color: #dc2626;
    font-size: 0.875rem;
}

/* Dark mode error */
[data-theme="dark"] .viz-error .viz-header {
    background: #450a0a;
    border-color: #7f1d1d;
}

[data-theme="dark"] .viz-error-content {
    color: #fca5a5;
}

/* ===========================
   Mobile Responsive
   =========================== */

@media (max-width: 768px) {
    .viz-container {
        margin: 1rem 0;
    }

    .viz-header {
        padding: 0.625rem 0.875rem;
    }

    .viz-title {
        font-size: 0.875rem;
    }

    /* Timeline: Stack events vertically on mobile */
    .timeline-line {
        left: 1rem;
    }

    .timeline-event,
    .timeline-event.left,
    .timeline-event.right {
        width: calc(100% - 3rem);
        margin-left: 2rem;
        padding-left: 1rem;
        padding-right: 0;
        text-align: left;
    }

    .timeline-event.left .timeline-marker,
    .timeline-event.right .timeline-marker {
        left: -1.5rem;
        right: auto;
    }

    /* Table: Smaller padding */
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    /* Chart: Reduced height */
    .viz-chart .chart-wrapper {
        height: 250px;
        padding: 0.75rem;
    }
}

/* ===========================
   Dark Mode Support
   =========================== */

[data-theme="dark"] .viz-placeholder {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .viz-container {
    background: #1f1f1f;
    border-color: #404040;
}

[data-theme="dark"] .viz-header,
[data-theme="dark"] .viz-footer {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .data-table th {
    background: #2d2d2d;
}

[data-theme="dark"] .data-table tbody tr:hover {
    background: #2d2d2d;
}

[data-theme="dark"] .timeline-content {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .comparison-header {
    background: #2d2d2d;
}

[data-theme="dark"] .comparison-cell {
    background: #1f1f1f;
}


/* ===========================
   Progress Indicator
   =========================== */

.progress-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-right: var(--spacing-xs);
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    stroke: var(--color-border-light);
}

.progress-ring-fill {
    stroke: var(--color-accent);
    transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
    position: absolute;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.progress-indicator:hover .progress-text {
    color: var(--color-accent);
}


/* ===========================
   Path Selector Modal
   =========================== */

.path-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.path-selector-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.path-selector-modal .modal-content {
    position: relative;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    padding: var(--spacing-xl);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.path-selector-modal h2 {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.5rem;
    color: var(--color-text-primary);
}

.path-selector-modal > .modal-content > p {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text-secondary);
}

.path-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.path-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-light);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.path-option:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.path-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.path-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.path-desc {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.skip-path-btn {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.skip-path-btn:hover {
    color: var(--color-text-primary);
}


/* ===========================
   Feature Panels (shared styles)
   =========================== */

.audio-briefing-panel,
.annotations-sidebar,
.exploration-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 360px;
    max-width: 90vw;
    height: calc(100vh - var(--header-height) - var(--input-height, 60px));
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.audio-briefing-panel .panel-header,
.annotations-sidebar .panel-header,
.exploration-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.audio-briefing-panel .panel-header h2,
.annotations-sidebar .panel-header h2,
.exploration-panel .panel-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.audio-briefing-panel .panel-content,
.annotations-sidebar .panel-content,
.exploration-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}


/* ===========================
   Audio Briefing Panel Specifics
   =========================== */

.audio-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
}

.audio-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.audio-play-btn:hover {
    background: var(--color-accent-hover);
}

.audio-progress {
    flex: 1;
    height: 6px;
    background: var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.audio-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.audio-time {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    min-width: 40px;
    text-align: right;
}

.voice-selector,
.speed-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.voice-selector label,
.speed-selector label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.voice-selector select,
.speed-selector select {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.briefing-content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}


/* ===========================
   Annotations Sidebar Specifics
   =========================== */

.annotations-filter {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.annotations-filter .filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.annotations-filter .filter-btn:hover,
.annotations-filter .filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.annotations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.annotations-empty {
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--spacing-lg);
}


/* ===========================
   Exploration Panel Specifics
   =========================== */

.exploration-section {
    margin-bottom: var(--spacing-lg);
}

.exploration-section h3 {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exploration-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.exploration-empty {
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
}

.exploration-item {
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.exploration-item:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
}

.exploration-item-title {
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.exploration-item-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}


/* ===========================
   Header Button Active State
   =========================== */

.header-btn.active {
    background: var(--color-accent);
    color: #fff;
}

.header-btn.active:hover {
    background: var(--color-accent-hover);
}


/* ===========================
   Mobile Adjustments for Panels
   =========================== */

@media (max-width: 768px) {
    .audio-briefing-panel,
    .annotations-sidebar,
    .exploration-panel {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
    }

    .path-selector-modal .modal-content {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }

    .path-options {
        gap: var(--spacing-xs);
    }

    .path-option {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .path-icon {
        font-size: 1.5rem;
    }
}


/* =============================================================================
   NODE IMAGES - Header and inline images for policy nodes
   Constrained to fit inline with text, not dominate the view
   ============================================================================= */

/* Base figure styling */
.node-image {
    margin: 1.5rem auto;
    padding: 0;
    position: relative;
    max-width: 600px;
    text-align: center;
}

/* Ensure images don't dominate - constrain both width and height */
/* NOTE: Chart images (.chart class) override these in the chart section above */
.node-image img,
.conversation-node .node-image img,
.assistant-response-node .node-image img,
figure.node-image img {
    display: block;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    max-height: 350px;
    margin: 0 auto;
    border-radius: 6px;
    background: var(--color-bg-tertiary);
    object-fit: contain;
}

/* Chart images can be larger for data readability */
.node-image.chart img,
figure.node-image.chart img,
.node-inline-images .chart img {
    max-width: 608px !important;
    max-height: 450px !important;
}

/* Loading state - shimmer animation */
.node-image img[loading="lazy"] {
    min-height: 200px;
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-border-light) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: img-shimmer 1.5s infinite;
}

.node-image img[loading="lazy"].loaded {
    min-height: auto;
    background: transparent;
    animation: none;
}

@keyframes img-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Header image - floats left so body text wraps around it.
   Uses 40% max-width so text beside it stays readable (~60% width).
   When inside .node-source-layout, flex rules take over instead. */
.node-image.header-image {
    float: left !important;
    max-width: 40% !important;
    margin: 0.25rem 1.5rem 1rem 0 !important;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    shape-outside: margin-box;
}

/* Inline images container — grid layout, does not float */
.conversation-node .node-inline-images {
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

.node-image.header-image img {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 310px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
    border-radius: 8px;
}

/* Disable shimmer for header images - they should load cleanly */
.node-image.header-image img[loading="lazy"],
figure.header-image img[loading="lazy"] {
    min-height: auto;
    background: transparent;
    animation: none;
}

/* Inline image - floats left so body text wraps around it.
   40% max-width keeps text readable beside it.
   Inside .node-inline-images grid, float is overridden. */
.node-image.inline-image {
    float: left !important;
    max-width: 40% !important;
    margin: 0.5rem 1.5rem 1rem 0 !important;
    padding: 0;
    shape-outside: margin-box;
}

.node-image.inline-image img {
    display: block !important;
    float: none !important;
    max-width: 100% !important;
    max-height: 350px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* Chart/data visualization images - slightly larger */
.node-image.chart-image img,
.node-image[data-type="chart"] img {
    max-height: 450px;
    max-width: 700px;
}

/* Cover/hero images - constrained but prominent */
.node-image.cover-image img,
.node-image[data-type="cover"] img {
    max-height: 300px;
    max-width: 500px;
}

/* Figcaption styling */
.node-image figcaption {
    padding: 0.5rem 0 0.25rem;
    text-align: left;
    max-width: 100%;
}

.node-image .image-caption {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.node-image .image-source {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-tertiary);
    margin-top: 0.25rem;
}

/* Header image caption - constrained to figure width */
.node-image.header-image figcaption {
    display: block !important;
    max-width: 100% !important;
    padding: 0.5rem 0 0.25rem 0;
    background: transparent;
    border: none;
    text-align: left;
}

.node-image.header-image .image-caption {
    font-size: 0.8125rem;
}

/* Mobile responsive — no float on small screens, full-width images */
@media (max-width: 768px) {
    .node-image {
        margin: 1rem 0;
    }

    .node-image.header-image,
    .node-image.inline-image {
        float: none !important;
        max-width: 100% !important;
        margin: 1rem 0 !important;
    }

    .node-image.header-image img {
        max-height: 200px;
    }

    .node-image .image-caption {
        font-size: 0.8125rem;
    }

    .node-image .image-source {
        font-size: 0.6875rem;
    }

    .node-image.header-image figcaption {
        padding: 0.375rem 0.75rem;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .node-image img {
    background: #2d2d2d;
}

[data-theme="dark"] .node-image img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        #2d2d2d 25%,
        #3d3d3d 50%,
        #2d2d2d 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .node-image.header-image figcaption {
    background: transparent;
    border: none;
}

/* Sepia mode adjustments */
[data-theme="sepia"] .node-image img {
    background: #f0e8d8;
}

[data-theme="sepia"] .node-image img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        #f0e8d8 25%,
        #e0d5c7 50%,
        #f0e8d8 75%
    );
    background-size: 200% 100%;
}

[data-theme="sepia"] .node-image.header-image figcaption {
    background: transparent;
    border: none;
}


/* =============================================================================
   HOW TO BANTERBOX MODAL
   Static help modal with tabbed content explaining BanterBox features
   ============================================================================= */

.howto-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.howto-modal.open {
    display: flex;
}

.howto-modal-content {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 100%;
    max-width: 820px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: howto-modal-appear 0.25s ease;
}

@keyframes howto-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header with branding */
.howto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.howto-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.howto-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.howto-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    margin: 0;
    color: var(--color-text-primary);
}

.howto-header .modal-close {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 6px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.howto-header .modal-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Tab Navigation */
.howto-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.howto-tabs::-webkit-scrollbar {
    height: 3px;
}

.howto-tabs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.howto-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.howto-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.howto-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.howto-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

.howto-tab.active svg {
    color: var(--color-accent);
}

/* Tab Panels */
.howto-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.howto-panel {
    display: none;
    padding: var(--spacing-lg);
}

.howto-panel.active {
    display: block;
    animation: howto-fadeIn 0.2s ease;
}

@keyframes howto-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Intro text at top of panel */
.howto-intro {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

/* Feature List Items */
.howto-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.howto-feature:last-child {
    margin-bottom: 0;
}

.howto-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    color: var(--color-accent);
}

.howto-feature-icon svg {
    width: 20px;
    height: 20px;
}

.howto-feature-content {
    flex: 1;
    min-width: 0;
}

.howto-feature-content h4 {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.howto-feature-content p {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Keyboard shortcuts */
.howto-kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Color swatches for highlights */
.howto-colors {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.howto-color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
}

.howto-color-swatch.yellow { background: #fef08a; }
.howto-color-swatch.green { background: #86efac; }
.howto-color-swatch.blue { background: #93c5fd; }
.howto-color-swatch.pink { background: #f9a8d4; }
.howto-color-swatch.purple { background: #c4b5fd; }
.howto-color-swatch.orange { background: #fdba74; }

/* Nav type badges inline */
.howto-nav-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.howto-nav-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.howto-nav-badge.deeper { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.howto-nav-badge.related { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.howto-nav-badge.broader { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.howto-nav-badge.why { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.howto-nav-badge.explore { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }

/* Language list */
.howto-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.howto-lang-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Short viewport (small laptops) - tighten how-to modal chrome */
@media (max-height: 800px) {
    .howto-header {
        padding: 0.625rem 1.25rem;
    }

    .howto-header h2 {
        font-size: 1rem;
    }

    .howto-tab {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
    }

    .howto-panel {
        padding: 1rem;
    }

    .howto-intro {
        margin-bottom: 0.75rem;
        font-size: 0.8125rem;
    }

    .howto-feature {
        padding: 0.75rem;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .howto-feature-icon {
        width: 32px;
        height: 32px;
    }

    .howto-feature-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .howto-modal {
        padding: 0;
        align-items: flex-end;
    }

    .howto-modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        animation: howto-slide-up 0.3s ease;
    }

    @keyframes howto-slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .howto-header {
        border-radius: 16px 16px 0 0;
    }

    .howto-tabs {
        overflow-x: auto;
    }

    .howto-tab {
        padding: 0.75rem 0.875rem;
        font-size: 0.75rem;
    }

    /* Show only icons on very small screens */
    @media (max-width: 480px) {
        .howto-tab span {
            display: none;
        }

        .howto-tab {
            padding: 0.75rem 1rem;
        }
    }

    .howto-body {
        max-height: calc(95vh - 120px);
    }

    .howto-panel {
        padding: var(--spacing-md);
    }

    .howto-feature {
        padding: 0.875rem;
    }

    .howto-feature-icon {
        width: 36px;
        height: 36px;
    }

    .howto-feature-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .howto-header {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .howto-feature {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .howto-feature-icon {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .howto-color-swatch {
    border-color: rgba(255,255,255,0.1);
}

/* Sepia theme adjustments */
[data-theme="sepia"] .howto-header {
    background: var(--color-bg-tertiary);
}

[data-theme="sepia"] .howto-feature {
    background: var(--color-bg-tertiary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .howto-modal-content,
    .howto-panel.active {
        animation: none;
    }

    /* Reduce all transitions and animations */
    .reader-input,
    .reader-input.keyboard-visible,
    .policy-side-nav,
    .next-step-card,
    .suggestion-button,
    .header-btn,
    .action-btn {
        transition-duration: 0.01s !important;
        animation-duration: 0.01s !important;
    }

    /* Disable hover transforms */
    .next-step-card:hover,
    .gf-entry-card:hover,
    .gf-leopard-card:hover {
        transform: none !important;
    }
}


/* ===========================
   MOBILE TOUCH TARGET & ACCESSIBILITY FIXES
   Ensures 44px minimum tap targets per iOS/Android guidelines
   =========================== */

@media (max-width: 768px) {
    /* Touch target minimum enforcement */
    .header-btn,
    .panel-close,
    .modal-close,
    .settings-close,
    .nav-close,
    .collapse-toggle,
    .lightbox-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Action buttons need larger targets */
    .action-btn.action-btn--icon {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    /* Navigation close button */
    .policy-side-nav .nav-close {
        width: 44px;
        height: 44px;
    }
}

/* ===========================
   MOBILE IMAGE OVERFLOW FIX
   Prevents images from overflowing viewport on small screens
   =========================== */

@media (max-width: 640px) {
    /* Stack source layout vertically on small screens */
    .node-source-layout {
        flex-direction: column;
        gap: 0.75rem;
    }

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

    /* Inline images: single column */
    .node-inline-images {
        grid-template-columns: 1fr;
    }

    /* Figure images - remove float, constrain width */
    figure.node-image,
    .conversation-container figure,
    .conversation-node figure,
    #conversationContainer figure {
        float: none !important;
        max-width: 100% !important;
        margin: 0.75rem 0 !important;
    }

    figure.node-image img,
    .conversation-container figure img,
    .conversation-node figure img,
    #conversationContainer figure img,
    figure.chart img,
    .node-image img,
    .node-image.chart img,
    figure.node-image.chart img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Figcaption width */
    figure.node-image figcaption,
    .conversation-container figure figcaption {
        max-width: 100% !important;
    }

    /* Lightbox padding on small screens */
    .image-lightbox {
        padding: 1rem;
    }
}

/* ===========================
   MOBILE INPUT AREA & PADDING FIXES
   Reduces excessive padding, improves keyboard handling
   =========================== */

@media (max-width: 768px) {
    /* Input area safe area support */
    .reader-input {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    /* Extra padding on very small screens where suggestion chips may wrap */
    .reader-main {
        padding-bottom: calc(300px + env(safe-area-inset-bottom, 0));
    }
}

/* Virtual keyboard visible state (set via JS Visual Viewport API) */
.reader-input.keyboard-visible {
    /* Smooth transition when keyboard appears/disappears */
    transition: bottom 0.15s ease-out;
    /* Position is set dynamically via JS */
}

/* Ensure content area accounts for keyboard */
.reader-main:has(~ .reader-input.keyboard-visible) {
    /* Fallback handled via JS scroll positioning */
}


/* ===========================
   Education Mode Styles
   =========================== */

/* Source text block — verbatim primary source passage */
.source-text-block {
    margin: 0.75rem 0 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-tertiary, #fafaf8);
    border-left: 4px solid var(--color-accent, #7c6f64);
    border-radius: 0 8px 8px 0;
    font-family: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
    font-size: 1.02em;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.source-text-content p {
    margin-bottom: 0.75em;
    text-indent: 1.5em;
}

.source-text-content p:first-child {
    text-indent: 0;
}

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

.source-attribution {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #d4c5b9);
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.82em;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Education mode: source text header with attribution at top */
.source-text-header {
    padding: 0 0 10px;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
}

.source-section-label {
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-warm, #8b5a2b);
    margin-bottom: 2px;
}

.source-author-line {
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-text-secondary, #666);
}

/* Comprehension prompts — education mode active guide */
.comprehension-prompts-container {
    margin: 1rem 0;
}

.comprehension-prompt {
    display: flex;
    gap: 0.75rem;
    margin: 0.5rem 0;
    padding: 0.875rem 1rem;
    background: #f0f4f8;
    border-radius: 8px;
    border: 1px solid #d0dce8;
}

.comprehension-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent, #7c6f64);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
}

.comprehension-content {
    flex: 1;
    min-width: 0;
}

.comprehension-question {
    font-weight: 500;
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

.comprehension-hint {
    margin-top: 0.4rem;
}

.comprehension-hint summary {
    cursor: pointer;
    color: var(--color-accent, #7c6f64);
    font-size: 0.85em;
    user-select: none;
}

.comprehension-hint p {
    margin: 0.3rem 0 0;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* Sequential navigation bar — education mode */
.sequential-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--color-bg-secondary, #fff);
    border-top: 1px solid var(--color-border, #d4c5b9);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.sequential-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--color-border, #d4c5b9);
    border-radius: 6px;
    background: var(--color-bg-secondary, #fff);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 0.875em;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sequential-nav-btn:hover:not(:disabled) {
    background: var(--color-bg-tertiary, #fafaf8);
    border-color: var(--color-accent, #7c6f64);
}

.sequential-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.sequential-progress {
    text-align: center;
    font-size: 0.82em;
    color: var(--color-text-secondary);
}

.sequential-progress-label {
    display: block;
    margin-bottom: 2px;
}

.sequential-progress-bar {
    width: 120px;
    height: 4px;
    background: var(--color-border, #d4c5b9);
    border-radius: 2px;
    margin: 4px auto 0;
    overflow: hidden;
}

.sequential-progress-fill {
    height: 100%;
    background: var(--color-accent, #7c6f64);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Dark mode adjustments for education styles */
[data-theme="dark"] .source-text-block {
    background: var(--color-bg-tertiary, #1a1a1a);
    border-left-color: var(--color-accent, #a89984);
}

[data-theme="dark"] .source-text-header {
    border-bottom-color: rgba(200, 170, 130, 0.2);
}

[data-theme="dark"] .source-section-label {
    color: #c8aa82;
}

[data-theme="dark"] .source-author-line {
    color: var(--color-text-secondary, #999);
}

[data-theme="dark"] .comprehension-prompt {
    background: #1a2332;
    border-color: #2a3a4a;
}

[data-theme="dark"] .sequential-nav {
    background: var(--color-bg-secondary, #1e1e1e);
}

/* ===========================
   INTERACTIVE COMPREHENSION CARDS
   =========================== */

/* Collapsed state: clickable */
.comprehension-prompt[data-state="collapsed"] {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.comprehension-prompt[data-state="collapsed"]:hover {
    background: #e4ecf4;
    border-color: #b0c4de;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Expanded state */
.comprehension-prompt.expanded {
    padding: 1rem 1rem 1.25rem;
    border-color: var(--color-accent, #7c6f64);
    background: #f7f9fc;
    position: relative;
}

/* Minimize/close controls */
.comprehension-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}

.comprehension-minimize {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary, #888);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    padding: 0;
}

.comprehension-minimize:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}

/* Answer textarea */
.comprehension-interaction {
    margin-top: 0.75rem;
}

.comprehension-answer {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #c0cede;
    border-radius: 6px;
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.92em;
    line-height: 1.5;
    resize: vertical;
    min-height: 2.5rem;
    background: white;
    color: var(--color-text-primary);
    transition: border-color 0.15s ease;
}

.comprehension-answer:focus {
    outline: none;
    border-color: var(--color-accent, #7c6f64);
    box-shadow: 0 0 0 2px rgba(124, 111, 100, 0.15);
}

.comprehension-answer:disabled {
    background: #f5f5f5;
    color: var(--color-text-secondary);
    cursor: default;
}

/* Submit button */
.comprehension-submit {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-accent, #7c6f64);
    border-radius: 6px;
    background: var(--color-accent, #7c6f64);
    color: white;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.comprehension-submit:hover:not(:disabled) {
    background: #6b5f55;
}

.comprehension-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Feedback area */
.comprehension-feedback {
    margin-top: 0.75rem;
}

.comprehension-feedback-text {
    margin: 0 0 0.4rem;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.comprehension-followup-question {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.92em;
    line-height: 1.5;
}

.comprehension-turn1-feedback,
.comprehension-turn2-feedback {
    padding: 0.75rem;
    border-radius: 6px;
    background: #f0f4f0;
    border-left: 3px solid #7c6f64;
}

.comprehension-turn2-feedback.assessment-green {
    background: #edf7ed;
    border-left-color: #4caf50;
}

.comprehension-turn2-feedback.assessment-yellow {
    background: #fff8e1;
    border-left-color: #ffa726;
}

.comprehension-turn2-feedback.assessment-red {
    background: #fce4e4;
    border-left-color: #ef5350;
}

.comprehension-key-insight {
    margin: 0.5rem 0 0;
    font-size: 0.88em;
    color: var(--color-text-secondary);
}

/* Traffic light icons */
.assessment-icon {
    font-size: 1rem;
    line-height: 1;
}

.assessment-green { color: #4caf50; }
.assessment-yellow { color: #ffa726; }
.assessment-red { color: #ef5350; }

.comprehension-icon.assessed-green {
    background: #4caf50;
}

.comprehension-icon.assessed-yellow {
    background: #ffa726;
}

.comprehension-icon.assessed-red {
    background: #ef5350;
}

/* ===========================
   VOCABULARY HIGHLIGHTS
   =========================== */

.vocab-highlight {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--color-accent, #7c6f64);
    text-underline-offset: 3px;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s ease;
}

.vocab-highlight:hover,
.vocab-highlight:focus {
    background: rgba(124, 111, 100, 0.12);
    outline: none;
}

/* Vocabulary tooltip */
.vocab-tooltip {
    z-index: 1000;
    max-width: 320px;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--color-border, #d4c5b9);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    animation: vocabFadeIn 0.15s ease;
}

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

.vocab-tooltip__term {
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.vocab-tooltip__definition {
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ===========================
   DARK MODE: Interactive education
   =========================== */

[data-theme="dark"] .comprehension-prompt[data-state="collapsed"]:hover {
    background: #223344;
    border-color: #3a5a7a;
}

[data-theme="dark"] .comprehension-prompt.expanded {
    background: #1a2535;
    border-color: var(--color-accent, #a89984);
}

[data-theme="dark"] .comprehension-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .comprehension-answer {
    background: #1a1a1a;
    border-color: #3a4a5a;
    color: var(--color-text-primary);
}

[data-theme="dark"] .comprehension-answer:focus {
    border-color: var(--color-accent, #a89984);
    box-shadow: 0 0 0 2px rgba(168, 153, 132, 0.2);
}

[data-theme="dark"] .comprehension-answer:disabled {
    background: #252525;
}

[data-theme="dark"] .comprehension-turn1-feedback,
[data-theme="dark"] .comprehension-turn2-feedback {
    background: #1a2332;
}

[data-theme="dark"] .comprehension-turn2-feedback.assessment-green {
    background: #1a2e1a;
    border-left-color: #66bb6a;
}

[data-theme="dark"] .comprehension-turn2-feedback.assessment-yellow {
    background: #2e2a1a;
    border-left-color: #ffb74d;
}

[data-theme="dark"] .comprehension-turn2-feedback.assessment-red {
    background: #2e1a1a;
    border-left-color: #ef5350;
}

/* ---- Multi-turn comprehension: conversing state ---- */

.comprehension-prompt[data-state="conversing"] {
    border-color: var(--color-accent, #7c6f64);
    background: #f7f9fc;
}

.comprehension-prompt[data-state="conversing"] .comprehension-icon {
    background: #d7ccc8;
    color: #5d4037;
}

/* Turn feedback blocks (appended, not replaced) */
.comprehension-turn-feedback {
    padding: 0.75rem;
    border-radius: 6px;
    background: #f0f4f0;
    border-left: 3px solid #7c6f64;
    margin-top: 0.75rem;
}

.comprehension-turn-feedback + .comprehension-turn-feedback {
    margin-top: 0.5rem;
}

.comprehension-turn-feedback .comprehension-followup-question {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.92em;
    line-height: 1.4;
    color: #3e2723;
}

.comprehension-turn-feedback .comprehension-answer {
    margin-top: 0.5rem;
}

/* Action button row: Submit + End Conversation side by side */
.comprehension-action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.comprehension-action-buttons .comprehension-submit {
    margin-top: 0;
}

/* End Conversation button: secondary/ghost style */
.comprehension-end-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border: 1px solid #c0cede;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary, #666);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.comprehension-end-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: var(--color-accent, #7c6f64);
    color: var(--color-text-primary, #333);
}

.comprehension-end-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Final turn merged button */
.comprehension-end-btn--final {
    border-color: var(--color-accent, #7c6f64);
    background: var(--color-accent, #7c6f64);
    color: white;
    font-weight: 600;
}

.comprehension-end-btn--final:hover:not(:disabled) {
    background: #6b5f55;
    border-color: #6b5f55;
    color: white;
}

/* Final assessment block (always appended last) */
.comprehension-final-assessment {
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 0.75rem;
    border-left: 3px solid #7c6f64;
}

.comprehension-final-assessment.assessment-green {
    background: #edf7ed;
    border-left-color: #4caf50;
}

.comprehension-final-assessment.assessment-yellow {
    background: #fff8e1;
    border-left-color: #ffa726;
}

.comprehension-final-assessment.assessment-red {
    background: #fce4e4;
    border-left-color: #ef5350;
}

/* Dark mode: multi-turn comprehension */

[data-theme="dark"] .comprehension-prompt[data-state="conversing"] {
    background: #1a2535;
    border-color: var(--color-accent, #a89984);
}

[data-theme="dark"] .comprehension-prompt[data-state="conversing"] .comprehension-icon {
    background: #3e2723;
    color: #d7ccc8;
}

[data-theme="dark"] .comprehension-turn-feedback {
    background: #1a2332;
    border-left-color: #a89984;
}

[data-theme="dark"] .comprehension-turn-feedback .comprehension-followup-question {
    color: #d7ccc8;
}

[data-theme="dark"] .comprehension-end-btn {
    border-color: #3a4a5a;
    color: var(--color-text-secondary, #999);
}

[data-theme="dark"] .comprehension-end-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent, #a89984);
    color: #e0e0e0;
}

[data-theme="dark"] .comprehension-end-btn--final {
    background: var(--color-accent, #a89984);
    border-color: var(--color-accent, #a89984);
    color: #1a1a1a;
}

[data-theme="dark"] .comprehension-end-btn--final:hover:not(:disabled) {
    background: #8d7b6e;
    border-color: #8d7b6e;
}

[data-theme="dark"] .comprehension-final-assessment.assessment-green {
    background: #1a2e1a;
    border-left-color: #66bb6a;
}

[data-theme="dark"] .comprehension-final-assessment.assessment-yellow {
    background: #2e2a1a;
    border-left-color: #ffb74d;
}

[data-theme="dark"] .comprehension-final-assessment.assessment-red {
    background: #2e1a1a;
    border-left-color: #ef5350;
}

[data-theme="dark"] .vocab-highlight:hover,
[data-theme="dark"] .vocab-highlight:focus {
    background: rgba(168, 153, 132, 0.15);
}

[data-theme="dark"] .vocab-tooltip {
    background: #252525;
    border-color: #3a3a3a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}