/* AI Assistant Pro – Chat Widget v1.3 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Hard reset scoped to widget */
#aiap-widget-root,
#aiap-widget-root *,
#aiap-widget-root *::before,
#aiap-widget-root *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  list-style: none;
  -webkit-font-smoothing: antialiased;
}

#aiap-widget-root {
  /* Color tokens */
  --cp:    #6366f1;   /* primary */
  --cbg:   #ffffff;   /* widget bg */
  --ctxt:  #111827;   /* text */
  --chbg:  #6366f1;   /* header bg */
  --chtxt: #ffffff;   /* header text */
  --cubg:  #6366f1;   /* user bubble bg */
  --cutxt: #ffffff;   /* user bubble text */
  --cbbg:  #f1f5f9;   /* bot bubble bg */
  --cbtxt: #111827;   /* bot bubble text */
  --cbdr:  #e5e7eb;   /* border */
  --cinbg: #f8fafc;   /* input bg */
  --cmut:  #9ca3af;   /* muted text */
  /* Layout tokens */
  --wr:    20px;      /* widget border-radius */
  --wfont: 'Inter', -apple-system, sans-serif;
  --wfs:   14px;      /* font size */
  --bsz:   56px;      /* launcher button size */
  --ww:    390px;     /* widget width */
  --wh:    560px;     /* widget height */
  --wmp:   12px;      /* widget margin from edge */
  --wpad:  14px;      /* internal padding */
  font-family: var(--wfont);
  font-size: var(--wfs);
  line-height: 1.5;
}

/* ─── Launcher ──────────────────────────────────────────── */
.aiap-launcher {
  position: fixed !important;
  width:  var(--bsz) !important;
  height: var(--bsz) !important;
  border-radius: 50% !important;
  background: var(--cp) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14) !important;
  z-index: 999998 !important;
  color: #fff !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  overflow: visible !important;
}
.aiap-launcher:hover { transform: scale(1.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,.32) !important; }

.aiap-l-icon {
  position: absolute !important;
  width: 24px !important; height: 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: opacity .18s ease, transform .2s ease !important;
}
.aiap-l-icon svg {
  width: 24px !important; height: 24px !important;
  fill: currentColor !important; display: block !important;
}

.aiap-launcher .icon-chat  { opacity: 1; transform: rotate(0) scale(1); }
.aiap-launcher .icon-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.aiap-launcher.is-open .icon-chat  { opacity: 0; transform: rotate(90deg) scale(.6); }
.aiap-launcher.is-open .icon-close { opacity: 1; transform: rotate(0) scale(1); }

/* pulse ring */
.aiap-launcher:not(.is-open)::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--cp);
  opacity: 0;
  animation: aiap-pulse 3s ease-out infinite 1.2s;
}
@keyframes aiap-pulse {
  0%   { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.65); }
}

/* ─── Position helpers ──────────────────────────────────── */
.aiap-pos-bottom-right .aiap-launcher { bottom: var(--wmp); right: var(--wmp); }
.aiap-pos-bottom-left  .aiap-launcher { bottom: var(--wmp); left:  var(--wmp); }
.aiap-pos-top-right    .aiap-launcher { top:    var(--wmp); right: var(--wmp); }
.aiap-pos-top-left     .aiap-launcher { top:    var(--wmp); left:  var(--wmp); }

.aiap-pos-bottom-right .aiap-widget { bottom: calc(var(--bsz) + var(--wmp) + 8px); right: var(--wmp); transform-origin: bottom right; }
.aiap-pos-bottom-left  .aiap-widget { bottom: calc(var(--bsz) + var(--wmp) + 8px); left:  var(--wmp); transform-origin: bottom left; }
.aiap-pos-top-right    .aiap-widget { top:    calc(var(--bsz) + var(--wmp) + 8px); right: var(--wmp); transform-origin: top right; }
.aiap-pos-top-left     .aiap-widget { top:    calc(var(--bsz) + var(--wmp) + 8px); left:  var(--wmp); transform-origin: top left; }

/* ─── Widget shell ──────────────────────────────────────── */
.aiap-widget {
  position: fixed !important;
  width:  var(--ww) !important;
  height: var(--wh) !important;
  max-width: calc(100vw - var(--wmp) * 2) !important;
  max-height: calc(100vh - var(--bsz) - var(--wmp) * 3 - 8px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--cbg) !important;
  border-radius: var(--wr) !important;
  overflow: hidden !important;
  z-index: 999997 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.11), 0 0 0 1px rgba(0,0,0,.07) !important;
  opacity: 0;
  pointer-events: none;
  transform: scale(.88) translateY(14px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.15,.64,1);
}
.aiap-widget.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: scale(1) translateY(0) !important;
}

/* ─── Header ────────────────────────────────────────────── */
.aiap-header {
  background: var(--chbg) !important;
  color: var(--chtxt) !important;
  padding: 0 var(--wpad) !important;
  height: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.aiap-header::before {
  content: '';
  position: absolute;
  top: -50%; left: -5%;
  width: 55%; height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 65%);
  pointer-events: none;
}

.aiap-hdr-av {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important; z-index: 1 !important;
}
.aiap-hdr-av img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 50% !important;
}

