/* CoordinaTECH “Chat con Teresa IA” — CSS Completo */

:root {
  --color-bg: #05082e;
  --color-secondary: #145da1;
  --color-accent: #f8d12a;
  --color-text-light: #ffffff;
  --color-text-dark: #05082e;
  --color-muted: #adb5bd;
  --color-deep-blue: #030622;
  --border-radius-main: 15px;
  --box-shadow-main: 0 10px 25px rgba(0, 0, 0, 0.2);
  --spacing: 1rem;
  --font: 'Poppins', sans-serif;
}

/* 1. Widget & Bubble */
.chatbot-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 1050;
  font-family: var(--font);
}
.chatbot-bubble {
  width: 60px; height: 60px; background: var(--color-accent);
  color: var(--color-text-dark); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--box-shadow-main); cursor: pointer;
  transition: transform .3s;
}
.chatbot-bubble:hover { transform: scale(1.1); }
.chatbot-bubble i { font-size: 1.6rem; }

/* 2. Panel */
.chatbot-panel {
  position: absolute; bottom: 80px; right: 0;
  width: 360px; height: 500px;
  background: var(--color-text-light);
  border-radius: var(--border-radius-main);
  box-shadow: var(--box-shadow-main);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .3s, transform .3s;
}
.chatbot-panel:not(.hidden) {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* 3. Header */
.chat-header {
  background: var(--color-deep-blue); color: var(--color-text-light);
  height: 56px; display: flex; align-items: center;
  padding: 0 var(--spacing);
}
.chat-header-title {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1.2rem;
}
.chat-header-title i { font-size: 1.4rem; }
.btn-close {
  margin-left: auto; background:none; border:none;
  color: var(--color-text-light); font-size:1.2rem; cursor:pointer;
}

/* 4. Mensajes */
#chatbot-messages {
  flex:1; overflow-y:auto;
  padding: calc(var(--spacing)*2) var(--spacing) 0 var(--spacing);
  background: var(--color-text-light);
}
#chatbot-messages::-webkit-scrollbar {
  width:6px;
}
#chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius:3px;
}

/* 5. Burbujas */
/* 5.1 Bienvenida */
.msg.welcome-msg {
  margin: calc(var(--spacing)*2.5) 0 var(--spacing) 0;
  padding: var(--spacing);
  background: var(--color-deep-blue);
  color: var(--color-text-light);
  align-self:flex-start;
  border-radius: var(--border-radius-main);
  display:flex; align-items:flex-start; gap:.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.msg.welcome-msg .icon { font-size:1.5rem; margin-top:.2rem; }

/* 5.2 Bot / User / Thinking */
.msg.bot, .msg.user, .msg.thinking {
  position: relative;
  display:flex; align-items:flex-start; gap:.5rem;
  padding: var(--spacing); margin-bottom: var(--spacing);
  max-width: 80%; border-radius: var(--border-radius-main);
}
.msg.bot {
  background: var(--color-deep-blue);
  color: var(--color-text-light);
  align-self:flex-start;
}
.msg.bot::before {
  content:''; position:absolute; left:-8px; top:16px;
  border:8px solid transparent; border-right-color: var(--color-deep-blue);
}
.msg.user {
  background: var(--color-accent);
  color: var(--color-text-dark);
  align-self:flex-end;
}
.msg.user::before {
  content:''; position:absolute; right:-8px; top:16px;
  border:8px solid transparent; border-left-color: var(--color-accent);
}
.msg.thinking {
  background: var(--color-muted);
  color: var(--color-text-light);
  align-self:flex-start; font-style:italic;
}
@keyframes dots {
  0%,20%   { content:'Pensando'; }
  40%      { content:'Pensando.'; }
  60%      { content:'Pensando..'; }
  80%,100% { content:'Pensando...'; }
}
.msg.thinking span::after {
  content:'Pensando'; animation:dots 1.5s steps(4,end) infinite;
}
.msg .icon {
  font-size:1.2rem; flex-shrink:0;
}

/* 6. Entrada */
.chatbot-input-area {
  display:flex; align-items:center; gap:.5rem;
  padding: var(--spacing); border-top:1px solid var(--color-muted);
  background: var(--color-text-light);
}
.chatbot-input-area input {
  flex:1; padding:.6rem var(--spacing);
  border:1px solid var(--color-muted);
  border-radius: var(--border-radius-main);
  outline:none; font-size:.95rem;
}
.chatbot-input-area input:focus {
  border-color: var(--color-secondary);
}
.chatbot-input-area .mic-btn,
.chatbot-input-area .mute-btn {
  background:none; border:none; cursor:pointer;
}
.chatbot-input-area .send-btn {
  background: var(--color-text-light);
  border:none; border-radius:50%;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.chatbot-input-area button i {
  font-size:1.2rem; color: var(--color-text-dark);
}

/* 7. Formato de negritas, listas, code */
.msg span {
  line-height:1.5; font-size:.95rem;
}
.msg span strong { font-weight:700; color: var(--color-accent); }
.msg span em { font-style:italic; opacity:.85; }
.msg span code {
  background: rgba(0,0,0,0.1); color: var(--color-text-dark);
  font-family:monospace; padding:2px 4px; border-radius:4px; font-size:.9rem;
}
.msg span ul,
.msg span ol {
  margin: .5rem 0 .5rem 1.25rem;
}
.msg span ul li,
.msg span ol li {
  margin-bottom:.3rem;
}
.msg span a {
  color: var(--color-secondary); text-decoration:underline;
}
.msg span a:hover {
  color: var(--color-accent); text-decoration:none;
}

/* 8. Ocultar */
.hidden { display:none!important; }

/* 9. Responsive */
@media (max-width:400px) {
  .chatbot-widget { bottom:15px; right:15px; }
  .chatbot-panel { width:90vw; right:5vw; height:60vh; }
}