/* IPTV Support Bot – Widget Styles v1.0.2 */
:root {
  --iptvsb-color: #1a1a2e;
  --iptvsb-color-light: #2d2d5e;
  --iptvsb-radius: 18px;
  --iptvsb-shadow: 0 8px 40px rgba(0,0,0,0.16);
  --iptvsb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#iptvsb-root * {
  box-sizing: border-box !important;
  font-family: var(--iptvsb-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Bubble ─────────────────────────────────────────────────── */
#iptvsb-bubble {
  position: fixed !important;
  bottom: 24px !important; right: 24px !important;
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  background: var(--iptvsb-color) !important;
  border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
  z-index: 99998 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  padding: 0 !important; margin: 0 !important;
}
#iptvsb-bubble:hover { transform: scale(1.08) !important; }
#iptvsb-bubble svg { width: 26px !important; height: 26px !important; stroke: #fff !important; }
#iptvsb-notif {
  position: absolute !important; top: 8px !important; right: 8px !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important; background: #ff4444 !important;
  border: 2.5px solid #fff !important; display: none !important;
}

/* ── Chat window ─────────────────────────────────────────────── */
#iptvsb-window {
  position: fixed !important;
  bottom: 96px !important; right: 24px !important;
  width: 380px !important; max-height: 600px !important;
  background: #f5f6fa !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16) !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
  z-index: 99997 !important;
  opacity: 0 !important; transform: translateY(20px) scale(0.95) !important;
  pointer-events: none !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
#iptvsb-window.iptvsb-open {
  opacity: 1 !important; transform: translateY(0) scale(1) !important;
  pointer-events: all !important;
}

/* ── Header ──────────────────────────────────────────────────── */
#iptvsb-header {
  background: var(--iptvsb-color) !important;
  padding: 14px 16px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  flex-shrink: 0 !important;
}
.iptvsb-avatar {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.iptvsb-avatar svg { width: 20px !important; height: 20px !important; stroke: #7fdc9e !important; }
.iptvsb-header-info { flex: 1 !important; min-width: 0 !important; }
.iptvsb-bot-name {
  display: block !important; font-size: 15px !important; font-weight: 700 !important;
  color: #fff !important;
}
.iptvsb-status { display: flex !important; align-items: center !important; gap: 5px !important; margin-top: 2px !important; }
.iptvsb-dot {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #7fdc9e !important; flex-shrink: 0 !important;
}
#iptvsb-status-text { font-size: 12px !important; color: rgba(255,255,255,0.75) !important; }
.iptvsb-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
#iptvsb-lang-select {
  background: rgba(255,255,255,0.15) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important; font-size: 11px !important;
  padding: 4px 8px !important; cursor: pointer !important;
}
#iptvsb-close {
  background: rgba(255,255,255,0.12) !important; border: none !important;
  color: rgba(255,255,255,0.8) !important; font-size: 16px !important;
  cursor: pointer !important; width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#iptvsb-close:hover { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* ── Messages ────────────────────────────────────────────────── */
#iptvsb-messages {
  flex: 1 !important; overflow-y: auto !important;
  padding: 16px 14px 8px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  scroll-behavior: smooth !important; background: #f5f6fa !important;
}
.iptvsb-msg { max-width: 82% !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.iptvsb-msg.bot  { align-self: flex-start !important; }
.iptvsb-msg.user { align-self: flex-end !important; }
.iptvsb-bubble-text {
  padding: 10px 14px !important; border-radius: 16px !important;
  font-size: 14px !important; line-height: 1.55 !important;
  white-space: pre-wrap !important; word-break: break-word !important;
}
.iptvsb-msg.bot .iptvsb-bubble-text {
  background: #fff !important; color: #1a1a2e !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
.iptvsb-msg.user .iptvsb-bubble-text {
  background: var(--iptvsb-color) !important; color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
.iptvsb-time { font-size: 10px !important; color: #9ca3af !important; padding: 0 4px !important; }
.iptvsb-msg.user .iptvsb-time { text-align: right !important; }

/* Typing */
.iptvsb-typing {
  display: flex !important; gap: 5px !important; padding: 12px 14px !important;
  background: #fff !important; border-radius: 16px !important;
  border-bottom-left-radius: 4px !important; width: fit-content !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
.iptvsb-typing span {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #9ca3af !important; animation: iptvsb-blink 1.3s infinite !important;
}
.iptvsb-typing span:nth-child(2) { animation-delay: .2s !important; }
.iptvsb-typing span:nth-child(3) { animation-delay: .4s !important; }
@keyframes iptvsb-blink {
  0%,80%,100%{opacity:.2; transform:scale(.85);}
  40%{opacity:1; transform:scale(1);}
}

/* ── Quick replies ── SMALL PILL BUTTONS ─────────────────────── */
#iptvsb-quick-replies {
  padding: 4px 14px 10px !important;
  display: flex !important; flex-wrap: wrap !important; gap: 5px !important;
  flex-shrink: 0 !important; background: #f5f6fa !important;
}
#iptvsb-root .iptvsb-qr,
#iptvsb-root button.iptvsb-qr {
  all: unset !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--iptvsb-color) !important;
  background: #fff !important;
  color: var(--iptvsb-color) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  transition: background .15s, color .15s !important;
  box-sizing: border-box !important;
}
#iptvsb-root .iptvsb-qr:hover,
#iptvsb-root button.iptvsb-qr:hover {
  background: var(--iptvsb-color) !important;
  color: #fff !important;
}

/* ── Contact form ─────────────────────────────────────────────── */
#iptvsb-contact-form {
  margin: 0 14px 10px !important; padding: 14px !important;
  border-radius: 14px !important; background: #fff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important; flex-shrink: 0 !important;
}
#iptvsb-cf-title { font-size: 13px !important; font-weight: 700 !important; color: var(--iptvsb-color) !important; margin: 0 0 10px !important; }
#iptvsb-contact-form input,
#iptvsb-contact-form textarea {
  width: 100% !important; margin-bottom: 8px !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 10px !important;
  padding: 8px 12px !important; font-size: 13px !important; color: #111 !important;
  background: #f9fafb !important; outline: none !important; resize: none !important;
  display: block !important;
}
#iptvsb-contact-form input:focus,
#iptvsb-contact-form textarea:focus { border-color: var(--iptvsb-color) !important; background: #fff !important; }
#iptvsb-cf-submit {
  width: 100% !important; padding: 10px !important;
  background: var(--iptvsb-color) !important; color: #fff !important;
  border: none !important; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important;
}
#iptvsb-cf-feedback { font-size: 12px !important; margin: 8px 0 0 !important; text-align: center !important; }

