/* =========================
   KELSY — FUTURISTIC BYA AI
========================= */

#bya-chat{
    --kelsy-cyan:#4deeea;
    --kelsy-blue:#3b82f6;
    --kelsy-violet:#8b5cf6;
    --kelsy-night:#07111f;
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:999999;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#chat-button{
    position:relative;
    width:68px;
    height:68px;
    padding:0;
    border:1px solid rgba(125,249,255,.72);
    border-radius:22px;
    background:
        radial-gradient(circle at 30% 20%,rgba(77,238,234,.42),transparent 36%),
        linear-gradient(145deg,#12233f 0%,#10285b 48%,#492b84 100%);
    color:#fff;
    cursor:pointer;
    box-shadow:
        0 0 0 6px rgba(77,238,234,.07),
        0 18px 42px rgba(1,8,20,.48),
        0 0 32px rgba(77,238,234,.32),
        inset 0 1px 1px rgba(255,255,255,.34);
    transition:transform .25s ease,box-shadow .25s ease;
    isolation:isolate;
}

#chat-button::before{
    content:"K";
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:28px;
    line-height:1;
    font-weight:750;
    letter-spacing:-1px;
    text-shadow:0 0 18px rgba(255,255,255,.8);
}

#chat-button::after{
    content:"";
    position:absolute;
    inset:-7px;
    z-index:-1;
    border:1px solid rgba(77,238,234,.28);
    border-radius:27px;
    animation:kelsyAura 2.8s ease-in-out infinite;
}

#chat-button:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:
        0 0 0 7px rgba(77,238,234,.09),
        0 22px 48px rgba(1,8,20,.55),
        0 0 42px rgba(77,238,234,.46);
}

#chat-button:focus-visible,
#chat-close:focus-visible,
.chat-options button:focus-visible{
    outline:2px solid var(--kelsy-cyan);
    outline-offset:3px;
}

#chat-window{
    display:none !important;
    position:absolute;
    right:0;
    bottom:86px;
    width:390px;
    max-width:calc(100vw - 32px);
    overflow:hidden;
    color:#edfaff;
    background:
        radial-gradient(circle at 88% 4%,rgba(139,92,246,.22),transparent 30%),
        radial-gradient(circle at 8% 98%,rgba(77,238,234,.12),transparent 34%),
        linear-gradient(155deg,rgba(10,24,43,.98),rgba(5,14,28,.98));
    border:1px solid rgba(132,231,255,.25);
    border-radius:26px;
    box-shadow:
        0 28px 80px rgba(0,5,16,.62),
        0 0 44px rgba(59,130,246,.16),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    transform-origin:bottom right;
}

#chat-window.open{
    display:block !important;
    animation:kelsyOpen .32s cubic-bezier(.2,.82,.3,1);
}

.chat-header{
    position:relative;
    min-height:78px;
    padding:16px 54px 15px 72px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
        linear-gradient(100deg,rgba(77,238,234,.12),rgba(59,130,246,.08) 50%,rgba(139,92,246,.14));
    border-bottom:1px solid rgba(132,231,255,.16);
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.1px;
}

.chat-header::before{
    content:"K";
    position:absolute;
    left:18px;
    top:16px;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(125,249,255,.58);
    border-radius:15px;
    background:linear-gradient(145deg,#17335d,#432779);
    box-shadow:0 0 22px rgba(77,238,234,.22);
    color:#fff;
    font-size:20px;
    font-weight:800;
}

.chat-header::after{
    content:"BYA AI Consultant  •  Online";
    margin-top:4px;
    color:#9eeff0;
    font-size:11px;
    font-weight:600;
    letter-spacing:.55px;
    text-transform:uppercase;
}

#chat-close{
    position:absolute;
    top:20px;
    right:18px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:11px;
    color:#c9e8f4;
    font-size:24px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}

#chat-close:hover{
    color:#fff;
    background:rgba(255,255,255,.1);
    transform:rotate(4deg);
}

#chat-messages{
    min-height:190px;
    max-height:330px;
    padding:20px 17px 10px;
    overflow-y:auto;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:rgba(77,238,234,.3) transparent;
}

#chat-messages::-webkit-scrollbar{
    width:5px;
}

#chat-messages::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:rgba(77,238,234,.3);
}

.bot-message,
.user-message{
    width:fit-content;
    max-width:86%;
    margin-bottom:13px;
    padding:12px 15px;
    border-radius:17px;
    font-size:14px;
    line-height:1.58;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    animation:kelsyMessage .28s ease both;
}

