/* research pages. Owned by the research surface group; shared components live in ../app.css. */

/* ==== Research AI (pages/research-ai.html) ====
   Everything is scoped under #research-page-section (the citation popover,
   sources panel and modals live inside it too). Colours come from the --c-*
   tokens, so the html.dark token flip carries dark mode without extra rules.
   The id scope outranks Tailwind utilities, so .hidden is restated here for
   the elements these rules give a display value. */

#research-page-section .hidden { display: none !important; }

/* An open thread (server-rendered on /research/<id>, toggled by the script on
   /research) hides the site footer: the composer is pinned to the viewport. */
body:has(#research-page-section.research-section-thread) footer { display: none; }

/* Keep the scrollbar's gutter reserved so the centred column never shifts
   sideways when a running answer makes the page scrollable. */
html:has(#research-page-section) { scrollbar-gutter: stable; }

html.sources-offcanvas-open,
body.sources-offcanvas-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ---- Empty state: starter questions as cards under the composer ---- */
#research-page-section .research-starters { margin-top: 2.5rem; }
#research-page-section .research-starters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
#research-page-section .research-starters-head p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--c-ink-3);
}
#research-page-section #starter-shuffle {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--c-ink-3);
}
#research-page-section #starter-shuffle:hover { background: var(--c-surface); color: var(--c-ink); }
#research-page-section #starter-shuffle:disabled { cursor: wait; opacity: 0.6; }
#research-page-section .research-starters-list { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
    #research-page-section .research-starters-list { grid-template-columns: 1fr 1fr; }
}
#research-page-section .research-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    background: var(--c-raised);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--c-ink);
    box-shadow: 0 1px 2px 0 rgba(20, 26, 22, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#research-page-section .research-suggestion:hover {
    box-shadow: 0 1px 2px 0 rgba(20, 26, 22, 0.05), 0 1px 3px -1px rgba(20, 26, 22, 0.06), 0 6px 16px -10px rgba(20, 26, 22, 0.18);
}
html.dark #research-page-section .research-suggestion:hover { border-color: var(--c-line-strong); }
#research-page-section .research-suggestion-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: var(--c-surface);
    color: var(--c-ink-3);
}

/* ---- Composer ---- */
#research-page-section .research-composer {
    border: 1px solid var(--c-line);
    border-radius: 1.35rem;
    background: var(--c-raised);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(20, 26, 22, 0.05), 0 8px 28px rgba(20, 26, 22, 0.06);
    transition: border-color 0.15s ease;
}
html.dark #research-page-section .research-composer {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
}
#research-page-section .research-composer:focus-within { border-color: var(--c-focus); }
#research-page-section #research-query {
    min-height: 3.5rem;
    max-height: 10rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--c-ink);
    resize: none;
}
#research-page-section #research-query::placeholder { color: var(--c-ink-3); }
/* The composer border carries focus for the field inside it. */
#research-page-section #research-query:focus {
    --tw-ring-shadow: none;
    border-color: transparent;
    box-shadow: none;
    outline: none;
}
#research-page-section .composer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
/* The mode menu sits at the right, beside Send, so its upgrade note opens
   to the left. */
#research-page-section #mode-menu .mode-upgrade-panel { left: auto; right: calc(100% + 0.5rem); }

/* The reminder above the composer, shown once a search has run (the pinned
   composer under a conversation), never on the empty page. It keeps a page
   coloured backing so the answer scrolling behind never runs through it. */
#research-page-section .research-composer { position: relative; }
#research-page-section .research-disclaimer { display: none; }
#research-page-section .research-composer-fixed .research-disclaimer {
    display: block;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: 100%;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    background: var(--c-bg);
    color: var(--c-ink-3);
    font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
    transform: translateX(-50%);
}

