/*
 * Experimental AIGO bot package. Nothing in the production chatbot depends
 * on these selectors; this file is not enqueued while the concept is off.
 */
.chatbot-console.has-aigo-bot{position:relative;isolation:isolate}
.chatbot-idle-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(200px,2fr);align-items:center;gap:var(--space-5);width:100%}
.chatbot-idle-copy{min-width:0}
.aigo-bot-slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:250px;overflow:visible}
/* Anchored to .chatbot-console (the whole widget card — already
   position:relative unconditionally in assets/css/pages/home.css, not just
   when the bot concept is active), not to .aigo-bot-slot. Two earlier
   attempts anchored inside the slot instead — first floating above the
   bot's center (needed knowing exactly how far its scaled-up render
   overflows the slot's own top edge, missed twice), then the slot's own
   corner (still landed on the image, since the slot is barely wider than
   the bot itself at real viewport widths). The badge's markup now lives as
   a direct child of .chatbot-console itself (template-parts/blocks/
   ai-chatbot.php), not inside .aigo-bot-slot at all, so this can't
   overlap the bot regardless of the bot's own size or position — the
   console is the whole card, reliably larger than the portrait inside it. */
.aigo-bot-identity{position:absolute;z-index:4;top:var(--space-4);right:var(--space-4);display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:var(--space-2) var(--space-3);border:1px solid rgba(var(--blue-rgb),.1);border-radius:var(--radius-md);background:#fff;color:var(--text);text-align:left;white-space:nowrap}
/* #chatbotIdle (the bot rig's own container) is removed from the DOM the
   moment a conversation starts (assets/js/pages/home.js), which is what
   makes the bot image itself disappear. The identity badge lives outside
   that container (a direct sibling in .chatbot-console, see the comment
   above), so it needs its own rule tied to the same .chatbot-has-messages
   class that JS adds to .chatbot-section at that same moment. */
.chatbot-has-messages .aigo-bot-identity{display:none}
.aigo-bot-identity strong{font-size:var(--fs-control);line-height:1.25;letter-spacing:-.015em}
.aigo-bot-identity > span{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:var(--fs-meta);font-weight:600;letter-spacing:.01em}
.aigo-bot-identity i{width:7px;height:7px;border-radius:50%;background:#4f9f72;box-shadow:0 0 0 3px rgba(79,159,114,.12)}
.has-aigo-bot .chatbot-idle-copy h2{max-width:none}

.aigo-bot{
  --bot-scale:1.25;
  /* Fixed reference size for the LED dots, one per breakpoint (matched to
     .aigo-bot's own width below) — not a % of the box. A % width forces the
     browser to round to a whole pixel, then the centering translate rounds
     again off that already-rounded value; at ~6-11px that double rounding
     is large enough (up to ~1px per axis) to visibly drift, worse under
     browser zoom where each zoom level rounds differently. One fixed value
     removes the first rounding step. */
  --dot-size:11.3px;
  position:relative;z-index:5;width:220px;aspect-ratio:1/1;
  pointer-events:none;transform-origin:center;transform:translateY(24px) scale(var(--bot-scale));
  transition:opacity 240ms ease-out;
  contain:layout paint style;
}
.aigo-bot.is-loading{opacity:0}
/*
 * Each piece is now its own real transparent-background image (assets/
 * images/aigo-bot/layers/), not a clip-path slice of one shared image — no
 * clip-path here, or it would crop away legitimate artwork. transform-origin
 * values are measured directly against the layer files (shoulder-socket /
 * neck pixel coordinates), not guessed.
 */
.aigo-bot-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;transform:translateZ(0);animation-play-state:paused}
/* Each of these re-declares animation-play-state after its own animation
   shorthand, in the SAME rule. The animation shorthand resets every
   sub-property it doesn't mention — including animation-play-state, back to
   its default of "running" — so relying on .aigo-bot-piece's base
   animation-play-state:paused above does nothing here: this rule has equal
   specificity and comes later, so its shorthand silently wins and these
   pieces never actually paused, animating continuously from page load
   regardless of the .is-active visibility gate. (.aigo-bot-shadow already
   did this correctly — these four just didn't match it.) */
.aigo-bot-piece--body{z-index:2;transform-origin:50% 72%;animation:aigoBotBreathe 4.8s ease-in-out infinite;animation-play-state:paused}
.aigo-bot-piece--arm-left{z-index:3;transform-origin:37% 49%;animation:aigoBotArmLeft 5.6s ease-in-out infinite;animation-play-state:paused}
.aigo-bot-piece--arm-right{z-index:3;transform-origin:62% 51%;animation:aigoBotArmRight 5.6s ease-in-out infinite;animation-play-state:paused}
.aigo-bot-piece--head{z-index:4;transform-origin:48% 47%;animation:aigoBotHeadIdle 6.4s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.aigo-bot-shadow{position:absolute;z-index:1;left:30%;right:27%;bottom:6%;height:5%;border-radius:50%;background:rgba(35,37,60,.18);filter:blur(5px);animation:aigoBotShadow 4.8s ease-in-out infinite;animation-play-state:paused}

/* The head panel physically carries the LEDs, so .aigo-bot-leds must share
   .aigo-bot-piece--head's exact transform-origin and every animation it
   gets in every state below — otherwise the head sways on its own idle/
   attentive/thinking/reply/error motion while the LEDs (a separate sibling
   element, since an image element can't have children) sit dead still, drifting
   out of the holes for the whole animation cycle. Identical animation-name/
   duration/timing-function on two elements that start together stays
   frame-perfectly in sync, so this locks them together as one rigid part. */
.aigo-bot-leds{position:absolute;z-index:5;inset:0;transform-origin:48% 47%;animation:aigoBotHeadIdle 6.4s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
/* Idle and thinking use the deterministic matrix supplied by JS. The
   attentive and reply states use their own ring-based LED animation below. */
.aigo-bot-leds i{
  --led-core-rgb:255,145,140;
  --led-face-rgb:235,62,72;
  --led-edge-rgb:194,46,60;
  --led-glow-rgb:219,53,68;
  --led-shell-rgb:35,29,34;
  --led-glint-rgb:255,255,255;
  position:absolute;width:var(--dot-size);aspect-ratio:1;margin:calc(var(--dot-size) / -2) 0 0 calc(var(--dot-size) / -2);
  box-sizing:border-box;border:0;border-radius:50%;
  background:
    radial-gradient(circle at 31% 25%,rgba(var(--led-glint-rgb),.78) 0 8%,rgba(var(--led-glint-rgb),.16) 9%,rgba(var(--led-glint-rgb),0) 20%),
    radial-gradient(circle at 42% 38%,rgba(var(--led-core-rgb),.96) 0 20%,rgba(var(--led-face-rgb),1) 48%,rgba(var(--led-edge-rgb),1) 78%,rgba(var(--led-edge-rgb),.98) 100%);
  opacity:.98;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 3px rgba(var(--led-shell-rgb),.62),0 2px 4px rgba(var(--led-glow-rgb),.2),0 0 6px rgba(var(--led-glow-rgb),.13);
  transition:opacity 360ms ease-out,filter 360ms ease-out,transform 360ms ease-out;
}
/* Hand-calibrated against the live rendered head (dragged into place per
   dot, frozen/unrotated, then read back) — not the offline PNG file. The
   file-measured "clean 100px-pitch square grid" assumption was wrong: the
   reference photo isn't perfectly front-on (visible camera angle along the
   head's edge highlight), so the real hole grid has a slight skew a flat
   geometric assumption can't capture. Each dot is independently positioned
   because that skew means columns/rows no longer share one value. */
.aigo-bot-leds i:nth-child(1){left:41.60%;top:19.64%}
.aigo-bot-leds i:nth-child(2){left:49.55%;top:18.95%}
.aigo-bot-leds i:nth-child(3){left:57.41%;top:18.48%}
.aigo-bot-leds i:nth-child(4){left:41.90%;top:26.90%}
.aigo-bot-leds i:nth-child(5){left:49.71%;top:26.47%}
.aigo-bot-leds i:nth-child(6){left:57.79%;top:26.09%}
.aigo-bot-leds i:nth-child(7){left:42.27%;top:34.02%}
.aigo-bot-leds i:nth-child(8){left:50.02%;top:33.86%}
.aigo-bot-leds i:nth-child(9){left:57.99%;top:33.31%}
.aigo-bot-leds .is-neutral{
  --led-core-rgb:211,217,229;
  --led-face-rgb:139,143,151;
  --led-edge-rgb:100,108,121;
  --led-glow-rgb:122,132,151;
  --led-shell-rgb:48,56,69;
  --led-glint-rgb:255,255,255;
  opacity:.82;
}
.aigo-bot--attentive .aigo-bot-piece--head,.aigo-bot--attentive .aigo-bot-leds{animation:aigoBotHeadAttend 620ms cubic-bezier(.16,1,.3,1) both}
.aigo-bot--attentive .aigo-bot-leds i{animation:aigoBotLedAttend 1.9s ease-in-out infinite;animation-delay:calc(var(--led-ring) * -55ms)}
.aigo-bot--thinking .aigo-bot-piece--head,.aigo-bot--thinking .aigo-bot-leds{animation:aigoBotHeadThink 2.2s ease-in-out infinite}
.aigo-bot--thinking .aigo-bot-piece--arm-right{animation:aigoBotArmThink 1.8s ease-in-out infinite}
/* JS supplies a fast, deterministic sequence of 3x3 computation frames.
   The calm body stays in its idle pose while the face processes by default. */
.aigo-bot--idle .aigo-bot-leds i,.aigo-bot--thinking .aigo-bot-leds i{animation:none;opacity:var(--compute-opacity,.62);filter:brightness(var(--compute-brightness,.96));transform:scale(var(--compute-scale,.96))}
.aigo-bot--reply .aigo-bot-piece--head,.aigo-bot--reply .aigo-bot-leds{animation:aigoBotHeadReply 780ms cubic-bezier(.16,1,.3,1) both}
.aigo-bot--reply .aigo-bot-piece--arm-left{animation:aigoBotArmReply 780ms cubic-bezier(.16,1,.3,1) both}
.aigo-bot--reply .aigo-bot-leds i{animation:aigoBotLedReply 720ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--led-ring) * 50ms)}
.aigo-bot--error .aigo-bot-piece--head,.aigo-bot--error .aigo-bot-leds{animation:aigoBotHeadError 520ms cubic-bezier(.16,1,.3,1) both}
.aigo-bot--error .aigo-bot-leds i{animation:aigoBotLedError 560ms ease-out 2}
.aigo-bot:not(.is-active) .aigo-bot-piece,.aigo-bot:not(.is-active) .aigo-bot-shadow,.aigo-bot:not(.is-active) .aigo-bot-leds,.aigo-bot:not(.is-active) .aigo-bot-leds i{animation-play-state:paused}
.aigo-bot.is-active .aigo-bot-piece,.aigo-bot.is-active .aigo-bot-shadow,.aigo-bot.is-active .aigo-bot-leds,.aigo-bot.is-active .aigo-bot-leds i{animation-play-state:running}

@keyframes aigoBotBreathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.2%) scaleY(1.006)}}
@keyframes aigoBotHeadIdle{0%,100%{transform:rotate(-.8deg) translateY(0)}48%{transform:rotate(1.1deg) translateY(-1.1%)}72%{transform:rotate(.2deg) translateY(-.5%)}}
@keyframes aigoBotArmLeft{0%,100%{transform:rotate(0)}22%{transform:rotate(10deg)}38%{transform:rotate(3deg)}58%{transform:rotate(10deg)}78%{transform:rotate(4deg)}}
@keyframes aigoBotArmRight{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.8deg)}}
@keyframes aigoBotShadow{0%,100%{opacity:.72;transform:scaleX(1)}50%{opacity:.52;transform:scaleX(.94)}}
@keyframes aigoBotHeadAttend{from{transform:rotate(-1deg)}to{transform:rotate(2.2deg) translateY(-1.2%)}}
@keyframes aigoBotLedAttend{0%,100%{opacity:.78}50%{opacity:1;filter:brightness(1.14)}}
@keyframes aigoBotHeadThink{0%,100%{transform:rotate(1deg)}50%{transform:rotate(-2deg) translateY(-.7%)}}
@keyframes aigoBotArmThink{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(-5deg)}}
@keyframes aigoBotHeadReply{0%{transform:translateY(0)}42%{transform:translateY(-3%) rotate(2deg)}100%{transform:translateY(0)}}
@keyframes aigoBotArmReply{0%{transform:rotate(0)}42%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@keyframes aigoBotLedReply{0%{transform:scale(.82)}45%{transform:scale(1.28);opacity:1;filter:brightness(1.4)}100%{transform:scale(.94)}}
@keyframes aigoBotHeadError{0%,100%{transform:translateX(0)}30%{transform:translateX(-1.5%) rotate(-1deg)}65%{transform:translateX(1.5%) rotate(1deg)}}
@keyframes aigoBotLedError{0%,100%{opacity:.28}50%{opacity:.9}}

@media (max-width:980px){
  .chatbot-idle-layout{grid-template-columns:minmax(0,3fr) minmax(160px,2fr);gap:var(--space-4)}
  .aigo-bot-slot{min-height:188px}
  .aigo-bot-identity{padding:var(--space-2)}
  .aigo-bot{--bot-scale:1.2;--dot-size:8.2px;width:160px;transform:translateY(20px) scale(var(--bot-scale))}
}
@media (max-width:520px){
  .chatbot-idle-layout{grid-template-columns:minmax(0,1fr) 112px;gap:var(--space-3)}
  .aigo-bot-slot{align-items:flex-start;min-height:136px}
  .aigo-bot-identity{padding:6px var(--space-2)}
  .aigo-bot-identity strong{font-size:11px}
  .aigo-bot-identity > span{display:none}
  .aigo-bot{--bot-scale:1.16;--dot-size:5.8px;width:112px;transform:translateY(16px) scale(var(--bot-scale))}
}
@media (prefers-reduced-motion:reduce){
  .aigo-bot,.aigo-bot-piece,.aigo-bot-shadow,.aigo-bot-leds,.aigo-bot-leds i{animation:none!important;transition:none!important}
  .aigo-bot-leds i{opacity:.82}
  .aigo-bot--attentive .aigo-bot-leds i,.aigo-bot--reply .aigo-bot-leds i{opacity:.94;filter:brightness(1.12)}
  .aigo-bot--thinking .aigo-bot-leds i{opacity:1;filter:brightness(1.2) saturate(1.04)}
  .aigo-bot--error .aigo-bot-leds i{opacity:.38;filter:brightness(.72)}
}