/*
 * WooCommerce AI Chat Widget — chat.css v5.0.0
 * All selectors scoped to #wac-root — zero theme interference
 * Position set by JS via inline style
 * No external fonts, no external icons, no emoji HTTP requests
 */

#wac-root {
  position: fixed;
  z-index: 2147483647;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a2e;
  direction: rtl;
  unicode-bidi: embed;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Scoped vars */
  --wac-p: #6c63ff;
  --wac-pd: #5a52d5;
  --wac-r-lg: 20px;
  --wac-r-md: 14px;
  --wac-r-sm: 10px;
  --wac-sh: 0 8px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  --wac-bg: #f0f0f8;
  --wac-bd: #e8e8f0;
  --wac-w: #fff;
  --wac-tx: #1a1a2e;
  --wac-mu: #6b7280;
  --wac-ease: .22s ease;
}
#wac-root.wac-hide { display: none !important; }
#wac-root .wac-sr { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
#wac-root .wac-hidden { display: none !important; }

/* ─── Bubble ───────────────────────────────────────────────────────────── */

#wac-root #wac-bubble {
  -webkit-appearance:none; appearance:none;
  margin:0; padding:0; border:none; outline:none;
  display:-webkit-box; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--wac-p); cursor:pointer; position:relative;
  -webkit-box-shadow:0 4px 20px rgba(108,99,255,.4);
  box-shadow:0 4px 20px rgba(108,99,255,.4);
  transition:transform var(--wac-ease),box-shadow var(--wac-ease);
  box-sizing:border-box;
}
#wac-root #wac-bubble:hover, #wac-root #wac-bubble:focus-visible {
  transform:scale(1.08);
  box-shadow:0 6px 28px rgba(108,99,255,.55);
  outline:2px solid var(--wac-p); outline-offset:3px;
}
#wac-root #wac-bubble:active { transform:scale(.96); }
#wac-root #wac-bubble svg { width:26px; height:26px; color:var(--wac-w); display:block; pointer-events:none; }

/* ─── Feature 7: Speech bubble popup ──────────────────────────────────── */

#wac-root #wac-popup {
  position: absolute;
  /* positioned by JS (above bubble, aligned to side) */
  background: var(--wac-w);
  border-radius: var(--wac-r-md);
  box-shadow: var(--wac-sh);
  padding: 14px 16px 12px;
  width: 240px;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
  /* speech bubble tail — points DOWN toward bubble */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
  /* animation */
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity var(--wac-ease), transform var(--wac-ease);
  pointer-events: none;
  visibility: hidden;
}
#wac-root #wac-popup::after {
  content: '';
  position: absolute;
  bottom: -9px;
  /* JS sets left/right depending on corner */
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--wac-w);
}
#wac-root #wac-popup.wac-popup-right::after { right: 22px; left: auto; }
#wac-root #wac-popup.wac-popup-left::after  { left: 22px; right: auto; }

#wac-root #wac-popup[aria-hidden="false"] {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto; visibility: visible;
}
#wac-root #wac-popup-close {
  -webkit-appearance:none; appearance:none;
  position:absolute; top:8px; left:8px;
  background:none; border:none; outline:none;
  padding:2px; cursor:pointer; color:var(--wac-mu);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background var(--wac-ease);
  box-sizing:border-box;
}
#wac-root #wac-popup-close svg { width:14px; height:14px; display:block; pointer-events:none; }
#wac-root #wac-popup-close:hover { background:var(--wac-bg); }

#wac-root #wac-popup-text {
  margin: 0 0 0 4px; padding:0;
  font-size:13.5px; line-height:1.55; color:var(--wac-tx);
  direction:rtl; text-align:right;
  /* preserve line breaks */
  white-space: pre-line;
}
#wac-root #wac-popup-cta {
  -webkit-appearance:none; appearance:none;
  margin:10px 0 0; padding:7px 16px;
  background:var(--wac-p); color:var(--wac-w);
  border:none; outline:none; border-radius:20px;
  font-size:13px; font-family:inherit; cursor:pointer;
  transition:background var(--wac-ease);
  display:block; width:100%; box-sizing:border-box;
  line-height:1.4;
}
#wac-root #wac-popup-cta:hover { background:var(--wac-pd); }

