:root{
  --coronas-lilas:#9b59b6;
}

.coronas-chat-container{
  max-width:720px;
  margin:20px auto;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  height:75vh;
  overflow:hidden;
}
.coronas-chat-header{
  background:var(--coronas-lilas);
  color:#fff;
  padding:14px 18px;
  font:600 16px system-ui, -apple-system, Arial;
  text-align:center;
}
.coronas-chat-messages{
  flex:1;
  background:#f7f7f8;
  padding:16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.coronas-message{
  max-width:72%;
  padding:10px 14px;
  border-radius:18px;
  font:400 14px/1.4 system-ui, -apple-system, Arial;
  word-wrap:break-word;
}
.coronas-message.sent{
  background:var(--coronas-lilas);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:6px;
}
.coronas-message.received{
  background:#e5e5ea;
  color:#222;
  align-self:flex-start;
  border-bottom-left-radius:6px;
}
.coronas-chat-input{
  display:flex;
  gap:10px;
  padding:10px;
  border-top:1px solid #e9e9ee;
  background:#fff;
}
.coronas-chat-input input{
  flex:1;
  border:none;
  background:#f0f0f2;
  padding:12px 14px;
  border-radius:20px;
  outline:none;
}
.coronas-chat-input button{
  width:44px;height:44px;
  border-radius:50%;
  border:none;
  background:var(--coronas-lilas);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}