/* Forge | rtl.css
   Applied when the app runs in Arabic, Hebrew or Persian.
   The dir="rtl" attribute on <html> does 90% of the work.
   These rules fix the small things the browser does not flip by itself. */

/* ---- Flipped paddings/margins where they matter ---- */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* List rows: icon on the right, chevron on the left */
html[dir="rtl"] .list-row { flex-direction: row-reverse; }
html[dir="rtl"] .list-row .row-body { text-align: right; }

html[dir="rtl"] .settings-row { flex-direction: row-reverse; }
html[dir="rtl"] .settings-row .sr-body { text-align: right; }
html[dir="rtl"] .settings-row .sr-chev svg { transform: scaleX(-1); }

html[dir="rtl"] .admin-row { flex-direction: row-reverse; }
html[dir="rtl"] .admin-row .ar-body { text-align: right; }

/* Drawer slides in from the right */
html[dir="rtl"] .drawer {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
}
html[dir="rtl"] .drawer.open { transform: translateX(0); }
html[dir="rtl"] .drawer-overlay { left: 0; right: 0; }

html[dir="rtl"] .admin-side {
  border-right: none;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
}
html[dir="rtl"] .admin-side.open { transform: translateX(0); }

/* Back arrow flips */
html[dir="rtl"] .back-btn svg,
html[dir="rtl"] .icon-btn svg[viewBox="0 0 24 24"]:has(polyline) {
  transform: scaleX(-1);
}

/* Bottom nav: fine as is, order reads right-to-left automatically */
html[dir="rtl"] .app-nav { direction: rtl; }

/* ---------- Chat bubbles ---------- */
html[dir="rtl"] .msg { flex-direction: row-reverse; }
html[dir="rtl"] .msg.mine { flex-direction: row; }
html[dir="rtl"] .msg:not(.mine) .bubble {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 16px;
}
html[dir="rtl"] .msg.mine .bubble {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 16px;
}
html[dir="rtl"] .msg .meta { flex-direction: row-reverse; }
html[dir="rtl"] .msg .bubble .reply-preview {
  border-left: none;
  border-right: 3px solid rgba(255,255,255,0.45);
}
html[dir="rtl"] .msg:not(.mine) .bubble .reply-preview {
  border-right-color: var(--primary);
}

/* Composer */
html[dir="rtl"] .composer-row { flex-direction: row-reverse; }
html[dir="rtl"] .composer-row textarea { text-align: right; }
html[dir="rtl"] .reply-bar {
  border-left: none;
  border-right: 3px solid var(--primary);
  flex-direction: row-reverse;
}
html[dir="rtl"] .reply-bar .info { text-align: right; }

/* ---------- Chat header ---------- */
html[dir="rtl"] .chat-header { flex-direction: row-reverse; }
html[dir="rtl"] .chat-header .who { text-align: right; }
html[dir="rtl"] .chat-header .icons { flex-direction: row-reverse; }
html[dir="rtl"] .chat-header .back svg { transform: scaleX(-1); }
html[dir="rtl"] .chat-header .who .name { justify-content: flex-end; }

/* ---------- Feed / post cards ---------- */
html[dir="rtl"] .post-head { flex-direction: row-reverse; }
html[dir="rtl"] .post-head .ph-info { text-align: right; }
html[dir="rtl"] .post-actions { flex-direction: row-reverse; }
html[dir="rtl"] .post-body { text-align: right; }
html[dir="rtl"] .post-caption { text-align: right; }
html[dir="rtl"] .post-tags { flex-direction: row-reverse; }
html[dir="rtl"] .post-comments-link { text-align: right; }
html[dir="rtl"] .comment-row { flex-direction: row-reverse; }
html[dir="rtl"] .comment-row .cr-body { text-align: right; }
html[dir="rtl"] .comment-composer { flex-direction: row-reverse; }
html[dir="rtl"] .comment-composer textarea { text-align: right; }

/* ---------- Groups / cards ---------- */
html[dir="rtl"] .group-card { flex-direction: row-reverse; }
html[dir="rtl"] .group-card .gc-body { text-align: right; }
html[dir="rtl"] .group-card .gc-meta { flex-direction: row-reverse; }
html[dir="rtl"] .invite-box { flex-direction: row-reverse; }
html[dir="rtl"] .invite-box .code { text-align: left; direction: ltr; }
html[dir="rtl"] .member-row { flex-direction: row-reverse; }
html[dir="rtl"] .member-row .mr-body { text-align: right; }

/* ---------- Auth screens ---------- */
html[dir="rtl"] .auth-top { flex-direction: row-reverse; }
html[dir="rtl"] .auth-footer { text-align: center; }
html[dir="rtl"] .code-group { flex-direction: row-reverse; }
html[dir="rtl"] .check-row { flex-direction: row-reverse; }
html[dir="rtl"] .check-row input { margin-right: 0; margin-left: 10px; }

/* ---------- Notifications ---------- */
html[dir="rtl"] .notif-row { flex-direction: row-reverse; }
html[dir="rtl"] .notif-row .nr-body { text-align: right; }
html[dir="rtl"] .notif-row.unread::before { left: auto; right: 6px; }

/* ---------- Numbers, timestamps: force LTR inside RTL text ---------- */
html[dir="rtl"] .meta,
html[dir="rtl"] .row-time,
html[dir="rtl"] .nr-time,
html[dir="rtl"] .post-time,
html[dir="rtl"] .th-time,
html[dir="rtl"] .mr-handle,
html[dir="rtl"] .du-handle,
html[dir="rtl"] .row-sub {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}
html[dir="rtl"] .row-sub { text-align: right; }