/* ==========================================================================
   MODALI A TUTTO SCHERMO SU TELEFONO  (public/assets/css/modals-mobile.css)
   --------------------------------------------------------------------------
   Segnalato dall'utente: "la versione mobile del modale, quando crei un nuovo
   post, non e' a schermo intero... si trova a meta' schermo e non e' leggibile
   usabile". Misurato prima di questo foglio (WebKit, 390x844):
     - .modal-content largo 390px ma alto 410px = 49% dello schermo, appoggiato
       in basso a y=434;
     - area di scrittura #editorDisplay alta 104px;
     - etichette dei pulsanti a 11,2px;
     - l'altezza era "pari al contenuto": la regola mobile di mood-ui.css
       imponeva solo un max-height, non un'altezza.
   Qui, sotto i 800px, i modali diventano finestre a tutto schermo: altezza
   piena, un solo contenitore che scorre, area di scrittura che si prende lo
   spazio libero, pulsanti e testi da dito (>=44px, >=13px). Sopra i 800px non
   cambia nulla: il modale resta la finestra centrata di sempre.

   Caricato DOPO mood.css, feed-legacy.css, profile.css e mood-ui.css (che
   contengono gia' regole per il telefono): da qui vincono per ordine.
   ========================================================================== */

@media (max-width: 800px) {
    .modale-uri,
    .share-modal,
    .mood-modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .modale-uri {
        display: flex;
        z-index: 1200;
        padding-bottom: var(--mood-kb-offset, 0px);
        overflow: hidden;
    }
    .modale-uri .modal-content,
    #createPostModal .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        height: calc(100dvh - var(--mood-kb-offset, 0px));
        max-height: calc(100dvh - var(--mood-kb-offset, 0px));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    /* ==== TASTIERA SUL VISORE (30/09/2026) ====
       `--mood-kb-offset` la scrive feed.js sulla RADICE (prima solo su
       #createPostModal, che esiste unicamente nel feed: sulle altre pagine -
       post, profilo, gruppi - valeva sempre 0, e il visore non la leggeva
       affatto). Con la tastiera aperta il campo dei commenti del visore finiva
       sotto i tasti: qui il visore si alza dell'offset e il foglio stringe un
       po', mai sotto i 180px (con tastiere alte, senza il minimo, si
       schiaccerebbe a zero e non si vedrebbe piu' niente). */
    #lightbox,
    /* `lb-compact` (il visore a tutto schermo del telefono) ha una regola piu'
       specifica in mood-ui.css: senza nominarla anche qui, il padding del visore
       restava 0 e l'offset non alzava niente. */
    #lightbox.lb-compact {
        padding-bottom: var(--mood-kb-offset, 0px);
    }
    #lightbox.lb-compact .post-modal-aside:not(.aside-collapsed) .post-modal-aside-body {
        max-height: max(180px, calc(50dvh - var(--mood-kb-offset, 0px) / 2));
    }

    .share-modal .share-modal-content,
    #followModal .share-modal-content,
    #subscriberModal .share-modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    }

    .mood-modal-overlay .mood-modal {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
    }

    .modale-uri .close,
    #createPostModal .close {
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
    }

    .modale-uri .modal-text {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    /* Il form riempie la finestra: il testo si prende lo spazio libero e la
       riga delle azioni resta in fondo (sticky), non a meta' schermo. */
    .modale-uri .post-box {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .modale-uri .post-box form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .modale-uri #editor-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .modale-uri #editorDisplay,
    #createPostModal #editorDisplay {
        flex: 1 1 auto;
        min-height: 38dvh;   /* era 104px: qui c'e' spazio per scrivere */
        max-height: none;
    }
    .modale-uri .post-box .options {
        margin-top: auto;
    }

    .modale-uri .options button,
    .modale-uri .options a,
    .share-modal .share-channel-btn,
    .share-modal-content button,
    .mood-modal .mood-btn,
    .mood-modal .mood-input {
        min-height: 44px;
        font-size: 0.95rem;
    }
    .share-modal .share-modal-header h3,
    .modale-uri .form-error {
        font-size: 0.95rem;
    }
    .modale-uri .mood-ai-switch,
    .modale-uri .post-box .header .privacy-label {
        font-size: 0.9rem;
    }
    .mood-overlay { z-index: 1200; }
    .mood-confirm-dialog {
        z-index: 1201;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    }
    .mood-confirm-dialog p {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    .mood-confirm-actions { gap: 10px; }
    .mood-confirm-actions .mood-btn {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 0.95rem;
    }
    #moodAudienceModal {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }
    .mood-login-prompt__box {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px 18px 0 0;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
        transform: translateY(0%);
        height: max-content;
    }    
    #moodAudienceModal .mood-audience-box {
        display: flex !important;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 0 0 calc(4px + env(safe-area-inset-bottom));
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        flex-direction: column;
        justify-content: space-between;
    }
    /* Testata agganciata in alto: la croce "Chiudi" e' sempre a portata */
    #moodAudienceModal .mood-insights-head {
        position: sticky;
        top: 0;
        z-index: 2;
        gap: 10px;
        padding: 12px 14px;
        background: var(--mood-bg-card, #15152a);
        border-bottom: 1px solid var(--mood-border, #2a2a4a);
    }
    #moodAudienceModal .mood-insights-head h3 {
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.3;
    }
    #moodAudienceModal .mood-insights-head .mood-btn-outline {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 16px;
        font-size: 0.9rem;
    }
    #moodAudienceModal .mood-parental-sub {
        margin: 14px 14px 0;
        font-size: 0.92rem;
        line-height: 1.45;
        text-align: left;
    }
    /* Le cinque scelte: righe comode da toccare */
    #moodAudienceModal .audience-opts {
        margin: 14px;
        gap: 10px;
    }
    #moodAudienceModal .audience-opt {
        min-height: 58px;
        padding: 12px 14px;
        border-radius: 12px;
    }
    #moodAudienceModal .audience-opt input {
        width: 20px;
        height: 20px;
    }
    #moodAudienceModal .audience-txt strong { font-size: 0.95rem; }
    #moodAudienceModal .audience-txt small { font-size: 0.84rem; }
    #moodAudienceModal .mood-audience-error {
        margin: 0 14px;
        font-size: 0.92rem;
        text-align: left;
    }
    /* Conferma agganciata in fondo: si vede anche con la tastiera aperta */
    #moodAudienceModal .mood-login-prompt__actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--mood-bg-card, #15152a);
        border-top: 1px solid var(--mood-border, #2a2a4a);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    }
    #moodAudienceModal .mood-login-prompt__actions .mood-btn {
        flex: 1 1 auto;
        min-height: 48px;
        font-size: 1rem;
    }

    /* ---------- 8. Gli altri avvisi con lo stesso velo ----------
       (accesso richiesto, controllo genitori, ecc.): foglio in basso che scorre e
       pulsanti da dito, invece di una scatola centrata che si taglia. */
    .mood-login-prompt {
        padding: 0;
        align-items: flex-end;
    }

    .mood-login-prompt__box h3 { font-size: 1.08rem; }
    .mood-login-prompt__box p { font-size: 0.95rem; line-height: 1.45; }
    .mood-login-prompt__actions .mood-btn {
        min-height: 44px;
        font-size: 0.95rem;
    }
}