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

/* ⚠ שלושת טוקני המותג עברו ל-`core/brand.css` (ראו ההערה שם). הם היו מוגדרים
 * כאן **וגם** ב-`header-buttons-style.css` — אותו ערך בשני מקומות. */

/* התפריטים עצמם - רקע לבן עם מסגרת כחולה.
   ה-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="menu"].min-w-\[13rem\]
) [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="menu"].min-w-\[13rem\]
) [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="menu"].min-w-\[13rem\]
  )
  [role="menuitem"]:not(:last-child):not(:has(+ [role="separator"]))::after {
  background: rgba(125, 210, 239, 0.18) !important;
}

/* ========== תפריט "אפשרויות נוספות" של הודעה ממתינה/כיוונון (RowMenu) ==========
 * נוסף ב-upstream עם מנגנון ה-steering: כשהמודל עונה והמשתמש שולח הודעה נוספת,
 * היא ממתינה בתור (שורת QueuedRow) או נשלחת ככיוונון (בועת InFlightSteers), ולידה
 * לחצן שלוש-נקודות. שני המשטחים חולקים את אותו רכיב — `RowMenu` שב-
 * client/src/components/Chat/Input/SteerMenu.tsx — ולכן כלל אחד מכסה את שניהם.
 *
 * העוגן: ל-Ariakit.Menu הזה אין id יציב (Ariakit מקצה `:r27:` וכדומה) ואין
 * `popover-ui`, ולכן אי אפשר לעגון ב-aria-labelledby כמו בשאר התפריטים כאן.
 * מעגנים במחלקה `min-w-[13rem]` מתוך MENU_CLASS: אומת ב-grep שהיא מופיעה בדיוק
 * פעם אחת בכל קוד-הלקוח (SteerMenu.tsx), ואומת בדפדפן החי שהיא מגיעה ל-DOM כפי
 * שהיא. ⚠️ מחרוזת-Tailwind שרירותית היא עוגן שביר יחסית — אם התפריט חוזר להיראות
 * אפור אחרי git pull, זה החשוד הראשון (השכן `min-w-[12rem]` הוא ה-Hovercard של
 * לחצן השליחה בזמן ריצה, משטח אחר). */
[role="menu"].min-w-\[13rem\] {
  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;
  /* ל-upstream יש `min-w-[13rem]` בלי תקרה, ותיבת ההסבר של "מידע נוסף" היא פסקה
     שלמה בשורה אחת — כשפותחים אותה התפריט נמתח לרוחב כל המסך. תקרה + wrap. */
  max-width: min(26rem, calc(100vw - 32px)) !important;
}

[role="menu"].min-w-\[13rem\] [role="none"] > div[id]:not([role]) {
  white-space: normal !important;
}

/* פריטי התפריט. מוחרג פריט ה-"מידע נוסף" (CircleHelp) — הוא ריבוע `size-8` צמוד
   לפריט, ופדינג של שורה רגילה היה מעוות אותו. הוא היחיד בתפריט עם aria-expanded. */
[role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]) {
  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;
}

[role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]):hover,
[role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded])[data-active-item],
[role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]):focus {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
  outline: none !important;
}

/* לחצן "מידע נוסף" — נשאר ריבועי, מקבל רק את צבעי המותג */
[role="menu"].min-w-\[13rem\] [role="menuitem"][aria-expanded] {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

[role="menu"].min-w-\[13rem\] [role="menuitem"][aria-expanded]:hover,
[role="menu"].min-w-\[13rem\] [role="menuitem"][aria-expanded][data-active-item] {
  background: rgba(37, 64, 143, 0.08) !important;
}

/* אייקונים: צבע המותג, בלי דריסת fill/stroke (כמו בשאר התפריטים כאן).
   ⚠️ מוחרגים האייקונים בעלי צבע סמנטי מפורש — Clock תכלת = "בתור", Zap ענבר =
   "כיוונון", ZapOff/אדום = הפסקה. אותם צבעים בדיוק מופיעים על השורה עצמה מחוץ
   לתפריט, וצביעתם בכחול אחיד הייתה מוחקת את ההבחנה בין הפעולות. */
[role="menu"].min-w-\[13rem\] [role="menuitem"] svg:not([class*="text-cyan"]):not([class*="text-amber"]):not([class*="text-red"]):not([class*="text-green"]) {
  color: var(--brand-medium) !important;
  transition: all 0.2s ease !important;
}

[role="menu"].min-w-\[13rem\] [role="menuitem"] span {
  color: inherit !important;
}

/* המפריד בין הפעולות למקטע "העדפות" */
[role="menu"].min-w-\[13rem\] [role="separator"] {
  border-color: rgba(37, 64, 143, 0.16) !important;
}

/* כותרת מקטע "העדפות" — באותו קו של כותרות-המקטעים בבורר המודלים */
[role="menu"].min-w-\[13rem\] [role="group"] > div:first-child {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
}

/* תיבת ההסבר שנפתחת בלחיצה על "מידע נוסף".
   ה-`:not(.sr-only)` משאיר את המצב הסגור כפי שהוא — הוא נגיש-לקוראי-מסך בלבד
   ואסור להציגו.
   ⚠️ ה-`:not([role])` הכרחי: שלושת העוטפים ב-RowMenu נושאים `role="none"`, ו-
   Ariakit.MenuItem מרונדר כ-div עם id אוטומטי — כלומר `[role="none"] > div[id]`
   לבדו תופס גם את פריטי התפריט עצמם וצובע את כולם ברקע ההסבר. לתיבת ההסבר,
   ורק לה, אין תכונת role. */
[role="menu"].min-w-\[13rem\] [role="none"] > div[id]:not([role]):not(.sr-only) {
  background: rgba(37, 64, 143, 0.06) !important;
  border: 1px solid rgba(37, 64, 143, 0.12) !important;
  color: var(--brand-dark) !important;
}

/* Dark Mode */
html[data-theme="dark"] [role="menu"].min-w-\[13rem\] {
  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"] [role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]) {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]):hover,
html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded])[data-active-item],
html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="menuitem"]:not([aria-expanded]):focus,
html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="menuitem"][aria-expanded]:hover,
html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="menuitem"][aria-expanded][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"] [role="menu"].min-w-\[13rem\] [role="menuitem"] svg:not([class*="text-cyan"]):not([class*="text-amber"]):not([class*="text-red"]):not([class*="text-green"]) {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="separator"] {
  border-color: rgba(125, 210, 239, 0.2) !important;
}

