/* ═══════════════════════════════════════════════════════
   Munim-ji widget
   Two states:
     .munim-collapsed → small persistent circle (always visible)
     .munim-expanded  → full character + speech bubble (with menu/actions)
   Mobile-first (375px base), scales up on desktop.
   ═══════════════════════════════════════════════════════ */

.munim-root {
  position: fixed;
  right: 16px;                     /* match WhatsApp floater right offset */
  bottom: 148px;                   /* sit just above WA (bottom 90 + 48 height + 10 gap = 148) */
  z-index: 1050;                   /* above WhatsApp/Install floaters (≤1000) but BELOW .modal-overlay (1100) and SH.modal inline (99999+) */
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.munim-root.munim-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hard-hide Munim whenever ANY modal is open. The app toggles body.modal-open
   for both .modal-overlay and .bottom-sheet (studio/js/utils.js:377,
   studio/js/app.js:4681), so this single rule covers every modal type
   without playing the z-index whack-a-mole. */
body.modal-open .munim-root {
  display: none;
}

/* ─── Character image ─────────────────────────────────── */
.munim-char {
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  transition: opacity 0.18s ease, transform 0.18s ease, width 0.24s ease, height 0.24s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.munim-char:active { transform: scale(0.96); }
.munim-char.munim-fading { opacity: 0; }

/* ─── Collapsed state: small floating circle ──────────── */
/* Uses dedicated head-and-shoulders icon (munim-icon.png) which is already
   pre-cropped, so we display with object-fit:contain and no offset. */
.munim-root.munim-collapsed .munim-bubble { display: none; }
/* ─── Collapsed icon: wrap the img so we can overlay a blink ───── */
.munim-root.munim-collapsed .munim-char {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(59,130,246,0.18);
  padding: 2px;
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
  /* breathe + occasional head sway (every 6s, very subtle) */
  animation:
    munim-breathe 4s ease-in-out infinite,
    munim-head-sway 6s ease-in-out infinite;
  /* cross-fade between activity icon variants when JS rotates _img.src */
  transition: opacity 0.18s ease, transform 0.18s ease, width 0.24s ease, height 0.24s ease;
}
.munim-root.munim-collapsed .munim-char:hover {
  border-color: rgba(59,130,246,0.5);
  transform: scale(1.04);
  animation-play-state: paused;
}
/* Full-body pose displayed inside the 56px circle: zoom + crop to the head
   region. object-fit:cover scales the image to fill the circle; object-position
   pushes it up so the head sits in view (cap at the top, shoulders barely visible). */
.munim-root.munim-collapsed .munim-char.munim-fullbody-crop {
  object-fit: cover;
  object-position: center 14%;
  /* Slight zoom so head feels weighty in the circle. */
  transform: scale(1.18);
}
@keyframes munim-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.015); }
}
/* Soft head sway — much gentler than the old wiggle. ~5% of the cycle has motion. */
@keyframes munim-head-sway {
  0%, 92%, 100% { transform: rotate(0deg); }
  95%           { transform: rotate(-4deg); }
  98%           { transform: rotate(4deg); }
}

/* (Blink is now a JS-driven 2-frame swap to munim-icon-blink.png — see
   _startBlinking() in munim.js. CSS-overlay blink removed because the flat
   white bar didn't read as a real eye-close.) */

/* ─── Typing-bubble teaser (click → typing → real bubble) ─── */
.munim-typing {
  position: absolute;
  right: 78px;   /* sits to the left of the icon */
  bottom: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.16);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform-origin: 100% 50%;
  animation: munim-typing-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}
