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

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

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

/* =========================
SIDEBAR
========================= */

.sidebar{
width:300px;
background:#E39191;
color:white;
display:flex;
flex-direction:column;
padding:20px;
transition:.3s ease;
overflow:hidden;
box-shadow:4px 0 20px rgba(0,0,0,.08);
}

.sidebar.hidden{
width:0;
padding:0;
}

.sidebar-header{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}

.logo{
width:200px;
height:80px;
display:block;
object-fit:contain;
transition:.3s;
}

.logo:hover{
transform:scale(1.03);
}

.new-chat-btn{
background:white;
color:#cb7575;
border:none;
padding:14px;
border-radius:14px;
font-weight:600;
cursor:pointer;
margin-bottom:15px;
transition:.25s;
}

.new-chat-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.chat-search{
width:100%;
padding:12px;
border:none;
outline:none;
border-radius:12px;
margin-bottom:15px;
font-size:14px;
}

.chat-list{
flex:1;
overflow-y:auto;
}

.chat-item{
background:rgba(255,255,255,.15);
border-radius:12px;
padding:12px;
margin-bottom:10px;
transition:.2s;
backdrop-filter:blur(10px);
}

.chat-item:hover{
background:rgba(255,255,255,.25);
}

.active-chat{
background:white !important;
color:#cb7575;
font-weight:600;
}

.chat-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.chat-title{
flex:1;
cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.delete-chat-btn{
background:none;
border:none;
color:inherit;
cursor:pointer;
opacity:0;
transition:.2s;
}

.chat-item:hover .delete-chat-btn{
opacity:1;
}

/* =========================
CHAT AREA
========================= */

.chat-container{
flex:1;
display:flex;
flex-direction:column;
background:white;
}

/* HEADER */

.chat-header{
height:90px;
background:#E39191;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.left-header{
display:flex;
align-items:center;
gap:15px;
}

.brand{
display:flex;
align-items:center;
}

.header-logo{
width:200px;
height:80px;
display:block;
object-fit:contain;
}

.header-actions{
display:flex;
gap:10px;
}

.icon-btn{
width:45px;
height:45px;
border:none;
border-radius:12px;
cursor:pointer;
transition:.25s;
}

.icon-btn:hover{
transform:scale(1.08);
}

/* =========================
MESSAGES
========================= */

.messages{
flex:1;
overflow-y:auto;
padding:25px;
display:flex;
flex-direction:column;
gap:15px;
scroll-behavior:smooth;
background:#fff;
}

.message{
max-width:75%;
padding:14px 18px;
line-height:1.7;
font-size:15px;
word-wrap:break-word;
animation:fadeIn .25s ease;
}

.user{
align-self:flex-end;
background:#cb7575;
color:white;
border-radius:22px 22px 0 22px;
box-shadow:0 4px 15px rgba(203,117,117,.25);
}

.bot{
align-self:flex-start;
background:#fff0eb;
color:#333;
border-radius:22px 22px 22px 0;
box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* =========================
INPUT AREA
========================= */

.input-area{
display:flex;
align-items:flex-end;
gap:10px;
padding:20px;
border-top:1px solid #eee;
background:white;
}

textarea{
flex:1;
height:60px;
border:none;
outline:none;
resize:none;
background:#fff0eb;
padding:15px;
border-radius:18px;
font-size:15px;
}

textarea::-webkit-scrollbar{
display:none;
}

.send-btn{
width:60px;
height:60px;
border:none;
background:#cb7575;
color:white;
border-radius:18px;
font-size:22px;
cursor:pointer;
transition:.25s;
}

.send-btn:hover{
transform:scale(1.05);
box-shadow:0 6px 16px rgba(203,117,117,.3);
}

/* =========================
TYPING ANIMATION
========================= */

.typing{
display:flex;
gap:5px;
align-items:center;
}

.typing span{
width:8px;
height:8px;
background:#cb7575;
border-radius:50%;
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(-8px);
}
}

/* =========================
ANIMATIONS
========================= */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* =========================
SCROLLBAR
========================= */

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

::-webkit-scrollbar-thumb{
background:#cb7575;
border-radius:10px;
}

::-webkit-scrollbar-track{
background:transparent;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.sidebar{
position:absolute;
left:0;
top:0;
height:100%;
z-index:1000;
}

.logo{
width:220px;
}

.header-logo{
width:140px;
}

.chat-header{
height:80px;
}

.message{
max-width:90%;
}

.input-area{
padding:15px;
}

textarea{
font-size:14px;
}

.send-btn{
width:55px;
height:55px;
}

}