/* Mode + model triggers: quiet pills, the menus they open float. */
#research-page-section #mode-menu-trigger,
#research-page-section #model-menu-trigger {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--c-surface) 50%, transparent);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--c-ink);
}
#research-page-section #model-menu-trigger { color: var(--c-ink-2); }
#research-page-section #mode-menu-trigger:hover,
#research-page-section #model-menu-trigger:hover,
#research-page-section #mode-menu-trigger[aria-expanded="true"],
#research-page-section #model-menu-trigger[aria-expanded="true"] {
    background: var(--c-surface);
    color: var(--c-ink);
}
#research-page-section #mode-label,
#research-page-section #model-label {
    display: inline-flex;
    height: 1rem;
    align-items: center;
    line-height: 1rem;
}
#research-page-section #mode-menu-trigger > i,
#research-page-section #model-menu-trigger > i {
    display: inline-flex;
    height: 1rem;
    width: 1rem;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--c-ink-3);
}
#research-page-section #mode-trigger-icon {
    display: inline-flex;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
}
#research-page-section #mode-trigger-icon i,
#research-page-section #mode-trigger-icon svg {
    display: block;
    height: 1rem;
    width: 1rem;
    font-size: 1rem;
    line-height: 1;
}

/* Menus (mode, model, export, rewrite, more). */
#research-page-section .research-menu,
#research-page-section .export-menu,
#research-page-section .rewrite-menu {
    border: 1px solid var(--c-line);
    background: var(--c-raised);
    box-shadow: 0 10px 30px -12px rgba(20, 26, 22, 0.22), 0 2px 6px -2px rgba(20, 26, 22, 0.08);
}
html.dark #research-page-section .research-menu,
html.dark #research-page-section .export-menu,
html.dark #research-page-section .rewrite-menu,
html.dark #research-page-section .research-upgrade-panel,
html.dark #research-page-section #citation-popover {
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}
#research-page-section .research-menu-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c-ink-3);
}
#research-page-section .research-menu-label + * { margin-top: 0; }
#research-page-section .research-menu-label.is-divided {
    margin-top: 0.375rem;
    border-top: 1px solid var(--c-line);
    padding-top: 0.625rem;
}
#research-page-section .mode-option,
#research-page-section .model-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--c-ink);
}
#research-page-section .mode-option:hover,
#research-page-section .model-option:hover { background: var(--c-surface); }
#research-page-section .mode-option.is-locked:hover,
#research-page-section .model-option.is-locked:hover { background: transparent; }
#research-page-section .mode-option.bg-ink-50,
#research-page-section .model-option.bg-ink-50 { background: var(--c-primary-soft); }
#research-page-section .mode-primary-icon,
#research-page-section .model-primary-icon,
#research-page-section .mode-check,
#research-page-section .model-check {
    display: inline-flex;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#research-page-section .mode-primary-icon,
#research-page-section .model-primary-icon {
    font-size: 1rem;
    color: var(--c-ink-3);
}
#research-page-section .mode-check,
#research-page-section .model-check { color: var(--c-primary); }
#research-page-section .model-lock,
#research-page-section .mode-lock {
    font-size: 1rem;
    line-height: 1;
    color: var(--c-ink-3);
}
#research-page-section .model-option.is-locked .model-name,
#research-page-section .model-option.is-locked .model-primary-icon,
#research-page-section .mode-option.is-locked .mode-name,
#research-page-section .mode-option.is-locked .mode-primary-icon,
#research-page-section .rewrite-menu button.is-locked .mode-name,
#research-page-section .rewrite-menu button.is-locked .model-name,
#research-page-section .rewrite-menu button.is-locked .mode-primary-icon,
#research-page-section .rewrite-menu button.is-locked .model-primary-icon {
    color: var(--c-ink-3);
}
#research-page-section .model-option.is-locked:hover .model-name,
#research-page-section .model-option.is-locked:hover .model-primary-icon,
#research-page-section .mode-option.is-locked:hover .mode-name,
#research-page-section .mode-option.is-locked:hover .mode-primary-icon {
    color: var(--c-ink);
}