.bot-message{
    margin-right:auto;
    color:#eafaff;
    background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
    border:1px solid rgba(170,237,255,.13);
    border-bottom-left-radius:5px;
}

.user-message{
    margin-left:auto;
    color:#fff;
    text-align:left;
    background:linear-gradient(135deg,#2469c8,#6d43c3);
    border:1px solid rgba(255,255,255,.16);
    border-bottom-right-radius:5px;
}

.chat-options{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 16px 17px;
    border-top:1px solid rgba(132,231,255,.1);
    background:rgba(3,10,23,.28);
}

.chat-options button{
    flex:1 1 auto;
    min-height:39px;
    padding:9px 12px;
    border:1px solid rgba(107,222,241,.22);
    border-radius:12px;
    color:#dffbff;
    background:rgba(31,74,112,.28);
    font-size:12px;
    font-weight:650;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.chat-options button:hover{
    transform:translateY(-1px);
    background:rgba(49,111,156,.4);
    border-color:rgba(77,238,234,.48);
}

@keyframes kelsyAura{
    0%,100%{transform:scale(.96);opacity:.48}
    50%{transform:scale(1.08);opacity:.9}
}

@keyframes kelsyOpen{
    from{opacity:0;transform:translateY(16px) scale(.94)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes kelsyMessage{
    from{opacity:0;transform:translateY(7px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
    #bya-chat{
        right:12px !important;
        bottom:12px !important;
    }

    #chat-button{
        width:60px;
        height:60px;
        border-radius:19px;
    }

    #chat-window{
        position:fixed !important;
        right:10px !important;
        bottom:82px !important;
        width:calc(100vw - 20px) !important;
        max-width:390px !important;
        max-height:calc(100dvh - 100px);
        border-radius:22px;
    }

    #chat-messages{
        max-height:calc(100dvh - 300px);
    }
}

@media(prefers-reduced-motion:reduce){
    #chat-button::after,
    #chat-window.open,
    .bot-message,
    .user-message{
        animation:none;
    }
}


/* =========================
   KELSY TRUE NEON GLASS
========================= */

#chat-button{
    border:1px solid rgba(126,249,255,.95);
    background:
        radial-gradient(circle at 35% 25%,rgba(255,255,255,.38),transparent 20%),
        linear-gradient(145deg,rgba(8,39,59,.86),rgba(37,30,88,.82));
    box-shadow:
        0 0 8px rgba(77,238,234,.9),
        0 0 24px rgba(77,238,234,.64),
        0 0 52px rgba(139,92,246,.38),
        inset 0 0 18px rgba(77,238,234,.2),
        inset 0 1px 1px rgba(255,255,255,.75);
}

#chat-button::before{
    color:#f5ffff;
    text-shadow:
        0 0 5px #ffffff,
        0 0 12px #4deeea,
        0 0 25px #4deeea;
}

#chat-button::after{
    border-color:rgba(77,238,234,.72);
    box-shadow:
        0 0 16px rgba(77,238,234,.5),
        inset 0 0 14px rgba(77,238,234,.18);
}

#chat-window{
    background:
        linear-gradient(
            145deg,
            rgba(13,32,51,.70),
            rgba(8,20,39,.58)
        );
    border:1px solid rgba(107,245,255,.82);
    box-shadow:
        0 0 7px rgba(77,238,234,.7),
        0 0 27px rgba(77,238,234,.32),
        0 0 58px rgba(139,92,246,.25),
        0 30px 90px rgba(0,4,14,.58),
        inset 0 0 35px rgba(107,245,255,.055),
        inset 0 1px 0 rgba(255,255,255,.42);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
}

#chat-window::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.20),
            transparent 22%,
            transparent 72%,
            rgba(77,238,234,.10)
        );
}

#chat-window > *{
    position:relative;
    z-index:1;
}

.chat-header{
    background:
        linear-gradient(
            110deg,
            rgba(77,238,234,.16),
            rgba(59,130,246,.08) 48%,
            rgba(217,70,239,.14)
        );
    border-bottom:1px solid rgba(107,245,255,.48);
    box-shadow:
        0 4px 24px rgba(77,238,234,.08),
        inset 0 -1px 0 rgba(255,255,255,.08);
}

.chat-header::before{
    border-color:rgba(126,249,255,.95);
    background:
        linear-gradient(
            145deg,
            rgba(13,66,87,.78),
            rgba(70,38,122,.72)
        );
    box-shadow:
        0 0 8px rgba(77,238,234,.7),
        0 0 22px rgba(77,238,234,.42),
        inset 0 0 12px rgba(255,255,255,.12);
    text-shadow:
        0 0 5px #fff,
        0 0 14px #4deeea;
}

