/* Alvar AI chat widget — premium dark aesthetic with subtle gold accents.
   Aligned to the brand's existing palette (deep blacks, warm gold highlights)
   and styled for the kind of customer who pays premium for premium product. */

#alvar-chat-root {
  /* Palette */
  --ac-bg:            #0a0a0a;
  --ac-panel:         #0d0d0d;
  --ac-panel-soft:    #131313;
  --ac-elev-1:        rgba(255, 255, 255, 0.03);
  --ac-elev-2:        rgba(255, 255, 255, 0.06);
  --ac-elev-3:        rgba(255, 255, 255, 0.09);
  --ac-border:        rgba(255, 255, 255, 0.07);
  --ac-border-strong: rgba(255, 255, 255, 0.14);
  --ac-text:          #f5f5f5;
  --ac-text-dim:      rgba(245, 245, 245, 0.55);
  --ac-text-muted:    rgba(245, 245, 245, 0.32);

  /* Gold accent (matches the "30 000+" / "4.9 stars" stats on the reviews page) */
  --ac-gold:          #d4b86a;
  --ac-gold-soft:     rgba(212, 184, 106, 0.18);
  --ac-gold-glow:     rgba(212, 184, 106, 0.35);

  /* Message bubbles */
  --ac-bubble-user-bg:   linear-gradient(135deg, #f5f5f5 0%, #dcdcdc 100%);
  --ac-bubble-user-text: #0a0a0a;
  --ac-bubble-bot-bg:    rgba(255, 255, 255, 0.04);
  --ac-bubble-bot-text:  #f5f5f5;

  /* Refined typography */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";  /* Inter stylistic alts if available */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  color: var(--ac-text);
  transition: opacity 0.18s ease;
}

/* Shopify cart drawer is open: step out of the way so the bubble/panel
   don't overlap the drawer in the bottom-right corner. */
#alvar-chat-root.ac-cart-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* "Still thinking?" nudge is showing AND chat is closed: hide the widget so
   they don't fight for the same bottom-right corner. Toggled by the
   still-thinking-nudge script. The widget reappears the moment either the
   nudge is dismissed OR the user opens the chat (handled by reconcile()
   in the nudge script, which moves the nudge to bottom-LEFT in that case). */
#alvar-chat-root.ac-hidden-by-stn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* ─────────────────────────────────────────────────────────────────────────
   BUBBLE (closed state)
   ───────────────────────────────────────────────────────────────────────── */

#alvar-chat-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 16px 26px 16px 16px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  color: var(--ac-text);
  border: 1px solid var(--ac-border-strong);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 16px 48px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

#alvar-chat-bubble::before {
  /* Hairline gold accent ring on hover, never overpowering */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.15) 0%,
    var(--ac-gold-glow) 40%,
    transparent 65%,
    rgba(255,255,255,0.05) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

#alvar-chat-bubble:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 4px 12px rgba(0, 0, 0, 0.55),
    0 16px 42px rgba(0, 0, 0, 0.45),
    0 28px 70px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(212, 184, 106, 0.08);
}

#alvar-chat-bubble:hover::before { opacity: 1; }
#alvar-chat-bubble:active { transform: translateY(0); }

.ac-bubble-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--ac-gold) 0%, #b8985a 100%);
  color: #0a0a0a;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(212, 184, 106, 0.25);
}

