/* ==========================================================================
   XtroEdge AI Chat Widget — "Dark Glass Premium"
   Self-contained styles, zero external dependencies. Scoped entirely under
   #xtro-ai-chat-widget so nothing here can leak into / collide with the
   rest of the site's stylesheet.

   ANTI-COLLISION NOTE: the site's small "back to top" arrow (#scroll-top,
   40x40px, styled in main.css) sits directly ABOVE this toggle, centred on
   it, so the two read as one vertical stack. Its position in main.css is
   derived from the numbers below (toggle bottom + toggle size + 12px gap,
   right offset + (toggle size - 40) / 2) -- change them together:

     desktop (>992px): toggle 62px @ bottom 40 / right 50  ->  arrow bottom 114 / right 61
     <=992px:          toggle 56px @ bottom 30 / right 30  ->  arrow bottom  98 / right 38
     <=767px:          toggle 52px @ bottom 20 / right 20  ->  arrow bottom  84 / right 26
   ========================================================================== */

#xtro-ai-chat-widget {
  --xac-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xac-green: #16a34a;
  --xac-green-light: #34d374;
  --xac-gold: #ffc226;
  --xac-bg-panel: rgba(14, 18, 24, 0.86);
  --xac-bg-glass: rgba(255, 255, 255, 0.045);
  --xac-border: rgba(255, 255, 255, 0.09);
  --xac-border-soft: rgba(255, 255, 255, 0.06);
  --xac-text: #eef1f4;
  --xac-text-dim: #9aa1ab;
  --xac-text-faint: #6b7280;
  --xac-danger-bg: rgba(255, 194, 38, 0.08);
  --xac-danger-border: rgba(255, 194, 38, 0.35);
  --xac-danger-text: #ffdf9b;

  /* Raised/sunken surfaces. Kept as variables (rather than hardcoded whites)
     so the light-theme block near the bottom of this file can flip the whole
     widget by overriding these alone. */
  --xac-surface: rgba(255, 255, 255, 0.075);
  --xac-surface-hover: rgba(255, 255, 255, 0.115);
  --xac-surface-border: rgba(255, 255, 255, 0.14);
  --xac-surface-sunken: rgba(0, 0, 0, 0.26);
  --xac-scrollbar: rgba(255, 255, 255, 0.15);
  --xac-title-start: #ffffff;

  --xac-radius: 20px;
  --xac-shadow: 0 24px 70px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Toggle position — see the anti-collision note above. These numbers
     (and the matching right offsets: 50/30/20) are load-bearing; keep
     them in sync with #scroll-top in main.css. */
  --xac-toggle-size: 62px;
  --xac-toggle-bottom: 40px;
  --xac-toggle-right: 50px;

  position: fixed;
  z-index: 2147483000;
  inset: auto auto 0 0;
  font-family: var(--xac-font);
  color: var(--xac-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#xtro-ai-chat-widget *,
#xtro-ai-chat-widget *::before,
#xtro-ai-chat-widget *::after {
  box-sizing: border-box;
}

/* Minimal button reset. It deliberately does NOT null out background/border/
   colour: this selector is `#id button` (specificity 1-0-1), which outranks
   every single-class component rule below (`.xac-chip`, `.xac-send`, ...), so
   declaring them here silently erased those components' own styling. Buttons
   that are meant to look flat opt in explicitly via .xac-btn-flat. */
#xtro-ai-chat-widget button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Explicitly-flat buttons (tabs, header icons) — replaces what the blanket
   reset used to do, without clobbering the styled components. */
.xac-tab,
.xac-icon-btn {
  background: transparent;
  border: none;
  color: inherit;
}

/* Styled buttons still need their default border removed */
.xac-toggle,
.xac-send {
  border: none;
}

#xtro-ai-chat-widget .xac-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- */
/* Toggle button                                                          */
/* ---------------------------------------------------------------------- */

.xac-toggle {
  position: fixed;
  right: var(--xac-toggle-right);
  bottom: var(--xac-toggle-bottom);
  width: var(--xac-toggle-size);
  height: var(--xac-toggle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #1c2a22 0%, #0c1310 60%, #090c0f 100%);
  box-shadow:
    0 10px 30px -6px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 22px 0 rgba(22, 163, 74, 0.35);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  z-index: 2147483001;
}

.xac-toggle:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 14px 34px -6px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 32px 2px rgba(22, 163, 74, 0.5);
}

.xac-toggle:active {
  transform: translateY(-1px) scale(0.96);
}

.xac-toggle:focus-visible {
  outline: 2px solid var(--xac-green-light);
  outline-offset: 3px;
}

