/* ============================================================
   AI Chat Widget Pro v2.5
   - No capture form (chat-style onboarding)
   - Animated dual bubble (AI + Tawk.to)
   - Full-screen mobile panel
   - z-index above all page elements
   ============================================================ */

:root {
  --aicw-accent:      #111111;
  --aicw-accent-dark: #000000;
  --aicw-radius:      16px;
  --aicw-shadow:      0 8px 48px rgba(0,0,0,.22);
  --aicw-panel-w:     375px;
  --aicw-z:          2147483640; /* max safe z-index */
}

/* ── Root ── */
#aicw-root {
  position: fixed;
  bottom: 24px;
  z-index: var(--aicw-z);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Isolate stacking context so nothing bleeds above */
  isolation: isolate;
}
#aicw-root.aicw-pos-right { right: 24px; }
#aicw-root.aicw-pos-left  { left:  24px; }

/* ============================================================
   LAUNCHER — main bubble + pill menu
   ============================================================ */
.aicw-launcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

/* ── Main bubble ── */
.aicw-bubble {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--aicw-accent);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 22px rgba(0,0,0,.3);
  position: relative;
  color: #fff; outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: aicw-bubble-pop .45s cubic-bezier(.34,1.56,.64,1) both;
  flex-shrink: 0;
  z-index: 2;
}
.aicw-bubble:hover  { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.34); }
.aicw-bubble:active { transform: scale(.93); }

@keyframes aicw-bubble-pop {
  from { opacity:0; transform:scale(.35); }
  to   { opacity:1; transform:scale(1); }
}

/* Animated ring pulse */
.aicw-bubble-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--aicw-accent);
  opacity: 0;
  animation: aicw-ring 2.8s ease-out 1.2s infinite;
  pointer-events: none;
}
@keyframes aicw-ring {
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.5);  opacity:0; }
  100% { transform:scale(1.5);  opacity:0; }
}

/* Open/close icon transition */
.aicw-bubble-icon {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .22s, transform .22s;
}
.aicw-bubble-close { opacity: 0; transform: rotate(-90deg) scale(.65); }
.aicw-bubble--main.is-open .aicw-bubble-open  { opacity: 0; transform: rotate(90deg) scale(.65); }
.aicw-bubble--main.is-open .aicw-bubble-close { opacity: 1; transform: rotate(0) scale(1); }

/* Unread dot on AI pill */
.aicw-unread-dot {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: #e53e3e; border-radius: 50%; border: 2px solid #fff;
  animation: aicw-pulse 2s infinite;
}
@keyframes aicw-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:.7;} }

/* Live agent dot */
.aicw-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981; flex-shrink: 0;
  animation: aicw-pulse 2.5s infinite;
}

/* ============================================================
   PILL MENU — slides in from bubble, horizontal layout
   ============================================================ */
.aicw-pill-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: 0;
  right: calc(100% + 12px);
  /* Hidden state — invisible + no interaction + no size impact */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(16px) scale(.94);
  transform-origin: right center;
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .22s cubic-bezier(.34,1.4,.64,1),
    visibility 0s linear .22s;
  white-space: nowrap;
}

/* When open — fully interactive */
.aicw-pill-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0) scale(1);
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .22s cubic-bezier(.34,1.4,.64,1),
    visibility 0s linear 0s;
}

