/* =========================================================
   P.T. LEE CHENGALVARAYA NAICKER TRUST
   TRUST AI ASSISTANT
   FINAL PREMIUM CSS
========================================================= */


/* =========================================================
   COLOUR SYSTEM
========================================================= */

:root {

    --ai-primary: #E2134F;
    --ai-primary-dark: #B90D3F;
    --ai-primary-light: #ffedf3;

    --ai-navy: #08002D;
    --ai-navy-2: #11004A;
    --ai-blue: #244FAE;

    --ai-gold: #D6A84F;
    --ai-gold-light: #F5D98A;
    --ai-gold-dark: #A87920;

    --ai-white: #ffffff;

    --ai-text: #172033;
    --ai-muted: #697386;

    --ai-border: #e6e9f0;
    --ai-light: #f7f8fb;

    --ai-shadow:
        0 22px 55px rgba(8, 0, 45, .28);

    --ai-soft-shadow:
        0 8px 25px rgba(8, 0, 45, .10);

}


/* =========================================================
   FLOATING TRUST LOGO
   HIDDEN UNTIL CURSOR REACHES RIGHT EDGE
========================================================= */

.ai-assistant-button {

    position: fixed;

    top: 50%;

    /* Slightly inside from the right edge */
    right: 8px;

    width: 52px;
    height: 52px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    display: flex;

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

    cursor: pointer;

    box-shadow: none;

    z-index: 99999;

    transform:
        translateY(-50%)
        translateX(60px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        opacity .25s ease,
        visibility .25s ease;
}


/* =========================================================
   SHOW FLOATING LOGO
========================================================= */

.ai-assistant-button.ai-show-button {

    transform:
        translateY(-50%)
        translateX(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   FLOATING TRUST LOGO IMAGE
========================================================= */

.ai-floating-logo {

    width: 52px;
    height: 52px;

    display: block;

    object-fit: contain;

    padding: 0;
    margin: 0;

    background: transparent;

    border: none;
    border-radius: 0;

    box-shadow: none;

    pointer-events: none;
}


/* =========================================================
   FLOATING LOGO HOVER
========================================================= */

.ai-assistant-button.ai-show-button:hover {

    transform:
        translateY(-50%)
        translateX(-2px)
        scale(1.05);
}


/* =========================================================
   FLOATING LOGO ACTIVE
========================================================= */

.ai-assistant-button.ai-show-button:active {

    transform:
        translateY(-50%)
        translateX(0)
        scale(.96);
}


/* =========================================================
   REMOVE OLD PULSE / RING
========================================================= */

.ai-assistant-button::before {

    display: none !important;
}


/* =========================================================
   AI ASSISTANT WINDOW
   FIXED WHILE PAGE SCROLLS
========================================================= */

.ai-assistant-window {

    position: fixed;

    right: 88px;

    top: 55%;

    bottom: auto;

    width: 350px;

    max-width:
        calc(100vw - 120px);

    height: 520px;

    max-height:
        calc(100vh - 40px);

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

    border-radius:
        19px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    border:
        2px solid
        rgba(214, 168, 79, .95);

    box-shadow:

        0 22px 55px
        rgba(8, 0, 45, .28),

        0 0 0 1px
        rgba(245, 217, 138, .25),

        0 0 22px
        rgba(214, 168, 79, .18);

    z-index:
        99998;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-50%)
        scale(.96);

    transition:

        opacity .28s ease,

        visibility .28s ease,

        transform
        .28s cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   INNER GOLD BORDER
========================================================= */

.ai-assistant-window::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 17px;

    border:
        1px solid
        rgba(245, 217, 138, .65);

    pointer-events: none;

    z-index: 20;
}


/* =========================================================
   ACTIVE WINDOW
========================================================= */

.ai-assistant-window.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(-50%)
        scale(1);
}


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

.ai-assistant-header {

    min-height:
        70px;

    padding:
        10px 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(226, 19, 79, .40),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #08002D 0%,
            #11004A 48%,
            #244FAE 100%
        );

    position:
        relative;

    overflow:
        hidden;

    flex-shrink:
        0;
}


/* =========================================================
   HEADER GOLD LINE
========================================================= */

.ai-assistant-header::after {

    content: "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            #A87920,
            #F5D98A,
            #E2134F,
            #F5D98A,
            #A87920
        );

    background-size:
        250% 100%;

    animation:
        aiGoldLine 5s linear infinite;
}


@keyframes aiGoldLine {

    0% {

        background-position:
            0% 50%;

    }

    100% {

        background-position:
            250% 50%;

    }

}


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

