/* ============================================================
   VyralCode · El Startup de 8 Horas · bot.css
   Estilos del widget del asistente. Usa las variables de paleta
   que cada pagina define en su :root inline (--bg/--panel/--amber/...).
   Componente autocontenido — se enlaza desde index.html y caso-carlos.html.
   ============================================================ */

/* lanzador flotante */
.bot-launch{
  position:fixed;right:20px;bottom:20px;z-index:90;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;font-size:24px;color:#0c0d12;
  background:linear-gradient(120deg,var(--amber),var(--amber2));
  box-shadow:0 10px 28px rgba(255,140,66,.35);transition:transform .18s,filter .18s}
.bot-launch:hover{filter:brightness(1.07);transform:translateY(-2px)}
.bot-launch .badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;
  background:var(--hot);color:#fff;font-size:11px;font-weight:700;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;padding:0 5px}

/* panel */
.bot{
  position:fixed;right:20px;bottom:20px;z-index:95;width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 40px));background:var(--panel);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.55);display:none;flex-direction:column;
  overflow:hidden;font-family:var(--sans)}
.bot.open{display:flex;animation:botIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes botIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.bot-hdr{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel))}
.bot-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#0c0d12;background:linear-gradient(120deg,var(--amber),var(--amber2));flex:0 0 auto}
.bot-n{font-weight:700;font-size:15px;color:var(--txt);letter-spacing:-.01em}
.bot-s{font-size:11.5px;color:var(--green)}
.bot-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;
  line-height:1;padding:2px 6px;border-radius:7px}
.bot-x:hover{color:var(--txt);background:var(--panel2)}

.bot-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.m{max-width:85%;padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5;word-wrap:break-word}
.m.bot{align-self:flex-start;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-bottom-left-radius:4px}
.m.user{align-self:flex-end;background:linear-gradient(120deg,var(--amber),var(--amber2));color:#0c0d12;font-weight:500;border-bottom-right-radius:4px}
.m.typing{color:var(--faint);font-style:italic;background:transparent;border:none}

/* tarjeta CTA */
.cta-card{align-self:flex-start;max-width:92%;background:var(--bg2);border:1px solid var(--amber);
  border-radius:13px;padding:14px}
.cta-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700}
.cta-card .t{font-size:15px;font-weight:700;color:var(--txt);margin:5px 0}
.cta-card .p{font-family:var(--mono);font-size:18px;color:var(--amber);font-weight:600}
.cta-card a{display:block;text-align:center;background:linear-gradient(120deg,var(--amber),var(--amber2));
  color:#0c0d12;font-size:13px;font-weight:600;text-decoration:none;padding:11px;border-radius:10px;margin-top:11px;transition:filter .18s}
.cta-card a:hover{filter:brightness(1.07)}
.cta-card .pp{font-size:11px;color:var(--faint);line-height:1.45;margin-top:8px}

/* respuestas rapidas */
.qrs{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 6px}
.qr{font:inherit;font-size:13px;color:var(--amber);border:1px solid var(--line);background:var(--panel2);
  padding:8px 13px;border-radius:999px;cursor:pointer;transition:border-color .18s,color .18s}
.qr:hover{border-color:var(--amber);color:var(--txt)}

.bot-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.bot-input input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  font:inherit;font-size:14px;padding:10px 13px;outline:none}
.bot-input input:focus{border-color:var(--amber)}
.bot-input button{background:linear-gradient(120deg,var(--amber),var(--amber2));color:#0c0d12;border:none;
  border-radius:10px;width:44px;font-size:18px;cursor:pointer;transition:filter .18s}
.bot-input button:hover{filter:brightness(1.07)}
.bot-foot{font-size:10.5px;color:var(--faint);text-align:center;padding:0 14px 12px}

@media(prefers-reduced-motion:reduce){.bot.open{animation:none}.bot-launch{transition:none}}
@media(max-width:480px){.bot{right:8px;bottom:8px;width:calc(100vw - 16px)}.bot-launch{right:14px;bottom:14px}}