/* ==========================================================
   SYNAPSE UI G - RTL FINAL LAYER
   Arabic / Hebrew / Persian
   ========================================================== */

html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] [contenteditable="true"] {
    text-align: start;
}

html[dir="rtl"] .msg-text,
html[dir="rtl"] .message-text,
html[dir="rtl"] .msg-content,
html[dir="rtl"] .message-content,
html[dir="rtl"] .caption,
html[dir="rtl"] .thread-message-text {
    text-align: start;
    unicode-bidi: plaintext;
}

/* Main two-column layout follows writing direction. */
html[dir="rtl"] #app,
html[dir="rtl"] .app {
    direction: rtl;
}

/* Header has hard-coded physical offsets in the base UI. */
html[dir="rtl"] #mainSidebarHeader {
    padding-left: 0 !important;
    padding-right: 15px !important;
}

html[dir="rtl"] #mainSidebarHeader .dynamic-title-search {
    left: 100px !important;
    right: 60px !important;
}

html[dir="rtl"] #mainSidebarHeader .sidebar-actions {
    margin-left: -8px !important;
    margin-right: auto !important;
}

/* Generic rows, menus and profile/settings content. */
html[dir="rtl"] .contact-item,
html[dir="rtl"] .contact-info,
html[dir="rtl"] .action-item,
html[dir="rtl"] .dropdown-option,
html[dir="rtl"] .settings-row,
html[dir="rtl"] .profile-row,
html[dir="rtl"] .profile-info,
html[dir="rtl"] .member-row,
html[dir="rtl"] .search-result-item {
    text-align: start;
}

/* Mirror message ownership placement while keeping message text bidi-safe. */
html[dir="rtl"] .msg.out {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .msg.in {
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[dir="rtl"] .supp-msg-out {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .supp-msg-in {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Reply/forward controls that used hard-coded physical sides. */
html[dir="rtl"] .supp-msg-in .supp-msg-react-btn,
html[dir="rtl"] .supp-msg-in .supp-msg-forward-btn {
    right: auto !important;
    left: -46px !important;
}

html[dir="rtl"] .supp-msg-out .supp-msg-react-btn,
html[dir="rtl"] .supp-msg-out .supp-msg-forward-btn {
    left: auto !important;
    right: -46px !important;
}

/* Back/navigation arrows must point toward the mirrored edge. */
html[dir="rtl"] #backToContactsBtn svg,
html[dir="rtl"] #closeProfileSidebarBtn svg,
html[dir="rtl"] .back-btn svg,
html[dir="rtl"] .btn-back svg,
html[dir="rtl"] [data-rtl-mirror="true"] svg {
    transform: scaleX(-1);
}

/* Inputs with icons: preserve usable logical padding. */
html[dir="rtl"] input,
html[dir="rtl"] textarea {
    direction: rtl;
}

html[dir="rtl"] input[dir="auto"],
html[dir="rtl"] textarea[dir="auto"],
html[dir="rtl"] [contenteditable="true"][dir="auto"] {
    direction: auto;
}

/* Numbers, timestamps, URLs and code remain readable LTR inside RTL UI. */
html[dir="rtl"] time,
html[dir="rtl"] .msg-time,
html[dir="rtl"] .message-time,
html[dir="rtl"] .phone-number,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .url,
html[dir="rtl"] [data-ltr="true"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Search/header controls: text begins at the logical start. */
html[dir="rtl"] #globalSearchInput,
html[dir="rtl"] #memberSearchInput,
html[dir="rtl"] #langSearchInput {
    text-align: start;
}

/* Mobile swipe-back shadow belongs to the opposite edge in RTL. */
@media (max-width: 768px) {
    html[dir="rtl"] #app.chat-edge-swipe .chat-area {
        box-shadow: 10px 0 28px rgba(0, 0, 0, 0.14) !important;
    }
}


/* ==========================================================
   SYNAPSE RTL-M2 MAIN LAYOUT
   Scope: main messenger sidebar / header / lists only.
   No message-bubble, composer, profile, call or server logic here.
   ========================================================== */

/* Sidebar moves to the writing-start side automatically because #app is RTL.
   Its separator/resizer must therefore move to the opposite physical edge. */
html[dir="rtl"] .sidebar {
    border-right: 0 !important;
    border-left: 1px solid var(--border-main) !important;
}

html[dir="rtl"] .sidebar-resizer {
    right: auto !important;
    left: -3px !important;
}

/* The current base header already uses a flex center section.
   Remove obsolete physical offsets from the older RTL layer. */
html[dir="rtl"] #mainSidebarHeader {
    padding: 10px 16px !important;
}

html[dir="rtl"] #mainSidebarHeader .dynamic-title-search {
    left: auto !important;
    right: auto !important;
}

html[dir="rtl"] #mainSidebarHeader .sidebar-actions {
    margin-left: -8px !important;
    margin-right: auto !important;
}

/* Header dropdowns open inward into the sidebar instead of over the chat. */
html[dir="rtl"] #mainSidebarHeader .create-dropdown,
html[dir="rtl"] #chatSelectionHeader .create-dropdown {
    right: auto !important;
    left: 0 !important;
    text-align: right;
}

/* Existing inline SVG margins are physical LTR margins. */
html[dir="rtl"] #mainSidebarHeader .dropdown-item > svg,
html[dir="rtl"] #chatSelectionHeader .dropdown-item > svg {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* Contact rows inherit RTL order; make text and secondary padding logical. */
html[dir="rtl"] .sidebar .contact-content,
html[dir="rtl"] .sidebar .contact-name,
html[dir="rtl"] .sidebar .contact-snippet {
    text-align: start;
}

html[dir="rtl"] .sidebar .contact-snippet {
    padding-right: 0 !important;
    padding-left: 10px !important;
}

/* Legacy search-box icon spacing, when this component is shown. */
html[dir="rtl"] .sidebar .search-box svg {
    margin-right: 0 !important;
    margin-left: 12px !important;
}


/* ==========================================================
   SYNAPSE RTL-M3 CHAT HEADER + SWIPE
   Scope: active chat header, chat search header and mobile back gesture.
   ========================================================== */

/* The real active-chat back button is #btnBack.nav-back-btn. */
html[dir="rtl"] #btnBack svg {
    transform: scaleX(-1);
}

/* Header text follows the writing direction without changing IDs/emails elsewhere. */
html[dir="rtl"] .chat-header-left,
html[dir="rtl"] .chat-header-left .active-info,
html[dir="rtl"] #activeName,
html[dir="rtl"] #activeStatus {
    text-align: start;
}

/* Mirror the online dot on the active avatar only. */
html[dir="rtl"] .chat-header-left .status-dot {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .chat-header-left .avatar-wrapper.has-story .status-dot {
    right: auto !important;
    left: -2px !important;
}

/* Chat-search close arrow is currently a physical ← text glyph with LTR margin. */
html[dir="rtl"] #closeSearchBtn {
    margin-right: 0 !important;
    margin-left: 10px !important;
    transform: scaleX(-1);
}

/* Base CSS already changes the swipe shadow in rtl.css.
   Keep the chat layer anchored to the full viewport while JS moves it left. */
@media (max-width: 768px) {
    html[dir="rtl"] #app.chat-edge-swipe .chat-area {
        transform-origin: right center;
    }
}


/* ==========================================================
   SYNAPSE RTL-M4A MESSAGES + BIDI + REPLY
   Scope: message bubbles/text/meta/reply/forward/reactions.
   Composer, server, crypto and transport are intentionally untouched.
   ========================================================== */

/* Message text gets dir="auto" from rtl.js. These rules make the real
   renderer classes use content direction instead of forcing Arabic on Latin text. */
html[dir="rtl"] .msg-text-content,
html[dir="rtl"] .preview-text-content,
html[dir="rtl"] .media-caption,
html[dir="rtl"] .quoted-msg,
html[dir="rtl"] .msg-sender-name,
html[dir="rtl"] .forwarded-header span,
html[dir="rtl"] .link-preview-title,
html[dir="rtl"] .link-preview-desc,
html[dir="rtl"] .reaction-tooltip,
html[dir="rtl"] .reaction-user-name {
    text-align: start;
    unicode-bidi: plaintext;
}

