/**
 * FRANticc — Pixie shared styles
 *
 * Loaded on every page that has Pixie in the cockpit bar. Contains:
 *   1. The pixel-art bar icon styles (purple body, cyan eyes, yellow mouth)
 *   2. The state-driven animation system (data-pixie-state attribute)
 *      with three priority tiers:
 *        - Tier 1 ambient (always running): blink, body tilt cycle
 *        - Tier 2 reactive flickers (~200ms, single fire): mouth-flicker,
 *          eye-flicker — suppressed when a Tier 3 state is active.
 *        - Tier 3 sustained states (exclusive): talking, thinking, excited.
 *          Only one Tier 3 can be active at a time.
 *   3. Three speech-reveal patterns the pixie.js module switches between:
 *        - .pixie-speech-slot  (G3 push-content slide-down — Logotile default)
 *        - .pixie-speech-slot.overlay  (N4 overlay — Logotile scrolled-away)
 *        - .pixie-speech-tooltip  (N1 translucent anchored tooltip — every
 *          non-Logotile page)
 *
 * Performance:
 *   - File size: ~6 KB unminified.
 *   - All animations are GPU-cheap (opacity, transform, clip-path).
 *   - No external assets, no background-images.
 *
 * Pages that already have these styles inlined (Logotile, compare-tool)
 * don't need to load this file; it's for the rest of the platform.
 */

