/* ========================================
   🌊 STREAMING EFFECTS
   ======================================== */

/* Cursor parpadeante para mensajes en streaming */
.message-content.streaming::after {
    content: '▊';
    color: var(--premium-accent);
    animation: blink 1s infinite;
    margin-left: 2px;
    font-weight: bold;
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* Efecto de "escribiendo" más sutil */
.message.ai.streaming .message-content {
    background: rgba(66, 99, 235, 0.06);
    border-left-color: var(--premium-accent);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(13, 0, 158, 0.06);
    }

    50% {
        box-shadow: 0 2px 12px rgba(13, 0, 158, 0.12);
    }
}

/* Animación de entrada suave para el primer chunk */
.message.ai.streaming {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optimización para renderizado de markdown durante streaming */
.message-content.streaming code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.message-content.streaming pre {
    background: rgba(0, 0, 0, 0.15);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.message-content.streaming strong {
    font-weight: 700;
    color: var(--premium-accent);
}

.message-content.streaming em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* Indicador de "pensando" mejorado */
.typing-indicator.thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(66, 99, 235, 0.04);
    border-radius: 12px;
    border-left: 3px solid var(--premium-accent);
}

.typing-indicator.thinking::before {
    content: '🤔';
    font-size: 1.2rem;
    animation: bounce 1.5s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Smooth scroll durante streaming */
#messagesContainer.streaming-active {
    scroll-behavior: smooth;
}