/* ═══════════════════════════════════════════════════
   Smart Chatbot CSS — Position & Style Override
   Targets: #sc-bubble & #sc-window (created by toastchatbot.js)
   
   Layout (right side, bottom to top):
   - Bottom Nav (mobile):  0 - 64px
   - FAB Stack starts:     70px (WhatsApp + Messenger + ScrollTop)
   - FAB Stack ends:       ~210px (3 buttons × 44px + gaps)
   - Smart Chat Bubble:    270px (clear gap above FAB stack)
   ═══════════════════════════════════════════════════ */

/* ─── Floating Chat Bubble (Icon) ──────────────── */
#sc-widget #sc-bubble {
  position: fixed !important;
  right: 16px !important;
  bottom: 270px !important;        /* Above WhatsApp FAB stack with gap */
  z-index: 9001 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#sc-widget #sc-bubble:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ─── Chat Window ──────────────────────────────── */
#sc-widget #sc-window {
  position: fixed !important;
  right: 16px !important;
  bottom: 340px !important;        /* Just above the bubble */
  z-index: 9002 !important;
}

/* ─── Desktop Adjustments (≥769px) ─────────────── */
/* On desktop, FAB stack starts at bottom: 24px (smaller), so adjust */
@media (min-width: 769px) {
  #sc-widget #sc-bubble {
    bottom: 230px !important;
  }
  #sc-widget #sc-window {
    bottom: 300px !important;
  }
}

/* ─── Mobile Adjustments (≤480px) ──────────────── */
@media (max-width: 480px) {
  #sc-widget #sc-bubble {
    width: 52px !important;
    height: 52px !important;
    bottom: 260px !important;
    right: 12px !important;
  }
  #sc-widget #sc-window {
    bottom: 325px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ─── Toast Notifications (optional) ───────────── */
#toast {
  visibility: hidden;
  min-width: 200px;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 16px;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

#toast.show {
  visibility: visible;
  opacity: 1;
}