.chat-header::after{
    color:#b9ffff;
    text-shadow:0 0 10px rgba(77,238,234,.72);
}

#chat-messages{
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(77,238,234,.055),
            transparent 32%
        );
}

.bot-message{
    color:#f1fdff;
    background:
        linear-gradient(
            135deg,
            rgba(204,249,255,.14),
            rgba(126,160,255,.075)
        );
    border:1px solid rgba(166,246,255,.30);
    box-shadow:
        0 8px 25px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(15px);
}

.user-message{
    background:
        linear-gradient(
            135deg,
            rgba(0,196,218,.82),
            rgba(103,65,201,.88)
        );
    border:1px solid rgba(191,251,255,.52);
    box-shadow:
        0 0 16px rgba(77,238,234,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.chat-options{
    background:rgba(4,15,29,.32);
    border-top-color:rgba(107,245,255,.28);
    backdrop-filter:blur(18px);
}

.chat-options button{
    color:#efffff;
    background:
        linear-gradient(
            135deg,
            rgba(77,238,234,.10),
            rgba(139,92,246,.10)
        );
    border:1px solid rgba(126,249,255,.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10);
}

.chat-options button:hover{
    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(77,238,234,.25),
            rgba(139,92,246,.22)
        );
    border-color:#7ef9ff;
    box-shadow:
        0 0 13px rgba(77,238,234,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
}


/* =========================
   KELSY HUMAN HOSTESS MODE
========================= */

#bya-chat{
    right:18px !important;
    bottom:0 !important;
    width:270px;
    height:470px;
    pointer-events:none;
}

#chat-button{
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    width:255px !important;
    height:450px !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    pointer-events:auto;
    filter:
        drop-shadow(0 18px 18px rgba(0,0,0,.22))
        drop-shadow(0 0 10px rgba(77,238,234,.10));
}

#chat-button::before,
#chat-button::after{
    display:none !important;
    content:none !important;
}

#chat-button img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    pointer-events:none;
    transition:
        transform .35s ease,
        filter .35s ease;
}

#chat-button:hover img{
    transform:translateY(-4px);
    filter:
        drop-shadow(0 22px 20px rgba(0,0,0,.26))
        drop-shadow(0 0 14px rgba(77,238,234,.16));
}

#kelsy-welcome{
    position:absolute;
    right:205px;
    bottom:350px;
    width:max-content;
    max-width:230px;
    padding:12px 17px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:18px 18px 4px 18px;
    color:#10233d;
    background:rgba(255,255,255,.90);
    box-shadow:
        0 14px 40px rgba(3,15,31,.20),
        inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:14px;
    font-weight:650;
    line-height:1.4;
    opacity:0;
    transform:translateY(8px) scale(.96);
    animation:
        kelsyHumanEnter .55s .65s ease forwards,
        kelsyWelcomeFloat 3s 1.3s ease-in-out infinite;
    pointer-events:none;
}

#chat-window{
    position:absolute !important;
    right:235px !important;
    bottom:28px !important;
    width:370px !important;
    max-width:calc(100vw - 315px) !important;
    color:#14263e !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    box-shadow:
        0 24px 65px rgba(5,18,37,.24),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
    backdrop-filter:blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(145%) !important;
}

#chat-window.open + *{
    pointer-events:auto;
}

#chat-window.open{
    pointer-events:auto;
}

.chat-header{
    color:#12233d !important;
    background:rgba(255,255,255,.45) !important;
    border-bottom:1px solid rgba(25,77,104,.10) !important;
    box-shadow:none !important;
}

.chat-header::before{
    color:#fff !important;
    background:linear-gradient(145deg,#174b69,#473477) !important;
}

.chat-header::after{
    color:#287181 !important;
    text-shadow:none !important;
}

#chat-close{
    color:#315069 !important;
}

#chat-messages{
    background:transparent !important;
}

.bot-message{
    color:#172b43 !important;
    background:rgba(232,244,248,.92) !important;
    border:1px solid rgba(70,130,150,.12) !important;
}