.xac-toggle-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 163, 74, 0.55);
  animation: xac-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes xac-pulse {
  0% { transform: scale(0.92); opacity: 0.85; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

.xac-toggle-icon {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--xac-green-light);
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xac-toggle-icon-chat { opacity: 1; transform: rotate(0deg) scale(1); }
.xac-toggle-icon-close { opacity: 0; transform: rotate(-45deg) scale(0.6); color: #fff; }

#xtro-ai-chat-widget.xac-open .xac-toggle-icon-chat { opacity: 0; transform: rotate(45deg) scale(0.6); }
#xtro-ai-chat-widget.xac-open .xac-toggle-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

.xac-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xac-gold), #ff9d26);
  box-shadow: 0 0 0 3px #0c1310;
  animation: xac-badge-in 0.3s ease 0.6s backwards;
}

@keyframes xac-badge-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

#xtro-ai-chat-widget.xac-open .xac-badge,
#xtro-ai-chat-widget.xac-badge-dismissed .xac-badge {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Panel                                                                   */
/* ---------------------------------------------------------------------- */

.xac-panel {
  position: fixed;
  right: var(--xac-toggle-right);
  bottom: calc(var(--xac-toggle-bottom) + var(--xac-toggle-size) + 16px);
  width: 384px;
  height: 552px;
  max-height: calc(100vh - var(--xac-toggle-bottom) - var(--xac-toggle-size) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--xac-bg-panel);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--xac-border);
  border-radius: var(--xac-radius);
  box-shadow: var(--xac-shadow);
  overflow: hidden;
  z-index: 2147483001;
  transform-origin: calc(100% - 28px) calc(100% + 20px);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

#xtro-ai-chat-widget.xac-open .xac-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.xac-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0) 40%);
  pointer-events: none;
}

/* ---- Header ---- */

.xac-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 14px 16px 18px;
  border-bottom: 1px solid var(--xac-border-soft);
  flex: 0 0 auto;
}

.xac-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.xac-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3a26, #0d1a12);
  border: 1px solid rgba(22, 163, 74, 0.4);
  box-shadow: 0 0 16px rgba(22, 163, 74, 0.35) inset, 0 2px 8px rgba(0, 0, 0, 0.4);
  color: var(--xac-green-light);
}

.xac-avatar svg { width: 20px; height: 20px; }

.xac-header-text { min-width: 0; }

.xac-title {
  margin: 0;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  background: linear-gradient(90deg, var(--xac-title-start) 0%, var(--xac-green-light) 65%, var(--xac-gold) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xac-subtitle {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--xac-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.xac-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--xac-green-light);
  box-shadow: 0 0 6px 1px rgba(52, 211, 116, 0.8);
  animation: xac-blink 2.2s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes xac-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.xac-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.xac-icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--xac-text-dim);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.xac-icon-btn:hover { background: var(--xac-surface-hover); color: var(--xac-text); }
.xac-icon-btn:active { transform: scale(0.9); }
.xac-icon-btn:focus-visible { outline: 2px solid var(--xac-green-light); outline-offset: 2px; }
.xac-icon-btn svg { width: 16px; height: 16px; }
.xac-icon-btn.xac-clear svg { width: 15px; height: 15px; }

/* New-chat button — green accent so it's easy to spot as "start over". */
.xac-icon-btn.xac-newchat {
  color: var(--xac-green-light);
}
.xac-icon-btn.xac-newchat:hover {
  background: rgba(22, 163, 74, 0.16);
  color: var(--xac-green-light);
}
.xac-icon-btn.xac-newchat svg { width: 16px; height: 16px; }

/* ---- Tabs ---- */

.xac-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--xac-border-soft);
}

.xac-tab {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--xac-text-dim);
  border-radius: 10px 10px 0 0;
  position: relative;
  transition: color 0.18s ease, background 0.18s ease;
}

.xac-tab:hover { color: var(--xac-text); background: var(--xac-surface); }
.xac-tab:focus-visible { outline: 2px solid var(--xac-green-light); outline-offset: -2px; }

.xac-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.18s ease;
}

.xac-tab-active { color: var(--xac-text); }
.xac-tab-active::after {
  background: linear-gradient(90deg, var(--xac-green-light), var(--xac-gold));
}

/* ---- Tab panels ---- */

.xac-tabpanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.xac-tabpanel[hidden] { display: none; }

/* ---- Messages ---- */

.xac-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  /* contain overscroll so hitting the top/bottom of the list never chains
     the scroll into the page behind the panel */
  overscroll-behavior: contain;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.xac-messages::-webkit-scrollbar { width: 8px; }
