/* Studio Avansat: secțiunea Audio (fredonat, melodie exemplu). Folosește tokenii din avansat.css.
   Butonul roșu REC (.mv-rec) și „Vocea mea” sunt în my-voice.css. */

/* ---------- comutatorul de surse ---------- */

.av-audio-tabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.av-audio-tabs button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
}

.av-audio-tabs button > svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.av-audio-tabs button[aria-selected="true"] {
  color: var(--av-ink);
}

.av-audio-tabs:not(.has-thumb) button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 82, 46, 0.14), 0 6px 14px -8px rgba(16, 82, 46, 0.35);
}

.av-audio-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--thumb-w, 0);
  height: var(--thumb-h, 0);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 82, 46, 0.14), 0 6px 14px -8px rgba(16, 82, 46, 0.35);
  transform: translate(var(--thumb-x, 0), var(--thumb-y, 0));
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.av-audio-thumb.is-instant {
  transition: none;
}

/* Punctul verde: această sursă este folosită în piesă. */
.av-audio-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--av-green);
  box-shadow: 0 0 0 3px rgba(18, 184, 101, 0.16);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.av-audio-tabs button[data-in-use="1"] .av-audio-dot {
  opacity: 1;
  transform: none;
}

.av-tab-short {
  display: none;
}

/* Și cu panoul închis (inclusiv pe telefon, unde rezumatul lipsește) se vede că piesa
   pornește de la un sunet al utilizatorului. */
.av-audio.has-audio .av-panel-title::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--av-green);
  box-shadow: 0 0 0 3px rgba(18, 184, 101, 0.16);
}

/* ---------- conținutul ---------- */

.av-audio-pane {
  display: grid;
  gap: 14px;
  min-height: 132px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--av-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
}

.av-audio-pane:focus-visible {
  outline: 2px solid var(--av-focus);
  outline-offset: 3px;
}

.av-audio-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.av-audio-glyph {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--av-wash);
  color: var(--av-green-deep);
}

.av-audio-glyph svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.av-audio-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.av-audio-title {
  margin: 0;
  font-family: var(--av-font-title);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--av-ink);
}

.av-recorder-idle .av-audio-title,
.av-dropzone .av-audio-title {
  font-family: var(--font-ui, "Inter", sans-serif);
}

.av-audio-copy p {
  max-width: 54ch;
  margin: 0;
  color: var(--av-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Butonul închis, ca „Generează versuri” din câmpul de versuri. */
.av-audio-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px 0 16px;
  border: 1px solid #35453d;
  border-radius: 999px;
  background: #202825;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(18, 41, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.av-audio-action:hover {
  background: #2a3530;
}

.av-audio-action:active {
  transform: scale(0.97);
}

.av-audio-action[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.av-audio-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.av-audio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.av-audio-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--av-green-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.av-audio-link:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.av-audio-link svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.av-audio-link.is-danger {
  color: var(--av-error);
}

.av-audio-link:focus-visible,
.av-audio-action:focus-visible,
.av-clip-play:focus-visible {
  outline: 2px solid var(--av-focus);
  outline-offset: 3px;
}

.av-audio-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  color: var(--av-ink);
  font-size: 0.9rem;
}

.av-audio-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--av-ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

.av-audio-note.is-working .av-lyrics-spinner {
  display: inline-block;
}

.av-audio-note.is-error,
.av-audio-error {
  color: var(--av-error);
}

.av-audio-error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 560;
  line-height: 1.45;
}

.av-audio-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--av-ink-soft);
  font-size: 0.9rem;
}

.av-audio-loading .av-lyrics-spinner {
  display: inline-block;
}

.av-audio-switch {
  margin: 0;
}

.av-audio-switch.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.av-audio-field {
  display: grid;
  gap: 9px;
  container-type: inline-size;
}

.av-audio-influence {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}

.av-audio-influence button {
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap;
}

.av-audio-rights {
  margin: 0;
}

.av-audio-file-name { overflow-wrap: anywhere; }

/* ---------- înregistrarea (piesa centrală a secțiunii) ---------- */

.av-recorder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

/* Butonul REC este .mv-rec din my-voice.css; aici doar unda roșie cât timp înregistrăm. */
.av-recorder.is-live .av-live-wave span {
  background: #e0263f;
}

.av-recorder-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.av-recorder-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.av-recorder-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--av-ink);
  font-size: 0.9rem;
  font-weight: 560;
}

