/* ============================================================================
   ATHENA EXPERIENCE SYSTEM 1.0 — DESIGN FOUNDATION
   Phase 0: tokens & scales ONLY. No component styling yet.
   Loads AFTER frontend.css when `experience_system_enabled` is ON.
   At this phase, ON and OFF are visually identical: these tokens are defined
   but not yet consumed (components are still styled by frontend.css).
   Color tokens reference the certified white-label engine (--aa-brand-*).
   New tokens are additive and default to current/derived values (zero change).
   Scoped to #athena-agent so nothing leaks to the host site.
   ============================================================================ */

#athena-agent {
  /* --- Spacing scale (§C2) --- */
  --aa-sp-1: 4px;
  --aa-sp-2: 8px;
  --aa-sp-3: 12px;
  --aa-sp-4: 16px;
  --aa-sp-5: 20px;
  --aa-sp-6: 24px;
  --aa-sp-7: 32px;
  --aa-sp-8: 40px;
  --aa-sp-9: 48px;

  /* --- Radius system (§C5) --- */
  --aa-r:  16px;   /* container / panel */
  --aa-rb: 14px;   /* bubbles */
  --aa-rc: 11px;   /* controls, input, send, actions */
  --aa-rp: 999px;  /* pills / chips */

  /* --- Typography scale (§C3) --- */
  --aa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --aa-fs-display: 20px;   --aa-fw-display: 700;   --aa-ls-display: -0.3px;
  --aa-fs-title: 14px;     --aa-fw-title: 700;     --aa-ls-title: -0.1px;
  --aa-fs-subtitle: 12.5px;--aa-fw-subtitle: 600;
  --aa-fs-body: 13px;      --aa-lh-body: 1.5;
  --aa-fs-caption: 11.5px; --aa-fw-caption: 600;
  --aa-fs-meta: 11px;      --aa-fw-meta: 500;      --aa-ls-meta: 0.04em;

  /* --- Elevation scale (§C4) --- */
  --aa-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --aa-elev-2: 0 6px 20px rgba(0, 0, 0, 0.10);
  --aa-elev-3: 0 24px 64px rgba(0, 0, 0, 0.18);

  /* --- Motion system (§C6) --- */
  --aa-mo-fast: 120ms;
  --aa-mo: 200ms;
  --aa-mo-slow: 260ms;
  --aa-ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Gradient accent (§C1, token-driven, derived from brand) --- */
  /* Default: brand primary -> accent. Editable later via tokens; never hardcoded here. */
  --aa-grad-a: var(--aa-brand-primary, #3b82f6);
  --aa-grad-b: var(--aa-brand-secondary, #0ea5e9);
  --aa-grad: conic-gradient(from 140deg, var(--aa-grad-a), var(--aa-grad-b), var(--aa-grad-a));

  /* --- Icon sizing (§C7) --- */
  --aa-icon-control: 16px;
  --aa-icon-action: 18px;
  --aa-icon-mark: 18px;

  /* --- Athena Experience canonical palette (--aui-*) — shared across all Athena plugins.
     Additive in Phase 0 (defined, not yet consumed → ON==OFF). Always-dark. The white-label
     brand engine (--aa-brand-*) is preserved and re-anchored to these defaults in Phase 3. --- */
  --aui-bg:#03050C; --aui-surface:#0A0F1D; --aui-surface-2:#0F1628;
  --aui-brand:#5B92FF; --aui-brand-strong:#4F8BFF; --aui-accent:#37D7EF;
  --aui-success:#3DDC97; --aui-warning:#FBBF24; --aui-danger:#F87171; --aui-info:#A78BFA;
  --aui-line:rgba(150,172,212,.11); --aui-line-2:rgba(150,172,212,.18);
  --aui-text:#EAF0FB; --aui-text-2:#A7B4CE; --aui-text-3:#6C7A98;
  --aui-r:16px; --aui-rb:13px; --aui-rc:10px; --aui-rp:999px;
  --aui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --aui-elev:0 18px 50px rgba(0,0,0,.45);
  --aui-grad:linear-gradient(135deg,var(--aui-brand),var(--aui-accent));
}

/* --- Accessibility: collapse motion tokens when reduced motion is requested (§C6/§C9).
   The certified reveal already disables itself in JS; this neutralizes CSS transitions
   that future component phases will define. --- */
@media (prefers-reduced-motion: reduce) {
  #athena-agent {
    --aa-mo-fast: 0ms;
    --aa-mo: 0ms;
    --aa-mo-slow: 0ms;
  }
}

