:root{
    --yuvi-green:#51E98C;
    --yuvi-green-dark:#28c96b;
    --yuvi-black:#111313;
    --yuvi-gray:#f3f5f4;
    --yuvi-border:rgba(17,19,19,.09)
}

/* =========================
   LAUNCHER
========================= */

.yuvi-ai-launcher{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:999997;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 15px 8px 8px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    color:var(--yuvi-black);
    background:var(--yuvi-green);
    box-shadow:0 14px 38px rgba(0,0,0,.18);
    font:700 14px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    transition:.2s
}

.yuvi-ai-launcher:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 45px rgba(0,0,0,.23)
}

.yuvi-ai-launcher-avatar{
    width:34px;
    height:34px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff
}

.yuvi-ai-launcher-avatar img{
    width:100%;
    height:100%;
    object-fit:cover
}

.yuvi-ai-spark{
    font-size:15px
}


/* =========================
   CHAT PANEL
========================= */

.yuvi-ai-panel{
    position:fixed;
    right:24px;
    bottom:88px;
    z-index:999998;
    width:min(400px,calc(100vw - 32px));
    height:min(680px,calc(100vh - 115px));
    overflow:hidden;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) scale(.98);
    transform-origin:bottom right;
    border:1px solid rgba(17,19,19,.08);
    border-radius:26px;
    background:rgba(255,255,255,.97);
    box-shadow:0 28px 90px rgba(0,0,0,.24);
    backdrop-filter:blur(18px);
    transition:.22s ease;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

.yuvi-ai-panel.is-open{
    opacity:1;
    visibility:visible;
    transform:none
}


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

.yuvi-ai-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 15px;
    color:#fff;
    background:var(--yuvi-black)
}

.yuvi-ai-profile{
    display:flex;
    align-items:center;
    gap:11px
}

.yuvi-ai-avatar-wrap{
    position:relative;
    width:43px;
    height:43px
}

.yuvi-ai-avatar-img{
    width:43px;
    height:43px;
    object-fit:cover;
    border:2px solid var(--yuvi-green);
    border-radius:50%;
    background:#fff
}

.yuvi-ai-online{
    position:absolute;
    right:0;
    bottom:1px;
    width:9px;
    height:9px;
    border:2px solid var(--yuvi-black);
    border-radius:50%;
    background:var(--yuvi-green)
}

.yuvi-ai-name{
    font-size:17px;
    font-weight:800
}

.yuvi-ai-subtitle{
    margin-top:2px;
    color:rgba(255,255,255,.68);
    font-size:10.5px
}

.yuvi-ai-close{
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:rgba(255,255,255,.09);
    font-size:23px;
    line-height:1;
    cursor:pointer
}


/* =========================
   INTRO
========================= */

.yuvi-ai-intro{
    padding:15px 17px 6px
}

.yuvi-ai-greeting{
    color:var(--yuvi-black);
    font-size:18px;
    font-weight:800
}

.yuvi-ai-intro p{
    margin:5px 0 0;
    color:#666;
    font-size:12px;
    line-height:1.5
}


/* =========================
   MESSAGES AREA
========================= */

.yuvi-ai-messages{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:10px 17px 15px;
    display:flex;
    flex-direction:column;
    gap:10px
}


/* =========================
   CHAT BUBBLES
========================= */

.yuvi-ai-message{
    max-width:87%;
    padding:11px 13px;
    border-radius:15px;
    font-size:13px;
    line-height:1.5;
    white-space:pre-wrap;
    word-break:break-word
}

.yuvi-ai-message.is-bot{
    align-self:flex-start;
    color:var(--yuvi-black);
    background:var(--yuvi-gray);
    border-bottom-left-radius:5px;

    /* Smaller Gemini reply text */
    font-size:12.5px;
    line-height:1.52
}

.yuvi-ai-message.is-user{
    align-self:flex-end;
    color:var(--yuvi-black);
    background:var(--yuvi-green);
    border-bottom-right-radius:5px;
    font-size:13px
}


/* =========================
   MARKDOWN - BOT RESPONSES
========================= */

.yuvi-ai-message.is-bot p{
    margin:0 0 6px;
    font-size:12.5px
}

.yuvi-ai-message.is-bot p:last-child{
    margin-bottom:0
}

.yuvi-ai-message.is-bot strong{
    font-weight:800
}

.yuvi-ai-message.is-bot em{
    font-style:italic
}


/* HEADINGS */

