/* SOPORTÍN v3 — Cute round mascot that roams the full page */

/* === WRAPPER: covers full viewport === */
#soportin-layer{position:fixed;inset:0;z-index:8999;pointer-events:none;overflow:hidden;}

/* === CHARACTER === */
#soportin{
  position:fixed;bottom:30px;left:60px;
  pointer-events:auto;cursor:pointer;
  z-index:9000;
  transition:filter .3s;
  will-change:transform,left,bottom;
}
#soportin:hover{filter:drop-shadow(0 0 18px rgba(244,104,0,.6));}
#soportin.flip svg{transform:scaleX(-1);}

/* IDLE: gentle float */
@keyframes s-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#soportin.idle{animation:s-idle 2.5s ease-in-out infinite;}

/* WALK: bounce + sway */
@keyframes s-walk{0%,100%{transform:translateY(0) rotate(0deg)}20%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(0) rotate(0deg)}70%{transform:translateY(-5px) rotate(3deg)}}
#soportin.walking{animation:s-walk .5s ease-in-out infinite;}

/* RUN: faster bounce */
#soportin.running{animation:s-walk .28s ease-in-out infinite;}

/* JUMP: squash & stretch */
@keyframes s-jump{
  0%{transform:translateY(0) scaleX(1) scaleY(1)}
  10%{transform:translateY(4px) scaleX(1.15) scaleY(.8)}
  35%{transform:translateY(-70px) scaleX(.9) scaleY(1.12)}
  55%{transform:translateY(-75px) scaleX(1) scaleY(1)}
  80%{transform:translateY(5px) scaleX(1.1) scaleY(.85)}
  100%{transform:translateY(0) scaleX(1) scaleY(1)}
}
#soportin.jumping{animation:s-jump .8s cubic-bezier(.2,0,.3,1) forwards;}

/* WAVE: tilt side to side */
@keyframes s-wave{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
#soportin.waving{animation:s-wave 1.2s ease-in-out forwards;}

/* DANCE: party mode */
@keyframes s-dance{0%,100%{transform:translateY(0) rotate(-5deg) scale(1)}25%{transform:translateY(-10px) rotate(5deg) scale(1.05)}50%{transform:translateY(0) rotate(-5deg) scale(1)}75%{transform:translateY(-10px) rotate(5deg) scale(1.05)}}
#soportin.dancing{animation:s-dance .4s ease-in-out infinite;}

/* THINK: slight tilt + bob */
@keyframes s-think{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(8deg) translateY(-3px)}}
#soportin.thinking{animation:s-think 2s ease-in-out infinite;}

/* SIT: lower and still */
@keyframes s-sit{0%{transform:scaleY(1)}100%{transform:scaleY(.88) translateY(4px)}}
#soportin.sitting{animation:s-sit .3s ease forwards;}

