/* ════════════════════════════════════════════════════════════════════
   Research panel — cards, plans, task progress, loader
   ════════════════════════════════════════════════════════════════════
   Lifted from inline styles in illustrations.js / research.js so
   dark mode, theming, and maintenance are trivial. All colors go
   through CSS variables (see variables.css).
   ════════════════════════════════════════════════════════════════════ */

/* ── Research source card (sidebar) ─────────────────────────────────── */

.research-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
}
.research-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.research-card__body {
    flex: 1;
    min-width: 0;
}
.research-card__title {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}
.research-card__index {
    color: var(--accent-blue);
    margin-right: 4px;
}
.research-card__url {
    font-size: 11px;
    margin-top: 2px;
}
.research-card__url a {
    color: var(--accent-blue);
    text-decoration: none;
    word-break: break-all;
}
.research-card__url a:hover {
    text-decoration: underline;
}
.research-card__summary {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}
.research-card__preview {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-style: italic;
    border-left: 2px solid var(--border);
    padding-left: 6px;
}
.research-card__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 4px;
}
.research-card__cite-btn {
    font-size: 10px;
}
.research-card__delete-btn {
    color: var(--accent-red);
}
.research-card__tags {
    margin-top: 4px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.research-card__tag {
    font-size: 10px;
    padding: 1px 6px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    color: var(--text-hint);
}

/* ── Research plan card (Sophia orchestration) ─────────────────────── */

.research-plan-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    margin-bottom: 6px;
    background: var(--bg-surface);
    font-size: 12px;
}
.research-plan-card--degraded {
    border-color: var(--accent-orange, #f59e0b);
}
.research-plan-card__top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: flex-start;
}
.research-plan-card__main {
    flex: 1;
    min-width: 0;
}
.research-plan-card__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Plan hoàn thành: click tiêu đề mở lại briefing (Thầy 2026-07-12) */
.research-plan-card__title--clickable {
    cursor: pointer;
}
.research-plan-card__title--clickable:hover {
    color: var(--color-primary, #079d9d);
    text-decoration: underline;
}
.research-plan-card__meta {
    color: var(--text-hint);
    font-size: 11px;
    margin-top: 2px;
}
.research-plan-card__badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 3px;
}
.research-plan-card__badge--degraded {
    background: var(--accent-orange, #f59e0b);
    color: #fff;
}
.research-plan-card__action {
    margin-top: 4px;
    width: 100%;
}
.research-plan-card__delete {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-hint);
    padding: 2px 4px;
}
.research-plan-card__tasks {
    margin-top: 4px;
}

/* ── Task progress row (inside plan card during run) ──────────────── */