.yuvi-ai-message.is-bot h2,
.yuvi-ai-message.is-bot h3,
.yuvi-ai-message.is-bot h4{
    margin:3px 0 6px;
    line-height:1.3;
    font-weight:800
}

.yuvi-ai-message.is-bot h2{
    font-size:14px
}

.yuvi-ai-message.is-bot h3{
    font-size:13.5px
}

.yuvi-ai-message.is-bot h4{
    font-size:12.5px
}


/* LISTS */

.yuvi-ai-message.is-bot ul,
.yuvi-ai-message.is-bot ol{
    margin:4px 0 7px;
    padding-left:18px;
    font-size:12.5px
}

.yuvi-ai-message.is-bot li{
    margin:2px 0;
    line-height:1.5
}


/* LINKS */

.yuvi-ai-message.is-bot a{
    color:#16803c;
    font-weight:800;
    text-decoration:underline;
    word-break:break-word
}

.yuvi-ai-message.is-bot a:hover{
    color:var(--yuvi-green-dark)
}


/* INLINE CODE */

.yuvi-ai-inline-code{
    padding:2px 5px;
    border-radius:5px;
    background:rgba(17,19,19,.07);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.88em
}


/* CODE BLOCK */

.yuvi-ai-code{
    margin:7px 0;
    padding:9px 11px;
    overflow:auto;
    border-radius:10px;
    background:#171919;
    color:#fff;
    white-space:pre-wrap
}

.yuvi-ai-code code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;
    line-height:1.5
}

.yuvi-ai-message.is-bot .yuvi-ai-code a{
    color:var(--yuvi-green)
}


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

.yuvi-ai-typing{
    display:inline-flex;
    width:fit-content;
    gap:4px;
    padding:13px 14px
}

.yuvi-ai-typing span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#777;
    animation:yuvi-dot 1s infinite ease-in-out
}

.yuvi-ai-typing span:nth-child(2){
    animation-delay:.15s
}

.yuvi-ai-typing span:nth-child(3){
    animation-delay:.3s
}

@keyframes yuvi-dot{
    0%,60%,100%{
        transform:translateY(0);
        opacity:.4
    }

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


/* =========================
   SUGGESTION BUTTONS
========================= */

.yuvi-ai-suggestions{
    display:flex;
    gap:7px;
    padding:0 14px 11px;
    overflow-x:auto;
    scrollbar-width:none;
    flex-wrap:wrap
}

.yuvi-ai-suggestions::-webkit-scrollbar{
    display:none
}

.yuvi-ai-suggestions button{
    flex:0 0 auto;
    padding:8px 10px;
    border:1px solid var(--yuvi-border);
    border-radius:999px;
    color:var(--yuvi-black);
    background:#fff;
    font-size:11px;
    cursor:pointer
}

.yuvi-ai-suggestions button:hover{
    border-color:var(--yuvi-green-dark);
    background:#f4fff8
}

.yuvi-ai-suggestions .yuvi-ai-page-summary{
    background:var(--yuvi-green);
    border-color:var(--yuvi-green);
    font-weight:700
}


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

.yuvi-ai-form{
    display:flex;
    gap:8px;
    padding:11px 14px;
    border-top:1px solid var(--yuvi-border)
}

.yuvi-ai-input{
    min-width:0;
    flex:1;
    height:45px;
    padding:0 13px;
    outline:0;
    border:1px solid var(--yuvi-border);
    border-radius:13px;
    color:var(--yuvi-black);
    background:#fff;
    font-size:13px
}

.yuvi-ai-input:focus{
    border-color:var(--yuvi-green-dark);
    box-shadow:0 0 0 3px rgba(81,233,140,.16)
}

.yuvi-ai-send{
    width:45px;
    height:45px;
    border:0;
    border-radius:13px;
    color:var(--yuvi-black);
    background:var(--yuvi-green);
    font-size:18px;
    font-weight:800;
    cursor:pointer
}

.yuvi-ai-send:disabled{
    cursor:wait
}


/* =========================
   FOOTER
========================= */

.yuvi-ai-footer{
    padding:0 14px 10px;
    color:#999;
    text-align:center;
    font-size:9.5px
}

.yuvi-ai-footer a{
    color:#16803c;
    font-weight:700;
    text-decoration:none
}

.yuvi-ai-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
}


/* =========================
   FULL AI PAGE
========================= */

.yuvi-ai-full-page{
    min-height:100vh;
    background:#fff;
    color:var(--yuvi-black);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding:0 20px 60px;
    box-sizing:border-box
}

.yuvi-ai-full-shell{
    width:min(980px,100%);
    margin:0 auto
}

.yuvi-ai-full-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
    border-bottom:1px solid var(--yuvi-border)
}

.yuvi-ai-brand{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--yuvi-black);
    font-size:18px;
    font-weight:900;
    text-decoration:none
}

.yuvi-ai-brand-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--yuvi-green);
    box-shadow:0 0 0 5px rgba(81,233,140,.16)
}

.yuvi-ai-back{
    color:#555;
    font-size:13px;
    font-weight:700;
    text-decoration:none
}

.yuvi-ai-full-intro{
    display:flex;
    align-items:center;
    gap:24px;
    padding:52px 0 28px
}

.yuvi-ai-full-avatar{
    position:relative;
    flex:0 0 auto
}

.yuvi-ai-full-avatar img{
    width:88px;
    height:88px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid var(--yuvi-green);
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.12)
}

.yuvi-ai-full-avatar span{
    position:absolute;
    right:3px;
    bottom:5px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:var(--yuvi-green);
    border:3px solid #fff
}

.yuvi-ai-eyebrow{
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
    color:#16803c
}

.yuvi-ai-full-intro h1{
    margin:7px 0 5px;
    font-size:clamp(32px,5vw,50px);
    line-height:1.05;
    letter-spacing:-.04em
}

.yuvi-ai-full-intro p{
    margin:0;
    max-width:650px;
    color:#666;
    font-size:15px;
    line-height:1.6
}

.yuvi-ai-full-card{
    height:min(680px,72vh);
    min-height:500px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--yuvi-border);
    border-radius:28px;
    box-shadow:0 25px 80px rgba(0,0,0,.12)
}

.yuvi-ai-full-status{
    display:flex;
    align-items:center;
    gap:7px;
    padding:14px 18px;
    border-bottom:1px solid var(--yuvi-border);
    font-size:11px;
    color:#666;
    font-weight:700
}

.yuvi-ai-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--yuvi-green)
}

.yuvi-ai-full-messages{
    padding:20px 22px
}

.yuvi-ai-full-card .yuvi-ai-suggestions{
    padding:0 20px 13px
}

.yuvi-ai-full-card .yuvi-ai-form{
    padding:14px 20px
}

.yuvi-ai-full-card .yuvi-ai-footer{
    padding-bottom:14px
}

.yuvi-ai-full-links{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding-top:22px
}

.yuvi-ai-full-links a{
    display:inline-flex;
    padding:10px 14px;
    border-radius:999px;
    background:var(--yuvi-black);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800
}

.yuvi-ai-full-links a:first-child{
    background:var(--yuvi-green);
    color:var(--yuvi-black)
}


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

@media(max-width:700px){

    .yuvi-ai-launcher{
        right:14px;
        bottom:14px;
        padding-right:13px
    }

    .yuvi-ai-panel{
        right:9px;
        bottom:72px;
        width:calc(100vw - 18px);
        height:min(680px,calc(100vh - 88px));
        border-radius:21px
    }

    .yuvi-ai-full-page{
        padding:0 12px 35px
    }

    .yuvi-ai-full-topbar{
        padding:17px 2px
    }

    .yuvi-ai-full-intro{
        gap:15px;
        padding:35px 4px 22px;
        align-items:flex-start
    }

    .yuvi-ai-full-avatar img{
        width:64px;
        height:64px
    }

    .yuvi-ai-full-avatar span{
        width:11px;
        height:11px;
        right:1px;
        bottom:3px;
        border-width:2px
    }

    .yuvi-ai-eyebrow{
        font-size:8px
    }

    .yuvi-ai-full-intro h1{
        font-size:32px
    }

    .yuvi-ai-full-intro p{
        font-size:13px
    }

    .yuvi-ai-full-card{
        height:calc(100vh - 240px);
        min-height:500px;
        border-radius:22px
    }

    .yuvi-ai-full-messages{
        padding:15px
    }


    /* Smaller bot text on mobile */
    .yuvi-ai-message.is-bot{
        font-size:12px;
        line-height:1.5
    }

    .yuvi-ai-message.is-bot p{
        font-size:12px
    }

    .yuvi-ai-message.is-bot ul,
    .yuvi-ai-message.is-bot ol{
        font-size:12px
    }

    .yuvi-ai-message.is-bot h2{
        font-size:13.5px
    }

    .yuvi-ai-message.is-bot h3{
        font-size:13px
    }

    .yuvi-ai-message.is-bot h4{
        font-size:12px
    }
}