/* ══════════════════════════════════════════════════════
   XEVYTE AI — WIDGET CSS
   Exact CSS from the Elementor HTML widget design,
   delivered as a WordPress-enqueued stylesheet.
   ─────────────────────────────────────────────────────
   Section 1: Hero search section  (.xev-ai-section, etc.)
   Section 2: Chat modal           (.xev-ai-modal, etc.)
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   SECTION 1 — HERO SEARCH SECTION
   Exact copy of Style Block 1 from the Elementor widget
══════════════════════════════════════════════════════ */

/* SCOPED RESET */
.xev-ai-section,
.xev-ai-section *,
.xev-ai-section *::before,
.xev-ai-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Wix Madefor Display', sans-serif;
}

/* Self-contained border reset: only this section, no global Elementor rules.
   Elementor parent borders are removed by JS removeBorders() which targets
   only Elementor wrapper classes, not all ancestors. */
.xev-ai-section {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* OUTER SECTION — Background: #e5e7f0 */
.xev-ai-section {
  background: #e5e7f0;
  width: 100%;
  padding: 0vw 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD — Background: #F1F2F7 · border-radius: 0.5vw */
.xev-ai-card {
  background: #F1F2F7;
  border: 1px solid rgba(1, 20, 74, 0.09);
  border-radius: 0.5vw;
  padding: 3.2vw 3.6vw 2.8vw;
  width: 100%;
  max-width: 85vw;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(1, 20, 74, 0.04),
    0 8px 32px rgba(1, 20, 74, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

/* Subtle top edge highlight */
.xev-ai-card::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(0, 193, 208, 0.30) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    transparent
  );
}

/* EYEBROW */
.xev-ai-eyebrow {
  display: block;
  font-size: 0.62vw;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3948c1;
  margin-bottom: 0.9vw;
  opacity: 0;
  transform: translateY(14px);
}

/* HEADING */
.xev-ai-heading {
  font-size: 2.5vw;
  font-weight: 400;
  color: #01144A;
  line-height: 1.12;
  letter-spacing: -0.04vw;
  margin-bottom: 2vw;
  opacity: 0;
  transform: translateY(18px);
}

/* INPUT WRAPPER — Background: #F8F9FC · border-radius: 0.5vw */
.xev-ai-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75vw;
  background: #F8F9FC;
  border: none !important;
  outline: none !important;
  border-radius: 0.5vw;
  padding: 0 1.4vw;
  height: 3.9vw;
  margin-bottom: 1vw;
  cursor: text;
  box-shadow: none;
  transition: box-shadow 0.22s ease;
  opacity: 0;
  transform: translateY(16px);
}
.xev-ai-input-wrap:focus-within {
  box-shadow: 0 0 0 3.5px rgba(0, 193, 208, 0.15);
}

/* SPARKLE ICON */
.xev-ai-sparkle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.3vw;
  height: 1.3vw;
  position: relative;
}
.xev-ai-sparkle {
  width: 100%;
  height: 100%;
  color: rgba(1, 20, 74, 0.28);
  display: block;
  transition: color 0.22s ease;
}
.xev-ai-input-wrap:focus-within .xev-ai-sparkle {
  color: #00C1D0;
}

/* INPUT FIELD */
.xev-ai-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 1.1vw;
  font-weight: 400;
  color: #01144A;
  line-height: 1;
  min-width: 0;
}
.xev-ai-input::placeholder {
  color: rgba(1, 20, 74, 0.32);
  font-weight: 400;
}

/* SEND ARROW — appears on typing */
.xev-ai-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2vw;
  height: 2vw;
  border-radius: 0.45vw;
  background: #01144A;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.xev-ai-send.xev-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.xev-ai-send:hover { background: #00A4B0; }
.xev-ai-send svg   { width: 0.9vw; height: 0.9vw; }

/* HINT TEXT */
.xev-ai-hint {
  font-size: 0.78vw;
  font-weight: 400;
  color: rgba(1, 20, 74, 0.40);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
}

/* PILL SUGGESTIONS */
.xev-ai-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  margin-top: 0.9vw;
  opacity: 0;
  transform: translateY(10px);
}
.xev-ai-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3vw 0.8vw;
  font-size: 22px;
  font-weight: 400;
  color: rgba(1, 20, 74, 0.55);
  background: rgba(1, 20, 74, 0.05);
  border: 1px solid rgba(1, 20, 74, 0.08);
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.xev-ai-pill:hover {
  color: #00C1D0;
  background: rgba(0, 193, 208, 0.07);
  border-color: rgba(0, 193, 208, 0.25);
}

