/* ═══════════════════════════════════════════════════════════════════════
   الوسائط المشتركة (.md-*) — screens/chat-media.js · /chat/media/:conv
   و«المؤرشفة» (screens/chat-archived.js) تستعير صفوف القائمة (chats.css).
   المرجع: docs/DESIGN.md. الحركة بالتحويل والشفافية وحدهما، وreduce-motion يوقفها.
   ═══════════════════════════════════════════════════════════════════════ */

.md-screen { background: var(--bg); padding-bottom: calc(16px + var(--safe-b)); --md-tabs-h: 50px; }
.md-tabs { position: sticky; top: 0; z-index: 4; padding: 8px 12px; background: var(--bg); }
.md-body { min-height: 50vh; }
.md-body.md-fade { animation: md-fade 150ms var(--ease) backwards; }
@keyframes md-fade { from { opacity: 0; } to { opacity: 1; } }

/* التبويبات: المؤشّر ينزلق بالتحويل (200ms) بدل أن يقفز لون الزرّ */
.md-seg { position: relative; isolation: isolate; }
.md-seg button { position: relative; z-index: 1; }
.md-seg button[aria-pressed="true"] { background: none; box-shadow: none; }
.md-seg-ind {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; inset-inline-start: 3px;
  width: calc((100% - 6px - 9px) / 4); border-radius: 9px; background: var(--bg-elev); box-shadow: var(--shadow-1);
  transform: translateX(calc(var(--i, 0) * (100% + 3px) * var(--md-dir, -1)));
  transition: transform var(--dur-2) var(--ease);
}
[dir="ltr"] .md-seg-ind { --md-dir: 1; }

/* ── الشبكة: 3 أعمدة، فاصل 2px، وأشهر لاصقة ─────────────────────────── */
.md-month { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.md-mh {
  position: sticky; top: var(--md-tabs-h); z-index: 2; padding: 8px 16px 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); font-size: var(--fz-sm); font-weight: 800; color: var(--fg-2);
}
.md-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.md-grid.md-skel { padding-top: 34px; }
.md-tile {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; border-radius: 0;
  background-color: var(--bg-2); background-size: cover; background-position: center;
  display: grid; place-items: center; color: var(--fg-3); -webkit-touch-callout: none;
  transition: opacity var(--dur-2) var(--ease);
}
.md-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.md-tile.md-in img { opacity: 1; }
.md-tile.md-video { background-color: #11161F; color: #fff; }
/* 1.10 — ملصق الفيديو (إطار منه) تحت زرّ التشغيل والمدّة */
.md-tile.md-video .md-play { position: relative; z-index: 1; }
.md-tile.md-video .md-dur { z-index: 1; }
.md-play {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .42); color: #fff;
}
.md-play .icon-svg { width: 20px; height: 20px; }
.md-play svg { fill: currentColor; }
.md-dur {
  position: absolute; bottom: 5px; inset-inline-start: 6px; padding: 1px 6px; border-radius: 8px;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.md-miss-t { display: none; }
.md-tile.md-miss .md-miss-t {
  display: grid; justify-items: center; gap: 4px; position: relative; z-index: 1;
  font-size: var(--fz-xs); font-weight: 700; color: var(--fg-3);
}
.md-tile.md-miss .md-miss-t .icon-svg { width: 22px; height: 22px; }
.md-tile.md-miss { background-image: none !important; }
.md-tile.md-gone, .md-row.md-gone { opacity: 0; }

/* التحديد: طبقة الأكسنت الخفيفة وعلامة في الزاوية */
.md-ck {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .25); color: transparent;
  display: none; place-items: center;
}
.md-ck .icon-svg { width: 14px; height: 14px; }
.md-ck svg { stroke-width: 3.2; }
.md-selecting .md-tile .md-ck { display: grid; }
.md-tile.md-sel-on::after { content: ""; position: absolute; inset: 0; background: var(--accent-soft); outline: 3px solid var(--accent); outline-offset: -3px; }
.md-tile.md-sel-on .md-ck, .md-row.md-sel-on .md-ck {
  display: grid; background: var(--accent); color: var(--accent-fg); z-index: 1;
  animation: chats-pop var(--dur-1) var(--ease-spring);
}

/* ── الملفات والروابط والصوت ─────────────────────────────────────────── */
.md-list { background: none; --sep-inset: 76px; }
.md-row { position: relative; transition: opacity var(--dur-2) var(--ease), background-color var(--dur-1); -webkit-touch-callout: none; }
.md-row.md-sel-on { background: var(--accent-soft); }
.md-ext {
  position: relative; width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: var(--fz-xs); font-weight: 800; letter-spacing: .02em;
}
.md-ext .icon-svg { width: 22px; height: 22px; }
.md-ext .md-ck { top: auto; bottom: -5px; inset-inline-end: -5px; width: 22px; height: 22px; border-color: var(--bg); }
.md-letter {
  --h: 210; font-size: var(--fz-lg);
  background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 38%);
}
body[data-theme="dark"] .md-letter, body[data-theme="oled"] .md-letter { background: hsl(var(--h) 35% 24%); color: hsl(var(--h) 80% 80%); }
.md-row .item-sub { font-size: var(--fz-sm); color: var(--fg-3); }
/* لاتيني في صفّ عربي: من اليسار، ويصطفّ مع بداية الصفّ (كـ.chats-mail) */
.md-host { font-weight: 700; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-url, .md-snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row .md-url { justify-self: start; max-width: 100%; color: var(--accent); }
.md-file .item-trail .icon-svg, .md-link .item-trail .icon-svg { color: var(--fg-3); width: 20px; height: 20px; }
.md-row.md-busy { opacity: .7; }
.md-row.md-miss .item-title { color: var(--fg-3); }

.md-voices { --sep-inset: 16px; }
.md-voice { display: grid; gap: 6px; padding-block: 10px; }
.md-voice-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.md-voice-who { font-size: var(--fz-md); font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-voice-sub { flex: none; font-size: var(--fz-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.md-voice-box { min-width: 0; }
.md-voice .th-voice { width: 100%; max-width: none; }

.md-more { display: grid; justify-items: center; gap: 10px; padding: 18px 16px; text-align: center; }
.md-more .list-note { padding: 0; }
.md-more .btn .chats-spin { width: 16px; height: 16px; }
.md-paging { min-height: 56px; padding: 8px; }
.md-note { padding: 14px 20px 6px; }