* { /* selector universal: afecta a todos los elementos */
    margin: 0; /* elimina margen por defecto */
    padding: 0; /* elimina padding por defecto */
    box-sizing: border-box; /* incluye padding y borde dentro del tamaño total */
}

body { /* estilos generales del cuerpo de la página */
    background: #030920; /* color de fondo azul oscuro */
    font-family: 'Segoe UI', sans-serif; /* fuente principal */
    color: #e2e8f0; /* color de texto gris claro */
    overflow: hidden; /* evita scroll en toda la página */
}

/* HEADER */
header { /* barra superior fija visualmente */
    height: 60px; /* altura del header */
    background: rgba(0,0,0,0.35); /* fondo negro semitransparente */
    backdrop-filter: blur(8px); /* desenfoque del fondo (efecto vidrio) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.223); /* línea inferior suave */
    display: flex; /* usa flexbox para alinear contenido */
    align-items: center; /* centra verticalmente los elementos */
    justify-content: space-between; /* separa elementos a los extremos */
    padding: 0 10px; /* espacio horizontal interno */;
}

.header-buttons { /* contenedor de botones del header */
    display: flex; /* organiza botones en fila */
    gap: 6px; /* espacio entre botones */
}

.logo { /* estilo del texto del logo */
    font-size: 20px; /* tamaño de fuente */
    font-weight: bold; /* negrita */
    color: #38bdf8; /* color azul brillante */
    animation: neonPulse 2.8s infinite ease-in-out;  /* animación de pulso neón */
}

@keyframes neonPulse {   /* animación de pulso neón */
    0% { text-shadow: 0 0 6px #38bdf8; }    /* sombra inicial */
    50% { text-shadow: 0 0 14px #38bdf8; }   /* sombra intermedia */
    100% { text-shadow: 0 0 6px #38bdf8; }   /* sombra final */
}

/* CHAT */
#chat { /* contenedor donde aparecen los mensajes */
    position: absolute; /* se posiciona respecto al body */
    top: 60px; /* empieza justo debajo del header */
    bottom: 80px; /* termina justo encima del input */
    left: 0; /* alineado al borde izquierdo */
    right: 0; /* alineado al borde derecho */
    overflow-y: auto; /* permite scroll vertical */
    padding: 10px; /* espacio interno */
    display: -webkit-inline-flex; /* organiza mensajes en columna */
    flex-direction: column; /* apila mensajes verticalmente */
    gap: 25px; /* espacio entre mensajes */
    animation: floatChat 6s ease-in-out infinite; /* animación de flotación suave para todo el chat */
}

@keyframes floatChat {   /* animación de flotación suave para todo el chat */
    0% { transform: translateY(0px); }     /* el chat comienza en su posición normal */
    50% { transform: translateY(-5px); }    /* en el punto medio de la animación, el chat se eleva ligeramente para crear un efecto de flotación suave */
    100% { transform: translateY(0px); }    /* el chat vuelve a su posición normal al final de la animación */
}

/* MENSAJES */
.msg { /* estilo base de todos los mensajes */
     white-space: pre-wrap; /* permite saltos de línea y respeta espacios */
     max-width: 90%; /* ancho máximo del mensaje para evitar que ocupe toda la  pantalla */
     line-height: 1.8; /* espacio entre líneas para mejorar legibilidad */
     font-size: 16px; /* tamaño de texto */
    padding: 12px 18px; /* espacio interno */
    margin: 7px 0; /* elimina margen por defecto */
    border-radius: 18px; /* bordes redondeados */
    hyphens: auto; /* permite dividir palabras largas con guiones para evitar desbordamientos */
    font-display: swap; /* mejora la carga de fuentes personalizadas */
    text-shadow: 0 0 2px rgb(16, 145, 219); /* sombra de texto sutil para mejorar la legibilidad */
    transition: all 8.3s ease; /* animación suave para cambios de estilo */
    transform: scale(1.05); /* ligero aumento de tamaño para un efecto de presencia más fuerte */
    hover { /* efecto hover para mensajes */
        transform: scale(1.08); /* aumenta ligeramente el tamaño al pasar el mouse */
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.6); /* agrega un glow azul alrededor del mensaje */
    }
}

#fondoMenu { /* fondo del menú de opciones (el que bloquea la pantalla) */
    position: fixed;
    bottom: 120px; /* lo posiciona justo encima del input */
    right: 20px; /* lo alinea a la derecha con un margen */
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    padding: 15px; /* espacio interno */
    border-radius: 12px; /* bordes redondeados */
    display: none;
    z-index: 99999;

    pointer-events: none; /* ← NO bloquea clics cuando está oculto */
}

#fondoMenu.show {
    display: block; /* muestra el menú cuando se agrega la clase "show" */
    pointer-events: auto; /* ← SOLO bloquea clics cuando está visible */
}