/* TABLET — 1024px */
@media (max-width: 1024px) {
  .xev-ai-section    { padding: 60px 24px; }
  .xev-ai-card       { max-width: 90vw; border-radius: 7px; padding: 36px 40px 32px; }
  .xev-ai-eyebrow    { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 10px; }
  .xev-ai-heading    { font-size: 30px; letter-spacing: -0.5px; margin-bottom: 22px; }
  .xev-ai-input-wrap { height: 56px; border-radius: 7px; padding: 0 18px; gap: 10px; margin-bottom: 12px; }
  .xev-ai-sparkle-wrap { width: 20px; height: 20px; }
  .xev-ai-input      { font-size: 15px; }
  .xev-ai-send       { width: 32px; height: 32px; border-radius: 7px; }
  .xev-ai-send svg   { width: 14px; height: 14px; }
  .xev-ai-hint       { font-size: 12px; }
  .xev-ai-pill       { font-size: 18px; padding: 5px 12px; }
}

/* MOBILE — 768px */
@media (max-width: 768px) {
  .xev-ai-section    { padding: 48px 16px; }
  .xev-ai-card       { max-width: 100%; border-radius: 7px; padding: 28px 24px 24px; }
  .xev-ai-eyebrow    { font-size: 9px; margin-bottom: 8px; }
  .xev-ai-heading    { font-size: 22px; letter-spacing: -0.3px; margin-bottom: 18px; }
  .xev-ai-input-wrap { height: 50px; border-radius: 7px; padding: 0 14px; gap: 8px; margin-bottom: 10px; }
  .xev-ai-sparkle-wrap { width: 17px; height: 17px; }
  .xev-ai-input      { font-size: 14px; }
  .xev-ai-send       { width: 28px; height: 28px; border-radius: 6px; }
  .xev-ai-send svg   { width: 12px; height: 12px; }
  .xev-ai-hint       { font-size: 11px; }
  .xev-ai-pill       { font-size: 14px; padding: 4px 10px; }
  .xev-ai-pills      { gap: 6px; margin-top: 10px; }
}

/* ══════════════════════════════════════════════════════
   SECTION 2 — CHAT MODAL
   Redesigned to match the .xev-ai-card design system:
   #e5e7f0 backdrop → centred #F1F2F7 card → consistent
   with the hero search section visual language.
══════════════════════════════════════════════════════ */

/* Scoped reset — modal + all descendants */
.xev-ai-modal,
.xev-ai-modal *,
.xev-ai-modal *::before,
.xev-ai-modal *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 400;
}

body.xev-ai-modal-open { overflow: hidden; }

/* ── Modal shell ─────────────────────────────────────
   Flex container that centres the card on #e5e7f0.
   Matches the outer .xev-ai-section background.       */
.xev-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 2vw;
}
.xev-ai-modal[hidden] { display: none; }

/* Backdrop fades in as #e5e7f0 — same as search section */
.xev-ai-modal__backdrop {
  position: absolute;
  inset: 0;
  background: #e5e7f0;
}

/* ── Chat card ────────────────────────────────────────
   Mirrors .xev-ai-card exactly: F1F2F7 background,
   0.5vw radius, top-edge shimmer, same shadow.        */
.xev-ai-modal__panel {
  position: relative;
  background: #F1F2F7;
  border: 1px solid rgba(1, 20, 74, 0.09);
  border-radius: 0.5vw;
  box-shadow:
    0 2px 4px rgba(1, 20, 74, 0.04),
    0 8px 40px rgba(1, 20, 74, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  max-width: 85vw;
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top-edge teal shimmer (mirrors .xev-ai-card::before) */
.xev-ai-modal__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(0, 193, 208, 0.30) 50%,
    rgba(255, 255, 255, 0.85) 70%,
    transparent
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Header ─────────────────────────────────────────── */
.xev-ai-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(1, 20, 74, 0.07);
  flex-shrink: 0;
  background: #F1F2F7;
}
.xev-ai-modal__eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3948c1;
  margin-bottom: 3px;
}
.xev-ai-modal__title {
  font-size: 16px;
  color: #01144A;
  line-height: 1.2;
}
.xev-ai-modal__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(1, 20, 74, 0.06);
  color: #01144A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.xev-ai-modal__close svg { width: 15px; height: 15px; }
