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

body{
font-family:Arial;
background:#020617;
overflow:hidden;
color:white;
height:100vh;
}

.background{
position:fixed;
width:100%;
height:100%;
background:
radial-gradient(circle at top left,#2563eb55,transparent 40%),
radial-gradient(circle at bottom right,#9333ea55,transparent 40%),
#020617;
z-index:-1;
}

.mobile-top{
display:none;
}

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

.sidebar{
width:260px;
background:rgba(15,23,42,0.8);
backdrop-filter:blur(20px);
padding:20px;
border-right:1px solid rgba(255,255,255,0.08);
}

.logo{
font-size:28px;
font-weight:bold;
background:linear-gradient(90deg,#38bdf8,#a855f7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:25px;
}

.new-chat{
width:100%;
padding:14px;
border:none;
border-radius:14px;
background:linear-gradient(90deg,#2563eb,#9333ea);
color:white;
font-weight:bold;
cursor:pointer;
margin-bottom:25px;
}

.menu div{
padding:14px;
margin-bottom:10px;
border-radius:12px;
background:rgba(255,255,255,0.05);
cursor:pointer;
transition:0.3s;
}

.menu div:hover{
background:rgba(255,255,255,0.1);
}

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

.hero{
text-align:center;
padding:25px 15px 10px;
}

.dev-image{
width:130px;
height:130px;
object-fit:cover;
border-radius:30px;
border:3px solid #38bdf8;
box-shadow:0 0 25px #38bdf8;
animation:float 3s infinite ease-in-out;
}

@keyframes float{
0%{transform:translateY(0px);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}

.hero h1{
font-size:42px;
margin-top:18px;
}

.hero p{
margin-top:8px;
color:#cbd5e1;
}

#chat-box{
flex:1;
overflow-y:auto;
padding:20px;
}

.user,.bot{
padding:14px;
margin-bottom:15px;
border-radius:18px;
max-width:85%;
word-wrap:break-word;
line-height:1.5;
}

.user{
margin-left:auto;
background:linear-gradient(90deg,#2563eb,#3b82f6);
}

.bot{
background:rgba(255,255,255,0.06);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.05);
}

.bottom-bar{
padding:15px;
background:rgba(15,23,42,0.85);
backdrop-filter:blur(20px);
border-top:1px solid rgba(255,255,255,0.08);
}

.bottom-bar select{
width:100%;
padding:14px;
border:none;
border-radius:14px;
background:#111827;
color:white;
margin-bottom:10px;
}

.input-group{
display:flex;
gap:10px;
}

.input-group input{
flex:1;
padding:15px;
border:none;
border-radius:16px;
background:#111827;
color:white;
outline:none;
font-size:15px;
}

.input-group button{
width:55px;
border:none;
border-radius:16px;
background:linear-gradient(90deg,#38bdf8,#9333ea);
color:white;
font-size:20px;
cursor:pointer;
}

@media(max-width:900px){

.mobile-top{
display:flex;
align-items:center;
justify-content:center;
padding:14px;
background:rgba(15,23,42,0.9);
backdrop-filter:blur(20px);
position:fixed;
top:0;
width:100%;
z-index:999;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.sidebar{
display:none;
}

.main{
margin-top:70px;
height:calc(100vh - 70px);
}

.hero{
padding-top:10px;
}

.hero h1{
font-size:30px;
}

.dev-image{
width:100px;
height:100px;
}

#chat-box{
padding:15px;
}

.user,.bot{
max-width:95%;
font-size:14px;
padding:12px;
}

.bottom-bar{
padding:12px;
}

.input-group input{
font-size:14px;
padding:14px;
}

.input-group button{
width:50px;
}
}