/* ─── BAR ICON BASE ─────────────────────────────────────────────────── */
.pixie-bar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;       /* 2026-05-21: reduced 10% from 36px so cockpit fits + profile icon clears edge on phones */
    padding: 0; text-decoration: none; cursor: pointer; flex-shrink: 0;
    border-radius: 50%;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.4s ease;
}
.pixie-bar-icon svg { width: 32px; height: 32px; display: block; overflow: visible; }   /* matches icon container reduction */
.pixie-bar-icon .px-bar-body { fill: #b084ff; opacity: 0.85; }
.pixie-bar-icon .px-bar-eyes { fill: #6ee7ff; }
.pixie-bar-icon .px-bar-mouth { fill: #fde68a; }
.pixie-bar-icon:hover { transform: scale(1.15); filter: drop-shadow(0 0 7px rgba(176,132,255,0.55)); }

/* Emotion variant mouths/eyes hidden by default — state classes reveal them.
   Includes the "v2 locked vocabulary" groups (warm/focus/curious/delight/
   discovery/sparkle/yshades/sparkle-pupils) — these have inline SVG in
   brandfit-pixie.html but no state-selector rules yet, so they MUST be
   hidden here or they'd render on top of the idle face. */
.pixie-bar-icon .px-emo-thinking,
.pixie-bar-icon .px-emo-happy,
.pixie-bar-icon .px-emo-glad,
.pixie-bar-icon .px-emo-warm,
.pixie-bar-icon .px-emo-focus,
.pixie-bar-icon .px-emo-curious,
.pixie-bar-icon .px-emo-delight,
.pixie-bar-icon .px-emo-discovery,
.pixie-bar-icon .px-emo-sparkle,
.pixie-bar-icon .px-yshades,
.pixie-bar-icon .px-sparkle-pupils { display: none; }

/* ─── TIER 1 AMBIENT: blink + eye position ──────────────────────────── */
@keyframes pxBarBlink {
    0%, 92%, 100% { transform: translate(var(--eye-dx, 0px), var(--eye-dy, 0px)) scaleY(1); }
    95%, 97%      { transform: translate(var(--eye-dx, 0px), var(--eye-dy, 0px)) scaleY(0.12); }
}
.pixie-bar-icon .px-bar-eyes.px-emo-idle {
    transform-origin: center 114px;
    animation: pxBarBlink 4.5s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* While saccading or "looking" — skip blink so eye-position translate stays put */
.pixie-bar-icon[data-saccade="1"] .px-bar-eyes.px-emo-idle,
.pixie-bar-icon[data-looking="1"] .px-bar-eyes.px-emo-idle {
    animation: none;
    transform: translate(var(--eye-dx, 0px), var(--eye-dy, 0px));
}

/* Body tilt (driven by --body-tilt CSS var from JS gaze code) */
.pixie-bar-icon > svg {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 78%;
    transform-box: fill-box;
    transform: rotate(var(--body-tilt, 0deg));
}

/* ─── TIER 2 REACTIVE FLICKERS ─────────────────────────────────────── */
.pixie-bar-icon.mouth-flicker > svg > .px-bar-mouth.px-emo-idle { display: none; }
.pixie-bar-icon.mouth-flicker .px-emo-happy { display: inline; }
.pixie-bar-icon.eye-flicker .px-bar-eyes.px-emo-idle { opacity: 0; }
.pixie-bar-icon.eye-flicker .px-bar-eyes.px-emo-glad { display: inline !important; }

/* ─── TIER 3 SUSTAINED STATE: TALKING ──────────────────────────────── */
/* Mouth alternates between the idle flat bar and the wide multi-row smile
   at 2 Hz while talking. Same as the T2 variant we picked in the talking
   preview. data-pixie-state="talking" is set + cleared by pixie.js. */
.pixie-bar-icon[data-pixie-state="talking"] .px-bar-mouth.px-emo-idle  { animation: pixieTalkIdle 0.5s steps(1) infinite; }
.pixie-bar-icon[data-pixie-state="talking"] .px-bar-mouth.px-emo-happy { animation: pixieTalkHappy 0.5s steps(1) infinite; display: inline; }
@keyframes pixieTalkIdle  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pixieTalkHappy { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* Tier 3 suppresses conflicting Tier 2 flickers on the same elements */
.pixie-bar-icon[data-pixie-state="talking"].mouth-flicker .px-bar-mouth.px-emo-idle { display: inline; animation-play-state: running; }
.pixie-bar-icon[data-pixie-state="talking"].mouth-flicker .px-emo-happy { display: inline; }

/* ─── TIER 3: DISSOLVED (for brandpage when full Pixie scrolls in) ──── */
.pixie-bar-icon[data-pixie-state="dissolved"] {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* ─── SPEECH REVEAL: shared visual ─────────────────────────────────── */
/* Single left-to-right wipe across the whole sentence — the gradient is on
   the parent .pixie-words element with background-clip:text, and clip-path
   transitions from inset(0 100% 0 0) to inset(0 0% 0 0). One smooth sweep,
   no per-word chunking. */
.pixie-words {
    font: 700 18px 'Urbanist', sans-serif;
    letter-spacing: -0.015em;
    background: linear-gradient(110deg, #f4f1ea, #b084ff 30%, #6ee7ff 60%, #f4f1ea);
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 3.2s cubic-bezier(0.37, 0, 0.63, 1);
}
.pixie-words-wrap { position: relative; display: inline-block; max-width: calc(100% - 48px); }
.pixie-underline {
    position: absolute;
    left: 50%; bottom: -6px;
    width: 0; height: 1.25px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #b084ff 14%, #6ee7ff 38%, #ec4899 58%, #fde68a 78%, #b084ff 92%, transparent);
    background-size: 200% 100%;
    transition: width 1.0s 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes pixieGradShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ─── PATTERN A: G3 push-content slide-down (Logotile default) ─────── */
.pixie-speech-slot {
    position: fixed;
    top: 64px; left: 0; right: 0;
    height: 0;
    overflow: hidden;
    background: transparent;
    z-index: 19500;
    pointer-events: none;
    transition: height 1.5s cubic-bezier(0.37, 0, 0.63, 1);
}
.pixie-speech-slot.open { height: 64px; }
.pixie-speech-slot .pixie-speech-inner {
    min-height: 64px;
    padding: 12px 32px 14px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.pixie-speech-slot.open.anim .pixie-words { clip-path: inset(0 0% 0 0); }
.pixie-speech-slot.open.anim.shimmer .pixie-words { animation: pixieGradShimmer 4s ease-in-out infinite; }
.pixie-speech-slot.open.anim .pixie-underline { width: 100%; }
.pixie-speech-slot.open.anim.shimmer .pixie-underline { animation: pixieGradShimmer 4s linear infinite; }
.pixie-speech-slot.closing .pixie-words {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.0s cubic-bezier(0.37, 0, 0.63, 1);
}
.pixie-speech-slot.closing .pixie-underline { width: 0; transition: width 0.7s cubic-bezier(0.37, 0, 0.63, 1); }
.pixie-speech-slot.long-text .pixie-words { font-size: 15px; }
/* body.pixie-speaking padding rule removed 2026-06-02 with the push mode. */

/* ─── PATTERN B: N1 translucent anchored tooltip (non-Logotile pages) ── */
.pixie-speech-tooltip {
    position: fixed;
    top: 56px; right: 18px;
    margin-top: 8px;
    background: rgba(15, 22, 32, 0.55);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(176,132,255,0.22);
    border-radius: 12px;
    padding: 12px 18px 14px;
    max-width: 360px;
    z-index: 19500;
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.45s cubic-bezier(0.37, 0, 0.63, 1), transform 0.45s cubic-bezier(0.37, 0, 0.63, 1);
    pointer-events: none;
    box-shadow: 0 18px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(176,132,255,0.08);
}
/* 2026-05-21 — tail/arrow removed per design directive (G3 "no tail").
   Pixie's mouth-talking animation carries the "she's saying this" cue
   instead. Clean box look matches the Logotile speech-slot pattern. */
.pixie-speech-tooltip.open { opacity: 1; transform: translateY(0) scale(1); }

/* ════════════════════════════════════════════════════════════════════
   TIER 3 STATES — thinking + excited (added 2026-05-21)
   ────────────────────────────────────────────────────────────────────
   cockpit-bar.js's SVG already contains the alternate emotion groups
   (.px-emo-thinking, .px-emo-happy, .px-emo-glad). They default to
   display:none. These rules swap the idle face for the appropriate
   emotion face whenever data-pixie-state is set.

   API: window.Pixie.setState('thinking' | 'excited' | null)
   ──────────────────────────────────────────────────────────────────── */

/* Thinking — squinty dot eyes + single mouth dot.
   Use case: any async operation the user might be waiting on. */
.pixie-bar-icon[data-pixie-state="thinking"] .px-bar-eyes.px-emo-idle,
.pixie-bar-icon[data-pixie-state="thinking"] .px-bar-mouth.px-emo-idle { display: none; }
.pixie-bar-icon[data-pixie-state="thinking"] .px-bar-eyes.px-emo-thinking,
.pixie-bar-icon[data-pixie-state="thinking"] .px-bar-mouth.px-emo-thinking { display: inline; }

/* Excited — closed-curve "glad" eyes + big multi-row grin mouth.
   Use case: success moments (lead submitted, brand added to compare,
   purchase complete, etc.). */
.pixie-bar-icon[data-pixie-state="excited"] .px-bar-eyes.px-emo-idle,
.pixie-bar-icon[data-pixie-state="excited"] .px-bar-mouth.px-emo-idle { display: none; }
.pixie-bar-icon[data-pixie-state="excited"] .px-bar-eyes.px-emo-glad,
.pixie-bar-icon[data-pixie-state="excited"] .px-bar-mouth.px-emo-glad { display: inline; }
/* Subtle bounce on enter to sell the "yes!" moment. */
.pixie-bar-icon[data-pixie-state="excited"] {
    animation: pixieExcitedBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pixieExcitedBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.pixie-speech-tooltip .pixie-words {
    white-space: normal; line-height: 1.4;
    display: inline;
    font-size: 16px;
}
.pixie-speech-tooltip.open.anim .pixie-words { clip-path: inset(0 0% 0 0); }
.pixie-speech-tooltip.open.anim.shimmer .pixie-words { animation: pixieGradShimmer 4s ease-in-out infinite; }
.pixie-speech-tooltip.open.anim .pixie-underline { width: 100%; }
.pixie-speech-tooltip.closing { opacity: 0; transform: translateY(-6px) scale(0.96); }
.pixie-speech-tooltip.closing .pixie-words {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.37, 0, 0.63, 1);
}
.pixie-speech-tooltip.closing .pixie-underline { width: 0; }

/* Mobile: bar shrinks to 60px on Logotile (top-black-bar rule). The
   speech slot follows + text wraps. Tooltip width caps to viewport. */
@media (max-width: 768px) {
    .pixie-speech-slot { top: 60px; }
    .pixie-speech-slot.open { height: 76px; }
    .pixie-speech-slot .pixie-speech-inner { padding: 10px 16px 12px; min-height: 76px; }
    .pixie-speech-slot .pixie-words {
        font-size: 14px;
        white-space: normal;
        line-height: 1.3;
        text-wrap: balance;
        text-align: center;
    }
    .pixie-speech-tooltip { top: 60px; right: 12px; left: 12px; max-width: none; }
    .pixie-speech-tooltip .pixie-words { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   COCKPIT BAR — the other two icons (LET AI PICK + search magnifier)
   ════════════════════════════════════════════════════════════════════

   cockpit-bar.js injects three icons (Pixie + LET AI PICK + search)
   into <div id="cockpit-shared">. The Pixie icon styles live above
   (.pixie-bar-icon). These rules cover the remaining two icons + the
   .top-controls layout. Pages loading this stylesheet get the complete
   look without inlining 150 lines of CSS per page.

   Existing pages (Logotile.html, compare-tool.html) still have these
   rules inlined; their inline copy takes precedence over this file
   when both are present. They can be migrated to use this file in a
   future de-duplication pass.

   ──────────────────────────────────────────────────────────────────── */

/* Top-controls flex layout — host container for the cockpit icons.
   Most platform top-bars already define `.top-controls`; this rule
   is a safe default if a page doesn't. Unscoped (no .top-bar prefix)
   so it works whether the host container has that class or not. */
.top-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* LET AI PICK — canonical stacked 3-row design.
   Source of truth was Logotile.html lines 446-485; keep this block
   in sync if/when that one changes. */
.let-ai-pick {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 8px;
    line-height: 0.95;
    cursor: pointer; text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    height: 36px;     /* 2026-05-21: 42→36 (−15%) so the LET AI PICK doesn't tower over the other cockpit icons */
}
.let-ai-pick:hover {
    transform: scale(1.04);
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(16,185,129,0.55));
}
.let-ai-pick .row {
    display: block;
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    text-align: center;
}
.let-ai-pick .row-let,
.let-ai-pick .row-pick {
    font-size: 7px;                  /* 2026-05-21: 8.5→7 (−15%) */
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.18em;
}
.let-ai-pick .row-ai {
    font-size: 14.5px;               /* 2026-05-21: 17→14.5 (−15%) */
    letter-spacing: 0.02em;
    background: linear-gradient(110deg, #10b981, #3b82f6 30%, #8b5cf6 60%, #ec4899 80%, #f59e0b);
    background-size: 200% 100%;
    animation: pearlShimmer 8s ease-in-out infinite;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(139,92,246,0.5));
}
@keyframes pearlShimmer {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Search magnifier — naked button next to LET AI PICK.
   Clicking dispatches `cockpit:search` (handled per-page). */
.search-mag-btn {
    background: transparent;
    color: rgba(255,255,255,0.75);
    border: none;
    cursor: pointer;
    padding: 6px;
    transition: color 0.2s, transform 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
}
.search-mag-btn:hover { color: #fff; transform: scale(1.1); }
.search-mag-btn svg {
    width: 21px; height: 21px;  /* 2026-05-21: 18→21px (+18%) */
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Light-background variants — for pages whose top-bar isn't the dark
   Logotile/compare-tool navy. LET AI PICK and search-mag-btn default
   to light colors against dark BG; pages with a light top-bar (pricing,
   about, etc.) opt in by adding `.cockpit-light` on the top-bar. */
.cockpit-light .let-ai-pick .row-let,
.cockpit-light .let-ai-pick .row-pick { color: rgba(15,23,42,0.7); }
.cockpit-light .search-mag-btn        { color: rgba(15,23,42,0.65); }
.cockpit-light .search-mag-btn:hover  { color: #0f172a; }

/* Mobile compaction — same breakpoint convention as compare-tool. */
@media (max-width: 600px) {
    .top-controls   { gap: 8px; }
    .let-ai-pick    { font-size: 10px; letter-spacing: 0.12em; }
    .pixie-bar-icon { width: 32px; height: 32px; }
    .pixie-bar-icon svg { width: 32px; height: 32px; }
}