.ac-bubble-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.ac-bubble-text {
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* When panel is open, hide bubble */
#alvar-chat-root.ac-open #alvar-chat-bubble { display: none; }

/* Attention pulse: ring of gold that radiates twice from the bubble to draw
   the eye after the teaser-delay window passes. Triggered by JS adding the
   .ac-bubble--attention class. Stops once the user opens the chat. */
#alvar-chat-bubble.ac-bubble--attention::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(212, 184, 106, 0.55);
  animation: ac-bubble-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes ac-bubble-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.18); opacity: 0;   }
  100% { transform: scale(1.18); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  #alvar-chat-bubble.ac-bubble--attention::after { animation: none; opacity: 0.5; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PROACTIVE TEASER (sits above the bubble until dismissed or opened)
   ───────────────────────────────────────────────────────────────────────── */

.ac-teaser {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  width: 340px;
  /* Fully opaque dark panel with a soft gold-tinted glow so it pops against
     whatever's behind it. Used to be semi-transparent which made it easy
     to miss. */
  background: linear-gradient(180deg, #1f1f1f 0%, #0d0d0d 100%);
  border: 1px solid rgba(212, 184, 106, 0.45);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(212, 184, 106, 0.06),
    0 0 50px rgba(212, 184, 106, 0.18);
  padding: 16px 18px 16px 14px;
  animation: ac-teaser-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.ac-teaser::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 28px;
  width: 16px;
  height: 16px;
  background: #0d0d0d;
  border-right: 1px solid rgba(212, 184, 106, 0.45);
  border-bottom: 1px solid rgba(212, 184, 106, 0.45);
  transform: rotate(45deg);
  z-index: -1;
}
@keyframes ac-teaser-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ac-teaser-body {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: var(--ac-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.ac-teaser-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ac-gold) 0%, #b8985a 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 4px 12px rgba(212, 184, 106, 0.35);
}
.ac-teaser-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-teaser-text { flex: 1; padding-right: 18px; }
.ac-teaser-arrow {
  color: var(--ac-gold);
  font-weight: 700;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.2s;
}
.ac-teaser-body:hover .ac-teaser-arrow { transform: translateX(4px); }
.ac-teaser-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ac-text-muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.ac-teaser-close:hover { background: rgba(255, 255, 255, 0.16); color: var(--ac-text); }

/* When chat panel is open, hide teaser */
#alvar-chat-root.ac-open .ac-teaser { display: none; }

@media (max-width: 480px) {
  /* Mobile: still slightly more compact than desktop, but solid background
     so it's actually noticed. (Was too see-through before.) */
  .ac-teaser {
    width: 280px;
    right: 0;
    bottom: calc(100% + 12px);
    padding: 12px 14px 12px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1f1f1f 0%, #0d0d0d 100%);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 4px rgba(212, 184, 106, 0.06),
      0 0 30px rgba(212, 184, 106, 0.15);
    animation: ac-teaser-in 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ac-teaser::after {
    bottom: -6px;
    right: 22px;
    width: 11px;
    height: 11px;
  }
  .ac-teaser-body { font-size: 13px; gap: 10px; }
  .ac-teaser-avatar { width: 32px; height: 32px; }
  .ac-teaser-close { width: 20px; height: 20px; top: 5px; right: 5px; }
  .ac-teaser-close svg { width: 10px; height: 10px; }
  .ac-teaser-text { padding-right: 14px; }
}

/* Mobile: collapse to icon-only (bigger touch target than desktop's bubble) */
@media (max-width: 480px) {
  .ac-bubble-text { display: none; }
  #alvar-chat-bubble {
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
  }
  .ac-bubble-icon { width: 36px; height: 36px; }
  .ac-bubble-icon svg { width: 20px; height: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PANEL (open state)
   ───────────────────────────────────────────────────────────────────────── */

#alvar-chat-panel {
  position: relative;
  width: 460px;
  height: 700px;
  max-height: calc(100vh - 48px);
  background: var(--ac-panel);
  background-image:
    radial-gradient(ellipse at top, rgba(212, 184, 106, 0.04), transparent 60%),
    linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
  border: 1px solid var(--ac-border-strong);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 40px 100px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: ac-panel-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ac-panel-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 480px) {
  /* Full-bleed on mobile. dvh (dynamic viewport height) handles iOS Safari's
     URL bar growing/shrinking — 100vh overflows when the URL bar is hidden. */
  #alvar-chat-panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  #alvar-chat-root.ac-open {
    position: fixed;
    inset: 0;
    bottom: 0;
    right: 0;
  }
  #alvar-chat-root:not(.ac-open) { bottom: 12px; right: 12px; }

  /* Tighter mobile chrome: smaller header, smaller bubbles, less padding */
  .ac-header { padding: 12px 14px !important; }
  .ac-header-avatar { width: 34px !important; height: 34px !important; }
  .ac-header-name { font-size: 14px !important; }
  .ac-header-status { font-size: 11px !important; }
  .ac-messages { padding: 14px 12px !important; gap: 10px !important; }
  .ac-msg { max-width: 90% !important; font-size: 14px !important; padding: 10px 13px !important; }
  #alvar-chat-form { padding: 10px 12px 8px !important; gap: 7px !important; }
  .ac-bottom-actions { padding: 4px 12px 6px !important; }
  .ac-footnote { padding: 2px 12px 10px !important; font-size: 10px !important; }
}

/* iOS Safari auto-zooms any input with font-size < 16px when focused. This
   applies to ALL viewports, not just mobile, because Safari on iPad also
   triggers the zoom. Bumping to 16px kills the zoom and is barely perceptible
   on desktop. */
#alvar-chat-input,
.ac-contact-form input,
.ac-contact-form textarea {
  font-size: 16px;
}

/* Body scroll lock when the panel is open on mobile. The class is toggled by
   the widget JS, scoped to ≤480px in the JS so it doesn't lock desktop scroll. */
body.ac-chat-open-mobile {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER — glassmorphism for premium depth
   ───────────────────────────────────────────────────────────────────────── */

.ac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ac-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
}

.ac-header-info {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ac-header-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(212, 184, 106, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.5);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ac-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ac-header-avatar svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  position: relative;
  z-index: 1;
}

.ac-header-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.ac-header-status {
  font-size: 11.5px;
  color: var(--ac-text-dim);
  line-height: 1.45;
  margin-top: 3px;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.ac-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: ac-pulse 2.4s ease-out infinite;
}

@keyframes ac-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  60%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

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

/* Unified header action button. All three (save email, new chat, close) share
   the same shape, hover treatment, and dimensions so the header reads as a
   single tidy control cluster rather than three different elements. */
.ac-header-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ac-text-dim);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ac-header-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ac-text);
  transform: translateY(-1px);
}
.ac-header-btn:active { transform: translateY(0); }
.ac-header-btn svg { display: block; }

