/* Chat widget: nhúng contact.quoc.app trong iframe.
   Guard [hidden] phải đứng trước mọi rule widget: nếu không, display:flex/fixed
   phía dưới override UA rule [hidden]{display:none} và nút hiện từ đầu dù JS chưa chạy. */
#chat-fab[hidden],
#chat-panel[hidden] {
    display: none !important;
}

#chat-fab {
    position: fixed;
    right: 32px;
    bottom: 60px;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    cursor: pointer;
    z-index: 9999;
    transition: background-color .15s ease;
}

#chat-fab:hover,
#chat-fab:focus-visible {
    background: #f0f0f0;
}

/* Chỉ keyboard mới hiện ring; script focus() khi đóng bằng click không đổ viền đen */
#chat-fab:focus {
    outline: none;
}

#chat-fab:focus-visible {
    outline: 2px solid #8a8a8a;
    outline-offset: 2px;
}

#chat-fab svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}

#chat-fab .icon-close {
    display: none;
}

#chat-fab.is-open .icon-open {
    display: none;
}

#chat-fab.is-open .icon-close {
    display: block;
}

#chat-panel {
    position: fixed;
    right: 32px;
    bottom: 128px;
    width: min(380px, calc(100vw - 24px));
    height: min(560px, 72dvh);
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
    overflow: hidden;
    z-index: 9999;
}

#chat-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

@media (max-width: 480px) {
    #chat-panel {
        left: 12px;
        right: 12px;
        width: auto;
        height: min(70dvh, 600px);
        border-radius: 12px;
    }
}