html,
body {
    height: 100%;
}

.chat-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
    background: #f5f8fa;
}

.chat-card {
    width: min(1120px, 100%);
    min-height: calc(100vh - 48px);
    border-radius: 8px;
}

.chat-messages {
    height: calc(100vh - 230px);
    min-height: 420px;
    overflow-y: auto;
}

.chat-message-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#chat-input {
    resize: none;
    min-height: 52px;
    max-height: 160px;
}

@media (max-width: 767.98px) {
    .chat-shell {
        padding: 0;
    }

    .chat-card {
        min-height: 100vh;
        border-radius: 0;
    }

    .chat-messages {
        height: calc(100vh - 220px);
        min-height: 320px;
    }
}