/* 1) ترتيب العنصر كله أفقي: [أفاتار] [الاسم/التاريخ] [الرسالة] */
.chat_log {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

/* 2) تصغير الأيقونة لتناسب السطر */
.chat_log .avtrig,
.chat_log .avtrig .cavatar {
  flex: 0 0 28px;              /* غيّرها لـ 24px أو 32px حسب ذوقك */
  width: 28px;
  height: 28px;
}
.chat_log .avtrig img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 3) جعل الاسم والرسالة على سطر واحد */
.chat_log .my_text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;                /* مهم للسماح بلفّ النص داخل الفليكس */
}

/* 4) صندوق الاسم/التاريخ يصبح عنصرًا أفقيًا صغيرًا */
.chat_log .my_text .btable {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;                   /* إزالة أي فراغ علوي/سفلي */
}

/* اسم المستخدم والتاريخ على خط واحد */
.chat_log .my_text .cname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* اجعل التاريخ صغيرًا أو أخفه إن رغبت */
.chat_log .my_text .cdate {
  font-size: 11px;
  opacity: 0.7;
}

/* 5) وضع الرسالة جنب الاسم مباشرة */
.chat_log .log_content {
  display: block;
  min-width: 0;                /* يسمح بلفّ الفقاعة وعدم كسر التخطيط */
}

/* فقاعة الرسالة تكون inline حتى تكمل السطر */
.chat_log .chat_message {
  display: inline;
}
.chat_log .chat_message .mbubble {
  display: inline-block;
  margin: 0;                   /* إزالة المسافة العلوية الافتراضية */
  white-space: normal;         /* يسمح بلفّ السطور داخل الفقاعة */
  vertical-align: middle;
  max-width: 100%;
}

/* 6) مسافات صغيرة بين الاسم والرسالة */
.chat_log .username {
  margin-inline-end: 6px;
}

/* 7) خيار اتجاه عربي (لو واجهت انعكاس بالـ RTL) */
.rtl .chat_log { direction: rtl; }
.rtl .chat_log .my_text { flex-direction: row-reverse; }
.rtl .chat_log .username { margin-inline-start: 6px; margin-inline-end: 0; }

/* 8) استجابة للموبايل: تصغير الأيقونة أكثر إذا الشاشة ضيقة */
@media (max-width: 480px) {
  .chat_log .avtrig,
  .chat_log .avtrig .cavatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .chat_log { gap: 6px; }
}