/* ============================================================
   Dualipa — Chatbot admin del ERP
   ============================================================ */

/* Layout: llena el #page (flex:1 con overflow). Solo el área de
   mensajes scrollea; el composer queda anclado abajo. */
.dua {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--sp-3);
}

.dua__header { flex: 0 0 auto; margin-bottom: 0; }

.dua__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-1);
}

/* ---------- Mensajes / burbujas ---------- */
.dua-msg {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}
.dua-msg--user { justify-content: flex-end; }
.dua-msg--asis { justify-content: flex-start; }

.dua-bubble {
  max-width: 88%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  line-height: 1.6;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
.dua-bubble--user {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--text-hi);
  border-bottom-right-radius: var(--radius-sm);
}
.dua-bubble--asis {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-md);
  border-bottom-left-radius: var(--radius-sm);
}

/* ---------- Línea de "pasos" (tool-use) + punto pulsante ---------- */
.dua-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-lo);
  font-size: 0.82rem;
  font-style: italic;
}
.dua-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: dua-pulse 1.2s infinite ease-in-out;
}
@keyframes dua-pulse {
  0%   { opacity: 0.35; transform: scale(0.8); }
  50%  { opacity: 1;    transform: scale(1); }
  100% { opacity: 0.35; transform: scale(0.8); }
}

.dua-error {
  margin-top: var(--sp-2);
  color: var(--danger);
  background: var(--danger-dim);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.88rem;
}
.dua .text-dim { color: var(--text-dim); }

/* ---------- Markdown dentro de la respuesta ---------- */
.dua-md > *:first-child { margin-top: 0; }
.dua-md > *:last-child { margin-bottom: 0; }
.dua-md p { margin: 0 0 var(--sp-2); }
.dua-md .dua-h { margin: var(--sp-3) 0 var(--sp-2); line-height: 1.3; color: var(--text-hi); font-weight: 650; }
h1.dua-h { font-size: 1.15rem; }
h2.dua-h { font-size: 1.05rem; }
h3.dua-h, h4.dua-h, h5.dua-h, h6.dua-h { font-size: 0.98rem; }
.dua-md strong { color: var(--text-hi); font-weight: 650; }
.dua-list { margin: 0 0 var(--sp-2); padding-left: 1.25rem; display: flex; flex-direction: column; gap: 2px; }
.dua-list li { margin: 0; }
.dua-inline-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.dua-code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--bg-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  overflow-x: auto;
  margin: 0 0 var(--sp-2);
}
.dua-code code { background: none; padding: 0; }
.dua-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-2); }
.dua-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.dua-table th, .dua-table td {
  border: 1px solid var(--border-subtle);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}
.dua-table th { background: var(--bg-3); color: var(--text-hi); font-weight: 600; white-space: nowrap; }
.dua-md a { color: var(--accent); text-decoration: underline; }

/* ---------- Composer ---------- */
.dua__composer {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.dua__composer:focus-within { border-color: var(--accent-border); box-shadow: var(--shadow-glow); }
.dua__input {
  flex: 1 1 auto;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-hi);
  font: inherit;
  line-height: 1.5;
  padding: var(--sp-2);
  max-height: 200px;
  overflow-y: auto;
}
.dua__input::placeholder { color: var(--text-dim); }
.dua__input:disabled { opacity: 0.6; }
.dua__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--grad-accent);
  color: var(--bg-0);
  cursor: pointer;
  transition: filter var(--dur), transform var(--dur);
}
.dua__send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.dua__send:disabled { opacity: 0.5; cursor: not-allowed; }

.dua__disclaimer {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  margin: var(--sp-1) auto 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.7rem;
}

/* ---------- Empty state ---------- */
.dua-empty {
  margin: auto;
  text-align: center;
  max-width: 560px;
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.dua-empty__icon { color: var(--accent); }
.dua-empty__title { font-size: 1.3rem; color: var(--text-hi); margin: var(--sp-2) 0 0; }
.dua-empty__sub { color: var(--text-lo); margin: 0 0 var(--sp-3); }
.dua-empty__chips { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.dua-chip {
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-md);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  transition: border-color var(--dur), background var(--dur), transform var(--dur), color var(--dur);
}
.dua-chip:hover { border-color: var(--accent-border); background: var(--bg-3); color: var(--text-hi); transform: translateY(-1px); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .dua-msg, .dua__composer, .dua__disclaimer { max-width: 100%; }
  .dua-bubble { max-width: 100%; }
}