/* Header Buttons Style - Projects UI Minimalist Theme */
/* Override LibreChat default button styles to match Projects UI design */

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

/* Greeting text color - "בוקר טוב", "לילה טוב" etc */
p.split-parent.text-text-primary,
p.split-parent.text-text-primary span {
  color: #25408f !important;
}

/* Remove borders from collapsed sidebar buttons (left panel) */
[data-collapsed="true"] button.inline-flex,
[data-collapsed="true"] button {
  border: none !important;
  background: transparent !important;
}

[data-collapsed="true"] button.inline-flex:hover,
[data-collapsed="true"] button:hover {
  border: none !important;
  background: rgba(37, 64, 143, 0.1) !important;
}

/* Send button - change background from black to blue */
#send-button,
button[data-testid="send-button"] {
  background-color: #25408f !important;
}

#send-button:hover:not(:disabled),
button[data-testid="send-button"]:hover:not(:disabled) {
  background-color: #16213f !important; /* Darker blue on hover */
}

#send-button:disabled,
button[data-testid="send-button"]:disabled {
  background-color: rgba(37, 64, 143, 0.5) !important; /* Medium blue when disabled - 50% opacity */
}

/* ========== Artifacts split-button - לחצן חץ של תפריט האפשרויות ==========
 * רכיב Artifacts (client/src/components/Chat/Input/Artifacts.tsx) מרנדר כש-״רכיבי
 * תצוגה״ פעיל split button: לחצן ראשי (CheckboxButton) + לחצן חץ (Ariakit.MenuButton)
 * שפותח תפריט אפשרויות (shadcn/ui, custom prompt).
 *
 * force-header-buttons-style.js צובע את הלחצן הראשי בכחול המותג (כי הוא
 * button.inline-flex), אבל לחצן החץ **אין לו** את הקלאס inline-flex ולכן הסקריפט
 * מדלג עליו והוא נשאר בעיצוב ה-amber המקורי של LibreChat (bg-amber-500/10). כאן
 * צובעים אותו בכחול המותג כדי שיתאים ללחצן הראשי.
 *
 * הסלקטור `rounded-l-none.rounded-r-full` ייחודי ללחצן החץ הזה (אומת ב-grep:
 * צירוף הקלאסים מופיע רק ב-Artifacts.tsx). */
button.rounded-l-none.rounded-r-full[aria-haspopup="menu"] {
  background-color: var(--brand-medium) !important;
  border-color: var(--brand-medium) !important;
  color: white !important;
  /* קצה חיצוני (ימין) מעוגל 0.5rem כמו הפינות של הלחצן הראשי, במקום pill מלא */
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  /* הלחצן הראשי מעוגל 0.5rem בכל הפינות (מה-JS), כך שבמפגש נשאר "חריץ" קטן.
     חפיפה של 0.5rem (=רדיוס הפינה) על הלחצן הראשי מכסה אותו, והקו הלבן הדק
     (border-left) מצייר הפרדה נקייה במקום המפגש - מראה split-button קלאסי. */
  margin-left: -0.5rem !important;
  border-left: 1.5px solid white !important;
  position: relative !important;
  z-index: 1 !important;
}

/* אייקון החץ - לבן כדי שיתאים לרקע הכחול */
button.rounded-l-none.rounded-r-full[aria-haspopup="menu"] svg {
  color: white !important;
  stroke: white !important;
}

/* ---------- תזוזת hover משותפת לשני חלקי ה-split button ----------
 * ההרמה (translateY) וה-box-shadow ב-hover חלים על **המיכל** (div.flex) ולא על
 * כל לחצן בנפרד, כך ששני החלקים (״רכיבי תצוגה״ + החץ) זזים יחד ולא נפרדים.
 * ה-JS (force-header-buttons-style.js) מדלג על ה-transform/box-shadow הפרטי של
 * הלחצן הראשי (ראה isArtifactsSplitMain) כדי שלא יצטבר על תזוזת המיכל ויגרום
 * לחלקים לזוז במרחק שונה. border-radius על המיכל גורם לצל לעקוב את הצורה המעוגלת. */
