/* ==========================================================================
   ZeroChat Base Styles - Reseteo, Normalización, Animaciones y Accesibilidad
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

html, body {
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: -webkit-fill-available;
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: row;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  width: 100%;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   Accesibilidad de Foco (WCAG 2.1 AA)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
}

.chat-textarea,
.chat-textarea:focus,
.chat-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================================
   Barras de Desplazamiento (Scrollbars) Sutiles
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ==========================================================================
   Animaciones del Sistema
   ========================================================================== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* slideUpFadeIn: solo se aplica a mensajes nuevos via .is-new-message (nunca al historial) */
@keyframes slideUpFadeIn {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* typingBounce: para el indicador de escritura del asistente */
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(1);   opacity: 0.4; }
  40%           { transform: scale(1.3); opacity: 1; }
}

/* pulseStop: mantener para btn-stop-stream */


/* La interfaz responde inmediatamente: no se aplican animaciones ni transiciones. */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   Utilidades de Accesibilidad (WCAG 2.1 AA)
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Fundación UI y Consolidación de Clases Base
   ========================================================================== */
.btn-primary,
.btn-secondary,
.btn-close,
.btn-attach,
.btn-send,
.btn-stop-stream,
.btn-reasoning,
.btn-query-server,
.btn-profile-action,
.btn-mcp-action,
.btn-debug-action,
.btn-danger-outline,
.modal-btn-action,
.modal-btn-close,
.export-card-btn {
  font-family: inherit;
  cursor: pointer;
}

.btn-primary,
.btn-secondary,
.btn-close,
.btn-query-server,
.btn-profile-action,
.btn-mcp-action,
.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.15s ease;
}

.chat-chart-card,
.inspector-intro-card,
.setting-toggle-card,
.connection-active-card,
.rag-branch-details-card,
.rag-active-tip-card,
.mcp-status-card,
.mcp-config-card,
.mcp-instructions-card,
.mcp-tool-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.chat-chart-card,
.inspector-intro-card,
.mcp-status-card,
.mcp-config-card,
.mcp-instructions-card {
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}