/* ═══════════════════════════════════════════════════════════════
   💬 ASK SAADI MATH — AI Chatbot Widget
   Premium floating assistant. Uses the theme's CSS variables so it
   automatically adapts to light / dark mode.

   To tweak colours, edit the --asm-* variables in :root below.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --asm-grad: linear-gradient(135deg, #7C3AED 0%, #3B82F6 55%, #FBBF24 120%);
  --asm-grad-soft: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.10));
  --asm-glow: 0 12px 40px -8px rgba(124,58,237,0.55), 0 0 22px rgba(59,130,246,0.35);
  --asm-radius: 22px;
  --asm-z: 99990; /* below WP admin bar (99999) but above page content */
}

/* ─── Floating launcher button ─────────────────────────────── */
.asm-launcher {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: var(--asm-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 14px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 999px;
  background: var(--asm-grad);
  background-size: 180% 180%;
  box-shadow: var(--asm-glow);
  animation: asm-gradient-shift 6s ease infinite, asm-float 3.2s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.asm-launcher:hover { transform: translateY(-3px) scale(1.03); }
.asm-launcher:active { transform: scale(0.97); }
.asm-launcher:focus-visible { outline: 3px solid rgba(251,191,36,0.9); outline-offset: 3px; }

.asm-launcher-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.asm-launcher-icon svg { width: 20px; height: 20px; }
.asm-launcher-now { display: none; } /* shown only on mobile */

/* small unread pulse dot */
.asm-launcher::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green, #10B981);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
  animation: asm-pulse 2s infinite;
}

/* Hide launcher while the window is open */
.asm-open .asm-launcher { opacity: 0; pointer-events: none; transform: scale(0.6); }

/* ─── Chat window ──────────────────────────────────────────── */
.asm-window {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: var(--asm-z);
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--asm-radius);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #E5E7EB);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.35), var(--asm-glow);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.asm-open .asm-window {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ─── Header ───────────────────────────────────────────────── */
.asm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  color: #fff;
  background: var(--asm-grad);
  background-size: 180% 180%;
  animation: asm-gradient-shift 8s ease infinite;
}
.asm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--font-display, 'Poppins', sans-serif);
  flex-shrink: 0;
}
.asm-avatar svg { width: 24px; height: 24px; }
.asm-header-text { flex: 1; min-width: 0; }
.asm-header-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}
.asm-header-subtitle { font-size: 0.72rem; opacity: 0.92; margin-top: 2px; }
.asm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  margin-top: 4px;
  opacity: 0.95;
}
.asm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: asm-pulse-soft 1.8s infinite;
}
.asm-close {
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.asm-close:hover { background: rgba(255,255,255,0.32); transform: rotate(90deg); }
.asm-close svg { width: 18px; height: 18px; }

/* Back button (only visible on mobile full-screen) */
.asm-back {
  display: none;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.asm-back svg { width: 20px; height: 20px; }
.asm-back:hover { background: rgba(255,255,255,0.32); }

/* Audio (voice replies) toggle in header */
.asm-audio-toggle {
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.asm-audio-toggle:hover { background: rgba(255,255,255,0.32); }
.asm-audio-toggle svg { width: 18px; height: 18px; }
/* Show the correct speaker icon based on state (pressed = OFF) */
.asm-audio-toggle .asm-icon-audio-off { display: none; }
.asm-audio-toggle[aria-pressed="true"] .asm-icon-audio-on { display: none; }
.asm-audio-toggle[aria-pressed="true"] .asm-icon-audio-off { display: block; }
.asm-audio-toggle[aria-pressed="true"] { opacity: 0.75; }

/* ─── Chat area (scrolling messages + decorative AI robot) ──── */
.asm-chat-area {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Soft futuristic glow behind the robot + gentle depth in the corners */
  background:
    radial-gradient(circle at 86% 82%, rgba(34,211,238,0.16), transparent 42%),
    radial-gradient(circle at 12% 6%, rgba(124,58,237,0.10), transparent 40%),
    var(--bg-secondary, #F9FAFB);
}
[data-theme="dark"] .asm-chat-area {
  background:
    radial-gradient(circle at 86% 82%, rgba(34,211,238,0.24), transparent 46%),
    radial-gradient(circle at 12% 6%, rgba(124,58,237,0.22), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,27,75,0.96));
}

/* Female AI assistant character — pinned bottom-right, never scrolls away,
   sits BEHIND the message bubbles so replies always stay readable. */
.asm-chat-robo-bg {
  position: absolute;
  right: -18px;
  bottom: -6px;
  width: 210px;
  max-width: 56%;
  height: auto;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 26px rgba(34,211,238,0.45))
    drop-shadow(0 8px 20px rgba(124,58,237,0.35));
  animation: asm-robo-float 6s ease-in-out infinite;
}
[data-theme="dark"] .asm-chat-robo-bg { opacity: 0.6; }

/* ─── Messages area ────────────────────────────────────────── */
.asm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;             /* keep every message above the robot */
  background: transparent; /* let the robot + glow show through */
  scroll-behavior: smooth;
}
.asm-messages::-webkit-scrollbar { width: 7px; }
.asm-messages::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.35);
  border-radius: 10px;
}

