/* @mentions autocomplete (only allowed dropdown-style UI; see consistency.md) */ #mentions-dropdown-container.mentions-dropdown { width: 20rem; max-width: min(20rem, calc(100vw - 1rem)); max-height: 18rem; overflow-y: auto; overflow-x: hidden; padding: 0.25rem; border-radius: var(--radius-xl, 0.75rem); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(var(--theme-r), var(--theme-g), var(--theme-b), calc(var(--glass-opacity) * 0.35)); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55); box-sizing: border-box; } .mentions-dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; border-radius: 0.5rem; transition: background-color 0.15s ease; background-color: transparent; min-width: 0; } .mentions-dropdown-item.mentions-dropdown-item-active { background-color: rgba(255, 255, 255, 0.08); } .mentions-dropdown-name { color: rgba(255, 255, 255, 0.92); font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } /* Tailwind preflight uses img { max-width: 100% } — pin size so avatars never fill the menu width */ #mentions-dropdown-container.mentions-dropdown .mentions-dropdown-avatar { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 9999px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; }