/* ===== Agentes IA: Elyon y Lee ===== */
.av{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;font-family:Orbitron,sans-serif;font-weight:800;color:#05060f;position:relative}
.av img{width:100%;height:100%;object-fit:cover}
.av.elyon{background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 16px rgba(34,228,255,.5)}
.av.lee{background:linear-gradient(135deg,var(--pink),var(--gold));box-shadow:0 0 16px rgba(255,63,180,.5)}
.av.glypux{background:linear-gradient(135deg,#e5e7eb,var(--violet));box-shadow:0 0 16px rgba(139,92,255,.55)}
.av img{object-position:center}
.av.big{width:120px;height:120px;font-size:40px}

/* sección equipo */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.agent{display:flex;gap:22px;align-items:center;padding:28px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.agent:hover{transform:translateY(-4px)}
.agent.elyon{border-color:rgba(34,228,255,.4)} .agent.elyon:hover{box-shadow:0 18px 50px rgba(34,228,255,.15)}
.agent.lee{border-color:rgba(255,63,180,.4)} .agent.lee:hover{box-shadow:0 18px 50px rgba(255,63,180,.15)}
.agent.glypux{border-color:rgba(139,92,255,.5)} .agent.glypux:hover{box-shadow:0 18px 50px rgba(139,92,255,.18)}
.agent.glypux .role{color:var(--violet)}
.agent{flex-direction:column;text-align:center}
.agent h3{font-family:Orbitron,sans-serif;font-size:22px}
.agent .role{font-size:13px;font-weight:600;margin:2px 0 8px}
.agent.elyon .role{color:var(--cyan)} .agent.lee .role{color:var(--pink)}
.agent p{color:var(--muted);font-size:14px;margin-bottom:14px}
.online{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#34d399}
.online::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}

/* lanzador */
.chat-launch{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid rgba(34,228,255,.5);background:rgba(8,10,28,.92);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;box-shadow:0 10px 40px rgba(34,228,255,.25)}
.chat-launch .av{width:38px;height:38px;font-size:14px}
.chat-launch .stack{display:flex}.chat-launch .stack .av+.av{margin-left:-12px;border:2px solid #080a1c}
.chat-launch small{display:block;font-size:11px;color:var(--muted);font-weight:400}

/* ventana */
.chat{position:fixed;right:18px;bottom:18px;z-index:50;width:min(410px,calc(100vw - 24px));height:min(640px,calc(100vh - 36px));display:none;flex-direction:column;border-radius:22px;overflow:hidden;background:#080a1c;border:1px solid rgba(34,228,255,.4);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(34,228,255,.15)}
.chat.open{display:flex}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(34,228,255,.15),rgba(255,63,180,.12));border-bottom:1px solid var(--line)}
.chat-head .who{flex:1;min-width:0}
.chat-head b{font-family:Orbitron,sans-serif;font-size:15px;display:block}
.chat-head .x{background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;padding:4px}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.m{display:flex;gap:8px;align-items:flex-end;max-width:92%;animation:pop .3s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.m .av{width:30px;height:30px;font-size:11px}
.m .bub{padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:14px;line-height:1.5;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.m .bub strong{color:var(--fg)}
.m .name{font-size:11px;font-weight:700;margin-bottom:2px}
.m.elyon .name{color:var(--cyan)} .m.lee .name{color:var(--pink)} .m.glypux .name{color:var(--violet)}
.m.user{align-self:flex-end;flex-direction:row-reverse}
.m.user .bub{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05060f;border:0;border-radius:16px 16px 4px 16px;font-weight:500}
.handoff{align-self:center;font-size:12px;color:var(--muted);padding:4px 12px;border-radius:999px;border:1px dashed var(--line)}
.typing .bub{display:flex;gap:4px;padding:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding-left:38px;animation:pop .3s ease both}
.opts button{background:rgba(34,228,255,.08);border:1px solid rgba(34,228,255,.45);color:var(--fg);padding:8px 13px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
.opts button:hover{background:rgba(34,228,255,.2)}
.cform{margin-left:38px;padding:14px;border-radius:16px;background:rgba(255,63,180,.06);border:1px solid rgba(255,63,180,.35);display:grid;gap:10px;animation:pop .3s ease both}
.cform h4{font-size:14px;color:var(--pink)}
.cform label{font-size:12px;gap:4px}
.cform input,.cform select,.cform textarea{padding:9px 11px;font-size:14px;border-radius:10px}
.cform textarea{min-height:70px}
.cform .chk{display:flex;flex-wrap:wrap;gap:6px}
.cform .chk label{display:flex;align-items:center;gap:5px;font-size:12px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--fg);cursor:pointer}
.cform .chk input{width:auto}
.cform .send-row .btn{padding:10px 14px;font-size:14px;flex:1}
.chat-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;padding:10px 14px;border-radius:999px;font-size:14px}
.chat-input button{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;font-size:16px;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05060f}
.chat-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px}
.chat-foot button{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:8px;font:inherit;font-size:12px;cursor:pointer}
.chat-foot button:hover{color:var(--fg)}

@media (max-width:980px){.team{grid-template-columns:1fr}}
@media (max-width:560px){
  .agent{flex-direction:column;text-align:center}
  .chat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}
  .chat-launch{padding-right:12px}.chat-launch .txt{display:none}
}