/* ============================================================================
   PHASE 1 — SHELL & CONCIERGE HEADER
   Visual only. Consumes Phase 0 tokens. No markup/JS/engine changes.
   Active only when this stylesheet is loaded (flag ON). Color stays brand-driven
   (the renderer's brand <style> still owns surface/header/logo colors via !important);
   this layer owns structure, spacing, typography, elevation, motion, and the mark.
   ============================================================================ */

/* --- Panel shell: refined radius + elevation on desktop floating only.
   Mobile stays full-screen (legacy) — no radius. --- */
@media (min-width: 769px) {
  #athena-agent .aa-chat.aa-floating .aa-chat-shell {
    border-radius: var(--aa-r);
    overflow: hidden;
  }
  #athena-agent .aa-chat.aa-floating {
    border-radius: var(--aa-r);
    box-shadow: var(--aa-elev-3);
  }
}

/* --- Header layout --- */
#athena-agent .aa-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-sp-3);
  padding: var(--aa-sp-3) var(--aa-sp-4);
  border-bottom: 1px solid var(--aa-brand-input-border, var(--aa-border, rgba(255,255,255,.08)));
}

#athena-agent .aa-header-left {
  display: flex;
  align-items: center;
  gap: var(--aa-sp-3);
  min-width: 0;
  flex: 1 1 auto;
}

/* --- Brand mark: gradient (derived from brand primary -> accent, token-driven).
   An uploaded logo <img> covers this via its inline object-fit; the gradient only
   shows behind the "AI" text fallback, so uploaded brand logos are untouched. --- */
#athena-agent .aa-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--aa-rc);
  background: var(--aa-grad) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  font-size: var(--aa-fs-caption);
  font-weight: 700;
  line-height: 1;
}

/* --- Titles --- */
#athena-agent .aa-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#athena-agent .aa-titles strong {
  font-size: var(--aa-fs-title);
  font-weight: var(--aa-fw-title);
  letter-spacing: var(--aa-ls-title);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Status line + presence dot --- */
#athena-agent .aa-status {
  display: flex;
  align-items: center;
  gap: var(--aa-sp-1);
  font-size: var(--aa-fs-meta);
  font-weight: var(--aa-fw-meta);
  letter-spacing: var(--aa-ls-meta);
  line-height: 1.3;
  min-width: 0;
}
#athena-agent .aa-status > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#athena-agent .aa-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aa-grad-a);
  flex: none;
  position: relative;
}
/* Restrained "live presence" ring — only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  #athena-agent .aa-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--aa-grad-a);
    animation: aa-presence 2.8s var(--aa-ease) infinite;
  }
  @keyframes aa-presence {
    0%   { transform: scale(1);   opacity: .45; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }
}

/* --- Header controls --- */
#athena-agent .aa-controls {
  display: flex;
  align-items: center;
  gap: var(--aa-sp-1);
  flex: none;
}
#athena-agent .aa-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: var(--aa-rc);
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--aa-mo) var(--aa-ease), color var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-iconbtn:hover {
  /* Adapts to icon color → works on dark or light headers without hardcoding. */
  background: color-mix(in srgb, currentColor 12%, transparent);
}
#athena-agent .aa-iconbtn:focus-visible {
  outline: 2px solid var(--aa-grad-a);
  outline-offset: 2px;
}

/* --- Responsive: keep the V7 header consistent on mobile.
   Legacy mobile CSS uses !important (e.g. .aa-chat-header padding @ <=480px), so these
   overrides also use !important (experience-system.css loads last → wins). Values are
   token-based and mobile-appropriate (slightly more compact than desktop). --- */
@media (max-width: 768px) {
  #athena-agent .aa-chat-header {
    padding: var(--aa-sp-2) var(--aa-sp-3) !important;
  }
  #athena-agent .aa-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--aa-rc) !important;
  }
}

/* ============================================================================
   PHASE 2 — CONVERSATION SURFACE
   Visual only. Consumes Phase 0/1 tokens. No markup/JS/engine changes.
   The engine's renderer (renderRichContent) emits p / ul.aa-list+li / strong /
   em / code / a. Those are styled directly; headings/ol/table/pre/blockquote/hr
   are styled defensively (premium if ever present). Bubble/avatar COLORS stay
   brand-driven (renderer brand <style> owns them via !important); this layer owns
   spacing, radius, typography, rhythm, elevation, and the AI avatar gradient.
   ============================================================================ */

