/* ==========================================================
   NeuralPress — Smart Support Chat Widget
   Author: Ali Feizbakhsh Haghighi | Tarh Rayan
   © 2025 — All rights reserved
   ========================================================== */

/* ── Widget wrapper — always fixed to viewport ── */
#np-chat {
  --npc: #6366f1;           /* overridden by inline style */
  --npc-offset-x: 24px;     /* overridden by inline style */
  --npc-offset-y: 24px;     /* overridden by inline style */
  --npc-panel-gap: 10px;    /* overridden by inline style */
  --npc-bg: #13131f;
  --npc-text: #e8e8f0;
  --npc-bot-bubble: #1d1d30;
  --npc-bot-bubble-text: #d4d4ec;
  --npc-border: rgba(255,255,255,.08);
  --npc-header-bg: var(--npc);
  --npc-radius: 18px;
  position: fixed !important;
  z-index: 999999 !important;
  font-family: 'Vazirmatn', 'Plus Jakarta Sans', system-ui, sans-serif;
}
#np-chat * { box-sizing: border-box; margin: 0; padding: 0; }

/* Position variants via data-pos — each of the 4 rules sets ALL FOUR
   edges explicitly (not just the two it "needs"), and at equal
   specificity/!important to every other rule here. A real, confirmed
   bug: the previous version relied on a bare #np-chat default plus a
   separate `html[dir="rtl"] #np-chat` override for right/left — but that
   RTL selector has HIGHER specificity than a plain ID selector (it adds
   an attribute selector on top), so on any RTL site (Persian included)
   it silently beat the default right-side placement with no matching
   override to win it back — "bottom-right"/"top-right" always rendered
   on the left no matter what was selected, since only the left-side
   variants had their own explicit !important rule to begin with.
   Explicit, equally-specific rules for all four corners removes any
   cascade ambiguity for LTR or RTL alike. */
#np-chat[data-pos="bottom-right"] {
  bottom: var(--npc-offset-y) !important; top: auto !important;
  right:  var(--npc-offset-x) !important; left: auto !important;
}
#np-chat[data-pos="bottom-left"] {
  bottom: var(--npc-offset-y) !important; top: auto !important;
  left:   var(--npc-offset-x) !important; right: auto !important;
}
#np-chat[data-pos="top-right"] {
  top:    var(--npc-offset-y) !important; bottom: auto !important;
  right:  var(--npc-offset-x) !important; left: auto !important;
}
#np-chat[data-pos="top-left"] {
  top:    var(--npc-offset-y) !important; bottom: auto !important;
  left:   var(--npc-offset-x) !important; right: auto !important;
}

/* ── Trigger button ── */
#np-chat-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--npc);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
#np-chat-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.42); }
#np-chat-btn:active { transform: scale(.95); }
.np-btn-icon { display: flex; align-items: center; justify-content: center; }
.np-btn-icon svg, .np-btn-icon img { display: block; }

/* ── Attention animations (opt-in, admin-selected) ──
   Applied via the button's own data-anim attribute — "none" (the
   default) matches the previous, unanimated behavior exactly. Each
   pauses on hover so a visitor actively interacting with the button
   isn't fighting a moving target, and pauses entirely once the panel is
   open (see the [aria-expanded] rule below) since a bouncing/glowing
   button next to an already-open conversation reads as broken, not
   attention-grabbing. */
#np-chat-btn[data-anim="heartbeat"] { animation: npHeartbeat 1.8s ease-in-out infinite; }
@keyframes npHeartbeat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.12); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.08); }
  60%      { transform: scale(1); }
}

#np-chat-btn[data-anim="bounce"] { animation: npBounce 2.2s ease-in-out infinite; }
@keyframes npBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

#np-chat-btn[data-anim="shake"] { animation: npShake 3.2s ease-in-out infinite; }
@keyframes npShake {
  0%, 88%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-9deg); }
  92% { transform: rotate(8deg); }
  94% { transform: rotate(-6deg); }
  96% { transform: rotate(4deg); }
  98% { transform: rotate(0deg); }
}

#np-chat-btn[data-anim="glow"] { animation: npGlow 2s ease-in-out infinite; }
@keyframes npGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.32), 0 0 0 0 color-mix(in srgb, var(--npc) 55%, transparent); }
  50%      { box-shadow: 0 4px 18px rgba(0,0,0,.32), 0 0 0 10px color-mix(in srgb, var(--npc) 0%, transparent); }
}

/* Pause any animation on hover (don't fight the visitor's cursor) or
   once the panel is open (a moving button next to an open conversation
   looks broken, not attention-grabbing). */
#np-chat-btn:hover,
#np-chat[data-open="1"] #np-chat-btn {
  animation: none !important;
}

/* Unread badge */
#np-unread {
  position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; pointer-events: none;
  animation: npPop .3s ease;
}
@keyframes npPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Chat panel ──
   position:fixed directly against the viewport — NOT position:absolute
   relative to #np-chat. A real, confirmed case showed the panel
   drifting away from its own button on desktop, floating in the middle
   of the page instead of docking against it — absolute positioning only
   works correctly if #np-chat's own box is EXACTLY the button's size
   with nothing else affecting it, which is fragile: any interference
   from the site's own theme CSS (or even just this stylesheet loading
   in an unexpected order) can throw that off. Positioning independently
   against the viewport, using the exact same offset variables the
   button itself uses, removes that dependency entirely — the panel no
   longer needs its parent to behave in any particular way to end up in
   the right place. */
