/* Estilos para los puntos de escritura */
.typing-dot {
    width: 8px;
    height: 8px;
    background-color: #9CA3AF;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.5s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 100% {
        transform: scale(0.7);
        opacity: 0.4;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fondo animado: keyframes del gradiente */
@keyframes gradient {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* Estilos para efectos hover y transiciones suaves */
.agent-card {
    transition: all 0.3s ease;
}

.agent-card:hover {
    transform: translateY(-2px);
}

/* Estilos para el scroll del chat */
#chat-container::-webkit-scrollbar {
    width: 6px;
}

#chat-container::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 3px;
}

#chat-container::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

#chat-container::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Visual fix: ensure yellow agent active state matches others */
.bg-yellow-25 {
  /* Approx. Tailwind yellow-50 */
  background-color: #FFFBEB;
}

/* -----------------------------------------------
   Responsive fix: keep the H2 on a single line on
   very small screens (max-width: 389px)
------------------------------------------------ */
@media (max-width: 389px) {
  /* Título "Select an Agent" */
  #agents-title {
    white-space: nowrap;              /* evita salto de línea */
    /* Escala 1.5x respecto a los valores previos y controla el máximo */
    font-size: clamp(27px, 10.8vw, 36px);
    line-height: 1.15;                /* mantiene proporción vertical */
    letter-spacing: -0.01em;          /* ajuste sutil para compactar */
    max-width: 370px;                 /* nunca exceder 370px de ancho */
    display: block;                   /* permite centrar con margin auto */
    width: fit-content;               /* ancho ajustado al contenido */
    margin-left: auto;                /* centrado horizontal */
    margin-right: auto;               /* centrado horizontal */
  }
}

/* Mejora visual en móviles: botón un poco más grande y con leve separación del marco */
@media (max-width: 389px) {
  #agents-container .btn-theme {
    padding: 0.70rem 1.10rem !important; /* incremento moderado del tamaño */
    margin-right: 4px;  /* separación sutil del borde derecho */
    margin-bottom: 4px; /* separación sutil del borde inferior */
  }
}

/* Garantiza que el texto del botón "Try Me" no haga salto de línea */
.btn-theme {
    white-space: nowrap;
}

/* Estilos para la burbuja emergente móvil-friendly */
.agent-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.agent-popup.show {
    opacity: 1;
    visibility: visible;
}

.agent-popup-content {
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.agent-popup.show .agent-popup-content {
    transform: scale(1) translateY(0);
}

.agent-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.agent-popup-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.agent-popup-close i {
    font-size: 16px;
    color: #666;
}

.agent-popup-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.agent-popup-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.agent-popup-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

.agent-popup-body {
    padding: 24px;
}

.agent-popup-description {
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 24px;
}

.agent-popup-description strong {
    color: #1f2937;
    font-weight: 600;
}

.agent-popup-actions {
    text-align: center;
}

.agent-popup-start-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.agent-popup-start-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.agent-popup-start-btn:active {
    transform: translateY(0);
}

/* Responsive para móviles */
@media (max-width: 640px) {
    .agent-popup {
        padding: 16px;
        align-items: flex-end;
    }
    
    .agent-popup-content {
        border-radius: 24px 24px 0 0;
        max-height: 80vh;
        width: 100%;
        margin-bottom: 0;
        transform: translateY(100%);
    }
    
    .agent-popup.show .agent-popup-content {
        transform: translateY(0);
    }
    
    .agent-popup-header {
        padding: 20px 20px 16px;
    }
    
    .agent-popup-body {
        padding: 20px;
    }
    
    .agent-popup-title {
        font-size: 22px;
    }
}   /* no permite el salto de línea */
  width: auto !important;  /* evita que w-full fuerce ancho de columna */
}

/* Unificar estructura visual de las tarjetas: botón a ancho completo arriba de la lista */
#agents-container .glass .grid.items-center {
  grid-template-columns: 1fr !important; /* 1 columna para forzar misma estructura */
  align-items: stretch;
}

/* Hacer que el contenedor del botón ocupe toda la fila y vaya primero */
#agents-container .glass .grid.items-center > .col-span-1 {
  order: -1;                 /* aparece antes de la lista */
  grid-column: 1 / -1;       /* toma todo el ancho */
  justify-self: stretch;
}

/* La lista de features también ocupa todo el ancho */
#agents-container .glass .grid.items-center > .col-span-2 {
  grid-column: 1 / -1;
}

/* Estilo del botón como banda completa (píldora) y centrado */
#agents-container .glass .btn-theme {
  display: block;
  width: 100% !important;            /* más específico que la regla previa (auto) */
  text-align: center;
  border-radius: 9999px;              /* forma de píldora */
  padding: 0.9rem 1.25rem;            /* tamaño consistente en todas las tarjetas */
}

/* Forzar estado en dos líneas: "Online •" arriba y "Responds Instantly" abajo */
.status-line { display: inline-flex; flex-direction: column; }
.status-line .status-top { display: block; }
.status-line .status-bottom { display: block; }

/* Asegurar que todo el contenido del chat sea visible sin overflow */
.chat-ring-theme > .bg-white {
  display: flex;
  flex-direction: column;
  /* deja margen de respiración respecto al viewport */
  max-height: calc(100vh - 56px);
}

