/* ==========================================================
   Lanthano Research Assistant
   assistant.css
   ========================================================== */
html,
body{

    height:100%;

}

/* ==========================================================
   Root
   ========================================================== */

#lr-ai-window{

   

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    opacity:0;

    transform:
        translateX(20px)
        scale(.98);

    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .25s ease;

    z-index:10000;

}
#lr-ai-window {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: clamp(420px, 32vw, 600px);
}

#lr-ai-root.visible{

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}

#lr-ai-root.hidden{

    opacity:0;

    transform:translateY(35px);

    pointer-events:none;

}

/* ==========================================================
   Floating Button
   ========================================================== */

#lr-ai-button{

    width:72px;
    height:72px;

    padding:0;

    border:none;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        transform .2s ease,
        filter .2s ease;

    user-select:none;

}

#lr-ai-button:hover{

    transform:scale(1.08);

    filter:brightness(1.08);

}

#lr-ai-button:active{

    transform:scale(.95);

}

#lr-ai-button img{

    width:72px;

    height:72px;

    display:block;

    object-fit:contain;

    border-radius:50%;

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;

    filter:
        drop-shadow(0 10px 28px rgba(0,0,0,.45));

}

/* ==========================================================
   Chat Window
   ========================================================== */

#lr-ai-root{

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:9999;

    opacity:0;

    transform:translateY(35px);

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

#lr-ai-window.open{

    opacity:1;

    transform:

        translateX(0)

        scale(1);

    pointer-events:auto;

}

/* ==========================================================
   Header
   ========================================================== */

#lr-ai-header{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom:1px solid #2d2d2d;

    background:#1f1f1f;

    flex-shrink:0;

}

#lr-ai-title{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

}

#lr-ai-title img{

    width:40px;

    height:40px;

    border-radius:50%;

}

#lr-ai-title-text{

    display:flex;

    flex-direction:column;

    line-height:1.15;

}

#lr-ai-title-text strong{

    font-size:18px;

    font-weight:700;

}

#lr-ai-title-text span{

    font-size:12px;

    color:#9c9c9c;

    margin-top:3px;

}

#lr-ai-close{

    width:40px;

    height:40px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#ddd;

    cursor:pointer;

    font-size:24px;

    transition:
        background .2s ease,
        color .2s ease;

}

#lr-ai-close:hover{

    background:#2f2f2f;

    color:#fff;

}

/* ==========================================================
   Messages
   ========================================================== */

#lr-ai-messages{

    flex:1;

    overflow-y:auto;

    padding:22px;

    color:#fff;

    display:flex;

    flex-direction:column;

    gap:18px;

    scroll-behavior:smooth;

}

#lr-ai-messages::-webkit-scrollbar{

    width:10px;

}

#lr-ai-messages::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:8px;

}

/* ==========================================================
   Input
   ========================================================== */

#lr-ai-input-area{

    display:flex;

    gap:10px;

    padding:16px;

    border-top:1px solid #2d2d2d;

    background:#1f1f1f;

    flex-shrink:0;

}

#lr-ai-input{

    flex:1;

    min-height:52px;

    border:1px solid #333;

    background:#2a2a2a;

    color:white;

    padding:0 16px;

    border-radius:12px;

    outline:none;

    font-size:16px;

    transition:
        border-color .2s ease,
        background .2s ease;

}

#lr-ai-input:focus{

    border-color:#5d8dff;

    background:#303030;

}

#lr-ai-send{

    width:52px;

    min-width:52px;

    height:52px;

    border:none;

    border-radius:12px;

    background:#4c7bff;

    color:white;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

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

}

#lr-ai-send:hover{

    background:#5b87ff;

}

#lr-ai-send:active{

    transform:scale(.95);

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:768px){

    #lr-ai-root{

        right:16px;

        bottom:16px;

    }

    #lr-ai-button{

        width:64px;

        height:64px;

    }

    #lr-ai-button img{

        width:64px;

        height:64px;

    }

 #lr-ai-window{

        position:fixed;

        inset:10px;

        width:auto;

        height:auto;

    }

    #lr-ai-header{

        height:68px;

        padding:0 18px;

    }

    #lr-ai-title img{

        width:36px;

        height:36px;

    }

    #lr-ai-title-text strong{

        font-size:17px;

    }

    #lr-ai-title-text span{

        font-size:11px;

    }

    #lr-ai-messages{

        padding:18px;

    }

    #lr-ai-input-area{

        padding:14px;

    }

}