.aiAnalysisDialog{width:min(560px,100%)!important}
.aiAnalysisBody{padding:20px 22px;color:var(--text);font-size:.92rem;line-height:1.55;max-height:min(60vh,520px);overflow:auto}
.aiAnalysisBody p{margin:0 0 12px}
.aiAnalysisBody ul{margin:0 0 12px;padding-left:20px;display:grid;gap:8px}
.aiAnalysisBody li{margin:0}
.aiAnalysisBody b{color:var(--accent2)}
.aiAnalysisError{color:var(--bad)}
.aiAnalysisLoading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.aiAnalysisLoading span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:aiAnalysisPulse 1s ease-in-out infinite}
.aiAnalysisLoading span:nth-child(2){animation-delay:.15s}
.aiAnalysisLoading span:nth-child(3){animation-delay:.3s}
@keyframes aiAnalysisPulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* Room between the scrolling body and the buttons.
   The shared .themedDialogActions has `padding:0 22px 22px` — no top padding at
   all. That is fine for a short dialog, but this body is `overflow:auto`, so
   once it scrolls the last line of text ends level with the container edge and
   the buttons begin immediately: the text reads as running into them.

   Scoped to this dialog rather than fixing the shared rule, because every other
   themed dialog is currently spaced the way its author intended and a global
   change would move all of them at once. */
.aiAnalysisDialog .themedDialogActions{
  padding-top:18px;
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* And a little breathing room at the end of the scroll, so the final line is
   never flush with the rule above the buttons. */
.aiAnalysisDialog .aiAnalysisBody{ padding-bottom:24px; }

/* Banner header — the artwork replaces the icon + heading, and follows the theme.
   ---------------------------------------------------------------------------
   A CSS background rather than an <img>: the browser fetches only the background-image that actually
   applies, so a light-theme user never downloads the 898 KB dark banner and vice versa. Two <img>
   tags toggled with display would pull both. It also means switching theme repaints an already-open
   dialog with no JS listening for it.

   Scoped to .aiAnalysisDialog on purpose: .themedDialogHeader is shared by every themed dialog in the
   app, and the two-class selector also outranks the 480px rule that repads it, which would otherwise
   inset the background and break the full bleed.

   aspect-ratio replaces the intrinsic height an <img> would have given us. The two artworks are NOT
   the same shape (3.14 vs 2.86), so the light rule overrides it; tools/test_ai_banner_theme.mjs reads
   the real PNG headers and fails if either ratio drifts from the file. */
.aiAnalysisDialog .aiAnalysisHeader{
  display:block;padding:0;border-bottom:1px solid var(--line);
  aspect-ratio:1726/549;
  background:url("/images/AIAB.png?v=4") center/cover no-repeat}
/* Every light theme, listed explicitly to match public/light-theme-refresh-20260721.css.
   NOT [class*="-light"]: "arctic" is a light theme with no -light suffix (--bg:#e2e8ec), and a
   wildcard would hand it the dark banner. The test asserts this list stays in step with that file. */
body.arctic .aiAnalysisDialog .aiAnalysisHeader,
body.theme-light .aiAnalysisDialog .aiAnalysisHeader,
body.graphite-light .aiAnalysisDialog .aiAnalysisHeader,
body.midnight-light .aiAnalysisDialog .aiAnalysisHeader,
body.forest-light .aiAnalysisDialog .aiAnalysisHeader,
body.royal-light .aiAnalysisDialog .aiAnalysisHeader,
body.rose-light .aiAnalysisDialog .aiAnalysisHeader,
body.crimson-light .aiAnalysisDialog .aiAnalysisHeader,
body.copper-light .aiAnalysisDialog .aiAnalysisHeader,
body.ocean-light .aiAnalysisDialog .aiAnalysisHeader,
body.orange-light .aiAnalysisDialog .aiAnalysisHeader,
body.sunrise-light .aiAnalysisDialog .aiAnalysisHeader{
  aspect-ratio:1729/605;
  background-image:url("/images/AIABL.png?v=1")}
/* Kept for aria-labelledby, never shown: the title is already in the artwork. */
.aiAnalysisDialog .aiAnalysisHeader h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}