@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}

body{
  background:linear-gradient(140deg,#020617,#1e1b4b);
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
}

.app{
  width:390px;
  height:720px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  border-radius:25px;
  padding:20px;
  box-shadow:0 0 40px rgba(0,0,0,.6);
  position:relative;
}

/* screens */
.screen{display:none;flex-direction:column;height:100%;justify-content:center}
.active{display:flex}

/* profile */
h1{text-align:center;margin-bottom:20px}
input,select{
  padding:14px;margin:6px 0;border-radius:12px;border:none;
}

button{
  padding:14px;margin-top:10px;
  background:linear-gradient(45deg,#6366f1,#a855f7);
  border:none;border-radius:12px;color:white;font-weight:bold;
  cursor:pointer;transition:.2s;
}
button:hover{transform:scale(1.05)}

/* loader */
.loader{
  border:6px solid #334155;
  border-top:6px solid #a855f7;
  border-radius:50%;
  width:60px;height:60px;
  animation:spin 1s linear infinite;
  margin:auto;
}
@keyframes spin{100%{transform:rotate(360deg)}}

/* chat header */
.chat-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

/* chat area */
#chatBox{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

/* messages */
.msg{
  padding:10px 14px;
  margin:6px 0;
  border-radius:18px;
  max-width:70%;
  animation:fadeUp .3s ease;
}

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

.me{
  background:linear-gradient(45deg,#6366f1,#a855f7);
  margin-left:auto;
}
.them{background:#334155}

/* input */
.chat-input{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.chat-input input{
  flex:1;
  padding:14px;
  border:none;
  border-radius:14px;
}
.chat-input button{
  padding:14px 18px;
}

/* typing dots */
.typing{
  display:flex;gap:5px;margin:5px 0;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:#94a3b8;
  animation:bounce 1s infinite;
}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{
  0%,80%,100%{transform:scale(0)}
  40%{transform:scale(1)}
}