/* ── Individual pill buttons ── */
.aicw-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 3px 14px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
  /* Staggered entrance */
  animation: aicw-pill-in .3s cubic-bezier(.34,1.4,.64,1) both;
}
.aicw-pill-btn:hover  { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.aicw-pill-btn:active { transform: scale(.96); }

/* Stagger delays when menu opens */
.aicw-pill-ai   { background: var(--aicw-accent); animation-delay: .04s; }
.aicw-pill-live { background: #10b981;             animation-delay: .11s; }
.aicw-pill-live:hover { background: #059669; }

@keyframes aicw-pill-in {
  from { opacity:0; transform:translateX(12px) scale(.88); }
  to   { opacity:1; transform:translateX(0)    scale(1); }
}

.aicw-pill-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
.aicw-pill-label { letter-spacing: .01em; }

/* ── Mobile: pills stack above bubble ── */
@media (max-width: 600px) {
  .aicw-pill-menu {
    flex-direction: column;
    right: 0;
    bottom: calc(100% + 10px);
    align-items: flex-end;
    transform: translateY(10px) scale(.94);
    transform-origin: bottom right;
  }
  .aicw-pill-menu.is-open {
    transform: translateY(0) scale(1);
  }
  .aicw-pill-btn { height: 44px; padding: 0 18px 0 14px; font-size:.86rem; }
}

/* ── Left position: pills go to the RIGHT ── */
.aicw-pos-left .aicw-pill-menu {
  right: auto;
  left: calc(100% + 12px);
  transform-origin: left center;
  transform: translateX(-16px) scale(.94);
}
.aicw-pos-left .aicw-pill-menu.is-open {
  transform: translateX(0) scale(1);
}
@media (max-width: 600px) {
  .aicw-pos-left .aicw-pill-menu {
    left: 0; right: auto;
    align-items: flex-start;
    transform: translateY(10px) scale(.94);
    transform-origin: bottom left;
  }
}

/* ============================================================
   PANEL — above EVERYTHING, full-screen on mobile
   ============================================================ */
.aicw-panel {
  position: fixed;
  z-index: var(--aicw-z);
  width: var(--aicw-panel-w);
  background: #fff;
  border-radius: var(--aicw-radius);
  box-shadow: var(--aicw-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.aicw-pos-right .aicw-panel { right: 0; }
.aicw-pos-left  .aicw-panel { left:  0; }

.aicw-panel.is-open {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  :root { --aicw-panel-w: 345px; }
}

/* ── MOBILE: true full-screen, above EVERYTHING ── */
@media (max-width: 600px) {
  :root { --aicw-panel-w: 100vw; }
  .aicw-panel {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100dvw !important; width: 100vw !important;
    height: 100dvh !important; height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    transform: translateY(100%) !important;
    transition: opacity .25s ease, transform .32s cubic-bezier(.4,0,.2,1) !important;
    z-index: 2147483647 !important; /* truly on top on mobile */
  }
  .aicw-panel.is-open {
    transform: translateY(0) !important;
  }
  /* Bubble positioning on mobile */
  #aicw-root.aicw-pos-right { right: 14px !important; left: auto !important; }
  #aicw-root.aicw-pos-left  { left: 14px !important;  right: auto !important; }
}

/* ── Header ── */
.aicw-panel-header {
  display: flex; align-items: center; gap: .7rem;
  padding: 11px 13px;
  background: var(--aicw-accent); color: #fff; flex-shrink: 0;
  /* Safe area for notch */
  padding-top: max(11px, calc(env(safe-area-inset-top, 0px) + 11px));
}

.aicw-header-avatar { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.aicw-av-img,
.aicw-av-init {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  color: var(--aicw-accent); background: rgba(255,255,255,.22);
}
.aicw-online-dot {
  position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px;
  background: #48bb78; border-radius: 50%; border: 2px solid var(--aicw-accent);
}
.aicw-header-info { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.aicw-header-name   { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aicw-header-status { font-size:.67rem; opacity:.75; }
.aicw-header-actions { display:flex; gap:.2rem; flex-shrink:0; }
.aicw-icon-btn {
  background:rgba(255,255,255,.12); border:none; color:#fff;
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; -webkit-tap-highlight-color:transparent;
}
.aicw-icon-btn:hover { background:rgba(255,255,255,.22); }

/* ── Restore banner ── */
.aicw-restore-banner {
  background:#eff6ff; border-bottom:1px solid #bfdbfe;
  padding:8px 14px; display:flex; align-items:center;
  justify-content:space-between; flex-shrink:0; gap:8px;
}
.aicw-restore-banner span { font-size:.78rem; color:#1d4ed8; flex:1; }
.aicw-restore-btn {
  font-family:inherit; font-size:.74rem; font-weight:600;
  background:#1d4ed8; color:#fff; border:none;
  border-radius:6px; padding:4px 12px; cursor:pointer; white-space:nowrap;
}
.aicw-restore-btn:hover { background:#1e40af; }

/* ============================================================
   CHAT AREA (used for both onboarding + conversation)
   ============================================================ */
#aicw-chat-area {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; min-height:0;
}

/* Messages */
.aicw-messages {
  flex:1; overflow-y:auto; padding:.75rem .8rem;
  display:flex; flex-direction:column; gap:.6rem;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.aicw-messages::-webkit-scrollbar { width:3px; }
.aicw-messages::-webkit-scrollbar-thumb { background:#e2e2e2; border-radius:3px; }

.aicw-msg { display:flex; gap:.5rem; align-items:flex-end; animation:aicw-msg-in .2s ease both; }
@keyframes aicw-msg-in { from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;} }

.aicw-msg-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--aicw-accent); color:#fff;
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.aicw-msg-avatar img { width:100%; height:100%; object-fit:cover; }

.aicw-msg-bubble {
  max-width:80%; padding:.6rem .82rem;
  border-radius:14px; font-size:.84rem; line-height:1.55; word-break:break-word;
}
.aicw-msg--bot  .aicw-msg-bubble { background:#f3f4f6; color:#111; border-bottom-left-radius:4px; }
.aicw-msg--user { flex-direction:row-reverse; }
.aicw-msg--user .aicw-msg-bubble { background:var(--aicw-accent); color:#fff; border-bottom-right-radius:4px; }
.aicw-msg--bot a { color:var(--aicw-accent); text-decoration:underline; font-weight:600; }
.aicw-msg-bubble ul { margin:.3rem 0 .3rem 1rem; padding:0; }
.aicw-msg-bubble li { margin-bottom:.18rem; }

/* Input hint messages (for onboarding) */
.aicw-msg--hint .aicw-msg-bubble {
  background:transparent; color:#999; font-size:.78rem;
  padding:.3rem 0; border-radius:0;
}

/* Typing indicator */
.aicw-typing .aicw-msg-bubble { display:flex; gap:4px; align-items:center; padding:.6rem .75rem; }
.aicw-typing-dot { width:7px; height:7px; border-radius:50%; background:#999; animation:aicw-bounce .9s infinite ease-in-out; }
.aicw-typing-dot:nth-child(2) { animation-delay:.15s; }
.aicw-typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes aicw-bounce { 0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);} }

.aicw-msg-time { font-size:.63rem; color:#bbb; margin-top:.16rem; display:block; }
.aicw-msg--bot  .aicw-msg-time { text-align:left; }
.aicw-msg--user .aicw-msg-time { text-align:right; }

/* Suggestions */
.aicw-suggestions {
  display:flex; flex-wrap:wrap; gap:.3rem;
  padding:.45rem .75rem .5rem;
  border-top:1px solid #f0f0f0; flex-shrink:0;
  overflow:visible;
  transition:opacity .25s ease;
}
.aicw-suggestions.aicw-chips-empty { display:none; }

.aicw-chip {
  font-family:inherit; font-size:.71rem;
  color:var(--aicw-accent); background:#f5f5f5;
  border:1px solid #e5e5e5; border-radius:50px;
  padding:.28rem .7rem; cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
  animation:aicw-chip-in .2s ease both;
  flex-shrink:0;
}
@keyframes aicw-chip-in { from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);} }
.aicw-chip:hover { background:var(--aicw-accent); color:#fff; border-color:var(--aicw-accent); }
.aicw-chip--agent { border-color:var(--aicw-accent); font-weight:600; }

/* Input area */
.aicw-input-area {
  border-top:1px solid #efefef;
  padding:.55rem .65rem .5rem;
  flex-shrink:0; background:#fff;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom, .5rem));
}
.aicw-input-wrap {
  display:flex; align-items:stretch; gap:0;
  background:#fff; border:1.5px solid #e2e2e2;
  border-radius:13px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.aicw-input-wrap:focus-within {
  border-color:var(--aicw-accent);
  box-shadow:0 0 0 3px rgba(17,17,17,.07);
}
.aicw-input {
  flex:1; border:none !important; background:transparent !important;
  outline:none !important; resize:none !important;
  font-family:inherit !important; font-size:.87rem !important;
  color:#111 !important; line-height:1.5 !important;
  max-height:96px !important; overflow-y:auto !important;
  padding:10px 12px !important; margin:0 !important;
  box-shadow:none !important; min-height:42px !important; display:block !important;
}
@media (max-width:600px) { .aicw-input { font-size:16px !important; } }

.aicw-send-btn {
  width:42px; flex-shrink:0;
  background:var(--aicw-accent); border:none; color:#fff;
  cursor:pointer; display:flex; align-items:flex-end;
  justify-content:center; padding-bottom:10px;
  transition:background .15s, opacity .15s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.aicw-send-btn:disabled { opacity:.28; cursor:not-allowed; }
.aicw-send-btn:not(:disabled):hover { background:var(--aicw-accent-dark); }

.aicw-footer-note { font-size:.62rem; color:#ccc; text-align:center; margin:.3rem 0 0; }

/* ============================================================
   FULL-PAGE — also above everything
   ============================================================ */
.aicw-fullpage {
  position:fixed; inset:0; background:#fff;
  z-index:2147483646; /* one below max so back-btn shows */
  display:flex; flex-direction:column;
  animation:aicw-fp-in .22s ease;
}
@keyframes aicw-fp-in { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;} }

.aicw-fp-header {
  display:flex; align-items:center; gap:.8rem;
  padding:14px 20px;
  background:var(--aicw-accent); color:#fff; flex-shrink:0;
  padding-top: max(14px, calc(env(safe-area-inset-top,0px) + 14px));
}
.aicw-fp-messages {
  flex:1; overflow-y:auto; padding:1.1rem 1rem;
  max-width:700px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:.75rem;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; box-sizing:border-box;
}
.aicw-fp-messages::-webkit-scrollbar { width:4px; }
.aicw-fp-messages::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.aicw-fp-input-wrap {
  display:flex; align-items:stretch; gap:0;
  background:#fff; border:1.5px solid #e2e2e2; border-radius:14px; overflow:hidden;
  margin:.7rem 1rem;
  max-width:700px; width:calc(100% - 2rem); align-self:center; box-sizing:border-box;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.aicw-fp-input-wrap:focus-within { border-color:var(--aicw-accent); box-shadow:0 0 0 3px rgba(17,17,17,.07); }
.aicw-fp-input-wrap .aicw-input { padding:12px 14px !important; min-height:48px !important; }
.aicw-fp-input-wrap .aicw-send-btn { width:48px; padding-bottom:12px; }

@media (max-width:600px) {
  .aicw-fp-messages { padding:.85rem .75rem; }
  .aicw-fp-input-wrap { margin:.5rem .75rem; width:calc(100% - 1.5rem); }
}

.aicw-fp-handoff-btn {
  font-family:inherit; font-size:.75rem; font-weight:600;
  color:#fff; background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.3); border-radius:50px;
  padding:5px 13px; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  margin-left:auto; margin-right:6px;
  transition:background .15s; white-space:nowrap;
}
.aicw-fp-handoff-btn:hover { background:rgba(255,255,255,.25); }

/* ============================================================
   WOOCOMMERCE CART CARD
   ============================================================ */
.aicw-cart-card {
  background: #fff;
  border: 1.5px solid #e0e7ff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 260px;
  box-shadow: 0 2px 12px rgba(99,102,241,.1);
  animation: aicw-msg-in .2s ease both;
}
.aicw-cart-card-top {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 10px;
  background: #f5f3ff;
  font-size: .83rem; color: #1e293b; line-height: 1.4;
}
.aicw-cart-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.aicw-cart-card-btns {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid #e0e7ff;
}
.aicw-cart-btn {
  display: block; text-align: center;
  padding: 9px 14px; font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.aicw-cart-btn--checkout {
  background: #6366f1; color: #fff !important;
  border-bottom: 1px solid #e0e7ff;
}
.aicw-cart-btn--checkout:hover { background: #4f46e5; color: #fff !important; }
.aicw-cart-btn--cart {
  background: #fff; color: #6366f1 !important;
}
.aicw-cart-btn--cart:hover { background: #f5f3ff; }