/* ────────────────────────────────────────────────────────────────────────────
   widget/css/style.css
─────────────────────────────────────────────────────────────────────────────*/

.hidden {
  display: none !important;
}

/* Botón flotante */
@keyframes pulseSphere {
  0%,100% { box-shadow: 0 0 10px rgba(0,255,255,0.5), inset 0 0 20px rgba(0,255,255,0.3); }
  50%     { box-shadow: 0 0 20px rgba(0,255,255,0.8), inset 0 0 30px rgba(0,255,255,0.5); }
}
#chatbot-button {
  position: fixed; bottom: 24px; right: 24px;
  width: 64px; height: 64px;
  background: url('../img/unach-sphere.png') center/cover no-repeat;
  border: none; border-radius: 50%;
  animation: pulseSphere 3s infinite ease-in-out;
  cursor: pointer; z-index:10000;
  transition: transform .2s;
}
#chatbot-button:hover { transform: scale(1.1); }

/* Popup */
#chatbot-popup {
  position: fixed; bottom: 100px; right: 24px;
  width: 360px; z-index: 9999;
}
#chatbot-chat {
  display: flex;
  flex-direction: column;
  height: 80vh;                 /* Altura fija relativa a viewport */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  overflow: hidden;
}

/* Header */
#chatbot-header {
  background: #111d44; color: #fff;
  padding: 12px 16px; display:flex; align-items:center; gap:10px;
  font: bold 18px 'Segoe UI',sans-serif;
}
#chatbot-logo {
  width:32px; height:32px; border-radius:50%;
  background:#fff; padding:4px;
}

/* Consentimiento */
#chatbot-consent {
  padding:20px; background:#fff;
  font:14px 'Segoe UI',sans-serif; color:#333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
#chatbot-consent h3 { margin:0 0 12px; font:600 18px 'Segoe UI'; }
#chatbot-consent p { margin:0 0 16px; line-height:1.5; }
#chatbot-consent a { color:#005baa; text-decoration:underline; }
#chatbot-consent label {
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
#chatbot-consent input[type="checkbox"] { width:16px; height:16px; }
#consent-button {
  width:100%; padding:12px; background:#5dade2; color:#fff;
  border:none; border-radius:8px;
  font:600 15px 'Segoe UI'; cursor:pointer;
  transition: background .3s, opacity .3s;
}
#consent-button:disabled { opacity:.6; cursor:not-allowed; }
#consent-button:not(:disabled):hover { background:#3498db; }

/* Mensajes */
#chatbot-messages {
  flex: 1;                     /* ocupa todo el espacio restante */
  min-height: 0;               /* habilita overflow en flex */
  padding: 16px;
  background: #f5f7fa;
  font: 15px 'Segoe UI',sans-serif;
  color: #333;
  overflow-y: auto;            /* scroll solo aquí */
}

/* Entrada fija */
#chatbot-input {
  flex-shrink: 0;
  display: flex; gap:8px;
  padding: 12px 16px;
  border-top:1px solid #e1e4e8;
  background:#fff;
  z-index:10;
}
#chatbot-input input {
  flex:1; padding:10px 14px;
  border:1px solid #005baa; border-radius:24px;
  font:15px 'Segoe UI'; outline:none;
  transition: border-color .3s;
}
#chatbot-input input:focus { border-color:#0d214f; }
#chatbot-input button {
  width:48px; height:48px;
  background:#111d44; color:#fff;
  border:none; border-radius:50%;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, transform .2s;
}
#chatbot-input button:hover {
  background:#0d214f; transform:scale(1.05);
}

/* Opciones */
.bot-options {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:12px 0;
}
.option-btn {
  flex:1 1 calc(45% - 8px); min-width:120px;
  padding:12px 14px; border:none; border-radius:24px;
  font:600 14px 'Segoe UI'; background:#e2e8f0; color:#333;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition: background .3s, transform .2s;
}
.option-btn:hover {
  background:#cbd5e1; transform:translateY(-2px);
}

/* Burbujas */
.message {
  max-width:80%; margin-bottom:12px;
  padding:12px 16px; border-radius:16px;
  font:15px 'Segoe UI'; line-height:1.4;
  word-wrap:break-word;
}
.message.bot {
  background:#fff; border:1px solid #d0e5ff;
  align-self:flex-start;
}
.message.user {
  background:#e0f0ff; align-self:flex-end;
}

/* Footer fijo */
#chatbot-footer {
  flex-shrink: 0;
  text-align:center;
  padding:8px;
  font:12px 'Segoe UI',sans-serif;
  color:#666;
  border-top:1px solid #e1e4e8;
  background:#fff;
  z-index:10;
}

/* Responsive */
@media (max-width:400px) {
  #chatbot-popup { width:95%; right:2.5%; bottom:80px; }
  .option-btn { flex:1 1 100%; }
}