/* ============================================================
   EduJA — "Explain Further" AI quiz help widget styles
   Used inside .quiz-feedback-slot / .quiz-feedback blocks on both
   the lesson quiz modal (index.html) and the practice modal
   (practice.html). Kept in its own file, same pattern as
   cookie-consent.css, so it stays easy to find/update on its own.

   IMPORTANT: .modal-content (css/style.css) is a WHITE card
   (background:#fff; color:#1a1a2e) — NOT the app's dark theme.
   These rules were originally written with dark-theme colors
   (cream text on a translucent white overlay), which came out as
   barely-legible pale text on white. Redesigned to match the same
   light pastel-card + solid-pill-button language already used
   inside this exact modal (see .correct/.incorrect/
   .assess-result-banner and .assess-submit-btn/.close-modal in
   css/style.css / css/assessment.css) instead of inventing a new
   look.
   ============================================================ */

.ask-ai-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    background: #006633;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ask-ai-help-btn:hover:not(:disabled) {
    background: #00522a;
}

.ask-ai-help-btn:disabled {
    background: #999;
    cursor: default;
}

.ask-ai-help-response {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4a3b00;
    background: #fdf3d9;
    border-left: 4px solid #FDB827;
    border-radius: 8px;
}

.ask-ai-help-response.ask-ai-help-error {
    color: #b91c1c;
    background: #f0d4d4;
    border-left-color: #b91c1c;
}

.ask-ai-help-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #a67c00;
    margin-bottom: 4px;
    text-transform: uppercase;
}