/* Chat panel: scroll container, message bubbles, streaming animation,
   thinking UI, papers-found section, code-block formatting, chat input. */

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--radius);
    line-height: 1.6;
    animation: fadeIn 0.3s ease;
    font-size: 14px;
}

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

.message.user {
    /* Anchored to the left, slightly indented from the assistant bubble so
       the speaker-turn alternation is still readable at a glance. */
    align-self: flex-start;
    margin-left: 24px;
    background: var(--primary);
    color: white;
    border-bottom-left-radius: 2px;
}

.message.assistant {
    align-self: flex-start;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-bottom-left-radius: 2px;
}

/* Inline thinking message in chat */
.message.thinking-message {
    background: var(--bg-subtle);
    border: 1px dashed var(--border-strong);
    font-size: 13px;
    padding: 12px 16px;
}

.thinking-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--primary);
    font-weight: 500;
}

.thinking-toggle {
    font-size: 10px;
    transition: transform 0.2s;
}

.thinking-count {
    color: #64748b;
    font-size: 11px;
    margin-left: auto;
}

.thinking-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.thinking-content.collapsed {
    display: none;
}

.thinking-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-area {
    padding: 16px 32px 24px;
    background: var(--bg-main);
    border-top: 1px solid var(--border);
}

.chat-input-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.2s;
}

.chat-input-wrapper:focus-within {
    border-color: var(--primary-light);
}

.chat-input {
    width: 100%;
    min-height: 60px;
    max-height: 200px;
    padding: 0 0 8px 0;
    border: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

.chat-input::placeholder {
    color: #94a3b8;
}

.input-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.mode-dropdown {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.mode-dropdown:hover {
    background: rgba(27, 68, 121, 0.08);
}

.download-cap-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: rgba(27, 68, 121, 0.05);
    border-radius: 6px;
}

.download-cap-control label {
    white-space: nowrap;
}

.download-cap-control input[type="range"] {
    width: 80px;
    cursor: pointer;
}

.download-cap-control .value-display {
    min-width: 20px;
    text-align: center;
    font-weight: 500;
    color: var(--primary);
}

.send-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.send-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.send-btn:not(:disabled):hover {
    background: var(--primary-light);
    transform: scale(1.05);
}

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

/* Stop button — same footprint as send-btn so swapping in/out doesn't shift
   the input row. Red palette signals "cancel in flight". */
.stop-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #dc2626;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.stop-btn:hover {
    background: #b91c1c;
    transform: scale(1.05);
}

.stop-btn svg {
    width: 14px;
    height: 14px;
}

.input-container {
    padding: 12px 24px 20px;
    display: flex;
    gap: 12px;
    background: var(--bg-main);
}

.input-container input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--input-border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-card);
    color: var(--text-main);
}

.input-container input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(4, 145, 154, 0.1);
}

.input-container button {
    padding: 12px 28px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Chivo', sans-serif;
    transition: background 0.2s, transform 0.15s;
}

.input-container button:hover:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-1px);
}

.input-container button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.thinking-step {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius);
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: slideIn 0.3s ease;
    border-left: 3px solid transparent;
}

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

.thinking-step.analyzing {
    background: #e0f2fe;
    color: #0369a1;
    border-left-color: #0ea5e9;
}

.thinking-step.planning {
    background: #fef3c7;
    color: #92400e;
    border-left-color: #f59e0b;
}

.thinking-step.tool {
    background: #d1fae5;
    color: #065f46;
    border-left-color: var(--accent);
}

.thinking-step.result {
    background: #e0e7ff;
    color: #3730a3;
    border-left-color: #6366f1;
    margin-left: 50px;
}

.thinking-step.complete {
    background: #f0fdf4;
    color: #166534;
    border-left-color: var(--accent);
}

.thinking-step .icon {
    font-size: 15px;
    flex-shrink: 0;
}

.thinking-step .content {
    flex: 1;
}

.thinking-step .details {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}