/* Upgrade panels open beside their menu (stacked below it on phones). */
#research-page-section .research-upgrade-panel {
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    padding: 1rem;
    box-shadow: 0 10px 30px -12px rgba(20, 26, 22, 0.22), 0 2px 6px -2px rgba(20, 26, 22, 0.08);
    white-space: normal;
}
#research-page-section .model-upgrade-panel,
#research-page-section .mode-upgrade-panel,
#research-page-section .rewrite-upgrade-panel {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 0;
    z-index: 40;
    width: 18rem;
}
@media (max-width: 640px) {
    #research-page-section .model-upgrade-panel,
    #research-page-section .mode-upgrade-panel,
    #research-page-section .rewrite-upgrade-panel {
        position: static;
        width: auto;
        margin-top: 0.5rem;
    }
}
#research-page-section .research-plan-badge {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    border-radius: 0.3125rem;
    padding: 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
#research-page-section .research-plan-badge.is-plus { border-color: rgb(0 0 0 / 0.18); }
#research-page-section .research-plan-badge.is-core { background: var(--c-primary-soft); color: var(--c-primary); }
#research-page-section .research-plan-badge.is-plus { background: #0D5F43; color: #fff; }
#research-page-section .research-plan-badge.is-max { background: #141a16; color: #FFB707; }
html.dark #research-page-section .research-plan-badge.is-max { background: rgba(255, 183, 7, 0.14); color: #ffd04d; }

/* Send / stop. */
#research-page-section #research-submit {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #0D5F43;
    color: #fff;
}
#research-page-section #research-submit:hover { background: #0B5039; }
#research-page-section #research-submit:disabled { cursor: not-allowed; opacity: 0.45; }
#research-page-section #research-submit.is-processing,
#research-page-section #research-submit.is-processing:hover {
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
#research-page-section #research-submit .submit-stop-icon {
    display: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.13rem;
    background: currentColor;
}
#research-page-section #research-submit.is-processing .submit-arrow-icon { display: none; }
#research-page-section #research-submit.is-processing .submit-stop-icon { display: block; }

/* Pinned composer while a thread is open. */
#research-page-section .research-composer-fixed {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 40;
    width: min(calc(100vw - 2rem), 62rem);
    padding: 0.65rem 0.75rem !important;
    transform: translateX(-50%);
}
@media (min-width: 640px) {
    #research-page-section .research-composer-fixed { width: min(calc(100vw - 3rem), 62rem); }
}
@media (min-width: 1024px) {
    #research-page-section .research-composer-fixed { width: min(calc(100vw - 4rem), 62rem); }
}
#research-page-section .research-composer-fixed #research-query {
    height: 2rem !important;
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.5rem;
}
#research-page-section .research-composer-fixed .composer-toolbar {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}
#research-page-section .research-composer-fixed #mode-menu,
#research-page-section .research-composer-fixed #model-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
    overflow: visible;
}
#research-page-section .research-composer-fixed #research-submit {
    height: 2rem;
    width: 2rem;
}

/* ---- Thread layout ---- */
#research-page-section .research-thread-spacer {
    padding-top: 0;
    padding-bottom: 7.5rem;
}
#research-page-section.research-section-thread { padding-top: 0; }
#research-page-section #research-thread > header {
    scroll-margin-top: calc(var(--site-bar-h) + 2rem);
    overflow-anchor: auto;
}
#research-page-section #activity-section,
#research-page-section #answer-section,
#research-page-section #sources-section,
#research-page-section #followups-section,
#research-page-section #quiz-section,
#research-page-section #answer-error {
    overflow-anchor: none;
}
#research-page-section #answer-section { scroll-margin-top: calc(var(--site-bar-h) + 5rem); }
@media (min-width: 1024px) {
    #research-page-section #answer-section,
    #research-page-section #research-thread > header { scroll-margin-top: calc(var(--site-bar-h) + 1.5rem); }
}

