/* =========================================================
   CHAT CONTAINER
   ========================================================= */

#chat-container {

    width: 0;
    height: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   CHAT WIDGET ROOT
   ========================================================= */

#chat-widget {

    /* =====================================================
       TAB SIZE
       ===================================================== */

    --tab-width: 120px;
    --tab-height: 32px;


    /* =====================================================
       CHAT BOX SIZE
       ===================================================== */

    --chat-box-width: 360px;
    --chat-box-height: 420px;


    /* =====================================================
       CHAT GROUP
       ===================================================== */

    --chat-group-width: 0px;
    --chat-group-height: 0px;


    /* =====================================================
       POSITION
       ===================================================== */

    --chat-item-right: 0px;

    --ai-bottom: 150px;
    --messenger-bottom: 280px;

    --chat-gap: 6px;


    /* =====================================================
       ROOT
       ===================================================== */

    /*
     * Không dùng position:relative ở root.
     * Không tạo stacking context riêng.
     *
     * Các phần tử chat fixed sẽ tự quản lý layer.
     */
    position: static;

    width: 0;
    height: 0;

    margin: 0 !important;
    padding: 0 !important;

    z-index: auto;

    pointer-events: none;
}


/* =========================================================
   AI GROUP
   CHỈ LÀ CONTAINER CHO CHAT BOX
   ========================================================= */

#ai-chat-group {

    position: fixed;

    right: 0;
    bottom: 0;

    width: var(--chat-group-width);
    height: var(--chat-group-height);

    margin: 0;
    padding: 0;

    z-index: var(--z-chat);

    pointer-events: none;

    /*
     * Giữ fixed layer ổn định khi header/menu mobile
     * thay đổi stacking / repaint.
     */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   COMMON CHAT ITEM
   DÙNG CHUNG CHO AI + MESSENGER
   ========================================================= */

#chat-widget .chat-item {

    position: fixed;

    right: var(--chat-item-right) !important;

    width: var(--tab-width);
    height: var(--tab-height);

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;

    border: none;
    outline: none;

    border-radius: 8px 8px 0 0;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    white-space: nowrap;

    cursor: pointer;

    pointer-events: auto;

    text-decoration: none;

    font-family: inherit;

    font-size: 13px !important;
    font-weight: 500;

    line-height: 1;

    overflow: visible !important;

    /*
     * Giảm repaint/flicker khi header mobile mở menu.
     */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /*
     * translateZ(0) giữ toggle ở GPU layer ổn định.
     */
    transform:
        rotate(-90deg)
        translateY(-100%)
        translateZ(0) !important;

    transform-origin: right top !important;

    -webkit-tap-highlight-color: transparent;

    z-index: var(--z-chat-toggle) !important;

    /*
     * Không animate transform.
     *
     * Đây là điểm quan trọng:
     * transform đang dùng để xoay tab.
     * Nếu animate transform, khi layout/repaint xảy ra
     * toggle có thể bị nháy.
     */
    transition:
        filter .2s ease,
        box-shadow .2s ease;
}


/* =========================================================
   COMMON CHAT ICON
   ========================================================= */

#chat-widget .chat-item .chat-icon {

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
}


#chat-widget .chat-item .chat-svg,
#chat-widget .chat-item .messenger-svg {

    display: block;

    width: 21px;
    height: 21px;

    flex: 0 0 auto;
}


/* =========================================================
   COMMON CHAT TEXT
   ========================================================= */

#chat-widget .chat-item .chat-text {

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;

    transform: none !important;

    font-family: inherit;

    font-size: 13px !important;
    font-weight: 500;

    line-height: 1 !important;

    white-space: nowrap;

    pointer-events: none;
}


/* =========================================================
   AI CHAT
   ========================================================= */

#ai-chat-group .chat-item.ai-chat {

    bottom: var(--ai-bottom) !important;

    width: var(--tab-width) !important;
    height: var(--tab-height) !important;

    margin: 0 !important;

    background:
        linear-gradient(
            145deg,
            #ff4f9a,
            #ff2f7d
        ) !important;

    color: #fff !important;

    box-shadow:
        0 4px 16px rgba(255, 47, 125, .28);

    z-index: var(--z-chat-toggle) !important;
}


#ai-chat-group .chat-item.ai-chat .chat-text {

    color: #fff !important;
}


/* =========================================================
   AI HOVER
   ========================================================= */

