/*
 * Custom TTS Player — tts-player.css
 * Clean, podcast-style audio player. Dark card, warm accent.
 * Version 1.0.0
 */

/* ─────────────────────────────────────────────────────────────
   CSS VARIABLES
───────────────────────────────────────────────────────────── */
.ctts-player {
  --ctts-bg:          #fff;
  --ctts-surface:     #16213e;
  --ctts-accent:      #0dcaf0;
  --ctts-accent-2:    #0f3460;
  --ctts-text:        #eaeaea;
  --ctts-muted:       #8892a4;
  --ctts-bar-bg:      #2a2d4e;
  --ctts-bar-fill:    #0dcaf0;
  --ctts-radius:      16px;
  --ctts-shadow:      0 8px 32px rgba(0,0,0,0.38);
  --ctts-font:        'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   PLAYER CARD
───────────────────────────────────────────────────────────── */
.ctts-player {
  font-family:    var(--ctts-font);
  background:     var(--ctts-bg);
  border-radius:  var(--ctts-radius);
  box-shadow:     var(--ctts-shadow);
  padding:        22px 24px 20px;
  max-width:      680px;
  margin:         0 0 28px 0;
  color:          var(--ctts-text);
  position:       relative;
  overflow:       hidden;
  border:         1px solid rgba(255,255,255,0.06);
}

/* Subtle gradient overlay in top-right */
.ctts-player::before {
  content:          '';
  position:         absolute;
  top:              -40px;
  right:            -40px;
  width:            180px;
  height:           180px;
  border-radius:    50%;
  background:       radial-gradient(circle, rgba(233,69,96,0.18) 0%, transparent 70%);
  pointer-events:   none;
}

/* ─────────────────────────────────────────────────────────────
   HEADER ROW
───────────────────────────────────────────────────────────── */
.ctts-header {
  display:          flex;
  align-items:      center;
  gap:              12px;
  margin-bottom:    16px;
}

.ctts-icon {
  width:            38px;
  height:           38px;
  background:       var(--ctts-accent);
  border-radius:    10px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  box-shadow:       0 4px 14px rgba(233,69,96,0.4);
}

.ctts-icon svg {
  width:  20px;
  height: 20px;
  color:  #fff;
}

.ctts-title-wrap {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.ctts-label {
  font-size:      0.85rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--ctts-muted);
}

.ctts-selected-badge {
  font-size:      0.78rem;
  background:     var(--ctts-accent);
  color:          #fff;
  padding:        2px 8px;
  border-radius:  20px;
  font-weight:    600;
  width:          fit-content;
}

.ctts-unsupported-msg {
  font-size:   0.82rem;
  color:       #ffb347;
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────
   WAVEFORM ANIMATION
───────────────────────────────────────────────────────────── */
.ctts-waveform {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  height:          40px;
  margin-bottom:   14px;
}

.ctts-bar {
  display:          inline-block;
  width:            3px;
  height:           6px;
  background:       var(--ctts-bar-bg);
  border-radius:    2px;
  transition:       background 0.3s;
}

/* Animate bars only when playing */
.ctts-waveform--active .ctts-bar {
  background:       var(--ctts-accent);
  animation:        ctts-wave 1.1s ease-in-out infinite alternate;
}

@keyframes ctts-wave {
  0%   { height: 4px;  opacity: 0.5; }
  50%  { height: 22px; opacity: 1;   }
  100% { height: 8px;  opacity: 0.7; }
}

/* Odd bars get a slightly different animation so it looks natural */
.ctts-waveform--active .ctts-bar:nth-child(odd) {
  animation-name: ctts-wave-alt;
}

@keyframes ctts-wave-alt {
  0%   { height: 14px; opacity: 0.8; }
  50%  { height: 5px;  opacity: 0.5; }
  100% { height: 20px; opacity: 1;   }
}

/* ─────────────────────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────────────────────── */
.ctts-progress-wrap {
  margin-bottom: 18px;
}

.ctts-progress-bg {
  position:      relative;
  height:        5px;
  background:    var(--ctts-bar-bg);
  border-radius: 10px;
  cursor:        pointer;
  margin-bottom: 8px;
  overflow:      visible;
}

.ctts-progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--ctts-accent), #ff6b6b);
  border-radius: 10px;
  width:         0%;
  transition:    width 0.25s linear;
  pointer-events: none;
}

