/* =========================================================
   SkinZenitude — Client Question — EN
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #f5eee4;
    font-family: inherit;
}

#question {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

html:lang(en) #question {
    background-image: url("/SZ/site/EN/question/question_EN_desktop.webp");
}

/* ---------------------------------------------------------
   Question field
   --------------------------------------------------------- */

.question-panel {
    position: absolute;

    left: 29%;
    top: 56%;

    width: 40%;
    height: 41%;

    box-sizing: border-box;
}

#question-text {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 4% 5%;

    box-sizing: border-box;

    border: none;
    border-radius: 0;
    outline: none;

    resize: none;

    background: transparent;
    color: #3d3833;

    font-family: inherit;
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    line-height: 1.55;

    overflow-y: auto;

    box-shadow: none;
}

#question-text::placeholder {
    color: #5c554e;
    opacity: 0.82;
}

#question-text:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

#question-text.is-typing,
#question-text.is-paused,
#question-text.is-analysing {
    border: none;
    box-shadow: none;
}

/* ---------------------------------------------------------
   Status
   --------------------------------------------------------- */

.question-status {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -2.25rem;

    min-height: 1.5rem;

    font-size: 0.9rem;
    line-height: 1.4;

    opacity: 0;
    transition: opacity 0.2s ease;
}

.question-status.is-visible {
    opacity: 1;
}

/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------
   Mobile — prepared for later
   --------------------------------------------------------- */

@media (max-width: 700px) {

    html:lang(en) #question {
        background-image: url("/SZ/site/EN/question/question_EN_cell.webp") !important;
        background-position: center center;
        background-size: cover;
    }

    .question-panel {
        left: 16%;
        top: 61%;
        width: 50%;
        height: 38%;
    }

    #question-text {
        padding: 8% 6%;
        font-size: clamp(0.9rem, 3.1vw, 1.1rem);
        line-height: 1.5;
    }
}

/* =========================================================
   AVA — QUESTION
   Position specific to Saphyia's raised hand.
   ========================================================= */

#question > #ava {
    left: 72.5% !important;
    top: 30% !important;
    width: 8% !important;
}

#question > #ava .ava-child .ava-panel {
    font-size: clamp(11px, .95vw, 16px) !important;
}

@media (max-width: 700px) {
    #question > #ava {
        left: 57% !important;
        top: 46% !important;
        width: 13% !important;
    }
}


/* =========================================================
   CELL — EN refinement
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        -webkit-text-size-adjust: 100%;
    }

    #question-text {
        /*
         * 16px prevents automatic input zoom on iPhone/iPad.
         */
        font-size: 16px;
        line-height: 1.5;
        padding: 7% 7%;
    }

    #question > #ava {
        max-width: 64px;
    }
}