/* PROTOTYPE: Clawd's bubbles (js/clawd.js), in the site's HIG Native Liquid Glass (css/mac.css: .mac[data-theme=dark]).
   The tour speaks in a speech bubble with a tail toward him; answers rise from his head in a thought bubble, three
   glass puffs leading up to it. js/clawd.js places them every frame (transform: translate), so they stay by his head
   while he moves; here they only get their look and their entrance. */
#clawd { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#clawd [hidden] { display: none !important; }
#clawd.offscreen > * { visibility: hidden; }
body:not([data-phase="room"]):not([data-phase="desk"]) #clawd { display: none; }

#clawd .clawd-say, #clawd .clawd-think, #clawd .clawd-tail, #clawd .clawd-puff { position: absolute; left: 0; top: 0; will-change: transform; }

/* the tour's speech bubble: a popover (20pt corners), body text 15/20, the step's buttons at its foot */
#clawd .clawd-say { width: min(318px, calc(100vw - 24px)); padding: 14px 16px; border-radius: var(--radius-mac-popover);
  font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-primary);
  transition: opacity 0.22s ease, scale 0.38s cubic-bezier(.34, 1.45, .64, 1); }
#clawd .clawd-say:has(.clawd-foot:not([hidden])) { pointer-events: auto; }   /* a plain line never blocks a click */
#clawd .clawd-text { margin: 0; text-wrap: pretty; }
#clawd .clawd-sub { margin: 6px 0 0; font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: #ffb27a; }
#clawd .clawd-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
#clawd .clawd-foot .clawd-skip { margin-right: 4px; }   /* Back and Next sit together */
#clawd .clawd-count { flex: 1; font: 400 12px/16px var(--font-sans); color: var(--label-secondary); font-variant-numeric: tabular-nums; }
#clawd .clawd-foot .mac-btn { height: 28px; padding: 0 12px; border-radius: var(--radius-capsule); }
#clawd .clawd-skip, #clawd .clawd-back { color: var(--label-primary); }
#clawd .clawd-say.glide { transition: transform 0.35s ease, opacity 0.22s ease, scale 0.38s cubic-bezier(.34, 1.45, .64, 1); }
#clawd .clawd-tail.glide { transition: transform 0.35s ease, opacity 0.22s ease; }
/* the tail: a glass square turned 45°, cut to the half outside the bubble */
#clawd .clawd-tail { width: 16px; height: 16px; border-radius: 0 0 3px 0; box-shadow: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); transition: opacity 0.22s ease; }
#clawd .clawd-tail.up { border-radius: 3px 0 0 0; clip-path: polygon(0 100%, 0 0, 100% 0); }

/* the thought bubble: rounder, and his answer in it (it scrolls if it's long) */
#clawd .clawd-think { width: max-content; max-width: min(340px, calc(100vw - 24px)); max-height: min(44vh, 340px); overflow: auto;
  padding: 14px 18px; border-radius: 26px; pointer-events: auto; overscroll-behavior: contain;
  font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-primary);
  transition: opacity 0.25s ease, scale 0.45s cubic-bezier(.34, 1.45, .64, 1); }
#clawd .clawd-think-text { margin: 0; text-wrap: pretty; white-space: pre-line; }
#clawd .clawd-think.thinking { padding: 12px 16px; border-radius: 22px; pointer-events: none; }
#clawd .clawd-think.thinking .clawd-think-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#clawd .clawd-dots { display: none; gap: 5px; align-items: center; height: 20px; }
#clawd .clawd-think.thinking .clawd-dots { display: flex; }
#clawd .clawd-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--label-secondary); animation: clawd-dot 1.2s ease-in-out infinite; }
#clawd .clawd-dots i:nth-child(2) { animation-delay: 0.15s; } #clawd .clawd-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes clawd-dot { 0%, 60%, 100% { opacity: 0.35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
#clawd .clawd-puff { border-radius: 50%; transition: opacity 0.25s ease; }
#clawd .clawd-puff:nth-of-type(2) { transition-delay: 0.05s; } #clawd .clawd-puff:nth-of-type(3) { transition-delay: 0.1s; }

/* entrance: from his head, a short spring */
#clawd .clawd-say.out, #clawd .clawd-think.out { opacity: 0; scale: 0.86; }

/* what the tour points at, beyond the room: List View, the ask bar */
@keyframes clawd-spot { 0%, 100% { outline-color: rgba(255, 178, 122, 0); outline-offset: 2px; } 50% { outline-color: rgba(255, 178, 122, 0.9); outline-offset: 5px; } }
#skip.clawd-spot, #ask .ask-row.clawd-spot { outline: 2px solid rgba(255, 178, 122, 0); animation: clawd-spot 1.4s ease-in-out infinite; }
/* the records he's showing on the shelves stop: the same orange outline, filled with see-through light (Andy: "like a
   pad of see through light on the records/shelves it is indicating"); it stays while he's off screen */
#clawd .clawd-pad { position: fixed; left: 0; top: 0; transform-origin: 0 0; border-radius: 8px; pointer-events: none;
  background: rgba(255, 168, 104, 0.1); outline: 2px solid rgba(255, 178, 122, 0); box-shadow: 0 0 24px 2px rgba(255, 150, 80, 0);
  animation: clawd-pad 1.4s ease-in-out infinite; }
/* it breathes with the ask bar's ring (clawd-spot: same 1.4 s, same ease, outline 0 → 0.9, 2 → 5 px), its fill and
   glow rising and falling with it (Andy: "like the blinking light surrounding the bar") */
@keyframes clawd-pad {
  0%, 100% { background-color: rgba(255, 168, 104, 0.1); outline-color: rgba(255, 178, 122, 0); outline-offset: 2px; box-shadow: 0 0 24px 2px rgba(255, 150, 80, 0); }
  50% { background-color: rgba(255, 168, 104, 0.5); outline-color: rgba(255, 178, 122, 0.9); outline-offset: 5px; box-shadow: 0 0 24px 2px rgba(255, 150, 80, 0.5); } }
#clawd.offscreen > .clawd-pad { visibility: visible; }

/* the curator's panel while Clawd says the answer: its text is in his bubble, the rest stays here */
#ask .ask-answer.voiced .ask-text { display: none; }

@media (prefers-reduced-motion: reduce) {
  #clawd .clawd-say, #clawd .clawd-think, #clawd .clawd-tail, #clawd .clawd-puff, #clawd .glide { transition: none; }
  #clawd .clawd-dots i { animation: none; opacity: 0.7; }
  #skip.clawd-spot, #ask .ask-row.clawd-spot { animation: none; outline-color: rgba(255, 178, 122, 0.9); }
  #clawd .clawd-pad { animation: none; background-color: rgba(255, 168, 104, 0.4); outline-color: rgba(255, 178, 122, 0.9); }   /* steady, on */
}
@media (prefers-reduced-transparency: reduce) {
  #clawd .clawd-say, #clawd .clawd-think, #clawd .clawd-tail, #clawd .clawd-puff { background: var(--background-elevated-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 520px) {
  #clawd .clawd-say { font-size: 15px; padding: 13px 14px; }
  #clawd .clawd-foot .mac-btn { height: 36px; padding: 0 14px; }   /* bigger targets on a phone */
}