/* AI assistant — shared by two shells:
   - the homepage inline console (template-parts/blocks/ai-chatbot.php)
   - the floating button + popover on solution pages, and any other opted-in
     template (template-parts/global/chatbot-fab.php)
   Enqueued from aigo_enqueue_assets() only where the widget actually renders.
   The inner thread / message / form / typing / avatar styles are common to
   both shells; the two shells sit above them.

   The homepage identity badge (.aigo-bot-identity) and the mascot slot
   (.aigo-bot-slot) are styled in assets/aigo-bot-concept/aigo-bot.css, which
   only loads on the homepage — the floating popover has its own header
   instead (.chatbot-popover-header) and no mascot. */

/* ============================ shared inner ============================= */
.chatbot-avatar-mark{display:block;width:16px;height:16px;color:var(--red-2);background-image:var(--brand-dots);--dot-muted:rgba(255,255,255,.42)}

.chatbot-thread{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.chatbot-msg{position:relative;max-width:min(82%,560px);padding:13px var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-body-sm);line-height:1.6;animation:chatbotMessageIn 240ms cubic-bezier(.16,1,.3,1) both}
.chatbot-msg p{margin:0}
.chatbot-msg-bot{align-self:flex-start;margin-left:38px;background:var(--soft-2);color:var(--text);border-top-left-radius:5px}
.chatbot-message-avatar{position:absolute;top:0;right:calc(100% + 8px);display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--blue);box-shadow:0 5px 12px rgba(var(--blue-rgb),.14)}
.chatbot-msg-user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px;box-shadow:0 8px 20px rgba(var(--blue-rgb),.12)}
.chatbot-msg-error{align-self:flex-start;background:#fff1f0;color:#9f3039}
@keyframes chatbotMessageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.chatbot-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.chatbot-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;animation:chatbotTypingPulse 1s infinite}
.chatbot-typing i:nth-child(2){animation-delay:.15s}
.chatbot-typing i:nth-child(3){animation-delay:.3s}
@keyframes chatbotTypingPulse{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}