.user-message{
    color:#fff !important;
    background:linear-gradient(135deg,#176f86,#514092) !important;
}

.chat-options{
    background:rgba(245,250,252,.66) !important;
    border-top:1px solid rgba(25,77,104,.10) !important;
}

.chat-options button{
    color:#15334b !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(28,115,133,.20) !important;
}

@keyframes kelsyHumanEnter{
    from{
        opacity:0;
        transform:translateY(15px) scale(.94);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes kelsyWelcomeFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}

@media(max-width:760px){
    #bya-chat{
        right:2px !important;
        width:170px;
        height:315px;
    }

    #chat-button{
        width:165px !important;
        height:295px !important;
    }

    #kelsy-welcome{
        right:128px;
        bottom:232px;
        max-width:175px;
        padding:9px 12px;
        font-size:12px;
    }

    #chat-window{
        position:fixed !important;
        right:8px !important;
        bottom:10px !important;
        width:calc(100vw - 16px) !important;
        max-width:none !important;
        max-height:calc(100dvh - 20px);
    }

    #chat-window.open ~ #chat-button{
        opacity:.16;
        pointer-events:none;
    }

    #chat-window.open ~ #kelsy-welcome{
        display:none;
    }
}



/* =========================
   KELSY TRANSPARENT WAVE MODE
========================= */

#chat-window{
    color:#effcff !important;
    background:transparent !important;
    border:1px solid rgba(74,222,255,.92) !important;
    box-shadow:
        0 0 5px rgba(74,222,255,.95),
        0 0 16px rgba(43,190,255,.58),
        0 0 38px rgba(38,113,255,.34),
        inset 0 0 12px rgba(74,222,255,.12) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

#chat-window::before{
    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(80,231,255,.10) 22%,
            transparent 43%,
            transparent 72%,
            rgba(91,111,255,.10) 88%,
            transparent 100%
        ) !important;
}

.chat-header{
    color:#f3fdff !important;
    background:transparent !important;
    border-bottom:1px solid rgba(74,222,255,.42) !important;
    box-shadow:
        0 5px 18px rgba(48,187,255,.08) !important;
    text-shadow:
        0 0 7px rgba(125,239,255,.72) !important;
}

.chat-header::before{
    color:#fff !important;
    background:transparent !important;
    border:1px solid rgba(74,222,255,.88) !important;
    box-shadow:
        0 0 7px rgba(74,222,255,.80),
        0 0 18px rgba(45,147,255,.42) !important;
}

.chat-header::after{
    color:#9df2ff !important;
    text-shadow:
        0 0 8px rgba(74,222,255,.75) !important;
}

#chat-close{
    color:#c8f8ff !important;
    background:transparent !important;
    text-shadow:
        0 0 7px rgba(74,222,255,.75);
}

#chat-messages{
    background:transparent !important;
}

.bot-message,
.user-message{
    color:#f1fcff !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    text-shadow:
        0 1px 3px rgba(0,0,0,.95),
        0 0 6px rgba(27,72,105,.75);
}

.user-message{
    color:#95f4ff !important;
    text-align:right !important;
}

.chat-options{
    background:transparent !important;
    border-top:1px solid rgba(74,222,255,.34) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.chat-options button{
    color:#dffcff !important;
    background:transparent !important;
    border:1px solid rgba(74,222,255,.58) !important;
    box-shadow:
        0 0 8px rgba(74,222,255,.16),
        inset 0 0 8px rgba(74,222,255,.06) !important;
    text-shadow:
        0 0 6px rgba(74,222,255,.38);
}

.chat-options button:hover{
    color:#fff !important;
    background:rgba(37,151,210,.10) !important;
    border-color:#79efff !important;
    box-shadow:
        0 0 8px rgba(74,222,255,.62),
        0 0 18px rgba(48,126,255,.30),
        inset 0 0 10px rgba(74,222,255,.10) !important;
}

#kelsy-welcome{
    color:#f2fdff !important;
    background:transparent !important;
    border:1px solid rgba(74,222,255,.90) !important;
    box-shadow:
        0 0 5px rgba(74,222,255,.82),
        0 0 16px rgba(48,156,255,.42),
        inset 0 0 9px rgba(74,222,255,.08) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    text-shadow:
        0 1px 3px rgba(0,0,0,.95),
        0 0 7px rgba(74,222,255,.55);
}



/* =========================
   KELSY LIVE AI INPUT
========================= */

#chat-form{
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px 14px;
    border-top:1px solid rgba(74,222,255,.42);
    background:transparent;
}

#chat-input{
    flex:1;
    min-width:0;
    height:43px;
    padding:0 14px;
    border:1px solid rgba(74,222,255,.65);
    border-radius:13px;
    outline:none;
    color:#f1fdff;
    background:transparent;
    box-shadow:
        0 0 8px rgba(74,222,255,.18),
        inset 0 0 8px rgba(74,222,255,.06);
    font:inherit;
    font-size:14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#chat-input::placeholder{
    color:rgba(213,248,255,.68);
}

