/* Notes-specific drawer styles. Structural rules for the root container and the
   DxDrawer host live in drawer-tab-rail.css (.drawer-root, .drawer-host); this file
   only carries Notes-specific tab/mention/composer/row styles. */

/* Mention autocomplete dropdown. The DxDropDown portals out of the component
   scope to .dxbl-popup-portal, so these rules live in the global stylesheet.
   Zero out the popup body padding from every wrapper class DX may render so the
   list owns its own spacing and rows can span edge-to-edge. */
.mention-autocomplete-dropdown .dxbl-popup-content,
.mention-autocomplete-dropdown .dxbl-popup-body,
.mention-autocomplete-dropdown .dxbl-dropdown-dialog {
    padding: 0;
}

.mention-autocomplete-list {
    display: block;
    width: 100%;
    box-sizing: border-box;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.mention-autocomplete-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: var(--vl-control-radius);
    cursor: pointer;
    user-select: none;
    color: var(--vl-text);
}

.mention-autocomplete-item.selected {
    background: var(--vl-accent-softer);
    color: var(--vl-text);
}

.mention-autocomplete-empty {
    padding: 8px 10px;
    font-style: italic;
    color: var(--vl-text-muted);
}

/* Mention spans inside rendered notes. Scoped via the .notes-row-body parent so the
   rule only applies inside the drawer; the global selector is required because
   MarkupString content is injected without Blazor's scope attribute. */
.notes-row-body .mention {
    color: var(--vl-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}