.research-task-row {
    display: flex;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    align-items: center;
}
.research-task-row--active {
    font-weight: 600;
    color: var(--text-primary);
}
.research-task-row__spinner {
    display: inline-block;
    animation: research-spin 1s linear infinite;
}
.research-task-row__icon {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.research-task-row__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.research-task-row__count {
    color: var(--text-hint);
}
.research-task-row__detail {
    font-size: 10px;
    color: var(--color-primary);
    margin-left: 18px;
    margin-bottom: 2px;
}
/* L10.37 — mini timeline bar: 4 segments per task (search/vet/fetch/synth)
   so parallel tasks each show their own phase pulsing simultaneously. */
.research-task-row__bar {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-left: 18px;
    margin-right: 4px;
    margin-top: 2px;
    margin-bottom: 4px;
    border-radius: 2px;
    overflow: hidden;
}
.research-task-row__seg {
    flex: 1;
    background: rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease;
    border-radius: 1px;
}
.research-task-row__seg--done {
    background: var(--success, #22c55e);
}
.research-task-row__seg--active {
    background: var(--color-primary, #3b82f6);
    animation: research-bar-pulse 1.4s ease-in-out infinite;
}
.research-task-row__seg--failed {
    background: rgba(239, 68, 68, 0.55);
}
.research-task-row__seg--skipped {
    background: rgba(0, 0, 0, 0.18);
}
@keyframes research-bar-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@keyframes research-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Loader modal (Sophia clarify / plan generation) ──────────────── */

.research-loading-modal {
    text-align: center;
    padding: 28px 20px;
}
.research-loading-modal__spinner {
    font-size: 40px;
    margin-bottom: 12px;
}
.research-loading-modal__subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}
.research-loading-modal__hint {
    color: var(--text-hint);
    font-size: 11px;
    margin: 8px 0 0;
}
.research-loading-modal__cancel {
    margin-top: 12px;
}

/* ── Empty state + CTA (no plans / no sources yet) ────────────────── */

.research-empty-state {
    padding: 16px 8px;
    text-align: center;
    color: var(--text-hint);
}
.research-empty-state__title {
    font-size: 12px;
    margin: 0 0 8px 0;
}
.research-empty-state__hint {
    font-size: 11px;
    color: var(--text-hint);
    margin: 4px 0 0 0;
    line-height: 1.5;
}
.research-empty-state__cta {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ── Citation popup tabs (Editor.insertCitationPopup) ─────────────── */

.citation-popup {
    min-width: 320px;
}
.citation-tab {
    flex: 1;
    padding: 4px 8px;
    font-size: 11px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.citation-tab--active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    font-weight: 600;
}
.citation-existing-item:hover {
    background: var(--bg-elevated);
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .research-plan-card__meta {
        display: flex;
        flex-direction: column;
        font-size: 10px;
        line-height: 1.4;
    }
    .research-plan-card__title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ── Sophia v3.10 options modal ─────────────────────────────────────── */

.research-options-modal {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 28px 20px 28px;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
}
.research-options-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin: 0 0 8px 0;
    letter-spacing: 0.01em;
}
.research-options-modal__label--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.research-options-modal__suggest-hint {
    font-size: 11.5px;
    color: var(--text-tertiary, #888);
    margin: 0 0 6px 0;
    min-height: 18px;
    line-height: 1.4;
}
.research-options-modal__suggest-hint--pending {
    color: var(--text-secondary, #555);
}
.research-options-modal__suggest-hint--ai {
    color: var(--primary, #2a66a2);
    font-style: italic;
}
.research-options-modal__topic {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #111);
    box-sizing: border-box;
}
.research-options-modal__topic:focus {
    outline: none;
    border-color: var(--accent, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.12);
}
.research-options-modal__section {
    padding: 14px 16px;
    background: var(--bg-elevated, #fafafc);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.research-options-modal__section--depth {
    background: var(--bg-surface, #fff);
}
.research-options-modal__checkbox,
.research-options-modal__radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 2px 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.research-options-modal__checkbox input,
.research-options-modal__radio input {
    margin: 3px 0 0 0;
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #4a6cf7);
}
.research-options-modal__checkbox span,
.research-options-modal__radio span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.research-options-modal__checkbox strong,
.research-options-modal__radio strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111);
    line-height: 1.4;
}
.research-options-modal__checkbox small,
.research-options-modal__radio small {
    font-size: 12.5px;
    color: var(--text-tertiary, #707080);
    font-weight: 400;
    line-height: 1.5;
}
.research-options-modal__cost-note {
    margin: 0;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--text-secondary, #555);
    text-align: center;
    font-style: normal;
    background: var(--warning-tint, #fef3c7);
    border: 1px solid var(--accent-amber, #fde68a);
    border-radius: 6px;
    font-weight: 500;
}
.research-options-modal__sublabel {
    font-size: 13px;
    color: var(--text-secondary, #555);
    font-weight: 500;
    min-width: 110px;
}
.research-options-modal__sublabel-block {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary, #555);
    font-weight: 500;
}
.research-options-modal__lang-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.research-options-modal__lang-select {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #111);
    cursor: pointer;
}
.research-options-modal__lang-select:focus {
    outline: none;
    border-color: var(--accent, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.12);
}
.research-options-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.research-options-modal__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.research-options-modal__chip:hover {
    border-color: var(--accent, #4a6cf7);
}
.research-options-modal__chip input[type="checkbox"] {
    accent-color: var(--accent, #4a6cf7);
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.research-options-modal__chip input[type="checkbox"]:checked + span {
    color: var(--accent, #4a6cf7);
    font-weight: 600;
}
.research-options-modal__hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-tertiary, #888);
    line-height: 1.5;
}
.research-options-modal__checkbox--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.research-options-modal__checkbox--disabled input {
    cursor: not-allowed;
}
.research-options-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 28px 20px 28px;
    border-top: 1px solid var(--border, #e8e8ec);
    margin: 10px -28px -20px -28px;
    background: var(--bg-surface, #fff);
}
.research-options-modal__footer .btn {
    min-width: 100px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .research-options-modal {
        padding: 18px 18px 14px 18px;
        gap: 14px;
    }
    .research-options-modal__section {
        padding: 12px 14px;
    }
    .research-options-modal__footer {
        padding: 12px 18px 16px 18px;
        margin: 8px -18px -14px -18px;
    }
}

/* ── Sophia v3.10 mode badge + phase pips ──────────────────────────── */

.research-plan-card__badge--sophia {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.research-plan-card__phases {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--bg-elevated, #f7f7f9);
    border-radius: 6px;
    flex-wrap: wrap;
}
.research-plan-card__pip {
    flex: 1 1 auto;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: var(--text-tertiary, #999);
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.research-plan-card__pip small {
    font-size: 9px;
    line-height: 1.2;
    text-transform: lowercase;
    opacity: 0.8;
    text-align: center;
}
.research-plan-card__pip--done {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
}
.research-plan-card__pip--active {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    animation: sophia-pip-pulse 1.6s ease-in-out infinite;
}
@keyframes sophia-pip-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.6; }
}

@media (max-width: 480px) {
    .research-plan-card__pip {
        min-width: 56px;
        font-size: 12px;
    }
    .research-plan-card__pip small {
        font-size: 8px;
    }
}

/* ── Sophia v3.10 plan-detail tabs ─────────────────────────────────── */

.research-detail__tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border, #e8e8ec);
    overflow-x: auto;
    background: var(--bg-surface, #fff);
}
.research-detail__tab {
    flex-shrink: 0;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.research-detail__tab:hover { color: var(--text-primary, #111); }
.research-detail__tab--active {
    color: var(--accent, #4a6cf7);
    border-bottom-color: var(--accent, #4a6cf7);
}

.research-detail__body {
    padding: 16px 20px;
    /* L20 (Thầy 2026-07-12): đồng bộ typography giữa các tab — base sans
       13.5px thống nhất; serif chỉ dành cho thân Báo cáo (markdown-body);
       heading section các tab cùng một cỡ (xem __section-title dưới). */
    font-family: "Noto Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary, #1a1a1a);
}
/* Heading section thống nhất cho MỌI tab (Giải pháp/Nhân quả/Sơ đồ/...) —
   khớp .l11-panel__title bên tab Agents. */
.research-detail__body > h4,
.research-detail__body .research-diagram-block__head h4,
.research-detail__effort-group > h5 {
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #555);
}
.research-detail__body > h4:first-child { margin-top: 0; }

/* L10.31 — academic typography for the briefing body, using Google
   Noto fonts (full Vietnamese precomposed glyph support) so dấu sắc /
   huyền render as single characters instead of base + U+0301 combining
   pairs that Georgia/Times rendered as "Chiêˊn" instead of "Chiến".
   KaTeX (loaded in index.html) handles inline math $...$ / \[...\]
   the same way LaTeXLive does. */
/* L20_003 — hàng nút export trên tab Báo cáo (Word/PDF + xuất/mở node) */
.research-report__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e8e8ec);
}
.research-detail__body .markdown-body {
    font-family: "Noto Serif", "Source Serif Pro", "Charter", "Iowan Old Style", "Times New Roman", Georgia, serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #1a1a1a;
    max-width: 760px;
    margin: 0 auto;
    -webkit-font-feature-settings: "kern", "liga", "calt";
            font-feature-settings: "kern", "liga", "calt";
}
.research-detail__body .markdown-body h1,
.research-detail__body .markdown-body h2,
.research-detail__body .markdown-body h3,
.research-detail__body .markdown-body h4 {
    font-family: "Noto Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.005em;
}
.research-detail__body .markdown-body h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0.4em 0 0.3em;
    line-height: 1.3;
    color: #0a0a0a;
    letter-spacing: -0.01em;
}
/* italic subtitle right under title (prompt requires it) */
.research-detail__body .markdown-body h1 + p em:only-child,
.research-detail__body .markdown-body h1 + p > em:first-child:last-child {
    display: block;
    font-size: 13.5px;
    color: var(--text-secondary, #555);
    margin-bottom: 0.8em;
}
.research-detail__body .markdown-body h2 {
    font-size: 16.5px;
    font-weight: 700;
    margin: 1.7em 0 0.45em;
    padding-bottom: 4px;
    color: #0a0a0a;
    border-bottom: 1px solid var(--border, #e2e2e5);
}
.research-detail__body .markdown-body h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 1.2em 0 0.3em;
    color: #1a1a1a;
}
.research-detail__body .markdown-body h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 1em 0 0.25em;
    color: #333;
}
.research-detail__body .markdown-body p {
    margin: 0 0 0.7em;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.research-detail__body .markdown-body blockquote {
    border-left: 3px solid #d4a23a;
    background: rgba(212, 162, 58, 0.06);
    padding: 12px 18px;
    margin: 1em 0 1.4em;
    /* L20 UI-audit: KHÔNG italic — máy thiếu Noto Serif italic rơi về
       Georgia (không có glyph VN precomposed) → dấu tách "giâ´c".
       Khối đã nổi bật nhờ nền vàng + border. */
    font-style: normal;
    color: #2a2a2a;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
}
.research-detail__body .markdown-body blockquote p {
    text-align: left;
    margin: 0 0 0.55em;
}
.research-detail__body .markdown-body blockquote p:last-child { margin-bottom: 0; }
.research-detail__body .markdown-body blockquote::before {
    content: "Abstract";
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a15c00;
    margin-bottom: 6px;
}
.research-detail__body .markdown-body ul,
.research-detail__body .markdown-body ol {
    margin: 0.4em 0 1em;
    padding-left: 1.8em;
}
.research-detail__body .markdown-body li {
    margin: 0.22em 0;
    text-align: justify;
    hyphens: auto;
}
.research-detail__body .markdown-body code {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;
    font-size: 0.92em;
    background: #f4f4f7;
    padding: 1px 5px;
    border-radius: 3px;
    color: #b52626;
}
.research-detail__body .markdown-body pre {
    background: #f7f7f9;
    border: 1px solid #e1e1e3;
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.55;
}
.research-detail__body .markdown-body pre code {
    background: transparent;
    padding: 0;
    color: #1a1a1a;
}
.research-detail__body .markdown-body a {
    color: #1e6fb8;
    text-decoration: none;
    border-bottom: 1px dotted rgba(30, 111, 184, 0.45);
}
.research-detail__body .markdown-body a:hover { border-bottom-style: solid; }
.research-detail__body .markdown-body hr {
    border: none;
    border-top: 1px solid #e0e0e2;
    margin: 1.8em 0;
}
.research-detail__body .markdown-body strong {
    color: #0a0a0a;
    font-weight: 700;
}
/* Citation footnote sup — marked.js footnote extension renders [^x] as <sup><a>x</a></sup> */
.research-detail__body .markdown-body sup a {
    color: #1e6fb8;
    border: none;
    font-weight: 600;
    margin: 0 1px;
    font-size: 0.78em;
}
/* Footnotes list at bottom (auto-generated by marked footnote extension) */
.research-detail__body .markdown-body .footnotes {
    margin-top: 2.2em;
    padding-top: 1em;
    border-top: 2px solid var(--border, #e0e0e2);
    font-size: 12.5px;
    color: var(--text-secondary, #555);
}
.research-detail__body .markdown-body .footnotes ol { padding-left: 1.4em; }
.research-detail__body .markdown-body .footnotes p { text-align: left; margin: 0; }
/* Keywords paragraph — first <p> after blockquote (heuristic via :is) */
.research-detail__body .markdown-body blockquote + p strong:first-child {
    color: #a15c00;
}
/* Topic mini-header (above title) shown by viewSummary as <p style=…> */
.research-detail__body > p[style*="text-hint"] {
    font-size: 10.5px !important;
    color: var(--text-tertiary, #888) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: ui-sans-serif, system-ui, sans-serif;
    margin-bottom: 6px !important;
}

/* L10.33 — Findings tab table-of-contents.
   With 25-50 tasks × 60-100 cards, vertical scroll is unworkable.
   <details> wrapper auto-collapses on small screens; ordered list shows
   per-task subtopic + status pill + card count. Click jumps to anchor. */
.research-detail__toc {
    background: var(--bg-elevated, #f7f7f9);
    border: 1px solid var(--border, #e2e2e5);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0 16px;
    font-size: 13px;
}
.research-detail__toc summary {
    cursor: pointer;
    padding: 2px 0;
    font-weight: 600;
    color: var(--text-primary, #222);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.research-detail__toc summary::-webkit-details-marker { display: none; }
.research-detail__toc summary::before {
    content: "▸";
    margin-right: 6px;
    color: var(--text-tertiary, #999);
    transition: transform 0.15s ease;
    display: inline-block;
}
.research-detail__toc[open] summary::before {
    transform: rotate(90deg);
}
.research-detail__toc summary small {
    color: var(--text-tertiary, #888);
    font-weight: 400;
    font-size: 11.5px;
}
.research-detail__toc-list {
    /* L10.33.1 — drop decimal+inside (forces marker to wrap separately
       from the anchor). Custom counter on each <li> renders inline with
       the flex link instead. */
    list-style: none;
    padding: 8px 0 4px 0;
    margin: 0;
    counter-reset: toc-item;
    columns: 2;
    column-gap: 24px;
    column-rule: 1px dashed var(--border, #e0e0e0);
}
.research-detail__toc-list li {
    margin: 0;
    padding: 0;
    break-inside: avoid;
    counter-increment: toc-item;
}
.research-detail__toc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-secondary, #555);
    font-size: 12.5px;
    line-height: 1.4;
    transition: background 0.1s ease, color 0.1s ease;
}
.research-detail__toc-link::before {
    content: counter(toc-item) ".";
    color: var(--text-tertiary, #999);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
}
.research-detail__toc-link:hover {
    background: rgba(30, 111, 184, 0.08);
    color: var(--primary, #1e6fb8);
}
.research-detail__toc-link:hover::before {
    color: var(--primary, #1e6fb8);
}
.research-detail__toc-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.research-detail__toc-n {
    color: var(--text-tertiary, #888);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 6px;
    border-radius: 999px;
}
.research-detail__toc-link:hover .research-detail__toc-n {
    background: rgba(30, 111, 184, 0.15);
    color: var(--primary, #1e6fb8);
}
.research-detail__toc-st {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #bbb;
}
.research-detail__toc-st--done    { background: #2c8c5d; }
.research-detail__toc-st--failed  { background: #c93a32; }
.research-detail__toc-st--skipped { background: #999; }
.research-detail__toc-st--pending { background: #d4a23a; }
.research-detail__toc-st--searching,
.research-detail__toc-st--vetting,
.research-detail__toc-st--fetching,
.research-detail__toc-st--synthesizing {
    background: #1e6fb8;
    animation: library-running-pulse 1.4s ease-in-out infinite;
}

/* Anchor flash highlight when TOC link clicked */
.research-detail__task--flash {
    animation: cr-task-flash 1.2s ease-in-out;
}
@keyframes cr-task-flash {
    0%, 100% { background-color: transparent; }
    20%      { background-color: rgba(212, 162, 58, 0.18); }
}

@media (max-width: 700px) {
    .research-detail__toc-list { columns: 1; }
}

/* L10.32 — refetch button (re-clean existing raw_content) */
.research-detail__refetch-btn {
    background: var(--warning-tint, #fef3c7);
    border-color: var(--accent-amber, #f59e0b);
    color: var(--on-warning, #92400e);
    font-size: 11.5px;
}
.research-detail__refetch-btn:hover {
    background: var(--accent-amber, #f59e0b);
    color: #fff;
}

.research-detail__bibtex {
    background: var(--bg-elevated, #f7f7f9);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    max-height: 60vh;
}

/* Causes tree */
.research-detail__causes {
    list-style: none;
    padding: 0;
    margin: 0;
}
.research-detail__cause {
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    border-left: 2px solid var(--border-light, #f0f0f3);
    padding-left: 10px;
    margin-bottom: 2px;
}
.research-detail__cause-content { color: var(--text-primary, #111); }
.research-detail__cause-diff {
    font-size: 12px;
    color: var(--text-tertiary, #777);
    font-style: italic;
    margin-top: 3px;
    padding-left: 10px;
}

/* RWOS + type tags */
.tag-type, .tag-rwos, .tag-intervention, .tag-prob {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    text-transform: uppercase;
    vertical-align: middle;
}
.tag-type--A { background: #6366f1; color: #fff; }
.tag-type--E { background: #16a34a; color: #fff; }
.tag-type--F { background: #dc2626; color: #fff; }
.tag-type--B { background: #059669; color: #fff; }
.tag-type--C { background: #b91c1c; color: #fff; }
.tag-rwos--R { background: var(--warning-tint); color: var(--on-warning); }
.tag-rwos--W { background: var(--danger-tint); color: var(--on-danger); }
.tag-rwos--O { background: var(--success-tint); color: var(--on-success); }
.tag-rwos--S { background: var(--info-tint); color: var(--on-info); }
.tag-intervention { background: #fed7aa; color: #9a3412; }
.tag-prob { background: var(--bg-elevated, #eef); color: var(--text-secondary, #555); }

/* Solutions efforts */
.research-detail__effort-group { margin-bottom: 18px; }
.research-detail__effort-group h5 {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: var(--text-primary, #111);
}
.research-detail__effort-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.research-detail__effort-list li {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--color-primary, #079d9d);
    background: var(--bg-elevated, #f7f7f9);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
}
.research-detail__effort-list .effort-priority {
    display: inline-block;
    background: var(--info-tint, #dbeafe);
    color: var(--on-info, #1e40af);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: 1px;
}
.research-detail__effort-list .effort-strategy {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary, #555);
    margin-right: 2px;
}
.effort-meta {
    margin-top: 5px;
    display: flex;
    /* Thầy 2026-07-12: mỗi mục 1 dòng riêng — wrap tự do làm hàng lúc gộp
       lúc tách, khó quét mắt */
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    color: var(--text-secondary, #555);
    line-height: 1.45;
}
.effort-meta__item strong {
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
}
.research-detail__effort-list .rationale {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-hint, #999);
}

.research-detail__jit,
.research-detail__tradeoff {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 13px;
    padding: 10px 14px;
    background: var(--bg-elevated, #f7f7f9);
    border-radius: 6px;
    margin: 8px 0 16px;
}
.research-detail__jit dt,
.research-detail__tradeoff dt {
    font-weight: 600;
    color: var(--text-secondary, #555);
    text-transform: capitalize;
}
.research-detail__jit dd,
.research-detail__tradeoff dd {
    margin: 0;
    color: var(--text-primary, #111);
}

/* ── Research Library page ──────────────────────────────────────────── */

.library-group { margin-bottom: 24px; }
.library-group__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    padding: 8px 4px;
    border-bottom: 1px solid var(--border, #e8e8ec);
    margin: 0 0 8px 0;
}
.library-group__title small {
    font-weight: 400;
    color: var(--text-tertiary, #888);
    margin-left: 4px;
}
.library-group__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.library-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.library-row:hover {
    border-color: var(--accent, #4a6cf7);
    background: var(--bg-elevated, #fbfbfd);
}
.library-row:active { transform: translateY(1px); }
.library-row__main { flex: 1; min-width: 0; }
.library-row__topic {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.library-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary, #777);
}
.library-row__status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-elevated, #f7f7f9);
    color: var(--text-secondary, #555);
    text-transform: uppercase;
}
.library-row__status--running { background: var(--info-tint); color: var(--on-info); }
.library-row__status--completed { background: var(--success-tint); color: var(--on-success); }
.library-row__status--aborted,
.library-row__status--aborted_limit { background: var(--danger-tint); color: var(--on-danger); }
.library-row__status--clarifying { background: var(--warning-tint); color: var(--on-warning); }
.library-row__status--draft { background: #e5e7eb; color: #4b5563; }
.library-row__status--planning { background: #fed7aa; color: #9a3412; }

.library-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.library-badge--deep { background: #e0e7ff; color: #3730a3; }
.library-badge--quick { background: #fef3c7; color: #92400e; }
.library-badge--sophia {
    background: var(--brand-gradient, linear-gradient(135deg, #0497af, #09d3d3));
    color: #fff;
}
.library-badge--done { background: #d1fae5; color: #065f46; }

.library-row__counters {
    font-size: 11px;
    color: var(--text-tertiary, #999);
}
.library-row__cost {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.library-row__date {
    font-size: 11px;
    color: var(--text-tertiary, #999);
    margin-top: 2px;
}
.library-row__chev {
    font-size: 20px;
    color: var(--text-tertiary, #999);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .library-row { padding: 8px 10px; gap: 8px; }
    .library-row__topic { font-size: 13px; }
    .library-row__meta { font-size: 11px; gap: 4px; }
}

/* ── Library header (de-emphasized, consistent styling) ─────────────── */

.library-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px 12px 28px;
    border-bottom: 1px solid var(--border, #e8e8ec);
    background: var(--bg-surface, #fff);
}
.library-back {
    flex-shrink: 0;
    padding: 6px;
    color: var(--text-secondary, #555);
    background: transparent;
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.library-back:hover {
    color: var(--text-primary, #111);
    background: var(--bg-elevated, #f7f7f9);
}
.library-header__text { flex: 1; min-width: 0; }
.library-header__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #111);
    line-height: 1.2;
}
.library-header__title span:first-child { font-size: 22px; }
.library-header__subtitle {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: var(--text-tertiary, #777);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* De-emphasized "Thư viện nghiên cứu" button on the welcome toolbar:
   visually secondary to the primary "Dự án mới" CTA. Overrides the
   .home-new-btn !important's via higher-specificity attribute chain. */
.home-toolbar .btn.home-library-btn {
    background: transparent !important;
    color: var(--text-primary, #111) !important;
    border: 1px solid var(--border, #e8e8ec) !important;
    box-shadow: none !important;
}
.home-toolbar .btn.home-library-btn:hover {
    background: var(--bg-elevated, #f7f7f9) !important;
    border-color: var(--text-tertiary, #999) !important;
}

/* L12-V3 Phase 10 — Workflow launcher on welcome toolbar.
   Same secondary aesthetic as the library button so the row doesn't get
   visually cluttered next to the primary "Dự án mới" CTA. */
.home-toolbar .btn.home-workflow-btn {
    background: transparent !important;
    color: var(--text-primary, #111) !important;
    border: 1px solid var(--border, #e8e8ec) !important;
    box-shadow: none !important;
}
.home-toolbar .btn.home-workflow-btn:hover {
    background: var(--bg-elevated, #f7f7f9) !important;
    border-color: var(--text-tertiary, #999) !important;
}

@media (max-width: 640px) {
    .library-header { padding: 14px 16px 10px 16px; gap: 8px; }
    .library-header__title { font-size: 16px; }
    .library-header__subtitle { font-size: 12px; }
}

/* ── N-N Attach (decisions #49) — badge + modal rows ────────────────── */

.research-plan-card__badge--attached {
    background: #e0e7ff;
    color: #3730a3;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.research-attach-modal {
    max-height: 60vh;
    overflow-y: auto;
}
.research-attach-modal__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.research-attach-modal__row:hover {
    background: var(--bg-elevated, #f7f7f9);
    border-color: var(--accent, #4a6cf7);
}
.research-attach-modal__row-main { flex: 1; min-width: 0; }
.research-attach-modal__row-topic {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.research-attach-modal__row-meta {
    font-size: 11px;
    color: var(--text-tertiary, #777);
    margin-top: 2px;
}
.research-attach-modal__row-pin {
    font-size: 16px;
    color: var(--text-tertiary, #999);
}

/* ── Inline edit (L5.7: click-to-edit inside detail modal) ───────────── */

.editable-inline {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    padding: 0 2px;
    border-radius: 3px;
}
.editable-inline:hover {
    border-bottom-color: var(--accent, #4a6cf7);
    background: rgba(74, 108, 247, 0.06);
}
.research-detail__cause-diff-add {
    font-size: 11px;
    color: var(--text-tertiary, #999);
    font-style: italic;
    margin-top: 4px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
}
.research-detail__cause-diff-add:hover {
    color: var(--accent, #4a6cf7);
    background: var(--bg-elevated, #f7f7f9);
}
.inline-edit-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 4px 0;
}
.inline-edit-textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--accent, #4a6cf7);
    border-radius: 4px;
    resize: vertical;
}
.inline-edit-buttons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.inline-edit-select {
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid var(--accent, #4a6cf7);
    border-radius: 3px;
    font-family: inherit;
    font-weight: 600;
}

/* ── Scope brief modal (L5.8) ───────────────────────────────────────── */

.research-brief-modal {
    padding: 16px 22px;
}
.brief-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    resize: vertical;
    min-height: 260px;
}
.brief-edit-textarea:focus {
    outline: none;
    border-color: var(--accent, #4a6cf7);
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}

/* ── Diagrams tab (L5.9 Mermaid) ────────────────────────────────────── */

.research-diagram-block {
    margin-bottom: 24px;
    background: var(--bg-elevated, #f7f7f9);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 8px;
    padding: 12px;
}
.research-diagram-block__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap; gap: 8px;
}
.research-diagram-block h4 {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #555);
    font-weight: 600;
}
.research-diagram-toolbar {
    display: flex; align-items: center; gap: 4px;
}
.research-diagram-toolbar button {
    background: var(--bg-base, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px; line-height: 1;
    cursor: pointer; min-width: 30px;
    color: var(--text-primary);
    transition: background 0.15s;
}
.research-diagram-toolbar button:hover {
    background: var(--accent, #6366f1); color: white; border-color: var(--accent, #6366f1);
}
.research-diagram-hint {
    margin-left: 8px;
    font-size: 11px; color: var(--text-hint, #888);
    font-style: italic;
}
/* Stage = fixed-height viewport that hosts the SVG (Mermaid) or Cytoscape canvas. */
.research-diagram-stage {
    height: 560px;
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    background: white;
    overflow: hidden;
    position: relative;
}
.research-diagram-stage--graph {
    background: #fafafa;
    /* Cytoscape uses its own canvas — give it the full box */
}
.research-graph-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-hint, #888); font-size: 13px;
}

/* Graph legend below stage — decode RWOS color, size, border, edge style */
.research-graph-legend {
    display: flex; flex-wrap: wrap; gap: 16px;
    padding: 10px 12px; margin-top: 8px;
    background: var(--bg-elevated, #f7f7f9);
    border: 1px solid var(--border-soft, #e8e8ec);
    border-radius: 6px;
    font-size: 11px;
}
.rgl__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rgl__title {
    font-weight: 700; color: var(--text-secondary, #555);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-right: 4px; font-size: 10px;
}
.rgl__chip {
    color: white; padding: 2px 8px; border-radius: 3px;
    font-size: 10px; font-weight: 600;
}
.rgl__sample {
    background: #94a3b8; color: white;
    padding: 2px 8px; border-radius: 3px;
    font-size: 10px; font-weight: 600;
}
.rgl__sample--small { transform: scale(0.85); }
.rgl__sample--mid { transform: scale(1.0); }
.rgl__sample--big { transform: scale(1.2); padding: 3px 12px; }
.rgl__sample--clear { border: 3px solid #0f172a; background: transparent; color: #0f172a; font-weight: 700; }
.rgl__sample--partial { border: 2px solid var(--text-primary); background: transparent; color: var(--text-primary); opacity: 0.92; }
.rgl__sample--murky { border: 1.5px dotted var(--text-secondary); background: transparent; color: var(--text-secondary); opacity: 0.78; }
.rgl__edge {
    padding: 2px 8px; font-size: 10px; font-weight: 600;
    border-radius: 3px;
}
.rgl__edge--enable { background: var(--success, #16a34a); color: white; border: 1px solid var(--success, #16a34a); }
.rgl__edge--inhibit { background: transparent; color: var(--danger, #dc2626); border: 1px dashed var(--danger, #dc2626); }
.rgl__edge--neutral { background: transparent; color: #94a3b8; border: 1px solid #94a3b8; }

/* Banner shown when plan was created via legacy pipeline (no L11 tagging) */
.research-graph-legacy-banner {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-left-width: 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #78350f;
}
.research-graph-legacy-banner strong { color: #b45309; }

/* Cytoscape graph node hover tooltip (rendered to body, follows cursor) */
.research-graph-tooltip {
    position: fixed;
    background: rgba(20, 20, 30, 0.96);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    max-width: 320px;
    pointer-events: none;
    z-index: 10001;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    display: none;
}
.research-graph-tooltip .rgt__role {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: #fbbf24; margin-bottom: 4px;
}
.research-graph-tooltip .rgt__text {
    white-space: pre-wrap;
}
.research-diagram-block .mermaid {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    overflow: hidden;
}
.research-diagram-block .mermaid svg {
    width: 100%;
    height: 100%;
    cursor: grab;
}
.research-diagram-block .mermaid svg:active { cursor: grabbing; }

/* Fullscreen native API styling — when block enters fullscreen, take whole screen */
.research-diagram-block:fullscreen,
.research-diagram-block:-webkit-full-screen {
    background: white;
    padding: 16px;
    overflow: hidden;
}
.research-diagram-block:fullscreen .research-diagram-stage,
.research-diagram-block:-webkit-full-screen .research-diagram-stage {
    height: calc(100vh - 80px);
}

/* ── Library grid view + row actions + standalone + share/workers ─── */

.library-group__rows--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.library-card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s, transform 0.1s;
    position: relative;
}
.library-card:hover {
    border-color: var(--accent, #4a6cf7);
    transform: translateY(-1px);
}
.library-card__topic {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.library-card__flags {
    font-size: 11px;
    color: var(--text-tertiary, #777);
}
.library-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.library-card__cost {
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.library-card__date {
    font-size: 10px;
    color: var(--text-tertiary, #999);
}
.library-row__actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}
.library-action {
    padding: 4px 6px;
    font-size: 14px;
    color: var(--text-tertiary, #999);
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.library-action:hover {
    color: var(--text-primary, #111);
    background: var(--bg-elevated, #f0f0f3);
}
.library-action--danger:hover {
    color: var(--danger, #b52626);
    background: rgba(181, 38, 38, 0.08);
}

/* L10.17 — "đang làm gì" line on Library card/row for RUNNING plans.
   Adds a pulsing dot + phase label + task counter so Thầy sees progress
   without clicking into the plan. Updated in-place via WS. */
.library-card__running,
.library-row__running {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-secondary, #555);
    margin: 4px 0 2px;
    padding: 4px 8px;
    background: rgba(42, 102, 162, 0.06);
    border-radius: 4px;
    border-left: 2px solid var(--primary, #2a66a2);
}
.library-running__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary, #2a66a2);
    animation: library-running-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
.library-running__phase {
    font-weight: 600;
    color: var(--primary, #2a66a2);
}
@keyframes library-running-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
.library-card--running {
    border-color: rgba(42, 102, 162, 0.3);
}
.library-row--running {
    background: linear-gradient(to right, rgba(42, 102, 162, 0.02), transparent 40%);
}

/* L10.23 — elapsed timer chip on running line */
.library-running__elapsed {
    color: var(--text-tertiary, #888);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

/* L10.37 — active task bars on Library card (parallel visualization).
   Each currently-running task gets its own 4-segment timeline bar so 3
   parallel tasks show 3 simultaneous pulses at potentially different
   phases (one fetching, one synthesizing, one searching). */
.library-active-tasks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    margin: 4px 0;
    background: rgba(59, 130, 246, 0.04);
    border-left: 2px solid var(--color-primary, #3b82f6);
    border-radius: 4px;
}
.library-task-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.library-task-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.library-task-bar__label {
    font-size: 11px;
    color: var(--text-secondary, #555);
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}
.library-task-bar__dur {
    font-size: 10px;
    color: var(--text-hint, #888);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.library-task-bar .research-task-row__bar {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 5px;
}
.library-active-tasks__more {
    font-size: 10px;
    color: var(--text-hint, #888);
    font-style: italic;
    margin-top: 2px;
}

/* L10.23 — phase history mini-timeline strip */
.library-phase-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    margin: 2px 0;
    font-size: 10.5px;
    color: var(--text-secondary, #555);
    background: rgba(42, 102, 162, 0.03);
    border-radius: 4px;
    line-height: 1.6;
}
.library-phase-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-elevated, #f0f0f3);
    border: 1px solid var(--border, #e1e1e3);
    color: var(--text-secondary, #555);
    white-space: nowrap;
    transition: background 0.12s ease;
}
.library-phase-chip__name {
    font-weight: 500;
}
.library-phase-chip__dur {
    color: var(--text-tertiary, #888);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    margin-left: 2px;
}
.library-phase-chip--current {
    background: rgba(42, 102, 162, 0.10);
    border-color: var(--primary, #2a66a2);
    color: var(--primary, #2a66a2);
    font-weight: 600;
}
.library-phase-chip__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary, #2a66a2);
    animation: library-running-pulse 1.4s ease-in-out infinite;
}
.library-phase-arr {
    color: var(--text-tertiary, #bbb);
    font-size: 11px;
    margin: 0 1px;
}

/* L10.18 — aborted_limit banner on Library card/row. Mirror of
   __running but amber instead of primary blue. */
.library-card__aborted,
.library-row__aborted {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--warning, #a15c00);
    margin: 4px 0 2px;
    padding: 4px 8px;
    background: rgba(220, 140, 0, 0.08);
    border-radius: 4px;
    border-left: 2px solid var(--warning, #e08600);
}
.library-aborted__icon { font-size: 12px; }
.library-aborted__warn { color: var(--danger, #b52626); font-weight: 600; }
.library-action--resume {
    color: var(--primary, #2a66a2);
    font-weight: 600;
}
.library-action--resume:hover {
    color: var(--primary, #1c4e7d);
    background: rgba(42, 102, 162, 0.08);
}
.library-action--skip { color: #d4a23a; font-size: 14px; }
.library-action--skip:hover {
    background: rgba(212, 162, 58, 0.12);
}

/* L10.26 awaiting_user banner — pause icon + 2 buttons inline */
.library-card__awaiting,
.library-row__awaiting {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--warning, #a15c00);
    margin: 4px 0 2px;
    padding: 6px 10px;
    background: rgba(212, 162, 58, 0.10);
    border-radius: 6px;
    border-left: 3px solid #d4a23a;
}
.library-await__icon { font-size: 13px; }
.library-await__btn {
    border: 1px solid var(--border, #ccc);
    background: var(--bg-elevated, #fafafa);
    border-radius: 4px;
    padding: 2px 9px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.library-await__btn--continue {
    border-color: var(--primary, #2a66a2);
    color: var(--primary, #2a66a2);
}
.library-await__btn--continue:hover {
    background: var(--primary, #2a66a2);
    color: #fff;
}
.library-await__btn--finalize {
    border-color: #d4a23a;
    color: #a15c00;
}
.library-await__btn--finalize:hover {
    background: #d4a23a;
    color: #fff;
}

/* L10.14 — per-task source picker pills in plan editor */
.research-task-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
    font-size: 11px;
}
.research-task-sources__label {
    color: var(--text-tertiary, #888);
    font-weight: 500;
    margin-right: 2px;
}
.research-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border: 1px solid var(--border, #d0d0d4);
    border-radius: 999px;
    background: var(--bg-elevated, #f5f5f7);
    color: var(--text-secondary, #555);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.research-source-pill:hover {
    border-color: var(--primary, #2a6);
}
.research-source-pill--on {
    background: rgba(42, 102, 162, 0.12);
    border-color: var(--primary, #2a66a2);
    color: var(--primary, #2a66a2);
    font-weight: 600;
}
.research-source-pill--warn {
    opacity: 0.55;
    text-decoration: line-through;
    color: var(--text-tertiary, #888);
}
.research-source-pill--warn.research-source-pill--on {
    opacity: 0.8;
    text-decoration: none;
    color: var(--danger, #b52626);
    border-color: var(--danger, #b52626);
}

.library-share-modal .library-share__hint {
    font-size: 12px;
    color: var(--text-tertiary, #777);
    margin: 0 0 10px 0;
}
.library-share__list {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 12px;
}
.library-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 13px;
}
.library-share-row:hover { background: var(--bg-elevated, #f7f7f9); }
.library-share-row small {
    margin-left: auto;
    color: var(--text-tertiary, #999);
    font-size: 11px;
}
.library-share__note-label,
.research-attach-modal__note-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 4px 0;
    color: var(--text-secondary, #555);
}
.library-share__note,
.research-attach-modal__note {
    width: 100%;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    resize: vertical;
}
.research-attach-modal__cb {
    margin-top: 4px;
    flex-shrink: 0;
}

.library-workers-modal { padding: 16px 20px; }
.library-workers {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 13px;
}
.library-workers dt {
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.library-workers dd {
    margin: 0;
    color: var(--text-primary, #111);
    font-family: monospace;
    font-size: 12px;
}

/* ── Findings tab rich card detail ──────────────────────────────────── */

.research-detail__section {
    margin-bottom: 22px;
}
.research-detail__section h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #111);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e8e8ec);
}
.research-detail__tasks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.research-detail__task {
    background: var(--bg-elevated, #fafafc);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 8px;
    padding: 12px 14px;
}
.research-detail__task-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    flex-wrap: wrap;
}
.research-detail__task-head strong {
    color: var(--text-primary, #111);
}
.research-detail__task-head small {
    color: var(--text-tertiary, #888);
    font-size: 12px;
}
.research-detail__task-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.03em;
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #555);
    border: 1px solid var(--border, #e8e8ec);
}
.research-detail__task-status--done { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.research-detail__task-status--vetting,
.research-detail__task-status--searching,
.research-detail__task-status--fetching,
.research-detail__task-status--synthesizing { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.research-detail__task-status--failed { background: #fecaca; color: #991b1b; border-color: #fca5a5; }
.research-detail__task-status--skipped { background: #e5e7eb; color: #4b5563; border-color: #d1d5db; }

.research-detail__task-notes {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary, #555);
    background: var(--bg-surface, #fff);
    border-left: 3px solid var(--accent, #4a6cf7);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 0 4px 4px 0;
}

.research-detail__cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.research-detail__card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}
.research-detail__card summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    list-style: none;
    text-align: left;
}
.research-detail__card summary::-webkit-details-marker { display: none; }
.research-detail__card summary::before {
    content: "▸ ";
    color: var(--text-tertiary, #999);
    margin-right: 2px;
    flex-shrink: 0;
}
.research-detail__card summary > strong {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}
.research-detail__card summary > .research-detail__card-host {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-tertiary, #999);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
}
.research-detail__card[open] summary::before { content: "▾ "; }
.research-detail__card-title {
    font-weight: 600;
    color: var(--text-primary, #111);
    line-height: 1.4;
    flex: 1;
}
.research-detail__card-host {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    background: var(--bg-elevated, #f0f0f3);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* L10.9 source_type badge — distinguishes mcp:google-drive / notion /
   github cards from Tavily web in the summary list. */
.research-detail__card-source {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #eef2ff;
    color: #3730a3;
}
.research-detail__card-source[data-source="mcp:google-drive"] {
    background: #fef3c7;
    color: #92400e;
}
.research-detail__card-source[data-source="mcp:notion"] {
    background: #f5f3ff;
    color: #5b21b6;
}
.research-detail__card-source[data-source="mcp:github"] {
    background: #1f2937;
    color: #f9fafb;
}
/* L10.3 / P4 — bilingual tab strip inside card content area */
.research-detail__lang-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.research-detail__lang-tab {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--bg-elevated, #fafafc);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary, #555);
}
.research-detail__lang-tab--active {
    background: var(--accent, #4a6cf7);
    color: #fff;
    border-color: var(--accent, #4a6cf7);
}
.research-detail__lang-pane {
    padding: 2px 0;
}
.research-detail__card-summary {
    margin: 8px 0 4px 0;
    color: var(--text-secondary, #555);
    font-size: 13px;
    line-height: 1.55;
}
.research-detail__card-url {
    margin: 6px 0;
    font-size: 11.5px;
    word-break: break-all;
}
.research-detail__card-url a {
    color: var(--accent, #4a6cf7);
    text-decoration: none;
}
.research-detail__card-url a:hover { text-decoration: underline; }
.research-detail__card-tags {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    font-style: italic;
    margin: 4px 0;
}
.research-detail__card-content {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border, #e8e8ec);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary, #555);
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-elevated, #fafafc);
    padding: 10px 12px;
    border-radius: 4px;
}

/* ── Card synth caption + fetch-full button + raw block ──────────── */

.research-detail__card-caption {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-tertiary, #888);
    font-style: italic;
}
.research-detail__card-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.research-detail__delete-btn {
    font-size: 12px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--danger, #ef4444);
    color: var(--danger, #ef4444);
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
}
.research-detail__delete-btn:hover {
    background: var(--danger-tint, #fecaca);
    color: var(--on-danger, #991b1b);
    border-color: var(--danger, #ef4444);
}
.research-detail__fetch-btn {
    font-size: 12px;
    padding: 5px 12px;
    background: var(--bg-elevated, #f7f7f9);
    border: 1px solid var(--border, #e8e8ec);
    color: var(--text-secondary, #555);
    border-radius: 4px;
    cursor: pointer;
}
.research-detail__fetch-btn:hover {
    background: var(--accent, #4a6cf7);
    color: #fff;
    border-color: var(--accent, #4a6cf7);
}
.research-detail__fetch-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.research-detail__card-raw {
    margin-top: 10px;
}
.research-detail__card-raw-block {
    padding: 12px 14px;
    background: var(--bg-elevated, #fafafc);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
}
/* LLM-generated summary block — sits above the article body so Thầy
   can scan the 3-5 sentence digest before deciding whether to read
   the whole thing. Subtle accent color so it reads as "AI-generated"
   meta, not the article text itself. */
.research-detail__card-llm-summary {
    margin: 10px 0 14px 0;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
}
.research-detail__card-llm-summary-head {
    font-size: 11.5px;
    font-weight: 600;
    color: #9a3412;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.research-detail__card-llm-summary .markdown-body p {
    margin-bottom: 6px;
    line-height: 1.55;
    color: var(--text-primary, #111);
}
.research-detail__card-llm-summary .markdown-body p:last-child { margin-bottom: 0; }
/* Key points — bullet list, same AI-accent so it reads as a unit
   with the summary. */
.research-detail__card-keypoints {
    margin: 0 0 14px 0;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}
.research-detail__card-keypoints-head {
    font-size: 11.5px;
    font-weight: 600;
    color: #1e40af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.research-detail__card-keypoints ul {
    margin: 0;
    padding-left: 22px;
    list-style: disc outside;
}
.research-detail__card-keypoints li {
    margin: 3px 0;
    line-height: 1.5;
    color: var(--text-primary, #111);
    padding-left: 2px;
}
.research-detail__card-raw-body {
    margin-top: 8px;
}

/* Pre-flight similar-plan modal — shown before Sophia start if the
   topic matches one of Thầy's past plans (§21 vector dedup). Compact
   list with similarity %, topic preview, status pill. */
.research-preflight__list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}
.research-preflight__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--bg-elevated, #fafafc);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    font-size: 13px;
}
.research-preflight__sim {
    display: inline-block;
    min-width: 46px;
    padding: 3px 8px;
    background: #1e40af;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.research-preflight__topic {
    flex: 1;
    color: var(--text-primary, #111);
}
.research-preflight__hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-tertiary, #888);
    line-height: 1.5;
}
/* Markdown primitives inside research cards — global `* { margin:0;
   padding:0 }` reset in base.css strips browser defaults from <ul>/<ol>/
   <li>/<p>/<blockquote>, so every card body rendered as one flat wall
   of text with no indentation, no paragraph gaps, no visible bullets.
   Reapply readable defaults, scoped to research-detail surfaces. */
.research-detail__card-content p,
.research-detail__card-raw-block p {
    margin: 0 0 10px 0;
    line-height: 1.6;
}
.research-detail__card-content p:last-child,
.research-detail__card-raw-block p:last-child { margin-bottom: 0; }
.research-detail__card-content ul,
.research-detail__card-content ol,
.research-detail__card-raw-block ul,
.research-detail__card-raw-block ol {
    padding-left: 26px;
    margin: 8px 0 12px 0;
}
.research-detail__card-content ul,
.research-detail__card-raw-block ul { list-style: disc outside; }
.research-detail__card-content ol,
.research-detail__card-raw-block ol { list-style: decimal outside; }
.research-detail__card-content li,
.research-detail__card-raw-block li {
    margin: 3px 0;
    padding-left: 4px;
    line-height: 1.55;
}
.research-detail__card-content li > ul,
.research-detail__card-content li > ol,
.research-detail__card-raw-block li > ul,
.research-detail__card-raw-block li > ol {
    margin: 4px 0 6px 0;
}
.research-detail__card-content blockquote,
.research-detail__card-raw-block blockquote {
    margin: 10px 0;
    padding: 6px 14px;
    border-left: 3px solid var(--border, #e8e8ec);
    color: var(--text-secondary, #555);
    font-style: italic;
}
.research-detail__card-content hr,
.research-detail__card-raw-block hr {
    border: 0;
    border-top: 1px solid var(--border, #e8e8ec);
    margin: 18px 0;
}

/* Heading scale reset for rendered markdown inside research cards.
   Browser default h1=2em/h2=1.5em/h3=1.17em is too dramatic against
   the 14px body text — section headings end up 2× the paragraph,
   which reads worse than prose does. Pull them down to a compressed
   scale (1.15 / 1.08 / 1 with weight doing the hierarchy work) and
   trim margins so dense listicle-style articles don't feel like a
   PowerPoint. Applies to both Sophia synth content AND the raw
   fetched extract. */
.research-detail__card-content h1,
.research-detail__card-content h2,
.research-detail__card-content h3,
.research-detail__card-content h4,
.research-detail__card-content h5,
.research-detail__card-content h6,
.research-detail__card-raw-block h1,
.research-detail__card-raw-block h2,
.research-detail__card-raw-block h3,
.research-detail__card-raw-block h4,
.research-detail__card-raw-block h5,
.research-detail__card-raw-block h6 {
    line-height: 1.35;
    margin: 14px 0 6px 0;
    font-weight: 600;
    color: var(--text-primary, #111);
}
.research-detail__card-content h1,
.research-detail__card-raw-block h1 { font-size: 1.15em; }
.research-detail__card-content h2,
.research-detail__card-raw-block h2 { font-size: 1.08em; }
.research-detail__card-content h3,
.research-detail__card-raw-block h3,
.research-detail__card-content h4,
.research-detail__card-raw-block h4,
.research-detail__card-content h5,
.research-detail__card-raw-block h5,
.research-detail__card-content h6,
.research-detail__card-raw-block h6 {
    font-size: 1em;
    font-weight: 700;
}

/* Inline media from the fetched article — hero banners, diagrams,
   author headshots. Scale to the card width so nothing overflows the
   modal, keep the aspect ratio, and add subtle polish so a chart
   doesn't look raw-pasted. Max-height caps hero banners on tall
   articles so the text-to-image ratio stays readable. */
.research-detail__card-raw-block img,
.research-detail__card-raw-block svg,
.research-detail__card-raw-block video,
.research-detail__card-raw-block iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px auto;
    border-radius: 6px;
    max-height: 420px;
    object-fit: contain;
}
.research-detail__card-raw-block figure {
    margin: 14px 0;
    text-align: center;
}
.research-detail__card-raw-block figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-tertiary, #888);
    font-style: italic;
}
.research-detail__card-raw-block pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 12px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}
.research-detail__card-raw-block table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 13px;
}
.research-detail__card-raw-block th,
.research-detail__card-raw-block td {
    padding: 6px 10px;
    border: 1px solid var(--border, #e8e8ec);
}
.research-detail__card-raw-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e8e8ec);
}
.research-detail__card-raw-head small {
    color: var(--text-tertiary, #999);
    font-size: 11px;
}
.research-detail__card-raw-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary, #111);
}
.research-detail__card-raw-empty {
    padding: 10px;
    background: var(--bg-elevated, #f7f7f9);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-tertiary, #999);
    font-style: italic;
    text-align: center;
}


/* ── L20 Diagrams redesign (Thầy 2026-07-12): summary strip + dist bar +
      priority board — HTML thuần thay mermaid pie/tree không đọc được ── */
.diag-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 2px;
}
.diag-strip__chip {
    font-size: 11.5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.diag-strip__chip strong { font-weight: 700; }
.diag-strip__meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-hint, #999);
}
.research-diagram-block--flat {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 12px 16px 14px;
    margin-bottom: 16px;
    background: var(--bg-primary, #fff);
}
.diag-dist__bar {
    display: flex;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated, #f3f4f6);
    margin: 10px 0 8px;
}
.diag-dist__seg { display: block; height: 100%; }
.diag-dist__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.diag-dist__lg {
    font-size: 11.5px;
    padding: 2px 10px;
    border-radius: 999px;
}
.diag-dist__lg strong { font-weight: 700; }
.diag-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
    align-items: start;
}
.diag-board__col {
    background: var(--bg-elevated, #f7f7f9);
    border-top: 3px solid var(--border-strong, #cbd5e1);
    border-radius: 6px;
    padding: 10px;
    min-height: 60px;
}
.diag-board__head {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.diag-board__count {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #555);
}
.diag-board__item {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.diag-board__strategy {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 4px;
    padding: 1px 7px;
    margin-bottom: 4px;
}
.diag-board__how {
    /* Thầy 2026-07-12: trình bày gọn 3 dòng — tooltip (title) mang ĐỦ nội dung */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary, #1a1a1a);
}
.diag-empty { color: var(--text-hint, #999); font-size: 12px; margin: 4px 0; }
@media (max-width: 760px) {
    .diag-board { grid-template-columns: 1fr; }
}


/* ── L20: Sơ đồ subtabs (Thầy 2026-07-12) — 3 khối dọc bắt cuộn dài →
      chuyển pane qua lại ── */
.diag-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.diag-subtabs__btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.diag-subtabs__btn:hover { background: var(--bg-elevated, #f5f5f5); }
.diag-subtabs__btn--active {
    color: var(--color-primary, #079d9d);
    border-bottom-color: var(--color-primary, #079d9d);
}
.diag-pane { display: none; }
.diag-pane--active { display: block; }

/* ── L20 research toolbar "gộp mạnh" (Thầy 2026-07-12) ──────────────── */
/* Split primary (Sophia + caret) + a single "Thêm nguồn" menu button,
   replacing the old 5-button / 3-row toolbar. */
.research-toolbar {
    display: flex;
    gap: 0;
}
.research-toolbar__primary {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-align: left;
}
.research-toolbar__caret {
    flex: 0 0 auto;
    width: 30px;
    padding-left: 0;
    padding-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.research-toolbar__add {
    flex: 1;
    text-align: left;
    color: var(--text-secondary, #4b5563);
}

/* Section header above the plans list ("NGHIÊN CỨU") — matches the source
   section labels rendered by illustrations._renderCombined. */
.research-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 6px 2px;
}

/* Dropdown popup (Sophia caret / Thêm nguồn) — mirrors sheet-grid sg-menu. */
.research-menu {
    position: fixed;
    z-index: 3000;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    padding: 4px;
    min-width: 168px;
}
.research-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.research-menu__item:hover {
    background: var(--bg-hover);
}