/*
 * Pulsar mascot — inline-SVG mood indicator.
 *
 * Six moods, mirroring the Android Compose-Canvas mascot:
 *   idle, thinking, training, alert, sleeping, celebrating.
 *
 * All mood styling is keyed off `[data-pulsar-mood="..."]` on the root
 * <svg.pulsar>; `pulsar.js` flips the attribute in response to SSE
 * events. CSS handles the rest.
 *
 * Strategy: every conditional sub-element starts at `opacity: 0` so
 * only the parts relevant to the active mood are visible. Animations
 * (bob, shake, pulse, spin, confetti) live in @keyframes at the bottom
 * and are applied per-mood via attribute selectors.
 *
 * Reduced-motion users get a static mascot (no bob/shake/spin) — the
 * mood is still legible from the on/off colour and the visible
 * sub-elements (eyes/mouth/cheeks/crown).
 *
 * Contracts that mirror Android's PulsarMascotLogic:
 *   - ALERT animation MUST be the fastest (urgency-fastest invariant).
 *   - SLEEPING animation MUST be the slowest (calm-slowest mirror).
 *   - CELEBRATING is faster than IDLE/THINKING but slower than ALERT.
 */

.pulsar {
    display: inline-block;
    flex-shrink: 0;
    overflow: visible;            /* Z's, sparkles, confetti escape the body radius */
}
.pulsar--sm { width: 16px; height: 16px; }
.pulsar--md { width: 28px; height: 28px; }
.pulsar--lg { width: 48px; height: 48px; }

/* ── Base element styling ─────────────────────────────────────────── */