.chatbot-form{display:flex;align-items:center;gap:var(--space-2);margin:0 var(--space-5) var(--space-5);padding:7px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(35,37,60,.07);flex:0 0 auto;transition:border-color 180ms ease-out,box-shadow 180ms ease-out}
/* Anti-spam honeypot - invisible to real visitors, often auto-filled by bots. */
.chatbot-honeypot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.chatbot-form:focus-within{border-color:var(--red);box-shadow:0 14px 34px rgba(35,37,60,.11),0 0 0 4px rgba(var(--red-rgb),.1)}
.chatbot-input-mark{display:grid;place-items:center;width:26px;height:34px;flex:0 0 26px}
.chatbot-input-mark .chatbot-avatar-mark{--dot-muted:#c7cad4}
.chatbot-input-wrap{position:relative;display:block;flex:1;min-width:0}
.chatbot-form input{
  width:100%;min-width:0;border:0;padding:11px var(--space-2);
  font:inherit;font-size:var(--fs-body-sm);background:transparent;color:var(--text);
}
.chatbot-form input:focus{outline:none}
.chatbot-example{position:absolute;top:50%;left:var(--space-2);max-width:calc(100% - var(--space-4));overflow:hidden;color:#626874;font-size:var(--fs-body-sm);line-height:1;white-space:nowrap;text-overflow:clip;transform:translateY(-50%);pointer-events:none}
.chatbot-example::after{content:"";display:inline-block;width:1px;height:1.05em;margin-left:2px;background:var(--red);vertical-align:-.16em;animation:chatbotCaret 800ms steps(1,end) infinite}
.chatbot-example[hidden]{display:none}
@keyframes chatbotCaret{50%{opacity:0}}
.chatbot-send{
  flex:0 0 auto;width:42px;height:42px;border-radius:15px;border:none;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 7px 16px rgba(var(--red-rgb),.22);transition:background 180ms ease-out,box-shadow 180ms ease-out,transform 120ms ease-out;
}
.chatbot-send:disabled{opacity:.5;cursor:default;transform:none}
.chatbot-send:active{transform:scale(.95)}
.chatbot-send:focus-visible{outline:3px solid rgba(var(--red-rgb),.22);outline-offset:3px}
.chatbot-storage-notice{display:flex;align-items:flex-start;gap:8px;margin:-10px var(--space-6) var(--space-4);color:#626874;font-size:11px;line-height:1.45;flex:0 0 auto}
.chatbot-storage-mark{width:10px;height:10px;margin-top:3px;flex:0 0 10px;background-image:var(--brand-dots);background-position:center;background-repeat:no-repeat;background-size:10px 10px;color:var(--red);--dot-muted:#c7cad4}

.chatbot-brand-ai{color:var(--red)} /* the "AI" in the widget's name */

.chatbot-prompts{display:grid;grid-template-columns:1fr;gap:0;width:100%;margin-top:var(--space-4);border-top:1px solid var(--line)}
.chatbot-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:42px;padding:var(--space-2) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:12.5px;font-weight:650;line-height:1.3;text-align:left;cursor:pointer;transition:color 180ms ease-out,transform 120ms ease-out}
.chatbot-prompt svg{flex:0 0 auto;color:var(--red);transition:transform 180ms ease-out}
.chatbot-prompt:active{transform:scale(.985)}
.chatbot-prompt:focus-visible{outline:3px solid rgba(var(--red-rgb),.2);outline-offset:3px}
.chatbot-prompt:disabled{opacity:.55;cursor:default}

/* ===================== shell 1: homepage inline console ===================== */
.chatbot-section{
  position:relative;isolation:isolate;overflow:hidden;padding:var(--section-space) 0;
  background:linear-gradient(180deg,#fff 0,#f5f6f9 14%,#edf0f5 50%,#f5f6f9 86%,#fff 100%);
}
.chatbot-section::before{
  content:"";position:absolute;z-index:-2;top:9%;bottom:9%;left:50%;width:min(1120px,94vw);transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.96) 0,rgba(255,255,255,.72) 40%,transparent 72%);
  filter:blur(1px);
}
.chatbot-signal-field{position:absolute;z-index:-1;inset:-5%;overflow:hidden;pointer-events:none}
.chatbot-signal-field span{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%2323253c'%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20' cy='4' r='2'/%3E%3Ccircle cx='4' cy='12' r='2' opacity='.25'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3Ccircle cx='12' cy='20' r='2' opacity='.25'/%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");background-size:36px 36px;opacity:.16;-webkit-mask-image:radial-gradient(ellipse 63% 82% at 50% 48%,#000 0,rgba(0,0,0,.72) 42%,transparent 78%);mask-image:radial-gradient(ellipse 63% 82% at 50% 48%,#000 0,rgba(0,0,0,.72) 42%,transparent 78%)}
.chatbot-field-active .chatbot-signal-field span{animation:chatbotSignalWave 7.2s cubic-bezier(.45,0,.55,1) infinite;will-change:transform,opacity}
@keyframes chatbotSignalWave{
  0%,100%{opacity:.12;transform:scale(.985)}
  50%{opacity:.21;transform:scale(1.015)}
}
.chatbot-container{max-width:760px;margin:0 auto}
.chatbot-console{
  position:relative;display:flex;flex-direction:column;min-height:0;max-height:min(620px,72vh);overflow:hidden;
  background:rgba(255,255,255,.94);border-radius:var(--radius-xl);
  box-shadow:0 32px 90px rgba(35,37,60,.12),0 4px 16px rgba(35,37,60,.05);
}
.chatbot-console::after{content:"";position:absolute;inset:0;border:1px solid rgba(35,37,60,.08);border-radius:inherit;pointer-events:none}
.chatbot-idle{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--space-5) var(--space-6) var(--space-4);text-align:left}
.chatbot-idle h2{max-width:none;margin:0;color:var(--blue);font-size:clamp(21px,2.4vw,27px);line-height:1.16;letter-spacing:-.03em}
.chatbot-idle-copy > p{max-width:64ch;margin:var(--space-2) 0 0;color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.5}

/* ===================== shell 2: floating button + popover ===================== */
.chatbot-fab{
  position:fixed;z-index:120;right:clamp(14px,4vw,28px);bottom:clamp(14px,4vw,28px);
  display:flex;align-items:center;justify-content:flex-start;gap:14px;width:214px;height:64px;padding:8px 8px 8px 18px;isolation:isolate;overflow:visible;
  border:1px solid rgba(var(--red-rgb),.16);border-radius:16px;background:#fff;color:var(--blue);cursor:pointer;
  transition:transform 180ms cubic-bezier(.16,1,.3,1),background-color 180ms ease,color 180ms ease,border-color 180ms ease,opacity 160ms ease;
  animation:chatbotFabEnter 520ms cubic-bezier(.16,1,.3,1) 220ms backwards;
}
.chatbot-fab::before{
  content:"";position:absolute;z-index:-1;inset:-4px;border:2px solid rgba(var(--red-rgb),.56);border-radius:19px;opacity:0;pointer-events:none;
  animation:chatbotFabAttention 4s cubic-bezier(.16,1,.3,1) 1.2s infinite;
}
.chatbot-fab svg{width:24px;height:24px;display:block}
.chatbot-fab-copy{display:flex;width:126px;min-width:126px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left;white-space:nowrap}
.chatbot-fab-copy strong{font-size:15px;line-height:1;letter-spacing:-.015em}
.chatbot-fab-copy small{position:relative;padding-left:12px;color:var(--text-secondary);font-size:11px;font-weight:650;line-height:1}
.chatbot-fab-copy small::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-50%);animation:chatbotFabStatus 2.8s ease-in-out infinite}
.chatbot-fab-mascot{
  position:relative;z-index:1;width:48px;height:48px;flex:0 0 48px;overflow:hidden;pointer-events:none;
}
.chatbot-fab-mascot-art{position:absolute;left:50%;top:-1px;width:100px;height:100px;transform:translateX(-50%);transform-origin:50% 24%;transition:transform 180ms cubic-bezier(.16,1,.3,1)}
.chatbot-fab-mascot-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.chatbot-fab-face{
  position:absolute;left:41.2%;top:18.4%;width:16px;height:16px;color:var(--red-2);--dot-muted:#777a83;
  background-image:var(--brand-dots);background-repeat:no-repeat;filter:drop-shadow(0 0 3px rgba(var(--red-rgb),.34));
  animation:chatbotFabFacePulse 2.8s ease-in-out infinite;
}
.chatbot-fab .chatbot-fab-close{display:none}
.chatbot-fab:focus-visible{outline:3px solid rgba(var(--red-rgb),.3);outline-offset:4px}
.chatbot-fab:active{transform:scale(.97)}
body.chatbot-open .chatbot-fab .chatbot-fab-open{display:none}
body.chatbot-open .chatbot-fab::before{animation:none}
body.chatbot-open .chatbot-fab .chatbot-fab-close{display:block}
body.chatbot-open .chatbot-fab{justify-content:center;width:48px;height:48px;padding:0;border-color:transparent;border-radius:14px;background:var(--blue);color:#fff;animation:none}
@keyframes chatbotFabEnter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes chatbotFabAttention{
  0%,100%{opacity:0;transform:scale(1)}
  8%{opacity:.56}
  24%{opacity:0;transform:scale(1.065)}
}
@keyframes chatbotFabStatus{0%,100%{opacity:.72;transform:translateY(-50%) scale(.9)}50%{opacity:1;transform:translateY(-50%) scale(1.08)}}
@keyframes chatbotFabFacePulse{0%,100%{opacity:.82;filter:brightness(.94) drop-shadow(0 0 2px rgba(var(--red-rgb),.28))}50%{opacity:1;filter:brightness(1.14) drop-shadow(0 0 4px rgba(var(--red-rgb),.46))}}
/* Out of the way while the mobile nav menu is open (body.nav-is-open is set
   by the nav JS on mobile) — the FAB otherwise floats over the open menu. */
body.nav-is-open .chatbot-fab,body.nav-is-open .chatbot-popover{opacity:0;visibility:hidden;pointer-events:none}

.chatbot-popover{
  position:fixed;z-index:119;right:clamp(14px,4vw,28px);bottom:calc(clamp(14px,4vw,28px) + 64px + 14px);
  display:flex;flex-direction:column;width:min(390px,calc(100vw - 28px));height:min(560px,calc(100dvh - 140px));overflow:hidden;
  background:#fff;border:1px solid rgba(35,37,60,.1);border-radius:var(--radius-xl);
  box-shadow:0 36px 100px rgba(35,37,60,.22),0 6px 20px rgba(35,37,60,.1);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.98);transform-origin:bottom right;
  transition:opacity 180ms ease,transform 220ms cubic-bezier(.16,1,.3,1),visibility 0s linear 220ms;
}
body.chatbot-open .chatbot-popover{bottom:calc(clamp(14px,4vw,28px) + 48px + 12px);opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}