/* The two ownership sides are already mirrored by the RTL flex layout.
   Mirror the Telegram-style square corner as well. */
html[dir="rtl"] .msg.in {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
}

html[dir="rtl"] .msg.out {
    border-top-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
}

/* Timestamp/read state moves to the logical end of RTL text.
   Keep digits/checkmarks in stable LTR order. */
html[dir="rtl"] .msg .msg-meta {
    right: auto !important;
    left: 8px !important;
    padding-right: 0 !important;
    padding-left: 4px !important;
    direction: ltr !important;
    unicode-bidi: isolate;
}

html[dir="rtl"] .msg.msg-link-only .msg-meta,
html[dir="rtl"] .msg:has(.msg-reactions-wrapper) .msg-meta {
    right: auto !important;
    left: 12px !important;
}

html[dir="rtl"] .msg:not(:has(.msg-text-content)):not(:has(.media-caption)):has(.gallery-trigger) .msg-meta,
html[dir="rtl"] .msg:not(:has(.msg-text-content)):not(:has(.media-caption)):has(.msg-video) .msg-meta,
html[dir="rtl"] .msg:not(:has(.msg-text-content)):not(:has(.media-caption)):has(.media-grid) .msg-meta {
    right: auto !important;
    left: 8px !important;
}

/* Reply quote accent belongs to the logical start side. */
html[dir="rtl"] .quoted-msg {
    border-left: 0 !important;
    border-right: 4px solid var(--accent-main) !important;
}

/* Real forwarded-message header uses an inline LTR transform; mirror it back
   so the semantic forward arrow follows RTL navigation. */
html[dir="rtl"] .forwarded-header svg {
    transform: scaleX(1) !important;
}

html[dir="rtl"] .forwarded-header {
    text-align: start;
}

/* Link domains/URLs/timestamps/counters stay readable as LTR isolates. */
html[dir="rtl"] .link-preview-domain,
html[dir="rtl"] .link-origin-url,
html[dir="rtl"] .msg-text-content a[href],
html[dir="rtl"] .preview-text-content a[href],
html[dir="rtl"] .reaction-count {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Reaction strip follows the mirrored ownership edge. */
html[dir="rtl"] .msg.in .msg-reactions-wrapper {
    left: auto !important;
    right: 0 !important;
    flex-direction: row !important;
}

html[dir="rtl"] .msg.out .msg-reactions-wrapper {
    right: auto !important;
    left: 0 !important;
    flex-direction: row-reverse !important;
}

/* Existing swipe-to-reply dynamic style is appended after rtl.css,
   therefore !important is intentional here. */
html[dir="rtl"] .swipe-reply-icon {
    left: auto !important;
    right: -40px !important;
}

html[dir="rtl"] .swipe-reply-icon svg {
    transform: scaleX(-1);
}

/* Deleted-message meta is static; mirror its auto margin separately. */
html[dir="rtl"] .msg.deleted .msg-meta {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* ==========================================================
   SYNAPSE RTL-M4B COMPOSER
   Scope: main message composer only.
   No send/crypto/WebSocket/server logic is changed.
   ========================================================== */

/* The base .input-area is a flex row. Under document RTL its source order
   automatically becomes the mirrored visual order:
   emoji / attach / input / camera / action from RIGHT to LEFT. */
html[dir="rtl"] .input-area {
    direction: rtl;
}

/* msgInput already receives dir="auto" from rtl.js.
   "start" therefore follows the actual typed text, not just UI language. */
html[dir="rtl"] #msgInput {
    text-align: start;
}

/* Reply/edit/record accents belong to the logical start edge. */
html[dir="rtl"] #replyBanner {
    border-left: 0 !important;
    border-right: 4px solid var(--accent-main) !important;
}

html[dir="rtl"] #editBanner {
    border-left: 0 !important;
    border-right: 4px solid #0072ff !important;
}

html[dir="rtl"] #recordVisualizer {
    border-left: 0 !important;
    border-right: 4px solid var(--danger-main) !important;
}

html[dir="rtl"] #replyContent,
html[dir="rtl"] #editContent,
html[dir="rtl"] #replyText,
html[dir="rtl"] #editText,
html[dir="rtl"] #recordVisualizer {
    text-align: start;
}

html[dir="rtl"] #replyText[dir="auto"],
html[dir="rtl"] #editText[dir="auto"] {
    unicode-bidi: plaintext;
}

/* Attachment popup opens inward from the mirrored attachment button. */
html[dir="rtl"] .attach-menu {
    left: auto !important;
    right: 0 !important;
    transform-origin: bottom right !important;
}

html[dir="rtl"] .attach-item {
    text-align: start !important;
}

/* The emoji close button and its reserved tab padding swap sides. */
html[dir="rtl"] .emoji-close-btn {
    right: auto !important;
    left: 12px !important;
}

html[dir="rtl"] .emoji-tabs {
    padding: 8px 10px 7px 48px !important;
}

/* Composer link preview: move accent/image/close spacing to RTL sides. */
html[dir="rtl"] .input-link-preview .link-preview-wrapper {
    border-left: 0 !important;
    border-right: 4px solid var(--accent-main) !important;
}

html[dir="rtl"] .input-link-preview .link-preview-image {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

html[dir="rtl"] .input-link-preview .close-preview-btn,
html[dir="rtl"] #closeLinkPreview {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* Only the semantic SEND icon mirrors. Camera/mic/emoji/media do not. */
html[dir="rtl"] #btnAction.send-mode > svg {
    transform: scaleX(-1);
}


/* ==========================================================
   SYNAPSE RTL-M5A PROFILES + SETTINGS
   Scope:
   - My Profile / Account / Notifications / Privacy / Theme
   - contact/group profile right panel
   - profile identifiers and toggles
   No server, auth, privacy policy or account logic is changed.
   ========================================================== */

/* ----------------------------------------------------------
   1. LEFT SIDEBAR INTERNAL PANELS
   Sidebar itself is on the RIGHT in RTL, so its internal drawers
   must enter/leave through the right edge.
   ---------------------------------------------------------- */
html[dir="rtl"] .left-panel {
    transform: translateX(100%) !important;
}

html[dir="rtl"] .left-panel.open {
    transform: translateX(0) !important;
}

/* Sub-panels drill deeper toward the logical forward side. */
html[dir="rtl"] .sub-panel {
    left: auto !important;
    right: 0 !important;
    transform: translateX(-100%) !important;
}

html[dir="rtl"] .sub-panel.open {
    transform: translateX(0) !important;
}

/* Real profile/settings navigation arrows. */
html[dir="rtl"] #closeMyProfileBtn svg,
html[dir="rtl"] #closeProfileBtn svg,
html[dir="rtl"] #profileSidebarBackBtn svg,
html[dir="rtl"] .back-subpanel-btn {
    transform: scaleX(-1);
}

html[dir="rtl"] #profileSidebarBackBtn {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* ----------------------------------------------------------
   2. SETTINGS / ACCOUNT ROWS
   ---------------------------------------------------------- */
html[dir="rtl"] .left-panel-header,
html[dir="rtl"] .settings-item,
html[dir="rtl"] .setting-row,
html[dir="rtl"] .setting-row-info,
html[dir="rtl"] .profile-input-group,
html[dir="rtl"] .profile-hint,
html[dir="rtl"] .profile-section-title,
html[dir="rtl"] .group-name-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .notif-permission-row {
    text-align: start;
}

/* Base profile editor reserves space on the physical right for edit/save.
   In RTL that reserved space belongs on the left. */
html[dir="rtl"] .inline-edit-wrapper textarea,
html[dir="rtl"] .inline-edit-wrapper input {
    padding-right: 0 !important;
    padding-left: 30px !important;
}

html[dir="rtl"] .quick-status-text {
    padding-right: 0 !important;
    padding-left: 25px !important;
}

html[dir="rtl"] .inline-edit-wrapper .icon-btn {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* @username must remain visually @username, not username@. */
html[dir="rtl"] #panelAccount .inline-edit-wrapper:has(#myUsernameInput) {
    direction: ltr;
}

html[dir="rtl"] #myUsernameInput,
html[dir="rtl"] #myPhoneInput,
html[dir="rtl"] #myEmailInput,
html[dir="rtl"] #mySidebarUsername,
html[dir="rtl"] #profileUsername,
html[dir="rtl"] #profilePhone,
html[dir="rtl"] #profileEmail {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left !important;
}