.session-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid var(--secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-indicator.ready {
    background: var(--accent);
}

.status-indicator.initializing {
    background: #f59e0b;
    animation: pulse 1s infinite;
}

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

/* Heartbeat ~70 bpm (857 ms/beat) while a chat request is streaming. */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); opacity: 1; }
    25% { transform: scale(1.18); opacity: 0.95; }
    50% { transform: scale(0.92); opacity: 0.55; }
    75% { transform: scale(1.12); opacity: 0.95; }
}

.chat-heartbeat {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, #10b981);
    margin: 0 8px;
    flex: 0 0 auto;
}

body.chat-active .chat-heartbeat {
    display: inline-block;
    animation: heartbeat 857ms ease-in-out infinite;
}

/* Status bar pinned just above the chat input. Shows heartbeat,
   current activity label, elapsed wall-clock seconds, and token usage. */
.chat-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary, transparent);
    color: var(--muted, #64748b);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.chat-status-bar .chat-status-label {
    font-weight: 500;
    color: var(--text, inherit);
}

.chat-status-sep { opacity: 0.5; }

body.chat-active .chat-status-bar {
    color: var(--text, inherit);
}

/* Provider tag rendered next to each source row (e.g. "google scholar ↗"). */
.source-provider-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(16,185,129,0.12);
    color: var(--accent, #10b981);
    border-radius: 4px;
    font-size: 11px;
    text-decoration: none;
}
.source-provider-tag:hover { text-decoration: underline; }

/* Enrichment chip — secondary databases that cleaned up the record
   (Crossref bibliographic patch, OpenAlex abstract fill, Unpaywall OA).
   Visually subtler than the upstream-source chip so the user can tell
   "where it came from" vs "what enriched it" at a glance. */
.source-enrichment-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    background: rgba(99,102,241,0.10);
    color: #6366f1;
    border: 1px dashed rgba(99,102,241,0.35);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
}

/* Rolling "..." next to the active thinking-mode label. Cycles 0→1→2→3
   dots so the user sees the panel is alive while the step is in flight. */