#chat-input:focus{
    border-color:#7ef4ff;
    box-shadow:
        0 0 7px rgba(74,222,255,.72),
        0 0 18px rgba(48,126,255,.28),
        inset 0 0 8px rgba(74,222,255,.08);
}

#chat-send{
    height:43px;
    padding:0 17px;
    border:1px solid rgba(74,222,255,.85);
    border-radius:13px;
    color:#ecfeff;
    background:transparent;
    box-shadow:
        0 0 8px rgba(74,222,255,.28),
        inset 0 0 8px rgba(74,222,255,.07);
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#chat-send:hover{
    transform:translateY(-1px);
    box-shadow:
        0 0 8px rgba(74,222,255,.72),
        0 0 19px rgba(48,126,255,.34);
}

#chat-send:disabled,
#chat-input:disabled{
    cursor:wait;
    opacity:.55;
}

.kelsy-typing{
    display:flex;
    align-items:center;
    gap:5px;
    min-height:22px;
}

.kelsy-typing span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#77eeff;
    box-shadow:0 0 7px rgba(74,222,255,.82);
    animation:kelsyTyping 1.1s infinite ease-in-out;
}

.kelsy-typing span:nth-child(2){
    animation-delay:.16s;
}

.kelsy-typing span:nth-child(3){
    animation-delay:.32s;
}

.kelsy-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

@keyframes kelsyTyping{
    0%,60%,100%{
        opacity:.35;
        transform:translateY(0);
    }

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



/* KELSY READABLE FLOATING DIALOGUES */

.bot-message{
    color:#10283d !important;
    background:rgba(239,251,255,.88) !important;
    border:1px solid rgba(159,239,255,.68) !important;
    box-shadow:
        0 7px 20px rgba(2,20,35,.18),
        0 0 10px rgba(74,222,255,.12),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    text-shadow:none !important;
}

.user-message{
    color:#ffffff !important;
    background:rgba(16,79,113,.88) !important;
    border:1px solid rgba(105,231,255,.72) !important;
    box-shadow:
        0 7px 20px rgba(2,20,35,.20),
        0 0 11px rgba(74,222,255,.18),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    text-shadow:none !important;
}



/* =========================
   KELSY HUMAN ENTRANCE
========================= */

#bya-chat{
    opacity:0;
    transform:translateY(108%);
    animation:
        kelsySlideIntoView
        .95s
        3s
        cubic-bezier(.18,.82,.28,1)
        forwards;
    will-change:transform,opacity;
}

#chat-button img{
    transform-origin:center bottom;
    animation:
        kelsyLivingPresence
        4.8s
        2.15s
        ease-in-out
        infinite;
}

@keyframes kelsySlideIntoView{
    0%{
        opacity:0;
        transform:translateY(108%);
    }

    62%{
        opacity:1;
        transform:translateY(-2.5%);
    }

    82%{
        transform:translateY(1%);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes kelsyLivingPresence{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-3px) rotate(.15deg);
    }
}

@media(prefers-reduced-motion:reduce){
    #bya-chat{
        opacity:1;
        transform:none;
        animation:none;
    }

    #chat-button img{
        animation:none;
    }
}



.bot-message,
.user-message{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}



/* KELSY CLICKABLE WELCOME */

#kelsy-welcome{
    pointer-events:auto !important;
    cursor:pointer;
    user-select:none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

#kelsy-welcome:hover{
    border-color:#9af5ff !important;
    box-shadow:
        0 0 7px rgba(74,222,255,.95),
        0 0 21px rgba(48,156,255,.58),
        inset 0 0 10px rgba(74,222,255,.10) !important;
}

#kelsy-welcome:focus-visible{
    outline:2px solid #92f5ff;
    outline-offset:4px;
}



/* KELSY READ-ALOUD CONTROL */
.kelsy-read-aloud{
    display:block;
    width:auto;
    margin-top:9px;
    padding:5px 9px;
    border:1px solid rgba(43,200,220,.55);
    border-radius:999px;
    color:#075f73;
    background:rgba(235,253,255,.92);
    font:600 11px/1.2 Inter,Arial,sans-serif;
    cursor:pointer;
    box-shadow:none;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.kelsy-read-aloud:hover{
    color:#ffffff;
    background:#118ca2;
    border-color:#118ca2;
}