#ai-chat-group .chat-item.ai-chat:hover {

    filter: brightness(1.04);

    box-shadow:
        0 6px 20px rgba(255, 47, 125, .38);
}


/* =========================================================
   AI ACTIVE
   ========================================================= */

#ai-chat-group .chat-item.ai-chat:active {

    transform:
        rotate(-90deg)
        translateY(-100%)
        translateZ(0)
        scale(.97) !important;
}


/* =========================================================
   AI FOCUS
   ========================================================= */

#ai-chat-group .chat-item.ai-chat:focus-visible {

    outline:
        3px solid rgba(236, 72, 153, .25);

    outline-offset: 3px;
}


/* =========================================================
   AI OLD EFFECTS DISABLED
   ========================================================= */

#ai-chat-group .chat-item.ai-chat::before,
#ai-chat-group .chat-item.ai-chat::after {

    display: none !important;

    content: none !important;
}


/* =========================================================
   UNREAD BADGE
   ========================================================= */

#ai-chat-group .chat-unread {

    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ff4757,
            #ef233c
        );

    color: #fff;

    border:
        2px solid #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 17px;

    display: none;

    align-items: center;
    justify-content: center;

    z-index:
        calc(var(--z-chat-toggle) + 1) !important;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, .16),
        0 4px 10px rgba(239, 68, 68, .18);

    animation:
        chatBadgePop .25s cubic-bezier(.2, .8, .2, 1);
}


#ai-chat-group .chat-unread.show {

    display: flex;
}


@keyframes chatBadgePop {

    0% {
        opacity: 0;
        transform: scale(.5);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   CHAT BOX
   ========================================================= */

#ai-chat-group .chat-box {

    position: fixed;

    right:
        calc(
            15px +
            var(--tab-height) +
            var(--chat-gap)
        );

    bottom:
        calc(
            var(--ai-bottom) +
            var(--chat-gap)
        );

    width: var(--chat-box-width);
    height: var(--chat-box-height);

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    background: #faf9f7;

    border:
        1px solid rgba(17, 24, 39, .13);

    border-radius: 18px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    z-index: var(--z-chat) !important;

    box-shadow:
        0 24px 60px rgba(17, 24, 39, .16),
        0 10px 28px rgba(17, 24, 39, .10),
        0 2px 7px rgba(17, 24, 39, .07);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(.98)
        translateZ(0);

    transform-origin:
        bottom right;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    pointer-events: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   CHAT BOX OPEN
   ========================================================= */

#ai-chat-group .chat-box.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1)
        translateZ(0);

    pointer-events: auto;
}


#ai-chat-group .chat-box.open:hover {

    border-color:
        rgba(236, 72, 153, .16);

    box-shadow:
        0 28px 70px rgba(17, 24, 39, .18),
        0 12px 30px rgba(17, 24, 39, .10),
        0 2px 8px rgba(17, 24, 39, .07);
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#ai-chat-group .chat-header {

    position: relative;

    width: 100%;

    min-height: 64px;

    padding: 10px 12px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            color-mix(
                in srgb,
                var(--primary) 85%,
                #000
            )
        );

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .08);

    z-index: 2;
}


#ai-chat-group .chat-header-info {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


#ai-chat-group .chat-avatar {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 50%;

    background: #fff;

    color: #2563eb;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 20px;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .12);
}


#ai-chat-group .chat-title {

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    line-height: 20px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


#ai-chat-group .chat-status {

    margin-top: 2px;

    color:
        rgba(255, 255, 255, .84);

    font-size: 11px;

    line-height: 16px;
}


/* =========================================================
   CLOSE / MINIMIZE
   ========================================================= */

#ai-chat-group .chat-minimize,
#ai-chat-group .chat-close {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 28px;

    font-family:
        Arial,
        sans-serif;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


#ai-chat-group .chat-close {

    right: 8px;
}


#ai-chat-group .chat-minimize {

    right: 48px;
}


#ai-chat-group .chat-close:hover,
#ai-chat-group .chat-minimize:hover {

    background:
        rgba(255, 255, 255, .16);
}


#ai-chat-group .chat-close:active,
#ai-chat-group .chat-minimize:active {

    transform:
        translateY(-50%)
        scale(.90);
}


/* =========================================================
   MESSAGE AREA
   ========================================================= */

#ai-chat-group .chat-messages {

    position: relative;

    flex: 1;

    min-height: 0;

    width: 100%;

    padding: 14px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(236, 72, 153, .045),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #f7f6f4 0%,
            #f3f4f6 100%
        );

    overflow-x: hidden;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 8px;

    scroll-behavior: smooth;
}


