.na-mention-ui { width: 100%; min-width: 0; margin: 6px 0 10px; text-align: left; font-weight: 400; }
.na-mention-ui [hidden] { display: none !important; }
.na-mention-list { overflow: hidden; margin-bottom: 8px; border: 1px solid #d7aa00; border-radius: 12px; background: #fffdf4; box-shadow: 0 5px 18px #17171712; }
.na-mention-ui .na-mention-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; color: #202020; text-align: left; cursor: pointer; font: inherit; }
.na-mention-ui .na-mention-option:hover, .na-mention-ui .na-mention-option:focus-visible { background: #ffedaf; outline: 2px solid #9b7000; outline-offset: -3px; }
/* Keep organizer avatars square even inside post detail image styles. */
.na-mention-logo, .np-detail .na-mention-logo { flex: 0 0 36px; align-self: flex-start; width: 36px; height: 36px; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: #181818; padding: 4px; box-sizing: border-box; }
.na-mention-copy { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 8px; line-height: 1.45; }
.na-mention-copy strong { font-size: 14px; }
.na-mention-handle { font-size: 13px; color: #735400; }
.na-mention-copy small { grid-column: 1 / -1; color: #57534b; font-size: 12px; }
.na-mention-ui .na-mention-hint { margin: 0; font-size: 12px; line-height: 1.5; color: #68635b; }
.na-team-mention { color: #775500; background: #ffedb2; border-radius: 4px; padding: 1px 3px; font-weight: 650; overflow-wrap: anywhere; }
.na-mention-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.na-find-single-page .na-comment-form-section-docked { bottom: calc(82px + env(safe-area-inset-bottom)); }
.na-comment-form-docked .na-mention-ui { order: -1; margin: 0; }
.na-comment-form-docked .na-form-message:empty { display: none; }
.na-team-official { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 5px; color: #705200; background: #ffedb2; font-size: 11px; font-weight: 650; }
[data-na-theme="dark"] .na-mention-list, .na-theme-dark .na-mention-list { background: #29261c; border-color: #897126; }
[data-na-theme="dark"] .na-mention-ui .na-mention-option, .na-theme-dark .na-mention-ui .na-mention-option { color: #faf8ee; }
[data-na-theme="dark"] .na-mention-ui .na-mention-option:hover, .na-theme-dark .na-mention-ui .na-mention-option:hover { background: #3b3420; }
[data-na-theme="dark"] .na-mention-handle, .na-theme-dark .na-mention-handle { color: #f3d16c; }
[data-na-theme="dark"] .na-mention-copy small, [data-na-theme="dark"] .na-mention-ui .na-mention-hint, .na-theme-dark .na-mention-copy small, .na-theme-dark .na-mention-ui .na-mention-hint { color: #c7c3b6; }
@media (max-width: 420px) { .na-mention-copy { grid-template-columns: 1fr; gap: 1px; } }