/* V24.15 TARGETED: @mention / To employee list visual-only polish.
   IMPORTANT: colors/contrast only. No position, size, spacing, or chat/message layout changes. */

.mention-suggestions{
  background:#f8fafc !important;
  border:1px solid rgba(100,116,139,.42) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.22) !important;
}

.mention-suggestions .mention-suggestion-item{
  background:#eef2f7 !important;
  border:1px solid rgba(100,116,139,.22) !important;
  color:#172033 !important;
}

.mention-suggestions .mention-suggestion-item:hover{
  background:#dbe7f5 !important;
  border-color:rgba(37,99,235,.38) !important;
}

.mention-suggestions .mention-suggestion-item.active{
  background:#c7dcf6 !important;
  border-color:rgba(37,99,235,.72) !important;
  box-shadow:inset 3px 0 0 #2563eb, 0 2px 8px rgba(37,99,235,.16) !important;
}

.mention-suggestions .mention-suggestion-info strong{
  color:#172033 !important;
  font-weight:700 !important;
}

.mention-suggestions .mention-suggestion-info small{
  color:#526174 !important;
  font-weight:600 !important;
}

.mention-suggestions .mention-suggestion-avatar{
  background:var(--primary) !important;
  color:#fff !important;
}

/* Refined @mention scrollbar: compact, rounded and visually part of the
   suggestion panel instead of the browser's heavy default rail. */
.mention-suggestions{
  scrollbar-width:thin;
  scrollbar-color:rgba(71,112,163,.72) transparent;
  scrollbar-gutter:stable;
}
.mention-suggestions::-webkit-scrollbar{width:10px}
.mention-suggestions::-webkit-scrollbar-track{
  margin:8px 0;
  background:transparent;
}
.mention-suggestions::-webkit-scrollbar-thumb{
  min-height:36px;
  border:3px solid transparent;
  border-radius:999px;
  background:rgba(71,112,163,.72);
  background-clip:content-box;
}
.mention-suggestions::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.94);background-clip:content-box}
.mention-suggestions::-webkit-scrollbar-corner{background:transparent}

/* Dark mode: keep the list clearly separate from message bubbles/chat background. */
:root[data-theme="dark"] .mention-suggestions{
  background:#172033 !important;
  border-color:rgba(148,163,184,.38) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.48) !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-item{
  background:#243044 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#f8fafc !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-item:hover{
  background:#33445e !important;
  border-color:rgba(96,165,250,.50) !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-item.active{
  background:#3b5270 !important;
  border-color:rgba(96,165,250,.78) !important;
  box-shadow:inset 3px 0 0 #60a5fa, 0 2px 10px rgba(0,0,0,.28) !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-info strong{
  color:#ffffff !important;
  font-weight:700 !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-info small{
  color:#cbd5e1 !important;
  font-weight:600 !important;
}

:root[data-theme="dark"] .mention-suggestions .mention-suggestion-avatar{
  background:var(--primary) !important;
  color:#fff !important;
}

:root[data-theme="dark"] .mention-suggestions{scrollbar-color:rgba(148,181,222,.72) transparent}
:root[data-theme="dark"] .mention-suggestions::-webkit-scrollbar-thumb{background:rgba(148,181,222,.72);background-clip:content-box}
:root[data-theme="dark"] .mention-suggestions::-webkit-scrollbar-thumb:hover{background:rgba(191,219,254,.96);background-clip:content-box}