#ai-chat-group .chat-messages::before {

    content: "";

    position: absolute;

    inset: 0;

    border-top:
        1px solid rgba(255, 255, 255, .7);

    pointer-events: none;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#ai-chat-group .chat-messages::-webkit-scrollbar {

    width: 5px;
}


#ai-chat-group .chat-messages::-webkit-scrollbar-track {

    background: transparent;
}


#ai-chat-group .chat-messages::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 10px;
}


#ai-chat-group .chat-messages {

    scrollbar-width: thin;

    scrollbar-color:
        #cbd5e1 transparent;
}


/* =========================================================
   MESSAGE ROWS
   ========================================================= */

#ai-chat-group .chat-message {

    width: 100%;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    flex-shrink: 0;
}


/* =========================================================
   CUSTOMER ROW
   ========================================================= */

#ai-chat-group .chat-message.customer {

    align-items: flex-end;

    justify-content: flex-start;
}


/* =========================================================
   AGENT / AUTO REPLY ROW
   ========================================================= */

#ai-chat-group .chat-message.agent,
#ai-chat-group .chat-message.auto_reply {

    align-items: flex-start;

    justify-content: flex-start;
}


/* =========================================================
   SYSTEM MESSAGE
   ========================================================= */

#ai-chat-group .chat-message.system {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 2px 0;
}


/* =========================================================
   SYSTEM MESSAGE CONTENT
   ========================================================= */

#ai-chat-group .chat-message.system .chat-message-content {

    max-width: 92%;

    padding: 8px 12px;

    box-sizing: border-box;

    border:
        1px solid rgba(156, 163, 175, .22);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .72);

    color: #9ca3af;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.45;

    text-align: center;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .025);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


#ai-chat-group .chat-message.system.chat-countdown .chat-message-content {

    color: #d97706;

    background:
        rgba(255, 251, 235, .88);

    border-color:
        rgba(245, 158, 11, .22);
}


/* =========================================================
   MESSAGE BUBBLE
   ========================================================= */

#ai-chat-group .chat-message-content {

    max-width: 85%;

    padding: 9px 12px;

    box-sizing: border-box;

    border-radius: 13px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;

    word-break: break-word;

    overflow-wrap: anywhere;

    white-space: normal;

    flex: 0 0 auto;
}


/* =========================================================
   CUSTOMER BUBBLE
   ========================================================= */

#ai-chat-group .chat-message.customer .chat-message-content {

    order: 1;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            color-mix(
                in srgb,
                var(--primary) 92%,
                #000
            )
        );

    color: #fff;

    border-bottom-right-radius: 4px;

    box-shadow:
        0 3px 8px
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        );
}


/* =========================================================
   AGENT / AUTO REPLY
   ========================================================= */

#ai-chat-group .chat-message.agent .chat-message-content,
#ai-chat-group .chat-message.auto_reply .chat-message-content {

    order: 1;

    background: #fff;

    color: #111827;

    border:
        1px solid rgba(17, 24, 39, .08);

    border-bottom-left-radius: 4px;

    box-shadow:
        0 2px 5px rgba(17, 24, 39, .045),
        0 1px 2px rgba(17, 24, 39, .03);
}


/* =========================================================
   MESSAGE TIME
   ========================================================= */

#ai-chat-group .chat-message-time {

    display: block;

    order: 2;

    width: fit-content;

    margin-top: 3px;

    padding: 0;

    box-sizing: border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    line-height: 12px;

    font-weight: 400;

    color: #9ca3af;

    opacity: .65;

    white-space: nowrap;

    user-select: none;

    pointer-events: none;
}


/* =========================================================
   CUSTOMER TIME
   ========================================================= */

#ai-chat-group .chat-message.customer .chat-message-time {

    align-self: flex-end;

    margin-left: 0;
    margin-right: 0;

    text-align: right;
}


/* =========================================================
   AGENT / AUTO REPLY TIME
   ========================================================= */

#ai-chat-group .chat-message.agent .chat-message-time,
#ai-chat-group .chat-message.auto_reply .chat-message-time {

    align-self: flex-start;

    margin-left: 0;
    margin-right: 0;

    text-align: left;
}


/* =========================================================
   CLOSED CONVERSATION
   ========================================================= */

