/* WP AI Chatbot - Frontend Widget */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

#wpaicb-root * { box-sizing: border-box; font-family: 'Inter', sans-serif; margin: 0; padding: 0; }

/* TOGGLE BUTTON */
#wpaicb-toggle {
  position: fixed; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 99998; transition: transform .2s, box-shadow .2s;
  animation: wpaicb-pop .4s cubic-bezier(.34,1.56,.64,1);
}
#wpaicb-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,.3); }
#wpaicb-toggle.bottom-right { bottom: 24px; right: 24px; }
#wpaicb-toggle.bottom-left { bottom: 24px; left: 24px; }
#wpaicb-toggle .wpaicb-open-icon, #wpaicb-toggle .wpaicb-close-icon { transition: opacity .2s, transform .2s; position: absolute; }
#wpaicb-toggle.open .wpaicb-open-icon { opacity: 0; transform: rotate(90deg) scale(.5); }
#wpaicb-toggle:not(.open) .wpaicb-close-icon { opacity: 0; transform: rotate(-90deg) scale(.5); }

/* CHAT WINDOW */
#wpaicb-window {
  position: fixed; width: 370px; height: 560px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.1);
  z-index: 99997; display: flex; flex-direction: column;
  transition: opacity .25s, transform .25s; background: #fff;
}
#wpaicb-window.bottom-right { bottom: 94px; right: 24px; }
#wpaicb-window.bottom-left { bottom: 94px; left: 24px; }
#wpaicb-window.wpaicb-hidden { opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; }

/* HEADER */
#wpaicb-header { padding: 18px 18px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#wpaicb-header .wpaicb-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
#wpaicb-header .wpaicb-bot-info { flex: 1; }
#wpaicb-header .wpaicb-bot-name { font-size: 15px; font-weight: 600; color: #fff; }
#wpaicb-header .wpaicb-bot-status { font-size: 11px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 4px; }
#wpaicb-header .wpaicb-bot-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: block; animation: wpaicb-pulse 2s infinite; }
#wpaicb-header-close { background: rgba(255,255,255,.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
#wpaicb-header-close:hover { background: rgba(255,255,255,.35); }

/* MESSAGES */
#wpaicb-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; scroll-behavior: smooth; }
#wpaicb-messages::-webkit-scrollbar { width: 4px; }
#wpaicb-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.wpaicb-msg { display: flex; gap: 8px; animation: wpaicb-msg-in .25s ease; max-width: 88%; }
@keyframes wpaicb-msg-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.wpaicb-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.wpaicb-msg.bot { align-self: flex-start; }
.wpaicb-msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 2px; }
.wpaicb-msg.bot .wpaicb-msg-avatar { background: #ede9fe; }
.wpaicb-msg.user .wpaicb-msg-avatar { background: #dbeafe; }
.wpaicb-msg-bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; max-width: 100%; word-break: break-word; }
.wpaicb-msg.bot .wpaicb-msg-bubble { background: #fff; color: #1e293b; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #f1f5f9; }
.wpaicb-msg.user .wpaicb-msg-bubble { color: #fff; border-radius: 16px 4px 16px 16px; }

/* TYPING INDICATOR */
.wpaicb-typing .wpaicb-msg-bubble { display: flex; align-items: center; gap: 4px; padding: 12px 16px; }
.wpaicb-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: wpaicb-bounce .9s infinite; }
.wpaicb-dot:nth-child(2) { animation-delay: .15s; }
.wpaicb-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wpaicb-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* INPUT AREA */
#wpaicb-input-area { padding: 12px 14px 14px; background: #fff; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
#wpaicb-input-row { display: flex; gap: 8px; align-items: flex-end; }
#wpaicb-input { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 9px 14px; font-size: 14px; resize: none; min-height: 40px; max-height: 110px; outline: none; font-family: 'Inter', sans-serif; color: #1e293b; line-height: 1.4; transition: border-color .2s; }
#wpaicb-input:focus { border-color: var(--wpaicb-primary, #6366f1); }
#wpaicb-send { width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity .2s, transform .2s; flex-shrink: 0; }
#wpaicb-send:hover { opacity: .88; transform: scale(1.05); }
#wpaicb-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
#wpaicb-footer { text-align: center; font-size: 10px; color: #cbd5e1; margin-top: 6px; }

/* ANIMATIONS */
@keyframes wpaicb-pop { from { opacity:0; transform: scale(.5); } to { opacity:1; transform: scale(1); } }
@keyframes wpaicb-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* MOBILE */
@media (max-width: 430px) {
  #wpaicb-window { width: calc(100vw - 20px); right: 10px !important; left: 10px !important; height: 70vh; bottom: 80px !important; }
}