.xac-messages::-webkit-scrollbar-track { background: transparent; }
.xac-messages::-webkit-scrollbar-thumb {
  background: var(--xac-scrollbar);
  border-radius: 8px;
}
.xac-messages { scrollbar-width: thin; scrollbar-color: var(--xac-scrollbar) transparent; }

/* ---- History tab: dated conversation groups ---- */

.xac-history-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.xac-history-group:last-child { margin-bottom: 0; }

/* Clickable conversation row — collapsed by default, expands on click */
.xac-history-head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--xac-surface);
  border: 1px solid var(--xac-surface-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.xac-history-head:hover {
  background: var(--xac-surface-hover);
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.32);
}

.xac-history-head:focus-visible {
  outline: 2px solid var(--xac-green-light);
  outline-offset: 2px;
}

.xac-history-group.xac-expanded .xac-history-head {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.16), rgba(22, 163, 74, 0.07));
  border-color: rgba(22, 163, 74, 0.36);
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Icon anchor */
.xac-history-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(22, 163, 74, 0.22), rgba(22, 163, 74, 0.06));
  border: 1px solid rgba(22, 163, 74, 0.28);
  color: var(--xac-green-light);
  transition: border-color 0.18s ease;
}

.xac-history-icon svg { width: 14px; height: 14px; }

.xac-history-group.xac-expanded .xac-history-icon {
  border-color: rgba(22, 163, 74, 0.55);
}

.xac-history-meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* Headline: what the conversation was about */
.xac-history-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--xac-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtitle: when it happened */
.xac-history-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.xac-history-when {
  font-size: 10.5px;
  color: var(--xac-text-faint);
  white-space: nowrap;
}

.xac-history-live {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--xac-green-light);
  background: rgba(22, 163, 74, 0.16);
  border: 1px solid rgba(22, 163, 74, 0.45);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
  line-height: 1.45;
}

.xac-history-count {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--xac-text-faint);
  white-space: nowrap;
}

.xac-history-chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--xac-text-faint);
  transition: transform 0.22s ease, color 0.18s ease;
}

.xac-history-chevron svg { width: 13px; height: 13px; }

.xac-history-group.xac-expanded .xac-history-chevron {
  transform: rotate(180deg);
  color: var(--xac-green-light);
}

/* Expanded transcript */
.xac-history-body {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  border: 1px solid rgba(22, 163, 74, 0.36);
  border-top: none;
  border-radius: 0 0 13px 13px;
  background: var(--xac-surface-sunken);
}

.xac-history-body[hidden] { display: none; }

/* ---- Empty state (Chat tab pre-first-message, History tab with nothing saved) ---- */

.xac-empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 22px;
  text-align: center;
}

.xac-empty-state svg {
  width: 26px;
  height: 26px;
  color: var(--xac-text-dim);
  opacity: 0.7;
}

.xac-empty-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--xac-text-dim);
  max-width: 220px;
}

.xac-msg {
  display: flex;
  flex-direction: column;
  max-width: 86%;
  margin-top: 10px;
  animation: xac-msg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes xac-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.xac-msg-user { align-self: flex-end; align-items: flex-end; }
.xac-msg-assistant, .xac-msg-error { align-self: flex-start; align-items: flex-start; }

.xac-bubble {
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Assistant rich text (safe subset: **bold**, "- " lists, paragraphs) ---- */

.xac-md-p { margin: 0; white-space: normal; }
.xac-md-list li { white-space: normal; }
.xac-md-p + .xac-md-p,
.xac-md-p + .xac-md-list,
.xac-md-list + .xac-md-p { margin-top: 8px; }

/* Highlighted key terms — service/project names, CEO, email, phone, etc.
   Bright green pops against the dark assistant bubble so they're easy to spot. */
.xac-md-strong {
  font-weight: 700;
  color: var(--xac-green-light);
}

.xac-md-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xac-md-list li {
  position: relative;
  padding-left: 16px;
  line-height: 1.45;
}

/* Inline links (URLs, emails, phone numbers) inside a reply */
.xac-link {
  color: var(--xac-green-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: opacity 0.15s ease;
}

.xac-link:hover { text-decoration-thickness: 2px; opacity: 0.85; }

.xac-link:focus-visible {
  outline: 2px solid var(--xac-green-light);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A link inside a bolded run keeps the bold colour rather than doubling up */
.xac-md-strong .xac-link { color: inherit; }

/* "Take me there" buttons for in-site navigation */
.xac-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.xac-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--xac-green) 0%, #0f7a37 100%);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 3px 10px -3px rgba(22, 163, 74, 0.6);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.xac-nav-btn::after {
  content: "→";
  font-size: 12px;
  line-height: 1;
}

.xac-nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(22, 163, 74, 0.72);
  color: #fff;
}

.xac-nav-btn:focus-visible {
  outline: 2px solid var(--xac-green-light);
  outline-offset: 2px;
}

/* Suggested follow-up questions — tap one to ask it */
.xac-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.xac-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--xac-green-light);
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.42);
  border-radius: 999px;
  padding: 6px 11px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.xac-chip::after {
  content: "→";
  font-size: 11px;
  line-height: 1;
  opacity: 0.8;
}

