/* Tools Dropdown Style - Brand Theme */
/* עיצוב תפריט הכלים (Tools Dropdown) בקו העיצובי החדש */
/* עיצוב תפריט העלאת קבצים (Attach File Menu) */

/* CSS Variables */
:root {
  --brand-dark: #16213f;
  --brand-medium: #25408f;
  --brand-light: #7dd2ef;
}

/* התפריטים עצמם - רקע לבן עם מסגרת כחולה.
   ה-aria-labelledby^="conversation-menu-" תופס את תפריט האפשרויות של פריט
   בהיסטוריית הצ'אטים (ConvoOptions.tsx -> DropdownPopup -> Ariakit.Menu).
   ה-trigger button id שלו הוא `conversation-menu-${conversationId}`,
   וה-Ariakit מעביר אותו ל-aria-labelledby של ה-Menu אוטומטית. */
#tools-dropdown-menu.popover-ui,
#attach-file-menu.popover-ui,
.popover-ui[aria-labelledby^="conversation-menu-"] {
  background: white !important;
  border: 2px solid var(--brand-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 64, 143, 0.15) !important;
  padding: 8px !important;
  min-width: 220px !important;
}

#tools-dropdown-menu.popover-ui,
#attach-file-menu.popover-ui {
  min-width: 280px !important;
}

/* פריטי התפריט - עיצוב בסיסי */
#tools-dropdown-menu [role="menuitem"],
#attach-file-menu [role="menuitem"],
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"] {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* פריטי תפריט - hover */
#tools-dropdown-menu [role="menuitem"]:hover,
#tools-dropdown-menu [role="menuitem"][data-active-item="true"],
#attach-file-menu [role="menuitem"]:hover,
#attach-file-menu [role="menuitem"][data-active-item="true"],
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"]:hover,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"][data-active-item="true"] {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
}

/* פריטי תפריט - active/focused */
#tools-dropdown-menu [role="menuitem"]:focus,
#tools-dropdown-menu [role="menuitem"]:active,
#attach-file-menu [role="menuitem"]:focus,
#attach-file-menu [role="menuitem"]:active,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"]:focus,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"]:active {
  background: rgba(37, 64, 143, 0.12) !important;
  border-color: var(--brand-medium) !important;
  outline: none !important;
}

/* טקסט בתוך הפריטים */
#tools-dropdown-menu [role="menuitem"] span,
#attach-file-menu [role="menuitem"] span,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"] span {
  color: inherit !important;
}

/* אייקונים בתוך הפריטים - שינוי צבע בלבד, שמירה על צורה מקורית.
   חשוב: לא דורסים את ה-fill וה-stroke ב-CSS כך שמאפייני ה-SVG המקוריים
   (fill="none" לאייקוני outline, fill="currentColor" לאייקונים מלאים)
   יעבדו כפי שתוכננו. הצבע מועבר דרך color → currentColor.
   
   ב-ConvoOptions ה-icons מוגדרים עם className="text-text-primary" שמוסיף
   color מ-CSS variable. אנחנו דורסים אותו ל-brand color. */
#tools-dropdown-menu [role="menuitem"] svg,
#attach-file-menu [role="menuitem"] svg,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"] svg {
  color: var(--brand-medium) !important;
  transition: all 0.2s ease !important;
}

#tools-dropdown-menu [role="menuitem"]:hover svg,
#attach-file-menu [role="menuitem"]:hover svg,
.popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"]:hover svg {
  color: var(--brand-medium) !important;
}

/* כפתורי Pin/Unpin */
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"],
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 4px !important;
  transition: all 0.2s ease !important;
}

#tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover,
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover {
  background: var(--brand-medium) !important;
  border-color: var(--brand-medium) !important;
}

/* אייקוני Pin/Unpin - לא דורסים fill/stroke כי PinIcon משתמש ב-fill="currentColor"
   על ה-path וה-UnpinIcon משתמש ב-stroke="currentColor". מספיק לקבוע color והאייקון
   ישתמש בו דרך currentColor בדיוק לפי העיצוב המקורי. */
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"] svg,
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"] svg {
  color: var(--brand-medium) !important;
}

#tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover svg,
#tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover svg {
  color: white !important;
}

/* תפריטי משנה (submenu) - עבור "רכיבי תצוגה" ו"שרתי MCP" */
#tools-dropdown-menu [role="menuitem"][aria-haspopup="menu"] {
  position: relative !important;
}

