/* ═══════════════════════════════════════════════════════
   DEVISVOX — CSS Interface Vocale Mobile V2
   Toutes les règles scopées sous #vocal-mobile-page
   pour éviter tout conflit avec la production.
   Source : design v2/vocal/styles.css
   ═══════════════════════════════════════════════════════ */

/* ── Variables V2 isolées — nommage du designer (--v-*) ── */
#vocal-mobile-page {
    --v-accent:  #FF6B00;
    --v-success: #10B981;
    --v-warning: #F59E0B;
    --v-text:    #0F172A;
    --v-text2:   #475569;
    --v-text3:   #94A3B8;
    --v-border:  #E2E8F0;
    --v-border2: #CBD5E1;
    --v-bg:      #F9FAFB;
    --v-r-sm:    14px;
    --v-r-md:    18px;
    --v-tr:      .18s ease;
    /* Alias courts pour la lisibilité interne */
    --accent:  var(--v-accent);
    --success: var(--v-success);
    --warning: var(--v-warning);
    --text:    var(--v-text);
    --text2:   var(--v-text2);
    --text3:   var(--v-text3);
    --r-sm:    var(--v-r-sm);
    --r-md:    var(--v-r-md);
    --tr:      var(--v-tr);

    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Reset boîte uniquement dans la page V2 */
#vocal-mobile-page *,
#vocal-mobile-page *::before,
#vocal-mobile-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Structure page ───────────────────────────────────── */
#vocal-mobile-page .page {
    display: flex;
    flex-direction: column;
    height: 100%;           /* remplit #vocal-mobile-page exactement */
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────── */
#vocal-mobile-page .brand {
    padding: 12px 24px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#vocal-mobile-page .brand-name  { font-size: 28px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
#vocal-mobile-page .brand-devis { color: var(--text); }
#vocal-mobile-page .brand-vox   { color: var(--accent); }
#vocal-mobile-page .brand-tag   {
    font-size: 10px; font-weight: 600; color: var(--text3);
    margin-top: 4px; letter-spacing: .10em; text-transform: uppercase;
}

#vocal-mobile-page .bell-btn {
    position: relative;
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 50%;
    color: var(--text2); flex-shrink: 0;
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .bell-dot {
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    border: 1.5px solid var(--bg);
}

/* ── Zone micro ──────────────────────────────────────── */
#vocal-mobile-page .mic-zone {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 24px 12px;
    flex: 1;
    min-height: 0;          /* permet la compression flex */
    overflow: hidden;
}
#vocal-mobile-page .mic-hint {
    font-size: 17px; font-weight: 600;
    color: var(--text); text-align: center; line-height: 1.45;
    margin-top: 14px; margin-bottom: 6px;  /* réduit pour tenir sans scroll */
    flex-shrink: 0;
}

/* ── Anneaux pulsants ────────────────────────────────── */
#vocal-mobile-page .pulse-wrap {
    position: relative;
    width: min(200px, 52vw); height: min(200px, 52vw);  /* s'adapte aux petits écrans */
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}
#vocal-mobile-page .p-glow {
    position: absolute; width: 176px; height: 176px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,0,.16) 0%, transparent 68%);
}
#vocal-mobile-page .vocal-ring {
    position: absolute; border-radius: 50%;
    border: 1.5px solid rgba(255,107,0,.22);
    animation: vcmRipple 3s ease-out infinite;
}
#vocal-mobile-page .vocal-ring:nth-child(2) { width: 136px; height: 136px; animation-delay: 0s;   }
#vocal-mobile-page .vocal-ring:nth-child(3) { width: 166px; height: 166px; animation-delay: .7s;  }
#vocal-mobile-page .vocal-ring:nth-child(4) { width: 196px; height: 196px; animation-delay: 1.4s; }
#vocal-mobile-page .vocal-ring:nth-child(5) { width: 220px; height: 220px; animation-delay: 2.1s; }
@keyframes vcmRipple {
    0%   { transform: scale(.88); opacity: .75; }
    100% { transform: scale(1.08); opacity: 0;  }
}
#vocal-mobile-page .vocal-ring.fast { animation-duration: .9s; border-color: rgba(255,107,0,.35); }

