/* ============================================================================
   eVamb Cinematic — Buddy widget styling
   ---------------------------------------------------------------------------
   Copper / ink themed, glass-light, anchored bottom-right. Buddy carries its
   OWN ground (light glass) so it looks identical over ink and cream sections —
   it does NOT inherit the page's nearest-ground --c-text vars.

   Constraints honoured:
     · Uses the design tokens (tokens.css). No new palette values.
     · Mobile-safe with safe-area-inset; inputs are >= 16px (no iOS zoom).
     · Respects prefers-reduced-motion (transitions/animations collapse).
     · No external assets; all icons are inline author-controlled SVG.
   All selectors are scoped under #buddy-root so the widget can't bleed into
   the page and the page can't restyle it by accident.
   ========================================================================== */

#buddy-root {
  /* Local theme tokens — Buddy's own ground (does not follow page ground). */
  --bd-z:            calc(var(--z-modal, 300) + 10);
  --bd-ink:          var(--ink, #05060B);
  --bd-paper:        var(--paper, #F8F4EB);
  --bd-cream:        var(--cream, #F0E8D8);
  --bd-copper:       var(--copper, #C9783C);
  --bd-copper-text:  var(--copper-on-cream, #9E5224);
  --bd-text:         var(--text-on-cream, #05060B);
  --bd-muted:        var(--text-on-cream-muted, #4A4536);
  --bd-hairline:     var(--hairline-on-cream, rgba(10, 13, 20, 0.12));
  --bd-surface:      rgba(248, 244, 235, 0.92);   /* paper glass */
  --bd-surface-2:    #FFFFFF;
  --bd-grad:         var(--grad-gold, linear-gradient(135deg, #C9783C 0%, #E8A23C 52%, #F2C879 100%));
  --bd-shadow:       0 1px 2px rgba(10, 13, 20, 0.10), 0 24px 64px rgba(10, 13, 20, 0.28);
  --bd-radius:       var(--r-lg, 22px);
  --bd-font:         var(--font-body, "Inter", system-ui, sans-serif);
  --bd-font-mono:    var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --bd-ease:         var(--ease-out, cubic-bezier(.22, .61, .36, 1));

  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--bd-z);
  font-family: var(--bd-font);
  /* The root itself doesn't intercept clicks — children re-enable it. */
  pointer-events: none;
}

#buddy-root * { box-sizing: border-box; }

/* Visually-hidden helper for the input label. */
#buddy-root .buddy-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ─── Launcher (FAB) ───────────────────────────────────────────────────── */
.buddy-fab {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--bd-grad);
  color: var(--bd-ink);
  cursor: pointer;
  box-shadow: var(--shadow-cta, 0 6px 20px rgba(201, 120, 60, 0.35)), 0 10px 30px rgba(10, 13, 20, 0.22);
  transition: transform var(--dur-2, 240ms) var(--bd-ease),
              box-shadow var(--dur-2, 240ms) var(--bd-ease),
              opacity var(--dur-2, 240ms) var(--bd-ease);
}
.buddy-fab:hover { transform: translateY(-2px); }
.buddy-fab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 163, 217, 0.55)), 0 10px 30px rgba(10, 13, 20, 0.22);
}

.buddy-fab-core {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.buddy-fab-tag {
  font-family: var(--bd-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-right: 20px;
  /* Collapse to icon-only on small screens. */
  max-width: 9rem;
  overflow: hidden;
  white-space: nowrap;
}

.buddy-fab.is-active .buddy-fab-tag { opacity: 0; }
.buddy-fab.is-active { width: 56px; }

/* On narrow screens, the FAB is icon-only to save space. */
@media (max-width: 479px) {
  .buddy-fab-tag { display: none; }
  .buddy-fab { width: 56px; }
}

/* ─── Panel ────────────────────────────────────────────────────────────── */
.buddy-panel {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(384px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 96px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bd-surface);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--bd-hairline);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow);
  color: var(--bd-text);

  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform var(--dur-3, 420ms) var(--bd-ease),
              opacity var(--dur-3, 420ms) var(--bd-ease);
}
.buddy-panel.is-open { transform: translateY(0) scale(1); opacity: 1; }
.buddy-panel[hidden] { display: none; }

/* ─── Header ───────────────────────────────────────────────────────────── */
.buddy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 16px);
  padding: 14px 14px 12px 16px;
  background: var(--bd-ink);
  color: var(--text-on-ink, #F0E8D8);
  border-bottom: 1px solid var(--hairline-on-ink, rgba(240, 232, 216, 0.12));
}
.buddy-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.buddy-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bd-grad);
  color: var(--bd-ink);
}
.buddy-id-text { min-width: 0; }
.buddy-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.buddy-online {
  font-family: var(--bd-font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #F2C879);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.buddy-online::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold, #F2C879);
  box-shadow: 0 0 8px var(--gold, #F2C879);
}
.buddy-role {
  font-family: var(--bd-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-on-ink-muted, #B9AE99);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buddy-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-on-ink-muted, #B9AE99);
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--bd-ease), color var(--dur-1, 120ms) var(--bd-ease);
}
.buddy-close:hover { background: rgba(240, 232, 216, 0.10); color: var(--text-on-ink, #F0E8D8); }
.buddy-close:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 163, 217, 0.55)); }

/* ─── Body / message log ───────────────────────────────────────────────── */
.buddy-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--bd-hairline) transparent;
}
.buddy-body::-webkit-scrollbar { width: 8px; }
.buddy-body::-webkit-scrollbar-thumb { background: var(--bd-hairline); border-radius: 999px; }

.buddy-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.buddy-row-user { justify-content: flex-end; }
.buddy-row-bot { justify-content: flex-start; }

