/* ═══════════════════════════════════════════════════════
   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-logo-img { height: 70px; width: auto; display: block; }
#vocal-mobile-page .brand-name  { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 28px; font-weight: 900; letter-spacing: -3px; line-height: 1; }
#vocal-mobile-page .brand-devis { color: #0F172A; }
#vocal-mobile-page .brand-vox   { color: #FF3300; }
#vocal-mobile-page .brand-tag   {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 10px; font-weight: 500; color: var(--text3);
    margin-top: 4px; letter-spacing: .31em; 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: visible;
}
#vocal-mobile-page .mic-hint {
    font-size: 17px; font-weight: 600;
    color: var(--text); text-align: center; line-height: 1.45;
    margin-top: 16px; margin-bottom: 6px;
    flex-shrink: 0;
}

/* ── Anneaux pulsants ────────────────────────────────── */
#vocal-mobile-page .pulse-wrap {
    position: relative;
    width: min(200px, 52vw); height: min(200px, 52vw);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
#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%;
    margin-top: 14px;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: visible;
}

/* Header label + bouton crayon sur le même axe */
#vocal-mobile-page .tr-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; flex-shrink: 0;
}
#vocal-mobile-page .tr-lbl {
    font-size: 13px; font-weight: 500; color: var(--text3);
    letter-spacing: .01em; line-height: 1;
    margin-top: -1px;
}

/* Bloc boutons d'action — toujours visible, ne déborde jamais */
#vocal-mobile-page .tr-actions {
    flex-shrink: 0;
    display: flex; flex-direction: column;
    margin-top: 14px;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 14px);
}

/* ── Zone texte — dynamique selon contenu ─────────────── */
#vocal-mobile-page .tr-box {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--r-md);
    padding: 16px;
    /* Hauteur dynamique : suit le contenu, scrollable après 42vh */
    height: auto;
    min-height: 80px;
    max-height: 42vh;
    overflow-y: auto;
    font-size: 14px; color: var(--text3); font-style: italic; line-height: 1.65;
    transition: border-color var(--tr), box-shadow var(--tr), color var(--tr);
}
#vocal-mobile-page .tr-box::-webkit-scrollbar { display: none; }
#vocal-mobile-page .tr-box.compact {
    height: 52px; min-height: 52px; max-height: 52px;
    display: flex; align-items: center; gap: 8px; overflow: hidden;
    margin-top: -1px;
}
#vocal-mobile-page .tr-box.live    { color: var(--text); font-style: normal; }
#vocal-mobile-page .tr-box.done    { min-height: 140px; overflow-y: auto; }
#vocal-mobile-page .tr-box.editing {
    border: 1.5px solid var(--v-accent);
    box-shadow: 0 0 0 3px rgba(255,107,0,.08);
    cursor: text; font-style: normal; color: var(--text);
    outline: none;
}

/* ── 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-manual {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 38px; margin-top: 15px;
    background: transparent; border: none;
    color: var(--v-text3); font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit; letter-spacing: .01em;
    transition: color var(--v-tr);
    min-height: unset; min-width: unset;
}
#vocal-mobile-page .btn-manual:active { color: var(--v-text2); }
#vocal-mobile-page .btn-manual svg { flex-shrink: 0; opacity: .55; }

/* Bouton "Nouvelle dictée" — identique au ghost mais avec icône micro */
#vocal-mobile-page #vocal-newrec-btn { gap: 8px; margin-top: 14px; }
#vocal-mobile-page #vocal-newrec-btn svg { opacity: .65; }

/* Ajustements 1px vers le haut — états enregistrement et pause */
#vocal-mobile-page #vocal-finish-btn { margin-top: 11px; }
#vocal-mobile-page #vocal-cancel-btn { margin-top: 9px; }

/* Espacement légèrement augmenté — état transcript terminé */
#vocal-mobile-page #vocal-next-btn { margin-top: 18px; }

#vocal-mobile-page .btn-edit {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px;
    background: transparent; border: 1.5px solid #0F172A;
    color: #0F172A; 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(15,23,42,.08); }

/* ── É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;
}
/* ── Haut fixe : brand + micro compact ──────────────── */
#vocal-mobile-page #p-home.done-screen .brand      { flex-shrink: 0; padding-top: 12px; }

/* mic-zone : overflow:visible pour ne pas bloquer le scroll de tr-box */
#vocal-mobile-page #p-home.done-screen .mic-zone {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    overflow: visible;
}
#vocal-mobile-page #p-home.done-screen .mic-hint  { flex-shrink: 0; font-size: 13px; margin-top: 0; margin-bottom: 6px; }

/* Micro compact */
#vocal-mobile-page #p-home.done-screen .pulse-wrap { flex-shrink: 0; width: 88px !important; height: 88px !important; margin-bottom: 6px; }
#vocal-mobile-page #p-home.done-screen .vocal-ring { display: none; }
#vocal-mobile-page #p-home.done-screen .p-glow     { display: none; }
#vocal-mobile-page #p-home.done-screen .mic-main   { width: 78px !important; height: 78px !important; }
#vocal-mobile-page #p-home.done-screen .mic-main svg { width: 30px; height: 30px; }

/* tr-area : flex:1 + overflow:visible (idem) */
#vocal-mobile-page #p-home.done-screen .tr-area {
    flex: 1; min-height: 0; width: 100%;
    display: flex; flex-direction: column;
    overflow: visible;
    margin-top: 6px;
}
#vocal-mobile-page #p-home.done-screen .tr-header  { flex-shrink: 0; margin-bottom: 8px; }

/* ── Zone texte scrollable ───────────────────────────── */
#vocal-mobile-page #p-home.done-screen .tr-box.done {
    flex: 1 1 0%;
    min-height: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Boutons bas — toujours visibles ─────────────────── */
#vocal-mobile-page #p-home.done-screen .tr-actions {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}
#vocal-mobile-page #p-home.done-screen .btn-validate { margin-top: 0; height: 48px; }
#vocal-mobile-page #p-home.done-screen .btn-ghost    { margin-top: 8px; height: 42px; margin-bottom: 0; }