/* ────────────────────────────────────────────────────────────────────────────
   Aspis AI Chat — shared client styles (self-hosted, CSP style-src 'self').

   The BLEND:
     · Baseline = Western Blot warm-dark card (warm gradient assistant bubbles,
       grey user bubbles, asymmetric corners, 34px brand-mark, 44px pill input,
       amber→rose round send button).
     · Overlay  = RNA-seq helper chrome (optional context strip with amber halo
       dot, cyan monospace source pills in drawer mode, taller list, darker
       composer in the drawer variant).

   Sober, no glassmorphism overload. Warm gradients + crisp borders + subtle
   transitions. Local --aic-* tokens carry the warm palette so the look is
   stable whether or not agora.css loaded; brand tokens are reused where they
   already match (radius, fonts, status tones).

   All selectors are class-scoped under .aspis-ai-chat so it can mount anywhere.
   ──────────────────────────────────────────────────────────────────────────── */

.aspis-ai-chat {
  /* Warm-dark local palette (from WB / rnaseq helper) */
  --aic-text: #f8f0e6;
  --aic-muted: #c7b7a7;
  --aic-quiet: #8c8178;
  --aic-line: rgba(255, 255, 255, 0.12);
  --aic-line-soft: rgba(255, 255, 255, 0.075);
  --aic-amber: #f4d19a;
  --aic-rose: #d4a9a0;
  --aic-cyan: #87d8f7;
  /* Chat surface follows the host PAGE colour. JS sets --aic-page-bg at mount
     from the computed background of the surrounding surface; the fallback chain
     uses the page's own design tokens so it adapts even before/without JS. A
     neutral white overlay provides elevation that reads on any page hue. */
  --aic-page-bg: var(--ag-paper, var(--lab-bg, var(--av2-bg, #11141b)));
  --aic-surface: var(--aic-page-bg);

  display: flex;
  flex-direction: column;
  border: 1px solid var(--ag-line, var(--aic-line));
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 32%),
    var(--aic-surface);
  color: var(--aic-text);
  font-family: var(--ag-font-body, "Inter", system-ui, sans-serif);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  max-width: 100%;
}

/* ── Header: 34px brand-mark + title + status (+ optional toggle) ─────────── */
.aspis-ai-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.02);
}

.aspis-ai-chat__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.aspis-ai-chat__mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.96;
}

.aspis-ai-chat__title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aspis-ai-chat__title strong {
  font-size: 18px;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--aic-text);
}

