/* study-audio.css -- Podcast player, audio customize modal, TTS controls, lecture recorder */

        /* ── Lecture Recorder Overlay ── */
        .lecture-recorder { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 24px; }

        /* The recorder is wrapped in an .lr-sheet "card", base CSS used to
           live in study.css which is no longer loaded by study.html, so the
           sheet was shapeless and text sat at the top-left corner with no
           padding. Re-add the missing base rules here. */
        .lr-sheet { width: min(92vw, 640px); max-width: 100%; padding: 24px 28px 32px; background: #171717; border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; box-shadow: 0 32px 80px rgba(0,0,0,0.42); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
        .lr-sheet-handle { width: 48px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.18); margin: 0 auto 18px; }
        .lr-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; font-size: 15px; font-weight: 800; color: #ff6a22; letter-spacing: 0.02em; }
        .lr-brand-icon { width: 26px; height: 26px; border-radius: 8px; }
        .lr-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 12px 4px 18px; }
        .lr-waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; width: 100%; margin: 8px 0 16px; }
        .lr-waveform-dot { width: 3px; border-radius: 2px; background: rgba(255,255,255,0.4); transition: height .12s ease; }
        .lr-link-cancel { background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 14px; margin-top: 18px; padding: 6px 14px; font-family: inherit; }
        .lr-link-cancel:hover { color: #fff; }

        .lr-header { text-align: center; margin-bottom: 24px; }
        .lr-indicator { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; }
        .lr-dot { width: 14px; height: 14px; border-radius: 50%; background: #ef4444; animation: lr-pulse 1.5s ease-in-out infinite; }
        .lr-dot.paused { background: #888; animation: none; }
        @keyframes lr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
        .lr-status { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
        .lr-timer { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
        .lr-captions-wrap { width: min(90vw, 640px); height: 260px; overflow-y: auto; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; margin-bottom: 28px; scroll-behavior: smooth; }
        .lr-captions-wrap p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); }
        .lr-captions-wrap .lr-interim { color: rgba(255,255,255,0.45); font-style: italic; }
        .lr-captions-wrap .lr-placeholder { color: rgba(255,255,255,0.3); font-style: italic; text-align: center; margin-top: 80px; }
        .lr-controls { display: flex; gap: 16px; }
        .lr-btn { padding: 12px 32px; border-radius: 10px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s; }
        .lr-btn-pause { background: rgba(255,255,255,0.12); color: #fff; }
        .lr-btn-pause:hover { background: rgba(255,255,255,0.2); }
        .lr-btn-stop { background: #ef4444; color: #fff; }
        .lr-btn-stop:hover { background: #dc2626; }
        .lr-btn-cancel { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 20px; font-family: inherit; transition: all .15s; }
        .lr-btn-cancel:hover { background: rgba(255,255,255,0.2); }
        .lr-processing { text-align: center; }
        .lr-processing .lr-spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.15); border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .lr-processing p { font-size: 16px; color: rgba(255,255,255,0.7); }

        /* Light theme overrides for lecture recorder */
        [data-theme="light"] .lecture-recorder { background: rgba(0,0,0,0.45); }
        [data-theme="light"] .lr-sheet { background: #faf7f3 !important; border-color: rgba(0,0,0,0.08) !important; }
        [data-theme="light"] .lr-sheet-handle { background: rgba(0,0,0,0.15); }
        [data-theme="light"] .lr-brand { color: #1a1a1a; }
        [data-theme="light"] .lr-status { color: #1a1a1a; }
        [data-theme="light"] .lr-timer { color: #1a1a1a; }
        [data-theme="light"] .lr-captions-wrap { background: rgba(0,0,0,0.04); }
        [data-theme="light"] .lr-captions-wrap p { color: rgba(0,0,0,0.8); }
        [data-theme="light"] .lr-captions-wrap .lr-interim { color: rgba(0,0,0,0.4); }
        [data-theme="light"] .lr-captions-wrap .lr-placeholder { color: rgba(0,0,0,0.3); }
        [data-theme="light"] .lr-btn-pause { background: rgba(0,0,0,0.08); color: #1a1a1a; }
        [data-theme="light"] .lr-btn-pause:hover { background: rgba(0,0,0,0.12); }
        [data-theme="light"] .lr-link-cancel { color: rgba(0,0,0,0.5); }
        [data-theme="light"] .lr-waveform-dot { background: rgba(0,0,0,0.2) !important; }
        [data-theme="light"] .lr-processing p { color: rgba(0,0,0,0.6); }
        [data-theme="light"] .lr-processing .lr-spinner { border-color: rgba(0,0,0,0.1); border-top-color: #3b82f6; }

        /* Mobile: full-screen "Live Recording" canvas, LIGHT cream theme
           matching the rest of the Khio mobile app. Dark text on cream
           background with orange accents, so contrast is high regardless
           of iOS WKWebView's dark-mode quirks. Header with back arrow +
           title, big centered waveform, large timer, pause + stop
           side-by-side, "Generate Notes" CTA at the bottom. Replaces the
           bottom-sheet look on phones; desktop keeps its dark card. */
        .lr-mobile-back, .lr-mobile-title, .lr-mobile-cta { display: none; }
        @media (max-width: 760px) {
            .lecture-recorder,
            [data-theme="light"] .lecture-recorder {
                justify-content: stretch !important;
                align-items: stretch !important;
                padding: 0 !important;
                background-color: #faf7f3 !important;
                background-image: none !important;
                color: #1a1a1a !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .lr-sheet {
                width: 100% !important;
                height: 100% !important;
                min-height: 100% !important;
                max-width: none !important;
                border-radius: 0 !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: calc(env(safe-area-inset-top, 0px) + 56px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                position: relative !important;
            }
            /* Header: back arrow + title */
            .lr-mobile-back {
                display: flex !important;
                position: absolute;
                top: calc(env(safe-area-inset-top, 0px) + 14px);
                left: 14px;
                width: 36px; height: 36px;
                border-radius: 10px;
                border: 1px solid rgba(0,0,0,0.08);
                background: rgba(0,0,0,0.04);
                color: #1a1a1a;
                align-items: center; justify-content: center;
                cursor: pointer; z-index: 2;
            }
            .lr-mobile-back i { width: 18px; height: 18px; }
            .lr-mobile-title {
                display: block !important;
                position: absolute;
                top: calc(env(safe-area-inset-top, 0px) + 18px);
                left: 50%; transform: translateX(-50%);
                font-size: 16px; font-weight: 700;
                color: #1a1a1a !important;
                letter-spacing: 0.01em;
            }
            /* Hide pieces that don't belong in the new design.
               NOTE: pause button is intentionally NOT hidden, James asked
               for it back. */
            .lr-sheet-handle, .lr-brand, .lr-link-cancel,
            .lr-btn-cancel { display: none !important; }
            /* Live captions panel, sits between waveform and timer so the
               user can confirm the transcript is being captured live. */
            .lr-captions-wrap {
                width: 100% !important;
                max-width: 100% !important;
                height: 140px !important;
                margin-top: 16px !important;
                margin-bottom: 0 !important;
                background: #ffffff !important;
                border: 1px solid rgba(0,0,0,0.08) !important;
                border-radius: 14px !important;
                padding: 14px 16px !important;
                box-sizing: border-box !important;
                order: 2;
            }
            .lr-captions-wrap p { color: #1a1a1a !important; font-size: 14px !important; line-height: 1.5 !important; }
            .lr-captions-wrap .lr-interim { color: rgba(26,26,26,0.55) !important; font-style: italic; }
            .lr-captions-wrap .lr-placeholder { color: rgba(26,26,26,0.55) !important; font-style: normal !important; text-align: center; margin-top: 38px !important; font-weight: 500 !important; }
            /* Waveform: large, centered, warm orange glow */
            .lr-waveform {
                width: 100%;
                height: 100px !important;
                margin-top: 16px;
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 4px !important;
                padding: 0 8px;
                order: 1;
            }
            .lr-waveform-dot {
                width: 4px !important;
                background: linear-gradient(180deg, #ffb079, #e8853a) !important;
                box-shadow: 0 0 12px rgba(232, 133, 58, 0.35);
                transition: height .12s ease;
            }
            /* Timer block: large monospace */
            .lr-meta {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 6px !important;
                margin: 16px 0 24px !important;
                width: auto !important;
                order: 3;
            }
            .lr-indicator { gap: 6px !important; }
            .lr-status { font-size: 11px !important; color: rgba(26,26,26,0.65) !important; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700 !important; }
            .lr-dot { width: 8px !important; height: 8px !important; }
            .lr-timer { font-size: 42px !important; font-weight: 700 !important; color: #1a1a1a !important; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
            /* Big circular stop button (kept .lr-btn-stop for the click handler) */
            .lr-controls { display: flex !important; justify-content: center !important; align-items: center !important; gap: 18px !important; margin-bottom: 24px !important; width: auto !important; order: 4; }
            .lr-controls .lr-btn-stop {
                width: 72px !important; height: 72px !important;
                border-radius: 50% !important;
                background: linear-gradient(180deg, #ff8a3a, #e8853a) !important;
                box-shadow: 0 8px 24px rgba(232, 133, 58, 0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
                padding: 0 !important;
                display: flex; align-items: center; justify-content: center;
                color: #fff !important;
                border: none !important;
            }
            .lr-controls .lr-btn-stop i { width: 26px !important; height: 26px !important; }
            .lr-controls .lr-btn-stop:active { transform: scale(0.96); }
            /* Pause / resume button, neutral light circle next to the orange
               stop button. Same shape language, lighter fill so the stop
               button stays the dominant action. */
            .lr-controls .lr-btn-pause {
                display: flex !important;
                width: 56px !important; height: 56px !important;
                border-radius: 50% !important;
                background: #ffffff !important;
                border: 1px solid rgba(0,0,0,0.10) !important;
                color: #1a1a1a !important;
                padding: 0 !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
                align-items: center; justify-content: center;
            }
            .lr-controls .lr-btn-pause:hover { background: #f3f3f0 !important; }
            .lr-controls .lr-btn-pause:active { transform: scale(0.96); }
            .lr-controls .lr-btn-pause i { width: 22px !important; height: 22px !important; }
            /* "Generate Notes" CTA at the bottom, Khio orange */
            .lr-mobile-cta {
                display: block !important;
                width: 100%;
                max-width: 360px;
                padding: 16px 24px;
                border-radius: 16px;
                border: none;
                background: linear-gradient(135deg, #ff8a3a, #e8853a);
                color: #fff;
                font-size: 16px; font-weight: 700;
                font-family: inherit;
                cursor: pointer;
                box-shadow: 0 6px 24px rgba(232, 133, 58, 0.4);
                margin-top: auto;
                order: 5;
            }
            .lr-mobile-cta:active { transform: scale(0.98); }
            /* Processing UI, match the same cream + dark text scheme */
            .lr-processing { color: #1a1a1a !important; }
            .lr-processing .lr-spinner { border-color: rgba(0,0,0,0.10) !important; border-top-color: #e8853a !important; }
            .lr-processing-title { color: #1a1a1a !important; font-weight: 700 !important; }
            .lr-processing-sub { font-size: 13px; margin-top: 8px; color: rgba(26,26,26,0.55) !important; }
        }

/* --- Audio Overview Customize Modal --- */
        /* Audio Overview Customize Modal */
        .audio-customize-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 24px; }
        .audio-customize-inner { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 16px; max-width: 680px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
        .audio-customize-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--study-border); }
        .audio-customize-header i { width: 20px; height: 20px; color: var(--study-accent); }
        .audio-customize-title { font-size: 16px; font-weight: 700; color: var(--study-text); flex: 1; }
        .audio-customize-close { width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .audio-customize-close:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .audio-customize-body { flex: 1; overflow-y: auto; padding: 20px; }
        .audio-customize-section { margin-bottom: 20px; }
        .audio-customize-label { font-size: 13px; font-weight: 700; color: var(--study-text); margin-bottom: 10px; }
        .audio-format-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .audio-format-card { padding: 12px; border: 1.5px solid var(--study-border, #2a2a3a); border-radius: 10px; background: var(--study-bg-secondary); cursor: pointer; transition: all .15s; position: relative; }
        .audio-format-card:hover { border-color: var(--study-accent); }
        .audio-format-card.active { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .audio-format-card.active::after { content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; background: var(--study-accent); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; }
        .audio-format-name { font-size: 13px; font-weight: 700; color: var(--study-text); margin-bottom: 4px; }
        .audio-format-desc { font-size: 11px; line-height: 1.4; color: var(--study-text-tertiary); }
        .audio-length-btns { display: inline-flex; border: 1px solid var(--study-border); border-radius: 8px; overflow: hidden; }
        .audio-length-btn { padding: 8px 16px; border: none; background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 4px; }
        .audio-length-btn:not(:last-child) { border-right: 1px solid var(--study-border); }
        .audio-length-btn.active { background: var(--study-bg-secondary); color: var(--study-text); }
        .audio-length-btn.active::before { content: ''; display: inline-block; width: 14px; height: 14px; background: var(--study-accent); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center; }
        .audio-focus-input { width: 100%; min-height: 80px; padding: 12px; border: 1px solid var(--study-border); border-radius: 10px; background: var(--study-bg-secondary); color: var(--study-text); font-size: 13px; font-family: inherit; resize: vertical; outline: none; }
        .audio-focus-input::placeholder { color: var(--study-text-tertiary); }
        .audio-focus-input:focus { border-color: var(--study-accent); }
        .audio-quick-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
        .audio-quick-tag { padding: 6px 12px; border: 1px solid var(--study-accent); border-radius: 20px; background: transparent; color: var(--study-accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
        .audio-quick-tag:hover { background: var(--study-accent-dim); }
        .audio-customize-footer { padding: 14px 20px; border-top: 1px solid var(--study-border); display: flex; justify-content: space-between; align-items: center; }
        .audio-preview-btn { padding: 8px 16px; border: 1px solid var(--study-border); border-radius: 8px; background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; }
        .audio-preview-btn:hover { border-color: var(--study-accent); color: var(--study-text); }
        .audio-preview-btn:disabled { opacity: .5; cursor: not-allowed; }
        .audio-preview-btn i { width: 14px; height: 14px; }
        .audio-generate-btn { padding: 10px 24px; border: none; border-radius: 10px; background: var(--study-accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; position: relative; overflow: hidden; isolation: isolate; box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(0,0,0,0.2)); }
        .audio-generate-btn::after { content: ''; position: absolute; inset: 0; background: url('/images/noise.png') repeat; background-size: 128px 128px; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: overlay; opacity: 0.6; }
        .audio-generate-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--study-accent-dim, rgba(0,0,0,0.25)); }
        .audio-generate-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
        .audio-voice-row { display: flex; gap: 24px; flex-wrap: wrap; }
        .audio-voice-group { flex: 1; min-width: 180px; }
        .audio-voice-sublabel { font-size: 11px; font-weight: 600; color: var(--study-text-tertiary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
        .audio-voice-btns { display: inline-flex; border: 1px solid var(--study-border); border-radius: 8px; overflow: hidden; }
        .audio-voice-btn { padding: 8px 14px; border: none; background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
        .audio-voice-btn:not(:last-child) { border-right: 1px solid var(--study-border); }
        .audio-voice-btn.active { background: var(--study-bg-secondary); color: var(--study-text); }
        .audio-voice-btn.active::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; background: var(--study-accent); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center; }
        @media (max-width: 600px) { .audio-format-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Mermaid diagrams in chat, audio recap --- */
        /* ── Audio Recap ── */
        /* Mermaid diagrams in chat */
        .mermaid-diagram { background: var(--study-card-bg); border: 1px solid var(--study-border); border-radius: 12px; padding: 16px; margin: 12px 0; overflow-x: auto; text-align: center; cursor: pointer; position: relative; transition: border-color 0.2s, box-shadow 0.2s; }
        .mermaid-diagram:hover { border-color: var(--study-accent); box-shadow: 0 0 0 1px var(--study-accent); }
        .mermaid-diagram svg { max-width: 100%; height: auto; }
        .mermaid-diagram svg text, .mermaid-diagram svg .nodeLabel, .mermaid-diagram svg .edgeLabel, .mermaid-diagram svg .label { fill: #fff !important; color: #fff !important; }
        .mermaid-diagram svg .node rect, .mermaid-diagram svg .node polygon, .mermaid-diagram svg .node circle { stroke: rgba(255,255,255,0.3) !important; }
        .mermaid-modal svg text, .mermaid-modal svg .nodeLabel, .mermaid-modal svg .edgeLabel, .mermaid-modal svg .label { fill: #fff !important; color: #fff !important; }
        .light-mode .mermaid-diagram svg text, .light-mode .mermaid-diagram svg .nodeLabel, .light-mode .mermaid-diagram svg .edgeLabel, .light-mode .mermaid-diagram svg .label { fill: #000 !important; color: #000 !important; }
        .light-mode .mermaid-diagram svg .node rect, .light-mode .mermaid-diagram svg .node polygon, .light-mode .mermaid-diagram svg .node circle { stroke: rgba(0,0,0,0.2) !important; }
        .light-mode .mermaid-modal svg text, .light-mode .mermaid-modal svg .nodeLabel, .light-mode .mermaid-modal svg .edgeLabel, .light-mode .mermaid-modal svg .label { fill: #000 !important; color: #000 !important; }
        .mermaid-diagram-label { font-size: 11px; color: var(--study-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .mermaid-diagram-label::after { content: 'Click to expand'; font-size: 10px; opacity: 0.6; }
        .light-mode .mermaid-diagram { background: #f8f9fa; border-color: #e0e0e0; }
        /* Mermaid fullscreen modal */
        .mermaid-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s; }
        .mermaid-modal { background: var(--study-card-bg); border-radius: 16px; padding: 24px; max-width: 95vw; max-height: 90vh; overflow: auto; position: relative; min-width: 300px; }
        .mermaid-modal svg { max-width: 100%; height: auto; min-height: 300px; }
        .mermaid-modal-close { position: absolute; top: 12px; right: 12px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--study-text); font-size: 18px; z-index: 1; }
        .mermaid-modal-close:hover { background: var(--study-accent); color: #fff; }
        .mermaid-modal-hint { text-align: center; font-size: 11px; color: var(--study-text-tertiary); margin-top: 12px; }
        .light-mode .mermaid-modal { background: #fff; }

        .audio-recap-wrap {
            display: flex; flex-direction: column; align-items: center;
            padding: 40px 24px; gap: 20px; text-align: center;
        }
        .audio-recap-player {
            width: 100%; max-width: 520px; padding: 28px;
            background: var(--study-bg-secondary); border: 1px solid var(--study-border);
            border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        .audio-recap-cover {
            width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 16px;
            background: linear-gradient(135deg, var(--study-accent), color-mix(in srgb, var(--study-accent) 70%, #a855f7));
            display: flex; align-items: center; justify-content: center;
        }
        .audio-recap-cover i { width: 32px; height: 32px; color: #fff; }
        .audio-recap-title {
            font-size: 18px; font-weight: 800; color: var(--study-text); margin-bottom: 4px;
        }
        .audio-recap-sub {
            font-size: 13px; color: var(--study-text-tertiary); margin-bottom: 20px;
        }
        .audio-recap-progress {
            width: 100%; height: 4px; background: var(--study-bg-tertiary);
            border-radius: 4px; margin-bottom: 8px; cursor: pointer; position: relative;
        }
        .audio-recap-progress-fill {
            height: 100%; background: var(--study-accent); border-radius: 4px; width: 0%;
            transition: width .1s linear;
        }
        .audio-recap-time {
            display: flex; justify-content: space-between;
            font-size: 11px; color: var(--study-text-tertiary); margin-bottom: 20px;
        }
        .audio-recap-controls {
            display: flex; align-items: center; justify-content: center; gap: 16px;
        }
        .audio-ctrl-btn {
            width: 44px; height: 44px; border-radius: 50%;
            border: 2px solid var(--study-border); background: var(--study-bg-tertiary);
            color: var(--study-text); cursor: pointer; transition: all .15s;
            display: flex; align-items: center; justify-content: center;
        }
        .audio-ctrl-btn:hover { border-color: var(--study-accent); color: var(--study-accent); }
        .audio-ctrl-btn.play-btn {
            width: 56px; height: 56px; background: var(--study-accent);
            border-color: var(--study-accent); color: #000;
        }
        .audio-ctrl-btn.play-btn:hover { opacity: .9; }
        .audio-ctrl-btn i { width: 20px; height: 20px; }
        .audio-recap-generate {
            padding: 12px 28px; border-radius: 12px;
            background: var(--study-accent); color: var(--bg-base, #000); border: none;
            font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
            transition: all .15s; box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(0,0,0,0.2));
            display: inline-flex; align-items: center; gap: 8px;
            position: relative; overflow: hidden; isolation: isolate;
        }
        .audio-recap-generate::after {
            content: ''; position: absolute; inset: 0; background: url('/images/noise.png') repeat;
            background-size: 128px 128px; border-radius: inherit; pointer-events: none; z-index: 1;
            mix-blend-mode: overlay; opacity: 0.6;
        }
        .audio-recap-generate:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--study-accent-dim, rgba(0,0,0,0.25)); }
        .audio-recap-generate:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
        .audio-recap-generate i { width: 16px; height: 16px; }

        /* ── Podcast Raise Hand / Ask ── */
        .podcast-raise-hand {
            display: flex; align-items: center; gap: 14px;
            width: 100%; margin-top: 14px;
            padding: 14px 18px; border-radius: 16px;
            border: 1.5px solid var(--study-accent);
            background: linear-gradient(135deg, var(--study-accent-dim, rgba(232,133,58,0.12)) 0%, rgba(232,133,58,0.04) 100%);
            color: var(--study-text); cursor: pointer; font-family: inherit;
            transition: all .18s ease; text-align: left;
        }
        .podcast-raise-hand:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(232,133,58,0.18);
            border-color: var(--study-accent);
        }
        .podcast-raise-hand.active {
            background: var(--study-accent);
            border-color: var(--study-accent);
        }
        .podcast-raise-hand.active .podcast-raise-hand-title,
        .podcast-raise-hand.active .podcast-raise-hand-sub { color: #fff; }
        .podcast-raise-hand-emoji {
            font-size: 28px; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; border-radius: 50%;
            background: var(--bg-card, #fff);
            border: 1.5px solid var(--study-accent);
            flex-shrink: 0;
            animation: raiseHandWave 2.6s ease-in-out infinite;
            transform-origin: 70% 85%;
        }
        @keyframes raiseHandWave {
            0%, 60%, 100% { transform: rotate(0deg); }
            70% { transform: rotate(-14deg); }
            80% { transform: rotate(10deg); }
            90% { transform: rotate(-6deg); }
        }
        .podcast-raise-hand-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .podcast-raise-hand-title { font-size: 15px; font-weight: 700; color: var(--study-text); }
        .podcast-raise-hand-sub { font-size: 12px; color: var(--study-text-secondary); font-weight: 500; }

        /* Dim the player when question panel is open */
        .audio-recap-player.podcast-ask-open .audio-recap-controls,
        .audio-recap-player.podcast-ask-open .audio-recap-progress,
        .audio-recap-player.podcast-ask-open .audio-recap-time { opacity: 0.45; pointer-events: none; }

        .podcast-ask-panel {
            margin-top: 14px; padding: 16px;
            background: var(--study-card-bg, #f8f9fa);
            border: 1.5px solid var(--study-accent);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            animation: podcastAskSlide .22s ease;
        }
        @keyframes podcastAskSlide {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .podcast-ask-header {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px; margin-bottom: 12px;
        }
        .podcast-ask-header-left { min-width: 0; }
        .podcast-ask-indicator {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 13px; font-weight: 700; color: var(--study-accent);
        }
        .podcast-ask-dot {
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--study-accent);
            box-shadow: 0 0 0 0 var(--study-accent);
            animation: podcastAskPulse 1.4s ease-in-out infinite;
        }
        @keyframes podcastAskPulse {
            0% { box-shadow: 0 0 0 0 rgba(232,133,58,0.55); }
            70% { box-shadow: 0 0 0 10px rgba(232,133,58,0); }
            100% { box-shadow: 0 0 0 0 rgba(232,133,58,0); }
        }
        .podcast-ask-hint {
            font-size: 12px; color: var(--study-text-tertiary);
            margin-top: 4px; font-weight: 500;
        }
        .podcast-ask-close {
            width: 30px; height: 30px; border-radius: 50%;
            border: 1px solid var(--study-border);
            background: transparent; color: var(--study-text-secondary);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: all .15s;
        }
        .podcast-ask-close:hover { background: var(--study-border); color: var(--study-text); }
        .podcast-ask-close i { width: 16px; height: 16px; }
        .podcast-ask-transcript {
            min-height: 52px;
            padding: 14px 16px;
            border-radius: 12px;
            background: var(--bg-card, #fff);
            border: 1.5px solid var(--study-border);
            font-size: 15px; line-height: 1.5;
            color: var(--study-text);
            font-family: inherit;
            transition: border-color .18s ease;
        }
        .podcast-ask-panel.mic-live .podcast-ask-transcript { border-color: var(--study-accent); }
        .podcast-ask-transcript:empty::before {
            content: '…'; color: var(--study-text-tertiary); font-weight: 600;
        }
        /* Type-mode fallback (iOS WKWebView < 16.4, mic blocked) */
        .podcast-ask-panel.type-mode .podcast-ask-transcript { display: none; }
        .podcast-ask-panel.type-mode .podcast-ask-wave { display: none !important; }
        .podcast-ask-type-row input:focus { border-color: var(--study-accent) !important; }

        /* Animated waveform, visible during listening */
        .podcast-ask-wave {
            display: flex; align-items: center; justify-content: center;
            gap: 5px; margin-top: 14px; height: 36px;
        }
        .podcast-ask-wave span {
            display: inline-block;
            width: 4px; height: 10px; border-radius: 3px;
            background: var(--study-accent);
            opacity: 0.35;
            transition: opacity .2s ease;
        }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span {
            animation: podcastAskWaveBar 1s ease-in-out infinite;
            opacity: 1;
        }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(1) { animation-delay: 0s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(2) { animation-delay: .1s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(3) { animation-delay: .2s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(4) { animation-delay: .3s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(5) { animation-delay: .2s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(6) { animation-delay: .1s; }
        .podcast-ask-panel.state-listening.mic-live .podcast-ask-wave span:nth-child(7) { animation-delay: 0s; }
        @keyframes podcastAskWaveBar {
            0%, 100% { height: 10px; opacity: 0.6; }
            50% { height: 28px; opacity: 1; }
        }
        /* Thinking / answering states, pulsing dots, no waveform */
        .podcast-ask-panel.state-thinking .podcast-ask-wave span,
        .podcast-ask-panel.state-answering .podcast-ask-wave span {
            animation: podcastAskDotPulse 1.2s ease-in-out infinite;
            opacity: 0.4;
        }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(2),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(2) { animation-delay: .15s; }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(3),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(3) { animation-delay: .3s; }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(4),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(4) { animation-delay: .45s; }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(5),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(5) { animation-delay: .6s; }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(6),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(6) { animation-delay: .75s; }
        .podcast-ask-panel.state-thinking .podcast-ask-wave span:nth-child(7),
        .podcast-ask-panel.state-answering .podcast-ask-wave span:nth-child(7) { animation-delay: .9s; }
        @keyframes podcastAskDotPulse {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 1; }
        }
        .podcast-ask-status {
            margin-top: 10px; font-size: 13px; font-weight: 600;
            color: var(--study-text-secondary); display: flex; align-items: center; gap: 8px;
        }