/* ==========================================================
   VextaLearn — Global chat widget (launcher for the Brevo
   Conversations panel).

   The Brevo script's own floating button is disabled via
   `customWidgetButton` in base.html; this launcher replaces it so the
   chat entry point matches VextaLearn's design system, stays clear of
   the mobile bottom nav and the PWA install card, and is keyboard +
   screen-reader accessible. Behaviour lives in js/chat-widget.js.
   ========================================================== */

.vxt-chat-launcher {
  position: fixed;
  right: calc(16px + var(--vxt-safe-right, 0px));
  /* Above the mobile bottom nav (height ~64px, z-index 1030) so it can
     never cover navigation or its tap targets. */
  bottom: calc(76px + var(--vxt-safe-bottom, 0px));
  z-index: 1036;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gradient-brand, linear-gradient(135deg, #2563eb, #1d4ed8));
  color: #fff;
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, bottom 0.2s ease;
}
.vxt-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42); }
.vxt-chat-launcher:active { transform: scale(0.95); }
.vxt-chat-launcher:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.32); }

/* Icon swap: chat bubble when closed, X when the panel is open. */
.vxt-chat-launcher__icon { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.vxt-chat-launcher__icon--close { display: none; }
.vxt-chat-launcher[aria-expanded="true"] .vxt-chat-launcher__icon--open { display: none; }
.vxt-chat-launcher[aria-expanded="true"] .vxt-chat-launcher__icon--close { display: inline-flex; }

/* Desktop label: reads as a proper "Chat with us" pill instead of a
   mystery icon, while staying a single control. */
.vxt-chat-launcher__label {
  display: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Hidden until the Brevo script confirms it loaded, and when the chat
   isn't available (blocked script / offline). */
.vxt-chat-launcher[hidden],
.vxt-chat-launcher.vxt-chat-launcher--unavailable { display: none !important; }

/* Never stack on top of the PWA install card: step up while it's open. */
html.vxt-install-open .vxt-chat-launcher {
  bottom: calc(88px + var(--vxt-install-height, 160px) + var(--vxt-safe-bottom, 0px));
}

@media (min-width: 992px) {
  .vxt-chat-launcher {
    right: calc(20px + var(--vxt-safe-right, 0px));
    bottom: calc(20px + var(--vxt-safe-bottom, 0px));
    width: auto;
    height: 52px;
    padding: 0 20px;
    border-radius: 999px;
  }
  .vxt-chat-launcher__label { display: inline; }
  .vxt-chat-launcher[aria-expanded="true"] .vxt-chat-launcher__label { display: none; }
  .vxt-chat-launcher[aria-expanded="true"] { width: 52px; padding: 0; justify-content: center; }
  html.vxt-install-open .vxt-chat-launcher {
    bottom: calc(20px + var(--vxt-safe-bottom, 0px));
    right: calc(420px + var(--vxt-safe-right, 0px));
  }
}

/* While the chat panel is open on small screens, drop the launcher's
   shadow weight so it reads as a close control over the panel. */
.vxt-chat-launcher[aria-expanded="true"] {
  background: var(--text-primary, #111827);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .vxt-chat-launcher { transition: none; }
  .vxt-chat-launcher:hover { transform: none; }
}