.aichat-shell { max-width: 1100px; margin: 0 auto; }
        .aichat-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; }
        /* Timeline is a full-width block that grows with content; no inner scroll,
           so page-level scrolling is preserved and doesn't jump. */
        .aichat-log {
            background: var(--bs-body-bg);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color) !important;
        }
        .aichat-log .border-bottom { border-color: var(--bs-border-color) !important; }
        .aichat-msg { word-wrap: break-word; }
        .aichat-msg p:last-child { margin-bottom: 0; }
        .aichat-msg pre { background: var(--bs-tertiary-bg); padding: .5rem; border-radius: .25rem; overflow-x: auto; }
        .aichat-msg code { background: var(--bs-tertiary-bg); padding: .1rem .3rem; border-radius: .2rem; }
        .aichat-msg pre code { background: transparent; padding: 0; }
        .aichat-typing-caret { display: inline-block; margin-left: .08rem; color: var(--bs-primary); animation: aichat-caret-blink .8s step-end infinite; }
        @keyframes aichat-caret-blink { 50% { opacity: 0; } }
        .aichat-event-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
        .aichat-event-detail { font-size: 0.85rem; }
        .aichat-event-detail code { background: var(--bs-tertiary-bg); padding: .05rem .25rem; border-radius: .2rem; }
        .aichat-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
        .aichat-event-card {
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
            padding: .75rem;
            background: var(--bs-body-bg);
            margin-bottom: .75rem;
        }
        .aichat-event-title {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: .5rem;
        }
        /* Collapsible "Retrieved data" block inside each tool card. */
        .aichat-retrieved {
            margin-top: .5rem;
        }
        .aichat-retrieved > summary {
            cursor: pointer;
            font-size: 0.85rem;
            color: var(--bs-secondary-color, #6c757d);
            user-select: none;
        }
        .aichat-retrieved > summary:hover { color: var(--bs-body-color); }
        .aichat-retrieved pre {
            background: var(--bs-tertiary-bg);
            padding: .5rem;
            border-radius: .25rem;
            max-height: 320px;
            overflow: auto;
            font-size: 0.8rem;
            margin-top: .5rem;
        }
        /* "LLM is thinking..." live status — a small blinking pill badge. */
        .aichat-thinking-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .15rem .5rem;
            border-radius: 999px;
            background: var(--bs-tertiary-bg);
            color: var(--bs-secondary-color, #6c757d);
            font-size: 0.8rem;
            font-weight: 500;
            animation: aichat-blink 1.1s ease-in-out infinite;
        }
        .aichat-thinking-dot {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background: var(--bs-primary, #0d6efd);
        }
        .aichat-live-run { display: flex; align-items: center; gap: .65rem; min-height: 3.2rem; color: var(--bs-secondary-color); }
        .aichat-live-run strong, .aichat-live-run span { display: block; }
        .aichat-live-run strong { color: var(--bs-body-color); font-size: .88rem; }
        .aichat-live-run span { margin-top: .1rem; font-size: .78rem; }
        .aichat-live-spinner { width: 1.2rem; height: 1.2rem; border: 2px solid color-mix(in srgb, var(--bs-primary) 20%, transparent); border-top-color: var(--bs-primary); border-radius: 50%; animation: aichat-live-spin .8s linear infinite; }
        @keyframes aichat-live-spin { to { transform: rotate(360deg); } }
        /* The visible, reader-oriented account of an active run. The technical
           event log below remains available for audit but is not the primary
           status surface. */
        .aichat-investigation {
            margin: .8rem 0 .2rem;
            padding: .75rem .8rem .65rem;
            border: 1px solid color-mix(in srgb, var(--bs-primary) 26%, var(--bs-border-color));
            border-left: 3px solid var(--bs-primary);
            border-radius: .45rem;
            background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg));
        }
        .aichat-investigation-head { display: flex; gap: .55rem; align-items: flex-start; color: var(--bs-secondary-color); }
        .aichat-investigation-head .material-symbols-outlined { color: var(--bs-primary); font-size: 1.1rem; line-height: 1.25rem; }
        .aichat-investigation-head strong, .aichat-investigation-head span { display: block; }
        .aichat-investigation-head strong { color: var(--bs-body-color); font-size: .83rem; }
        .aichat-investigation-head span { margin-top: .05rem; font-size: .75rem; }
        .aichat-investigation-steps { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .42rem; }
        .aichat-investigation-step { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); column-gap: .45rem; align-items: start; font-size: .8rem; }
        .aichat-investigation-marker { width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: .68rem; line-height: 1; }
        .aichat-investigation-step.is-current .aichat-investigation-marker { color: white; background: var(--bs-primary); animation: aichat-investigation-pulse 1.1s ease-in-out infinite; }
        .aichat-investigation-step.is-done .aichat-investigation-marker { color: white; background: #198754; }
        .aichat-investigation-step.is-failed .aichat-investigation-marker { color: white; background: #b42318; }
        .aichat-investigation-copy { min-width: 0; }
        .aichat-investigation-copy strong { display: block; color: var(--bs-body-color); font-size: .8rem; font-weight: 600; }
        .aichat-investigation-copy span { display: block; margin-top: .05rem; color: var(--bs-secondary-color); font-size: .74rem; line-height: 1.3; }
        @keyframes aichat-investigation-pulse { 50% { transform: scale(1.12); opacity: .66; } }
        @keyframes aichat-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        /* Rendered LLM thoughts block (collapsed by default). */
        .aichat-thoughts > summary {
            cursor: pointer;
            font-size: 0.85rem;
            color: var(--bs-secondary-color, #6c757d);
            user-select: none;
        }
        .aichat-thoughts > summary:hover { color: var(--bs-body-color); }
        .aichat-thoughts pre {
            background: var(--bs-tertiary-bg);
            padding: .5rem;
            border-radius: .25rem;
            max-height: 320px;
            overflow: auto;
            font-size: 0.85rem;
            margin-top: .5rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    
        /* ---- chat shell ---------------------------------------------------- */
        /* Full height below the site header: the conversation scrolls, the page
           does not, so the composer stays reachable and the answer stays in view. */
        .ai-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
        .ai-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 16rem minmax(0, 1fr); transition: grid-template-columns .82s cubic-bezier(.22,1,.36,1); }
        .ai-shell.projects-hidden { grid-template-columns: 0 minmax(0, 1fr); }
        @media (max-width: 900px) { .ai-shell { grid-template-columns: 1fr; } .ai-rail { display: none; } }

        .ai-rail { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: .25rem;
            border-right: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); padding: .85rem .7rem; overflow: hidden;
            opacity: 1; transform: translateX(0); transition: opacity .58s ease-in-out, transform .82s cubic-bezier(.22,1,.36,1), padding .82s cubic-bezier(.22,1,.36,1), border-color .58s ease-in-out; }
        .ai-shell.projects-hidden .ai-rail { padding-left: 0; padding-right: 0; border-color: transparent; opacity: 0; pointer-events: none; transform: translateX(-1rem); }
        .ai-rail-section { padding-bottom: .6rem; }
        .ai-rail-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .ai-rail-title { font-size: .66rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
            color: var(--bs-secondary-color); margin-bottom: .4rem; }
        .ai-rail-toggle, .ai-show-projects { border: 0; background: transparent; color: var(--bs-primary); padding: 0 .15rem; font-size: .9rem; }
        .ai-show-projects, .ai-show-results { position: absolute; z-index: 2; top: .4rem; font-size: .72rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .35rem; padding: .2rem .4rem; color: var(--bs-primary); }
        .ai-show-projects { left: .45rem; }
        .ai-show-results { right: .45rem; }
        .ai-rail-hint { font-size: .72rem; color: var(--bs-secondary-color); margin-bottom: .45rem; line-height: 1.35; }
        .ai-project-row { display: flex; align-items: stretch; gap: .15rem; }
        .ai-project { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; text-align: left;
            border: 1px solid transparent; border-radius: .55rem; background: transparent; padding: .45rem .5rem; color: inherit; }
        .ai-project.is-active { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
        .ai-project .material-symbols-outlined { font-size: 1.15rem; color: var(--bs-primary); }
        .ai-project-name { display: block; font-size: .85rem; font-weight: 650; }
        .ai-project-note { display: block; font-size: .7rem; color: var(--bs-secondary-color); }
        .ai-project-remove { flex: 0 0 1.7rem; border: 0; border-radius: .45rem; background: transparent;
            color: var(--bs-secondary-color); font-size: 1.15rem; line-height: 1; }
        .ai-project-remove:hover, .ai-project-remove:focus-visible { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }

        .ai-question-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: .3rem; }
        .ai-question { text-align: left; border: 1px solid var(--bs-border-color); border-radius: .5rem;
            background: var(--bs-body-bg); color: inherit; padding: .4rem .55rem; font-size: .76rem; line-height: 1.35; }
        .ai-question:hover { border-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-primary); }

        /* Status lines, not alert bars. These are conditions to glance at, and as
           full-width coloured banners they shouted over the conversation. */
        .ai-rail-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--bs-border-color);
            display: flex; flex-direction: column; gap: .4rem; }
        .ai-status { display: flex; align-items: baseline; gap: .4rem; font-size: .7rem; line-height: 1.35;
            color: var(--bs-secondary-color); }
        .ai-status--muted { color: var(--bs-secondary-color); opacity: .75; }
        .ai-dot { flex: 0 0 auto; width: .45rem; height: .45rem; border-radius: 50%; background: #94a3b8;
            transform: translateY(-.1rem); }
        .ai-dot--ok { background: #059669; } .ai-dot--warn { background: #d97706; }
        .ai-linkbtn { border: 0; background: none; padding: 0; color: var(--bs-primary);
            font-size: .72rem; text-decoration: underline; }

        /* ---- conversation --------------------------------------------------- */
        .ai-main { display: grid; grid-template-columns: minmax(22rem, 1fr) .5rem minmax(25rem, 2fr); min-height: 0; min-width: 0; transition: grid-template-columns .82s cubic-bezier(.22,1,.36,1); }
        .ai-main.results-hidden { grid-template-columns: minmax(0, 1fr) 0 0; }
        .ai-main.results-hidden .ai-workspace, .ai-main.results-hidden .ai-resize-gutter--vertical { opacity: 0; pointer-events: none; overflow: hidden; transform: translateX(1.25rem); }
        .ai-conversation { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
            border-right: 1px solid var(--bs-border-color); }
        .ai-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem 1rem 8rem; }
        .ai-thread { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
        .ai-turn { display: flex; flex-direction: column; gap: .6rem; }
        .ai-bubble { border-radius: .85rem; padding: .7rem .9rem; }
        .ai-bubble--user { align-self: flex-end; max-width: 42rem; background: var(--bs-primary-bg-subtle);
            border: 1px solid var(--bs-border-color); font-size: .88rem; }
        .ai-bubble--assistant { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
        .ai-bubble--assistant:empty { display: none; }
        .ai-turn.is-entering .ai-bubble { animation: ai-turn-enter .28s ease-out both; }
        .ai-turn.is-entering .ai-bubble--assistant { animation-delay: .07s; }
        @keyframes ai-turn-enter { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: translateY(0); } }
        .ai-history-turn { opacity: .82; }

        /* Centred in the empty thread, the way a chat opens — not pinned to the
           top of a column that has nothing else in it. */
        .ai-thread:has(#emptyState:not([hidden])) { min-height: 62vh; justify-content: center; }
        .ai-empty { text-align: center; color: var(--bs-secondary-color); padding: 1.5rem 1rem; }
        .ai-empty-title { font-size: 1.05rem; font-weight: 650; color: var(--bs-body-color); }
        .ai-empty-note { max-width: 30rem; margin: .4rem auto 0; font-size: .84rem; }

        .ai-timeline { margin-top: .7rem; border-top: 1px solid var(--bs-border-color); padding-top: .5rem; }
        .ai-timeline > summary { cursor: pointer; font-size: .72rem; color: var(--bs-secondary-color); }
        .ai-timeline[hidden] { display: none; }

        /* ---- composer ------------------------------------------------------- */
        /* Floats over the conversation rather than sitting under it, so the last
           thing the reader sees scrolling up is the answer, not a form. */
        .ai-composer-wrap { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem 1rem;
            background: linear-gradient(to top, var(--bs-body-bg) 62%, transparent); pointer-events: none; }
        .ai-composer { pointer-events: auto; max-width: 46rem; margin: 0 auto; background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .55rem .6rem .45rem;
            box-shadow: 0 .5rem 1.6rem rgba(15, 23, 42, .12); }
        .ai-composer textarea { width: 100%; border: 0; resize: none; background: transparent; color: inherit;
            font-size: .9rem; line-height: 1.45; padding: .25rem .3rem; max-height: 11rem; }
        .ai-composer textarea:focus { outline: none; }
        .ai-composer-bar { display: flex; align-items: center; gap: .5rem; padding-top: .2rem; }
        /* Keep Clear, Send and Stop in the same 2rem control box.  The old
           text-only Clear link aligned on its baseline while the circular
           controls aligned on their box, so the row visibly dipped. */
        .ai-composer-bar > #clearBtn { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: .25rem .35rem; }
        .ai-composer-bar > .ai-iconbtn { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
        /* Send and Stop occupy one fixed slot. Swapping a flex item in/out used
           to let Clear shift sideways during an active request. */
        .ai-send-slot { position: relative; display: inline-flex; flex: 0 0 2rem; width: 2rem; height: 2rem; }
        .ai-send-slot .ai-send { position: absolute; inset: 0; }
        .ai-composer-hint { flex: 1; font-size: .7rem; color: var(--bs-secondary-color); }
        .ai-iconbtn { border: 1px solid transparent; border-radius: .5rem; background: transparent;
            color: var(--bs-secondary-color); padding: .2rem .3rem; line-height: 1; }
        .ai-iconbtn:hover, .ai-iconbtn[aria-expanded="true"] { border-color: var(--bs-border-color); color: var(--bs-body-color); }
        .ai-send { border: 0; border-radius: 50%; width: 2rem; height: 2rem; display: inline-flex;
            align-items: center; justify-content: center; background: var(--bs-primary); color: #fff; }
        .ai-send:disabled { opacity: .45; }
        .ai-send--stop { background: #b42318; }
        .ai-settings { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
            margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
        .ai-switch { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem;
            color: var(--bs-secondary-color); margin: 0; }
        .ai-settings-models { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; width: 100%; }
        .ai-settings-models .form-select { max-width: 11rem; }
        .ai-settings-note { font-size: .7rem; color: var(--bs-secondary-color); }

        /* ---- result workspace --------------------------------------------- */
        /* The transcript stays a readable stream of prose. Every visual or
           data result gets its own persistent tab on the right, so a later
           answer never pushes an earlier result out of sight. */
        .ai-workspace { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bs-tertiary-bg); opacity: 1; transform: translateX(0); transition: opacity .58s ease-in-out, transform .82s cubic-bezier(.22,1,.36,1); }
        .ai-main.results-revealing .ai-workspace { animation: none; }
        .ai-workspace-pane { display: flex; flex-direction: column; min-height: 0; padding: .75rem; }
        .ai-workspace-pane:not([hidden]) { flex: 1; }
        .ai-workspace-head { display: grid; grid-template-columns: max-content 1.45rem minmax(0, 1fr) 1.45rem; align-items: center; gap: .35rem; min-width: 0; max-width: 100%; margin-bottom: .55rem; overflow: hidden; }
        .ai-workspace-title { margin: 0; font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-secondary-color); white-space: nowrap; }
        .ai-workspace-title-wrap { display: flex; align-items: center; gap: .35rem; min-width: 0; }
        .ai-results-mode-tabs { display: flex; align-items: center; gap: .25rem; padding: .6rem .75rem 0; border-bottom: 1px solid var(--bs-border-color); }
        .ai-evidence-title { display: inline-flex; align-items: center; gap: .3rem; margin-right: .35rem; color: var(--bs-body-color); font-size: .78rem; font-weight: 700; }
        .ai-evidence-title .material-symbols-outlined { color: var(--bs-primary); }
        .ai-results-mode-tabs button { display: inline-flex; align-items: center; gap: .3rem; border: 0; border-bottom: 2px solid transparent; padding: .35rem .55rem; background: transparent; color: var(--bs-secondary-color); font-size: .78rem; }
        .ai-results-mode-tabs button.is-active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); font-weight: 650; }
        .ai-results-mode-tabs .material-symbols-outlined { font-size: 1rem; }
        .ai-results-hide { margin: 0 .25rem 0 0; }
        .ai-workspace-tabs { display: flex; flex-wrap: nowrap; align-items: end; gap: .3rem; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; min-width: 0; padding-bottom: .25rem; scrollbar-width: thin; }
        .ai-workspace-tabs::-webkit-scrollbar { height: .45rem; }
        .ai-workspace-tabs::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 999px; }
        .ai-workspace-tab-group { display: flex; flex: 0 0 auto; align-items: stretch; max-width: 10rem; border: 1px solid var(--bs-border-color); border-bottom: 0; border-radius: .45rem .45rem 0 0; overflow: hidden; }
        .ai-workspace-tab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: .3rem .35rem .3rem .5rem; background: transparent; color: var(--bs-secondary-color); font-size: .72rem; }
        .ai-workspace-tab.is-active { background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 650; }
        .ai-workspace-tab-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--bs-secondary-color); padding: 0 .35rem; font-size: .95rem; line-height: 1; }
        .ai-workspace-tab-close:hover { background: var(--bs-danger-bg-subtle, #f8d7da); color: var(--bs-danger, #b42318); }
        .ai-tab-scroll { flex: 0 0 auto; border: 1px solid var(--bs-border-color); border-radius: .35rem; background: var(--bs-body-bg); color: var(--bs-secondary-color); width: 1.45rem; height: 1.45rem; padding: 0; line-height: 1; }
        .ai-tab-scroll:hover { color: var(--bs-body-color); border-color: var(--bs-primary); }
        .ai-workspace-content { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .55rem; background: var(--bs-body-bg); }
        /* Overview is currently an iframe, but it is a full document rather than
           a viewport-sized canvas. Keep the result pane's single scrollbar so
           its lower cards remain reachable instead of clipping it at pane height. */
        .ai-workspace-content.has-embedded-summary { overflow: auto; }
        .ai-workspace-content.has-embedded-summary .ai-workspace-panel { min-height: 0; padding: 0; }
        .ai-workspace-content.has-embedded-summary .aichat-element { border: 0; border-radius: 0; }
        .ai-workspace-content.has-embedded-summary .aichat-element-body { display: block; padding: 0; }
        .ai-workspace-content.has-embedded-summary .aichat-summary-frame { display: block; height: 44rem; }
        .ai-resize-gutter { position: relative; z-index: 3; background: var(--bs-tertiary-bg); touch-action: none; transition: background .15s ease, opacity .58s ease-in-out, transform .82s cubic-bezier(.22,1,.36,1); }
        .ai-resize-gutter:hover, .ai-resize-gutter.is-resizing { background: rgba(var(--bs-primary-rgb), .3); }
        .ai-resize-gutter--vertical { cursor: col-resize; }
        .ai-workspace-panel { min-height: 100%; padding: .7rem; }
        .ai-workspace-empty { height: 100%; display: grid; place-items: center; padding: 1rem; color: var(--bs-secondary-color); text-align: center; font-size: .8rem; }
        .ai-result-links { margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--bs-border-color); font-size: .82rem; color: var(--bs-secondary-color); }
        .ai-result-links a { display: inline-flex; align-items: center; gap: .25rem; margin: .3rem .25rem 0 0; padding: .25rem .45rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; text-decoration: none; color: var(--bs-primary); background: var(--bs-body-bg); }
        .ai-result-links a:hover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
        .ai-inline-result-link { display: inline-flex; align-items: center; gap: .2rem; padding: .08rem .3rem; border-radius: .3rem; color: var(--bs-primary); background: var(--bs-primary-bg-subtle); text-decoration: none; white-space: nowrap; }
        .ai-inline-result-link:hover { text-decoration: underline; }
        /* When the full Evidence pane is folded away, leave a compact, actionable
           index beneath the answer. The actual results remain in their tabs; these
           cards simply tell the reader what is ready without stealing the chat's width. */
        .ai-result-peek { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--bs-border-color); }
        .ai-result-peek[hidden] { display: none; }
        .ai-result-peek-card { display: inline-flex; align-items: center; gap: .35rem; max-width: 13rem; border: 1px solid var(--bs-border-color); border-radius: .45rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); padding: .35rem .5rem; font-size: .75rem; text-align: left; }
        .ai-result-peek-card:hover { border-color: var(--bs-primary); color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
        .ai-result-peek-card .material-symbols-outlined { font-size: 1rem; color: var(--bs-primary); }
        .ai-result-peek-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .aichat-history-workflow { margin-top: .8rem; }

        @media (max-width: 1100px) {
            .ai-main, .ai-main.results-hidden { grid-template-columns: 1fr; overflow-y: auto; }
            .ai-conversation { min-height: 72vh; border-right: 0; border-bottom: 1px solid var(--bs-border-color); }
            .ai-workspace { min-height: 70vh; }
            .ai-main.results-hidden .ai-workspace { display: none; }
            .ai-resize-gutter { display: none; }
        }

        /* ---- element cards ------------------------------------------------ */
        .aichat-element { border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--bs-body-bg); overflow: hidden; }
        .aichat-element-head { display: flex; align-items: start; justify-content: space-between; gap: .75rem;
            padding: .55rem .7rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
        .aichat-element-label { font-size: .74rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
        .aichat-element-caption { margin-top: .15rem; font-size: .76rem; color: var(--bs-secondary-color); }
        .aichat-element-link { font-size: .73rem; white-space: nowrap; text-decoration: none; }
        .aichat-element-body { padding: .7rem; }
        .aichat-element-note { margin-top: .45rem; font-size: .73rem; color: var(--bs-secondary-color); }
        .aichat-element-msg { font-size: .8rem; color: var(--bs-secondary-color); }
        .aichat-element-msg--error { color: #b42318; }
        .aichat-element-msg--pending { color: var(--bs-secondary-color); font-style: italic; }
        .aichat-summary-frame { width: 100%; min-height: 34rem; height: 44rem; border: 0; background: var(--bs-body-bg); color-scheme: light dark; }
        .aichat-summary-frame--explore { height: min(76vh, 70rem); }
        .ai-resize-gutter::after { content: "⋮"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: var(--bs-secondary-color); font-size: 1rem; line-height: 1; }

        /* Same reading order as Browse → PPI → Structural complexes: first the
           whole assembly, then both protein overviews side by side. This keeps
           the spatial claim and the mutation comparison in one scan path. */
        .aichat-complex { display: grid; gap: 1rem; align-items: start; }
        .aichat-complex-structure { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
        .aichat-complex-plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
        .aichat-complex-plot { border-left: 3px solid var(--chain-colour); padding-left: .5rem; min-width: 0; }
        .aichat-complex-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
        .aichat-complex-title { font-size: .78rem; font-weight: 700; }
        .aichat-complex-sub { font-size: .7rem; color: var(--bs-secondary-color); }
        .aichat-complex-swatch { width: .6rem; height: .6rem; border-radius: 2px; background: var(--chain-colour); align-self: center; }
        .aichat-complex-note { font-size: .7rem; color: var(--bs-secondary-color); }
        .aichat-complex-frame { width: 100%; height: 30rem; border: 1px solid var(--bs-border-color); border-radius: .45rem; background: #fff; }
        .aichat-complex-plotframe { width: 100%; height: 32rem; border: 0; background: var(--bs-body-bg); color-scheme: light dark; }
        /* Below this the two profiles stop being a comparison and start being a
           squeeze; keep the assembly above them and stack the profiles. */
        @media (max-width: 900px) {
            .aichat-complex { grid-template-columns: minmax(0, 1fr); }
            .aichat-complex-plots { grid-template-columns: minmax(0, 1fr); }
        }

        /* Protein-length locator: background bands, focus on top. */
        .aichat-ruler { position: relative; height: 1.6rem; border: 1px solid var(--bs-border-color);
            border-radius: .3rem; background: var(--bs-tertiary-bg); overflow: hidden; }
        .aichat-ruler-band { position: absolute; top: 0; bottom: 0; opacity: .85; }
        .aichat-ruler-focus { position: absolute; top: -2px; bottom: -2px; background: rgba(220,38,38,.28);
            border-left: 2px solid #dc2626; border-right: 2px solid #dc2626; }
        .aichat-ruler-pin { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #7f1d1d; }
        .aichat-ruler-tag { position: relative; margin-top: .2rem; font-size: .68rem; color: #b42318; font-weight: 650;
            transform: translateX(-50%); white-space: nowrap; display: inline-block; }
        .aichat-ruler-scale { display: flex; justify-content: space-between; font-size: .68rem;
            color: var(--bs-secondary-color); margin-top: .2rem; }

        /* Focused Summary Explore visual in a chat result. */
        .aichat-track-context { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; font-size: .78rem; }
        .aichat-track-context span { flex: 0 0 auto; color: var(--bs-secondary-color); font-size: .7rem; }
        .aichat-focus-tracks-body { padding-bottom: .45rem; }
        .aichat-custom-visual-root { padding: .15rem; }
        .aichat-custom-visual-root .summary-visual-toolbar-card { overflow: visible; }
        .aichat-custom-visual-root .summary-cmdbar-label { display: inline; }
        .aichat-track-evidence { font-size: .68rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
        .aichat-custom-tab-pane[hidden] { display: none; }
        .aichat-custom-region-card { border: 1px solid var(--bs-border-color); border-radius: .55rem; padding: .8rem; background: var(--bs-body-bg); }
        .aichat-track-selection { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: stretch; gap: .4rem; min-width: min(15rem, calc(100% - 1rem)); max-width: min(23rem, calc(100% - 1rem)); padding: .5rem .6rem; border: 0; border-radius: .55rem; background: var(--bs-body-bg); box-shadow: 0 .55rem 1.5rem rgba(0, 0, 0, .22); font-size: .76rem; }
        .aichat-track-selection-title { overflow-wrap: anywhere; line-height: 1.35; }
        .aichat-track-selection-actions { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
        .aichat-track-selection .aichat-track-selection-close { flex: 0 0 auto; width: 1.45rem; height: 1.45rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bs-secondary-color); font-size: 1.15rem; line-height: 1; }
        .aichat-track-selection .aichat-track-selection-close:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
        /* The controls use the Custom-view Settings component from Summary; do
           not override its grid with a chat-specific flex strip. */
        .aichat-focus-controls { margin: 0; overflow: visible; padding: 0; min-width: 0; }
        .aichat-track-settings { position: relative; flex: 0 0 auto; }
        .aichat-track-settings > summary { list-style: none; cursor: pointer; border: 1px solid var(--bs-border-color); border-radius: .42rem; padding: .35rem .55rem; color: var(--bs-body-color); font-size: .78rem; white-space: nowrap; }
        .aichat-track-settings > summary::-webkit-details-marker { display: none; }
        .aichat-track-settings > summary::after { content: "⌄"; margin-left: .35rem; color: var(--bs-secondary-color); }
        .aichat-track-settings[open] > summary::after { content: "⌃"; }
        .aichat-track-settings-menu { position: absolute; z-index: 8; right: 0; top: calc(100% + .35rem); width: 15rem; max-height: 18rem; overflow: auto; padding: .45rem; border: 1px solid var(--bs-border-color); border-radius: .55rem; background: var(--bs-body-bg); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.18); }
        .aichat-track-settings-item { display: flex; align-items: center; gap: .45rem; padding: .27rem .3rem; font-size: .76rem; cursor: pointer; }
        .aichat-track-settings-item:hover { background: var(--bs-tertiary-bg); border-radius: .3rem; }
        .aichat-track-settings-item input { margin: 0; }
        .aichat-track-settings-item .summary-tb-track-pill { flex: 1; min-width: 0; }
        .aichat-track-settings-badges { display: inline-flex; flex: 0 0 auto; }
        .aichat-track-loading { padding: 1.25rem .5rem; color: var(--bs-secondary-color); font-size: .8rem; }
        .aichat-custom-visual-root .summary-plot-with-badges { width: 100%; min-width: 0; overflow: hidden; }
        .aichat-custom-visual-root .summary-plot-with-badges > * { min-width: 0; }
        .aichat-focus-plot { width: 100%; min-width: 0; min-height: 11rem; overflow: hidden; }
        .aichat-focus-plot .plotly .main-svg { border-radius: .35rem; }
        /* The VI ELM renderer is mounted inside a Chat card as a functional
           component.  These are the same tab rules as the VI page itself;
           without them every panel is simply a visible block in Chat. */
        .aichat-vi-visual .vi-elm-tabs-nav { gap: .35rem; padding-bottom: .55rem; border-bottom: 1px solid var(--bs-border-color); }
        .aichat-vi-visual .vi-elm-tabs-nav .nav-link { border: 1px solid transparent; border-radius: .45rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); font-size: .78rem; font-weight: 650; padding: .35rem .55rem; }
        .aichat-vi-visual .vi-elm-tabs-nav .nav-link.active { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); border-color: rgba(var(--bs-primary-rgb), .25); }
        .aichat-vi-visual .vi-elm-tab-pane { display: none; }
        .aichat-vi-visual .vi-elm-tab-pane.active { display: block; }
        .aichat-legend { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .45rem; color: var(--bs-secondary-color); font-size: .69rem; }
        .aichat-legend i { display: inline-block; width: .58rem; height: .58rem; margin-right: .25rem; border: 1px solid #dc2626; background: rgba(220,38,38,.16); vertical-align: -.04rem; }
        .aichat-stat { font-size: .8rem; margin-bottom: .4rem; }
        .aichat-bar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--bs-tertiary-bg); }
        .aichat-bar-seg { height: 100%; }
        .aichat-table { width: 100%; margin-top: .5rem; font-size: .76rem; border-collapse: collapse; }
        .aichat-table th { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
            color: var(--bs-secondary-color); font-weight: 650; text-align: left; padding: .2rem .3rem;
            border-bottom: 1px solid var(--bs-border-color); }
        .aichat-table td { padding: .22rem .3rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
        .aichat-table tr:last-child td { border-bottom: 0; }
        .aichat-table-track-badges { display: inline-flex; align-items: center; min-width: 2.5rem; }
        .aichat-num { text-align: right; white-space: nowrap; }
        /* Cohort results use the same semantic order as the Analysis protein
           table: identity, role, disorder compartment, then the two comparable
           mutation densities.  These are intentionally small badges, rather
           than a second dashboard inside a chat answer. */
        .aichat-cohort-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; padding: .65rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); }
        .aichat-cohort-summary strong { display: block; font-size: .95rem; }
        .aichat-cohort-summary p { max-width: 43rem; margin: .16rem 0 0; color: var(--bs-secondary-color); font-size: .73rem; line-height: 1.38; }
        .aichat-cohort-kicker { display: block; margin-bottom: .08rem; color: var(--bs-secondary-color); font-size: .63rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
        .aichat-cohort-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; padding-top: .12rem; color: var(--bs-secondary-color); font-size: .68rem; white-space: nowrap; }
        .aichat-cohort-legend span { display: inline-flex; align-items: center; gap: .2rem; }
        .aichat-cohort-legend i { width: .62rem; height: .62rem; border-radius: 50%; }
        .aichat-cohort-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
        .aichat-cohort-table { min-width: 52rem; margin: 0; }
        .aichat-cohort-table th { padding: .45rem .48rem; background: var(--bs-tertiary-bg); white-space: nowrap; }
        .aichat-cohort-table th span { color: var(--bs-secondary-color); font-size: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
        .aichat-cohort-table td { padding: .4rem .48rem; }
        .aichat-cohort-table tbody tr:hover { background: color-mix(in srgb, var(--bs-primary) 5%, transparent); }
        .aichat-cohort-rank { width: 2.2rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; text-align: right; }
        .aichat-cohort-gene a { font-weight: 750; text-decoration: none; }
        .aichat-cohort-gene small, .aichat-cohort-disorder small, .aichat-cohort-density small { display: block; margin-top: .08rem; color: var(--bs-secondary-color); font-size: .64rem; line-height: 1.15; }
        .aichat-cohort-roles { display: flex; flex-wrap: wrap; gap: .18rem; }
        .aichat-cohort-role, .aichat-cohort-clin { display: inline-block; padding: .08rem .34rem; border-radius: .27rem; font-size: .65rem; font-weight: 650; line-height: 1.2; white-space: nowrap; }
        .aichat-cohort-role--driver { color: #b91c1c; background: rgba(185, 28, 28, .12); }
        .aichat-cohort-role--oncogene { color: #b45309; background: rgba(217, 119, 6, .16); }
        .aichat-cohort-role--tsg { color: #1d4ed8; background: rgba(29, 78, 216, .14); }
        .aichat-cohort-role--fusion { color: #6d28d9; background: rgba(124, 58, 237, .15); }
        .aichat-cohort-disorder { min-width: 9.1rem; }
        .aichat-cohort-split { display: flex; width: 100%; height: .42rem; margin-bottom: .19rem; overflow: hidden; border-radius: 99px; background: var(--bs-border-color); }
        .aichat-cohort-split span { display: block; min-width: 0; }
        .aichat-cohort-density-cell { min-width: 6.4rem; }
        .aichat-cohort-density { display: grid; grid-template-columns: auto 1fr; column-gap: .28rem; align-items: baseline; min-width: 5.8rem; padding: .2rem .28rem; border-left: .18rem solid; border-radius: .22rem; background: var(--bs-tertiary-bg); }
        .aichat-cohort-density > span { font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
        .aichat-cohort-density b { text-align: right; font-variant-numeric: tabular-nums; }
        .aichat-cohort-density small { grid-column: 1 / -1; }
        .aichat-cohort-density--idr { border-color: #d14b8f; }
        .aichat-cohort-density--ordered { border-color: #4b82c3; }
        .aichat-cohort-clin { color: #1d4ed8; background: rgba(29, 78, 216, .11); }
        .aichat-muted { color: var(--bs-secondary-color); font-size: .69rem; }
        .aichat-cohort-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; color: var(--bs-secondary-color); font-size: .72rem; }
        .aichat-cohort-pager > div { display: inline-flex; gap: .35rem; }
        .aichat-cohort-loading { display: flex; align-items: center; gap: .45rem; min-height: 7rem; color: var(--bs-secondary-color); font-size: .78rem; }
        @media (max-width: 575.98px) { .aichat-cohort-summary { display: block; } .aichat-cohort-legend { justify-content: flex-start; margin-top: .45rem; } }
        .aichat-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
        .aichat-tag { display: inline-block; padding: .1rem .4rem; border-radius: 999px; font-size: .68rem;
            background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
        .aichat-tag--pathogenic { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
        .aichat-tag--benign { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
        .aichat-tag--ambiguous { background: #fef3c7; border-color: #fde68a; color: #92400e; }
        .aichat-status-summary { display: flex; flex-wrap: wrap; gap: .42rem; margin: .55rem 0 .8rem; }
        .aichat-status-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: .28rem .4rem .28rem .48rem; border: 1px solid var(--bs-border-color); border-radius: .48rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: .72rem; line-height: 1; }
        .aichat-status-chip i { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: var(--aichat-status-color); }
        .aichat-status-chip-label { text-transform: capitalize; color: var(--bs-secondary-color); }
        .aichat-status-chip strong { min-width: 1.65rem; padding: .22rem .34rem; border-radius: .3rem; background: color-mix(in srgb, var(--aichat-status-color) 14%, transparent); color: var(--aichat-status-color); text-align: center; font-size: .78rem; }
        .aichat-status-chip--pathogenic { --aichat-status-color: #dc2626; }
        .aichat-status-chip--uncertain { --aichat-status-color: #a16207; }
        .aichat-status-chip--benign { --aichat-status-color: #2563eb; }
        .aichat-status-chip--other { --aichat-status-color: #64748b; }
        .aichat-predictor-reading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; padding: .6rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .55rem; background: var(--bs-tertiary-bg); }
        .aichat-predictor-reading > div:first-child { display: grid; gap: .12rem; font-size: .8rem; }
        .aichat-predictor-reading > div:first-child span { max-width: 31rem; color: var(--bs-secondary-color); font-size: .73rem; line-height: 1.35; }
        .aichat-predictor-reading .aichat-status-summary { margin: 0; }
        .aichat-ppi-toolbar, .aichat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
        .aichat-ppi-toolbar { margin-bottom: .55rem; }
        .aichat-ppi-toolbar input[type="number"] { width: 4.2rem; margin-left: .25rem; }
        .aichat-ppi-sources { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-left: .55rem; border-left: 1px solid var(--bs-border-color); font-size: .73rem; }
        .aichat-ppi-sources label { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; white-space: nowrap; }
        .aichat-ppi-sources input { margin: 0; }
        .aichat-ppi-context { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .55rem; font-size: .73rem; color: var(--bs-secondary-color); }
        .aichat-legend { margin-bottom: .4rem; font-size: .72rem; }
        .aichat-legend > span { display: inline-flex; align-items: center; gap: .25rem; }
        .aichat-ppi-line { display: inline-block; width: 1.25rem; border-top: 2px solid; }
        .aichat-ppi-line--intact { border-color: #FF5733; }
        .aichat-ppi-line--hippie { border-color: #33FF57; border-top-style: dotted; }
        .aichat-ppi-line--biogrid { border-color: #5733FF; border-top-style: dashed; }
        .aichat-ppi-ring { display: inline-block; width: 1rem; height: 1rem; border: .12rem solid #1e3a8a; border-radius: 50%; background: conic-gradient(#dc2626 0 40%, #2563eb 40% 100%); }
        .aichat-ppi-driver { display: inline-block; width: .9rem; height: .9rem; border: .18rem double #f59e0b; border-radius: 50%; background: #1e3a8a; }
        .aichat-ppi-cy { min-height: 24rem; border-radius: .45rem; background: var(--bs-tertiary-bg); }
        .aichat-ppi-shared { margin-top: .8rem; }
        .aichat-ppi-shared-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .8rem; font-weight: 700; }
        .aichat-ppi-shared-title span { color: var(--bs-secondary-color); font-size: .7rem; font-weight: 500; }
        .aichat-ppi-shared-title span:first-child { color: var(--bs-body-color); font-size: .8rem; font-weight: 700; }
        .aichat-ppi-partner-table { min-width: 45rem; }
        .aichat-ppi-idr { display: flex; align-items: center; gap: .35rem; min-width: 7.5rem; }
        .aichat-ppi-idr > div { flex: 1; height: .45rem; overflow: hidden; border-radius: 99px; background: var(--bs-tertiary-bg); }
        .aichat-ppi-idr > div > span { display: block; height: 100%; background: #d14b8f; }
        .aichat-ppi-idr b { min-width: 2.8rem; font-size: .68rem; font-variant-numeric: tabular-nums; text-align: right; }

        /* Track settings, borrowing the Summary panel's own group boxes so the two
           read as one control. The grid classes come from Bootstrap; the group box
           and item styles from the Summary stylesheet this page already loads. */
        .aichat-track-settings-panel { flex: 0 0 100%; order: 10; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
        .aichat-track-settings-summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; color: var(--bs-body-color); font-size: .78rem; font-weight: 650; }
        .aichat-track-settings-summary::-webkit-details-marker { display: none; }
        .aichat-track-settings-summary::before { content: "⌄"; color: var(--bs-secondary-color); transition: transform .16s ease; }
        .aichat-track-settings-panel[open] .aichat-track-settings-summary::before { transform: rotate(180deg); }
        .aichat-track-settings-body { padding-top: .6rem; }
        .aichat-track-settings-panel .aichat-track-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
        .aichat-track-settings-panel .aichat-track-groups > .col { width: auto; max-width: 100%; padding: 0; }
        .aichat-track-settings-panel .summary-track-visibility-group-box {
            border: 1px solid var(--bs-border-color); border-radius: .5rem;
            padding: .45rem .5rem; background: var(--bs-body-bg); height: 100%;
        }
        .aichat-track-settings-panel .summary-track-visibility-group-title {
            font-size: .66rem; font-weight: 750; letter-spacing: .05em;
            text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .15rem;
        }
        .aichat-track-settings-panel .summary-track-visibility-item {
            display: flex !important; flex-direction: row !important; align-items: center !important;
            justify-content: flex-start !important; font-size: .76rem; margin: 0; cursor: pointer; line-height: 1.25;
            /* The pill is a full-width block on its own, which wrapped the box and
               the badges onto separate lines. One row: box, badges, then the pill
               taking what is left. */
            flex-wrap: nowrap; min-width: 0; width: 100%;
        }
        .aichat-track-settings-panel .summary-track-visibility-item input { flex: 0 0 auto; align-self: center; }
        .aichat-track-settings-panel .summary-tb-track-pill {
            display: inline-flex !important; align-items: center; flex: 1 1 0; min-width: 0; width: auto !important; margin: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .aichat-track-settings-panel .aichat-track-settings-badges { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .1rem; }

        /* ---- one visual identity for element content ----------------------- */
        /* Every element draws from the same three primitives: a table, a legend
           and a stat line. They had drifted into several shapes — different
           paddings, different header casing, two legend markups — which reads as
           several tools stitched together rather than one. */
        .ai-question { display: flex; flex-direction: column; gap: .15rem; }
        .ai-question-wf { font-size: .62rem; font-weight: 750; letter-spacing: .06em;
            text-transform: uppercase; color: var(--bs-primary); }
        .ai-question-text { font-size: .76rem; line-height: 1.35; }

        /* Mutation density: bars against the protein's own mean. */
        .aichat-density { position: relative; display: flex; align-items: flex-end; gap: 1px;
            height: 5rem; padding: .2rem; border: 1px solid var(--bs-border-color);
            border-radius: .4rem; background: var(--bs-tertiary-bg); }
        .aichat-density-bar { flex: 1 1 0; min-width: 1px; border-radius: 1px 1px 0 0; }
        .aichat-density-mean { position: absolute; left: .2rem; right: .2rem; height: 0;
            border-top: 1px dashed var(--bs-secondary-color); pointer-events: none; }

        /* Workflow map: the answer's trace, vertical because the steps are ordered. */
        .aichat-flow { list-style: none; margin: 0; padding: 0; position: relative; }
        .aichat-flow::before { content: ""; position: absolute; left: .72rem; top: .9rem; bottom: .9rem;
            width: 2px; background: var(--bs-border-color); }
        .aichat-flow-step { position: relative; display: flex; gap: .6rem; padding: .3rem 0; }
        .aichat-flow-mark { position: relative; z-index: 1; flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
            display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
            font-size: .95rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
            color: var(--bs-secondary-color); }
        .aichat-flow-step--finding .aichat-flow-mark { background: #dcfce7; border-color: #86efac; color: #166534; }
        .aichat-flow-step--caveat .aichat-flow-mark { background: #fef3c7; border-color: #fde68a; color: #92400e; }
        .aichat-flow-step--question .aichat-flow-mark { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
        .aichat-flow-kind { font-size: .6rem; font-weight: 750; letter-spacing: .06em;
            text-transform: uppercase; color: var(--bs-secondary-color); }
        .aichat-flow-label { font-size: .82rem; font-weight: 600; line-height: 1.3; }
        .aichat-flow-detail { font-size: .74rem; color: var(--bs-secondary-color); line-height: 1.35; }
        .aichat-evidence-source { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .45rem; border-radius: .4rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-size: .72rem; font-weight: 650; }
        .aichat-evidence-source .material-symbols-outlined { font-size: 1rem; }
        .aichat-motif-question { margin: .75rem 0 .55rem; color: var(--bs-secondary-color); font-size: .8rem; line-height: 1.4; }
        .aichat-motif-evidence-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .55rem; }
        .aichat-motif-evidence { padding: .65rem .7rem; border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, var(--bs-border-color)); border-radius: .5rem; background: var(--bs-tertiary-bg); }
        .aichat-motif-evidence-kicker { color: var(--bs-primary); font-size: .64rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
        .aichat-motif-evidence-name { margin-top: .14rem; font-weight: 700; font-size: .84rem; }
        .aichat-motif-evidence code, .aichat-motif-evidence-span { display: inline-block; margin: .35rem .28rem 0 0; font-size: .7rem; }
        .aichat-motif-evidence-span { color: var(--bs-secondary-color); }
        .aichat-motif-evidence p { margin: .45rem 0 0; color: var(--bs-secondary-color); font-size: .74rem; line-height: 1.35; }
        .aichat-mechanism-caveat { margin-top: .7rem; padding: .55rem .65rem; border-left: 3px solid #d97706; border-radius: 0 .4rem .4rem 0; background: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-body-color); font-size: .76rem; line-height: 1.4; }
        .aichat-focus-plot .nsewdrag { cursor: crosshair !important; }
        .aichat-group-title { font-size: .7rem; font-weight: 750; letter-spacing: .04em;
            text-transform: uppercase; color: var(--bs-body-color); }

        /* One legend, one table. The elements had grown three legend markups and
           two table skins between them, which is what makes a set of cards read
           as several tools rather than one. */
        .aichat-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: .15rem;
            margin-right: .25rem; vertical-align: -.05rem; }
        .ai-workspace-panel table { font-size: .78rem; }
        .aichat-structure-frame { width: 100%; height: 22rem; border: 1px solid var(--bs-border-color);
            border-radius: .45rem; background: #fff; }