/* ── Input row ────────────────────────────────────────────────── */
#iptvsb-input-row {
  padding: 10px 14px 12px !important; border-top: 1px solid #e9eaf0 !important;
  display: flex !important; gap: 8px !important; align-items: flex-end !important;
  flex-shrink: 0 !important; background: #fff !important;
}
#iptvsb-input {
  flex: 1 !important; resize: none !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 12px !important;
  padding: 9px 14px !important; font-size: 14px !important; color: #111 !important;
  background: #f9fafb !important; outline: none !important;
  min-height: 40px !important; max-height: 100px !important; line-height: 1.5 !important;
}
#iptvsb-input:focus { border-color: var(--iptvsb-color) !important; background: #fff !important; }
#iptvsb-input::placeholder { color: #adb5bd !important; }
#iptvsb-send {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: var(--iptvsb-color) !important; border: none !important;
  cursor: pointer !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
#iptvsb-send:disabled { opacity: .4 !important; cursor: default !important; }
#iptvsb-send svg { width: 16px !important; height: 16px !important; stroke: #fff !important; }

/* ── RTL ──────────────────────────────────────────────────────── */
#iptvsb-messages[dir="rtl"] .iptvsb-msg.bot  { align-self: flex-end !important; }
#iptvsb-messages[dir="rtl"] .iptvsb-msg.user { align-self: flex-start !important; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 440px) {
  #iptvsb-window {
    width: calc(100vw - 20px) !important;
    right: 10px !important; left: 10px !important;
    bottom: 86px !important; max-height: calc(100vh - 110px) !important;
  }
  #iptvsb-bubble { right: 16px !important; bottom: 16px !important; }
}

/* ── Mobile Bug Fixes ─────────────────────────────────────────
   1. Safari zoom fix: inputs must be font-size >= 16px to prevent
      iOS Safari from zooming in when an input is focused.
   2. Chrome keyboard fix: use dvh units + translate trick so the
      chat window stays above the virtual keyboard.
──────────────────────────────────────────────────────────────── */

/* Safari zoom fix — override the 14px input font-size on iOS */
@supports (-webkit-touch-callout: none) {
  #iptvsb-input,
  #iptvsb-contact-form input,
  #iptvsb-contact-form textarea,
  #iptvsb-lang-select {
    font-size: 16px !important;
  }
}

/* All mobile: prevent zoom on any focusable element */
@media (max-width: 768px) {
  #iptvsb-root input,
  #iptvsb-root textarea,
  #iptvsb-root select {
    font-size: 16px !important;
  }

  /* Chrome / Android keyboard fix:
     Use dynamic viewport height (dvh) so the widget shrinks
     when the soft keyboard pushes the viewport up.
     Falls back to vh on browsers that don't support dvh. */
  #iptvsb-window {
    bottom: 86px !important;
    max-height: calc(100dvh - 110px) !important;
  }

  /* When input is focused (keyboard open), slide window up */
  #iptvsb-window.iptvsb-keyboard-open {
    bottom: 8px !important;
    max-height: calc(100dvh - 20px) !important;
  }

  /* Bubble: stays above nav bar */
  #iptvsb-bubble {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* ── Agent Panel ──────────────────────────────────────────── */
#iptvsb-agent-panel {
  padding: 8px 14px 14px !important;
  flex-shrink: 0 !important;
}
.iptvsb-agent-card {
  background: #fff !important;
  border: 1px solid var(--iptvsb-color) !important;
  border-radius: 14px !important;
  padding: 20px 16px 16px !important;
  text-align: center !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.iptvsb-agent-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: var(--iptvsb-color) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 12px !important;
}
.iptvsb-agent-icon svg { stroke: #fff !important; }
.iptvsb-agent-title {
  font-size: 15px !important; font-weight: 700 !important;
  color: #1a1a2e !important; margin: 0 0 6px !important;
}
.iptvsb-agent-sub {
  font-size: 13px !important; color: #6b7280 !important;
  margin: 0 0 14px !important; line-height: 1.5 !important;
}
.iptvsb-agent-note {
  font-size: 11px !important; color: #9ca3af !important;
  margin: 10px 0 0 !important;
}
.iptvsb-cta-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 7px !important;
  background: var(--iptvsb-color) !important; color: #fff !important;
  border: none !important; border-radius: 24px !important;
  padding: 10px 22px !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: opacity .15s, transform .15s !important;
  font-family: var(--iptvsb-font) !important;
}
.iptvsb-cta-btn:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
.iptvsb-cta-btn svg { stroke: #fff !important; flex-shrink: 0 !important; }