/* Chat transcripts: a column of bubbles, each turn styled by its author.
   User turns sit right-aligned in a filled brand bubble; Modeler turns sit
   left-aligned in a light card; thinking turns are quiet, borderless traces.
   Colors sampled from the reference chat UI:
   chat area #F2F0ED, user bubble #3773A5, Modeler bubble #FFFFFF. */
/* The `container` class docutils puts on every directive div makes Furo's
   `[role=main] .container { padding-left: 0; padding-right: 0; max-width: none }`
   apply to the chat area and to each bubble. That rule loads after this file, so
   any selector here that only ties on specificity loses and the horizontal
   padding collapses. The `[role=main] div…` prefix on the rules below outweighs
   it; keep the prefix on anything setting horizontal padding or max-width. */
/* The chat area is a fixed light surface in BOTH color schemes — the bubble
   colors above are literal hex values, not theme variables, because the chat is
   meant to look like the product's chat UI rather than like the page around it.
   That creates one systematic hazard: every descendant still inherits the
   theme's color variables, which flip with light/dark mode, so anything drawing
   its own color from a variable ends up painted for the wrong background. Inline
   literals were the visible symptom — `--color-inline-code-background` resolves
   to #f8f9fb in light mode, invisible against the white text of a user bubble,
   and to #1a1c1e in dark mode, invisible against the dark text of a Modeler
   bubble (1.05:1 and 1.02:1 contrast respectively).
   Fixing the symptom one element at a time would mean chasing each new
   construct that appears in a transcript. Instead, re-declare the variables at
   the chat container so the whole subtree resolves against a light surface at
   all times, pinned to Furo's own light-mode values. Anything added to a
   transcript later inherits the correct values for free.
   Deliberately NOT pinned: --color-code-background / --color-code-foreground and
   the .highlight rules that style code blocks. Those are legible in dark mode
   already (a dark block on the light card reads as intentional, the way an
   embedded editor does), and pygments hard-codes its dark palette against
   `body[data-theme]` selectors that a variable override here could not reach
   anyway — so overriding the background alone would leave dark syntax colors on
   a light block. See the .highlight rule further down for the one adjustment
   they do need. */

[role="main"] div.modeler-chat {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    margin: 1em 0 1.5em;
    padding: 1.2em 1.3em;
    background: #EDF1F7;
    border-radius: 0.6em;

    /* Furo's light-mode values, pinned so they survive dark mode. */
    --color-foreground-primary: #000;
    --color-foreground-secondary: #5a5c63;
    --color-foreground-muted: #6b6f76;
    --color-foreground-border: #878787;
    --color-background-primary: #fff;
    --color-background-secondary: #f8f9fb;
    --color-background-hover: #efeff4;
    --color-background-border: #eeebee;
    --color-background-item: #ccc;
    --color-brand-primary: #0a4bff;
    --color-brand-content: #2757dd;
    --color-brand-visited: #872ee0;
    --color-problematic: #b30000;
    --color-inline-code-background: #f8f9fb;
    --color-highlighted-background: #def;
    --color-guilabel-background: #ddeeff80;
    --color-guilabel-border: #bedaf580;
    --color-admonition-background: transparent;
    --color-table-header-background: #f8f9fb;
    --color-table-border: #eeebee;
    --color-card-border: #f8f9fb;
    --color-card-background: transparent;
    --color-card-marginals-background: #f8f9fb;
}

/* Dark mode: only the container's own background flips, to the dark end of the
   same blue-gray hue as the light-mode #EDF1F7. Everything inside stays pinned
   to the light-mode variables above — the bubbles are meant to look like the
   product's chat UI regardless of site theme, so only the surface around them
   should respond to dark mode. */
body[data-theme="dark"] [role="main"] div.modeler-chat {
    background: #232833;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] div.modeler-chat {
        background: #232833;
    }
}

[role="main"] div.modeler-chat .chat-turn {
    /* Override Furo's .container width:100%, which would force every bubble to
       span the full width and defeat align-self / the asymmetric margins. */
    width: auto;
    padding: 0.7em 1em;
    border-radius: 1.1em;
    line-height: 1.55;
}

.modeler-chat .chat-turn > :first-child {
    margin-top: 0;
}

.modeler-chat .chat-turn > :last-child {
    margin-bottom: 0;
}

