/* ============================================================
   StarTech Prestige — LEONIMUS PRIME v3 (cooler + interactive)
   Loaded after startech-max.css. Adds cursor eye-tracking, mood
   states (idle / happy / thinking / excited), visor scanline,
   energy-ring emotes, hover head-tilt + arm wave, click squash,
   and reactive lighting — on top of the v2 chrome/blue robot.
   ============================================================ */

/* ---- Re-theme the guide to the brand blue ---- */
.stp-guide{--accent:#4F9EFF;--accent-2:#7FB5FF;--accent-deep:#2C6FD6;--accent-dim:rgba(79,158,255,.20);
  left:20px;bottom:22px;gap:12px;align-items:flex-end}

/* ============================================================
   THE BOT BUTTON — larger, deeper, glowing pedestal
   ============================================================ */
.stp-guide .bot{
  width:64px;height:64px;border-radius:18px;padding:0;cursor:pointer;opacity:1;flex:0 0 auto;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(79,158,255,.20), transparent 60%),
    linear-gradient(165deg,#1A1F2B 0%,#0C0E15 100%);
  border:1px solid rgba(127,181,255,.30);
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,.65),
    0 0 0 1px rgba(79,158,255,.18),
    0 0 26px -6px rgba(79,158,255,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  display:grid;place-items:center;
  animation:leonFloat 5.5s ease-in-out infinite;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stp-guide .bot::after{ /* glowing pedestal reflection */
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:44px;height:9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,158,255,.55),transparent);
  filter:blur(2px);opacity:.7;animation:leonShadow 5.5s ease-in-out infinite}
@keyframes leonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes leonShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.7}50%{transform:translateX(-50%) scale(.78);opacity:.4}}

.stp-guide .bot:hover,.stp-guide.open .bot{
  transform:translateY(-5px) scale(1.05);
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,.70),
    0 0 0 1px rgba(79,158,255,.40),
    0 0 44px -4px rgba(79,158,255,.90),
    inset 0 1px 0 rgba(255,255,255,.14)}

.stp-guide .bot svg{width:44px;height:44px;overflow:visible}

/* ============================================================
   EYES — pupils track the cursor (JS sets --ex / --ey: -1..1)
   ============================================================ */
.stp-guide .leon-pupils{
  --ex:0; --ey:0;
  transform:translate(calc(var(--ex) * 1.7px), calc(var(--ey) * 1.2px));
  transition:transform .12s linear}
