/* =========================================================
   SIM.bot — Asistente Virtual "Simi Asistente" 🤖
   FAB + panel de chat. Mobile-first, dark mode integrado.
   ========================================================= */

/* ---------- FAB flotante ---------- */
.simbot-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #1e4ea3, #0a2a5e);
  box-shadow: 0 10px 28px rgba(10,42,94,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.simbot-fab:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(10,42,94,.5); }
.simbot-fab.active{ transform: scale(.94); }
.simbot-fab-icon{ width: 34px; height: 34px; display:block; }
.simbot-fab-icon svg{ width: 100%; height: 100%; display:block; }

/* Punto de notificación */
.simbot-fab-dot{
  position: absolute;
  top: 4px; right: 4px;
  width: 13px; height: 13px;
  background: #1fbf6a;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: simbotPulse 2s infinite;
}
@keyframes simbotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(31,191,106,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(31,191,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,191,106,0); }
}

/* En páginas con bottom-nav móvil, elevar el FAB */
@media (max-width: 780px){
  .simbot-fab.above-nav{ bottom: 86px; }
  .simbot-panel.above-nav{ bottom: 156px; }
}

/* ---------- Panel de chat ---------- */
.simbot-panel{
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 1210;
  width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(10,27,53,.35);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  border: 1px solid #e3eaf5;
}
.simbot-panel.open{ opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 480px){
  .simbot-panel{
    right: 12px; left: 12px;
    width: auto;
    bottom: 86px;
    height: min(540px, calc(100vh - 110px));
  }
}

/* ---------- Header ---------- */
.simbot-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #0a2a5e, #1e4ea3);
  color: #fff;
}
.simbot-ava{ width: 36px; height: 36px; flex: 0 0 36px; }
.simbot-ava svg{ width: 100%; height: 100%; }
.simbot-head-txt{ flex: 1; min-width: 0; line-height: 1.25; }
.simbot-head-txt strong{ font-family: 'Montserrat', sans-serif; font-size: 15px; display: block; }
.simbot-head-txt small{ font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.simbot-online{
  width: 8px; height: 8px; border-radius: 50%;
  background: #1fbf6a; display: inline-block;
  box-shadow: 0 0 6px rgba(31,191,106,.9);
}
.simbot-close,
.simbot-clear{
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.simbot-close:hover,
.simbot-clear:hover{ background: rgba(255,255,255,.28); }

/* ---------- Mensajes ---------- */
.simbot-msgs{
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f5f8fd;
  scroll-behavior: smooth;
}
.simbot-msg{ display: flex; flex-direction: column; max-width: 88%; }
.simbot-msg.from-bot{ align-self: flex-start; }
.simbot-msg.from-user{ align-self: flex-end; align-items: flex-end; }

.simbot-bubble{
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: simbotIn .25s ease both;
  word-break: break-word;
}
.from-bot .simbot-bubble{
  background: #fff;
  color: #0d1b35;
  border: 1px solid #e3eaf5;
  border-bottom-left-radius: 5px;
  box-shadow: 0 3px 10px rgba(15,58,122,.06);
}
.from-user .simbot-bubble{
  background: linear-gradient(135deg, #1e4ea3, #2461c4);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 12px rgba(30,78,163,.3);
}
.simbot-bubble small{ opacity: .75; font-size: 11.5px; }
@keyframes simbotIn{
  from{ opacity: 0; transform: translateY(7px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ---------- Chips de acción ---------- */
.simbot-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.simbot-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  background: #eaf2ff;
  color: #1e4ea3;
  border: 1px solid #c9dcff;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .2s, color .2s;
}
.simbot-chip:hover{ background: #1e4ea3; color: #fff; transform: translateY(-1px); }

/* ---------- Typing indicator ---------- */
.simbot-typing{
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 13px 15px !important;
}
.simbot-typing span{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9aabc7;
  animation: simbotDots 1.2s infinite;
}
.simbot-typing span:nth-child(2){ animation-delay: .18s; }
.simbot-typing span:nth-child(3){ animation-delay: .36s; }
@keyframes simbotDots{
  0%, 60%, 100%{ transform: translateY(0); opacity: .5; }
  30%{ transform: translateY(-5px); opacity: 1; }
}

/* ---------- Input ---------- */
.simbot-input{
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #e3eaf5;
}
.simbot-input input{
  flex: 1;
  border: 1.5px solid #e3eaf5;
  border-radius: 99px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  background: #f5f8fd;
  color: #0d1b35;
  transition: border-color .2s, background .2s;
}
.simbot-input input:focus{ border-color: #1e4ea3; background: #fff; }
.simbot-input button{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1e4ea3, #0a2a5e);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.simbot-input button:hover{ transform: scale(1.07); box-shadow: 0 6px 16px rgba(30,78,163,.4); }

/* ---------- Footer disclaimer ---------- */
.simbot-foot{
  text-align: center;
  font-size: 10.5px;
  color: #9aabc7;
  padding: 6px 10px 8px;
  background: #fff;
}

/* =========================================================
   DARK MODE
   ========================================================= */
:root[data-theme="dark"] .simbot-panel{
  background: #101c33;
  border-color: #223354;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .simbot-msgs{ background: #0a1226; }
:root[data-theme="dark"] .from-bot .simbot-bubble{
  background: #16233f;
  border-color: #223354;
  color: #dbe6f7;
}
:root[data-theme="dark"] .simbot-chip{
  background: #16233f;
  border-color: #2a3f66;
  color: #8fb4f5;
}
:root[data-theme="dark"] .simbot-chip:hover{ background: #1e4ea3; color: #fff; }
:root[data-theme="dark"] .simbot-input{
  background: #101c33;
  border-top-color: #223354;
}
:root[data-theme="dark"] .simbot-input input{
  background: #0a1226;
  border-color: #223354;
  color: #dbe6f7;
}
:root[data-theme="dark"] .simbot-input input:focus{ border-color: #3a7bd5; background: #101c33; }
:root[data-theme="dark"] .simbot-foot{ background: #101c33; color: #56678a; }
:root[data-theme="dark"] .simbot-fab-dot{ border-color: #101c33; }

/* ---------- Accesibilidad: reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .simbot-fab, .simbot-panel, .simbot-bubble, .simbot-chip{ transition: none; animation: none; }
  .simbot-fab-dot, .simbot-typing span{ animation: none; }
}