/* The question opens each turn as the user's chat bubble, right-aligned. */
#research-page-section #research-thread > header,
#research-page-section .research-turn-block > header {
    display: flex;
    justify-content: flex-end;
}
#research-page-section .research-question {
    max-width: 82%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
}

/* Section header rows inside a turn: Answer / Sources / Researchers. */
#research-page-section .research-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 0.625rem;
}
/* The Researchers head under an answer is ruled above, not below. */
#research-page-section .research-section-head.is-sub {
    margin-bottom: 0.75rem;
    border-bottom: 0;
    padding-bottom: 0;
}
#research-page-section .research-section-head h3 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--c-ink);
}
#research-page-section .research-section-icon {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: var(--c-primary-soft);
    font-size: 0.875rem;
    line-height: 1;
    color: var(--c-primary);
}
#research-page-section .research-section-count {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
}

/* ---- Research activity: "Working 3s" / "Finished 12s" ----
   One header per turn; it opens the steps (one level), and each step with
   details opens its searches or publications (one more). */
#research-page-section .research-activity-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--c-ink-2);
    cursor: default;
}
#research-page-section .research-activity-time { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
#research-page-section .research-activity-chevron { display: none; color: var(--c-ink-3); font-size: 1rem; transition: transform 0.18s ease; }
#research-page-section .research-activity-toggle.has-steps { cursor: pointer; }
#research-page-section .research-activity-toggle.has-steps .research-activity-chevron { display: inline-block; }
#research-page-section .research-activity-toggle.has-steps:hover { color: var(--c-ink); }
#research-page-section .research-activity-toggle.is-open .research-activity-chevron { transform: rotate(180deg); }
/* While it runs, the label shimmers softly. */
#research-page-section .research-activity-toggle.is-working #steps-label { animation: research-working 1.6s ease-in-out infinite; }
@keyframes research-working { 50% { opacity: 0.5; } }
#research-page-section .research-activity-toggle {
    margin-left: -0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#research-page-section .research-activity-toggle.has-steps:hover { background: var(--c-surface); }
#research-page-section .research-activity-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
/* The header sits close to the question; the answer follows after a clear gap. */
#research-page-section #research-thread > #activity-section:not(.hidden) { margin-top: 1.25rem; }
#research-page-section #research-thread > #activity-section:not(.hidden) + #answer-section { margin-top: 1.5rem; }
#research-page-section .research-turn-block > .research-activity + section { margin-top: 1.5rem; }

/* Steps, laid out like the reference: one rule down the left of the open
   list (under "Finished"); each step indented inside it with its icon; the
   searches and publications under it indented to the step label, small grey
   icons, compact rows; "+N more" in line with the row icons. */
