*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html, body{
  width:372px;
  height:450px;
  overflow:hidden;
  background:#070707;
  font-family:Arial,sans-serif;
}
.aprill-container{
  display:flex;
  flex-direction:column;
  width:372px;
  height:450px;
  background:#070707;
  color:#ddd;
  padding:16px;
}
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:10px;
}
.top-bar h1{
  letter-spacing:6px;
  font-weight:300;
  font-size:13px;
  color:#ddd;
}
.top-bar span{
  color:#a11;
  font-size:9px;
  letter-spacing:2px;
}
#messages{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
#messages::-webkit-scrollbar{
  width:3px;
}
#messages::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.1);
  border-radius:2px;
}
.message{
  max-width:90%;
  padding:8px 12px;
  line-height:1.6;
  font-size:12px;
  border-radius:12px;
  word-wrap:break-word;
  white-space:pre-wrap;
}
.aprill{
  background:rgba(255,255,255,.04);
  color:#d8d8d8;
  align-self:flex-start;
  border-bottom-left-radius:3px;
}
.user{
  background:#7a1010;
  color:white;
  align-self:flex-end;
  border-bottom-right-radius:3px;
}
.system{
  font-size:10px;
  color:rgba(255,255,255,.3);
  align-self:flex-start;
}
.input-area{
  display:flex;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
  margin-top:12px;
}
input{
  flex:1;
  background:rgba(255,255,255,.04);
  border:none;
  outline:none;
  color:white;
  font-size:12px;
  padding:8px 12px;
  border-radius:10px;
  min-width:0;
}
input::placeholder{
  color:rgba(255,255,255,.3);
}
button{
  background:#7a1010;
  border:none;
  color:white;
  padding:0 14px;
  cursor:pointer;
  letter-spacing:1px;
  border-radius:10px;
  font-size:10px;
  white-space:nowrap;
}
button:hover{
  background:#8a1515;
}