@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

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

body{
  height:100vh;
  overflow:hidden;
  color:white;
  transition: background 0.5s ease, color 0.5s ease;
}

.background{
  position:absolute;
  width:100%;
  height:100%;
  filter:blur(100px);
  z-index:0;
  background: linear-gradient(135deg,#0a0a0a,#1f1f1f);
  animation: bgAnimate 30s linear infinite alternate;
}

/* layout */
.app{
  position:relative;
  z-index:1;
  display:flex;
  height:100vh;
}

/* sidebar */
.sidebar{
  width:260px;
  background:rgba(20,20,20,.85);
  backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,.05);
  padding:20px;
  display:flex;
  flex-direction:column;
}

.logo{
  font-size:22px;
  font-weight:600;
  margin-bottom:20px;
}
.logo span{color:#3ea6ff;}

#newChat{
  padding:10px;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg,#2f8cff,#5ddcff);
  color:white;
  cursor:pointer;
  margin-bottom:20px;
}

.selectors{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:20px;
}

select{
  padding:6px;
  background:rgba(0,0,0,.5);
  color:white;
  border:none;
  border-radius:6px;
}

/* chat area */
.chat{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:25px;
}

#messages{
  flex:1;
  overflow-y:auto;
}

/* messages */
.message{
  max-width:65%;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  line-height:1.4;
  font-size:14px;
}

.user{
  background:#3ea6ff;
  align-self:flex-end;
}

.ai{
  background:rgba(30,30,30,.85);
  border:1px solid rgba(255,255,255,.05);
}

/* markdown formatting */
.message strong{font-weight:600;}
.message code{
  background:rgba(0,0,0,.6);
  padding:3px 6px;
  border-radius:5px;
  font-family:monospace;
}
.message pre{
  background:rgba(0,0,0,.6);
  padding:10px;
  border-radius:8px;
  overflow-x:auto;
}

/* input bar */
.inputBar{
  display:flex;
  gap:10px;
  margin-top:10px;
}

input{
  flex:1;
  padding:12px;
  background:rgba(0,0,0,.5);
  border:none;
  border-radius:8px;
  color:white;
}

button{
  padding:12px 16px;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg,#2f8cff,#5ddcff);
  color:white;
  cursor:pointer;
}

/* background animation */
@keyframes bgAnimate{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ========== 25 Animated/Cosy Themes ========== */
.theme-dark{
  background:linear-gradient(135deg,#0a0a0a,#1f1f1f);
  color:white;
}
.theme-matrix{
  background:black;
  color:#00ff9c;
  background-image:linear-gradient(0deg, rgba(0,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,0,.05) 1px, transparent 1px);
  background-size:20px 20px;
}
.theme-glass{
  background:rgba(30,30,40,.5);
  backdrop-filter:blur(20px);
  color:white;
}
.theme-cyberpunk{
  background:linear-gradient(45deg,#ff0055,#ffdd00,#00ffdd,#ff00aa);
  background-size:400% 400%;
  animation:bgAnimate 20s ease infinite;
  color:white;
}
.theme-sunset{
  background:linear-gradient(135deg,#ff5f6d,#ffc371,#ff9a3c);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-ocean{
  background:linear-gradient(135deg,#2193b0,#6dd5ed,#2e8bc0);
  background-size:300% 300%;
  animation:bgAnimate 30s ease infinite;
  color:white;
}
.theme-forest{
  background:linear-gradient(135deg,#0f9b0f,#97e68d,#2b7a0b);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-neon{
  background:radial-gradient(circle,#39ff14,#000);
  animation:bgAnimate 20s ease infinite;
  color:#39ff14;
}
.theme-violet{
  background:linear-gradient(135deg,#2e0249,#5a00ff,#d18fff);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-rose{
  background:linear-gradient(135deg,#ff007f,#ff85c1,#ff3c8f);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:white;
}
.theme-orange{
  background:linear-gradient(135deg,#ff7f50,#ffb347,#ffa500);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-blue{
  background:linear-gradient(135deg,#007fff,#00c6ff,#0059ff);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-red{
  background:linear-gradient(135deg,#ff0000,#ff5555,#aa0000);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:white;
}
.theme-green{
  background:linear-gradient(135deg,#00ff00,#66ff66,#009900);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:black;
}
.theme-purple{
  background:linear-gradient(135deg,#8000ff,#b366ff,#4b0082);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-pink{
  background:linear-gradient(135deg,#ff69b4,#ffb6c1,#ff1493);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-gold{
  background:linear-gradient(135deg,#ffd700,#ffec8b,#e6c200);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:black;
}
.theme-silver{
  background:linear-gradient(135deg,#c0c0c0,#e0e0e0,#808080);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:black;
}
.theme-retro{
  background:linear-gradient(135deg,#ff6f00,#ffb300,#ff8c00);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:white;
}
.theme-aqua{
  background:linear-gradient(135deg,#00ffff,#00cccc,#00aaaa);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:black;
}
.theme-lava{
  background:linear-gradient(135deg,#ff4500,#ff8c00,#ff6347);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-ice{
  background:linear-gradient(135deg,#00f0ff,#00cfff,#0099ff);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:black;
}
.theme-storm{
  background:linear-gradient(135deg,#6666ff,#aaddff,#3333aa);
  background-size:300% 300%;
  animation:bgAnimate 20s ease infinite;
  color:white;
}
.theme-space{
  background:linear-gradient(135deg,#001f3f,#005f9f,#000022);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}
.theme-violetglass{
  background:linear-gradient(135deg,#5f00ff,#d18fff,#8a2be2);
  background-size:300% 300%;
  animation:bgAnimate 25s ease infinite;
  color:white;
}