/* Persistent floating chat widget (Phase A). Self-contained: its own tokens so
   it renders identically on index.html AND the backend-rendered legal pages
   (which don't load styles.css). Fixed, off document flow — no layout shift.
   Mirrors the existing #chat look (bubbles/composer) so it's the same product. */
#aygChatWidget {
  --w-cyan: #33e1ff;
  --w-blue: #5b8cff;
  --w-bg: #0b1018;
  --w-panel: #0e141d;
  --w-panel2: #121a26;
  --w-line: rgba(255, 255, 255, 0.09);
  --w-ink: #dfe7f0;
  --w-muted: #8896a8;
  --w-red: #ff6b6b;
  --w-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Above page content + sticky nav, BELOW any modal (modals use 1000+). */
  position: fixed;
  z-index: 900;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  font-family: var(--w-mono);
  /* Container itself is inert; children catch pointer events. */
  pointer-events: none;
}
#aygChatWidget * { box-sizing: border-box; }

/* ── Collapsed pill ── */
#aygChatPill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--w-cyan), var(--w-blue));
  color: #04121a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}
#aygChatPill:hover { transform: translateY(-1px); }
#aygChatPill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #04121a; opacity: 0.65;
}

/* ── Expanded panel ── */
#aygChatPanel {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  /* dvh so the mobile keyboard can't cover it (dynamic viewport height). */
  height: min(560px, calc(100dvh - 120px));
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#aygChatWidget[data-open="true"] #aygChatPanel { display: flex; }
#aygChatWidget[data-open="true"] #aygChatPill { display: none; }

#aygChatHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid var(--w-line);
  background: var(--w-panel);
}
#aygChatHead .title { font-size: 13px; font-weight: 700; color: var(--w-ink); }
#aygChatHead .title small { display: block; font-size: 10px; color: var(--w-muted); font-weight: 400; margin-top: 2px; }
#aygChatClose {
  background: none; border: none; color: var(--w-muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
#aygChatClose:hover { color: var(--w-ink); }

#aygChatMessages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 15px;
}
#aygChatWidget .bubble {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
#aygChatWidget .bubble.user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--w-cyan), var(--w-blue));
  color: #04121a; font-weight: 600;
  border-bottom-right-radius: 4px;
}
#aygChatWidget .bubble.assistant {
  align-self: flex-start;
  background: var(--w-panel2);
  border: 1px solid var(--w-line);
  color: var(--w-ink);
  border-bottom-left-radius: 4px;
}
#aygChatWidget .bubble.thinking { color: var(--w-muted); }
#aygChatWidget .bubble.err { border: 1px solid var(--w-red); color: var(--w-red); background: transparent; }

/* Gentle gate state (no profile / locked) — a CTA, not an error. */
#aygChatGate {
  margin: auto;
  text-align: center;
  color: var(--w-muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 24px 18px;
}
#aygChatGate a { color: var(--w-cyan); text-decoration: none; font-weight: 600; }

#aygChatStarters { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 10px; }
#aygChatStarters button {
  font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.02em;
  cursor: pointer; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--w-line); background: rgba(51, 225, 255, 0.06);
  color: var(--w-ink);
}
#aygChatStarters button:hover { background: rgba(51, 225, 255, 0.14); }

#aygChatComposer {
  display: flex; gap: 9px;
  padding: 12px 15px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--w-line);
  background: var(--w-panel);
}
#aygChatComposer input {
  flex: 1;
  background: var(--w-bg); border: 1px solid var(--w-line);
  border-radius: 11px; padding: 11px 13px;
  color: var(--w-ink); font-size: 14px; font-family: inherit;
}
#aygChatComposer input:focus { outline: none; border-color: var(--w-cyan); }
#aygChatComposer button {
  width: 48px; border: none; border-radius: 11px; cursor: pointer;
  font-size: 18px; color: #04121a;
  background: linear-gradient(180deg, var(--w-cyan), var(--w-blue));
}
#aygChatComposer button:disabled { opacity: 0.45; cursor: default; }

/* Mobile: near-fullscreen panel, dvh keeps it above the keyboard. */
@media (max-width: 520px) {
  #aygChatWidget { right: 0; bottom: 0; left: 0; }
  #aygChatWidget[data-open="true"] { left: 0; }
  #aygChatPill { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  #aygChatPanel {
    width: 100vw;
    height: 100dvh;
    height: 100svh;
    border-radius: 0;
    border: none;
  }
}