/* --- Conversation rhythm: more breathing room (log is already flex-column) --- */
#athena-agent .aa-chat-log {
  padding: var(--aa-sp-4);
  gap: var(--aa-sp-5);
}
#athena-agent .aa-message {
  gap: var(--aa-sp-3); /* avatar <-> bubble */
}

/* --- Bubbles --- */
#athena-agent .aa-message-bubble {
  padding: var(--aa-sp-3) var(--aa-sp-4);
  border-radius: var(--aa-rb);
}
#athena-agent .aa-message-assistant .aa-message-bubble {
  border: 1px solid var(--aa-brand-input-border, var(--aa-border));
  box-shadow: var(--aa-elev-1);
}
#athena-agent .aa-message-user .aa-message-bubble {
  box-shadow: var(--aa-elev-1);
}

/* --- Avatars: rounded-square, refined size; AI = gradient mark, visitor = brand solid --- */
#athena-agent .aa-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--aa-rc);
  font-size: var(--aa-fs-caption);
  font-weight: 700;
  flex: none;
}
#athena-agent .aa-message-assistant .aa-message-avatar {
  background: var(--aa-grad) !important;
}

/* --- Content typography --- */
#athena-agent .aa-content {
  font-size: var(--aa-fs-body);
  line-height: var(--aa-lh-body);
}
#athena-agent .aa-content p { margin: 0 0 var(--aa-sp-2); }
#athena-agent .aa-content p:last-child { margin-bottom: 0; }
#athena-agent .aa-content strong { font-weight: 700; }
#athena-agent .aa-content em { font-style: italic; }

/* --- Lists (engine emits ul.aa-list; ol styled defensively) --- */
#athena-agent .aa-content .aa-list,
#athena-agent .aa-content ul,
#athena-agent .aa-content ol {
  margin: var(--aa-sp-2) 0;
  padding-left: var(--aa-sp-5);
}
#athena-agent .aa-content li {
  margin: var(--aa-sp-1) 0;
  line-height: var(--aa-lh-body);
}
#athena-agent .aa-content li:last-child { margin-bottom: 0; }

/* --- Inline code --- */
#athena-agent .aa-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* --- Links (assistant content only, to avoid contrast issues in the brand visitor bubble) --- */
#athena-agent .aa-message-assistant .aa-content a {
  color: var(--aa-brand-primary, var(--aa-accent));
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--aa-brand-primary, #3b82f6) 40%, transparent);
  transition: border-color var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-message-assistant .aa-content a:hover {
  border-bottom-color: var(--aa-brand-primary, var(--aa-accent));
}

/* --- Citation "SOURCES" heading: legacy styled it with --aa-text-secondary (a dark-theme
   light slate ~#cbd5e1) at opacity 0.7 -> ~1.2:1 contrast on light brand bubbles (invisible).
   Route it through the brand AI-bubble text token at full opacity; the 11px uppercase / tracked
   treatment still reads as a clear secondary label. Specificity (1,1,0) beats the legacy rules
   so no !important is needed. --- */
#athena-agent .aa-citations-title {
  opacity: 1;
  color: var(--aa-brand-ai-bubble-text, var(--aa-text-secondary));
}

/* --- Defensive markdown (not emitted by the engine today; render premium if present) --- */
#athena-agent .aa-content h1,
#athena-agent .aa-content h2,
#athena-agent .aa-content h3,
#athena-agent .aa-content h4,
#athena-agent .aa-content h5,
#athena-agent .aa-content h6 {
  margin: var(--aa-sp-3) 0 var(--aa-sp-2);
  line-height: 1.25;
  font-weight: 700;
}
#athena-agent .aa-content h1 { font-size: var(--aa-fs-display); }
#athena-agent .aa-content h2 { font-size: 16px; }
#athena-agent .aa-content h3 { font-size: 14px; }
#athena-agent .aa-content hr {
  border: 0;
  height: 1px;
  margin: var(--aa-sp-3) 0;
  background: var(--aa-brand-input-border, var(--aa-border));
}
#athena-agent .aa-content blockquote {
  margin: var(--aa-sp-2) 0;
  padding: var(--aa-sp-1) var(--aa-sp-3);
  border-left: 3px solid var(--aa-brand-primary, var(--aa-accent));
  color: var(--aa-brand-ai-list-text, var(--aa-text-secondary));
}
#athena-agent .aa-content pre {
  margin: var(--aa-sp-2) 0;
  padding: var(--aa-sp-3);
  border-radius: var(--aa-rc);
  overflow-x: auto;
  background: color-mix(in srgb, currentColor 7%, transparent);
  border: 1px solid var(--aa-brand-input-border, var(--aa-border));
}
#athena-agent .aa-content pre code { background: none; padding: 0; }
#athena-agent .aa-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--aa-sp-2) 0;
  font-size: var(--aa-fs-caption);
}
#athena-agent .aa-content th,
#athena-agent .aa-content td {
  border: 1px solid var(--aa-brand-input-border, var(--aa-border));
  padding: var(--aa-sp-1) var(--aa-sp-2);
  text-align: left;
}
#athena-agent .aa-content th {
  font-weight: 700;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

