/*
 * Nút mở chat.
 *
 * Mọi lớp đều mang tiền tố vkl-chat- và mọi thuộc tính đều ghi tường minh: tệp này chạy chung
 * trang với 13 theme khác nhau, không được thừa hưởng gì từ chúng và cũng không được ảnh
 * hưởng ngược lại.
 */

#vkl-chat-btn {
    position: fixed;
    bottom: 20px;
    z-index: 2147483000; /* dưới trần một chút, chừa chỗ cho khung chat nằm trên nút */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

#vkl-chat-btn.vkl-chat-right {
    right: 20px;
}

#vkl-chat-btn.vkl-chat-left {
    left: 20px;
}

#vkl-chat-btn:hover {
    background: #1d4ed8;
}

#vkl-chat-btn:active {
    transform: scale(.94);
}

#vkl-chat-btn:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

#vkl-chat-err {
    position: fixed;
    bottom: 86px;
    z-index: 2147483000;
    padding: 8px 14px;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    background: rgba(17, 24, 39, .92);
    border-radius: 8px;
}

#vkl-chat-err.vkl-chat-right {
    right: 20px;
}

#vkl-chat-err.vkl-chat-left {
    left: 20px;
}

/*
 * Trên màn hình hẹp, nhiều theme dựng thanh "Đặt hàng" dính đáy ở trang giỏ và trang thanh
 * toán. Đẩy nút lên thay vì ẩn đi: khách cần hỏi nhất đúng lúc sắp trả tiền, nhưng tuyệt đối
 * không được che nút thanh toán.
 */
@media (max-width: 480px) {
    #vkl-chat-btn {
        width: 50px;
        height: 50px;
        bottom: 16px;
    }

    #vkl-chat-btn.vkl-chat-right {
        right: 16px;
    }

    #vkl-chat-btn.vkl-chat-left {
        left: 16px;
    }

    body.vkl-chat-lifted #vkl-chat-btn {
        bottom: 76px;
    }

    body.vkl-chat-lifted #vkl-chat-err {
        bottom: 136px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #vkl-chat-btn {
        transition: none;
    }
}