/* =====================================================
   CHATBOT WIDGET — ecsoporte.com
   Clases usadas por chatbot.js
   ===================================================== */
 
/* Botón lanzador */
.chat-launcher{
  position:fixed; right:24px; bottom:186px; z-index:980;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue-600,#1b5fa8),var(--green-600,#1f8f3f));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(10,22,40,.3);
  cursor:pointer; border:none; padding:0;
  transition:transform .25s ease;
}
.chat-launcher:hover{ transform:scale(1.08); }
.chat-launcher img{ width:28px; height:28px; }
.chat-badge{
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:50%;
  background:#e63946; color:#fff;
  font-size:11px; font-weight:700;
  display:none; align-items:center; justify-content:center;
  border:2px solid #fff;
}
 
/* Ventana del chat */
.chat-window{
  position:fixed; right:24px; bottom:254px; z-index:601;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 200px);
  background:#fff; border-radius:20px;
  box-shadow:0 30px 60px rgba(10,22,40,.35);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(20px) scale(.97);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.chat-window.open{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
 
/* Header */
.chat-head{
  background:linear-gradient(120deg,var(--blue-600,#1b5fa8),var(--green-600,#1f8f3f));
  color:#fff; padding:16px 18px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.chat-head-avatar{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; overflow:hidden;
}
.chat-head-avatar img{ width:22px; height:22px; }
.chat-head-info{ flex:1; min-width:0; }
.chat-head-name{ font-family:var(--ff-display,inherit); font-size:13.5px; font-weight:700; letter-spacing:.02em; }
.chat-head-status{ font-size:11.5px; opacity:.9; }
.chat-close-btn{
  background:rgba(255,255,255,.15); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%;
  font-size:14px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.chat-close-btn:hover{ background:rgba(255,255,255,.28); }
 
/* Registro inicial */
.chat-register{
  padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto;
}
.ia-badge{
  align-self:flex-start;
  font-family:var(--ff-mono,monospace); font-size:11px;
  color:var(--green-600,#1f8f3f);
  background:rgba(47,174,78,.09); border:1px solid rgba(47,174,78,.28);
  padding:5px 12px; border-radius:999px; margin-bottom:4px;
}
.chat-register-title{ font-family:var(--ff-display,inherit); font-size:17px; font-weight:700; color:var(--navy-900,#0a1628); }
.chat-register-sub{ font-size:13px; color:var(--ink-500,#5c7189); margin-bottom:6px; }
.chat-input-field{
  width:100%; padding:11px 13px; border-radius:10px;
  border:1.5px solid var(--line,#dbe6f0); font-size:13.5px;
  transition:border-color .2s ease;
}
.chat-input-field:focus{ outline:none; border-color:var(--blue-500,#2e8be0); }
.chat-start-btn{
  margin-top:8px; padding:12px; border:none; border-radius:10px;
  background:linear-gradient(90deg,var(--blue-600,#1b5fa8),var(--green-600,#1f8f3f));
  color:#fff; font-weight:600; font-size:14px; cursor:pointer;
  transition:transform .2s ease;
}
.chat-start-btn:hover{ transform:translateY(-1px); }
 
/* Cuerpo de mensajes */
.chat-body{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--paper-50,#f4f8fc);
}
.bubble-row{ display:flex; align-items:flex-end; gap:8px; max-width:88%; }
.bubble-row.from-bot, .bubble-row.from-agent{ align-self:flex-start; }
.bubble-row.from-user{ align-self:flex-end; flex-direction:row-reverse; }
.bubble-mini-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(46,139,224,.12); border:1px solid rgba(46,139,224,.3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:13px;
}
.bubble-mini-avatar img{ width:16px; height:16px; }
.bubble{
  padding:10px 14px; border-radius:14px; font-size:13.3px; line-height:1.5;
  word-wrap:break-word;
}
.bubble.bot, .bubble.agent{
  background:#fff; border:1px solid var(--line,#dbe6f0); color:var(--ink-900,#0b1524);
  border-bottom-left-radius:4px;
}
.bubble.user{
  background:linear-gradient(120deg,var(--blue-600,#1b5fa8),var(--green-600,#1f8f3f));
  color:#fff; border-bottom-right-radius:4px;
}
.bubble-time{ font-size:10px; color:var(--ink-500,#5c7189); margin-top:3px; padding:0 4px; }
.bubble-row.from-user .bubble-time{ text-align:right; }
 
/* Opciones */
.chat-options{ display:flex; flex-direction:column; gap:8px; align-self:stretch; }
.chat-opt-btn{
  text-align:left; padding:10px 14px; border-radius:10px;
  background:#fff; border:1.5px solid var(--line,#dbe6f0);
  color:var(--ink-700,#33455c); font-size:13px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.chat-opt-btn:hover{ border-color:var(--blue-400,#5fb0f2); background:rgba(46,139,224,.05); }
.chat-opt-btn.green{ border-color:rgba(47,174,78,.4); color:var(--green-600,#1f8f3f); font-weight:600; }
.chat-opt-btn.green:hover{ background:rgba(47,174,78,.07); }
.chat-opt-btn.secondary{ color:var(--ink-500,#5c7189); font-size:12.5px; }
 
/* Barra de búsqueda libre */
.chat-search-bar{ padding:10px 14px; border-top:1px solid var(--line,#dbe6f0); background:#fff; flex-shrink:0; }
.chat-text-input{
  width:100%; padding:10px 13px; border-radius:10px;
  border:1.5px solid var(--line,#dbe6f0); font-size:13.5px;
}
.chat-text-input:focus{ outline:none; border-color:var(--blue-500,#2e8be0); }
.chat-send-btn{
  width:30px; height:30px; border-radius:8px; border:none;
  background:linear-gradient(135deg,var(--blue-600,#1b5fa8),var(--green-600,#1f8f3f));
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
 
/* Footer (chat en vivo con agente) */
.chat-footer{
  padding:12px 14px; border-top:1px solid var(--line,#dbe6f0);
  background:#fff; display:flex; gap:8px; flex-shrink:0;
}
.chat-footer .chat-text-input{ flex:1; }
 
/* Typing indicator */
.typing-indicator{ display:flex; align-items:center; gap:8px; align-self:flex-start; }
.typing-dots{
  display:flex; gap:4px; background:#fff; border:1px solid var(--line,#dbe6f0);
  padding:10px 14px; border-radius:14px; border-bottom-left-radius:4px;
}
.typing-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--ink-500,#5c7189);
  animation:pcTBounce 1.2s infinite;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes pcTBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
 
/* Banner de agente conectado */
.agent-banner{
  align-self:center; font-size:11.5px; color:var(--green-600,#1f8f3f);
  background:rgba(47,174,78,.09); border:1px solid rgba(47,174,78,.28);
  padding:6px 14px; border-radius:999px; margin:4px 0;
}
 
/* Responsive */
@media (max-width:480px){
  .chat-launcher{ right:16px; bottom:170px; width:52px; height:52px; }
  .chat-window{
    right:16px; left:16px; bottom:230px;
    width:auto; height:65vh;
  }
}