/* 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;
}

/* Fix send button spacing - replace ml-2 with mr-2 in RTL */
html[data-rtl="true"] div.ml-2:has(#send-button),
html[data-rtl="true"] div.ml-2:has(button[aria-label*="Stop"]),
html[data-rtl="true"] div.ml-2:has(button[aria-label*="עצור"]),
html[data-rtl="true"] div.ml-2:has(button[data-testid*="stop"]) {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* Fix attach button spacing - replace mr-2 with ml-2 in RTL */
html[data-rtl="true"] div.mr-2:has(button[id*="attach"]),
html[data-rtl="true"] div.mr-2:has(button[aria-label*="Attach"]) {
  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 var(--border-light, #e5e7eb) !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:
   <div class="flex flex-col space-y-1.5 text-center sm:text-left"><h2>...</h2></div>.
   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 `<button class="absolute right-4 top-4 ...">`
 * which sits in the top-right corner. In RTL the natural position for a close
 * affordance is the top-left, so we flip it. This applies globally to any
 * Radix dialog (settings, Admin Settings, agent details, etc).
 * ============================================================ */
html[data-rtl="true"] [role="dialog"] > button.absolute.right-4.top-4 {
  right: auto !important;
  left: 1rem !important;
}

/* Conversation delete confirmation dialog.
   LibreChat uses a generic Radix dialog with a `justify-end` footer. In RTL,
   flex-end sends the action buttons to the visual left, so this dialog needs a
   narrow override keyed by its stable description id. */
html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description),
html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description) h2,
html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description) #delete-conversation-description {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description) > div:first-child {
  align-items: flex-end !important;
  text-align: right !important;
  width: 100% !important;
}

html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description) h2 {
  width: 100% !important;
}

html[data-rtl="true"] [role="dialog"]:has(#delete-conversation-description) .justify-end {
  justify-content: flex-start !important;
}

/* Share conversation dialog title/header alignment. */
html[data-rtl="true"] [role="dialog"]:has(#share-conversation-dialog),
html[data-rtl="true"] [role="dialog"]:has(#share-conversation-dialog) h2,
html[data-rtl="true"] [role="dialog"]:has(#share-conversation-dialog) #share-conversation-dialog {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] [role="dialog"]:has(#share-conversation-dialog) > div:first-child {
  align-items: flex-end !important;
  text-align: right !important;
  width: 100% !important;
}

html[data-rtl="true"] [role="dialog"]:has(#share-conversation-dialog) h2 {
  width: 100% !important;
}

/* Export conversation dialog title/header alignment. */
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches),
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) h2 {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) > div:first-child {
  align-items: flex-end !important;
  text-align: right !important;
  width: 100% !important;
}

html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) h2 {
  width: 100% !important;
}

html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) label[for="filename"],
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) label[for="type"],
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) label[for="includeOptions"],
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) label[for="exportBranches"],
html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) label[for="recursive"] {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] [role="dialog"]:has(#filename):has(#exportBranches) button[role="checkbox"] + label {
  margin-left: 0 !important;
  margin-right: 0.75rem !important;
}

/* ============================================================
 * Agent Center (/agents) RTL fixes
 * - The marketplace wraps each category header in <div class="text-left">.
 *   In RTL we want the heading and description to be right-aligned.
 * ============================================================ */

/* Right-align the category heading + description inside agent center */
html[data-rtl="true"] main .text-left:has(> h2.text-2xl) {
  text-align: right !important;
}

/* Hide system/internal Agent Center categories.
 * `all` is generated by the LibreChat API; `subagents` is also disabled in Mongo
 * via seed-agent-categories.js. CSS is a UI guard for cached/stale responses and
 * for the generated `all` tab.
 * NOTE: `general` is intentionally NOT hidden — it is the default category for
 * user-created agents (reactivated in Mongo), so it must stay visible. */
[role="tablist"] #category-tab-all,
[role="tablist"] #category-tab-subagents {
  display: none !important;
}

/* ============================================================
 * Agent Center search bar (SearchBar.tsx) - flip icon + clear button in RTL.
 * Original layout:
 *   <div role="search">
 *     <input pl-12 pr-12>                           // input with padding both sides
 *     <div class="absolute inset-y-0 left-0 pl-4">  // search icon on the LEFT
 *       <svg class="lucide-search">                 //
 *     <button class="absolute right-4 top-1/2">     // clear-X button on the RIGHT (only when text present)
 *       <svg class="lucide-x">
 *
 * In RTL we want:
 *   - search icon on the RIGHT
 *   - clear-X on the LEFT
 * ============================================================ */

/* Move the search icon container from left to right */
html[data-rtl="true"] [role="search"] > div.absolute.left-0 {
  left: auto !important;
  right: 0 !important;
  padding-left: 0 !important;
  padding-right: 1rem !important;
}

/* Move the clear-X button from right to left */
html[data-rtl="true"] [role="search"] > button.absolute.right-4 {
  right: auto !important;
  left: 1rem !important;
}

/* Belt-and-suspenders: explicit alignment for the children themselves */
html[data-rtl="true"] main .text-left > h2.text-2xl,
html[data-rtl="true"] main .text-left > p.mt-2 {
  text-align: right !important;
  direction: rtl !important;
}

/* Style for the custom close button injected by agent-center-close-button.js.
 * Floats in the top-left corner of the main content area (the natural place
 * for a "close" affordance in an RTL layout). */
.agent-center-close-button {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  height: 2.25rem !important;
  padding: 0 0.75rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-light) !important;
  background-color: var(--presentation) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease-in-out !important;
}

.agent-center-close-button:hover {
  background-color: var(--surface-active-alt) !important;
}

.agent-center-close-button svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* במובייל: ב-LibreChat המקורי כל הלחצנים של מרכז הסוכנים יושבים בשורה העליונה
 * ("פתח סרגל צד" בקצה הימני, "הגדרות אדמין" בקצה השמאלי). הלחצן שלנו ב-left:1rem
 * היה מתנגש עם "הגדרות אדמין". במקום זה, ממרכזים את הלחצן אופקית בין שני
 * הלחצנים הקיימים, באותו גובה (top: 1rem). */
@media (max-width: 768px) {
  .agent-center-close-button {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}


/* ========== Radix UI Toggle Switches in RTL ==========
 *
 * Radix Switch של LibreChat (packages/client/src/components/Switch.tsx) משתמש
 * ב-Tailwind classes:
 *   data-[state=unchecked]:translate-x-0   → thumb בנקודת ההתחלה (flex-start)
 *   data-[state=checked]:translate-x-5     → thumb זז 1.25rem ימינה (LTR)
 *
 * ב-RTL: ה-flex container מסודר מימין לשמאל (direction: rtl), ולכן ה-flex-start
 * הוא בצד **ימין** של ה-track. כש-Radix מחיל translateX(+1.25rem) במצב checked,
 * זה דוחף את ה-thumb 1.25rem נוסף ימינה - **מחוץ ל-track**.
 *
 * הפתרון: ב-RTL נהפוך את הכיוון של ה-translate ל-checked כך שה-thumb יזוז שמאלה
 * (כלומר לסוף ה-track ב-RTL). מצב unchecked נשאר ב-translateX(0).
 *
 * תוצאה: ב-RTL,
 *   unchecked (OFF) = thumb בצד ימין של ה-track (התחלה ב-RTL)
 *   checked   (ON)  = thumb בצד שמאל של ה-track (סוף ב-RTL)
 */
html[data-rtl="true"] button[role="switch"][data-state="checked"] > span,
html[data-rtl="true"] button[role="switch"][aria-checked="true"] > span {
  transform: translateX(-1.25rem) !important;
}

/* מצב unchecked ב-RTL - להבטיח שאין transform שגוי שנותר ממופע קודם */
html[data-rtl="true"] button[role="switch"][data-state="unchecked"] > span,
html[data-rtl="true"] button[role="switch"][aria-checked="false"] > span {
  transform: translateX(0) !important;
}

/* ========== Code Blocks RTL Fixes ========== */

/* 
  Fix code block header: move "Copy code" button to the right and language name to the left
  This reverses the default LTR layout to match RTL interface
  Target ONLY the code block header (bg-gray-700 inside bg-gray-900)
*/
html[data-rtl="true"] .bg-gray-900 > .bg-gray-700.rounded-tl-md.rounded-tr-md,
html[data-rtl="true"] div.bg-gray-900 .relative.flex.items-center.justify-between.bg-gray-700 {
  direction: rtl !important;
  flex-direction: row-reverse !important;
}

/* Ensure the buttons container also follows RTL */
html[data-rtl="true"] .bg-gray-900 > .bg-gray-700 > div.flex.items-center {
  direction: rtl !important;
}

/* 
  Force LTR on code content itself - SPECIFIC TARGETING
  Code is typically in English and should read left-to-right
  This overrides the RTL setting from LibreChat
  Target ONLY code blocks, not regular text
*/

/* Target code blocks with hljs class (syntax highlighted code) */
html[data-rtl="true"] code.hljs,
html[data-rtl="true"] code[class*="language-"],
html[data-rtl="true"] code.hljs[class*="language-"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed !important;
}

/* Target the code container (div with overflow-y-auto that contains code) */
html[data-rtl="true"] .bg-gray-900 .overflow-y-auto:has(code.hljs),
html[data-rtl="true"] .bg-gray-900 div.overflow-y-auto > code {
  direction: ltr !important;
  text-align: left !important;
}

/* Override RTL on pre elements that contain code blocks ONLY */
html[data-rtl="true"] pre:has(.bg-gray-900),
html[data-rtl="true"] pre:has(code.hljs) {
  direction: ltr !important;
}

/* Ensure inline code also stays LTR */
html[data-rtl="true"] code:not(.hljs):not([class*="language-"]) {
  direction: ltr !important;
  unicode-bidi: embed !important;
}

/* ========== Artifacts Panel (Code Editor) RTL Fixes ========== */

/*
  Artifacts panel shows a code editor on the side.
  The code content should always be LTR (left-to-right).
*/

/* Force LTR on the entire CodeMirror editor inside artifacts panel */
html[data-rtl="true"] #artifacts-panel .cm-editor,
html[data-rtl="true"] #artifacts-panel .cm-content,
html[data-rtl="true"] #artifacts-panel .cm-line,
html[data-rtl="true"] #artifacts-code .cm-editor,
html[data-rtl="true"] #artifacts-code .cm-content,
html[data-rtl="true"] #artifacts-code .cm-line {
  direction: ltr !important;
  text-align: left !important;
}

