/* StudyEdit continuous lesson polish.
   The session should feel like one tutor-led surface, not a stack of software states. */

/* Correctness should be unmistakable, but delivered like a tutor speaking rather than a status badge. */
section[aria-label="Answer and tutor"] > [data-studyedit-outcome="true"] {
  display: block !important;
  margin-bottom: 22px !important;
  font-size: 19px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: #3B2A1E !important;
  animation: studyedit-turn-in 180ms ease-out both;
}

section[aria-label="Answer and tutor"] > [data-studyedit-outcome="true"][data-studyedit-result="correct"] {
  color: #62734F !important;
}

section[aria-label="Answer and tutor"] > [data-studyedit-outcome="true"][data-studyedit-result="incorrect"] {
  color: #94483D !important;
}

/* Keep the teaching transcript visually continuous. */
section[aria-label="Answer and tutor"] .space-y-6 {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
}

section[aria-label="Answer and tutor"] .space-y-6 > .border-t.pt-6 {
  border-top: 0 !important;
  padding-top: 0 !important;
}

section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn="tutor"] {
  animation: studyedit-turn-in 240ms ease-out both;
}

/* Learner voice: clearly conversational, but still on the learning text scale. */
section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn="student"],
section[aria-label="Answer and tutor"] .space-y-6 > .border-y.py-5 {
  margin-left: auto !important;
  width: fit-content !important;
  max-width: 86% !important;
  padding: 14px 18px 15px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #1F140C !important;
  box-shadow: 0 8px 24px rgba(31, 20, 12, 0.08) !important;
  animation: studyedit-turn-in 180ms ease-out both;
}

section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn="student"] > div:first-child,
section[aria-label="Answer and tutor"] .space-y-6 > .border-y.py-5 > div:first-child {
  margin-bottom: 6px !important;
  color: rgba(250, 245, 236, 0.62) !important;
}

section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn="student"] > div:nth-child(2),
section[aria-label="Answer and tutor"] .space-y-6 > .border-y.py-5 > div:nth-child(2) {
  color: #FAF5EC !important;
}

/* A completed case becomes a quiet reference line rather than another component to operate. */
[data-studyedit-case-summary="true"] {
  border-top: 1px solid #E8DCC4 !important;
  border-bottom: 0 !important;
  padding: 14px 0 10px !important;
  opacity: 0.9;
}

[data-studyedit-case-summary="true"] > span:first-child > span:first-child {
  font-size: 14px !important;
  font-weight: 700 !important;
}

[data-studyedit-case-summary="true"] > span:first-child > span:nth-child(2) {
  margin-top: 2px !important;
  font-size: 12px !important;
}

[data-studyedit-case-summary="true"] > span:last-child {
  font-size: 11px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #C7B6A1;
}

/* Thinking should read like a pause in a conversation, not an app loading state. */
section[aria-label="Answer and tutor"] [role="status"] {
  min-height: 28px;
  animation: studyedit-turn-in 180ms ease-out both;
}

section[aria-label="Answer and tutor"] [role="status"] > span:first-child {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* When StudyEdit has decided to move on, the tutor's words are the transition.
   The only visible control is the learner's right to interrupt. */
section[aria-label="Answer and tutor"] [data-studyedit-advance="true"] {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  justify-content: flex-end !important;
}

section[aria-label="Answer and tutor"] [data-studyedit-advance="true"] > span:first-child {
  display: none !important;
}

section[aria-label="Answer and tutor"] [data-studyedit-advance="true"] button {
  font-size: 11px !important;
  opacity: 0.82;
}

/* The composer is part of the conversation, not a separate control panel. */
section[aria-label="Answer and tutor"] form {
  margin-top: 28px !important;
  box-shadow: 0 6px 20px rgba(31, 20, 12, 0.035) !important;
}

section[aria-label="Answer and tutor"] [data-studyedit-stuck="true"] {
  margin-top: 10px !important;
  font-size: 12px !important;
  text-decoration-thickness: 1px !important;
}

/* The next vignette arrives softly, rather than reading like a new page load. */
section[aria-label="Question"].studyedit-case-enter {
  animation: studyedit-case-in 300ms cubic-bezier(.2,.8,.2,1) both;
}

/* Previous teaching stays physically above the active case.
   It is not a results drawer or a history screen; it is simply the page you have already written together. */
[data-studyedit-history="true"] {
  width: 100%;
}

.studyedit-archived-lesson {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(196, 177, 153, 0.52);
}

.studyedit-archived-lesson [data-studyedit-archive-main="true"] {
  padding-top: 30px !important;
  padding-bottom: 42px !important;
}

.studyedit-archived-lesson section[aria-label="Answer and tutor"] {
  margin-top: 24px !important;
}

.studyedit-archived-lesson [data-studyedit-case-summary="true"] {
  cursor: default !important;
}

.studyedit-archived-lesson [data-studyedit-case-summary="true"] > span:last-child:empty {
  display: none !important;
}

.studyedit-archive-case-details {
  margin-top: 4px;
  padding-bottom: 4px;
}

.studyedit-archive-case-details > summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
  color: #8A7560;
  font-size: 11px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #C7B6A1;
  text-underline-offset: 3px;
}

.studyedit-archive-case-details > summary::-webkit-details-marker {
  display: none;
}

.studyedit-archive-case-details[open] > summary {
  margin-bottom: 20px;
}

.studyedit-archive-case-body {
  padding: 22px 0 10px;
  border-top: 1px solid rgba(232, 220, 196, 0.8);
}

.studyedit-archive-case-body [data-studyedit-archived-case="true"] {
  opacity: 0.94;
}

.studyedit-archive-case-body [data-studyedit-archived-case="true"] button {
  cursor: default !important;
}

/* Don't replay entrance animations every time an archived turn is re-injected. */
.studyedit-archived-lesson [data-studyedit-turn],
.studyedit-archived-lesson section[aria-label="Answer and tutor"] [role="status"],
.studyedit-archive-case-body section[aria-label="Question"] {
  animation: none !important;
}

@keyframes studyedit-turn-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studyedit-case-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn="student"],
  section[aria-label="Answer and tutor"] .space-y-6 > .border-y.py-5 {
    max-width: 90% !important;
  }

  .studyedit-archived-lesson [data-studyedit-archive-main="true"] {
    padding-bottom: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  section[aria-label="Answer and tutor"] .space-y-6 > [data-studyedit-turn],
  section[aria-label="Question"].studyedit-case-enter,
  section[aria-label="Answer and tutor"] [role="status"] {
    animation: none !important;
  }
}