/* =========================================================
   Chatbot UI — Polished v2
   - Keeps existing class names/structure
   - Adds theme variables, glassmorphism, motion polish
   - Improves readability and spacing
   ========================================================= */

/* Theme */
:root {
  --z-top: 2147483647;
  --z-modal: 2147483646;

  --bg-body: #5e9bbe;
  --bg-panel: rgba(0, 200, 255, 0.82);         /* glass base */
  --bg-panel-solid: #20374f79;                  /* fallback, no blur support */
  --bg-backdrop: rgba(0, 0, 0, 0.45);
  --glass-stroke: rgba(255, 255, 255, 0.06);

  --brand: #cae8f9;
  --brand-600: #08d2fa;
  --brand-700: #0984c2;

  --text: #f7f8fb;
  --text-dim: #daefff;
  --text-muted: #9aabb2;

  --bubble-bot: rgba(163, 207, 226, 0.529);
  --bubble-user: linear-gradient(135deg, #a6e7ff, #7dc9ff);

  --shadow-lg: 0 24px 72px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 2px rgba(11,98,255,0.25);

  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius-md: 10px;

  --border: 1px solid var(--glass-stroke);

  --transition-fast: .18s ease;
  --transition-med: .24s ease;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Keep the chatbot root outside global fades; allow inner elements to animate */
#chatbot, .chatbot { opacity: 1 !important; }

/* Toggle button — minimal, single-source of truth (works for both class and id variants) */
#chatbot-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-top);
}

button.chatbot-toggle,
#chatbot-toggle-btn,
[data-chatbot-toggle] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.05rem .7rem .9rem;
  min-height: 48px;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font: 600 14px/1 var(--font);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  outline: none;
}

/* Hide toggle when chat is open */
.chatbot.is-open ~ #chatbot-toggle,
.chatbot.is-open ~ .chatbot-toggle,
.chatbot.is-open ~ #chatbot-toggle-btn,
.chatbot.is-open [data-chatbot-toggle] {
  display: none !important;
}

/* Keep only the inline SVG icon; allow text label via ::after */
button.chatbot-toggle::before,
#chatbot-toggle-btn::before,
[data-chatbot-toggle]::before { content: none !important; }

/* Show text label pulled from data-label */
button.chatbot-toggle::after,
#chatbot-toggle-btn::after,
[data-chatbot-toggle]::after {
  content: attr(data-label) !important;
  font: 600 14px/1 var(--font);
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Also hide based on the toggle’s expanded state (works regardless of DOM order) */
#chatbot-toggle-btn[aria-expanded="true"],
button.chatbot-toggle[aria-expanded="true"],
[data-chatbot-toggle][aria-expanded="true"] {
  display: none !important;
}

button.chatbot-toggle:hover,
#chatbot-toggle-btn:hover,
[data-chatbot-toggle]:hover { filter: brightness(1.05); box-shadow: var(--shadow-lg); }

button.chatbot-toggle:active,
#chatbot-toggle-btn:active,
[data-chatbot-toggle]:active { transform: translateY(1px); }

button.chatbot-toggle:focus-visible,
#chatbot-toggle-btn:focus-visible,
[data-chatbot-toggle]:focus-visible { box-shadow: var(--ring); }

/* If both variants exist on a page, prefer the nav-injected `.chatbot-toggle` and hide the legacy id button */
html:has(.chatbot-toggle) #chatbot-toggle-btn { display: none !important; }

/* Dialog container */
.chatbot[hidden] { display: none; }
.chatbot {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  font-family: var(--font);
  color: var(--text);
}

/* Backdrop */
.chatbot__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
}

