/**
 * Quiz Feedback Panel Styles - F-030 Enhanced Validation
 *
 * Styling for real-time feedback panel and collapsible hints
 * Part of F-030: Enhanced Quiz System - User Guidance Layer
 *
 * Components:
 * - Question container transitions (.quiz-question)
 * - Two-column layout (.quiz-keyword-layout)
 * - Real-time feedback panel (.quiz-realtime-feedback)
 * - Score panel (.quiz-score-panel)
 * - Key points panel (.quiz-keypoints-panel)
 * - Structure/Spelling indicators (.quiz-structure-panel, .quiz-spelling-panel)
 * - Suggestions panel (.quiz-suggestions-panel)
 * - Hints toggle (.quiz-hint-toggle)
 *
 * Updated: 2026-01-22
 */

/* ==================== QUESTION CONTAINER TRANSITIONS ==================== */
/* Common animations for all question types */

.quiz-question {
  animation: quizQuestionFadeIn 300ms ease-out;
  /* Let parent container handle the frame sizing */
}

@keyframes quizQuestionFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Question exit animation (add via JS when switching questions) */
.quiz-question.quiz-exiting {
  animation: quizQuestionFadeOut 250ms ease-in forwards;
}

@keyframes quizQuestionFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Question stem shared styles */
.quiz-question-stem {
  margin-bottom: var(--space-lg, 1.5rem);
  animation: quizStemFadeIn 350ms ease-out;
}

@keyframes quizStemFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.quiz-question-text {
  font-size: var(--font-lg, 1.125rem);
  font-weight: 500;
  color: var(--text-primary, #1f2937);
  line-height: 1.6;
  margin: 0 0 var(--space-sm, 0.5rem) 0;
}

.quiz-question-marks {
  display: inline-block;
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

/* Submit button common styles */
.quiz-submit-container {
  margin-top: var(--space-lg, 1.5rem);
  margin-bottom: var(--space-md, 1rem);
}

.quiz-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-sm, 0.75rem) var(--space-xl, 2rem);
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-base, 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quiz-btn-submit:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quiz-btn-submit:active {
  transform: translateY(0);
}

.quiz-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Standard question container wrapper */
.quiz-question-container {
  min-height: 500px;
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-xl, 2rem);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  transition: box-shadow var(--transition-normal, 250ms);
}

.quiz-question-container:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

/* Responsive adjustments for standalone container */
@media (max-width: 768px) {
  .quiz-question-container {
    min-height: 420px;
    padding: var(--space-lg, 1.5rem);
  }
}

@media (max-width: 480px) {
  .quiz-question-container {
    min-height: auto;
    padding: 12px;
    border-radius: var(--radius-lg, 12px);
  }
}

/* Reduced motion support for question transitions */
@media (prefers-reduced-motion: reduce) {
  .quiz-question,
  .quiz-question-stem,
  .quiz-btn-submit {
    animation: none;
    transition: none;
  }

  .quiz-question.quiz-exiting {
    animation: none;
  }

  .quiz-btn-submit:hover {
    transform: none;
  }
}

/* ==================== LAYOUT ==================== */

.quiz-keyword-layout {
    display: flex;
    gap: var(--space-xl, 1.5rem);
    align-items: stretch; /* Both columns same height so bottoms align */
}

.quiz-keyword-main {
    flex: 2; /* Give more space to answer area */
    min-width: 0;
    max-width: none; /* Remove max-width constraint */
    display: flex;
    flex-direction: column;
}

/* Make textarea grow to fill available space so submit button sits at bottom */
.quiz-keyword-main .quiz-keyword-input-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.quiz-keyword-main .quiz-keyword-textarea {
    flex: 1; /* Grow to fill, min-height still respected */
}

/* Push submit button flush with sidebar bottom */
.quiz-keyword-main .quiz-submit-container,
.quiz-keyword-main .quiz-btn-submit {
    margin-top: auto;
}

.quiz-keyword-sidebar {
    width: 300px; /* Fixed smaller width for feedback */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* ==================== COLLAPSIBLE HINTS ==================== */

.hint-checklist-container.collapsed .hint-checklist-content {
    display: none;
}

.hint-checklist-container.expanded .hint-checklist-content {
    display: block;
}

.hint-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    width: 100%;
    padding: var(--space-md, 1rem);
    background: var(--bg-secondary, #f8f9fa);
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm, 0.875rem);
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    text-align: left;
    transition: background-color 0.2s;
    margin-bottom: var(--space-md, 1rem);
}