/* ─── Chat window ──────────────────────────────────────────────────────── */

#wac-root #wac-window {
  position:absolute;
  /* top/bottom/left/right and transform-origin set by JS */
  width:360px;
  background:var(--wac-w);
  border-radius:var(--wac-r-lg);
  box-shadow:var(--wac-sh);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:opacity var(--wac-ease),transform var(--wac-ease);
  box-sizing:border-box; contain:layout;
}
#wac-root #wac-window[aria-hidden="true"] {
  opacity:0; transform:scale(.93) translateY(10px);
  pointer-events:none; visibility:hidden;
}
#wac-root #wac-window[aria-hidden="false"] {
  opacity:1; transform:scale(1) translateY(0);
  pointer-events:auto; visibility:visible;
}

/* ─── Header ──────────────────────────────────────────────────────────── */

#wac-root #wac-header {
  background:var(--wac-p); padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; margin:0; border:none;
}
#wac-root #wac-header-inner { display:flex; align-items:center; gap:10px; margin:0; padding:0; }
#wac-root #wac-avatar {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
#wac-root #wac-avatar img { width:38px; height:38px; object-fit:cover; border-radius:50%; display:block; }
/* FIX 4: hide broken avatar image — show only if loaded */
#wac-root #wac-avatar img.wac-img-error { display:none; }
#wac-root #wac-avatar-icon { display:flex; align-items:center; justify-content:center; }
#wac-root #wac-avatar-icon svg { width:22px; height:22px; color:rgba(255,255,255,.9); }
#wac-root #wac-bot-name { color:var(--wac-w); font-size:15px; font-weight:600; margin:0; padding:0; line-height:1.3; }
#wac-root #wac-status {
  color:rgba(255,255,255,.85); font-size:11px; margin:2px 0 0; padding:0;
  display:flex; align-items:center; gap:4px;
}
#wac-root #wac-status::before {
  content:''; display:inline-block; width:6px; height:6px;
  background:#4ade80; border-radius:50%;
  animation:wac-blink 2.5s ease-in-out infinite;
}
#wac-root #wac-status.wac-offline::before { background:#f87171; animation:none; }
@keyframes wac-blink{0%,100%{opacity:1}50%{opacity:.35}}

#wac-root #wac-close {
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,.15); border:none; outline:none;
  color:var(--wac-w); width:28px; height:28px; border-radius:50%;
  cursor:pointer; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--wac-ease); box-sizing:border-box;
}
#wac-root #wac-close svg { width:14px; height:14px; color:var(--wac-w); display:block; pointer-events:none; }
#wac-root #wac-close:hover { background:rgba(255,255,255,.3); }

/* ─── Messages ────────────────────────────────────────────────────────── */

#wac-root #wac-messages {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:14px; display:flex; flex-direction:column;
  gap:8px; min-height:200px; max-height:310px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  margin:0; border:none; list-style:none;
}
#wac-root #wac-messages::-webkit-scrollbar{width:4px}
#wac-root #wac-messages::-webkit-scrollbar-track{background:transparent}
#wac-root #wac-messages::-webkit-scrollbar-thumb{background:var(--wac-bd);border-radius:4px}

#wac-root .wac-msg {
  max-width:82%; padding:9px 13px; border-radius:var(--wac-r-md);
  font-size:13.5px; line-height:1.6;
  animation:wac-in .18s ease-out;
  word-wrap:break-word; overflow-wrap:break-word;
  margin:0; border:none; direction:rtl; text-align:right;
}
@keyframes wac-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

