/* ───────── Botón flotante ───────── */
#bot-launcher{
  position:fixed; right:16px; bottom:16px;
  width:64px; height:64px;
  border:3px solid #00e6e6; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:8px; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  z-index:9999; transition:transform .2s, filter .2s, box-shadow .3s;
}
#bot-launcher:hover{
  filter:brightness(1.05); transform:scale(1.05);
  box-shadow:0 0 12px #00e6e6, 0 8px 20px rgba(0,0,0,.25);
}
#bot-launcher img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 0 2px #000);
}

/* ───────── Panel del chat ───────── */
#bot-panel{
  position:fixed; right:16px; bottom:72px;
  width:min(360px, calc(100vw - 24px));
  height:min(580px, calc(100vh - 96px));
  background:#0b1220; border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  overflow:hidden;
  z-index:10000;
  display:none; /* ✅ inicia oculto, el JS lo pone en flex */
  flex-direction:column;
}

/* Header */
#bot-header{
  background:linear-gradient(135deg,#0b5b9a,#00a3c4);
  color:#fff; height:46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#bot-title{ font-size:14px; font-weight:700; display:flex; gap:8px; align-items:center; }
#bot-dot{ width:8px; height:8px; border-radius:50%; background:#3ee46b; box-shadow:0 0 8px #3ee46b; }
#bot-close{ border:none; background:transparent; color:#fff; font-size:20px; cursor:pointer; line-height:1; }

/* Iframe: ocupa todo entre header y atajos */
#bot-frame{
  flex:1 1 0;
  min-height:0;
  width:100%;
  border:0;
  background:transparent;
}

/* Atajos */
#bot-shortcuts{
  flex:0 0 auto; display:flex; flex-wrap:nowrap; overflow-x:auto;
  gap:6px; padding:4px 6px; border-top:1px solid rgba(255,255,255,.08); background:#0e1526;
  scrollbar-width:thin;
}
#bot-shortcuts::-webkit-scrollbar{ height:8px; }
#bot-shortcuts::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px; }
#bot-shortcuts button{
  flex:0 0 auto; white-space:nowrap; padding:4px 10px; font-size:11px;
  border:none; border-radius:999px; background:#00e6e6; color:#0a0a23; cursor:pointer;
  transition:background .2s, transform .1s;
}
#bot-shortcuts button:hover{
  background:#00c4c4; color:#fff; transform:translateY(-1px);
}

/* Móvil */
@media (max-width:480px){
  #bot-panel{
    right:0; bottom:0; left:0; top:0;
    width:100vw; height:100vh; border-radius:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #bot-launcher{ right:12px; bottom:12px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  #bot-launcher, #bot-shortcuts button{ transition:none; }
}

#bot-panel.loading::after{
  content:"Enviando…";
  position:absolute; inset:0;
  background:rgba(11,18,32,.55);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.3px;
}