/* En pantallas medianas y grandes, un poco más de respiración */
@media (min-width: 768px) {
  .chat-ring-theme > .bg-white {
    max-height: calc(100vh - 96px);
  }
}

/* El área de mensajes debe ser flexible y desplazable */
#chat-container {
  flex: 1 1 auto;
  min-height: 0;                 /* permite que el flex hijo pueda encogerse */
  overflow-y: auto;
  height: auto !important;       /* anula h-96/md:h-[500px] sin tocar HTML */
  max-height: none !important;
}

/* --- Restauración: tamaño original del cuadro de chat --- */
.chat-ring-theme > .bg-white {
  display: block;          /* volver al flujo original */
  max-height: none;        /* sin límite por viewport */
}

/* Altura original del área de mensajes */
#chat-container {
  flex: initial;           /* no forzar crecimiento */
  height: 24rem !important;/* Tailwind h-96 */
  max-height: none !important;
}

@media (min-width: 768px) {
  #chat-container {
    height: 500px !important; /* Tailwind md:h-[500px] */
  }
}

/* Ancho +10px por lado para cuadro de diálogo y tarjetas (ajuste +5px adicional) */
/* Revertir ancho del cuadro de diálogo a dimensiones originales */
.chat-ring-theme {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Revertir ancho de tarjetas a dimensiones originales */
#agents-container .glass {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Ensanchar exactamente +10px total (5px por lado) a las secciones centradas,
   sin mover su posición central ni alterar el resto del layout */
/* ========================================
   CONFIGURACIÓN AVANZADA DE SPANS - CAPA SUPERIOR
   ======================================== */

/* 1. SPANS DEL TÍTULO PRINCIPAL - Capa superior con z-index alto */
h1 span {
  position: relative;
  z-index: 1000;           /* Capa muy superior */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sombra para destacar */
  transform: translateZ(0); /* Forzar aceleración de hardware */
}

/* Span específico del primer título */
h1 span:first-child {
  z-index: 1001;           /* Aún más al frente */
}

/* Span específico del segundo título con gradiente */
h1 span:last-child {
  z-index: 1002;           /* El más al frente */
  filter: brightness(1.1); /* Brillo aumentado */
}

/* 2. SPANS DEL PÁRRAFO DESCRIPTIVO - Capa superior */
.text-center > p.text-left > span {
  position: relative;
  z-index: 900;            /* Capa superior */
  line-height: 1.5;        /* Mejor espaciado entre líneas */
  display: inline-block;   /* Control total del espaciado */
  font-size: 1.15em;       /* Incremento del tamaño */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Sombra sutil */
  transform: translateZ(0); /* Aceleración de hardware */
}

/* Span específico del título "AI Agents in Action" */
.text-center > p.text-left > span.font-bold:first-of-type {
  display: block;           /* Permite centrar el texto */
  font-size: 1.4em;        /* Tamaño prominente */
  margin-top: 8px;          
  margin-bottom: 6px;       /* Margen inferior aumentado */
  text-align: center;       
  font-weight: 800;         /* Peso de fuente más fuerte */
  z-index: 950;             /* Capa muy superior */
  text-shadow: 0 2px 4px rgba(0,0,0,0.25); /* Sombra más pronunciada */
  letter-spacing: 0.5px;    /* Espaciado entre letras */
}

/* 3. SPANS DEL CHAT STATUS - Capa superior */
.status-line span {
  position: relative;
  z-index: 800;            /* Capa superior */
  font-size: 1.1em;        /* Tamaño incrementado */
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Sombra sutil */
  transform: translateZ(0); /* Aceleración de hardware */
}

/* 4. CONFIGURACIÓN GLOBAL PARA TODOS LOS SPANS */
span {
  position: relative;       /* Permite z-index */
  z-index: 100;            /* Z-index base para todos los spans */
  backface-visibility: hidden; /* Optimización de renderizado */
}

/* 5. SPANS EN ELEMENTOS DINÁMICOS (JavaScript) */
.agent-card span,
#chat-container span {
  position: relative;
  z-index: 700;            /* Capa superior para elementos dinámicos */
  font-size: 1.05em;       /* Ligero incremento */
  text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* Sombra muy sutil */
}

/* ========================================
   ESTILOS ANTERIORES MANTENIDOS
   ======================================== */

main > section.mx-auto.w-full.max-w-3xl {
  margin-left: -5px;
  margin-right: -5px;
}

/* Evitar acumulación (div dentro de div, span dentro de div/span) */
div div, span span, div span { 
  font-size: 1em; 
  line-height: inherit; 
}

/* Centrar el texto del párrafo bajo el título en móviles (hasta tablets pequeñas) */
@media (max-width: 768px) {
  .text-center > p.text-left {
    text-align: center !important;    /* centra el contenido del párrafo */
    margin-left: auto;                 /* asegura centrado del bloque si aplica */
    margin-right: auto;
  }
  .text-center > p.text-left span {
    display: inline-block;             /* permite centrar cada línea/emoji */
    text-align: center;
  }
}