.stp-guide .leon-eye{fill:#9CD2FF;filter:drop-shadow(0 0 3px rgba(79,158,255,.9));transition:fill .3s,r .2s}

/* blink (scale the whole eyes group) */
.stp-guide .leon-eyes{transform-box:fill-box;transform-origin:center}
.stp-guide .bot.leon-blink .leon-eyes{animation:leonBlink .18s ease-in-out}
@keyframes leonBlink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
.stp-guide .leon-visor{transition:stroke .3s}

/* visor scanline sweep */
.stp-guide .leon-scanline{opacity:0;animation:leonScan 3.8s ease-in-out infinite}
@keyframes leonScan{0%{transform:translateY(0);opacity:0}10%{opacity:.7}45%{transform:translateY(7px);opacity:.7}55%{opacity:0}100%{opacity:0}}
.stp-guide .bot svg .leon-scanline{transform-box:fill-box}

/* brow appears in certain moods */
.stp-guide .leon-brow{transition:opacity .25s,transform .25s;transform-box:fill-box;transform-origin:center}

/* ---- Antenna signal pulse ---- */
.stp-guide .leon-ant-dot{fill:#7FB5FF;animation:leonAnt 2.2s ease-in-out infinite}
@keyframes leonAnt{0%,100%{opacity:1}50%{opacity:.25}}
.stp-guide .leon-ant-wave{stroke:#7FB5FF;opacity:0;animation:leonWave 2.2s ease-out infinite}
@keyframes leonWave{0%{opacity:.7;transform:scale(.5)}70%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
.stp-guide .bot svg .leon-ant-wave{transform-box:fill-box;transform-origin:center top}
/* antenna spark on hover */
.stp-guide .leon-spark{opacity:0}
.stp-guide .bot:hover .leon-spark{animation:leonSpark .5s ease-out}
@keyframes leonSpark{0%{opacity:0;transform:translateY(2px)}40%{opacity:1}100%{opacity:0;transform:translateY(-1px)}}

/* ---- Chest core pulse ---- */
.stp-guide .leon-core{fill:url(#leonCore);animation:leonCorePulse 2.6s ease-in-out infinite}
@keyframes leonCorePulse{0%,100%{opacity:.85}50%{opacity:1}}

/* ============================================================
   HEAD TILT on hover + arm WAVE
   ============================================================ */
.stp-guide .leon-head{transform-box:fill-box;transform-origin:32px 30px;transition:transform .35s var(--ease)}
.stp-guide .bot:hover .leon-head{transform:rotate(-5deg)}
.stp-guide .leon-arm-l,.stp-guide .leon-hand-l{transform-box:fill-box;transform-origin:11px 40px;transition:transform .3s}
.stp-guide .bot.leon-wave .leon-arm-l,.stp-guide .bot.leon-wave .leon-hand-l{animation:leonArmWave .5s ease-in-out 2}
@keyframes leonArmWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-28deg)}70%{transform:rotate(8deg)}}

/* ============================================================
   ENERGY RINGS — emitted when he speaks (.leon-emote)
   ============================================================ */
.stp-guide .leon-ring{opacity:0;transform-box:fill-box;transform-origin:32px 19px}
.stp-guide .bot.leon-emote .leon-ring{animation:leonRing .7s ease-out}
.stp-guide .bot.leon-emote .leon-ring-2{animation:leonRing .7s ease-out .12s}
@keyframes leonRing{0%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(1.25)}}

/* click squash-and-stretch */
.stp-guide .bot.leon-press{animation:leonPress .3s ease-out}
@keyframes leonPress{0%{transform:translateY(-5px) scale(1.05)}40%{transform:translateY(-2px) scale(1.12,.9)}100%{transform:translateY(-5px) scale(1.05)}}

/* ============================================================
   MOOD STATES — set on .bot by JS
   idle (default) | happy | thinking | excited
   ============================================================ */
.stp-guide .bot.mood-happy .leon-eye{fill:#BFE9FF;filter:drop-shadow(0 0 5px rgba(127,200,255,1))}
.stp-guide .bot.mood-happy .leon-core{filter:drop-shadow(0 0 4px rgba(79,158,255,.8))}

.stp-guide .bot.mood-thinking .leon-eye{fill:#6FA8E6}
.stp-guide .bot.mood-thinking .leon-brow{opacity:.85}
.stp-guide .bot.mood-thinking .leon-scanline{animation-duration:1.4s}
.stp-guide .bot.mood-thinking .leon-pupils{transform:translate(0,1px)}

.stp-guide .bot.mood-excited .leon-eye{fill:#EAF6FF;filter:drop-shadow(0 0 6px rgba(160,210,255,1))}
.stp-guide .bot.mood-excited .leon-core{animation-duration:1s}
.stp-guide .bot.mood-excited{box-shadow:
    0 20px 40px -10px rgba(0,0,0,.70),
    0 0 0 1px rgba(127,181,255,.55),
    0 0 52px 0 rgba(79,158,255,1),
    inset 0 1px 0 rgba(255,255,255,.16)}
.stp-guide .bot.mood-excited .leon-ant-dot{animation-duration:.9s}

/* ============================================================
   ATTENTION STATE — bot waves for notice
   ============================================================ */
.stp-guide .bot.leon-attn{animation:leonAttn .55s var(--ease) 4}
@keyframes leonAttn{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-5deg)}75%{transform:translateY(-6px) rotate(5deg)}}
/* notification ping dot */
.stp-guide .bot .leon-ping{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:#FF5247;border:2px solid #0C0E15;box-shadow:0 0 10px rgba(255,82,71,.8);
  opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.stp-guide:not(.open) .bot.has-msg .leon-ping{opacity:1;transform:none;animation:leonPing 1.6s ease-in-out infinite}
@keyframes leonPing{0%,100%{box-shadow:0 0 0 0 rgba(255,82,71,.6)}50%{box-shadow:0 0 0 6px rgba(255,82,71,0)}}
/* floating chat-tip above him before first open */
.stp-guide .leon-tip{position:absolute;left:50%;bottom:78px;transform:translateX(-50%) translateY(6px);
  white-space:nowrap;font-family:var(--fh);font-weight:600;font-size:.72rem;letter-spacing:.02em;
  color:#EAF6FF;background:linear-gradient(135deg,rgba(44,111,214,.96),rgba(79,158,255,.96));
  padding:7px 12px;border-radius:99px;box-shadow:0 10px 24px -10px rgba(0,0,0,.7),0 0 0 1px rgba(127,181,255,.4);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:2}
.stp-guide .leon-tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:rgba(79,158,255,.96)}
.stp-guide .leon-tip.show{opacity:1;transform:translateX(-50%) translateY(0);animation:leonTipBob 2.6s ease-in-out infinite}
@keyframes leonTipBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

/* ============================================================
   THE CHAT BUBBLE — glassmorphism, blue brand
   ============================================================ */
.stp-guide .bubble{
  max-width:308px;padding:18px 18px 16px;position:relative;
  background:linear-gradient(165deg,rgba(22,26,36,.92),rgba(11,13,20,.94));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(127,181,255,.28);
  border-radius:18px;border-bottom-left-radius:6px;
  box-shadow:
    0 26px 64px -22px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 34px -12px rgba(79,158,255,.45);
  opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom left;pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.stp-guide.open .bubble{opacity:1;transform:none;pointer-events:auto}
.stp-guide .bubble::after{content:"";position:absolute;left:-7px;bottom:14px;width:14px;height:14px;
  background:inherit;border-left:1px solid rgba(127,181,255,.28);border-bottom:1px solid rgba(127,181,255,.28);
  transform:rotate(45deg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.stp-guide .bubble::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,181,255,.6),transparent)}

.stp-guide .bubble .who{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);font-weight:700;margin-bottom:9px}
.stp-guide .bubble .who .step{opacity:.75;font-weight:500}
.stp-guide .bubble p{margin:0 0 13px;color:var(--ink);font-size:.9rem;line-height:1.55}
.stp-guide .bubble p b{color:#CFE3FF}
.stp-guide .bubble.swap .gtext{animation:leonTextIn .35s var(--ease)}
@keyframes leonTextIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}

/* action buttons */
.stp-guide .bubble .acts{display:flex;gap:8px;flex-wrap:wrap}
.stp-guide .bubble button,.stp-guide .bubble .acts a{font-family:var(--fh);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.73rem;padding:9px 14px;border-radius:99px;cursor:pointer;
  border:1px solid transparent;transition:.2s var(--ease);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35em}
.stp-guide .bubble .go{background:linear-gradient(135deg,#4F9EFF,#2C6FD6);color:#fff;
  box-shadow:0 8px 18px -8px rgba(79,158,255,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.stp-guide .bubble .go:hover{filter:brightness(1.1);transform:translateY(-1px)}
.stp-guide .bubble .sec-btn{background:rgba(255,255,255,.04);color:var(--ink-soft);border-color:rgba(255,255,255,.14)}
.stp-guide .bubble .sec-btn:hover{color:var(--ink);border-color:rgba(127,181,255,.45);background:rgba(79,158,255,.08)}
.stp-guide .bubble .x{position:absolute;top:9px;right:11px;background:none;border:none;box-shadow:none;
  color:var(--ink-mute);font-size:1.15rem;padding:2px 6px;cursor:pointer;transition:color .2s}
.stp-guide .bubble .x:hover{color:var(--ink)}

/* typing dots shown while "thinking" between steps */
.stp-guide .bubble .leon-typing{display:inline-flex;gap:4px;padding:4px 0}
.stp-guide .bubble .leon-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  animation:leonType 1s ease-in-out infinite}
.stp-guide .bubble .leon-typing i:nth-child(2){animation-delay:.15s}
.stp-guide .bubble .leon-typing i:nth-child(3){animation-delay:.3s}
@keyframes leonType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- Spotlight on highlighted elements ---- */
.stp .guide-spot{position:relative;z-index:965;outline:1px solid var(--accent)!important;outline-offset:4px;
  border-radius:var(--r);box-shadow:0 0 0 4px var(--accent-dim)!important;animation:spotPulse 1.8s var(--ease) infinite}
@keyframes spotPulse{50%{box-shadow:0 0 0 8px rgba(79,158,255,.08)!important}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:760px){
  .stp-guide{left:14px;bottom:70px}
  .stp-guide .bubble{max-width:min(76vw,290px)}
  .stp-guide .bot{width:58px;height:58px}
  .stp-guide .bot svg{width:40px;height:40px}
  .stp-guide .leon-tip{display:none}
}
@media(max-width:520px){
  .stp-guide .bot{width:54px;height:54px}
  .stp-guide .bot svg{width:36px;height:36px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .stp-guide .bot,.stp-guide .bot::after,
  .stp-guide .leon-eyes,.stp-guide .leon-pupils,.stp-guide .leon-ant-dot,.stp-guide .leon-ant-wave,
  .stp-guide .leon-core,.stp-guide .leon-scanline,.stp-guide .leon-ring,.stp-guide .leon-spark,
  .stp-guide .bot.leon-attn,.stp-guide .bot.leon-wave .leon-arm-l,.stp-guide .bot.leon-press,
  .stp-guide .bot.has-msg .leon-ping,.stp-guide .bubble .leon-typing i,.stp-guide .leon-tip{animation:none!important}
  .stp-guide .leon-pupils{transform:none!important}
}