.munim-typing.munim-typing-out {
  animation: munim-typing-out 0.18s ease-in both;
}
.munim-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6366f1;
  opacity: 0.45;
  animation: munim-typing-dot 1.1s ease-in-out infinite;
}
.munim-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.munim-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes munim-typing-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}
@keyframes munim-typing-out {
  from { opacity: 1; transform: scale(1);   }
  to   { opacity: 0; transform: scale(0.6); }
}
@keyframes munim-typing-dot {
  0%, 60%, 100% { transform: translateY(0)   scale(1);   opacity: 0.45; }
  30%           { transform: translateY(-4px) scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .munim-root.munim-collapsed .munim-char,
  .munim-root.munim-collapsed::before,
  .munim-root.munim-collapsed::after,
  .munim-typing,
  .munim-typing-dot { animation: none; }
}

/* ─── Expanded state: full character + bubble ─────────── */
.munim-root.munim-expanded .munim-char {
  width: 88px;
  height: 88px;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  animation: none;
}

/* ─── Speech bubble ───────────────────────────────────── */
.munim-bubble {
  position: relative;
  max-width: 260px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  padding: 12px 14px 10px;
  pointer-events: auto;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  color: var(--text-primary, #1a1a2e);
}
.munim-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 28px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transform: rotate(-45deg);
}

.munim-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.munim-close:hover {
  background: rgba(15,23,42,0.06);
  color: var(--text-primary, #1a1a2e);
}

.munim-text {
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 500;
  padding-right: 18px;
  word-break: break-word;
}
.munim-text b { font-weight: 700; color: var(--primary, #3b82f6); }
.munim-text i { color: var(--text-muted, #6b7280); }

/* Inline navigable hot-words inside FAQ answers. Reads as bold + underline
   + faint blue tint so the user knows it's tappable without it feeling
   like a 1995 hyperlink. */
.munim-nav,
.munim-nav:visited {
  color: var(--primary, #3b82f6);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(59,130,246,0.5);
  cursor: pointer;
  background: rgba(59,130,246,0.06);
  padding: 0 3px;
  border-radius: 4px;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-nav:hover,
.munim-nav:active {
  background: rgba(59,130,246,0.14);
  text-decoration-color: var(--primary, #3b82f6);
}
.munim-nav b { color: inherit; }

/* Primary CTA button below an FAQ answer — single tap → destination. */
.munim-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--primary, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  box-shadow: 0 2px 6px rgba(59,130,246,0.25);
  -webkit-tap-highlight-color: transparent;
}
.munim-cta:hover { background: var(--primary-600, #2563eb); }
.munim-cta:active { transform: scale(0.97); }
.munim-cta-icon { font-size: 1.1rem; line-height: 1; }
.munim-cta-label { line-height: 1.2; }

/* ─── Action buttons (2-option asks) ──────────────────── */
.munim-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.munim-btn {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-btn:active { transform: scale(0.96); }
.munim-btn-primary {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}
.munim-btn-primary:hover {
  background: var(--primary-600, #2563eb);
  border-color: var(--primary-600, #2563eb);
}
.munim-btn-secondary {
  background: #fff;
  color: var(--text-secondary, #475569);
  border-color: rgba(15, 23, 42, 0.12);
}
.munim-btn-secondary:hover { background: rgba(15,23,42,0.04); }

/* ─── Streak badge on collapsed circle ────────────────── */
/* Brand-aligned: deep sea-blue gradient (same family as --primary).
   Fire icon stays as a single warm accent for semantic recognition. */
.munim-streak-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px 0 4px;
  display: flex;
  align-items: center;
  gap: 1px;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  color: #fff;
  border-radius: 10px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(59,130,246,0.4);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  animation: munim-badge-pop 0.4s ease-out;
}
.munim-streak-badge .material-symbols-rounded {
  font-size: 0.85rem;
  line-height: 1;
  color: #fdba74;        /* warm fire accent — single hot note against blue */
}
.munim-streak-num { font-variant-numeric: tabular-nums; }
@keyframes munim-badge-pop {
  0%   { transform: scale(0) rotate(-12deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.munim-root.munim-expanded .munim-streak-badge { display: none; }

/* ─── Stats banner above tabs in expanded bubble (mobile-first) ─── */
/* Brand-coherent: subtle blue tint background, streak pill + progress bar
   share the same sea-blue → indigo gradient family. */
.munim-stats-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin: -2px -2px 8px;
  background: rgba(59,130,246,0.05);
  border: 1px solid rgba(59,130,246,0.14);
  border-radius: 10px;
}

/* Compact streak pill — same blue family as progress bar, fire icon as the
   single warm semantic accent (a flame should look like a flame). */
.munim-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 7px 3px 5px;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.1;
  letter-spacing: 0;
}
.munim-stat-pill b {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.munim-stat-pill .material-symbols-rounded {
  font-size: 0.95rem;
  line-height: 1;
  color: #fdba74;        /* warm fire accent on blue pill — single hot note */
}
.munim-stat-pill-suf { font-size: 0.7rem; opacity: 0.92; font-weight: 700; }

/* Progress (takes remaining horizontal space) */
.munim-stat-progress {
  flex: 1;
  min-width: 0;
}
.munim-stat-progress-text {
  font-size: 0.72rem;
  color: var(--text-secondary, #475569);
  margin-bottom: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.munim-stat-progress-text b {
  color: var(--primary, #3b82f6);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.munim-stat-rem { color: var(--text-muted, #94a3b8); font-weight: 500; }
.munim-stat-progress-bar {
  height: 5px;
  background: rgba(59,130,246,0.12);
  border-radius: 3px;
  overflow: hidden;
}
.munim-stat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Tablet/desktop: more breathing room */
@media (min-width: 768px) {
  .munim-stats-banner { padding: 9px 12px; gap: 10px; }
  .munim-stat-pill b  { font-size: 0.88rem; }
  .munim-stat-progress-text { font-size: 0.78rem; }
}

/* ─── 3-tab menu (Feedback / Help / Channel) ───────────── */
.munim-tabs {
  display: flex;
  gap: 4px;
  margin: -4px -2px 10px;
  padding: 2px;
  background: rgba(15,23,42,0.04);
  border-radius: 10px;
}
.munim-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 2px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
/* With 4 tabs the bubble is too tight for icons + labels, so hide the
   leading icon and rely on color + label alone. Active tab still pops
   via the white pill background. */
.munim-tab .munim-tab-icon,
.munim-tab > .material-symbols-rounded { display: none; }
.munim-tab:hover { color: var(--text-primary, #1a1a2e); }
.munim-tab.active {
  background: #fff;
  color: var(--primary, #3b82f6);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.munim-pane {
  max-height: 360px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
}

/* Feedback tab — emoji row + problem chips */
.munim-fb-prompt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin: 0 0 8px;
}
.munim-fb-prompt-sub {
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.munim-emoji-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.munim-emoji-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: 1.5px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.munim-emoji-btn:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); }
.munim-emoji-btn.selected {
  background: rgba(59,130,246,0.12);
  border-color: var(--primary, #3b82f6);
  transform: translateY(-1px);
}
.munim-emoji-icon { font-size: 1.4rem; line-height: 1; }
.munim-emoji-label { font-size: 0.66rem; font-weight: 600; color: var(--text-secondary, #475569); }

.munim-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.munim-problem-chip {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 9px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 14px;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.munim-problem-chip:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); }
.munim-problem-chip.selected {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}

/* Help tab — FAQ list */
.munim-faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.munim-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(59,130,246,0.05);
  border: 1px solid rgba(59,130,246,0.12);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.12s ease, transform 0.12s ease;
}
.munim-faq-q:hover { background: rgba(59,130,246,0.1); transform: translateX(2px); }
.munim-faq-arrow {
  color: var(--primary, #3b82f6);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1.35;
}
.munim-faq-q-text { flex: 1; min-width: 0; }
.munim-faq-section-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  margin: 12px 0 4px;
}
.munim-faq-q-shown {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary, #3b82f6);
  margin-bottom: 6px;
  line-height: 1.35;
}
.munim-ask-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  background: rgba(16,185,129,0.08);
  border: 1px dashed rgba(16,185,129,0.35);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #047857;
  cursor: pointer;
  text-align: left;
}
.munim-ask-btn:hover { background: rgba(16,185,129,0.15); }
.munim-ask-btn .material-symbols-rounded { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.munim-channel-card .munim-btn .material-symbols-rounded { font-size: 1.1rem; line-height: 1; vertical-align: -3px; margin-right: 4px; }

/* Channel tab */
.munim-channel-card {
  padding: 14px 12px;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 12px;
  text-align: center;
}
.munim-channel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #128c7e;
  margin-bottom: 4px;
}
.munim-channel-sub {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
  margin-bottom: 14px;
}
.munim-channel-card .munim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  font-weight: 700;
}
.munim-channel-card .munim-btn:hover { background: #1da851; border-color: #1da851; }

/* ─── First-time welcome screen (one-time takeover) ──── */
.munim-welcome-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-welcome-overlay.visible { opacity: 1; }

.munim-welcome-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: #fff;
  border-radius: 22px;
  padding: 28px 22px 20px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.4);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.munim-welcome-overlay.visible .munim-welcome-card { transform: translateY(0) scale(1); }

.munim-welcome-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(15,23,42,0.05);
  border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #475569;
  transition: background 0.15s;
}
.munim-welcome-close:hover { background: rgba(15,23,42,0.10); }
.munim-welcome-close .material-symbols-rounded { font-size: 1.1rem; }

.munim-welcome-hero {
  position: relative;
  display: inline-block;
  margin: 0 auto 4px;
}
.munim-welcome-img {
  display: block;
  width: 170px; height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(99,102,241,0.28));
  animation: munimWaveBob 2.6s ease-in-out infinite;
}
@keyframes munimWaveBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1.5deg); }
}
.munim-welcome-badge {
  position: absolute;
  top: -8px; right: -16px;
  background: #fff;
  border: 1px solid rgba(99,102,241,0.25);
  color: #4f46e5;
  font-size: 0.74rem; font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.12);
  animation: munimBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes munimBadgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.munim-welcome-title {
  margin: 6px 0 4px;
  font-size: 1.4rem; font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.02em;
}
.munim-welcome-sub {
  margin: 0 0 18px;
  font-size: 0.88rem; line-height: 1.5;
  color: #475569;
}

.munim-welcome-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.munim-welcome-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.05);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 12px;
  font-size: 0.85rem;
  color: #1a1a2e;
}
.munim-welcome-list li .material-symbols-rounded {
  font-size: 1.2rem;
  color: #6366f1;
  background: #fff;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.munim-welcome-streak {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 14px;
  font-size: 0.82rem;
  color: #78350f;
  text-align: left;
  line-height: 1.4;
}
.munim-welcome-streak .material-symbols-rounded {
  font-size: 1.4rem;
  color: #f97316;
  flex-shrink: 0;
  animation: munimFlameFlicker 1.4s ease-in-out infinite;
}
@keyframes munimFlameFlicker {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg)  scale(1.08); }
}
.munim-welcome-streak b { color: #92400e; }

.munim-welcome-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.munim-welcome-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  font-weight: 700; font-size: 0.98rem;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(99,102,241,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
}
.munim-welcome-start:hover {
  background: linear-gradient(180deg, #7375f5, #5b53ea);
  box-shadow: 0 8px 22px rgba(99,102,241,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.munim-welcome-start:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(99,102,241,0.32), inset 0 1px 2px rgba(0,0,0,0.10);
}
.munim-welcome-start .material-symbols-rounded { font-size: 1.25rem; }
.munim-welcome-later {
  width: 100%; min-height: 40px;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.munim-welcome-later:hover { background: rgba(15,23,42,0.04); color: #1a1a2e; }
.munim-welcome-later:active { background: rgba(15,23,42,0.08); }

.munim-welcome-tip {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
}

/* ─── Tours tab (Driver.js walkthroughs picker) ──────── */
.munim-tour-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
  -webkit-overflow-scrolling: touch;
}
.munim-tour-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  min-height: 48px;
}
.munim-tour-row:hover {
  background: rgba(99,102,241,0.10);
  border-color: rgba(99,102,241,0.35);
}
.munim-tour-row:active { transform: scale(0.985); }
.munim-tour-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #6366f1; color: #fff; border-radius: 999px; flex-shrink: 0;
}
.munim-tour-icon .material-symbols-rounded { font-size: 1.05rem; line-height: 1; }
.munim-tour-label {
  flex: 1; min-width: 0;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.3;
  /* Allow up to 2 lines instead of ellipsis — labels were getting cut
     mid-word ("Analytics — in...") which kills the entire purpose of
     a tour catalog. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.munim-tour-meta {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.munim-tour-where {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  background: rgba(0,0,0,0.04);
  padding: 2px 6px; border-radius: 6px;
}
.munim-tour-here {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #6366f1;
  background: rgba(99,102,241,0.12);
  padding: 2px 6px; border-radius: 6px;
}
.munim-tour-done {
  font-size: 1.05rem; color: #10b981;
}

/* ─── Legacy menu (kept for safety, unused) ────────────── */
.munim-menu-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 8px;
}
.munim-topics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
}
.munim-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.14);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary, #1a1a2e);
  transition: transform 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-topic:hover {
  background: rgba(59,130,246,0.12);
  transform: translateX(2px);
}
.munim-topic:active { transform: scale(0.98); }
.munim-topic-icon {
  flex-shrink: 0;
  font-size: 1rem;
  width: 22px;
  text-align: center;
}
.munim-topic-label { flex: 1; min-width: 0; line-height: 1.3; }
.munim-topic-feedback {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.14);
}
.munim-topic-feedback:hover { background: rgba(16,185,129,0.12); }

/* ─── FAQ answer + back button ─────────────────────────── */
.munim-faq-answer {
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-line;
  margin-bottom: 10px;
}
.munim-back {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  margin-top: 2px;
}
.munim-back:hover { text-decoration: underline; }

/* ─── Feedback textarea form ───────────────────────────── */
.munim-fb-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.munim-fb-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.munim-fb-input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.munim-fb-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.munim-fb-row .munim-btn { flex: 1; }

/* ─── Target highlight ring (Munim.point) ──────────────── */
.munim-target-highlight {
  animation: munim-pulse-ring 1.6s ease-in-out 2;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
@keyframes munim-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(59,130,246,0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(59,130,246,0);   }
  100% { box-shadow: 0 0 0 0   rgba(59,130,246,0);    }
}

/* ─── Desktop scale-up ───────────────────────────────── */
@media (min-width: 768px) {
  .munim-root {
    right: 20px;
    bottom: 90px;                  /* desktop has no tabbar; sit above WA at 28px */
    gap: 10px;
  }
  .munim-root.munim-collapsed .munim-char { width: 64px; height: 64px; }
  .munim-root.munim-expanded  .munim-char { width: 120px; height: 120px; }
  .munim-bubble { max-width: 320px; padding: 14px 16px 12px; }
  .munim-bubble::after { bottom: 40px; }
  .munim-text  { font-size: 0.88rem; }
  .munim-btn   { font-size: 0.82rem; min-height: 38px; padding: 8px 14px; }
  .munim-topic { font-size: 0.85rem; padding: 9px 11px; }
}

/* ─── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .munim-root, .munim-char { transition: opacity 0.12s ease; }
  .munim-root { transform: none; }
  .munim-root.munim-collapsed .munim-char { animation: none; }
  .munim-target-highlight { animation: none; }
}

/* ─── Driver.js popover skin (brand-aligned) ──────────── */
.munim-driver-popover {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  max-width: 320px;
}
.munim-driver-popover .driver-popover-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--primary, #3b82f6) !important;
  padding-right: 30px !important;
}
.munim-driver-popover .driver-popover-description {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: var(--text-primary, #1a1a2e) !important;
}
.munim-driver-popover .driver-popover-footer button.driver-popover-next-btn {
  background: var(--primary, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
}
.munim-driver-popover .driver-popover-footer button.driver-popover-prev-btn {
  background: #fff !important;
  color: var(--text-secondary, #475569) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
}
.munim-driver-popover .driver-popover-progress-text {
  color: var(--text-muted, #94a3b8) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
.munim-driver-popover .driver-popover-close-btn {
  font-size: 1.4rem !important;
  color: var(--text-muted, #94a3b8) !important;
  width: 26px !important;
  height: 26px !important;
}

/* ─── Dark mode ────────────────────────────────────────── */
:root.dark-mode .munim-bubble {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
:root.dark-mode .munim-bubble::after {
  background: #1e293b;
  border-right-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.08);
}
:root.dark-mode .munim-btn-secondary {
  background: #0f172a;
  border-color: rgba(255,255,255,0.12);
  color: #cbd5e1;
}
:root.dark-mode .munim-topic {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.22);
  color: #e2e8f0;
}
:root.dark-mode .munim-fb-input {
  background: #0f172a;
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.14);
}
:root.dark-mode .munim-root.munim-collapsed .munim-char {
  background: #1e293b;
  border-color: rgba(96,165,250,0.3);
}

/* ─── Dark mode: tabs + active pill ─────────────────────── */
:root.dark-mode .munim-tabs { background: rgba(255,255,255,0.04); }
:root.dark-mode .munim-tab { color: #94a3b8; }
:root.dark-mode .munim-tab:hover { color: #e2e8f0; }
:root.dark-mode .munim-tab.active {
  background: #0f172a;
  color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Dark mode: typing teaser chip ─────────────────────── */
:root.dark-mode .munim-typing {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
:root.dark-mode .munim-typing-dot { background: #93c5fd; }

/* ─── Dark mode: welcome takeover ───────────────────────── */
:root.dark-mode .munim-welcome-overlay { background: rgba(0,0,0,0.72); }
:root.dark-mode .munim-welcome-card {
  background: #1e293b;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
}
:root.dark-mode .munim-welcome-close {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
}
:root.dark-mode .munim-welcome-close:hover { background: rgba(255,255,255,0.12); }
:root.dark-mode .munim-welcome-badge {
  background: #0f172a;
  border-color: rgba(147,197,253,0.30);
  color: #93c5fd;
}
:root.dark-mode .munim-welcome-title { color: #f1f5f9; }
:root.dark-mode .munim-welcome-sub { color: #94a3b8; }
:root.dark-mode .munim-welcome-list li {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.16);
  color: #e2e8f0;
}
:root.dark-mode .munim-welcome-list li .material-symbols-rounded {
  background: #0f172a;
  color: #93c5fd;
}
:root.dark-mode .munim-welcome-streak {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(249,115,22,0.10));
  border-color: rgba(245,158,11,0.32);
  color: #fbbf24;
}
:root.dark-mode .munim-welcome-streak b { color: #fde68a; }
:root.dark-mode .munim-welcome-later { color: #94a3b8; }
:root.dark-mode .munim-welcome-later:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }
:root.dark-mode .munim-welcome-tip { color: #64748b; }

/* ─── Dark mode: Tours tab + rows ───────────────────────── */
:root.dark-mode .munim-tour-row {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.16);
}
:root.dark-mode .munim-tour-row:hover {
  background: rgba(147,197,253,0.12);
  border-color: rgba(147,197,253,0.32);
}
:root.dark-mode .munim-tour-icon {
  background: #4f46e5;       /* keep brand color, looks fine in dark */
  color: #fff;
}
:root.dark-mode .munim-tour-label { color: #e2e8f0; }
:root.dark-mode .munim-tour-where {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}
:root.dark-mode .munim-tour-here {
  background: rgba(147,197,253,0.16);
  color: #93c5fd;
}
:root.dark-mode .munim-tour-done { color: #34d399; }

/* ─── Dark mode: streak badge on icon ───────────────────── */
:root.dark-mode .munim-streak-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #1e293b;
}

/* ─── Dark mode: FAQ chips + answer area + Channel card ── */
:root.dark-mode .munim-fb-prompt { color: #cbd5e1; }
:root.dark-mode .munim-emoji-btn {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.20);
  color: #cbd5e1;
}
:root.dark-mode .munim-emoji-btn:hover {
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.36);
}
:root.dark-mode .munim-emoji-btn.selected {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.55);
}
:root.dark-mode .munim-emoji-label { color: #e2e8f0; }
:root.dark-mode .munim-problem-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #cbd5e1;
}
:root.dark-mode .munim-problem-chip.selected {
  background: rgba(59,130,246,0.20);
  border-color: rgba(59,130,246,0.50);
  color: #93c5fd;
}
:root.dark-mode .munim-channel-card {
  background: rgba(37,211,102,0.10);
  border-color: rgba(37,211,102,0.32);
}
:root.dark-mode .munim-channel-title { color: #4ade80; }
:root.dark-mode .munim-channel-sub { color: #94a3b8; }
:root.dark-mode .munim-ask-btn {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.32);
  color: #34d399;
}
:root.dark-mode .munim-ask-btn:hover { background: rgba(16,185,129,0.22); }

/* ═══════════════════════════════════════════════════════
   System dark preference (theme='system' on dark OS)
   ─────────────────────────────────────────────────────────
   When user picks "System" theme, no .dark-mode class is added → the
   :root.dark-mode rules above don't fire. Apply the same overrides under
   the OS-level media query, scoped to :root:not(.light-mode) so explicit
   light-pref users stay light even on a dark OS.
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .munim-bubble {
    background: #1e293b; border-color: rgba(255,255,255,0.08); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-bubble::after {
    background: #1e293b;
    border-right-color: rgba(255,255,255,0.08);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  :root:not(.light-mode) .munim-btn-secondary {
    background: #0f172a; border-color: rgba(255,255,255,0.12); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-topic {
    background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-fb-input {
    background: #0f172a; color: #e2e8f0; border-color: rgba(255,255,255,0.14);
  }
  :root:not(.light-mode) .munim-root.munim-collapsed .munim-char {
    background: #1e293b; border-color: rgba(96,165,250,0.3);
  }

  /* Tabs */
  :root:not(.light-mode) .munim-tabs { background: rgba(255,255,255,0.04); }
  :root:not(.light-mode) .munim-tab { color: #94a3b8; }
  :root:not(.light-mode) .munim-tab:hover { color: #e2e8f0; }
  :root:not(.light-mode) .munim-tab.active {
    background: #0f172a; color: #93c5fd; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }

  /* Typing teaser */
  :root:not(.light-mode) .munim-typing {
    background: #1e293b; border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  }
  :root:not(.light-mode) .munim-typing-dot { background: #93c5fd; }

  /* Welcome takeover */
  :root:not(.light-mode) .munim-welcome-overlay { background: rgba(0,0,0,0.72); }
  :root:not(.light-mode) .munim-welcome-card {
    background: #1e293b; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
  }
  :root:not(.light-mode) .munim-welcome-close {
    background: rgba(255,255,255,0.06); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-welcome-close:hover { background: rgba(255,255,255,0.12); }
  :root:not(.light-mode) .munim-welcome-badge {
    background: #0f172a; border-color: rgba(147,197,253,0.30); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-welcome-title { color: #f1f5f9; }
  :root:not(.light-mode) .munim-welcome-sub { color: #94a3b8; }
  :root:not(.light-mode) .munim-welcome-list li {
    background: rgba(147,197,253,0.06);
    border-color: rgba(147,197,253,0.16);
    color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-welcome-list li .material-symbols-rounded {
    background: #0f172a; color: #93c5fd;
  }
  :root:not(.light-mode) .munim-welcome-streak {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(249,115,22,0.10));
    border-color: rgba(245,158,11,0.32); color: #fbbf24;
  }
  :root:not(.light-mode) .munim-welcome-streak b { color: #fde68a; }
  :root:not(.light-mode) .munim-welcome-later { color: #94a3b8; }
  :root:not(.light-mode) .munim-welcome-later:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }
  :root:not(.light-mode) .munim-welcome-tip { color: #64748b; }

  /* Tours tab + rows */
  :root:not(.light-mode) .munim-tour-row {
    background: rgba(147,197,253,0.06); border-color: rgba(147,197,253,0.16);
  }
  :root:not(.light-mode) .munim-tour-row:hover {
    background: rgba(147,197,253,0.12); border-color: rgba(147,197,253,0.32);
  }
  :root:not(.light-mode) .munim-tour-icon { background: #4f46e5; color: #fff; }
  :root:not(.light-mode) .munim-tour-label { color: #e2e8f0; }
  :root:not(.light-mode) .munim-tour-where {
    background: rgba(255,255,255,0.06); color: #94a3b8;
  }
  :root:not(.light-mode) .munim-tour-here {
    background: rgba(147,197,253,0.16); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-tour-done { color: #34d399; }

  /* Streak badge */
  :root:not(.light-mode) .munim-streak-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #1e293b;
  }

  /* FAQ chips + Help tab */
  :root:not(.light-mode) .munim-fb-prompt { color: #cbd5e1; }
  :root:not(.light-mode) .munim-emoji-btn {
    background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.20); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-emoji-btn:hover {
    background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.36);
  }
  :root:not(.light-mode) .munim-emoji-btn.selected {
    background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.55);
  }
  :root:not(.light-mode) .munim-emoji-label { color: #e2e8f0; }
  :root:not(.light-mode) .munim-problem-chip {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-problem-chip.selected {
    background: rgba(59,130,246,0.20); border-color: rgba(59,130,246,0.50); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-channel-card {
    background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.32);
  }
  :root:not(.light-mode) .munim-channel-title { color: #4ade80; }
  :root:not(.light-mode) .munim-channel-sub { color: #94a3b8; }
  :root:not(.light-mode) .munim-ask-btn {
    background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.32); color: #34d399;
  }
  :root:not(.light-mode) .munim-ask-btn:hover { background: rgba(16,185,129,0.22); }

  /* FAQ list rows (Help tab body) — were rendering as light cards w/ near-invisible text */
  :root:not(.light-mode) .munim-faq-q {
    background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-faq-q:hover { background: rgba(59,130,246,0.14); }
  :root:not(.light-mode) .munim-faq-arrow { color: #93c5fd; }
  :root:not(.light-mode) .munim-faq-section-title { color: #94a3b8; }
  :root:not(.light-mode) .munim-faq-q-shown { color: #93c5fd; }
  :root:not(.light-mode) .munim-faq-answer { color: #cbd5e1; }
}

/* Explicit dark-mode toggle — FAQ rows (mirror of the @media block above) */
:root.dark-mode .munim-faq-q {
  background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
}
:root.dark-mode .munim-faq-q:hover { background: rgba(59,130,246,0.14); }
:root.dark-mode .munim-faq-arrow { color: #93c5fd; }
:root.dark-mode .munim-faq-section-title { color: #94a3b8; }
:root.dark-mode .munim-faq-q-shown { color: #93c5fd; }
:root.dark-mode .munim-faq-answer { color: #cbd5e1; }