/* Email/tel inputs get dir=auto from the global engine; CSS intentionally
   overrides them because these identifiers are structurally LTR. */
html[dir="rtl"] #myPhoneInput,
html[dir="rtl"] #myEmailInput {
    unicode-bidi: isolate;
}

/* Mirror iOS-style switches: OFF starts on the right, ON travels left. */
html[dir="rtl"] .slider:before {
    left: auto !important;
    right: 2px !important;
}

html[dir="rtl"] .switch input:checked + .slider:before {
    transform: translateX(-20px) !important;
}

/* Dropdowns open toward the inside of the RTL settings panel. */
html[dir="rtl"] .custom-dropdown .dropdown-options {
    right: auto !important;
    left: 0 !important;
    text-align: start;
}

html[dir="rtl"] .dropdown-option,
html[dir="rtl"] .dropdown-group-title {
    text-align: start;
}

/* ----------------------------------------------------------
   3. CONTACT/GROUP PROFILE PANEL
   In LTR these are physical right panels.
   RTL mirrors them to the physical LEFT on overlay layouts.
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
    html[dir="rtl"] .right-panel {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
        box-shadow: 4px 0 15px rgba(0,0,0,0.05) !important;
        border-left: 0 !important;
        border-right: 1px solid var(--border-main) !important;
    }

    html[dir="rtl"] .right-panel.open {
        transform: translateX(0) !important;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .right-panel {
        border-right: 0 !important;
    }
}

/* On desktop right-panels are flex items. RTL flex flow already places them
   on the mirrored side; only the separator needs mirroring. */
@media (min-width: 1024px) {
    html[dir="rtl"] .right-panel.open {
        border-left: 0 !important;
        border-right: 1px solid var(--border-main) !important;
    }
}

html[dir="rtl"] .profile-header,
html[dir="rtl"] .profile-content,
html[dir="rtl"] #userInfoSection,
html[dir="rtl"] #groupMembersSection {
    text-align: start;
}

html[dir="rtl"] .group-name-label,
html[dir="rtl"] .group-name-display {
    text-align: start !important;
}

html[dir="rtl"] .inline-edit-wrapper.center-edit {
    justify-content: flex-start !important;
}

/* Right-profile bio has inline physical padding/buttons. */
html[dir="rtl"] #profileBio,
html[dir="rtl"] #profileBioInput {
    padding-right: 0 !important;
    padding-left: 35px !important;
}

html[dir="rtl"] #editProfileBioBtn,
html[dir="rtl"] #saveProfileBioBtn {
    right: auto !important;
    left: 0 !important;
}

/* Profile media search icon has inline margin-right. */
html[dir="rtl"] .profile-search > svg {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[dir="rtl"] .profile-media-list {
    padding-right: 0 !important;
    padding-left: 5px !important;
}

/* Group profile counters/actions contain old physical margins/floats. */
html[dir="rtl"] #groupMemberCount {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

html[dir="rtl"] #addMemberBtn {
    float: left !important;
}

html[dir="rtl"] #btnReactionSettings {
    justify-content: flex-start !important;
}

html[dir="rtl"] #btnReactionSettings > span[style*="text-align: left"] {
    text-align: start !important;
}

html[dir="rtl"] #btnReactionSettings > svg:last-child {
    transform: scaleX(-1);
}

/* "View all >" is navigation, so its chevron text follows RTL direction. */
html[dir="rtl"] #viewAllMediaBtn {
    direction: rtl;
}


/* ==========================================================
   SYNAPSE RTL-M5B MODALS
   Scope:
   - alerts / confirm / delete / password
   - forward / invite / join
   - group member selector
   - reaction settings / reaction users
   - message viewers bottom sheet
   - dynamically created premiumConfirm / account delete modal

   No modal business logic, auth, WebSocket, server or DB code changes.
   ========================================================== */

/* ----------------------------------------------------------
   1. TEXT-HEAVY ALERTS THAT HAVE INLINE text-align:left
   ---------------------------------------------------------- */
html[dir="rtl"] #discardModal .alert-content,
html[dir="rtl"] #deleteModal .alert-content,
html[dir="rtl"] #reactionSettingsModal .alert-content,
html[dir="rtl"] #changePasswordModal .alert-content,
html[dir="rtl"] #forwardModal .alert-content,
html[dir="rtl"] #groupCreateModal .alert-content,
html[dir="rtl"] #reactionsModal .alert-content {
    text-align: start !important;
}

html[dir="rtl"] #discardModal .alert-title,
html[dir="rtl"] #deleteModal .alert-title,
html[dir="rtl"] #reactionSettingsModal .alert-title,
html[dir="rtl"] #changePasswordModal .alert-title,
html[dir="rtl"] #forwardModal .alert-title,
html[dir="rtl"] #groupCreateModal .alert-title {
    text-align: start !important;
}

/* ----------------------------------------------------------
   2. CHANGE PASSWORD / DYNAMIC DELETE-ACCOUNT PASSWORD EYES
   ---------------------------------------------------------- */
html[dir="rtl"] #changePasswordModal .password-wrapper input {
    padding-right: 15px !important;
    padding-left: 44px !important;
}

html[dir="rtl"] #changePasswordModal .password-toggle-btn {
    right: auto !important;
    left: 10px !important;
}

html[dir="rtl"] #clientDeleteAccountModal #delClientModalPassword {
    padding-right: 14px !important;
    padding-left: 44px !important;
}

html[dir="rtl"] #clientDeleteAccountModal #delClientTogglePwd {
    right: auto !important;
    left: 10px !important;
}

/* ----------------------------------------------------------
   3. FORWARD MODAL
   ---------------------------------------------------------- */
html[dir="rtl"] #closeForwardModalBtn {
    margin-left: 0 !important;
    margin-right: -5px !important;
}

html[dir="rtl"] #forwardModal .forward-search-wrapper > svg {
    left: auto !important;
    right: 14px !important;
}

html[dir="rtl"] #forwardSearchInput {
    padding: 8px 36px 8px 14px !important;
    text-align: start;
}

html[dir="rtl"] .forward-category-title,
html[dir="rtl"] .forward-name,
html[dir="rtl"] #forwardTargetName,
html[dir="rtl"] #forwardComment {
    text-align: start !important;
}

html[dir="rtl"] #forwardSharedPreview {
    border-left: 0 !important;
    border-right: 3px solid var(--accent-main) !important;
    text-align: start !important;
}

html[dir="rtl"] #confirmForwardBtn > svg {
    margin-left: 0 !important;
    margin-right: 2px !important;
    transform: scaleX(-1);
}

/* ----------------------------------------------------------
   4. INVITE / JOIN PREVIEW
   Identifiers stay LTR, human-readable names stay auto.
   ---------------------------------------------------------- */
html[dir="rtl"] #inviteLinkInput {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: center !important;
}

html[dir="rtl"] #joinPreviewName {
    unicode-bidi: plaintext;
}

/* Decorative circles in the join preview mirror with the card. */
html[dir="rtl"] #joinPreviewModal .alert-content > div:first-child > div:first-child {
    right: auto !important;
    left: -15px !important;
}

html[dir="rtl"] #joinPreviewModal .alert-content > div:first-child > div:nth-child(2) {
    left: auto !important;
    right: 15px !important;
}

/* ----------------------------------------------------------
   5. GROUP CREATE / MEMBER SELECTOR
   ---------------------------------------------------------- */
html[dir="rtl"] #groupCreateModal .search-box {
    direction: rtl;
}

html[dir="rtl"] #groupCreateModal .search-box > svg {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[dir="rtl"] #newGroupName,
html[dir="rtl"] #memberSearchInput {
    text-align: start;
}

html[dir="rtl"] #memberSelectionList {
    margin-right: 0 !important;
    padding-right: 0 !important;
    margin-left: -5px !important;
    padding-left: 5px !important;
}

html[dir="rtl"] #memberSelectionList .member-item,
html[dir="rtl"] #memberSelectionList .member-item > div:first-child {
    direction: rtl;
}

html[dir="rtl"] #memberSelectionList .member-item > div:first-child > div:last-child {
    text-align: start;
}