#research-page-section #trace-list,
#research-page-section .research-trace-list {
    margin-top: 0.375rem;
    padding: 0.125rem 0 0.25rem 1.75rem;
    border-left: 1px solid var(--c-line);
}
#research-page-section .trace-step + .trace-step { margin-top: 0.25rem; }
#research-page-section .trace-step-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2rem;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 400;
    color: var(--c-ink-2);
    text-align: left;
    cursor: default;
}
#research-page-section .trace-step-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--c-ink-3);
}
#research-page-section .trace-step.is-active .trace-step-head { color: var(--c-ink); }
#research-page-section .trace-step.is-active .trace-step-icon { color: var(--c-ink); animation: research-working 1.6s ease-in-out infinite; }
#research-page-section .trace-step-arrow { margin-left: -0.25rem; font-size: 1rem; color: var(--c-ink-3); transition: transform 0.18s ease; }
#research-page-section .trace-step.has-details .trace-step-head { cursor: pointer; }
#research-page-section .trace-step.has-details .trace-step-head:hover .trace-step-label { color: var(--c-ink); }
#research-page-section .trace-step-head:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 0.25rem; }
#research-page-section .trace-step.is-open .trace-step-arrow { transform: rotate(180deg); }
#research-page-section .trace-step-body { padding: 0.125rem 0 0.25rem 1.75rem; }
#research-page-section .trace-step:not(.is-open) .trace-step-body { display: none; }
#research-page-section .trace-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 2rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--c-ink-2);
}
#research-page-section a.trace-row:hover { color: var(--c-ink); }
#research-page-section .trace-row-icon { flex: none; width: 0.875rem; font-size: 0.875rem; line-height: 1; color: var(--c-ink-3); }
#research-page-section .trace-row-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#research-page-section .trace-row-meta { color: var(--c-ink-3); }
#research-page-section .trace-more { display: inline-flex; align-items: center; min-height: 2rem; font-size: 0.875rem; color: var(--c-ink-3); }
#research-page-section .trace-more:hover { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) {
    #research-page-section .research-activity-toggle.is-working #steps-label,
    #research-page-section .trace-step.is-active .trace-step-icon { animation: none; }
}
}

/* ---- Answer body: scholarly prose ---- */
#research-page-section .research-answer-body {
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--c-ink);
}
/* Prose keeps a reading measure; tables and cards may use the full column. */
#research-page-section .research-answer-body p + p { margin-top: 1rem; }
#research-page-section .research-answer-body strong { color: var(--c-ink); }
#research-page-section .research-answer-body a {
    color: var(--c-primary);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
#research-page-section .research-answer-body .ai-title {
    margin-top: 0;
    font-family: inherit;
    font-size: 1.35rem;
    line-height: 1.85rem;
    font-weight: 700;
    color: var(--c-ink);
}
#research-page-section .research-answer-body h2:not(.ai-title) {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.55rem;
    font-weight: 700;
    color: var(--c-ink);
}
#research-page-section .research-answer-body h2:not(.ai-title):first-child { margin-top: 0; }
/* Annotated Bibliography entry headings (citation lines). */
#research-page-section .research-answer-body h3 {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.45rem;
    font-weight: 600;
    color: var(--c-ink);
}
#research-page-section .research-answer-body div { margin-top: 0.75rem; }
#research-page-section .research-answer-body ul,
#research-page-section .research-answer-body ol {
    margin-top: 0.75rem;
    padding-left: 1.65rem;
}
#research-page-section .research-answer-body ul { list-style: disc; }
#research-page-section .research-answer-body ol { list-style: decimal; }
#research-page-section .research-answer-body li {
    margin-top: 0.4rem;
    padding-left: 0.1rem;
}
#research-page-section .research-answer-body li::marker { color: var(--c-ink-3); }
#research-page-section .research-answer-body .research-numbered-point {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0.65rem;
    margin-top: 1rem;
}
#research-page-section .research-answer-body .research-numbered-point:first-child { margin-top: 0; }
#research-page-section .research-answer-body .research-numbered-marker,
#research-page-section .research-answer-body .research-numbered-title {
    font-weight: 700;
    color: var(--c-ink);
}
#research-page-section .research-answer-body .research-numbered-marker { font-variant-numeric: tabular-nums; }

/* Synthesis Matrix table. The wrapper div is added by the renderer so a
   wide matrix scrolls inside the answer instead of the page. */
#research-page-section .research-table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    background: var(--c-raised);
}
#research-page-section .research-answer-body table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.55rem;
}
#research-page-section .research-answer-body th,
#research-page-section .research-answer-body td {
    border: 1px solid var(--c-line);
    padding: 0.7rem 0.8rem;
    vertical-align: top;
    text-align: left;
}
#research-page-section .research-answer-body th:last-child,
#research-page-section .research-answer-body td:last-child { border-right: 0; }
#research-page-section .research-answer-body tr:last-child td { border-bottom: 0; }
#research-page-section .research-answer-body th {
    background: var(--c-surface);
    color: var(--c-ink);
    font-weight: 700;
    white-space: nowrap;
}
#research-page-section .research-answer-body thead th { font-weight: 600; }
#research-page-section .research-answer-body td div,
#research-page-section .research-answer-body th div { margin-top: 0; }
/* A cell of chips reads as a set: close together across, clearly separated
   once they wrap onto another line. */
