/* chat.css — "Ask Will" widget, themed to the site tokens (light/dark aware).
   Uses the same CSS custom properties as styles.css so it stays on-brand in both themes. */
#cw-launch{position:fixed;right:20px;bottom:20px;z-index:9999;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;
  padding:13px 20px;font:600 15px/1 var(--font);box-shadow:var(--shadow);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
#cw-launch:hover{background:var(--accent-strong)}
#cw-panel{position:fixed;right:20px;bottom:80px;width:360px;max-width:92vw;height:520px;max-height:74vh;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  display:none;flex-direction:column;overflow:hidden;z-index:9999;font:15px/1.55 var(--font);color:var(--ink)}
#cw-panel.open{display:flex}
#cw-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px}
#cw-head .cw-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
#cw-log{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.cw-msg{padding:10px 13px;border-radius:14px;max-width:85%;white-space:pre-wrap}
.cw-user{align-self:flex-end;background:var(--accent-tint);color:var(--ink)}
.cw-will{align-self:flex-start;background:var(--ground);color:var(--ink);border:1px solid var(--line)}
#cw-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
#cw-input{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font:15px var(--font);
  background:var(--ground);color:var(--ink)}
#cw-input:focus{outline:2px solid var(--accent);outline-offset:1px}
#cw-send{background:var(--accent);color:var(--accent-ink);border:none;border-radius:11px;padding:0 16px;
  cursor:pointer;font:600 14px var(--font)}
#cw-send:hover{background:var(--accent-strong)}
/* Mobile: the panel is a keyboard-aware bottom sheet — sized to its CONTENT (so a short
   chat has no dead space) up to 82% of the VISIBLE viewport, anchored just above the
   keyboard. Paired with <meta viewport ... interactive-widget=resizes-content> so the
   browser reflows the page above the on-screen keyboard instead of behind it. */
@media (max-width:640px){
  #cw-panel{left:8px;right:8px;width:auto;bottom:8px;top:auto;height:auto;max-height:82dvh}
}

/* Mobile: collapse the pill to a compact circle (just the 💬) so it stops covering
   the full-width "Book Now" bar's text. aria-label on the button keeps it accessible. */
@media (max-width:640px){
  #cw-launch{padding:0;width:54px;height:54px;border-radius:50%;justify-content:center;gap:0}
  #cw-launch .cw-label{display:none}
  #cw-launch .cw-ico{font-size:24px;line-height:1}
}

/* Desktop: a subtle periodic nudge so visitors notice it's a chat, not another button.
   Mostly at rest, a quick double-hop every 4s. Pauses on hover and while the panel is open;
   fully disabled for reduced-motion users. */
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  #cw-launch{animation:cw-nudge 4s ease-in-out 3s infinite}
  #cw-launch:hover{animation:none}
  body:has(#cw-panel.open) #cw-launch{animation:none}
}
@keyframes cw-nudge{
  0%,90%,100%{transform:translateY(0)}
  93%{transform:translateY(-7px)}
  96%{transform:translateY(-3px)}
}