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

html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#f5f5f5;
}

#app{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* صفحه خوش‌آمد */
#welcome{
  width:100%;
  height:100%;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
}

#welcome h2{
  font-size:24px;
  margin-bottom:10px;
}

#welcome p{
  font-size:14px;
  color:#555;
  margin-bottom:20px;
}

#welcome button{
  padding:15px 25px;
  font-size:16px;
  border:none;
  border-radius:10px;
  background:#000;
  color:white;
}

/* صفحه چت */
#chat{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}

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

.message{
  max-width:80%;
  margin-bottom:10px;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
}

.bot{
  background:#eaeaea;
  align-self:flex-start;
}

.user{
  background:#000;
  color:white;
  align-self:flex-end;
}

/* ورودی پایین */
#inputBox{
  display:flex;
  padding:10px;
  border-top:1px solid #ddd;
  background:white;
}

#inputBox input{
  flex:1;
  padding:12px;
  font-size:14px;
  border-radius:8px;
  border:1px solid #ccc;
}

#inputBox button{
  margin-left:8px;
  padding:12px 16px;
  border:none;
  background:#000;
  color:white;
  border-radius:8px;
}