/* Szintlépés — egyedi finomságok a Tailwind CDN mellé */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Görgetősáv sötét témához */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f19; }
::-webkit-scrollbar-thumb { background: #232d43; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2f3b55; }

/* XP / haladás sáv animáció */
.progress-fill {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kártya hover */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); }

/* Range slider stílus */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #232d43;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6366f1;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
}
input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #6366f1; cursor: pointer; border: 2px solid #fff;
}

/* Csevegőbuborék */
.chat-bubble { max-width: 85%; white-space: pre-wrap; word-break: break-word; }

/* Finom megjelenés */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in-up { animation: fadeInUp 0.4s ease both; }

/* Chat töltésjelző — az AI-válasz több másodperc, látszania kell, hogy dolgozik. */
.typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.typing-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.35;
    animation: typingBlink 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBlink {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}
/* Aki kevesebb mozgást kért, annak csak halványan villog. */
@media (prefers-reduced-motion: reduce) {
    .typing-dots i { animation: typingFade 1.6s infinite ease-in-out; }
    @keyframes typingFade { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
}