/* mentions.js: who @mentioned you where, under the page's head (app.css
 * .page-head, Mark all read at its right). */

.mentions-all { font-size: var(--ui-meta); }
.mentions-clear { margin: 0 0 var(--sv-space-4); color: var(--sv-ink-secondary); }
.mention-item { position: relative; display: flex; align-items: flex-start; }
.mention-item .mention-open { flex: 1; min-width: 0; align-items: flex-start; padding-top: var(--sv-space-2); padding-bottom: var(--sv-space-2); padding-right: 44px; }
.mention-item .mention-open:disabled { cursor: default; color: var(--sv-ink-tertiary); }
.mention-item .mention-open:disabled:hover { background: none; }
.mention-item .c-dot { margin-top: 7px; background: none; }
.mention-item.unread .c-dot { background: var(--sv-accent); }
.mention-item .m-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mention-item .m-head { display: flex; align-items: baseline; gap: var(--sv-space-1); min-width: 0; white-space: nowrap; }
.mention-item .m-head strong { font-weight: 500; }
.mention-item:not(.unread) .m-head strong { font-weight: 400; }
.mention-item .m-chat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mention-item .m-head .b-sess { margin-left: var(--sv-space-2); }
.mention-item .m-head .c-when { margin-left: auto; padding-left: var(--sv-space-2); }
.mention-item .m-text { color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mention-item .m-toggle { position: absolute; right: calc(-1 * var(--sv-space-2)); top: 4px; width: 32px; height: 32px; padding: 0; justify-content: center; opacity: 0; }
.mention-item:hover .m-toggle, .mention-item .m-toggle:focus-visible { opacity: 1; }
@media (hover: none) { .mention-item .m-toggle { opacity: 1; } }