/* ── Bouton micro ────────────────────────────────────── */
#vocal-mobile-page .mic-main {
    width: 116px; height: 116px; border-radius: 50%;
    border: 5px solid rgba(255,255,255,.85);
    background: radial-gradient(circle at 36% 28%, #FF9944 0%, var(--accent) 50%, #D85500 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px rgba(255,107,0,.13), 0 10px 38px rgba(255,107,0,.52), inset 0 3px 8px rgba(255,255,255,.28);
    z-index: 2; cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr);
    /* Annuler le min-height de mobile.css */
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .mic-main:active { transform: scale(.95); }
#vocal-mobile-page .mic-main svg    { width: 46px; height: 46px; }
#vocal-mobile-page .mic-main.rec {
    box-shadow: 0 0 0 5px rgba(255,107,0,.22), 0 10px 52px rgba(255,107,0,.72), inset 0 3px 8px rgba(255,255,255,.28);
}
#vocal-mobile-page .mic-main.paused {
    opacity: .72;
    box-shadow: 0 0 0 5px rgba(255,107,0,.10), 0 6px 22px rgba(255,107,0,.30), inset 0 3px 8px rgba(255,255,255,.28);
    outline: 2.5px dashed rgba(255,255,255,.60); outline-offset: -14px;
}

/* Icônes micro / pause / play */
#vocal-mobile-page .btn-ico-pause,
#vocal-mobile-page .btn-ico-play                     { display: none; }
#vocal-mobile-page .mic-main.rec   .btn-ico-mic      { display: none; }
#vocal-mobile-page .mic-main.rec   .btn-ico-pause    { display: block; }
#vocal-mobile-page .mic-main.paused .btn-ico-pause,
#vocal-mobile-page .mic-main.paused .btn-ico-mic     { display: none; }
#vocal-mobile-page .mic-main.paused .btn-ico-play    { display: block; }

/* ── Ondes audio ─────────────────────────────────────── */
#vocal-mobile-page .vocal-rec-wave { display: flex; align-items: center; gap: 3px; height: 28px; }
#vocal-mobile-page .vocal-rec-wave span {
    display: inline-block; width: 3px; border-radius: 2px;
    background: var(--accent);
    animation: vcmWave .8s ease-in-out infinite alternate;
}
#vocal-mobile-page .vocal-rec-wave span:nth-child(1){height:8px;  animation-delay:.00s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(2){height:18px; animation-delay:.10s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(3){height:26px; animation-delay:.20s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(4){height:20px; animation-delay:.15s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(5){height:14px; animation-delay:.05s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(6){height:12px; animation-delay:.25s}
#vocal-mobile-page .vocal-rec-wave span:nth-child(7){height:5px;  animation-delay:.10s}
#vocal-mobile-page .vocal-rec-wave.paused span { background: var(--text3); animation: none; height: 10px !important; }
@keyframes vcmWave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

/* ── Points IA (transcription en cours) ─────────────── */
#vocal-mobile-page .ia-dots { display: flex; gap: 7px; justify-content: center; padding: 12px 0; }
#vocal-mobile-page .ia-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    animation: vcmDot 1s ease-in-out infinite;
}
#vocal-mobile-page .ia-dots span:nth-child(2) { animation-delay: .15s; }
#vocal-mobile-page .ia-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes vcmDot {
    0%, 100% { opacity: .3; transform: translateY(0);   }
    50%       { opacity: 1;   transform: translateY(-5px); }
}