html[dir="rtl"] #memberSelectionList .member-item > div:first-child > div:last-child > span:last-child {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* ----------------------------------------------------------
   6. REACTION SETTINGS + REACTION USERS
   ---------------------------------------------------------- */
html[dir="rtl"] #reactionSettingsModal #reactionQuickActions {
    direction: rtl;
}

html[dir="rtl"] #reactionsModalTabs {
    direction: rtl;
}

html[dir="rtl"] #reactionsModalList .reaction-user-row {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] #reactionsModal .alert-content > div:last-child {
    text-align: left !important;
}

/* Emoji glyphs are not mirrored. */
html[dir="rtl"] .reaction-user-emoji {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ----------------------------------------------------------
   7. MESSAGE VIEWERS BOTTOM SHEET
   ---------------------------------------------------------- */
html[dir="rtl"] #closeMsgViewersBtn {
    right: auto !important;
    left: 15px !important;
}

html[dir="rtl"] #msgViewersList > div[data-live-user-id] {
    direction: rtl;
}

html[dir="rtl"] #msgViewersList > div[data-live-user-id] > div:nth-child(2) {
    text-align: start;
}

html[dir="rtl"] #msgViewersList > div[data-live-user-id] > div:last-child {
    align-items: flex-start !important;
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] #msgViewersList > div[data-live-user-id] > div:last-child svg {
    margin-right: 0 !important;
    margin-left: 2px !important;
}

/* ----------------------------------------------------------
   8. DYNAMIC UNIVERSAL CONFIRM / ACCOUNT DELETE
   These modals are injected later by client.js; ID-based CSS applies
   automatically without changing their creation/business logic.
   ---------------------------------------------------------- */
html[dir="rtl"] #premiumConfirmModal,
html[dir="rtl"] #clientDeleteAccountModal {
    direction: rtl;
}

html[dir="rtl"] #premiumConfirmModal > div,
html[dir="rtl"] #clientDeleteAccountModal .modal-body {
    direction: rtl;
}

/* Their body copy is intentionally centered; only controls follow RTL. */
html[dir="rtl"] #premiumConfirmModal button,
html[dir="rtl"] #clientDeleteAccountModal button {
    direction: rtl;
}

/* ----------------------------------------------------------
   9. MOBILE SCROLLBAR COMPENSATION
   Base style uses physical margin-right/padding-right.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    html[dir="rtl"] #memberSelectionList,
    html[dir="rtl"] #forwardChatsContainer,
    html[dir="rtl"] #reactionsModalList {
        margin-right: 0 !important;
        padding-right: 0 !important;
        margin-left: -5px !important;
        padding-left: 5px !important;
    }
}


/* ==========================================================
   SYNAPSE RTL-M6A GROUPS + CHANNELS + THREADS
   Scope:
   - group/channel profile controls and member rows
   - channel comments/discussion entry points
   - thread panel/header/original post/messages/composer
   - logical mobile swipe is implemented in client.js bindSwipe()

   Server/group permissions/message transport are untouched.
   ========================================================== */

/* ----------------------------------------------------------
   1. GROUP / CHANNEL PROFILE
   ---------------------------------------------------------- */
html[dir="rtl"] #groupMembersSection .section-title,
html[dir="rtl"] #groupActionsContainer,
html[dir="rtl"] #groupActionsContainer .settings-block,
html[dir="rtl"] #sidebarPrivacyTitle,
html[dir="rtl"] #sidebarPrivacyDesc {
    text-align: start !important;
}

html[dir="rtl"] #groupMembersList [data-live-user-id] {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] #groupMembersList [data-live-user-id] > .avatar {
    margin-right: 5px !important;
    margin-left: 12px !important;
}

/* generateAvatarHtml may wrap the avatar before the content. */
html[dir="rtl"] #groupMembersList [data-live-user-id] > :first-child.avatar,
html[dir="rtl"] #groupMembersList [data-live-user-id] > :first-child .avatar {
    margin-right: 5px !important;
    margin-left: 12px !important;
}

html[dir="rtl"] #groupMembersList [data-live-user-id] > div:nth-child(2) {
    text-align: start;
}

/* Owner/admin badge was emitted with physical margin-left. */
html[dir="rtl"] #groupMembersList [data-live-user-id] > div:nth-child(2) > div:first-child > span {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Controls naturally move to the opposite edge under RTL. */
html[dir="rtl"] #groupMembersList [data-live-user-id] > div:last-child:not(:nth-child(2)) {
    direction: rtl;
}

/* Dynamic settings rows are flex rows; make their text side explicit. */
html[dir="rtl"] #groupActionsContainer .settings-block > div > div:first-child {
    text-align: start !important;
}

/* Group/channel action icons stay pictorial; only row flow mirrors. */
html[dir="rtl"] #groupActionsContainer .group-action-btn {
    direction: rtl;
    text-align: start;
}

/* ----------------------------------------------------------
   2. CHANNEL COMMENT ENTRY POINT
   ---------------------------------------------------------- */
html[dir="rtl"] .msg-comment-wrapper {
    direction: rtl;
}

html[dir="rtl"] .msg-comment-wrapper > svg:last-child {
    transform: scaleX(-1);
}

/* Read-only/join banners are centered by design; preserve text bidi. */
html[dir="rtl"] #channelReadOnlyBanner,
html[dir="rtl"] #channelJoinBannerBtn,
html[dir="rtl"] #threadDisabledBanner {
    unicode-bidi: plaintext;
}

/* Any discussion cards generated by channel UI follow logical text start. */
html[dir="rtl"] .channel-threads-container,
html[dir="rtl"] .discussion-item-card {
    direction: rtl;
    text-align: start;
}

/* ----------------------------------------------------------
   3. THREAD PANEL HEADER
   ---------------------------------------------------------- */
html[dir="rtl"] #closeThreadBtn svg {
    transform: scaleX(-1);
}

html[dir="rtl"] #threadPanel > .left-panel-header > div {
    margin-left: 0 !important;
    margin-right: 10px !important;
    text-align: start;
}

html[dir="rtl"] #threadChannelName {
    text-align: start;
    unicode-bidi: plaintext;
}

/* ----------------------------------------------------------
   4. ORIGINAL POST + COMMENT LIST
   ---------------------------------------------------------- */
html[dir="rtl"] #threadOriginalPost,
html[dir="rtl"] #threadMessages {
    direction: rtl;
}

html[dir="rtl"] #threadOriginalPost .msg-text-content,
html[dir="rtl"] #threadOriginalPost .media-caption,
html[dir="rtl"] .thread-mini-post .msg-text-content,
html[dir="rtl"] .thread-mini-post .media-caption,
html[dir="rtl"] .thread-mini-post .text-with-translate {
    text-align: start !important;
}

html[dir="rtl"] .thread-mini-post {
    direction: rtl;
}

/* ----------------------------------------------------------
   5. THREAD COMPOSER / REPLY
   Main M4B composer rules already apply via .input-area/.attach-menu.
   These are thread-specific IDs that were not covered there.
   ---------------------------------------------------------- */
html[dir="rtl"] #threadReplyBanner {
    border-left: 0 !important;
    border-right: 4px solid var(--accent-main) !important;
}

html[dir="rtl"] #threadReplyContent,
html[dir="rtl"] #threadReplyText,
html[dir="rtl"] #threadInput {
    text-align: start;
}

html[dir="rtl"] #threadReplyText[dir="auto"],
html[dir="rtl"] #threadInput[dir="auto"] {
    unicode-bidi: plaintext;
}

html[dir="rtl"] #closeThreadReplyBtn {
    right: auto !important;
    left: 15px !important;
}

html[dir="rtl"] #btnSendComment.send-mode > svg {
    transform: scaleX(-1);
}

/* Thread emoji tabs use normal RTL row order; emoji glyphs themselves stay intact. */
html[dir="rtl"] #threadEmojiPanel .emoji-tabs {
    direction: rtl;
}

html[dir="rtl"] #threadEmojiGrid {
    direction: rtl;
}


/* ==========================================================
   SYNAPSE RTL-M6B STORY VIEWER
   Scope:
   - Story viewer header/progress/navigation
   - Story reply panel / quick reactions
   - Story caption
   - Story viewers bottom sheet
   - Story reply preview rendered in chat

   Story upload/editor is intentionally NOT part of M6B (M6C).
   Server, Story storage, view counters and reply crypto are untouched.
   ========================================================== */