/* --- Meta / timestamp --- */
#athena-agent .aa-message-meta {
  gap: var(--aa-sp-2);
  margin-top: var(--aa-sp-1);
  font-size: var(--aa-fs-meta);
  font-weight: var(--aa-fw-meta);
  letter-spacing: var(--aa-ls-meta);
}
#athena-agent .aa-message-timestamp {
  font-size: var(--aa-fs-meta);
}

/* --- Responsive: beat legacy mobile !important (e.g. .aa-message-bubble @ <=480px) --- */
@media (max-width: 768px) {
  #athena-agent .aa-chat-log {
    gap: var(--aa-sp-4) !important;
  }
  #athena-agent .aa-message-bubble {
    padding: var(--aa-sp-3) var(--aa-sp-4) !important;
    border-radius: var(--aa-rb) !important;
  }
  #athena-agent .aa-message-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--aa-rc) !important;
  }
}

/* ============================================================================
   PHASE 3 — COMPOSER & ACTIONS
   Visual only. Consumes Phase 0/1/2 tokens. No markup/JS/engine changes.
   Composer DOM: .aa-quick-actions > .aa-quick-action[data-action] · .aa-chat-suggestions
   (chips, hidden by legacy — left hidden) · .aa-ai-disclaimer · .aa-chat-input >
   .aa-input-wrapper > #athena-agent-input + .aa-input-buttons(#athena-agent-voice,
   #athena-agent-send). Colors stay brand-driven; this layer owns spacing, radius,
   typography, focus/hover/disabled, the primary-CTA distinction, and the desktop grid.
   ============================================================================ */

/* --- Composer container + input --- */
#athena-agent .aa-chat-input {
  padding: var(--aa-sp-3) var(--aa-sp-4);
}
#athena-agent .aa-chat-input textarea {
  border-radius: var(--aa-rc);
  font-size: var(--aa-fs-body);
  min-height: 44px;
  transition: border-color var(--aa-mo) var(--aa-ease), box-shadow var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-chat-input textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-grad-a) 28%, transparent);
}

/* --- Send button (brand bg stays via brand !important; refine shape/state) --- */
#athena-agent .aa-send {
  border-radius: var(--aa-rc);
  box-shadow: var(--aa-elev-1);
  transition: filter var(--aa-mo) var(--aa-ease), box-shadow var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-send:hover { filter: brightness(1.08); }
#athena-agent .aa-send:active { filter: brightness(0.96); }
#athena-agent .aa-send:disabled,
#athena-agent .aa-send[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }
#athena-agent .aa-send:focus-visible { outline: 2px solid var(--aa-grad-a); outline-offset: 2px; }

/* --- Voice button (subtle/ghost). Join the brand INPUT family: the brand layer already
   drives this button's icon color (--aa-brand-input-text) and hover bg (--aa-brand-input-border)
   from the input tokens, but never set the BASE background — so it fell to a legacy hard-coded
   near-black (rgba(10,16,30,.98)) that hid the dark brand icon on light brands. Complete the
   mapping here so it renders as a proper secondary button that inherits brand tokens. --- */
#athena-agent .aa-voice-btn {
  border-radius: var(--aa-rc);
  background: var(--aa-brand-input-bg, #fff);
  border: 1px solid var(--aa-brand-input-border, #e2e8f0);
  transition: color var(--aa-mo) var(--aa-ease), border-color var(--aa-mo) var(--aa-ease), background-color var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-voice-btn:focus-visible { outline: 2px solid var(--aa-grad-a); outline-offset: 2px; }

/* --- Quick actions: V7 2-col grid on desktop (R2a owns the mobile labeled grid) --- */
@media (min-width: 769px) {
  #athena-agent .aa-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--aa-sp-2) !important;
    padding: var(--aa-sp-3) var(--aa-sp-4);
    overflow: visible !important;
    flex-wrap: nowrap;
  }
  #athena-agent .aa-quick-action {
    padding: var(--aa-sp-3);
    border-radius: var(--aa-rc);
    font-size: var(--aa-fs-caption);
    font-weight: 600;
    white-space: normal;
    justify-content: center;
    min-height: 0;
    transition: background var(--aa-mo) var(--aa-ease), border-color var(--aa-mo) var(--aa-ease), transform var(--aa-mo-fast) var(--aa-ease);
  }
}

