/**
 * BPPRD Typing Animation CSS - Refactored & Optimized
 * 
 * CSS yang dioptimalkan untuk interval 500ms dan transisi smooth
 */

/* ===================================
   CSS VARIABLES & CUSTOM PROPERTIES
   =================================== */
:root {
    /* Colors */
    --typing-bg-primary: #f8f9fa;
    --typing-bg-secondary: #e9ecef;
    --typing-bg-success: #d4edda;
    --typing-bg-dark: #2d3748;
    --typing-bg-dark-secondary: #1a202c;
    
    --typing-border-primary: #007bff;
    --typing-border-secondary: #dee2e6;
    --typing-border-success: #28a745;
    --typing-border-dark: #4a5568;
    --typing-border-dark-success: #48bb78;
    
    --typing-text-primary: #495057;
    --typing-text-success: #155724;
    --typing-text-dark: #e2e8f0;
    --typing-text-dark-success: #9ae6b4;
    
    --typing-cursor-color: #007bff;
    --typing-cursor-color-dark: #4299e1;
    
    /* Spacing */
    --typing-spacing-xs: 8px;
    --typing-spacing-sm: 10px;
    --typing-spacing-md: 12px;
    --typing-spacing-lg: 16px;
    --typing-spacing-xl: 20px;
    
    /* Border Radius */
    --typing-radius-sm: 12px;
    --typing-radius-md: 14px;
    --typing-radius-lg: 16px;
    
    /* Shadows */
    --typing-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --typing-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --typing-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --typing-transition-fast: 0.15s;
    --typing-transition-normal: 0.3s;
    --typing-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Typography */
    --typing-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --typing-font-size-sm: 13px;
    --typing-font-size-base: 14px;
    --typing-font-size-lg: 15px;
    --typing-line-height: 20px;
}

/* ===================================
   BASE TYPING INDICATOR STYLES
   =================================== */
.typing-indicator.simple {
    display: flex;
    align-items: center;
    margin: var(--typing-spacing-sm) 0;
    padding: var(--typing-spacing-md) var(--typing-spacing-lg);
    background: var(--typing-bg-primary);
    border-radius: var(--typing-radius-sm);
    border-left: 4px solid var(--typing-border-primary);
    box-shadow: var(--typing-shadow-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--typing-transition-fast) var(--typing-easing);
    max-width: 80%;
    margin-left: 0;
    will-change: opacity, transform;
}

/* ===================================
   TYPING INDICATOR STATES
   =================================== */
.typing-indicator.simple.active {
    opacity: 1;
    transform: translateY(0);
}

.typing-indicator.simple.completed {
    background: var(--typing-bg-success);
    border-left-color: var(--typing-border-success);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

.typing-indicator.simple.hiding {
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

/* ===================================
   TYPING CONTENT STRUCTURE
   =================================== */
.typing-content {
    display: flex;
    align-items: center;
    gap: var(--typing-spacing-xs);
    font-family: var(--typing-font-family);
    font-size: var(--typing-font-size-base);
    color: var(--typing-text-primary);
    width: 100%;
}

.typing-message {
    display: flex;
    align-items: center;
    gap: var(--typing-spacing-xs);
}

.typing-text {
    min-height: var(--typing-line-height);
    line-height: var(--typing-line-height);
    font-weight: 500;
    transition: 
        opacity var(--typing-transition-fast) var(--typing-easing),
        color var(--typing-transition-fast) var(--typing-easing),
        all var(--typing-transition-fast) var(--typing-easing);
    will-change: opacity, color, transform;
}

.typing-cursor {
    font-weight: bold;
    color: var(--typing-cursor-color);
    animation: blink 0.5s infinite;
    opacity: 1;
    transition: opacity var(--typing-transition-fast) var(--typing-easing);
    will-change: opacity;
}

/* ===================================
   ENHANCED STYLING
   =================================== */
.typing-indicator.simple.enhanced {
    background: linear-gradient(135deg, var(--typing-bg-primary) 0%, var(--typing-bg-secondary) 100%);
    border: 1px solid var(--typing-border-secondary);
    box-shadow: var(--typing-shadow-md);
    padding: var(--typing-spacing-lg);
    border-radius: var(--typing-radius-lg);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

.typing-indicator.simple.enhanced .typing-content {
    gap: var(--typing-spacing-sm);
}

.typing-indicator.simple.enhanced .typing-text {
    font-size: var(--typing-font-size-lg);
    font-weight: 600;
    color: var(--typing-text-primary);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

.typing-indicator.simple.enhanced.completed .typing-text {
    color: var(--typing-text-success);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

/* ===================================
   ANIMATIONS & KEYFRAMES
   =================================== */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes contextSwitch {
    0% {
        opacity: 0.7;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFast {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInSlow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   CONTEXT SWITCHING ANIMATIONS
   =================================== */
.typing-indicator.simple.context-switch {
    animation: contextSwitch var(--typing-transition-fast) var(--typing-easing);
}

/* ===================================
   ANIMATION VARIATIONS
   =================================== */
.typing-indicator.simple.fast {
    animation: slideInFast var(--typing-transition-fast) var(--typing-easing);
}

.typing-indicator.simple.slow {
    animation: slideInSlow var(--typing-transition-normal) var(--typing-easing);
}

/* ===================================
   FADE TRANSITIONS
   =================================== */
.typing-text.fade-out {
    opacity: 0;
    transition: opacity var(--typing-transition-fast) var(--typing-easing);
}

.typing-text.fade-in {
    opacity: 1;
    transition: opacity var(--typing-transition-fast) var(--typing-easing);
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */
.typing-indicator.simple * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* ===================================
   INTERACTIVE EFFECTS
   =================================== */
.typing-indicator.simple:hover {
    transform: translateY(-1px);
    box-shadow: var(--typing-shadow-lg);
    transition: all var(--typing-transition-fast) var(--typing-easing);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 768px) {
    .typing-indicator.simple {
        max-width: 90%;
        padding: var(--typing-spacing-sm) var(--typing-spacing-md);
        font-size: var(--typing-font-size-sm);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-indicator.simple.enhanced {
        padding: var(--typing-spacing-md);
        border-radius: var(--typing-radius-md);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-content {
        font-size: var(--typing-font-size-sm);
    }
    
    .typing-indicator.simple.enhanced .typing-text {
        font-size: var(--typing-font-size-base);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
}

/* ===================================
   DARK MODE SUPPORT
   =================================== */
@media (prefers-color-scheme: dark) {
    .typing-indicator.simple {
        background: var(--typing-bg-dark);
        color: var(--typing-text-dark);
        border-left-color: var(--typing-cursor-color-dark);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-indicator.simple.enhanced {
        background: linear-gradient(135deg, var(--typing-bg-dark) 0%, var(--typing-bg-dark-secondary) 100%);
        border-color: var(--typing-border-dark);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-content {
        color: var(--typing-text-dark);
        transition: color var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-cursor {
        color: var(--typing-cursor-color-dark);
        transition: color var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-text {
        color: var(--typing-text-dark);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-indicator.simple.completed {
        background: var(--typing-bg-success);
        border-left-color: var(--typing-border-success);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
    
    .typing-indicator.simple.enhanced.completed .typing-text {
        color: var(--typing-text-dark-success);
        transition: all var(--typing-transition-fast) var(--typing-easing);
    }
}

/* ===================================
   ACCESSIBILITY & FOCUS STATES
   =================================== */
.typing-indicator.simple:focus-within {
    outline: 2px solid var(--typing-border-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .typing-indicator.simple {
        display: none;
    }
}