#wac-root .wac-bot {
  background:var(--wac-bg); color:var(--wac-tx);
  border-bottom-right-radius:4px; align-self:flex-start;
}
#wac-root .wac-user {
  background:var(--wac-p); color:var(--wac-w);
  border-bottom-left-radius:4px; align-self:flex-end;
}
#wac-root .wac-time { display:block; font-size:10px; margin-top:3px; opacity:.5; line-height:1; direction:ltr; text-align:left; }

/* Quick reply chips */
#wac-root #wac-quick-replies {
  display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 8px;
  align-items:flex-start; align-self:flex-start; max-width:92%;
}
#wac-root .wac-qr-btn {
  -webkit-appearance:none; appearance:none;
  background:var(--wac-w); border:1.5px solid var(--wac-p); color:var(--wac-p);
  border-radius:20px; padding:5px 12px; font-size:12.5px; font-family:inherit;
  cursor:pointer; line-height:1.4; white-space:nowrap;
  transition:background var(--wac-ease),color var(--wac-ease);
  box-sizing:border-box; margin:0; outline:none;
}
#wac-root .wac-qr-btn:hover, #wac-root .wac-qr-btn:focus-visible {
  background:var(--wac-p); color:var(--wac-w);
}

/* Escalate button */
#wac-root .wac-escalate-btn {
  -webkit-appearance:none; appearance:none;
  display:inline-block; margin:7px 0 0; padding:5px 13px;
  background:var(--wac-p); color:var(--wac-w);
  border:none; outline:none; border-radius:20px;
  font-size:12px; font-family:inherit; cursor:pointer;
  transition:background var(--wac-ease); box-sizing:border-box; line-height:1.4;
}
#wac-root .wac-escalate-btn:hover { background:var(--wac-pd); }

/* Typing */
#wac-root .wac-typing {
  display:flex; align-items:center; gap:4px; padding:10px 14px;
  background:var(--wac-bg); border-radius:var(--wac-r-md); border-bottom-right-radius:4px;
  align-self:flex-start; width:fit-content; margin:0;
}
#wac-root .wac-typing span { display:block; width:7px; height:7px; background:#9ca3af; border-radius:50%; animation:wac-bounce 1.2s ease-in-out infinite; }
#wac-root .wac-typing span:nth-child(2){animation-delay:.18s}
#wac-root .wac-typing span:nth-child(3){animation-delay:.36s}
@keyframes wac-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ─── Social panel ────────────────────────────────────────────────────── */

#wac-root #wac-social-panel {
  padding:18px; display:none; flex-direction:column; gap:10px;
  background:#fafafa; border-top:1px solid var(--wac-bd);
  max-height:360px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:wac-in .18s ease-out;
}
#wac-root #wac-social-panel.wac-panel-open { display:flex; }
#wac-root #wac-social-title { margin:0; padding:0; font-size:12px; color:var(--wac-mu); font-weight:500; }
#wac-root #wac-social-links { display:flex; flex-direction:column; gap:7px; margin:0; padding:0; }

#wac-root .wac-sl {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:var(--wac-r-sm);
  text-decoration:none; font-size:13px; font-weight:500; font-family:inherit;
  color:var(--wac-w) !important; /* ensure text stays white even if theme overrides <a> */
  transition:filter var(--wac-ease),transform var(--wac-ease);
  box-sizing:border-box; border:none; outline:none; cursor:pointer; line-height:1.4;
}
#wac-root .wac-sl:hover, #wac-root .wac-sl:focus-visible {
  filter:brightness(1.08); transform:translateX(3px);
  outline:2px solid rgba(255,255,255,.6); outline-offset:1px;
}
#wac-root .wac-sl:visited { color:var(--wac-w) !important; }

