/* ═══════════════════════════════════════════════════════════════════════
   «المكالمات» — سجل المكالمات (.calls-*) · screens/call-log.js
   ───────────────────────────────────────────────────────────────────────
   المرجع: docs/DESIGN.md. الصف من .list/.item في ui.css، والصورة من .av، وهذا
   الملف يضيف ما يخصّ المكالمة وحدها: سهم الاتجاه بلونه، والاسم الأحمر للفائتة،
   وزر معاودة الاتصال المستدير، وعناوين الأيام، والهيكل المؤقت، والحالات.
   الألوان من الرموز: --danger للفائتة وحدها، --success لمكالمة تمّت، --fg-3
   لما لم يتمّ. خصائص منطقية فقط؛ الحركة transform/opacity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── عنوان اليوم: لاصق أعلى القائمة كما تيليجرام ── */
.calls-day {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg);
  padding: 14px 16px 6px;
  font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3);
}
.calls-list { background: var(--bg); }
.calls-list + .calls-day { margin-top: 2px; }

/* ── الصف ── */
.calls-row { -webkit-user-select: none; user-select: none; }
.calls-row.no-contact { cursor: default; }
.calls-row.is-missed .calls-name { color: var(--danger); }

.calls-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fz-sm); color: var(--fg-3);
}
.calls-dir { width: 16px; height: 16px; color: var(--fg-3); }
.calls-dir svg { stroke-width: 2.1; }
.calls-row.is-ok .calls-dir { color: var(--success); }
.calls-row.is-missed .calls-dir { color: var(--danger); }
.calls-outcome { color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.calls-outcome.ltr { font-variant-numeric: tabular-nums; }
.calls-sep { color: var(--fg-3); flex: none; }
.calls-when { flex: none; white-space: nowrap; }

/* زر معاودة الاتصال: دائرة بلون الأكسنت الخفيف. الصف كله يتصل (السلوك كما
   كان)، والدائرة تستجيب للضغط معه كي يُرى أين يقع الفعل. */
.calls-cb {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1);
}
.calls-cb .icon-svg { width: 21px; height: 21px; }
.calls-cb .icon-svg svg { stroke-width: 2; }
.calls-row:active .calls-cb { transform: scale(.9); background: color-mix(in srgb, var(--accent) 22%, transparent); }
@media (hover: hover) {
  .calls-row.tap:hover { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
}

/* ظهور القائمة بعد الهيكل وحده: تلاشٍ قصير بلا إزاحة. call-log.js يضع
   .calls-enter على #call-log-body حين يحلّ المحتوى محلّ الهيكل فقط؛ إعادة
   التحميل فوق قائمة ظاهرة (سحب للتحديث، انتهاء مكالمة) تبدّل الصفوف في مكانها
   بلا وميض. */
.calls-enter > .calls-list, .calls-enter > .calls-day, .calls-enter > .calls-empty { animation: fade-in var(--dur-2) var(--ease) backwards; }

/* ── الهيكل المؤقت ── */
.calls-skel .list { background: var(--bg); }
.calls-skel-day { padding: 18px 16px 10px; }
.calls-skel-day .skel-line { width: 56px; height: 10px; }
.calls-skel-row { content-visibility: visible; }
.calls-skel-row .item-body { gap: 9px; }
.calls-skel-row .skel-line:last-child { height: 10px; }
.calls-skel-cb { width: 42px; height: 42px; border-radius: 50%; flex: none; }

/* ── الفارغ والخطأ ── */
.calls-empty { padding-top: 72px; }
.calls-empty .empty-subtitle { text-wrap: balance; }
.calls-empty-ic {
  width: 84px; height: 84px; border-radius: 50%; margin-bottom: 12px;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
}
.calls-empty-ic .icon-svg { width: 38px; height: 38px; }
.calls-empty-ic .icon-svg svg { stroke-width: 1.6; }
.calls-empty.is-error .calls-empty-ic { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.calls-retry { margin-top: 16px; }
.calls-retry .icon-svg { width: 18px; height: 18px; }

body.high-contrast .calls-row.is-missed .calls-dir svg { stroke-width: 2.6; }