/* Inner wrapper needs position relative for the absolutely positioned menu */
.fi-autocomplete-textarea-inner {
    position: relative;
    /* Default values for menu positioning - overridden by JS */
    --tribute-menu-top: 0px;
    --tribute-menu-left: 0px;
}

/* Use CSS variables with !important to override Tribute's cssText reset */
.fi-autocomplete-textarea-inner .tribute-container {
    position: absolute !important;
    top: var(--tribute-menu-top) !important;
    left: var(--tribute-menu-left) !important;
    right: auto !important;
    bottom: auto !important;
    height: auto;
    max-height: 300px;
    overflow: auto;
    z-index: 100;
    border-radius: 0.5rem;
    /* Filament-style shadow and ring */
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1),
        0 0 0 1px rgb(3 7 18 / 0.05); /* ring-gray-950/5 via box-shadow */
    background: white;
}

.dark .fi-autocomplete-textarea-inner .tribute-container {
    background: var(--gray-900);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1),
        0 0 0 1px rgb(255 255 255 / 0.1); /* ring-white/10 via box-shadow */
}

.tribute-container ul {
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: transparent;
    min-width: 280px;
}

.tribute-container li {
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.375rem;
    margin: 0.125rem 0;
    transition: background-color 75ms ease-in-out;
}

.tribute-container li:hover,
.tribute-container li.highlight {
    background: var(--gray-100);
}

.dark .tribute-container li:hover,
.dark .tribute-container li.highlight {
    background: rgb(255 255 255 / 0.1);
}

.tribute-container li.no-match {
    cursor: default;
}

.fi-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fi-autocomplete-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-600);
}

.dark .fi-autocomplete-value {
    color: var(--primary-400);
}

.fi-autocomplete-description {
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.25;
}

.dark .fi-autocomplete-description {
    color: var(--gray-400);
}

.fi-autocomplete-no-match {
    padding: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-400);
    font-style: italic;
}

/* Highlight for matched text */
.fi-autocomplete-highlight {
    background: var(--primary-100);
    color: inherit;
    padding: 0 0.125rem;
    border-radius: 0.125rem;
}

.dark .fi-autocomplete-highlight {
    background: oklch(from var(--primary-500) l c h / 0.2);
}