/* ═══════════════════════════════════════════════════════════════════════════
   MY VOICE setup — SHARED component styles (my-voice.html + create.html popup)
   ═══════════════════════════════════════════════════════════════════════════
   Two things live here, and both are used by BOTH pages:

   1. `.mv-form-*` — the modal shell (overlay, panel, header, close, body, tip).
      Same recipe as brand-kits.css .bk-form-overlay/.bk-form-panel.
   2. `.mvs-*`    — the setup form itself, rendered by js/my-voice-setup.js.

   WHY THIS FILE EXISTS: these rules used to live inline in my-voice.html only.
   create.html loaded the same JS module with none of the CSS, so the popup there
   rendered as unstyled markup. Any future styling change to the setup form must
   land HERE — putting it back in a single page's <style> re-breaks the other one.

   Scoping note: the `.mvs-*` rules hang off `.mvs-root` (the element the module
   creates), NOT off `.mv-form-overlay` — so the form styles itself correctly
   wherever it is mounted, modal or not.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Setup modal shell — opened on demand (mount fresh on open, destroy on close) ── */
.mv-form-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0); backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center;
    transition: background .25s, backdrop-filter .25s;
}
.mv-form-overlay.open { background: rgba(0,0,0,.75); backdrop-filter: blur(8px); }
.mv-form-panel {
    background: var(--color-black-card); border: 1px solid var(--color-black-border);
    border-radius: 16px; width: min(620px, 95vw); max-height: 88vh;
    display: flex; flex-direction: column;
    transform: scale(.96) translateY(12px); opacity: 0;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.mv-form-overlay.open .mv-form-panel { transform: scale(1) translateY(0); opacity: 1; }
.mv-form-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--color-black-border); flex-shrink: 0;
}
.mv-form-header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.mv-form-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--color-black-hover); border: 1px solid var(--color-black-border);
    border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; transition: all .2s;
}
.mv-form-close:hover { color: var(--text-primary); border-color: var(--color-gold-dim); }
.mv-form-body { flex: 1; overflow-y: auto; padding: var(--space-xl); }
.mv-form-tip {
    font-size: .82rem; line-height: 1.6; color: var(--text-secondary);
    background: rgba(184,151,46,.05); border: 1px solid var(--color-gold-faint);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
}
.mv-form-tip strong { color: var(--color-gold); }
@media (max-width: 768px) { .mv-form-body { padding: 20px; } .mv-form-header { padding: 20px 20px 14px; } }

/* ── Setup form (.mvs-*) — guided 3-step layout built by js/my-voice-setup.js ── */
.mvs-root { display: flex; flex-direction: column; }
.mvs-root .mvs-step { padding-bottom: 22px; }
.mvs-root .mvs-step + .mvs-step { border-top: 1px solid rgba(255,255,255,.06); padding-top: 22px; }
.mvs-root .mvs-step:last-child { padding-bottom: 0; }
.mvs-root .mvs-step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.mvs-root .mvs-step-num {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 800; color: #0B0B0F; background: var(--color-gold);
}
.mvs-root .mvs-step-title { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em; }

.mvs-root .mvs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 16px 0 7px; display: block; }
.mvs-root .mvs-step-body > .mvs-label:first-child { margin-top: 0; }
/* Language + script block sits inside its own wrapper (hidden entirely in Upload
   mode), so the first-child margin reset above needs a nested-label variant too. */