.aspis-ai-chat__status {
  font-size: 12px;
  color: var(--aic-quiet);
  min-height: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aspis-ai-chat__status[data-tone="good"] { color: var(--ag-good, #22c55e); }
.aspis-ai-chat__status[data-tone="warn"] { color: var(--ag-warn, #f59e0b); }
.aspis-ai-chat__status[data-tone="bad"]  { color: var(--ag-bad, #ef4444); }

.aspis-ai-chat__toggle {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--aic-muted);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aspis-ai-chat__toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(244, 209, 154, 0.5);
  color: var(--aic-text);
}

/* ── Optional context strip (rnaseq "Acting on …" pill + amber halo dot) ──── */
.aspis-ai-chat__context {
  margin: 14px 18px 0;
  width: fit-content;
  max-width: calc(100% - 36px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--aic-muted);
  font-size: 12px;
}

.aspis-ai-chat__context:empty,
.aspis-ai-chat__context[hidden] { display: none; }

.aspis-ai-chat__context strong {
  color: var(--aic-text);
  font-weight: 680;
}

.aspis-ai-chat__context-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--aic-amber);
  box-shadow: 0 0 0 5px rgba(244, 209, 154, 0.13);
}

.aspis-ai-chat__context-dot[data-tone="good"] {
  background: var(--ag-good, #22c55e);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}
.aspis-ai-chat__context-dot[data-tone="warn"] {
  background: var(--aic-amber);
  box-shadow: 0 0 0 5px rgba(244, 209, 154, 0.13);
}
.aspis-ai-chat__context-dot[data-tone="bad"] {
  background: var(--ag-bad, #ef4444);
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.14);
}

/* ── Collapsible: hide the body until .is-open ───────────────────────────── */
.aspis-ai-chat__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.aspis-ai-chat--collapsible .aspis-ai-chat__body { display: none; }
.aspis-ai-chat--collapsible.is-open .aspis-ai-chat__body { display: flex; }

/* ── Message list ────────────────────────────────────────────────────────── */
.aspis-ai-chat__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
  max-height: 440px;
  min-height: 130px;
  scrollbar-width: thin;
}

.aspis-ai-chat__list::-webkit-scrollbar { width: 6px; }
.aspis-ai-chat__list::-webkit-scrollbar-thumb {
  background: var(--aic-line);
  border-radius: 3px;
}

/* Each message: uppercase label ABOVE a bubble. Avatar hidden (WB look). */
.aspis-ai-chat__msg {
  display: grid;
  gap: 7px;
  min-width: 0;
  animation: aic-fade-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aspis-ai-chat__msg[data-role="user"]      { padding-left: 62px; }
.aspis-ai-chat__msg[data-role="assistant"] { padding-right: 12px; }

/* Per-message round avatar is not used in the WB look — keep it out of flow. */
.aspis-ai-chat__avatar { display: none; }

.aspis-ai-chat__who {
  display: block;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--aic-quiet);
  margin-bottom: 0;
}

.aspis-ai-chat__bubble {
  min-width: 0;
  border: 1px solid var(--aic-line-soft);
  border-radius: 24px;
  padding: 15px 16px;
  font-size: 13px;
  line-height: 1.54;
  color: var(--aic-text);
}

/* User bubble: grey gradient, asymmetric top-right corner */
.aspis-ai-chat__msg[data-role="user"] .aspis-ai-chat__bubble {
  border-top-right-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(35, 36, 42, 0.82);
}

/* Assistant bubble: warm amber→cyan gradient, asymmetric top-left corner */
.aspis-ai-chat__msg[data-role="assistant"] .aspis-ai-chat__bubble {
  border-top-left-radius: 10px;
  background:
    linear-gradient(155deg, rgba(248, 226, 201, 0.09), rgba(255, 255, 255, 0.03) 46%, rgba(135, 216, 247, 0.045)),
    rgba(16, 17, 20, 0.92);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

.aspis-ai-chat__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.54;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--aic-text);
}

/* ── Streaming caret: blinking bar appended to the in-progress bubble ─────── */
.aspis-ai-chat__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--aic-amber);
  animation: aic-caret-blink 1s steps(1, end) infinite;
}

/* ── Source pills — teal in card mode, cyan monospace in drawer mode ──────── */
.aspis-ai-chat__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.aspis-ai-chat__source-pill {
  max-width: 100%;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(95, 210, 189, 0.1);
  border: 1px solid rgba(95, 210, 189, 0.32);
  color: var(--ag-teal, #5fd2bd);
  transition: transform 0.15s ease, background 0.15s ease;
  overflow-wrap: anywhere;
}

.aspis-ai-chat__source-pill:hover {
  transform: translateY(-1px);
  background: rgba(95, 210, 189, 0.16);
}

/* ── Tool indicator ──────────────────────────────────────────────────────── */
.aspis-ai-chat__tool {
  margin-top: 8px;
  font-size: 12px;
  color: var(--aic-muted);
  font-style: italic;
}

/* ── Miniapp card ────────────────────────────────────────────────────────── */
.aspis-ai-chat__miniapp {
  margin-top: 12px;
  border: 1px solid var(--aic-line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
}

.aspis-ai-chat__miniapp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.aspis-ai-chat__miniapp-head strong {
  font-size: 13px;
  font-weight: 680;
  color: var(--aic-text);
}

.aspis-ai-chat__badge {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 197, 66, 0.16);
  border: 1px solid rgba(245, 197, 66, 0.4);
  color: var(--ag-amber, #f5c542);
}

.aspis-ai-chat__miniapp-open,
.aspis-ai-chat__action {
  border: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--aic-text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.aspis-ai-chat__miniapp-open:hover,
.aspis-ai-chat__action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(244, 209, 154, 0.5);
}

.aspis-ai-chat__action {
  margin-top: 10px;
  margin-right: 6px;
}

.aspis-ai-chat__action.is-noop {
  opacity: 0.55;
  cursor: default;
}

/* ── Suggestion chips ────────────────────────────────────────────────────── */
.aspis-ai-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px 4px;
}

.aspis-ai-chat__chips:empty { display: none; }

.aspis-ai-chat__chip {
  border: 1px solid var(--aic-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--aic-text);
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.aspis-ai-chat__chip:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(244, 209, 154, 0.45);
}

.aspis-ai-chat__chip:disabled { opacity: 0.45; cursor: default; }

/* ── Composer: [attach] pill input + round amber→rose send ───────────────── */
.aspis-ai-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.02);
}

/* Hidden file input (PDF picker is opened via the attach button). */
.aspis-ai-chat__file { display: none; }

/* Attach (paperclip) button — flat, muted, matches the toggle chrome. */
.aspis-ai-chat__attach {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--aic-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aspis-ai-chat__attach svg { width: 18px; height: 18px; display: block; }
.aspis-ai-chat__attach:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(244, 209, 154, 0.5);
  color: var(--aic-text);
}

.aspis-ai-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  border: 1px solid var(--aic-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--aic-text);
  border-radius: 22px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.aspis-ai-chat__input::placeholder { color: var(--aic-quiet); }

.aspis-ai-chat__input:focus {
  outline: none;
  border-color: rgba(244, 209, 154, 0.5);
}

.aspis-ai-chat__input:disabled { opacity: 0.55; }

.aspis-ai-chat__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg, #f8e2c9, #d4a9a0);
  color: #14100b;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(212, 169, 160, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

/* Icon-only button: an inline "send" SVG (lucide paper-plane) is appended in
   JS; the accessible name comes from the button's aria-label. */
.aspis-ai-chat__send svg {
  display: block;
  width: 18px;
  height: 18px;
  margin-left: -1px; /* optical centering of the paper-plane */
}

.aspis-ai-chat__send:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 34px rgba(212, 169, 160, 0.3);
}