/* Gold-tinted variant for the save-email action. Subtle hint that it's the
   value-add action without being a loud yellow pill. */
.ac-header-btn--gold {
  color: var(--ac-gold);
  position: relative;
}
.ac-header-btn--gold::after {
  /* Tiny accent dot in the top-right corner, signalling "do this" */
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ac-gold);
  box-shadow: 0 0 6px rgba(212, 184, 106, 0.55);
  opacity: 0.85;
}
.ac-header-btn--gold:hover {
  background: rgba(212, 184, 106, 0.08);
  border-color: rgba(212, 184, 106, 0.28);
  color: var(--ac-gold);
}

/* ─────────────────────────────────────────────────────────────────────────
   MESSAGES
   ───────────────────────────────────────────────────────────────────────── */

.ac-messages {
  flex: 1;
  overflow-y: auto;
  /* Stop the page underneath from also scrolling when the user hits the
     top/bottom of the chat. Without this, scrolling chains to <body>. */
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.ac-messages::-webkit-scrollbar { width: 5px; }
.ac-messages::-webkit-scrollbar-track { background: transparent; }
.ac-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  transition: background 0.2s;
}
.ac-messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

.ac-msg {
  max-width: 86%;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  word-wrap: break-word;
  animation: ac-msg-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.ac-msg-user {
  align-self: flex-end;
  background: var(--ac-bubble-user-bg);
  color: var(--ac-bubble-user-text);
  border-radius: 18px 18px 6px 18px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ac-msg-bot {
  align-self: flex-start;
  background: var(--ac-bubble-bot-bg);
  color: var(--ac-bubble-bot-text);
  border-radius: 18px 18px 18px 6px;
  border: 1px solid var(--ac-border);
}

.ac-msg-bot a {
  color: var(--ac-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 184, 106, 0.35);
  transition: border-color 0.2s;
}
.ac-msg-bot a:hover { border-bottom-color: var(--ac-gold); }

/* Inline "Contact Alvar about this" button — appears below a bot message
   when the bot wants to hand off. Sits as a flex child in .ac-messages,
   left-aligned like bot bubbles. Customer reads the message first, clicks
   when ready, then the form slides in. */
.ac-msg-contact-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: -4px;
  padding: 7px 14px 7px 11px;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.38);
  border-radius: 20px;
  color: #d4b86a;
  font-size: 0.77rem;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  animation: ac-msg-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.ac-msg-contact-btn:hover {
  background: rgba(201, 162, 39, 0.08);
  border-color: rgba(201, 162, 39, 0.65);
}
.ac-msg-contact-btn svg { flex-shrink: 0; opacity: 0.85; }

.ac-msg strong { font-weight: 600; }
.ac-msg p { margin: 0 0 9px 0; }
.ac-msg p:last-child { margin-bottom: 0; }

/* Discount code chip */
.ac-discount-code {
  display: inline-block;
  background: linear-gradient(135deg, rgba(212, 184, 106, 0.16) 0%, rgba(212, 184, 106, 0.08) 100%);
  color: var(--ac-gold);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 7px;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: all;
  border: 1px dashed rgba(212, 184, 106, 0.4);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.ac-discount-code:hover {
  background: linear-gradient(135deg, rgba(212, 184, 106, 0.22) 0%, rgba(212, 184, 106, 0.14) 100%);
  border-color: var(--ac-gold);
}

/* Typing indicator */
.ac-typing {
  align-self: flex-start;
  background: var(--ac-bubble-bot-bg);
  border: 1px solid var(--ac-border);
  padding: 14px 16px;
  border-radius: 18px 18px 18px 6px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.ac-typing span {
  width: 6px;
  height: 6px;
  background: var(--ac-gold);
  border-radius: 50%;
  opacity: 0.4;
  animation: ac-typing-bounce 1.4s ease-in-out infinite;
}

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

@keyframes ac-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-5px); opacity: 1; box-shadow: 0 0 8px rgba(212, 184, 106, 0.5); }
}

