*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#050816;
    font-family:'Space Grotesk',sans-serif;
    color:white;
    overflow:hidden;
}

#particles{
    position:fixed;
    inset:0;
    z-index:0;
}

#intro-screen{

    position:fixed;
    inset:0;

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

    z-index:10;

    background:rgba(5,8,22,.6);
    backdrop-filter:blur(10px);

    transition:opacity 1s ease;
}

#intro-screen.hide{
    opacity:0;
    pointer-events:none;
}

.intro-content{
    width:90%;
    max-width:900px;
}

#intro-lines{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.intro-line{

    opacity:0;

    transform:translateY(20px);

    font-size:clamp(1.5rem,4vw,3.5rem);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.intro-line.show{
    opacity:1;
    transform:translateY(0);
}

#chat-container{

    position:relative;

    z-index:5;

    width:90%;
    max-width:950px;

    height:90vh;

    margin:5vh auto;

    display:flex;
    flex-direction:column;

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

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    opacity:0;
    visibility:hidden;

    transition:all .8s ease;
}

#chat-container.show{
    opacity:1;
    visibility:visible;
}

.chat-header{
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.chat-header h2{
    font-size:1.5rem;
}

.chat-header p{
    color:#9ca3af;
}

#messages {
    flex:1;
    overflow-y:auto;
    padding:24px;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

#messages::-webkit-scrollbar {
    display:none;
}

.message{
    max-width:80%;
    margin-bottom:18px;

    padding:16px 18px;

    border-radius:18px;

    line-height:1.9;

    animation:messageIn .25s ease;
}

.message p {
    margin-bottom: 12px;
}

.message ul,
.message ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.message li {
    margin-bottom: 6px;
}

.message h1,
.message h2,
.message h3 {
    margin-bottom: 12px;
    margin-top: 12px;
}

.message code {

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

    padding:
        2px 6px;

    border-radius:6px;
}

.message pre {

    overflow-x:auto;

    padding:16px;

    margin-top:12px;

    border-radius:12px;

    background:
        rgba(0,0,0,.25);
}

.message a {
    color:#8ab4ff;
}

.user{
    margin-left:auto;
    background:rgba(255,255,255,.12);
}

.assistant{
    background:rgba(255,255,255,.08);
     max-width:90%;
}

.input-area{
    display:flex;
    gap:12px;

    padding:20px;

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

textarea{

    flex:1;

    border:none;
    outline:none;
    resize:none;

    height:60px;

    border-radius:16px;

    padding:15px;

    color:white;

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

button{

    width:60px;

    border:none;

    cursor:pointer;

    border-radius:16px;

    font-size:1.2rem;
}

.typing{
    display:flex;
    gap:6px;
}

.typing span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    animation:bounce 1s infinite;
}

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

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

@keyframes bounce{
    50%{
        transform:translateY(-6px);
    }
}

@keyframes messageIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:768px){

    #chat-container{
        width:100%;
        height:100dvh;
        margin:0;
        border-radius:0;
    }

    .message{
        max-width:95%;
    }

    .input-area{

        padding:
            15px
            15px
            calc(15px + env(safe-area-inset-bottom))
            15px;
    }

}