/* ========== AKM Chat — Clean Pro Style (RTL + Dark-ready) ========== */
/* متغيّرات عامة */
:root{
  --akm-font: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic", Arial, sans-serif;
  --akm-bg: #ffffff;
  --akm-surface: #fcfcfd;
  --akm-fg: #0f172a;
  --akm-muted: #6b7280;
  --akm-border: #e5e7eb;
  --akm-brand: #2563eb;
  --akm-brand-weak: #e0e7ff;
  --akm-danger: #dc2626;
  --akm-success: #16a34a;
  --akm-bubble-me: #e9f2ff;      /* أزرق فاتح مريح */
  --akm-bubble-them: #f5f7fb;    /* رمادي فاتح */
  --akm-radius-lg: 16px;
  --akm-radius: 12px;
  --akm-gap: 12px;
  --akm-shadow: 0 10px 28px rgba(2,6,23,.06);
}

/* الوضع الداكن حسب النظام */
@media (prefers-color-scheme: dark) {
  :root{
    --akm-bg: #0b1220;
    --akm-surface: #0f172a;
    --akm-fg: #e5e7eb;
    --akm-muted: #a3aab8;
    --akm-border: #1f2a44;
    --akm-brand: #4f8cff;
    --akm-brand-weak: #18233d;
    --akm-bubble-me: #0f2646;
    --akm-bubble-them: #111a2d;
    --akm-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
}

/* حاوية الصندوق */
.akm-chat{
  font-family: var(--akm-font);
  background: var(--akm-bg);
  color: var(--akm-fg);
  border: 1px solid var(--akm-border);
  border-radius: var(--akm-radius-lg);
  box-shadow: var(--akm-shadow);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--akm-gap);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

/* الشريط الجانبي */
.akm-chat__side{
  background: var(--akm-surface);
  border-inline-end: 1px solid var(--akm-border);
  display:flex; flex-direction:column;
}
.akm-chat__head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--akm-border);
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
.akm-corner__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.akm-title{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px; }
.akm-unread{
  background: var(--akm-brand-weak);
  color: #1f2937;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* قائمة المحادثات */
.akm-chat__list{
  overflow: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--akm-border) transparent;
}
.akm-chat__list::-webkit-scrollbar{ width: 10px; }
.akm-chat__list::-webkit-scrollbar-thumb{
  background: var(--akm-border);
  border: 3px solid transparent;
  border-radius: 999px;
}
.akm-list-empty{
  color: var(--akm-muted);
  text-align: center;
  padding: 24px 10px;
  font-weight: 600;
  opacity: .9;
}

/* عناصر المحادثات (حقن ديناميكي) */
.akm-chat__list .item{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:12px; cursor:pointer;
  transition: background .18s ease, transform .12s ease;
}
.akm-chat__list .item:hover{ background:#f8fafc; transform: translateY(-1px); }
.akm-chat__list .item[aria-selected="true"]{
  background: #eef2ff; outline: 2px solid #e0e7ff;
}

/* منطقة المحادثة الرئيسية */
.akm-chat__main{ display:flex; flex-direction: column; min-width: 0; }

/* رأس المحادثة */
.akm-main__head{
  display:flex; gap:10px; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--akm-border);
  background: linear-gradient(180deg, rgba(37,99,235,.04), transparent);
}
.akm-avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover; background:#e5e7eb;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
.akm-main__title span{ font-weight:700; font-size: 15px; }
.akm-head-status{ color: var(--akm-muted); display:block; margin-top:2px; }

