/**
 * PolicyBox Reader styles — part 7/7: Mobile touch/overflow/input fixes, education mode.
 * Split from reader.css (2026-06). Load order matters (cascade);
 * link tags in layouts/policy_reader.html preserve the original order.
 */

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