/*
 * Front Billy, the public "Ask Billy" chat on every organic page
 * (lib/marketing-ui/components/chat/FrontBilly.astro, front-billy.v1.js next
 * to this file).
 *
 * Versioned file name: /marketing/* is cached in browsers for a day, so any
 * edit ships as the next version (front-billy.v2.css, .js) with both tags in
 * FrontBilly.astro and FRONT_BILLY_VERSION in scripts/verify-static.mjs
 * bumped together.
 *
 * Served from public/marketing/ on purpose: a stylesheet imported by an Astro
 * component lands in the shared CSS bundle, and the homepage's CSS file must
 * not change; /marketing/ is a path the tracking Worker sends to Pages.
 * Site tokens only, so light and dark mode both work. The pill sits above
 * the sticky Nav (z-40) and below nothing else on these pages.
 */

#gl-billy { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: inherit; }
#gl-billy[hidden] { display: none; }
#gl-billy * { box-sizing: border-box; }

/* 1. The pill. */
.gl-billy-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 10px 30px -10px rgba(79, 70, 229, .65), 0 2px 8px rgba(0, 0, 0, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gl-billy-pill:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(79, 70, 229, .75), 0 3px 10px rgba(0, 0, 0, .14); }
.gl-billy-pill:active { transform: translateY(0); }
.gl-billy-pill:focus-visible, .gl-billy-icon:focus-visible, .gl-billy-send:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.gl-billy-pill svg { flex: none; }
#gl-billy.is-open .gl-billy-pill { display: none; }

/* 2. The panel. */
.gl-billy-panel {
  display: none; flex-direction: column; width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 20px;
  background: hsl(var(--card) / .92); color: hsl(var(--foreground));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .08);
  transform-origin: bottom right;
}
.gl-billy-panel[hidden] { display: none; }
#gl-billy.is-open .gl-billy-panel { display: flex; animation: gl-billy-in .2s ease-out; }
@keyframes gl-billy-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.gl-billy-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px;
  border-bottom: 1px solid hsl(var(--border));
}
.gl-billy-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
  border-radius: 10px; color: #fff; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}
.gl-billy-headtext { flex: 1; min-width: 0; }
.gl-billy-headtext h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gl-billy-headtext p { margin: 2px 0 0; font-size: 12px; line-height: 1.2; color: hsl(var(--muted-foreground)); }
.gl-billy-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.gl-billy-icon:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* 3. The transcript. */
.gl-billy-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.gl-billy-msg { display: flex; }
.gl-billy-msg-bot { justify-content: flex-start; }
.gl-billy-msg-user { justify-content: flex-end; }
.gl-billy-bubble {
  max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.gl-billy-msg-bot .gl-billy-bubble { background: hsl(var(--muted)); color: hsl(var(--foreground)); border-bottom-left-radius: 6px; }
.gl-billy-msg-user .gl-billy-bubble { background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); color: #fff; border-bottom-right-radius: 6px; }
.gl-billy-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gl-billy-bubble strong { font-weight: 600; }
.gl-billy-status { font-size: 12px; color: hsl(var(--muted-foreground)); padding: 0 4px; }
.gl-billy-status[hidden] { display: none; }
.gl-billy-dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: gl-billy-dots 1.2s steps(4, end) infinite; }
@keyframes gl-billy-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.gl-billy-error .gl-billy-bubble { background: hsl(var(--destructive) / .12); color: hsl(var(--foreground)); }

/* 4. Composer. */
.gl-billy-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid hsl(var(--border)); }
.gl-billy-input {
  flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; resize: none;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background));
  color: hsl(var(--foreground)); font: inherit; font-size: 14px; line-height: 1.4;
}
.gl-billy-input:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: transparent; }
.gl-billy-input::placeholder { color: hsl(var(--muted-foreground)); }
.gl-billy-send {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  border: 0; border-radius: 12px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}
.gl-billy-send:disabled { opacity: .5; cursor: default; }
.gl-billy-foot { margin: 0; padding: 0 14px 10px; font-size: 11px; line-height: 1.4; text-align: center; color: hsl(var(--muted-foreground)); }
.gl-billy-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 5. Phones: a bottom sheet. */
@media (max-width: 639px) {
  #gl-billy { right: 14px; bottom: 14px; }
  #gl-billy.is-open { inset: auto 0 0 0; }
  .gl-billy-panel {
    width: 100%; max-width: none; height: 82vh; height: 82dvh; max-height: none;
    border-radius: 20px 20px 0 0; border-bottom: 0; transform-origin: bottom center;
  }
  .gl-billy-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .gl-billy-pill, #gl-billy.is-open .gl-billy-panel { transition: none; animation: none; }
  .gl-billy-dots::after { animation: none; content: "..."; }
}