/* חץ תפריט משנה.
   ⚠️ הערה חשובה: ב-RTL, הקובץ rtl-input-fix.css מהפך כל אייקון chevron עם
   `transform: scaleX(-1)` (כך שהחץ מצביע שמאלה - תואם לכיוון שאר חצי תפריטי
   המשנה בממשק). אסור להגדיר פה `transform` על ה-chevron (ובמיוחד לא ב-hover),
   אחרת הוא ידרוס את ה-scaleX(-1) של rtl-input-fix וה-חץ "יתהפך" בעת מעבר העכבר
   (מצביע שמאלה במצב רגיל ⟵ ומתהפך לימין כשהסמן עליו). לכן משאירים פה רק שינוי
   opacity, בלי שום transform. */
#tools-dropdown-menu [role="menuitem"] .lucide-chevron-right {
  color: var(--brand-medium) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

#tools-dropdown-menu [role="menuitem"]:hover .lucide-chevron-right {
  opacity: 1 !important;
}

/* נעילת מיקום לחצן הנעיצה בטריגרים של תת-תפריטים (למשל "שרתי MCP").
   ---------------------------------------------------------------
   הבעיה: טריגר תת-תפריט (MCPSubMenu / ArtifactsSubMenu) הוא היחיד בתפריט שמבנהו
   `justify-between` - תווית (אייקון+טקסט+chevron) בקצה אחד, לחצן נעיצה בקצה השני.
   הוא גם היחיד שפותח תת-תפריט. כשמרחפים מעליו והתת-תפריט נפתח, פיזור ה-flex
   של הטריגר משתנה (הרוחב/הפיזור) ולחצן הנעיצה "נשאב" פנימה (קופץ לכיוון מרכז
   השורה) במקום להישאר צמוד לקצה - בניגוד לשאר הפריטים שנשארים יציבים.

   הפתרון (ללא תלות בשורש המדויק): כופים על הטריגר רוחב מלא + justify-between
   בכל המצבים, ונותנים ללחצן הנעיצה (הילד האחרון, button) margin-inline אוטומטי
   שדוחף אותו לקצה הפנימי (שמאל ב-RTL) כל עוד יש רוחב מלא - כך הוא תמיד יציב.

   הזיהוי של הטריגר: גם לפי aria-haspopup="menu" וגם לפי הימצאות chevron, ליתר
   ביטחון (Ariakit עשוי לעכב את ה-aria-haspopup ברנדר הראשון). */
#tools-dropdown-menu [role="menuitem"][aria-haspopup="menu"],
#tools-dropdown-menu [role="menuitem"]:has(.lucide-chevron-right) {
  width: 100% !important;
  justify-content: space-between !important;
}

#tools-dropdown-menu [role="menuitem"][aria-haspopup="menu"] > button:last-of-type,
#tools-dropdown-menu [role="menuitem"]:has(.lucide-chevron-right) > button:last-of-type {
  margin-inline-start: auto !important;
}

/* הגנה כפולה: הטריגר הוא flex container, אז כל ::before/::after עליו הופך לפריט
   flex ומקבל את ה-`gap` של השורה - מה שדוחף את לחצן הנעיצה הצידה. מנטרלים אותם
   כדי שלחצן הנעיצה יישאר יציב בכל מצב (פתוח/סגור), ללא תלות בכללים אחרים. */
#tools-dropdown-menu [role="menuitem"][aria-haspopup="menu"]::before,
#tools-dropdown-menu [role="menuitem"][aria-haspopup="menu"]::after,
#tools-dropdown-menu [role="menuitem"]:has(.lucide-chevron-right)::before,
#tools-dropdown-menu [role="menuitem"]:has(.lucide-chevron-right)::after {
  display: none !important;
}

/* תפריטי הבחירה - עיצוב כללי לכל סוגי התפריטים
   הסלקטור תופס את 5 הסוגים השונים של תפריטים ב-LibreChat:
   1. tools-dropdown-menu-N    - תפריטי MCP / רכיבי תצוגה (DropdownPopup, role="menu")
   2. attach-file-menu-N       - תפריטי קבצים מצורפים (DropdownPopup, role="menu")
   3. aria-labelledby=endpoint-XXX-menu     - תפריטי משנה של ספקים מובנים (CustomMenu searchable, role="dialog")
   4. aria-labelledby=custom-group-XXX-menu - תפריטי משנה מותאמים (CustomMenu non-searchable, role="menu")
   5. :has(#model-search)                   - התפריט הראשי של בחירת המודלים (CustomMenu searchable root, role="dialog")

   **חשוב מאוד:** LibreChat upstream רנדר תפריטי CustomMenu עם searchable=true כ-role="dialog"
   (ולא role="menu" כפי שניתן היה לצפות). תפריטים שאינם searchable (כמו CustomGroup) נשארים role="menu".
   לכן הסלקטורים משתמשים ב-`:is([role="menu"], [role="dialog"])` לכיסוי שני המקרים.

   חשוב: לא משתמשים פה ב-animation מותאם, כדי לא להתנגש עם animate-popover-left
   הילידי של LibreChat שמשמש להופעת ה-CustomMenu submenus (transitions ב-transform). */
