/* study-klm.css -- KLM notebook, source panel, studio grid, KLM picker, KLM light mode */

        /* ── Khio LM View ── */
        /* Keep sidebar visible in KLM picker mode, hide only when notebook is open */
        .study-layout.klm-active .study-sidebar { display: flex !important; }
        .study-layout.klm-active .study-main { width: calc(100% - var(--sidebar-w)); }
        .study-layout.klm-active.klm-notebook-open .study-sidebar { display: none !important; }
        .study-layout.klm-active.klm-notebook-open .study-main { width: 100%; }
        /* Focus mode: always hide sidebar */
        .study-layout.focus-active .study-sidebar { display: none !important; }
        .study-layout.focus-active .study-main { width: 100%; }

        #view-solve { overflow: hidden; }
        .klm-layout { display: flex; height: 100%; overflow: hidden; background: var(--study-bg-tertiary); gap: 8px; padding: 8px; }
        /* Compact top tabs, hidden at full width, shown in narrow/split-screen range */
        .klm-compact-tabs { display: none; }
        /* Mobile FAB, hidden by default at desktop widths, shown only inside
           the mobile @media rule */
        .klm-mobile-fab { display: none; }

        /* ── Compact tabbed layout (split-screen / tablet width) ── */
        /* When the viewport is wide enough for desktop shell but narrow enough
           that the 3-column layout can't breathe, collapse to a NotebookLM-style
           top-tabbed single-panel view. Only applies when a notebook is open.
           James 2026-05-18: rolled this back to its original 1200px upper
           bound. A short-lived experiment bumped it to 1600 to "fix laptop
           notebooks" but the compact panels were rendering blank in the
           1200-1600 range (rail still mounted, panel flex/height resolved
           to zero, couldn't repro reliably). The actual laptop fix is to
           keep the 3-col layout and just shrink the side panels to 280px
           in the 1201-1600 range, see the laptop-panel rule further down. */
        @media (min-width: 761px) and (max-width: 1200px) {
            .study-layout.klm-notebook-open .klm-layout {
                flex-direction: column;
                gap: 0;
                padding: 0;
                overflow: hidden;
            }
            /* Top tab bar, tabs evenly distributed across the full width,
               matching NotebookLM compressed-view reference */
            .study-layout.klm-notebook-open .klm-layout .klm-compact-tabs {
                display: flex;
                flex-shrink: 0;
                align-items: stretch;
                gap: 0;
                width: 100%;
                background: var(--study-bg);
                border-bottom: 1px solid var(--study-border);
                padding: 0;
            }
            .study-layout.klm-notebook-open .klm-layout .klm-compact-tab {
                flex: 1 1 0;
                min-width: 0;
                padding: 16px 12px;
                border: none;
                background: none;
                color: var(--study-text-tertiary);
                font-family: inherit;
                font-size: 14px;
                font-weight: 500;
                text-align: center;
                cursor: pointer;
                position: relative;
                transition: color 0.15s;
            }
            .study-layout.klm-notebook-open .klm-layout .klm-compact-tab:hover {
                color: var(--study-text-secondary);
            }
            .study-layout.klm-notebook-open .klm-layout .klm-compact-tab.active {
                color: var(--study-text);
                font-weight: 600;
            }
            .study-layout.klm-notebook-open .klm-layout .klm-compact-tab.active::after {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 30%;
                right: 30%;
                height: 2px;
                background: var(--study-accent, #C1724E);
                border-radius: 2px 2px 0 0;
            }
            /* Hide resize handles in compact mode */
            .study-layout.klm-notebook-open .klm-layout .klm-resize-handle { display: none !important; }
            /* All three panels become full-width, full-height below the tab bar */
            .study-layout.klm-notebook-open .klm-layout .klm-sources,
            .study-layout.klm-notebook-open .klm-layout .klm-center,
            .study-layout.klm-notebook-open .klm-layout .klm-studio {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                flex: 1 1 auto !important;
                border-radius: 0 !important;
                border: none !important;
                margin: 0 !important;
                display: none;
            }
            /* Show only the panel matching the active compact tab */
            .study-layout.klm-notebook-open .klm-layout[data-compact-tab="sources"] .klm-sources { display: flex !important; flex-direction: column !important; }
            .study-layout.klm-notebook-open .klm-layout[data-compact-tab="chat"] .klm-center { display: flex !important; flex-direction: column !important; }
            .study-layout.klm-notebook-open .klm-layout[data-compact-tab="studio"] .klm-studio { display: flex !important; flex-direction: column !important; }
            /* Expanded panels at full width, hide the collapsed strip version */
            .study-layout.klm-notebook-open .klm-layout .klm-collapsed-strip { display: none !important; }
            /* The sources panel's collapse button is meaningless here, hide it */
            .study-layout.klm-notebook-open .klm-layout .klm-sources .klm-collapse-btn,
            .study-layout.klm-notebook-open .klm-layout .klm-studio .klm-collapse-btn { display: none !important; }
            /* Hide the two center-topbar buttons (toggle sources / toggle studio) in compact mode, tabs do that job now */
            .study-layout.klm-notebook-open .klm-layout #klmSourcesOpenBtn,
            .study-layout.klm-notebook-open .klm-layout #klmStudioOpenBtn { display: none !important; }
        }
        /* Resize handles between panels */
        .klm-resize-handle { width: 16px; cursor: col-resize; flex-shrink: 0; position: relative; margin: 0 -8px; z-index: 2; background: transparent; }
        .klm-resize-handle:hover, .klm-resize-handle.active { background: rgba(255,255,255,.06); }
        .klm-resize-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 3px; height: 32px; border-radius: 2px; background: rgba(255,255,255,.15); opacity: 0; transition: opacity .2s; }
        .klm-resize-handle:hover::after, .klm-resize-handle.active::after { opacity: 1; }
        /* Width readout tooltip */
        .klm-resize-readout { display: none; }

        /* Hide "Take photo" on desktop, camera capture is mobile-only */
        @media (min-width: 761px) {
            body:not(.mobile-app):not(.capacitor-app) .klm-source-type-btn--mobile-only { display: none !important; }
        }

        /* Left: Sources Panel, default 465px per James 2026-05-10
           (was 320). Scales down on narrower viewports via the
           media queries near the end of this file so a 1280px
           laptop doesn't get squeezed. */
        .klm-sources { width: 465px; flex-shrink: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--study-bg); overflow: hidden; scrollbar-width: none; }
        .klm-sources::-webkit-scrollbar { display: none; }
        .klm-sources.collapsed { width: 48px !important; min-width: 48px; overflow: hidden; }
        .klm-sources.collapsed .klm-panel-header,
        .klm-sources.collapsed .klm-add-source-btn,
        .klm-sources.collapsed .klm-src-search-wrap,
        .klm-sources.collapsed .klm-sources-select,
        .klm-sources.collapsed .klm-sources-list,
        .klm-sources.collapsed .klm-source-detail { display: none; }
        .klm-sources.collapsed .klm-collapsed-strip { display: flex; }
        .klm-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; flex-shrink: 0; }
        .klm-panel-title { font-size: 15px; font-weight: 600; color: var(--study-text); }
        .klm-collapse-btn { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
        .klm-collapse-btn:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-collapse-btn i { width: 16px; height: 16px; }
        .klm-add-source-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 12px 10px; padding: 10px 14px; border-radius: 24px; border: 1px solid var(--study-border-light); background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; }
        .klm-add-source-btn:hover { border-color: var(--study-accent); color: var(--study-accent); background: var(--study-accent-dim); }
        .klm-add-source-btn i { width: 14px; height: 14px; }
        /* Source inline AI search */
        .klm-src-search-wrap { padding: 0 12px 10px; }
        .klm-src-search-box { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px 12px 0 0; border: 1px solid var(--study-border); border-bottom: none; background: var(--study-bg-secondary); transition: border-color .2s; }
        .klm-src-search-wrap:focus-within .klm-src-search-box { border-color: var(--study-accent); }
        .klm-src-search-wrap:focus-within .klm-src-search-footer { border-color: var(--study-accent); }
        .klm-src-search-box i { margin-top: 2px; }
        .klm-src-search-box textarea { flex: 1; background: transparent; border: none; color: var(--study-text); font-family: inherit; font-size: 13px; outline: none; padding: 2px 4px; resize: none; line-height: 1.4; min-height: 18px; max-height: 80px; overflow-y: auto; }
        .klm-src-search-box textarea::placeholder { color: var(--study-text-tertiary); }
        .klm-src-search-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; border-radius: 0 0 12px 12px; border: 1px solid var(--study-border); border-top: none; background: var(--study-bg-secondary); }
        /* Research results inline */
        .klm-research-results { padding: 12px 0 0; }
        .klm-research-loading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(100,130,255,.08); color: var(--study-text-secondary); font-size: 13px; }
        .klm-research-loading .klm-rl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--study-accent); animation: klmPulse 1.2s ease-in-out infinite; }
        @keyframes klmPulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
        .klm-research-done { border-radius: 12px; background: rgba(100,130,255,.06); overflow: hidden; }
        .klm-research-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--study-text); }
        .klm-research-header-left { display: flex; align-items: center; gap: 8px; }
        .klm-research-header-left i { width: 16px; height: 16px; color: var(--study-accent); }
        .klm-research-header a { font-size: 12px; font-weight: 500; color: var(--study-accent); text-decoration: none; cursor: pointer; }
        .klm-research-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; }
        .klm-research-item-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; }
        .klm-research-item-icon img { width: 16px; height: 16px; border-radius: 3px; }
        .klm-research-item-text { flex: 1; min-width: 0; }
        .klm-research-item-title { font-size: 13px; font-weight: 600; color: var(--study-text); line-height: 1.4; }
        .klm-research-item-snippet { font-size: 11px; color: var(--study-text-tertiary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .klm-research-more { padding: 6px 14px 10px; font-size: 12px; color: var(--study-text-tertiary); display: flex; align-items: center; gap: 6px; }
        .klm-research-more i { width: 14px; height: 14px; }
        .klm-research-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06); }
        .klm-research-actions-left { display: flex; gap: 8px; }
        .klm-research-actions-left button { background: none; border: none; color: var(--study-text-tertiary); cursor: pointer; padding: 4px; }
        .klm-research-actions-left button i { width: 16px; height: 16px; }
        .klm-research-actions-right { display: flex; gap: 10px; align-items: center; }
        .klm-research-delete { background: none; border: none; color: var(--study-text-tertiary); font-size: 12px; cursor: pointer; font-family: inherit; }
        .klm-research-delete:hover { color: var(--study-text); }
        .klm-research-import { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: 20px; border: none; background: var(--study-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .15s; }
        .klm-research-import:hover { filter: brightness(1.1); }
        .klm-research-import i { width: 14px; height: 14px; }

        /* ── KLM Light Mode ── */
        /* Khio LM 3-panel light theme, gives each panel its own card
           appearance against a tinted layout background. Was the
           opposite (layout pure white, panels slightly grey #fafafa)
           which made everything blend into one big white sheet.
           NotebookLM-style: layout is a light grey, panels float as
           distinct white cards with rounded corners. James 2026-05-10. */
        [data-theme="light"] .klm-layout { background: #eef0f4; }
        [data-theme="light"] .klm-sources,
        [data-theme="light"] .klm-center,
        [data-theme="light"] .klm-chat-area,
        [data-theme="light"] .klm-studio { background: #ffffff; }
        body[data-scheme="frost"] .klm-center,
        body[data-scheme="frost"] .klm-sources,
        body[data-scheme="frost"] .klm-studio,
        body[data-scheme="frost"] .study-layout,
        body[data-scheme="frost"] .klm-chat-area { background: #ffffff !important; }
        [data-theme="light"] .klm-picker-card { border-color: var(--border-subtle); background: var(--bg-card, #fff); }
        [data-theme="light"] .klm-picker-card:hover { border-color: var(--border-default); }
        [data-theme="light"] .klm-picker-card-menu:hover { background: var(--bg-elevated); }
        [data-theme="light"] .klm-picker-card-create .klm-picker-card-plus { background: transparent; }
        [data-theme="light"] .klm-search-tag { background: var(--bg-raised); }
        [data-theme="light"] .klm-collapsed-strip { background: var(--bg-raised); }
        [data-theme="light"] .klm-collapsed-strip-btn { color: var(--text-tertiary); }
        [data-theme="light"] .klm-collapsed-strip-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
        [data-theme="light"] .klm-studio-btn:hover { filter: brightness(0.92); }
        [data-theme="light"] .klm-studio-btn[data-key="mindmap"] { background: #f9ecff; }
        [data-theme="light"] .klm-studio-btn[data-key="report"] { background: #fff6e0; }
        [data-theme="light"] .klm-studio-btn[data-key="flashcards"] { background: #fff0e6; }
        [data-theme="light"] .klm-studio-btn[data-key="keyterms"] { background: #e6faec; }
        [data-theme="light"] .klm-studio-btn[data-key="infographic"] { background: #ffedec; }
        [data-theme="light"] .klm-studio-btn[data-key="quiz"] { background: #e6f3ff; }
        [data-theme="light"] .klm-studio-btn[data-key="datatable"] { background: #e0f7f5; }
        [data-theme="light"] .klm-studio-btn[data-key="audio"] { background: #e0f7f5; }
        [data-theme="light"] .klm-studio-btn[data-key="slides"] { background: #fcfbd0; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="mindmap"],
        [data-theme="light"] .klm-studio-btn[data-key="mindmap"] .klm-studio-btn-icon { color: #7a2ea8; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="report"],
        [data-theme="light"] .klm-studio-btn[data-key="report"] .klm-studio-btn-icon { color: #a15c00; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="flashcards"],
        [data-theme="light"] .klm-studio-btn[data-key="flashcards"] .klm-studio-btn-icon { color: #d46622; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="keyterms"],
        [data-theme="light"] .klm-studio-btn[data-key="keyterms"] .klm-studio-btn-icon { color: #0f7d45; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="infographic"],
        [data-theme="light"] .klm-studio-btn[data-key="infographic"] .klm-studio-btn-icon { color: #c6283a; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="quiz"],
        [data-theme="light"] .klm-studio-btn[data-key="quiz"] .klm-studio-btn-icon { color: #1560b8; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="datatable"],
        [data-theme="light"] .klm-studio-btn[data-key="datatable"] .klm-studio-btn-icon { color: #0d6e6a; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="audio"],
        [data-theme="light"] .klm-studio-btn[data-key="audio"] .klm-studio-btn-icon { color: #0d6e6a; }
        [data-theme="light"] .klm-studio-btn-icon[data-key="slides"],
        [data-theme="light"] .klm-studio-btn[data-key="slides"] .klm-studio-btn-icon { color: #867200; }
        [data-theme="light"] .klm-studio-btn-icon { color: #6b6b6b; }
        [data-theme="light"] .klm-studio-btn-label { color: #2d2f31; font-weight: 700; }
        [data-theme="light"] .klm-studio-btn-edit { color: var(--text-muted); }
        [data-theme="light"] .klm-research-item-icon { background: var(--bg-raised); }
        [data-theme="light"] .klm-research-actions { border-top-color: var(--border-subtle); }
        [data-theme="light"] .klm-research-loading { background: color-mix(in srgb, var(--accent-blue) 6%, var(--bg-base)); }
        [data-theme="light"] .klm-research-done { background: color-mix(in srgb, var(--accent-blue) 4%, var(--bg-base)); }
        [data-theme="light"] .klm-msg-user-bubble { background: var(--bg-raised); color: var(--text-primary); }
        [data-theme="light"] .klm-msg-ai-icon { background: var(--bg-raised); color: var(--text-secondary); }
        [data-theme="light"] .klm-add-modal { background: rgba(0,0,0,.4); }
        [data-theme="light"] .klm-add-modal-content { background: var(--bg-base); box-shadow: 0 16px 48px rgba(0,0,0,.15); }
        [data-theme="light"] .klm-picker-dropzone { border-color: var(--border-default); }
        [data-theme="light"] .klm-picker-dropzone.dragover { border-color: var(--study-accent); background: color-mix(in srgb, var(--accent-blue) 4%, var(--bg-base)); }
        [data-theme="light"] .klm-src-search-box,
        [data-theme="light"] .klm-src-search-footer { background: var(--bg-raised); border-color: var(--border-subtle); }
        [data-theme="light"] .klm-source-type-btn { background: var(--bg-raised); color: var(--text-secondary); border-color: var(--border-subtle); }
        [data-theme="light"] .klm-source-type-btn:hover { background: var(--bg-elevated); }
        [data-theme="light"] .klm-summary-card { border-color: var(--border-subtle); }
        [data-theme="light"] .klm-suggestion-chip { background: var(--bg-raised); border-color: var(--border-subtle); color: var(--text-secondary); }
        [data-theme="light"] .klm-suggestion-chip:hover { background: var(--bg-elevated); }

        /* ── Themed Prompt Modal ── */
        .klm-prompt-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .klm-prompt-box { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 16px; padding: 24px; width: 400px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
        .klm-prompt-title { font-size: 15px; font-weight: 600; color: var(--study-text); margin-bottom: 16px; }
        .klm-prompt-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--study-border-light); background: var(--study-bg); color: var(--study-text); font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; }
        .klm-prompt-input:focus { border-color: var(--study-accent); }
        .klm-prompt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
        .klm-prompt-cancel { padding: 8px 20px; border-radius: 10px; border: 1px solid var(--study-border); background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; }
        .klm-prompt-cancel:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .klm-prompt-ok { padding: 8px 24px; border-radius: 10px; border: none; background: var(--study-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .15s; }
        .klm-prompt-ok:hover { filter: brightness(1.1); }
        [data-theme="light"] .klm-prompt-overlay { background: rgba(0,0,0,.3); }
        [data-theme="light"] .klm-prompt-box { background: var(--bg-base); border-color: var(--border-subtle); box-shadow: 0 20px 60px rgba(0,0,0,.15); }
        .klm-prompt-input { background: var(--study-bg) !important; }
        [data-theme="light"] .klm-prompt-input { background: #fff !important; border-color: var(--border-default); color: var(--text-primary); }
        [data-theme="light"] .klm-prompt-cancel { border-color: var(--border-default); color: var(--text-tertiary); }

        /* ── Theme Toggle Button ── */
        .klm-theme-toggle { width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
        .klm-theme-toggle:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-theme-toggle i { width: 16px; height: 16px; }
        .klm-sources-select { display: flex; align-items: center; padding: 6px 16px 8px; border-bottom: 1px solid var(--study-border); }
        .klm-select-all { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--study-text-tertiary); cursor: pointer; }
        .klm-select-all input { accent-color: var(--study-accent); }
        .klm-sources-list { flex: 1; overflow-y: auto; padding: 6px 8px; scrollbar-width: none; }
        .klm-sources-list::-webkit-scrollbar { display: none; }
        .klm-source-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .12s; min-width: 0; }
        .klm-source-item:hover { background: var(--study-bg-tertiary); }
        .klm-source-item.hidden { display: none; }
        .klm-source-item input[type=checkbox] { accent-color: var(--study-accent); flex-shrink: 0; order: 3; margin-left: auto; }
        .klm-source-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; overflow: hidden; }
        .klm-source-icon.pdf { background: #dc2626; color: #fff; }
        .klm-source-icon.doc { background: #2563eb; color: #fff; }
        .klm-source-icon.url { background: #1a1a2e; }
        .klm-source-icon.txt { background: #7c3aed; color: #fff; }
        .klm-source-icon img { width: 20px; height: 20px; border-radius: 3px; }
        [data-theme="light"] .klm-source-icon.url { background: #f0f0f0; }
        .klm-source-name { flex: 1; font-size: 13px; color: var(--study-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; order: 2; cursor: pointer; }
        .klm-source-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; scrollbar-width: none; }
        .klm-source-detail::-webkit-scrollbar { display: none; }
        /* When source detail is open, hide all other panel content */
        .klm-sources.detail-open .klm-panel-header,
        .klm-sources.detail-open { width: 688px; }
        .klm-sources.detail-open .klm-panel-header,
        .klm-sources.detail-open .klm-src-search-wrap,
        .klm-sources.detail-open .klm-add-source-btn,
        .klm-sources.detail-open .klm-sources-select,
        .klm-sources.detail-open .klm-sources-list { display: none !important; }
        .klm-source-detail-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--study-border); flex-shrink: 0; }
        .klm-source-detail-back { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
        .klm-source-detail-back:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-source-detail-back i { width: 16px; height: 16px; }
        .klm-source-detail-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--study-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .klm-source-detail-check { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
        .klm-source-detail-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--study-accent); }
        .klm-source-detail-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; scrollbar-width: none; display: flex; flex-direction: column; min-height: 0; max-width: 100%; }
        .klm-source-detail-body::-webkit-scrollbar { display: none; }
        .klm-source-detail-guide { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .klm-source-detail-guide-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--study-accent); }
        .klm-source-detail-guide-header i { width: 16px; height: 16px; }
        .klm-source-detail-guide p { font-size: 14px; line-height: 1.7; color: var(--study-text-secondary); margin: 0; }
        .klm-source-detail-guide strong { color: var(--study-text); }
        .klm-source-detail-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
        .klm-source-detail-topic { font-size: 12px; padding: 5px 10px; border-radius: 6px; background: var(--study-bg-tertiary); color: var(--study-text-secondary); border: 1px solid var(--study-border); }
        .klm-source-detail-content { font-size: 13px; line-height: 1.8; color: var(--study-text-secondary); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; max-width: 100%; overflow-x: hidden; }
        .klm-source-detail-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

        /* Center: Chat Area */
        .klm-center { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--study-bg); }
        .klm-center-topbar { display: flex; align-items: center; padding: 12px 20px; flex-shrink: 0; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--study-border); }
        .klm-topbar-btn { width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
        .klm-topbar-btn:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-topbar-btn i { width: 16px; height: 16px; }
        .klm-notebook-title { font-size: 16px; font-weight: 600; color: var(--study-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background .15s; }
        .klm-notebook-title:hover { background: var(--study-bg-tertiary); }
        .klm-notebook-title:focus { outline: 2px solid var(--study-accent); background: var(--study-bg-secondary); cursor: text; }
        .klm-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

        /* Center-topbar needs position:relative so the absolutely positioned
           help popover anchors to it (not to the whole .klm-center, which
           would put the popover behind the chat). The popover itself is
           anchored beneath the (?) button via top/left rather than tracking
           the button's bounding rect, the help button sits in a known
           position in the topbar so a fixed offset is fine. */
        .klm-center-topbar { position: relative; }
        .klm-help-btn { color: var(--study-text-tertiary); }
        .klm-help-btn:hover { color: var(--study-accent); background: var(--study-bg-tertiary); }
        .klm-help-popover {
            position: absolute;
            top: calc(100% + 10px);
            left: 100px;
            max-width: 360px;
            width: max-content;
            min-width: 280px;
            background: var(--study-bg);
            border: 1px solid var(--study-border);
            border-radius: 14px;
            box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
            padding: 16px 18px 14px;
            z-index: 60;
            animation: klmHelpFade .15s ease-out;
        }
        .klm-help-popover[hidden] { display: none !important; }
        @keyframes klmHelpFade {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .klm-help-arrow {
            position: absolute;
            top: -6px;
            left: 24px;
            width: 12px;
            height: 12px;
            background: var(--study-bg);
            border-top: 1px solid var(--study-border);
            border-left: 1px solid var(--study-border);
            transform: rotate(45deg);
        }
        .klm-help-title { font-size: 14px; font-weight: 700; color: var(--study-text); margin-bottom: 6px; letter-spacing: -.01em; }
        .klm-help-body  { font-size: 12.5px; line-height: 1.55; color: var(--study-text-secondary); margin: 0 0 12px; }
        .klm-help-steps { display: flex; flex-direction: column; gap: 8px; }
        .klm-help-step  { display: flex; align-items: flex-start; gap: 10px; }
        .klm-help-num   {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: var(--study-accent);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .klm-help-step > div { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.4; }
        .klm-help-step b    { color: var(--study-text); font-weight: 600; font-size: 12.5px; }
        .klm-help-step span { color: var(--study-text-secondary); }

        /* Notebook Picker, full width when no notebook open */
        .klm-layout.picker-mode .klm-sources,
        .klm-layout.picker-mode .klm-studio,
        .klm-layout.picker-mode .klm-resize-handle { display: none !important; }
        .klm-layout.picker-mode { background: transparent !important; padding: 0 !important; gap: 0 !important; }
        .klm-layout.picker-mode .klm-center { border-radius: 0; background: transparent !important; border: none !important; box-shadow: none !important; }
        .klm-layout.picker-mode .klm-center-topbar { display: none !important; }
        .klm-picker { flex: 1; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 0; }
        .klm-picker-inner { text-align: left; max-width: 1200px; width: 100%; margin: 0 auto; padding: 68px 40px 42px; }
        /* Desktop: widen the picker canvas + bump card sizes to match the
           Sets / Review treatment. James: \"still need to scale this page up
           and make the recent / filter fit better\". Mobile keeps the
           tighter sizing, these rules only fire at ≥761px. */
        @media (min-width: 761px) {
            .klm-picker-inner { max-width: 1700px; }
            .klm-picker-card,
            .klm-picker-card-create { min-height: 300px !important; padding: 32px 26px !important; }
            .klm-card-icon { width: 64px !important; height: 64px !important; border-radius: 18px !important; margin-bottom: 16px !important; }
            .klm-card-icon i { width: 32px !important; height: 32px !important; }
            .klm-picker-card-create .klm-picker-card-plus { width: 80px !important; height: 80px !important; margin-bottom: 18px !important; }
            .klm-picker-card-create .klm-picker-card-plus i { width: 36px !important; height: 36px !important; }
            .klm-picker-card-title { font-size: 22px !important; }
            .klm-picker-card-meta { font-size: 14px !important; }
        }
        .klm-picker-heading { font-size: 22px; font-weight: 600; color: var(--study-text); margin: 0 0 28px; }

        /* AI Search Bar */
        .klm-picker-search-wrap { margin-bottom: 24px; }
        .klm-picker-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(100,130,255,.35); background: var(--study-bg-secondary); transition: border-color .2s; }
        .klm-picker-search:focus-within { border-color: rgba(100,130,255,.7); }
        .klm-picker-search input { flex: 1; min-width: 180px; background: transparent; border: none; color: var(--study-text); font-family: inherit; font-size: 15px; outline: none; padding: 0; -webkit-appearance: none; }
        .klm-picker-search input::placeholder { color: var(--study-text-tertiary); }
        .klm-picker-search input:focus { outline: none; box-shadow: none; }
        .klm-picker-search input::selection { background: transparent; }
        .klm-picker-search-tags { display: flex; gap: 8px; }
        .klm-search-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 16px; background: rgba(255,255,255,.08); color: var(--study-text-secondary); font-size: 12px; font-weight: 500; }
        .klm-picker-search-go { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(100,130,255,.2); color: var(--study-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; margin-left: auto; }
        .klm-picker-search-go:hover { background: var(--study-accent); color: #fff; }

        /* Drop Zone */
        .klm-picker-dropzone { padding: 32px 24px 24px; border-radius: 14px; border: 2px dashed var(--study-border); background: var(--study-bg-secondary); margin-bottom: 28px; transition: border-color .2s, background .2s; }
        .klm-picker-dropzone.dragover { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .klm-dropzone-text { font-size: 16px; font-weight: 500; color: var(--study-text-secondary); margin-bottom: 4px; }
        .klm-dropzone-sub { font-size: 13px; color: var(--study-text-tertiary); margin-bottom: 20px; }
        .klm-dropzone-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .klm-source-type-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--study-border); background: var(--study-bg); color: var(--study-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; }
        .klm-source-type-btn:hover { background: var(--study-accent-dim); border-color: var(--study-accent); color: var(--study-accent); }

        /* Divider */
        .klm-picker-divider { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
        .klm-picker-divider::before, .klm-picker-divider::after { content: ''; flex: 1; height: 1px; background: var(--study-border); }
        .klm-picker-divider span { font-size: 13px; color: var(--study-text-tertiary); white-space: nowrap; }

        /* Notebook Grid */
        .klm-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; }
        /* Bug #4: row layout for demo cards matching Review/Sets style */
        .klm-picker-grid.klm-picker-grid-rows {
            display: flex !important; flex-direction: column !important;
            grid-template-columns: none !important; gap: 12px !important;
        }
        .klm-picker-grid.klm-picker-grid-rows .review-set-row { width: 100% !important; }
        @media (max-width: 1400px) { .klm-picker-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
        /* Laptop range, was 761-1200 (split-screen) but standard
           laptop widths 1280-1440 also need this tightening so the
           260px square picker cards don't eat the whole viewport.
           James 2026-05-12 extended 1200 -> 1440. */
        @media (min-width: 761px) and (max-width: 1440px) {
            .klm-picker-grid { gap: 14px; }
            .klm-picker-card,
            .klm-picker-card-create { min-height: 180px !important; padding: 16px 14px !important; border-radius: 18px !important; aspect-ratio: unset !important; }
            .klm-picker-card-emoji { font-size: 28px !important; margin-bottom: 8px !important; }
            .klm-picker-card-plus { width: 44px !important; height: 44px !important; margin-bottom: 8px !important; }
            .klm-picker-card-plus i { width: 20px !important; height: 20px !important; }
            .klm-picker-card-title { font-size: 14px !important; line-height: 1.3 !important; }
            .klm-picker-card-meta { font-size: 11px !important; margin-top: 4px !important; }
            .klm-picker-card-create-label { font-size: 13px !important; }
            .klm-picker-card-create-sub { font-size: 10px !important; }
        }
        @media (max-width: 850px) { .klm-picker-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) {
            .klm-picker-grid { grid-template-columns: 1fr; gap: 12px; }
            /* Horizontal row layout for notebook cards on mobile */
            .klm-picker-card { aspect-ratio: unset; min-height: auto; flex-direction: row; align-items: center; text-align: left; padding: 16px 18px; gap: 14px; border-radius: 16px; }
            .klm-picker-card-emoji { font-size: 28px; margin-bottom: 0; flex-shrink: 0; }
            .klm-picker-card-title { font-size: 15px; -webkit-line-clamp: 1; }
            .klm-picker-card-meta { font-size: 12px; margin-top: 3px; }
            .klm-picker-card-menu { top: 50%; right: 10px; transform: translateY(-50%); }
            .klm-card-blob { display: none; }
            .klm-picker-card-create { min-height: auto; flex-direction: row; padding: 16px 18px; gap: 14px; }
            .klm-picker-card-create .klm-picker-card-plus { width: 40px; height: 40px; margin-bottom: 0; }
            .klm-picker-card-create .klm-picker-card-plus i { width: 20px; height: 20px; }
            /* Chat input safe-area bottom padding */
            .klm-input-wrap { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
            .study-layout.klm-active .study-sidebar { display: none !important; }
            .study-layout.klm-active .study-main { width: 100% !important; }
            .study-layout.klm-active .klm-layout {
                padding: 0 0 calc(76px + env(safe-area-inset-bottom, 0px));
                gap: 0;
            }
            .study-layout.klm-active .klm-center { border-radius: 0; }
            .study-layout.klm-active .klm-input-wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
            /* Hide sources and studio panels on mobile */
            .klm-sources { display: none !important; }
            .klm-studio { display: none !important; }
        }
        .klm-picker-card { position: relative; padding: 24px 20px; border-radius: 24px; border: 1px solid var(--study-border); background: var(--study-bg-card, #fff); cursor: pointer; transition: all .2s ease; aspect-ratio: 1 / 1; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; }
        .klm-picker-card:hover { border-color: var(--study-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
        .klm-picker-card-emoji { font-size: 42px; margin-bottom: 16px; line-height: 1; }
        .klm-picker-card-menu { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .15s; z-index: 2; }
        .klm-picker-card-menu:hover { background: rgba(255,255,255,.1); }
        .klm-picker-card-menu i { width: 16px; height: 16px; }
        .klm-picker-card-dropdown { position: absolute; top: 42px; right: 8px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 10px; padding: 4px; min-width: 140px; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.4); display: none; }
        .klm-picker-card-dropdown.open { display: block; }
        .klm-picker-card-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: transparent; color: var(--study-text); font-size: 13px; font-family: inherit; border-radius: 6px; cursor: pointer; }
        .klm-picker-card-dropdown button:hover { background: var(--study-bg-tertiary); }
        .klm-picker-card-dropdown button.danger { color: #ef4444; }
        .klm-picker-card-dropdown button.danger:hover { background: rgba(239,68,68,.1); }
        .klm-picker-card-dropdown button i { width: 14px; height: 14px; }
        .klm-card-blob { position: absolute; inset: 0; pointer-events: none; opacity: 0.7; z-index: 0; }
        .klm-picker-card > *:not(.klm-card-blob):not(.klm-picker-card-menu):not(.klm-picker-card-dropdown) { position: relative; z-index: 1; }
        .klm-picker-card-title { font-size: 20px; font-weight: 700; color: var(--study-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
        .klm-picker-card-meta { font-size: 13px; color: var(--study-text-tertiary); margin-top: 8px; }
        .klm-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
        .klm-card-icon i { width: 26px; height: 26px; }
        .klm-card-subject { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
        .klm-card-footer { display: flex; align-items: center; justify-content: center; margin-top: 12px; padding-top: 8px; }
        .klm-card-time { font-size: 10px; color: var(--study-text-tertiary); }
        .klm-picker-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 20px; }
        .klm-picker-filters { display: flex; gap: 8px; flex-shrink: 0; margin-top: 30px; }
        .klm-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--study-border); background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; }
        .klm-filter-btn i { width: 14px; height: 14px; }
        .klm-filter-btn:hover { border-color: var(--study-accent); color: var(--study-accent); }
        .klm-filter-btn.active { background: var(--study-accent); color: #fff; border-color: var(--study-accent); }
        .klm-picker-card-create { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--study-border); background: var(--study-bg-card, #fff); min-height: 260px; }
        .klm-picker-card-create .klm-picker-card-plus { width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .klm-picker-card-create .klm-picker-card-plus i { width: 32px; height: 32px; color: var(--study-text-tertiary); stroke-width: 1.5; }
        .klm-picker-card-create:hover { border-color: var(--study-accent); }
        .klm-picker-card-create:hover .klm-picker-card-plus i { color: var(--study-accent); }

        /* Add Source Modal */
        .klm-add-modal { position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .klm-add-modal-content { background: var(--study-bg); border-radius: 16px; padding: 24px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
        .klm-add-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

        /* Chat Area */
        .klm-chat-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .klm-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 32px 16px; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; }
        .klm-messages::-webkit-scrollbar { display: none; }
        .klm-messages > * { width: 100%; max-width: 720px; min-width: 0; }
        .klm-summary-wrap { margin-bottom: 20px; }
        .klm-summary-header-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
        .klm-summary-header-icon i { width: 20px; height: 20px; color: #fff; }
        .klm-summary-header-title { font-size: 24px; font-weight: 700; color: var(--study-text); margin-bottom: 4px; line-height: 1.3; }
        .klm-summary-source-count { font-size: 13px; color: var(--study-text-tertiary); margin-bottom: 12px; }
        .klm-summary-card { font-size: 15px; line-height: 1.85; color: var(--study-text); }
        .klm-summary-card p { margin-bottom: 16px; }
        .klm-summary-card p:last-child { margin-bottom: 0; }
        .klm-summary-card strong { color: var(--study-text); font-weight: 700; }
        .klm-summary-loading { display: flex; gap: 5px; padding: 12px 0; }
        .klm-summary-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--study-accent); animation: klmDot 1.2s ease-in-out infinite; }
        .klm-summary-loading span:nth-child(2) { animation-delay: .2s; }
        .klm-summary-loading span:nth-child(3) { animation-delay: .4s; }
        @keyframes klmDot { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }
        .klm-summary-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
        .klm-save-note-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--study-border-light); background: var(--study-bg-secondary); color: var(--study-text); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; }
        .klm-save-note-btn:hover { border-color: var(--study-accent); }
        .klm-save-note-btn i { width: 14px; height: 14px; }
        .klm-action-sep { width: 1px; height: 20px; background: var(--study-border); margin: 0 4px; }
        .klm-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
        .klm-suggestion-chip { text-align: left; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); color: var(--study-text-secondary); font-size: 14px; cursor: pointer; font-family: inherit; transition: all .15s; line-height: 1.4; }
        .klm-suggestion-chip:hover { border-color: var(--study-accent); color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-msg-action { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
        .klm-msg-action:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-msg-action i { width: 15px; height: 15px; }

        /* Chat messages */
        #klmChatMessages { display: flex; flex-direction: column; gap: 20px; }
        /* Mobile: anchor a short conversation to the bottom of the scroll
           container so the message sits right above the input pill instead
           of stranding at the top with ~60% dead space. The earlier attempt
           landed empty space ABOVE the message, which read as a "white
           safety bar" because the topbar's bottom border drew a line
           between the topbar and the empty area. Now we ALSO drop the
           topbar's bottom border on mobile so the empty area visually
           merges into the topbar, no visible seam, just one continuous
           white surface above the messages. Desktop is unchanged. */
        @media (max-width: 768px) {
            .klm-center-topbar { border-bottom: none; }
            /* margin-top: auto on the chat block itself, flex-item auto
               margins distribute leftover space in the flex container.
               When the conversation is short the chat block gets pushed
               down to the bottom of .klm-messages (anchored to the input
               bar). When the conversation grows past available height,
               there's no leftover space, the auto margin collapses to 0,
               and klm-messages's overflow-y: auto scrolls normally, the
               user can scroll up to see the summary and older messages. */
            #klmChatMessages {
                margin-top: auto;
                width: 100%;
            }
        }
        .klm-msg-user { display: flex; justify-content: flex-end; margin-bottom: 4px; }
        .klm-msg-user-bubble { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 18px 18px 4px 18px; padding: 12px 16px; font-size: 14px; line-height: 1.6; color: var(--study-text); max-width: 70%; white-space: pre-wrap; word-break: break-word; }
        .klm-msg-ai { display: flex; gap: 12px; align-items: flex-start; }
        .klm-msg-ai-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -3px; }
        .klm-msg-ai-icon img { width: 50px; height: 50px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
        .klm-msg-ai-icon lottie-player { width: 52px; height: 52px; display: block; }
        .klm-thinking-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--study-text-secondary); padding: 4px 0; }
        .klm-thinking-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--study-accent); animation: thinkingPulse 1.4s ease-in-out infinite; }
        .klm-thinking-text { transition: opacity 0.3s; }
        @keyframes thinkingPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
        .klm-msg-ai-body { flex: 1; min-width: 0; max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; word-wrap: break-word; font-size: 14.5px; line-height: 1.8; color: var(--study-text); }
        .klm-msg-ai-body p { margin-bottom: 14px; }
        .klm-msg-ai-body p:last-child { margin-bottom: 0; }
        .klm-msg-ai-body h1,.klm-msg-ai-body h2,.klm-msg-ai-body h3 { color: var(--study-text); margin: 16px 0 6px; font-weight: 700; }
        .klm-msg-ai-body h1 { font-size: 1.3em; } .klm-msg-ai-body h2 { font-size: 1.15em; } .klm-msg-ai-body h3 { font-size: 1.05em; }
        .klm-msg-ai-body ul,.klm-msg-ai-body ol { padding-left: 22px; margin: 8px 0; }
        .klm-msg-ai-body li { margin: 4px 0; }
        .klm-msg-ai-body p { margin: 8px 0; }
        .klm-msg-ai-body p:first-child { margin-top: 0; }
        .klm-msg-ai-body strong { color: var(--study-text); font-weight: 700; }
        .klm-msg-ai-body table { border-collapse: collapse; width: 100%; max-width: 100%; table-layout: fixed; margin: 14px 0; font-size: 13px; }
        .klm-msg-ai-body th { background: var(--study-bg-secondary); color: var(--study-text); font-weight: 700; padding: 8px 12px; text-align: left; border: 1px solid var(--study-border); word-break: break-word; overflow-wrap: break-word; }
        .klm-msg-ai-body td { padding: 8px 12px; border: 1px solid var(--study-border); color: var(--study-text-secondary); word-break: break-word; overflow-wrap: break-word; }
        .klm-msg-ai-body blockquote { border-left: 3px solid var(--study-accent); margin: 10px 0; padding: 8px 14px; background: var(--study-bg-tertiary); border-radius: 0 8px 8px 0; color: var(--study-text-secondary); }
        .klm-msg-ai-body code:not(pre code) { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 4px; padding: 2px 5px; font-size: .87em; color: var(--study-accent); }
        .klm-msg-ai-body pre { margin: 12px 0; border-radius: 10px; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
        .klm-msg-ai-actions { display: flex; gap: 4px; margin-top: 10px; }

        /* Input bar */
        .klm-input-wrap { padding: 12px 24px 8px; flex-shrink: 0; max-width: 768px; width: 100%; margin: 0 auto; border-top: 1px solid var(--study-border); }
        .klm-input-card { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 12px 18px; transition: border-color .2s; }
        .klm-input-card:focus-within { border-color: rgba(0,0,0,0.15); }
        .klm-input-card textarea { flex: 1; background: transparent; border: none; color: var(--study-text); font-family: inherit; font-size: 14px; resize: none; outline: none; min-height: 20px; max-height: 120px; line-height: 1.5; padding: 0; }
        .klm-input-card textarea::placeholder { color: var(--study-text-tertiary); }
        .klm-input-footer { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .klm-input-badge { font-size: 11px; color: var(--study-text-tertiary); background: var(--study-bg-tertiary); padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
        .klm-send-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--study-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
        .klm-send-btn:hover { background: var(--study-accent); filter: brightness(1.1); }
        .klm-send-btn:disabled { opacity: .3; cursor: not-allowed; }
        .klm-send-btn i { width: 14px; height: 14px; }
        .klm-input-disclaimer { font-size: 11px; color: var(--study-text-tertiary); text-align: center; padding: 6px 0; max-width: 768px; width: 100%; margin: 0 auto; }

        /* Right: Studio Panel
           NOTE: do NOT transition `width` here, the drag-to-resize handler
           writes `style.width` directly on every mousemove, and a 0.3s
           transition made the drag feel "sticky"/laggy (the panel chased the
           cursor via an easing curve instead of tracking it). Sources panel
           never had this transition and felt correct, so the studio panel
           now mirrors that. */
        /* Right: Studio Panel, default 465px (matches Sources) per
           James 2026-05-10 (was 320). Scales down on narrower
           viewports via the media queries near the end of this file. */
        .klm-studio { width: 465px; flex-shrink: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--study-bg); overflow: hidden; }
        .klm-studio.content-open { width: min(50vw, 780px); }
        .klm-studio.collapsed { width: 48px !important; min-width: 48px; overflow: hidden; }
        .klm-studio.collapsed .klm-panel-header,
        .klm-studio.collapsed .klm-studio-grid,
        .klm-studio.collapsed .klm-studio-outputs { display: none; }
        .klm-studio.collapsed .klm-collapsed-strip { display: flex; }
        /* Collapsed icon strips */
        .klm-collapsed-strip { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; height: 100%; }
        .klm-collapsed-strip-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
        .klm-collapsed-strip-btn:hover { background: var(--study-bg-secondary); color: var(--study-text); }
        .klm-collapsed-strip-btn i { width: 18px; height: 18px; }
        .klm-collapsed-strip-divider { width: 24px; height: 1px; background: var(--study-border); margin: 2px 0; }

        /* Studio button grid, bumped per James 2026-05-10 to match the
           NotebookLM reference (taller cells, bigger icons, larger
           labels). Was 56px-tall buttons w/ 18px icons + 10px labels ,
           cramped at the new 465px panel width. Now 88px tall, 22px
           icons, 13px labels with proper 14px internal padding. */
        .klm-studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px; }
        .klm-studio-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; padding: 14px 14px; border-radius: 14px; border: none; cursor: pointer; transition: all .15s; height: 88px; overflow: hidden; }
        .klm-studio-btn:hover { filter: brightness(1.15); }
        .klm-studio-btn.disabled { opacity: .4; cursor: not-allowed; }
        .klm-studio-btn.generating { pointer-events: none; }
        .klm-studio-btn.generating .klm-studio-btn-icon { animation: klmSpin 1s linear infinite; }
        @keyframes klmSpin { to { transform: rotate(360deg); } }
        .klm-studio-btn-icon { width: 22px; height: 22px; color: rgba(255,255,255,.85); margin-bottom: 8px; }
        .klm-studio-btn-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); text-align: left; line-height: 1.25; }
        .klm-studio-btn-edit { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; color: rgba(255,255,255,.7); cursor: pointer; z-index: 2; opacity: 0.5; transition: all .15s; border-radius: 6px; padding: 3px; }
        .klm-studio-btn-edit i, .klm-studio-btn-edit svg { stroke-width: 2.5 !important; }
        .klm-studio-btn:hover .klm-studio-btn-edit { opacity: 1; }
        .klm-studio-btn-edit:hover { opacity: 1; background: rgba(0,0,0,.15); }
        .klm-studio-btn-edit:hover { opacity: 1; color: #fff; background: rgba(255,255,255,.15); }
        /* Studio button colors, exact NotebookLM RGB values */
        .klm-studio-btn[data-key="mindmap"] { background: rgb(58, 49, 57); }
        .klm-studio-btn[data-key="report"] { background: rgb(58, 58, 47); }
        .klm-studio-btn[data-key="flashcards"] { background: rgb(58, 50, 48); }
        .klm-studio-btn[data-key="keyterms"] { background: rgb(48, 54, 50); }
        .klm-studio-btn[data-key="infographic"] { background: rgb(58, 49, 57); }
        .klm-studio-btn[data-key="quiz"] { background: rgb(50, 56, 62); }
        .klm-studio-btn[data-key="datatable"] { background: rgb(50, 52, 62); }
        .klm-studio-btn[data-key="audio"] { background: rgb(50, 52, 62); }
        .klm-studio-btn[data-key="slides"] { background: rgb(58, 58, 47); }
        .klm-studio-outputs { flex: 1; overflow-y: auto; padding: 8px 14px; scrollbar-width: none; }
        .klm-studio-outputs::-webkit-scrollbar { display: none; }
        .klm-studio-output-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); cursor: pointer; transition: all .15s; margin-bottom: 6px; }
        .klm-studio-output-item:hover { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .klm-studio-output-delete { display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: transparent; color: var(--study-text-muted); cursor: pointer; border-radius: 6px; margin-left: auto; flex-shrink: 0; opacity: 0.5; transition: all 0.15s; }
        .klm-studio-output-delete:hover { color: #ef4444; background: rgba(239,68,68,.12); opacity: 1; }
        .klm-studio-output-icon { width: 18px; height: 18px; color: var(--study-accent); flex-shrink: 0; }
        .klm-studio-output-info { flex: 1; min-width: 0; }
        .klm-studio-output-title { font-size: 13px; font-weight: 600; color: var(--study-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .klm-studio-output-meta { font-size: 11px; color: var(--study-text-tertiary); }

        /* Studio Inline View */
        .klm-studio-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
        .klm-studio-view-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--study-border); flex-shrink: 0; }
        .klm-studio-view-back, .klm-studio-view-fullscreen { width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
        .klm-studio-view-back:hover, .klm-studio-view-fullscreen:hover { background: var(--study-bg-secondary); color: var(--study-text); }
        .klm-studio-view-back i, .klm-studio-view-fullscreen i { width: 18px; height: 18px; }
        .klm-studio-view-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--study-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .klm-studio-view-body { flex: 1; overflow-y: auto; padding: 16px; font-size: 14px; line-height: 1.7; color: var(--study-text); scrollbar-width: none; }
        .klm-studio-view-body::-webkit-scrollbar { display: none; }
        .klm-studio-view-body h1, .klm-studio-view-body h2, .klm-studio-view-body h3 { color: var(--study-text); margin: 14px 0 6px; font-weight: 700; }
        .klm-studio-view-body h2 { font-size: 16px; }
        .klm-studio-view-body ul, .klm-studio-view-body ol { padding-left: 20px; }
        .klm-studio-view-body li { margin: 3px 0; }
        .klm-studio-view-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
        .klm-studio-view-body th { background: var(--study-bg-secondary); padding: 8px 10px; text-align: left; border: 1px solid var(--study-border); font-weight: 700; }
        .klm-studio-view-body td { padding: 8px 10px; border: 1px solid var(--study-border); }

        /* Studio Output Modal (fullscreen) */
        .klm-output-modal { position: fixed; inset: 0; z-index: 9999; background: var(--study-bg, #0a0a0a); display: flex; flex-direction: column; }
        .klm-output-modal-inner { background: var(--study-bg, #0a0a0a); width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
        .klm-output-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--study-border); flex-shrink: 0; }
        .klm-output-modal-title { font-size: 16px; font-weight: 700; color: var(--study-text); }
        .klm-output-modal-close { width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .klm-output-modal-close:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .klm-output-modal-body { flex: 1; overflow-y: auto; padding: 32px; font-size: 14.5px; line-height: 1.7; color: var(--study-text); scrollbar-width: thin; max-width: 900px; margin: 0 auto; width: 100%; }
        .klm-output-modal-body h1,.klm-output-modal-body h2,.klm-output-modal-body h3 { color: var(--study-text); margin: 16px 0 8px; font-weight: 700; }
        .klm-output-modal-body ul,.klm-output-modal-body ol { padding-left: 22px; }
        .klm-output-modal-body li { margin: 4px 0; }
        .klm-output-modal-body table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
        .klm-output-modal-body th { background: var(--study-bg-secondary); padding: 8px 12px; text-align: left; border: 1px solid var(--study-border); font-weight: 700; }
        .klm-output-modal-body td { padding: 8px 12px; border: 1px solid var(--study-border); }


/* --- Studio Tool Customize Modal, quiz interactive, flashcards interactive, mind map visual in KLM --- */
        /* Studio Tool Customize Modal */
        .studio-customize-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: scmFadeIn .2s ease; }
        @keyframes scmFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes scmSlideUp { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .studio-customize-inner { background: var(--study-bg, #0f0f14); border: 1px solid var(--study-border); border-radius: 20px; max-width: 560px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: scmSlideUp .25s ease; }
        .studio-customize-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 16px; }
        .studio-customize-header i { width: 22px; height: 22px; color: var(--study-accent); }
        .studio-customize-title { font-size: 20px; font-weight: 800; color: var(--study-text); flex: 1; letter-spacing: -.02em; }
        .studio-customize-close { width: 32px; height: 32px; border: none; border-radius: 10px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
        .studio-customize-close:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .studio-customize-body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
        .studio-customize-section { margin-bottom: 20px; }
        .studio-customize-label { font-size: 12px; font-weight: 800; color: var(--study-text-tertiary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
        .studio-customize-row { display: flex; gap: 20px; flex-wrap: wrap; }
        .studio-customize-col { flex: 1; min-width: 160px; }
        .studio-customize-pills { display: flex; gap: 6px; flex-wrap: wrap; }
        .studio-customize-pill { padding: 8px 14px; border: 1.5px solid var(--study-border); border-radius: 10px; background: transparent; color: var(--study-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
        .studio-customize-pill:hover { border-color: var(--study-accent); color: var(--study-text); }
        .studio-customize-pill.active { background: var(--study-accent-dim); border-color: var(--study-accent); color: var(--study-text); }
        .studio-customize-pill.active svg { color: var(--study-accent); }
        .studio-customize-textarea { width: 100%; min-height: 120px; padding: 14px 16px; border: 1.5px solid var(--study-border); border-radius: 12px; background: var(--study-bg-secondary); color: var(--study-text); font-size: 14px; font-family: inherit; resize: vertical; outline: none; line-height: 1.6; transition: border-color .15s; }
        .studio-customize-textarea::placeholder { color: var(--study-text-tertiary); font-size: 13px; }
        .studio-customize-textarea:focus { border-color: var(--study-accent); }
        .studio-customize-footer { padding: 16px 24px; display: flex; justify-content: flex-end; }
        .studio-customize-generate { padding: 11px 28px; border: none; border-radius: 12px; background: var(--study-accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit; }
        .studio-customize-generate:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }

        /* Quiz interactive */
        .klm-quiz-q { margin-bottom: 20px; padding: 16px; border-radius: 12px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); }
        .klm-quiz-q-text { margin: 0 0 12px; font-size: 14px; }
        .klm-quiz-opt { display: block; width: 100%; text-align: left; padding: 10px 14px; margin: 6px 0; border-radius: 8px; border: 1px solid var(--study-border); background: var(--study-bg); color: var(--study-text); font-size: 13px; cursor: pointer; transition: all .15s; }
        .klm-quiz-opt:hover { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .klm-quiz-opt.selected { border-color: var(--study-accent); background: var(--study-accent-dim); font-weight: 600; }
        .klm-quiz-opt.correct { border-color: #22c55e; background: rgba(34,197,94,.15); color: #22c55e; }
        .klm-quiz-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.15); color: #ef4444; }
        .klm-quiz-textarea { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--study-border); background: var(--study-bg); color: var(--study-text); font-size: 13px; resize: vertical; font-family: inherit; }
        .klm-quiz-feedback { margin-top: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
        .klm-quiz-feedback.correct { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #22c55e; }
        .klm-quiz-feedback.wrong { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
        .klm-quiz-footer { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
        .klm-quiz-submit { padding: 10px 24px; border-radius: 10px; background: var(--study-accent); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }
        .klm-quiz-submit:hover { background: var(--study-accent-hover); }
        .klm-quiz-score { font-size: 16px; font-weight: 700; }
        .klm-quiz-q.graded .klm-quiz-opt { pointer-events: none; }
        .klm-quiz-q.graded .klm-quiz-textarea { pointer-events: none; opacity: .7; }

        /* Flashcards interactive, single card UI */
        .klm-fc-single { display: flex; flex-direction: column; outline: none; }
        .klm-fc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .klm-fc-deck-label { font-size: 14px; font-weight: 700; color: var(--study-text); }
        .klm-fc-counter { font-size: 14px; font-weight: 700; color: var(--study-text); }
        .klm-fc-progress { width: 100%; height: 4px; border-radius: 2px; background: var(--study-border); margin-bottom: 20px; }
        .klm-fc-progress-fill { height: 100%; border-radius: 2px; background: var(--study-accent); transition: width .3s ease; }
        .klm-fc-card-wrap { perspective: 1200px; width: 100%; aspect-ratio: 16/10; max-height: 360px; min-height: 220px; cursor: pointer; margin-bottom: 20px; }
        .klm-fc-card-single { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .5s; border-radius: 18px; }
        .klm-fc-card-single.flipped { transform: rotateY(180deg); }
        .klm-fc-card-single .klm-fc-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
        .klm-fc-card-single .klm-fc-front, .klm-fc-card-single .klm-fc-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 28px; text-align: center; border: 1px solid var(--study-border); box-shadow: 0 16px 40px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04); }
        .klm-fc-card-single .klm-fc-front { background: var(--study-bg-secondary); }
        .klm-fc-card-single .klm-fc-back { background: var(--study-accent-dim); transform: rotateY(180deg); border-color: var(--study-accent-dim, rgba(232,133,58,0.15)); }
        .klm-fc-card-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--study-text-tertiary); margin-bottom: 12px; }
        .klm-fc-text { font-size: 16px; line-height: 1.6; color: var(--study-text); font-weight: 600; max-height: 200px; overflow-y: auto; }
        .klm-fc-text p { margin: 0; }
        .klm-fc-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--study-text-tertiary); margin-top: auto; padding-top: 12px; }
        .klm-fc-card-single.flipped .klm-fc-hint { display: none; }
        .klm-fc-nav-bar { display: flex; align-items: center; justify-content: space-between; }
        .klm-fc-nav-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--study-border); border-radius: 12px; background: var(--study-bg-secondary); color: var(--study-text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
        .klm-fc-nav-btn:hover:not(:disabled) { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .klm-fc-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
        .klm-fc-nav-hint { font-size: 12px; color: var(--study-text-tertiary); }
        .klm-fc-nav-hint kbd { padding: 2px 6px; border-radius: 4px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); font-size: 11px; font-family: inherit; }

        /* Mind Map visual */
        .klm-mm-container { padding: 16px; }
        .klm-mm-center { text-align: center; font-size: 20px; font-weight: 700; color: var(--study-accent); margin-bottom: 24px; padding: 16px; border-radius: 14px; background: var(--study-accent-dim); border: 2px solid var(--study-accent); }
        .klm-mm-branch { margin-bottom: 16px; padding: 14px; border-radius: 12px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); }
        .klm-mm-branch-label { font-size: 15px; font-weight: 700; color: var(--study-text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        .klm-mm-branch-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .klm-mm-children { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 18px; }
        .klm-mm-child { padding: 6px 12px; border-radius: 8px; background: var(--study-bg); border: 1px solid var(--study-border); font-size: 13px; color: var(--study-text-secondary); }

        /* Note icon */
        .klm-source-icon.note { background: var(--study-accent-dim); display: flex; align-items: center; justify-content: center; }

        /* Stepped panel widths so the new 465px default doesn't squeeze
           the center column on narrower laptops. James 2026-05-10.
           James 2026-05-18: tightened the laptop tier (1201-1500) from
           360px → 300px each. Standard 13"-15" laptops kept hitting the
           1500px breakpoint at 360+360 = 720 of fixed width which left
           the center column too narrow to read. 300+300 = 600 gives
           the center ~250 more pixels to breathe. */
        @media (max-width: 1500px) {
            .klm-studio { width: 300px; }
            .klm-sources { width: 300px; }
        }
        @media (max-width: 1200px) {
            .klm-studio { width: 280px; }
            .klm-sources { width: 280px; }
        }
        @media (max-width: 900px) {
            .klm-sources, .klm-studio { display: none; }
        }

/* --- Key Terms + Infographic (KLM studio outputs) --- */
        /* ===== KEY TERMS ===== */
        .kt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:4px 0;align-items:start}
        .kt-card{background:var(--study-bg-card, var(--bg-card, #fff));border:1px solid var(--study-border);border-left:4px solid var(--study-accent);border-radius:14px;padding:18px 20px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.03)}
        .kt-card:hover{border-color:var(--study-accent);box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
        .kt-card.expanded{border-color:var(--study-accent);background:var(--study-accent-dim)}
        .kt-term{font-weight:800;font-size:1rem;color:var(--study-text);margin-bottom:0;letter-spacing:-0.01em}
        .kt-def{font-size:.85rem;color:var(--study-text-secondary);margin-top:10px;line-height:1.6;display:none}
        .kt-card.expanded .kt-def{display:block}
        .kt-card.expanded .kt-expand-hint{display:none}
        .kt-expand-hint{font-size:.72rem;color:var(--study-accent);margin-top:6px;opacity:.6}
        .kt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px;flex-wrap:wrap}
        .kt-count{font-size:13px;font-weight:700;color:var(--study-accent)}
        .kt-count{font-size:.8rem;color:var(--study-text-muted);margin-left:auto}
        .kt-extra{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb, var(--study-accent) 18%, var(--study-border));background:color-mix(in srgb, var(--study-accent) 6%, transparent);font-size:.82rem;line-height:1.5;color:var(--study-text)}
        .kt-card.expanded .kt-extra{display:block}
        .kt-extra-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--study-accent);margin-bottom:4px}
        .kt-extra-text{display:block;color:var(--study-text-secondary)}
        .kt-why{background:color-mix(in srgb, var(--study-accent) 3%, transparent)}

        /* ===== INFOGRAPHIC ===== */
        .infographic-wrap{display:flex;flex-direction:column;gap:16px;padding:4px 0}
        .infographic-header{background:linear-gradient(135deg,var(--study-accent),color-mix(in srgb, var(--study-accent) 70%, #000));border-radius:16px;padding:24px;color:#fff}
        .infographic-title{font-size:1.4rem;font-weight:800;margin:0 0 4px}
        .infographic-tagline{font-size:.88rem;opacity:.85;margin:0}
        .infographic-stats{display:flex;gap:12px;flex-wrap:wrap}
        .infographic-stat{background:var(--study-card);border:1px solid var(--study-border);border-radius:12px;padding:14px 18px;flex:1;min-width:120px;text-align:center}
        .infographic-stat-val{font-size:1.5rem;font-weight:800;color:var(--study-accent)}
        .infographic-stat-lbl{font-size:.75rem;color:var(--study-text-muted);margin-top:2px}
        .infographic-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
        .infographic-section{background:var(--study-card);border:1px solid var(--study-border);border-radius:14px;padding:16px}
        .infographic-section-heading{font-weight:700;font-size:.9rem;color:var(--study-accent);margin:0 0 10px;display:flex;align-items:center;gap:6px}
        .infographic-section ul{margin:0;padding:0 0 0 16px;color:var(--study-text);font-size:.83rem;line-height:1.6}
        .infographic-toolbar{display:flex;gap:8px;margin-bottom:4px}
        .infographic-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid var(--study-border);background:var(--study-card);color:var(--study-text);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
        .infographic-btn:hover{background:var(--study-hover)}

        /* ── Studio Customize Inline Panel ── */
        .sci-panel { padding: 12px 14px; border-top: 1px solid var(--study-border); }
        .sci-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .sci-title { font-size: 13px; font-weight: 700; color: var(--study-text); }
        .sci-close { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .sci-close:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .sci-section { margin-bottom: 10px; }
        .sci-label { font-size: 11px; font-weight: 700; color: var(--study-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
        .sci-pills { display: flex; gap: 6px; flex-wrap: wrap; }
        .sci-pill { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); color: var(--study-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
        .sci-pill:hover { border-color: var(--study-accent); color: var(--study-text); }
        .sci-pill.active { background: var(--study-accent-dim); border-color: var(--study-accent); color: var(--study-accent); }
        .sci-textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--study-border); background: var(--study-bg-secondary); color: var(--study-text); font-size: 13px; font-family: inherit; resize: vertical; outline: none; line-height: 1.5; }
        .sci-textarea:focus { border-color: var(--study-accent); }
        .sci-generate { width: 100%; padding: 10px; border: none; border-radius: 10px; background: var(--study-accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; }
        .sci-generate:hover { filter: brightness(1.1); }
        /* Light mode overrides for inline panel */
        body[data-scheme="light"] .sci-panel,
        [data-theme="light"] .sci-panel { border-top-color: rgba(15,23,42,0.06); }
        body[data-scheme="light"] .sci-pill,
        [data-theme="light"] .sci-pill { background: #fafafa; border-color: rgba(15,23,42,0.06); color: #4b5563; }
        body[data-scheme="light"] .sci-pill.active,
        [data-theme="light"] .sci-pill.active { background: rgba(59,130,246,0.08); border-color: #3b82f6; color: #1d4ed8; }
        body[data-scheme="light"] .sci-textarea,
        [data-theme="light"] .sci-textarea { background: #fafafa; border-color: rgba(15,23,42,0.06); color: #1f2937; }
        body[data-scheme="light"] .sci-label,
        [data-theme="light"] .sci-label { color: #6b7280; }

        /* ── KLM Light-mode QOL overrides (end of file for max cascade priority) ──
           2026-05-10: layout darkened from #fafafa → #eef0f4 so the
           three white panels actually read as discrete cards. The
           previous #fafafa was so close to the panels' #ffffff that
           Sources / Chat / Studio blended into one big white sheet. */
        body[data-scheme="light"] .klm-layout,
        [data-theme="light"] .klm-layout { background: #eef0f4 !important; }
        body[data-scheme="light"] .klm-sources,
        body[data-scheme="light"] .klm-center,
        body[data-scheme="light"] .klm-chat-area,
        body[data-scheme="light"] .klm-studio,
        [data-theme="light"] .klm-sources,
        [data-theme="light"] .klm-center,
        [data-theme="light"] .klm-chat-area,
        [data-theme="light"] .klm-studio { background: #ffffff !important; }
        body[data-scheme="light"] .klm-msg-ai-icon,
        [data-theme="light"] .klm-msg-ai-icon { display: none !important; }
        body[data-scheme="light"] .klm-msg-ai-body,
        [data-theme="light"] .klm-msg-ai-body { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
        body[data-scheme="light"] .klm-msg-user-bubble,
        [data-theme="light"] .klm-msg-user-bubble { background: #fafafa !important; color: #1f2937 !important; border: none !important; }
        body[data-scheme="light"] #klmChatMessages,
        [data-theme="light"] #klmChatMessages { gap: 28px !important; }
        body[data-scheme="light"] .klm-input-wrap,
        [data-theme="light"] .klm-input-wrap { border-top: 1px solid rgba(15,23,42,0.06) !important; padding: 12px 24px 8px !important; }
        body[data-scheme="light"] .klm-input-card,
        [data-theme="light"] .klm-input-card { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 14px !important; padding: 12px 18px !important; min-height: 44px !important; box-shadow: none !important; outline: none !important; }
        body[data-scheme="light"] .klm-input-card:focus-within,
        [data-theme="light"] .klm-input-card:focus-within { border-color: rgba(15,23,42,0.15) !important; box-shadow: none !important; }
        body[data-scheme="light"] .klm-input-card textarea,
        [data-theme="light"] .klm-input-card textarea { font-size: 15px !important; min-height: 22px !important; }
        /* Make studio edit icon visible with clear hover */
        body[data-scheme="light"] .klm-studio-btn-edit,
        [data-theme="light"] .klm-studio-btn-edit { opacity: 0.4 !important; color: #6b7280 !important; }
        body[data-scheme="light"] .klm-studio-btn:hover .klm-studio-btn-edit,
        [data-theme="light"] .klm-studio-btn:hover .klm-studio-btn-edit { opacity: 0.7 !important; }
        body[data-scheme="light"] .klm-studio-btn-edit:hover,
        [data-theme="light"] .klm-studio-btn-edit:hover { opacity: 1 !important; background: rgba(0,0,0,.08) !important; color: #1f2937 !important; }

        /* ── Studio buttons: study-set tone pastels ── */
        body[data-scheme="light"] .klm-studio-btn[data-key="mindmap"],
        [data-theme="light"] .klm-studio-btn[data-key="mindmap"] { background: #f9ecff !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="report"],
        [data-theme="light"] .klm-studio-btn[data-key="report"] { background: #fff6e0 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="flashcards"],
        [data-theme="light"] .klm-studio-btn[data-key="flashcards"] { background: #fff0e6 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="keyterms"],
        [data-theme="light"] .klm-studio-btn[data-key="keyterms"] { background: #e6faec !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="infographic"],
        [data-theme="light"] .klm-studio-btn[data-key="infographic"] { background: #ffedec !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="quiz"],
        [data-theme="light"] .klm-studio-btn[data-key="quiz"] { background: #e6f3ff !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="datatable"],
        [data-theme="light"] .klm-studio-btn[data-key="datatable"] { background: #e0f7f5 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="audio"],
        [data-theme="light"] .klm-studio-btn[data-key="audio"] { background: #e0f7f5 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="slides"],
        [data-theme="light"] .klm-studio-btn[data-key="slides"] { background: #fcfbd0 !important; }
        body[data-scheme="light"] .klm-studio-btn .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn .klm-studio-btn-icon { color: #6b6b6b !important; }
        body[data-scheme="light"] .klm-studio-btn .klm-studio-btn-label,
        [data-theme="light"] .klm-studio-btn .klm-studio-btn-label { color: #2d2f31 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="mindmap"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="mindmap"] .klm-studio-btn-icon { color: #7a2ea8 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="report"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="report"] .klm-studio-btn-icon { color: #a15c00 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="flashcards"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="flashcards"] .klm-studio-btn-icon { color: #d46622 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="keyterms"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="keyterms"] .klm-studio-btn-icon { color: #0f7d45 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="infographic"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="infographic"] .klm-studio-btn-icon { color: #c6283a !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="quiz"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="quiz"] .klm-studio-btn-icon { color: #1560b8 !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="datatable"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="datatable"] .klm-studio-btn-icon { color: #0d6e6a !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="audio"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="audio"] .klm-studio-btn-icon { color: #0d6e6a !important; }
        body[data-scheme="light"] .klm-studio-btn[data-key="slides"] .klm-studio-btn-icon,
        [data-theme="light"] .klm-studio-btn[data-key="slides"] .klm-studio-btn-icon { color: #867200 !important; }

        /* ── Source search box: clean unified white card ──
           Reported as "I don't want it like that, there's no secondary
           color behind the search." Both halves share a white background,
           a single hairline border wraps the whole card, and the inner
           horizontal divider between the input row and the chip row is
           gone. */
        body[data-scheme="light"] .klm-src-search-box,
        [data-theme="light"] .klm-src-search-box {
            background: #ffffff !important;
            border: 1px solid rgba(15,23,42,0.10) !important;
            border-bottom: none !important;
            border-radius: 16px 16px 0 0 !important;
            padding: 14px 16px 6px !important;
        }
        body[data-scheme="light"] .klm-src-search-wrap:focus-within .klm-src-search-box,
        [data-theme="light"] .klm-src-search-wrap:focus-within .klm-src-search-box {
            border-color: rgba(15,23,42,0.14) !important;
        }
        body[data-scheme="light"] .klm-src-search-footer,
        [data-theme="light"] .klm-src-search-footer {
            background: #ffffff !important;
            border: 1px solid rgba(15,23,42,0.10) !important;
            border-top: none !important;
            border-radius: 0 0 16px 16px !important;
            padding: 6px 16px 12px !important;
        }
        body[data-scheme="light"] .klm-src-search-wrap:focus-within .klm-src-search-footer,
        [data-theme="light"] .klm-src-search-wrap:focus-within .klm-src-search-footer {
            border-color: rgba(15,23,42,0.14) !important;
        }
        body[data-scheme="light"] .klm-src-search-box textarea,
        [data-theme="light"] .klm-src-search-box textarea {
            font-size: 14px !important;
            color: #1f2937 !important;
        }
        body[data-scheme="light"] .klm-src-search-box i,
        [data-theme="light"] .klm-src-search-box i {
            color: #9ca3af !important;
        }
        /* Tag pills (Web / Fast Research): bordered white pills with a
           chevron-down to read as dropdown selectors instead of flat
           text on a gray panel. */
        body[data-scheme="light"] .klm-src-search-footer .klm-search-tag,
        body[data-scheme="light"] .klm-picker-search-tags .klm-search-tag,
        [data-theme="light"] .klm-src-search-footer .klm-search-tag,
        [data-theme="light"] .klm-picker-search-tags .klm-search-tag {
            background: #ffffff !important;
            border: 1px solid rgba(15,23,42,0.12) !important;
            color: #1f2937 !important;
            padding: 6px 10px 6px 12px !important;
            border-radius: 999px !important;
            gap: 7px !important;
            font-size: 13px !important;
            font-weight: 500 !important;
        }
        body[data-scheme="light"] .klm-src-search-footer .klm-search-tag::after,
        body[data-scheme="light"] .klm-picker-search-tags .klm-search-tag::after,
        [data-theme="light"] .klm-src-search-footer .klm-search-tag::after,
        [data-theme="light"] .klm-picker-search-tags .klm-search-tag::after {
            content: '';
            width: 9px;
            height: 9px;
            margin-left: 2px;
            border-right: 1.6px solid #6b7280;
            border-bottom: 1.6px solid #6b7280;
            transform: translateY(-2px) rotate(45deg);
            display: inline-block;
        }
        /* Arrow-right go button: light surface so it doesn't pop as a
           competing accent; matches the rest of the now-clean card. */
        body[data-scheme="light"] .klm-picker-search-go,
        [data-theme="light"] .klm-picker-search-go {
            background: #fafafa !important;
            color: #1f2937 !important;
        }
        body[data-scheme="light"] .klm-picker-search-go:hover,
        [data-theme="light"] .klm-picker-search-go:hover {
            background: #e7ebf0 !important;
        }
        body[data-scheme="light"] .klm-source-type-btn,
        [data-theme="light"] .klm-source-type-btn {
            background: #ffffff !important;
            border: 1px solid rgba(15,23,42,0.08) !important;
            color: #4b5563 !important;
            font-weight: 600 !important;
            border-radius: 10px !important;
            padding: 6px 12px !important;
            font-size: 12px !important;
        }