/* LearnHub – custom styles (Tailwind CDN handles the rest) */

/* ── Smooth page transitions ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Scrollbar styling ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }

/* ── Flashcard flip ─────────────────────────────────────── */
.flashcard-container { perspective: 1000px; }
.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }
.flashcard-front,
.flashcard-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    padding: 2rem;
}
.flashcard-back { transform: rotateY(180deg); }

/* ── Chat bubble prose ──────────────────────────────────── */
.chat-prose p   { margin-bottom: 0.5rem; }
.chat-prose pre { background: #1e293b; color: #e2e8f0; border-radius: .5rem; padding: 1rem; overflow-x: auto; font-size: .85em; margin: .5rem 0; }
.chat-prose code { background: #f1f5f9; border-radius: .25rem; padding: .1em .35em; font-size: .875em; }
.chat-prose pre code { background: none; padding: 0; }

/* ── Loading dots ───────────────────────────────────────── */
@keyframes bounce-dot {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-6px); }
}
.dot-bounce { animation: bounce-dot 1.2s infinite ease-in-out; }

/* ── Utility: focus-visible ring ────────────────────────── */
:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }