/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Markdown content styling */
.markdown-content {
  line-height: 1.6;
}

.markdown-content p {
  margin-bottom: 0.75rem;
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.125rem; }
.markdown-content h3 { font-size: 1rem; }

.markdown-content ul,
.markdown-content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.markdown-content li {
  margin-bottom: 0.25rem;
}

.markdown-content code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'Courier New', Courier, monospace;
}

.markdown-content pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.markdown-content pre code {
  background-color: transparent;
  padding: 0;
}

.markdown-content blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 0.75rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.7);
}

.markdown-content strong {
  font-weight: 600;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content a {
  color: #4f46e5;
  text-decoration: underline;
}

.markdown-content a:hover {
  color: #4338ca;
}

.markdown-content hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  text-align: left;
}

.markdown-content th {
  background-color: rgba(0, 0, 0, 0.03);
  font-weight: 600;
}

.chat-message-bubble {
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.chat-message-pending {
  background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
  border-color: #c7d2fe;
  box-shadow: 0 10px 30px -20px rgba(79, 70, 229, 0.65);
}

.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #4b5563;
}

.ai-thinking__label {
  font-weight: 500;
}

.ai-thinking__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ai-thinking__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
  opacity: 0.35;
  animation: ai-thinking-bounce 1.15s ease-in-out infinite;
}

.ai-thinking__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-thinking__dot:nth-child(3) {
  animation-delay: 0.3s;
}

.evaluation-pulse {
  animation: evaluation-pulse 1.8s ease-in-out infinite;
}

.evaluation-loading-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, #60a5fa 0%, #4f46e5 100%);
  animation: evaluation-loading-bounce 1s ease-in-out infinite;
}

.evaluation-loading-dot:nth-child(2) {
  animation-delay: 0.12s;
}

.evaluation-loading-dot:nth-child(3) {
  animation-delay: 0.24s;
}

.evaluation-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.95) 0%, rgba(241, 245, 249, 1) 50%, rgba(226, 232, 240, 0.95) 100%);
}

.evaluation-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  animation: evaluation-shimmer 1.6s ease-in-out infinite;
}

.lesson-complete-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at bottom right, rgba(253,224,71,0.45) 0%, rgba(253,224,71,0) 35%),
    linear-gradient(135deg, #fef3c7 0%, #fde68a 24%, #fbcfe8 52%, #ddd6fe 76%, #bfdbfe 100%);
}

.lesson-complete-banner__badge {
  animation: celebration-badge-bounce 2.6s ease-in-out infinite;
}

.lesson-complete-banner__spark {
  position: absolute;
  border-radius: 9999px;
  filter: blur(2px);
  opacity: 0.55;
  animation: celebration-float 7s ease-in-out infinite;
}

.lesson-complete-banner__spark--one {
  top: -1rem;
  right: 10%;
  width: 7rem;
  height: 7rem;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%);
}

.lesson-complete-banner__spark--two {
  bottom: -2rem;
  left: -1rem;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle, rgba(251,113,133,0.45) 0%, rgba(251,113,133,0) 70%);
  animation-delay: -2s;
}

.lesson-complete-banner__spark--three {
  top: 30%;
  left: 38%;
  width: 5rem;
  height: 5rem;
  background: radial-gradient(circle, rgba(96,165,250,0.4) 0%, rgba(96,165,250,0) 70%);
  animation-delay: -4s;
}

.celebration-card {
  position: relative;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 15% 85%, rgba(251,191,36,0.35) 0%, rgba(251,191,36,0) 28%),
    radial-gradient(circle at 85% 20%, rgba(244,114,182,0.3) 0%, rgba(244,114,182,0) 25%),
    linear-gradient(145deg, #fff7ed 0%, #fef3c7 24%, #fce7f3 52%, #e0e7ff 78%, #dbeafe 100%);
}

.celebration-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 9999px;
  color: #db2777;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 45px -20px rgba(236, 72, 153, 0.35);
  animation: celebration-badge-bounce 2.8s ease-in-out infinite;
}

.celebration-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.7;
}

.celebration-glow--one {
  top: -3rem;
  left: -2rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
  animation: celebration-float 8s ease-in-out infinite;
}

.celebration-glow--two {
  right: -2rem;
  bottom: -3rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(250,204,21,0.42) 0%, rgba(250,204,21,0) 70%);
  animation: celebration-float 10s ease-in-out infinite reverse;
}

.celebration-glow--three {
  top: 25%;
  right: 18%;
  width: 6rem;
  height: 6rem;
  background: radial-gradient(circle, rgba(96,165,250,0.32) 0%, rgba(96,165,250,0) 70%);
  animation: celebration-float 6s ease-in-out infinite;
}

.celebration-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.celebration-confetti__piece {
  position: absolute;
  top: -12%;
  width: 0.7rem;
  height: 1.1rem;
  border-radius: 9999px;
  opacity: 0;
  animation: confetti-fall 3.8s linear infinite;
}

.celebration-confetti__piece:nth-child(1) { left: 8%; animation-delay: -0.2s; }
.celebration-confetti__piece:nth-child(2) { left: 16%; animation-delay: -1.5s; }
.celebration-confetti__piece:nth-child(3) { left: 24%; animation-delay: -0.8s; }
.celebration-confetti__piece:nth-child(4) { left: 34%; animation-delay: -2.2s; }
.celebration-confetti__piece:nth-child(5) { left: 42%; animation-delay: -1.1s; }
.celebration-confetti__piece:nth-child(6) { left: 50%; animation-delay: -2.9s; }
.celebration-confetti__piece:nth-child(7) { left: 58%; animation-delay: -0.6s; }
.celebration-confetti__piece:nth-child(8) { left: 66%; animation-delay: -2.5s; }
.celebration-confetti__piece:nth-child(9) { left: 72%; animation-delay: -1.8s; }
.celebration-confetti__piece:nth-child(10) { left: 80%; animation-delay: -0.3s; }
.celebration-confetti__piece:nth-child(11) { left: 86%; animation-delay: -2.1s; }
.celebration-confetti__piece:nth-child(12) { left: 92%; animation-delay: -1.2s; }
.celebration-confetti__piece:nth-child(13) { left: 12%; animation-delay: -3.1s; }
.celebration-confetti__piece:nth-child(14) { left: 62%; animation-delay: -3.4s; }

.celebration-confetti__piece--1 { background: #fde047; }
.celebration-confetti__piece--2 { background: #fb7185; }
.celebration-confetti__piece--3 { background: #22c55e; }
.celebration-confetti__piece--4 { background: #38bdf8; }
.celebration-confetti__piece--5 { background: #f97316; }
.celebration-confetti__piece--6 { background: #c084fc; }
.celebration-confetti__piece--7 { background: #facc15; }

/* Audio recording states */
[data-chat-target="micButton"].recording {
  background-color: #ef4444;
  color: white;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

[data-chat-target="micButton"].recording:hover {
  background-color: #dc2626;
}

[data-chat-target="micButton"].processing {
  background-color: #4f46e5;
  color: white;
}

[data-chat-target="micButton"].error {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Audio player states */
[data-audio-player-target="button"].playing {
  color: #4f46e5;
}

[data-audio-player-target="button"].loading {
  color: #9ca3af;
  cursor: wait;
}

[data-audio-player-target="button"].error {
  color: #ef4444;
}

/* Pulse animation for recording */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes ai-thinking-bounce {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0) scale(0.92);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@keyframes evaluation-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.18);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(79, 70, 229, 0);
  }
}

@keyframes evaluation-loading-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

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

@keyframes celebration-float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    transform: translateY(-12px) translateX(8px) scale(1.06);
  }
}

@keyframes celebration-badge-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.04);
  }
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -10%, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(18px, 120vh, 0) rotate(420deg);
    opacity: 0;
  }
}