.msg.user {  /* mensaje del usuario */
    background: #1e3b8a7b;  /* fondo azul */
    border-right: 3px solid #8e9a9f;    /* línea gris a la derecha */
    align-self: flex-end;       /* se alinea a la derecha */
    position: relative;     /* necesario para posicionar el indicador de escritura dentro del mensaje */
    overflow: clip;     /* para que el efecto de aparición no se salga del contenedor */
    animation: userPulse 1.4s ease-in-out;  /* animación de pulso para el mensaje del usuario */
}

@keyframes userPulse {      /* animación de pulso para el mensaje del usuario */
    0% { transform: scale(1); }     /* el mensaje comienza a su tamaño normal */
    50% { transform: scale(1.02); }     /* en el punto medio de la animación, el mensaje se agranda ligeramente para crear un efecto de pulso suave */
    100% { transform: scale(1); }     /* el mensaje se agranda ligeramente en el punto medio de la animación para crear un efecto de pulso suave */
}

.msg.user::before { /* efecto de brillo que recorre el mensaje de izquierda a derecha */
    content: "";    /* elemento vacío que se posiciona sobre el mensaje */
    position: absolute;     /* se posiciona respecto al mensaje */
    top: 0;     /* empieza en la parte superior del mensaje */
    right: -100%;   /* empieza completamente a la derecha, fuera del mensaje */
    width: 30%;    /* ancho del efecto igual al del mensaje para cubrirlo completamente */
    height: 100%;   /* cubre todo el mensaje */
    background: linear-gradient(120deg, transparent, rgba(39, 108, 138, 0.338), transparent);/* gradiente para el efecto de brillo */
    animation: userShine 3.8s infinite;     /* animación que recorre el mensaje de izquierda a derecha */
}

@keyframes userShine {     /* animación de brillo para el mensaje del usuario */
    0% { right: -100%; }     /* empieza completamente a la izquierda, fuera del mensaje */
    50% { right: 100%; }     /* en el punto medio, el brillo está completamente dentro del mensaje */
    100% { right: 100%; }    /* termina completamente a la derecha, fuera del mensaje */
}


.msg.jarvis {   /* mensaje de Jarvis */
    background: #0f172a;    /* fondo azul muy oscuro */
    border-left: 3px solid #389bc6;     /* línea azul a la izquierda */
    align-self: flex-start;     /* se alinea a la izquierda */
    position: relative;  /* necesario para posicionar el indicador de escritura dentro del mensaje */
    overflow: clip;      /* para que el efecto de aparición no se salga del contenedor */
    animation: typingGlow 0.8s ease-in-out;  /* animación de brillo para el mensaje de Jarvis */
}

@keyframes typingGlow {
    0% { text-shadow: 0 0 4px #38bdf8; }
    100% { text-shadow: 0 0 0px transparent; }
}

.msg.jarvis::before {   /* efecto de brillo que recorre el mensaje de izquierda a derecha */
    content: "";    /* elemento vacío que se posiciona sobre el mensaje */
    position: absolute; /* se posiciona respecto al mensaje */
    top: 0;     /* empieza en la parte superior del mensaje */
    left: -100%;    /* empieza completamente a la izquierda, fuera del mensaje */
    width: 100%;    /* ancho del efecto igual al del mensaje para cubrirlo completamente */
    height: 100%;   /* cubre todo el mensaje */
    background: linear-gradient(70deg, transparent, rgba(56,189,248,0.25), transparent);
    animation: jarvisShine 4.9s infinite;   /* animación que recorre el mensaje de izquierda a derecha */
    pointer-events: none;   /* para que el brillo no interfiera con la interacción del mensaje */
}

@keyframes jarvisShine {
    0% { left: -100%; }     /* empieza completamente a la izquierda, fuera del mensaje */
    50% { left: 100%; }     /* en el punto medio, el brillo está completamente dentro del mensaje */
    100% { left: 100%; }    /* termina completamente a la derecha, fuera del mensaje */
}


/* ================================
   TYPING INDICATOR — JARVIS FUTURISTA
   ================================ */
#typingIndicator {
    white-space: nowrap; /* ← BLOQUEA que el texto se parta en varias líneas */
    position: fixed; /* mantiene el indicador fijo en pantalla aunque el teclado suba/baje */
    bottom: 85px; /* lo coloca justo encima del input */
    left: 50%; /* lo posiciona en el centro horizontal */
    transform: translateX(-50%); /* corrige el centrado perfecto restando la mitad del ancho */
    display: none; /* oculto por defecto hasta que Jarvis escriba */
    
    padding: 6px 20px; /* espacio interno para que el cuadro respire */
    background: rgba(0, 20, 40, 0.55); /* fondo azul oscuro semitransparente estilo holograma */
    backdrop-filter: blur(12px); /* efecto vidrio futurista con desenfoque */
    border-radius: 14px; /* bordes redondeados suaves */
    border: 1px solid rgba(56, 189, 248, 0.3); /* borde azul neón suave */
    
    color: #38bdf8; /* texto azul Jarvis */
    font-size: 13px; /* tamaño del texto */
    font-weight: 100; /* grosor medio del texto */
    
    display: inline-flex; /* organiza texto + puntos en fila */
    align-items: center; /* centra verticalmente los elementos */
    gap: 12px; /* espacio entre el texto y los puntos animados */
    
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.25); /* glow azul suave alrededor */
    animation: jarvisGlow 2.2s infinite ease-in-out; /* animación de respiración del glow */
    z-index: 9999; /* asegura que esté encima de todo */
}