/* سجل الرسائل */
.akm-chat__thread{
  flex:1; overflow:auto; padding:14px;
  background:
    linear-gradient(#fff, #fff),
    radial-gradient(700px 50px at 50% -40px, #f8fbff, #fff);
  background-clip: padding-box, border-box;
  scrollbar-width: thin; scrollbar-color: var(--akm-border) transparent;
}
.akm-chat__thread::-webkit-scrollbar{ width: 10px; }
.akm-chat__thread::-webkit-scrollbar-thumb{
  background: var(--akm-border);
  border: 3px solid transparent;
  border-radius: 999px;
}
.akm-chat__empty{ color: var(--akm-muted); text-align:center; padding:40px 0; }

/* فقاعات الرسائل */
.akm-msg{
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 14px;
  margin-block: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  word-wrap: break-word;
  line-height: 1.65;
  font-size: 14px;
}
.akm-msg.me  { margin-inline-start:auto; background: var(--akm-bubble-me);  border-start-end-radius: 4px; }
.akm-msg.them{ margin-inline-end:auto;  background: var(--akm-bubble-them); border-start-start-radius: 4px; }

.akm-msg .meta{
  display:flex; gap:8px; margin-top:6px; font-size:12px; color: var(--akm-muted);
}
.akm-msg a{ color: var(--akm-brand); text-decoration: none; }
.akm-msg a:hover{ text-decoration: underline; }

/* فواصل التاريخ */
.akm-divider{
  position: relative; text-align:center; margin: 16px 0; color: var(--akm-muted);
  font-weight: 600; font-size:12px;
}
.akm-divider::before, .akm-divider::after{
  content:""; position:absolute; top:50%; width:38%;
  border-top:1px solid var(--akm-border);
}
html[dir="rtl"] .akm-divider::before{ right:0; } html[dir="rtl"] .akm-divider::after{ left:0; }
html:not([dir="rtl"]) .akm-divider::before{ left:0; } html:not([dir="rtl"]) .akm-divider::after{ right:0; }

/* شريط الأخطاء/التنبيهات */
.akm-errors{
  background: #fef2f2; color:#991b1b; border:1px solid #fecaca;
  padding:10px 12px; border-radius:10px; margin: 8px 12px;
}

/* حالة الكتابة/تمت المشاهدة */
.akm-typing{ color: var(--akm-muted); font-size:13px; padding: 6px 0; }
.akm-seen{ color: var(--akm-muted); font-size:12px; text-align:end; padding-inline: 12px; }

/* نموذج الإرسال */
.akm-chat__form{
  border-top:1px solid var(--akm-border);
  padding:10px; display:flex; gap:8px; align-items:center;
  background: var(--akm-surface);
}
.akm-form__row{ display:flex; gap:8px; align-items:center; width:100%; }

/* الأزرار العامة داخل الصندوق + شريط العنوان */
.akm-chat__form .button,
.akm-actions .akm-delete-btn,
.akm-actions #akm-mute-toggle{
  background:#f1f5f9;
  border:1px solid var(--akm-border);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  color: var(--akm-fg);
  transition: transform .1s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.akm-chat__form .button:hover,
.akm-actions .akm-delete-btn:hover,
.akm-actions #akm-mute-toggle:hover{
  background:#eaf0ff;
  border-color: #d6defe;
}
.akm-chat__form .button:active,
.akm-actions .akm-delete-btn:active,
.akm-actions #akm-mute-toggle:active{
  transform: translateY(1px) scale(.99);
}
.akm-chat__form .button:disabled{ opacity:.55; cursor:not-allowed; }

/* حقل كتابة الرسالة */
#akm-message{
  flex:1;
  border:1px solid var(--akm-border);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  background: #fff;
  color: var(--akm-fg);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
@media (prefers-color-scheme: dark){
  #akm-message{ background: #0b1426; }
}
#akm-message::placeholder{ color: #9aa3b2; }
#akm-message:focus{
  border-color: var(--akm-brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* شريط تقدم الرفع */
.akm-progress{
  margin-top: 6px; height: 6px; width: 100%;
  background: #eef2f7; border-radius: 999px; overflow: hidden;
}
.akm-progress > i{ display:block; height:100%; width:0%; background: var(--akm-brand); }

/* زر حذف بمظهر تحذيري */
.akm-actions .akm-delete-btn{
  background: #fff5f5;
  border-color: #ffd9d9;
}
.akm-actions .akm-delete-btn:hover{
  background: #ffecec;
  border-color: #ffc4c4;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 900px){
  .akm-chat{ grid-template-columns: 1fr; }
  .akm-chat__side{ display:none; }
  .akm-msg{ max-width: 88%; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}