.thinking-dots {
    display: none;
    margin-left: 4px;
    width: 1.4em;
    color: var(--muted, #94a3b8);
    font-weight: 600;
    letter-spacing: 1px;
}
.thinking-dots::after {
    content: '';
    animation: thinking-dots 1.2s steps(4, end) infinite;
}
@keyframes thinking-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
body.chat-active .thinking-message:last-of-type .thinking-dots {
    display: inline-block;
}

/* Compact relevance chip beside the details button. Replaces the old
   full-row "Relevance: 64.0%" label that wasted vertical space. */
.source-relevance {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(99,102,241,0.12);
    color: var(--primary, #6366f1);
    border-radius: 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* References list rendered at the end of an assistant message — keep it
   compact so a long bibliography doesn't overwhelm the answer. */
.references-block {
    font-size: 12.5px;
    color: var(--muted, #64748b);
    line-height: 1.5;
    margin-top: 4px;
}
.references-block div { margin: 2px 0; }
.references-block em { color: var(--text, #1e293b); }
.references-block a { color: var(--primary, #6366f1); }

.intent-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.intent-badge.natural_products_only {
    background: #dcfce7;
    color: #166534;
}

.intent-badge.papers_only {
    background: #dbeafe;
    color: #1e40af;
}

.intent-badge.combined_research {
    background: #fef3c7;
    color: #92400e;
}

.intent-badge.follow_up {
    background: #fce7f3;
    color: #9d174d;
}

/* Thinking panel collapse */
.thinking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.thinking-collapse-btn {
    font-size: 11px;
    color: var(--secondary);
    cursor: pointer;
    border: none;
    background: none;
    padding: 2px 6px;
    font-weight: 500;
}
.thinking-step.collapsed .step-details { display: none; }
.thinking-step .step-summary {
    display: none;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.thinking-step.collapsed .step-summary { display: block; }
.thinking-step .chevron {
    cursor: pointer;
    font-size: 10px;
    margin-right: 4px;
    transition: transform 0.2s;
}
.thinking-step.collapsed .chevron { transform: rotate(-90deg); }

/* Papers found section */
.papers-found {
    margin-top: 14px;
    padding: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    font-size: 13px;
}
.papers-found h4 {
    color: #166534;
    margin-bottom: 10px;
    font-size: 13px;
    font-family: 'Chivo', sans-serif;
}
.paper-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #dcfce7;
}
.paper-item:last-of-type { border-bottom: none; }
.paper-item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--secondary);
}
.paper-item label {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.5;
    cursor: pointer;
}
.paper-item .paper-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.add-to-kb-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    font-family: 'Chivo', sans-serif;
    font-weight: 500;
}
.add-to-kb-btn:hover { background: #037a82; }
.add-to-kb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Query info in thinking steps */
.query-info {
    font-size: 11px;
    color: var(--secondary);
    margin-top: 4px;
}
.query-info code {
    background: #e0f2fe;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Quicksand', monospace;
}

/* Code blocks in messages */
.message code {
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Quicksand', monospace;
    font-size: 0.9em;
}

/* ── Pipeline-step badges ────────────────────────────────────────────────── */
.pipeline-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    vertical-align: middle;
    white-space: nowrap;
}
.pipeline-structured {
    background: #dcfce7;
    color: #166534;
}
.pipeline-full_text {
    background: #dbeafe;
    color: #1e40af;
}
.pipeline-abstract {
    background: #fef3c7;
    color: #92400e;
}
.pipeline-none {
    background: #f1f5f9;
    color: #64748b;
}

/* KB tag shown on multi-KB source cards */
.source-kb-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 10px;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 4px;
}

/* Source card "details" link */
.paper-detail-link {
    font-size: 11px;
    color: var(--secondary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
}
.paper-detail-link:hover { text-decoration: underline; }

/* ── Paper Detail Panel ──────────────────────────────────────────────────── */
.paper-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 95vw;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);
    z-index: 900;
    overflow-y: auto;
    display: block;
}
.paper-detail-panel[hidden] { display: none; }

.paper-detail-inner {
    padding: 20px 20px 32px;
    position: relative;
}

.paper-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.paper-detail-close:hover {
    color: var(--text-main);
    background: var(--border);
}

.paper-detail-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-top: 2px;
}

.paper-detail-source,
.paper-detail-refs {
    font-size: 11px;
    color: var(--text-muted);
}

.paper-detail-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.4;
    margin: 0 0 8px;
    padding-right: 28px; /* avoid overlap with close button */
}

.paper-detail-authors {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 4px;
}

.paper-detail-bibline {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 6px;
}

.paper-detail-doi {
    font-size: 11px;
    margin: 0 0 12px;
}
.paper-detail-doi a {
    color: var(--secondary);
    word-break: break-all;
}

.paper-detail-abstract-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.paper-detail-abstract {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-main);
    white-space: pre-line;
}

.paper-detail-loading,
.paper-detail-error {
    font-size: 13px;
    color: var(--text-muted);
    padding: 12px 0;
}
.paper-detail-error { color: #dc2626; }

/* ── Advanced query options ──────────────────────────────────────────────── */
.advanced-options-disclosure {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-main);
    font-size: 12px;
}
.advanced-options-summary {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.advanced-options-summary::-webkit-details-marker { display: none; }
.advanced-options-summary::before {
    content: '▶ ';
    font-size: 9px;
    transition: transform 0.2s;
}
details[open] .advanced-options-summary::before { content: '▼ '; }

.advanced-options-body {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adv-opt-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adv-opt-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}
.adv-opt-label span { color: var(--primary); font-variant-numeric: tabular-nums; }

.adv-opt-row input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--secondary);
}

.adv-kb-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}
.adv-kb-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}
.adv-kb-option input[type="checkbox"] {
    accent-color: var(--secondary);
}

/* Conversation search box */
.conv-search-wrapper {
    margin-bottom: 8px;
}
.conv-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text-main);
    outline: none;
    box-sizing: border-box;
}
.conv-search-input:focus { border-color: var(--secondary); }