/* ----------------------------------------------------------
   1. PROGRESS + NAVIGATION
   Story array order stays unchanged in JS. The visual timeline mirrors.
   ---------------------------------------------------------- */
html[dir="rtl"] #storyProgressContainer {
    direction: rtl;
}

html[dir="rtl"] #storyProgressContainer .story-progress-fill {
    margin-left: auto;
    margin-right: 0;
}

/* Base HTML reserves 35% for previous and 65% for next in LTR.
   Mirror both physical widths together with the JS action mapping. */
html[dir="rtl"] #storyZoneLeft {
    width: 65% !important;
}

html[dir="rtl"] #storyZoneRight {
    width: 35% !important;
}

/* ----------------------------------------------------------
   2. VIEWER HEADER
   Parent flex naturally mirrors under RTL; dynamic names stay bidi-safe.
   ---------------------------------------------------------- */
html[dir="rtl"] #storyViewerName {
    text-align: start;
    unicode-bidi: plaintext;
}

html[dir="rtl"] #storyViewerTime {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: start;
}

/* More-menu is now on the physical left side of the mirrored header.
   Open it inward, toward the Story content. */
html[dir="rtl"] #storyMoreDropdown {
    right: auto !important;
    left: 0 !important;
    text-align: start;
}

html[dir="rtl"] #storyMoreDropdown .dropdown-item {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] #storyMoreDropdown .dropdown-item > svg {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* ----------------------------------------------------------
   3. STORY CAPTION
   Caption text already has dir=auto in the renderer.
   ---------------------------------------------------------- */
html[dir="rtl"] .story-caption-container,
html[dir="rtl"] .story-caption-text {
    text-align: start;
}

html[dir="rtl"] .story-caption-more-btn {
    margin-left: 0 !important;
    margin-right: 12px !important;
}

/* ----------------------------------------------------------
   4. STORY REPLY / REACTIONS
   ---------------------------------------------------------- */
html[dir="rtl"] #storyReplyPanel {
    direction: rtl;
}

html[dir="rtl"] #storyReplyInput {
    padding: 12px 20px 12px 42px !important;
    text-align: start;
    unicode-bidi: plaintext;
}

/* Send button moves to logical end of the input and the semantic send arrow mirrors. */
html[dir="rtl"] #storyReplySendBtn {
    right: auto !important;
    left: 6px !important;
}

html[dir="rtl"] #storyReplySendBtn > svg {
    margin-left: 0 !important;
    margin-right: 2px !important;
    transform: scaleX(-1);
}

html[dir="rtl"] #storyQuickReacts {
    direction: rtl;
    transform-origin: left center !important;
}

/* Dynamic 6-emoji grid created by StoryViewer. */
html[dir="rtl"] #instaEmojiGrid {
    direction: rtl;
}

/* Emoji glyphs are pictorial and must never be mirrored. */
html[dir="rtl"] .story-quick-react {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ----------------------------------------------------------
   5. MY STORY VIEWS / VIEWERS SHEET
   ---------------------------------------------------------- */
html[dir="rtl"] #storyViewsBtn {
    direction: rtl;
}

html[dir="rtl"] #storyViewsCount {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] #storyViewersSheet,
html[dir="rtl"] #storyViewersList {
    direction: rtl;
}

html[dir="rtl"] #storyViewersList [data-live-user-id] {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] #storyViewersList [data-live-user-id] > div:first-child {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] #storyViewersList [data-live-user-id] > div:first-child > div:last-child {
    text-align: start;
    unicode-bidi: plaintext;
}

html[dir="rtl"] #storyViewersList [data-live-user-id] > div:last-child {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ----------------------------------------------------------
   6. STORY REPLY PREVIEW INSIDE CHAT
   M4A handled normal quoted replies; this Story-specific preview has
   its own inline border-left and needs its own logical-start mirror.
   ---------------------------------------------------------- */
html[dir="rtl"] .story-reply-preview {
    border-left: 0 !important;
    border-right: 3px solid var(--accent-main) !important;
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] .story-reply-preview > div:last-child {
    text-align: start;
}


/* ==========================================================
   SYNAPSE RTL-M6C1 CHAT MORE MENU
   ========================================================== */
html[dir="rtl"] .reaction-panel .action-list { direction: rtl; }
html[dir="rtl"] .reaction-panel .action-item { direction: rtl; text-align: start; }
html[dir="rtl"] .reaction-panel .action-item > span {
    margin-left: 0 !important;
    margin-right: 2px !important;
}
html[dir="rtl"] .reaction-panel .action-item > svg { flex-shrink: 0; }


/* ==========================================================
   SYNAPSE RTL-M6C2 MEDIA PREVIEW HEADER
   Three independent zones. Applies to LTR and RTL.
   ========================================================== */

#mediaPreviewScreen .preview-header {
    direction: ltr;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center !important;
    width: 100%;
    min-height: 64px;
    padding: 8px 16px !important;
    gap: 12px !important;
    box-sizing: border-box;
}

#mediaPreviewScreen .preview-header-leading {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    min-width: 44px;
}

#mediaPreviewScreen .preview-header-title {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    max-width: min(38vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    direction: ltr;
    unicode-bidi: plaintext;
    font-size: 18px;
    font-weight: 600;
}

#mediaPreviewScreen .preview-header-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    direction: ltr;
}

#mediaPreviewScreen .preview-header-actions > button,
#mediaPreviewScreen .preview-header-leading > button {
    flex: 0 0 auto;
    margin: 0 !important;
}

#mediaPreviewScreen #btnToggleDraw,
#mediaPreviewScreen #btnToggleText,
#mediaPreviewScreen #btnToggleCrop {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
}

/* RTL = exact physical mirror of the LTR three-zone header. */
html[dir="rtl"] #mediaPreviewScreen .preview-header-leading {
    grid-column: 3;
    justify-self: end;
    direction: rtl;
}

html[dir="rtl"] #mediaPreviewScreen .preview-header-title {
    direction: rtl;
}

html[dir="rtl"] #mediaPreviewScreen .preview-header-actions {
    grid-column: 1;
    justify-self: start;
    direction: rtl;
}

/* The old injected mobile fix still writes right:... !important,
   but position:static makes those coordinates inert. */
@media (max-width: 600px) {
    #mediaPreviewScreen .preview-header {
        grid-template-columns: 1fr 1fr;
        min-height: 58px;
        padding: 7px 10px !important;
        gap: 6px !important;
    }

    #mediaPreviewScreen .preview-header-title {
        display: none !important;
    }

    #mediaPreviewScreen .preview-header-actions {
        gap: 1px;
    }

    #mediaPreviewScreen .preview-header-actions > button,
    #mediaPreviewScreen .preview-header-leading > button {
        width: 40px !important;
        height: 40px !important;
    }

    #mediaPreviewScreen .preview-header-leading {
        grid-column: 1;
    }

    #mediaPreviewScreen .preview-header-actions {
        grid-column: 2;
    }

    html[dir="rtl"] #mediaPreviewScreen .preview-header-leading {
        grid-column: 2;
    }

    html[dir="rtl"] #mediaPreviewScreen .preview-header-actions {
        grid-column: 1;
    }
}

/* ==========================================================
   SYNAPSE RTL-M6C3 PREVIEW TOOLBAR + QUICK FORWARD
   1) Keep all media-preview header zones on ONE grid row.
   2) In RTL keep quick-forward buttons on the INNER chat side.
   ========================================================== */

/* ----------------------------------------------------------
   A. MEDIA PREVIEW HEADER — ONE PHYSICAL ROW
   M6C2 already split header into:
   leading | title | actions.
   Explicit grid-row is required; otherwise CSS Grid sparse
   auto-placement may put each explicitly-columned item on a
   separate implicit row.
   ---------------------------------------------------------- */
#mediaPreviewScreen .preview-header-leading,
#mediaPreviewScreen .preview-header-title,
#mediaPreviewScreen .preview-header-actions {
    grid-row: 1 !important;
    align-self: center !important;
}

#mediaPreviewScreen .preview-header {
    grid-auto-rows: 1fr !important;
    align-content: center !important;
}

