*{
margin:0;
padding:0;
box-sizing:border-box;
  font-family: "Afacad Flux", sans-serif;
}

body{
height:100vh;
background:linear-gradient(120deg,#020617,#020617,#0f172a);
color:white;
overflow:hidden;
}

/* LAYOUT */

.app{
display:flex;
height:100vh;
}

/* SIDEBAR */

.sidebar{
width:260px;
background:#020617;
padding:24px;
border-right:1px solid rgba(255,255,255,0.05);
display:flex;
flex-direction:column;
}

.logo{
font-size:20px;
font-weight:600;
margin-bottom:30px;
letter-spacing:2px;
}

.menu{
display:flex;
flex-direction:column;
gap:10px;
}

.menu-item{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:10px;
cursor:pointer;
color:#94a3b8;
transition:0.2s;
font-size:16px;
}

.menu-item i{
font-size:16px;
}

.menu-item:hover{
background:rgba(255,255,255,0.05);
color:white;
}

.menu-item.active{
background:rgba(59,130,246,0.15);
color:white;
}

/* MAIN CHAT */

.main{
flex:1;
display:flex;
flex-direction:column;
position:relative;
}

#chat{
flex:1;
overflow-y:auto;
padding:50px 80px;
}

/* MESSAGE */

.message{
max-width:700px;
padding:16px 18px;
margin-bottom:22px;
border-radius:12px;
line-height:1.6;
}

.user{
background:rgba(59,130,246,0.15);
margin-left:auto;
}

.ai{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.04);
}

/* INPUT BAR */

.input-bar{

display:flex;
align-items:center;
gap:14px;

background:rgba(255,255,255,0.04);

margin:20px auto 40px auto;

width:70%;

padding:14px 18px;

border-radius:30px;

backdrop-filter:blur(12px);

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

}

textarea{
flex:1;
background:transparent;
border:none;
outline:none;
color:white;
font-size:15px;
resize:none;
height:26px;
}

.input-icons-left i,
.input-icons-right i{
color:#64748b;
cursor:pointer;
}

button{
background:#2563eb;
border:none;
color:white;
width:38px;
height:38px;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

/* SCROLLBAR */

#chat::-webkit-scrollbar{
width:6px;
}

#chat::-webkit-scrollbar-thumb{
background:#1e293b;
}

/* MOBILE */

@media(max-width:900px){

.sidebar{
display:none;
}

#chat{
padding:30px;
}

.input-bar{
width:90%;
}

}

/* INPUT AREA */

.input-wrapper{

display:flex;
align-items:center;
justify-content:center;
gap:14px;

padding:30px 0 40px 0;

}

/* MAIN INPUT CONTAINER */

.input-container{

display:flex;
align-items:center;

width:65%;

background:rgba(255,255,255,0.04);

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

border-radius:28px;

padding:14px 20px;

backdrop-filter:blur(10px);

}

/* TEXT INPUT */

#prompt{

flex:1;

background:transparent;

border:none;

outline:none;

color:white;

font-size:15px;

padding:0 16px;

}

/* ICON GROUPS */

.left-icons,
.right-icons{

display:flex;
align-items:center;
gap:14px;

}

/* ICON STYLE */

.left-icons i,
.right-icons i{

font-size:18px;

color:#94a3b8;

cursor:pointer;

transition:0.2s;

}

.left-icons i:hover,
.right-icons i:hover{

color:white;

}

/* SEND BUTTON */

.send-btn{

width:48px;

height:48px;

border-radius:14px;

border:none;

background:linear-gradient(135deg,#2563eb,#3b82f6);

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 6px 20px rgba(59,130,246,0.3);

transition:0.2s;

}

.send-btn i{

font-size:18px;

color:white;

}

.send-btn:hover{

transform:scale(1.05);

background:linear-gradient(135deg,#1d4ed8,#2563eb);

}