/* SOPORTIN v4 — Redesign aligned with index-v2 aesthetic
   Glassmorphism | Spring physics | Inter font | Consistent tokens */

/* === 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 cubic-bezier(.22,1.2,.36,1);
  will-change:transform,left,bottom;
}
#soportin:hover{filter:drop-shadow(0 0 20px rgba(244,104,0,.5));}
#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 — Spring entrance === */
#sop-bubble{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(8px) scale(.9);
  background:white;border-radius:14px;padding:10px 18px;
  font-family:'MADE Tommy Soft','Inter',sans-serif;font-size:12.5px;font-weight:700;color:#060633;
  white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 0 0 1px rgba(3,49,140,.06);
  opacity:0;transition:all .4s cubic-bezier(.22,1.2,.36,1);pointer-events:none;
}
#sop-bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
#sop-bubble::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid white;
}

/* === CTA BUTTON — Subtle glow, spring hover === */
#sop-cta{
  position:fixed;bottom:90px;right:20px;z-index:9001;
  background:linear-gradient(135deg,#03318C,#0F71F2);color:white;border:none;border-radius:100px;
  padding:10px 22px;font-family:'MADE Tommy Soft','Inter',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 20px rgba(3,49,140,.3);
  transition:all .4s cubic-bezier(.22,1.2,.36,1);
}
#sop-cta:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 32px rgba(3,49,140,.4);
}
#sop-cta:active{transform:scale(.97);}

/* === CHAT WINDOW — Glassmorphism === */
#sop-chat{
  position:fixed;bottom:20px;right:20px;width:380px;max-width:calc(100vw - 40px);
  height:520px;max-height:calc(100vh - 100px);
  background:rgba(6,6,51,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
  z-index:9002;display:none;flex-direction:column;overflow:hidden;
  font-family:'Inter','Roboto',sans-serif;
}
#sop-chat.open{display:flex;animation:chat-in .4s cubic-bezier(.22,1.2,.36,1) forwards;}
@keyframes chat-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Header — Darker gradient, blends with glass */
.sc-hdr{
  background:linear-gradient(135deg,rgba(3,49,140,.6),rgba(15,113,242,.3));
  backdrop-filter:blur(8px);
  padding:16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sc-hdr .av{
  width:40px;height:40px;
  background:rgba(255,255,255,.08);
  border-radius:12px;
  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','Inter',sans-serif;font-size:15px;font-weight:700;margin:0;}
.sc-hdr .nf p{color:rgba(255,255,255,.5);font-size:11px;margin:2px 0 0;}
.sc-hdr .cb{
  background:rgba(255,255,255,.06);border:none;color:white;
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s cubic-bezier(.22,1.2,.36,1);
}
.sc-hdr .cb:hover{background:rgba(255,255,255,.14);transform:scale(1.08);}
.sc-hdr .cb:active{transform:scale(.92);}

/* Messages area */
.sc-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;}
.sc-msgs::-webkit-scrollbar{width:3px;}
.sc-msgs::-webkit-scrollbar-track{background:transparent;}
.sc-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}

/* Message bubbles — Glass bot, gradient user */
.sc-m{
  max-width:84%;padding:12px 16px;border-radius:16px;
  font-size:13.5px;line-height:1.6;word-wrap:break-word;
  animation:m-in .35s cubic-bezier(.22,1.2,.36,1);
}
@keyframes m-in{from{opacity:0;transform:translateY(8px) scale(.96)}}

/* Bot message — Subtle glass */
.sc-m.b{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.8);
  border-bottom-left-radius:6px;
  align-self:flex-start;
}
/* User message — Orange gradient */
.sc-m.u{
  background:linear-gradient(135deg,#F46800,#F68633);
  color:white;
  border-bottom-right-radius:6px;
  align-self:flex-end;
  box-shadow:0 4px 16px rgba(244,104,0,.15);
}
/* Bot name label */
.sc-m .w{
  font-size:10px;font-weight:700;color:rgba(15,113,242,.8);
  margin-bottom:4px;font-family:'MADE Tommy Soft','Inter',sans-serif;
  letter-spacing:.02em;
}

/* Typing indicator */
.sc-tp{display:flex;gap:5px;padding:14px 18px;align-self:flex-start;}
.sc-tp span{width:6px;height:6px;background:rgba(15,113,242,.6);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:.2}30%{transform:translateY(-7px);opacity:1}}

/* Input area — Aligned with v2 form inputs */
.sc-inp{
  padding:14px 16px;
  background:rgba(6,6,51,.6);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;gap:10px;flex-shrink:0;
}
.sc-inp input{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:11px 16px;color:white;font-size:13.5px;
  font-family:'Inter',sans-serif;outline:none;
  transition:all .3s cubic-bezier(.22,1.2,.36,1);
}
.sc-inp input:focus{
  border-color:#0F71F2;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(15,113,242,.15);
}
.sc-inp input::placeholder{color:rgba(255,255,255,.25);}

.sc-inp button{
  background:linear-gradient(135deg,#F46800,#F68633);
  border:none;color:white;width:42px;height:42px;border-radius:12px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all .3s cubic-bezier(.22,1.2,.36,1);
}
.sc-inp button:hover{transform:scale(1.06);box-shadow:0 4px 16px rgba(244,104,0,.25);}
.sc-inp button:active{transform:scale(.94);}
.sc-inp button:disabled{opacity:.25;transform:none;box-shadow:none;}

/* === MOBILE === */
@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 16px;font-size:12px;}
  #soportin svg{width:52px;height:52px;}
}