#ai-chat-group .chat-conversation-closed {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 10px 12px;

    color: #9ca3af;

    font-size: 12px !important;

    font-weight: 400;

    text-align: center;

    opacity: .7;
}


/* =========================================================
   CHAT FORM
   ========================================================= */

#ai-chat-group .chat-form {

    width: 100%;

    min-height: 62px;

    padding: 10px;

    box-sizing: border-box;

    background: #fff;

    border-top:
        1px solid rgba(17, 24, 39, .09);

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    box-shadow:
        0 -2px 8px rgba(17, 24, 39, .025);
}


/* =========================================================
   INPUT
   ========================================================= */

#ai-chat-group .chat-input {

    flex: 1;

    min-width: 0;

    width: 100%;

    height: 42px;

    padding: 0 12px;

    box-sizing: border-box;

    border:
        1px solid #d1d5db;

    border-radius: 10px;

    background: #fff;

    color: #111827;

    outline: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


#ai-chat-group .chat-input::placeholder {

    color: #9ca3af;
}


#ai-chat-group .chat-input:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        );
}


/* =========================================================
   SEND BUTTON
   ========================================================= */

#ai-chat-group .chat-send {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    border: none;

    border-radius: 10px;

    background:
        var(--primary);

    color: #fff;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}


#ai-chat-group .chat-send:hover {

    background:
        var(--primary);

    filter:
        brightness(1.05);

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--primary) 30%,
            transparent
        );
}


#ai-chat-group .chat-send:active {

    transform:
        scale(.92);
}


/* =========================================================
   MESSENGER
   ========================================================= */

#chat-widget .messenger {

    bottom:
        var(--messenger-bottom) !important;

    width: var(--tab-width) !important;
    height: var(--tab-height) !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef1f5
        ) !important;

    color: #111827 !important;

    z-index: var(--z-chat-toggle) !important;
}


/* =========================================================
   MESSENGER HOVER
   ========================================================= */

#chat-widget .messenger:hover {

    filter: brightness(.98);

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .20);
}


/* =========================================================
   MESSENGER ICON
   ========================================================= */

#chat-widget .messenger .chat-icon {

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
}


#chat-widget .messenger-svg {

    display: block;

    width: 21px;
    height: 21px;

    flex: 0 0 auto;
}


/* =========================================================
   MESSENGER TEXT
   ========================================================= */

#chat-widget .messenger .chat-text {

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #111827 !important;

    font-family: inherit;

    font-size: 13px !important;

    font-weight: 700;

    line-height: 1 !important;

    white-space: nowrap;

    pointer-events: none;

    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


/* =========================================================
   <= 1100px
   ========================================================= */

@media (max-width: 1100px) {

    #chat-widget {

        --tab-width: 120px;
        --tab-height: 32px;
    }


    #chat-widget .chat-item,
    #ai-chat-group .chat-item.ai-chat,
    #chat-widget .messenger {

        right: 0 !important;
    }


    #ai-chat-group .chat-box {

        right:
            calc(
                var(--tab-height) +
                var(--chat-gap)
            );

        bottom:
            calc(
                var(--ai-bottom) +
                var(--chat-gap)
            );

        width:
            min(
                var(--chat-box-width),
                calc(100vw - 150px)
            );

        height:
            min(
                var(--chat-box-height),
                calc(100vh - 180px)
            );

        min-width: 280px;
        min-height: 320px;

        max-width: var(--chat-box-width);
        max-height: var(--chat-box-height);
    }
}