html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="group"] > div:first-child {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] [role="menu"].min-w-\[13rem\] [role="none"] > div[id]:not([role]):not(.sr-only) {
  background: rgba(125, 210, 239, 0.08) !important;
  border-color: rgba(125, 210, 239, 0.18) !important;
  color: var(--brand-light) !important;
}

/* ========== חלונית "אפשרויות שליחה נוספות" בזמן ריצה (DuringRunSendButton) =====
 * המשטח השני של מנגנון ה-steering: כשהמודל עונה ויש טקסט בתיבת ההקלדה, לחצן
 * השליחה מתחלף, וריחוף מעליו פותח רשימת פעולות (כיוונון / תור / עצירה וכיוונון /
 * עצירה ושליחה) עם צירופי המקשים שלהן.
 *
 * ⚠️ זה **אינו** תפריט: `Ariakit.Hovercard` יורש את `role="dialog"` מ-Dialog
 * (`@ariakit/react-components/src/dialog/dialog.tsx:580`), והפריטים הם `<button>`
 * רגילים ולא `[role="menuitem"]` — לכן אף אחד מכללי התפריטים שבקובץ הזה לא תופס
 * אותו, והוא נשאר אפור לצד תפריטים ממותגים.
 *
 * העוגן `min-w-[12rem]` הוא אחיו של `min-w-[13rem]` שלמעלה (שם, ב-RowMenu):
 * אומת ב-grep כמופע יחיד ב-client/src. אותה שבירוּת, אותו חשד ראשון אחרי pull.
 * ⚠️ החלונית נפתחת ב-**ריחוף בלבד** ואי-אפשר לפתוח אותה באירועי-עכבר סינתטיים
 * (‏Ariakit מסתמך על מיקום-מצביע אמיתי) — בדיקה ידנית בלבד. */
.min-w-\[12rem\] {
  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-w-\[12rem\] > button {
  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;
}

.min-w-\[12rem\] > button:hover:not([aria-disabled="true"]),
.min-w-\[12rem\] > button:focus-visible {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
  outline: none !important;
}

/* אותה החרגה כמו ב-RowMenu: הצבע הסמנטי של האייקון (תכלת=תור, ענבר=כיוונון,
   אדום=עצירה) הוא מה שמבדיל בין ארבע הפעולות, ואסור לאחד אותו לכחול. */
.min-w-\[12rem\] > button > svg:not([class*="text-cyan"]):not([class*="text-amber"]):not([class*="text-red"]):not([class*="text-green"]) {
  color: var(--brand-medium) !important;
}

/* תג צירוף-המקשים (Kbd) */
.min-w-\[12rem\] kbd {
  background: rgba(37, 64, 143, 0.08) !important;
  color: var(--brand-medium) !important;
}

/* קו הפרדה עדין בין הפעולות — מקביל לזה שבשאר התפריטים הממותגים */
.min-w-\[12rem\] > button {
  position: relative !important;
}

.min-w-\[12rem\] > button:not(:last-child)::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;
}

/* Dark Mode */
html[data-theme="dark"] .min-w-\[12rem\] {
  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"] .min-w-\[12rem\] > button {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .min-w-\[12rem\] > button:hover:not([aria-disabled="true"]),
html[data-theme="dark"] .min-w-\[12rem\] > button:focus-visible {
  background: rgba(125, 210, 239, 0.12) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .min-w-\[12rem\] > button > svg:not([class*="text-cyan"]):not([class*="text-amber"]):not([class*="text-red"]):not([class*="text-green"]) {
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .min-w-\[12rem\] kbd {
  background: rgba(125, 210, 239, 0.14) !important;
  color: var(--brand-light) !important;
}

html[data-theme="dark"] .min-w-\[12rem\] > button:not(:last-child)::after {
  background: rgba(125, 210, 239, 0.18) !important;
}