[role="menu"][id^="tools-dropdown-menu-"],
[role="menu"][id^="attach-file-menu-"],
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
:is([role="menu"], [role="dialog"]):has(#model-search) {
  background: white !important;
  border: 2px solid var(--brand-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 64, 143, 0.15) !important;
  padding: 8px !important;
  min-width: 260px !important;
}

/* פריטי תפריט - מטרגט גם MenuItem וגם ComboboxItem (ב-CustomMenu searchable) */
[role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"],
[role="menu"][id^="attach-file-menu-"] [role="menuitem"],
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"],
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
}

/* פריטי תפריט - hover / data-active-item */
[role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"]:hover,
[role="menu"][id^="attach-file-menu-"] [role="menuitem"]:hover,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]:hover,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]:hover,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"][data-active-item] {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
}

/* אייקונים בתפריט - לא דורסים fill/stroke, מסתמכים על מאפייני ה-SVG */
[role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"] svg,
[role="menu"][id^="attach-file-menu-"] [role="menuitem"] svg,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"] svg,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] svg {
  color: var(--brand-medium) !important;
}

/* כותרת בתפריט (אם יש) */
[role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"] span,
[role="menu"][id^="attach-file-menu-"] [role="menuitem"] span,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] span,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] span,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] span,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] span,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"] span,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] span {
  color: inherit !important;
}

/* ============================================================
   תיקוני תצוגה לתפריטי בחירת המודלים (CustomMenu) -
   חל גם על תפריט הבחירה הראשי וגם על תפריטי המשנה
   ============================================================ */

/* 1. הסרת הפס הכהה הצדדי שמופיע על פריט פעיל (data-active-item).
      ב-LibreChat upstream, ה-CustomMenuItem מגדיר pseudo-element ::before
      (`before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5
       data-[active-item]:before:bg-black`) שיוצר פס שחור 2px בצד שמאל של
      הפריט הפעיל. אנחנו מסירים אותו כדי לקבל מראה נקי יותר. */
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]::before,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]::before,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]::before,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]::before,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]::before,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]::before {
  display: none !important;
}

/* 2. קו מפריד דק ועדין בין פריטים בתפריטי בחירת המודלים.
      משתמשים ב-pseudo-element ::after כי ::before כבר תפוס ב-LibreChat upstream
      (גם אם הסתרנו אותו עם display:none, השמירה על ה-pseudo-element השני
      מאפשרת לעתיד להחזיר את האינדיקטור אם רוצים).
      הקו צמוד לתחתית הפריט, ב-margin gap בין פריטים, ובצדדים יש "פנדינג"
      של 8% מהרוחב כדי להעניק מראה מעודן.
      
      חריג: לא מציירים קו מתחת לכותרות המקטעים (cti-model-section-header)
      ולא לפניהן - הקוים מצטיירים רק בין פריטים אמיתיים. */
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:not(:last-child)::after,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:not(:last-child)::after,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:not(:last-child)::after,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:not(:last-child)::after,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]:not(:last-child):not(:has(+ .cti-model-section-header))::after,
:is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]:not(:last-child):not(:has(+ .cti-model-section-header))::after {
  content: '' !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: -3px !important;
  height: 1px !important;
  background: rgba(37, 64, 143, 0.12) !important;
  pointer-events: none !important;
}

/* 3. לחצן הנעיצה (Pin/Unpin) - ללא מסגרת ורקע בברירת מחדל.
      ב-LibreChat upstream הלחצן מוגדר עם `rounded-md p-1 hover:bg-surface-hover`,
      אבל ה-default user-agent עלול לצייר מסגרת. דורסים פה כדי שהלחצן יישב
      ישירות על רקע השורה ללא מיכל מסביב.
      עדכון תאימות: ה-aria-label עבר ללוקליזציה (com_ui_pin ⟵ "הצמד",
      com_ui_unpin ⟵ "בטל את ההצמדה"). מאחר ש"הצמד" הוא תת-מחרוזת של שני
      הערכים, סלקטור עברי יחיד `aria-label*="הצמד"` מכסה גם נעיצה וגם ביטול.
      שומרים גם את הסלקטורים האנגליים הישנים (Pin/Unpin) כרשת ביטחון. */
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"],
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"],
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"],
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"],
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Pin"],
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Unpin"],
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="הצמד"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* לחצן הנעיצה - hover עדין (רקע כחול שקוף) */
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"]:hover,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"]:hover,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"]:hover,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"]:hover,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"]:hover,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"]:hover,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Pin"]:hover,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Unpin"]:hover,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="הצמד"]:hover {
  background: rgba(37, 64, 143, 0.12) !important;
}

