/* Floating Roofing Assistant — reusable, decoupled launcher for the approved
   Millennia Roofing chatbot robot. Animations use transform/opacity only.
   No external dependencies. Decorative parts are pointer-events:none so the
   launcher button and page links stay fully clickable. */

.ra-root {
  --ra-accent: #38bdf8;        /* shared cyan accent (focus rings) — single source */
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000; /* above cookie banners / back-to-top, below nothing critical */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: block;
  pointer-events: none; /* only interactive children opt back in */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Footer-collision guard: lifted above the footer when it enters the viewport.
     --ra-lift is driven by the JS guard; transform keeps the figure's own
     animations (on .ra-figure/.ra-launcher) untouched. */
  transform: translateY(calc(-1 * var(--ra-lift, 0px)));
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ra-root.ra-boot .ra-launcher { opacity: 0; transform: translateY(24px) scale(.7); pointer-events: none; }

/* ── Launcher button (semantic) ─────────────────────────────────────────── */
.ra-launcher {
  pointer-events: auto;
  position: relative;
  width: 92px; height: 92px;
  padding: 0; margin: 0;
  border: none; background: transparent;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.ra-launcher:focus { outline: none; }
.ra-launcher:focus-visible { outline: 3px solid var(--ra-accent); outline-offset: 4px; border-radius: 20px; }

.ra-figure {
  position: absolute; inset: 0;
  display: block;
  transform-origin: 50% 100%;
  will-change: transform;
}
.ra-figure picture { display: block; width: 100%; height: 100%; }
.ra-robot {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(8,47,112,.30)) drop-shadow(0 0 14px rgba(34,211,238,.22));
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

/* Entering */
.ra-root.ra-entering .ra-launcher { animation: raEnter .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes raEnter { from { opacity:0; transform: translateY(28px) scale(.7); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Idle — breathing (respiration): perceptible vertical bob + slight scale.
   Amplitude tuned up from the near-invisible 3px/1.01 so it reads as "alive"
   on the small (66-92px) launcher without looking like a pulse. */
.ra-root[data-state="idle"] .ra-figure { animation: raIdle 4.6s ease-in-out infinite; }
@keyframes raIdle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}

/* Wave + tilt gestures. The approved asset is a single flat PNG (no separate arm
   layer), so a true isolated arm-wave is not possible without slicing/seams.
   The asset's hand is already raised, so a clearly-visible whole-BODY greeting
   (rotation around the base + a small lift) reads as a friendly wave — labeled
   honestly as a body greeting, not a real arm articulation. The extra .ra-root
   raises specificity so a gesture overrides idle breathing. */
.ra-root .ra-figure.ra-wave { animation: raWave 1.5s ease-in-out; }
@keyframes raWave {
  0% { transform: translateY(0) rotate(0deg); }
  14% { transform: translateY(-4px) rotate(-11deg); }
  34% { transform: translateY(-4px) rotate(8deg); }
  54% { transform: translateY(-3px) rotate(-8deg); }
  74% { transform: translateY(-1px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.ra-root .ra-figure.ra-tilt { animation: raTilt 1.5s ease-in-out; }
@keyframes raTilt {
  0%,100% { transform: translateY(-1px) rotate(0deg); }
  40% { transform: translateY(-2px) rotate(-3deg); }
  72% { transform: translateY(-2px) rotate(2deg); }
}
/* Pause all figure motion while the tab is hidden. */
.ra-root.ra-anim-paused .ra-figure { animation-play-state: paused !important; }

/* Look direction — subtle whole-figure lean toward the target element.
   (The approved asset is a flat PNG, so eye/pupil-level movement is emulated
   by a small head-lean; true pupil motion is not possible with a static image.) */
.ra-figure.ra-look-left    { transform: rotate(-6deg) translateX(-3px); }
.ra-figure.ra-look-right   { transform: rotate(6deg)  translateX(3px); }
.ra-figure.ra-look-up      { transform: translateY(-4px) scale(1.02); }
.ra-figure.ra-look-down    { transform: translateY(2px); }
.ra-figure.ra-look-up-left { transform: rotate(-6deg) translateY(-3px); }
.ra-figure.ra-look-up-right{ transform: rotate(6deg)  translateY(-3px); }
.ra-figure.ra-look-center  { transform: none; }

/* Reaction nudge (point / thumbs / etc.) */
.ra-figure.ra-react { animation: raReact .8s cubic-bezier(.2,.8,.2,1); }
@keyframes raReact { 0% { transform: scale(1); } 30% { transform: translateY(-6px) scale(1.05); } 100% { transform: translateY(0) scale(1); } }

/* ── Orange construction helmet overlay (roofing-projects) ───────────────── */
.ra-helmet {
  position: absolute;
  left: 50%; top: -2px;
  width: 62px; height: 40px;
  transform: translate(-50%, -14px) scale(.6) rotate(-8deg);
  transform-origin: 50% 90%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
}
.ra-launcher.ra-helmet-on .ra-helmet { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
.ra-launcher.ra-helmet-adjust .ra-helmet { animation: raHelmetAdjust .5s ease-in-out 1; }
@keyframes raHelmetAdjust { 0%,100% { rotate: 0deg; } 40% { rotate: -5deg; } 70% { rotate: 3deg; } }

/* ── Accessory overlay (phone / message / clipboard / envelope / thumb) ──── */
.ra-accessory {
  position: absolute;
  right: -6px; top: 8px;
  width: 34px; height: 34px;
  opacity: 0;
  transform: scale(.5) translateY(6px);
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 3;
}
.ra-launcher.ra-accessory-on .ra-accessory { opacity: 1; transform: scale(1) translateY(0); }
.ra-accessory svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(8,47,112,.28)); }

/* ── Speech bubble ──────────────────────────────────────────────────────── */
.ra-bubble {
  pointer-events: none;
  position: absolute;
  right: 8px; bottom: 100px;
  max-width: 220px;
  background: #0b1220;
  color: #eaf2ff;
  border: 1px solid rgba(56,189,248,.4);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 13px;
  font-size: 14px; line-height: 1.35;
  box-shadow: 0 12px 30px rgba(8,47,112,.35);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.ra-bubble.ra-bubble-on { opacity: 1; transform: translateY(0) scale(1); }

/* ── Quick-contact panel (launcher for existing chatbot config) ─────────── */
.ra-panel {
  pointer-events: auto;
  position: absolute;
  right: 0; bottom: 104px;
  width: 300px; max-width: calc(100vw - 32px);
  background: #ffffff;
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 24px 58px rgba(15,23,42,.28), 0 0 30px rgba(23,107,255,.14);
  overflow: hidden;
  transform-origin: 100% 100%;
  animation: raPanelIn .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes raPanelIn { from { opacity:0; transform: translateY(12px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
.ra-panel[hidden] { display: none; }
.ra-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg,#176BFF,#7C3AED); color: #fff; }
.ra-panel-title { flex: 1; margin: 0; font-size: 15px; font-weight: 700; }
.ra-panel-min, .ra-panel-close {
  width: 28px; height: 28px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.ra-panel-min:hover, .ra-panel-close:hover { background: rgba(255,255,255,.28); }
.ra-panel-min:focus-visible, .ra-panel-close:focus-visible, .ra-quick a:focus-visible { outline: 3px solid var(--ra-accent); outline-offset: 2px; }
.ra-panel-body { padding: 14px; }
.ra-welcome { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #334155; white-space: pre-line; }
.ra-quick { display: flex; flex-direction: column; gap: 8px; }
.ra-quick a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: #f8fafc; color: #0f172a; text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.ra-quick a:hover { border-color: rgba(23,107,255,.45); background: #eef4ff; transform: translateY(-1px); }
.ra-quick a .ra-qi { width: 18px; height: 18px; flex: 0 0 18px; }

/* ── Responsive: shrink on small screens, respect safe area ─────────────── */
@media (max-width: 560px) {
  .ra-root { right: 14px; bottom: 14px; }
  .ra-launcher { width: 66px; height: 66px; }
  .ra-helmet { width: 46px; height: 30px; }
  .ra-accessory { width: 26px; height: 26px; }
  .ra-bubble { right: 4px; bottom: 74px; max-width: 170px; font-size: 13px; }
  .ra-panel { bottom: 78px; width: 260px; }
}

/* ── Reduced motion: keep function, drop large/looping motion ────────────── */
@media (prefers-reduced-motion: reduce) {
  .ra-root, .ra-launcher, .ra-robot, .ra-helmet, .ra-accessory, .ra-bubble, .ra-panel { transition-duration: .001ms !important; }
  .ra-figure, .ra-figure.ra-wave, .ra-figure.ra-tilt, .ra-figure.ra-react,
  .ra-root[data-state="idle"] .ra-figure,
  .ra-root.ra-entering .ra-launcher,
  .ra-launcher.ra-helmet-adjust .ra-helmet,
  .ra-panel { animation: none !important; }
  .ra-figure.ra-look-left, .ra-figure.ra-look-right, .ra-figure.ra-look-up,
  .ra-figure.ra-look-down, .ra-figure.ra-look-up-left, .ra-figure.ra-look-up-right { transform: none; }
}

/* Explicit user opt-in (or ?robotDebug=1): force motion even when the OS requests
   reduced motion. !important beats the reduced-motion guard above. The JS sets
   .ra-force-motion whenever DEBUG is on (DEBUG || (want && osReduce())), so these
   force-motion selectors alone cover the diagnostic — no separate .ra-debug rules. */
.ra-root.ra-force-motion[data-state="idle"] .ra-figure { animation: raIdle 4.6s ease-in-out infinite !important; }
.ra-root.ra-force-motion .ra-figure.ra-wave { animation: raWave 1.5s ease-in-out !important; }
.ra-root.ra-force-motion .ra-figure.ra-tilt { animation: raTilt 1.5s ease-in-out !important; }

/* Explicit "Animation off": stay static even when the OS allows motion. */
.ra-root.ra-no-motion .ra-figure,
.ra-root.ra-no-motion .ra-figure.ra-wave,
.ra-root.ra-no-motion .ra-figure.ra-tilt { animation: none !important; }

/* Motion preference control inside the chat panel — small, unobtrusive. */
.ra-motion { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.2); text-align: center; }
.ra-motion-note { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: #64748b; }
.ra-motion-btn, .ra-motion-sys {
  display: inline-block; border: 1px solid rgba(148,163,184,.35); background: #f8fafc; color: #0f172a;
  border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ra-motion-btn:hover, .ra-motion-sys:hover { border-color: rgba(23,107,255,.5); background: #eef4ff; }
.ra-motion-btn:focus-visible, .ra-motion-sys:focus-visible { outline: 3px solid var(--ra-accent); outline-offset: 2px; }
.ra-motion-sys { margin-left: 6px; background: transparent; border-color: transparent; color: #64748b; text-decoration: underline; }
/* [hidden] must win over the display above */
.ra-motion-note[hidden], .ra-motion-sys[hidden] { display: none !important; }

/* Button↔robot atomic sync: the SAME class the robot controller toggles on the
   active trigger. Static highlight (no motion) so button and robot stay in step
   even under reduced motion — the robot's motion capacity caps the pair. */
.is-robot-interaction-active { box-shadow: 0 0 0 2px rgba(56,189,248,.45), 0 0 14px rgba(56,189,248,.22); transition: box-shadow .12s ease; }
@media (prefers-reduced-motion: reduce) { .is-robot-interaction-active { transition: none; } }