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

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

/* התפריטים עצמם - רקע לבן עם מסגרת כחולה */
#tools-dropdown-menu.popover-ui,
#attach-file-menu.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: 280px !important;
}

/* פריטי התפריט - עיצוב בסיסי */
#tools-dropdown-menu [role="menuitem"],
#attach-file-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"] {
  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 {
  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 {
  color: inherit !important;
}

/* אייקונים בתוך הפריטים - שינוי צבע בלבד, שמירה על צורה מקורית */
#tools-dropdown-menu [role="menuitem"] svg,
#attach-file-menu [role="menuitem"] svg {
  color: var(--brand-medium) !important;
  stroke: var(--brand-medium) !important;
  fill: currentColor !important;
  transition: all 0.2s ease !important;
}

#tools-dropdown-menu [role="menuitem"]:hover svg,
#attach-file-menu [role="menuitem"]:hover svg {
  color: var(--brand-medium) !important;
  stroke: var(--brand-medium) !important;
  fill: currentColor !important;
}

/* אייקונים עם fill (לא stroke) - כמו globe, terminal */
#tools-dropdown-menu [role="menuitem"] svg path[fill="currentColor"],
#attach-file-menu [role="menuitem"] svg path[fill="currentColor"] {
  fill: var(--brand-medium) !important;
}

#tools-dropdown-menu [role="menuitem"]:hover svg path[fill="currentColor"],
#attach-file-menu [role="menuitem"]:hover svg path[fill="currentColor"] {
  fill: 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;
}

#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;
  stroke: currentColor !important;
  fill: currentColor !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;
  stroke: white !important;
  fill: white !important;
}

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

/* חץ תפריט משנה */
#tools-dropdown-menu [role="menuitem"] .lucide-chevron-right {
  color: var(--brand-medium) !important;
  opacity: 0.7 !important;
  transition: all 0.2s ease !important;
}

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

/* RTL support - חץ הפוך */
html[data-rtl="true"] #tools-dropdown-menu [role="menuitem"]:hover .lucide-chevron-right {
  transform: translateX(2px) !important;
}

/* תת-תפריט (Submenu) - התפריט הנפתח של MCP ורכיבי תצוגה */
[role="menu"][id^=":r"] {
  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;
}

/* פריטי תת-תפריט */
[role="menu"][id^=":r"] [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;
  font-size: 0.9rem !important;
}

/* פריטי תת-תפריט - hover */
[role="menu"][id^=":r"] [role="menuitem"]:hover {
  background: rgba(37, 64, 143, 0.08) !important;
  border-color: var(--brand-medium) !important;
  color: var(--brand-medium) !important;
}

/* אייקונים בתת-תפריט */
[role="menu"][id^=":r"] [role="menuitem"] svg {
  color: var(--brand-medium) !important;
  stroke: var(--brand-medium) !important;
  fill: currentColor !important;
}

/* כותרת בתת-תפריט (אם יש) */
[role="menu"][id^=":r"] [role="menuitem"] span {
  color: inherit !important;
}

/* מפריד ויזואלי בין קבוצות (אופציונלי) */
#tools-dropdown-menu > div > div:not(:last-child)::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^=":r"] {
    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^=":r"] [role="menuitem"] {
    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^=":r"] [role="menuitem"]:hover {
    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^=":r"] [role="menuitem"] svg {
    color: var(--brand-light) !important;
    stroke: var(--brand-light) !important;
    fill: currentColor !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;
    stroke: var(--brand-dark) !important;
    fill: 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"] [role="menu"][id^=":r"] {
  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"] [role="menu"][id^=":r"] [role="menuitem"] {
  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"] [role="menu"][id^=":r"] [role="menuitem"]:hover {
  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"] [role="menu"][id^=":r"] [role="menuitem"] svg {
  color: var(--brand-light) !important;
  stroke: var(--brand-light) !important;
  fill: currentColor !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;
  stroke: var(--brand-dark) !important;
  fill: var(--brand-dark) !important;
}

/* אנימציות - fade in */
#tools-dropdown-menu[data-enter="true"],
#attach-file-menu[data-enter="true"],
[role="menu"][id^=":r"][data-enter="true"] {
  animation: fadeIn 0.2s ease !important;
}

@keyframes 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^=":r"] {
    min-width: 240px !important;
    padding: 6px !important;
  }
  
  #tools-dropdown-menu [role="menuitem"],
  #attach-file-menu [role="menuitem"],
  [role="menu"][id^=":r"] [role="menuitem"] {
    padding: 5px 8px !important;
    font-size: 0.85rem !important;
  }
}