/* ═══════════════════════════════════════════════════════════
   WP AI Assistant v1.1 — Widget Styles
   CSS Variables driven — theme fully controlled by PHP
═══════════════════════════════════════════════════════════ */
:root {
  --wpai-primary:         #6B4FBB;
  --wpai-primary-dark:    #5a3fa8;
  --wpai-user-bubble-bg:  #6B4FBB;
  --wpai-user-bubble-txt: #ffffff;
  --wpai-bot-bubble-bg:   #f3f4f6;
  --wpai-bot-bubble-txt:  #1e1b2e;
  --wpai-chat-bg:         #ffffff;
  --wpai-radius:          16px;
  --wpai-trigger-size:    56px;
  --wpai-width:           380px;
  --wpai-input-bg:        rgba(0,0,0,0.02);
}

/* ─── Animations ─────────────────────────────────────────── */
@keyframes wpai-dot {
  0%,80%,100% { transform:scale(0.6); opacity:0.4; }
  40%         { transform:scale(1);   opacity:1; }
}
@keyframes wpai-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(107,79,187,.3); }
  50%     { box-shadow:0 4px 28px rgba(107,79,187,.6); }
}
@keyframes wpai-badge-pop {
  0%   { transform:scale(0); }
  60%  { transform:scale(1.2); }
  100% { transform:scale(1); }
}

/* ─── Isolation ──────────────────────────────────────────── */
#wpai-widget-root * { box-sizing:border-box; }
#wpai-widget-root button { font-family:inherit; }

/* ─── Scrollbar ──────────────────────────────────────────── */
#wpai-widget-root ::-webkit-scrollbar      { width:3px; }
#wpai-widget-root ::-webkit-scrollbar-track{ background:transparent; }
#wpai-widget-root ::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.15); border-radius:4px; }

/* ─── Trigger pulse ──────────────────────────────────────── */
#wpai-widget-root > button {
  animation: wpai-pulse 2.5s ease-in-out infinite;
}
#wpai-widget-root > button:hover {
  animation: none;
}

/* ─── Badge pop ──────────────────────────────────────────── */
#wpai-widget-root > button span {
  animation: wpai-badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ─── Mobile fullscreen ──────────────────────────────────── */
@media (max-width: 480px) {
  #wpai-widget-root [role="dialog"] {
    bottom:  0 !important;
    right:   0 !important;
    left:    0 !important;
    width:   100vw !important;
    height:  92svh !important;
    border-radius: 20px 20px 0 0 !important;
    margin:  0 !important;
  }
}

/* ─── Streaming cursor ───────────────────────────────────── */
@keyframes wpai-cursor-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

/* ─── Sheet animation (DynamicForm) ─────────────────────── */
@keyframes wpai-sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Toggle switch (admin) ──────────────────────────────── */
.wpai-toggle-wrap { position:relative; display:inline-flex; align-items:center; }
.wpai-toggle-input { opacity:0; width:0; height:0; position:absolute; }
.wpai-toggle-track {
  display:inline-block; width:40px; height:22px;
  background:#e5e7eb; border-radius:11px; cursor:pointer;
  transition:background .2s; flex-shrink:0;
}
.wpai-toggle-track::after {
  content:''; position:absolute; top:3px; right:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s;
}
.wpai-toggle-input:checked ~ .wpai-toggle-track { background:var(--wpai-primary,#6B4FBB); }
.wpai-toggle-input:checked ~ .wpai-toggle-track::after { transform:translateX(-18px); }