*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#212121;
height:100vh;
overflow:hidden;
}

/* APP */

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

/* SIDEBAR */

.sidebar{
width:260px;
background:#171717;
border-right:1px solid #2f2f2f;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:15px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:700;
color:white;
margin-bottom:20px;
}

.new-chat{
width:100%;
padding:14px;
background:#2a2a2a;
border:none;
border-radius:12px;
color:white;
cursor:pointer;
font-size:15px;
margin-bottom:20px;
transition:.3s;
}

.new-chat:hover{
background:#3a3a3a;
}

.history{
display:flex;
flex-direction:column;
gap:8px;
}

.chat-item{
padding:12px;
border-radius:10px;
color:#d1d5db;
cursor:pointer;
font-size:14px;
display:flex;
align-items:center;
gap:10px;
transition:.3s;
}

.chat-item:hover{
background:#2a2a2a;
}

.chat-item.active{
background:#2a2a2a;
}

.bottom-menu{
border-top:1px solid #2f2f2f;
padding-top:15px;
}

.menu-item{
padding:12px;
border-radius:10px;
color:#d1d5db;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
transition:.3s;
}

.menu-item:hover{
background:#2a2a2a;
}

/* MAIN */

.main{
flex:1;
display:flex;
flex-direction:column;
background:#212121;
}

/* TOPBAR */

.topbar{
height:60px;
border-bottom:1px solid #2f2f2f;
display:flex;
align-items:center;
padding:0 25px;
color:white;
font-weight:600;
}

/* CHAT AREA */

.chat-area{
flex:1;
overflow-y:auto;
padding:30px;
}

/* WELCOME */

.welcome{
text-align:center;
margin-top:120px;
}

.welcome h1{
font-size:52px;
font-weight:700;
color:white;
margin-bottom:15px;
}

.welcome p{
font-size:16px;
color:#9ca3af;
}

/* MESSAGES */

#messages{
max-width:900px;
margin:auto;
}

.user-message{
background:#303030;
color:white;
padding:16px;
border-radius:18px;
margin:15px 0;
margin-left:auto;
max-width:80%;
width:fit-content;
line-height:1.6;
}

.bot-message{
background:#2a2a2a;
color:white;
padding:16px;
border-radius:18px;
margin:15px 0;
max-width:80%;
width:fit-content;
line-height:1.6;
}

/* INPUT */

.input-wrapper{
padding:20px;
background:#212121;
}

.input-box{
max-width:900px;
margin:auto;
display:flex;
align-items:flex-end;
background:#2f2f2f;
border-radius:24px;
padding:10px;
border:1px solid #3a3a3a;
}

.input-box textarea{
flex:1;
background:transparent;
border:none;
outline:none;
resize:none;
color:white;
font-size:16px;
padding:12px;
max-height:150px;
}

.input-box textarea::placeholder{
color:#9ca3af;
}

.send-btn{
width:45px;
height:45px;
border:none;
border-radius:50%;
background:white;
color:black;
cursor:pointer;
font-size:16px;
flex-shrink:0;
}

.send-btn:hover{
transform:scale(1.05);
}

.footer-note{
text-align:center;
font-size:12px;
color:#777;
margin-top:10px;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#212121;
}

::-webkit-scrollbar-thumb{
background:#444;
border-radius:20px;
}

/* MOBILE */

@media(max-width:900px){

.sidebar{
display:none;
}

.welcome{
margin-top:80px;
}

.welcome h1{
font-size:34px;
}

.chat-area{
padding:15px;
}

.input-wrapper{
padding:12px;
}

.user-message,
.bot-message{
max-width:95%;
}

}