/* Error state */
.ac-msg-error {
  align-self: center;
  background: rgba(220, 80, 80, 0.1);
  color: #ff9a9a;
  font-size: 12.5px;
  border: 1px solid rgba(220, 80, 80, 0.22);
  border-radius: 10px;
  padding: 9px 13px;
}

/* ─────────────────────────────────────────────────────────────────────────
   INPUT FORM
   ───────────────────────────────────────────────────────────────────────── */

.ac-form {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 14px 16px 10px;
  border-top: 1px solid var(--ac-border);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  flex-shrink: 0;
}

#alvar-chat-input {
  flex: 1;
  background: var(--ac-elev-1);
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  color: var(--ac-text);
  font: inherit;
  font-size: 16px; /* MUST stay ≥16px or iOS Safari auto-zooms on focus */
  line-height: 1.45;
  letter-spacing: -0.005em;
  padding: 11px 15px;
  resize: none;
  outline: none;
  overflow-y: hidden;
  max-height: 120px;
  min-height: 42px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

#alvar-chat-input::placeholder {
  color: var(--ac-text-muted);
  font-weight: 400;
}

#alvar-chat-input:focus {
  border-color: rgba(212, 184, 106, 0.5);
  background: var(--ac-elev-2);
  box-shadow: 0 0 0 3px rgba(212, 184, 106, 0.08);
}

#alvar-chat-send {
  width: 42px;
  height: 42px;
  border: none;
  background: linear-gradient(180deg, var(--ac-gold) 0%, #b8985a 100%);
  color: #0a0a0a;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 8px rgba(212, 184, 106, 0.25);
}

#alvar-chat-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

#alvar-chat-send:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 14px rgba(212, 184, 106, 0.4);
}

#alvar-chat-send:not(:disabled):active { transform: translateY(0); }

