/* The AlameinGo Assistant's face (assistant-face.js): the blue-and-gold digital face picture with a canvas of flowing
   golden points over it. The home page places it in the hero (home.css); the assistant panel shows it with the
   waveform and the thinking points beside it. */
:root{--aif-cyan:#63C9EE;--aif-gold:#E8B45A}

/* ---- the face: 240px tall in the assistant panel on computers, 168px on phones (its width follows the picture) */
.aif{--aif-light:0;position:relative;display:flex;align-items:flex-start;gap:8px;width:max-content}
.aif-face{position:relative;display:block;flex:none;height:240px;aspect-ratio:232/317}
.aif-img{display:block;width:100%;height:100%;
  /* a soft blue glow around the head that warms a little with the speech */
  filter:drop-shadow(0 0 10px rgba(70,150,230,calc(.28 + var(--aif-light) * .12))) drop-shadow(0 0 3px rgba(255,200,120,calc(var(--aif-light) * .35)))}
.aif-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.aif-side{position:relative;flex:none;align-self:center}
.aif-think{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px}
.aif-think i{display:block;width:6px;height:6px;border-radius:50%;background:var(--aif-gold);opacity:0}
.aif[data-state="thinking"] .aif-think i{opacity:.35;animation:aif-dot 1.2s ease-in-out infinite;animation-delay:calc(var(--n) * .2s)}
@keyframes aif-dot{0%,100%{opacity:.25}40%{opacity:1}}
.aif.is-paused .aif-think i{animation-play-state:paused}
.aif[data-state="thinking"] .aif-wave{opacity:.25}

.aif-wave{display:flex;align-items:center;gap:2px;width:96px;height:44px}
.aif-wave i{display:block;flex:1 1 0;height:100%;border-radius:2px;background:linear-gradient(180deg,rgba(232,180,90,.15),var(--aif-gold) 50%,rgba(232,180,90,.15));transform:scaleY(.08);transform-origin:50% 50%;opacity:.55}
.aif[data-state="listening"] .aif-wave i,.aif[data-state="speaking"] .aif-wave i{opacity:1}

/* Reduced motion: the dots simply show. */
.aif.is-reduced[data-state="thinking"] .aif-think i{animation:none;opacity:.85}
@media (prefers-reduced-motion:reduce){
  .aif[data-state="thinking"] .aif-think i{animation:none;opacity:.85}
}
/* The still picture used before the script runs, or without it. */
.aif-static{display:block;width:auto;height:240px}

@media (max-width:960px){
  .aif-face,.aif-static{height:168px}
  .aif-wave{width:72px;height:32px}
}