.pl-chat-container {
    width: min(340px, calc(100vw - 2rem));
    font-family: inherit;
}

.pl-chat-popup,
.pl-chat-window {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.pl-chat-popup .btn-outline-primary {
    border-color: #cfe2ff;
    color: var(--chat-primary, #0d6efd);
    background-color: #fff;
    font-size: 13px;
    transition: all 0.2s ease;
}

.pl-chat-popup .btn-outline-primary:hover {
    background-color: #04037c;
    border-color: #04037c;
}

.pl-chat-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pl-chat-buttons a {
    text-align: left;
    text-decoration: none;
}

.chat-body-content {
    height: 270px;
    overflow-y: auto;
    background-color: #f8f9fa;
}

.pl-chat-window {
    max-height: calc(100dvh - 110px);
}

.pl-chat-window #chatMainMessageView:not(.d-none) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.pl-chat-window .chat-body-content {
    flex: 1 1 auto;
    min-height: 80px;
}

.pl-chat-window .chat-option-triggers {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.pl-chat-window .chat-option-triggers :is(button, a) {
    flex: 0 0 auto;
    width: auto;
    min-height: 25px;
    margin: 0;
    padding: 3px 5px !important;
    border: 1px solid var(--chat-primary, #0d6efd);
    border-radius: 20px !important;
    background: #fff;
    color: var(--chat-primary, #0d6efd);
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
}

.pl-chat-window .chat-body-content>* {
    flex-shrink: 0;
}

.pl-chat-window #chatContactActions {
    padding-bottom: 8px;
}

.pl-chat-window #chatContactActions a,
.pl-chat-window .message-bubble-bot a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
}

.btn-zalo-br {
    background: #0070ff !important;
}

.pl-chat-window a.btn .bi {
    position: static;
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
}

.pl-chat-window .card-header,
.pl-chat-window .card-footer,
.pl-chat-window #chatContactActions,
.pl-chat-window .chat-support-status {
    flex-shrink: 0;
}

.pl-chat #chatInputText {
    display: block;
    resize: none;
    min-width: 0;
    min-height: 36px;
    max-height: 140px;
    height: 36px;
    overflow-y: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 22px;
    padding: 7px 10px;
    font-family: inherit;
}

.pl-chat-window .card-footer {
    align-items: flex-end !important;
}

@media (max-width: 580px) {
    .pl-chat-window {
        max-height: 100dvh;
    }
}

.message-bubble-bot,
.message-bubble-user {
    max-width: 85%;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.text-primary-snn {
    color: #04037c;
}

.message-bubble-bot {
    background-color: #f1f2f6;
    color: #333;
    border-radius: 12px;
}

.sieco-typing {
    display: flex;
    align-items: center;
    min-height: 20px;
    white-space: nowrap;
}

.sieco-typing>span {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: siecoTypingDot 1.2s infinite ease-in-out;
}

.sieco-typing>span:nth-child(2) {
    animation-delay: 0.15s;
}

.sieco-typing>span:nth-child(3) {
    animation-delay: 0.3s;
}

.sieco-typing small {
    opacity: 0.65;
    font-size: 12px;
}

@keyframes siecoTypingDot {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.message-bubble-user {
    background-color: var(--chat-primary, #0d6efd);
    color: #fff;
    border-radius: 12px;
}

.pl-chat-icon-button {
    width: 55px;
    height: 55px;
    background-color: var(--chat-primary, #0d6efd);
}

.pl-chat-icon-tb {
    font-size: 11px;
}

.pl-chat .chat-sender-name {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chat-primary, #0d6efd);
    overflow-wrap: anywhere;
}

.pl-chat .chat-support-status {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e5e5;
    background: #f0f4ff;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pl-chat .chat-support-status[data-mode="human"] {
    background: #ecfdf5;
    color: #166534;
}

.pl-chat .chat-support-status[data-mode="closed"] {
    background: #f3f4f6;
    color: #4b5563;
}

.chatWindow-ht h6 {
    font-size: 14px;
    color: #fff;
}

.chatWindow-ht-sm {
    font-size: 11px;
    opacity: 0.85;
}

#chatMenuView {
    width: 260px;
    max-width: calc(100vw - 2rem);
}

.mobile-popup-header,
.mobile-popup-footer {
    display: none;
}

@media (max-width: 580px) {
    .pl-chat-container {
        width: min(300px, calc(100vw - 2rem));
    }

    .pl-chat-container.position-fixed {
        margin: 0.5rem !important;
    }

    .pl-chat-popup,
    .pl-chat-window {
        border-radius: 12px;
    }

    .pl-chat-popup {
        position: fixed;
        inset: 0;
        z-index: 1081;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        margin: 0 !important;
        padding: 1rem !important;
        border-radius: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }

    .pl-chat-window {
        position: fixed;
        inset: 0;
        z-index: 1081;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        margin: 0 !important;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    #chatLeadFormView {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .pl-chat-window #chatMainMessageView:not(.d-none) {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .pl-chat-window .chat-body-content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .mobile-popup-header {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-height: 56px;
        padding: 0.5rem 1rem;
        color: #fff;
        background-color: var(--chat-accent, #0d5bd7);
    }

    .mobile-popup-avatar {
        width: 32px;
        height: 32px;
        margin-right: 0.45rem;
        object-fit: cover;
        border: 2px solid #fff;
        border-radius: 50%;
    }

    .mobile-popup-title {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .mobile-popup-title strong {
        font-size: 13px;
    }

    .mobile-popup-title small {
        margin-top: 0.2rem;
        font-size: 11px;
    }

    #btnClosePopup {
        position: absolute;
        top: 1rem;
        right: 0.9rem;
        z-index: 1;
        margin: 0 !important;
        filter: brightness(0) invert(1);
    }

    #popupServiceSelection {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 0;
        padding: 1rem 1rem 0.75rem;
    }

    #popupServiceSelection>.d-flex {
        align-items: flex-start;
        margin-bottom: 0.35rem !important;
    }

    #popupServiceSelection>.d-flex p {
        max-width: 270px;
        padding: 0.6rem 0.7rem;
        border-radius: 0 14px 14px 14px;
        background: #f0f2f5;
    }

    .pl-chat-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .pl-chat-buttons a {
        width: fit-content;
        min-height: 34px;
        padding: 0.4rem 0.75rem !important;
        color: #222;
        border-color: #222;
        border-radius: 9px !important;
        background: #fff;
        font-size: 12px;
    }

    .mobile-popup-footer {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-height: 72px;
        padding: 0.65rem 0.75rem;
        border-top: 1px solid #e5e5e5;
        background: #fff;
    }

    .mobile-popup-footer input {
        min-width: 0;
        margin-right: 0.25rem;
        font-size: 12px;
    }

    .chat-body-content {
        height: min(42vh, 270px);
        min-height: 180px;
    }

    .card-header {
        padding: 0.75rem !important;
    }

    #chatMenuView {
        left: -0.5rem !important;
        width: min(260px, calc(100vw - 2rem));
    }

    .card-footer {
        padding: 0.4rem !important;
    }

    #chatInputText {
        min-width: 0;
    }
}