#alvar-chat-send svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.ac-footnote {
  font-size: 10.5px;
  color: var(--ac-text-muted);
  text-align: center;
  padding: 6px 14px 12px;
  flex-shrink: 0;
  letter-spacing: 0.005em;
  line-height: 1.45;
}
.ac-footnote a {
  color: var(--ac-text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(245, 245, 245, 0.2);
}
.ac-footnote a:hover { color: var(--ac-text); }

/* ─────────────────────────────────────────────────────────────────────────
   CONTACT ALVAR BUTTON (bottom of panel)
   ───────────────────────────────────────────────────────────────────────── */

.ac-bottom-actions {
  padding: 6px 16px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Bottom-row primary actions. Visually identical to .ac-header-btn (same
   borders, hover, lift, transitions, font) but with text labels so the
   intent is obvious without hovering. Tooltips still fill in the detail. */
.ac-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: transparent;
  color: var(--ac-text-dim);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ac-bottom-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ac-text);
  transform: translateY(-1px);
}
.ac-bottom-btn:active { transform: translateY(0); }
.ac-bottom-btn svg { display: block; flex-shrink: 0; }

/* Gold-tinted variant for the save-email action. Same subtle accent dot
   in the top-right corner as .ac-header-btn--gold. */
.ac-bottom-btn--gold {
  color: var(--ac-gold);
  position: relative;
}
.ac-bottom-btn--gold::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ac-gold);
  box-shadow: 0 0 6px rgba(212, 184, 106, 0.55);
  opacity: 0.85;
}
.ac-bottom-btn--gold:hover {
  background: rgba(212, 184, 106, 0.08);
  border-color: rgba(212, 184, 106, 0.28);
  color: var(--ac-gold);
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTACT FORM (overlay over chat)
   ───────────────────────────────────────────────────────────────────────── */

.ac-contact-form {
  position: absolute;
  inset: 0;
  background: var(--ac-panel);
  background-image:
    radial-gradient(ellipse at top, rgba(212, 184, 106, 0.05), transparent 60%),
    linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
  display: flex;
  flex-direction: column;
  z-index: 2;
  animation: ac-panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

#alvar-chat-panel { position: relative; }

.ac-contact-form__header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ac-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
}

.ac-contact-form__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ac-text-dim);
  border: none;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  border-radius: 8px;
  transition: color 0.2s;
  font-family: inherit;
}

.ac-contact-form__back:hover { color: var(--ac-gold); }
.ac-contact-form__back svg { stroke-width: 2.2; }

.ac-contact-form__body {
  flex: 1;
  padding: 24px 22px;
  overflow-y: auto;
}

.ac-contact-form__body h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ac-text);
}

.ac-contact-form__body p {
  margin: 0 0 22px 0;
  font-size: 13px;
  color: var(--ac-text-dim);
  line-height: 1.55;
  letter-spacing: -0.003em;
}