/* ANIMACIÓN DE RESPIRACIÓN (GLOW) */
@keyframes jarvisGlow {
    0% { box-shadow: 0 0 10px rgba(56, 189, 248, 0.15); } /* glow suave inicial */
    50% { box-shadow: 0 0 22px rgba(56, 189, 248, 0.45); } /* glow fuerte en el centro */
    100% { box-shadow: 0 0 10px rgba(56, 189, 248, 0.15); } /* vuelve al glow suave */
}

/* CONTENEDOR DE LOS PUNTOS */
.dots {
    display: flex; /* organiza los puntos en fila */
    gap: 6px; /* espacio entre cada punto */
}

/* CADA PUNTO — ANIMACIÓN BRUTAL */
.dots span {
    width: 6px; /* ancho del punto */
    height: 6px; /* alto del punto */
    background: #38bdf8; /* color azul neón */
    border-radius: 50%; /* forma circular perfecta */
    display: inline-block; /* se comporta como elemento en línea con tamaño */
    
    animation: jarvisBounce 1.2s infinite ease-in-out; /* animación de rebote */
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); /* glow azul alrededor del punto */
}

/* RETARDOS PARA EFECTO SECUENCIAL */
.dots span:nth-child(1) { animation-delay: 0s; } /* primer punto empieza sin retraso */
.dots span:nth-child(2) { animation-delay: 0.2s; } /* segundo punto empieza después */
.dots span:nth-child(3) { animation-delay: 0.4s; } /* tercer punto empieza más tarde */

/* ANIMACIÓN DE REBOTE */
@keyframes jarvisBounce {
    0% { transform: translateY(0); opacity: 0.4; } /* punto abajo y tenue */
    30% { transform: translateY(-8px); opacity: 1; } /* punto sube y brilla */
    60% { transform: translateY(0); opacity: 0.4; } /* vuelve abajo y tenue */
    100% { transform: translateY(0); opacity: 0.4; } /* mantiene la posición final */
}


/* INPUT */
#inputArea { /* contenedor del input + botón */
    position: fixed; /* SE MANTIENE FIJO EN LA PANTALLA (CLAVE PARA IPHONE) */
    bottom: 0; /* pegado al borde inferior */
    left: 0; /* alineado a la izquierda */
    right: 0; /* alineado a la derecha */
    padding: 14px; /* espacio interno */
    background: rgba(0,0,0,0.35); /* fondo semitransparente */
    display: flex; /* organiza input y botón en fila */
    gap: 10px; /* espacio entre input y botón */
}

#input { /* campo de texto */
    flex: 1; /* ocupa todo el espacio disponible */
    padding: 12px; /* espacio interno */
    border-radius: 10px; /* bordes redondeados */
    border: none; /* sin borde */
    background: #0f172a; /* fondo azul oscuro */
    color: white; /* texto blanco */
    font-size: 16px; /* tamaño de texto (evita zoom en iPhone) */
}

#inputArea button { /* botón de enviar */
    padding: 12px 18px; /* espacio interno */
    width: 100px; /* ancho fijo */
    height: 5dvh; /* altura relativa al viewport dinámico */
    background: #167ca8; /* color azul brillante */
    border: none; /* sin borde */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* sombra suave */
    hover { /* ❌ esto no es CSS válido, pero lo dejo porque pediste NO modificar nada */
        box-shadow: 0 6px 8px rgba(0,0,0,0.15); /* sombra más fuerte en hover */
    }
    transition: all 0.10s ease; /* animación suave */
    border-radius: 10px; /* bordes redondeados */
    cursor: pointer; /* cursor de mano */
    color: #0f172a; /* texto azul oscuro */
    font-weight: bold; /* texto en negrita */
}

#fondoMenu {
    pointer-events: none;
}

#fondoMenu.show {
    pointer-events: auto;
}

/* ANIMACIÓN DE ENTRADA DE MENSAJES */
@keyframes msgAppear {
    0% {
        opacity: 2;/* completamente invisible al inicio de la animación */
        transform: translateY(10px) scale(0.50);/* empieza un poco abajo y más pequeño */
    }
    100% {
        opacity: 1; /* completamente visible al final de la animación */
        transform: translateY(0) scale(1);/* vuelve a su posición original y tamaño normal */
    }
}

.msg {
    animation: msgAppear 1s ease forwards;/* aplica la animación de aparición a cada mensaje */
}