/* bot.css — la pantalla del asistente (deca.digitaldocu.es/bot), 30-09-2026.
   Aparte de index.css, como inspeccion.css, para no chocar con las otras ramas que
   tocan index.css. Solo con los tokens de index.css (--primary, --border-color…). */

#tab-bot .bot-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#tab-bot .bot-cabecera p { max-width: 640px; }

#tab-bot .bot-ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 0; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--border-color); background: #fff;
  color: var(--text-main); cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#tab-bot .bot-ibtn:hover { background: var(--primary-glow); border-color: var(--border-color-active); }
#tab-bot .bot-ibtn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
#tab-bot .bot-ibtn[disabled] { opacity: 0.45; cursor: default; }
#tab-bot .bot-ibtn .material-symbols-outlined { font-size: 1.15rem; }

#bot-raiz .bot-marco {
  max-width: 860px; min-height: 60vh; display: flex; flex-direction: column; gap: 12px;
}

#bot-raiz .bot-aviso-capa {
  align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: var(--primary-glow); border: 1px solid var(--border-color);
  color: var(--text-main); font-size: 0.85rem;
}
#bot-raiz .bot-aviso-ico { color: var(--primary); display: inline-flex; }

#bot-raiz .bot-hilo { flex: 1; display: flex; flex-direction: column; gap: 12px; }

#bot-raiz .bot-vacio { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
#bot-raiz .bot-sug {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-color);
  background: #fff; color: var(--text-main); font-size: 0.85rem; cursor: pointer; text-align: left;
}
#bot-raiz .bot-sug:hover { border-color: var(--border-color-active); background: var(--primary-glow); }

#bot-raiz .bot-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.5;
  overflow-wrap: anywhere; box-shadow: var(--shadow-sm);
  /* (30-09-2026, revisión) bot.js desplaza el hilo hasta cada mensaje nuevo: que no
     quede debajo de la franja de arriba (fija en móvil: --deca-barra, que mide index.js)
     ni de la caja de escribir, que va pegada abajo (~70 px más la zona segura). */
  scroll-margin-top: calc(var(--deca-barra, 0px) + env(safe-area-inset-top, 0px) + 8px);
  scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
#bot-raiz .bot-msg p { margin: 0 0 6px; }
#bot-raiz .bot-msg p:last-child { margin-bottom: 0; }
#bot-raiz .bot-msg ul, #bot-raiz .bot-msg ol { margin: 4px 0 6px 20px; }
#bot-raiz .bot-usuario {
  align-self: flex-end; background: var(--primary); color: var(--text-inverse);
  border-bottom-right-radius: 4px;
}
#bot-raiz .bot-asistente {
  align-self: flex-start; background: #fff; color: var(--text-main);
  border: 1px solid var(--border-color); border-bottom-left-radius: 4px;
}
#bot-raiz .bot-esperando, #bot-raiz .bot-error { display: flex; align-items: center; gap: 8px; }
#bot-raiz .bot-esperando { color: var(--text-muted); }
#bot-raiz .bot-esperando-ico, #bot-raiz .bot-error-ico { display: inline-flex; }
#bot-raiz .bot-error { border-color: var(--error); }
#bot-raiz .bot-error-ico { color: var(--error); }
#bot-raiz .bot-error-t { flex: 1; }

#bot-raiz .bot-fuentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
#bot-raiz .bot-fuentes-t { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
#bot-raiz .bot-fuente {
  font-size: 0.72rem; color: var(--text-muted); background: var(--bg-dark);
  border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 8px;
}
#bot-raiz .bot-acciones { display: flex; gap: 6px; margin-top: 8px; }

/* La caja, pegada abajo del panel: en un móvil se escribe sin perder el hilo. */
#bot-raiz .bot-caja {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-dark);
}
#bot-raiz .bot-texto {
  flex: 1; min-width: 0; resize: none; max-height: 180px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--border-color); background: #fff;
  color: var(--text-main); font-size: 0.92rem; line-height: 1.4; outline: none;
}
#bot-raiz .bot-texto:focus { border-color: var(--border-color-active); box-shadow: 0 0 0 3px var(--primary-glow); }
#bot-raiz .bot-contador { font-size: 0.72rem; color: var(--text-muted); align-self: center; white-space: nowrap; }
/* Enviar es la acción principal de la pantalla: en el color de acento. */
#bot-raiz .bot-enviar { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
#bot-raiz .bot-enviar:hover { background: var(--accent-purple); border-color: var(--accent-purple); }

#bot-raiz .bot-quedan { margin: 0; font-size: 0.8rem; color: var(--warning); }
#bot-raiz .bot-pie { margin: 0; font-size: 0.75rem; color: var(--text-muted); }

@media (max-width: 560px) {
  #bot-raiz .bot-msg { max-width: 100%; }
  #tab-bot .bot-cabecera { gap: 8px; }
}
/* (30-09-2026, revisión) 16px: con menos, iOS amplía la página al enfocar la caja y no
   la devuelve (la misma regla que .tpl-buscar en index.css). En cualquier pantalla
   táctil, no solo en las estrechas: un iPhone en horizontal también la ampliaba. */
@media (max-width: 600px), (pointer: coarse) {
  #bot-raiz .bot-texto { font-size: 16px; }
}