/* אייקון הסיכה - צבע המותג, בלי דריסת fill/stroke שיכולה להרוס את הצורה */
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"] svg,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"] svg,
[aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"] svg,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"] svg,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"] svg,
[aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"] svg,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Pin"] svg,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Unpin"] svg,
:is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="הצמד"] svg {
  color: var(--brand-medium) !important;
}

/* ============================================================
   כותרות מקטעים בתפריט הבחירה הראשי
   ה-DIVs האלה מוזרקים ע"י model-picker-section-headers.js
   ============================================================ */
:is([role="menu"], [role="dialog"]):has(#model-search) .cti-model-section-header {
  display: block !important;
  padding: 8px 10px 6px !important;
  margin: 6px 0 4px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--brand-dark) !important;
  opacity: 1 !important;
  cursor: default !important;
  user-select: none !important;
  pointer-events: none !important;
  border-bottom: 1px solid rgba(37, 64, 143, 0.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* הכותרת הראשונה - בלי margin-top מיותר */
:is([role="menu"], [role="dialog"]):has(#model-search) .cti-model-section-header:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   כיוון החץ של תפריטי משנה - הפיכה ל-RTL
   ============================================================
   ב-CustomMenu.tsx, ה-MenuButton (=ה-trigger של תפריט המשנה) מצויר עם:
     <span className="flex-1">{label}</span>
     <Ariakit.MenuButtonArrow className="stroke-1 text-base opacity-75" />
   
   Ariakit's MenuButtonArrow רנדר כ:
     <span aria-hidden="true" class="stroke-1 text-base opacity-75">
       <svg ...><polyline points="6,4 10,8 6,12" /></svg>  <!-- חץ ימינה -->
     </span>
   
   ה-polyline points נקבעים לפי `placement` של ה-Popover. ב-CustomMenu.tsx
   placement="right" hardcoded, אז ה-points הם "6,4 10,8 6,12" - חץ ימינה.
   ב-RTL זה לא נכון; החץ צריך להצביע שמאלה.
   
   הפתרון: סיבוב ב-180° של ה-span (ה-MenuButtonArrow span). הזיהוי מתבסס
   על:
   - ה-span הוא ה-direct last child של ה-trigger.
   - ה-span נושא aria-hidden="true" (לפי Ariakit source). */
:is([id^="endpoint-"], [id^="custom-group-"])[id$="-menu"] > span[aria-hidden="true"]:last-child {
  transform: rotate(180deg) !important;
}

/* ============================================================
   הסתרת שדה החיפוש בתפריט המשנה של "הסוכנים שלי"
   ============================================================
   בתפריט המשנה של ה-Agents יש שדה חיפוש מיותר (סינון בתוך רשימה קצרה של
   סוכנים שלרוב יש בה רק כמה פריטים). מסתירים אותו לחלוטין.
   
   המבנה ב-CustomMenu.tsx (LibreChat upstream):
   `<div className="sticky top-0 z-10 bg-inherit p-1">`
     `<div className="relative">`
       `<Ariakit.Combobox role="combobox" ...>`
       `<label>...</label>`
     `</div>`
   `</div>`
   
   אנחנו מסתירים את ה-wrapper כולו (`div.sticky`) ע"י :has() על ה-combobox.
   ה-selector מוגבל ל-aria-labelledby של ה-Agents trigger כדי לא להשפיע על
   חיפוש בתפריטים אחרים (הראשי + ספקי מודלים אחרים שהשתמשו ב-search). */
[aria-labelledby="endpoint-agents-menu"]:is([role="menu"], [role="dialog"]) > div:has(> div > input[role="combobox"]) {
  display: none !important;
}

/* תיקון overlap בעת hover על הפריט הראשון אחרי כותרת מקטע.
   ב-LibreChat upstream, ה-CustomMenuItem מוגדר עם
   `scroll-mt-[calc(var(--combobox-height,0px)+var(--label-height,4px))]`,
   כלומר scroll-margin-top של רק 4px+combobox מעל הפריט בעת ScrollIntoView של Ariakit.
   ה-dialog של בורר המודלים scrollable (overflow:auto, max-h:450px), וכש-hover על
   פריט שמיד אחרי כותרת מקטע, Ariakit עושה scrollIntoView והפריט מודבק לראש
   ה-viewport - מה שדוחף את הכותרת מעבר ל-top.
   הפתרון: scroll-margin-top גדול יותר לפריטים שמיד אחרי כותרת מקטע, כך שגם
   הכותרת תישאר visible. */
:is([role="menu"], [role="dialog"]):has(#model-search) .cti-model-section-header + [role="option"],
:is([role="menu"], [role="dialog"]):has(#model-search) .cti-model-section-header + [role="menuitem"] {
  scroll-margin-top: 60px !important;
}

/* מפריד ויזואלי בין קבוצות (אופציונלי)
   חשוב: מחריגים `[role="menuitem"]`/`[role="option"]` כי הם flex containers -
   ::after עליהם הופך לפריט flex (רוחב 0) וה-`gap` של השורה דוחף את לחצן הנעיצה
   הצידה. זה קרה דווקא בטריגר תת-תפריט פתוח (MCP): כשהתת-תפריט פתוח Ariakit מוסיף
   אלמנט אחרי הטריגר ב-wrapper, כך שהטריגר כבר אינו `:last-child` והכלל תפס אותו. */
#tools-dropdown-menu > div > div:not(:last-child):not([role="menuitem"]):not([role="option"])::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(37, 64, 143, 0.1);
  margin: 8px 0;
}

/* כפתור Dismiss (נסתר) */
#tools-dropdown-menu button[style*="clip"],
#attach-file-menu button[style*="clip"] {
  display: none !important;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  #tools-dropdown-menu.popover-ui,
  #attach-file-menu.popover-ui,
  [role="menu"][id^="tools-dropdown-menu-"],
  [role="menu"][id^="attach-file-menu-"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
  :is([role="menu"], [role="dialog"]):has(#model-search) {
    background: #1a1a2e !important;
    border-color: var(--brand-light) !important;
    box-shadow: 0 8px 24px rgba(125, 210, 239, 0.2) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"],
  #attach-file-menu [role="menuitem"],
  [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"],
  [role="menu"][id^="attach-file-menu-"] [role="menuitem"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"],
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] {
    color: var(--brand-light) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"]:hover,
  #tools-dropdown-menu [role="menuitem"][data-active-item="true"],
  #attach-file-menu [role="menuitem"]:hover,
  #attach-file-menu [role="menuitem"][data-active-item="true"],
  [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"]:hover,
  [role="menu"][id^="attach-file-menu-"] [role="menuitem"]:hover,
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]:hover,
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]:hover,
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"][data-active-item] {
    background: rgba(125, 210, 239, 0.12) !important;
    border-color: var(--brand-light) !important;
    color: var(--brand-light) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"] svg,
  #attach-file-menu [role="menuitem"] svg,
  [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"] svg,
  [role="menu"][id^="attach-file-menu-"] [role="menuitem"] svg,
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"] svg,
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] svg {
    color: var(--brand-light) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"] svg,
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"] svg {
    color: var(--brand-light) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover,
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover {
    background: var(--brand-light) !important;
    border-color: var(--brand-light) !important;
  }
  
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover svg,
  #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover svg {
    color: var(--brand-dark) !important;
  }
}

/* Dark mode using data-theme attribute */
html[data-theme="dark"] #tools-dropdown-menu.popover-ui,
html[data-theme="dark"] #attach-file-menu.popover-ui,
html[data-theme="dark"] .popover-ui[aria-labelledby^="conversation-menu-"],
html[data-theme="dark"] [role="menu"][id^="tools-dropdown-menu-"],
html[data-theme="dark"] [role="menu"][id^="attach-file-menu-"],
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) {
  background: #1a1a2e !important;
  border-color: var(--brand-light) !important;
  box-shadow: 0 8px 24px rgba(125, 210, 239, 0.2) !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"],
html[data-theme="dark"] #attach-file-menu [role="menuitem"],
html[data-theme="dark"] .popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"],
html[data-theme="dark"] [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"],
html[data-theme="dark"] [role="menu"][id^="attach-file-menu-"] [role="menuitem"],
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"],
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"]:hover,
html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"][data-active-item="true"],
html[data-theme="dark"] #attach-file-menu [role="menuitem"]:hover,
html[data-theme="dark"] #attach-file-menu [role="menuitem"][data-active-item="true"],
html[data-theme="dark"] .popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"]:hover,
html[data-theme="dark"] .popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"][data-active-item="true"],
html[data-theme="dark"] [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"]:hover,
html[data-theme="dark"] [role="menu"][id^="attach-file-menu-"] [role="menuitem"]:hover,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:hover,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:hover,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"][data-active-item],
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]:hover,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]:hover,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"][data-active-item] {
  background: rgba(125, 210, 239, 0.12) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] svg,
html[data-theme="dark"] #attach-file-menu [role="menuitem"] svg,
html[data-theme="dark"] .popover-ui[aria-labelledby^="conversation-menu-"] [role="menuitem"] svg,
html[data-theme="dark"] [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"] svg,
html[data-theme="dark"] [role="menu"][id^="attach-file-menu-"] [role="menuitem"] svg,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"] svg,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"] svg,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"] svg,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] svg {
  color: var(--brand-light) !important;
}

/* Dark Mode - קו מפריד ולחצני נעיצה */
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:not(:last-child)::after,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:not(:last-child)::after,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"]:not(:last-child)::after,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"]:not(:last-child)::after,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"]:not(:last-child):not(:has(+ .cti-model-section-header))::after,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"]:not(:last-child):not(:has(+ .cti-model-section-header))::after {
  background: rgba(125, 210, 239, 0.18) !important;
}

