html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

@media (max-width: 600px) {
    .conversation-list {
        padding: 8px;
    }

    .chat-container {
        height: calc(100vh - 120px);
    }

    button {
        min-height: 44px;
        min-width: 44px;
    }
}

.messages-container {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #e0e0e0;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

/* ==========================================
   ESTILOS PARA LA PANTALLA DE CARGA (BLAZOR WASM)
   ========================================== */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    /* Esto lo baja y lo centra horizontalmente en la pantalla */
    margin: 35vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none; /* ¡CRUCIAL! Esto elimina el fondo negro */
        stroke: #e0e0e0; /* Color del círculo de fondo (gris claro) */
        stroke-width: 0.6rem;
    }

        .loading-progress circle:last-child {
            stroke: #888888; /* Color de la línea que gira (gris oscuro) */
            stroke-dasharray: 3343%;
            stroke-dashoffset: 3343%;
            animation: loading-progress 2s ease-in-out infinite;
        }

.loading-progress-text {
    position: relative;
    text-align: center;
    font-weight: 500;
    color: #888888;
    margin: 0 auto;
    display: block;
}

    .loading-progress-text::after {
        content: "Cargando..."; /* Texto opcional por si index.html no lo muestra */
    }

/* Animación para que el círculo gire */
@keyframes loading-progress {
    0% {
        stroke-dashoffset: 3343%;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -3343%;
    }
}

#writing-robot-loader {
    display: block;
    margin: 0 auto;
}

/* --- Animación 1: El Brazo Escribiendo --- */
.robot-arm-group {
    /* Punto de pivote del brazo (el hombro/base) */
    transform-origin: 135px 65px;
    animation: arm-write 3s ease-in-out infinite;
}

@keyframes arm-write {
    /* Simula un movimiento vigoroso de escritura */
    0%, 100% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-5deg) translate(2px, 0px);
    }
    /* Inicio del trazo */
    30% {
        transform: rotate(3deg) translate(-2px, 1px);
    }
    /* Trazo de escritura */
    45% {
        transform: rotate(-2deg) translate(1px, -1px);
    }
    /* Siguiente inicio */
    60% {
        transform: rotate(4deg) translate(-1px, 2px);
    }
    /* Otro trazo */
    75% {
        transform: rotate(0deg) translate(0px, 0px);
    }
    /* Firma */
    90% {
        transform: rotate(0deg);
    }
    /* Levantar pluma brevemente */
}

/* --- Animación 2: Líneas de Texto Apareciendo --- */
.writing-line {
    /* Ocultar las líneas inicialmente usando stroke-dashoffset */
    stroke-dasharray: 120; /* Longitud total de la línea path M40...h120 */
    stroke-dashoffset: 120;
}

@keyframes draw-line {
    /* Revela la línea secuencialmente */
    to {
        stroke-dashoffset: 0;
    }
}

/* Sincronización de las líneas con el movimiento del brazo */
.line-1 {
    animation: draw-line 3s linear infinite;
    animation-delay: 0.3s;
}

.line-2 {
    animation: draw-line 3s linear infinite;
    animation-delay: 1.0s;
}

.line-3 {
    animation: draw-line 3s linear infinite;
    animation-delay: 1.7s;
}

/* Firma (Círculo) - Largo total es ~63px (2*PI*10) */
.signature {
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: draw-line 0.5s ease-out infinite;
    animation-delay: 2.5s; /* Aparece al final */
}

/* --- Animación 3: Pulso Sutil de los Ojos --- */
.robot-eye {
    animation: eye-pulse 1s ease-in-out infinite alternate;
}

@keyframes eye-pulse {
    from {
        opacity: 1;
        fill: #3182ce;
    }

    to {
        opacity: 0.6;
        fill: #63b3ed;
    }
    /* Un tono más claro y tenue */
}