/* client/css/components/stream-stage/fullscreen-chat.css */

/*
Transparent fullscreen chat presentation.

Normal sidebar chat remains unchanged.
*/


.fullscreen-chat-overlay {
    position:
        absolute;

    top:
        max(
            68px,
            calc(
                env(safe-area-inset-top) +
                52px
            )
        );

    right:
        max(
            3.5vw,
            env(safe-area-inset-right)
        );

    z-index:
        9997;

    width:
        min(
            42vw,
            620px
        );

    max-height:
        calc(
            100% -
            160px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        6px;

    overflow:
        hidden;

    pointer-events:
        none;

    background:
        transparent;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

    backdrop-filter:
        none;
}


.fullscreen-chat-overlay[hidden] {
    display:
        none !important;
}


.fullscreen-chat-message {
    width:
        100%;

    min-width:
        0;

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        clamp(
            15px,
            1.25vw,
            20px
        );

    line-height:
        1.35;

    text-align:
        left;

    text-shadow:
        0 1px 2px
        rgba(
            0,
            0,
            0,
            1
        ),

        0 0 4px
        rgba(
            0,
            0,
            0,
            1
        ),

        0 0 10px
        rgba(
            0,
            0,
            0,
            0.82
        );
}


.fullscreen-chat-username {
    flex:
        0 1 auto;

    min-width:
        0;

    max-width:
        40%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    padding:
        0;

    border:
        0;

    background:
        transparent !important;

    font-size:
        inherit;

    font-weight:
        850;

    line-height:
        inherit;
}


.fullscreen-chat-text {
    flex:
        1 1 auto;

    min-width:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent !important;

    color:
        #ffffff;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

    font-size:
        inherit;

    font-weight:
        650;

    line-height:
        inherit;
}


.fullscreen-chat-toggle {
    min-width:
        64px;

    padding-left:
        8px;

    padding-right:
        8px;

    white-space:
        nowrap;

    font-size:
        11px;

    font-weight:
        800;
}


.fullscreen-chat-toggle[hidden] {
    display:
        none !important;
}


.fullscreen-chat-toggle[data-chat-enabled="false"] {
    opacity:
        0.68;
}


@media (max-width: 920px) {
    .fullscreen-chat-overlay {
        top:
            max(
                58px,
                calc(
                    env(safe-area-inset-top) +
                    46px
                )
            );

        right:
            max(
                16px,
                env(safe-area-inset-right)
            );

        width:
            min(
                55vw,
                440px
            );

        gap:
            5px;
    }

    .fullscreen-chat-message {
        font-size:
            clamp(
                13px,
                2.1vw,
                17px
            );
    }
}


@media (max-width: 640px) {
    .fullscreen-chat-overlay {
        top:
            max(
                52px,
                calc(
                    env(safe-area-inset-top) +
                    42px
                )
            );

        right:
            max(
                10px,
                env(safe-area-inset-right)
            );

        width:
            min(
                68vw,
                360px
            );

        gap:
            4px;
    }

    .fullscreen-chat-message {
        gap:
            5px;

        font-size:
            clamp(
                12px,
                2.6vw,
                15px
            );
    }

    .fullscreen-chat-username {
        max-width:
            36%;
    }
}


@media (prefers-reduced-motion: reduce) {
    .fullscreen-chat-overlay,
    .fullscreen-chat-message,
    .fullscreen-chat-toggle {
        animation:
            none;

        transition:
            none;
    }
}