/* Voiceover: a big script box on the left with the result under it, voices and the button on the right */
.vo-work { grid-template-columns: minmax(0, 1fr) 320px; }
.vo-main { display: grid; gap: 14px; min-width: 0; }
.vo-script { display: grid; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.vo-script:focus-within { border-color: var(--ink); outline: var(--ring); }
.vo-script textarea { display: block; width: 100%; min-height: 360px; padding: 20px 22px; border: 0; outline: none; resize: vertical; background: transparent; font: 400 17px/1.6 var(--sans); color: var(--ink); }
.vo-script textarea::placeholder { color: var(--muted-2); }
.vo-script-foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper-2, #f5f5f5); font: 500 12.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.vo-script-foot #vo-est { flex: 1; }
.vo-script-foot.is-full #vo-count { color: #c23a24; }
.vo-link { padding: 0; border: 0; background: none; font: 600 12.5px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.vo-result { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.vo-result audio { width: 100%; }
.vo-result .tool-stats { margin: 0; }
.vo-live { display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--sans); }
.vo-live #vo-live-text { flex: 1; }
.vo-wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.vo-wave i { width: 3px; height: 30%; border-radius: 2px; background: var(--orange); animation: vo-wave 0.9s ease-in-out infinite; }
.vo-wave i:nth-child(2) { animation-delay: -0.7s; } .vo-wave i:nth-child(3) { animation-delay: -0.4s; } .vo-wave i:nth-child(4) { animation-delay: -0.2s; } .vo-wave i:nth-child(5) { animation-delay: -0.55s; }
.vo-live.is-quiet .vo-wave i { animation: none; height: 30%; background: var(--muted-2); }
@keyframes vo-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .vo-wave i { animation: none; height: 60%; } }

/* the side panel, in blocks */
.vo-panel { display: grid; gap: 14px; align-content: start; }
.vo-block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.vo-block h3 { margin: 0; font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vo-block > .btn { width: 100%; }
.vo-block .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.vo-group { margin: 4px 0 -2px; font: 500 12px/1 var(--sans); color: var(--muted); }
.vo-voices { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.vo-voice { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.vo-voice:hover { border-color: rgba(14, 8, 7, 0.35); }
.vo-voice.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.vo-voice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vo-voice b { flex: 1; font: 600 14px/1.2 var(--sans); }
.vo-voice small { font: 400 12.5px/1 var(--sans); color: var(--muted); }
.vo-play { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-2, #f0efec); color: var(--ink); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.vo-play:hover, .vo-play.is-playing { background: var(--ink); color: #fff; }
.vo-play svg { width: 12px; height: 12px; fill: currentColor; }
.vo-download { display: grid; gap: 10px; }
.vo-download .btn { width: 100%; }

@media (max-width: 860px) {
  .vo-work { grid-template-columns: 1fr; }
  .vo-script textarea { min-height: 220px; font-size: 16px; padding: 16px; }
  .vo-voices { max-height: 300px; }
}

/* a long text, split into parts */
.vo-parts { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff7e8; font: 500 13px/1.2 var(--sans); order: -1; }
.vo-parts #vo-parts-text { flex: 1; }
.vo-parts .vo-link[disabled] { color: var(--muted-2); text-decoration: none; cursor: default; }
.vo-parts.is-new { animation: vo-flash 1.2s ease-out; }
@keyframes vo-flash { 0% { background: #ffd15c; } 100% { background: #fff7e8; } }
.vo-result #vo-next-cta { justify-self: start; }
.vo.is-busy .vo-script textarea { color: var(--muted); }

/* signed out, past the day's downloads: a free account */
.vo-gate { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #fff7e8; }
.vo-gate b { font: 600 15px/1.2 var(--sans); }
.vo-gate p { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.vo-gate .btn { width: 100%; text-align: center; }
.vo-gate .vo-link { justify-self: center; }