/**
 * Sticky Sidebar - הודעות ותקשורת
 * Comments Sticky Sidebar Styles
 * Desktop: Sticky Sidebar מימין עם Auto-hide
 * Mobile: Bottom Sheet שנפתח מלמטה
 */

/* ============================================
 Sticky Sidebar - הודעות ותקשורת
 Comments Sticky Sidebar Styles
 Desktop: Sticky Sidebar מימין עם Auto-hide
 Mobile: Bottom Sheet שנפתח מלמטה
 ============================================ */

/* Override לכל stacking context - גם אם הסרגל ניווט יוצר אחד */
/* זה חייב להיות לפני כל הכללים האחרים */
body .comments-sticky-sidebar,
html .comments-sticky-sidebar,
body .comments-sticky-sidebar.active,
html .comments-sticky-sidebar.active,
.premium-navbar ~ .comments-sticky-sidebar,
.premium-navbar ~ .comments-sticky-sidebar.active,
.mobile-navbar ~ .comments-sticky-sidebar,
.mobile-navbar ~ .comments-sticky-sidebar.active,
* .comments-sticky-sidebar,
* .comments-sticky-sidebar.active {
  z-index: 99999999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
}

/* ============================================
 Sticky Sidebar Container
 ============================================ */
.comments-sticky-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 0;
min-width: 0; /* ✅ תיקון: מונע פירוק אנכי של טקסט */
max-width: 100%; /* ✅ תיקון: הוספת max-width למניעת overflow */
z-index: 99999999;
pointer-events: none;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
visibility: visible;
overflow-x: hidden; /* ✅ תיקון: מונע גלילה אופקית וגם פירוק אנכי */
overflow-y: visible; /* ✅ שמירה על גלילה אנכית אם נדרש */
white-space: normal; /* ✅ תיקון: white-space: nowrap גורם לבעיה - שינוי ל-normal */
display: block;
flex-shrink: 0 !important; /* ✅ תיקון קריטי: מונע התכווצות ב-flex containers */
/* Cross-browser compatibility - Firefox & Safari */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
isolation: isolate;
will-change: width, transform;
/* Force new stacking context - אבל לא contain כי זה יכול לשבור position: fixed */
/* וידוא שה-sidebar תמיד מעל - גם ב-Firefox ו-Safari */
margin: 0;
padding: 0;
}

