/* full-width card inside the page-full wrapper */
.oa-question{
  width: 100%;          /* let it expand to the wrapper’s width     */
  max-width: none;      /* cancel Quarto’s column max-width         */
  background:#f8f9fa;
  padding:15px;
  border:3px solid blue;
  border-radius:8px;
  box-sizing:border-box;
}

/* bigger textarea */
.oa-answer{
  width: 100%;          /* fill the card */
  min-height: 200px;    /* ~10 lines; raise if you want */
  padding:15px;
  font-size:1rem;
  border:3px solid green;
  border-radius:6px;
  resize: vertical;
  box-sizing:border-box;
}
.oa-submit {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 1em;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.oa-submit:disabled {
  background-color: #9e9e9e;
  cursor: not-allowed;
}

.oa-feedback {
  margin-top: 15px;
  font-size: 1em;
}

/* ═══════════════════════════════════════════
   Quiz explanation styles
   ═══════════════════════════════════════════ */

.quiz-integrity-warning {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 6px;
  color: #7a5d00;
  margin-bottom: 20px;
  padding: 12px 14px;
  font-size: 0.95em;
}

.explain-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.explain-btn:hover {
  background: #1976d2;
}

.explain-btn:disabled {
  background: #b0b0b0;
  cursor: wait;
}

.explanation-content {
  background: #e7f3ff;
  border-left: 4px solid #2196f3;
  padding: 15px;
  margin-top: 10px;
  border-radius: 4px;
}

.explanation-error {
  background: #ffebee;
  border-left-color: #f44336;
}

/* ═══════════════════════════════════════════
   Chatbot styles
   ═══════════════════════════════════════════ */

/* Message bubbles */
.chat-msg { padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; line-height: 1.4; font-size: 0.92em; }
.chat-student { background: #e3f2fd; margin-left: 40px; }
.chat-tutor { background: #f5f5f5; margin-right: 40px; }
.chat-system { background: #fff3cd; margin: 4px 20px; font-size: 0.85em; text-align: center; border-radius: 6px; }

/* Mode toggle buttons */
.chat-mode-btn {
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.82em;
  transition: background 0.15s;
}
.chat-mode-btn.active {
  background: rgba(255,255,255,0.25);
  border-color: white;
  font-weight: bold;
}
.chat-mode-btn:hover { background: rgba(255,255,255,0.15); }

/* Mic button */
.chat-mic-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.chat-mic-btn:hover { opacity: 1; }
.chat-mic-btn.recording { color: #d00; animation: mic-pulse 1s infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Speaker button (on tutor messages) */
.chat-speak-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 3px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.chat-speak-btn:hover { opacity: 1; }

/* Typing indicator dots */
.typing-dots span {
  display: inline-block;
  font-size: 1.4em;
  animation: dot-blink 1.4s infinite both;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

/* Character counter */
.chat-char-counter { font-size: 0.72em; color: #888; text-align: right; margin-top: 2px; padding-right: 4px; }