#mediaPreviewScreen .preview-header-leading,
#mediaPreviewScreen .preview-header-actions {
    height: 44px;
    align-items: center !important;
}

#mediaPreviewScreen .preview-header-actions {
    flex-wrap: nowrap !important;
}

#mediaPreviewScreen .preview-header-title {
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Keep every tool vertically centered inside the same 44px action row. */
#mediaPreviewScreen .preview-header-actions > button,
#mediaPreviewScreen .preview-header-leading > button {
    align-self: center !important;
    vertical-align: middle !important;
}

/* ----------------------------------------------------------
   B. QUICK FORWARD / SHARE BUTTON — RTL INNER SIDE
   Base injected client CSS is LTR:
     out -> left:-50
     in  -> right:-50
   But RTL mirrors bubble ownership:
     out bubble is on LEFT  -> button must be on RIGHT (toward center)
     in  bubble is on RIGHT -> button must be on LEFT  (toward center)
   ---------------------------------------------------------- */
html[dir="rtl"] .msg.out .quick-forward-btn {
    left: auto !important;
    right: -42px !important;
    transform: scaleX(-1) !important;
}

html[dir="rtl"] .msg.in .quick-forward-btn {
    right: auto !important;
    left: -42px !important;
    transform: none !important;
}

/* Preserve the original hover zoom while keeping the RTL arrow orientation. */
html[dir="rtl"] .msg.out .quick-forward-btn:hover {
    transform: scaleX(-1) scale(1.1) !important;
}

html[dir="rtl"] .msg.in .quick-forward-btn:hover {
    transform: scale(1.1) !important;
}

/* On narrow screens keep the floating button slightly closer to the bubble,
   leaving more safety space from the chat viewport edge. */
@media (max-width: 768px) {
    html[dir="rtl"] .msg.out .quick-forward-btn {
        right: -38px !important;
    }

    html[dir="rtl"] .msg.in .quick-forward-btn {
        left: -38px !important;
    }
}



/* ==========================================================
   SYNAPSE RTL-M7A CALLS UI
   Scope:
   - audio/video call overlay edge controls
   - local camera PiP start position
   - minimized call bar
   - bidi-safe call names/status

   WebRTC/media tracks/signaling are intentionally untouched.
   ========================================================== */

/* Full-screen call remains centered. Only the physical edge control mirrors. */
html[dir="rtl"] .btn-minimize-call {
    left: auto !important;
    right: 20px !important;
}

/* Local camera starts on the mirrored physical edge.
   The existing scaleX(-1) selfie mirror is preserved. */
html[dir="rtl"] #localVideo {
    right: auto !important;
    left: 20px !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] #localVideo {
        right: auto !important;
        left: 40px !important;
    }
}

/* Call header is centered by design, but mixed-script contact names/statuses
   need paragraph-level bidi handling. */
html[dir="rtl"] #callContactName,
html[dir="rtl"] #callStatusText,
html[dir="rtl"] .remote-video-muted p {
    unicode-bidi: plaintext;
}

html[dir="rtl"] #callContactName[dir="auto"] {
    text-align: center;
}

/* Circular call controls are pictorial, but their GROUP mirrors with RTL. */
html[dir="rtl"] .call-controls {
    direction: rtl;
}

/* Do not mirror camera/mic/phone/screen glyph artwork. */
html[dir="rtl"] .call-controls svg {
    transform: none;
}

/* Minimized call bar:
   avatar/name move to the writing-start (right), actions to the left. */
html[dir="rtl"] .minimized-call-bar {
    direction: rtl;
}

html[dir="rtl"] .min-call-avatar {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

html[dir="rtl"] .min-call-info,
html[dir="rtl"] .min-call-name,
html[dir="rtl"] .min-call-time {
    text-align: start;
}

html[dir="rtl"] .min-call-name[dir="auto"],
html[dir="rtl"] .min-call-time {
    unicode-bidi: plaintext;
}

html[dir="rtl"] .min-call-actions {
    direction: rtl;
}

/* Old physical spacing pushed the minimized mic toward the wrong side. */
html[dir="rtl"] #minBtnMic {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Action icons are semantic/pictorial and must not be mirrored. */
html[dir="rtl"] .min-call-actions svg,
html[dir="rtl"] #minBtnMic svg {
    transform: none;
}


/* ==========================================================
   SYNAPSE RTL-M7B SCREEN SHARE UI
   UI-only. ScreenShareReceiver/WebRTC/zoom/pan logic untouched.
   ========================================================== */

/* Shared desktop/mobile screen content is visual media, not UI text.
   Never mirror it in RTL. Zoom module may still set transform dynamically. */
html[dir="rtl"] #remoteVideo.screen-mode {
    direction: ltr !important;
    unicode-bidi: isolate;
    transform-origin: center center;
}

/* Share-screen icon is pictorial. Do not mirror its arrow/display artwork. */
html[dir="rtl"] #btnShareScreen,
html[dir="rtl"] #btnShareScreen svg {
    direction: ltr;
    transform: none !important;
}

/* Rotate hint remains centered, but text/icon order follows UI direction. */
html[dir="rtl"] #rotateHint {
    direction: rtl;
}

html[dir="rtl"] #rotateHint span {
    text-align: start;
    unicode-bidi: plaintext;
}

/* Phone/rotate glyph is pictorial; preserve the existing rotation animation. */
html[dir="rtl"] #rotateHint svg {
    direction: ltr;
}

/* Scale badges must always read 1.2× / 2.0× in stable LTR order. */
#zoomBadge {
    direction: ltr !important;
    unicode-bidi: isolate;
}

/* During screen share the M7A local camera PiP stays on mirrored edge.
   Explicitly preserve its selfie orientation rather than inheriting RTL. */
html[dir="rtl"] #localVideo {
    direction: ltr;
}


/* ==========================================================
   SYNAPSE RTL-M8A MOBILE QUICK FORWARD
   Touch UX:
   - media quick-forward is always visible on compact/touch screens
   - button stays on the logical INNER side of the bubble
   - normal message long-press menu remains unchanged
   ========================================================== */

/* Permanent quick-forward only for media messages.
   Text messages keep the clean long-press/context-menu UX. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .msg:has(.gallery-trigger) > .quick-forward-btn,
    .msg:has(.msg-video) > .quick-forward-btn,
    .msg:has(.media-grid) > .quick-forward-btn {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    /* LTR geometry: bubbles keep original ownership positions.
       Keep the action in the INNER chat gutter. */
    html:not([dir="rtl"]) .msg.out:has(.gallery-trigger) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.out:has(.msg-video) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.out:has(.media-grid) > .quick-forward-btn {
        left: -38px !important;
        right: auto !important;
    }

    html:not([dir="rtl"]) .msg.in:has(.gallery-trigger) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.in:has(.msg-video) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.in:has(.media-grid) > .quick-forward-btn {
        right: -38px !important;
        left: auto !important;
    }

    /* RTL ownership is mirrored:
       outgoing bubble is LEFT -> action to its RIGHT (toward center)
       incoming bubble is RIGHT -> action to its LEFT (toward center). */
    html[dir="rtl"] .msg.out:has(.gallery-trigger) > .quick-forward-btn,
    html[dir="rtl"] .msg.out:has(.msg-video) > .quick-forward-btn,
    html[dir="rtl"] .msg.out:has(.media-grid) > .quick-forward-btn {
        left: auto !important;
        right: -38px !important;
        transform: scaleX(-1) !important;
    }

    html[dir="rtl"] .msg.in:has(.gallery-trigger) > .quick-forward-btn,
    html[dir="rtl"] .msg.in:has(.msg-video) > .quick-forward-btn,
    html[dir="rtl"] .msg.in:has(.media-grid) > .quick-forward-btn {
        right: auto !important;
        left: -38px !important;
        transform: none !important;
    }

    /* Comfortable minimum hit target without making the visual button huge. */
    .msg:has(.gallery-trigger) > .quick-forward-btn,
    .msg:has(.msg-video) > .quick-forward-btn,
    .msg:has(.media-grid) > .quick-forward-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Extra-tight phones: pull the control 4px closer to the media bubble. */