.aspis-ai-chat__send:disabled { opacity: 0.52; cursor: not-allowed; }

/* ── Attachment chips (ephemeral PDF context) above the composer ─────────── */
.aspis-ai-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px;
}
.aspis-ai-chat__attachments:empty { display: none; }

.aspis-ai-chat__attachment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 8px 5px 9px;
  border: 1px solid rgba(135, 216, 247, 0.24);
  background: rgba(135, 216, 247, 0.08);
  border-radius: 999px;
  font-size: 12px;
  color: var(--aic-text);
}
.aspis-ai-chat__attachment-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--aic-cyan);
  border: 1px solid rgba(135, 216, 247, 0.4);
  border-radius: 4px;
  padding: 1px 4px;
}
.aspis-ai-chat__attachment-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aspis-ai-chat__attachment-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--aic-quiet);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.aspis-ai-chat__attachment-remove:hover { color: var(--aic-text); }

/* ── Visually-hidden label (a11y) ────────────────────────────────────────── */
.aspis-ai-chat__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   DRAWER variant — rnaseq helper chrome: fixed right, full height, taller
   list, darker composer, cyan monospace source pills, slide-in.
   ════════════════════════════════════════════════════════════════════════ */
.aspis-ai-chat--drawer {
  position: fixed;
  top: var(--rn-topbar-h, 0);
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(468px, 100vw);
  max-width: 100vw;
  border: 0;
  border-left: 1px solid var(--aic-line);
  border-radius: 34px 0 0 34px;
  background:
    linear-gradient(180deg, rgba(248, 226, 201, 0.09), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 48%),
    var(--aic-surface);
  box-shadow: -34px 0 90px rgba(0, 0, 0, 0.54);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

/* In drawer mode the body must fill the height; the list takes the slack. */
.aspis-ai-chat--drawer .aspis-ai-chat__body {
  flex: 1 1 auto;
  min-height: 0;
}

.aspis-ai-chat--drawer .aspis-ai-chat__list {
  flex: 1 1 auto;
  max-height: none;
}

/* Drawer opens via .is-open (collapsible) OR is always open if not collapsible. */
.aspis-ai-chat--drawer.is-open,
.aspis-ai-chat--drawer:not(.aspis-ai-chat--collapsible) {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Darker composer bar in the drawer */
.aspis-ai-chat--drawer .aspis-ai-chat__composer {
  background: rgba(5, 6, 7, 0.48);
}

/* Cyan monospace source pills in the drawer */
.aspis-ai-chat--drawer .aspis-ai-chat__source-pill {
  background: rgba(135, 216, 247, 0.08);
  border-color: rgba(135, 216, 247, 0.24);
  color: var(--aic-cyan);
  font-family: var(--ag-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 10.5px;
}

/* ── Floating launcher (opens the collapsible drawer) ────────────────────────
   The drawer is off-screen when closed, so its in-header toggle is unreachable;
   this fixed launcher lives outside the drawer and opens it. Hidden while open. */
.aspis-ai-chat__launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 39;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: linear-gradient(145deg, #f8e2c9, #d4a9a0);
  color: #14100b;
  font-family: var(--ag-font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(212, 169, 160, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.aspis-ai-chat__launcher:hover { transform: translateY(-2px); }
.aspis-ai-chat__launcher.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
}
.aspis-ai-chat__launcher-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65));
  overflow: hidden;
}
.aspis-ai-chat__launcher-mark img { width: 18px; height: 18px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .aspis-ai-chat__launcher { transition: none !important; }
}

/* ── Approval card (AI proposes → user approves → THEN it's written) ─────────
   Nothing is committed to the Lab Book until the user clicks Approve. */
.aspis-ai-chat__approval {
  margin-top: 12px;
  border: 1px solid rgba(244, 209, 154, 0.32);
  border-radius: 14px;
  background: rgba(244, 209, 154, 0.06);
  padding: 12px;
}
.aspis-ai-chat__approval-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.aspis-ai-chat__approval-title {
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aic-amber);
}
.aspis-ai-chat__approval-section {
  font-size: 11px;
  color: var(--aic-muted);
  border: 1px solid var(--aic-line);
  border-radius: 999px;
  padding: 1px 8px;
}
.aspis-ai-chat__approval-preview {
  margin: 0 0 10px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aic-text);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}