#research-page-section .research-answer-body .citation-cell {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.25rem;
    row-gap: 0.375rem;
}
#research-page-section .research-answer-body .citation-cell [data-citation-indexes] { margin: 0; }

/* Citation chips: small, raised off the baseline like a superscript, and
   tall enough to hit comfortably. They open the citation popover. */
#research-page-section button[data-citation-indexes] {
    display: inline-flex;
    max-width: 18rem;
    align-items: center;
    gap: 3px;
    margin: 0 0.25rem;
    border: 0;
    border-radius: 3px;
    background: var(--c-surface);
    padding: 0.375rem;
    vertical-align: baseline;
    transform: translateY(-0.08em);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--c-ink);
    cursor: pointer;
    box-shadow: none;
    outline: none;
}
#research-page-section button[data-citation-indexes]:hover,
#research-page-section button[data-citation-indexes]:focus-visible {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
#research-page-section button[data-citation-indexes] [data-citation-extra] {
    flex-shrink: 0;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
}
#research-page-section button[data-citation-indexes]:hover [data-citation-extra] { color: inherit; }
#research-page-section button[data-citation-indexes]::-moz-focus-inner { border: 0; }

/* Citation popover + source numbering. */
#research-page-section #citation-popover {
    border: 1px solid var(--c-line);
    background: var(--c-raised);
    box-shadow: 0 10px 30px -12px rgba(20, 26, 22, 0.22), 0 2px 6px -2px rgba(20, 26, 22, 0.08);
}
#research-page-section .research-source-num {
    display: inline-flex;
    height: 1.25rem;
    min-width: 1.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: var(--c-primary-soft);
    padding: 0 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}
#research-page-section .research-source-dot {
    display: inline-flex;
    height: 1.125rem;
    min-width: 1.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--c-surface);
    box-shadow: 0 0 0 1.5px var(--c-raised);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
}
#research-page-section .research-source-dot.is-active {
    background: var(--c-primary);
    color: var(--c-raised);
}

/* Source and researcher cards: flat, 1px line, 12px radius. */
#research-page-section .research-source-card {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    padding: 1rem;
}
#research-page-section .research-source-card:hover { border-color: var(--c-line-strong); }
#research-page-section .research-source-card:hover .research-source-title { color: var(--c-primary); }
#research-page-section .research-person-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    padding: 0.75rem;
}
#research-page-section a.research-person-card:hover { border-color: var(--c-line-strong); }
#research-page-section a.research-person-card:hover .research-source-title { color: var(--c-primary); }
#research-page-section .research-person-initials {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--c-primary-soft);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--c-primary);
}
#research-page-section .research-match {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--c-primary);
}

/* ---- Turn action bar + menus ---- */
#research-page-section .answer-action-btn {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--c-ink-3);
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
#research-page-section .answer-action-btn:hover,
#research-page-section .answer-action-btn[aria-expanded="true"] {
    background: var(--c-surface);
    color: var(--c-ink);
}
#research-page-section .answer-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}
#research-page-section .answer-action-btn:disabled:hover {
    background: transparent;
    color: var(--c-ink-3);
}
#research-page-section .answer-action-btn-rect { width: 2.35rem; border-radius: 0.65rem; }
#research-page-section .result-links-shortcut {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 9999px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
#research-page-section .result-links-shortcut:hover,
#research-page-section .result-links-shortcut:focus-visible {
    background: var(--c-surface);
    color: var(--c-ink);
}
#research-page-section .result-links-shortcut:disabled,
#research-page-section .result-links-shortcut:disabled:hover {
    cursor: not-allowed;
    opacity: 0.35;
    background: transparent;
    color: var(--c-ink-3);
}
#research-page-section .result-links-shortcut span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
#research-page-section .answer-action-btn i,
#research-page-section .result-links-shortcut i {
    font-size: 1.05rem;
    line-height: 1;
}
#research-page-section .research-prepared {
    font-size: 0.75rem;
    color: var(--c-ink-3);
}

