/* Keep the in-game command bar and chat in the normal page flow below the shared site header. */
.er-site-header-spacer + .er-game {
    padding-top: 0;
}

.er-site-header-spacer + .er-game > .er-game-header {
    position: sticky;
    z-index: 200;
    top: var(--er-shared-header-height);
    left: auto;
    right: auto;
    width: 100%;
}

.er-site-header-spacer + .er-game .er-game-header .er-speech-toggle,
.er-site-header-spacer + .er-game .er-game-header .er-audio-director {
    visibility: visible;
    opacity: 1;
}

.er-site-header-spacer + .er-game .er-chats {
    min-width: 0;
    align-items: stretch;
    visibility: visible;
    opacity: 1;
}

/*
 * The scene image is a separate grid row below the chat log. A large generated
 * image could previously consume almost the whole fixed-height panel and leave
 * the conversation with only a few pixels. Reserve a real scrollable chat area
 * and cap the inline preview. The full-size image remains available via the
 * existing lightbox.
 */
.er-site-header-spacer + .er-game .er-chat-image:empty {
    display: none;
    padding: 0;
}

.er-site-header-spacer + .er-game .er-chat-log {
    min-width: 0;
    overflow: auto;
}

@media (min-width: 901px) {
    .er-site-header-spacer + .er-game .er-chat-panel {
        --er-inline-scene-image-max: clamp(160px, 28dvh, 300px);
        height: calc(100dvh - var(--er-shared-header-height) - 104px);
        min-height: 480px;
        grid-template-rows: auto minmax(140px, 1fr) auto auto;
    }

    .er-site-header-spacer + .er-game .er-chat-log {
        min-height: 140px;
    }

    .er-site-header-spacer + .er-game .er-chat-image:not(:empty) {
        max-height: var(--er-inline-scene-image-max);
        overflow: hidden;
    }

    .er-site-header-spacer + .er-game .er-chat-image:not(:empty) img {
        max-height: calc(var(--er-inline-scene-image-max) - 18px) !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .er-site-header-spacer + .er-game .er-game-dock {
        top: calc(var(--er-shared-header-height) + 92px);
        height: calc(100dvh - var(--er-shared-header-height) - 108px);
    }
}

@media (max-width: 900px) {
    .er-site-header-spacer + .er-game > .er-game-header {
        top: var(--er-shared-header-height);
    }

    .er-site-header-spacer + .er-game .er-chat-panel {
        --er-inline-scene-image-max: clamp(96px, 18dvh, 180px);
        height: calc(100dvh - var(--er-shared-header-height) - 120px);
        min-height: 320px;
        grid-template-rows: auto minmax(80px, 1fr) auto auto;
    }

    .er-site-header-spacer + .er-game .er-chat-log {
        min-height: 80px;
    }

    .er-site-header-spacer + .er-game .er-chat-image:not(:empty) {
        max-height: var(--er-inline-scene-image-max);
        overflow: hidden;
    }

    .er-site-header-spacer + .er-game .er-chat-image:not(:empty) img {
        max-height: calc(var(--er-inline-scene-image-max) - 18px) !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}