@keyframes chat-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes chat-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes chat-ivPop{from{transform:scale(0.94);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes chat-menuPop{from{opacity:0;transform:translateY(6px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes chat-slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes group-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes group-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes group-ivPop{from{transform:scale(0.94);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes group-menuPop{from{opacity:0;transform:translateY(6px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes group-slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.ti-icon {display:contents;}
@keyframes index-menuPop{from{opacity:0;transform:translateY(8px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes index-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes index-spin{to{transform:rotate(360deg);}}
@keyframes index-splashPop{from{opacity:0;transform:translateY(20px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes login-spin{ to{ transform:rotate(360deg); } }
@keyframes page-spin{to{transform:rotate(360deg);}}
@keyframes profile-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes profile-spin{to{transform:rotate(360deg);}}
@keyframes shiziai-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes shiziai-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shiziai-msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes shiziai-typingBounce{0%,60%,100%{transform:translateY(0);opacity:0.5;}30%{transform:translateY(-5px);opacity:1;}}
@keyframes short-spin{to{transform:rotate(360deg);}}
@keyframes index-menuPop{from{opacity:0;transform:translateY(8px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes index-fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* الرد داخل التعليقات */
body.page-profile .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-profile .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-profile .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-profile .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
/* اقتباس الرد داخل فقاعة الرسالة (خاص وجماعي) */
body.page-chat .msg-reply-quote, body.page-group .msg-reply-quote {
  font-size:0.76rem; opacity:0.75; border-inline-start:2.5px solid currentColor;
  padding-inline-start:8px; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* إصلاح توافق القوائم المنسدلة مع الوضع الإنجليزي LTR (كانت مثبتة left:0 بافتراض RTL فقط) */
html[dir="ltr"].page-index .user-dropdown,
html[dir="ltr"].page-index .notif-dropdown,
html[dir="ltr"].page-index .post-opts-menu,
html[dir="ltr"].page-index .lang-menu,
html[dir="ltr"].page-chat .peer-opts-menu,
html[dir="ltr"].page-chat .lang-menu,
html[dir="ltr"].page-group .lang-menu,
html[dir="ltr"].page-group .m-menu,
html[dir="ltr"].page-profile .lang-menu,
html[dir="ltr"].page-profile .more-menu,
html[dir="ltr"].page-shiziai .lang-menu {
  left: auto;
  right: 0;
}
/* زر الحفظ (bookmark) في المنشورات */
body.page-index .save-btn.saved, body.page-profile .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
body.page-save .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-save .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-save .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-save .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
body.page-index .save-btn.saved, body.page-save .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
body.page-post .reply-btn, body.page-index .reply-btn {background:none;border:none;color:var(--muted);font-family:'Cairo',sans-serif;font-weight:700;font-size:0.74rem;cursor:pointer;padding:0;margin-inline-start:8px;}
body.page-post .reply-btn:hover, body.page-index .reply-btn:hover {color:var(--primary);}
body.page-post .replies-list, body.page-index .replies-list {margin-inline-start:38px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
body.page-post .reply-input-row, body.page-index .reply-input-row {display:flex;gap:8px;margin-inline-start:38px;margin-top:6px;}
body.page-index .save-btn.saved, body.page-post .save-btn.saved, body.page-short .save-btn.saved {color:#f5a623;}
/* ============================================================
   تحديث الرسائل: مؤشر الكتابة + مؤشر القراءة + صفحة إعدادات المحادثة
   (نفس أسلوب مؤشر الكتابة المستخدم في Shizi AI، بقوالب غير شفافة/صلبة)
   ============================================================ */
body.page-chat .typing-row, body.page-group .typing-row {
  display:flex; align-items:flex-end; gap:8px; margin-bottom:8px;
}
body.page-chat .typing-bubble, body.page-group .typing-bubble {
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; border-bottom-right-radius:5px;
  padding:12px 15px; display:flex; gap:5px; align-items:center;
  max-width:fit-content;
}
body.page-chat .typing-dot, body.page-group .typing-dot {
  width:6px; height:6px; border-radius:50%; background:var(--primary);
  animation:shiziai-typingBounce 1.2s infinite ease-in-out;
}
body.page-chat .typing-dot:nth-child(2), body.page-group .typing-dot:nth-child(2) { animation-delay:0.15s; }
body.page-chat .typing-dot:nth-child(3), body.page-group .typing-dot:nth-child(3) { animation-delay:0.3s; }
/* مؤشر قراءة الرسائل (صورة صغيرة تحت آخر رسالة مقروءة) */
.seen-receipt {
  display:flex; gap:2px; justify-content:flex-end; margin-top:2px;
}
.seen-av {
  width:14px; height:14px; border-radius:50%; overflow:hidden;
  background:var(--border); display:flex; align-items:center; justify-content:center;
  font-size:0.55rem; font-weight:700; color:var(--muted); border:1px solid var(--card);
}
.seen-av img { width:100%; height:100%; object-fit:cover; }
/* صفحة/لوحة إعدادات المحادثة الخاصة - قوالب صلبة غير شفافة */
.cs-box { background:var(--modal-bg, var(--card)); opacity:1; }
.cs-head {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 0 18px; cursor:pointer;
}
.cs-av {
  width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:700; color:var(--muted);
}
.cs-av img { width:100%; height:100%; object-fit:cover; }
.cs-headname { font-weight:800; font-size:1rem; }
.cs-headuser { font-size:0.78rem; color:var(--muted); }
.cs-nick-row { display:flex; gap:8px; margin-bottom:16px; }
.cs-nick-row .m-input { flex:1; }
.cs-actions { display:flex; flex-direction:column; gap:2px; }
.cs-actions button, .cs-toggle-row {
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:none; text-align:right;
  padding:12px 6px; font-size:0.88rem; font-weight:600; color:var(--text);
  border-radius:10px; cursor:pointer; opacity:1;
}
.cs-actions button:hover, .cs-toggle-row:hover { background:rgba(128,128,128,0.08); }
.cs-actions button.danger { color:#ff3b30; }
.cs-actions button svg { flex-shrink:0; }
.cs-toggle-row { justify-content:space-between; cursor:default; }
.cs-toggle-row input[type="checkbox"] { width:38px; height:22px; accent-color:var(--primary); cursor:pointer; }
/* وسائط المحادثة */
.media-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  max-height:360px; overflow-y:auto; margin:8px 0;
}
.media-grid-item {
  aspect-ratio:1/1; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--border);
}
.media-grid-item img { width:100%; height:100%; object-fit:cover; }
/* ============================================================
   Hostaka Video — بطاقة الفيديو داخل الفيد (مثل يوتيوب)
   تُستخدم في صفحات: الرئيسية / الملف الشخصي / المحفوظات / المنشور
   ============================================================ */
.video-card {
  position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:#000; cursor:pointer; box-shadow:var(--shadow); display:block;
}
.video-card .video-thumb-video {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;pointer-events:none;background:#000;}
.video-card .video-play-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,0.5); color:#fff;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15); transition:all var(--transition-fast);
}
.video-card:hover .video-play-badge {transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,0.65);}
.video-card .video-tag {
  position:absolute; top:12px; inset-inline-start:12px; background:rgba(0,0,0,0.65); color:#fff;
  font-size:0.74rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-full);
  backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; gap:5px;
}
.video-card .video-tag svg {width:12px;height:12px;}
@keyframes video-spin {to {transform:rotate(360deg);}}
/* ============================================================
   PHASE 2 — Global Responsive & Touch-Target Safety Net
   Loaded last, so it can safely tighten up any page without
   needing to touch each page's individual rules.
   ============================================================ */

/* Never allow a stray element to force horizontal scrolling. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Any table on any page becomes horizontally scrollable
   instead of squeezing/breaking layout on small screens. */
table { max-width: 100%; }
.table-scroll, .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Any modal-like box never exceeds the viewport width on small screens
   (only kicks in when the viewport is narrower than the modal itself,
   so it never shrinks modals that are intentionally wider on desktop). */
@media (max-width: 480px) {
  [class*="modal-box"], [class*="modal-bd"] > div {
    max-width: calc(100vw - 32px);
  }
}
/* Touch target sizing: on coarse-pointer (touch) devices, guarantee
   at least a 44x44 hit area on the most common interactive controls
   across every page, without changing their visual size on desktop
   (uses min-width/min-height, which never shrinks an element — it
   only grows ones that were declared smaller). */
@media (pointer: coarse) {
  [class*="icon-btn"],
  [class*="theme-toggle"],
  [class*="nav-item"],
  [class*="sidebar-toggle"],
  [class*="back-btn"],
  [class*="btn-icon"],
  [class*="menu-btn"],
  a.btn, button.btn,
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
  }
  /* Keep dense table/action icon buttons usable without breaking
     tight admin/table layouts — apply padding instead of forcing size. */
  table [class*="btn"] {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* Compact modern toggle switches for settings rows (Show read receipts,
   auto-theme, etc). These checkboxes are intentionally small controls —
   the rules below use !important + higher specificity to win over the
   44px touch-target rule above, giving a proper switch look instead of
   a giant native checkbox. The row/label around each one is still
   comfortably tap-sized. */
.cs-toggle-row input[type="checkbox"],
.wp-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px !important; height: 22px !important;
  min-width: 38px !important; min-height: 22px !important;
  border-radius: 999px; background: rgba(128,128,128,0.28);
  position: relative; cursor: pointer; outline: none; flex-shrink: 0;
  transition: background 0.2s; vertical-align: middle;
}
.cs-toggle-row input[type="checkbox"]::before,
.wp-check input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.cs-toggle-row input[type="checkbox"]:checked,
.wp-check input[type="checkbox"]:checked { background: var(--primary); }
.cs-toggle-row input[type="checkbox"]:checked::before,
.wp-check input[type="checkbox"]:checked::before { transform: translateX(16px); }
html[dir="rtl"] .cs-toggle-row input[type="checkbox"]:checked::before,
html[dir="rtl"] .wp-check input[type="checkbox"]:checked::before { transform: translateX(-16px); }
/* Small member-selection checkboxes (group member picker lists) should
   also stay compact rather than being blown up to 44px. */
.member-check input[type="checkbox"] {
  width: 16px !important; height: 16px !important;
  min-width: 16px !important; min-height: 16px !important;
}
/* Respect safe-area insets on notched phones for fixed bottom/top bars. */
@supports (padding: max(0px)) {
  .topbar, [class*="topbar"] {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  [class*="input-area"], [class*="bottom-nav"] {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 380px) {
  /* Extra-small phones: prevent the main content container from touching edges
     on the simple pages (manager/save/post/video/support) that share `.wrap`. */
  .wrap { padding-left: 12px; padding-right: 12px; }
}