/* * Persian (fa_IR) RTL geometry for AI Engine. * --------------------------------------------------------------------------- * WHAT THIS COVERS * The free AI Engine core lays out its admin SPA and chat themes with physical * direction declarations. Measured directional debt (counter script, see the * connector build log): * app/workspace.css 40 themes/chatgpt.css 120 foundation.css 112 * themes/glass.css 123 messages.css 121 timeless.css 119 * Concretely: horizontal margins/paddings that push content the wrong way * (a message list keeps its 15px gutter on the wrong edge, the sidebar keeps * its rail on the wrong side), border-left/right accent bars (blockquote, the * tool-approval card, Glass inline engine spans), text-align:left/right in the * SPA, absolute left/right offsets on popovers, menus, badges and hover * toolbars, asymmetric bubble corner radii, and two physical translateX calls. * * WHY LOGICAL PROPERTIES FIRST * margin-inline-start, padding-inline, border-inline-end, inset-inline-start * and the logical corner radii resolve to the SAME physical side as the * originals while the container is LTR, so re-asserting them is layout-neutral * in English and flips automatically once the container resolves to RTL. That * is strictly better than a pile of [dir=rtl] .x{margin-left:0;margin-right:8px} * pairs, which double every rule and drift out of sync. * * IMPORTANT, AND MEASURED: a logical property does NOT cancel a physical one. * Injecting only margin-inline-start:15px on a rule that already declared * margin-left:15px produced 15px on BOTH sides in RTL (the logical one added * the start gutter, the physical one stayed). So every rule below states BOTH * logical sides -- the one that should carry the value and an explicit zero / * auto for the other -- which clears the original declaration from the computed * style no matter which direction wins. * * DIRECTION SOURCE * This sheet never sets direction itself. Measured: the local WordPress install * resolves to LTR (document.dir === "", lang="en-US", the settings root computes * direction:ltr), and the sibling assets/persian.css does not set direction:rtl * on the roots either. Under LTR every rule here is either a no-op or reproduces * the original geometry, so the sheet cannot regress the English layout; the * moment an RTL direction is established (by the Persian / i18n layer, on html * or on the container) the same rules flip. The few rules with no logical * equivalent match on the [dir="rtl"] attribute when the site sets one, and on * the bare theme class when it does not - which is this install, where html and * body carry no direction. They deliberately do NOT use :dir(rtl): measured * 2026-10-21, :dir() resolves from the direction of the element or an ancestor * and does not see a direction a stylesheet set, so every :dir(rtl) selector in * this layer matched nothing. See section 2 and section 5 for the full record. * * SCOPE * Every selector is anchored to an AI Engine container: the six SPA roots named * in the connector contract, #mwai-workspace (measured: the real Workspace page * renders
, which the six-root list omits), or one of * the five measured chatbot theme classes. Measured: the chatbot root carries * .mwai-chat plus the theme class; a bare .mwai-chatbot class does not exist in * the shipped CSS, so the theme classes are the authoritative frontend scope. * wp-admin own chrome is never touched. * * ORDERING * These rules match the originals at EQUAL specificity, so enqueue this file * AFTER ai-engine app/workspace.css and themes/*.css. (Verified by injecting it * last in a real browser: the overrides win.) * * DELIBERATELY NOT DONE * - Digits are not converted and columns are not re-ordered: the bidi algorithm * already keeps a digit run LTR inside its cell, so "1,536" cannot mirror to * "6351". Tables only gain tabular-nums so figures line up. * - The window / trigger anchors .mwai-window{right:30px}, .mwai-trigger{right:0} * and the .mwai-bottom-right / .mwai-top-left variants are NOT mirrored: they * encode a PHYSICAL corner the operator picked, so mirroring them would move * the widget and its launcher. * - transform-origin is not mirrored for the same reason (it is paired with * those physical anchor classes). */ /* =========================================================================== * 1. Workspace (admin SPA) -- #mwai-workspace * The [data-theme] attribute is present on the measured root, so these rules sit * one class above the originals and do not depend on stylesheet order. * =========================================================================== */ /* Rail + sidebar hairline sits on the reader start edge. Both sides stated so * the original border-right cannot linger in RTL. */ #mwai-workspace[data-theme] .mwai-ws-rail, #mwai-workspace[data-theme] .mwai-ws-sidebar { border-inline-start: 0 none; border-inline-end: 1px solid var(--hairline); } #mwai-workspace[data-theme] .mwai-ws-sidebar.collapsed { border-inline-start: 0 none; border-inline-end: 0 none; } /* Auto margins pin an item to the inline end; logical start solves both. */ #mwai-workspace[data-theme] .mwai-ws-back, #mwai-workspace[data-theme] .mwai-ws-folder-check, #mwai-workspace[data-theme] .mwai-ws-conv-actions, #mwai-workspace[data-theme] .mwai-ws-topbar-right, #mwai-workspace[data-theme] .mwai-ws-model-env .mwai-ws-env-chev, #mwai-workspace[data-theme] .mwai-ws-send, #mwai-workspace[data-theme] .mwai-ws-stop, #mwai-workspace[data-theme] .mwai-ws-pro-chip, #mwai-workspace[data-theme] .mwai-ws-feature-status, #mwai-workspace[data-theme] .mwai-ws-pin-btn { margin-inline-start: auto; margin-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-folder-group .mwai-ws-conv { margin-inline-start: 14px; margin-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-accent-name { margin-inline-start: 3px; margin-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-feature-status + .mwai-ws-pin-btn { margin-inline-start: 8px; margin-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-feature-row { padding-inline-start: 0; padding-inline-end: 8px; } /* Popovers, menus, badges and inline icons positioned with left/right. */ #mwai-workspace[data-theme] .mwai-ws-rail-soon { inset-inline-start: auto; inset-inline-end: -20px; } #mwai-workspace[data-theme] .mwai-ws-search svg { inset-inline-start: 10px; inset-inline-end: auto; } #mwai-workspace[data-theme] .mwai-ws-folder-menu { inset-inline-start: auto; inset-inline-end: 8px; } #mwai-workspace[data-theme] .mwai-ws-model-menu { inset-inline-start: auto; inset-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-msg-menu, #mwai-workspace[data-theme] .mwai-ws-pop { inset-inline-start: 0; inset-inline-end: auto; } #mwai-workspace[data-theme] .mwai-ws-tune .mwai-ws-pop.mwai-ws-tune-pop { inset-inline-start: auto; inset-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-pop-check { inset-inline-start: auto; inset-inline-end: 10px; } #mwai-workspace[data-theme] .mwai-ws-tune-dot { inset-inline-start: auto; inset-inline-end: 5px; } #mwai-workspace[data-theme] .mwai-ws-icon-badge { inset-inline-start: auto; inset-inline-end: -3px; } /* Left-aligned menu rows become start-aligned. */ #mwai-workspace[data-theme] .mwai-ws-folder-menu-item, #mwai-workspace[data-theme] .mwai-ws-model-item, #mwai-workspace[data-theme] .mwai-ws-msg-menu button, #mwai-workspace[data-theme] .mwai-ws-pop-item { text-align: start; } /* Lists, table cells and quotes inside a message body. */ #mwai-workspace[data-theme] .mwai-ws-body ul, #mwai-workspace[data-theme] .mwai-ws-body ol { padding-inline-start: 24px; padding-inline-end: 0; } #mwai-workspace[data-theme] .mwai-ws-body th, #mwai-workspace[data-theme] .mwai-ws-body td { text-align: start; } #mwai-workspace[data-theme] .mwai-ws-body blockquote { border-inline-start: 3px solid color-mix(in srgb, var(--accent) 55%, var(--hairline)); border-inline-end: 0 none; } /* The tool-approval card accent bar follows the reader start edge. */ #mwai-workspace[data-theme] .mwai-ws-approval { border-inline-start: 3px solid var(--accent); border-inline-end: 0 none; } /* Bubbles: the 4px tail was bottom-right in the source; logical corners move it * to the reader bottom-end on their own. Source shorthand was 16px 16px 4px 16px. */ #mwai-workspace[data-theme] .mwai-ws-bubble, #mwai-workspace[data-theme] .mwai-ws-edit { border-start-start-radius: 16px; border-start-end-radius: 16px; border-end-start-radius: 16px; border-end-end-radius: 4px; } /* =========================================================================== * 2. Frontend chatbot themes * =========================================================================== */ /* * The chatbot root must be told its direction explicitly, because AI Engine * renders it with `dir="auto"` and that resolves per-element, not per-page. * * MEASURED on the live site, 2026-10-21: the widget root `#mwai-chatbot-default` * carries `dir="auto"`. On desktop the first strong character of the widget's * content happens to be Persian, so `auto` resolves RTL and the box looks * correct. On mobile (390x844) the same element resolved `direction: ltr` and * every descendant inherited it - `mwai-window`, `mwai-body`, `mwai-input` and * the textarea all computed `direction: ltr`. That is the operator's "the * message box is still left-to-right on mobile". The page itself is RTL * (``, `body.rtl`), so this is the widget's own * `auto` losing to whatever content resolves first, not a page-level problem. * * `dir` is an HTML attribute, not a CSS property, and CSS cannot set it - but * `direction` is a CSS property and it wins over the attribute's `auto` result * for every element this rule matches. Stating it on the theme class covers the * root and is inherited by the whole subtree, which is what makes the input, * the placeholder and the send row agree with the page. * * Scoped to the five measured theme classes so nothing outside the widget moves. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) { direction: rtl; } /* * The greeting bubble must hug the physical RIGHT edge of the launcher. * * MEASURED, 2026-10-21 at 1440x900 / 834x1112 / 390x844: `align-items` on both * `.mwai-trigger` and `.mwai-icon-text-container` was upstream's `end` / * `flex-end` (`themes/messages.css:1887` and `:1893`), and both are COLUMN * flexboxes - so the moment this sheet sets the widget to RTL the cross-axis END * becomes the LEFT and the shrink-wrapped chip is placed against the left of the * launcher. `bubble.right - trigger.right` measured -24.4 px. * * Both levels are corrected, because `.mwai-trigger` places the inner container * at its own cross edge first. `.mwai-trigger` is full width inside its box and * the robot is a full 64 px, so flipping the cross alignment moves only the chip * and leaves the robot where it was. * * THE DIRECTION GUARD IS THE SHEET, NOT A SELECTOR. An earlier revision stated * this rule with `:dir(rtl)` in assets/persian.css and it never matched once: * `:dir()` resolves from the direction of the element or an ancestor, it does * not see a `direction` that a stylesheet set, and this install's html and body * carry no direction at all. This file is enqueued only when * MWAI_GapGPT_Persian::is_persian(), which is precisely the condition wanted, so * no pseudo-class has to guess. * * The `.mwai-chatbot-container` form is stated first on purpose: it raises * specificity to (0,3,0) against upstream's (0,2,0), so the flip holds even if * enqueue order ever changes. */ .mwai-chatbot-container :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-trigger, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-chatbot-container .mwai-trigger, .mwai-chatbot-container :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-trigger .mwai-icon-text-container, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-chatbot-container .mwai-trigger .mwai-icon-text-container { align-items: flex-start; } /* Latin runs inside the widget (codes, URLs, numbers) stay LTR, as elsewhere. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) code, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) pre, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) input[type="number"], :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) input[type="url"], :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) input[type="email"], :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) input[type="tel"] { direction: ltr; text-align: left; unicode-bidi: embed; } /* Message-body lists: source margin: 0 0 0 15px. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text ul, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text ol { margin-inline-start: 15px; margin-inline-end: 0; } /* Table cells inside a reply. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text th, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text td { text-align: start; } /* Shortcut chips, the compliance footnote and the input counter. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-shortcuts .mwai-shortcut, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-compliance { text-align: start; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-footer .mwai-tools + .mwai-compliance, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input-counter { text-align: end; } /* User vs assistant alignment. end resolves right in LTR and left in RTL, so the * visitor own bubbles swap sides with the reader; the text stays start-aligned. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user { text-align: end; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user .mwai-text { text-align: start; } /* Avatar / name gutters and the footer tool row. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-name, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user .mwai-name .mwai-name-text { margin-inline-start: 0; margin-inline-end: 5px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-name .mwai-avatar, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user .mwai-name .mwai-name-text { margin-inline-end: 10px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-footer .mwai-tools { margin-inline-start: 0; margin-inline-end: calc(var(--mwai-spacing) / 2); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-ai .mwai-reply-actions { margin-inline-start: -7px; margin-inline-end: 0; } /* File preview, terminal prompt and timer gutters. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-files .mwai-file-preview .mwai-file-remove { margin-inline-start: auto; margin-inline-end: 0; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-terminal .mwai-terminal-prompt, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-terminal-line .mwai-terminal-prompt { margin-inline-start: -4px; margin-inline-end: 4px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) button .mwai-timer { margin-inline-start: 5px; margin-inline-end: 5px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-form-container .mwai-form-submit.mwai-loading button .mwai-timer, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-form-container .mwai-form-reset.mwai-loading button .mwai-timer { margin-inline-start: 16px; margin-inline-end: 0; } /* Reply toolbar, upload badge and the per-row hover toolbar. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply-actions { inset-inline-start: auto; inset-inline-end: 10px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-error .mwai-reply-actions, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-conversation .mwai-reply.mwai-error .mwai-reply-actions { inset-inline-start: auto; inset-inline-end: auto; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide .mwai-upload-count, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text .mwai-file-upload-icon.mwai-lucide .mwai-upload-count { inset-inline-start: auto; inset-inline-end: -6px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide) .mwai-file-upload-progress { inset-inline-start: 23px; inset-inline-end: auto; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-discussions .mwai-discussion .mwai-discussion-actions { inset-inline-start: auto; inset-inline-end: calc(var(--mwai-spacing) / 2); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-conversation .mwai-reply:not(.mwai-error) .mwai-reply-actions { inset-inline-start: 100%; inset-inline-end: auto; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-conversation .mwai-reply.mwai-user:not(.mwai-error) .mwai-reply-actions { inset-inline-start: auto; inset-inline-end: 100%; } /* Window header, close button and the header name gutter. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window .mwai-header .mwai-buttons { margin-inline-start: auto; margin-inline-end: 0; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window .mwai-header .mwai-buttons .mwai-close-button { margin-inline-start: -10px; margin-inline-end: 0; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window .mwai-header .mwai-name { margin-inline-start: var(--mwai-spacing); margin-inline-end: 0; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-trigger .mwai-icon-text-container .mwai-icon-text .mwai-icon-text-close { margin-inline-start: auto; margin-inline-end: -4px; } /* Text-area and transcript paddings. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text textarea { padding-inline-start: calc(var(--mwai-spacing) / 2); padding-inline-end: calc(var(--mwai-spacing) / 2); } /* * the textarea must state its own direction, not only inherit it. * * MEASURED 2026-10-21 on the live site: the widget root carries `dir="auto"` * and on mobile (390x844) it resolved LTR, so the placeholder «متن پیام شما» * rendered flush left. The rule above sets `direction` on the theme class, but * the vendor bundle re-applies `dir="auto"` per element and some themes align * descendants physically - so the box must say it itself. Stating direction AND * text-align on the field is what makes the placeholder and the text agree with * the page on every theme. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text textarea, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text input { direction: rtl !important; text-align: right !important; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-input .mwai-input-text textarea::placeholder { text-align: right !important; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-realtime .mwai-last-transcript { padding-inline-end: calc(var(--mwai-spacing) / 2 + 10px); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-discussions .mwai-discussion { padding-inline: calc(var(--mwai-spacing) / 2); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window.mwai-open, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window.mwai-open .mwai-mobile-header { padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window.mwai-open .mwai-mobile-header { padding-inline: calc(15px + env(safe-area-inset-left, 0)) calc(15px + env(safe-area-inset-right, 0)); } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window .mwai-header { padding-block: 0; padding-inline-start: 15px; padding-inline-end: 0; } /* Code-block headers carry a 12px leading pad. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text .mwai-code-header { padding-block: 4px; padding-inline: 12px 6px; } /* Chunk status toggles (Knowledge-style panels rendered inside the chatbot). */ .mwai-chat .mwai-chunks .mwai-chunks-header .mwai-chunks-status, .mwai-chat .mwai-chunks .mwai-chunks-header .mwai-chunks-toggle { margin-inline-start: 4px; margin-inline-end: 0; } /* --- Theme-specific values ----------------------------------------------- */ /* Bubble tails, expressed as logical corners so they flip with the reader. */ .mwai-glass-theme .mwai-conversation .mwai-reply.mwai-ai, .mwai-glass-theme .mwai-conversation .mwai-reply.mwai-error { border-start-start-radius: 20px; border-start-end-radius: 20px; border-end-start-radius: 7px; border-end-end-radius: 20px; } .mwai-glass-theme .mwai-conversation .mwai-reply.mwai-user { border-start-start-radius: 20px; border-start-end-radius: 20px; border-end-start-radius: 20px; border-end-end-radius: 7px; } .mwai-glass-theme .mwai-reply.mwai-ai .mwai-text blockquote { border-inline-start: 3px solid transparent; border-inline-end: 0 none; } .mwai-messages-theme .mwai-conversation .mwai-reply.mwai-ai, .mwai-messages-theme .mwai-conversation .mwai-reply.mwai-error { border-end-start-radius: 5px; } .mwai-messages-theme .mwai-conversation .mwai-reply.mwai-ai:has(+ .mwai-reply.mwai-ai), .mwai-messages-theme .mwai-conversation .mwai-reply.mwai-error:has(+ .mwai-reply.mwai-ai) { border-end-start-radius: 15px; margin-block-end: 4px; } .mwai-messages-theme .mwai-conversation .mwai-reply.mwai-user:has(+ .mwai-reply.mwai-user) { border-end-end-radius: 15px; margin-block-end: 4px; } /* * The message box must NOT be mirrored. This is a correction, and it replaces an * earlier mirroring rule that was itself the bug. * * MEASURED on the live site, 2026-10-21, desktop 1440x900 and tablet 834x1112: * the send button sits at the PHYSICAL right of the input row in every direction * (`themes/messages.css` anchors it with `right: var(--mwai-submitRight)`), while * the source reserves room for it with a PHYSICAL `padding-right`. The mirrored * rule moved that reserve to the logical end, which in RTL is the LEFT, leaving * only 6px between the text and the button that is still on the right. Rendered * result: textarea `padL=88px padR=6px` against a button occupying 70x32px on the * right - a measured 70x32px overlap, so typed Persian text runs underneath the * send button. That is the operator's "text went under the send button". * * The correct rule is therefore the source's own geometry, stated physically, so * it agrees with wherever the button actually is. `padding-inline-*` is * deliberately NOT used here: a logical property cannot describe an element that * is anchored physically. * * The `min-width` guard matters. Below 760px the source turns the submit button * into a full-width, statically positioned block (`position: relative`, * `width: 100%`) and reduces this padding to `var(--mwai-spacing)`. Because this * sheet is enqueued after the themes it would otherwise win that tie and reserve * 70px for a button that is no longer beside the text. */ @media (min-width: 761px) { .mwai-messages-theme .mwai-input .mwai-input-text textarea { padding-left: var(--mwai-spacing); padding-right: calc(70px + var(--mwai-spacing) + 6px); } /* * glass/timeless anchor their own submit button the same physical way but with * a smaller token, so they need their own reserve. Without this the text runs * under the button on exactly those themes. */ .mwai-glass-theme .mwai-input .mwai-input-text textarea, .mwai-timeless-theme .mwai-input .mwai-input-text textarea { padding-left: var(--mwai-spacing); padding-right: calc(var(--mwai-submitSize, 40px) + var(--mwai-spacing) + 15px); } } /* * chatgpt/foundation put the send button in NORMAL flow, so RTL reverses the row * and the vendor's own gap is not guaranteed to hold. Pin the order and give the * row an explicit gap, so the button never lands on top of the field's text. * `order` is used instead of relying on `row-reverse` because the vendor may set * either, and these two declarations settle it in both directions. */ .mwai-chatgpt-theme .mwai-input, .mwai-foundation-theme .mwai-input { flex-direction: row !important; column-gap: 8px; } .mwai-chatgpt-theme .mwai-input .mwai-input-text, .mwai-foundation-theme .mwai-input .mwai-input-text { order: 2; flex: 1 1 auto; min-width: 0; } .mwai-chatgpt-theme .mwai-input .mwai-input-submit, .mwai-foundation-theme .mwai-input .mwai-input-submit { order: 1; flex: 0 0 auto; } .mwai-timeless-theme .mwai-conversation .mwai-reply.mwai-ai, .mwai-timeless-theme .mwai-conversation .mwai-reply.mwai-error { border-end-start-radius: calc(var(--mwai-borderRadius) / 3); } .mwai-timeless-theme .mwai-conversation .mwai-reply.mwai-user { border-end-end-radius: calc(var(--mwai-borderRadius) / 3); } .mwai-timeless-theme.mwai-window .mwai-header .mwai-buttons { margin-inline-start: auto; margin-inline-end: var(--mwai-spacing); } .mwai-timeless-theme.mwai-window .mwai-header .mwai-name { margin-inline-start: var(--mwai-spacing); margin-inline-end: 0; } /* Two-image thumbnails: the 4px corner was on the right in the source. */ :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image:nth-child(1) { border-start-start-radius: var(--mwai-borderRadius); border-start-end-radius: 4px; border-end-start-radius: var(--mwai-borderRadius); border-end-end-radius: 4px; } :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image:nth-child(2) { border-start-start-radius: 4px; border-start-end-radius: var(--mwai-borderRadius); border-end-start-radius: 4px; border-end-end-radius: var(--mwai-borderRadius); } /* =========================================================================== * 3. Technical content stays LTR (code, pre, monospace text areas) * persian.css already covers code/pre inside #mwai-admin-settings and * .mwai-chatbot, so those are omitted; this adds the remaining roots, the * theme scope and the code textarea. unicode-bidi: embed keeps the surrounding * paragraph order intact while forcing the code run LTR. * =========================================================================== */ :is(#mwai-admin-settings, #mwai-playground, #mwai-dashboard, #mwai-content-generator, #mwai-image-generator, #mwai-video-generator) pre, :is(#mwai-admin-settings, #mwai-playground, #mwai-dashboard, #mwai-content-generator, #mwai-image-generator, #mwai-video-generator) code, #mwai-workspace pre, #mwai-workspace code, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) pre, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) code, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) textarea.mwai-code, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-code, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-code-block { direction: ltr; text-align: left; unicode-bidi: embed; } /* =========================================================================== * 4. Tables / numbers * Digits are not converted and columns are not re-ordered; the figure column * is only given tabular numerals so values stay comparable at a glance. * =========================================================================== */ :is(#mwai-admin-settings, #mwai-playground, #mwai-dashboard, #mwai-content-generator, #mwai-image-generator, #mwai-video-generator) table, #mwai-workspace table, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text table { font-variant-numeric: tabular-nums; } /* =========================================================================== * 5. Fallbacks for properties with no logical equivalent * Matched on the html [dir="rtl"] attribute AND on this sheet's own scope. * * MEASURED, 2026-10-21: these rules used to carry a :dir(rtl) twin, and that * twin never matched anything on this install - :dir() resolves from the * direction of the element or an ancestor and does not see a `direction` set * by a stylesheet, while html and body carry no direction here. The twin was * therefore deleted rather than left to look like a second safety net. The * `[dir="rtl"]` half is kept for the site that does set the attribute, and the * bare theme-class half below is what carries the rule on this install - this * whole file is enqueued only when the install is Persian. * =========================================================================== */ /* AI Engine injects inline border-left accent spans into a reply, and the Glass * theme re-asserts them with !important. An inline style cannot be displaced by a * logical property, so this needs !important for exactly the same reason the * theme uses it: to move the accent bar to the reader start edge. The physical * bar is zeroed first, then redrawn on the other edge. */ [dir="rtl"] :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text span[style*="border-left"], :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme) .mwai-reply .mwai-text span[style*="border-left"] { border-left: 0 !important; border-right: 3px solid var(--mwai-accentColor) !important; margin-left: 0 !important; margin-right: 3px !important; } /* Context-menu rows nudge toward the inline end on hover with a physical * translateX, which has no logical equivalent and must be mirrored here. */ [dir="rtl"] :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-discussions .mwai-context-menu .mwai-menu-item:hover, :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-discussions .mwai-context-menu .mwai-menu-item:hover { transform: translateX(-2px); } /* =========================================================================== * 9. Window vs the site's sticky bottom navigation, and the carousel glyph * =========================================================================== */ /* * The chat window is bottom-anchored at 30px by every shipped theme, and this * site's own `nav.bodyman-mobile-nav` is a fixed 70px bar with a 12px bottom * inset (MEASURED 2026-10-21: height 70, bottom 12, z-index 99990) that appears * below ~1024px. So at mobile and tablet the window and the launcher both sit * UNDER the nav. `--bm-bottom-nav` is the single knob: set it to the measured * nav height and both anchors clear it. * * Only the BOTTOM anchors are raised - the top-anchored variants * (`.mwai-top-right` / `.mwai-top-left`) and the vendor's fullscreen rules * (`bottom: 0 !important`) are deliberately left alone, which is why the * `:not(.mwai-fullscreen)` guard is here. The vendor's own `max-height` is not * touched, so the window keeps its documented height budget. */ /* * The whole correction is confined to <=1024px, because that is the only range * in which the nav exists. Two consequences are deliberate: * * - Above 1024px nothing here applies, so the operator's own chatbot custom CSS * (which anchors the desktop launcher at `calc(3% + safe-area)`) keeps the * last word. A blanket rule would have pulled the desktop launcher from its * tuned 27px down to 16px - a change nobody asked for. * - The measured nav is 70px tall with a 12px bottom inset (MEASURED * 2026-10-21, identical at 390 and 834), so its lower edge sits 82px above the * viewport bottom. `70px + 16px = 86px` clears that edge by 4px - i.e. the * window is ABOVE the bar, not merely touching it. 74px was carried here * before; it was never a measurement, so it is gone. * * `html body` is prefixed for a measured reason: the operator's own rule for this * launcher is `.mwai-messages-theme.mwai-animation-zoom.mwai-window.mwai-bottom-right * .mwai-trigger` - five classes, exactly the same count as the selectors below - * and both sides say `!important`, so the winner would be decided by which * stylesheet happens to print last. Two extra element selectors (worth 0,0,2) * settle it in our favour deterministically instead of by luck. */ @media (max-width: 1024px) { :root { --bm-bottom-nav: 70px; } } @media (max-width: 1024px) { html body :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window:is(.mwai-bottom-right, .mwai-bottom-left):not(.mwai-fullscreen) { bottom: calc(var(--bm-bottom-nav, 0px) + 16px) !important; } html body :is(.mwai-chatgpt-theme, .mwai-foundation-theme, .mwai-glass-theme, .mwai-messages-theme, .mwai-timeless-theme).mwai-window:is(.mwai-bottom-right, .mwai-bottom-left):not(.mwai-fullscreen) .mwai-trigger { bottom: calc(var(--bm-bottom-nav, 0px) + 16px) !important; } } /* * Woo Basics renders the carousel arrows as the literal characters "←" / "→" * inside a styled-components button, so the glyph does not flip with the page * direction and points the wrong way in RTL. * * The button itself carries only a hashed class, but the container class * `mwai-product-carousel-container` is stable (mwai-woo-basics/classes/tools.php:432) * and the two arrows are the ONLY buttons that are direct grandchildren of it - * the card's "View Product" button is nested deeper inside the card. So * `> div > button` cannot catch the wrong button. */ .mwai-product-carousel-container > div > button, [dir="rtl"] .mwai-product-carousel-container > div > button { transform: scaleX(-1) !important; }