/* FluxivoChat Widget v3.0 — hardened, self-contained styles.
   Every rule is scoped under #fluxchat-root and forced with !important so
   the host WordPress theme's global CSS cannot leak in and break the widget. */

#fluxchat-root{
  --fluxchat-accent:#FF6B3D;
  --fluxchat-accent-light:#ff9a78;
  --fluxchat-bg:#0E1018;
  --fluxchat-card:#151722;
  --fluxchat-border:rgba(255,255,255,0.06);
  --fluxchat-text:#F0F0F3;
  --fluxchat-muted:#8E90A0;
  --fluxchat-dim:#5C5E6E;
  --fluxchat-agent:#3DB8FF;
  --fluxchat-online:#34D399;
}

/* ── Reset: neutralise inherited theme styles on every descendant ── */
#fluxchat-root,
#fluxchat-root *,
#fluxchat-root *::before,
#fluxchat-root *::after{
  margin:0 !important;
  padding:0 !important;
  border:0 none !important;
  box-sizing:border-box !important;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  line-height:1.5 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-align:left !important;
  text-decoration:none !important;
  text-shadow:none !important;
  background:transparent none !important;
  box-shadow:none !important;
  list-style:none !important;
  vertical-align:baseline !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  float:none !important;
  outline:none !important;
  max-width:none !important;
}

/* ── Toggle button ── */
#fluxchat-root #fluxchat-toggle{
  position:fixed !important;
  bottom:24px !important;
  z-index:2147483646 !important;
  width:58px !important;
  height:58px !important;
  border-radius:16px !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--fluxchat-accent) !important;
  box-shadow:0 8px 30px rgba(0,0,0,0.35) !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1) !important;
}
#fluxchat-root.fluxchat-pos-right #fluxchat-toggle{right:24px !important;left:auto !important}
#fluxchat-root.fluxchat-pos-left  #fluxchat-toggle{left:24px !important;right:auto !important}
#fluxchat-root #fluxchat-toggle:hover{transform:translateY(-2px) scale(1.04) !important}
#fluxchat-root #fluxchat-toggle svg{
  width:24px !important;height:24px !important;
  fill:none !important;stroke:#fff !important;stroke-width:2 !important;
  stroke-linecap:round !important;stroke-linejoin:round !important;
}
#fluxchat-root #fluxchat-toggle .fluxchat-icon-close{display:none !important}
#fluxchat-root #fluxchat-toggle.fluxchat-open .fluxchat-icon-chat{display:none !important}
#fluxchat-root #fluxchat-toggle.fluxchat-open .fluxchat-icon-close{display:block !important}
#fluxchat-root #fluxchat-toggle::after{
  content:'1' !important;
  position:absolute !important;
  top:-5px !important;right:-5px !important;
  width:20px !important;height:20px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#fff !important;
  font-size:11px !important;font-weight:700 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border:2px solid var(--fluxchat-bg) !important;
  transition:transform .3s,opacity .3s !important;
}
#fluxchat-root #fluxchat-toggle.fluxchat-hide-badge::after,
#fluxchat-root #fluxchat-toggle.fluxchat-open::after{opacity:0 !important;transform:scale(0) !important}

/* ── Chat panel ── */
#fluxchat-root #fluxchat-panel{
  position:fixed !important;
  bottom:96px !important;
  z-index:2147483647 !important;
  width:380px !important;
  height:520px !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100vh - 120px) !important;
  background:var(--fluxchat-bg) !important;
  border:1px solid var(--fluxchat-border) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.5) !important;
  display:none !important;
  flex-direction:column !important;
  opacity:0 !important;
  transform:translateY(12px) scale(.97) !important;
  pointer-events:none !important;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1) !important;
}
#fluxchat-root.fluxchat-pos-right #fluxchat-panel{right:24px !important;left:auto !important}
#fluxchat-root.fluxchat-pos-left  #fluxchat-panel{left:24px !important;right:auto !important}
#fluxchat-root #fluxchat-panel.fluxchat-open{
  display:flex !important;opacity:1 !important;
  transform:translateY(0) scale(1) !important;pointer-events:auto !important;
}

/* ── Header ── */
#fluxchat-root .fluxchat-header{
  padding:16px 18px !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  border-bottom:1px solid var(--fluxchat-border) !important;
  background:var(--fluxchat-card) !important;
  flex-shrink:0 !important;
}
#fluxchat-root .fluxchat-avatar{
  width:40px !important;height:40px !important;
  border-radius:12px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-weight:700 !important;font-size:17px !important;color:#fff !important;
  flex-shrink:0 !important;
  background:linear-gradient(135deg,var(--fluxchat-accent),var(--fluxchat-accent-light)) !important;
}
#fluxchat-root .fluxchat-meta{flex:1 1 auto !important;min-width:0 !important}
#fluxchat-root .fluxchat-meta h4{font-size:15px !important;font-weight:600 !important;color:var(--fluxchat-text) !important}
#fluxchat-root .fluxchat-status{
  font-size:12px !important;color:var(--fluxchat-online) !important;
  display:flex !important;align-items:center !important;gap:5px !important;margin-top:1px !important;
}
#fluxchat-root .fluxchat-status::before{content:'' !important;width:7px !important;height:7px !important;background:var(--fluxchat-online) !important;border-radius:50% !important}
#fluxchat-root #fluxchat-close{
  cursor:pointer !important;color:var(--fluxchat-dim) !important;
  width:32px !important;height:32px !important;border-radius:8px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:color .2s,background .2s !important;flex-shrink:0 !important;background:transparent !important;
}
#fluxchat-root #fluxchat-close:hover{color:var(--fluxchat-text) !important;background:rgba(255,255,255,0.05) !important}
#fluxchat-root #fluxchat-close svg{width:18px !important;height:18px !important;stroke:currentColor !important;fill:none !important;stroke-width:2.5 !important;stroke-linecap:round !important}

/* ── Messages area ── */
#fluxchat-root #fluxchat-messages{
  flex:1 1 auto !important;
  overflow-y:auto !important;overflow-x:hidden !important;
  padding:16px !important;
  display:flex !important;flex-direction:column !important;gap:8px !important;
}
#fluxchat-root #fluxchat-messages::-webkit-scrollbar{width:4px !important}
#fluxchat-root #fluxchat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08) !important;border-radius:4px !important}

/* ── Message bubbles ── */
#fluxchat-root .fluxchat-msg{
  max-width:78% !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  font-size:13.5px !important;line-height:1.55 !important;
  word-wrap:break-word !important;overflow-wrap:break-word !important;white-space:normal !important;
  animation:fluxchatIn .3s ease both !important;
}
#fluxchat-root .fluxchat-msg--user{
  align-self:flex-end !important;
  background:var(--fluxchat-accent) !important;color:#fff !important;
  border-bottom-right-radius:5px !important;margin-left:20% !important;
}
#fluxchat-root .fluxchat-msg--bot{
  align-self:flex-start !important;
  background:var(--fluxchat-card) !important;border:1px solid var(--fluxchat-border) !important;
  color:var(--fluxchat-text) !important;border-bottom-left-radius:5px !important;margin-right:20% !important;
}
#fluxchat-root .fluxchat-msg--agent{
  align-self:flex-start !important;
  background:rgba(61,184,255,0.08) !important;border:1px solid rgba(61,184,255,0.12) !important;
  color:var(--fluxchat-text) !important;border-bottom-left-radius:5px !important;margin-right:20% !important;
}
#fluxchat-root .fluxchat-msg--agent::before{
  content:'Support' !important;display:block !important;
  font-size:10px !important;font-weight:700 !important;color:var(--fluxchat-agent) !important;
  text-transform:uppercase !important;letter-spacing:.5px !important;margin-bottom:3px !important;
}

/* ── Typing indicator ── */
#fluxchat-root .fluxchat-typing{
  align-self:flex-start !important;
  padding:13px 18px !important;
  background:var(--fluxchat-card) !important;border:1px solid var(--fluxchat-border) !important;
  border-radius:16px !important;border-bottom-left-radius:5px !important;
  display:none !important;gap:5px !important;margin-right:20% !important;
}
#fluxchat-root .fluxchat-typing.fluxchat-on{display:flex !important}
#fluxchat-root .fluxchat-typing i{width:7px !important;height:7px !important;border-radius:50% !important;background:var(--fluxchat-dim) !important;display:block !important;animation:fluxchatDot 1.4s ease-in-out infinite !important}
#fluxchat-root .fluxchat-typing i:nth-child(2){animation-delay:.2s !important}
#fluxchat-root .fluxchat-typing i:nth-child(3){animation-delay:.4s !important}

/* ── Email capture ── */
#fluxchat-root .fluxchat-email{
  align-self:flex-start !important;
  background:var(--fluxchat-card) !important;border:1px solid var(--fluxchat-border) !important;
  border-radius:14px !important;padding:14px !important;width:75% !important;
  animation:fluxchatIn .3s ease both !important;
}
#fluxchat-root .fluxchat-email p{font-size:12px !important;color:var(--fluxchat-muted) !important;margin:0 0 8px 0 !important;line-height:1.4 !important}
#fluxchat-root #fluxchat-email-input{
  display:block !important;width:100% !important;padding:9px 12px !important;
  border-radius:8px !important;border:1px solid var(--fluxchat-border) !important;
  background:var(--fluxchat-bg) !important;color:var(--fluxchat-text) !important;
  font-size:13px !important;margin:0 0 8px 0 !important;
  -webkit-appearance:none !important;appearance:none !important;
}
#fluxchat-root #fluxchat-email-input:focus{border-color:var(--fluxchat-accent) !important}
#fluxchat-root #fluxchat-email-btn{
  display:block !important;width:100% !important;padding:9px !important;
  border-radius:8px !important;background:var(--fluxchat-accent) !important;color:#fff !important;
  font-size:13px !important;font-weight:600 !important;cursor:pointer !important;
  -webkit-appearance:none !important;appearance:none !important;
}

/* ── Input bar ── */
#fluxchat-root .fluxchat-inputbar{
  padding:12px 14px !important;
  border-top:1px solid var(--fluxchat-border) !important;
  display:flex !important;align-items:center !important;gap:10px !important;
  background:var(--fluxchat-bg) !important;flex-shrink:0 !important;
}
#fluxchat-root #fluxchat-input{
  flex:1 1 auto !important;min-width:0 !important;
  padding:10px 14px !important;border-radius:12px !important;
  border:1px solid var(--fluxchat-border) !important;
  background:var(--fluxchat-card) !important;color:var(--fluxchat-text) !important;
  font-size:14px !important;
  -webkit-appearance:none !important;appearance:none !important;
  transition:border-color .2s !important;
}
#fluxchat-root #fluxchat-input:focus{border-color:var(--fluxchat-accent) !important}
#fluxchat-root #fluxchat-input::placeholder{color:var(--fluxchat-dim) !important;opacity:1 !important}
#fluxchat-root #fluxchat-send{
  width:38px !important;height:38px !important;min-width:38px !important;
  border-radius:10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  cursor:pointer !important;flex-shrink:0 !important;
  background:var(--fluxchat-accent) !important;
  -webkit-appearance:none !important;appearance:none !important;
  transition:transform .2s !important;
}
#fluxchat-root #fluxchat-send:hover{transform:scale(1.06) !important}
#fluxchat-root #fluxchat-send svg{width:16px !important;height:16px !important;fill:none !important;stroke:#fff !important;stroke-width:2.5 !important;stroke-linecap:round !important;stroke-linejoin:round !important}

/* ── Powered by ── */
#fluxchat-root .fluxchat-powered{
  text-align:center !important;padding:6px !important;
  font-size:10px !important;color:var(--fluxchat-dim) !important;
  background:rgba(0,0,0,0.2) !important;border-top:1px solid rgba(255,255,255,0.02) !important;flex-shrink:0 !important;
}
#fluxchat-root .fluxchat-powered a{color:inherit !important;text-decoration:none !important}
#fluxchat-root .fluxchat-powered a:hover{color:var(--fluxchat-muted) !important}

/* ── Animations ── */
@keyframes fluxchatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fluxchatDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.85)}}

/* ── Mobile ── */
@media (max-width:480px){
  #fluxchat-root #fluxchat-panel{
    width:calc(100vw - 20px) !important;
    height:calc(100vh - 110px) !important;
    bottom:84px !important;
    right:10px !important;left:10px !important;
    border-radius:16px !important;
  }
  #fluxchat-root #fluxchat-toggle{bottom:18px !important;width:52px !important;height:52px !important}
  #fluxchat-root.fluxchat-pos-right #fluxchat-toggle{right:18px !important}
  #fluxchat-root.fluxchat-pos-left  #fluxchat-toggle{left:18px !important}
}