/* Nooran Chat - Persian/Farsi RTL Support - Complete */

/* Vazirmatn font — self-hosted for offline/intranet users (full variable font) */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Vazirmatn-Variable.woff2') format('woff2');
}

/* ===== Vazirmatn — global: هر متن فارسی در هر جای صفحه ===== */
body,
body *,
body *::before,
body *::after {
    font-family: "Vazirmatn", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji" !important;
}

:root {
    --cpd-font-family-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-family: "Vazirmatn", "Inter", sans-serif;
}

pre, code, kbd, samp,
.mx_EventTile_content pre,
.mx_EventTile_content code,
.mx_EventTile_pre_container,
.mx_MessageComposer_wysiwyg pre,
.mx_MessageComposer_wysiwyg code {
    font-family: "Vazirmatn", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* ===== Global RTL ===== */
html[lang="fa"] {
    direction: rtl;
}

html[lang="fa"] body {
    text-align: start;
}

/* ===== Font — Vazirmatn everywhere (Persian) ===== */
html[lang="fa"] {
    --cpd-font-family-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif, var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --cpd-font-family-mono: "Vazirmatn", ui-monospace, monospace, var(--emoji-font-family), "Noto Color Emoji";
    --font-family: "Vazirmatn", sans-serif;
}

html[lang="fa"] *,
html[lang="fa"] *::before,
html[lang="fa"] *::after {
    font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji" !important;
}

html[lang="fa"] pre,
html[lang="fa"] code,
html[lang="fa"] kbd,
html[lang="fa"] samp {
    direction: ltr;
    text-align: left;
}

/* ===============================================
   MAIN LAYOUT
   =============================================== */

/* Main layout: direction:rtl flips flex children (Space→right, RoomList→center, Chat→left) */
html[lang="fa"] .mx_MatrixChat,
html[lang="fa"] .mx_MatrixChat_wrapper {
    direction: rtl;
}

html[lang="fa"] .mx_LeftPanel_outerWrapper,
html[lang="fa"] .mx_LeftPanel_wrapper {
    direction: rtl;
}

/* ===============================================
   SPACE PANEL
   =============================================== */

html[lang="fa"] .mx_SpacePanel {
    direction: rtl;
    /* order:1 was pushing SpacePanel to the far LEFT in RTL — removed */
}

html[lang="fa"] .mx_SpacePanel.newUi {
    border-inline-end: none !important;
    border-inline-start: 1px solid var(--cpd-color-bg-subtle-primary) !important;
}

html[lang="fa"] .mx_SpacePanel .mx_SpacePanel_toggleCollapse {
    inset-inline-end: auto !important;
    inset-inline-start: -8px !important;
}

html[lang="fa"] .mx_SpacePanel .mx_SpacePanel_toggleCollapse svg {
    margin-inline-start: 0 !important;
    margin-inline-end: 1px !important;
}

html[lang="fa"] .mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded svg {
    margin-inline-end: -1px !important;
    margin-inline-start: 0 !important;
}

/* ===============================================
   LEFT PANEL (Room List)
   =============================================== */

html[lang="fa"] .mx_LeftPanel {
    direction: rtl;
}

html[lang="fa"] .mx_LeftPanel_roomListContainer {
    direction: rtl;
}

html[lang="fa"] .mx_LeftPanel_filterContainer {
    direction: rtl;
}

/* ===============================================
   ROOM TILES
   =============================================== */

html[lang="fa"] .mx_RoomTile {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_RoomTile .mx_DecoratedRoomAvatar,
html[lang="fa"] .mx_RoomTile .mx_RoomTile_avatarContainer {
    margin-inline-start: 0 !important;
    margin-inline-end: 10px !important;
}

html[lang="fa"] .mx_RoomTile .mx_RoomTile_titleContainer {
    margin-inline-start: 0 !important;
    margin-inline-end: 8px !important;
    text-align: start;
}

html[lang="fa"] .mx_RoomTile .mx_RoomTile_notificationsButton {
    margin-inline-start: 0 !important;
    margin-inline-end: 4px !important;
}

html[lang="fa"] .mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
    margin-inline-start: 0 !important;
    margin-inline-end: 2px !important;
}

html[lang="fa"] .mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
    margin-inline-start: 7px !important;
    margin-inline-end: 5px !important;
}

html[lang="fa"] .mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
html[lang="fa"] .mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
    margin-inline-start: 0 !important;
}

/* Badge on avatar */
html[lang="fa"] .mx_DecoratedRoomAvatar .mx_NotificationBadge,
html[lang="fa"] .mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer {
    inset-inline-end: auto !important;
    inset-inline-start: 0 !important;
}

html[lang="fa"] .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
html[lang="fa"] .mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
    inset-inline-end: auto !important;
    inset-inline-start: 6.25% !important;
}

