/* Подсказка и карточка ссылок на референсы в промпте (Components/Shared/TextArea.razor.js).
   Оба элемента живут в body, чтобы их не обрезал overflow панели, поэтому стили глобальные. */
@layer base {
    .vm-mention-menu {
        position: fixed;
        /* Выше бокового меню (--z-rail): попап живёт, пока поле в фокусе или под курсором. */
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        width: 280px;
        max-width: calc(100vw - 16px);
        max-height: 292px;
        padding: 5px;
        overflow-y: auto;
        border: 1px solid var(--n8);
        border-radius: var(--r-pop);
        background: var(--n3);
        box-shadow: var(--shadow-menu);
        animation: pop-in var(--dur) ease-out;
    }

    .vm-mention-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 8px 6px;
        color: var(--t6);
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .vm-mention-menu-keys {
        color: var(--t8);
        letter-spacing: 0;
        text-transform: none;
    }

    .vm-mention-option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 5px 8px 5px 5px;
        border-radius: var(--r-sm);
        color: var(--t2);
        cursor: pointer;
    }

    .vm-mention-option.is-active {
        background: var(--n5);
    }

    .vm-mention-option-thumb {
        position: relative;
        display: grid;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--n7);
        border-radius: 8px;
        background: var(--n2);
    }

    .vm-mention-option-thumb img,
    .vm-mention-option-thumb video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vm-mention-option-text {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .vm-mention-option-label {
        font-size: 13px;
        font-weight: 500;
    }

    .vm-mention-option-caption {
        overflow: hidden;
        color: var(--t6);
        font-size: 11.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vm-mention-option-token {
        flex: 0 0 auto;
        padding: 2px 6px;
        border-radius: 5px;
        background: color-mix(in srgb, var(--ac) 18%, transparent);
        color: var(--at1);
        font-family: var(--font-mono);
        font-size: 11px;
    }

    .vm-mention-option-token.is-video {
        background: color-mix(in srgb, var(--in) 16%, transparent);
        color: var(--in);
    }

    .vm-mention-option-token.is-audio {
        background: color-mix(in srgb, var(--success) 14%, transparent);
        color: var(--success);
    }

    .vm-mention-option-thumb.is-icon svg,
    .vm-mention-card-media.is-icon svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .vm-mention-option-thumb.is-image,
    .vm-mention-card-media.is-image {
        color: var(--at1);
    }

    .vm-mention-option-thumb.is-video,
    .vm-mention-card-media.is-video {
        color: var(--in);
    }

    .vm-mention-option-thumb.is-audio,
    .vm-mention-card-media.is-audio {
        color: var(--success);
    }

    .vm-mention-card {
        position: fixed;
        /* Выше бокового меню (--z-rail): попап живёт, пока поле в фокусе или под курсором. */
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        width: 196px;
        overflow: hidden;
        border: 1px solid var(--n8);
        border-radius: var(--r-pop);
        background: var(--n3);
        box-shadow: var(--shadow-pop);
        pointer-events: none;
        animation: fade-in var(--dur-fast) ease-out;
    }

    .vm-mention-card.is-unknown {
        border-color: color-mix(in srgb, var(--danger) 45%, var(--n8));
    }

    .vm-mention-card-media {
        position: relative;
        display: grid;
        flex: 0 0 auto;
        height: 128px;
        overflow: hidden;
        place-items: center;
        background: var(--stripes);
    }

    .vm-mention-card-media img,
    .vm-mention-card-media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: var(--n2);
    }

    .vm-mention-card-media.is-icon {
        height: 72px;
        background: var(--n2);
    }

    .vm-mention-card-media.is-icon svg {
        width: 26px;
        height: 26px;
    }

    .vm-mention-card-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 9px 11px 10px;
    }

    .vm-mention-card-label {
        color: var(--t1);
        font-size: 13px;
        font-weight: 500;
    }

    .vm-mention-card.is-unknown .vm-mention-card-label {
        color: var(--danger);
    }

    .vm-mention-card-caption {
        overflow: hidden;
        color: var(--t5);
        font-size: 11.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vm-mention-card-hint {
        margin-top: 2px;
        color: var(--t7);
        font-size: 11.5px;
        line-height: 1.4;
    }
}