.ai-assistant-header::before {

    content: "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -85px;

    top:
        -105px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    box-shadow:

        0 0 0 22px
        rgba(255, 255, 255, .025),

        0 0 0 45px
        rgba(255, 255, 255, .018);

    pointer-events:
        none;
}


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

.ai-assistant-header-left {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    position:
        relative;

    z-index:
        2;

    min-width:
        0;
}


/* =========================================================
   HEADER TRUST LOGO
========================================================= */

.ai-assistant-logo {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        3px;

    background:
        #ffffff;

    border:
        2px solid
        #D6A84F;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .24);

    position:
        relative;

    overflow:
        hidden;

    box-sizing:
        border-box;
}


/* =========================================================
   HEADER LOGO IMAGE
========================================================= */

.ai-assistant-logo img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    border-radius:
        50%;

    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   HEADER LOGO GOLD ACCENT
========================================================= */

.ai-assistant-logo::before {

    content: "";

    position:
        absolute;

    inset:
        -2px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(245, 217, 138, .75);

    pointer-events:
        none;

    z-index:
        3;
}


/* =========================================================
   HEADER LOGO HIGHLIGHT
========================================================= */

.ai-assistant-logo::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .35),
            transparent 45%
        );

    pointer-events:
        none;

    z-index:
        4;
}


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

.ai-assistant-title {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.4;

    color:
        #ffffff;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   STATUS
========================================================= */

.ai-assistant-status {

    margin-top:
        2px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        9.5px;

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

    display:
        flex;

    align-items:
        center;
}


/* =========================================================
   STATUS DOT
========================================================= */

.ai-assistant-status::before {

    content: "";

    width:
        6px;

    height:
        6px;

    margin-right:
        5px;

    border-radius:
        50%;

    background:
        #62e6a7;

    box-shadow:

        0 0 0 3px
        rgba(98, 230, 167, .12),

        0 0 9px
        rgba(98, 230, 167, .65);
}


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

.ai-assistant-close {

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius:
        9px;

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

    color:
        #ffffff;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        13px;

    transition:

        background .2s ease,

        transform .2s ease;

    position:
        relative;

    z-index:
        3;
}


.ai-assistant-close:hover {

    background:
        rgba(226, 19, 79, .55);

    transform:
        rotate(90deg);
}


/* =========================================================
   CHAT BODY
========================================================= */

.ai-assistant-body {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        13px;

    background:

        radial-gradient(
            circle at 10% 5%,
            rgba(226, 19, 79, .035),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 30%,
            rgba(36, 79, 174, .035),
            transparent 30%
        ),

        #fbfcfe;

    scroll-behavior:
        smooth;
}


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

.ai-assistant-body::-webkit-scrollbar {

    width:
        5px;
}


.ai-assistant-body::-webkit-scrollbar-track {

    background:
        transparent;
}


.ai-assistant-body::-webkit-scrollbar-thumb {

    background:

        linear-gradient(
            #D6A84F,
            #E2134F
        );

    border-radius:
        10px;
}


/* =========================================================
   WELCOME CARD
========================================================= */

.ai-welcome {

    text-align:
        center;

    padding:
        13px 11px 14px;

    margin-bottom:
        10px;

    border:
        1px solid
        rgba(8, 0, 45, .07);

    border-radius:
        15px;

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

    box-shadow:
        0 6px 20px
        rgba(8, 0, 45, .05);

    position:
        relative;

    overflow:
        hidden;
}


/* =========================================================
   WELCOME TOP LINE
========================================================= */

.ai-welcome::before {

    content: "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            #08002D,
            #E2134F,
            #D6A84F
        );
}


/* =========================================================
   WELCOME TRUST LOGO
   LARGE
   NO OUTER CIRCLE
   NO BACKGROUND
========================================================= */

.ai-welcome-logo {

    width:
        115px;

    height:
        115px;

    margin:
        0 auto 12px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent;

    border:
        none;

    border-radius:
        0;

    overflow:
        visible;

    box-shadow:
        none;

    position:
        relative;
}


/* =========================================================
   WELCOME LOGO IMAGE
========================================================= */

.ai-welcome-logo img {

    width:
        115px;

    height:
        115px;

    display:
        block;

    object-fit:
        contain;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;

    border:
        none;
}


/* =========================================================
   WELCOME TITLE
========================================================= */

.ai-welcome h3 {

    margin:
        0 0 5px;

    color:
        #08002D;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        18px;

    font-weight:
        700;
}


/* =========================================================
   WELCOME TITLE LINE
========================================================= */