.buddy-bubble-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bd-grad);
  align-self: flex-start;
  margin-top: 2px;
}
.bba-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-ink); }

.buddy-bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 84%;
}

.buddy-bubble {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 10px 13px;
  border-radius: 14px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.buddy-bubble b { font-weight: 600; }
.buddy-bubble i { font-style: italic; }
.buddy-bubble a {
  color: var(--bd-copper-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.buddy-bubble a:hover { color: var(--bd-ink); }

.buddy-bubble-bot {
  background: var(--bd-surface-2);
  color: var(--bd-text);
  border: 1px solid var(--bd-hairline);
  border-bottom-left-radius: 5px;
}
.buddy-bubble-user {
  background: var(--bd-ink);
  color: var(--text-on-ink, #F0E8D8);
  border-bottom-right-radius: 5px;
  max-width: 84%;
}

/* Honest stage pills inside answers. */
.bd-stage {
  display: inline-block;
  font-family: var(--bd-font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 6px;
  border: 1px solid var(--bd-hairline);
  color: var(--bd-muted);
  background: var(--bd-cream);
  vertical-align: middle;
  white-space: nowrap;
}
.bd-stage-live {
  color: var(--bd-copper-text);
  border-color: var(--bd-copper-text);
  background: rgba(201, 120, 60, 0.08);
}

/* ─── Quick-reply chips ────────────────────────────────────────────────── */
.buddy-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.buddy-chip {
  font-family: var(--bd-font);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--bd-copper-text);
  background: transparent;
  color: var(--bd-copper-text);
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--bd-ease),
              color var(--dur-1, 120ms) var(--bd-ease),
              transform var(--dur-1, 120ms) var(--bd-ease);
}
.buddy-chip:hover { background: var(--bd-copper-text); color: var(--bd-paper); }
.buddy-chip:active { transform: scale(0.97); }
.buddy-chip:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 163, 217, 0.55)); }

/* ─── Inline CTA button ────────────────────────────────────────────────── */
.buddy-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: var(--bd-font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 15px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--bd-grad);
  color: var(--bd-ink);
  cursor: pointer;
  transition: transform var(--dur-1, 120ms) var(--bd-ease), filter var(--dur-1, 120ms) var(--bd-ease);
}
.buddy-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.buddy-cta:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 163, 217, 0.55)); }
.buddy-arrow { transition: transform var(--dur-1, 120ms) var(--bd-ease); }
.buddy-cta:hover .buddy-arrow { transform: translateX(2px); }

/* ─── Typing indicator ─────────────────────────────────────────────────── */
.buddy-typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px; }
.buddy-typing .td {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bd-muted);
  opacity: 0.5;
  animation: buddy-bounce 1.2s infinite ease-in-out;
}
.buddy-typing .td:nth-child(2) { animation-delay: 0.16s; }
.buddy-typing .td:nth-child(3) { animation-delay: 0.32s; }
@keyframes buddy-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 0.9; }
}

/* ─── Composer ─────────────────────────────────────────────────────────── */
.buddy-input {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--bd-hairline);
  background: var(--bd-surface-2);
}
.buddy-input-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--bd-font);
  font-size: 16px;            /* >= 16px prevents iOS zoom-on-focus */
  line-height: 1.3;
  padding: 11px 14px;
  border: 1px solid var(--bd-hairline);
  border-radius: var(--r-pill, 999px);
  background: var(--bd-paper);
  color: var(--bd-text);
  transition: border-color var(--dur-1, 120ms) var(--bd-ease), box-shadow var(--dur-1, 120ms) var(--bd-ease);
}
.buddy-input-text::placeholder { color: var(--bd-muted); opacity: 0.7; }
.buddy-input-text:focus {
  outline: none;
  border-color: var(--bd-copper-text);
  box-shadow: 0 0 0 3px rgba(201, 120, 60, 0.18);
}
.buddy-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--bd-grad);
  color: var(--bd-ink);
  cursor: pointer;
  transition: transform var(--dur-1, 120ms) var(--bd-ease), filter var(--dur-1, 120ms) var(--bd-ease);
}
.buddy-send:hover { transform: scale(1.06); filter: brightness(1.04); }
.buddy-send:active { transform: scale(0.96); }
.buddy-send:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 163, 217, 0.55)); }

.buddy-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-family: var(--bd-font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--bd-muted);
  background: var(--bd-surface-2);
}
.buddy-foot b { color: var(--bd-text); font-weight: 600; }

/* ─── Mobile: panel becomes a near-full-height sheet ───────────────────── */
@media (max-width: 519px) {
  #buddy-root {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
  .buddy-panel {
    width: auto;
    left: 0;
    right: 0;
    max-height: min(78dvh, calc(100dvh - 88px));
  }
  .buddy-fab { left: auto; }
}

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #buddy-root *,
  #buddy-root *::before,
  #buddy-root *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .buddy-panel { transform: none; }
  .buddy-panel.is-open { transform: none; }
}

/* ─── LIVE chat (Buddy ↔ Buddy Desk) ─────────────────────────────────── */
.buddy-live-form{display:grid;gap:.5rem;margin-top:.55rem;max-width:280px}
.buddy-live-form input{width:100%;background:rgba(255,255,255,.75);border:1px solid rgba(5,6,11,.25);border-radius:8px;padding:.55rem .7rem;font-size:.92rem;color:#141008}
.buddy-live-form input:focus{outline:2px solid var(--accent,#F2A93C);outline-offset:1px}
.buddy-live-err{color:#A93226;font-size:.85rem;font-weight:600;margin:0}
.buddy-bubble-live{border-left:2px solid var(--saffron,#F2A93C)}
.buddy-avatar-live .bba-dot{background:#7BD88F}
.buddy-online.is-live{color:#7BD88F}