.aspis-ai-chat__approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.aspis-ai-chat__approval-discard,
.aspis-ai-chat__approval-approve {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--aic-line);
}
.aspis-ai-chat__approval-discard {
  background: transparent;
  color: var(--aic-muted);
}
.aspis-ai-chat__approval-discard:hover { color: var(--aic-text); border-color: var(--aic-line-strong, rgba(255,255,255,0.3)); }
.aspis-ai-chat__approval-approve {
  border-color: transparent;
  background: linear-gradient(145deg, #f8e2c9, #d4a9a0);
  color: #14100b;
}
.aspis-ai-chat__approval-approve:hover { filter: brightness(1.04); }
.aspis-ai-chat__approval-status {
  font-size: 12px;
  color: var(--aic-muted);
}
.aspis-ai-chat__approval-status.is-ok { color: var(--ag-good, #22c55e); }

/* ── WB Inspector: let the always-open card fill the tall right column ───────
   The WB inspector is a flex column (header + content[flex:1] + our mount).
   Make the chat a flex sibling so it shares the column height instead of
   sitting as a tiny card at the bottom. Scoped to .wb-inspector → no effect
   on other surfaces. */
.wb-inspector #wbUnifiedChatMount {
  flex: 0 0 auto;            /* pinned at the bottom — never grow over the
                               inspector's Expert controls/content above it */
  display: flex;
  border-top: 1px solid var(--aic-line);
}
.wb-inspector #wbUnifiedChatMount .aspis-ai-chat {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wb-inspector #wbUnifiedChatMount .aspis-ai-chat__list {
  max-height: 280px;        /* bounded so the panel is usable but the Expert
                               content above keeps its space + scrolls */
}

/* ── Legacy chat hide (flag-on path) ─────────────────────────────────────────
   Self-contained, page-independent hide for the per-surface legacy chat element
   when the unified client takes over. Loaded on every wired page, so the inits
   can rely on this rule regardless of each page's own CSS. Inert until an init
   adds the class (only happens on the flag-ON path); fully reversible via the
   controller/destroy path (remove the class to restore the legacy element). */
.aspis-ai-legacy-hidden { display: none !important; }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes aic-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aic-caret-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aspis-ai-chat,
  .aspis-ai-chat * {
    animation: none !important;
    transition: none !important;
  }
  .aspis-ai-chat--drawer {
    transition: none !important;
  }
}