/* LOOK: subtle lean */
@keyframes s-look{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
#soportin.looking{animation:s-look 2.5s ease-in-out infinite;}

/* Antenna blink */
@keyframes antenna-glow{0%,100%{opacity:1;filter:drop-shadow(0 0 3px #F46800)}50%{opacity:.4;filter:drop-shadow(0 0 0px #F46800)}}
#soportin .antenna-tip{animation:antenna-glow 2s ease-in-out infinite;}

/* Eye blink */
@keyframes eye-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}
#soportin .eye-l,#soportin .eye-r{animation:eye-blink 4s ease-in-out infinite;}
#soportin .eye-r{animation-delay:.1s;}

/* === SPEECH BUBBLE === */
#sop-bubble{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(6px) scale(.92);
  background:white;border-radius:16px;padding:9px 16px;
  font-family:'MADE Tommy Soft','Nunito',sans-serif;font-size:12px;font-weight:700;color:#060633;
  white-space:nowrap;box-shadow:0 6px 28px rgba(0,0,0,.15);
  opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
#sop-bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
#sop-bubble::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white;}

/* === CTA BUTTON === */
#sop-cta{
  position:fixed;bottom:90px;right:20px;z-index:9001;
  background:linear-gradient(135deg,#03318C,#0F71F2);color:white;border:none;border-radius:50px;
  padding:10px 20px;font-family:'MADE Tommy Soft','Nunito',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 24px rgba(3,49,140,.35);transition:all .3s;
  animation:cta-pulse 3s ease-in-out infinite;
}
#sop-cta:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 32px rgba(3,49,140,.5);}
@keyframes cta-pulse{0%,100%{box-shadow:0 4px 24px rgba(3,49,140,.35)}50%{box-shadow:0 4px 30px rgba(244,104,0,.4)}}

/* === CHAT WINDOW === */
#sop-chat{
  position:fixed;bottom:20px;right:20px;width:380px;max-width:calc(100vw - 40px);
  height:520px;max-height:calc(100vh - 100px);
  background:#060633;border-radius:22px;
  border:1px solid rgba(153,175,242,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  z-index:9002;display:none;flex-direction:column;overflow:hidden;
  font-family:'Nunito','Roboto',sans-serif;
}
#sop-chat.open{display:flex;animation:chat-in .35s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes chat-in{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

.sc-hdr{background:linear-gradient(135deg,#03318C,#0F71F2);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.sc-hdr .av{width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-hdr .av svg{width:26px;height:26px;}
.sc-hdr .nf{flex:1;}
.sc-hdr .nf h3{color:white;font-family:'MADE Tommy Soft','Nunito',sans-serif;font-size:15px;font-weight:700;margin:0;}
.sc-hdr .nf p{color:rgba(255,255,255,.6);font-size:11px;margin:2px 0 0;}
.sc-hdr .cb{background:rgba(255,255,255,.08);border:none;color:white;width:30px;height:30px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sc-hdr .cb:hover{background:rgba(255,255,255,.18);}

.sc-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.sc-msgs::-webkit-scrollbar{width:3px;}
.sc-msgs::-webkit-scrollbar-thumb{background:rgba(153,175,242,.12);border-radius:2px;}

.sc-m{max-width:84%;padding:11px 15px;border-radius:18px;font-size:13.5px;line-height:1.55;word-wrap:break-word;animation:m-in .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes m-in{from{opacity:0;transform:translateY(10px) scale(.94)}}
.sc-m.b{background:rgba(3,49,140,.2);color:#CDD6E8;border-bottom-left-radius:5px;align-self:flex-start;}
.sc-m.u{background:linear-gradient(135deg,#F46800,#F68633);color:white;border-bottom-right-radius:5px;align-self:flex-end;}
.sc-m .w{font-size:10px;font-weight:700;color:#0F71F2;margin-bottom:3px;font-family:'MADE Tommy Soft','Nunito',sans-serif;}

.sc-tp{display:flex;gap:5px;padding:14px 18px;align-self:flex-start;}
.sc-tp span{width:7px;height:7px;background:#0F71F2;border-radius:50%;animation:tp-b 1.4s ease-in-out infinite;}
.sc-tp span:nth-child(2){animation-delay:.2s;}
.sc-tp span:nth-child(3){animation-delay:.4s;}
@keyframes tp-b{0%,60%,100%{transform:translateY(0);opacity:.25}30%{transform:translateY(-8px);opacity:1}}

/* Quick reply buttons removed — Soportín is now fully conversational */

.sc-inp{padding:12px 16px;background:rgba(6,6,51,.9);border-top:1px solid rgba(153,175,242,.08);display:flex;gap:8px;flex-shrink:0;}
.sc-inp input{flex:1;background:rgba(153,175,242,.06);border:1.5px solid rgba(153,175,242,.1);border-radius:14px;padding:10px 14px;color:white;font-size:13px;font-family:'Nunito',sans-serif;outline:none;}
.sc-inp input:focus{border-color:#F46800;}
.sc-inp input::placeholder{color:rgba(153,175,242,.3);}
.sc-inp button{background:linear-gradient(135deg,#F46800,#F68633);border:none;color:white;width:40px;height:40px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.sc-inp button:hover{transform:scale(1.06);}
.sc-inp button:disabled{opacity:.3;transform:none;}

@media(max-width:640px){
  #sop-chat{right:10px;bottom:10px;width:calc(100vw - 20px);height:calc(100vh - 80px);border-radius:18px;}
  #sop-cta{bottom:85px;right:14px;padding:8px 14px;font-size:12px;}
  #soportin svg{width:52px;height:52px;}
}