div.flex:has(> button.rounded-l-none.rounded-r-full[aria-haspopup="menu"]) {
  border-radius: 0.5rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
div.flex:has(> button.rounded-l-none.rounded-r-full[aria-haspopup="menu"]):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 64, 143, 0.2) !important;
}

/* Target all header buttons with maximum specificity */
/* Use multiple class combinations to override Tailwind CSS */

/* Main button styles - LibreChat native buttons */
header button.cursor-pointer.inline-flex,
header button.inline-flex.size-10,
header button.inline-flex.flex-shrink-0,
header button.inline-flex.items-center,
header [role="button"].cursor-pointer.inline-flex,
header [role="button"].inline-flex.size-10,
/* Custom buttons */
button.maintenance-button {
  background: transparent !important;
  background-color: transparent !important;
  color: #25408f !important;
  border: 1.5px solid #25408f !important;
  border-color: #25408f !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  min-height: 40px !important;
  min-width: 40px !important;
}

/* Model selector: newer LibreChat builds render it as `button.flex` rather than
   `button.inline-flex`, so it must not depend on the generic header selectors or
   on the delayed JS styling pass. */
header button[aria-label="בחר מודל"],
header button[aria-label*="Select model"],
header button[class*="max-w-[70vw]"] {
  background: var(--presentation, #fff) !important;
  background-color: var(--presentation, #fff) !important;
  color: #25408f !important;
  border: 1.5px solid #25408f !important;
  border-color: #25408f !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

/* Hover state - fill with brand color */
header button.cursor-pointer.inline-flex:hover:not(:disabled),
header button.inline-flex.size-10:hover:not(:disabled),
header button.inline-flex.flex-shrink-0:hover:not(:disabled),
header button.inline-flex.items-center:hover:not(:disabled),
header [role="button"].cursor-pointer.inline-flex:hover:not(:disabled),
header [role="button"].inline-flex.size-10:hover:not(:disabled),
header button[aria-label="בחר מודל"]:hover:not(:disabled),
header button[aria-label*="Select model"]:hover:not(:disabled),
header button[class*="max-w-[70vw]"]:hover:not(:disabled),
button.maintenance-button:hover {
  background: #25408f !important;
  background-color: #25408f !important;
  color: white !important;
  border-color: #25408f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 64, 143, 0.2) !important;
}

/* Active/pressed state */
header button.cursor-pointer.inline-flex:active:not(:disabled),
header button.inline-flex.size-10:active:not(:disabled),
header button.inline-flex.flex-shrink-0:active:not(:disabled),
header button.inline-flex.items-center:active:not(:disabled),
header [role="button"].cursor-pointer.inline-flex:active:not(:disabled),
header [role="button"].inline-flex.size-10:active:not(:disabled),
header button[aria-label="בחר מודל"]:active:not(:disabled),
header button[aria-label*="Select model"]:active:not(:disabled),
header button[class*="max-w-[70vw]"]:active:not(:disabled),
button.maintenance-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(37, 64, 143, 0.15) !important;
}

/* Disabled state */
header button.cursor-pointer.inline-flex:disabled,
header button.inline-flex:disabled,
header [role="button"].inline-flex:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Icon colors inside buttons */
header button.inline-flex svg,
header [role="button"].inline-flex svg,
.maintenance-button svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Model selector icon can be re-rendered after switching back from the
   Files & Projects agent. Keep the newly inserted SVG aligned with the
   button text color instead of falling back to black. */
header button[aria-label="בחר מודל"] svg,
header button[aria-label="בחר מודל"] svg path,
header button[aria-label="בחר מודל"] svg g,
header button[aria-label="בחר מודל"] svg rect,
header button[class*="max-w-[70vw]"] svg,
header button[class*="max-w-[70vw]"] svg path,
header button[class*="max-w-[70vw]"] svg g,
header button[class*="max-w-[70vw]"] svg rect {
  color: #25408f !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

header button[aria-label="בחר מודל"]:hover svg,
header button[aria-label="בחר מודל"]:hover svg path,
header button[aria-label="בחר מודל"]:hover svg g,
header button[aria-label="בחר מודל"]:hover svg rect,
header button[class*="max-w-[70vw]"]:hover svg,
header button[class*="max-w-[70vw]"]:hover svg path,
header button[class*="max-w-[70vw]"]:hover svg g,
header button[class*="max-w-[70vw]"]:hover svg rect {
  color: #fff !important;
}

/* Override specific Tailwind classes that LibreChat uses */
header button.border-border-light {
  border-color: #25408f !important;
}

header button.bg-transparent.border-border-light {
  background: transparent !important;
  border-color: #25408f !important;
}

header button.text-text-primary.inline-flex {
  color: #25408f !important;
}

header button.shadow-sm.inline-flex {
  box-shadow: none !important;
}

header button.rounded-xl.inline-flex {
  border-radius: 0.5rem !important;
}

/* Hover overrides for specific Tailwind classes */
header button.hover\:bg-surface-hover:hover,
header button.hover\:bg-surface-tertiary:hover {
  background: #25408f !important;
  color: white !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  header button.cursor-pointer.inline-flex,
  header button.inline-flex.size-10,
  header [role="button"].inline-flex,
  button.maintenance-button {
    background: transparent !important;
    color: #7dd2ef !important;
    border-color: #7dd2ef !important;
  }
  
  header button.cursor-pointer.inline-flex:hover:not(:disabled),
  header button.inline-flex:hover:not(:disabled),
  header [role="button"].inline-flex:hover:not(:disabled),
  button.maintenance-button:hover {
    background: #7dd2ef !important;
    color: #16213f !important;
    border-color: #7dd2ef !important;
    box-shadow: 0 4px 12px rgba(125, 210, 239, 0.3) !important;
  }
  
}

/* Dark mode using data-theme attribute (LibreChat style) */
html[data-theme="dark"] header button.inline-flex,
html[data-theme="dark"] header [role="button"].inline-flex,
html[data-theme="dark"] .maintenance-button {
  background: transparent !important;
  color: #7dd2ef !important;
  border-color: #7dd2ef !important;
}

html[data-theme="dark"] header button.inline-flex:hover:not(:disabled),
html[data-theme="dark"] header [role="button"].inline-flex:hover:not(:disabled),
html[data-theme="dark"] .maintenance-button:hover {
  background: #7dd2ef !important;
  color: #16213f !important;
  border-color: #7dd2ef !important;
  box-shadow: 0 4px 12px rgba(125, 210, 239, 0.3) !important;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  header button.inline-flex,
  header [role="button"].inline-flex,
  .maintenance-button {
    padding: 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    min-width: 36px !important;
  }
}

/* RTL support */
html[data-rtl="true"] header button,
html[dir="rtl"] header button {
  direction: rtl !important;
}

/* Exclude dropdown menu items.
   הסלקטור `button[aria-haspopup="menu"] + * button` הוסר כי הוא תפס בטעות גם
   כפתורים שאינם בתפריט - למשל כפתור "Clear search" במיכל החיפוש שב-sibling אחרי
   כפתור "סימניות" (שמכיל aria-haspopup="menu"). זה גרם ל-padding של דפדפן ברירת
   מחדל (1px 6px) שדחס את ה-X ל-4px רוחב. במצב כלי הניווט המודרני, פריטי תפריט
   מסומנים תמיד עם role="menu"/role="menuitem", ולכן הסלקטורים האלו מספיקים. */
[role="menu"] button,
[role="menuitem"] {
  background: revert !important;
  color: revert !important;
  border: revert !important;
  border-radius: revert !important;
  padding: revert !important;
  box-shadow: revert !important;
  transform: none !important;
}

/* ========== "שיחה חדשה" - העברה מסרגל האייקונים לכותרת ==========
   ה-JS (move-sidebar-buttons.js) מוסיף את הקלאס הזה ללחצן המקורי שמרנדר
   ע"י LibreChat בסרגל האייקונים, וכן יוצר עותק חדש בכותרת העליונה ליד
   בורר המודל. הכלל הבא מסתיר את המקורי בלי לפגוע במצב ה-React (האלמנט
   נשאר ב-DOM כדי שניתן יהיה להפעיל עליו .click() כפרוקסי לניתוב). */
a[data-testid="new-chat-button"].header-new-chat-original-hidden {
  display: none !important;
}

/* עיצוב הלחצן החדש בכותרת - תואם את שאר הלחצנים העגולים בכותרת */
.header-new-chat-button {
  cursor: pointer !important;
}

.header-new-chat-button svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: inherit !important;
  stroke: currentColor !important;
}

/* ========== ProgressText (ToolCall "מריץ ...") - מסגרת ועיצוב ==========
 * הלחצן בתוך `.progress-text-wrapper` הוא ה-indicator של LibreChat לקריאות
 * Tool/MCP ("מריץ <שם הכלי>"). force-header-buttons-style.js מדלג עליו
 * (אחרת הוא נעטף בסטיילים שגורמים לחפיפה על הטקסט שאחריו), והעיצוב מוגדר
 * כאן ישירות. כדי שהלחצן יקבל padding אמיתי (כמו שאר לחצני ה-header)
 * **בלי** שהטקסט שמתחת יוסתר, חייבים גם להפוך את שרשרת ההורים מגובה
 * קבוע ל-auto:
 *   - LibreChat נותן ל-`.progress-text-content` `position: absolute` ול-
 *     `.progress-text-wrapper` + flex container `h-5` (20px). זה תקין רק
 *     כשה-button באמת 20px (טקסט בלבד). ברגע שיש padding, ה-button גדל
 *     ל-~41px, ה-content (absolute) יוצא 21px מתחת ל-wrapper ומכסה את
 *     ההודעה שמתחת.
 *   - הפתרון: להפוך את ה-content ל-`position: static` כך שהוא חוזר ל-flow,
 *     ולתת לwrapper ול-flex container `height: auto`. כך הם גדלים יחד
 *     עם ה-button והטקסט הבא נדחף למקומו הטבעי. */
.progress-text-wrapper button,
.progress-text-content button {
  background: transparent !important;
  color: var(--brand-medium) !important;
  border: 1.5px solid var(--brand-medium) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem !important;
  transition: all 0.25s ease !important;
}

.progress-text-wrapper button:hover:not(:disabled),
.progress-text-content button:hover:not(:disabled) {
  background: var(--brand-medium) !important;
  color: white !important;
}

.progress-text-wrapper button > span,
.progress-text-content button > span {
  color: inherit !important;
}

.progress-text-wrapper button > svg,
.progress-text-content button > svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* החזר את ה-content ל-flow רגיל ותן לו לתפוס רק את רוחב הלחצן.
 * `width: fit-content` חשוב כדי שב-RTL הלחצן יוצמד לקצה הימני ב-block flow
 * (אם נשאיר w-full, הוא יתפרש על כל ה-row והעיגול ייפרס לכל הרוחב). */
.progress-text-content {
  position: static !important;
  width: fit-content !important;
}

/* ה-wrapper וה-flex container ההורה: גובה ייקבע לפי תוכן (=גובה הלחצן) */
.progress-text-wrapper {
  height: auto !important;
}

div.flex:has(> .progress-text-wrapper) {
  height: auto !important;
  /* מרווח עליון סימטרי ל-margin-bottom: בלעדיו המיכל של ריצת הכלי נצמד
     לפסקת הטקסט שמעליו (LibreChat נותן רק my-1.5 = 6px). */
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* ========== ThinkingButton ("הצגת תהליך החשיבה של המודל") - צבע כחול ==========
 * לחצן הרחבת/כיווץ תהליך החשיבה (Thinking/Reasoning) מוצג כברירת מחדל בצבע
 * טקסט רגיל ולכן נראה כחלק מטקסט השיחה. צובעים אותו בכחול המותג (כמו מיכלי
 * הכלים) כדי שיהיה ברור שזה אובייקט לחיץ ולא טקסט. הרכיב המשותף הוא
 * ThinkingButton (Thinking.tsx): div.group/thinking > button.group/button
 * עם אייקון נורה (lucide-lightbulb). מוסיפים גם סלקטור גיבוי לפי הנורה. */
.group\/thinking button.group\/button,
button.group\/button:has(> span > svg.lucide-lightbulb) {
  color: var(--brand-medium) !important;
}

.group\/thinking button.group\/button svg,
button.group\/button:has(> span > svg.lucide-lightbulb) svg {
  color: var(--brand-medium) !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] .group\/thinking button.group\/button,
html[data-theme="dark"] button.group\/button:has(> span > svg.lucide-lightbulb),
html[data-theme="dark"] .group\/thinking button.group\/button svg,
html[data-theme="dark"] button.group\/button:has(> span > svg.lucide-lightbulb) svg {
  color: var(--brand-light) !important;
}

/* ========== ThinkingButton (מכווץ) - תיקון "מרווח כפול" ==========
 * מיכל ה-parts של ההודעה הוא flex-column עם gap-0, וב-flex אין
 * margin-collapse. ללחצן ה-Thinking יש מרווח נטיבי משלו (Reasoning.tsx:
 * `div.mb-2 pb-2 pt-2` → padding-top 8px, padding-bottom 8px, margin-bottom
 * 8px; legacy Thinking.tsx: `mb-4` = 16px). המרווח הזה מצטבר ל-margin של
 * מיכלי הכלים (16px) ויוצר פער ויזואלי של ~27-35px ("מרווח כפול") במקום 16px.
 *
 * כשהלחצן מכווץ (aria-expanded="false") תוכן ה-Thinking בגובה 0, ולכן ה-
 * padding/margin הנטיבי הוא רק "אוויר" מבוזבז מתחת/מעל הלחצן. מנטרלים אותו
 * כך שהקופסה צמודה ללחצן, והפער נקבע ע"י ה-margin של המיכל השכן (16px) -
 * עקבי עם טקסט→מיכל. כשהלחצן מורחב לא נוגעים (ה-padding שומר על המרווח
 * בין הלחצן למיכל תוכן ה-Thinking). חל גם על Reasoning (סוכנים) וגם על
 * Thinking (legacy) דרך המחלקה המשותפת group/thinking-container. */
.group\/thinking-container:has(button.group\/button[aria-expanded="false"]) > div.pt-2.pb-2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* אחרי שניטרלנו את המרווח הפנימי של Thinking מכווץ, מחזירים מרווח רק בכיוון
 * שבו השכן הוא טקסט רגיל. ליד מיכלי כלים המרווח כבר מגיע מהמיכל עצמו (16px),
 * ולכן:
 *   Text -> Thinking -> Tool  : מוסיפים רק margin-top ל-Thinking.
 *   Tool -> Thinking -> Text  : מוסיפים רק margin-bottom ל-Thinking.
 *   Text -> Thinking -> Text  : שני הכללים חלים, 16px בשני הכיוונים.
 *   Tool -> Thinking -> Tool  : אף כלל לא חל, הכלים נותנים את שני המרווחים. */
.text-message + .group\/reasoning:has(button.group\/button[aria-expanded="false"]) {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.group\/reasoning:has(button.group\/button[aria-expanded="false"]):has(+ .text-message) {
  margin-bottom: 1rem !important;
}

/* ========== ToolCallGroup ("Used N tools") - מיכל יציב ==========
 * הלחצן ב-ToolCallGroup (`client/src/components/Chat/Messages/Content/ToolCallGroup.tsx`)
 * הוא agregator שמוצג כש-LLM קורא לכמה כלים ברצף (לדוגמה כשהוא עושה
 * חיפוש Web Search מרובה צעדים). הוא מציג "Used N tools — <tool names>"
 * עם ChevronDown להרחבה. ה-LibreChat נותן לו `inline-flex w-full`, כך
 * שהוא תופס את כל רוחב עמודת התוכן.
 *
 * בעבר הוא קיבל את המסגרת דרך catch-all ב-`force-header-buttons-style.js`,
 * אבל זה פחות יציב מול שינויי DOM של LibreChat. כאן מגדירים אותו במפורש,
 * כמו ProgressText, וה-JS רק מדלג עליו/מנקה inline styles ישנים. */
div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  background: transparent !important;
  color: var(--brand-medium) !important;
  border: 1.5px solid var(--brand-medium) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem !important;
  transition: all 0.25s ease !important;
  line-height: 1.25rem !important;
  white-space: normal !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1:hover:not(:disabled) {
  background: var(--brand-medium) !important;
  color: white !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > span {
  color: inherit !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > .tool-status-text {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > .mcp-subagent-status-label {
  color: var(--brand-medium) !important;
}

html[data-theme="dark"] div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > .mcp-subagent-status-label {
  color: var(--brand-light) !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1:hover:not(:disabled) > .mcp-subagent-status-label {
  color: white !important;
}

.message-render button .mcp-subagent-status-label {
  color: var(--brand-medium) !important;
}

html[data-theme="dark"] .message-render button .mcp-subagent-status-label {
  color: var(--brand-light) !important;
}

/* ========== Subagent container - leading icon color (match the label) ==========
 * מיכל ריצת סוכן-המשנה (SubagentCall.tsx) מציג אייקון לפני תווית הסטטוס:
 * lucide-users כברירת מחדל, או אווטאר הסוכן (img) כשהוא מזוהה. את התווית כבר
 * צבענו בכחול המותג (.mcp-subagent-status-label), אבל האייקון נשאר אפור. צובעים
 * גם אותו בכחול כדי שייראה אחיד עם התווית.
 *
 * הסלקטור ממוקד לאייקון שבמיכל העגול (div.rounded-full) בתוך כפתור שמכיל תווית
 * תת-סוכן בלבד — כך לא נוגעים ב-chevron (שהוא ילד-ישיר של שורת הכותרת, מחוץ
 * ל-rounded-full) ולא באייקונים אחרים. במצב ריצה React מוסיף לאייקון גם
 * `animate-pulse` (הבהוב) — הצביעה כאן לא פוגעת בו, כך שבריצה האייקון כחול+מהבהב
 * ובסיום כחול קבוע. (אווטאר-img לא מושפע מ-color; רלוונטי רק לאייקון ה-SVG.) */
.message-render button:has(.mcp-subagent-status-label) div.rounded-full svg {
  color: var(--brand-medium) !important;
}

html[data-theme="dark"] .message-render button:has(.mcp-subagent-status-label) div.rounded-full svg {
  color: var(--brand-light) !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > svg,
div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > div {
  flex-shrink: 0 !important;
  color: inherit !important;
  stroke: currentColor !important;
}

/* StackedToolIcons משתמש ב-`-ml-2.5` כדי לערום כמה אייקונים. ב-RTL זה מושך
 * את האייקונים הנוספים לכיוון הטקסט, ולכן כשיש שני שרתים ומעלה הם מכסים חלק
 * מה-label. בתוך מיכל הקבוצה עדיף שהרוחב הוויזואלי של האייקונים יהיה רוחב
 * אמיתי, גם במחיר של פחות overlap, כדי שהטקסט יתחיל רק אחריהם. */
div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > div[aria-hidden="true"].flex.items-center {
  gap: 0.125rem !important;
}

div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 > div[aria-hidden="true"].flex.items-center > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* מרווח עליון/תחתון סימטרי (1rem) למיכל הקבוצה, עקבי עם מיכל של כלי בודד.
 * העטיפה של LibreChat היא div.mb-2.mt-1 שנותן רק mt-1 (4px) למעלה, ולכן המיכל
 * נצמד לפסקת הטקסט שמעליו. בניגוד למיכל של כלי בודד (.progress-text-wrapper),
 * הקבוצה לא עטופה ב-flex עם wrapper, ולכן מטרגטים אותה ישירות לפי הכפתור
 * שמכיל את span.tool-status-text. */
div.mb-2.mt-1:has(> button > span.tool-status-text) {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* ========== ThinkingContent - מרווח בין הטקסט ללחצנים הצפים ==========
 * ה-`ThinkingContent` של מיכל "מחשבות" מוגדר ב-
 * `client/src/components/Chat/Messages/Content/Parts/Thinking.tsx` עם
 * `p-3 pb-8` (12px בכל הכיוונים, ו-32px בתחתית). בתוכו יושב
 * `FloatingThinkingBar` ב-`absolute bottom-3 right-3` עם שני לחצנים
 * (chevron לסגירה + clipboard להעתקה) בגובה 30px כל אחד.
 *
 * החישוב: bottom-3 (12px) + button height (30px) = 42px מ-bottom של
 * ה-container, כלומר ה-button מתחיל 42px מעל הקצה התחתון. עם padding
 * בתחתית של 32px, הטקסט יורד עד 32px מ-bottom, וזה אומר שה-button חופף
 * את הטקסט ב-10px. במצב הצגה (hover/focus) הלחצנים נראים צמודים מאוד
 * לטקסט - לפעמים אפילו מעליו.
 *
 * הגדלת padding-bottom ל-4rem (64px) נותנת ~22px gap בין סוף הטקסט
 * לראש הלחצנים, מספיק כדי שהם ייראו נפרדים ולא יחתכו את הטקסט. */
div.relative.rounded-lg.border.border-border-light.bg-surface-secondary.p-3.pb-8.text-text-secondary {
  padding-bottom: 4rem !important;
}

/* ========== Audio Recorder (microphone) icon - blue stroke ==========
   הלחצן `#audio-recorder` הוא לחצן ההקלטה הקולית במיכל הזנת ההודעה.
   ה-SVG הפנימי (ListeningIcon) מקבל ב-LibreChat המקורי את הקלאס
   `stroke-text-secondary` שצובע אותו ב-rgb(33,33,33) (אפור-שחור).
   הסקריפט force-header-buttons-style.js תופס אותו ב-Strategy 5 (לפי ID)
   אבל רק במהלך 5 שניות מטעינת העמוד הראשונית. כשמתחילים מ-/c/new
   ועוברים אחר כך לשיחה קיימת, הלחצן נוסף ל-DOM אחרי החלון הזה ולכן
   הסקריפט לא מתפיס אותו. ה-CSS להלן מבטיח צבע כחול גם לאחר re-renders. */
#audio-recorder svg {
  color: var(--brand-medium) !important;
  stroke: var(--brand-medium) !important;
  fill: none !important;
}

#audio-recorder svg path,
#audio-recorder svg circle,
#audio-recorder svg line,
#audio-recorder svg rect {
  stroke: var(--brand-medium) !important;
  fill: none !important;
}

/* מצב מאזין (recording) - אדום למתן feedback ויזואלי */
#audio-recorder[aria-pressed="true"] svg,
#audio-recorder[aria-pressed="true"] svg path,
#audio-recorder[aria-pressed="true"] svg circle,
#audio-recorder[aria-pressed="true"] svg line {
  color: rgb(239, 68, 68) !important;
  stroke: rgb(239, 68, 68) !important;
}

/* ========== ToolCallGroup ("Used N tools") - לא ברוחב מלא ==========
 * ToolCallGroup הוא ה-aggregator שמופיע מעל קבוצת קריאות לכלים (web_search,
 * file_search וכו'). LibreChat מגדיר את הלחצן שלו עם `inline-flex w-full`
 * כך שהוא מתפרס על כל רוחב עמודת ההודעות. אצלנו, force-header-buttons-style.js
 * מוסיף לו border ו-padding (כי הוא תופס את כל button.inline-flex), והתוצאה
 * היא פס רחב בדיוק כמו תיבת קלט - לא תואם את שאר הלחצנים בהודעות (כמו
 * מיכל ה-"מריץ <tool>" שב-progress-text-wrapper שיושב ברוחב fit-content).
 *
 * מצמצמים את הלחצן ל-width: fit-content כך שיהיה באותה אסתטיקה כמו ProgressText.
 *
 * הסלקטור `div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1`
 * תופס בדיוק את הלחצן הזה כי `mb-2 mt-1` משמש ב-LibreChat רק ב-ToolCallGroup
 * (אומת ב-grep) והקלאסים של ה-button מאוד ספציפיים.
 *
 * `max-width: fit-content` חיוני כי הקלאס `w-full` של Tailwind מתרגם ל-
 * `width: 100%` בעדיפות נמוכה, אבל יש מקומות בהם הוא נחשב יותר חזק
 * (במיוחד בתוך flex containers). שני הערכים יחד מבטיחים שהלחצן יקבל את
 * רוחב התוכן בלבד. */
div.mb-2.mt-1 > button.inline-flex.w-full.items-center.gap-2.py-1 {
  width: fit-content !important;
  max-width: fit-content !important;
}