@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .audio-play-btn {
    @apply w-12 h-12 bg-azure-600 rounded-full border-none flex items-center justify-center cursor-pointer transition-colors;
  }
  .audio-play-btn:hover { @apply bg-azure-500; }
  .language-selector { @apply px-3 py-1 border border-azure-600 rounded-full text-azure-600 text-xs font-semibold bg-transparent; }
  .download-icon { @apply text-azure-600 text-lg font-bold; }
}
.ai-transcription-container { position: relative; }

.audio-player-container {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audio-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  min-height: 24px;
}

.waveform-bar {
  width: 4px;
  background: #8E8E93;
  border-radius: 2px;
  transition: height 0.3s ease;
}
.waveform-bar:nth-child(odd) { height: 12px; }
.waveform-bar:nth-child(even) { height: 18px; }
.waveform-bar:nth-child(3n) { height: 8px; }
.waveform-bar:nth-child(5n) { height: 22px; }

.audio-duration {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  min-width: 32px;
  text-align: center;
}

.download-btn {
  width: 48px;
  height: 48px;
  background: #f5f5f5;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 2;
}

.download-icon::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/assets/audio_download-44498358.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}