#np-chat-panel {
  display: none;
  position: fixed !important;
  width: 336px; max-width: 94vw;
  background: var(--npc-bg);
  color: var(--npc-text);
  border: 1px solid var(--npc-border);
  border-radius: var(--npc-radius);
  overflow: hidden;
  box-shadow: 0 18px 52px rgba(0,0,0,.56);
  flex-direction: column;
  z-index: 999999 !important;
}
#np-chat[data-pos="bottom-right"] #np-chat-panel {
  bottom: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; top: auto !important;
  right:  var(--npc-offset-x) !important; left: auto !important;
}
#np-chat[data-pos="bottom-left"]  #np-chat-panel {
  bottom: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; top: auto !important;
  left:   var(--npc-offset-x) !important; right: auto !important;
}
#np-chat[data-pos="top-right"]    #np-chat-panel {
  top: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; bottom: auto !important;
  right:  var(--npc-offset-x) !important; left: auto !important;
}
#np-chat[data-pos="top-left"]     #np-chat-panel {
  top: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; bottom: auto !important;
  left:   var(--npc-offset-x) !important; right: auto !important;
}

/* ── Fixed attribution strip (top of panel) ──
   Intentionally minimal and muted — present, but not competing with the
   widget's own branding above it. Not meant to be styled/hidden via any
   admin-facing option; see render_attribution() in class-copilot-ui.php. */
#np-chat-attribution {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  padding: 5px 10px;
  color: rgba(148,148,168,.85);
  background: rgba(0,0,0,.12);
  text-decoration: none;
  border-bottom: 1px solid var(--npc-border);
  flex-shrink: 0;
}
#np-chat-attribution:hover { color: rgba(180,180,210,1); text-decoration: underline; }

/* ── Header ── */
#np-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px;
  background: var(--npc-header-bg);
  flex-shrink: 0;
}
#np-chat-info { display: flex; align-items: center; gap: 10px; }
#np-chat-logo {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(128,128,128,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
/* Header text/icon colors follow --npc-header-text (white on a colored/
   gradient header, dark on the "minimal" preset's white header) — the
   previous hardcoded white broke completely for any light-header theme.
   The plain color is a same-browser-support fallback; color-mix() (all
   major browsers 2023+) overrides it with a properly muted variant where
   supported, so it still looks right in both light- and dark-header
   themes without needing a second color picked by hand. */
#np-chat-name  { font-size: 13px; font-weight: 700; color: var(--npc-header-text); }
#np-chat-status {
  font-size: 11px;
  color: var(--npc-header-text);
  opacity: .75;
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.np-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  animation: npPulse 2s ease-in-out infinite;
}
@keyframes npPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
#np-chat-close {
  background: none; border: none; color: var(--npc-header-text);
  opacity: .7;
  font-size: 16px; cursor: pointer; padding: 3px 7px;
  border-radius: 4px; line-height: 1;
}
#np-chat-close:hover { background: rgba(128,128,128,.15); opacity: 1; }

/* ── Messages ── */
#np-chat-msgs {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 220px; max-height: 320px;
  background: var(--npc-bg);
  filter: brightness(0.96);
}
#np-chat-msgs::-webkit-scrollbar { width: 3px; }
#np-chat-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.np-msg { display: flex; }
.np-msg-user { justify-content: flex-end; }
.np-msg-bot  { justify-content: flex-start; }
.np-bubble {
  max-width: 80%; padding: 10px 13px; border-radius: 15px;
  font-size: 13px; line-height: 1.65; word-break: break-word;
}
.np-msg-user .np-bubble {
  background: var(--npc); color: #fff;
  border-bottom-right-radius: 4px;
}
.np-msg-bot  .np-bubble {
  background: var(--npc-bot-bubble); color: var(--npc-bot-bubble-text);
  border: 1px solid var(--npc-border);
  border-bottom-left-radius: 4px;
}
.np-msg-err .np-bubble { background: rgba(239,68,68,.15); color: #fca5a5; }

/* RTL message swap */
html[dir="rtl"] .np-msg-user { justify-content: flex-start; }
html[dir="rtl"] .np-msg-user .np-bubble { border-radius: 15px; border-bottom-left-radius: 4px; }
html[dir="rtl"] .np-msg-bot  { justify-content: flex-end; }
html[dir="rtl"] .np-msg-bot  .np-bubble { border-radius: 15px; border-bottom-right-radius: 4px; }

/* ── Typing dots ── */
.np-typing { display: flex !important; gap: 5px; align-items: center; padding: 11px 14px !important; }
.np-typing span {
  width: 7px; height: 7px; background: rgba(255,255,255,.35);
  border-radius: 50%; animation: npBounce 1.1s ease-in-out infinite;
}
.np-typing span:nth-child(2) { animation-delay: .17s; }
.np-typing span:nth-child(3) { animation-delay: .34s; }
@keyframes npBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ── Sources (offline mode) ── */
#np-chat-srcs {
  padding: 8px 12px;
  background: var(--npc-bg);
  filter: brightness(0.96);
  border-top: 1px solid var(--npc-border);
  flex-shrink: 0;
}
.np-src-lbl { font-size: 11px; color: rgba(255,255,255,.35); margin-bottom: 4px; }
.np-src-a {
  display: block; font-size: 12px; color: #818cf8;
  text-decoration: none; padding: 3px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.np-src-a:last-child { border-bottom: none; }
.np-src-a:hover { color: #a5b4fc; text-decoration: underline; }

/* ── Input bar ── */
#np-chat-bar {
  display: flex; gap: 7px; padding: 10px 11px;
  background: var(--npc-bg);
  border-top: 1px solid var(--npc-border);
  flex-shrink: 0;
}
#np-chat-in {
  flex: 1; padding: 9px 12px;
  background: var(--npc-bg);
  filter: brightness(0.96);
  border: 1px solid var(--npc-border);
  border-radius: 10px; color: var(--npc-text);
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
#np-chat-in::placeholder { color: rgba(255,255,255,.28); }
#np-chat-in:focus { border-color: var(--npc); }
#np-chat-in:disabled { opacity: .45; }
#np-chat-send {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  background: var(--npc); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: filter .2s, transform .15s;
}
#np-chat-send:hover  { filter: brightness(1.15); }
#np-chat-send:active { transform: scale(.92); }