.xac-chip:hover {
  background: rgba(22, 163, 74, 0.2);
  border-color: rgba(22, 163, 74, 0.75);
  transform: translateY(-1px);
}

.xac-chip:active { transform: translateY(0) scale(0.97); }

.xac-chip:focus-visible {
  outline: 2px solid var(--xac-green-light);
  outline-offset: 2px;
}

/* Starter chips sit inside the centred empty state. The max-width makes the
   four of them wrap 2x2 instead of an unbalanced 3+1. */
.xac-empty-state .xac-suggestions {
  justify-content: center;
  margin-top: 16px;
  max-width: 252px;
}

.xac-md-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--xac-green-light);
}

.xac-msg-user .xac-bubble {
  background: linear-gradient(135deg, var(--xac-green) 0%, #0f7a37 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px -4px rgba(22, 163, 74, 0.55);
}

.xac-msg-assistant .xac-bubble {
  background: var(--xac-bg-glass);
  border: 1px solid var(--xac-border-soft);
  color: var(--xac-text);
  border-bottom-left-radius: 5px;
}

.xac-msg-error .xac-bubble {
  background: var(--xac-danger-bg);
  border: 1px solid var(--xac-danger-border);
  border-left: 3px solid var(--xac-gold);
  color: var(--xac-danger-text);
  border-bottom-left-radius: 5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.xac-msg-error .xac-bubble svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--xac-gold);
}

.xac-timestamp {
  font-size: 10.5px;
  color: var(--xac-text-faint);
  margin-top: 4px;
  padding: 0 4px;
}

/* ---- Typing indicator ---- */

.xac-typing .xac-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 16px;
}

.xac-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xac-text-dim);
  animation: xac-typing-bounce 1.1s ease-in-out infinite;
}

.xac-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.xac-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes xac-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Input row ---- */

.xac-input-row {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--xac-border-soft);
  background: var(--xac-surface-sunken);
}

.xac-input-wrap {
  flex: 1 1 auto;
  display: flex;
  background: var(--xac-surface);
  border: 1px solid var(--xac-border);
  border-radius: 14px;
  padding: 2px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.xac-input-wrap:focus-within {
  border-color: rgba(22, 163, 74, 0.6);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.xac-input {
  flex: 1 1 auto;
  resize: none;
  border: none;
  background: transparent;
  color: var(--xac-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  max-height: 120px;
  min-height: 20px;
  /* The "stray arrow box" bug: a <textarea> defaults to overflow-y: auto, so
     the moment its scrollHeight is even 1px taller than its height, Windows
     Chrome reserves a *native* classic scrollbar — a thin rectangular track
     with up/down arrow buttons — sitting at the input's right edge, right
     before the send button. We hard-hide that scrollbar's chrome entirely
     (below) so those arrow buttons can NEVER render, regardless of timing or
     stale styles. The JS auto-grow still caps height at 120px and flips
     overflow to auto only past that, so a long draft is still scrollable —
     just with an invisible scrollbar (drag or arrow-key to move within it). */
  overflow-y: hidden;
}

.xac-input::placeholder { color: var(--xac-text-dim); }
.xac-input:focus { outline: none; }
.xac-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* Hide the textarea scrollbar chrome completely — no track, no arrow buttons,
   ever. Content still scrolls; only the native scrollbar UI is suppressed. */
.xac-input::-webkit-scrollbar { width: 0; height: 0; display: none; }
.xac-input { scrollbar-width: none; -ms-overflow-style: none; }

.xac-send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--xac-green) 0%, #0f7a37 100%);
  color: #fff;
  box-shadow: 0 4px 14px -3px rgba(22, 163, 74, 0.6);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.16s ease, box-shadow 0.16s ease;
}

.xac-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px -3px rgba(22, 163, 74, 0.7); }
.xac-send:active:not(:disabled) { transform: scale(0.92); }
.xac-send:focus-visible { outline: 2px solid var(--xac-green-light); outline-offset: 2px; }
.xac-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.xac-send svg { width: 17px; height: 17px; }

.xac-send-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: xac-spin 0.7s linear infinite;
  display: none;
}