.av-recorder-time {
  flex: none;
  color: var(--av-ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.av-rec-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d63447;
  animation: av-rec-dot 1.1s ease-in-out infinite alternate;
}

@keyframes av-rec-dot {
  to { opacity: 0.3; }
}

/* Unda live: fiecare bară este un moment din ultimele secunde. */
.av-live-wave,
.av-clip-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
}

.av-live-wave span,
.av-clip-bars span {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h, 0.1) * 100%);
  min-height: 3px;
  border-radius: 2px;
  background: var(--av-green-line);
  transition: height 0.09s linear;
}

.av-live-wave span {
  opacity: 0.85;
}

/* ---------- player pentru fișierele salvate ---------- */

.av-clip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.av-clip-play {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--av-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--av-ink);
  cursor: pointer;
  box-shadow: 0 6px 14px -10px rgba(16, 82, 46, 0.5);
  transition: transform 0.12s ease, border-color 0.18s ease;
}

.av-clip-play:hover {
  border-color: rgba(18, 184, 101, 0.5);
}

.av-clip-play:active {
  transform: scale(0.94);
}

.av-clip-play svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.av-clip .av-i-pause,
.av-clip.is-playing .av-i-play {
  display: none;
}

.av-clip.is-playing .av-i-pause {
  display: block;
}

.av-clip-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.av-clip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.av-clip-title {
  overflow: hidden;
  color: var(--av-ink);
  font-size: 0.95rem;
  font-weight: 620;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.av-clip-time {
  flex: none;
  color: var(--av-ink-soft);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.av-clip-meta {
  color: var(--av-ink-faint);
  font-size: 0.8rem;
}

.av-clip-wave {
  position: relative;
}

.av-clip-wave .av-clip-bars {
  height: 34px;
}

.av-clip-wave .av-clip-bars span {
  background: rgba(31, 108, 65, 0.2);
  transition: none;
}

/* Partea deja ascultată se colorează de la stânga la dreapta. */
.av-clip-wave .av-clip-played {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--progress, 0)) * 100%) 0 0);
}

.av-clip-wave .av-clip-played span {
  background: var(--av-green-deep);
}

.av-clip.is-flat .av-clip-bars span {
  height: 22%;
}

/* ---------- încărcare ---------- */

.av-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.av-upload .av-lyrics-spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
}

.av-upload-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.av-upload-name {
  overflow: hidden;
  color: var(--av-ink);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.av-upload-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--av-wash-strong);
}

.av-upload-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--av-gradient);
  transition: width 0.2s ease;
}

/* ---------- melodia exemplu ---------- */

.av-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px dashed rgba(31, 108, 65, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.2s ease;
}

.av-dropzone.is-over {
  border-color: var(--av-green);
  background: rgba(18, 184, 101, 0.08);
}

.av-dropzone.is-locked {
  opacity: 0.55;
}

/* ---------- telefon ---------- */

@media (max-width: 860px) {
  .av-audio-tabs button {
    gap: 6px;
    min-height: 40px;
    padding: 0 6px;
    font-size: 0.875rem;
  }

  .av-tab-long {
    display: none;
  }

  .av-tab-short {
    display: inline;
  }

  .av-audio-pane {
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .av-audio-intro,
  .av-dropzone {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .av-audio-intro .av-audio-glyph,
  .av-dropzone .av-audio-glyph {
    display: none;
  }

  .av-audio-action {
    width: 100%;
    min-height: 50px;
  }

  .av-audio-title {
    font-size: 1.5rem;
  }

  .av-recorder-idle .av-audio-copy,
  .av-dropzone .av-audio-copy {
    container-type: inline-size;
  }

  .av-recorder-idle .av-audio-title,
  .av-dropzone .av-audio-title {
    font-size: clamp(12px, 8.5cqi, 18px);
    line-height: 1.2;
    white-space: nowrap;
  }

  .av-recorder {
    gap: 14px;
  }


  .av-recorder-line {
    flex-direction: column;
    gap: 2px;
  }

  .av-audio-influence button {
    padding: 0 clamp(1px, 0.7cqi, 4px);
    font-size: clamp(9px, 4cqi, 13px);
  }



}

@media (max-width: 340px) {
  .av-audio-tabs button > svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-rec-dot {
    animation: none !important;
  }

  .av-audio-thumb,
  .av-live-wave span {
    transition: none !important;
  }
}