/* ============================================================
   CRYPTOSHARKS — bot.css · Widget del asistente SONDA
   Paleta de la casa: abismo #04070B + acento único #35E0C2
   ============================================================ */

#sonda-root{ font-family:'Satoshi','Segoe UI',Tahoma,sans-serif; }

/* ---------- lanzador ---------- */
.sonda-launcher{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:90;width:62px;height:62px;border-radius:50%;
  border:0;cursor:pointer;
  background:var(--accent);color:#04070B;
  box-shadow:0 14px 38px rgba(53,224,194,.35),0 4px 14px rgba(0,0,0,.5);
  display:grid;place-items:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sonda-launcher svg{width:34px;height:34px;display:block}
.sonda-launcher:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 44px rgba(53,224,194,.45),0 6px 16px rgba(0,0,0,.5)}
.sonda-launcher.is-open{background:var(--surface);color:var(--accent);border:1px solid var(--line)}
.sl-badge{
  position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;
  background:#04070B;color:var(--accent);border:2px solid var(--accent);
  font-size:.72rem;font-weight:700;line-height:16px;text-align:center;
  animation:slPulse 1.8s ease-in-out infinite;
}
@keyframes slPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ---------- burbuja de invitación ---------- */
.sonda-nudge{
  position:fixed;right:90px;bottom:calc(30px + env(safe-area-inset-bottom,0px));
  z-index:89;max-width:230px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:14px 14px 4px 14px;
  padding:10px 14px;font-size:.86rem;line-height:1.45;cursor:pointer;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  animation:nudgeIn .35s ease both;
}
.sonda-nudge b{color:var(--accent)}
.sonda-nudge[hidden]{display:none}
@keyframes nudgeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- panel ---------- */
.sonda-panel{
  position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom,0px));
  z-index:90;width:min(384px,calc(100vw - 24px));
  height:min(620px,calc(100dvh - 120px));
  background:var(--abyss);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  display:flex;flex-direction:column;overflow:hidden;
  animation:panelIn .28s ease both;
}
.sonda-panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .sonda-panel{
    right:8px;left:8px;bottom:calc(86px + env(safe-area-inset-bottom,0px));
    width:auto;height:calc(100dvh - 108px);
  }
}

/* cabecera */
.sp-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--deep);
  border-bottom:1px solid var(--line-soft);flex:0 0 auto;
}
.sp-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-dim);border:1px solid rgba(53,224,194,.4);
  display:grid;place-items:center;color:var(--accent);
}
.sp-avatar svg{width:22px;height:22px}
.sp-id{flex:1;min-width:0}
.sp-id b{font-family:'Clash Display',Georgia,serif;font-size:1rem;letter-spacing:.06em}
.sp-status{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:.72rem;margin-top:1px}
.sp-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(53,224,194,.9);animation:slPulse 2s infinite}
.sp-btn{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font-size:1rem;cursor:pointer;line-height:1;
}
.sp-btn:hover{border-color:var(--accent);color:var(--accent)}

/* log de mensajes */
.sp-log{
  flex:1 1 auto;overflow-y:auto;padding:14px 12px 8px;
  scroll-behavior:smooth;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(53,224,194,.05),transparent 60%),
    var(--abyss);
}
.sp-log::-webkit-scrollbar{width:6px}
.sp-log::-webkit-scrollbar-thumb{background:rgba(140,190,183,.2);border-radius:99px}

.sp-msg{
  max-width:86%;margin:0 0 10px;padding:10px 13px;
  border-radius:14px;font-size:.9rem;line-height:1.55;
  animation:msgIn .25s ease both;overflow-wrap:break-word;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sp-msg.is-bot{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-soft);border-top-left-radius:4px;
  align-self:flex-start;margin-right:auto;
}
.sp-msg.is-user{
  background:var(--accent);color:var(--accent-ink);
  border-top-right-radius:4px;margin-left:auto;font-weight:500;
}
.sp-msg.is-user b{color:var(--accent-ink)}
.sp-msg.is-typing{display:flex;gap:5px;padding:13px 15px;width:auto}
.sp-msg.is-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--mute);
  animation:typing 1.2s infinite;
}
.sp-msg.is-typing span:nth-child(2){animation-delay:.15s}
.sp-msg.is-typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* enlace sugerido dentro de la burbuja */
.sp-linkbtn{
  display:inline-block;margin-top:10px;
  padding:7px 12px;border-radius:9px;
  border:1px solid rgba(53,224,194,.5);color:var(--accent);
  font-size:.8rem;font-weight:700;text-decoration:none;
}
.sp-linkbtn:hover{background:var(--accent-dim)}
.sp-msg.is-user .sp-linkbtn{border-color:rgba(5,32,25,.5);color:var(--accent-ink)}