.xev-ai-modal__close:hover { background: rgba(0, 193, 208, 0.12); color: #00A4B0; }
.xev-ai-modal__close:focus-visible { outline: 2px solid #00C1D0; outline-offset: 2px; }

/* ── Messages area ───────────────────────────────────
   Full width of the card, vertical scroll.            */
.xev-ai-modal__messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Row alignment */
.xev-ai-modal__row { display: flex; }
.xev-ai-modal__row--user { justify-content: flex-end; }
.xev-ai-modal__row--bot  { justify-content: flex-start; }

/* ── Message bubbles ─────────────────────────────────
   Desktop: 70% max-width, 15px, 1.55 line-height.    */
.xev-ai-modal__bubble {
  padding: 13px 17px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.xev-ai-modal__bubble--user {
  max-width: 70%;
  background: #01144A;
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.xev-ai-modal__bubble--bot {
  max-width: 72%;
  background: #FFFFFF;
  color: #01144A;
  border: 1px solid rgba(1, 20, 74, 0.08);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(1, 20, 74, 0.04);
}

/* ── Markdown inside bot bubbles ─────────────────── */
.xev-ai-modal__bubble--bot .xev-md-p  { margin: 0 0 9px; }
.xev-ai-modal__bubble--bot .xev-md-p:last-child { margin-bottom: 0; }
.xev-ai-modal__bubble--bot .xev-md-h2 {
  font-size: 15px;
  color: #01144A;
  margin: 13px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(1, 20, 74, 0.09);
  line-height: 1.3;
}
.xev-ai-modal__bubble--bot .xev-md-h2:first-child { margin-top: 0; }
.xev-ai-modal__bubble--bot .xev-md-h3 {
  font-size: 14px;
  color: #3948c1;
  margin: 11px 0 5px;
  line-height: 1.3;
}
.xev-ai-modal__bubble--bot .xev-md-h3:first-child { margin-top: 0; }
.xev-ai-modal__bubble--bot .xev-md-ul {
  margin: 5px 0 9px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}
.xev-ai-modal__bubble--bot .xev-md-ul li::before {
  content: '▸';
  color: #00C1D0;
  margin-right: 7px;
  font-size: 10px;
}
.xev-ai-modal__bubble--bot .xev-md-ol {
  margin: 5px 0 9px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xev-ai-modal__bubble--bot .xev-md-ol li { list-style: decimal; }
.xev-ai-modal__bubble--bot .xev-md-code {
  background: rgba(1, 20, 74, 0.06);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.xev-ai-modal__bubble--bot .xev-md-link {
  color: #00C1D0;
  text-decoration: underline;
  word-break: break-all;
}
.xev-ai-modal__bubble--bot .xev-md-bq {
  border-left: 3px solid rgba(0, 193, 208, 0.4);
  margin: 7px 0;
  padding: 4px 12px;
  color: rgba(1, 20, 74, 0.65);
  font-style: italic;
}
.xev-ai-modal__bubble--bot .xev-md-hr {
  border: none;
  border-top: 1px solid rgba(1, 20, 74, 0.10);
  margin: 9px 0;
}
.xev-ai-modal__bubble--bot strong { font-weight: 400; border-bottom: 1.5px solid rgba(0,193,208,0.4); }
.xev-ai-modal__bubble--bot em { font-style: italic; color: rgba(1,20,74,0.78); }

/* ── Typing indicator ─────────────────────────────── */
.xev-ai-modal__typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px 17px;
  background: #FFFFFF;
  border: 1px solid rgba(1, 20, 74, 0.08);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
  box-shadow: 0 1px 4px rgba(1, 20, 74, 0.04);
}
.xev-ai-modal__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(1, 20, 74, 0.30);
  animation: xevTypingBounce 1.1s infinite ease-in-out;
}
.xev-ai-modal__typing span:nth-child(2) { animation-delay: 0.15s; }
.xev-ai-modal__typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes xevTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Input bar ────────────────────────────────────────
   Matches .xev-ai-input-wrap from the search section. */
.xev-ai-modal__inputbar {
  flex-shrink: 0;
  padding: 14px 28px 18px;
  background: #F1F2F7;
  border-top: 1px solid rgba(1, 20, 74, 0.07);
}
.xev-ai-modal__inputbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8F9FC;
  border-radius: 0.5vw;
  padding: 0 16px;
  height: 52px;
  cursor: text;
  transition: box-shadow 0.22s ease;
}
.xev-ai-modal__inputbar-inner:focus-within {
  box-shadow: 0 0 0 3.5px rgba(0, 193, 208, 0.15);
}
.xev-ai-modal__input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-family: 'Wix Madefor Display', sans-serif;
  font-size: 15px;
  color: #01144A;
  line-height: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.xev-ai-modal__input::placeholder { color: rgba(1, 20, 74, 0.32); }
.xev-ai-modal__send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 7px;
  background: #01144A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.xev-ai-modal__send svg { width: 15px; height: 15px; }
.xev-ai-modal__send:hover:not(:disabled) { background: #00A4B0; }
.xev-ai-modal__send:disabled { opacity: 0.40; cursor: not-allowed; }
.xev-ai-modal__send:focus-visible { outline: 2px solid #00C1D0; outline-offset: 2px; }
.xev-ai-modal__hint {
  font-size: 11px;
  color: rgba(1, 20, 74, 0.32);
  text-align: center;
  margin-top: 7px;
  font-family: 'Wix Madefor Display', sans-serif;
}

/* ══════════════════════════════════════════════════════
   WELCOME SCREEN + QUICK-REPLY CHIPS
   Inline pill style — not full width — matching the
   pill suggestions from the search section.
══════════════════════════════════════════════════════ */
.xev-welcome {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xev-welcome__msg {
  background: #FFFFFF;
  border: 1px solid rgba(1, 20, 74, 0.08);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 13px 17px;
  font-size: 15px;
  color: #01144A;
  line-height: 1.6;
  max-width: 72%;
  box-shadow: 0 1px 4px rgba(1, 20, 74, 0.04);
}

/* Chip row — wraps naturally, NOT full width */
.xev-qr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Pill chip — exact spec from requirements doc */
.xev-qr-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(1, 20, 74, 0.05);
  border: 1px solid rgba(1, 20, 74, 0.08);
  color: rgba(1, 20, 74, 0.62);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Wix Madefor Display', sans-serif;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.xev-qr-chip:hover {
  background: rgba(0, 193, 208, 0.07);
  border-color: rgba(0, 193, 208, 0.25);
  color: #00A4B0;
}
.xev-qr-chip--back {
  background: transparent;
  border-color: rgba(1, 20, 74, 0.12);
  color: rgba(1, 20, 74, 0.45);
  font-size: 12px;
  padding: 6px 12px;
}
.xev-qr-chip--back:hover { color: #01144A; border-color: rgba(1,20,74,0.28); background: transparent; }
.xev-qr-chip:focus-visible { outline: 2px solid #00C1D0; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════
   FOLLOW-UP SUGGESTION CHIPS (post-reply)
   Appear below each bot reply.
══════════════════════════════════════════════════════ */
.xev-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 72%;
}
.xev-suggestions__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(1, 20, 74, 0.32);
  margin-bottom: 2px;
  font-family: 'Wix Madefor Display', sans-serif;
}
.xev-suggestion-chip {
  background: rgba(1, 20, 74, 0.04);
  border: 1px solid rgba(1, 20, 74, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 400;
  color: rgba(1, 20, 74, 0.70);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  width: 100%;
  display: block;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.xev-suggestion-chip:hover {
  border-color: rgba(0, 193, 208, 0.30);
  background: rgba(0, 193, 208, 0.05);
  color: #00A4B0;
}
.xev-suggestion-chip:focus-visible { outline: 2px solid #00C1D0; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════
   SOURCE CARDS (hidden — replaced by suggestions)
══════════════════════════════════════════════════════ */
.xev-sources { display: none !important; }

/* ══════════════════════════════════════════════════════
   CONTACT US CTA
══════════════════════════════════════════════════════ */
.xev-ctas { display: flex; gap: 8px; flex-wrap: wrap; max-width: 72%; }
.xev-cta--contact {
  background: #01144A;
  border: 1.5px solid #01144A;
  color: #FFFFFF !important;
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 14px;
  font-family: 'Wix Madefor Display', sans-serif;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.xev-cta--contact:hover { background: #00C1D0; border-color: #00C1D0; }

/* ══════════════════════════════════════════════════════
   TABLET — max-width: 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .xev-ai-modal         { padding: 20px; }
  .xev-ai-modal__panel  { max-width: 90vw; border-radius: 8px; height: calc(100vh - 40px); }
  .xev-ai-modal__header { padding: 16px 20px 14px; }
  .xev-ai-modal__messages { padding: 18px 20px; }
  .xev-ai-modal__bubble { font-size: 14px; }
  .xev-ai-modal__bubble--user { max-width: 76%; }
  .xev-ai-modal__bubble--bot  { max-width: 80%; }
  .xev-welcome__msg     { max-width: 80%; font-size: 14px; }
  .xev-suggestions      { max-width: 80%; }
  .xev-ctas             { max-width: 80%; }
  .xev-ai-modal__inputbar       { padding: 12px 20px 16px; }
  .xev-ai-modal__inputbar-inner { border-radius: 8px; height: 48px; padding: 0 14px; }
  .xev-ai-modal__input  { font-size: 14px; }
  .xev-ai-modal__send   { width: 32px; height: 32px; border-radius: 6px; }
  .xev-ai-modal__send svg { width: 14px; height: 14px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .xev-ai-modal         { padding: 0; align-items: flex-end; }
  .xev-ai-modal__panel  { max-width: 100%; border-radius: 16px 16px 0 0; height: 92vh; }
  .xev-ai-modal__panel::before { display: none; }
  .xev-ai-modal__header { padding: 14px 16px 12px; }
  .xev-ai-modal__messages { padding: 16px; gap: 10px; }
  .xev-ai-modal__bubble { font-size: 14px; padding: 11px 14px; }
  .xev-ai-modal__bubble--user { max-width: 88%; }
  .xev-ai-modal__bubble--bot  { max-width: 92%; }
  .xev-welcome__msg     { max-width: 92%; font-size: 14px; }
  .xev-qr-chip          { font-size: 12px; padding: 7px 12px; }
  .xev-suggestions      { max-width: 92%; }
  .xev-suggestion-chip  { font-size: 12px; padding: 9px 12px; }
  .xev-ctas             { max-width: 92%; }
  .xev-ai-modal__inputbar       { padding: 10px 14px 14px; }
  .xev-ai-modal__inputbar-inner { border-radius: 8px; height: 46px; padding: 0 12px; }
  .xev-ai-modal__input  { font-size: 14px; }
  .xev-ai-modal__send   { width: 30px; height: 30px; border-radius: 6px; }
  .xev-ai-modal__send svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .xev-ai-modal__close,
  .xev-ai-modal__send,
  .xev-ai-modal__input,
  .xev-qr-chip,
  .xev-suggestion-chip { transition: none; }
  .xev-ai-modal__typing span { animation: none; opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════
   ELEMENTOR / THEME OVERRIDE KILLS
   Elementor and many themes apply their own button
   colours globally. These rules use higher specificity
   (modal scope + !important) to win the cascade.
══════════════════════════════════════════════════════ */

/* Reset all native button/input styling inside the modal */
.xev-ai-modal button,
.xev-ai-modal input[type="text"],
.xev-ai-modal input[type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ── Close button ────────────────────────────────────── */
.xev-ai-modal .xev-ai-modal__close {
  background: rgba(1, 20, 74, 0.06) !important;
  border: none !important;
  outline: none !important;
  color: #01144A !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.xev-ai-modal .xev-ai-modal__close:hover {
  background: rgba(0, 193, 208, 0.12) !important;
  color: #00A4B0 !important;
}

/* ── Send button ─────────────────────────────────────── */
.xev-ai-modal .xev-ai-modal__send {
  background: #01144A !important;
  border: none !important;
  outline: none !important;
  color: #FFFFFF !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.xev-ai-modal .xev-ai-modal__send:hover:not(:disabled) {
  background: #00A4B0 !important;
}
.xev-ai-modal .xev-ai-modal__send:disabled {
  opacity: 0.40 !important;
  cursor: not-allowed !important;
}
.xev-ai-modal .xev-ai-modal__send svg path {
  stroke: #FFFFFF !important;
}

/* ── Welcome quick-reply chips (inline pill) ─────────── */
.xev-ai-modal .xev-qr-chip {
  background: rgba(1, 20, 74, 0.05) !important;
  border: 1px solid rgba(1, 20, 74, 0.09) !important;
  color: rgba(1, 20, 74, 0.62) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  width: auto !important;
  text-decoration: none !important;
}
.xev-ai-modal .xev-qr-chip:hover {
  background: rgba(0, 193, 208, 0.07) !important;
  border-color: rgba(0, 193, 208, 0.28) !important;
  color: #00A4B0 !important;
}
.xev-ai-modal .xev-qr-chip--back {
  background: transparent !important;
  border-color: rgba(1, 20, 74, 0.12) !important;
  color: rgba(1, 20, 74, 0.40) !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
}

/* ── Suggestion chips (post-reply) — inline, smaller ─── */
.xev-ai-modal .xev-suggestions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  max-width: 80% !important;
}
.xev-ai-modal .xev-suggestions__label {
  width: 100% !important;  /* label stays on its own line */
  flex-shrink: 0 !important;
}
.xev-ai-modal .xev-suggestion-chip {
  background: rgba(1, 20, 74, 0.05) !important;
  border: 1px solid rgba(1, 20, 74, 0.09) !important;
  color: rgba(1, 20, 74, 0.62) !important;
  border-radius: 100px !important;     /* pill shape, not rounded rect */
  box-shadow: none !important;
  outline: none !important;
  font-size: 12px !important;
  padding: 7px 13px !important;
  display: inline-flex !important;
  width: auto !important;             /* NOT full-width */
  text-align: left !important;
  line-height: 1.3 !important;
}
.xev-ai-modal .xev-suggestion-chip:hover {
  background: rgba(0, 193, 208, 0.07) !important;
  border-color: rgba(0, 193, 208, 0.28) !important;
  color: #00A4B0 !important;
  transform: none !important;          /* remove the slide effect on inline chips */
}

/* Contact CTA button */
.xev-ai-modal .xev-cta--contact {
  background: #01144A !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}
.xev-ai-modal .xev-cta--contact:hover {
  background: #00C1D0 !important;
  color: #FFFFFF !important;
}

/* Input: no theme borders */
.xev-ai-modal .xev-ai-modal__input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #01144A !important;
}

@media (max-width: 768px) {
  .xev-ai-modal .xev-suggestion-chip { font-size: 11px !important; padding: 6px 11px !important; }
  .xev-ai-modal .xev-suggestions { max-width: 94% !important; }
}

/* ══════════════════════════════════════════════════════
   HERO SECTION — ELEMENTOR OVERRIDE KILLS
   Same pattern as the modal overrides: scoped selectors
   + !important to beat theme/Elementor cascade.
══════════════════════════════════════════════════════ */

/* Pill buttons in the hero search section */
.xev-ai-section .xev-ai-pill {
  background: rgba(1, 20, 74, 0.05) !important;
  border: 1px solid rgba(1, 20, 74, 0.08) !important;
  color: rgba(1, 20, 74, 0.55) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.xev-ai-section .xev-ai-pill:hover {
  color: #00C1D0 !important;
  background: rgba(0, 193, 208, 0.07) !important;
  border-color: rgba(0, 193, 208, 0.25) !important;
}

/* Input wrapper — kill any theme border/shadow on the container */
.xev-ai-section .xev-ai-input-wrap {
  background: #F8F9FC !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.xev-ai-section .xev-ai-input-wrap:focus-within {
  box-shadow: 0 0 0 3.5px rgba(0, 193, 208, 0.15) !important;
}

/* Input field */
.xev-ai-section .xev-ai-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #01144A !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.xev-ai-section .xev-ai-input::placeholder {
  color: rgba(1, 20, 74, 0.32) !important;
}

/* Send arrow button */
.xev-ai-section .xev-ai-send {
  background: #01144A !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.xev-ai-section .xev-ai-send:hover {
  background: #00A4B0 !important;
}
.xev-ai-section .xev-ai-send svg path {
  stroke: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════
   HERO SECTION — FULL-WIDTH BREAKOUT (85vw card)
   Forces the section and its containing Elementor widget
   to span the full viewport, so the card can reach 85vw
   even when placed inside a narrow Elementor column.
══════════════════════════════════════════════════════ */

/* Step 1: expand the section to full viewport width */
.xev-ai-section {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* Step 2: card stays at its intended 85vw max-width */
.xev-ai-card {
  max-width: 85vw !important;
  width: 100% !important;
}

/* Step 3: remove any Elementor column/widget overflow that
   would clip the full-bleed breakout */
.elementor-widget-html .xev-ai-section,
.elementor-widget-container .xev-ai-section {
  overflow: visible !important;
}

/* Mobile: full width, no breakout needed */
@media (max-width: 768px) {
  .xev-ai-section {
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .xev-ai-card {
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════
   ELEMENTOR PARENT OVERFLOW FIX
   The breakout technique requires all ancestors between
   the section and the viewport to allow overflow.
   We target only ancestors that contain the AI section.
══════════════════════════════════════════════════════ */
.elementor-widget-html:has(.xev-ai-section),
.elementor-widget-container:has(.xev-ai-section),
.elementor-widget:has(.xev-ai-section),
.elementor-column:has(.xev-ai-section),
.elementor-section:has(.xev-ai-section) {
  overflow: visible !important;
}

/* Fallback for browsers without :has() support (Firefox < 121) */
/* Applied via JS — see widget.js removeElementorBorders() which also sets overflow */

/* ══════════════════════════════════════════════════════
   CONTEXTUAL CHIP ROWS
   Both welcome chips (.xev-qr-chips) and topic chips
   (.xev-suggestion-chip) now live inside .xev-suggestions.
   The label + chip row layout is column; chips wrap inline.
══════════════════════════════════════════════════════ */

/* Wrapper: label above, chips row below */
.xev-ai-modal .xev-suggestions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-width: 88% !important;
}

/* Chip row inside the wrapper */
.xev-ai-modal .xev-suggestions .xev-qr-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

/* Topic chips (.xev-suggestion-chip) inside a chip row */
.xev-ai-modal .xev-suggestions .xev-suggestion-chip {
  display: inline-flex !important;
  width: auto !important;
  background: rgba(1, 20, 74, 0.05) !important;
  border: 1px solid rgba(1, 20, 74, 0.09) !important;
  color: rgba(1, 20, 74, 0.62) !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-family: 'Wix Madefor Display', sans-serif !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  text-align: left !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}
.xev-ai-modal .xev-suggestions .xev-suggestion-chip:hover {
  background: rgba(0, 193, 208, 0.07) !important;
  border-color: rgba(0, 193, 208, 0.25) !important;
  color: #00A4B0 !important;
}

@media (max-width: 768px) {
  .xev-ai-modal .xev-suggestions { max-width: 96% !important; }
  .xev-ai-modal .xev-suggestions .xev-suggestion-chip { font-size: 12px !important; padding: 7px 11px !important; }
}

/* ══════════════════════════════════════════════════════
   CHIP CLICK RELIABILITY
   Ensure chip buttons and their rows are always visible
   and interactive — defence against theme pointer-events
   or display overrides that could silently block clicks.
══════════════════════════════════════════════════════ */
.xev-ai-modal .xev-qr-chip,
.xev-ai-modal .xev-suggestion-chip {
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

/* The .xev-suggestions wrapper should never be hidden by theme overflow rules */
.xev-ai-modal .xev-suggestions {
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* .xev-welcome must allow clicks through to child chips */
.xev-ai-modal .xev-welcome {
  pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════
   ANIMATED GLOBE — replaces the sparkle icon
   All sizing scoped to .xev-ai-sparkle-wrap so the
   input bar layout stays unchanged.
══════════════════════════════════════════════════════ */

/* Make the wrapper slightly larger for the globe */
.xev-ai-sparkle-wrap {
  width:  1.8vw !important;
  height: 1.8vw !important;
}

/* The globe SVG itself */
.xev-globe-svg {
  width:  100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transition: filter 0.3s ease;
  /* Block old sparkle colour behaviour */
  color: unset !important;
  fill: none !important;
}

/* Teal glow ring when user focuses the search input */
.xev-ai-input-wrap:focus-within .xev-globe-svg {
  filter: drop-shadow(0 0 5px rgba(0, 193, 208, 0.70));
}

/* Responsive: tablet */
@media (max-width: 1024px) {
  .xev-ai-sparkle-wrap {
    width:  28px !important;
    height: 28px !important;
  }
}

/* Responsive: mobile */
@media (max-width: 768px) {
  .xev-ai-sparkle-wrap {
    width:  22px !important;
    height: 22px !important;
  }
}