/* Custom styles beyond Tailwind utility classes */
h1, h2, h3 { font-family: 'Noto Sans TC', system-ui, sans-serif; }

.lesson-node {
  transition: transform 0.15s ease;
}
.lesson-node:hover { transform: scale(1.08); }

.progress-bar-bg { background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.progress-bar-fill { background: linear-gradient(90deg, #6366f1, #818cf8); height: 100%; transition: width 0.4s ease; }

.spinner {
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  width: 2rem; height: 2rem;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.gen-icon-pulse { animation: genIconPulse 1.6s ease-in-out infinite; }
@keyframes genIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.chat-bubble-user { background: #6366f1; color: white; border-radius: 16px 16px 4px 16px; }
.chat-bubble-ai { background: #f1f5f9; color: #1e293b; border-radius: 16px 16px 16px 4px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }