.guest-room-body {
    background:
        #f3f3f5;
}


.guest-page {
    max-width:
        820px;
}


.guest-page-heading {
    padding-right:
        4px;

    padding-left:
        4px;
}


.guest-chat-card {
    margin:
        10px 0 14px;

    background:
        var(--surface);

    border-radius:
        24px;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.045
        );
}


.guest-chat-toolbar {
    display:
        flex;

    align-items:
        stretch;

    width:
        100%;

    background:
        var(--surface);

    border-bottom:
        1px solid
        var(--border);
}


.guest-chat-focus-bar {
    appearance:
        none;

    display:
        grid;

    flex:
        1 1 auto;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto
        auto;

    align-items:
        center;

    gap:
        12px;

    width:
        100%;

    min-width:
        0;

    min-height:
        76px;

    padding:
        13px 15px;

    background:
        transparent;

    border:
        0;

    color:
        var(--text-primary);

    cursor:
        pointer;

    text-align:
        left;
}


.guest-chat-focus-bar:hover {
    background:
        #fbfbfc;
}


.guest-chat-focus-bar:focus-visible {
    outline:
        2px solid
        var(--black);

    outline-offset:
        -2px;
}


.guest-chat-identity {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    gap:
        4px;
}


.guest-chat-title {
    overflow:
        hidden;

    font-size:
        16px;

    font-weight:
        760;

    line-height:
        1.15;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.guest-chat-expiry {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    min-width:
        84px;
}


.guest-chat-expiry-label,
.guest-chat-expiry-date {
    color:
        var(--text-tertiary);

    font-size:
        9px;

    font-weight:
        650;
}


.guest-chat-expiry-value {
    margin:
        1px 0;

    font-size:
        13px;

    font-weight:
        780;

    white-space:
        nowrap;
}


.guest-chat-focus-hint {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        0 9px;

    background:
        #eeeef1;

    border-radius:
        9px;

    color:
        var(--text-secondary);

    font-size:
        10px;

    font-weight:
        750;
}


.guest-chat-focus-exit {
    appearance:
        none;

    flex:
        0 0 auto;

    align-self:
        center;

    min-height:
        36px;

    margin-right:
        12px;

    padding:
        0 12px;

    background:
        var(--black);

    border:
        0;

    border-radius:
        11px;

    color:
        var(--white);

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        750;
}


.guest-chat-card
.chat-messages {
    min-height:
        260px;

    height:
        min(
            48dvh,
            500px
        );

    padding:
        18px 13px;

    background:
        #f6f6f8;
}


.guest-chat-card
.chat-composer {
    background:
        rgba(
            255,
            255,
            255,
            0.98
        );
}


.guest-chat-card
.chat-input {
    background:
        #f5f5f7;
}


.guest-information-card {
    margin-bottom:
        28px;

    border-radius:
        24px;

    box-shadow:
        0 8px 26px
        rgba(
            0,
            0,
            0,
            0.035
        );
}


.guest-information-eyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-tertiary);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.65px;
}


/* ==================================================
   FOCUSED GUEST CHAT
================================================== */

.guest-chat-focused {
    overflow:
        hidden;
}


.guest-chat-focused
.guest-buy-banner,

.guest-chat-focused
.guest-page-heading,

.guest-chat-focused
#guest-room-information {
    display:
        none !important;
}


.guest-chat-focused
.guest-page {
    max-width:
        none;

    height:
        100dvh;

    padding:
        0;
}


.guest-chat-focused
#chat-container {
    position:
        fixed;

    z-index:
        200;

    top:
        0;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        100dvh;

    margin:
        0;

    padding-top:
        env(safe-area-inset-top);

    background:
        var(--surface);

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;
}


.guest-chat-focused
.guest-chat-toolbar {
    flex:
        0 0 auto;
}


.guest-chat-focused
.guest-chat-focus-bar {
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;
}


.guest-chat-focused
.guest-chat-focus-hint {
    display:
        none;
}


.guest-chat-focused
.guest-chat-focus-exit {
    display:
        block;
}


.guest-chat-focused
.chat-messages {
    flex:
        1 1 auto;

    min-height:
        0;

    height:
        auto;

    max-height:
        none;
}


.guest-chat-focused
.chat-composer {
    flex:
        0 0 auto;
}


/* ==================================================
   MOBILE
================================================== */

@media (
    max-width: 520px
) {

    .guest-page {
        padding-right:
            9px;

        padding-left:
            9px;
    }


    .guest-chat-card,
    .guest-information-card {
        border-radius:
            20px;
    }


    .guest-chat-focus-bar {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto;

        gap:
            8px;

        padding-right:
            11px;

        padding-left:
            11px;
    }


    .guest-chat-focus-hint {
        display:
            none;
    }


    .guest-chat-expiry {
        min-width:
            74px;
    }


    .guest-chat-focus-exit {
        margin-right:
            9px;
    }

}


/* ==================================================
   DESKTOP
================================================== */

@media (
    min-width: 700px
) {

    .guest-page {
        max-width:
            820px;
    }


    .guest-chat-card
    .chat-messages {
        height:
            470px;
    }


    .guest-chat-focused
    #chat-container {
        right:
            50%;

        left:
            50%;

        width:
            min(
                100%,
                920px
            );

        transform:
            translateX(
                -50%
            );

        border-right:
            1px solid
            var(--border);

        border-left:
            1px solid
            var(--border);
    }

}