.mvs-root .mvs-lang-script-wrap > .mvs-label:first-child { margin-top: 0; }
.mvs-root .mvs-lang-script-wrap { margin-bottom: 16px; }
.mvs-root .mvs-select, .mvs-root .mvs-input {
    width: 100%; background: #0f0f16; color: var(--text-primary);
    border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px 14px;
    font: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.mvs-root .mvs-select:focus, .mvs-root .mvs-input:focus {
    outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(184,151,46,.15);
}
/* Teleprompter-style read-aloud script */
.mvs-root .mvs-script {
    background: linear-gradient(180deg, rgba(184,151,46,.05), rgba(255,255,255,.02));
    border: 1px solid var(--color-gold-faint); border-left: 3px solid var(--color-gold);
    border-radius: 12px; padding: 16px 18px; line-height: 1.75; font-size: 15px;
    color: #d9d4ca; max-height: 200px; overflow: auto;
}
/* Record button — pill with a live dot */
.mvs-root .mvs-rec-row { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.mvs-root .mvs-btn {
    padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15);
    background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.mvs-root .mvs-btn:hover { border-color: var(--color-gold); }
.mvs-root .mvs-btn:disabled { opacity: .5; cursor: default; }
.mvs-root .mvs-btn-rec {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 14px; font-weight: 700;
    color: var(--color-gold); border-color: var(--color-gold); background: rgba(184,151,46,.06);
}
.mvs-root .mvs-btn-rec::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold); flex: 0 0 auto; }
.mvs-root .mvs-btn-rec.is-recording { color: #e5734d; border-color: #e5734d; background: rgba(229,115,77,.08); }
.mvs-root .mvs-btn-rec.is-recording::before { background: #e5734d; animation: mvsPulse 1s ease-in-out infinite; }
@keyframes mvsPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }
.mvs-root .mvs-timer { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 600; }
/* Take chip + inline playback — shown once a valid recording/upload exists.
   Dimmed as a unit while a re-record is in progress, so the old take visibly
   stays put (not lost) until a new one actually succeeds. */
.mvs-root .mvs-take-row { display: none; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; transition: opacity .2s ease; }
.mvs-root .mvs-take-row.mvs-take-dim { opacity: .5; }
.mvs-root .mvs-take-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    color: #6fd9a8; background: rgba(63,174,122,.12); border: 1px solid rgba(63,174,122,.45);
}
/* Native audio controls read too light against the dark card — invert+rotate is
   the cheap standard trick to bring them into the dark theme without a custom player. */
.mvs-root .mvs-take-player { height: 32px; max-width: 260px; flex: 1 1 200px; border-radius: 8px; filter: invert(90%) hue-rotate(180deg); }
/* Record-vs-upload toggle — the two panels are mutually exclusive, so it's never
   unclear whether both a recording AND an upload are needed. */
.mvs-root .mvs-mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.mvs-root .mvs-mode-btn {
    flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.02); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.mvs-root .mvs-mode-btn:hover { border-color: var(--color-gold-faint); color: var(--text-primary); }
.mvs-root .mvs-mode-btn.mvs-mode-active { border-color: var(--color-gold); color: var(--color-gold); background: rgba(184,151,46,.08); }
.mvs-root .mvs-mode-btn:disabled { opacity: .5; cursor: default; }
.mvs-root .mvs-upload-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.mvs-root .mvs-file {
    width: 100%; font-size: 13px; color: var(--text-secondary);
    border: 1px dashed rgba(255,255,255,.15); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); cursor: pointer;
    transition: border-color .2s ease;
}
.mvs-root .mvs-file:hover { border-color: var(--color-gold-faint); }
.mvs-root .mvs-status { margin-top: 14px; font-size: 13px; color: var(--text-secondary); min-height: 18px; }
.mvs-root .mvs-status:empty { display: none; }
.mvs-root .mvs-status.mvs-error { color: #e5734d; }
/* Consent — boxed */
.mvs-root .mvs-consent {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--text-secondary);
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px 16px; cursor: pointer;
}
.mvs-root .mvs-consent input[type="checkbox"] { accent-color: var(--color-gold); width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; cursor: pointer; }
.mvs-root .mvs-btn-save {
    width: 100%; margin-top: 18px; padding: 14px 30px; border-radius: 10px; border: none;
    background: var(--color-gold); color: #0B0B0F; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 22px rgba(184,151,46,.18); transition: filter .2s ease;
}
.mvs-root .mvs-btn-save:hover { filter: brightness(1.06); border: none; }