/* Realistic typing effect styles */

.typing-container {
    position: relative;
    display: inline-block;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: currentColor;
    margin-left: 2px;
    animation: blink 1s infinite;
    vertical-align: baseline;
}

.typing-text {
    display: inline-block;
    position: relative;
}

/* Cursor blink animation - slower, more natural */
@keyframes blink {
    0%, 45% {
        opacity: 1;
    }
    46%, 100% {
        opacity: 0.3;
    }
}

/* Subtle text reveal animation */
.typing-text::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: currentColor;
    animation: textCursor 0.8s ease-in-out infinite;
}

@keyframes textCursor {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Word-based typing speed variations */
.typing-word-fast {
    --word-speed: 0.7;
}

.typing-word-normal {
    --word-speed: 1;
}

.typing-word-slow {
    --word-speed: 1.5;
}

/* Thinking pause indicator */
.typing-pause {
    position: relative;
}

.typing-pause::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: rgba(42, 92, 130, 0.6);
    margin-left: 3px;
    animation: pausePulse 1s ease-in-out infinite;
}

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

/* Smooth character appearance */
.typing-char {
    opacity: 0;
    animation: charAppear 0.12s ease-out forwards;
}

@keyframes charAppear {
    from {
        opacity: 0;
        transform: translateY(1px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Error highlight effect - before deletion */
.typing-error-highlight {
    background-color: rgba(255, 107, 107, 0.4);
    color: #ffffff;
    border-radius: 2px;
    padding: 0 1px;
    animation: errorHighlight 0.2s ease-in-out;
}

@keyframes errorHighlight {
    0% {
        background-color: rgba(255, 107, 107, 0.2);
    }
    50% {
        background-color: rgba(255, 107, 107, 0.6);
        transform: scale(1.05);
    }
    100% {
        background-color: rgba(255, 107, 107, 0.4);
        transform: scale(1);
    }
}

/* General error styling */
.typing-error {
    background-color: rgba(255, 107, 107, 0.15);
    border-radius: 2px;
    animation: errorPulse 0.3s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% {
        background-color: rgba(255, 107, 107, 0.15);
    }
    50% {
        background-color: rgba(255, 107, 107, 0.25);
    }
}

/* Enhanced backspace effect - more visible */
.typing-backspace {
    background-color: rgba(255, 107, 107, 0.6);
    color: #ffffff;
    animation: charBackspace 0.2s ease-out forwards;
    border-radius: 3px;
    padding: 1px 2px;
    border: 1px solid rgba(255, 107, 107, 0.8);
}

@keyframes charBackspace {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        background-color: rgba(255, 107, 107, 0.6);
        border-color: rgba(255, 107, 107, 0.8);
    }
    25% {
        opacity: 0.9;
        transform: translateY(-1px) scale(1.15);
        background-color: rgba(255, 80, 80, 0.7);
        border-color: rgba(255, 80, 80, 0.9);
    }
    75% {
        opacity: 0.4;
        transform: translateY(-2px) scale(0.9);
        background-color: rgba(255, 107, 107, 0.3);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.7);
        background-color: rgba(255, 107, 107, 0.1);
    }
}

/* Thinking pause indicator */
.typing-thinking::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    margin-left: 4px;
    animation: thinkingPulse 0.6s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .typing-cursor {
        width: 1px;
        margin-left: 1px;
    }
    
    .typing-text::after {
        width: 1px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .typing-cursor,
    .typing-text::after {
        background-color: currentColor;
        opacity: 1;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .typing-cursor,
    .typing-text::after,
    .typing-thinking::after {
        animation: none;
    }
    
    .typing-char {
        animation: none;
        opacity: 1;
    }
}