@media (max-width: 1200px) {
    .chat-layout {
        grid-template-columns: 240px 1fr 300px;
    }
}

@media (max-width: 992px) {
    .chat-layout {
        grid-template-columns: 1fr;
    }

    .left-media,
    .chat-right {
        border: 0;
    }

    .left-media {
        border-bottom: 1px solid #e5e7eb;
    }

    .chat-right {
        border-top: 1px solid #e5e7eb;
    }

    .message-form {
        flex-wrap: wrap;
    }

    .message-tools {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .room-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .message-form {
        gap: 8px;
    }

    .tool-button,
    .send-button,
    .message-input {
        width: 100%;
    }

    .message-tools {
        flex-direction: column;
        align-items: stretch;
    }
}