/* ===================================================================
   ATQAN — frontend/css/features/review.css
   Feature-Scoped Stylesheet for the Audio Review & Consent Page
   =================================================================== */

.animate-fadeIn {
  animation: m3-fade-in-slide 0.5s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes m3-fade-in-slide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollable container for recorded audio tracks */
.review-tracks-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 256px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Custom scrollbar styling for neat M3 appearance */
.review-tracks-container::-webkit-scrollbar {
  width: 6px;
}

.review-tracks-container::-webkit-scrollbar-track {
  background: transparent;
}

.review-tracks-container::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--radius-full);
}

.review-track-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--md-surface-low);
  border-radius: var(--radius-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .review-track-row {
  background-color: rgba(255, 255, 255, 0.02);
}

.review-track-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-text);
  font-family: var(--font-family);
}

.review-track-audio {
  height: 40px;
  max-width: 220px;
  border-radius: var(--radius-full);
}

@media (max-width: 480px) {
  .review-track-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .review-track-audio {
    max-width: 100%;
    width: 100%;
  }
}

/* Privacy Consent Block */
.privacy-consent-box {
  padding: 16px;
  background-color: var(--md-surface-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  margin-top: 16px;
}

.privacy-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.privacy-consent-checkbox {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--md-primary);
  cursor: pointer;
}

.privacy-consent-text {
  font-size: 12px;
  color: var(--md-text-sub);
  line-height: 1.6;
  font-family: var(--font-family);
}

/* Error Display Alert */
.error-alert-box {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #b91c1c;
  background-color: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
}

[data-theme="dark"] .error-alert-box {
  color: #f87171;
  background-color: rgba(185, 28, 28, 0.1);
  border-color: rgba(185, 28, 28, 0.2);
}

/* Send/Submit buttons */
.submit-btn-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.submit-btn-full {
  width: 100%;
  padding: 16px;
  text-align: center;
  color: var(--chat-submit-text);
  background-color: var(--chat-submit-bg);
  border: none;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.submit-btn-full:hover:not(:disabled) {
  background-color: var(--chat-submit-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.submit-btn-full:active:not(:disabled) {
  background-color: var(--chat-submit-active-bg);
  transform: translateY(1px);
}

.submit-btn-full:disabled {
  background-color: var(--md-surface-low);
  color: var(--md-text-sub);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Upload progress indicators */
.upload-progress-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.upload-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--md-surface-low);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background-color: #059669;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.m3-linear-progress {
  width: 100%;
  height: 8px;
  background-color: var(--md-surface-low);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.m3-linear-fill {
  height: 100%;
  background-color: var(--md-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.upload-status-text,
.status-caption {
  text-align: center;
  font-size: 12px;
  color: var(--md-text-sub);
  font-weight: 500;
}

/* ─── SUCCESS REPORT STATE ────────────────────────────────────── */
.success-state {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px !important;
  min-height: 350px;
  gap: 24px;
}

.success-title {
  margin: 0;
  color: var(--md-text);
  font-family: var(--font-family) !important;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: none;
}

.success-report-panel {
  width: min(100%, 560px);
  padding: 20px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
  background: var(--md-surface);
  text-align: left;
}

.success-report-title {
  margin: 0 0 12px;
  color: var(--md-text);
  font-size: 16px;
  font-weight: 700;
}

.success-report-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.success-report-score {
  color: var(--md-text);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.success-report-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-full);
  background: var(--md-surface-low);
  color: var(--md-text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.success-report-text,
.success-report-list {
  color: var(--md-text-sub);
  font-size: 13px;
  line-height: 1.6;
}

.success-report-text {
  margin: 0 0 14px;
}

.success-report-list {
  margin: 0;
  padding-left: 18px;
}

.success-report-audio {
  width: 100%;
  height: 36px;
  margin-top: 14px;
}

.success-actions-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 280px);
  align-items: stretch;
  justify-content: center;
}

.success-actions-row a,
.success-actions-row button {
  justify-content: center;
  text-decoration: none;
}

/* ─── ANIMATED CHECKMARK & SUCCESS STATE ──────────────────────── */
@keyframes stroke-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-check {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-checkmark {
  100% {
    box-shadow: inset 0px 0px 0px 40px var(--chat-submit-bg);
  }
}

@keyframes fill-checkmark-dark {
  100% {
    box-shadow: inset 0px 0px 0px 40px #34d399;
  }
}

@keyframes scale-checkmark {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

[data-theme="dark"] .checkmark-svg {
  box-shadow: inset 0px 0px 0px #34d399 !important;
  animation: fill-checkmark-dark .4s ease-in-out .4s forwards, scale-checkmark .3s ease-in-out .9s both !important;
}

[data-theme="dark"] .checkmark-circle {
  stroke: #34d399 !important;
}

[data-theme="dark"] .checkmark-check {
  stroke: #064e3b !important;
}