/* =========================================================
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    #chat-widget {

        --tab-width: 112px;
        --tab-height: 30px;
    }


    #chat-widget .chat-item,
    #ai-chat-group .chat-item.ai-chat,
    #chat-widget .messenger {

        right: 0 !important;
    }


    #chat-widget .chat-item {

        width: var(--tab-width) !important;
        height: var(--tab-height) !important;

        padding: 0 9px !important;

        gap: 5px !important;
    }


    #chat-widget .chat-item .chat-svg,
    #chat-widget .messenger-svg {

        width: 19px;
        height: 19px;
    }


    #chat-widget .chat-item .chat-text,
    #chat-widget .messenger .chat-text {

        font-size: 11px !important;
    }


    /* =====================================================
       CHAT BOX
       ===================================================== */

    #ai-chat-group .chat-box {

        right:
            calc(
                var(--tab-height) +
                var(--chat-gap)
            );

        bottom:
            calc(
                var(--ai-bottom) +
                var(--chat-gap)
            );

        width:
            min(
                350px,
                calc(100vw - 70px)
            );

        height:
            min(
                430px,
                calc(100vh - 160px)
            );

        min-width: 270px;
        min-height: 300px;

        max-width: 350px;
        max-height: 430px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    #ai-chat-group .chat-header {

        min-height: 58px;

        padding: 9px 10px;
    }


    #ai-chat-group .chat-header-info {

        gap: 8px;
    }


    #ai-chat-group .chat-avatar {

        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 18px;
    }


    #ai-chat-group .chat-title {

        font-size: 14px;

        line-height: 18px;
    }


    #ai-chat-group .chat-status {

        font-size: 10px;

        line-height: 14px;
    }


    /* =====================================================
       CLOSE / MINIMIZE
       ===================================================== */

    #ai-chat-group .chat-minimize,
    #ai-chat-group .chat-close {

        width: 32px;
        height: 32px;
    }


    #ai-chat-group .chat-close {

        right: 5px;
    }


    #ai-chat-group .chat-minimize {

        right: 40px;
    }


    /* =====================================================
       MESSAGE AREA
       ===================================================== */

    #ai-chat-group .chat-messages {

        padding: 10px;

        gap: 7px;
    }


    /* =====================================================
       MESSAGE
       ===================================================== */

    #ai-chat-group .chat-message-content {

        max-width: 88%;

        padding: 8px 10px;

        font-size: 12px;

        line-height: 1.45;
    }


    #ai-chat-group .chat-message-time {

        font-size: 10px;

        line-height: 12px;
    }


    /* =====================================================
       FORM
       ===================================================== */

    #ai-chat-group .chat-form {

        min-height: 58px;

        padding: 8px;

        gap: 6px;
    }


    #ai-chat-group .chat-input {

        height: 40px;

        padding: 0 10px;

        font-size: 16px;
    }


    #ai-chat-group .chat-send {

        width: 40px;
        height: 40px;

        flex: 0 0 40px;

        border-radius: 9px;

        font-size: 17px;
    }
}


/* =========================================================
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    #chat-widget {

        --tab-width: 104px;
        --tab-height: 29px;

        --ai-bottom: 100px;
        --messenger-bottom: 210px;
    }


    #chat-widget .chat-item,
    #ai-chat-group .chat-item.ai-chat,
    #chat-widget .messenger {

        right: 0 !important;
    }


    #chat-widget .chat-item {

        width: var(--tab-width) !important;
        height: var(--tab-height) !important;

        padding: 0 7px !important;

        gap: 4px !important;
    }


    #chat-widget .chat-item .chat-svg,
    #chat-widget .messenger-svg {

        width: 17px;
        height: 17px;
    }


    #chat-widget .chat-item .chat-text,
    #chat-widget .messenger .chat-text {

        font-size: 10px !important;
    }


    /* =====================================================
       CHAT BOX
       ===================================================== */

    #ai-chat-group .chat-box {

        right:
            calc(
                var(--tab-height) +
                var(--chat-gap)
            );

        bottom:
            calc(
                var(--ai-bottom) +
                var(--chat-gap)
            );

        width:
            min(
                340px,
                calc(100vw - 55px)
            );

        height:
            min(
                400px,
                calc(100vh - 145px)
            );

        min-width: 0;
        min-height: 280px;

        max-width: 340px;
        max-height: 400px;

        border-radius: 15px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    #ai-chat-group .chat-header {

        min-height: 54px;

        padding: 8px;
    }


    #ai-chat-group .chat-header-info {

        gap: 7px;
    }


    #ai-chat-group .chat-avatar {

        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 16px;
    }


    #ai-chat-group .chat-title {

        font-size: 13px;

        line-height: 17px;
    }


    #ai-chat-group .chat-status {

        font-size: 9px;

        line-height: 13px;
    }


    /* =====================================================
       CLOSE
       ===================================================== */

    #ai-chat-group .chat-minimize,
    #ai-chat-group .chat-close {

        width: 30px;
        height: 30px;
    }


    #ai-chat-group .chat-close {

        right: 4px;
    }


    #ai-chat-group .chat-minimize {

        right: 37px;
    }


    /* =====================================================
       MESSAGE
       ===================================================== */

    #ai-chat-group .chat-messages {

        padding: 8px;

        gap: 6px;
    }


    #ai-chat-group .chat-message-content {

        max-width: 90%;

        padding: 7px 9px;

        font-size: 12px;

        line-height: 1.4;
    }


    #ai-chat-group .chat-message-time {

        font-size: 9px;

        line-height: 11px;
    }


    /* =====================================================
       FORM
       ===================================================== */

    #ai-chat-group .chat-form {

        min-height: 54px;

        padding: 7px;

        gap: 5px;
    }


    #ai-chat-group .chat-input {

        height: 38px;

        padding: 0 9px;

        font-size: 16px;
    }


    #ai-chat-group .chat-send {

        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        border-radius: 8px;

        font-size: 16px;
    }
}


