.topbar{
    height:70px;
    background:#111827;
    border-bottom:1px solid #1e293b;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
}

.chat-container{

    flex:1;
	
	min-height:0;

    overflow-y:auto;

    padding:30px;

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

    background:
        radial-gradient(
            circle at top,
            rgba(56,189,248,0.08),
            transparent 40%
        );

}

/*
|--------------------------------------------------------------------------
| WELCOME SCREEN
|--------------------------------------------------------------------------
*/

.welcome-screen{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px 20px;

    animation:fadeIn 0.4s ease;

}

.welcome-logo{

    width:110px;

    height:110px;

    object-fit:contain;

    margin-bottom:25px;

    filter:
        drop-shadow(
            0 0 30px rgba(56,189,248,0.35)
        );

    animation:floatLogo 3s ease-in-out infinite;

}

.welcome-title{

    font-size:42px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:14px;

    letter-spacing:-1px;

}

.welcome-subtitle{

    color:#94a3b8;

    font-size:18px;

    max-width:600px;

    line-height:1.7;

}

/*
|--------------------------------------------------------------------------
| ADVANCED INPUT AREA
|--------------------------------------------------------------------------
*/

.chat-input-area{

    padding:18px;

    background:rgba(15,23,42,0.9);

    backdrop-filter:blur(20px);

    border-top:1px solid #1e293b;

}

.chat-form{

    max-width:1000px;

    margin:auto;

    display:flex;

    align-items:flex-end;

    gap:12px;

    background:#0f172a;

    border:1px solid #1e293b;

    border-radius:24px;

    padding:12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);

}

/*
|--------------------------------------------------------------------------
| MODERN INPUT
|--------------------------------------------------------------------------
*/

.chat-input{

    flex:1;

    padding:14px 16px;

    border:none;

    border-radius:18px;

    background:transparent;

    color:#fff;

    font-size:16px;

    resize:none;

    outline:none;

    min-height:55px;

}

/*
|--------------------------------------------------------------------------
| MODERN SEND BUTTON
|--------------------------------------------------------------------------
*/

.send-btn{

    height:55px;

    padding:0 24px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #38bdf8,
        #2563eb
    );

    color:#fff;

    transition:0.25s;

    box-shadow:
        0 8px 20px rgba(37,99,235,0.35);

}

.send-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(37,99,235,0.45);

}

/*
|--------------------------------------------------------------------------
| MODERN UPLOAD BUTTON
|--------------------------------------------------------------------------
*/

.upload-btn{

    width:55px;

    height:55px;

    border-radius:18px;

    background:#111827;

    border:1px solid #1e293b;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:22px;

    color:#38bdf8;

    transition:0.25s;

}