/* ── Zone retranscription ────────────────────────────── */
#vocal-mobile-page .tr-area {
    width: 100%; position: relative;
    padding: 0 0 12px; margin-top: 12px;
    flex: 1; min-height: 0;            /* prend l'espace restant */
    display: flex; flex-direction: column;
    overflow: hidden;
}
#vocal-mobile-page .tr-lbl {
    font-size: 13px; font-weight: 500; color: var(--text3);
    margin-bottom: 6px; letter-spacing: .01em;
    flex-shrink: 0;
}
#vocal-mobile-page .tr-box {
    background: #F2F2F7; border-radius: var(--r-md);
    padding: 14px;
    flex: 1; min-height: 52px; max-height: none;   /* hauteur flexible */
    overflow-y: auto;
    font-size: 14px; color: var(--text3); font-style: italic; line-height: 1.65;
    transition: all var(--tr);
}
#vocal-mobile-page .tr-box::-webkit-scrollbar { display: none; }
#vocal-mobile-page .tr-box.compact {
    min-height: 52px; max-height: 52px;
    display: flex; align-items: center; gap: 8px; overflow: hidden;
}
#vocal-mobile-page .tr-box.live    { color: var(--text); font-style: normal; background: #F8F8F8; }
#vocal-mobile-page .tr-box.done    { min-height: 60px; overflow-y: auto; }
#vocal-mobile-page .tr-box.editing {
    background: #fff; border: 1.5px solid var(--success);
    box-shadow: 0 0 0 3px rgba(16,185,129,.10);
    cursor: text; font-style: normal; color: var(--text);
}

/* ── Boutons d'action ────────────────────────────────── */
#vocal-mobile-page .btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border: none; border-radius: var(--r-sm);
    color: #fff; cursor: pointer; font-family: inherit;
    transition: transform var(--tr), opacity var(--tr);
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .btn-primary:active { transform: scale(.98); opacity: .9; }

#vocal-mobile-page .btn-generate {
    height: 46px; margin-top: 12px;
    background: var(--success); font-size: 14px; font-weight: 700;
}
#vocal-mobile-page .btn-validate {
    height: 52px; margin-top: 12px; background: var(--success);
    font-size: 15px; font-weight: 900; letter-spacing: .01em;
    box-shadow: 0 4px 16px rgba(16,185,129,.38);
}
#vocal-mobile-page .btn-ghost {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 44px; margin-top: 10px;
    background: transparent; border: 1.5px solid var(--border2);
    border-radius: var(--r-sm); color: var(--text2);
    font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background var(--tr);
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .btn-ghost:hover  { background: #F1F5F9; }
#vocal-mobile-page .btn-ghost:active { opacity: .7; }

#vocal-mobile-page .btn-edit {
    position: absolute; top: 4px; right: 26px;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(16,185,129,.10); border: 1.5px solid rgba(16,185,129,.28);
    color: #10B981; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tr);
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .btn-edit:active { background: rgba(16,185,129,.22); }

/* ── État done-screen ────────────────────────────────── */
#vocal-mobile-page.done-screen #p-home,
#vocal-mobile-page #p-home.done-screen {
    height: calc(100dvh - var(--bottom-nav-height, 70px));
    display: flex; flex-direction: column; overflow: hidden;
}
#vocal-mobile-page #p-home.done-screen .brand      { flex-shrink: 0; padding-top: 12px; }
#vocal-mobile-page #p-home.done-screen .mic-zone   { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#vocal-mobile-page #p-home.done-screen .mic-hint   { flex-shrink: 0; margin-bottom: 8px; }
#vocal-mobile-page #p-home.done-screen .pulse-wrap { flex-shrink: 0; margin-bottom: 4px; }
#vocal-mobile-page #p-home.done-screen .tr-area    { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0 0 10px; }
#vocal-mobile-page #p-home.done-screen .tr-lbl     { flex-shrink: 0; }
#vocal-mobile-page #p-home.done-screen .tr-box.done {
    flex: 1; height: auto !important; min-height: 50px; max-height: none; overflow-y: auto;
}
#vocal-mobile-page #p-home.done-screen .btn-validate { flex-shrink: 0; margin-top: 14px; }