/* Keep line numbers on the left in LTR */
html[data-rtl="true"] #artifacts-panel .cm-gutters,
html[data-rtl="true"] #artifacts-code .cm-gutters {
  direction: ltr !important;
}

/* Force LTR on code syntax elements */
html[data-rtl="true"] #artifacts-panel [class*="sp-syntax"],
html[data-rtl="true"] #artifacts-code [class*="sp-syntax"] {
  direction: ltr !important;
}

/* Fix artifacts panel header - reverse layout for RTL */
html[data-rtl="true"] #artifacts-panel .border-b.bg-surface-primary-alt,
html[data-rtl="true"] #artifacts-panel .flex.items-center.justify-between {
  direction: rtl !important;
}

/* Fix bottom footer with copy button - reverse layout */
html[data-rtl="true"] #artifacts-panel .border-t.bg-surface-primary-alt,
html[data-rtl="true"] #artifacts-panel .flex.items-center.justify-between.border-t {
  direction: rtl !important;
  flex-direction: row-reverse !important;
}

/* ========== Replace Model Avatar with Custom Logo ========== */

/* 
  Replace the model avatar that appears in the center when starting a new chat
  with a custom logo. This targets the circular avatar container and replaces
  the SVG content with the custom logo from /cti-ui/assets/logo.svg
  
  Target ONLY the welcome screen avatar (the one with size-10 class in center)
*/

/* Hide the original SVG in the welcome screen avatar */
.flex.flex-col.items-center .relative.size-10 .shadow-stroke.rounded-full svg {
  display: none !important;
}