.comments-sticky-sidebar.active {
width: 400px;
max-width: 100%; /* ✅ תיקון: הוספת max-width למניעת overflow */
pointer-events: all;
visibility: visible;
overflow: visible;
display: block;
white-space: normal; /* ✅ תיקון: כאשר active, הטקסט יכול להישבר כרגיל */
/* Cross-browser compatibility */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* Desktop: Sidebar מימין */
@media (min-width: 992px) {
.comments-sticky-sidebar.active {
  width: 420px;
  max-width: 100%; /* ✅ תיקון: הוספת max-width למניעת overflow */
  visibility: visible;
  overflow: visible;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 99999999;
  pointer-events: all;
  opacity: 1;
  white-space: normal; /* ✅ תיקון: כאשר active, הטקסט יכול להישבר כרגיל */
  /* Cross-browser compatibility - Firefox & Safari */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
  will-change: width, transform;
  /* לא contain כי זה יכול לשבור position: fixed */
  /* וידוא שה-sidebar תמיד מעל - גם ב-Firefox ו-Safari */
  margin: 0;
  padding: 0;
}

.comments-sticky-sidebar.active .comments-sidebar-content {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  z-index: 99999999;
  /* Cross-browser compatibility - Firefox & Safari */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
  will-change: transform, opacity, visibility;
  /* לא contain כי זה יכול לשבור position: fixed */
  box-sizing: border-box;
}
}

/* Tablet: Sidebar קטן יותר */
@media (min-width: 768px) and (max-width: 991px) {
.comments-sticky-sidebar.active {
  width: 380px;
}
}

/* Mobile: Bottom Sheet */
@media (max-width: 767px) {
.comments-sticky-sidebar {
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.comments-sticky-sidebar.active {
  height: 70vh;
  width: 100%;
}
}

/* ============================================
 Toggle Button - כפתור פתיחה/סגירה
 ============================================ */
.comments-sidebar-toggle {
position: fixed;
bottom: 2rem;
left: 2rem;
right: auto;
width: 56px;
height: 56px;
border-radius: 50%;
background: #3b82f6;
color: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
cursor: pointer;
display: flex;
visibility: visible;
opacity: 1;
align-items: center;
justify-content: center;
z-index: 99999998;
transition: all 0.3s ease;
pointer-events: all;
/* Cross-browser compatibility - Firefox & Safari */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
isolation: isolate;
will-change: transform;
/* לא contain כי זה יכול לשבור position: fixed */
}

.comments-sidebar-toggle:hover {
background: #2563eb;
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
transform: scale(1.05);
}

.comments-sidebar-toggle:active {
transform: scale(0.95);
}

.comments-sidebar-toggle i {
font-size: 1.5rem;
}

/* Badge עם מספר הודעות חדשות */
.comments-badge {
position: absolute;
top: -4px;
right: 0; /* ✅ תיקון: 0 במקום -4px למניעת overflow */
background: #ef4444;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 12px;
min-width: 20px;
text-align: center;
line-height: 1.2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.comments-badge:empty {
display: none;
}

/* כאשר Sidebar פתוח - הסתר את הכפתור */
.comments-sticky-sidebar.active ~ .comments-sidebar-toggle,
body:has(.comments-sticky-sidebar.active) .comments-sidebar-toggle {
display: none;
}

/* ============================================
 Sidebar Content
 ============================================ */
.comments-sidebar-content {
position: absolute ;
top: 0 ;
right: 0 ;
bottom: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
min-height: 100% ;
max-width: 100% ;
max-height: 100% ;
background: #ffffff ;
box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15) ;
display: none ;
flex-direction: column ;
overflow: hidden ;
-webkit-transform: translateX(100%) ;
-moz-transform: translateX(100%) ;
transform: translateX(100%) ;
transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease ;
visibility: hidden ;
opacity: 0 ;
z-index: 99999999 ;
/* Cross-browser compatibility - Firefox & Safari */
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
isolation: isolate ;
will-change: transform, opacity, visibility ;
/* לא contain כי זה יכול לשבור position: fixed */
box-sizing: border-box ;
}

.comments-sticky-sidebar.active .comments-sidebar-content {
-webkit-transform: translateX(0) ;
-moz-transform: translateX(0) ;
transform: translateX(0) ;
visibility: visible ;
opacity: 1 ;
display: flex ;
}

.comments-sticky-sidebar.active .comments-sidebar-content.active {
-webkit-transform: translateX(0) ;
-moz-transform: translateX(0) ;
transform: translateX(0) ;
visibility: visible ;
opacity: 1 ;
display: flex ;
/* Cross-browser compatibility - Firefox & Safari */
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
isolation: isolate ;
will-change: transform, opacity, visibility ;
/* לא contain כי זה יכול לשבור position: fixed */
box-sizing: border-box ;
}

/* Desktop: וידוא שה-content נראה */
@media (min-width: 992px) {
.comments-sticky-sidebar.active .comments-sidebar-content {
  -webkit-transform: translateX(0) ;
  -moz-transform: translateX(0) ;
  transform: translateX(0) ;
  visibility: visible ;
  opacity: 1 ;
  display: flex ;
  position: absolute ;
  top: 0 ;
  right: 0 ;
  bottom: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  max-width: 100% ;
  max-height: 100% ;
  /* Cross-browser compatibility - Firefox & Safari */
  -webkit-backface-visibility: hidden ;
  -moz-backface-visibility: hidden ;
  backface-visibility: hidden ;
  isolation: isolate ;
  will-change: transform, opacity, visibility ;
  /* לא contain כי זה יכול לשבור position: fixed */
  box-sizing: border-box ;
}
}

/* Mobile: Bottom Sheet */
@media (max-width: 767px) {
.comments-sidebar-content {
  border-radius: 1rem 1rem 0 0;
  transform: translateY(100%);
}

.comments-sticky-sidebar.active .comments-sidebar-content {
  transform: translateY(0);
}
}

  /* ============================================
   Sidebar Header
   ============================================ */
.comments-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--bg-surface, #ffffff);
  flex-shrink: 0;
}

.comments-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.comments-sidebar-title h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main, #1f2937);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comments-sidebar-title h3 i {
  color: var(--primary-500, #3b82f6);
}

.comments-sidebar-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.comments-sidebar-close:hover {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-main, #1f2937);
}

  /* ============================================
   Search & Filter
   ============================================ */
.comments-search-filter {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comments-search {
  position: relative;
  display: flex;
  align-items: center;
}

.comments-search i {
  position: absolute;
  right: 0.75rem;
  color: var(--text-secondary, #6b7280);
  pointer-events: none;
}

.comments-search-input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-main, #1f2937);
  transition: all 0.2s ease;
}

.comments-search-input:focus {
  outline: none;
  border-color: var(--primary-500, #3b82f6);
  background: var(--bg-surface, #ffffff);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comments-search-clear {
  position: absolute;
  left: 0.5rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.comments-search-clear:hover {
  background: var(--bg-quaternary, #e5e7eb);
  color: var(--text-main, #1f2937);
}

.comments-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comments-filter-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-secondary, #6b7280);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comments-filter-btn:hover {
  background: var(--bg-tertiary, #f3f4f6);
  border-color: var(--border-strong, #d1d5db);
}

.comments-filter-btn.active {
  background: var(--primary-500, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-500, #3b82f6);
}

  /* ============================================
   Sidebar Body - רשימת הודעות
   ============================================ */
.comments-sidebar-body {
  flex: 1;
  overflow-y: auto;
  /* overflow-x: hidden; - הוסר - אסור לפי חוק זהב #9 */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: none;
  height: auto ;
  -webkit-overflow-scrolling: touch;
  background: #ffffff ;
  /* הסתרת scrollbar עד שצריך */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* הסתרת scrollbar ב-WebKit עד שצריך */
.comments-sidebar-body::-webkit-scrollbar {
  width: 6px;
}

.comments-sidebar-body::-webkit-scrollbar-track {
  background: transparent;
}

.comments-sidebar-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.comments-sidebar-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* רשימת הודעות - עיצוב רצף כמו צ'אט */
.comments-sidebar-body .comment-item,
.comments-sidebar-body .discussion-item {
  display: flex ;
  flex-direction: column ;
  padding: 1rem 1.25rem ;
  background: transparent ;
  border: none ;
  border-bottom: 1px solid #f3f4f6 ;
  border-radius: 0 ;
  margin-bottom: 0 ;
  transition: background-color 0.15s ease ;
  box-shadow: none ;
  min-width: 0 ;
  width: 100% ;
  box-sizing: border-box ;
  /* וידוא שאין overflow או max-height על כל הודעה - רק על body */
  overflow: visible ;
  overflow-x: visible ;
  overflow-y: visible ;
  max-height: none ;
  height: auto ;
  min-height: auto ;
}

.comments-sidebar-body .comment-item.d-none,
.comments-sidebar-body .discussion-item.d-none {
  display: none ;
}

.comments-sidebar-body .comment-item:last-child,
.comments-sidebar-body .discussion-item:last-child {
  border-bottom: none ;
}

.comments-sidebar-body .comment-item:hover,
.comments-sidebar-body .discussion-item:hover {
  background: #f9fafb ;
  box-shadow: none ;
  border-color: #f3f4f6 ;
  transform: none ;
}

/* כותרת הערה */
.comments-sidebar-body .comment-header {
  display: flex ;
  justify-content: space-between ;
  align-items: flex-start ;
  margin-bottom: 0.5rem ;
  padding-bottom: 0 ;
  border-bottom: none ;
  gap: 0.75rem ;
  min-width: 0 ;
  width: 100% ;
  /* וידוא שאין overflow על הכותרת */
  overflow: visible ;
  overflow-x: visible ;
  overflow-y: visible ;
  max-height: none ;
  height: auto ;
}

/* מידע על המחבר */
.comments-sidebar-body .comment-author-info {
  display: flex ;
  align-items: center ;
  gap: 0.625rem ;
  flex: 1 ;
  min-width: 0 ;
  overflow: visible ;
}

.comments-sidebar-body .comment-avatar {
  width: 36px ;
  height: 36px ;
  border-radius: 50% ;
  object-fit: cover ;
  flex-shrink: 0 ;
}

.comments-sidebar-body .comment-avatar-default {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) ;
  color: #ffffff ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  font-weight: 700 ;
  font-size: 1rem ;
  box-shadow: none ;
}

.comments-sidebar-body .comment-author-details {
  display: flex ;
  flex-direction: column ;
  gap: 0.375rem ;
  min-width: 0 ;
  flex: 1 ;
  overflow: visible ;
}

.comments-sidebar-body .comment-author-name {
  font-size: 0.9375rem ;
  font-weight: 600 ;
  color: #111827 ;
  line-height: 1.4 ;
  white-space: normal ;
  overflow: visible ;
  text-overflow: clip ;
  word-wrap: break-word ;
}

.comments-sidebar-body .comment-author-username {
  font-size: 0.8125rem ;
  color: #6b7280 ;
  line-height: 1.3 ;
  white-space: normal ;
  overflow: visible ;
  text-overflow: clip ;
  word-wrap: break-word ;
}

/* מטא-מידע */
.comments-sidebar-body .comment-meta {
  display: flex ;
  align-items: center ;
  gap: 0.5rem ;
  flex-shrink: 0 ;
}

.comments-sidebar-body .comment-timestamp {
  font-size: 0.8125rem ;
  color: #9ca3af ;
  white-space: nowrap ;
  font-weight: 500 ;
}

/* תוכן הערה */
.comments-sidebar-body .comment-content {
  margin-bottom: 0 ;
  padding-top: 0 ;
  min-width: 0 ;
  width: 100% ;
  overflow: visible ;
  max-width: 100% ;
  box-sizing: border-box ;
}

.comments-sidebar-body .comment-text {
  font-size: 0.9375rem ;
  line-height: 1.7 ;
  color: #1f2937 ;
  white-space: pre-wrap ;
  word-wrap: break-word ;
  overflow-wrap: break-word ;
  overflow: visible ;
  overflow-x: visible ;
  overflow-y: visible ;
  min-width: 0 ;
  width: 100% ;
  max-width: 100% ;
  max-height: none ;
  height: auto ;
  box-sizing: border-box ;
  display: block ;
}

.comments-sidebar-body .comment-text a {
  color: #2563eb ;
  font-weight: 600 ;
  text-decoration: none ;
  transition: color 0.2s ease ;
  padding: 0.125rem 0.25rem ;
  border-radius: 0.25rem ;
  background: rgba(37, 99, 235, 0.1) ;
}

.comments-sidebar-body .comment-text a:hover {
  color: #1d4ed8 ;
  background: rgba(37, 99, 235, 0.15) ;
  text-decoration: none ;
}

/* הודעה ריקה */
.comments-empty {
  text-align: center ;
  padding: 3rem 1.5rem ;
  color: #6b7280 ;
}

.comments-empty i {
  font-size: 3rem ;
  margin-bottom: 1rem ;
  opacity: 0.4 ;
  color: #9ca3af ;
  display: block ;
}

.comments-empty p {
  font-size: 0.9375rem ;
  margin: 0 ;
  color: #6b7280 ;
  line-height: 1.6 ;
}

.comments-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-secondary, #6b7280);
  gap: 0.5rem;
}

.comments-loading i {
  font-size: 1.5rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

  /* ============================================
   Sidebar Footer - טופס הודעה חדשה
   ============================================ */
.comments-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--bg-surface, #ffffff);
  flex-shrink: 0;
}

.comments-new-message-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comments-input-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* FIX: מניעת Collapsed Inline Text / Forced Column Layout Bug במובייל */
.comments-message-input {
  display: block !important; /* חובה: block בלבד, לא flex/grid */
  width: 100%;
  max-width: 100%;
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-main, #1f2937);
  resize: none;
  min-height: 60px;
  max-height: 120px;
  transition: all 0.2s ease;
  line-height: 1.6 !important; /* חובה: line-height >= 1.4 למניעת פירוק טקסט */
  white-space: normal !important; /* חובה: טקסט רגיל, לא vertical */
}

.comments-message-input:focus {
  outline: none;
  border-color: var(--primary-500, #3b82f6);
  background: var(--bg-surface, #ffffff);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comments-input-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comments-attach-btn,
.comments-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.comments-attach-btn {
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-secondary, #6b7280);
}

.comments-attach-btn:hover {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-main, #1f2937);
}

.comments-send-btn {
  background: var(--primary-500, #3b82f6);
  color: #ffffff;
}

.comments-send-btn:hover {
  background: var(--primary-600, #2563eb);
  transform: scale(1.05);
}

.comments-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.comments-mention-hint {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.comments-mention-autocomplete {
  position: absolute ;
  bottom: calc(100% + 0.5rem) ;
  right: 0 ;
  left: 0 ;
  background: #ffffff ;
  border: 1px solid #e5e7eb ;
  border-radius: 0.5rem ;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) ;
  max-height: 200px ;
  overflow-y: auto ;
  display: none ;
  z-index: 999999999 ;
  margin-bottom: 0.5rem ;
  visibility: hidden ;
  opacity: 0 ;
  transition: opacity 0.2s ease, visibility 0.2s ease ;
  pointer-events: none ;
}

.comments-mention-autocomplete.active {
  display: block ;
  visibility: visible ;
  opacity: 1 ;
  pointer-events: all ;
}

.comments-mention-autocomplete .mention-item {
  padding: 0.5rem 0.75rem ;
  cursor: pointer ;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb) ;
  transition: background-color 0.2s ease ;
}

.comments-mention-autocomplete .mention-item:last-child {
  border-bottom: none ;
}

.comments-mention-autocomplete .mention-item:hover {
  background-color: var(--bg-secondary, #f9fafb) ;
}

.comments-mention-autocomplete .mention-item strong {
  display: block ;
  color: var(--text-main, #1f2937) ;
  font-weight: 600 ;
  margin-bottom: 0.25rem ;
}

.comments-mention-autocomplete .mention-item span {
  font-size: 0.75rem ;
  color: var(--text-secondary, #6b7280) ;
}

  /* ============================================
   Auto-Hide Behavior (Desktop)
   ============================================ */
@media (min-width: 992px) {
  /* וידוא שהכפתור תמיד גלוי בדסקטופ - גם אם יש CSS אחר שמנסה להסתיר */
  .comments-sidebar-toggle:not(.hidden) {
    display: flex ;
    visibility: visible ;
    opacity: 1 ;
    pointer-events: all ;
    position: fixed ;
    left: 2rem ;
    right: auto ;
    bottom: 2rem ;
    z-index: 99999998 ;
  }
  
  .comments-sticky-sidebar:not(.active):not(:hover) {
    width: 0;
  }
  
  .comments-sticky-sidebar:not(.active):hover {
    width: 420px;
  }
  
  .comments-sticky-sidebar:not(.active):hover .comments-sidebar-content {
    transform: translateX(0);
  }
}

  /* ============================================
   Overlay (Mobile)
   ============================================ */
.comments-sidebar-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.comments-sidebar-overlay.active {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 767px) {
.comments-sticky-sidebar.active::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
}