<div class="radikalwp-card-chat"><div class="radikalwp-card-chat-msg radikalwp-card-chat-msg-in">سلام، قالب رو چطور نصب کنم؟<//div><div class="radikalwp-card-chat-msg radikalwp-card-chat-msg-out">سلام! از بخش «قالب‌ها» دکمه دانلود رو بزنید.<//div><div class="radikalwp-card-chat-input"><input type="text" placeholder="پیام خود را بنویسید..."><button>ارسال<//button><//div><//div>

.radikalwp-card-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 16px;
  font-family: inherit;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.radikalwp-card-chat-msg {
  max-width: 78%;
  padding: 9px 14px;
  font-size: 12.5px;
  line-height: 1.9;
  border-radius: 14px;
}
.radikalwp-card-chat-msg-in { align-self: flex-start; background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 14px 14px 14px 4px; }
.radikalwp-card-chat-msg-out { align-self: flex-end; background: #4f46e5; color: #fff; border-radius: 14px 14px 4px 14px; }
.radikalwp-card-chat-input { display: flex; gap: 8px; margin-top: 6px; }
.radikalwp-card-chat-input input {
  flex: 1;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12.5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  outline: none;
  background: #fff;
  color: #1e293b;
}
.radikalwp-card-chat-input input:focus { border-color: #a5b4fc; }
.radikalwp-card-chat-input button {
  padding: 8px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: #4f46e5;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}