.hint-toggle-btn:hover {
    background: var(--bg-tertiary, #e5e7eb);
}

.hint-toggle-btn:focus {
    outline: 2px solid var(--accent, #2563EB);
    outline-offset: 2px;
}

.hint-toggle-icon {
    color: var(--accent, #2563EB);
    flex-shrink: 0;
}

.hint-toggle-text {
    flex: 1;
}

.hint-toggle-chevron {
    flex-shrink: 0;
    transition: transform 0.3s;
}

.hint-checklist-container.collapsed .hint-toggle-chevron {
    transform: rotate(-90deg);
}

.hint-checklist-container.expanded .hint-toggle-chevron {
    transform: rotate(0deg);
}

/* ==================== FEEDBACK PANEL ==================== */

.quiz-feedback-panel {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.feedback-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    padding: var(--space-md, 1rem);
    background: linear-gradient(135deg, var(--accent, #2563EB), var(--accent-dark, #2563eb));
    color: white;
}

.feedback-panel-header h4 {
    margin: 0;
    font-size: var(--font-sm, 0.875rem);
    font-weight: 600;
}

.feedback-panel-content {
    padding: var(--space-md, 1rem);
}

/* ==================== FEEDBACK ITEMS ==================== */

.feedback-item {
    margin-bottom: var(--space-md, 1rem);
}

.feedback-item:last-child {
    margin-bottom: 0;
}

.feedback-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    font-size: var(--font-xs, 0.75rem);
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    margin-bottom: var(--space-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feedback-label svg {
    flex-shrink: 0;
}

.feedback-value {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    font-size: var(--font-md, 1rem);
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

/* ==================== KEYWORD PROGRESS ==================== */

.feedback-keywords .feedback-value {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs, 0.25rem);
}

.feedback-count {
    font-size: var(--font-lg, 1.125rem);
    font-weight: 700;
}

.feedback-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

.feedback-bar-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.3s ease;
    background: var(--text-muted, #9ca3af);
}

.feedback-bar-fill.feedback-bar-good {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.feedback-bar-fill.feedback-bar-moderate {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.feedback-bar-fill.feedback-bar-low {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* ==================== STATUS BADGES ==================== */

.feedback-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: var(--font-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
}

.feedback-status[data-status="pending"] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-muted, #6b7280);
}

.feedback-status[data-status="poor"] {
    background: #fee2e2;
    color: #dc2626;
}

.feedback-status[data-status="moderate"] {
    background: #fef3c7;
    color: #d97706;
}

.feedback-status[data-status="good"] {
    background: #d1fae5;
    color: #059669;
}

.feedback-status[data-status="excellent"] {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

/* ==================== SPELLING STATUS ==================== */

.feedback-spelling-status {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
}

.feedback-spelling-status[data-status="pending"] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-muted, #6b7280);
}

.feedback-spelling-status[data-status="good"] {
    background: #d1fae5;
    color: #059669;
}

.feedback-spelling-status[data-status="warning"] {
    background: #fef3c7;
    color: #d97706;
}

/* ==================== SCORE DISPLAY ==================== */

.feedback-score .feedback-value {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.feedback-score-value {
    font-size: var(--font-xl, 1.5rem);
    font-weight: 700;
    color: var(--accent, #2563EB);
}

.feedback-score-percent {
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-muted, #6b7280);
}

/* ==================== SUGGESTIONS ==================== */

.feedback-suggestions {
    margin-top: var(--space-md, 1rem);
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--border, #e5e7eb);
}

.feedback-suggestion-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm, 0.5rem) 0 0 0;
}

.feedback-suggestion-item {
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    margin-bottom: var(--space-xs, 0.25rem);
    background: var(--bg-secondary, #f8f9fa);
    border-left: 3px solid var(--accent, #2563EB);
    border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
    font-size: var(--font-sm, 0.875rem);
    line-height: 1.5;
}

.feedback-suggestion-item.positive {
    background: #d1fae5;
    border-left-color: #10b981;
    color: #065f46;
    font-weight: 500;
}

/* ==================== REAL-TIME FEEDBACK PANEL ==================== */

.quiz-realtime-feedback {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    font-size: 13px; /* Smaller text in feedback */
    flex: 1; /* Fill sidebar height so bottom aligns with main column */
}

/* ==================== SCORE PANEL ==================== */

.quiz-score-panel {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.15),
        rgba(139, 92, 246, 0.15));
    border: 2px solid var(--accent, #2563EB);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-md, 1rem);
    text-align: center;
    box-shadow: var(--shadow-accent, 0 0 20px rgba(59, 130, 246, 0.3));
    transition: all var(--transition-normal, 250ms);
}

.quiz-score-panel:hover {
    box-shadow: var(--shadow-accent-sm, 0 0 10px rgba(59, 130, 246, 0.2));
    transform: translateY(-2px);
}

.quiz-score-label {
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs, 0.25rem);
    font-weight: 600;
}

.quiz-score-value {
    font-size: var(--font-2xl, 2rem);
    font-weight: 700;
    color: var(--accent, #2563EB);
    line-height: 1;
    margin-bottom: var(--space-xs, 0.25rem);
    transition: all var(--transition-fast, 150ms);
}

.quiz-score-value--low { color: var(--error, #ef4444); }
.quiz-score-value--medium { color: var(--warning, #f59e0b); }
.quiz-score-value--high { color: var(--success, #22c55e); }

.quiz-score-percentage {
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-muted, #94a3b8);
}

/* Score pulse animation */
@keyframes score-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.quiz-score-value.updating {
    animation: score-pulse 300ms ease-out;
}

/* ==================== KEY POINTS PANEL ==================== */

.quiz-keypoints-panel {
    background: var(--bg-secondary, #f8fafc);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
}

.quiz-keypoints-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm, 0.5rem);
    font-weight: 600;
}

.quiz-keypoints-count {
    font-size: var(--font-xl, 1.5rem);
    font-weight: 700;
    color: var(--success, #22c55e);
    margin-bottom: var(--space-sm, 0.5rem);
}

/* Progress Bar */
.quiz-progress-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-hover, #e2e8f0);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    position: relative;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #2563EB) 0%, var(--success, #22c55e) 100%);
    border-radius: var(--radius-full, 9999px);
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    position: relative;
    will-change: width;
}

/* Progress bar shimmer effect */
.quiz-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==================== STRUCTURE & SPELLING INDICATORS ==================== */

.quiz-structure-panel,
.quiz-spelling-panel {
    background: var(--bg-secondary, #f8fafc);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
}

.quiz-structure-header,
.quiz-spelling-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs, 0.25rem);
    font-weight: 600;
}

.quiz-structure-badge,
.quiz-spelling-badge {
    display: inline-block;
    padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
    border-radius: var(--radius-sm, 0.25rem);
    font-size: var(--font-xs, 0.75rem);
    font-weight: 600;
    text-transform: capitalize;
}

/* Badge variants */
.quiz-structure-badge--not-started,
.quiz-spelling-badge--not-started {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted, #94a3b8);
}

.quiz-structure-badge--good,
.quiz-spelling-badge--all-correct {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success, #22c55e);
}

.quiz-structure-badge--needs-work {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning, #f59e0b);
}

.quiz-spelling-badge--has-errors {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error, #ef4444);
}

/* ==================== SUGGESTIONS PANEL ==================== */

.quiz-suggestions-panel {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.05),
        rgba(139, 92, 246, 0.05));
    border-left: 3px solid var(--accent, #2563EB);
    border-radius: var(--radius-sm, 0.25rem);
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
}

.quiz-suggestions-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs, 0.25rem);
    font-weight: 600;
}

.quiz-suggestions-text {
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    line-height: var(--line-height, 1.6);
}

/* Suggestion fade-in animation */
@keyframes suggestion-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-suggestions-panel.updating {
    animation: suggestion-fade-in 400ms ease-out;
}

/* ==================== HINTS TOGGLE (Subtle Link Style) ==================== */

.quiz-hint-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    padding: var(--space-xs, 0.25rem) 0;
    background: none;
    border: none;
    color: var(--accent, #2563EB);
    font-size: var(--font-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quiz-hint-toggle:hover {
    color: var(--accent-hover, #2563eb);
    text-decoration-thickness: 2px;
}

.quiz-hint-toggle:focus-visible {
    outline: 2px solid var(--accent, #2563EB);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.25rem);
}

.quiz-hint-toggle--locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quiz-hint-toggle--unlocked {
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

/* Hint Content - Collapsible */
.quiz-hint-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    margin-top: 0;
    will-change: max-height, opacity, margin-top;
}

.quiz-hint-content.expanded {
    max-height: 500px;
    opacity: 1;
    margin-top: var(--space-md, 1rem);
}

/* ==================== TEXTAREA STYLES ==================== */

.quiz-label {
    display: block;
    font-size: var(--font-base, 1rem);
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: var(--space-sm, 0.5rem);
}

.quiz-keyword-textarea {
    width: 100%;
    min-height: 400px;
    padding: var(--space-md, 1rem);
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--text-primary, #1e293b);
    font-family: var(--font-family, inherit);
    font-size: var(--font-base, 1rem);
    line-height: var(--line-height, 1.6);
    resize: vertical;
    transition: border-color var(--transition-fast, 150ms);
}

.quiz-keyword-textarea:focus {
    outline: none;
    border-color: var(--accent, #2563EB);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quiz-keyword-textarea::placeholder {
    color: var(--text-muted, #94a3b8);
}

/* Word Count */
.quiz-word-count {
    margin-top: var(--space-sm, 0.5rem);
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-muted, #94a3b8);
}

.quiz-word-count-current {
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

/* ==================== SUBMIT BUTTON ==================== */

.quiz-btn-submit {
    width: 100%;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background: var(--accent);
    color: white;
    border: 2px solid var(--accent);
    border-radius: var(--radius-md, 0.5rem);
    font-size: var(--font-base, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms);
    margin-top: var(--space-md, 1rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quiz-btn-submit:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quiz-btn-submit:active {
    transform: translateY(0);
}

.quiz-btn-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==================== ANSWER CARD (F-057 v2) ==================== */
/* Integrated answer card: textarea + progress bar + feedback strip + panels. */
/* On desktop (>968px): card styling removed, sidebar used instead. */

/* --- Card Container --- */
.kw-answer-card {
    display: block; /* Visible on all viewports — textarea must always show */
}

/* On desktop (>968px), hide mobile-only feedback elements inside the card;
   the sidebar handles feedback instead. */
@media (min-width: 969px) {
    .kw-answer-card .kw-progress-bar,
    .kw-answer-card .kw-feedback-strip,
    .kw-answer-card .kw-expand-panel {
        display: none;
    }
}

/* --- Progress Bar (thin line between textarea and strip) --- */
.kw-progress-bar {
    height: 3px;
    background: var(--bg-hover, #f1f5f9);
    width: 100%;
}

.kw-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 0 2px 2px 0;
    background: var(--border, #cbd5e1);
    transition: width 400ms ease, background-color 400ms ease;
}

.kw-fill--blue { background: var(--accent, #2563EB); }
.kw-fill--amber { background: var(--warning, #eab308); }
.kw-fill--green { background: var(--success, #22c55e); }

/* --- Feedback Strip (compact bar below progress) --- */
.kw-feedback-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-top: 1px solid var(--border, #e2e8f0);
}

.kw-strip-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms ease;
    min-height: 44px;
}

.kw-strip-btn:active {
    opacity: 0.7;
}

.kw-strip-btn[aria-expanded="true"] {
    color: var(--accent, #2563EB);
}

/* Score dot: small colored circle */
.kw-score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border, #cbd5e1);
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 400ms ease, transform 300ms ease;
}

.kw-dot--blue { background: var(--accent, #2563EB); }
.kw-dot--amber { background: var(--warning, #eab308); }
.kw-dot--green { background: var(--success, #22c55e); }

/* Score number styling */
.kw-score-current {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

.kw-score-sep {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin: 0 1px;
}

.kw-score-max {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
}

/* Hints label */
.kw-hints-label {
    font-weight: 500;
}

/* Chevron */
.kw-chevron {
    flex-shrink: 0;
    opacity: 0.4;
    transition: transform 200ms ease, opacity 200ms ease;
}

.kw-strip-btn[aria-expanded="true"] .kw-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

/* --- Expand Panels --- */
.kw-expand-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms ease;
    background: var(--bg-secondary, #f8fafc);
}

.kw-expand-panel.kw-panel--open {
    max-height: 300px;
    opacity: 1;
}

.kw-expand-panel[hidden] {
    display: none !important;
}

/* --- Detail Rows (marks panel) --- */
.kw-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
}

.kw-detail-row:not(:last-of-type) {
    border-bottom: 1px solid var(--border, #f1f5f9);
}

.kw-detail-label {
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
}

.kw-detail-value {
    color: var(--text-primary, #1e293b);
    font-weight: 600;
    margin-left: auto;
}

.kw-detail-progress {
    flex: 1;
    height: 4px;
    background: var(--bg-hover, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
}

.kw-detail-progress-fill {
    height: 100%;
    background: var(--accent, #2563EB);
    border-radius: 2px;
    transition: width 300ms ease;
}

.kw-suggestion-text {
    padding: 8px 16px 12px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    font-style: italic;
    border-top: 1px solid var(--border, #f1f5f9);
}

/* --- Hints Panel --- */
.kw-hints-content .hint-checklist-container {
    margin: 0;
    background: transparent !important;
    border-color: transparent !important;
}

.kw-hints-content .quiz-hint-toggle {
    display: none;
}

.kw-hints-content .quiz-hint-content {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.kw-hints-content .hint-checklist-header {
    border-bottom-color: var(--border, #e5e7eb);
}

.kw-hints-content .hint-checklist-header h4 {
    color: var(--text-secondary, #4b5563);
}

.kw-hints-content .hint-checklist-item {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-primary, #374151);
}

.kw-hints-content .hint-text-container {
    color: var(--text-primary, #1f2937);
}

.kw-hints-content .hint-checklist-item[data-state="pending"] .hint-text-container {
    color: var(--text-muted, #6b7280);
}

.kw-hints-content .hint-item-marks {
    background: var(--bg-hover, #e5e7eb);
    color: var(--text-muted, #6b7280);
}

/* --- Animations --- */
@keyframes kwScorePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.kw-score-updated .kw-score-current {
    animation: kwScorePulse 300ms ease;
}

.kw-score-updated .kw-score-dot {
    animation: kwScorePulse 300ms ease;
}

/* Hint nudge: gentle pulse when student is struggling */
@keyframes kwHintNudge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.kw-hints--nudge {
    animation: kwHintNudge 1.5s ease-in-out infinite;
    color: var(--accent, #2563EB) !important;
    font-weight: 600;
}

/* Full marks celebration: green glow on card */
@keyframes kwCompleteGlow {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.kw-card--complete {
    border-color: var(--success, #22c55e) !important;
    animation: kwCompleteGlow 600ms ease;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 968px) {
    .quiz-keyword-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    /* Hide the full sidebar on mobile — card replaces it */
    .quiz-keyword-sidebar {
        display: none;
    }

    .quiz-keyword-main {
        max-width: none;
        gap: 8px;
    }

    /* Style the answer card on mobile — simple clean textarea */
    .kw-answer-card {
        overflow: hidden;
    }

    /* Textarea inside card: simple, clean text box */
    .kw-answer-card .quiz-keyword-textarea {
        border: 1px solid var(--border, #e2e8f0) !important;
        border-radius: 8px !important;
        outline: none !important;
        box-shadow: none !important;
        background: var(--bg-card, #ffffff) !important;
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        overflow-y: auto;
        resize: none;
    }

    .kw-answer-card .quiz-keyword-textarea:focus {
        border-color: var(--accent, #2563EB) !important;
    }

    /* Hide word count on mobile — saves vertical space */
    .kw-answer-card .quiz-word-count {
        display: none;
    }

    .kw-answer-card .quiz-keyword-input-container {
        flex: none;
    }

    /* Reduce stem margin for tighter layout */
    .quiz-question-stem {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 768px) {
    .feedback-panel-content {
        padding: var(--space-sm, 0.75rem);
    }

    .feedback-score-value {
        font-size: var(--font-lg, 1.125rem);
    }

    .quiz-realtime-feedback {
        gap: var(--space-sm, 0.5rem);
    }

    .quiz-score-value {
        font-size: var(--font-xl, 1.5rem);
    }

    .quiz-keypoints-count {
        font-size: var(--font-lg, 1.125rem);
    }

    .quiz-keyword-textarea {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        overflow-y: auto;
        resize: none;
    }
}

@media (max-width: 480px) {
    .kw-feedback-strip {
        padding: 8px 12px;
    }

    .kw-strip-btn {
        font-size: 13px;
    }

    .kw-score-current {
        font-size: 15px;
    }

    .kw-detail-row {
        padding: 6px 12px;
        font-size: 12px;
    }

    .kw-suggestion-text {
        padding: 6px 12px 10px;
        font-size: 11px;
    }
}

@media (max-width: 375px) {
    .quiz-realtime-feedback {
        padding: var(--space-md, 1rem);
    }

    .quiz-score-panel {
        padding: var(--space-md, 1rem);
    }
}

/* ==================== ACCESSIBILITY ==================== */

@media (prefers-reduced-motion: reduce) {
    .hint-toggle-chevron,
    .feedback-bar-fill {
        transition: none;
    }

    .kw-score-updated .kw-score-current,
    .kw-score-updated .kw-score-dot,
    .kw-hints--nudge,
    .kw-card--complete {
        animation: none;
    }

    .kw-progress-fill,
    .kw-detail-progress-fill,
    .kw-score-dot {
        transition: none;
    }
}

@media print {
    .quiz-feedback-panel {
        display: none;
    }

    .hint-checklist-container.collapsed .hint-checklist-content {
        display: block;
    }
}