/* ── Mobile Responsive ────────────────────────────────── */
@media (max-width: 600px) {

  /* Button stays in its chosen corner, using the SAME configured offset
     as desktop — a real report confirmed the previous min(...,16px) cap
     here was actively overriding any offset above 16px, which reads as
     "my spacing setting does nothing on mobile" even though it was being
     applied and then immediately clamped back down. The admin-side save
     handler already clamps offset_x/offset_y to a sane 0-200px range, so
     there's no need for a second, silent mobile-only ceiling on top of
     that — trust the value that was actually configured. */
  #np-chat[data-pos="bottom-right"] {
    bottom: var(--npc-offset-y) !important; top: auto !important;
    right:  var(--npc-offset-x) !important; left: auto !important;
  }
  #np-chat[data-pos="bottom-left"] {
    bottom: var(--npc-offset-y) !important; top: auto !important;
    left:   var(--npc-offset-x) !important; right: auto !important;
  }
  #np-chat[data-pos="top-right"] {
    top:    var(--npc-offset-y) !important; bottom: auto !important;
    right:  var(--npc-offset-x) !important; left: auto !important;
  }
  #np-chat[data-pos="top-left"] {
    top:    var(--npc-offset-y) !important; bottom: auto !important;
    left:   var(--npc-offset-x) !important; right: auto !important;
  }

  /* Panel: full-width strip, positioned above a bottom-corner button or
     below a top-corner one — a real gap: previously the panel was ALWAYS
     placed "above the button" regardless of which corner was actually
     selected, so a top-positioned widget's panel would render off the
     top of the screen on mobile. Horizontal insets are the same 10px
     either way since the panel is always full-width on a small screen;
     only which vertical edge it hangs from changes. */
  #np-chat-panel {
    position:   fixed       !important;
    right:      10px        !important;
    left:       10px        !important;
    width:      auto        !important;
    max-width:  none        !important;
    max-height: calc(100dvh - 120px) !important; /* don't overflow viewport */
    border-radius: 16px     !important;
    overflow:   hidden      !important;
  }
  #np-chat[data-pos="bottom-right"] #np-chat-panel,
  #np-chat[data-pos="bottom-left"]  #np-chat-panel {
    /* Clearance now scales with whatever offset was actually configured
       (button height 54px + a small gap) instead of a fixed 84px that
       only worked for the old ~16-24px default — a large configured
       offset would otherwise let the panel overlap the button it's
       meant to sit above. */
    bottom: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; top: auto !important;
  }
  #np-chat[data-pos="top-right"] #np-chat-panel,
  #np-chat[data-pos="top-left"]  #np-chat-panel {
    top: calc(var(--npc-offset-y) + 54px + var(--npc-panel-gap)) !important; bottom: auto !important;
  }

  /* Messages: shrink to give room to header + input bar */
  #np-chat-msgs {
    min-height: 120px                    !important;
    max-height: calc(100dvh - 230px)     !important;
    overflow-y: auto                     !important;
  }

  /* Bubbles: use more width */
  .np-bubble { max-width: 88%; }

  /* Input: 16px prevents iOS Safari auto-zoom on focus */
  #np-chat-in {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* Slightly larger send button for thumbs */
  #np-chat-send { width: 42px !important; height: 42px !important; }

  /* Tighter header */
  #np-chat-head { padding: 10px 13px !important; }
}

/* Landscape phone: reduce heights */
@media (max-height: 500px) and (max-width: 768px) {
  #np-chat-panel { max-height: 70vh   !important; }
  #np-chat-msgs  { max-height: 35vh   !important; min-height: 60px !important; }
}