/* ============================================================================
   Public chrome WIDGETS for portal pages (cookie banner, floating AI chat
   button + modal, skip link, cookie buttons). Extracted verbatim from the
   marketing stylesheet (site.css) so these widgets look identical everywhere,
   WITHOUT pulling in site.css's global element rules (which would restyle
   portal form/list/card content). Loaded alongside site-nav.css on every
   portal page. The marketing pages get the same rules from site.css itself.

   Self-contained theme variables: the marketing widgets (chat modal, cookie
   banner, skip link) live OUTSIDE .site-header/.site-footer, so they need the
   GLOBAL theme vars. The apply wizard base has no global :root (it uses the
   --dais-* namespace + site-nav.css's scoped vars), so we define the globals
   here. On pages that already declare :root inline (site_base) the values are
   identical, so this is a harmless no-op there.

   Aliases: site.css uses --text / --footer-text-hover / --site-width; the
   portal uses --text-primary / --footer-hover and has no --site-width.
   ========================================================================= */
:root {
  --font-sans:"DM Sans", system-ui, -apple-system, sans-serif;
  --radius:10px; --radius-lg:18px; --transition:0.2s ease;
  --site-width:1100px;
}
:root, html[data-theme="light"] {
  --bg-page:#F5F0E8; --bg-card:#FFFFFF; --bg-elevated:#EBE4D8;
  --text-primary:#1B1612; --text:#1B1612; --text-muted:#6B5E52;
  --accent:#0A2240; --accent-hover:#0E3268; --accent-muted:rgba(10,34,64,0.09);
  --gold:#9A6009; --gold-hover:#C47D0D; --gold-muted:rgba(168,105,10,0.13);
  --on-accent:#FFFFFF; --on-gold:#FFFFFF;
  --border:#D8D0C3; --header-bg:rgba(245,240,232,0.96);
  --footer-bg:#0A2240; --footer-text:rgba(210,220,235,0.78); --footer-hover:#C89930; --footer-text-hover:#C89930;
  --shadow-card:0 2px 12px rgba(10,34,64,0.07);
}
html[data-theme="dark"] {
  --bg-page:#0C1524; --bg-card:#112038; --bg-elevated:#1A3055;
  --text-primary:#EDE5D5; --text:#EDE5D5; --text-muted:#8DA3BE;
  --accent:#C89930; --accent-hover:#DFB040; --accent-muted:rgba(200,153,48,0.18);
  --gold:#C89930; --gold-hover:#DFB040; --gold-muted:rgba(200,153,48,0.18);
  --on-accent:#0C1524; --on-gold:#0C1524;
  --border:#1E3A5E; --header-bg:rgba(12,21,36,0.97);
  --footer-bg:#080E1A; --footer-text:rgba(180,200,225,0.7); --footer-hover:#DFB040; --footer-text-hover:#DFB040;
  --shadow-card:0 2px 12px rgba(0,0,0,0.30);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg-page:#0C1524; --bg-card:#112038; --bg-elevated:#1A3055;
    --text-primary:#EDE5D5; --text:#EDE5D5; --text-muted:#8DA3BE;
    --accent:#C89930; --accent-hover:#DFB040; --accent-muted:rgba(200,153,48,0.18);
    --gold:#C89930; --gold-hover:#DFB040; --gold-muted:rgba(200,153,48,0.18);
    --on-accent:#0C1524; --on-gold:#0C1524;
    --border:#1E3A5E; --header-bg:rgba(12,21,36,0.97);
    --footer-bg:#080E1A; --footer-text:rgba(180,200,225,0.7); --footer-hover:#DFB040; --footer-text-hover:#DFB040;
    --shadow-card:0 2px 12px rgba(0,0,0,0.30);
  }
}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  background: var(--accent, #0A2240);
  /* Pair the label with the background. In dark theme --accent is the gold
     #C89930, and white on that is 2.6:1; --on-accent darkens to #0C1524 so the
     skip link stays legible in both themes. */
  color: var(--on-accent, #ffffff);
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #C89930;
  outline-offset: 2px;
}

/* ── Cookie-banner buttons (.btn base comes from the portal page CSS) ────── */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,34,64,0.25);
}
html[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(200,153,48,0.3);
}

/* Secondary: outlined */
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-muted);
  transform: translateY(-2px);
}