html[lang="fa"] .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon svg,
html[lang="fa"] .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before {
    inset-inline-end: auto !important;
    inset-inline-start: 0 !important;
}

/* ===============================================
   ROOM SUBLIST HEADERS
   =============================================== */

html[lang="fa"] .mx_RoomSublist {
    direction: rtl;
}

html[lang="fa"] .mx_RoomSublist .mx_RoomSublist_headerContainer {
    direction: rtl;
}

html[lang="fa"] .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_collapseBtn {
    margin-inline-start: 0 !important;
    margin-inline-end: 6px !important;
}

html[lang="fa"] .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge {
    margin-inline-end: 0 !important;
    margin-inline-start: 8px !important;
}

html[lang="fa"] .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
html[lang="fa"] .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
    margin-inline-end: 0 !important;
    margin-inline-start: 8px !important;
}

/* ===============================================
   ROOM VIEW
   =============================================== */

html[lang="fa"] .mx_MainSplit {
    direction: rtl;
}

html[lang="fa"] .mx_RoomView {
    direction: rtl;
}

/* Room Header */
html[lang="fa"] .mx_RoomHeader {
    direction: rtl;
}

html[lang="fa"] .mx_RoomHeader_name,
html[lang="fa"] .mx_RoomHeader_topic {
    text-align: right;
}

/* ===============================================
   MESSAGES / TIMELINE
   =============================================== */

html[lang="fa"] .mx_EventTile {
    direction: rtl;
}

html[lang="fa"] .mx_EventTile_content,
html[lang="fa"] .mx_MTextBody {
    direction: auto;
    text-align: right;
}

/* Avatars/lines use inset-inline-* in Element — let direction:rtl handle them */
html[lang="fa"] .mx_EventTile_line {
    direction: rtl;
}

/* Sender name */
html[lang="fa"] .mx_DisambiguatedProfile {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
    margin-inline-start: 0 !important;
    margin-inline-end: 5px !important;
}

/* Timestamp */
html[lang="fa"] .mx_MessageTimestamp {
    direction: ltr;
}

/* Message Action Bar */
html[lang="fa"] .mx_MessageActionBar {
    inset-inline-end: auto !important;
    inset-inline-start: 8px !important;
}

/* Reply chain */
html[lang="fa"] .mx_ReplyChain {
    border-inline-start: 2px solid var(--username-color) !important;
    border-inline-end: none !important;
    padding-inline-start: 10px !important;
    padding-inline-end: 0 !important;
}

/* Thread summary */
html[lang="fa"] .mx_ThreadSummary {
    direction: rtl;
}

/* Read receipts */
html[lang="fa"] .mx_ReadReceiptGroup {
    direction: ltr;
}

/* ===============================================
   MESSAGE COMPOSER
   =============================================== */

html[lang="fa"] .mx_MessageComposer {
    direction: rtl;
}

html[lang="fa"] .mx_MessageComposer_wrapper {
    padding-inline-start: 42px !important;
    padding-inline-end: 16px !important;
}

html[lang="fa"] .mx_MessageComposer_wysiwyg .mx_MessageComposer_wrapper {
    padding-inline-end: 16px !important;
}

html[lang="fa"] .mx_BasicMessageComposer_input {
    direction: auto;
    text-align: right;
}

html[lang="fa"] .mx_RoomView_statusAreaBox_line {
    margin-inline-start: 65px !important;
    margin-inline-end: 0 !important;
}

/* ===============================================
   RIGHT PANEL
   =============================================== */

html[lang="fa"] .mx_RightPanel {
    direction: rtl;
    border-inline-start: 1px solid var(--cpd-color-gray-400) !important;
    border-inline-end: none !important;
}

html[lang="fa"] .mx_RightPanel_ResizeWrapper {
    direction: rtl;
}

/* Member list */
html[lang="fa"] .mx_MemberListView {
    direction: rtl;
}

html[lang="fa"] .mx_MemberListHeaderView .mx_MemberListHeaderView_invite_small {
    margin-inline-end: 0 !important;
    margin-inline-start: var(--cpd-space-3x) !important;
}

html[lang="fa"] .mx_MemberListHeaderView .mx_MemberListHeaderView_label {
    padding-inline-end: 0 !important;
    padding-inline-start: var(--cpd-space-4x) !important;
    text-align: start;
}

html[lang="fa"] .mx_MemberListHeaderView .mx_MemberListHeaderView_search {
    margin-inline-end: 0 !important;
    margin-inline-start: var(--cpd-space-4x) !important;
}

/* User/Room Info Cards */
html[lang="fa"] .mx_UserInfo,
html[lang="fa"] .mx_RoomSummaryCard,
html[lang="fa"] .mx_BaseCard_header {
    direction: rtl;
    text-align: right;
}