.asm-msg {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  word-wrap: break-word;
  animation: asm-msg-in 0.3s ease both;
}
.asm-msg a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Each reply line gets its own direction (Urdu = RTL, English = LTR) so mixed
   content never jumbles. */
.asm-line { display: block; }
.asm-line:not(:first-child) { margin-top: 3px; }
.asm-line-gap { height: 0.5em; margin-top: 0; }
.asm-line[dir="rtl"], .asm-line:dir(rtl) { text-align: right; }
/* Urdu reads better with a touch more line-height */
.asm-msg-bot .asm-line { line-height: 1.6; }

.asm-msg-bot {
  align-self: flex-start;
  background: var(--card-bg, #fff);   /* solid, theme-aware — text stays crisp */
  color: var(--text-primary, #111827);
  border: 1px solid rgba(34,211,238,0.32);
  border-bottom-left-radius: 5px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
}
[data-theme="dark"] .asm-msg-bot {
  background: rgba(15,23,42,0.92);
  border-color: rgba(34,211,238,0.38);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.asm-msg-user {
  align-self: flex-end;
  color: #fff;
  background: var(--asm-grad);
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 22px rgba(59,130,246,0.28);
}
.asm-msg-bot a { color: var(--primary-purple, #7C3AED); }

/* Typing indicator */
.asm-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.asm-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-purple-light, #A78BFA);
  animation: asm-bounce 1.2s infinite ease-in-out;
}
.asm-typing span:nth-child(2) { animation-delay: 0.15s; }
.asm-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Quick question chips (top strip, single scrollable row) ─── */
.asm-quick {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 10px 14px;
  background: var(--bg-secondary, #F9FAFB);
  border-bottom: 1px solid var(--border-color, #E5E7EB);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.asm-quick::-webkit-scrollbar { height: 5px; }
.asm-quick::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.35); border-radius: 10px; }
.asm-quick-btn {
  flex: 0 0 auto;            /* keep each chip on one line, swipe to see more */
  border: 1px solid var(--primary-purple, #7C3AED);
  background: var(--asm-grad-soft);
  color: var(--primary-purple, #7C3AED);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.asm-quick-btn:hover {
  background: var(--asm-grad);
  color: #fff;
  transform: translateY(-2px);
}
[data-theme="dark"] .asm-quick-btn { color: var(--primary-purple-light, #A78BFA); border-color: var(--primary-purple-light, #A78BFA); }

/* Highlighted "Sports Week" event chip — filled gradient + soft glow */
.asm-quick-btn.asm-quick-event {
  color: #fff;
  border-color: transparent;
  background: var(--asm-grad);
  background-size: 180% 180%;
  box-shadow: 0 4px 14px -3px rgba(124,58,237,0.5);
  animation: asm-gradient-shift 6s ease infinite;
}
.asm-quick-btn.asm-quick-event:hover { color: #fff; transform: translateY(-2px) scale(1.03); }
[data-theme="dark"] .asm-quick-btn.asm-quick-event { color: #fff; border-color: transparent; }

/* ─── Input bar ────────────────────────────────────────────── */
.asm-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border-top: 1px solid var(--border-color, #E5E7EB);
}
.asm-input {
  flex: 1;
  resize: none;
  max-height: 130px;
  min-height: 68px;   /* ~3 lines visible */
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-primary, #111827);
  background: var(--bg-secondary, #F9FAFB);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.asm-input:focus {
  border-color: var(--primary-purple, #7C3AED);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.asm-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: var(--asm-grad);
  background-size: 160% 160%;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  animation: asm-gradient-shift 6s ease infinite;
}
.asm-send:hover { transform: translateY(-2px) rotate(-6deg); }
.asm-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.asm-send svg { width: 20px; height: 20px; }

/* Mic (speech-to-text) button */
.asm-mic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 14px;
  cursor: pointer;
  color: var(--primary-purple, #7C3AED);
  background: var(--bg-secondary, #F9FAFB);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.asm-mic:hover { transform: translateY(-2px); color: var(--accent-blue, #3B82F6); }
.asm-mic svg { width: 20px; height: 20px; }
[data-theme="dark"] .asm-mic { color: var(--primary-purple-light, #A78BFA); }

/* Listening state — red glowing pulse */
.asm-mic.asm-listening {
  color: #fff;
  background: var(--accent-red, #EF4444);
  border-color: var(--accent-red, #EF4444);
  animation: asm-mic-pulse 1.3s infinite;
}
@keyframes asm-mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Voice-input language toggle (UR / EN) */
.asm-lang {
  flex-shrink: 0;
  min-width: 40px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 14px;
  cursor: pointer;
  color: var(--primary-purple, #7C3AED);
  background: var(--bg-secondary, #F9FAFB);
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.asm-lang:hover { transform: translateY(-2px); color: var(--accent-blue, #3B82F6); }
[data-theme="dark"] .asm-lang { color: var(--primary-purple-light, #A78BFA); }

/* Hide mic + language toggle when the browser has no speech recognition */
.asm-no-voice .asm-mic,
.asm-no-voice .asm-lang { display: none; }

.asm-footer-note {
  text-align: center;
  font-size: 0.66rem;
  color: var(--text-muted, #6B7280);
  padding: 0 0 8px;
  background: var(--card-bg, #fff);
}
.asm-footer-note a { color: var(--primary-purple, #7C3AED); text-decoration: none; font-weight: 600; }

/* ─── Animations ───────────────────────────────────────────── */
@keyframes asm-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes asm-float {
  0%, 100% { box-shadow: var(--asm-glow); }
  50% { box-shadow: 0 18px 46px -8px rgba(124,58,237,0.65), 0 0 30px rgba(59,130,246,0.45); }
}
@keyframes asm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  70% { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes asm-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes asm-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes asm-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes asm-robo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .asm-launcher, .asm-send, .asm-header { animation: none !important; }
  .asm-launcher::after, .asm-status-dot { animation: none !important; }
  .asm-chat-robo-bg { animation: none !important; }
}

/* ─── Mobile ───────────────────────────────────────────────── */

/* Move the theme's sticky WhatsApp button to the bottom-LEFT corner so the
   AI launcher can sit at the bottom-RIGHT. (Overrides style.css !important.) */
@media (max-width: 768px) {
  .mobile-whatsapp-sticky {
    left: 12px !important;
    right: auto !important;
    bottom: 16px !important;
    transform: none !important;
    max-width: 46vw !important;
  }
  .mobile-whatsapp-sticky .btn-whatsapp {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 600px) {
  /* AI launcher: bottom-right, showing "Ask Saadi Math now" */
  .asm-launcher {
    right: 12px;
    bottom: 16px;
    left: auto;
    gap: 7px;
    padding: 9px 14px 9px 9px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .asm-launcher-icon { width: 26px; height: 26px; }
  .asm-launcher-icon svg { width: 16px; height: 16px; }
  .asm-launcher-text { display: inline; }       /* show the label on mobile */
  .asm-launcher-now { display: inline; }         /* → "Ask Saadi Math now" */

  /* Show the back button and hide the avatar to save space */
  .asm-back { display: grid; }
  .asm-header .asm-avatar { display: none; }

  /* Smaller, softer robot so it never covers the messages on phones */
  .asm-chat-robo-bg {
    width: 150px;
    max-width: 46%;
    right: -22px;
    bottom: 2px;
    opacity: 0.32;
  }
  [data-theme="dark"] .asm-chat-robo-bg { opacity: 0.42; }

  /* Full-screen chat window */
  .asm-window {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;          /* accounts for mobile browser bars */
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
  }
  .asm-open .asm-window { transform: translateY(0); }
}