.conv-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.conv-search-result-item {
    padding: 6px 8px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 12px;
}
.conv-search-result-item:hover { background: var(--bg-main); }
.conv-search-result-title { font-weight: 600; color: var(--primary); }
.conv-search-result-snippet { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* Export button on conversation history items */
.chat-export-btn {
    font-size: 10px;
    color: var(--secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
    margin-left: 2px;
}
.chat-export-btn:hover { opacity: 1; }

/* ── Provenance disclosure (per-assistant-message) ───────────────────────── */
.provenance-disclosure { margin-top: 8px; font-size: 0.9em; }
.provenance-disclosure summary { cursor: pointer; color: var(--accent, #4a90e2); }
.prov-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.prov-table th, .prov-table td { border: 1px solid #ddd; padding: 2px 6px; text-align: left; }
.prov-prompt, .prov-response { background: #f5f5f5; padding: 6px; max-height: 240px; overflow: auto; font-size: 0.85em; }
.prov-trace { margin: 0 0 8px 1em; }
.prov-block { padding: 4px 0; font-family: monospace; font-size: 0.85em; }

/* RO-Crate bundle download link */
.ro-crate-link { font-size: 0.85em; margin-left: 8px; }

/* Zotero button on paper-detail panel */
.zotero-btn {
    margin-top: 12px;
    padding: 6px 12px;
    background: var(--accent, #4a90e2);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Chivo', sans-serif;
    transition: all 0.2s;
    width: 100%;
}
.zotero-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.zotero-btn:not(:disabled):hover {
    background: var(--accent-light, #5a9fee);
    transform: translateY(-1px);
}

/* Cycle C: Fetch external resources button + progress pane */
.fetch-resources-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--primary, #5a8c4a);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Chivo', sans-serif;
    transition: all 0.2s;
    width: 100%;
}
.fetch-resources-btn:disabled { opacity: 0.5; cursor: wait; }
.fetch-resources-btn:not(:disabled):hover {
    background: var(--primary-light, #6ea05a);
    transform: translateY(-1px);
}
.fetch-resources-progress {
    margin-top: 8px;
    padding: 8px;
    background: var(--surface-2, #f5f5f5);
    border-radius: 4px;
    font-size: 12px;
}
.fetch-resources-progress .fetch-resources-header { font-weight: 600; margin-bottom: 4px; }
.fetch-resources-progress .fetch-resources-log {
    max-height: 200px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
    white-space: pre-wrap;
}
.fetch-resources-error { color: #c0392b; }

/* Inline capsule figure thumbnails (Task 13) */
.inline-figure {
    max-height: 120px;
    max-width: 200px;
    cursor: zoom-in;
    margin: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    vertical-align: middle;
}

.figure-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
}

.figure-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Sub-project C — code excerpt + figure attachment panels (2026-05-15) */
.attachments-panel {
    margin-top: 16px;
    padding: 12px;
    background: var(--surface, #1e1e1e);
    border-radius: 8px;
    border: 1px solid var(--border, #333);
}

.attachments-heading {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.attachments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.code-excerpt {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
}

.code-excerpt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    font-size: 11px;
    color: #999;
}

.code-excerpt-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.code-excerpt-meta .file-path { color: #ddd; }
.code-excerpt-meta .symbol-name { color: #6cb6ff; }
.code-excerpt-meta .line-range { color: #888; }

.code-excerpt-source-link {
    color: #6cb6ff;
    text-decoration: none;
    font-size: 11px;
}

.code-excerpt-source-link:hover { text-decoration: underline; }

.code-excerpt pre {
    margin: 0;
    padding: 10px;
    overflow-x: auto;
    background: transparent;
}

.figure-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.figure-card .figure-thumbnail {
    max-width: 100%;
    max-height: 240px;
    display: block;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
    object-fit: contain;
}

.figure-card .figure-label {
    font-weight: 600;
    font-size: 12px;
}

.figure-card .figure-caption {
    font-size: 11px;
    color: #aaa;
}

/* ─────────────────────────────────────────────────────────────────────
   Live agentic visibility (May 2026 GUI refinement).
   - Elapsed counter in the thinking header.
   - Phase-progress strip for agentic / profound modes.
   - mode-expanded class makes the thinking content visible by default
     for those modes.
   ───────────────────────────────────────────────────────────────────── */

.thinking-elapsed {
    margin-left: auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--badge-soft-bg);
    border: 1px solid var(--badge-soft-border);
    border-radius: 999px;
    padding: 1px 8px;
}
/* When the thinking-count exists too, it sits after elapsed. */
.thinking-elapsed + .thinking-count { margin-left: 0; }

.thinking-phase-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 4px 0;
    padding: 6px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}
.thinking-phase-strip .phase-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.thinking-phase-strip .phase-pill .phase-label {
    letter-spacing: 0.02em;
}
.thinking-phase-strip .phase-pill.done {
    color: var(--accent);
    background: var(--badge-good-bg);
    border-color: var(--badge-good-border);
}
.thinking-phase-strip .phase-pill.active {
    color: var(--primary);
    background: var(--badge-info-bg);
    border-color: var(--badge-info-border);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
.thinking-phase-strip .phase-sep {
    opacity: 0.45;
    user-select: none;
}

/* The mode-expanded class signals that the thinking panel should be
   visible by default — set on agentic / profound / literature_survey
   in createThinkingMessage(). Nothing else to do here; the .collapsed
   class is simply omitted at construction time. The marker exists so
   future styles (e.g. taller default content area) can target it. */
.message.thinking-message.mode-expanded {
    /* room to breathe when the panel is visible without a click */
    padding-bottom: 14px;
}

/* References block: hard URL/DOI wrapping so they don't overflow. */
.references-block,
.message.assistant a[href] {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Mode dropdown — give it a clear chip outline so it doesn't look
   like plain text. */
.mode-dropdown {
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
}
.mode-dropdown:hover {
    border-color: var(--primary-light);
}

/* Message widths scale with the viewport so interaction step boxes
   expand when the user widens the window. Cap at 1200px on very wide
   displays so chat rows don't become unreadably long. Thinking-message
   panels get a wider cap because they hold structured step content
   (provider chips, source cards) that benefits from horizontal space. */
@media (min-width: 1100px) {
    .message { max-width: min(85%, 900px); }
    .message.thinking-message { max-width: min(95%, 1200px); }
}
@media (min-width: 1500px) {
    .message { max-width: min(80%, 1100px); }
    .message.thinking-message { max-width: min(92%, 1400px); }
}
@media (min-width: 1900px) {
    .message { max-width: min(70%, 1300px); }
    .message.thinking-message { max-width: min(88%, 1700px); }
}

/* ── Structured agentic events: intent_result, plan ──────────────────────── */

.thinking-step.agentic-structured {
    /* Override the category color blocks with a neutral elevated card so the
       structured payload is readable; keep the colored border-left so users can
       still tell intent (analyzing) and plan (planning) apart at a glance. */
    background: var(--bg-elevated);
    color: var(--text-main);
}
.thinking-step.agentic-structured .content > div:first-child {
    font-size: 13px;
}
.agentic-conf {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--badge-info-bg);
    color: var(--badge-info-fg);
    border: 1px solid var(--badge-info-border);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.agentic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.agentic-pill {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--badge-soft-bg);
    color: var(--badge-soft-fg);
    border: 1px solid var(--badge-soft-border);
    font-family: 'Quicksand', monospace;
}
.agentic-pill-muted {
    opacity: 0.85;
    font-family: inherit;
}
.agentic-reasoning {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.45;
    font-style: italic;
}
.agentic-plan-list {
    margin: 8px 0 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.agentic-plan-list li {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.4;
}
.agentic-plan-list li .agentic-pill {
    margin-right: 6px;
}
.agentic-plan-desc {
    color: var(--text-main);
}
.agentic-plan-query {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}
.agentic-plan-query code {
    background: var(--code-bg);
    color: var(--code-fg);
    border: 1px solid var(--code-border);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Quicksand', monospace;
}

/* Query rephrasing card: dimmed original on top, bold rewritten below,
   tiny down-arrow between them. */
.agentic-rephrase-original {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
    text-decoration-thickness: 1px;
    line-height: 1.4;
}
.agentic-rephrase-arrow {
    color: var(--text-muted);
    font-size: 11px;
    margin: 1px 0 0 2px;
    line-height: 1;
}
.agentic-rephrase-rewritten {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.4;
}

/* Indented sub-steps with connector lines. Any thinking-step marked
   data-depth="1" is treated as a child of the immediately preceding
   top-level step. We render:
   - 24px (or 48px) left indent — the indentation level
   - a CONTINUOUS vertical guide rail running through the entire run of
     sibling depth-1 (or depth-2) steps. We achieve continuity through the
     8px inter-step margin with a ::after extension that paints a line
     covering the gap below each step.
   - a small horizontal tick at the icon's vertical centre, "meeting" the
     vertical line — the L-shaped tree connector.

   Implementation:
   - border-left = vertical rail inside the step's own box.
   - ::after extends the rail through the bottom margin (height: 8px,
     bottom: -8px) so two stacked siblings appear connected.
   - The LAST depth-N child in a run is detected via :not(+ depth-N) is
     hard in CSS, so the trailing ::after is fine: it terminates exactly
     where the next non-child sibling begins (the visual rail naturally
     stops at the next top-level step). */
.thinking-step[data-depth="1"],
.thinking-step[data-depth="2"] {
    position: relative;
    padding-left: 18px;
    border-left: 1.5px solid var(--border);
}
.thinking-step[data-depth="1"] { margin-left: 24px; }
.thinking-step[data-depth="2"] { margin-left: 48px; }

/* The L-connector horizontal tick: a 14px stub at the icon row pointing
   from the vertical rail to the step content. */
.thinking-step[data-depth="1"]::before,
.thinking-step[data-depth="2"]::before {
    content: '';
    position: absolute;
    left: -1.5px;            /* sit on top of the rail */
    top: 18px;               /* aligned with the icon's mid-row */
    width: 14px;
    height: 1.5px;
    background: var(--border);
    border-bottom-left-radius: 4px;
}

/* The rail-extension that bridges the 8px inter-step margin so a run of
   siblings looks like ONE continuous vertical line instead of N short
   stubs with gaps. */
.thinking-step[data-depth="1"]::after,
.thinking-step[data-depth="2"]::after {
    content: '';
    position: absolute;
    left: -1.5px;
    bottom: -9px;            /* 8px margin-bottom + 1px overdraw */
    width: 1.5px;
    height: 9px;
    background: var(--border);
}

/* When the next sibling is NOT a child at the same depth, the rail must
   stop. CSS :has() lets us check the immediate next sibling cleanly. */
.thinking-step[data-depth="1"]:not(:has(+ .thinking-step[data-depth="1"]))::after,
.thinking-step[data-depth="1"]:not(:has(+ .thinking-step[data-depth="2"]))::after { /* depth-2 child still child of depth-1 chain */
    /* No-op: kept for documentation. The actual "stop" rule below
       overrides correctly when neither continuation exists. */
}
.thinking-step:not([data-depth="1"]):not([data-depth="2"]) {
    /* When a top-level step follows a depth-N run, the previous step's
       ::after still paints. We can't reach back to remove it from CSS
       alone, so we accept a tiny trailing 9px stub. It reads as "rail
       ended here" rather than as a disconnect. */
}

/* Background-color tweak: depth-N steps reuse the same coloured pills
   as top-level steps. The continuous rail looks best against a calmer
   surface, so soften the background for indented children. */
.thinking-step[data-depth="1"],
.thinking-step[data-depth="2"] {
    background: var(--bg-subtle, rgba(0,0,0,0.02));
}

/* Override the legacy .thinking-step.result rule which forces
   margin-left:50px — that conflicts with our depth-based indents. */
.thinking-step.result[data-depth="1"] { margin-left: 24px; }
.thinking-step.result[data-depth="2"] { margin-left: 48px; }

/* Header icon-links (GitHub, About). Match the theme-toggle visual
   weight so the three buttons look like a coherent group. */
.header-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.header-icon-link:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

/* Per-provider progress: thin horizontal bar; same look in dark mode via
   var(--badge-soft-*). */
.agentic-progress-bar {
    margin-top: 6px;
    height: 6px;
    width: 100%;
    background: var(--badge-soft-bg);
    border: 1px solid var(--badge-soft-border);
    border-radius: 999px;
    overflow: hidden;
}
.agentic-progress-bar-fill {
    height: 100%;
    background: var(--primary);
    transition: width 200ms ease-out;
}