/* --- Primary CTA distinction (both viewports): quote = brand primary. Preserves R2a
   layout/labels/44px on mobile; only recolors. SVG follows currentColor → white. --- */
#athena-agent .aa-quick-action[data-action="quote"] {
  background: var(--aa-brand-primary, #3b82f6) !important;
  border-color: var(--aa-brand-primary, #3b82f6) !important;
  color: #ffffff !important;
}
#athena-agent .aa-quick-action[data-action="quote"]:hover {
  filter: brightness(1.06);
}
#athena-agent .aa-quick-action:focus-visible {
  outline: 2px solid var(--aa-grad-a);
  outline-offset: 2px;
}

/* --- Suggestion chips: left hidden by legacy (display:none) by design; defensive styling
   only, so they are premium IF a future setting ever shows them. --- */
#athena-agent .aa-chip {
  border-radius: var(--aa-rp);
  padding: var(--aa-sp-1) var(--aa-sp-3);
  font-size: var(--aa-fs-caption);
  border: 1px solid var(--aa-brand-input-border, var(--aa-border));
  background: var(--aa-brand-quick-action-bg, var(--aa-surface));
  transition: border-color var(--aa-mo) var(--aa-ease), background var(--aa-mo) var(--aa-ease);
}

/* --- Disclaimer / helper text --- */
#athena-agent .aa-ai-disclaimer {
  padding: var(--aa-sp-2) var(--aa-sp-4);
  gap: var(--aa-sp-2);
  font-size: var(--aa-fs-meta);
  line-height: 1.4;
}
#athena-agent .aa-disclaimer-text {
  font-size: var(--aa-fs-meta);
}

/* --- Responsive: composer padding (beat legacy mobile !important if present) --- */
@media (max-width: 768px) {
  #athena-agent .aa-chat-input {
    padding: var(--aa-sp-3) var(--aa-sp-3) !important;
  }
}

/* ============================================================================
   PHASE 4 — LAUNCHER & UNIFIED MOTION
   Visual only. Consumes Phase 0 tokens. No markup/JS/engine changes.
   Launcher: button.aa-launcher > span.aa-launcher-core (brand bg owned by the
   renderer brand <style>; JS hides it on open via display:none). Open/close is a
   JS display+.aa-open toggle, so entrance is polished via .aa-open; exit stays
   instant by the engine's design. Motion only touches opacity/transform/shadow.
   ============================================================================ */

/* --- Launcher: refined elevation, hover, active, focus-visible (brand color kept) --- */
#athena-agent .aa-launcher {
  border-radius: var(--aa-rc) 0 0 var(--aa-rc);
  box-shadow: var(--aa-elev-2) !important;
  transition: transform var(--aa-mo) var(--aa-ease),
              box-shadow var(--aa-mo) var(--aa-ease),
              background var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-launcher:hover {
  transform: translateX(-3px);
  box-shadow: var(--aa-elev-2), 0 0 0 1px color-mix(in srgb, var(--aa-grad-a) 45%, transparent) !important;
}
#athena-agent .aa-launcher:active {
  transform: translateX(-1px) scale(0.98);
}
#athena-agent .aa-launcher:focus-visible {
  outline: 2px solid var(--aa-grad-a);
  outline-offset: 2px;
}

/* --- Chat panel entrance: subtle rise + fade via .aa-open (exit is instant per engine) --- */
#athena-agent .aa-chat {
  transition: opacity var(--aa-mo-slow) var(--aa-ease),
              transform var(--aa-mo-slow) var(--aa-ease);
}
#athena-agent .aa-chat:not(.aa-open) {
  transform: translateY(8px) scale(0.99);
}
#athena-agent .aa-chat.aa-open {
  transform: translateY(0) scale(1);
}

/* --- Accessibility: reduced-motion zeroes all non-essential motion (Phase 4 + earlier).
   Token zeroing (Phase 0) handles transitions; this also neutralizes transforms and any
   decorative keyframe animation, and pins the panel to its final state. --- */