.upload-btn:hover{

    background:#1e293b;

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

@keyframes floatLogo{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes fadeIn{

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

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

}

.message{
    max-width:850px;
    padding:16px;
    border-radius:14px;
    line-height:1.7;
    white-space:pre-wrap;
}

.user-message{
    background:#2563eb;
    align-self:flex-end;
}

.ai-message{
    background:#1e293b;
    align-self:flex-start;
}



/*
|--------------------------------------------------------------------------
| MARKDOWN
|--------------------------------------------------------------------------
*/

.ai-message h1,
.ai-message h2,
.ai-message h3{
    margin-bottom:15px;
}

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

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

.ai-message code{
    background:#0f172a;
    padding:3px 6px;
    border-radius:6px;
    font-size:14px;
}

.ai-message pre{
    background:#020617;
    padding:15px;
    border-radius:12px;
    overflow-x:auto;
    margin-top:15px;
    margin-bottom:15px;
}

.ai-message pre code{
    background:none;
    padding:0;
}

.ai-message a{
    color:#38bdf8;
}

.typing{
    animation:pulse 1s infinite;
}

/*
|--------------------------------------------------------------------------
| CODE BLOCKS
|--------------------------------------------------------------------------
*/

.ai-message pre{
    position:relative;
    background:#020617;
    padding:20px;
    border-radius:12px;
    overflow-x:auto;
    margin-top:15px;
    margin-bottom:15px;
}

.copy-code-btn{
    position:absolute;
    top:10px;
    right:10px;
    background:#38bdf8;
    color:#000;
    border:none;
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
    font-size:12px;
    font-weight:bold;
    transition:0.2s;
}

.copy-code-btn:hover{
    opacity:0.9;
}

/*
|--------------------------------------------------------------------------
| FILE UPLOAD
|--------------------------------------------------------------------------
*/



@keyframes pulse{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/*
|--------------------------------------------------------------------------
| GENERATED AI IMAGES
|--------------------------------------------------------------------------
*/

.generated-image{

    width:100%;

    max-width:100%;

    border-radius:20px;

    margin-top:12px;

    border:1px solid #334155;

    display:block;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);

}

/*
|--------------------------------------------------------------------------
| IMAGE MESSAGE
|--------------------------------------------------------------------------
*/

.ai-message img{

    max-width:100%;

}

.generated-image-wrapper{

    display:flex;

    flex-direction:column;

    gap:14px;

    background:#0f172a;

    padding:14px;

    border-radius:24px;

    border:1px solid #1e293b;

}

.download-image-btn{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #38bdf8,
        #0ea5e9
    );

    color:#020617;

    padding:12px 18px;

    border-radius:14px;

    text-decoration:none;

    width:fit-content;

    font-weight:700;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:10px;

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        opacity 0.2s;

    box-shadow:
        0 6px 18px rgba(56,189,248,0.35);

}

/*
|--------------------------------------------------------------------------
| ICON
|--------------------------------------------------------------------------
*/

.download-image-btn::before{

    content:"⬇";

    font-size:15px;

}

/*
|--------------------------------------------------------------------------
| HOVER
|--------------------------------------------------------------------------
*/

.download-image-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(56,189,248,0.45);

    opacity:0.95;

}

/*
|--------------------------------------------------------------------------
| ACTIVE
|--------------------------------------------------------------------------
*/

.download-image-btn:active{

    transform:scale(0.97);

}

/*
|--------------------------------------------------------------------------
| GLOW EFFECT
|--------------------------------------------------------------------------
*/

.download-image-btn::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.45),
        transparent
    );

    transition:0.6s;

}

.download-image-btn:hover::after{

    left:120%;

}

/*
|--------------------------------------------------------------------------
| IMAGE ACTIONS
|--------------------------------------------------------------------------
*/

.image-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

/*
|--------------------------------------------------------------------------
| ACTION BUTTONS
|--------------------------------------------------------------------------
*/

.image-action-btn{

    background:#1e293b;

    color:#fff;

    border:none;

    padding:12px 16px;

    border-radius:14px;

    cursor:pointer;

    font-weight:600;

    transition:0.2s;

}

.image-action-btn:hover{

    background:#334155;

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| IMAGE HOVER
|--------------------------------------------------------------------------
*/

.generated-image{

    cursor:pointer;

    transition:
        transform 0.3s,
        box-shadow 0.3s;

}

.generated-image:hover{

    transform:scale(1.01);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.45);

}

/*
|--------------------------------------------------------------------------
| IMAGE MODAL
|--------------------------------------------------------------------------
*/

.image-modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.9);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.modal-image{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

}

.close-modal{

    position:absolute;

    top:30px;
    right:40px;

    font-size:50px;

    color:#fff;

    cursor:pointer;

}

/*
|--------------------------------------------------------------------------
| SPLASH SCREEN
|--------------------------------------------------------------------------
*/

.chat-splash{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

    z-index:5;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

}

/*
|--------------------------------------------------------------------------
| HIDE
|--------------------------------------------------------------------------
*/

.chat-splash.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.chat-splash-logo{

     width:140px;

    height:140px;

    object-fit:contain;

    animation:floatLogo 3s ease-in-out infinite;

    margin-bottom:20px;

    filter:
        drop-shadow(
            0 0 25px rgba(
                56,
                189,
                248,
                0.45
            )
        );

}

.chat-splash h1{

    font-size:56px;

    font-weight:800;

    letter-spacing:-2px;

    background:linear-gradient(
        135deg,
        #ffffff,
        #38bdf8
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.chat-splash p{

    color:#94a3b8;

    font-size:16px;

    max-width:420px;

    line-height:1.6;

}