/* Additional fallback styles for better compatibility */

/* Ensure all buttons look good regardless of icon loading */
.ask-btn,
.action-btn,
.lang-btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Fallback button styles */
.ask-btn::before {
    content: "🚀";
    margin-right: 5px;
}

.research::before {
    content: "🔍";
    margin-right: 5px;
}

.experiment::before {
    content: "🧪";
    margin-right: 5px;
}

.discuss::before {
    content: "💬";
    margin-right: 5px;
}

/* Hide Font Awesome icons if they don't load, show emoji fallbacks */
.fas {
    position: relative;
}

.fas::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
}

/* Suggestion card icons with fallback */
.suggestion-card[data-question-en*="seasons"] .fas::before,
.suggestion-card[data-question-de*="Jahreszeiten"] .fas::before {
    content: "☀️";
}

.suggestion-card[data-question-en*="birds"] .fas::before,
.suggestion-card[data-question-de*="Vögel"] .fas::before {
    content: "🕊️";
}

.suggestion-card[data-question-en*="water"] .fas::before,
.suggestion-card[data-question-de*="Wasser"] .fas::before {
    content: "💧";
}

.suggestion-card[data-question-en*="computers"] .fas::before,
.suggestion-card[data-question-de*="Computer"] .fas::before {
    content: "💻";
}

.suggestion-card[data-question-en*="dream"] .fas::before,
.suggestion-card[data-question-de*="träumen"] .fas::before {
    content: "🌙";
}

.suggestion-card[data-question-en*="rainbow"] .fas::before,
.suggestion-card[data-question-de*="Regenbogen"] .fas::before {
    content: "🌈";
}

/* Loading animation gears with fallback */
.gear::before {
    content: "⚙️";
    font-size: inherit;
    display: inline-block;
    animation: inherit;
}

/* Ensure good typography fallback */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, .thinking-step h4, .welcome-section h2, .suggestions-section h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Comic Sans MS", cursive, sans-serif;
    font-weight: 700;
}

/* Ensure color consistency */
.thinking-step, .welcome-section, .question-section, .suggestions-section, .thinking-section {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Button improvements */
.ask-btn, .action-btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Animation consistency */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Responsive improvements */
@media (max-width: 480px) {
    .lang-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .brain-icon {
        font-size: 2rem;
    }
    
    .logo h1 {
        font-size: 2rem;
    }
}