.ai-welcome h3::after {

    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        2px;

    margin:
        5px auto 0;

    border-radius:
        5px;

    background:

        linear-gradient(
            90deg,
            #E2134F,
            #D6A84F
        );
}


/* =========================================================
   WELCOME TEXT
========================================================= */

.ai-welcome p {

    margin:
        8px 0 0;

    color:
        #697386;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        11.5px;

    line-height:
        1.65;
}


/* =========================================================
   QUICK QUESTIONS
========================================================= */

.ai-quick-questions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    margin-top:
        10px;
}


/* =========================================================
   QUICK QUESTION BUTTON
========================================================= */

.ai-quick-question {

    position:
        relative;

    padding:
        8px;

    min-height:
        40px;

    border:
        1px solid
        #e5e8ef;

    border-radius:
        10px;

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

    color:
        #424b5c;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        10.5px;

    line-height:
        1.4;

    font-weight:
        500;

    text-align:
        left;

    cursor:
        pointer;

    overflow:
        hidden;

    transition:

        border-color .22s ease,

        transform .22s ease,

        box-shadow .22s ease,

        background .22s ease,

        color .22s ease;
}


/* =========================================================
   QUICK QUESTION ACCENT
========================================================= */

.ai-quick-question::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:

        linear-gradient(
            #E2134F,
            #D6A84F
        );

    opacity:
        0;

    transition:
        opacity .2s ease;
}


/* =========================================================
   QUICK QUESTION HOVER
========================================================= */

.ai-quick-question:hover {

    border-color:
        rgba(226, 19, 79, .35);

    background:
        #ffffff;

    color:
        #B90D3F;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(8, 0, 45, .08);
}


.ai-quick-question:hover::before {

    opacity:
        1;
}


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

.ai-message {

    display:
        flex;

    margin-bottom:
        9px;

    animation:
        aiMessageIn .25s ease;
}


.ai-message.user {

    justify-content:
        flex-end;
}


.ai-message.assistant {

    justify-content:
        flex-start;
}


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

@keyframes aiMessageIn {

    from {

        opacity:
            0;

        transform:
            translateY(7px)
            scale(.98);
    }

    to {

        opacity:
            1;

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

}


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

.ai-message-bubble {

    max-width:
        88%;

    padding:
        9px 11px;

    border-radius:
        13px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        11.5px;

    line-height:
        1.65;

    word-wrap:
        break-word;

    overflow-wrap:
        break-word;
}


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

.ai-message.assistant
.ai-message-bubble {

    color:
        #303846;

    background:
        #ffffff;

    border:
        1px solid
        #e5e8ee;

    border-bottom-left-radius:
        4px;

    box-shadow:
        0 4px 13px
        rgba(8, 0, 45, .045);
}


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

.ai-message.user
.ai-message-bubble {

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #08002D 0%,
            #244FAE 48%,
            #E2134F 100%
        );

    border:
        0;

    border-bottom-right-radius:
        4px;

    box-shadow:
        0 5px 16px
        rgba(8, 0, 45, .18);
}


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

.ai-message-bubble a {

    color:
        #B90D3F;

    font-weight:
        600;

    text-decoration:
        underline;
}


.ai-message.user
.ai-message-bubble a {

    color:
        #ffffff;
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.ai-map-container {

    width:
        100%;

    margin-top:
        9px;

    overflow:
        hidden;

    border-radius:
        11px;

    border:
        1px solid
        #e3e6ec;

    background:
        #ffffff;

    box-shadow:
        0 5px 15px
        rgba(8, 0, 45, .08);
}


.ai-map-container iframe {

    display:
        block;

    width:
        100%;

    height:
        165px;

    border:
        0;

    border-radius:
        11px;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.ai-typing {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


.ai-typing span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #E2134F;

    animation:
        aiTyping .9s infinite ease-in-out;
}


.ai-typing span:nth-child(2) {

    background:
        #244FAE;

    animation-delay:
        .15s;
}


.ai-typing span:nth-child(3) {

    background:
        #D6A84F;

    animation-delay:
        .30s;
}


@keyframes aiTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity:
            .4;
    }

    30% {

        transform:
            translateY(-4px);

        opacity:
            1;
    }

}


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

.ai-assistant-input-area {

    padding:
        9px;

    border-top:
        1px solid
        #e5e8ee;

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

    box-shadow:
        0 -5px 16px
        rgba(8, 0, 45, .035);

    flex-shrink:
        0;
}


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

