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

/* ========== 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.
*/
html[data-rtl="true"] div.flex:has(> button[aria-label*="רכיבי תצוגה"]) {
  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;
}

/* 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 - remove all borders from tablist */
html[data-rtl="true"] [role="tablist"] {
  border: none !important;
  min-width: 160px !important;
  width: auto !important;
}

/* Ensure tab buttons have enough width but not too much */
html[data-rtl="true"] [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;
}

/* Fix toggle switches in active (black) state - prevent overflow - EXCLUDE controls nav */
html[data-rtl="true"] [role="tab"] button[role="switch"],
html[data-rtl="true"] aside:not(#controls-nav):not([aria-label="פקדים"]) button[role="switch"] {
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure the toggle indicator stays within the button */
html[data-rtl="true"] button[role="switch"] > span,
html[data-rtl="true"] button[role="switch"] > div {
  position: relative !important;
  transform: none !important;
}

/* Fix active toggle button indicator - match spacing with unchecked state */
html[data-rtl="true"] button[role="switch"][data-state="checked"] > span,
html[data-rtl="true"] button[role="switch"][aria-checked="true"] > span {
  right: auto !important;
  left: 0 !important;
  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;
}

/* ========== Inline Cost Display RTL ========== */

/*
  תצוגת העלות inline בחלונית ההקלדה
  צריכה להיות RTL עם המספרים LTR
*/
html[data-rtl="true"] .inline-cost-display {
  direction: rtl !important;
  text-align: right !important;
}

html[data-rtl="true"] .inline-cost-value,
html[data-rtl="true"] .inline-token-value {
  direction: ltr !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 /site-switcher/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('/site-switcher/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 SVG in chat message avatars */
.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 inner container */
.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('/site-switcher/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;
}

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