/* Add custom logo as background image */
.flex.flex-col.items-center .relative.size-10 .shadow-stroke.rounded-full {
  background-color: white !important;
  background-image: url('/cti-ui/assets/logo.svg') !important;
  background-size: 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ========== Replace Model Avatar in Chat Messages ========== */

/*
  Replace the model avatar that appears next to each model message in the chat
  with the custom logo. This targets the small square avatar containers.
  
  Structure: .flex.flex-shrink-0 > .flex.h-6.w-6.rounded-full > .relative.flex.h-9.w-9.rounded-sm > svg
*/

/* Hide the original model icon in chat message avatars. Agent messages can
   render an <img> avatar, while regular model messages usually render SVG. */
.message-render:has(.agent-turn) > .relative.flex.flex-shrink-0.flex-col.items-center .flex.h-6.w-6.rounded-full img,
.message-render:has(.agent-turn) > .relative.flex.flex-shrink-0.flex-col.items-center .flex.h-6.w-6.rounded-full svg,
.flex.flex-shrink-0.flex-col.items-center .flex.h-6.w-6.rounded-full .relative.flex.rounded-sm svg {
  display: none !important;
}

/* Add custom logo as background image to the avatar container */
.message-render:has(.agent-turn) > .relative.flex.flex-shrink-0.flex-col.items-center .flex.h-6.w-6.rounded-full,
.flex.flex-shrink-0.flex-col.items-center .flex.h-6.w-6.rounded-full .relative.flex.rounded-sm {
  background-color: white !important;
  background-image: url('/cti-ui/assets/logo.svg') !important;
  background-size: 90% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ========== Replace Model Name with "הקובינה" ========== */

/*
  Replace the model name (e.g., "קלוד", "GPT-4", etc.) that appears above 
  each model message with "הקובינה"
  
  Structure: .agent-turn > h2.select-none.font-semibold.text-base
*/

/* Hide the original model name and replace with "הקובינה" */
.agent-turn h2.select-none.font-semibold.text-base {
  font-size: 0 !important; /* Hide original text */
}

.agent-turn h2.select-none.font-semibold.text-base::before {
  content: "הקובינה" !important;
  font-size: 1rem !important; /* text-base = 1rem */
  display: inline-block !important;
}

/* ========== Fix Chat History Fade/Gradient Direction in RTL ========== */

/*
  The fade gradient on conversation items appears on the right side in LTR.
  In RTL mode, after moving the scrollbar to the left, the fade should also
  move to the left side (end of text) instead of the right side (start of text).
  
  This targets the gradient div in ConvoLink.tsx which has classes:
  'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l'
*/

/* Override the gradient positioning and direction for RTL */
html[data-rtl="true"] nav[data-testid="nav"] div.absolute.bottom-0.right-0.top-0,
html[data-rtl="true"] nav#chat-history-nav div.absolute.bottom-0.right-0.top-0,
html[data-rtl="true"] div[data-testid="nav"] div.absolute.bottom-0.right-0.top-0 {
  right: auto !important;
  left: 0 !important;
  border-radius: 0 !important;
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
  background-image: linear-gradient(to-right, var(--tw-gradient-stops)) !important;
}

/* Fix margin on conversation options button - flip mr-2 to ml-2 in RTL */
html[data-rtl="true"] nav[data-testid="nav"] div.mr-2,
html[data-rtl="true"] nav#chat-history-nav div.mr-2,
html[data-rtl="true"] div[data-testid="nav"] div.mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* Ensure the fade gradient is visible and not clipped */
html[data-rtl="true"] nav[data-testid="nav"] div[role="listitem"],
html[data-rtl="true"] nav#chat-history-nav div[role="listitem"],
html[data-rtl="true"] div[data-testid="nav"] div[role="listitem"] {
  overflow: visible !important;
  position: relative !important;
}

/* ========== DropdownPopup Menu Icon/Padding RTL Fix ==========
 *
 * רכיב `DropdownPopup` של LibreChat עוטף את האייקון של כל פריט תפריט ב:
 *   <span className="mr-2 size-4"> {icon} </span>
 * (ראה packages/client/src/components/DropdownPopup.tsx).
 *
 * המבנה ב-LTR:
 *  - האייקון בשמאל, הטקסט מימינו
 *  - `mr-2` (8px) על האייקון + `gap-2` (8px) על ההורה = 16px בין אייקון לטקסט
 *  - `md:px-2.5` (10px) על הפריט + 8px ריפוד חיצוני של `popover-ui` + 2px
 *    border = 20px בין הקצה הימני (אחרי הטקסט) לקצה התפריט.
 *
 * ב-RTL לאחר ההיפוך:
 *  - האייקון מימין, הטקסט משמאלו
 *  - `mr-2` (margin-right פיזית) הופך פונקציונלית למרווח מימין האייקון
 *    (בין אייקון לקצה התפריט), יחד עם הריפוד החיצוני של 8px והבורדר:
 *    סה"כ ~21px - גדול מדי בעיניים עבריות
 *  - בין האייקון לטקסט נשאר רק `gap-2` של 8px - מעט מדי
 *
 * המטרה: שני המרווחים יהיו זהים ומתונים (~16px כל אחד), כדי שהאייקון יקבל
 * נשימה משני הצדדים, וייראה מאוזן ויפה ב-RTL. כדי להשיג זאת:
 *
 *  1. הופכים את `mr-2` של האייקון ל-`ml-2` (margin-left=8px) - יחד עם
 *     `gap-2` של 8px על ההורה: 16px בין אייקון לטקסט (שווה ל-LTR המקורי)
 *  2. הריפוד הימני של הפריט: 8px - מצמצמים מ-10px המקורי
 *  3. הריפוד הימני של ה-popover: 6px - מצמצמים מ-8px המקורי
 *
 *  סה"כ מרווח מימין לאייקון: 8 + 6 + 2 (border) = 16px - זהה למרווח השמאלי */

/* (1) Icon span - הופכים `mr-2` ל-`ml-2` כך שה-8px עוברים לצד שמאל
 *     ויחד עם `gap-2` של ההורה יוצרים 16px בין אייקון לטקסט */
html[data-rtl="true"] [role="menuitem"] > span.mr-2.size-4 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* (2) Item padding-right - 8px (במקום 10px המקורי) */
html[data-rtl="true"] [role="menuitem"]:has(> span.mr-2.size-4) {
  padding-right: 0.5rem !important;
}

/* (3) Popover-ui padding-right - 6px (במקום 8px המקורי). הסלקטור מוגבל
 *     ל-popover שיש בו פריטי תפריט עם אייקון, כדי לא להשפיע על popovers
 *     אחרים שלא צריך להצמיד את התוכן לקצה. */
html[data-rtl="true"] .popover-ui:has([role="menuitem"] > span.mr-2.size-4) {
  padding-right: 0.375rem !important;
}

/* ========== Account Settings Popover (User Menu) RTL Fix ==========
 *
 * תפריט הגדרות החשבון שנפתח בלחיצה על תמונת המשתמש בתחתית סרגל הצ'אט.
 *
 * שני כללים קודמים בקובץ הזה תופסים אותו בטעות:
 *  1. השורה `div[class*="settings"] > div { flex-direction: row-reverse }`
 *     שנועדה להפוך את הדיאלוג של ההגדרות, תופסת גם אותנו כי
 *     `.account-settings-popover` מכיל את המחרוזת "settings".
 *     התוצאה: בפריטי התפריט האייקון מופיע משמאל והטקסט בצמוד אליו,
 *     כך שהשורה נצמדת לשמאל - הפוך מהמצופה ב-RTL.
 *  2. הכלל `div[class*="popover"] { text-align: right }` גורם לכתובת
 *     הדוא"ל (LTR טבעי) להידחק לימין במקום להישאר משמאל.
 *
 * כאן אנו מחזירים את ההתנהגות הנכונה ב-RTL:
 *  - פריטי התפריט: אייקון מימין, טקסט משמאל לאייקון (יישור לימין)
 *  - כתובת הדוא"ל: מיושרת לשמאל (תוכן באנגלית/LTR)
 *
 * שני הסלקטורים כאן יותר ספציפיים מהכללים הנ"ל (3 קלאסים/מאפיינים
 * + תג HTML מפורש) ולכן גוברים בלי לדרוש "!important נוסף".
 */
html[data-rtl="true"] .account-settings-popover .select-item,
html[data-rtl="true"] .account-settings-popover [role="menuitem"] {
  flex-direction: row !important;
}

html[data-rtl="true"] .account-settings-popover [role="note"] {
  text-align: left !important;
  direction: ltr !important;
}

/* ========== Search Bar Container (BookmarkNav + SearchBar) RTL Fix ==========
 *
 * המיכל שמכיל את כפתור הסימניות ואת מיכל החיפוש בנוי כך ב-ConversationsSection.tsx:
 *   <div className="flex items-center gap-0.5 px-3">
 *     <BookmarkNav />            (כפתור הסימניות, child ראשון)
 *     <SearchBar />              (מיכל החיפוש, child שני, יש לו flex-1)
 *   </div>
 *
 * ב-LTR המקורי: סימניות בשמאל, חיפוש מימינו ועד הקצה הימני.
 * ב-RTL סטנדרטי (כפי שעושה LibreChat): סימניות בימין, חיפוש משמאלו ועד הקצה השמאלי.
 *
 * אבל יש כפתור "מרכז הסוכנים" מתחת שהאייקון שלו מיושר לימין מטבעו (יותר במורד).
 * כדי שאייקון החיפוש יהיה בקו אנכי עם אייקון מרכז הסוכנים, אנחנו רוצים את החיפוש
 * צמוד לימין (כמו במקור LTR שבו שניהם צמודים לאותו צד). זה אומר להפוך את הסדר -
 * סימניות בשמאל, חיפוש בימין - דרך flex-direction: row-reverse על ההורה. */
html[data-rtl="true"]
  div.flex.items-center:has(> button#bookmark-nav-menu-button) {
  flex-direction: row-reverse !important;
}

/* ========== Search Bar (Chat History) Inner RTL Fix ==========
 *
 * מיכל החיפוש בראש סרגל היסטוריית הצ'אט בנוי במקור עבור LTR:
 *  - אייקון החיפוש (SVG) הוא position:absolute עם left:12px (פיזית בשמאל)
 *  - השדה INPUT עם padding-left:28px (pl-7) כדי לא לדרוס את האייקון
 *  - כפתור הניקוי (X) הוא position:absolute עם right:7px (פיזית בימין)
 *
 * ב-RTL זה הפוך: אייקון החיפוש והטקסט בעברית צריכים להיות בימין, וכפתור הניקוי
 * אחרי הטקסט (בשמאל). מאחר ש-CSS positioning עם left/right משתמש במידות פיזיות
 * ולא לוגיות, חייבים לדרוס אותם ידנית כדי לעבור לפריסה RTL.
 */

/* אייקון החיפוש (lucide-search) - לעבור לימין */
html[data-rtl="true"] div.group:has(> input[placeholder="חפש הודעות"]) > svg {
  left: auto !important;
  right: 12px !important;
}

/* שדה הקלט - להחליף padding משמאל לימין כדי להשאיר מקום לאייקון בימין */
html[data-rtl="true"] input[placeholder="חפש הודעות"] {
  padding-left: 0 !important;
  padding-right: 1.75rem !important;
  text-align: right !important;
}

/* כפתור ה-X (Clear search) - לעבור לשמאל.
   עדכון תאימות: ה-aria-label עבר ללוקליזציה (com_ui_clear_search ⟵ "נקה חיפוש"),
   לכן ממקדים גם לפי הערך העברי וגם לפי האנגלי הישן כרשת ביטחון. */
html[data-rtl="true"] div.group:has(> input[placeholder="חפש הודעות"])
  > button[aria-label="Clear search"],
html[data-rtl="true"] div.group:has(> input[placeholder="חפש הודעות"])
  > button[aria-label="נקה חיפוש"] {
  right: auto !important;
  left: 7px !important;
}

/* ========== "מרכז הסוכנים" - יישור אייקון לימין ומרווח מהטקסט ==========
 *
 * המבנה ב-FavoritesList.tsx:
 *   <div ... data-testid="nav-agents-marketplace-button">
 *     <div className="flex flex-1 items-center truncate pr-6">    (wrapper)
 *       <div className="mr-2 h-5 w-5"> <LayoutGrid /> </div>      (אייקון)
 *       <span> מרכז הסוכנים </span>                              (טקסט)
 *     </div>
 *   </div>
 *
 * ב-LTR:
 *  - האייקון בצד שמאל (child ראשון ב-flex)
 *  - `mr-2` יוצר 8px בין האייקון לטקסט מימינו
 *  - `pr-6` יוצר 24px ריווח בין הטקסט לקצה הימני (כדי לא להיצמד לסקרולבר)
 *
 * ב-RTL אנחנו רוצים את התמונה ההפוכה - אייקון בימין, ריווח עם הטקסט שמשמאלו,
 * וריווח בקצה השמאלי. צריך להפוך גם `mr-2` ל-`ml-2` וגם `pr-6` ל-`pl-6`. */

/* `mr-2` → `ml-2` בתוך כפתור מרכז הסוכנים: הריווח עובר מימין האייקון
   (קצה הימני) לשמאלו (בינו לבין הטקסט). */
html[data-rtl="true"]
  [data-testid="nav-agents-marketplace-button"]
  div.mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* `pr-6` → `pl-6` ב-wrapper הפנימי: הריווח עובר מהקצה הימני (במקור הכי
   רחוק מהאייקון ב-LTR) לקצה השמאלי (הכי רחוק מהאייקון ב-RTL). */
html[data-rtl="true"]
  [data-testid="nav-agents-marketplace-button"]
  div.pr-6 {
  padding-right: 0 !important;
  padding-left: 1.5rem !important;
}

/* ========== Fix Header Buttons Layout on Mobile ========== */

/*
  On mobile, buttons in New Chat mode wrap to multiple lines.
  In active chat mode, they stay on the same line.
  The difference is in the flex-wrap property of the container.
  We need to prevent wrapping on mobile.
*/

@media (max-width: 768px) {
  /* Merge all button groups into one scrollable container */
  /* Change justify-between to justify-start so all buttons flow together */
  header .flex.w-full.items-center.justify-between,
  header .hide-scrollbar.flex.w-full.items-center.justify-between {
    justify-content: flex-start !important;
  }
  
  /* Prevent buttons from wrapping to new lines */
  header div[class*="flex"],
  .sticky div[class*="flex"],
  header .flex,
  .sticky .flex {
    flex-wrap: nowrap !important;
  }
  
  /* Make the main container scrollable */
  header .hide-scrollbar,
  header .overflow-x-auto {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  
  /* Ensure buttons don't grow and stay compact */
  header button {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
  }
  
  /* Hide the empty spacer div */
  header > div:empty,
  .sticky > div:empty,
  header .justify-between > div:empty:last-child,
  header div:empty:last-child {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Remove the separate right-side button container on mobile */
  /* Move all buttons to flow in the main container */
  header .flex.items-center.gap-2:last-child {
    position: static !important;
    margin-left: 0 !important;
  }
}

/* ========== Pinned Model (Favorite Item) - Edit Button RTL Fix ==========
   כשנועצים מודל הוא מופיע ב-sidebar ההיסטוריה כשורת [data-testid="favorite-item"].
   LibreChat המקורי מציב את לחצן העריכה (אפשרויות מצב שיחה) במצב:
     - מיכל לחצן: `absolute right-2` → בצד הימני (LTR end / RTL start)
     - מיכל תוכן: `pr-6` (padding-right: 1.5rem) → רווח בימין
     - הלחצן עצמו: `opacity-0` → גלוי רק ב-hover
   ב-RTL זה מציב את הלחצן באותו צד של אייקון המודל, כאילו "לפני" השם.
   צריך להפוך לצד השני ולעשות אותו גלוי תמיד. */

/* (1) הזז את מיכל לחצן העריכה משמאל לימין הויזואלי (LTR right → RTL left) */
html[data-rtl="true"] [data-testid="favorite-item"] > div.absolute.right-2 {
  right: auto !important;
  left: 0.5rem !important;
}

/* (2) הפוך את ה-padding שב-pr-6 מימין לשמאל כך שהמקום הריק יישמר לצד הלחצן */
html[data-rtl="true"] [data-testid="favorite-item"] > div.pr-6 {
  padding-right: 0 !important;
  padding-left: 1.5rem !important;
}

/* (2a) במיכל הזה האייקון פנימי `<div class="mr-2 h-5 w-5">` מקבל margin-right
   ש-ב-RTL flex דוחף את האייקון שמאלה מהקצה הימני (במקום ליצור מרווח בינו לטקסט).
   התוצאה: האייקון יותר פנימה מאייקוני שאר השורות בסידבר (convo-item).
   הפתרון: ב-RTL הופכים את ה-margin ל-margin-left, מה שיוצר מרווח בין האייקון
   לטקסט (שנמצא משמאלו ב-RTL) ומחזיר את האייקון לקצה הימני של השורה. */
html[data-rtl="true"] [data-testid="favorite-item"] .mr-2.h-5.w-5 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* (2b) שורת ה-favorite-item משתמשת ב-px-3 (12px), אבל שורות convo-item
   משתמשות ב-px-2 (8px על מיכל פנימי). כדי שכל האייקונים יהיו בעמודה אחת
   ויזואלית, מצמצמים את ה-padding ל-px-2 גם בשורה הזו ב-RTL. */
html[data-rtl="true"] [data-testid="favorite-item"].px-3,
html[data-rtl="true"] [data-testid="favorite-item"] {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

/* (3) הצג את הלחצן ומיכלו תמיד (לא רק ב-hover) */
html[data-rtl="true"] [data-testid="favorite-item"] > div.absolute,
[data-testid="favorite-item"] > div.absolute {
  pointer-events: auto !important;
  opacity: 1 !important;
}

html[data-rtl="true"] [data-testid="favorite-options-button"],
[data-testid="favorite-options-button"] {
  opacity: 1 !important;
}

/* (4) עיצוב מינימליסטי ללחצן - בלי מסגרת כשלא ב-hover, ועם רקע עדין ב-hover.
   force-header-buttons-style.js מוסיף ללחצן הזה inline style עם מסגרת -
   ננטרל את ה-inline style במצב הרגיל (לא hover) ע"י קלאס "data-original-styled". */
[data-testid="favorite-options-button"] {
  background: transparent !important;
  border: none !important;
  color: var(--brand-medium, #25408f) !important;
}

[data-testid="favorite-options-button"]:hover {
  background: rgba(37, 64, 143, 0.08) !important;
  border: 1.5px solid var(--brand-medium, #25408f) !important;
}

/* SVG בתוך הלחצן - וודא צבע כחול */
[data-testid="favorite-options-button"] svg {
  color: var(--brand-medium, #25408f) !important;
  stroke: var(--brand-medium, #25408f) !important;
  fill: none !important;
}

/* ========== Mobile Sidebar - RTL: Slide in from Right Instead of Left ==========
   ב-LibreChat המקורי הסיידבר במובייל ממוקם ב-`fixed left-0 top-0 z-[110]` ומשתמש
   ב-Tailwind class `-translate-x-full` כדי לצאת ימינה אל מחוץ למסך (כשסגור) או
   `translate-x-0` כדי להופיע (כשפתוח). זו התנהגות LTR-only שמכניסה את הסיידבר
   מצד שמאל גם כשהממשק במצב RTL.

   ב-RTL אנחנו רוצים שהסיידבר ייכנס מצד ימין (תואם דסקטופ-RTL שבו סרגל
   היסטוריית הצ'אט נמצא בצד ימין של אזור הצ'אט).

   חשוב: בדסקטופ הסיידבר נטען בתוך `<aside>` שמקבל את כל כללי ה-RTL (שורות
   256-330 לעיל), כולל `direction: rtl` על כל הילדים עם class שמכיל "flex"
   (זה מה שגורם ל-convo-item להיות RTL גם כש-ReactVirtualized__List דוחק
   `style="direction: ltr"` באמצע ההיררכיה).

   במובייל הסיידבר נטען כ-`div.fixed` ולא כ-`aside`, ולכן כל הסלקטורים שמתחילים
   ב-`aside:not(#controls-nav)` לא תופסים אותו, והפריטים הפנימיים יורשים LTR
   מ-React Virtualized. צריך לשכפל את הכללים הרלוונטיים לסלקטור הסיידבר במובייל.

   הסלקטור `.fixed.left-0.top-0.z-\[110\].flex.h-full` ייחודי לסיידבר הזה -
   האלמנט השני בקוד עם z-[110] הוא PromptForm שיש לו `right-0` ולא `left-0`. */
@media (max-width: 768px) {
  /* (1) מיקום: הזזה מצד שמאל לצד ימין + כיוון פנימי RTL.
        בנוסף, `flex-direction: row-reverse` כדי שהילד השני (`nav` - היסטוריית
        השיחות) ייצמד לקצה הימני של המסך, והילד הראשון (`ExpandedPanel` - ה-icon
        strip עם הלחצנים) ייצמד לצד שמאל של הסיידבר (קרוב לתוכן הצ'אט).
        זה זהה לסידור בדסקטופ - שם כלל הLR שמהפך את `aside > div:first-child`
        ל-row-reverse (שורה 321-325) מבצע אותה פעולה. */
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full {
    left: auto !important;
    right: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    flex-direction: row-reverse !important;
  }

  /* (2) במצב סגור - הזזה ימינה החוצה במקום שמאלה */
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full.-translate-x-full {
    transform: translateX(100%) !important;
  }

  /* (3) שכפול של כללי RTL מ-aside (שורות 256-312) לסיידבר במובייל:
        - direction:rtl + text-align:right על כל nav/button/a/section/div ילדים
        - direction:rtl על כל אלמנט עם class שמכיל "flex" (זה התיקון שגורם
          ל-convo-item להיות RTL גם כש-ReactVirtualized דוחק direction:ltr). */
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full nav,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full button,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full a,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full section,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full label,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full p,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full span,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full h1,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full h2,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full h3 {
    direction: rtl !important;
    text-align: right !important;
  }

  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full [class*="flex"] {
    direction: rtl !important;
  }

  /* (4) הסרת borders אופקיים מ-nav-ים פנימיים (כמו בדסקטופ - שורה 277). */
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full nav::after,
  html[data-rtl="true"] div.fixed.left-0.top-0.z-\[110\].flex.h-full hr {
    display: none !important;
    border: none !important;
  }

  /* (5) לחצן `open-sidebar-button` בכותרת המובייל - האחדת גודל ומרווח עם
        שאר לחצני הכותרת.

        הבעיה: ב-LibreChat המקורי שני קומפוננטות יוצרות לחצן עם
        `data-testid="open-sidebar-button"`:
        (א) `OpenSidebar.tsx` - הלחצן בכותרת. משתמש ב-`<Button size="icon">`
            **ללא** override של width/height, ולכן הוא מקבל את ברירת המחדל
            של `size="icon"` שהיא 40x40 (size-10).
        (ב) `ExpandedPanel.tsx` - הלחצן בתוך הסיידבר. כאן יש override מפורש:
            `className="h-9 w-9 rounded-lg"`, כך שהוא 36x36.

        בעוד שכל שאר לחצני הכותרת (header-new-chat-button, "בחר מודל",
        add-multi-convo-button, "צ'אט זמני") הם 36x36, ה-open-sidebar-button
        בכותרת בולט בגודל 40x40. בנוסף, ההורה שלו (`div.mx-1.flex.items-center`)
        אין לו `gap` בעוד שהשורה החיצונית (`div.hide-scrollbar...gap-2`) יש לה
        gap של 8px בין כל הלחצנים האחרים. אז ויזואלית הלחצן הזה: (1) יותר
        גדול, (2) נוגע בלחצן הבא ללא רווח.

        תיקון:
        (1) `width/height: 2.25rem` (=36px) - האחדה עם שאר הלחצנים.
        (2) `gap: 0.5rem` (=8px) על ה-wrapper - יוצר אותו מרווח שיש בשורה
            החיצונית בין שאר הלחצנים. */
  button#open-sidebar-button {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
  }

  div.mx-1.flex.items-center:has(> button#open-sidebar-button) {
    gap: 0.5rem !important;
  }
}


/* ========== ToolCallInfo - Copy button placement (RTL) ==========
 * ב-LibreChat המקורי, כש-MCP/Tool מוחזר טקסט וגם פרמטרים, ה-ToolCallInfo
 * מציג בתוך מיכל אפור:
 *   <ToolCallInfo>                   <!-- div.w-full.px-3.py-3.5 -->
 *     <OutputRenderer>               <!-- div.relative -->
 *       <pre>...output text...</pre>
 *       <CopyButton container>       <!-- div.absolute.bottom-0.right-0 -->
 *       [Show more button]
 *     </OutputRenderer>
 *     <divider />
 *     <Parameters button>
 *     <Params content>
 *   </ToolCallInfo>
 *
 * ה-CopyButton מקובע ב-`absolute bottom-0 right-0` של ה-`<pre>` - כלומר
 * בפינה הימנית-תחתונה של ה-`<pre>`. ב-LTR זה תקין (זה הפינה ה"רחוקה" של
 * ה-code block). ב-RTL זאת בעיה: הטקסט זורם מימין, ולכן ה-CopyButton יושב
 * **מעל** הטקסט וחוסם אותו, וגם מעל לחצן "Show more" כשהוא קיים.
 *
 * הפתרון: מעבירים את ה-CopyButton מ-OutputRenderer ל-ToolCallInfo container
 * (שמכיל גם את לחצן ה-Parameters), וממקמים אותו בקצה התחתון-שמאלי -
 * בדיוק מנגד ל-Parameters שיושב בקצה התחתון-ימני (start ב-RTL).
 *
 *   (1) ToolCallInfo container הופך ל-`position: relative` כך שה-CopyButton
 *       יחזיק אליו במקום ל-OutputRenderer.
 *   (2) OutputRenderer container הופך ל-`position: static` כך שה-CopyButton
 *       ידלג אליו ויחפש את ה-ancestor הבא שהוא relative.
 *   (3) ה-CopyButton container עצמו עובר מ-`bottom: 0; right: 0` ל-
 *       `bottom: 0.875rem` (= padding-bottom של ToolCallInfo) ו-
 *       `left: 0.75rem` (= padding-left, כלומר הקצה השמאלי של ה-content area).
 *       זה מציב אותו באותו גובה כמו לחצן ה-Parameters, בצד השני של השורה. */
html[data-rtl="true"] div.w-full.px-3.py-3\.5:has(> div.relative > pre) {
  position: relative !important;
}

html[data-rtl="true"] div.w-full.px-3.py-3\.5 > div.relative:has(> pre) {
  position: static !important;
}

html[data-rtl="true"] div.w-full.px-3.py-3\.5 > div > div.absolute.bottom-0.right-0 {
  bottom: 0.875rem !important;
  right: auto !important;
  left: 0.75rem !important;
}


/* ========== Markdown List Indentation (RTL + LTR) ==========
 * הבעיה: LibreChat מאפס בעזרת Tailwind preflight את כל הרשימות
 *   `ol, ul, menu { list-style: none; margin: 0; padding: 0; }`
 * ואז מוסיף בחזרה לרשימות תוך `.prose`/`.markdown` רק padding **פיזי משמאל**:
 *   `.prose ol, .prose ul, .markdown ol, .markdown ul { padding-left: 1em; }`
 *
 * ב-LTR הסימנים (מספר/תבליט) יושבים ב-padding השמאלי הזה ונראים תקין.
 * ב-RTL הסימנים זזים לצד הימני (כי `list-style-position: outside` עוקב אחר
 * כיוון הטקסט) אבל אין `padding-right` שייתן להם מקום - הם נצמדים לקצה הימני
 * של ההודעה ללא שום כניסה ונראים כאילו הרשימה היא טקסט רגיל.
 *
 * בנוסף, גם אחרי תיקון ה-padding, סימני התבליט הברירת-מחדל של הדפדפן
 * ('•' של ul ו-'1.' של ol) הם ברוחב טקסט שונה (ה-bullet צר יותר), ובגלל
 * ש-`list-style-position: outside` ממקם את הסימן עם offset קבוע מקצה הטקסט,
 * המרחק הויזואלי בין הסימן לקצה החיצוני שונה בין רשימה ממוספרת לרשימה
 * עם תבליטים - מה שגורם לרשימת התבליטים להיראות יותר "מוכנסת פנימה".
 *
 * הפתרון: ביטול הסימנים המובנים והחלפתם בסימנים מותאמים שיושבים ב-position
 * absolute בתיבה ברוחב קבוע (1.5em) עם text-align: center. כך מרכז הסימן
 * תמיד יושב באותו מיקום ויזואלי, בלי קשר לרוחב הטקסט של הסימן עצמו, ושני
 * סוגי הרשימות מקבלים בדיוק את אותה כניסה. שימוש ב-logical properties
 * (`padding-inline-start`, `inset-inline-start`) מבטיח שהכל עובד גם
 * ב-LTR בלי שינוי - הסימן עובר אוטומטית לצד שמאל.
 *
 * 2.5em = כניסה "מקובלת" לרשימות בהשראת ברירת המחדל של Word/LibreOffice. */
.markdown ol,
.markdown ul,
.prose ol,
.prose ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-inline-start: 2.5em !important;
  padding-inline-end: 0 !important;
}

.markdown ol,
.prose ol {
  counter-reset: list-counter !important;
}

.markdown ol > li,
.prose ol > li {
  counter-increment: list-counter !important;
}

.markdown ol > li::before,
.prose ol > li::before {
  content: counter(list-counter) "." !important;
}

.markdown ul > li::before,
.prose ul > li::before {
  content: "•" !important;
}

.markdown li,
.prose li {
  position: relative !important;
}

.markdown li::before,
.prose li::before {
  position: absolute !important;
  inset-inline-start: -2em !important;
  width: 1.5em !important;
  text-align: center !important;
  unicode-bidi: isolate !important;
}


/* ========== Markdown Tables RTL ==========
 * הבעיה: LibreChat מגדיר את גבולות התאים עם properties פיזיות (`border-left`)
 * במקום logical (`border-inline-start`):
 *   `.markdown th, .markdown td { border-left-width: 1px }`  (כל תא)
 *   `.markdown th:last-child, .markdown td:last-child { border-right-width: 1px }`
 *
 * תוכנן ל-LTR: כל תא מקבל גבול בצד שמאלו (start). הצירוף יוצר רשת -
 * הגבול-שמאל של התא הראשון הוא הקצה השמאלי של הטבלה, ובין כל זוג תאים
 * סמוכים יש גבול אחד (מהתא הימני יותר). התא האחרון מקבל בנוסף גבול-ימין
 * כדי לסגור את הקצה הימני של הטבלה.
 *
 * ב-RTL הסידור הויזואלי מתהפך - "first-child" הוא ויזואלית בקצה הימני,
 * "last-child" בקצה השמאלי. אבל ה-CSS הפיזי לא משתנה:
 *   1. גבול-שמאל הופך פונקציונלית לגבול בצד ה-END (פנימי לטבלה)
 *   2. הגבול-ימין של ה-last-child מופיע על התא **השמאלי**, יוצר מחיצה
 *      פנימית מיותרת במקום הגבול החיצוני
 *   3. הקצה הימני (start ב-RTL) של הטבלה נשאר ללא גבול - "נחתך"
 *   4. הפינות העגולות (`border-top-left-radius` ב-:first-child,
 *      `border-top-right-radius` ב-:last-child) מופיעות בפינות הלא נכונות
 *
 * הפתרון - ב-RTL הופכים את כיוון הגבולות של התאים:
 *   - כל תא: border-right (start ב-RTL) במקום border-left
 *   - :last-child (התא השמאלי ב-RTL): גם border-left (סוגר את הקצה השמאלי).
 *     שומרים את ה-border-right המקורי שלו ככדי לשמש כמחיצה בין השמאלי
 *     לתא שלידו (חשוב במיוחד לטבלאות בעלות 2 עמודות, אחרת אין מחיצה).
 *   - מאפסים את כל פינות העיגול של התאים (`border-radius: 0`), כך שלא
 *     יופיעו פינות מעוגלות במקומות הלא-נכונים ב-RTL.
 *
 * יישור טקסט (לפי המקובל בעברית):
 *   - כותרות (`th`) ממורכזות
 *   - תוכן (`td`) מיושר לימין */

html[data-rtl="true"] .markdown th,
html[data-rtl="true"] .markdown td,
html[data-rtl="true"] .prose th,
html[data-rtl="true"] .prose td {
  border-left-width: 0 !important;
  border-right-width: 1px !important;
  border-radius: 0 !important;
}

html[data-rtl="true"] .markdown th:last-child,
html[data-rtl="true"] .markdown td:last-child,
html[data-rtl="true"] .prose th:last-child,
html[data-rtl="true"] .prose td:last-child {
  border-left-width: 1px !important;
}

html[data-rtl="true"] .markdown table,
html[data-rtl="true"] .prose table {
  text-align: right !important;
}

html[data-rtl="true"] .markdown th,
html[data-rtl="true"] .prose th {
  text-align: center !important;
}

html[data-rtl="true"] .markdown td,
html[data-rtl="true"] .prose td {
  text-align: right !important;
}

/* ========== Floating Labels (Tailwind-style) - Flip to Right in RTL ==========
 *
 * LibreChat משתמש בדפוס "floating label" עבור שדות חיפוש שונים (בסרגל
 * "זכרונות" - `#memory-search`, בסרגל ניהול הקבצים - `#filename-filter`,
 * ועוד). המבנה האופייני:
 *
 *   <div class="relative ...">
 *     <input id="..." placeholder=" " aria-label="..." class="peer ..." />
 *     <label for="..." class="pointer-events-none absolute left-3 top-1/2
 *                             -translate-y-1/2 ... peer-focus:top-0 ...">
 *       טקסט
 *     </label>
 *   </div>
 *
 * ה-`left-3` (=12px משמאל) ממקם את ה-label בקצה השמאלי של ה-input. ב-LTR
 * זה נכון - תחילת השורה. אבל ב-RTL אנחנו רוצים אותו בקצה הימני (תחילת
 * השורה במונחי כיוון קריאה). דורסים `left: auto` + `right: 0.75rem` כדי
 * להעביר אותו לקצה הימני. הסלקטור הגנרי תופס כל label שמשמש כ-floating-
 * label (זוהו לפי ה-class המייחד `pointer-events-none.absolute.left-3`
 * + `for` של input + class שמכיל `peer-focus`). */
html[data-rtl="true"]
  label[for].pointer-events-none.absolute.left-3[class*="peer-focus"] {
  left: auto !important;
  right: 0.75rem !important;
}

/* ========== #model-search Floating Label - RTL Alignment ==========
 *
 * ה-label של שדה חיפוש המודל (בpopup של בחירת המודל) הוא variant של
 * floating-label, אבל אין לו `for` attribute והוא משתמש ב-`left-2.5`
 * (במקום `left-3`) + `peer-[:not(:placeholder-shown)]:left-1.5` (במקום
 * `peer-focus`). לכן ה-rule הגנרי למעלה לא תופס אותו, ויש לטפל בו
 * ספציפית. */
html[data-rtl="true"]
  input#model-search ~ label.pointer-events-none.absolute {
  left: auto !important;
  right: 0.625rem !important; /* 10px = tailwind left-2.5 */
}

html[data-rtl="true"]
  input#model-search:not(:placeholder-shown) ~ label.pointer-events-none.absolute {
  right: 0.375rem !important; /* 6px = tailwind left-1.5 */
}

/* ========== #model-search - Restore Visible Border/Frame ==========
 *
 * ה-input המקורי של חיפוש המודל מסתמך על `focus-visible:ring-2
 * focus-visible:ring-primary` של Tailwind כדי להציג מסגרת. ב-LibreChat
 * המקורי, ה-input קיבל autofocus אוטומטית כשהpopup נפתח, ולכן ה-ring
 * תמיד היה מופיע ושימש כ"מסגרת" של ה-input.
 *
 * בסקריפט `model-search-no-autofocus.js` ביטלנו את ה-autofocus (כדי
 * שמקלדת לא תפתח אוטומטית במובייל). כתוצאה - ה-ring הזה לא מופיע, וה-
 * input נראה ריק/ללא מסגרת. נחקה כאן את ה-ring כקבוע (לא תלוי focus). */
input#model-search {
  box-shadow: 0 0 0 1px var(--border-medium) !important;
}

/* ========== Table Headers - RTL Alignment ==========
 *
 * טבלאות של LibreChat (לדוגמה ניהול הקבצים) משתמשות ב-`<th class="text-left">`
 * + ילדים עם `flex justify-end` כדי ליישר תוכן בקצה. ב-LTR זה נכון - הכותרות
 * בקצה השמאלי (start). ב-RTL אנחנו רוצים את ה-start = ימין:
 *   - `text-left` (text-align: left) → `text-align: right`
 *   - `flex.justify-end` (flex-end = שמאל ב-RTL) → `flex-start` (= ימין ב-RTL)
 * שתי הדרישות מטופלות יחד כדי שכל הכותרות (כמו "שם" ו"תאריך" בניהול קבצים)
 * יופיעו צמודות לימין באופן אחיד. */
html[data-rtl="true"] th.text-left {
  text-align: right !important;
}

html[data-rtl="true"] th .flex.justify-end {
  justify-content: flex-start !important;
}

/* ========== Shared Conversation View (/share/:shareId) RTL ==========
 *
 * The public shared-conversation route renders outside the regular chat route,
 * so several of the main-app RTL fixes do not reach it. `share-page-rtl.js`
 * marks the document with `data-share-route="true"` only for `/share/...`,
 * letting these overrides stay route-scoped and safe for the normal app.
 */
html[data-share-route="true"] main {
  direction: rtl !important;
  text-align: right !important;
}

html[data-share-route="true"] main section,
html[data-share-route="true"] main section > div,
html[data-share-route="true"] main section h1 {
  direction: rtl !important;
  text-align: right !important;
}

html[data-share-route="true"] main section h1 {
  width: 100% !important;
}

html[data-share-route="true"] main section button[aria-label] {
  direction: rtl !important;
}

@media (min-width: 768px) {
  html[data-share-route="true"] main section > div > div[class*="md:flex-row"] {
    align-items: center !important;
    flex-direction: row !important;
  }

  html[data-share-route="true"] main section button[aria-label] {
    align-self: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 767px) {
  html[data-share-route="true"] main section button.absolute.right-4 {
    right: auto !important;
    left: 1rem !important;
  }
}

html[data-share-route="true"] [data-testid="messages-view"],
html[data-share-route="true"] [data-testid="messages-view"] > div,
html[data-share-route="true"] [data-testid="messages-view"] .final-completion,
html[data-share-route="true"] [data-testid="messages-view"] .agent-turn,
html[data-share-route="true"] [data-testid="messages-view"] .message-render,
html[data-share-route="true"] [data-testid="messages-view"] .markdown,
html[data-share-route="true"] [data-testid="messages-view"] .prose {
  direction: rtl !important;
  text-align: right !important;
}

html[data-share-route="true"] [data-testid="messages-view"] .final-completion {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

html[data-share-route="true"] [data-testid="messages-view"] .final-completion > div:first-child {
  align-items: flex-start !important;
}

html[data-share-route="true"] [data-testid="messages-view"] .cti-share-agent-message-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 9999px !important;
  object-fit: contain !important;
  background: white !important;
}

html[data-share-route="true"] [data-testid="messages-view"] button,
html[data-share-route="true"] [data-testid="messages-view"] [role="button"] {
  direction: rtl !important;
}

html[data-share-route="true"] [data-testid="messages-view"] pre,
html[data-share-route="true"] [data-testid="messages-view"] code,
html[data-share-route="true"] [data-testid="messages-view"] .code-block,
html[data-share-route="true"] [data-testid="messages-view"] [class*="code"] {
  direction: ltr !important;
  text-align: left !important;
}

html[data-share-route="true"]
  [data-testid="messages-view"]
  .my-2.overflow-hidden.rounded-lg
  pre[class*="whitespace-pre-wrap"] {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
}

html[data-share-route="true"]
  [data-testid="messages-view"]
  .my-2.overflow-hidden.rounded-lg
  div.w-full.px-3.py-3\.5
  > div
  > div.absolute.bottom-0.right-0 {
  right: auto !important;
  left: 0.75rem !important;
  bottom: 0.5rem !important;
}

html[data-share-route="true"]
  [data-testid="messages-view"]
  .my-2.overflow-hidden.rounded-lg
  button.inline-flex.items-center.gap-1.text-xs {
  margin-top: 0.375rem !important;
}

html[data-share-route="true"] [role="dialog"],
html[data-share-route="true"] [role="dialog"] > div[class*="space-y-1.5"],
html[data-share-route="true"] [role="dialog"] h1,
html[data-share-route="true"] [role="dialog"] h2,
html[data-share-route="true"] [role="dialog"] h3,
html[data-share-route="true"] [role="dialog"] p,
html[data-share-route="true"] [role="dialog"] label {
  direction: rtl !important;
  text-align: right !important;
}

html[data-share-route="true"] [role="dialog"] > div:first-child {
  align-items: stretch !important;
  flex-direction: column !important;
}

html[data-share-route="true"] [role="dialog"] > div:first-child > h1,
html[data-share-route="true"] [role="dialog"] > div:first-child > h2,
html[data-share-route="true"] [role="dialog"] > div:first-child > h3 {
  direction: rtl !important;
  text-align: right !important;
  width: 100% !important;
}

/* ========== Files Manager Table - Date Column Width in RTL ==========
 *
 * טבלת ניהול הקבצים מוגדרת עם `table-fixed` ועם רוחבים inline `width: 75%`
 * לעמודת "שם" ו-`width: 25%` לעמודת "תאריך". ב-LTR, "Date" (4 אותיות) נכנס
 * יפה ב-25%. אבל ב-RTL, "תאריך" (5 אותיות + אייקון מיון) רחב יותר מהזמין
 * בעמודה (=25% פחות padding 32px), והכפתור גולש משמאל לקצה ה-`<th>`. כדי
 * שהכפתור יהיה צמוד לימין בלי גלישה, מגדילים את עמודת "תאריך" ל-40% ואת
 * "שם" ל-60% (סך הכל עדיין 100%). הסלקטור משתמש ב-`:has(button[aria-label])`
 * כדי לתפוס אך ורק את הטבלה הזו ולא טבלאות אחרות. */
html[data-rtl="true"]
  table.table-fixed
  th[style*="width: 25%"]:has(button[aria-label="תאריך"]) {
  width: 40% !important;
}

html[data-rtl="true"]
  table.table-fixed
  th[style*="width: 75%"]:has(button[aria-label="שם"]) {
  width: 60% !important;
}

/* ========== Checkbox + Label Spacing in RTL ==========
 *
 * LibreChat משתמש במבנה הבא ל-checkboxes עם label סטנדרטי (לא Radix UI):
 *
 *   <input type="checkbox" id="..." />
 *   <label for="..." class="ml-2 ...">טקסט</label>
 *
 * ה-`ml-2` (margin-left: 0.5rem) ב-LTR נותן רווח לצד שמאל של ה-label = רווח
 * בין ה-checkbox ל-label. ב-RTL, אחרי שהסדר הוויזואלי הופך, ה-`margin-left`
 * הפיזי של ה-label מצביע לצד החיצוני של השורה (לא לכיוון ה-checkbox), והטקסט
 * נצמד לתיבת הסימון.
 *
 * מתפיס את כל input[type="checkbox"] + label.ml-2 (לדוגמה ב-Fork dialog
 * עם "התחל הסתעפות כאן" ו-"זכור") ומחליף את ה-margin לצד הנכון. */
html[data-rtl="true"] input[type="checkbox"] + label.ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* ========== Popover Dialog Header - Info Icon Position in RTL ==========
 *
 * Radix UI Popover dialogs (כמו Fork dialog שנפתח מתחת להודעה) משתמשים
 * במבנה הבא לכותרת:
 *
 *   <div class="flex items-center justify-center">
 *     טקסט כותרת
 *     <div class="ml-auto ...">  <!-- info icon, dropdowns וכו' -->
 *       <button>i</button>
 *     </div>
 *   </div>
 *
 * `ml-auto` (margin-left: auto) ב-flex container דוחף את ה-div לקצה הימני
 * הפיזי - ב-LTR וב-RTL כאחד (margin-left זה ערך פיזי לא לוגי). זה משאיר
 * את הטקסט בצד שמאל ואת האייקון בצד ימין. ניסינו לכפות הפוך ב-RTL ע"י
 * החלפה ל-`mr-auto` + `justify-content: flex-start`, אבל זה לא מצליח
 * להזיז גם את הטקסט (Chromium מתעלם ממנו או שיש קונפליקט נוסף).
 *
 * עד שיימצא פתרון נכון - לא דורסים בכלל. האייקון נשאר בקצה הימני וה-
 * טקסט בשמאל (המצב המקורי ב-LibreChat). */

/* ========== Files Manager Table - Column Widths in RTL ==========
 *
 * LibreChat מגדיר את עמודות טבלת הקבצים עם `inline style="width: 75%/25%"`
 * (שם / תאריך). ב-LTR זה מספיק: "Date" + sort icon הוא ~50px ו-25% (~68px)
 * דיו. אבל ב-RTL "תאריך" + sort icon הוא ~66px, ועם ה-padding של ה-th
 * (`px-4` = 32px sum) נשארים רק ~36px ל-content area - והכפתור overflows
 * לצד שמאל מחוץ ל-th, ונראה כאילו הוא מיושר לשמאל.
 *
 * דורסים את היחס ל-60/40 ב-RTL: עמודת "תאריך" מקבלת ~109px (~77px content
 * area) - מספיק לכפתור בלי overflow, ועמודת "שם" עדיין שולית-רחבה דיה
 * לשמות קבצים ארוכים. הסלקטור מתבסס על מחרוזת ה-inline-style כדי לתפוס
 * אך ורק את ה-th המקוריים של LibreChat. */
html[data-rtl="true"] table.table-fixed th[style*="width: 25%"] {
  width: 40% !important;
}

html[data-rtl="true"] table.table-fixed th[style*="width: 75%"] {
  width: 60% !important;
}

/* ========== Agent Configuration Form - Checkbox Row Spacing in RTL ==========
 *
 * תיקון רווח בתיבות סימון של סרגל בניית הסוכן ("הרץ קוד", "חיפוש ברשת",
 * "אפשר חיפוש בקבצים"). LibreChat המקורי בונה את ה-row כך:
 *
 *   <div class="flex items-center">
 *     <button role="checkbox" class="... mr-2 ...">...</button>
 *     <label for="...">הרץ קוד</label>
 *     <div class="ml-2 flex gap-2">
 *       <button>?</button>   <!-- Tooltip trigger -->
 *     </div>
 *   </div>
 *
 * הקלאסים `mr-2` ו-`ml-2` של Tailwind הם **margins פיזיים** (לא logical). ב-LTR
 * הם נותנים רווח נכון: ה-checkbox מקבל רווח לצד ימין שלו (לכיוון ה-label),
 * וה-wrapper של ה-? מקבל רווח לצד שמאל שלו (לכיוון ה-label).
 *
 * ב-RTL הסדר הוויזואלי מתהפך: [info-wrap]-[label]-[checkbox] (במקום ההיפך), אבל
 * ה-margins נשארים פיזיים. כתוצאה מכך:
 *   - `checkbox.margin-right` נופל **בצד החיצוני** של ה-row (הקצה הימני), לא
 *     לכיוון ה-label - והטקסט מודבק לתיבת הסימון.
 *   - `infoWrap.margin-left` נופל **בצד החיצוני** של ה-row (הקצה השמאלי), לא
 *     לכיוון ה-label.
 *
 * עוקפים ב-RTL ע"י החלפת margin-right ל-margin-left וההיפך. גם מנקים את הצד
 * שכבר היה ב-margin המקורי (margin-right של ה-checkbox = 0). */
html[data-rtl="true"] form[aria-label="Agent configuration form"] button[role="checkbox"].mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

/* ה-info wrapper של ה-Tooltip יכול להופיע בשני מבנים שונים ב-LibreChat:
 *   1. עטוף ב-div: `<div class="ml-2 flex gap-2"><button>?</button></div>`
 *      (כך זה ב-"הרץ קוד" ו-"חיפוש ברשת")
 *   2. button ישיר: `<button class="ml-2 inline-flex items-center">?</button>`
 *      (כך זה ב-"אפשר חיפוש בקבצים")
 * הסלקטור חייב לתפוס את שני הסוגים, ולכן משתמשים ב-`> .ml-2` (ילד ישיר
 * כלשהו עם הclass הזה) במקום `> div.ml-2`. */
html[data-rtl="true"] form[aria-label="Agent configuration form"] .flex.items-center > .ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* ========== Agent Configuration Form - Switch Row "?" Position ==========
 *
 * ב-LibreChat ה-row של switch בעל Tooltip בנוי כך:
 *
 *   <div class="flex items-center justify-between">  // ROW
 *     <div class="flex items-center space-x-2">     // GROUP1: label + ?
 *       <div class="text-sm">TEXT</div>
 *       <a data-state="closed"><svg>?</svg></a>
 *     </div>
 *     <button role="switch">...</button>            // GROUP2
 *   </div>
 *
 * `justify-between` ברמת ה-ROW מפזר את GROUP1 לקצה אחד ו-GROUP2 לקצה השני,
 * אבל GROUP1 הוא flex דחוס (`space-x-2`) - הטקסט וה-? צמודים זה לזה בקצה
 * אחד של השורה, ויש רווח גדול בינם לבין ה-switch.
 *
 * זה גורם לחוסר אחידות בין שורות:
 *   - שורה עם טקסט קצר ("אפשר רכיבי תצוגה"): נראה "טקסט ? ........ [switch]"
 *   - שורה עם טקסט ארוך ("יש לכלול הוראות..." - נשבר ל-2 שורות): הטקסט תופס
 *     את כל הרוחב, וה-? נדחק לקצה הסמוך ל-switch באופן טבעי.
 *
 * הפתרון: לתת ל-GROUP1 `flex-grow:1` + `justify-content: space-between` כך
 * שגם בשורות קצרות הטקסט יישאר בקצה אחד וה-? יידחף לקצה השני (ליד ה-switch).
 * כעת בכל 3 השורות (artifacts, include_shadcn, custom_prompt) ה-? יופיע
 * צמוד ל-switch באופן אחיד. */
form[aria-label="Agent configuration form"]
  div.flex.items-center.justify-between
  > div.flex.items-center.space-x-2 {
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

/* ========== Agent Configuration Form - Section Headers ==========
 *
 * עיצוב מובחן לכותרות מקטעים בסרגל בניית הסוכן ("הרץ קוד", "חיפוש ברשת",
 * "קובץ הקשר", "רכיבי תצוגה", "חיפוש קבצים", "Skills", "פניה לתמיכה").
 *
 * המבנה ב-LibreChat: הכותרות עטופות ב-div עם class:
 *   - `mb-1.5 flex items-center gap-2` (רוב הכותרות)
 *   - `mb-2 flex items-center gap-2` ("קובץ הקשר")
 *   - `mb-2 flex items-center justify-between` ("Skills")
 * ובתוכן יש `<label>`/`<span>` עם class `text-token-text-primary block text-sm font-medium`.
 *
 * בברירת המחדל הטקסט הוא 14px font-weight 500 - זהה כמעט לטקסט הרגיל של
 * ההגדרות עצמן (לדוגמה label "הרץ קוד" בתיבת הסימון), ולכן ההיררכיה לא
 * נראית. מגדילים ל-16px font-weight 600 כדי לקבל הבחנה ברורה. */
form[aria-label="Agent configuration form"] div[class*="mb-"][class*="flex"][class*="items-center"][class*="gap-2"] .text-sm.font-medium,
form[aria-label="Agent configuration form"] div[class*="mb-"][class*="flex"][class*="items-center"][class*="justify-between"] .text-sm.font-medium {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* ========== Message Navigation Indicator - Flip to Left Side in RTL ==========
 *
 * ה-`<nav aria-label="Message navigation">` הוא המחוון האנכי עם הקווים שמייצגים
 * את ההודעות בשיחה (לחיצה על קו מקפיצה את הצ'אט להודעה המתאימה). LibreChat
 * ממקם אותו עם `absolute right-2 top-1/2` - בקצה הימני של אזור התוכן.
 *
 * ב-RTL, "הקצה הראשי" של אזור התוכן הוא הקצה הימני (שם מתחיל הטקסט) -
 * המחוון בצד ימין יוצר תחושה שהוא מפריע לטקסט. ב-LTR המחוון בצד ימין עובד
 * כי הטקסט שם הוא הקצה השמאלי/האחורי שלו.
 *
 * הפתרון: בעת RTL, מעבירים את המחוון לקצה השמאלי על ידי החלפת `right-2`
 * (right: 0.5rem) ב-`left: 0.5rem`. הסידור הפנימי (flex-col) ומיקום אנכי
 * (top-1/2 -translate-y-1/2) נשארים זהים.
 *
 * עדכון תאימות: בגרסאות עדכניות של LibreChat ה-aria-label עבר ללוקליזציה
 * (`localize('com_ui_message_nav')` ⟵ "ניווט בין הודעות"), ולכן הסלקטור
 * הישן `[aria-label="Message navigation"]` הפסיק לתפוס. ממקדים כעת בעיקר
 * לפי `aria-keyshortcuts="Shift+Alt+M"` (קבוע בקוד, לא תלוי שפה) ושומרים
 * את שתי גרסאות ה-aria-label (עברית/אנגלית) כרשת ביטחון. */
html[data-rtl="true"] nav[aria-keyshortcuts="Shift+Alt+M"],
html[data-rtl="true"] nav[aria-label="Message navigation"],
html[data-rtl="true"] nav[aria-label="ניווט בין הודעות"] {
  right: auto !important;
  left: 0.5rem !important;
}

/* ========== Streaming Loading Dot - Position on Right Side in RTL ==========
 *
 * כשמודל מתחיל לעבד תגובה, LibreChat מציג את ה-EmptyTextPart שמכיל את
 * `<span class="result-thinking">` עם פסבדו-אלמנט `:after` שמרצד כנקודה
 * שחורה. ה-CSS המקורי לא מציין `left` או `right` ל-`:after` של ה-span,
 * אלא מסתמך על "static position" של ה-flow.
 *
 * שתי בעיות ב-RTL:
 *
 * 1) ה-`text-message` החיצוני יש לו `items-start` (cross-axis = content size).
 *    ה-EmptyTextPart יוצר `text-message` פנימי מקונן שה-content שלו הוא
 *    `<div class="absolute">` שלא תופס מקום ב-flow. לכן ה-`text-message`
 *    הפנימי מקבל `width: 0`, וה-`.markdown` בתוכו (עם `w-full`) גם הוא
 *    יוצא `width: 0`. ה-static position של ה-`:after` יוצא ב-`x=0` של
 *    אזור התוכן (= הקצה השמאלי של מרחב המסר).
 *
 * 2) ה-`text-message` יש לו `dir="auto"`, אבל ב-loading state ה-content
 *    ריק - לכן ה-directionality חוזרת לברירת המחדל של ה-`<html>` שהיא
 *    LTR (אין `dir` attribute ב-`<html>`). גם אם כפינו `width: 100%`,
 *    ה-static position של ה-`:after` ב-LTR עדיין יוצא ב-left edge.
 *
 * הפתרון:
 *
 * - כפיית `align-self: stretch; width: 100%` על ה-`text-message` שמכיל
 *   את ה-`.result-thinking` - כדי שיתפוס את כל הרוחב של ההורה במקום
 *   להישאר ב-`width: 0`.
 *
 * - כפיית `direction: rtl` על ה-`.markdown` שמכיל את ה-`.result-thinking`,
 *   כדי שה-static position של ה-`:after` יחושב לפי flow ימני (right).
 *
 * שני התיקונים פעילים רק כשה-`.result-thinking` נוכח (loading state). ברגע
 * שה-streaming מתחיל, ה-`EmptyTextPart` מוחלף ב-`TextPart` עם content
 * אמיתי, ה-`.result-thinking` נעלם, וה-CSS כאן מפסיק לחול. */
html[data-rtl="true"] .text-message:has(.result-thinking) {
  align-self: stretch !important;
  width: 100% !important;
}

html[data-rtl="true"] .text-message .markdown:has(.result-thinking) {
  direction: rtl !important;
}

/* ========== Scroll-to-Bottom Button - Align with Message Navigation in RTL ==========
 *
 * הלחצן "Scroll to bottom" (עיגול עם חץ למטה) יושב בקונטיינר עם המחלקות
 * `pointer-events-none absolute bottom-5 left-0 right-0 mx-auto flex justify-end`
 * (וגם `md:max-w-3xl xl:max-w-4xl` ב-breakpoints). ב-LTR `justify-end`
 * ממקם את הלחצן בקצה הימני של הקונטיינר הממורכז (מעל אזור הקלט).
 *
 * ב-RTL: `justify-end` מתורגם לקצה השמאלי (`inline-end` הופך כיוון). הלחצן
 * נשאב לצד שמאל, אבל בגלל ה-`mx-auto` וה-`max-w-3xl` הוא יושב בערך 50px
 * פנימה מהקיר השמאלי של אזור התוכן, ולא מיושר עם המחוון של ניווט ההודעות
 * (`nav[aria-label="Message navigation"]`) שהוזז ל-`left: 0.5rem`.
 *
 * הפתרון: לבטל את ה-`mx-auto`/`max-width` של הקונטיינר ולהוסיף לו
 * `padding-left: 0.5rem`. אחרי השינוי, הקונטיינר תופס את כל הרוחב הזמין
 * ו-`justify-end` ב-RTL ממקם את הלחצן ב-`x = 0.5rem` - בדיוק באותה עמודה
 * עם מחוון הניווט, ויוצר חזות אחידה של "טור פעולות שמאלי" ב-RTL. */
html[data-rtl="true"] div.flex.justify-end:has(> .premium-scroll-button) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0.5rem !important;
}

/* ========== Active Conversation Highlight Stripe - Hide in RTL ==========
 *
 * בסרגל היסטוריית השיחות, השיחה הפעילה מקבלת `bg-surface-active-alt` יחד עם
 * Tailwind classes שיוצרים פס הדגשה אנכי דרך `::before`:
 *
 *   before:absolute before:bottom-1 before:left-0 before:top-1
 *   before:w-0.5 before:rounded-full before:bg-black dark:before:bg-white
 *
 * (ראה: client/src/components/Conversations/Convo.tsx שורה 186)
 *
 * הרקע המודגש (`bg-surface-active-alt`) כבר מסמן מספיק את הפריט הפעיל,
 * הפס האנכי הנוסף מיותר ויזואלית - לכן מסתירים אותו לגמרי ב-RTL. */
html[data-rtl="true"] [data-testid="convo-item"]::before {
  display: none !important;
}

/* ========== Route Error Boundary - RTL Layout ==========
 *
 * RouteErrorBoundary.tsx is rendered directly by LibreChat when a route crashes.
 * Its upstream Tailwind layout is mostly neutral, but several blocks inherit LTR
 * text flow and look left-aligned in the Hebrew interface. Keep stack/code blocks
 * readable as LTR, while aligning the surrounding error UI to the right. */
html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) > div {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) h2 {
  text-align: center !important;
}

html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) ul {
  padding-right: 1.25rem !important;
  padding-left: 0 !important;
}

html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) details summary {
  direction: rtl !important;
}

html[data-rtl="true"] div[role="alert"]:has(button[aria-label="הורד יומני שגיאות"]) pre {
  direction: ltr !important;
  text-align: left !important;
}

/* ========== Message Author Timestamp - Spacing from Name in RTL ==========
 *
 * תכונה חדשה ב-LibreChat: בריחוף מעל הודעה מוצגת חותמת-זמן (`<time>`) ליד שם
 * הכותב (שם המשתמש או שם המודל), בתוך כותרת ה-`<h2>` של ההודעה. ראה
 * client/src/components/Chat/Messages/ui/MessageTimestamp.tsx — שם ה-`<time>`
 * מקבל `ml-2` (margin-left: 0.5rem) כדי ליצור רווח בין השם לזמן ב-LTR.
 *
 * ב-RTL השם מופיע ראשון (מימין) וה-`<time>` משמאלו. `margin-left` הוא ערך
 * פיזי, ולכן הוא נופל בצד החיצוני (השמאלי, הרחוק מהשם) במקום בין השם לזמן -
 * והשניים נצמדים זה לזה ללא רווח ("ישראללפני 7 שעות"). מחליפים ל-
 * `margin-right` כדי להחזיר את הרווח לצד הנכון ("ישראל לפני 7 שעות").
 *
 * הסלקטור ממקד את ה-`<time>` של חותמת-ההודעה לפי חתימת ה-class הייחודית שלה
 * (`ml-2` + `text-text-secondary`), כך שכל הקשרי השימוש של MessageTimestamp
 * מטופלים אחיד (שיחה רגילה, חיפוש, הודעות-אחאים, ועמוד שיתוף /share), בלי
 * לפגוע ב-`<time>` אחרים בממשק (Skills/Prompts משתמשים ב-`mt-1`/`gap-1`
 * ללא `ml-2`). */
html[data-rtl="true"] time.ml-2.text-text-secondary,
html[data-share-route="true"] time.ml-2.text-text-secondary {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}