@media (max-width: 420px) {
    html:not([dir="rtl"]) .msg.out:has(.gallery-trigger) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.out:has(.msg-video) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.out:has(.media-grid) > .quick-forward-btn {
        left: -34px !important;
    }

    html:not([dir="rtl"]) .msg.in:has(.gallery-trigger) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.in:has(.msg-video) > .quick-forward-btn,
    html:not([dir="rtl"]) .msg.in:has(.media-grid) > .quick-forward-btn {
        right: -34px !important;
    }

    html[dir="rtl"] .msg.out:has(.gallery-trigger) > .quick-forward-btn,
    html[dir="rtl"] .msg.out:has(.msg-video) > .quick-forward-btn,
    html[dir="rtl"] .msg.out:has(.media-grid) > .quick-forward-btn {
        right: -34px !important;
    }

    html[dir="rtl"] .msg.in:has(.gallery-trigger) > .quick-forward-btn,
    html[dir="rtl"] .msg.in:has(.msg-video) > .quick-forward-btn,
    html[dir="rtl"] .msg.in:has(.media-grid) > .quick-forward-btn {
        left: -34px !important;
    }
}

/* ==========================================================
   SYNAPSE RTL-M10 v4 — CURRENT-AUDIT DRAWER FORMS
   Human forms in user-facing drawers follow UI direction.
   Chat/thread composers are intentionally untouched.
   ========================================================== */

/* ----------------------------------------------------------
   1. WHOLE DRAWER / SETTINGS GEOMETRY
   ---------------------------------------------------------- */
html[dir="rtl"] .left-panel,
html[dir="rtl"] .left-panel-header,
html[dir="rtl"] .left-panel .settings-list,
html[dir="rtl"] .left-panel .settings-item,
html[dir="rtl"] .left-panel .setting-row,
html[dir="rtl"] .left-panel .setting-row-info,
html[dir="rtl"] .left-panel .privacy-toggle-row,
html[dir="rtl"] .left-panel .profile-input-group,
html[dir="rtl"] .left-panel .inline-edit-wrapper,
html[dir="rtl"] .left-panel .custom-dropdown,
html[dir="rtl"] .left-panel .dropdown-trigger,
html[dir="rtl"] #profileSidebar,
html[dir="rtl"] #profileSidebar .profile-header,
html[dir="rtl"] #profileSidebar .profile-content,
html[dir="rtl"] #profileSidebar .profile-section,
html[dir="rtl"] #profileSidebar .inline-edit-wrapper,
html[dir="rtl"] #groupCreateModal .alert-content,
html[dir="rtl"] #groupCreateModal .search-box {
    direction: rtl !important;
}

/* Text labels/descriptions in RTL drawers are physically right-aligned. */
html[dir="rtl"] .left-panel-header,
html[dir="rtl"] .left-panel .settings-item,
html[dir="rtl"] .left-panel .setting-row,
html[dir="rtl"] .left-panel .setting-row-info,
html[dir="rtl"] .left-panel .profile-input-group,
html[dir="rtl"] .left-panel .profile-input-group > label,
html[dir="rtl"] .left-panel .profile-hint,
html[dir="rtl"] .left-panel .profile-section-title,
html[dir="rtl"] .left-panel .setting-desc,
html[dir="rtl"] #profileSidebar .group-name-label,
html[dir="rtl"] #profileSidebar .group-name-display,
html[dir="rtl"] #profileSidebar #bioLabel,
html[dir="rtl"] #profileSidebar #profileBio,
html[dir="rtl"] #profileSidebar .section-title,
html[dir="rtl"] #groupCreateModal .alert-title,
html[dir="rtl"] #groupCreateModal .alert-content {
    text-align: right !important;
}

/* ----------------------------------------------------------
   2. HUMAN EDITABLE FIELDS
   IMPORTANT: these follow the UI language, NOT previous field content.
   ---------------------------------------------------------- */
html[dir="rtl"] .left-panel input[type="text"]:not(#myUsernameInput),
html[dir="rtl"] .left-panel input[type="search"],
html[dir="rtl"] .left-panel textarea,
html[dir="rtl"] .left-panel [contenteditable="true"],
html[dir="rtl"] #profileSidebar input[type="text"],
html[dir="rtl"] #profileSidebar input[type="search"],
html[dir="rtl"] #profileSidebar textarea,
html[dir="rtl"] #profileSidebar [contenteditable="true"],
html[dir="rtl"] #groupCreateModal input[type="text"],
html[dir="rtl"] #groupCreateModal input[type="search"],
html[dir="rtl"] #groupCreateModal textarea,
html[dir="rtl"] #groupCreateModal [contenteditable="true"] {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
}

/* Explicit audited human fields — protects against legacy left!important. */
html[dir="rtl"] #myNameInput,
html[dir="rtl"] #myBioInput,
html[dir="rtl"] #myQuickBioInput,
html[dir="rtl"] #profileNameInput,
html[dir="rtl"] #profileBioInput,
html[dir="rtl"] #profileMediaSearch,
html[dir="rtl"] #languageSearchInput,
html[dir="rtl"] #newGroupName,
html[dir="rtl"] #memberSearchInput {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
}

/* Read-mode human text follows the RTL drawer too. */
html[dir="rtl"] #mySidebarName,
html[dir="rtl"] #myQuickBioText,
html[dir="rtl"] #profileNameText,
html[dir="rtl"] #profileBio {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
}

/* ----------------------------------------------------------
   3. INLINE EDIT ACTIONS
   client.js used physical right:0 for the dynamically-created
   emoji/save column. In RTL it must sit on the LEFT.
   ---------------------------------------------------------- */
html[dir="rtl"] .inline-edit-actions {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .left-panel .inline-edit-wrapper input,
html[dir="rtl"] .left-panel .inline-edit-wrapper textarea,
html[dir="rtl"] #profileSidebar .inline-edit-wrapper input,
html[dir="rtl"] #profileSidebar .inline-edit-wrapper textarea {
    padding-right: 0 !important;
    padding-left: 38px !important;
}

/* Existing edit icon participates in the RTL flex row. */
html[dir="rtl"] .left-panel .inline-edit-wrapper,
html[dir="rtl"] #profileSidebar .inline-edit-wrapper {
    flex-direction: row !important;
}

/* ----------------------------------------------------------
   4. SETTINGS ROWS / SWITCHES / DROPDOWNS
   ---------------------------------------------------------- */
html[dir="rtl"] .left-panel .settings-item,
html[dir="rtl"] .left-panel .setting-row,
html[dir="rtl"] .left-panel .privacy-toggle-row {
    flex-direction: row !important;
}

/* Text/info is logical START (right); switch/dropdown is logical END (left). */
html[dir="rtl"] .left-panel .setting-row-info {
    align-items: flex-start;
}

html[dir="rtl"] .left-panel .custom-dropdown,
html[dir="rtl"] .left-panel .dropdown-trigger,
html[dir="rtl"] .left-panel .dropdown-options,
html[dir="rtl"] .left-panel .dropdown-option,
html[dir="rtl"] .left-panel .dropdown-group-title {
    direction: rtl !important;
    text-align: right !important;
}

/* Language list may contain LTR names; isolate each option without
   changing the RTL physical layout. */
html[dir="rtl"] #languageOptionsContainer .dropdown-option {
    unicode-bidi: plaintext;
}

/* ----------------------------------------------------------
   5. GROUP / CHANNEL PROFILE + CREATE
   ---------------------------------------------------------- */
html[dir="rtl"] #profileSidebar #profileNameWrapper,
html[dir="rtl"] #profileSidebar #profileBioWrapper,
html[dir="rtl"] #profileSidebar #userInfoSection,
html[dir="rtl"] #profileSidebar #groupMembersSection,
html[dir="rtl"] #profileSidebar #groupMembersList {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #groupCreateModal #memberSelectionList,
html[dir="rtl"] #groupCreateModal .member-item {
    direction: rtl !important;
    text-align: right !important;
}

/* Inline button row in create modal mirrors automatically under RTL. */
html[dir="rtl"] #groupCreateModal .alert-content > div[style*="justify-content: flex-end"] {
    direction: rtl !important;
}

/* ----------------------------------------------------------
   6. TECHNICAL IDENTIFIERS — ALWAYS LTR
   ---------------------------------------------------------- */
