Chat {
    position: absolute;
    left: 100px;
    bottom: 220px;
    width: 450px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 20px;
    flex-direction: column;
    align-items: stretch;
    font-size: 19px;
    font-family: Bahnschrift;
    gap: 10px;
    opacity: 0.92;
    transform: translateY( 6px );
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

    .output {
        flex-grow: 1;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        padding: 6px 8px;
        min-height: 140px;
        max-height: 320px;
        overflow-y: scroll;

        .chat_entry {
            min-height: 24px;
            gap: 10px;
            align-items: center;
            padding: 2px 0;
            flex-direction: row;
            text-shadow: 2px 2px 2px #000a;
            transition: opacity 0.4s linear;
            animation: chat_entry_in 0.18s ease-out;

            .avatar {
                width: 24px;
                height: 24px;
                border-radius: 100px;
                flex-shrink: 0;
            }

            .avatar--empty {
                opacity: 0;
            }

            .author {
                color: #fa9045;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .message {
                color: #fff;
            }
        }
    }

    .input {
        color: white;
        background: rgba( 255, 255, 255, 0.04 );
        border-radius: 10px;
        transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        padding: 0;
    }

    &.open {
        pointer-events: all;
        opacity: 1;
        transform: translateY( 0 );

        .input {
            transform: translateY( -2px );

            textentry {
                width: 100%;
                padding: 8px;
                font-size: 18px;
                animation: chat_focus_pulse 0.35s ease-out;
                margin: 0;
            }
        }
    }
}

@keyframes chat_entry_in {
    from {
        opacity: 0;
        transform: translateY( 4px );
    }
    to {
        opacity: 1;
        transform: translateY( 0 );
    }
}

@keyframes chat_focus_pulse {
    0% {
        transform: scale( 0.98 );
    }
    100% {
        transform: scale( 1 );
    }
}