/* QuizEngine — Reusable MCQ + Chat component */
/* Two modes: .qe-mode-slide (compact) and .qe-mode-standalone (comfortable) */

/* ── Container ─────────────────────────────────── */
.qe {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #c9d1d9;
    box-sizing: border-box;
}
.qe *, .qe *::before, .qe *::after { box-sizing: border-box; }

/* ── Scrollable area ───────────────────────────── */
.qe-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    scroll-behavior: smooth;
}
.qe-scroll::-webkit-scrollbar { width: 4px; }
.qe-scroll::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.2); border-radius: 2px; }

/* ── Centered states (idle, loading, guest) ────── */
.qe-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    gap: 0.6rem;
    min-height: 50%;
}
.qe-icon { color: #58a6ff; opacity: 0.7; }
.qe-prompt { font-size: 0.88rem; color: #8b949e; line-height: 1.5; margin: 0; }
.qe-prompt strong { color: #e6edf3; }
.qe-muted { font-size: 0.78rem; color: #6e7681; margin: 0; }
.qe-error { color: #f85149; font-size: 0.85rem; }
.qe-stats { margin-top: 0.3rem; }

/* ── Spinner ───────────────────────────────────── */
.qe-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #30363d;
    border-top-color: #58a6ff;
    border-radius: 50%;
    animation: qe-spin 0.8s linear infinite;
}
@keyframes qe-spin { to { transform: rotate(360deg); } }

/* ── Buttons ───────────────────────────────────── */
.qe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1;
}
.qe-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qe-btn-primary {
    padding: 0.55rem 1.4rem;
    background: #58a6ff;
    color: #0d1117;
    font-size: 0.84rem;
}
.qe-btn-primary:hover:not(:disabled) { background: #79c0ff; }

.qe-btn-ghost {
    padding: 0.4rem 0.8rem;
    background: transparent;
    color: #8b949e;
    border: 1px solid #30363d;
    font-size: 0.78rem;
}
.qe-btn-ghost:hover:not(:disabled) { border-color: #8b949e; color: #c9d1d9; }

.qe-btn-send {
    padding: 0.4rem 0.6rem;
    background: #58a6ff;
    color: #0d1117;
    flex-shrink: 0;
}
.qe-btn-send:hover { background: #79c0ff; }

/* ── Big CTA button (idle state) ──────────────── */
.qe-btn-cta {
    padding: 0.7rem 2.5rem;
    background: #58a6ff;
    color: #0d1117;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 20px rgba(88,166,255,0.25);
}
.qe-btn-cta:hover { background: #79c0ff; box-shadow: 0 4px 28px rgba(88,166,255,0.35); transform: translateY(-1px); }

/* ── Question text ─────────────────────────────── */
.qe-question-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #e6edf3;
    margin-bottom: 0.8rem;
}

/* ── Choices ────────────────────────────────────── */
.qe-choices {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.qe-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: rgba(22, 27, 34, 0.9);
    border: 1.5px solid #30363d;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #c9d1d9;
    text-align: left;
    width: 100%;
}
.qe-choice:hover:not(.disabled) {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.06);
    transform: translateX(2px);
}
.qe-choice.selected {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.1);
}
.qe-choice.correct {
    border-color: #3fb950;
    background: rgba(63, 185, 80, 0.1);
}
.qe-choice.incorrect {
    border-color: #f85149;
    background: rgba(248, 81, 73, 0.1);
}
.qe-choice.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.qe-choice-key {
    font-weight: 700;
    color: #bc8cff;
    min-width: 1.2em;
    flex-shrink: 0;
}

/* ── Hint ──────────────────────────────────────── */
.qe-hint {
    padding: 0.45rem 0.7rem;
    background: rgba(210, 153, 34, 0.08);
    border-left: 3px solid #d29922;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: #d29922;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.qe-hint svg { flex-shrink: 0; margin-top: 2px; }

/* ── Feedback ──────────────────────────────────── */
.qe-feedback-section { margin-top: 0.6rem; }

.qe-feedback {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.84rem;
    line-height: 1.55;
}
.qe-feedback.correct {
    background: rgba(63, 185, 80, 0.08);
    border-left: 3px solid #3fb950;
}
.qe-feedback.incorrect {
    background: rgba(248, 81, 73, 0.08);
    border-left: 3px solid #f85149;
}
.qe-feedback-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.qe-feedback.correct .qe-feedback-header { color: #3fb950; }
.qe-feedback.incorrect .qe-feedback-header { color: #f85149; }
.qe-feedback-body { color: #c9d1d9; }

/* ── Slide refs ────────────────────────────────── */
.qe-refs {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.qe-refs-label {
    font-size: 0.7rem;
    color: #6e7681;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 0.2rem;
}
.qe-ref {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 4px;
    font-size: 0.72rem;
    color: #58a6ff;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.qe-ref:hover { background: rgba(88, 166, 255, 0.18); border-color: #58a6ff; }

/* ── Rating ────────────────────────────────────── */
.qe-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(48, 54, 61, 0.5);
}
.qe-rating-label { font-size: 0.72rem; color: #6e7681; }
.qe-rate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #30363d;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    cursor: pointer;
    color: #6e7681;
    transition: all 0.15s;
}
.qe-rate-btn:hover { border-color: #8b949e; color: #c9d1d9; }
.qe-rate-btn.active[data-rating="1"] { border-color: #3fb950; color: #3fb950; background: rgba(63,185,80,0.1); }
.qe-rate-btn.active[data-rating="-1"] { border-color: #f85149; color: #f85149; background: rgba(248,81,73,0.1); }

/* ── Chat thread ───────────────────────────────── */
.qe-chat-thread {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(48, 54, 61, 0.5);
}
.qe-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.qe-chat-msg {
    max-width: 90%;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.qe-chat-msg.user {
    align-self: flex-end;
    background: rgba(88, 166, 255, 0.15);
    color: #c5dff6;
    border-bottom-right-radius: 2px;
}
.qe-chat-msg.assistant {
    align-self: flex-start;
    background: #161b22;
    color: #e6edf3;
    border-bottom-left-radius: 2px;
}
.qe-chat-msg.assistant p { margin: 0.25em 0; }
.qe-chat-msg.assistant code {
    background: rgba(110,118,129,0.2);
    padding: 0.1em 0.25em;
    border-radius: 3px;
    font-size: 0.9em;
}
.qe-chat-msg.assistant pre {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 0.7em 0.9em;
    margin: 0.5em 0;
    overflow-x: auto;
    font-size: inherit; /* override Reveal's pre shrinkage */
}
.qe-chat-msg.assistant pre code,
.reveal .qe-chat-msg.assistant pre code {
    background: none !important;
    padding: 0 !important;
    border-radius: 0;
    font-size: 0.85em !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    line-height: 1.6;
    color: #e6edf3;
    white-space: pre;
}
.qe-chat-msg.loading {
    color: #6e7681;
    font-style: italic;
}
.qe-chat-msg.loading::after {
    content: '';
    animation: qe-dots 1.2s steps(3, end) infinite;
}
@keyframes qe-dots {
    0%  { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* ── History (collapsed) ───────────────────────── */
.qe-history { margin-bottom: 0.4rem; }
.qe-history-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    font-size: 0.74rem;
    color: #6e7681;
    margin-bottom: 0.2rem;
    background: rgba(22, 27, 34, 0.6);
    border-left: 2px solid transparent;
}
.qe-history-item.correct { border-left-color: #3fb950; }
.qe-history-item.incorrect { border-left-color: #f85149; }
.qe-history-icon { flex-shrink: 0; display: flex; }
.qe-history-item.correct .qe-history-icon { color: #3fb950; }
.qe-history-item.incorrect .qe-history-icon { color: #f85149; }
.qe-history-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Footer ────────────────────────────────────── */
.qe-footer {
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: #161b22;
    border-top: 1px solid #30363d;
}
.qe-footer.visible {
    display: flex;
}
.qe-footer-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
}
.qe-chat-input-row {
    display: flex;
    gap: 0.4rem;
}
.qe-chat-input {
    flex: 1;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #e6edf3;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
}
.qe-chat-input:focus { border-color: #58a6ff; }
.qe-chat-input::placeholder { color: #484f58; }

/* ── Reveal: quiz section fills viewport ─────── */
/* Match both top-level and vertical-stack-nested sections */
.reveal .slides section.quiz-engine-slide {
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
.reveal .slides section.quiz-engine-slide > .quiz-engine-mount {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* ── SLIDE MODE overrides (em units = relative to Reveal's 42px base) */
.reveal .qe-mode-slide { font-size: 0.55em; }
.reveal .qe-mode-slide .qe-scroll { padding: 0.6em 1em; }
.reveal .qe-mode-slide .qe-center { padding: 1.5em 0; gap: 0.6em; }
.reveal .qe-mode-slide .qe-question-text { font-size: 1.15em; margin-bottom: 0.6em; }
.reveal .qe-mode-slide .qe-choices { gap: 0.35em; margin-bottom: 0.5em; }
.reveal .qe-mode-slide .qe-choice { padding: 0.45em 0.7em; font-size: 1em; border-radius: 0.35em; gap: 0.4em; }
.reveal .qe-mode-slide .qe-choice-key { font-size: 1em; }
.reveal .qe-mode-slide .qe-hint { font-size: 0.9em; padding: 0.4em 0.6em; }
.reveal .qe-mode-slide .qe-feedback { font-size: 0.95em; padding: 0.5em 0.7em; }
.reveal .qe-mode-slide .qe-feedback-header { font-size: 1em; }
.reveal .qe-mode-slide .qe-chat-msg { font-size: 0.9em; padding: 0.4em 0.6em; }
.reveal .qe-mode-slide .qe-chat-input { font-size: 0.9em; padding: 0.4em 0.6em; }
.reveal .qe-mode-slide .qe-btn-primary { padding: 0.45em 1.2em; font-size: 1em; }
.reveal .qe-mode-slide .qe-btn-ghost { padding: 0.35em 0.8em; font-size: 0.9em; }
.reveal .qe-mode-slide .qe-btn-send { padding: 0.4em 0.6em; }
.reveal .qe-mode-slide .qe-btn-cta { padding: 0.7em 2.2em; font-size: 1.5em; }
.reveal .qe-mode-slide .qe-footer { padding: 0.4em 0.8em; gap: 0.35em; }
.reveal .qe-mode-slide .qe-icon svg { width: 2em; height: 2em; }
.reveal .qe-mode-slide .qe-prompt { font-size: 1.1em; }
.reveal .qe-mode-slide .qe-muted { font-size: 0.85em; }
.reveal .qe-mode-slide .qe-spinner { width: 1.8em; height: 1.8em; }
.reveal .qe-mode-slide .qe-history-item { font-size: 0.8em; padding: 0.25em 0.5em; }
.reveal .qe-mode-slide .qe-refs-label { font-size: 0.75em; }
.reveal .qe-mode-slide .qe-ref { font-size: 0.8em; padding: 0.2em 0.4em; }
.reveal .qe-mode-slide .qe-rating-label { font-size: 0.8em; }
.reveal .qe-mode-slide .qe-rate-btn { padding: 0.2em 0.4em; }
.reveal .qe-mode-slide .qe-rate-btn svg { width: 0.85em; height: 0.85em; }
.reveal .qe-mode-slide .qe-chat-thread { margin-top: 0.5em; padding-top: 0.4em; }
.reveal .qe-mode-slide .qe-chat-input-row { gap: 0.35em; }
.reveal .qe-mode-slide .qe-footer-actions { gap: 0.35em; }

/* ── STANDALONE MODE ───────────────────────────── */
.qe-mode-standalone {
    max-width: 700px;
    min-height: 400px;
    background: rgba(13, 17, 23, 0.98);
    border: 1px solid #30363d;
    border-radius: 12px;
    overflow: hidden;
}

/* ── Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .qe-mode-standalone {
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}