/* ───────── CAI 2025 · Chat Styles ───────── */
:root {
  --cai-primary: #00c8f0;  /* Turquesa corporativo */
  --cai-accent : #e53c99;  /* Rosa corporativo (usuario) */
  --cai-gray   : #9e9e9e;  /* Gris de apoyo */
  --cai-bot-bg : #f8f8f8;  /* Fondo burbuja bot */
}

/* ── Off-canvas: ancho ampliado ── */
.offcanvas.offcanvas-end {
  --bs-offcanvas-width: min(90vw, 560px);
  width: min(90vw, 560px) !important; /* fallback */
}

/* ===== Contenedor de mensajes ===== */
#messages {
  max-height: 65vh;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Fila de mensaje */
.msg-row {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

/* Usuario (derecha, rosa) */
.msg-row.user { justify-content: flex-end; }
.msg-row.user .bubble {
  background: var(--cai-accent);
  color: #fff;
  border-radius: 1rem 0 1rem 1rem;
}

/* Bot (izquierda, gris claro) */
.msg-row.bot { justify-content: flex-start; }
.msg-row.bot .bubble {
  background: var(--cai-bot-bg);
  color: #000;
  border-radius: 0 1rem 1rem 1rem;
}

/* Burbuja base */
.bubble {
  padding: 0.6rem 0.9rem;
  max-width: 80%;
  font-size: 0.95rem;
  line-height: 1.35;
  word-break: break-word;
}

/* ===== Formulario ===== */
#chatForm { gap: 0.5rem; }

/* Textarea que crece verticalmente */
#chatForm textarea {
  resize: none;
  overflow: hidden;
  width: 100%;
  min-height: 2.5rem;
  max-height: 25vh;
  border: 1px solid var(--cai-gray);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

/* Botón "Enviar" con color primario */
.btn-success {
  background: var(--cai-primary) !important;
  border-color: var(--cai-primary) !important;
  color: #fff;
}
.btn-success:hover { opacity: .9; }

/* ===== Botones rápidos (menú inicial) ===== */
#quickMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.quick-btn {
  flex: 1 1 45%;           /* dos columnas */
  min-width: 120px;
}
.quick-btn.btn {
  border-color: var(--cai-primary);
  color: var(--cai-primary);
  background: #fff;
}
.quick-btn.btn:hover {
  background: var(--cai-primary);
  color: #fff;
}