html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"]:hover,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"]:hover,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"]:hover,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"]:hover,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"]:hover,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"]:hover,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Pin"]:hover,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Unpin"]:hover,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="הצמד"]:hover {
  background: rgba(125, 210, 239, 0.18) !important;
}

html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"] svg,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"] svg,
html[data-theme="dark"] [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"] svg,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Pin"] svg,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="Unpin"] svg,
html[data-theme="dark"] [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) button[aria-label*="הצמד"] svg,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Pin"] svg,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="Unpin"] svg,
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) button[aria-label*="הצמד"] svg {
  color: var(--brand-light) !important;
}

/* Dark Mode - כותרות מקטעים */
html[data-theme="dark"] :is([role="menu"], [role="dialog"]):has(#model-search) .cti-model-section-header {
  color: var(--brand-light) !important;
  border-bottom-color: rgba(125, 210, 239, 0.25) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"] svg,
html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"] svg {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover,
html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}

html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Pin"]:hover svg,
html[data-theme="dark"] #tools-dropdown-menu [role="menuitem"] button[aria-label*="Unpin"]:hover svg {
  color: var(--brand-dark) !important;
}

/* אנימציות - fade in
   חשוב: שם ה-keyframes הוא ייחודי (tools-dropdown-fadeIn) כדי למנוע התנגשות
   עם אנימציות אחרות של LibreChat (כמו animate-popover-left) שעלולות להשתמש
   בשם דומה. */