.ac-cf-label {
  display: block;
  margin-bottom: 18px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ac-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ac-cf-label input,
.ac-cf-label textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 14px;
  background: var(--ac-elev-1);
  border: 1px solid var(--ac-border);
  border-radius: 11px;
  color: var(--ac-text);
  font: inherit;
  font-size: 16px; /* MUST stay ≥16px or iOS Safari auto-zooms on focus */
  font-weight: normal;
  text-transform: none;
  letter-spacing: -0.005em;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ac-cf-label input:focus,
.ac-cf-label textarea:focus {
  border-color: rgba(212, 184, 106, 0.5);
  background: var(--ac-elev-2);
  box-shadow: 0 0 0 3px rgba(212, 184, 106, 0.08);
}

.ac-cf-submit {
  width: 100%;
  background: linear-gradient(180deg, var(--ac-gold) 0%, #b8985a 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 13px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 10px rgba(212, 184, 106, 0.25);
}

.ac-cf-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 16px rgba(212, 184, 106, 0.4);
}

.ac-cf-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.ac-cf-fallback {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: transparent;
  color: var(--ac-text-muted);
  border: none;
  font-size: 12px;
  letter-spacing: -0.003em;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 6px 0;
  font-family: inherit;
  transition: color 0.2s;
}

.ac-cf-fallback:hover { color: var(--ac-gold); }

.ac-cf-status {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
  letter-spacing: -0.005em;
}

.ac-cf-status--success { color: #4ade80; }
.ac-cf-status--error   { color: #ff9a9a; }

.ac-copy-mail {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  background: rgba(212, 184, 106, 0.12);
  color: var(--ac-gold);
  border: 1px solid rgba(212, 184, 106, 0.32);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ac-copy-mail:hover {
  background: rgba(212, 184, 106, 0.2);
  border-color: var(--ac-gold);
}

/* ---- Re-engagement: queued reply notification + context styles ----------- */

/* Pulsing badge on the bubble when a queued message is waiting */
#alvar-chat-root.ac-has-queued .ac-bubble::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #ff5a5a;
  border-radius: 50%;
  border: 2px solid var(--ac-bg, #0f0f0f);
  animation: ac-queued-pulse 1.4s ease-out infinite;
}

@keyframes ac-queued-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Context messages (the last few turns shown before the new one) */
.ac-msg.ac-msg-context {
  opacity: 0.42;
}

/* Visual divider above the first context message: "earlier in this conversation" */
.ac-msg.ac-msg-context:first-child::before {
  content: 'Earlier in this conversation';
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   RE-ENGAGE HIGHLIGHT: makes the delivered queued message clearly NEW
   ───────────────────────────────────────────────────────────────────────── */

.ac-msg.ac-msg-reengage-new {
  position: relative;
  border: 1px solid rgba(212, 184, 106, 0.55) !important;
  background: linear-gradient(135deg, rgba(212,184,106,0.10), rgba(212,184,106,0.04)) !important;
  box-shadow:
    0 0 0 4px rgba(212, 184, 106, 0.08),
    0 4px 14px rgba(212, 184, 106, 0.18);
  animation: ac-reengage-glow 2.6s ease-out 0s 2;
}
.ac-msg.ac-msg-reengage-new::before {
  content: '✨ New from Alvar — while you were away';
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ac-gold);
  letter-spacing: 0.35px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 184, 106, 0.22);
  text-transform: uppercase;
}
@keyframes ac-reengage-glow {
  0%   { box-shadow: 0 0 0 4px rgba(212,184,106,0.08), 0 0 0 0 rgba(212,184,106,0.5); }
  40%  { box-shadow: 0 0 0 8px rgba(212,184,106,0.14), 0 0 30px 6px rgba(212,184,106,0.4); }
  100% { box-shadow: 0 0 0 4px rgba(212,184,106,0.08), 0 4px 14px rgba(212,184,106,0.18); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SAVE-EMAIL INLINE PANEL (toggled by header envelope button)
   The button itself uses .ac-header-btn styling defined above.
   ───────────────────────────────────────────────────────────────────────── */

.ac-saveemail-panel {
  background: linear-gradient(180deg, rgba(212,184,106,0.10), rgba(212,184,106,0.04));
  border-bottom: 1px solid rgba(212, 184, 106, 0.25);
  padding: 12px 16px;
  animation: ac-saveemail-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ac-saveemail-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ac-saveemail-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
#alvar-saveemail-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212, 184, 106, 0.35);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--ac-text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
#alvar-saveemail-input:focus { border-color: var(--ac-gold); }
#alvar-saveemail-go {
  background: linear-gradient(180deg, var(--ac-gold), #b8985a);
  color: #0a0a0a;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}
#alvar-saveemail-go:disabled { opacity: 0.4; cursor: not-allowed; }
.ac-saveemail-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--ac-text-muted);
  letter-spacing: 0.1px;
}
#alvar-saveemail-close {
  background: none;
  border: none;
  color: var(--ac-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
#alvar-saveemail-close:hover { color: var(--ac-text); }
.ac-saveemail-status {
  font-size: 11.5px;
  margin-top: 6px;
  min-height: 14px;
}
.ac-saveemail-status.ok { color: #6ee06e; }
.ac-saveemail-status.err { color: #ff9090; }

/* ─────────────────────────────────────────────────────────────────────────
   EMAIL-THIS-CONVERSATION BAR (appears after 5+ turns)
   ───────────────────────────────────────────────────────────────────────── */

.ac-emailchat-bar {
  padding: 8px 16px 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.2);
}
.ac-emailchat-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ac-text-dim);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ac-emailchat-trigger:hover {
  background: rgba(212, 184, 106, 0.08);
  color: var(--ac-gold);
  border-color: rgba(212, 184, 106, 0.30);
}
.ac-emailchat-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
#alvar-emailchat-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212, 184, 106, 0.30);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--ac-text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
#alvar-emailchat-input:focus { border-color: var(--ac-gold); }
#alvar-emailchat-send {
  background: var(--ac-gold);
  color: #0a0a0a;
  border: none;
  padding: 7px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
#alvar-emailchat-send:disabled { opacity: 0.4; cursor: not-allowed; }
#alvar-emailchat-cancel {
  background: none; border: none; color: var(--ac-text-muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.ac-emailchat-status {
  font-size: 11.5px;
  margin-top: 6px;
  min-height: 14px;
}
.ac-emailchat-status.ok { color: #6ee06e; }
.ac-emailchat-status.err { color: #ff9090; }

/* ─────────────────────────────────────────────────────────────────────────
   PROGRESSIVE EMAIL NUDGE (appears inline in the chat after ~3 user msgs)
   Single-field, frictionless, dismissible. Not a popup, not a blocker —
   sits in the message stream like a soft suggestion from the bot.
   ───────────────────────────────────────────────────────────────────────── */

.ac-nudge-card {
  position: relative;
  align-self: stretch;
  margin: 8px 0 4px;
  padding: 14px 16px 14px 16px;
  background: linear-gradient(135deg, rgba(212, 184, 106, 0.10) 0%, rgba(212, 184, 106, 0.04) 100%);
  border: 1px solid rgba(212, 184, 106, 0.32);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-text);
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 14px rgba(0, 0, 0, 0.25);
  animation: ac-nudge-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ac-nudge-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ac-nudge-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ac-gold);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ac-nudge-title svg { width: 14px; height: 14px; }
.ac-nudge-body { color: rgba(245,245,245,0.85); margin-bottom: 10px; }
.ac-nudge-row {
  display: flex;
  gap: 6px;
}
.ac-nudge-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 184, 106, 0.35);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--ac-text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.ac-nudge-input:focus { border-color: var(--ac-gold); }
.ac-nudge-save {
  background: linear-gradient(180deg, var(--ac-gold), #b8985a);
  color: #0a0a0a;
  border: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.ac-nudge-save:hover:not(:disabled) { transform: translateY(-1px); }
.ac-nudge-save:disabled { opacity: 0.45; cursor: not-allowed; }
.ac-nudge-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--ac-text-muted);
  letter-spacing: 0.1px;
}
.ac-nudge-dismiss {
  background: none;
  border: none;
  color: var(--ac-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.ac-nudge-dismiss:hover { color: var(--ac-text-dim); }
.ac-nudge-status { font-size: 11px; margin-top: 6px; min-height: 14px; }
.ac-nudge-status.ok { color: #6ee06e; }
.ac-nudge-status.err { color: #ff9090; }
/* Success state: collapse the form, show only the confirmation */
.ac-nudge-card.is-saved {
  background: linear-gradient(135deg, rgba(110, 224, 110, 0.10) 0%, rgba(110, 224, 110, 0.04) 100%);
  border-color: rgba(110, 224, 110, 0.40);
}
.ac-nudge-card.is-saved .ac-nudge-row,
.ac-nudge-card.is-saved .ac-nudge-footer { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   GENERIC TOOLTIP (data-ac-tooltip="..." on any element)
   ───────────────────────────────────────────────────────────────────────── */

/* Tooltips are rendered by JS into a body-level portal (#ac-tooltip-portal)
   so they always escape the chat panel's overflow:hidden. See setupTooltipPortal
   in chat-widget.js. CSS for the portal itself: */

#ac-tooltip-portal {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  max-width: 280px;
  background: linear-gradient(180deg, #1f1f1f 0%, #131313 100%);
  color: rgba(245, 245, 245, 0.95);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.003em;
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 184, 106, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 14px 38px rgba(0, 0, 0, 0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform: translateY(-4px);
  will-change: opacity, transform, top, left;
}
#ac-tooltip-portal.is-visible {
  opacity: 1;
  transform: translateY(0);
}