.aiap-hdr-info {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important; z-index: 1 !important;
}
.aiap-hdr-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--chtxt) !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.aiap-hdr-status {
  font-size: 11.5px !important;
  color: var(--chtxt) !important;
  opacity: .75 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  margin-top: 2px !important;
}
.aiap-hdr-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  flex-shrink: 0 !important;
  animation: aiap-glow 2.2s ease-in-out infinite !important;
}
@keyframes aiap-glow { 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

.aiap-hdr-close {
  position: relative !important; z-index: 1 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: var(--chtxt) !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  transition: background .15s !important;
  font-family: var(--wfont) !important;
}
.aiap-hdr-close:hover { background: rgba(255,255,255,.28) !important; }

/* ─── Messages ──────────────────────────────────────────── */
.aiap-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px var(--wpad) 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  scroll-behavior: smooth !important;
}
.aiap-messages::-webkit-scrollbar { width: 3px; }
.aiap-messages::-webkit-scrollbar-thumb { background: var(--cbdr); border-radius: 3px; }

.aiap-msg {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  animation: aiap-pop .18s ease;
  max-width: 100% !important;
}
@keyframes aiap-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.aiap-msg.user { flex-direction: row-reverse !important; }
.aiap-msg.bot + .aiap-msg.user,
.aiap-msg.user + .aiap-msg.bot { margin-top: 10px !important; }

/* avatar */
.aiap-msg-av {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: var(--cbbg) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.aiap-msg-av img { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; }
.aiap-msg-av.hidden { visibility: hidden !important; }

/* bubbles */
.aiap-bubble {
  max-width: 74% !important;
  padding: 9px 13px !important;
  line-height: 1.58 !important;
  word-break: break-word !important;
  font-size: var(--wfs) !important;
  font-family: var(--wfont) !important;
}
.aiap-msg.bot .aiap-bubble {
  background: var(--cbbg) !important;
  color: var(--cbtxt) !important;
  border-radius: 18px 18px 18px 5px !important;
}
.aiap-msg.user .aiap-bubble {
  background: var(--cubg) !important;
  color: var(--cutxt) !important;
  border-radius: 18px 18px 5px 18px !important;
}

/* bubble content */
.aiap-bubble p      { margin: 0 0 7px !important; }
.aiap-bubble p:last-child { margin: 0 !important; }
.aiap-bubble strong { font-weight: 600 !important; }
.aiap-bubble em     { font-style: italic !important; }
.aiap-bubble code   { font-family: monospace !important; background: rgba(0,0,0,.08) !important; padding: 1px 5px !important; border-radius: 4px !important; font-size: .88em !important; }
.aiap-bubble pre    { background: rgba(0,0,0,.07) !important; border-radius: 8px !important; padding: 10px 12px !important; overflow-x: auto !important; margin: 6px 0 !important; }
.aiap-bubble ul, .aiap-bubble ol { margin: 5px 0 5px 16px !important; }
.aiap-bubble li     { margin-bottom: 3px !important; }
.aiap-bubble a      { color: var(--cp) !important; text-decoration: underline !important; }
.aiap-msg.user .aiap-bubble a    { color: rgba(255,255,255,.88) !important; }
.aiap-msg.user .aiap-bubble code { background: rgba(255,255,255,.2) !important; }

/* typing dots */
.aiap-typing .aiap-bubble {
  display: flex !important; align-items: center !important; gap: 4px !important;
  padding: 13px 15px !important;
}
.aiap-dot {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #94a3b8 !important;
  animation: aiap-bounce .9s ease-in-out infinite !important;
}
.aiap-dot:nth-child(2) { animation-delay: .15s !important; }
.aiap-dot:nth-child(3) { animation-delay: .30s !important; }
@keyframes aiap-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

.aiap-err { font-size: 12.5px !important; color: #991b1b !important; background: #fef2f2 !important; border: 1px solid #fecaca !important; border-radius: 10px !important; padding: 8px 12px !important; margin: 4px 0 !important; }

/* ─── Input Row ─────────────────────────────────────────── */
.aiap-input-row {
  padding: 10px var(--wpad) 13px !important;
  background: var(--cbg) !important;
  border-top: 1px solid var(--cbdr) !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
}

/* ★ The chat input — scoped reset to prevent theme leakage */
.aiap-chat-input {
  flex: 1 !important;
  min-width: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--cinbg) !important;
  border: 1.5px solid var(--cbdr) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-family: var(--wfont) !important;
  font-size: 13.5px !important;
  color: var(--ctxt) !important;
  resize: none !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  line-height: 1.45 !important;
  transition: border-color .15s, box-shadow .15s !important;
  display: block !important;
}
.aiap-chat-input:focus {
  border-color: var(--cp) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.13) !important;
  background: #fff !important;
}
.aiap-chat-input::placeholder { color: var(--cmut) !important; }

/* ★ Send button */
.aiap-send {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  background: var(--cp) !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  transition: background .15s, transform .12s !important;
}
.aiap-send:hover  { background: #4f46e5 !important; transform: scale(1.07) !important; }
.aiap-send:active { transform: scale(.94) !important; }
.aiap-send:disabled { opacity: .42 !important; cursor: default !important; transform: none !important; }
.aiap-send svg { width: 17px !important; height: 17px !important; fill: #fff !important; display: block !important; }

/* ─── Branding ──────────────────────────────────────────── */
.aiap-branding {
  text-align: center !important; font-size: 10.5px !important; color: #d1d5db !important;
  padding: 5px !important; border-top: 1px solid var(--cbdr) !important;
  background: var(--cbg) !important; flex-shrink: 0 !important; font-family: var(--wfont) !important;
}
.aiap-branding a { color: inherit !important; text-decoration: none !important; }
.aiap-branding a:hover { text-decoration: underline !important; }

/* ─── Mobile ────────────────────────────────────────────── */
@media (max-width: 480px) {
  #aiap-widget-root { --ww: calc(100vw - 24px); --wh: 72vh; --wmp: 12px; }
}