/* User turns: right-aligned, filled blue bubble with light text.
   Wide gap on the left, small gap on the right. */
.modeler-chat .chat-user {
    align-self: flex-end;
    margin-left: 30%;
    margin-right: 0;
    background: #3773A5;
    color: #fff;
    border-bottom-right-radius: 0.2em;
}

.modeler-chat .chat-user a {
    color: #fff;
    text-decoration: underline;
}

/* Inline literals in a user bubble. The bubble sets color:#fff for prose, which
   an inline literal inherits — but the literal paints its own pale background
   (#f8f9fb, pinned above), so white-on-pale is the light-mode bug: `open[p]`
   measured 1.05:1. The literal needs its own dark foreground rather than the
   bubble's, and enough of a border to read as a literal against the blue.
   The three-class selector matches what docutils emits (`code.docutils.literal`)
   and outweighs Furo's `p code.literal` border rule without !important. */
[role="main"] .modeler-chat .chat-user code.docutils.literal {
    color: #14171a;
    background: #eef2f7;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

/* Literals nest a .pre span that carries its own color in some Furo versions,
   so the color has to be restated on the child or it keeps inheriting #fff. */
[role="main"] .modeler-chat .chat-user code.docutils.literal .pre,
[role="main"] .modeler-chat .chat-user code.docutils.literal span {
    color: inherit;
}

/* Block code (a `.. code-block::` pasted into a user turn, e.g. an error
   message) hits the same hazard as the inline literal above. Pygments'
   own `.highlight` rule sets an explicit text color that should normally
   win over the bubble's inherited white, but that only holds as long as
   pygments.css keeps declaring it there; restate it here, after
   pygments.css in load order, so a code block stays readable against its
   own gray/dark background regardless of upstream changes to that rule.
   Only `.highlight`/`pre` are restated, not `span` — token spans (`.k`,
   `.n`, ...) already carry their own explicit colors and must stay free
   to color actual syntax highlighting in any future non-plain snippet. */
[role="main"] .modeler-chat .chat-user .highlight,
[role="main"] .modeler-chat .chat-user .highlight pre {
    color: #1E1E1E;
}

body[data-theme="dark"] [role="main"] .modeler-chat .chat-user .highlight,
body[data-theme="dark"] [role="main"] .modeler-chat .chat-user .highlight pre {
    color: #D0D0D0;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .modeler-chat .chat-user .highlight,
    body:not([data-theme="light"]) [role="main"] .modeler-chat .chat-user .highlight pre {
        color: #D0D0D0;
    }
}

/* Modeler turns: left-aligned, white card.
   Wide gap on the right, small gap on the left. */
.modeler-chat .chat-modeler {
    align-self: flex-start;
    margin-right: 30%;
    margin-left: 0;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-bottom-left-radius: 0.2em;
}

.modeler-chat .chat-modeler a {
    color: #3773A5;
}

/* Thinking traces: quiet, full-width, no bubble — Modeler's reasoning.
   Rendered as a timeline: each step gets a bullet, and a short vertical
   connector joins it to the step below. Consecutive steps therefore read as one
   chain of reasoning rather than separate blocks. */
[role="main"] div.modeler-chat .chat-thinking {
    align-self: stretch;
    max-width: 100%;
    position: relative;
    padding: 0.2em 0 0.2em 2.1em;
    color: #55555a;
    font-size: 0.92em;
}

/* The bullet for each reasoning step, vertically centred on its first line. */
[role="main"] div.modeler-chat .chat-thinking::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0.32em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #55555a;
}

/* Connector from this step's bullet down to the next one. Spans the gap between
   turns, so it is drawn on every thinking step that is followed by another. */
[role="main"] div.modeler-chat .chat-thinking:has(+ .chat-thinking)::after {
    content: "";
    position: absolute;
    top: 1.45em;
    bottom: -1.15em;
    left: 0.54em;
    width: 1px;
    background: #b8b6b1;
}

/* The final reasoning step before Modeler answers is marked with a sparkle
   instead of a bullet, and ends the chain. */
[role="main"] div.modeler-chat .chat-thinking:not(:has(+ .chat-thinking))::before {
    top: 0.2em;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0;
    background: url("../../thinking-sparkle.svg") no-repeat center / contain;
}