/* Mention / Tribute autocomplete dropdown — gematerial2 theme */

.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 300px;
  max-width: 500px;
  min-width: 180px;
  overflow: auto;
  display: block;
  z-index: 999999;
  border-radius: var(--border-radius, 4px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.tribute-container ul {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--divider-color, #e0e0e0);
  border-radius: var(--border-radius, 4px);
}

.tribute-container li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  transition: background-color 0.15s ease;
}

.tribute-container li.highlight,
.tribute-container li:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.tribute-container li.no-match {
  cursor: default;
  color: var(--text-secondary, rgba(0, 0, 0, 0.54));
  font-style: italic;
}

.tribute-container .menu-highlighted {
  font-weight: 600;
  color: var(--primary-color, #1976D2);
}

/* Mention tag in posts */
.mention {
  color: var(--primary-color, #1976D2);
  font-weight: 500;
}

/* Dark mode */
.dark-mode .tribute-container ul {
  background: var(--dark-bg-secondary, #2d2d2d);
  border-color: var(--dark-divider-color, #404040);
}

.dark-mode .tribute-container li {
  color: var(--dark-text-primary, rgba(255, 255, 255, 0.87));
}

.dark-mode .tribute-container li.highlight,
.dark-mode .tribute-container li:hover {
  background: var(--dark-bg-hover, rgba(255, 255, 255, 0.08));
}

.dark-mode .tribute-container li.no-match {
  color: var(--dark-text-secondary, rgba(255, 255, 255, 0.54));
}