@keyframes xac-spin { to { transform: rotate(360deg); } }

#xtro-ai-chat-widget.xac-loading .xac-send-icon { display: none; }
#xtro-ai-chat-widget.xac-loading .xac-send-spinner { display: block; }

.xac-footer-note {
  /* MUST be flex:0 0 auto, NOT 0 0 100%. This lives in the tabpanel's COLUMN
     flex, where flex-basis is the MAIN (vertical) size — a 100% basis with
     shrink:0 made the footer reserve the panel's entire height, collapsing
     the message area and jamming the input row up to the top. */
  flex: 0 0 auto;
  text-align: center;
  font-size: 10.5px;
  color: var(--xac-text-faint);
  padding: 0 12px 10px;
}

/* ---------------------------------------------------------------------- */
/* LIGHT THEME                                                            */
/* The site's theme switch sets data-theme on the <html> element (see the  */
/* reflectPreference() call in assets/js/main.js). Because every surface,  */
/* text and border colour above is driven by a custom property, flipping   */
/* the whole widget is just a matter of re-declaring them here.            */
/* ---------------------------------------------------------------------- */

[data-theme="light"] #xtro-ai-chat-widget {
  --xac-bg-panel: rgba(255, 255, 255, 0.94);
  --xac-bg-glass: rgba(15, 23, 32, 0.05);
  --xac-border: rgba(15, 23, 32, 0.13);
  --xac-border-soft: rgba(15, 23, 32, 0.09);
  --xac-text: #15202b;
  --xac-text-dim: #55606c;
  --xac-text-faint: #7d8794;

  /* the pale mint used on dark backgrounds fails contrast on white, so key
     text/accents step down to the deeper brand green */
  --xac-green-light: #15803d;

  --xac-danger-bg: rgba(180, 120, 10, 0.1);
  --xac-danger-border: rgba(180, 120, 10, 0.38);
  --xac-danger-text: #7a5200;

  --xac-surface: rgba(15, 23, 32, 0.055);
  --xac-surface-hover: rgba(15, 23, 32, 0.095);
  --xac-surface-border: rgba(15, 23, 32, 0.14);
  --xac-surface-sunken: rgba(15, 23, 32, 0.035);
  --xac-scrollbar: rgba(15, 23, 32, 0.24);
  --xac-title-start: #0f1720;

  --xac-shadow: 0 24px 60px -14px rgba(15, 23, 32, 0.3), 0 0 0 1px rgba(15, 23, 32, 0.06);
}

/* The green wash overlay reads as muddy on a white panel — drop it. */
[data-theme="light"] .xac-panel::before {
  background: linear-gradient(160deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0) 45%);
}

/* Expanded history row: keep the green tint readable on white. */
[data-theme="light"] .xac-history-group.xac-expanded .xac-history-head {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.13), rgba(22, 163, 74, 0.05));
  border-color: rgba(22, 163, 74, 0.34);
}

[data-theme="light"] .xac-history-body {
  border-color: rgba(22, 163, 74, 0.34);
}

/* Assistant/typing bubbles need a touch more definition on a light panel. */
[data-theme="light"] .xac-msg-assistant .xac-bubble {
  background: rgba(15, 23, 32, 0.05);
  border-color: rgba(15, 23, 32, 0.1);
}

/* ---------------------------------------------------------------------- */
/* Responsive — toggle position per breakpoint (992px / 767px); the       */
/* #scroll-top arrow in main.css is stacked above it from these numbers.  */
/* ---------------------------------------------------------------------- */

@media (max-width: 992px) {
  #xtro-ai-chat-widget {
    --xac-toggle-size: 56px;
    --xac-toggle-bottom: 30px;
    --xac-toggle-right: 30px;
  }
  .xac-panel {
    width: 348px;
    height: 500px;
    max-height: calc(100vh - var(--xac-toggle-bottom) - var(--xac-toggle-size) - 28px);
  }
}

@media (max-width: 767px) {
  #xtro-ai-chat-widget {
    --xac-toggle-size: 52px;
    --xac-toggle-bottom: 20px;
    --xac-toggle-right: 20px;
  }
}

/* Near-fullscreen panel on narrow phones */
@media (max-width: 480px) {
  .xac-panel {
    left: 12px;
    right: 12px;
    bottom: calc(var(--xac-toggle-bottom) + var(--xac-toggle-size) + 12px);
    top: 16px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
  }
  .xac-toggle-icon { width: 24px; height: 24px; }
  .xac-msg { max-width: 92%; }
}

@media (max-height: 560px) and (max-width: 480px) {
  .xac-panel { top: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #xtro-ai-chat-widget * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}