.chatbot-popover-header{display:flex;align-items:center;gap:var(--space-3);min-height:60px;padding:0 var(--space-4);border-bottom:1px solid var(--line);flex:0 0 auto;background:#fbfbfc}
.chatbot-popover-avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--blue);box-shadow:0 6px 16px rgba(var(--blue-rgb),.2)}
.chatbot-popover-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.chatbot-popover-id strong{color:var(--text);font-size:var(--fs-control);line-height:1.2;letter-spacing:-.015em}
.chatbot-popover-id > span{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:var(--fs-meta);font-weight:600}
.chatbot-popover-id i{width:7px;height:7px;border-radius:50%;background:#4f9f72;box-shadow:0 0 0 3px rgba(79,159,114,.12)}
.chatbot-popover-close{
  display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;
  border:0;border-radius:10px;background:#eef0f4;color:var(--blue);cursor:pointer;
  transition:transform 140ms cubic-bezier(.16,1,.3,1),background-color 160ms ease,color 160ms ease;
}
.chatbot-popover-close svg{width:16px;height:16px}
.chatbot-popover-close:focus-visible{outline:3px solid rgba(var(--red-rgb),.22);outline-offset:2px}
.chatbot-popover-close:active{transform:scale(.94)}
.chatbot-popover .chatbot-thread{padding:var(--space-4)}
.chatbot-popover .chatbot-idle{padding:var(--space-4)}
.chatbot-popover .chatbot-idle p{margin:0;color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.5}
.chatbot-popover .chatbot-msg{max-width:90%}
.chatbot-popover .chatbot-form{margin:0 var(--space-3) var(--space-3);box-shadow:none}
.chatbot-popover .chatbot-storage-notice{margin:-6px var(--space-4) var(--space-3)}

/* ================================ responsive / motion ================================ */
@media (hover:hover) and (pointer:fine){
  .chatbot-prompt:hover{color:var(--red);transform:translateX(2px)}
  .chatbot-prompt:hover svg{transform:translateX(2px)}
  .chatbot-send:hover{background:var(--red-2);box-shadow:0 9px 20px rgba(var(--red-rgb),.28)}
  .chatbot-fab:hover{transform:translateY(-2px);border-color:rgba(var(--red-rgb),.36)}
  .chatbot-fab:hover:active{transform:translateY(-1px) scale(.97)}
  .chatbot-fab:hover .chatbot-fab-mascot-art{transform:translateX(-50%) translateY(-2px)}
  body.chatbot-open .chatbot-fab:hover{background:var(--blue-2)}
  .chatbot-popover-close:hover{background:#fff0ef;color:var(--red)}
}

@media (max-width:820px){
  .chatbot-section{padding:var(--section-space-sm) 0}
  .chatbot-console{min-height:0;max-height:min(620px,78vh);border-radius:var(--radius-lg)}
  .chatbot-thread{padding:var(--space-4)}
  .chatbot-idle{padding:var(--space-5) 0}
  .chatbot-idle-copy > p{padding:0}
  .chatbot-prompts{display:grid;margin-top:var(--space-4)}
  .chatbot-prompt{width:100%;min-height:40px}
  .chatbot-msg{max-width:88%}
  .chatbot-form{margin:0 var(--space-3) var(--space-3)}
  .chatbot-storage-notice{margin:-4px var(--space-4) var(--space-3)}

  .chatbot-fab{width:200px;height:60px;gap:12px;padding:7px 7px 7px 16px;border-radius:15px}
  .chatbot-fab svg{width:22px;height:22px}
  .chatbot-fab-copy{width:119px;min-width:119px;gap:3px}
  .chatbot-fab-copy strong{font-size:14px}
  .chatbot-fab-copy small{font-size:10.5px}
  .chatbot-fab-mascot{width:46px;height:46px;flex-basis:46px;border-radius:11px}
  .chatbot-fab-mascot-art{top:-1px;width:96px;height:96px}
  body.chatbot-open .chatbot-fab{width:46px;height:46px;padding:0;border-radius:13px}
  .chatbot-popover{
    right:0;left:0;bottom:0;width:100%;height:min(72dvh,600px);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform-origin:bottom center;
  }
  body.chatbot-open .chatbot-popover{bottom:0}
  body.chatbot-open .chatbot-fab{opacity:0;visibility:hidden;pointer-events:none}
  .chatbot-popover .chatbot-idle{padding:var(--space-4) 0}
}

@media (prefers-reduced-motion: reduce){
  .chatbot-typing i,.chatbot-msg,.chatbot-example::after{animation:none}
  .chatbot-signal-field span{animation:none;opacity:.16;transform:none}
  .chatbot-prompt,.chatbot-prompt svg,.chatbot-send,.chatbot-fab,.chatbot-fab-mascot-art,.chatbot-popover{transition:none}
  .chatbot-fab,.chatbot-fab::before,.chatbot-fab-face,.chatbot-fab-copy small::before{animation:none}
}

@media (prefers-reduced-transparency: reduce){
  .chatbot-console{background:#fff}
}

@media (prefers-contrast: more){
  .chatbot-console::after,.chatbot-form,.chatbot-prompt,.chatbot-popover{border-color:var(--blue)}
}