#tools-dropdown-menu[data-enter="true"],
#attach-file-menu[data-enter="true"],
[role="menu"][id^="tools-dropdown-menu-"][data-enter="true"],
[role="menu"][id^="attach-file-menu-"][data-enter="true"] {
  animation: tools-dropdown-fadeIn 0.2s ease !important;
}

@keyframes tools-dropdown-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  #tools-dropdown-menu.popover-ui,
  #attach-file-menu.popover-ui,
  [role="menu"][id^="tools-dropdown-menu-"],
  [role="menu"][id^="attach-file-menu-"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]),
  :is([role="menu"], [role="dialog"]):has(#model-search) {
    min-width: 240px !important;
    padding: 6px !important;
  }
  
  #tools-dropdown-menu [role="menuitem"],
  #attach-file-menu [role="menuitem"],
  [role="menu"][id^="tools-dropdown-menu-"] [role="menuitem"],
  [role="menu"][id^="attach-file-menu-"] [role="menuitem"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
  [aria-labelledby^="endpoint-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="menuitem"],
  [aria-labelledby^="custom-group-"][aria-labelledby$="-menu"]:is([role="menu"], [role="dialog"]) [role="option"],
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="menuitem"],
  :is([role="menu"], [role="dialog"]):has(#model-search) [role="option"] {
    padding: 5px 8px !important;
    font-size: 0.85rem !important;
  }
}

/* ========== תפריט אפשרויות Artifacts (split-button dropdown) ==========
 * Ariakit.Menu מ-client/src/components/Chat/Input/Artifacts.tsx, נפתח בלחיצה על
 * לחצן החץ שצמוד ל-״רכיבי תצוגה״ (אפשרויות shadcn/ui, מצב פרומפט מותאם). אין לו
 * id יציב (auto-generated), אבל הקלאס `animate-popover-top-left` ייחודי לו (אומת
 * ב-grep - מופיע רק ב-Artifacts.tsx), אז הוא משמש כעוגן. מעצבים כמו שאר התפריטים:
 * רקע לבן, מסגרת כחולה, פינות מעוגלות, צל מותג, ופריטים בעיצוב המותג.
 * הערה: ה-padding מגיע מה-wrapper הפנימי (px-2 py-1.5) ומה-items (px-2 py-2),
 * אז לא כופים padding על המיכל כדי לא לקבל ריווח כפול. */
.animate-popover-top-left[role="menu"] {
  background: white !important;
  border: 2px solid var(--brand-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 64, 143, 0.15) !important;
}

/* כותרת התפריט ("אפשרויות ארטיפקטים") - בצבע המותג ומודגשת מעט */
.animate-popover-top-left .text-xs.font-medium {
  color: var(--brand-medium) !important;
  font-weight: 600 !important;
}