/* =========================================================
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

    #chat-widget {

        --tab-width: 100px;
        --tab-height: 28px;

        --ai-bottom: 100px;
        --messenger-bottom: 210px;

        --chat-box-width: 80vw;
    }


    #chat-widget .chat-item,
    #ai-chat-group .chat-item.ai-chat,
    #chat-widget .messenger {

        right: 0 !important;
    }


    #chat-widget .chat-item {

        width: var(--tab-width) !important;
        height: var(--tab-height) !important;

        padding: 0 5px !important;

        gap: 3px !important;
    }


    #chat-widget .chat-item .chat-svg,
    #chat-widget .messenger-svg {

        width: 16px;
        height: 16px;
    }


    #chat-widget .chat-item .chat-text,
    #chat-widget .messenger .chat-text {

        font-size: 9px !important;
    }


    /* =====================================================
       CHAT BOX
       ===================================================== */

    #ai-chat-group .chat-box {

        width: var(--chat-box-width) !important;

        max-width: 320px !important;

        min-width: 0 !important;

        height:
            min(
                380px,
                calc(100vh - 130px)
            ) !important;

        max-height: 400px !important;

        right:
            calc(
                var(--tab-height) +
                var(--chat-gap)
            ) !important;

        bottom:
            calc(
                var(--ai-bottom) +
                var(--chat-gap)
            ) !important;

        font-size: 12px !important;

        border-radius: 13px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    #ai-chat-group .chat-header {

        min-height: 50px;

        padding: 7px;
    }


    #ai-chat-group .chat-header-info {

        gap: 6px;
    }


    #ai-chat-group .chat-avatar {

        width: 29px;
        height: 29px;

        flex-basis: 29px;

        font-size: 14px;
    }


    #ai-chat-group .chat-title {

        font-size: 12px;

        line-height: 15px;
    }


    #ai-chat-group .chat-status {

        font-size: 8px;

        line-height: 11px;
    }


    /* =====================================================
       CLOSE / MINIMIZE
       ===================================================== */

    #ai-chat-group .chat-minimize,
    #ai-chat-group .chat-close {

        width: 28px;
        height: 28px;
    }


    #ai-chat-group .chat-close {

        right: 3px;
    }


    #ai-chat-group .chat-minimize {

        right: 34px;
    }


    /* =====================================================
       MESSAGE AREA
       ===================================================== */

    #ai-chat-group .chat-messages {

        padding: 7px;

        gap: 5px;
    }


    #ai-chat-group .chat-message-content {

        max-width: 92%;

        padding: 6px 8px;

        font-size: 11px;

        line-height: 1.35;
    }


    #ai-chat-group .chat-message-time {

        font-size: 9px;

        line-height: 11px;
    }


    /* =====================================================
       FORM
       ===================================================== */

    #ai-chat-group .chat-form {

        min-height: 50px;

        padding: 6px;

        gap: 4px;
    }


    #ai-chat-group .chat-input {

        height: 36px;

        padding: 0 8px;

        font-size: 16px;
    }


    #ai-chat-group .chat-send {

        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        border-radius: 7px;

        font-size: 15px;
    }
}


/* =========================================================
   LOW HEIGHT
   ========================================================= */

@media (max-height: 650px) {

    #chat-widget {

        --chat-box-height:
            min(
                400px,
                calc(100vh - 140px)
            );
    }


    #ai-chat-group .chat-box {

        height: var(--chat-box-height);

        max-height: 400px;
    }
}


/* =========================================================
   VERY LOW HEIGHT
   ========================================================= */

@media (max-height: 520px) {

    #chat-widget {

        --chat-box-height:
            min(
                330px,
                calc(100vh - 110px)
            );
    }


    #ai-chat-group .chat-box {

        height: var(--chat-box-height);

        min-height: 240px;

        max-height: 330px;
    }
}