/* ===========================
   RESET
=========================== */

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

html,body{
height:100%;
background:#0b0b14;
color:#fff;
overflow:hidden;
}

/* ===========================
APP
=========================== */

.app{
display:flex;
height:100vh;
background:
linear-gradient(180deg,#151525,#09090f);
}

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

.sidebar{

width:280px;

background:#10101b;

border-right:1px solid rgba(255,255,255,.06);

display:flex;

flex-direction:column;

padding:20px;

transition:.35s;

}

.sidebar-header{

display:flex;

align-items:center;

gap:12px;

margin-bottom:30px;

}

.logo{

width:48px;

height:48px;

border-radius:50%;

box-shadow:0 0 18px #8b5cf6;

}

.sidebar-header h2{

font-size:22px;

font-weight:600;

}

.new-chat{

height:52px;

border:none;

border-radius:15px;

background:#8b5cf6;

color:white;

font-size:15px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

margin-bottom:25px;

transition:.3s;

}

.new-chat:hover{

background:#7c3aed;

}

.history-title{

font-size:13px;

opacity:.6;

margin-bottom:10px;

}

.history{

flex:1;

overflow:auto;

}

.history::-webkit-scrollbar{

width:4px;

}

.history::-webkit-scrollbar-thumb{

background:#8b5cf6;

border-radius:20px;

}

.sidebar-bottom{

display:flex;

flex-direction:column;

gap:10px;

padding-top:18px;

border-top:1px solid rgba(255,255,255,.05);

}

.sidebar-bottom button{

height:46px;

background:#1b1b2d;

color:white;

border:none;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.sidebar-bottom button:hover{

background:#2d2d45;

}
/* ===========================
MAIN
=========================== */

.main{
flex:1;
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
}

/* ===========================
HEADER
=========================== */

header{

height:72px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 24px;

background:rgba(16,16,28,.85);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.06);

}

.left{

display:flex;

align-items:center;

gap:18px;

}

#menuBtn{

width:45px;

height:45px;

border:none;

border-radius:12px;

background:#1d1d33;

color:white;

cursor:pointer;

font-size:18px;

transition:.3s;

}

#menuBtn:hover{

background:#8b5cf6;

}

.title{

display:flex;

align-items:center;

gap:12px;

}

.title img{

width:42px;

height:42px;

border-radius:50%;

box-shadow:0 0 15px #8b5cf6;

}

.title h2{

font-size:20px;

font-weight:600;

}

.title p{

font-size:12px;

opacity:.6;

margin-top:2px;

}

#modelBtn{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

border:none;

border-radius:14px;

background:#1d1d33;

color:white;

cursor:pointer;

transition:.3s;

}

#modelBtn:hover{

background:#8b5cf6;

}

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

.chat-container{

flex:1;

overflow-y:auto;

padding:28px;

display:flex;

flex-direction:column;

gap:18px;

scroll-behavior:smooth;

}

.chat-container::-webkit-scrollbar{

width:6px;

}

.chat-container::-webkit-scrollbar-thumb{

background:#8b5cf6;

border-radius:20px;

}

/* ===========================
WELCOME
=========================== */

.welcome{

margin:auto;

text-align:center;

max-width:600px;

}

.welcome-logo{

width:90px;

height:90px;

border-radius:50%;

box-shadow:0 0 30px #8b5cf6;

margin-bottom:25px;

}

.welcome h1{

font-size:38px;

margin-bottom:15px;

}

.welcome p{

opacity:.7;

line-height:1.8;

font-size:16px;

}/* ===========================
CHAT MESSAGES
=========================== */

.message{

display:flex;

gap:14px;

align-items:flex-start;

animation:fade .3s ease;

}

.message.user{

justify-content:flex-end;

}

.avatar{

width:42px;

height:42px;

border-radius:50%;

overflow:hidden;

flex-shrink:0;

box-shadow:0 0 15px rgba(139,92,246,.45);

}

.avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.message-content{

max-width:75%;

background:#1b1b30;

padding:18px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.message.user .message-content{

background:linear-gradient(135deg,#8b5cf6,#6d28d9);

}

.message-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

font-size:13px;

opacity:.7;

}

.message-text{

font-size:15px;

line-height:1.8;

word-break:break-word;

white-space:pre-wrap;

}

.message-actions{

display:flex;

gap:10px;

margin-top:14px;

}

.message-actions button{

width:36px;

height:36px;

border:none;

border-radius:10px;

background:#292944;

color:white;

cursor:pointer;

transition:.3s;

}

.message-actions button:hover{

background:#8b5cf6;

transform:translateY(-2px);

}

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

.typing{

display:flex;

gap:6px;

padding:8px 0;

}

.typing span{

width:8px;

height:8px;

background:#8b5cf6;

border-radius:50%;

animation:typing 1.2s infinite;

}

.typing span:nth-child(2){

animation-delay:.2s;

}

.typing span:nth-child(3){

animation-delay:.4s;

}

@keyframes typing{

0%,80%,100%{

transform:scale(.7);

opacity:.5;

}

40%{

transform:scale(1.2);

opacity:1;

}

}

@keyframes fade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}/* ===========================
FOOTER
=========================== */

footer{

padding:18px 24px;

background:rgba(15,15,25,.88);

backdrop-filter:blur(20px);

border-top:1px solid rgba(255,255,255,.06);

}

.input-container{

display:flex;

align-items:center;

gap:12px;

background:#181827;

padding:10px;

border-radius:18px;

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

}

.input-container input{

flex:1;

height:50px;

background:transparent;

border:none;

outline:none;

color:white;

font-size:16px;

padding:0 10px;

}

.input-container input::placeholder{

color:#8f95a5;

}

.tool-btn{

width:46px;

height:46px;

border:none;

border-radius:14px;

background:#25253b;

color:white;

cursor:pointer;

transition:.25s;

}

.tool-btn:hover{

background:#8b5cf6;

transform:translateY(-2px);

}

#send{

width:52px;

height:52px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#8b5cf6,#6d28d9);

color:white;

font-size:18px;

cursor:pointer;

transition:.25s;

}

#send:hover{

transform:scale(1.06);

box-shadow:0 0 25px rgba(139,92,246,.55);

}

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

@media (max-width:768px){

.sidebar{

position:fixed;

left:-280px;

top:0;

height:100%;

z-index:1000;

}

.sidebar.active{

left:0;

}

.main{

width:100%;

}

header{

padding:0 16px;

}

.title p{

display:none;

}

.welcome h1{

font-size:28px;

}

.message-content{

max-width:95%;

}

.input-container{

gap:8px;

}

.tool-btn{

width:42px;

height:42px;

}

#send{

width:48px;

height:48px;

}

}

/* ===========================
SELECTION
=========================== */

::selection{

background:#8b5cf6;

color:white;

}