/* confirmación de cita */
.sp-msg.sp-confirm{background:var(--surface-2);border-color:rgba(53,224,194,.35)}
.sp-bk-actions{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.sp-bkbtn{
  flex:1;min-width:130px;text-align:center;
  padding:9px 12px;border-radius:10px;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  font-size:.8rem;font-weight:700;cursor:pointer;
}
.sp-bkbtn:hover{filter:brightness(1.08)}
.sp-bkbtn-alt{background:transparent;border:1px solid rgba(53,224,194,.5);color:var(--accent)}
.sp-bkbtn-alt:hover{background:var(--accent-dim);filter:none}

/* chips de respuesta rápida */
.sp-chips{
  flex:0 0 auto;padding:6px 10px 4px;
  display:flex;flex-wrap:wrap;gap:6px;
  border-top:1px solid var(--line-soft);background:var(--deep);
  max-height:34%;overflow-y:auto;
}
.sp-chips:empty{border-top:0;padding:0}
.sp-chip{
  border:1px solid rgba(140,190,183,.35);background:transparent;
  color:var(--ink);border-radius:99px;
  padding:7px 13px;font-size:.8rem;font-family:inherit;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.sp-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

/* calendario: días */
.sp-days{display:flex;flex-wrap:wrap;gap:6px}
.sp-day{
  display:inline-flex;flex-direction:column;align-items:center;gap:0;
  border-radius:12px;padding:7px 10px;line-height:1.15;
}
.sp-day small{font-size:.62rem;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.sp-day:hover small{color:var(--accent)}

/* calendario: franjas */
.sp-slots{width:100%}
.sp-slots-grouplabel{
  width:100%;color:var(--mute);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;margin:6px 2px 4px;
}
.sp-slotrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.sp-slot{
  border:1px solid rgba(140,190,183,.35);background:transparent;
  color:var(--ink);border-radius:9px;padding:7px 11px;
  font-size:.82rem;font-family:inherit;cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.sp-slot:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sp-slot.is-busy{
  opacity:.32;text-decoration:line-through;cursor:not-allowed;
  border-style:dashed;background:transparent;color:var(--mute);
}
.sp-slot.is-busy:hover{border-color:rgba(140,190,183,.35);color:var(--mute);background:transparent}

/* formulario de datos de la cita */
.sp-bkform{
  width:100%;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:12px;display:flex;flex-direction:column;gap:9px;
}
.sp-bkform label{
  display:flex;flex-direction:column;gap:4px;
  color:var(--dim);font-size:.78rem;font-weight:700;
}
.sp-bkform input{
  background:var(--abyss);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;color:var(--ink);
  font-size:.9rem;font-family:inherit;outline:none;
}
.sp-bkform input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
.sp-bk-confirm{
  background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:10px;padding:11px;font-weight:700;
  font-size:.82rem;font-family:inherit;letter-spacing:.04em;cursor:pointer;
}
.sp-bk-confirm:disabled{opacity:.6;cursor:wait}
.sp-bk-msg{color:#F0A8A0;font-size:.78rem;min-height:1em}

/* input inferior */
.sp-inputrow{
  flex:0 0 auto;display:flex;gap:8px;align-items:center;
  padding:9px 10px;background:var(--deep);
  border-top:1px solid var(--line-soft);
}
.sp-inputrow input{
  flex:1;min-width:0;background:var(--abyss);
  border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;color:var(--ink);font-size:.92rem;font-family:inherit;outline:none;
}
.sp-inputrow input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
.sp-send{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  border:0;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;cursor:pointer;
}
.sp-send:hover{filter:brightness(1.08)}

.sp-disc{
  flex:0 0 auto;padding:7px 12px 9px;
  background:var(--deep);color:var(--mute);
  font-size:.66rem;line-height:1.4;text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .sonda-panel,.sp-msg,.sonda-nudge,.sl-badge,.sp-dot{animation:none}
  .sp-log{scroll-behavior:auto}
}