/* ===============================================
   SETTINGS
   =============================================== */

html[lang="fa"] .mx_TabbedView {
    direction: rtl;
    padding-left: 0 !important;
    padding-right: var(--cpd-space-8x) !important;
}

html[lang="fa"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    left: auto !important;
    right: 0 !important;
    text-align: right;
}

html[lang="fa"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
    margin-left: 0 !important;
    margin-right: 280px !important;
}

html[lang="fa"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel {
    margin-left: 0 !important;
    margin-right: 72px !important;
}

html[lang="fa"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel {
    direction: rtl;
    text-align: right;
    flex-direction: row-reverse;
}

html[lang="fa"] .mx_TabbedView_tabLabel svg {
    margin-right: 0 !important;
    margin-left: var(--cpd-space-3x) !important;
}

html[lang="fa"] .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
    padding-left: 52px !important;
    padding-right: 0 !important;
}

html[lang="fa"] .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[lang="fa"] .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[lang="fa"] .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[lang="fa"] .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab {
    padding-left: 0 !important;
    padding-right: 100px !important;
}

html[lang="fa"] .mx_UserSettingsDialog .mx_SettingsDialog_tabLabelsAlert:after,
html[lang="fa"] .mx_RoomSettingsDialog .mx_SettingsDialog_tabLabelsAlert:after,
html[lang="fa"] .mx_SpaceSettingsDialog .mx_SettingsDialog_tabLabelsAlert:after,
html[lang="fa"] .mx_SpacePreferencesDialog .mx_SettingsDialog_tabLabelsAlert:after {
    right: auto !important;
    left: var(--cpd-space-1x) !important;
}

html[lang="fa"] .mx_SettingsTab {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_UserSettings {
    direction: rtl;
}

/* ===============================================
   DIALOGS
   =============================================== */

html[lang="fa"] .mx_Dialog {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_Dialog_content {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_Dialog_buttons {
    direction: rtl;
    text-align: left !important;
}

/* ===============================================
   CONTEXT MENUS
   =============================================== */

html[lang="fa"] .mx_ContextualMenu {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_IconizedContextMenu {
    direction: rtl;
    text-align: right;
}

/* ===============================================
   AUTH PAGES
   =============================================== */

html[lang="fa"] .mx_AuthPage,
html[lang="fa"] .mx_AuthBody {
    direction: rtl;
    text-align: right;
}

/* ===============================================
   FORMS
   =============================================== */

html[lang="fa"] .mx_Field {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_Field input,
html[lang="fa"] .mx_Field textarea {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .mx_Field_prefix {
    border-inline-end: none !important;
    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary) !important;
}

html[lang="fa"] .mx_Field_postfix {
    border-inline-start: none !important;
    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary) !important;
}

/* ===============================================
   SEARCH
   =============================================== */

html[lang="fa"] .mx_SearchBar {
    direction: rtl;
}

html[lang="fa"] .mx_SpotlightDialog {
    direction: rtl;
}

/* ===============================================
   NOTIFICATIONS / TOASTS
   =============================================== */

html[lang="fa"] .mx_NotificationPanel {
    direction: rtl;
}

html[lang="fa"] .mx_Toast_toast {
    direction: rtl;
    text-align: right;
}

/* ===============================================
   SCROLLBARS
   =============================================== */

html[lang="fa"] .mx_AutoHideScrollbar {
    direction: rtl;
}

/* Scroll indicators - flip masks */
html[lang="fa"] .mx_IndicatorScrollbar_leftOverflow {
    mask-image: linear-gradient(270deg, transparent, #000 5%) !important;
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 5%) !important;
}

html[lang="fa"] .mx_IndicatorScrollbar_rightOverflow {
    mask-image: linear-gradient(270deg, #000, #000 95%, transparent) !important;
    -webkit-mask-image: linear-gradient(270deg, #000, #000 95%, transparent) !important;
}

/* ===============================================
   RESIZE HANDLE
   =============================================== */

html[lang="fa"] .mx_ResizeHandle {
    cursor: ew-resize;
}

html[lang="fa"] .mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_ResizeHandle--horizontal:before {
    transform: translate(50%, -50%) !important;
    -webkit-transform: translate(50%, -50%) !important;
}

/* ===============================================
   WELCOME / HOME
   =============================================== */

html[lang="fa"] .mx_HomePage {
    direction: rtl;
    text-align: right;
}

/* ===============================================
   FILE PANEL
   =============================================== */

html[lang="fa"] .mx_FilePanel {
    direction: rtl;
}

html[lang="fa"] .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetails .mx_MessageTimestamp {
    margin-inline-end: 0 !important;
    margin-inline-start: auto !important;
}

/* ===============================================
   BUBBLE LAYOUT
   =============================================== */

/* Bubble layout avatars: Element uses inset-inline-start — no manual flip */

/* ===============================================
   APPS / WIDGETS CONTAINER
   =============================================== */

html[lang="fa"] .mx_AppsContainer .mx_AppTile:first-of-type {
    border-inline-start-width: 0 !important;
    border-inline-end-width: var(--container-border-width, 8px) !important;
    border-start-start-radius: 0 !important;
    border-start-end-radius: 10px !important;
    border-end-end-radius: 10px !important;
    border-end-start-radius: 0 !important;
}

html[lang="fa"] .mx_AppsContainer .mx_AppTile:last-of-type {
    border-inline-end-width: 0 !important;
    border-inline-start-width: var(--container-border-width, 8px) !important;
    border-start-start-radius: 10px !important;
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
    border-end-start-radius: 10px !important;
}

/* ===============================================
   BLOCKQUOTE / MARKDOWN BORDERS
   =============================================== */

html[lang="fa"] .mx_Dialog .markdown-body blockquote,
html[lang="fa"] .mx_EventTile_content blockquote,
html[lang="fa"] blockquote {
    border-inline-start: 2px solid var(--cpd-color-border-interactive-primary) !important;
    border-inline-end: none !important;
    padding-inline-start: 10px !important;
    padding-inline-end: 0 !important;
}

html[lang="fa"] .mx_LinkPreviewWidget {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

/* ===============================================
   ICONS THAT NEED MIRRORING (arrows, chevrons)
   =============================================== */

html[lang="fa"] .mx_RoomSublist_collapseBtn svg,
html[lang="fa"] .mx_SpaceButton_toggleCollapse svg {
    transform: scaleX(-1) !important;
}

/* ===============================================
   MISC FIXES
   =============================================== */

/* Pill avatars */
html[lang="fa"] .mx_Pill {
    direction: ltr;
}

/* Emoji / Sticker picker */
html[lang="fa"] .mx_EmojiPicker {
    direction: ltr;
}

/* Invite dialog */
html[lang="fa"] .mx_InviteDialog_flexWrapper {
    direction: rtl;
}

/* Room creation dialog */
html[lang="fa"] .mx_CreateRoomDialog {
    direction: rtl;
    text-align: right;
}

/* Breadcrumbs */
html[lang="fa"] .mx_LeftPanel_breadcrumbsContainer {
    direction: rtl;
}

/* Power level indicators */
html[lang="fa"] .mx_EntityTile {
    direction: rtl;
}

/* Verification / Security */
html[lang="fa"] .mx_CompleteSecurity_actionRow {
    direction: rtl;
}

/* Call events */
html[lang="fa"] .mx_CallEvent {
    direction: rtl;
}

/* SpacePanel UserMenu margin fix */
html[lang="fa"] .mx_SpacePanel .mx_UserMenu {
    margin: 12px 18px 4px 14px !important;
}

/* MainSplit maximised widget panel */
html[lang="fa"] .mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
    margin-right: 8px !important;
    margin-right: var(--container-gap-width) !important;
    margin-left: 4px !important;
    margin-left: calc(var(--container-gap-width) / 2) !important;
}

/* CompleteSecurity icon margin */
html[lang="fa"] .mx_E2EIcon.mx_CompleteSecurity_headerIcon {
    margin-right: 0 !important;
    margin-left: 4px !important;
}

/* LoginWithQR button icon margin */
html[lang="fa"] .mx_LoginWithQRSection .mx_AccessibleButton svg {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* Device details border */
html[lang="fa"] .mx_DeviceDetails {
    direction: rtl;
    text-align: right;
}

/* Selected message highlight border */
html[lang="fa"] .mx_EventTile_selected .mx_EventTile_line {
    border-inline-start: var(--selected-message-border-width, 4px) solid var(--cpd-color-border-interactive-primary) !important;
    border-inline-end: none !important;
}

/* Poll option progress bar margin */
html[lang="fa"] .mx_PollOption_popularityBackground {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* Dialog buttons spacing */
html[lang="fa"] .mx_Dialog button:not(.mx_Dialog_nonDialogButton,.mx_AccessibleButton),
html[lang="fa"] .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton,.mx_AccessibleButton) {
    margin-inline-start: 0 !important;
    margin-inline-end: 8px !important;
}

/* Toggles/sliders: keep LTR mechanics, only label text is RTL */
html[lang="fa"] .mx_Toggle,
html[lang="fa"] [class*="cpd-Toggle"],
html[lang="fa"] [class*="cpd-Slider"],
html[lang="fa"] input[type="range"] {
    direction: ltr;
}

/* Compound design system - preserve inherited direction */
html[lang="fa"] [class*="cpd-"] {
    direction: inherit;
}