@media (prefers-reduced-motion: reduce) {
  #athena-agent .aa-launcher,
  #athena-agent .aa-chat {
    transition: none !important;
  }
  #athena-agent .aa-launcher:hover,
  #athena-agent .aa-launcher:active {
    transform: none !important;
  }
  #athena-agent .aa-chat:not(.aa-open),
  #athena-agent .aa-chat.aa-open {
    transform: none !important;
  }
  #athena-agent .aa-launcher-core::before,
  #athena-agent .aa-launcher-core::after {
    animation: none !important;
  }
}

/* ============================================================================
   PHASE 5 — THINKING, REVEAL POLISH & STATES
   Visual only. Consumes Phase 0 tokens. No markup/JS/engine changes.
   Thinking DOM: .aa-message-thinking.aa-typing-indicator > .aa-message-bubble.aa-thinking-bubble
   > .aa-content > .aa-typing-status + .aa-typing-dots>.aa-typing-dot. The thinking bubble + avatar
   already inherit Phase 1/2 polish. Reveal is automatic typing (no button element). Empty/idle =
   the greeting (Phase 2). Colors stay brand-driven (thinking-text/dots are brand tokens).
   ============================================================================ */

/* --- Thinking: calmer status text --- */
#athena-agent .aa-typing-status {
  font-size: var(--aa-fs-caption);
  font-weight: var(--aa-fw-meta);
  letter-spacing: var(--aa-ls-meta);
  opacity: 0.85;
}

/* --- Thinking: refined dots (smaller, token spacing; brand dot color kept) --- */
#athena-agent .aa-typing-dots {
  width: auto;
  gap: var(--aa-sp-1);
  margin-top: var(--aa-sp-1);
}
#athena-agent .aa-typing-dot {
  width: 6px;
  height: 6px;
}

/* --- Disabled / waiting states (engine owns the disabled attr; we only style it premium).
   Applies to send, input, voice, and quick actions when the engine disables them. --- */
#athena-agent .aa-send:disabled,
#athena-agent .aa-send[disabled],
#athena-agent #athena-agent-input:disabled,
#athena-agent .aa-voice-btn:disabled,
#athena-agent .aa-quick-action:disabled,
#athena-agent .aa-quick-action[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.15);
  box-shadow: none !important;
}

/* --- Status indicator (idle/thinking/error dot), if rendered --- */
#athena-agent .aa-status-indicator {
  transition: background-color var(--aa-mo) var(--aa-ease);
}

/* --- Accessibility: reduced-motion zeroes all decorative state animations
   (thinking text pulse, dot movement, status indicator). Engine timing is unaffected. --- */
@media (prefers-reduced-motion: reduce) {
  #athena-agent .aa-typing-status,
  #athena-agent .aa-typing-dot,
  #athena-agent .aa-typing-dots span,
  #athena-agent .aa-thinking-bubble,
  #athena-agent .aa-status-indicator {
    animation: none !important;
  }
}

/* ============================================================================
   PHASE 6 — WHITE-LABEL HARDENING
   Visual only. Consumes Phase 0 tokens (all brand-derived with fallbacks).
   No new settings, no option-name changes, no markup/JS/engine changes.
   The Experience System already maps every surface from the certified --aa-brand-*
   engine (with fallbacks); this phase hardens cross-brand contrast/visibility.
   ============================================================================ */

/* --- Contrast-safe focus ring: visible on ANY brand background, including brand-colored
   buttons (send, primary CTA). Brand-tinted outline + soft halo, both token-driven so they
   adapt to every preset (default / dark / cyan / light / luxury / healthcare / corporate). --- */
#athena-agent .aa-iconbtn:focus-visible,
#athena-agent .aa-send:focus-visible,
#athena-agent .aa-voice-btn:focus-visible,
#athena-agent .aa-quick-action:focus-visible,
#athena-agent .aa-launcher:focus-visible,
#athena-agent #athena-agent-input:focus-visible,
#athena-agent .aa-message-assistant .aa-content a:focus-visible,
#athena-agent .aa-citations a:focus-visible {
  outline: 2px solid var(--aa-grad-a) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aa-grad-a) 22%, transparent) !important;
}

/* --- Icon legibility on brand-colored buttons: a subtle drop-shadow keeps the white send
   icon (and quote-CTA icon) readable on ANY brand background, including bright/light brand
   colors, without overriding the client's chosen colors. Contrast-safety, color-neutral. --- */
#athena-agent .aa-send svg,
#athena-agent .aa-quick-action[data-action="quote"] svg {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

