:root {
  --bg: #eff3f8;
  --surface: #ffffff;
  --border: #d7e0ea;
  --text: #1a2a3d;
  --muted: #5f7288;
  --accent: #1972f5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Manrope", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.page {
  width: min(960px, 94vw);
  margin: 22px auto 90px;
  display: grid;
  gap: 12px;
}

.hero,
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17, 35, 56, 0.07);
}

.hero {
  padding: 18px;
}

.eyebrow {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 800;
}

.hero h1 {
  margin: 8px 0;
  font-size: clamp(1.28rem, 2.4vw, 2rem);
  line-height: 1.2;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chips span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f7faff;
  font-size: 12px;
  padding: 5px 9px;
  color: var(--muted);
}

.chips code {
  color: var(--text);
}

.panel {
  padding: 14px 16px;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.panel p,
.panel li {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.panel ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.panel.muted {
  background: #f9fbfe;
}

/* ==============================
   TUF -> Crisp Classic overrides
   ============================== */

#bzai-chat-toggle {
  width: auto !important;
  min-width: 152px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #1972f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(25, 114, 245, 0.3) !important;
  right: 20px !important;
  bottom: 18px !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

#bzai-chat-toggle::after {
  content: "Chat with us";
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

#bzai-chat-toggle span {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#bzai-chat-toggle:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(25, 114, 245, 0.34) !important;
}

/* Theme tokens */
.bzai-chat-window,
.bzai-chat-window.bzai-theme-light {
  --db-chat-bg: #ffffff;
  --db-chat-surface: #f8fbff;
  --db-chat-border: #d8e1ec;
  --db-chat-text: #1a2a3d;
  --db-chat-muted: #60758d;
  --db-header-btn-bg: #f8fbff;
  --db-header-btn-border: #d3deea;
  --db-header-btn-text: #5b7088;
  --db-header-btn-hover-bg: #edf3fa;
  --db-header-btn-hover-border: #c5d4e4;
  --db-rec-bg: #f6f9fd;
  --db-rec-title: #597087;
  --db-chip-bg: #ffffff;
  --db-chip-border: #d3deea;
  --db-chip-text: #4f657d;
  --db-chip-hover-bg: #eef4fb;
  --db-chip-hover-border: #c3d3e5;
  --db-chip-hover-text: #2a425d;
  --db-bot-avatar-bg: #edf3fa;
  --db-bot-avatar-border: #d3deea;
  --db-bot-avatar-text: #3f556f;
  --db-user-avatar-bg: #1972f5;
  --db-user-avatar-border: #1972f5;
  --db-user-avatar-text: #ffffff;
  --db-bot-bubble-bg: #f4f8fc;
  --db-bot-bubble-border: #d9e3ed;
  --db-bot-bubble-text: #243b53;
  --db-user-bubble-bg: #1972f5;
  --db-user-bubble-border: #1972f5;
  --db-user-bubble-text: #ffffff;
  --db-input-bg: #ffffff;
  --db-input-border: #cfdbe8;
  --db-input-text: #1a2a3d;
  --db-input-placeholder: #7a8ea4;
  --db-input-focus-shadow: rgba(25, 114, 245, 0.16);
  --db-footer-bg: #f7faff;
  --db-footer-text: #698095;
  --db-overlay-bg: #ffffff;
  --db-shadow: 0 22px 40px rgba(16, 35, 56, 0.2);
}

.bzai-chat-window.bzai-theme-dark {
  --db-chat-bg: #0f1722;
  --db-chat-surface: #152233;
  --db-chat-border: #2b3d53;
  --db-chat-text: #e7eff8;
  --db-chat-muted: #9eb2c9;
  --db-header-btn-bg: #182536;
  --db-header-btn-border: #32475d;
  --db-header-btn-text: #bdd0e6;
  --db-header-btn-hover-bg: #22344a;
  --db-header-btn-hover-border: #3c5670;
  --db-rec-bg: #16273a;
  --db-rec-title: #a8bdd5;
  --db-chip-bg: #122031;
  --db-chip-border: #2f445a;
  --db-chip-text: #c0d1e5;
  --db-chip-hover-bg: #1b3046;
  --db-chip-hover-border: #405b75;
  --db-chip-hover-text: #d5e3f2;
  --db-bot-avatar-bg: #203247;
  --db-bot-avatar-border: #32495f;
  --db-bot-avatar-text: #d1deed;
  --db-user-avatar-bg: #3f8df6;
  --db-user-avatar-border: #3f8df6;
  --db-user-avatar-text: #ffffff;
  --db-bot-bubble-bg: #1a2a3f;
  --db-bot-bubble-border: #2f445b;
  --db-bot-bubble-text: #dfebf8;
  --db-user-bubble-bg: #3f8df6;
  --db-user-bubble-border: #3f8df6;
  --db-user-bubble-text: #ffffff;
  --db-input-bg: #111f30;
  --db-input-border: #30465d;
  --db-input-text: #e6eff8;
  --db-input-placeholder: #8ca2b9;
  --db-input-focus-shadow: rgba(63, 141, 246, 0.24);
  --db-footer-bg: #152233;
  --db-footer-text: #9eb2c9;
  --db-overlay-bg: #0f1722;
  --db-shadow: 0 24px 42px rgba(2, 10, 20, 0.58);
}

.bzai-chat-window {
  width: 372px !important;
  right: 20px !important;
  bottom: 66px !important;
  border-radius: 12px !important;
  border: 1px solid var(--db-chat-border) !important;
  background: var(--db-chat-bg) !important;
  box-shadow: var(--db-shadow) !important;
}

.bzai-chat-window,
.bzai-chat-window.bzai-theme-light,
.bzai-chat-window.bzai-theme-dark {
  --surface-900: var(--db-chat-bg) !important;
  --surface-850: var(--db-chat-surface) !important;
  --text-primary: var(--db-chat-text) !important;
  --text-muted: var(--db-chat-muted) !important;
  --border-soft: var(--db-chat-border) !important;
}

.bzai-chat-header {
  background: var(--db-chat-bg) !important;
  border-bottom: 1px solid var(--db-chat-border) !important;
  padding: 11px 12px !important;
  gap: 8px !important;
}

.bzai-chat-header > img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--db-bot-avatar-bg) !important;
  border: 1px solid var(--db-bot-avatar-border) !important;
  padding: 3px !important;
}

