/** @file Compact @name completion and exactly three red pulses only for the mentioned player. */
#chatForm {
    position: relative;
}

#chatMentionList:not([hidden]),
#chatShareList:not([hidden]) {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    max-height: min(240px, 40vh);
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 4px 18px rgb(0 0 0 / 15%);
}

#chatMentionList [role='option'],
#chatShareList [role='option'] {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    overflow-wrap: anywhere;
}

#chatMentionList [aria-selected='true'],
#chatShareList [aria-selected='true'] {
    border-color: var(--gold);
    color: var(--gold);
}
.chat-shared {
    display: inline;
    min-height: 32px;
    padding: 2px 4px;
    margin: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--gold);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.inventory-tile[data-share-item] {
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}

.chat-mention {
    font-weight: 750;
}

#chat.mention-alert::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid #e53c49;
    background: rgb(229 60 73 / 15%);
    opacity: 0;
    animation: chat-mention-pulse 750ms ease-in-out 3;
}

@keyframes chat-mention-pulse {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #chat.mention-alert::after {
        animation-duration: 1ms;
    }
}