/* ============================================================================
   PHASE 3 — EXPERIENCE COLOR + CHOREOGRAPHY (dark default; brand accent preserved).
   Surfaces / text / lines use the shared --aui-* palette; ACCENT elements (user
   bubble, send, launcher, logo, links, dots) keep var(--aa-brand-primary) so a
   client's white-label color still shows. Overrides the renderer's inline brand
   <style> (bare .aa-* = specificity 0,1,0) via #athena-agent scope (0,1,1) +
   !important, and experience-system.css loads after it. Flag-gated → reversible.
   ============================================================================ */

/* Panel + shell surfaces */
#athena-agent .aa-chat,
#athena-agent .aa-chat .aa-chat-shell {
  background: var(--aui-surface) !important;
  color: var(--aui-text) !important;
}
#athena-agent .aa-chat.aa-floating { border: 1px solid var(--aui-line-2) !important; }
#athena-agent .aa-chat-log { background: var(--aui-bg) !important; }

/* Header */
#athena-agent .aa-chat-header {
  background: linear-gradient(135deg, rgba(91,146,255,.16), rgba(55,215,239,.05)) !important;
  border-bottom: 1px solid var(--aui-line) !important;
}
#athena-agent .aa-titles strong,
#athena-agent .aa-titles .aa-title { color: var(--aui-text) !important; }
#athena-agent .aa-status { color: var(--aui-text-2) !important; }
#athena-agent .aa-status-dot,
#athena-agent .aa-status-dot::after { background: var(--aui-success) !important; }
#athena-agent .aa-iconbtn { color: var(--aui-text-2) !important; border: 1px solid var(--aui-line) !important; }
#athena-agent .aa-iconbtn:hover { color: var(--aui-text) !important; }

/* Messages: assistant = surface, user = brand accent */
#athena-agent .aa-message-assistant .aa-message-bubble {
  background: var(--aui-surface) !important;
  color: var(--aui-text) !important;
  border: 1px solid var(--aui-line) !important;
}
#athena-agent .aa-message-user .aa-message-bubble {
  background: var(--aa-brand-primary, var(--aui-brand)) !important;
  color: #02040A !important;
}
#athena-agent .aa-message-user .aa-message-avatar { background: var(--aa-brand-primary, var(--aui-brand)) !important; color: #02040A !important; }
#athena-agent .aa-content,
#athena-agent .aa-message-assistant .aa-content { color: var(--aui-text) !important; }

/* Citations trust layer */
#athena-agent .aa-citations { border-top: 1px solid var(--aui-line) !important; }
#athena-agent .aa-citations-title { color: var(--aui-text-3) !important; }
#athena-agent .aa-citations a,
#athena-agent .aa-message-assistant .aa-content a { color: var(--aa-brand-primary, var(--aui-brand)) !important; }

/* Meta / message actions */
#athena-agent .aa-message-timestamp,
#athena-agent .aa-message-meta { color: var(--aui-text-3) !important; }
#athena-agent .aa-message-action-btn {
  color: var(--aui-text-3) !important;
  border: 1px solid var(--aui-line) !important;
  background: transparent !important;
}

/* Typing indicator */
#athena-agent .aa-thinking-bubble { background: var(--aui-surface) !important; border: 1px solid var(--aui-line) !important; }
#athena-agent .aa-typing-dot { background: var(--aa-brand-primary, var(--aui-brand)) !important; }
#athena-agent .aa-typing-status { color: var(--aui-text-3) !important; }

/* Suggested prompts */
#athena-agent .aa-chat-suggestions { background: var(--aui-bg) !important; }
#athena-agent .aa-chat-suggestions button {
  background: var(--aui-surface) !important;
  color: var(--aui-text-2) !important;
  border: 1px solid var(--aui-line-2) !important;
}
#athena-agent .aa-chat-suggestions button:hover { color: var(--aui-text) !important; border-color: var(--aa-brand-primary, var(--aui-brand)) !important; }

/* Quick actions */
#athena-agent .aa-quick-actions { background: var(--aui-surface) !important; border-top: 1px solid var(--aui-line) !important; }
#athena-agent .aa-quick-action {
  background: var(--aui-bg) !important;
  color: var(--aui-text-2) !important;
  border: 1px solid var(--aui-line) !important;
}
#athena-agent .aa-quick-action:hover { color: var(--aui-text) !important; border-color: var(--aui-line-2) !important; }
#athena-agent .aa-quick-action svg { color: var(--aa-brand-primary, var(--aui-brand)) !important; }