html[dir="rtl"] #myUsernameInput,
html[dir="rtl"] #myPhoneInput,
html[dir="rtl"] #myEmailInput,
html[dir="rtl"] #inviteLinkInput,
html[dir="rtl"] #mySidebarUsername,
html[dir="rtl"] #profileUsername,
html[dir="rtl"] #profilePhone,
html[dir="rtl"] #profileEmail {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

/* ----------------------------------------------------------
   7. CHAT SAFETY
   No selectors below touch:
   #msgInput / #threadInput / #forwardComment / story composer
   or .synapse-rich-editor.
   Their original dir=auto implementation remains authoritative.
   ---------------------------------------------------------- */

/* ==========================================================
   SYNAPSE RTL — QUICK REACTION SAFE EDGE FIX
   In RTL message ownership is mirrored:
     outgoing bubble = LEFT  -> reaction button to RIGHT (inner gutter)
     incoming bubble = RIGHT -> reaction button to LEFT  (inner gutter)

   The base style.css uses physical left/right values for LTR, so without
   these overrides the white reaction button can escape the chat/thread
   viewport on the outer edge.
   ========================================================== */

html[dir="rtl"] .msg.out > .quick-react-btn {
    left: auto !important;
    right: -36px !important;
}

html[dir="rtl"] .msg.in > .quick-react-btn {
    right: auto !important;
    left: -36px !important;
}

/* Thread/original channel post: keep the button in the inner gutter even
   when another rule later changes generic message positioning. */
html[dir="rtl"] #threadOriginalPost .msg.out > .quick-react-btn,
html[dir="rtl"] #threadMessages .msg.out > .quick-react-btn {
    left: auto !important;
    right: -34px !important;
}

html[dir="rtl"] #threadOriginalPost .msg.in > .quick-react-btn,
html[dir="rtl"] #threadMessages .msg.in > .quick-react-btn {
    right: auto !important;
    left: -34px !important;
}

/* Narrow/mobile thread: bring the floating circle a little closer so the
   entire 26px button always remains inside the usable panel width. */
@media (max-width: 768px) {
    html[dir="rtl"] .msg.out > .quick-react-btn {
        left: auto !important;
        right: -26px !important;
    }

    html[dir="rtl"] .msg.in > .quick-react-btn {
        right: auto !important;
        left: -26px !important;
    }

    html[dir="rtl"] #threadOriginalPost .msg.out > .quick-react-btn,
    html[dir="rtl"] #threadMessages .msg.out > .quick-react-btn {
        right: -24px !important;
    }

    html[dir="rtl"] #threadOriginalPost .msg.in > .quick-react-btn,
    html[dir="rtl"] #threadMessages .msg.in > .quick-react-btn {
        left: -24px !important;
    }
}

/* ==========================================================
   SYNAPSE PROFILE RTL — IDENTITY / BIO / TECHNICAL BIDI FIX
   Keep the personal identity block visually centered in RTL,
   while usernames / phones / emails remain structurally LTR.
   ========================================================== */

/* Own profile hero: same visual composition as LTR.
   unicode-bidi:plaintext lets mixed Hebrew/Cyrillic/Latin names and bios
   choose their paragraph direction from their actual content. */
html[dir="rtl"] #myProfilePanel #mySidebarName,
html[dir="rtl"] #myProfilePanel #myQuickBioText {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
    text-align: center !important;
    unicode-bidi: plaintext !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* @username is technical LTR data, but belongs visually under the avatar,
   therefore it stays centered instead of being pushed to the left edge. */
html[dir="rtl"] #myProfilePanel #mySidebarUsername {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
    overflow-wrap: anywhere !important;
}

/* The quick-bio editor keeps RTL UI ergonomics, while plaintext protects
   embedded Latin / numbers / links from visual reordering. */
html[dir="rtl"] #myProfilePanel #myQuickBioInput {
    unicode-bidi: plaintext !important;
}

/* Other user's profile card:
   technical identifiers stay LTR internally, but align to the logical
   content edge of the RTL card instead of floating on the far left. */
html[dir="rtl"] #profileSidebar #profileUsername,
html[dir="rtl"] #profileSidebar #profilePhone,
html[dir="rtl"] #profileSidebar #profileEmail {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
}

html[dir="rtl"] #profileSidebar #profileUsername {
    display: block !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
}

html[dir="rtl"] #profileSidebar #profilePhone,
html[dir="rtl"] #profileSidebar #profileEmail {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

/* Contact rows themselves follow RTL layout: icon sits on the logical
   start side, while the phone/email characters remain LTR. */
html[dir="rtl"] #profileSidebar #profilePhoneContainer,
html[dir="rtl"] #profileSidebar #profileEmailContainer {
    direction: rtl !important;
    width: 100% !important;
}
/* ==========================================================
   SYNAPSE RTL QR LOGIN STEP 10A V1.2
   Scope: login-by-phone QR view added in STEP 3.
   Raw SYNAPSE_LINK text intentionally remains LTR.
   ========================================================== */
html[dir="rtl"] #qrLoginContainer #backFromQrBtn {
    left: auto !important;
    right: -10px !important;
}

html[dir="rtl"] #qrLoginContainer #backFromQrBtn svg {
    transform: scaleX(-1);
}

html[dir="rtl"] #qrLoginContainer #qrLoginText {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

html[dir="rtl"] #qrLoginContainer #copyQrTextBtn {
    border-left: 0 !important;
    border-right: 1px solid var(--border-main) !important;
}

html[dir="rtl"] #qrLoginContainer #qrLoginExpiryRow {
    direction: rtl;
}
/* ==========================================================
   SYNAPSE RTL LINKED DEVICES STEP 10B1 V1.3
   Main Linked Devices list + modal shell.
   ========================================================== */
html[dir="rtl"] .syn-ld-shell {
    direction: rtl;
}

html[dir="rtl"] .syn-ld-close {
    right: auto !important;
    left: 14px !important;
}

html[dir="rtl"] .syn-ld-head,
html[dir="rtl"] .syn-ld-connect-head {
    padding-right: 0 !important;
    padding-left: 38px !important;
    text-align: right !important;
}

html[dir="rtl"] .syn-ld-device-card,
html[dir="rtl"] .syn-ld-device-copy,
html[dir="rtl"] .syn-ld-connect-copy {
    text-align: right !important;
}

html[dir="rtl"] .syn-ld-list {
    padding: 0 0 2px 3px !important;
}

html[dir="rtl"] .syn-ld-back svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .syn-ld-input {
    direction: ltr;
    text-align: left;
}
/* ==========================================================
   SYNAPSE RTL SAFETY DETAILS STEP 10C1 V1.1
   Security details + device list.
   ========================================================== */
html[dir="rtl"] #cryptoTrustModal {
    direction: rtl;
}

html[dir="rtl"] #cryptoTrustModal > div {
    text-align: right;
}

html[dir="rtl"] #cryptoTrustModal code {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

html[dir="rtl"] #cryptoSafetyDeviceListV1 summary {
    text-align: right;
}

html[dir="rtl"] #cryptoSafetyDeviceListV1 div[style*="word-break:break-all"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}
/* ==========================================================
   SYNAPSE RTL SAFETY QR DISPLAY STEP 10C3A V1
   Safety QR display + guide.
   ========================================================== */
html[dir="rtl"] #synapseSafetyQrShowV1 {
    direction: rtl;
}

html[dir="rtl"] #synapseSafetyQrShowV1 > div > div:first-child,
html[dir="rtl"] #synapseSafetyQrShowV1 > div > div:nth-child(2),
html[dir="rtl"] #synapseSafetyQrShowV1 > div > div:nth-child(4) {
    text-align: start !important;
}

html[dir="rtl"] #synapseSafetyGuideV1 {
    direction: rtl;
    text-align: start !important;
}

html[dir="rtl"] #synapseSafetyGuideV1 > div {
    text-align: start !important;
}
/* ==========================================================
   SYNAPSE RTL SAFETY QR SCANNER STEP 10C3B V1
   Native scanner overlay.
   ========================================================== */
html[dir="rtl"] #synapseQrScannerOverlayV1 {
    direction: rtl;
}

html[dir="rtl"] #synapseQrScannerCloseV1 {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] #synapseQrScannerTitleV1,
html[dir="rtl"] #synapseQrScannerStatusV1 {
    unicode-bidi: plaintext;
}