/* Panel (glassy) */
.chatbot__panel {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: min(420px, 94vw);
  height: min(620px, 85vh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-panel-solid);
  color: var(--text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: transform var(--transition-med), opacity var(--transition-med);
  border: var(--border);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Open state */
.chatbot.is-open .chatbot__backdrop {
  opacity: 1;
  pointer-events: auto;
}
.chatbot.is-open .chatbot__panel {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.chatbot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1rem;
  background:
    linear-gradient(180deg, rgba(18,32,58,.9), rgba(15,26,46,.9)),
    linear-gradient(135deg, rgba(11,98,255,.25), transparent 60%);
  border-bottom: var(--border);
}
.chatbot__title {
  font-weight: 600;
  letter-spacing: .2px;
}
.chatbot__subtitle {
  color: var(--text-muted);
  font-size: .85rem;
}
.chatbot__close {
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.chatbot__close:hover { background: rgba(255,255,255,.16); transform: scale(1.04); }

/* Messages */
.chatbot__messages {
  padding: 1rem;
  overflow: auto;
  background:
    radial-gradient(1000px 600px at 120% -10%, rgba(11,98,255,.08), transparent 60%),
    radial-gradient(800px 400px at -20% 110%, rgba(61,200,255,.06), transparent 55%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.chatbot__messages::-webkit-scrollbar { width: 10px; }
.chatbot__messages::-webkit-scrollbar-track { background: transparent; }
.chatbot__messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  border: 2px solid transparent;
}

.chatbot__message {
  position: relative;
  padding: .7rem .8rem;
  margin: .625rem 0;
  border-radius: 14px;
  max-width: 86%;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap; /* preserve line breaks from model */
  backdrop-filter: blur(2px);
}
.chatbot__message--bot {
  background: var(--bubble-bot);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text-dim);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.chatbot__message--user {
  background: var(--bubble-user);
  color: #fff;
  margin-left: auto;
  box-shadow: 0 8px 24px rgba(11,98,255,.25);
}

/* Optional subtle tails */
.chatbot__message--bot::after,
.chatbot__message--user::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px; height: 10px;
  transform: translateY(50%) rotate(45deg);
  filter: blur(.2px);
}
.chatbot__message--bot::after {
  left: 10px;
  background: var(--bubble-bot);
  border-left: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.chatbot__message--user::after {
  right: 10px;
  background: #0b62ff;
}

/* Inline content */
.chatbot__message b, .chatbot__message strong { color: #fff; }
.chatbot__message a {
  color: #1479ae;
  text-decoration: none;
  border-bottom: 1px dashed rgba(137,180,255,.45);
}
.chatbot__message a:hover { color: #b9d1ff; border-bottom-style: solid; }

/* Form */
.chatbot__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
  padding: .85rem;
  border-top: var(--border);
  background:
    linear-gradient(180deg, rgba(16,19,26,.7), rgba(16,19,26,.9));
  backdrop-filter: blur(10px);
}
.chatbot__form input {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(14, 20, 32, 0.85);
  color: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.chatbot__form input::placeholder { color: rgba(255,255,255,.35); }
.chatbot__form input:focus {
  outline: none;
  border-color: rgba(11,98,255,.55);
  box-shadow: var(--ring);
  background: rgba(14, 20, 32, 0.95);
}

.chatbot__send {
  padding: .8rem 1rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), #3bbeff);
  color: #fff;
  cursor: pointer;
  min-width: 96px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  box-shadow: 0 8px 20px rgba(11,98,255,.25);
}
.chatbot__send:hover { filter: brightness(1.08); box-shadow: 0 10px 26px rgba(11,98,255,.3); }
.chatbot__send:active { transform: translateY(1px); }

/* Accessibility helper */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* Typing indicator (optional; add a .chatbot__typing element if desired) */
.chatbot__typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .6rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim);
  font-size: .9rem;
}
.chatbot__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .5;
  animation: blink 1.2s infinite ease-in-out;
}
.chatbot__dot:nth-child(2) { animation-delay: .15s; }
.chatbot__dot:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}

/* Narrow devices fine-tune */
@media (max-width: 380px) {
  .chatbot__panel {
    right: .75rem;
    bottom: .75rem;
    width: min(94vw, 380px);
    height: min(82vh, 560px);
  }
}

/* ==========================================
   Nav dropdown — glassmorphism to match chatbot
   (Visual-only: no structure/behavior changes)
   ========================================== */

/* Base variables with safe fallbacks (use chatbot vars if present) */
:root {
  --nav-glass-bg: var(--bg-panel-solid, rgba(18, 30, 46, 0.78));
  --nav-glass-stroke: var(--glass-stroke, rgba(255,255,255,0.06));
  --nav-shadow-lg: var(--shadow-lg, 0 24px 72px rgba(0,0,0,0.45));
  --nav-radius: var(--radius-xl, 16px);
  --nav-text: var(--text, #f7f8fb);
  --nav-text-dim: var(--text-dim, #daefff);
  --nav-text-muted: var(--text-muted, #9aabb2);
  --nav-ring: var(--ring, 0 0 0 2px rgba(11,98,255,0.25));
}

/* Attempt to catch common dropdown containers without changing HTML */
/* Panels/lists that open under top nav links */
nav .nav__dropdown,
nav .nav__panel,
nav .dropdown,
nav .dropdown-menu,
nav [role="menu"],
.nav .nav__dropdown,
.nav .nav__panel,
.nav .dropdown,
.nav .dropdown-menu,
.nav [role="menu"] {
  background: var(--nav-glass-bg);
  color: var(--nav-text);
  border: 1px solid var(--nav-glass-stroke);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow-lg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  overflow: hidden;
  /* subtle entrance motion; only visible when implementers toggle display/opacity */
  transform: translateY(8px) scale(.98);
  opacity: 0.0;
  transition: transform .24s ease, opacity .24s ease, visibility .24s ease;
}

/* Common "open" states — support multiple class/aria patterns without markup edits */
nav .nav__dropdown.is-open,
nav .nav__panel.is-open,
nav .dropdown.is-open,
nav .dropdown-menu.is-open,
nav [role="menu"][data-open="true"],
nav [aria-expanded="true"] + .nav__dropdown,
nav [aria-expanded="true"] + .dropdown,
nav [aria-haspopup="true"][aria-expanded="true"] ~ [role="menu"],
.nav .nav__dropdown.is-open,
.nav .nav__panel.is-open,
.nav .dropdown.is-open,
.nav .dropdown-menu.is-open,
.nav [role="menu"][data-open="true"],
.nav [aria-expanded="true"] + .nav__dropdown,
.nav [aria-expanded="true"] + .dropdown,
.nav [aria-haspopup="true"][aria-expanded="true"] ~ [role="menu"] {
  transform: none;
  opacity: 1;
}

/* Menu items */
nav .nav__dropdown a,
nav .dropdown-menu a,
nav [role="menu"] a,
.nav .nav__dropdown a,
.nav .dropdown-menu a,
.nav [role="menu"] a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  color: var(--nav-text-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Remove last divider gracefully */
nav .nav__dropdown a:last-child,
nav .dropdown-menu a:last-child,
nav [role="menu"] a:last-child,
.nav .nav__dropdown a:last-child,
.nav .dropdown-menu a:last-child,
.nav [role="menu"] a:last-child {
  border-bottom: 0;
}

/* Hover/focus polish */
nav .nav__dropdown a:hover,
nav .dropdown-menu a:hover,
nav [role="menu"] a:hover,
nav .nav__dropdown a:focus-visible,
nav .dropdown-menu a:focus-visible,
nav [role="menu"] a:focus-visible,
.nav .nav__dropdown a:hover,
.nav .dropdown-menu a:hover,
.nav [role="menu"] a:hover,
.nav .nav__dropdown a:focus-visible,
.nav .dropdown-menu a:focus-visible,
.nav [role="menu"] a:focus-visible {
  background: linear-gradient(135deg, rgba(11,98,255,.16), rgba(61,200,255,.10));
  color: var(--nav-text);
  outline: none;
  box-shadow: none;
}

/* Keyboard ring on focusable links inside dropdown */
nav .nav__dropdown a:focus-visible,
nav .dropdown-menu a:focus-visible,
nav [role="menu"] a:focus-visible,
.nav .nav__dropdown a:focus-visible,
.nav .dropdown-menu a:focus-visible,
.nav [role="menu"] a:focus-visible {
  border-radius: 10px;
  box-shadow: var(--nav-ring);
}

/* Section headers or muted text inside dropdowns (if present) */
nav .nav__dropdown .muted,
nav .dropdown-menu .muted,
nav [role="menu"] .muted,
.nav .nav__dropdown .muted,
.nav .dropdown-menu .muted,
.nav [role="menu"] .muted {
  color: var(--nav-text-muted);
}

/* Optional tiny caret style alignment if your dropdown uses it */
nav .nav__dropdown::before,
nav .dropdown-menu::before,
nav [role="menu"]::before,
.nav .nav__dropdown::before,
.nav .dropdown-menu::before,
.nav [role="menu"]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px; height: 12px;
  background: var(--nav-glass-bg);
  border-left: 1px solid var(--nav-glass-stroke);
  border-top: 1px solid var(--nav-glass-stroke);
  transform: rotate(45deg);
  filter: blur(.2px);
}

/* Scrollable dropdown panels keep the glass scrollbar look */
nav .nav__dropdown,
nav .dropdown-menu,
nav [role="menu"],
.nav .nav__dropdown,
.nav .dropdown-menu,
.nav [role="menu"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
nav .nav__dropdown::-webkit-scrollbar,
nav .dropdown-menu::-webkit-scrollbar,
nav [role="menu"]::-webkit-scrollbar,
.nav .nav__dropdown::-webkit-scrollbar,
.nav .dropdown-menu::-webkit-scrollbar,
.nav [role="menu"]::-webkit-scrollbar { width: 10px; }
nav .nav__dropdown::-webkit-scrollbar-track,
nav .dropdown-menu::-webkit-scrollbar-track,
nav [role="menu"]::-webkit-scrollbar-track,
.nav .nav__dropdown::-webkit-scrollbar-track,
.nav .dropdown-menu::-webkit-scrollbar-track,
.nav [role="menu"]::-webkit-scrollbar-track { background: transparent; }
nav .nav__dropdown::-webkit-scrollbar-thumb,
nav .dropdown-menu::-webkit-scrollbar-thumb,
nav [role="menu"]::-webkit-scrollbar-thumb,
.nav .nav__dropdown::-webkit-scrollbar-thumb,
.nav .dropdown-menu::-webkit-scrollbar-thumb,
.nav [role="menu"]::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  border: 2px solid transparent;
}