/* Only what Tailwind cannot express inline: keyframes and one texture. */

/* Tailwind's display utilities (.flex, .grid) outrank the UA [hidden] rule,
   so every hidden view would stay on screen without this. */
[hidden] { display: none !important; }

@keyframes ping-slow {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.animate-ping-slow { animation: ping-slow 1.5s ease-out infinite; }

.animate-ping-dot { animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}

@keyframes level {
  0%, 100% { transform: scaleY(0.18); }
  50%      { transform: scaleY(1); }
}
.level {
  display: block;
  width: 5px;
  height: 34px;
  background: #1f4ed8;
  transform-origin: bottom;
  transform: scaleY(0.18);
  transition: transform 90ms linear;
}
.level--idle { animation: level 0.7s ease-in-out infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
[data-view="result"]:not([hidden]) { animation: fade-up 0.35s ease both; }

.waveform {
  background: repeating-linear-gradient(90deg, #c9c7c0 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
}

/* Tab chrome — same rule for both tabs, state driven by aria-selected. */
.tab {
  flex: 0 0 auto;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid #e5e3dd;
  background: #f2f1ec;
  color: #79798a;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.tab:hover { color: #17171a; }
.tab[aria-selected="true"] {
  background: #fff;
  color: #17171a;
  border-bottom-color: #fff;
  z-index: 2;
}

.dropzone--over {
  border-color: #1f4ed8;
  background: #f7f8fe;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}