/* ═══════════════════════════════════════
   UTEACH.AI — Custom Styles & Animations
   Tailwind handles layout; this file adds
   animations, effects, and edge cases.
   ═══════════════════════════════════════ */

/* ── Base ── */
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(108, 108, 214, 0.15); }

/* ── Spring Easing Tokens ── */
:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Tabs ── */
.tab { color: rgb(161,161,170); cursor: pointer; }
.tab.active {
  background: white; color: rgb(24,24,27);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .tab { color: rgb(113,113,122); }
.dark .tab.active {
  background: rgb(39,39,42); color: rgb(244,244,245);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.tab:not(.active):hover { color: rgb(113,113,122); }
.dark .tab:not(.active):hover { color: rgb(161,161,170); }

/* ── Result Tabs ── */
.result-tab { color: rgb(161,161,170); cursor: pointer; }
.result-tab.active {
  background: white; color: rgb(24,24,27);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .result-tab { color: rgb(113,113,122); }
.dark .result-tab.active {
  background: rgb(39,39,42); color: rgb(244,244,245);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.result-tab:not(.active):hover { color: rgb(113,113,122); }
.dark .result-tab:not(.active):hover { color: rgb(161,161,170); }

/* ── Dropzone ── */
.dropzone-active {
  border-color: rgb(108,108,214) !important;
  background: rgba(108,108,214,0.02) !important;
}
.dark .dropzone-active {
  border-color: rgba(108,108,214,0.35) !important;
  background: rgba(108,108,214,0.04) !important;
}

/* ── Record Button ── */
.record-btn .pulse-ring {
  position: absolute; inset: -3px;
  border-radius: 9999px;
  border: 1.5px solid rgba(239,68,68,0.3);
  opacity: 0; pointer-events: none;
}
.record-btn.recording .pulse-ring {
  animation: pulse-expand 2s var(--ease-out) infinite;
}
@keyframes pulse-expand {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Button glow is driven by JS volume-reactive boxShadow */

/* ── Waveform Container Glow While Recording ── */
.recording-glow {
  box-shadow: inset 0 0 16px rgba(239,68,68,0.06), 0 0 10px rgba(239,68,68,0.08);
  background: rgba(239,68,68,0.02) !important;
}
.dark .recording-glow {
  box-shadow: inset 0 0 16px rgba(239,68,68,0.04), 0 0 10px rgba(239,68,68,0.06);
  background: rgba(239,68,68,0.03) !important;
}

/* ── Submit Button ── */
.submit-btn:not(:disabled):hover { transform: translateY(-1px); }
.submit-btn:not(:disabled):active { transform: translateY(0); }

/* ── Processing Stages ── */
.proc-stage { opacity: 0.35; }
.proc-stage.proc-active {
  opacity: 1;
  background: rgba(108,108,214,0.04);
}
.dark .proc-stage.proc-active { background: rgba(108,108,214,0.06); }
.proc-stage.proc-active .proc-icon {
  animation: proc-pulse 2s ease-in-out infinite;
}
@keyframes proc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.proc-stage.proc-done { opacity: 1; }
.proc-stage.proc-done .proc-check {
  animation: checkPop 0.4s var(--ease-spring) forwards;
}
@keyframes checkPop {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Step Section Transitions ── */
.step-section {
  will-change: opacity, transform;
}
.step-leaving {
  animation: stepLeave 0.3s var(--ease-in-out) forwards;
}
.step-entering {
  animation: stepEnter 0.45s var(--ease-out) forwards;
}
@keyframes stepLeave {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes stepEnter {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Tab Panel Crossfade ── */
.tab-panel {
  will-change: opacity, transform;
}
.tab-panel-enter {
  animation: panelIn 0.3s var(--ease-out) forwards;
}
@keyframes panelIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Modal ── */
.modal-entering .modal-backdrop-inner {
  animation: backdropIn 0.25s ease forwards;
}
.modal-leaving .modal-backdrop-inner {
  animation: backdropOut 0.2s ease forwards;
}
.modal-entering .modal-card {
  animation: modalIn 0.35s var(--ease-spring) forwards;
}
.modal-leaving .modal-card {
  animation: modalOut 0.2s var(--ease-in-out) forwards;
}
@keyframes backdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalIn {
  0%   { opacity: 0; transform: scale(0.95) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalOut {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.97) translateY(4px); }
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-fadeIn  { animation: fadeIn 0.45s var(--ease-out) forwards; }
.animate-scaleIn { animation: scaleIn 0.4s var(--ease-spring) forwards; }

/* ── Custom Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.14); }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ── Theme Transitions ── */
html.dark { color-scheme: dark; }

/* ── Focus ── */
:focus-visible {
  outline: 1.5px solid rgb(108,108,214);
  outline-offset: 2px;
  border-radius: 6px;
}