.bzai-chat-header h1 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--db-chat-text) !important;
}

#bzai-contact-btn,
#bzai-chat-expand,
#bzai-theme-toggle,
#bzai-chat-close,
.bzai-chat-header button {
  width: 27px !important;
  height: 27px !important;
  border-radius: 7px !important;
  border: 1px solid var(--db-header-btn-border) !important;
  background: var(--db-header-btn-bg) !important;
  color: var(--db-header-btn-text) !important;
}

.bzai-chat-header button:hover {
  background: var(--db-header-btn-hover-bg) !important;
  border-color: var(--db-header-btn-hover-border) !important;
}

.bzai-chat-body {
  background: var(--db-chat-bg) !important;
  padding: 12px !important;
  gap: 8px !important;
}

.bzai-recommended-questions {
  background: var(--db-rec-bg) !important;
  border: 1px solid var(--db-chat-border) !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

.bzai-recommended-questions h3 {
  color: var(--db-rec-title) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}

.bzai-question-btn {
  background: var(--db-chip-bg) !important;
  border: 1px solid var(--db-chip-border) !important;
  color: var(--db-chip-text) !important;
  font-size: 11px !important;
  padding: 7px 10px !important;
}

.bzai-question-btn:hover {
  background: var(--db-chip-hover-bg) !important;
  border-color: var(--db-chip-hover-border) !important;
  color: var(--db-chip-hover-text) !important;
  transform: none !important;
}

.bzai-message-container.bot {
  align-self: flex-start !important;
  flex-direction: row !important;
}

.bzai-message-container.user {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}

.bzai-message-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}

.bzai-message-container.bot .bzai-message-avatar {
  background: var(--db-bot-avatar-bg) !important;
  border: 1px solid var(--db-bot-avatar-border) !important;
  color: var(--db-bot-avatar-text) !important;
}

.bzai-message-container.user .bzai-message-avatar {
  background: var(--db-user-avatar-bg) !important;
  border: 1px solid var(--db-user-avatar-border) !important;
  color: var(--db-user-avatar-text) !important;
}

.bzai-message-bubble {
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.bzai-message-bubble.bot {
  background: var(--db-bot-bubble-bg) !important;
  border: 1px solid var(--db-bot-bubble-border) !important;
  border-top-left-radius: 4px !important;
  color: var(--db-bot-bubble-text) !important;
}

.bzai-message-bubble.user {
  background: var(--db-user-bubble-bg) !important;
  border: 1px solid var(--db-user-bubble-border) !important;
  border-top-right-radius: 4px !important;
  color: var(--db-user-bubble-text) !important;
  font-weight: 600 !important;
}

.bzai-typing {
  background: var(--db-bot-bubble-bg) !important;
  border: 1px solid var(--db-bot-bubble-border) !important;
  border-radius: 10px !important;
  border-top-left-radius: 4px !important;
}

.bzai-typing-dot {
  background: var(--db-chat-muted) !important;
}

.bzai-chat-input {
  background: var(--db-chat-bg) !important;
  border-top: 1px solid var(--db-chat-border) !important;
  padding: 10px !important;
}

.bzai-chat-input input {
  background: var(--db-input-bg) !important;
  border: 1px solid var(--db-input-border) !important;
  color: var(--db-input-text) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
}

.bzai-chat-input input::placeholder {
  color: var(--db-input-placeholder) !important;
}

.bzai-chat-input input:focus {
  border-color: #1972f5 !important;
  box-shadow: 0 0 0 3px var(--db-input-focus-shadow) !important;
}

.bzai-chat-input button {
  background: #1972f5 !important;
  border: 1px solid #1972f5 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  min-width: 40px !important;
}

.bzai-chat-input button:hover {
  transform: none !important;
  filter: brightness(0.96) !important;
}

.bzai-chat-footer {
  background: var(--db-footer-bg) !important;
  border-top: 1px solid var(--db-chat-border) !important;
  color: var(--db-footer-text) !important;
}

.bzai-chat-footer a {
  color: #1972f5 !important;
}

.bzai-contact-form-overlay {
  background: var(--db-overlay-bg) !important;
}

.bzai-contact-form-overlay h2 {
  color: var(--db-chat-text) !important;
}

.bzai-contact-form-overlay input {
  background: var(--db-input-bg) !important;
  border: 1px solid var(--db-input-border) !important;
  color: var(--db-input-text) !important;
}

.bzai-contact-form-overlay input::placeholder {
  color: var(--db-input-placeholder) !important;
}

.bzai-contact-form-overlay .bzai-close-btn {
  background: var(--db-header-btn-bg) !important;
  border: 1px solid var(--db-header-btn-border) !important;
  color: var(--db-header-btn-text) !important;
}

.bzai-contact-form-overlay .bzai-close-btn:hover {
  background: var(--db-header-btn-hover-bg) !important;
  border-color: var(--db-header-btn-hover-border) !important;
}

.bzai-contact-form-overlay button {
  background: #1972f5 !important;
  border: 1px solid #1972f5 !important;
  color: #ffffff !important;
}

.bzai-contact-form-footer {
  color: var(--db-chat-muted) !important;
  border-top-color: var(--db-chat-border) !important;
}

@media (max-width: 560px) {
  #bzai-chat-toggle {
    right: 12px !important;
    bottom: 12px !important;
    min-width: 148px !important;
  }

  .bzai-chat-window {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    bottom: 58px !important;
    height: min(78vh, 620px) !important;
  }

  #bzai-chat-toggle::after {
    font-size: 12px;
  }
}

/* Launcher nudge popup */
.bzai-launcher-nudge {
  position: fixed;
  right: 20px;
  bottom: 68px;
  width: min(292px, calc(100vw - 40px));
  background: #ffffff;
  border: 1px solid #d7e2ee;
  border-radius: 11px;
  box-shadow: 0 16px 34px rgba(17, 35, 56, 0.2);
  padding: 11px 34px 11px 12px;
  color: #1f334a;
  z-index: 9998;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bzai-launcher-nudge.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bzai-launcher-nudge::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-right: 1px solid #d7e2ee;
  border-bottom: 1px solid #d7e2ee;
  transform: rotate(45deg);
}

.bzai-launcher-nudge p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #425a73;
}

.bzai-launcher-nudge p strong {
  color: #1f334a;
}

.bzai-launcher-nudge-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid #d4deea;
  border-radius: 6px;
  background: #f6f9fd;
  color: #607890;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.bzai-launcher-nudge-close:hover {
  background: #ecf2f9;
}

@media (max-width: 560px) {
  .bzai-launcher-nudge {
    right: 12px;
    bottom: 62px;
    width: calc(100vw - 24px);
    max-width: 320px;
  }
}