#research-page-section .export-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 70;
    width: 9.25rem;
    border-radius: 0.85rem;
    padding: 0.35rem;
}
#research-page-section .export-menu button,
#research-page-section .rewrite-menu button[data-rewrite-model] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.55rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-ink);
}
#research-page-section .export-menu button i {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--c-ink-3);
}
#research-page-section .export-menu button:hover,
#research-page-section .rewrite-menu button[data-rewrite-model]:hover { background: var(--c-surface); }
#research-page-section .rewrite-menu button[data-rewrite-model].bg-ink-50 { background: var(--c-primary-soft); }
#research-page-section .rewrite-menu {
    position: fixed;
    z-index: 70;
    width: 15.625rem;
    max-height: min(25.625rem, calc(100vh - 1rem));
    overflow-x: visible;
    overflow-y: auto;
    border-radius: 0.78rem;
    padding: 0.35rem;
}
#research-page-section .rewrite-menu [data-rewrite-section] {
    display: grid;
    gap: 0.06rem;
}
#research-page-section .rewrite-menu [data-rewrite-separator] {
    margin: 0.18rem 0;
    border-top: 1px solid var(--c-line);
}
#research-page-section .rewrite-menu button[data-rewrite-model] {
    min-height: 1.95rem;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.84rem;
    line-height: 1.08rem;
}
#research-page-section .rewrite-menu .mode-primary-icon,
#research-page-section .rewrite-menu .model-primary-icon { font-size: 0.95rem; }
#research-page-section .turn-more-menu {
    left: auto;
    right: 0;
    width: 12.25rem;
}
#research-page-section .turn-more-menu button { white-space: nowrap; }
#research-page-section .turn-more-menu [data-menu-separator] {
    margin: 0.35rem 0;
    border-top: 1px solid var(--c-line);
}
#research-page-section .turn-more-menu button.is-danger,
#research-page-section .turn-more-menu button.is-danger i { color: var(--c-danger); }
#research-page-section .turn-more-menu button.is-danger:hover {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
}

/* ---- Follow-ups ---- */
#research-page-section .research-followups {
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
#research-page-section .research-followups > button + button { border-top: 1px solid var(--c-line); }
#research-page-section .research-followups > button {
    color: var(--c-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
}
#research-page-section .research-followups > button i { color: var(--c-ink-3); }
#research-page-section .research-followups > button:hover,
#research-page-section .research-followups > button:hover i { color: var(--c-primary); }

/* ---- Quiz ---- */
#research-page-section .rq-card {
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    padding: 1rem;
}
#research-page-section .rq-score {
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-surface);
    padding: 1rem;
}
#research-page-section .rq-option {
    border-color: var(--c-line);
    background: var(--c-raised);
    color: var(--c-ink);
}
#research-page-section .rq-option:hover:not(:disabled) { border-color: var(--c-line-strong); background: var(--c-surface); }
#research-page-section .rq-option.is-selected { border-color: var(--c-primary); background: var(--c-primary-soft); }
#research-page-section .rq-option.is-correct {
    border-color: color-mix(in srgb, var(--c-primary) 55%, transparent);
    background: var(--c-primary-soft);
    color: var(--c-ink);
}
#research-page-section .rq-option.is-wrong,
#research-page-section .rq-feedback.is-wrong {
    border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
    background: color-mix(in srgb, var(--c-danger) 9%, transparent);
    color: var(--c-ink);
}
#research-page-section .rq-option.is-muted { color: var(--c-ink-2); }
#research-page-section .rq-feedback.is-right { background: var(--c-primary-soft); color: var(--c-ink); }
#research-page-section .rq-letter {
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-ink-2);
}