/* פריטי התפריט - עיצוב מותג זהה לשאר התפריטים */
.animate-popover-top-left [role="menuitem"] {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-size: 0.9rem !important;
}

/* hover / פריט פעיל */
.animate-popover-top-left [role="menuitem"]:hover,
.animate-popover-top-left [role="menuitem"][data-active-item] {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-dark) !important;
}

/* סימן הבחירה (Ariakit.MenuItemCheck) שמופיע כשהאפשרות פעילה - בצבע המותג */
.animate-popover-top-left [role="menuitem"] svg {
  color: var(--brand-medium) !important;
}

/* Dark Mode */
html[data-theme="dark"] .animate-popover-top-left[role="menu"] {
  background: #1a1a2e !important;
  border-color: var(--brand-light) !important;
  box-shadow: 0 8px 24px rgba(125, 210, 239, 0.2) !important;
}
html[data-theme="dark"] .animate-popover-top-left .text-xs.font-medium {
  color: var(--brand-light) !important;
}
html[data-theme="dark"] .animate-popover-top-left [role="menuitem"] {
  color: var(--brand-light) !important;
}
html[data-theme="dark"] .animate-popover-top-left [role="menuitem"]:hover,
html[data-theme="dark"] .animate-popover-top-left [role="menuitem"][data-active-item] {
  background: rgba(125, 210, 239, 0.12) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}
html[data-theme="dark"] .animate-popover-top-left [role="menuitem"] svg {
  color: var(--brand-light) !important;
}

/* ========== תפריטי ייצוא/שיתוף + "הוסף סימניות" + "סימניות" (סרגל היסטוריה) ====
 * שלושה תפריטים נפתחים בלחיצה על לחצן שמופיע בשורת לחצנים עליונה:
 *   - ExportAndShareMenu.tsx  (trigger id="export-menu-button")       — שורת הצ'אט העליונה (רק בשיחה פעילה)
 *   - Menus/BookmarkMenu.tsx  (trigger id="bookmark-menu-button")     — שורת הצ'אט העליונה (רק בשיחה פעילה)
 *   - לחצן "סימניות" בראש סרגל היסטוריית השיחות (trigger id="bookmark-nav-menu-button")
 * כולם DropdownPopup (Ariakit.Menu); Ariakit מעביר את id ה-trigger ל-aria-labelledby
 * של ה-Menu, ולכן הוא משמש כעוגן יציב. ה-:is() מאחד את שלושת העוגנים כדי שלא
 * נחזור על הסלקטור 3 פעמים בכל כלל (הוספת תפריט נוסף = הוספת ערך אחד ל-:is()).
 *
 * חשוב: לא מעצבים לפי `.popover-ui[role="menu"]` לבדו - הקלאס הזה משותף גם לתפריט
 * הגדרות החשבון (`account-settings-popover`) ולתפריטים נוספים שלא רוצים לגעת בהם.
 * מעצבים כמו שאר התפריטים בממשק (זהה לתפריט אפשרויות השיחה): רקע לבן, מסגרת
 * כחולה, פינות מעוגלות, צל מותג, ופריטים בעיצוב המותג. */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) {
  background: white !important;
  border: 2px solid var(--brand-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 64, 143, 0.15) !important;
  padding: 6px !important;
  min-width: 11rem !important;
}

/* פריטי התפריט - עיצוב בסיסי */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"] {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* hover / פריט פעיל */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"]:hover,
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"][data-active-item="true"] {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
}

/* focus / active */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"]:focus,
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"]:active {
  background: rgba(37, 64, 143, 0.12) !important;
  border-color: var(--brand-medium) !important;
  outline: none !important;
}

/* טקסט בתוך הפריטים */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"] span {
  color: inherit !important;
}

/* אייקונים בתוך הפריטים - צביעה בצבע המותג (שמירה על fill/stroke מקוריים דרך
   currentColor; ב-LibreChat הם מוגדרים text-text-secondary והופכים פה לכחול) */
.popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"] svg {
  color: var(--brand-medium) !important;
  transition: all 0.2s ease !important;
}

/* Dark Mode */
html[data-theme="dark"] .popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) {
  background: #1a1a2e !important;
  border-color: var(--brand-light) !important;
  box-shadow: 0 8px 24px rgba(125, 210, 239, 0.2) !important;
}
html[data-theme="dark"] .popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"] {
  color: var(--brand-light) !important;
}
html[data-theme="dark"] .popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"]:hover,
html[data-theme="dark"] .popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"][data-active-item="true"] {
  background: rgba(125, 210, 239, 0.12) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}
html[data-theme="dark"] .popover-ui:is([aria-labelledby="export-menu-button"], [aria-labelledby="bookmark-menu-button"], [aria-labelledby="bookmark-nav-menu-button"]) [role="menuitem"] svg {
  color: var(--brand-light) !important;
}