/* Input row */
#athena-agent .aa-chat-input { background: var(--aui-surface) !important; border-top: 1px solid var(--aui-line) !important; }
#athena-agent .aa-input-wrapper { background: var(--aui-bg) !important; border: 1px solid var(--aui-line-2) !important; }
#athena-agent .aa-input-wrapper textarea,
#athena-agent .aa-input-wrapper input[type="text"],
#athena-agent .aa-chat-input textarea { background: transparent !important; color: var(--aui-text) !important; }
#athena-agent .aa-input-wrapper textarea::placeholder,
#athena-agent .aa-chat-input textarea::placeholder { color: var(--aui-text-3) !important; }
#athena-agent .aa-voice-btn { background: var(--aui-surface-2) !important; color: var(--aui-text-2) !important; }
#athena-agent .aa-send { background: var(--aa-brand-primary, var(--aui-brand)) !important; }

/* Footer */
#athena-agent .aa-chat-footer { background: var(--aui-surface) !important; color: var(--aui-text-3) !important; border-top: 1px solid var(--aui-line) !important; }

/* Lead-capture quote form */
#athena-agent .aa-quote-form { background: var(--aui-bg) !important; color: var(--aui-text) !important; }
#athena-agent .aa-quote-form input,
#athena-agent .aa-quote-form textarea,
#athena-agent .aa-quote-form select {
  background: var(--aui-surface) !important;
  color: var(--aui-text) !important;
  border: 1px solid var(--aui-line-2) !important;
}
#athena-agent .aa-quote-form label { color: var(--aui-text-2) !important; }
#athena-agent .aa-quote-submit { background: var(--aa-brand-primary, var(--aui-brand)) !important; color: #02040A !important; }

/* Launcher: brand gradient (derived from brand primary→secondary) + invite pulse.
   Overrides the legacy default brand_launcher_bg (#000) so it reads as the Experience. */
#athena-agent .aa-launcher {
  background: linear-gradient(135deg, var(--aa-grad-a), var(--aa-grad-b)) !important;
  color: #02040A !important;
}
#athena-agent .aa-launcher .aa-launcher-core { color: #02040A !important; }
/* Launcher glyph: replace the legacy emoji ::before content with an inline-SVG chat mark
   (inherits currentColor). This is the Experience default icon (no emoji). */
#athena-agent .aa-launcher-core::before {
  /* Non-empty (zero-width space) so the widget's "hide launcher if icon is empty" guard
     (frontend.js) keeps the launcher visible; the glyph itself is drawn by the SVG mask below. */
  content: "\200B" !important;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* AI Help launcher: render the site's Launcher Text (brand_launcher_text, e.g. "AI Help")
   as the visible label instead of the masked chat icon. Same specificity as the icon rule
   above, but later in the cascade, so it wins for mask/size/background/color while the text
   content itself is supplied by PHP get_launcher_text_css(). Presentation only. */
#athena-agent .aa-launcher-core::before {
  -webkit-mask: none !important;
          mask: none !important;
  background: transparent !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  color: #F8FAFC !important;
  text-shadow: 0 1px 6px rgba(2, 6, 20, .85) !important;
}

@media (prefers-reduced-motion: no-preference) {
  #athena-agent .aa-launcher { animation: aa-launcher-pulse 2.8s var(--aa-ease) infinite; }
  @keyframes aa-launcher-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(91,146,255,.45), var(--aa-elev-3); }
    70%  { box-shadow: 0 0 0 14px rgba(91,146,255,0), var(--aa-elev-3); }
    100% { box-shadow: 0 0 0 0 rgba(91,146,255,0), var(--aa-elev-3); }
  }
  /* First-open bloom */
  #athena-agent .aa-chat:not([data-aa-collapsed="true"]) .aa-chat-shell {
    animation: aa-panel-in .42s var(--aa-ease) both;
  }
  @keyframes aa-panel-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* In-thread conversion CTA (JS-injected under quote-intent answers). Accent = brand color. */
#athena-agent .aa-cta {
  margin-top: var(--aa-sp-2);
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid rgba(91,146,255,.30);
  background: linear-gradient(135deg, rgba(91,146,255,.14), rgba(55,215,239,.05));
}
#athena-agent .aa-cta-h { font-weight: 800; font-size: 12.5px; color: var(--aui-text); }
#athena-agent .aa-cta-s { font-size: 11.5px; color: var(--aui-text-2); margin: 3px 0 9px; line-height: 1.45; }
#athena-agent .aa-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: var(--aa-rc);
  background: var(--aa-brand-primary, var(--aui-brand)); color: #02040A;
  font-weight: 700; font-size: 12px; cursor: pointer;
  transition: filter var(--aa-mo) var(--aa-ease);
}
#athena-agent .aa-cta-btn:hover { filter: brightness(1.06); }