/*
 * AI technical consultation widget.
 *
 * Ported from the Taiwan theme, recoloured to the US navy/cyan system.
 * The variable names still say "orange" so the two files stay diffable —
 * only the values change here.
 */
:root{
  --ai-orange:#00B8D4;       /* was #F26522 — US accent cyan */
  --ai-orange-dark:#0097A7;  /* hover / pressed */
  --ai-line:#E2E8F0;         /* matches --us-line */
  --ai-ink:#0A2540;          /* matches --us-navy */
}

.ai-widget{font-family:inherit}

/* Sole support entry point on this site — tawk.to was removed, so the
   launcher sits in the corner instead of being lifted clear of its bubble. */
.ai-launcher{
  position:fixed;right:22px;bottom:24px;z-index:300;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:8px 20px 8px 8px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.2);
  transition:transform .2s ease,box-shadow .2s ease;
}
/* Avatar 64px; the source PNG is 192px so it stays sharp.
   The pulse is drawn with box-shadow rather than ::before — the launcher's
   own z-index creates a stacking context, so a negative-z pseudo-element
   would be painted behind the white pill and disappear. */
.ai-launcher img{
  width:64px;height:64px;border-radius:50%;display:block;
  animation:ai-pulse 2.4s ease-out infinite;
}
/* Two-line label: main line says what to ask, sub line says how fast */
.ai-launcher__label{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25}
.ai-launcher__title{font-size:15px;font-weight:800;color:var(--ai-ink);letter-spacing:.02em;white-space:nowrap}
.ai-launcher__sub{font-size:11px;font-weight:600;color:#8A8A8A;letter-spacing:.01em;white-space:nowrap}
.ai-launcher:hover,.ai-launcher:focus-visible{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 32px rgba(0,184,212,.38)}
.ai-launcher[aria-expanded="true"]{opacity:0;pointer-events:none}

@keyframes ai-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,184,212,.55)}
  70%{box-shadow:0 0 0 14px rgba(0,184,212,0)}
  100%{box-shadow:0 0 0 0 rgba(0,184,212,0)}
}

/* Lift clear of the cookie banner while it is visible */
body:has(#cookie-banner.is-visible) .ai-launcher{bottom:200px}
body:has(#cookie-banner.is-visible) .ai-panel{bottom:200px}

.ai-panel{
  position:fixed;right:22px;bottom:24px;z-index:301;
  width:min(370px,calc(100vw - 32px));height:min(540px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.24);
}
.ai-panel[hidden]{display:none}

.ai-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:14px 16px;background:var(--ai-orange);color:#fff;
}
.ai-head__title{font-size:15px;font-weight:700}
.ai-close{
  background:transparent;border:0;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;border-radius:4px;
}
.ai-close:hover,.ai-close:focus-visible{opacity:.8}

.ai-log{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:#fff;
}
.ai-msg{
  max-width:86%;padding:10px 13px;border-radius:10px;font-size:14px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;
}
.ai-msg--bot{align-self:flex-start;background:#F1F1F1;color:var(--ai-ink)}
.ai-msg--user{align-self:flex-end;background:var(--ai-orange);color:#fff}
.ai-msg--error{align-self:center;background:#FDECEA;color:#B3261E;font-size:13px;text-align:center}

/* Typing indicator: upstream takes ~9s to first token; without this it looks frozen */
.ai-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;background:#F1F1F1;border-radius:10px}
.ai-typing span{
  width:7px;height:7px;border-radius:50%;background:#B0B0B0;
  animation:ai-blink 1.3s infinite ease-in-out both;
}
.ai-typing span:nth-child(2){animation-delay:.16s}
.ai-typing span:nth-child(3){animation-delay:.32s}
@keyframes ai-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--ai-line);background:#fff}
.ai-text{
  flex:1;min-width:0;padding:10px 12px;font-size:14px;font-family:inherit;
  border:1px solid #D8D8D8;border-radius:8px;outline:none;color:var(--ai-ink);
}
.ai-text:focus{border-color:var(--ai-orange);box-shadow:0 0 0 3px rgba(0,184,212,.15)}
.ai-send{
  padding:10px 18px;border:0;border-radius:8px;cursor:pointer;
  background:var(--ai-orange);color:#fff;font-size:14px;font-weight:700;font-family:inherit;
}
.ai-send:hover:not(:disabled),.ai-send:focus-visible{background:var(--ai-orange-dark)}
.ai-send:disabled{opacity:.5;cursor:not-allowed}

.ai-note{
  margin:0;padding:8px 14px 12px;font-size:11.5px;line-height:1.5;
  color:#8A8A8A;background:#fff;text-align:center;
}

@media (max-width:520px){
  .ai-launcher{right:14px;bottom:16px}
  .ai-launcher__label{display:none}
  .ai-launcher{padding:6px}
  /* No text label on mobile — step the avatar down one size */
  .ai-launcher img{width:56px;height:56px}
  .ai-panel{right:12px;left:12px;width:auto;bottom:16px;height:min(70vh,520px)}
  body:has(#cookie-banner.is-visible) .ai-launcher,
  body:has(#cookie-banner.is-visible) .ai-panel{bottom:210px}
}

@media (prefers-reduced-motion:reduce){
  .ai-launcher{transition:none}
  .ai-launcher:hover,.ai-launcher:focus-visible{transform:none}
  .ai-launcher img{animation:none}
  .ai-typing span{animation:none;opacity:.5}
}