#chatToggleBtn {
    display: block;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

#chatToggleBtn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chat-position-right .pl-chat-icon {
    float: right;
}

.chat-position-left .pl-chat-icon {
    float: left;
}

.chat-position-right .pl-chat-popup {
    margin-left: auto;
    margin-right: 0;
}

.chat-position-left .pl-chat-popup {
    margin-left: 0;
    margin-right: auto;
}

.chat-position-right .pl-chat-window {
    margin-left: auto;
    margin-right: 0;
}

.chat-position-left .pl-chat-window {
    margin-left: 0;
    margin-right: auto;
}

.chat-position-right .pl-chat-icon-tb {
    left: 100%;
    right: auto;
}

.chat-position-left .pl-chat-icon-tb {
    left: 0;
    right: auto;
}

.btn-zalo-br {
    background: #0070ff !important;
}

.btn-zalo-br .chat-zalo-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}
.btn-zalo-br {display: inline-flex;align-items: center;gap: 5px;}
.btn-zalo-br .chat-zalo-icon {display: block;width: 18px;height: 18px;object-fit: contain;flex-shrink: 0;}
.pl-chat.pl-chat-container { position: fixed !important; bottom: 24px !important; margin: 0 !important; width: min(340px, calc(100% - 48px)); }
.pl-chat.chat-position-right { right: 24px !important; left: auto !important; }
.pl-chat.chat-position-left { left: 24px !important; right: auto !important; }
.pl-chat .pl-chat-icon { float: none; width: 60px; }
.pl-chat.chat-position-right .pl-chat-icon { margin-left: auto; }
.pl-chat.chat-position-left .pl-chat-icon { margin-right: auto; }
.pl-chat .pl-chat-icon-tb { left: auto; right: 2px; top: 2px !important; transform: none !important; width: 12px; height: 12px; min-width: 0; padding: 0; border: 2px solid #fff !important; border-radius: 50%; background: #fa3e3e; }
.pl-chat.chat-has-unread #chatToggleBtn { animation: chatMessageNudge 3s ease-in-out 3; }
.pl-chat.chat-has-unread .pl-chat-icon-tb { box-shadow: 0 0 0 0 rgba(250, 62, 62, .35); animation: chatMessagePulse 2s ease-out 4; }
@keyframes chatMessageNudge { 0%, 12%, 24%, 100% { transform: rotate(0); } 4%, 20% { transform: rotate(-8deg); } 8%, 16% { transform: rotate(8deg); } }
@keyframes chatMessagePulse { 0% { box-shadow: 0 0 0 0 rgba(250, 62, 62, .35); } 100% { box-shadow: 0 0 0 9px rgba(250, 62, 62, 0); } }
@media (prefers-reduced-motion: reduce) { .pl-chat.chat-has-unread #chatToggleBtn, .pl-chat.chat-has-unread .pl-chat-icon-tb { animation: none; } }
.pl-chat .chat-zalo-icon { width: 18px; height: 18px; object-fit: contain; }
.pl-chat .message-bubble-bot { min-width: 0; }
.pl-chat .sieco-typing { white-space: normal; }
@media (max-width: 580px) {
    body.sieco-chat-open { overflow: hidden; }
    .pl-chat.pl-chat-container { bottom: max(80px, env(safe-area-inset-bottom)) !important; width: calc(100% - 24px); }
    .pl-chat.chat-position-right { right: 12px !important; }
    .pl-chat.chat-position-left { left: 12px !important; }
    .pl-chat .pl-chat-popup, .pl-chat .pl-chat-window { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
    .pl-chat.chat-is-open .pl-chat-icon { display: none; }
    .pl-chat .card-header, .pl-chat .mobile-popup-header { padding-top: max(12px, env(safe-area-inset-top)) !important; }
    .pl-chat .card-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
    .pl-chat #chatInputText, .pl-chat input { font-size: 16px; }
    .pl-chat #popupServiceSelection { overflow-y: auto; }
    .card-header:first-child{border-radius: 0 !important;}
}

@media (max-width: 580px) {
    .pl-chat.pl-chat-container.chat-is-open {
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh;
        height: 100dvh;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2147483647 !important;
        background: #fff;
        transform: none !important;
    }
    .pl-chat.pl-chat-container :is(#initialPopup, #chatWindow) {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        overflow: hidden;
        transform: none !important;
    }
    .pl-chat #initialPopup:not(.d-none), .pl-chat #chatWindow:not(.d-none) {
        display: flex !important;
        flex-direction: column;
    }
    .pl-chat #initialPopup .mobile-popup-header,
    .pl-chat #chatWindow > .card-header {
        display: flex !important;
        position: relative;
        flex: 0 0 auto;
        min-height: 64px;
        padding: max(12px, env(safe-area-inset-top)) 16px 12px !important;
        background: var(--chat-primary, #0d6efd) !important;
        color: #fff;
    }
    .pl-chat .mobile-popup-header { padding-right: 64px !important; }
    .pl-chat #btnClosePopup, .pl-chat #btnCloseChat {
        display: block !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 12px;
        opacity: 1;
        cursor: pointer;
    }
    .pl-chat #btnClosePopup { top: max(8px, env(safe-area-inset-top)); right: 8px; }
    .pl-chat #popupServiceSelection {
        flex: 1 1 auto;
        min-height: 0;
        justify-content: flex-start;
        overflow-y: auto;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .pl-chat #popupServiceSelection > .d-flex { margin-top: auto; }
    .pl-chat #chatLeadFormView:not(.d-none) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 16px max(16px, env(safe-area-inset-bottom)) !important;
        background: #f8f9fa !important;
    }
    .pl-chat #chatLeadFormView > p { margin-top: auto; flex-shrink: 0; }
    .pl-chat #chatLeadForm { flex-shrink: 0; padding: 16px; border-radius: 16px; background: #fff; }
    .pl-chat #chatMainMessageView { min-width: 0; }
    .pl-chat .card-footer { background: #fff; }
}

.pl-chat .chat-products-heading { margin-top: 12px; font-size: 13px; }
.pl-chat .chat-product-list { display: flex; gap: 10px; max-width: 100%; padding: 8px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.pl-chat a.chat-product-card { display: flex; flex: 0 0 175px; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #1e293b; text-decoration: none; scroll-snap-align: start; }
.pl-chat .chat-product-image { display: block; width: 100%; height: 130px; object-fit: contain; border-radius: 8px; }
.pl-chat .chat-product-title { font-size: 13px; line-height: 1.4; }
.pl-chat .chat-product-price { margin-top: auto; color: #dc2626; font-weight: 600; font-size: 12px; }
.pl-chat .chat-product-link { padding: 7px; border-radius: 8px; background: var(--chat-primary, #0d6efd); color: #fff; text-align: center; font-size: 12px; }
.pl-chat a.chat-product-card:focus-visible { outline: 2px solid var(--chat-primary, #0d6efd); outline-offset: 2px; }