/* ===========================
   Chatbot Inteligente V2.3 – Estilos finales
   - Minimalista, moderno, accesible
   - Compatible con Bootstrap (sin colisiones)
   =========================== */

:root{
  --ms-primary: #4f46e5;      /* Indigo moderno */
  --ms-primary-2: #6366f1;
  --ms-bg: #ffffff;
  --ms-bg-2: #f8fafc;         /* gris muy claro */
  --ms-text: #0f172a;         /* slate-900 */
  --ms-muted: #64748b;        /* slate-500 */
  --ms-bot: #eef2ff;          /* indigo-50 */
  --ms-user: #d1fae5;         /* emerald-100 */
  --ms-border: #e2e8f0;       /* slate-200 */
  --ms-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark) {
  :root{
    --ms-bg:#0b1220;
    --ms-bg-2:#0f172a;
    --ms-text:#f1f5f9;
    --ms-muted:#94a3b8;
    --ms-bot:#1e293b;
    --ms-user:#064e3b;
    --ms-border:#1f2937;
    --ms-shadow: 0 12px 30px rgba(0,0,0,.45);
  }
}

/* ===== Botón flotante (💬) ===== */
#chat-toggle-btn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--ms-primary);
  color: #fff;
  box-shadow: var(--ms-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#chat-toggle-btn:hover{ transform: translateY(-2px); background: var(--ms-primary-2); }
#chat-toggle-btn:active{ transform: translateY(0); }
#chat-toggle-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:#ef4444; color:#fff; font-size:11px; line-height:1;
  padding:4px 6px; border-radius:999px; box-shadow: var(--ms-shadow);
}

/* ===== Caja del chat ===== */
#chatbot-box{
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 360px;
  max-width: calc(100% - 32px);
  height: 520px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: 18px;
  box-shadow: var(--ms-shadow);
  overflow: hidden;
  z-index: 9998;
  display: none;              /* controlado por .active */
  transform: translateY(10px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
#chatbot-box.active{ display: block; transform: translateY(0); opacity: 1; }

/* ===== Encabezado ===== */
#chatbot-box .chat-header{
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-2));
  color:#fff; padding:14px 16px;
}
#chatbot-box .chat-header .avatar{
  width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--ms-primary);
  display:grid; place-items:center; font-weight:700;
}
#chatbot-box .chat-header .title{
  font-weight:700; letter-spacing:.2px; line-height:1.1;
}
#chatbot-box .chat-header .subtitle{
  font-size:12px; opacity:.9; margin-top:2px;
}
#chatbot-box #close-chat{
  margin-left:auto;
  background: transparent; border:0; color:#fff;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center;
}
#chatbot-box #close-chat:hover{ background: rgba(255,255,255,.15); }

/* ===== Área de mensajes ===== */
#chat-container{
  background: var(--ms-bg-2);
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 14px 14px 6px 14px;
  scroll-behavior: smooth;
}
#chat-container::-webkit-scrollbar{ width: 8px; }
#chat-container::-webkit-scrollbar-thumb{
  background: var(--ms-border); border-radius: 999px;
}

/* ===== Mensajes ===== */
.message{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  position: relative;
}
.message.bot{
  background: var(--ms-bot);
  color: var(--ms-text);
  border-top-left-radius: 6px;
}
.message.user{
  background: var(--ms-user);
  color: #064e3b; /* legible en light/dark */
  margin-left: auto;
  border-top-right-radius: 6px;
}

/* Colas (tails) suaves */
.message.bot::after, .message.user::after{
  content:"";
  position:absolute; bottom:-4px; width:10px; height:10px; transform: rotate(45deg);
}
.message.bot::after{ left:12px; background: var(--ms-bot); }
.message.user::after{ right:12px; background: var(--ms-user); }

/* Indicador "escribiendo..." opcional */
.typing{
  display:inline-block; width:34px; height:18px;
  background: var(--ms-bot); border-radius:10px; position:relative;
  margin: 8px 0;
}
.typing::before, .typing::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:6px; height:6px; background:#94a3b8; border-radius:50%;
  animation: bounce 1s infinite ease-in-out;
}
.typing::before{ left:8px; animation-delay:0s; }
.typing::after{ left:20px; animation-delay:.2s; }
.typing span{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; background:#94a3b8; border-radius:50%;
  animation: bounce 1s infinite .1s ease-in-out;
}
@keyframes bounce{
  0%, 80%, 100%{ opacity:.4; transform: translateY(-50%) scale(.9); }
  40%{ opacity:1; transform: translateY(-58%) scale(1); }
}

/* ===== Área de entrada ===== */
.chat-input{
  background: var(--ms-bg); border-top: 1px solid var(--ms-border);
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
}
#user-input{
  flex:1; border:1px solid var(--ms-border); border-radius:12px;
  padding:10px 12px; outline: none; background: var(--ms-bg);
  color: var(--ms-text); font-size:14px;
}
#user-input::placeholder{ color: var(--ms-muted); }
#send-btn{
  border:0; border-radius:12px; padding:10px 14px; font-weight:600;
  background: var(--ms-primary); color:#fff; box-shadow: var(--ms-shadow);
  transition: transform .12s ease, background .2s ease;
}
#send-btn:hover{ background: var(--ms-primary-2); transform: translateY(-1px); }
#send-btn:active{ transform: translateY(0); }

/* ===== Estados ===== */
#chatbot-box[aria-busy="true"] #send-btn{ opacity:.6; pointer-events:none; }
.message.error{ background:#fee2e2; color:#7f1d1d; }
.message.info{ background:#e0f2fe; color:#075985; }

/* ===== Responsive ===== */
@media (max-width: 480px){
  #chatbot-box{
    right: 12px; left: 12px; width: auto; height: 70vh; bottom: 88px;
  }
  #chat-container{ height: calc(100% - 118px); }
}

/* ===== Micro-transiciones ===== */
@keyframes msg-pop{
  from{ transform: translateY(4px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.message{ animation: msg-pop .18s ease; }