/* ========== תפריט הגדרות החשבון (תמונת המשתמש) ==========
 * AccountSettings.tsx משתמש ב-Ariakit.Menu עם class יציב:
 * `account-settings-popover popover-ui`. אין לו trigger id יציב ב-aria-labelledby
 * (Ariakit מקצה id דינמי), ולכן מעצבים לפי הקלאס הייעודי במקום לפי role כללי.
 * הפריט "עזרה ושאלות נפוצות" מוסתר דרך account-settings-menu-fix.js כי אין לו
 * aria-label או id יציבים, ורק הטקסט המתורגם מזהה אותו בבטחה. */
.account-settings-popover.popover-ui {
  background: white !important;
  border: 2px solid var(--brand-medium) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(37, 64, 143, 0.15) !important;
  padding: 8px !important;
  min-width: 244px !important;
}

.account-settings-popover [role="note"] {
  color: var(--brand-dark) !important;
  direction: ltr !important;
  text-align: left !important;
  padding: 8px 10px !important;
  margin: 0 0 4px !important;
  font-size: 0.875rem !important;
  opacity: 0.78 !important;
}

.account-settings-popover [role="separator"] {
  background: rgba(37, 64, 143, 0.16) !important;
  height: 1px !important;
  margin: 6px 2px !important;
}

.account-settings-popover [role="menuitem"] {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  margin: 2px 0 !important;
  min-height: 34px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.account-settings-popover [role="menuitem"]:hover,
.account-settings-popover [role="menuitem"][data-active-item="true"],
.account-settings-popover [role="menuitem"]:focus,
.account-settings-popover [role="menuitem"]:active {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
  outline: none !important;
}

.account-settings-popover [role="menuitem"] svg {
  color: var(--brand-medium) !important;
  transition: all 0.2s ease !important;
}

/* קו מפריד דק ועדין בין פריטים בכל התפריטים הממותגים.
   זה מקביל לקווים בתפריט בחירת המודלים, אבל מוגבל לתפריטים שכבר עוצבו
   בפרוקסי כדי לא לשנות תפריטים פנימיים של LibreChat שלא עברו מיתוג. */
:is(
  #tools-dropdown-menu,
  #attach-file-menu,
  .popover-ui[aria-labelledby^="conversation-menu-"],
  .popover-ui[aria-labelledby="export-menu-button"],
  .popover-ui[aria-labelledby="bookmark-menu-button"],
  .popover-ui[aria-labelledby="bookmark-nav-menu-button"],
  .account-settings-popover
) [role="menuitem"] {
  position: relative !important;
}

:is(
  #tools-dropdown-menu,
  #attach-file-menu,
  .popover-ui[aria-labelledby^="conversation-menu-"],
  .popover-ui[aria-labelledby="export-menu-button"],
  .popover-ui[aria-labelledby="bookmark-menu-button"],
  .popover-ui[aria-labelledby="bookmark-nav-menu-button"],
  .account-settings-popover
) [role="menuitem"]:not(:last-child):not(:has(+ [role="separator"]))::after {
  content: '' !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: -3px !important;
  height: 1px !important;
  background: rgba(37, 64, 143, 0.12) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .account-settings-popover.popover-ui {
  background: #1a1a2e !important;
  border-color: var(--brand-light) !important;
  box-shadow: 0 8px 24px rgba(125, 210, 239, 0.2) !important;
}

html[data-theme="dark"] .account-settings-popover [role="note"],
html[data-theme="dark"] .account-settings-popover [role="menuitem"] {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .account-settings-popover [role="separator"] {
  background: rgba(125, 210, 239, 0.2) !important;
}

html[data-theme="dark"] .account-settings-popover [role="menuitem"]:hover,
html[data-theme="dark"] .account-settings-popover [role="menuitem"][data-active-item="true"],
html[data-theme="dark"] .account-settings-popover [role="menuitem"]:focus,
html[data-theme="dark"] .account-settings-popover [role="menuitem"]:active {
  background: rgba(125, 210, 239, 0.12) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .account-settings-popover [role="menuitem"] svg {
  color: var(--brand-light) !important;
}

html[data-theme="dark"]
  :is(
    #tools-dropdown-menu,
    #attach-file-menu,
    .popover-ui[aria-labelledby^="conversation-menu-"],
    .popover-ui[aria-labelledby="export-menu-button"],
    .popover-ui[aria-labelledby="bookmark-menu-button"],
    .popover-ui[aria-labelledby="bookmark-nav-menu-button"],
    .account-settings-popover
  )
  [role="menuitem"]:not(:last-child):not(:has(+ [role="separator"]))::after {
  background: rgba(125, 210, 239, 0.18) !important;
}