/* Social icon — uploaded image or initials fallback */
#wac-root .wac-sl-icon {
  width:24px; height:24px; border-radius:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(255,255,255,.22);
  font-size:11px; font-weight:700; color:var(--wac-w);
}
#wac-root .wac-sl-icon img { width:24px; height:24px; object-fit:contain; display:block; border-radius:3px; }
/* FIX 4: hide broken social icon image gracefully */
#wac-root .wac-sl-icon img.wac-img-error { display:none; }

/* Feature 6: Continue chat button inside social panel */
#wac-root .wac-continue-chat {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  margin-top:4px; border-radius:var(--wac-r-sm);
  background:var(--wac-bg); border:1.5px solid var(--wac-bd);
  font-size:12px; font-family:inherit; cursor:pointer; color:var(--wac-tx);
  transition:background var(--wac-ease),border-color var(--wac-ease);
  box-sizing:border-box; text-decoration:none; line-height:1.4;
}
#wac-root .wac-continue-chat:hover { background:#e8e8f4; border-color:var(--wac-p); color:var(--wac-tx); }
#wac-root .wac-continue-chat-label { font-size:11px; color:var(--wac-mu); margin:0; padding:0; }

#wac-root #wac-back {
  -webkit-appearance:none; appearance:none;
  background:none; border:1px solid var(--wac-bd); border-radius:var(--wac-r-sm);
  padding:7px 13px; font-size:12px; font-family:inherit; cursor:pointer;
  color:var(--wac-mu); display:flex; align-items:center;
  transition:background var(--wac-ease),color var(--wac-ease);
  align-self:flex-start; margin:2px 0 0; outline:none; line-height:1.4; box-sizing:border-box;
}
#wac-root #wac-back:hover { background:var(--wac-bg); color:var(--wac-tx); }

/* ─── Input row ───────────────────────────────────────────────────────── */

#wac-root #wac-input-row {
  display:flex; align-items:center;
  padding:10px 12px; border-top:1px solid var(--wac-bd);
  gap:8px; background:var(--wac-w); flex-shrink:0; box-sizing:border-box;
}
#wac-root #wac-input {
  -webkit-appearance:none; appearance:none;
  flex:1; border:1px solid var(--wac-bd); border-radius:22px !important;
  padding:8px 15px; font-size:13.5px; font-family:inherit;
  color:var(--wac-tx); background:#f8f8fb; outline:none;
  box-shadow:none; transition:border-color var(--wac-ease),background var(--wac-ease);
  min-width:0; box-sizing:border-box; line-height:1.4; margin:0; height:auto !important;
  direction:rtl; text-align:right;
}
#wac-root #wac-input:focus { border-color:var(--wac-p); background:var(--wac-w); box-shadow:0 0 0 3px rgba(108,99,255,.12); }
#wac-root #wac-input::placeholder { color:#b0b0c0; }

#wac-root #wac-send {
  -webkit-appearance:none; appearance:none;
  width:36px; height:36px; padding:0; margin:0;
  background:var(--wac-p); border:none; outline:none; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--wac-ease),transform var(--wac-ease); box-sizing:border-box;
}
#wac-root #wac-send:hover { background:var(--wac-pd); transform:scale(1.06); }
#wac-root #wac-send:active { transform:scale(.94); }
#wac-root #wac-send:disabled { opacity:.5; cursor:default; transform:none; }
#wac-root #wac-send svg { width:15px; height:15px; color:var(--wac-w); display:block; pointer-events:none; }

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media screen and (max-width:480px) {
  #wac-root #wac-window { width:calc(100vw - 32px); max-height:80vh; }
  #wac-root #wac-messages { max-height:calc(80vh - 170px); }
  #wac-root #wac-popup { width:calc(100vw - 48px); }
}

@media (prefers-reduced-motion:reduce) {
  #wac-root #wac-bubble, #wac-root #wac-window, #wac-root .wac-msg,
  #wac-root .wac-typing span, #wac-root #wac-status::before, #wac-root #wac-popup {
    animation:none !important; transition:none !important;
  }
  #wac-root #wac-window[aria-hidden="true"] { display:none; }
}