.ctts-progress-thumb {
  position:      absolute;
  top:           50%;
  left:          0%;
  transform:     translate(-50%, -50%);
  width:         14px;
  height:        14px;
  background:    #fff;
  border:        3px solid var(--ctts-accent);
  border-radius: 50%;
  box-shadow:    0 2px 8px rgba(233,69,96,0.5);
  transition:    left 0.25s linear;
  pointer-events: none;
}

.ctts-progress-bg:hover .ctts-progress-thumb {
  transform: translate(-50%, -50%) scale(1.25);
}

.ctts-time-row {
  display:         flex;
  justify-content: space-between;
  font-size:       0.75rem;
  color:           var(--ctts-muted);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   CONTROLS ROW
───────────────────────────────────────────────────────────── */
.ctts-controls {
  display:      flex;
  align-items:  center;
  gap:          10px;
  flex-wrap:    wrap;
}

/* Base button */
.ctts-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  cursor:          pointer;
  border-radius:   50%;
  transition:      background 0.2s, transform 0.15s, box-shadow 0.2s;
  flex-shrink:     0;
  background:      transparent;
  color:           var(--ctts-text);
  outline:         none;
}

.ctts-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(233,69,96,0.5);
}

/* Play / Pause — large primary button */
.ctts-btn-play {
  width:       54px;
  height:      54px;
  background:  var(--ctts-accent);
  box-shadow:  0 4px 18px rgba(233,69,96,0.45);
  color:       #fff;
  margin:      0 4px;
}

.ctts-btn-play:hover {
  background:  #ee752b;
  transform:   scale(1.07);
  box-shadow:  0 6px 22px rgba(233,69,96,0.55);
}

.ctts-btn-play:active {
  transform: scale(0.96);
}

.ctts-btn-play svg {
  width:  24px;
  height: 24px;
}

/* Loading spinner */
.ctts-btn-play.ctts-loading .ctts-icon-loading {
  animation: ctts-spin 0.9s linear infinite;
}

@keyframes ctts-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Skip buttons */
.ctts-btn-skip {
  width:   38px;
  height:  38px;
  color:   var(--ctts-muted);
  background: rgba(255,255,255,0.05);
}

.ctts-btn-skip:hover {
  color:       var(--ctts-text);
  background:  rgba(255,255,255,0.1);
}

.ctts-btn-skip svg {
  width:  20px;
  height: 20px;
}

/* Speed button */
.ctts-btn-speed {
  height:         34px;
  padding:        0 12px;
  border-radius:  20px;
  font-size:      0.8rem;
  font-weight:    700;
  color:          var(--ctts-accent);
  border:         1.5px solid var(--ctts-accent);
  background:     rgba(233,69,96,0.08);
  letter-spacing: 0.04em;
}

.ctts-btn-speed:hover {
  background: rgba(233,69,96,0.2);
}

/* Read-selected button */
.ctts-btn-text {
  width:   36px;
  height:  36px;
  color:   var(--ctts-muted);
  background: rgba(255,255,255,0.05);
  margin-left: auto;
}

.ctts-btn-text:hover {
  color:      var(--ctts-text);
  background: rgba(255,255,255,0.1);
}

.ctts-btn-text svg {
  width:  18px;
  height: 18px;
}

/* ─────────────────────────────────────────────────────────────
   VOICE SELECT
───────────────────────────────────────────────────────────── */
.ctts-select {
  height:           34px;
  padding:          0 10px;
  border-radius:    20px;
  border:           1.5px solid var(--ctts-bar-bg);
  background:       var(--ctts-surface);
  color:            var(--ctts-muted);
  font-size:        0.78rem;
  font-family:      var(--ctts-font);
  cursor:           pointer;
  outline:          none;
  max-width:        160px;
  text-overflow:    ellipsis;
  transition:       border-color 0.2s;
}

.ctts-select:hover,
.ctts-select:focus {
  border-color: var(--ctts-accent);
  color:        var(--ctts-text);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ctts-player {
    padding:       16px 16px 14px;
    border-radius: 12px;
  }

  .ctts-controls {
    gap: 8px;
  }

  .ctts-select {
    max-width: 110px;
    font-size: 0.72rem;
  }

  .ctts-btn-play {
    width:  48px;
    height: 48px;
  }
}