/* ─── Cookie Consent Banner ──────────────────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-card);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  padding: 1rem 1.5rem;
}
.cookie-banner-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 200px;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.55;
}
.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ─── Footer cookie settings button ─────────────────────────────────────────── */
.footer-cookie-btn {
  background: none;
  border: none;
  color: var(--footer-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color var(--transition);
}
.footer-cookie-btn:hover { color: var(--footer-text-hover); }

/* ── Cookie banner: small-screen overrides ──────────────────────────────── */
@media (max-width: 600px) {
  .cookie-banner-actions { flex-direction: column; justify-content: stretch; }
  .cookie-banner-actions .btn { width: 100%; min-height: 48px; flex: 1; text-align: center; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
}

/* ---- Floating chat button (bottom-right, visible on all pages) ---- */
.ai-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--gold);
  color: var(--on-gold, #fff);
  border: none;
  border-radius: 32px;
  padding: 0.7rem 1.3rem 0.7rem 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(168,105,10,0.38);
  animation: ai-blink 1.8s ease-in-out infinite;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ai-float-btn:hover,
.ai-float-btn:focus-visible {
  background: var(--gold-hover);
  animation: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px rgba(168,105,10,0.45);
  outline: none;
}
.ai-float-icon { font-size: 1.3rem; line-height: 1; }
.ai-float-label { white-space: nowrap; }
/* Pulsing ring around floating button */
.ai-float-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 36px;
  border: 2px solid var(--gold);
  animation: pulse-ring 1.8s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 600px) {
  .ai-float-btn {
    bottom: 20px;
    right: 16px;
    border-radius: 50%;
    padding: 1rem;       /* 56px tap target */
    gap: 0;
  }
  .ai-float-label { display: none; }
  .ai-float-icon { font-size: 1.5rem; }
  .ai-float-pulse { inset: -6px; border-radius: 50%; }
}

/* ---- Hero section button ---- */
.hero-ai-wrap {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--gold);
  color: var(--on-gold, #fff);
  border: none;
  border-radius: 28px;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
  animation: ai-blink 1.8s ease-in-out infinite;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 4px 18px rgba(168,105,10,0.28);
}
.hero-ai-btn:hover,
.hero-ai-btn:focus-visible {
  background: var(--gold-hover);
  animation: none;
  transform: scale(1.04);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Pulsing ring around hero button */
.hero-ai-pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--gold);
  animation: pulse-ring 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.18); }
}

.hero-ai-caption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Chat overlay ---- */
#ai-chat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,34,64,0.55);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(3px);
}
#ai-chat-overlay.ai-chat-open {
  display: flex;
}

/* ---- Chat modal ---- */
#ai-chat-modal {
  width: 100%;
  max-width: 520px;
  /* dvh = dynamic viewport height, accounts for Android URL bar hide/show.
     vh fallback for older browsers. */
  height: 75vh;
  height: 75dvh;
  max-height: 640px;
  background: var(--bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(10,34,64,0.22);
  overflow: hidden;
  animation: slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---- Header ---- */
#ai-chat-header {
  background: var(--accent);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#ai-chat-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
#ai-chat-avatar {
  font-size: 1.6rem;
  line-height: 1;
}
#ai-chat-title {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}
#ai-chat-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  margin-top: 2px;
}
#ai-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--radius);
  transition: color var(--transition);
}
#ai-chat-close:hover { color: #fff; }

/* ---- Body: wraps messages + input and fills the modal, so the messages area
   has a constrained height to scroll within. Without this flex wrapper the
   messages overflow and get clipped by the modal (you cannot scroll up). ---- */
#ai-chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#ai-chat-body[hidden] { display: none; }

/* ---- Messages ---- */
#ai-chat-messages {
  flex: 1;
  min-height: 0;           /* critical: lets flex child shrink below content size */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on Android/iOS */
  overscroll-behavior: contain;        /* stop scroll bleeding to page behind */
  touch-action: pan-y;                 /* allow vertical finger scroll on Android */
  padding: 20px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* scroll-behavior: smooth removed, interferes with programmatic scroll on Android */
}

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }

.ai-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.ai-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  min-width: 52px;
}
.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

/* Suggestion chips */
#ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ai-suggestion {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.ai-suggestion:hover,
.ai-suggestion:focus-visible {
  background: var(--accent-muted);
  border-color: var(--accent);
  outline: none;
}

/* ---- Input row ---- */
#ai-chat-input-row {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--bg-card);
}
#ai-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--bg-page);
  color: var(--text-primary);
  resize: none;
  line-height: 1.4;
  max-height: 120px;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
#ai-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
#ai-chat-input:disabled { opacity: 0.6; }

#ai-chat-send {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
#ai-chat-send svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}
#ai-chat-send:hover   { background: var(--accent-hover); transform: scale(1.06); }
#ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- Footer note ---- */
#ai-chat-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 6px 16px 10px;
  flex-shrink: 0;
  background: var(--bg-card);
}

/* ---- Responsive: full-screen on mobile ---- */
@media (max-width: 560px) {
  #ai-chat-modal {
    max-width: 100%;
    height: 88vh;
    height: 88dvh;   /* dvh adapts when Android URL bar appears/disappears */
    max-height: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ai-float-btn { bottom: 16px; right: 16px; }
}

/* ── Voice chat controls ──────────────────────────────────────────────────── */
#ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Voice toggle button (speaker icon in header) */
#ai-chat-voice-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
#ai-chat-voice-toggle svg { width: 18px; height: 18px; }
#ai-chat-voice-toggle:hover { color: #fff; }
#ai-chat-voice-toggle.ai-voice-on {
  color: var(--gold);
  background: rgba(200,153,48,0.18);
}

/* Microphone button in input row */
#ai-chat-mic {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
#ai-chat-mic svg { width: 16px; height: 16px; stroke: var(--text-muted); }
#ai-chat-mic:hover { background: var(--accent-muted); border-color: var(--accent); }
#ai-chat-mic:hover svg { stroke: var(--accent); }
#ai-chat-mic:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mic active: pulsing red */
#ai-chat-mic.ai-mic-active {
  background: #fee2e2;
  border-color: #ef4444;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
#ai-chat-mic.ai-mic-active svg { stroke: #ef4444; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}

/* Status line (listening / voice on/off feedback) */
#ai-chat-status {
  min-height: 18px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 16px 4px;
  flex-shrink: 0;
}

/* ── iOS tap-to-play button ────────────────────────────────────────────────── */
.ai-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: var(--accent-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
}
.ai-play-btn svg { width: 12px; height: 12px; }
.ai-play-btn:hover { background: var(--gold-muted); }
.ai-play-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Pre-chat visitor form ─────────────────────────────────────────────────── */
#ai-chat-prechat {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  flex: 1;
  min-height: 0;
}
.ai-prechat-intro {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.ai-prechat-hint {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
#ai-prechat-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-prechat-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-prechat-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-prechat-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ai-prechat-field input:focus {
  border-color: var(--accent);
}
.ai-prechat-field input.ai-prechat-ok {
  border-color: #22c55e;
}
.ai-prechat-field input.ai-prechat-invalid {
  border-color: #ef4444;
}
.ai-prechat-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.ai-prechat-req {
  color: var(--text-muted);
  opacity: 0.75;
}
.ai-prechat-error {
  font-size: 0.82rem;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 2px;
}
.ai-prechat-privacy {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 4px 0 8px;
}
.ai-prechat-privacy a { color: var(--accent); }
.ai-prechat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ai-prechat-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.ai-prechat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
/* ─── AI chat widget polish ──────────────────────────────────────────────────
   Visual refinements layered over the base #ai-chat-* rules: gradient header
   with a gold underline + live "online" dot, avatar in a soft badge, branded
   gold send button, softer bot bubbles, and gold-accented suggestions + focus. */
#ai-chat-header {
  /* Pinned navy in both themes so the white title/subtitle stay high-contrast
     (in dark mode --accent is gold, which fails contrast against white text). */
  background: linear-gradient(135deg, #0A2240 0%, #0E3268 100%);
  border-bottom: 2px solid var(--gold);
}
#ai-chat-avatar {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  font-size: 1.35rem;
}
#ai-chat-subtitle { display: inline-flex; align-items: center; gap: 6px; }
#ai-chat-subtitle::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; flex-shrink: 0;
  animation: ai-online-pulse 1.9s ease-in-out infinite;
}
@keyframes ai-online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) { #ai-chat-subtitle::before { animation: none; } }

.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(10,34,64,0.05);
}

.ai-suggestion:hover,
.ai-suggestion:focus-visible {
  background: var(--gold-muted);
  border-color: var(--gold);
  color: var(--accent);
  transform: translateY(-1px);
}

#ai-chat-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

#ai-chat-send {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%);
  box-shadow: 0 3px 10px rgba(154,96,9,0.32);
}
#ai-chat-send:hover {
  background: linear-gradient(135deg, var(--gold-hover) 0%, var(--gold-hover) 100%);
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(154,96,9,0.40);
}

#ai-chat-modal { box-shadow: 0 -10px 44px rgba(10,34,64,0.26); }

/* --------------------------------------------------------------------------
   Visually hidden, but read aloud
   --------------------------------------------------------------------------
   The capture block labels its email field for screen readers and hides the
   label from sight. That only works where .sr-only is defined, and this rule
   lived in site.css alone: the qualification pages load site-nav.css and this
   file, not site.css, so on every course page the label rendered as ordinary
   text, in near-black on the navy panel, sitting across the input beside it.

   It belongs here because this is the stylesheet that ships with the widgets
   that use it. Defined in both places is correct rather than duplicated: either
   file can be loaded without the other, and a label that stops being hidden is
   not a cosmetic fault, it is unreadable text over a form control.
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}