.pulsar__body  { fill: var(--color-primary-hi); }
.pulsar__shine { fill: rgba(255,255,255,0.25); }
.pulsar__cheek { fill: #ff9ebb; opacity: 0; }       /* default: no blush */
.pulsar__eye   { fill: #ffffff; }
.pulsar__pupil { fill: #1a1a2e; }

.pulsar__eyes-open  { opacity: 1; }                  /* default eyes */
.pulsar__eyes-sleep { opacity: 0; }
.pulsar__eyes-sleep line {
    stroke: #ffffff;
    stroke-width: 0.4;
    stroke-linecap: round;
}
.pulsar__eyes-happy { opacity: 0; }
.pulsar__eyes-happy path {
    stroke: #ffffff;
    stroke-width: 0.5;
    stroke-linecap: round;
    fill: none;
}

.pulsar__mouth          { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 0.45; stroke-linecap: round; opacity: 0; }
.pulsar__mouth--smile   { fill: none; stroke: rgba(255,255,255,0.85); }
.pulsar__mouth--frown   { fill: none; stroke: rgba(255,255,255,0.85); }
.pulsar__mouth--o       { fill: rgba(255,255,255,0.7); stroke: none; }
.pulsar__mouth--grin    { fill: #ffffff; stroke: none; }
.pulsar__mouth--tongue  { fill: #ff7aa8; stroke: none; }

/* OVERSEER face — hidden unless the overseer mood is active. */
.pulsar__overseer-face { opacity: 0; }
.pulsar__slit { fill: #ff2d2d; }
.pulsar__brow {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.5;
    stroke-linecap: round;
}

/* Conditional groups — hidden by default, lit per mood */
.pulsar__glow,
.pulsar__think,
.pulsar__confetti,
.pulsar__crown,
.pulsar__zs,
.pulsar__sparkles { opacity: 0; }

/* Glow halo */
.pulsar__glow      { fill: var(--color-primary-hi); fill-opacity: 0.18; }
/* Thinking dots */
.pulsar__think-dot { fill: var(--color-accent); }
/* Confetti */
.pulsar__confetti-piece--1 { fill: var(--color-accent); }
.pulsar__confetti-piece--2 { fill: #ffd466; }
.pulsar__confetti-piece--3 { fill: #ff9ebb; }
.pulsar__confetti-piece--4 { fill: #a5b4fc; }
.pulsar__confetti-piece--5 { fill: var(--color-accent); }
.pulsar__confetti-piece--6 { fill: #ffd466; }
/* Crown */
.pulsar__crown-points { fill: #ffd466; }
.pulsar__crown-band   { fill: #e6b84a; }
.pulsar__crown-jewel  { fill: #ffffff; }
/* Z's */
.pulsar__z {
    fill: var(--color-primary-hi);
    font-family: var(--font);
    font-weight: 700;
}
.pulsar__z--big   { opacity: 0.9; }
.pulsar__z--small { opacity: 0.55; }
/* Sparkles */
.pulsar__sparkle line { stroke: #ffd466; stroke-width: 0.3; stroke-linecap: round; }
.pulsar__sparkle--1 line { stroke: #ffd466; }
.pulsar__sparkle--2 line { stroke: #ffffff; }
.pulsar__sparkle--3 line { stroke: var(--color-accent); }
.pulsar__sparkle--4 line { stroke: #ff9ebb; }

/* ── IDLE — gentle bob, blink, smile, blush ──────────────────────── */

.pulsar[data-pulsar-mood="idle"] .pulsar__cheek         { opacity: 0.5; }
.pulsar[data-pulsar-mood="idle"] .pulsar__mouth--smile  { opacity: 1; }
.pulsar[data-pulsar-mood="idle"] .pulsar__body-group {
    animation: pulsar-bob 2s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: fill-box;
}
.pulsar[data-pulsar-mood="idle"] .pulsar__eyes-open {
    animation: pulsar-blink 4s linear infinite;
    transform-origin: 12px 11px;
    transform-box: fill-box;
}

/* ── THINKING — cyan body, 'o' mouth, orbit dots, eyes look up ───── */

.pulsar[data-pulsar-mood="thinking"] .pulsar__body      { fill: var(--color-accent); }
.pulsar[data-pulsar-mood="thinking"] .pulsar__mouth--o  { opacity: 1; }
.pulsar[data-pulsar-mood="thinking"] .pulsar__think     { opacity: 1; }
.pulsar[data-pulsar-mood="thinking"] .pulsar__pupil-l,
.pulsar[data-pulsar-mood="thinking"] .pulsar__pupil-r,
.pulsar[data-pulsar-mood="thinking"] .pulsar__pupil { transform: translateY(-0.5px); }
.pulsar[data-pulsar-mood="thinking"] .pulsar__body-group {
    animation: pulsar-bob-fast 0.8s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: fill-box;
}
.pulsar[data-pulsar-mood="thinking"] .pulsar__think {
    animation: pulsar-spin 3s linear infinite;
    transform-origin: 12px 12px;
    transform-box: view-box;
}

/* ── TRAINING — pulsing halo, cheeks, smile ──────────────────────── */

.pulsar[data-pulsar-mood="training"] .pulsar__glow         { opacity: 1; }
.pulsar[data-pulsar-mood="training"] .pulsar__cheek        { opacity: 0.5; }
.pulsar[data-pulsar-mood="training"] .pulsar__mouth--smile { opacity: 1; }
.pulsar[data-pulsar-mood="training"] .pulsar__glow {
    animation: pulsar-pulse 1.2s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: view-box;
}
.pulsar[data-pulsar-mood="training"] .pulsar__body-group {
    animation: pulsar-bob 1.2s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: fill-box;
}

/* ── ALERT — red body, frown, urgent shake ───────────────────────── */

.pulsar[data-pulsar-mood="alert"] .pulsar__body         { fill: var(--color-danger); }
.pulsar[data-pulsar-mood="alert"] .pulsar__mouth--frown { opacity: 1; }
.pulsar[data-pulsar-mood="alert"] {
    animation: pulsar-shake 0.15s linear infinite;
}

/* ── SLEEPING — dim body, closed eyes, floating Z's ──────────────── */

.pulsar[data-pulsar-mood="sleeping"] .pulsar__body        { fill-opacity: 0.55; }
.pulsar[data-pulsar-mood="sleeping"] .pulsar__shine       { opacity: 0; }
.pulsar[data-pulsar-mood="sleeping"] .pulsar__eyes-open   { opacity: 0; }
.pulsar[data-pulsar-mood="sleeping"] .pulsar__eyes-sleep  { opacity: 1; }
.pulsar[data-pulsar-mood="sleeping"] .pulsar__zs          { opacity: 1; }
.pulsar[data-pulsar-mood="sleeping"] .pulsar__body-group {
    animation: pulsar-bob-slow 3s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: fill-box;
}
.pulsar[data-pulsar-mood="sleeping"] .pulsar__zs {
    animation: pulsar-z-float 2s linear infinite;
    transform-origin: 18px 4px;
    transform-box: view-box;
}

/* ── CELEBRATING — confetti, crown, ^_^ eyes, grin, sparkles ─────── */

.pulsar[data-pulsar-mood="celebrating"] .pulsar__body          { fill: var(--color-accent); }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__cheek         { opacity: 0.85; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__eyes-open     { opacity: 0; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__eyes-happy    { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__mouth--grin   { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__mouth--tongue { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__confetti      { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__crown         { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__sparkles      { opacity: 1; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__body-group {
    animation: pulsar-bob-spring 0.6s ease-in-out infinite;
    transform-origin: 12px 12px;
    transform-box: fill-box;
}
.pulsar[data-pulsar-mood="celebrating"] .pulsar__confetti {
    animation: pulsar-spin 1.5s linear infinite;
    transform-origin: 12px 12px;
    transform-box: view-box;
}
.pulsar[data-pulsar-mood="celebrating"] .pulsar__sparkle {
    animation: pulsar-sparkle 1.2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.pulsar[data-pulsar-mood="celebrating"] .pulsar__sparkle--2 { animation-delay: 0.3s; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__sparkle--3 { animation-delay: 0.6s; }
.pulsar[data-pulsar-mood="celebrating"] .pulsar__sparkle--4 { animation-delay: 0.9s; }

/* ── Reduced motion: keep visuals, drop animations ───────────────── */

/* ── OVERSEER — the "evil" variant ───────────────────────────────── */
/* Not an SSE mood like the others: pulsar.js pins it from
   `status.overseer_enabled` and it outranks everything the event
   stream would set, matching MainActivity's `effectiveMascotState`.
   Deep red body, red halo, one slit eye, angry brows, flat mouth.
   The pulse is deliberately slower than ALERT's panic-fast shake
   (1.5s against 0.15s) so the vibe reads as composed threat rather
   than agitation — same reasoning as PulsarMascotLogic.kt's
   `PulsarState.OVERSEER -> 1500` bounce duration. */
.pulsar[data-pulsar-mood="overseer"] .pulsar__body           { fill: #7f1d1d; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__shine          { opacity: 0; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__cheek          { opacity: 0; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__eyes-open      { opacity: 0; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__overseer-face  { opacity: 1; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__mouth--flat    { opacity: 1; }
.pulsar[data-pulsar-mood="overseer"] .pulsar__glow {
    opacity: 1;
    fill: #ff2d2d;
    transform-origin: center;
    animation: pulsar-pulse 1.5s ease-in-out infinite;
}
.pulsar[data-pulsar-mood="overseer"] .pulsar__slit {
    animation: pulsar-slit 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pulsar,
    .pulsar * {
        animation: none !important;
    }
}

/* ── Keyframes ────────────────────────────────────────────────────── */

@keyframes pulsar-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}
@keyframes pulsar-bob-fast {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(0.4px, -0.7px); }
}
@keyframes pulsar-bob-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(0.4px); }
}
@keyframes pulsar-bob-spring {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-1.5px) scale(1.04); }
}
@keyframes pulsar-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-1px); }
    75%      { transform: translateX(1px); }
}
@keyframes pulsar-pulse {
    0%, 100% { fill-opacity: 0.12; transform: scale(1); }
    50%      { fill-opacity: 0.45; transform: scale(1.18); }
}
@keyframes pulsar-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes pulsar-blink {
    0%, 92%, 96%, 100% { transform: scaleY(1); }
    94%                { transform: scaleY(0.1); }
}
@keyframes pulsar-z-float {
    0%   { opacity: 1; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(2px, -3px); }
}
@keyframes pulsar-slit {
    0%, 100% { fill-opacity: 0.75; }
    50%      { fill-opacity: 1; }
}
@keyframes pulsar-sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.3); }
}