.xs\:visible {
    display: none;
}

@media screen and (max-width: 1024px) {
    :root {
        --dplr: 24px;
    }

    .chat\:message {
        font-size: 14px;
    }

    .chat\:message\:gallery > div {
        max-width: calc((100% - 24px) / 2);
    }

    .sidebar {
        width: 240px;
    }

    .md\:px-16 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .md\:h-48 {
        height: 48px;
    }

    .wrapper, .container {
        height: calc(100dvh - 48px);
    }
    .chat\:input\:wrapper {
        min-height: 44px;
    }

    .chat\:input textarea {
       font-size: 14px;
       padding: 13px 16px 10px;
    }

    .chat\:input\:send, .chat\:input\:stop {
        margin: 4px;
    }

    .chat\:input\:attach {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    .btn\:big {
        font-size: 18px;
        padding: 12px 32px;
    }    
}

@media screen and (max-width: 768px) {
    :root {
        --dplr: 16px;
    }

    .chat\:type-message {
        padding-bottom: 16px;
    }

    .chat\:message\:gallery {
        padding-inline: 24px;
    }

    .chat\:message\:gallery > div {
        max-width: 100%;
    }

    .chat\:input\:buttons {
        gap: 16px;
    }

    .sidebar {
        width: 100%;
        margin-left: -100%;
    }

    .xs\:hidden {
        display: none !important;
    }

    .xs\:visible {
        display: block;
    }

    .xs\:px-12 {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .h-xs-32 {
        height: 32px;
    }
    
    .w-xs-32 {
        width: 32px;
    }

    .column-xs {
        flex-direction: column;
    }

    .column-xs-reverse {
        flex-direction: column-reverse;
    }

    .btn-xs-block {
        width: 100%;
    }

    .text-xs-center {
        text-align: center;
    }

    .chat\:message\:gallery\:materials\:slot {
        width: 42px;
    }
}