/* ================================================================
   newvoice_layout_live.css — Layout NewVoice
   ================================================================ */

/* ── Overrides globaux ── */
body {
    display: block !important;
    min-height: 100dvh;
    background: #f3f4f6 !important;
}
.container {
    max-width: none !important; width: 100% !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 !important; min-height: 0 !important;
}

/* ── nv-lang-flags : fond gris comme indexfaculte ── */
#nv-lang-flags {
    background: linear-gradient(160deg,#f0f0f0 0%,#d8d8d8 100%) !important;
    color: #333 !important;
}

/* ================================================================
   LAYOUT FIXE — desktop + tablette + landscape
   ================================================================ */

#nv-profile-bubble {
    position: fixed !important;
    left: 19px !important; top: 7px !important;
    width: 110px !important; height: 110px !important;
    z-index: 36 !important;
    pointer-events: auto !important; cursor: pointer !important;
}

#micIcon {
    position: fixed !important;
    left: 93px !important; top: 65px !important;
    font-size: 38px !important; z-index: 37 !important;
    width: 44px !important; height: 44px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
}

#status {
    position: fixed !important;
    top: 119px !important; left: 19px !important;
    width: 118px !important; text-align: right !important;
    z-index: 31 !important; font-size: 11px !important;
}

#nvTranstextePopup {
    position: fixed !important;
    left: 140px !important; top: 7px !important;
    width: 430px !important; max-height: 230px !important;
    overflow: hidden !important; z-index: 34 !important;
}

#transcript {
    width: 100% !important;
    height: 130px !important; max-height: 130px !important;
    resize: none !important; overflow-y: auto !important;
    font-size: 15px !important; line-height: 1.45 !important;
}

#nv-actions-row {
    position: relative !important; left: auto !important; bottom: auto !important;
    display: flex !important; gap: 8px !important;
    z-index: 2 !important; margin-top: 6px !important;
}

#nvResultPopup {
    position: fixed !important;
    left: 140px !important; top: 245px !important;
    width: 430px !important;
    max-height: calc(100vh - 255px) !important;
    overflow: hidden !important; z-index: 22 !important;
}

#nvResultPopup #nvLngResultWrap {
    position: relative !important;
    left: auto !important; top: auto !important; width: 100% !important;
}

#translation {
    width: 100% !important;
    height: 100px !important; max-height: 100px !important;
    resize: none !important; overflow-y: auto !important;
    font-size: 15px !important; line-height: 1.45 !important;
}

/* ================================================================
   LANDSCAPE MOBILE (hauteur ≤ 500px)
   Grille JS : A1=bulle+micro+statut, A2=barre langues, B1=transcription, B2=traduction
   ================================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {

    /* A1 : éléments sur une ligne */
    #_nvLS_a1 #nv-profile-bubble {
        position: relative !important; left: auto !important; top: auto !important;
        width: 44px !important; height: 44px !important; display: inline-block !important;
    }
    #_nvLS_a1 #micIcon {
        position: relative !important; left: auto !important; top: auto !important;
        font-size: 20px !important; width: 24px !important; height: 24px !important;
        display: inline-flex !important;
    }
    #_nvLS_a1 #status {
        position: relative !important; left: auto !important; top: auto !important;
        font-size: 9px !important; width: auto !important;
        text-align: left !important; display: inline-block !important;
    }

    /* B1/B2 : remplissent la cellule */
    #_nvLS_b1 #nvTranstextePopup,
    #_nvLS_b2 #nvResultPopup {
        position: relative !important; left: auto !important; top: auto !important;
        width: 100% !important; height: 100% !important;
        max-height: none !important; overflow: hidden !important;
        margin: 0 !important; box-sizing: border-box !important;
    }
    #_nvLS_b1 #transcript,
    #_nvLS_b2 #translation {
        height: calc(100dvh - 100px) !important;
        max-height: none !important; min-height: 40px !important;
        font-size: 13px !important; resize: none !important;
    }
    /* Masquer éléments non essentiels */
    #_nvLS_b2 #nvListenFigurineMain,
    #_nvLS_b2 #nvResultPhoneticInline,
    #_nvLS_b2 #nvResultLangMeta,
    #_nvLS_b2 .nv-result-right-col { display: none !important; }
}

/* ================================================================
   PORTRAIT MOBILE (≤ 600px, orientation portrait)
   Flux vertical scrollable
   ================================================================ */
@media screen and (max-width: 600px) and (orientation: portrait) {

    html, body {
        overflow-y: auto !important; overflow-x: hidden !important;
        height: auto !important; min-height: 100dvh !important;
    }

    #nv-profile-bubble, #micIcon, #status,
    #nvTranstextePopup, #nvResultPopup {
        position: relative !important; left: auto !important; top: auto !important;
        max-height: none !important;
    }

    #nv-profile-bubble {
        width: 80px !important; height: 80px !important;
        display: inline-block !important; vertical-align: middle !important;
    }
    #micIcon {
        font-size: 32px !important; width: 36px !important; height: 36px !important;
        display: inline-flex !important; vertical-align: middle !important;
    }
    #status {
        display: inline-block !important; width: auto !important;
        text-align: left !important; font-size: 14px !important;
        vertical-align: middle !important;
    }
    #nvTranstextePopup {
        width: calc(100% - 8px) !important; margin: 8px 4px 4px !important;
    }
    #transcript {
        height: 35dvh !important; max-height: 35dvh !important;
        font-size: 17px !important; resize: none !important;
    }
    #nvResultPopup {
        width: calc(100% - 8px) !important; margin: 4px 4px 12px !important;
        max-height: none !important;
    }
    #translation {
        height: 35dvh !important; max-height: 35dvh !important;
        font-size: 17px !important; resize: none !important;
    }
    .nv-act-btn span { font-size: 22px !important; }
    #nv-actions-row .nv-act-btn { min-height: 48px !important; }
    .transcript-right-col .nv-act-btn { width: 44px !important; height: 44px !important; }
    input[type="text"], select { font-size: 16px !important; }
}

/* ── Tablette 601–900px ── */
@media screen and (min-width: 601px) and (max-width: 900px) {
    #nvTranstextePopup { width: calc(100vw - 160px) !important; }
    #nvResultPopup     { width: calc(100vw - 160px) !important; }
}