/* RTL Input Fix - Forces RTL direction on main chat textarea when user has RTL preference */
/* When RTL is preferred, force text direction on the input textarea.
*
* שימוש ב-`unicode-bidi: embed` (ולא `plaintext`):
* `plaintext` קובע כיוון לכל שורה לפי התו הכיווני החזק הראשון בה, וברירת
* המחדל לשורה ללא תווים חזקים היא LTR. כתוצאה מכך הקלדת תו "-" בתחילת
* שורה ריקה (תוכנון שכיח לרשימת תבליטים) מוצגת ככיוון LTR והסמן נופל
* לצד ימין של התו במקום לצד שמאלו, בניגוד למצופה ב-RTL.
*
* `embed` משבץ את כיוון ה-RTL של ההורה ככיוון בסיס של ה-textarea: כל
* שורה היא RTL כברירת מחדל, אך אלגוריתם ה-Bidi של HTML עדיין יציג
* רצפים של אותיות לטיניות בכיוונם הטבעי (LTR-בתוך-RTL). כך תווים
* ניטרליים כמו "-" מקבלים כיוון RTL, והסמן יושב במקום הצפוי ב-RTL. */
html[data-rtl="true"] textarea,
html[data-rtl="true"] textarea#prompt-textarea,
html[data-rtl="true"] textarea[data-testid="text-input"],
html[data-rtl="true"] [id*="prompt"],
html[data-rtl="true"] .text-input {
direction: rtl !important;
text-align: right !important;
unicode-bidi: embed !important;
}
/* Also flip the entire input container for proper RTL layout */
html[data-rtl="true"] form[class*="flex"],
html[data-rtl="true"] div[class*="flex"]:has(textarea) {
direction: rtl !important;
}
/* Ensure all textareas in chat context get RTL */
html[data-rtl="true"] textarea {
direction: rtl !important;
text-align: right !important;
}
/* ========== Main Layout Direction - Sidebar Side Placement ========== */
/*
LibreChat sets dir="rtl" on the main flex row only on the chat (/c/*) page.
On other pages (e.g. /agents, /share/*) the same container stays dir="ltr",
which puts the chat history sidebar on the LEFT instead of the right.
Forcing RTL here keeps the sidebar consistently next to the shared sidebar
on every page when the user is in RTL mode.
*/
html[data-rtl="true"] div.relative.z-0.flex.h-full.w-full.overflow-hidden {
direction: rtl !important;
}
/* ========== Chat-History Item Fade Gradient - Flip to End-of-Text Side ========== */
/*
Each chat-history row has a small fade gradient absolutely-positioned at the
right edge (Tailwind: right-0.5 bg-gradient-to-l rounded-r-md), designed to
fade out the end of overflowing text in LTR layouts. In RTL the row's icon
is on the right and the text overflow happens on the LEFT, so the fade ends
up blurring the icon instead of the text. Mirror it: place it on the left,
reverse the gradient direction, and round the left corners.
--tw-gradient-stops is updated automatically by Tailwind on hover, so the
hover color/position keep working without any extra rule.
*/
html[data-rtl="true"] div.pointer-events-none.bg-gradient-to-l.from-surface-primary-alt {
right: auto !important;
left: 0.125rem !important;
background-image: linear-gradient(
to right,
var(--tw-gradient-stops, #f7f7f8 0%, transparent)
) !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 0.375rem !important;
border-bottom-left-radius: 0.375rem !important;
}
/* ========== Chat History Sidebar - Complete Internal Reversal ========== */
/*
Same issue as controls nav: the sidebar moved from left to right,
but internal structure stayed the same (scrollbar on right, avatars on left).
Solution: Force RTL direction to flip the entire internal structure.
*/
/* Reverse the entire chat history sidebar internally */
html[data-rtl="true"] nav[data-testid="nav"],
html[data-rtl="true"] nav#chat-history-nav,
html[data-rtl="true"] nav[aria-label="נקה היסטוריה"],
html[data-rtl="true"] div[data-testid="nav"] {
direction: rtl !important;
}
/* Ensure all children inherit RTL - this flips scrollbar, avatars, etc */
html[data-rtl="true"] nav[data-testid="nav"] *,
html[data-rtl="true"] nav#chat-history-nav *,
html[data-rtl="true"] div[data-testid="nav"] * {
direction: rtl !important;
}
/* ========== User Profile Area (Bottom of Chat History Sidebar) RTL ========== */
/* Fix user profile button - SPECIFIC targeting */
html[data-rtl="true"] button[data-testid="nav-user"],
html[data-rtl="true"] button[aria-label*="חשבון"],
html[data-rtl="true"] button[aria-label*="הגדרות חשבון"] {
direction: rtl !important;
}
/* Fix user name text inside the button */
html[data-rtl="true"] button[data-testid="nav-user"] div,
html[data-rtl="true"] button[data-testid="nav-user"] span {
direction: rtl !important;
text-align: right !important;
}
/* Override text-left class ONLY in chat history sidebar */
html[data-rtl="true"] nav[data-testid="nav"] .text-left,
html[data-rtl="true"] button[data-testid="nav-user"] .text-left {
text-align: right !important;
}
/* ---------- שוליי הקצה של שורת הכפתורים בתיבת הכתיבה ----------
*
* ChatForm.tsx מכיל היום ענף RTL משלו (`ChatForm.tsx:139` קורא את
* `store.chatDirection`): הוא הופך את השורה ל-`flex-row-reverse` ובוחר ידנית
* `mr-2`/`ml-2` הפוך מ-LTR. אבל ההיפוך הידני הזה שגוי: עם `flex-row-reverse`
* בתוך RTL ציר-ההתחלה חוזר להיות שמאל, ולכן מהדק-הקבצים (הילד הראשון) נשאר
* בקצה השמאלי ולחצן השליחה (האחרון) בקצה הימני — בדיוק כמו ב-LTR. מכאן
* שהמרווח מקצה המיכל צריך להישאר על אותו צד פיזי כמו ב-LTR, ואילו המקור
* מעביר אותו לצד הפנימי. בלי הדריסה כאן שני הלחצנים נדבקים לשולי המיכל
* ומקבלים 16px מיותרים כלפי פנים. אומת: עם הכללים המרווח הוא 8px משני
* הצדדים (`gapLeft: 8, gapRight: 8`).
*
* ⚠️ העוגן מבני בכוונה, ולא לפי מה שיושב בתוך העוטף. הגרסה הקודמת מיקדה
* `div.ml-2:has(#send-button)`, אבל `ChatForm.tsx:705` משתמש באותו `div`
* עצמו גם ללחצן העצירה וגם ל-during-run — כך שברגע שהתשובה מתחילה להיווצר
* `#send-button` נעלם, הכלל מפסיק לתפוס, והמרווח קופץ 8px לצד השני באמצע
* הזרימה. הגיבויים שהיו שם (`[data-testid*="stop"]`) כיסו את לחצן העצירה
* אבל לא את `during-run-send-button`. עוגן מבני חסין לכל התרחישים האלה,
* וגם מכסה את עוטף `InterruptSteerButton` ב-`ChatForm.tsx:696` שלא היה
* מכוסה כלל. */
html[data-rtl="true"] div.flex.gap-2.pb-2.flex-row-reverse > div.ml-2 {
margin-left: 0 !important;
margin-right: 0.5rem !important;
}
html[data-rtl="true"] div.flex.gap-2.pb-2.flex-row-reverse > div.mr-2 {
margin-right: 0 !important;
margin-left: 0.5rem !important;
}
/* ========== Fix "רכיבי תצוגה" Button Order ========== */
/*
Fix the order of the "Artifacts" button when it's active with dropdown arrow.
The button has two parts: main button + dropdown arrow button.
In RTL, we need to reverse their order so the arrow appears on the LEFT side.
TARGETED FIX: Only affects the specific container with "רכיבי תצוגה" button.
IMPORTANT: ה-`:not([role="switch"])` חיוני! ב-Agent Configuration Form
(סרגל בניית הסוכן) קיים switch עם `aria-label="אפשר רכיבי תצוגה"` - הוא
*נתפס* על-ידי `aria-label*="רכיבי תצוגה"`, ובלי החריג הזה היינו הופכים
גם את שורת ה-switch הזה ל-row-reverse, מה שגרם לכיוון אובייקטים הפוך
מ-2 שורות ה-switches שמתחתיו ("יש לכלול הוראות..." ו"מצב הנחיה...").
*/
html[data-rtl="true"] div.flex:has(> button[aria-label*="רכיבי תצוגה"]:not([role="switch"])) {
flex-direction: row-reverse !important;
}
/* ========== Controls Nav - Step by Step Fixes ========== */
/* Step 1: Fix border - move from left (outer) to right (inner) */
html[data-rtl="true"] nav#controls-nav,
html[data-rtl="true"] nav[aria-label="פקדים"] {
border-left: none !important;
border-right: 1px solid rgb(var(--border-light, 229 231 235)) !important;
}
/* Step 2: Flip the toggle button arrow direction */
html[data-rtl="true"] #toggle-right-nav,
html[data-rtl="true"] button[aria-controls="controls-nav"] {
transform: scaleX(-1) !important;
}
/* Fix settings button arrow direction */
html[data-rtl="true"] button[aria-label*="Settings"] svg,
html[data-rtl="true"] button[aria-label*="הגדרות"] svg {
transform: scaleX(-1) !important;
}
/* Fix any chevron/arrow icons in RTL */
html[data-rtl="true"] svg[class*="chevron"],
html[data-rtl="true"] svg[data-icon*="chevron"] {
transform: scaleX(-1) !important;
}
/* Prevent model selector and buttons from moving */
html[data-rtl="true"] header,
html[data-rtl="true"] header > div {
direction: rtl !important;
}
/* Fix header alignment - ensure no gaps */
html[data-rtl="true"] header [class*="flex"] {
direction: rtl !important;
}
/* Remove padding/margin that causes gaps in header */
html[data-rtl="true"] header,
html[data-rtl="true"] header > *,
html[data-rtl="true"] main > header,
html[data-rtl="true"] main > div > header {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure header content is flush with sidebar */
html[data-rtl="true"] header > div:first-child {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix main content area to remove left padding that causes gap */
html[data-rtl="true"] main,
html[data-rtl="true"] main > div {
padding-left: 0 !important;
}
/* Fix model selector buttons - flip translate from left to right */
html[data-rtl="true"] .translate-x-\[-100px\]:not([class*="opacity-0"]) {
transform: translateX(100px) !important;
}
/* ========== Dropdown/Popover Menus RTL ========== */
/* Fix model selector dropdown text alignment */
html[data-rtl="true"] [role="menu"],
html[data-rtl="true"] [role="listbox"],
html[data-rtl="true"] [role="dialog"],
html[data-rtl="true"] div[class*="popover"],
html[data-rtl="true"] div[data-radix-popper-content-wrapper] {
direction: rtl !important;
text-align: right !important;
}
/* Menu items inside dropdowns */
html[data-rtl="true"] [role="menuitem"],
html[data-rtl="true"] [role="option"],
html[data-rtl="true"] button[role="menuitem"],
html[data-rtl="true"] div[role="menuitem"] {
direction: rtl !important;
text-align: right !important;
}
/* MCP tools menu */
html[data-rtl="true"] [class*="dropdown"],
html[data-rtl="true"] [class*="menu"] {
direction: rtl !important;
text-align: right !important;
}
/* Fix any button text inside menus */
html[data-rtl="true"] [role="menu"] button,
html[data-rtl="true"] [role="menu"] span,
html[data-rtl="true"] [role="listbox"] button,
html[data-rtl="true"] [role="listbox"] span {
direction: rtl !important;
text-align: right !important;
}
/* Fix model selector button text */
html[data-rtl="true"] button[aria-haspopup="menu"],
html[data-rtl="true"] button[aria-haspopup="listbox"] {
direction: rtl !important;
text-align: right !important;
}
/* Radix UI specific fixes */
html[data-rtl="true"] [data-radix-popper-content-wrapper],
html[data-rtl="true"] [data-radix-select-content],
html[data-rtl="true"] [data-radix-dropdown-menu-content] {
direction: rtl !important;
text-align: right !important;
}
/* ========== Settings Dialog/Panel RTL ========== */
/* Settings panel/dialog - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]),
html[data-rtl="true"] [role="dialog"]:not(#controls-nav),
html[data-rtl="true"] div[class*="settings"],
html[data-rtl="true"] div[class*="panel"] {
direction: rtl !important;
text-align: right !important;
}
/* Settings menu items (כללי, צ'אט, וכו') - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) nav,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) button,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) a,
html[data-rtl="true"] [role="tablist"],
html[data-rtl="true"] [role="tab"] {
direction: rtl !important;
text-align: right !important;
}
/* Remove horizontal line under last tab - EXCLUDE controls nav */
html[data-rtl="true"] [role="tablist"]::after,
html[data-rtl="true"] [role="tab"]:last-child::after,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) nav::after {
display: none !important;
border: none !important;
}
/* Remove any separators/dividers - EXCLUDE controls nav */
html[data-rtl="true"] [role="tablist"] hr,
html[data-rtl="true"] [role="tablist"] + hr,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) hr {
display: none !important;
}
/* Settings content area - EXCLUDE controls nav */
html[data-rtl="true"] [role="tabpanel"],
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) > div,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) section {
direction: rtl !important;
text-align: right !important;
}
/* Settings labels and text - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) label,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) p,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) span,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) h1,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) h2,
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) h3 {
direction: rtl !important;
text-align: right !important;
}
/* Settings toggles and controls alignment - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) [class*="flex"],
html[data-rtl="true"] [role="tabpanel"] [class*="flex"] {
direction: rtl !important;
}
/* Fix settings dialog container */
html[data-rtl="true"] [data-radix-dialog-content],
html[data-rtl="true"] div[role="dialog"]:not(#controls-nav) {
direction: rtl !important;
}
/* Generic Radix/OGDialog header alignment.
Most LibreChat dialogs render OGDialogHeader as:
...
.
The responsive `sm:text-left` keeps titles visually on the left in desktop
RTL unless the header and title are widened/aligned explicitly. */
html[data-rtl="true"] [role="dialog"] > div[class*="space-y-1.5"][class*="text-center"] {
align-items: stretch !important;
direction: rtl !important;
text-align: right !important;
width: 100% !important;
}
html[data-rtl="true"] [role="dialog"] > div[class*="space-y-1.5"][class*="text-center"] h1,
html[data-rtl="true"] [role="dialog"] > div[class*="space-y-1.5"][class*="text-center"] h2,
html[data-rtl="true"] [role="dialog"] > div[class*="space-y-1.5"][class*="text-center"] h3,
html[data-rtl="true"] [role="dialog"] > div[class*="space-y-1.5"][class*="text-center"] p {
direction: rtl !important;
text-align: right !important;
width: 100% !important;
}
/* Flip the settings layout - move tabs sidebar to the right - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) > div:first-child,
html[data-rtl="true"] [role="dialog"]:not(#controls-nav) > div:first-child,
html[data-rtl="true"] div[class*="settings"] > div {
flex-direction: row-reverse !important;
}
/* Ensure the tabs panel appears on the right - EXCLUDE controls nav */
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) [class*="flex-row"],
html[data-rtl="true"] [role="dialog"]:not(#controls-nav) [class*="flex-row"] {
flex-direction: row-reverse !important;
}
/* Fix border + width of tablists - ONLY inside settings dialog/aside (not in
* marketplace/agent center where tabs need to flow horizontally).
* The settings dialog wraps its tabs in `aside` or `[role="dialog"]`; the
* agent-center category tabs sit in plain `main`/`div` and should NOT be
* forced to full-width. */
html[data-rtl="true"] [role="dialog"]:not(#controls-nav) [role="tablist"],
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) [role="tablist"] {
border: none !important;
min-width: 160px !important;
width: auto !important;
}
/* Ensure tab buttons have enough width but not too much - settings-dialog only */
html[data-rtl="true"] [role="dialog"]:not(#controls-nav) [role="tab"],
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) [role="tab"] {
min-width: 140px !important;
width: 100% !important;
padding-right: 0.75rem !important;
padding-left: 0.75rem !important;
display: flex !important;
direction: rtl !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: right !important;
}
/* ============================================================
* חלון ההגדרות במובייל (max-width: 767px) — שחזור פריסת הלשוניות
*
* הכללים לעיל (358–395) מעצבים את לשוניות חלון ההגדרות כסיידבר אנכי בצד ימין
* (Tabs.Root → row-reverse, כל לשונית ברוחב 140px/100% ובגובה מלא). זה נכון
* לדסקטופ בלבד. במובייל LibreChat מרנדר את הלשוניות כשורה אופקית ברוחב שווה
* (flex-1) מעל התוכן (Tabs.Root=flex-col, Tabs.List=flex-row, ראה Settings.tsx).
* בלי העקיפה כאן, ה-row-reverse + הרוחב/גובה הקבועים מנפחים את שורת הלשוניות
* מעבר למסך (scrollWidth ~700px, גובה ~720px) והפאנל קורס לאזור ריק. כאן
* משחזרים את הפריסה הניידת תוך שמירה על יישור RTL (הלשונית הראשונה מימין).
*
* הסלקטורים ממוקדים ב-aria-label="Settings" + :has() כדי לנצח בספציפיות את
* הכללים הכלליים שלמעלה ולא לפגוע בדיאלוגים אחרים.
* ============================================================ */
@media (max-width: 767px) {
/* Tabs.Root: עמודה (לשוניות למעלה, תוכן מתחת) במקום row-reverse */
html[data-rtl="true"]
[role="dialog"]:not(#controls-nav)
[class*="flex-col"]:has(> [role="tablist"][aria-label="Settings"]) {
flex-direction: column !important;
}
/* Tabs.List: שורת לשוניות אופקית ברוחב מלא וגובה טבעי. סדר RTL מתקבל מ-row
* יחד עם direction:rtl שכבר חל מהכללים הכלליים (הלשונית הראשונה מימין). */
html[data-rtl="true"]
[role="dialog"]:not(#controls-nav)
[role="tablist"][aria-label="Settings"] {
flex-direction: row !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
}
/* Tabs.Trigger: רוחב לפי תוכן עם גלילה אופקית, ממורכז וגובה טבעי
* (במקום 140px/100% ומלא-גובה שנכפו עבור הסיידבר בדסקטופ) */
html[data-rtl="true"]
[role="dialog"]:not(#controls-nav)
[role="tablist"][aria-label="Settings"]
[role="tab"] {
flex: 1 1 0% !important;
width: auto !important;
min-width: auto !important;
height: auto !important;
justify-content: center !important;
}
}
/* ============================================================
* Radix Dialog close button - move from top-right to top-left in RTL
* Radix UI renders Dialog.Close as `