/* ---- Sources side panel ---- */
#research-page-section .sources-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    z-index: 1000;
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    max-width: 100dvw;
    width: min(31.25rem, 100dvw);
    overflow-x: hidden;
    transform: translateX(100%);
    border-left: 1px solid var(--c-line);
    background: var(--c-bg);
    visibility: hidden;
    transition: transform 0.18s ease, visibility 0s linear 0.18s;
}
/* The shadow only exists while open: a closed panel parked off-screen would
   otherwise cast it back across the right edge of the page. */
#research-page-section .sources-offcanvas.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -12px 0 28px rgba(20, 26, 22, 0.12);
    transition: transform 0.18s ease, visibility 0s;
}
html.dark #research-page-section .sources-offcanvas.is-open { box-shadow: -12px 0 28px rgba(0, 0, 0, 0.45); }
#research-page-section .sources-offcanvas-header {
    min-height: var(--app-header-height, 4rem);
    border-bottom: 1px solid var(--c-line);
}
#research-page-section #sources-offcanvas-title { color: var(--c-ink); }
#research-page-section #sources-offcanvas-list,
#research-page-section #sources-offcanvas-list > * {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
@media (min-width: 769px) {
    #research-page-section .sources-offcanvas-header { min-height: 3.5rem; }
}
@media (max-width: 768px) {
    #research-page-section .sources-offcanvas { width: 100dvw; }
}

/* ---- Modals ---- */
#research-page-section .research-modal {
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    box-shadow: 0 24px 48px -16px rgba(20, 26, 22, 0.3);
}
#research-page-section .research-modal-icon {
    background: var(--c-surface);
    color: var(--c-ink-2);
}
#research-page-section .research-modal-icon.is-danger {
    background: color-mix(in srgb, var(--c-danger) 12%, transparent);
    color: var(--c-danger);
}

/* ---- Not-found simulation ---- */
#research-page-section #research-notfound {
    animation: nf-rise 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes nf-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
#research-page-section .nf-bubble {
    opacity: 0;
    animation: nf-pop 0.42s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes nf-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#research-page-section .research-bubble {
    border-radius: 1rem;
    border-top-right-radius: 0.375rem;
    background: var(--c-surface);
    color: var(--c-ink);
}
#research-page-section .nf-reply-card {
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-surface);
    color: var(--c-ink);
}
/* Animated typing dots (the user "typing" and the reply thinking). */
#research-page-section .nf-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--c-ink-3);
}
#research-page-section .nf-dots > span {
    display: block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.35;
    animation: nf-dot 1.1s ease-in-out infinite;
}
#research-page-section .nf-dots > span:nth-child(2) { animation-delay: 0.18s; }
#research-page-section .nf-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes nf-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.2rem); }
}
#research-page-section .nf-reply-text { overflow: hidden; }
#research-page-section .nf-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--c-primary);
    animation: nf-blink 1s steps(1) infinite;
}
@keyframes nf-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    #research-page-section #research-notfound,
    #research-page-section .nf-bubble,
    #research-page-section .nf-dots > span,
    #research-page-section .nf-caret {
        animation: none !important;
    }
    #research-page-section .nf-bubble { opacity: 1; }
}

/* Free-plan members when the admin has closed Research to the Free plan. */
#research-page-section .research-plan-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-surface);
    padding: 0.875rem 1rem;
    color: var(--c-ink);
    font-size: 0.875rem;
}
#research-page-section .research-plan-lock p { flex: 1 1 16rem; margin: 0; }
#research-page-section .research-plan-lock > i { color: var(--c-ink-2); font-size: 1.125rem; }