/* ====================================================================
   rosie.css — Rosie character system
   Keyframes, overlay, mounts, speech bubble, dark mode, responsive.
   ==================================================================== */

/* ── Overlay ─────────────────────────────────────────────────────── */
#rosie-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  color: var(--md-sys-color-primary);
  z-index: 5;
}
.rosie-bubble, .rosie-bubble-wrap { pointer-events: auto; }
.rosie-off #rosie-overlay          { display: none; }

/* ── SVG primitives ──────────────────────────────────────────────── */
.rosie-svg {
  display: block;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
  width: 90px;
  height: auto;
}
.rosie-svg .dot,
.rosie-svg .filled { fill: currentColor; stroke: none; }
.rosie-svg .thick  { stroke-width: 2.4; }
.rosie-svg .thin   { stroke-width: 1.1; }

/* ── Navbar logo (head-only crop) ────────────────────────────────── */
.rosie-logo-svg {
  stroke: var(--md-sys-color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  animation: rosie-bob 3.4s ease-in-out infinite;
}
.rosie-logo-svg .dot {
  fill: var(--md-sys-color-primary);
  stroke: none;
}

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes rosie-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes rosie-bob-deep {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes rosie-antenna-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@keyframes rosie-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.05); }
}
@keyframes rosie-sweep {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes rosie-sweep-wide {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes rosie-roll-cycle {
  0%, 8%   { transform: translateX(-300px); }
  24%, 76% { transform: translateX(0); }
  92%,100% { transform: translateX(360px); }
}
@keyframes rosie-deliver {
  0%       { transform: translateX(-220px); opacity: 1; }
  35%, 65% { transform: translateX(0);      opacity: 1; }
  100%     { transform: translateX(140px);  opacity: 0; }
}
@keyframes rosie-walk-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes rosie-peek {
  0%, 8%   { transform: translateX(80px); }
  20%, 80% { transform: translateX(0); }
  92%,100% { transform: translateX(80px); }
}
@keyframes rosie-sparkle {
  0%, 100% { transform: scale(0); opacity: 0; }
  20%      { transform: scale(1);   opacity: 1; }
  60%      { transform: scale(1.2); opacity: .7; }
  90%      { transform: scale(0);   opacity: 0; }
}
@keyframes rosie-bubble-pop {
  0%,  6%  { opacity: 0; transform: translateY(4px) scale(0.96); }
  14%, 86% { opacity: 1; transform: translateY(0)    scale(1); }
  94%,100% { opacity: 0; transform: translateY(4px)  scale(0.96); }
}
@keyframes target-shine {
  0%, 30%   { background-position: 100% 0; opacity: 0; }
  35%        { opacity: 1; }
  55%, 80%  { background-position: -100% 0; opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes rosie-zzz {
  0%    { opacity: 0; transform: translateY(0)   scale(0.6); }
  20%   { opacity: 1; }
  80%   { opacity: .8; transform: translateY(-20px) scale(1); }
  100%  { opacity: 0; transform: translateY(-28px) scale(0.8); }
}

/* ── Animation classes ───────────────────────────────────────────── */
.r-bob      { animation: rosie-bob 3.4s ease-in-out infinite; }
.r-bob-deep { animation: rosie-bob-deep 4.2s ease-in-out infinite; }

.r-antenna {
  animation: rosie-antenna-sway 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.r-blink {
  animation: rosie-blink 4.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.r-sweep {
  animation: rosie-sweep 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 164px 130px;
}
.r-sweep-wide {
  animation: rosie-sweep-wide 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 164px 130px;
}
.r-walk      { animation: rosie-walk-bounce 0.42s ease-in-out infinite; }
.r-rolling   { animation: rosie-roll-cycle 16s ease-in-out infinite; }
.r-delivering{ animation: rosie-deliver 6s ease-in-out forwards; }
.r-peeking   { animation: rosie-peek 5s ease-in-out forwards; }
.sparkle {
  animation: rosie-sparkle 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Stagger delays (prevent synchronised bobbing) */
.delay-1 { animation-delay: -0.5s; }
.delay-2 { animation-delay: -1.0s; }
.delay-3 { animation-delay: -1.5s; }
.delay-4 { animation-delay: -0.3s; }
.delay-5 { animation-delay: -1.8s; }
.delay-6 { animation-delay: -2.2s; }
.delay-7 { animation-delay: -0.9s; }

/* Balance shine (R3 polish) */
.balance-shine {
  position: absolute;
  inset: -4px;
  border-radius: var(--md-shape-medium);
  background: linear-gradient(110deg, transparent 30%, rgba(103,80,164,.22) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: target-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* ── Mount positions ─────────────────────────────────────────────── */
.rosie-mount {
  position: absolute;
}

/* Dashboard — left edge, rolls across */
.rosie-mount--dashboard {
  bottom: calc(var(--bottom-nav-height, 80px) + 24px);
  left: 16px;
}

/* Inmate detail — right edge, SVG is mirrored via class */
.rosie-mount--inmate {
  bottom: calc(var(--bottom-nav-height, 80px) + 24px);
  right: 16px;
}

/* Events — right edge */
.rosie-mount--events {
  bottom: calc(var(--bottom-nav-height, 80px) + 24px);
  right: 16px;
}

/* Search — left edge */
.rosie-mount--search {
  bottom: calc(var(--bottom-nav-height, 80px) + 24px);
  left: 16px;
}

/* Success / delivering — left edge */
.rosie-mount--success {
  bottom: calc(var(--bottom-nav-height, 80px) + 24px);
  left: 16px;
}

/* ── Speech bubble ───────────────────────────────────────────────── */
.rosie-bubble {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-family: Roboto, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 13px;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(33,0,93,.18);
  cursor: default;
  z-index: 2;
}
.rosie-bubble.is-popping {
  animation: rosie-bubble-pop 5s ease-in-out 1 both;
  animation-delay: .4s;
}

/* Tail (points down-left toward Rosie) */
.rosie-bubble::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-radius: 0 0 5px 0;
  transform: rotate(45deg) translate(-3px,-3px);
  z-index: -1;
}
/* Tail pointing to right-side Rosie */
.rosie-bubble.tail-right {
  left: auto;
  right: 0;
}
.rosie-bubble.tail-right::after {
  left: auto;
  right: 14px;
}

/* Subtle variant (idle nudges, primary-container bg) */
.rosie-bubble.subtle {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: none;
}

/* Right-side mounts get right-aligned bubble by default */
.rosie-mount--inmate .rosie-bubble,
.rosie-mount--events  .rosie-bubble {
  left: auto;
  right: 0;
}
.rosie-mount--inmate .rosie-bubble::after,
.rosie-mount--events  .rosie-bubble::after {
  left: auto;
  right: 14px;
}

/* ── Napping state ───────────────────────────────────────────────── */
.rosie-napping .r-bob,
.rosie-napping .r-bob-deep,
.rosie-napping .r-antenna,
.rosie-napping .r-blink {
  animation-play-state: paused;
}
.rosie-zzz {
  position: absolute;
  top: -12px;
  left: 55%;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  opacity: 0;
  animation: rosie-zzz 3s ease-in-out infinite;
  pointer-events: none;
}
.rosie-zzz:nth-child(2) { animation-delay: -1s; left: 66%; font-size: 11px; }
.rosie-zzz:nth-child(3) { animation-delay: -2s; left: 48%; font-size: 8px; }

/* ── Desktop sizing ──────────────────────────────────────────────── */
@media (min-width: 600px) {
  .rosie-svg        { width: 120px; }
  .rosie-bubble     { font-size: 13px; }

  /* On wider screens Rosie has more room — shift right-side mounts in */
  .rosie-mount--inmate,
  .rosie-mount--events { right: 24px; }
  .rosie-mount--dashboard,
  .rosie-mount--search  { left: 24px; }
}

@media (min-width: 960px) {
  .rosie-svg    { width: 130px; }
  .rosie-bubble { font-size: 14px; max-width: 260px; white-space: normal; }

  /* No bottom nav on wide layouts (side rail instead) */
  .rosie-mount {
    bottom: 32px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .r-bob, .r-bob-deep, .r-antenna, .r-blink,
  .r-sweep, .r-sweep-wide, .r-walk,
  .r-rolling, .r-delivering, .r-peeking,
  .sparkle, .balance-shine,
  .rosie-logo-svg, .rosie-zzz {
    animation: none !important;
  }
  /* Bubble still shown, just static */
  .rosie-bubble.is-popping {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}