.ai-assistant-form {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


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

.ai-assistant-input {

    flex:
        1;

    min-width:
        0;

    height:
        38px;

    padding:
        0 11px;

    border:
        1px solid
        #dfe3ea;

    border-radius:
        10px;

    outline:
        none;

    color:
        #172033;

    background:
        #f8f9fc;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        11px;

    transition:

        border-color .2s ease,

        box-shadow .2s ease,

        background .2s ease;
}


.ai-assistant-input:focus {

    border-color:
        #E2134F;

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(226, 19, 79, .08);
}


.ai-assistant-input::placeholder {

    color:
        #9aa3af;

    font-size:
        11px;
}


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

.ai-assistant-send {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        10px;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #08002D 0%,
            #244FAE 45%,
            #E2134F 100%
        );

    cursor:
        pointer;

    font-size:
        13px;

    box-shadow:
        0 5px 14px
        rgba(8, 0, 45, .18);

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


.ai-assistant-send:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(8, 0, 45, .25);
}


.ai-assistant-send:active {

    transform:
        translateY(0);
}


.ai-assistant-send:disabled {

    opacity:
        .5;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       FLOATING TRUST LOGO
    ----------------------------------------------------- */

    .ai-assistant-button {

        width:
            45px;

        height:
            45px;

        right:
            6px;

        top:
            50%;

        transform:
            translateY(-50%)
            translateX(52px);
    }


    .ai-assistant-button.ai-show-button {

        transform:
            translateY(-50%)
            translateX(0);
    }


    .ai-assistant-button.ai-show-button:hover {

        transform:
            translateY(-50%)
            translateX(-2px)
            scale(1.05);
    }


    .ai-floating-logo {

        width:
            45px;

        height:
            45px;
    }


    /* -----------------------------------------------------
       MOBILE ASSISTANT WINDOW
    ----------------------------------------------------- */

    .ai-assistant-window {

        right:
            58px;

        left:
            8px;

        top:
            55%;

        bottom:
            auto;

        width:
            auto;

        max-width:
            none;

        height:
            min(520px, calc(100vh - 30px));

        min-height:
            400px;

        max-height:
            calc(100vh - 30px);

        border-radius:
            17px;
    }


    /* -----------------------------------------------------
       MOBILE HEADER
    ----------------------------------------------------- */

    .ai-assistant-header {

        min-height:
            64px;

        padding:
            9px 10px;
    }


    .ai-assistant-logo {

        width:
            40px;

        height:
            40px;

        flex:
            0 0 40px;

        padding:
            2px;
    }


    .ai-assistant-title {

        font-size:
            12.5px;
    }


    .ai-assistant-status {

        font-size:
            8.5px;
    }


    .ai-assistant-close {

        width:
            30px;

        height:
            30px;

        font-size:
            12px;
    }


    /* -----------------------------------------------------
       MOBILE BODY
    ----------------------------------------------------- */

    .ai-assistant-body {

        padding:
            11px;
    }


    /* -----------------------------------------------------
       MOBILE WELCOME
    ----------------------------------------------------- */

    .ai-welcome {

        padding:
            11px 10px 12px;
    }


    .ai-welcome-logo {

        width:
            100px;

        height:
            100px;

        margin:
            0 auto 10px;

        background:
            transparent;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;
    }


    .ai-welcome-logo img {

        width:
            100px;

        height:
            100px;

        object-fit:
            contain;

        border-radius:
            0;

        background:
            transparent;

        border:
            none;

        box-shadow:
            none;
    }


    .ai-welcome h3 {

        font-size:
            16px;
    }


    .ai-welcome p {

        font-size:
            10.5px;

        line-height:
            1.6;
    }


    /* -----------------------------------------------------
       MOBILE QUICK QUESTIONS
    ----------------------------------------------------- */

    .ai-quick-questions {

        grid-template-columns:
            1fr 1fr;

        gap:
            6px;
    }


    .ai-quick-question {

        min-height:
            38px;

        padding:
            7px;

        font-size:
            10px;
    }


    /* -----------------------------------------------------
       MOBILE MESSAGES
    ----------------------------------------------------- */

    .ai-message-bubble {

        max-width:
            91%;

        font-size:
            10.8px;

        line-height:
            1.6;

        padding:
            8px 9px;
    }


    /* -----------------------------------------------------
       MOBILE MAP
    ----------------------------------------------------- */

    .ai-map-container iframe {

        height:
            150px;
    }


    /* -----------------------------------------------------
       MOBILE INPUT
    ----------------------------------------------------- */

    .ai-assistant-input-area {

        padding:
            8px;
    }


    .ai-assistant-input {

        height:
            36px;

        font-size:
            10.5px;
    }


    .ai-assistant-input::placeholder {

        font-size:
            10.5px;
    }


    .ai-assistant-send {

        width:
            36px;

        height:
            36px;

        font-size:
            12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {


    .ai-assistant-button {

        width:
            40px;

        height:
            40px;

        right:
            5px;

        top:
            50%;

        transform:
            translateY(-50%)
            translateX(46px);
    }


    .ai-assistant-button.ai-show-button {

        transform:
            translateY(-50%)
            translateX(0);
    }


    .ai-floating-logo {

        width:
            40px;

        height:
            40px;
    }


    /* -----------------------------------------------------
       VERY SMALL WINDOW
    ----------------------------------------------------- */

    .ai-assistant-window {

        right:
            52px;

        left:
            5px;

        top:
            55%;

        bottom:
            auto;

        width:
            auto;

        height:
            min(500px, calc(100vh - 25px));

        min-height:
            370px;

        max-height:
            calc(100vh - 25px);

        border-radius:
            15px;
    }


    /* -----------------------------------------------------
       VERY SMALL HEADER
    ----------------------------------------------------- */

    .ai-assistant-header {

        min-height:
            59px;

        padding:
            8px 9px;
    }


    .ai-assistant-logo {

        width:
            37px;

        height:
            37px;

        flex:
            0 0 37px;
    }


    .ai-assistant-title {

        font-size:
            11.5px;
    }


    .ai-assistant-status {

        font-size:
            8px;
    }


    .ai-assistant-close {

        width:
            28px;

        height:
            28px;
    }


    /* -----------------------------------------------------
       VERY SMALL WELCOME LOGO
    ----------------------------------------------------- */

    .ai-welcome-logo {

        width:
            90px;

        height:
            90px;

        background:
            transparent;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;
    }


    .ai-welcome-logo img {

        width:
            90px;

        height:
            90px;

        object-fit:
            contain;

        border-radius:
            0;

        background:
            transparent;

        border:
            none;

        box-shadow:
            none;
    }


    .ai-welcome h3 {

        font-size:
            15px;
    }


    .ai-welcome p {

        font-size:
            10px;

        line-height:
            1.55;
    }


    /* -----------------------------------------------------
       VERY SMALL QUICK QUESTIONS
    ----------------------------------------------------- */

    .ai-quick-questions {

        grid-template-columns:
            1fr;
    }


    .ai-quick-question {

        font-size:
            9.5px;
    }


    /* -----------------------------------------------------
       VERY SMALL CHAT
    ----------------------------------------------------- */

    .ai-message-bubble {

        max-width:
            93%;

        font-size:
            10.2px;

        line-height:
            1.55;
    }


    /* -----------------------------------------------------
       VERY SMALL INPUT
    ----------------------------------------------------- */

    .ai-assistant-input {

        height:
            35px;

        font-size:
            10px;
    }


    .ai-assistant-input::placeholder {

        font-size:
            10px;
    }


    .ai-assistant-send {

        width:
            35px;

        height:
            35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {


    .ai-assistant-button {

        width:
            50px;

        height:
            50px;

        right:
            7px;

        top:
            50%;

        transform:
            translateY(-50%)
            translateX(57px);
    }


    .ai-assistant-button.ai-show-button {

        transform:
            translateY(-50%)
            translateX(0);
    }


    .ai-floating-logo {

        width:
            50px;

        height:
            50px;
    }


    .ai-assistant-window {

        width:
            340px;

        height:
            min(510px, calc(100vh - 40px));

        right:
            76px;

        top:
            55%;

        bottom:
            auto;

        max-width:
            calc(100vw - 95px);

        max-height:
            calc(100vh - 40px);
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {


    .ai-assistant-button {

        width:
            52px;

        height:
            52px;

        right:
            8px;
    }


    .ai-floating-logo {

        width:
            52px;

        height:
            52px;
    }


    .ai-assistant-window {

        width:
            350px;

        height:
            min(520px, calc(100vh - 40px));

        right:
            88px;

        top:
            55%;

        bottom:
            auto;

        max-height:
            calc(100vh - 40px);
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ai-assistant-button:focus-visible,
.ai-assistant-close:focus-visible,
.ai-quick-question:focus-visible,
.ai-assistant-input:focus-visible,
.ai-assistant-send:focus-visible {

    outline:
        3px solid
        rgba(226, 19, 79, .25);

    outline-offset:
        2px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ai-assistant-button,
    .ai-assistant-window,
    .ai-assistant-close,
    .ai-quick-question,
    .ai-assistant-send {

        transition:
            none;
    }


    .ai-assistant-header::after {

        animation:
            none;
    }


    .ai-message {

        animation:
            none;
    }


    .ai-typing span {

        animation:
            none;
    }

}