/* RESET */

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

/* BODY */

body{
background:#0f172a;
color:white;
font-family:"Segoe UI",sans-serif;
height:100dvh;
overflow:hidden;
}


/* CONTAINER */

.container{
display:flex;
height:calc(100dvh - 60px);
overflow:hidden;
}


/* TOPBAR */

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
background:#020617;
color:white;
border-bottom:1px solid #334155;
position:relative;
height:60px;
}

.topbar-right{
display:flex;
align-items:center;
gap:8px;
}

.topbar-center{
position:absolute;
left:50%;
transform:translateX(-50%);
font-weight:600;
font-size:20px;
}

.topbar-left{
display:flex;
align-items:center;
gap:10px;
}

.topbar a,
.topbar button{
text-decoration:none;
padding:6px 12px;
cursor:pointer;
border:none;
border-radius:6px;
background:#22c55e;
color:white;
font-weight:600;
transition:0.2s;
}

.topbar a:hover,
.topbar button:hover{
background:#16a34a;
}

/* MENU BUTTON (hidden on desktop) */

#menuBtn{
display:none;
background:none;
font-size:22px;
padding:6px 10px;
}


/* SIDEBAR */

.sidebar{
width:260px;
background:#1e293b;
padding:12px;
overflow-y:auto;
border-right:1px solid #334155;
}

.sidebar button{
width:100%;
padding:10px;
background:#22c55e;
border:none;
color:white;
margin-bottom:10px;
border-radius:8px;
cursor:pointer;
transition:0.2s;
font-weight:600;
}

.sidebar button:hover{
background:#16a34a;
transform:scale(1.03);
}


/* SEARCH */

#search{
width:100%;
padding:8px;
margin-bottom:10px;
border:none;
border-radius:8px;
background:#0f172a;
color:white;
outline:none;
}

#search:focus{
box-shadow:0 0 0 2px #22c55e;
}


/* CHAT LIST */

.chat-item{
display:flex;
align-items:center;
justify-content:space-between;
background:#334155;
padding:8px 10px;
margin-top:6px;
cursor:pointer;
border-radius:8px;
transition:0.2s;
}

.chat-item:hover{
background:#475569;
transform:translateX(3px);
}

.chat-title{
flex:1;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:14px;
}

.chat-actions{
display:flex;
gap:4px;
margin-left:6px;
}

.chat-actions button{
background:none;
border:none;
color:white;
cursor:pointer;
font-size:14px;
}

.chat-actions button:hover{
color:#22c55e;
}


/* CHAT AREA */

.chat-area{
flex:1;
display:flex;
flex-direction:column;
padding:20px;
height:100%;
min-height:0;
}


/* MODEL SELECT */

.model-select{
margin-bottom:10px;
padding:8px;
border-radius:6px;
background:#0f172a;
color:white;
border:none;
}


/* CHAT BOX */

#chat{
flex:1;
overflow-y:auto;
background:#1e293b;
padding:15px;
margin-top:10px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.4);
scroll-behavior:smooth;
min-height:0;
}


/* USER MESSAGE */

.user{
background:#14532d;
color:#4ade80;
padding:10px 14px;
border-radius:12px;
width:fit-content;
margin:6px 0 6px auto;
max-width:70%;
word-wrap:break-word;
}


/* AI MESSAGE */

.ai{
background:#0f172a;
color:#60a5fa;
padding:10px 14px;
border-radius:12px;
width:fit-content;
max-width:70%;
border:1px solid #334155;
margin:6px 0;
position:relative;
word-wrap:break-word;
}

.ai span{
display:block;
padding-right:35px;
}


/* COPY BUTTON */

.copy-btn{
position:absolute;
top:5px;
right:6px;
background:none;
border:none;
color:#94a3b8;
font-size:11px;
cursor:pointer;
}

.copy-btn:hover{
color:#22c55e;
}


/* INPUT AREA */

.input-area{
display:flex;
align-items:flex-end;
gap:8px;
margin-top:10px;
position:sticky;
bottom:0;
background:#1e293b;
padding-top:8px;
}


/* TEXTAREA */

.input-area textarea{
flex:1;
padding:10px 12px;
border:none;
border-radius:8px;
background:#0f172a;
color:white;
outline:none;
font-family:inherit;
font-size:15px;
min-height:45px;
max-height:140px;
resize:none;
overflow-y:auto;
transition:0.2s;
}

.input-area textarea:focus{
box-shadow:0 0 0 2px #22c55e;
}

.input-area textarea::placeholder{
color:#94a3b8;
}


/* SEND BUTTON */

#sendBtn{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:white;
border:none;
border-radius:10px;
padding:10px 18px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
min-width:80px;
}

#sendBtn:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.4);
background:linear-gradient(135deg,#4ade80,#22c55e);
}

#sendBtn:active{
transform:scale(0.95);
}


/* SCROLLBAR */

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

::-webkit-scrollbar-track{
background:#1e293b;
}

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

::-webkit-scrollbar-thumb:hover{
background:#64748b;
}


/* MOBILE */

@media (max-width:800px){

/* show menu button */

#menuBtn{
display:block;
}

/* container */

.container{
flex-direction:row;
height:calc(100dvh - 60px);
}

/* sidebar */

.sidebar{
position:fixed;
left:-260px;
top:60px;
height:calc(100dvh - 60px);
width:240px;
z-index:1000;
transition:0.3s;
}

.sidebar.open{
left:0;
}

/* chat area */

.chat-area{
padding:10px;
height:calc(100dvh - 60px);
}

/* chat */

#chat{
padding:10px;
}

/* messages */

.user,
.ai{
max-width:90%;
font-size:14px;
}

/* input */

.input-area{
gap:6px;
padding:8px;
}

.input-area textarea{
font-size:14px;
min-height:40px;
max-height:100px;
padding:8px;
}

/* send button */

#sendBtn{
padding:8px 14px;
font-size:14px;
min-width:60px;
}

/* topbar */

.topbar-center{
font-size:16px;
}

}