/* ============================================================================
 * Theme: Minimal Dark (Free)
 *
 * Dark inversion of the Minimal Light theme. Near-black surface on a
 * barely-visible dark border, white primary text, and the user's
 * configured primary accent for hover and selected states. The selected
 * state uses a dark primary tint (primary-900 fill + primary-500 border
 * + inset ring) so the contrast inverts against the bright fill of the
 * light variant.
 */

.fast-fuzzy-search--minimal-dark {
    --ffs-border-color:           var(--ffs-color-gray-700);
    --ffs-scrollbar-thumb:        var(--ffs-color-gray-600);
    --ffs-scrollbar-thumb-hover:  var(--ffs-color-gray-500);
    --ffs-kbd-bg:                 var(--ffs-color-gray-800);
    --ffs-kbd-border:             var(--ffs-color-gray-700);

    --ffs-press-scale:    0.985;
    --ffs-active-scale:   0.97;
    --ffs-highlight-bg:   var(--ffs-color-primary-900);
    --ffs-highlight-fg:   var(--ffs-color-white);

    @media (prefers-reduced-motion: reduce) {
        --ffs-press-scale:  1;
        --ffs-active-scale: 1;
    }
}

/* ---- Field ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field {
    height: 48px;
    background: var(--ffs-color-gray-900);
    border: 1px solid var(--ffs-border-color);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.3);
    color: var(--ffs-color-gray-100);
    transition: border-color var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow   var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark[data-has-query="true"] .fast-fuzzy-search__field {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---- Input ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input::placeholder {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ffs-color-gray-200);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-500);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-600);
}

/* ---- Icon ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__icon,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-gray-400);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

/* ---- Clear button ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button {
    background: var(--ffs-color-gray-800);
    color: var(--ffs-color-gray-300);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button:hover {
    background: var(--ffs-color-gray-700);
    color: var(--ffs-color-gray-100);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Post-type bar ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__post-types {
    background: var(--ffs-color-gray-800);
    border-bottom-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-100);
    padding: var(--ffs-space-3) var(--ffs-space-4);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-list {
    gap: var(--ffs-space-2);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button {
    border: 1px solid var(--ffs-color-gray-700);
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-gray-300);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-gray-800);
    color: var(--ffs-color-gray-100);
    border-color: var(--ffs-color-gray-600);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-selected="true"] {
    border-color: var(--ffs-color-primary-500);
    color: var(--ffs-color-primary-300);
    background: var(--ffs-color-primary-900);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px var(--ffs-color-primary-500);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-selected="true"]:hover {
    background: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[disabled],
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Context strip ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__context {
    color: var(--ffs-color-gray-100);
    background: var(--ffs-color-gray-800);
    border-bottom: 1px solid var(--ffs-border-color);
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

/* ---- Panel ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel {
    border: 1px solid var(--ffs-border-color);
    border-top: 0;
    background: var(--ffs-color-gray-900);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px;
    line-height: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 16px 48px rgba(0, 0, 0, 0.4);
    color: var(--ffs-color-gray-100);
    transition: box-shadow var(--ffs-duration) var(--ffs-easing);
    overflow: hidden;
}

/* Slight lift when the panel is open and the user is interacting */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field:focus-within + .fast-fuzzy-search__panel,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link:hover),
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link[aria-selected="true"]) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 16px rgba(0, 0, 0, 0.3),
        0 20px 56px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(var(--ffs-color-primary-rgb), 0.14);
}

/* ---- Result link ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link {
    color: var(--ffs-color-gray-100);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: var(--ffs-space-3) var(--ffs-space-4);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
    animation: ffs-minimal-dark-row-in var(--ffs-duration) var(--ffs-easing) both;
    animation-delay: calc(var(--ffs-i, 0) * 18ms);
}

@keyframes ffs-minimal-dark-row-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover {
    background: var(--ffs-color-gray-800);
    border-color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 2px var(--ffs-color-gray-900),
        0 0 0 4px var(--ffs-color-primary-500);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] {
    border-color: var(--ffs-color-primary-500);
    border-left-color: var(--ffs-color-primary-500);
    background: var(--ffs-color-primary-900);
    box-shadow:
        inset 0 0 0 1px var(--ffs-color-primary-500),
        0 0 24px rgba(var(--ffs-color-primary-rgb), 0.18);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"]:hover {
    background: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon-frame,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-icon-frame {
    transform: translateX(2px);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[disabled],
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Result icon + image ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-gray-800);
    color: var(--ffs-color-gray-300);
    border: 1px solid var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-white);
    border-color: var(--ffs-color-primary-500);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-image {
    border-radius: 8px;
    border: 1px solid var(--ffs-color-gray-700);
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-image {
    transform: scale(1.05);
    border-color: var(--ffs-color-primary-500);
}

/* ---- Result chip ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip {
    background: var(--ffs-color-gray-800);
    color: var(--ffs-color-gray-300);
    border: 1px solid var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-white);
    border-color: var(--ffs-color-primary-500);
}

/* ---- Empty state ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-gray-400);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty-title {
    color: var(--ffs-color-gray-100);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty-description {
    color: var(--ffs-color-gray-500);
}

/* ---- Keyboard footer ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__keyboard-shortcuts {
    background: var(--ffs-color-gray-800);
    border-top-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-400);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__kbd {
    background: var(--ffs-color-gray-900);
    border-color: var(--ffs-color-gray-700);
    color: var(--ffs-color-gray-200);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__keyboard-shortcuts:hover .fast-fuzzy-search__kbd {
    border-color: var(--ffs-color-gray-600);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__kbd:hover {
    background: var(--ffs-color-gray-800);
    transform: translateY(-0.5px);
}

/* ---- View all button ---- */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all {
    background: var(--ffs-color-gray-800);
    color: var(--ffs-color-primary-400);
    position: relative;
    overflow: hidden;
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ffs-color-primary-900);
    opacity: 0;
    transition: opacity var(--ffs-duration-fast) var(--ffs-easing);
    pointer-events: none;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover {
    color: var(--ffs-color-primary-300);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover::before {
    opacity: 1;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:active::before {
    background: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all > * {
    position: relative;
    z-index: 1;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all-icon {
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon {
    transform: translateX(3px);
}

/* ---- Panel close button ---- */
.fast-fuzzy-search__panel-close--minimal-dark {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-gray-100);
    border: 1px solid var(--ffs-color-gray-700);
    border-radius: var(--ffs-radius-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.35);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__panel-close--minimal-dark:hover,
.fast-fuzzy-search__panel-close--minimal-dark:focus {
    background: var(--ffs-color-gray-800);
    border-color: var(--ffs-color-gray-600);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 16px rgba(0, 0, 0, 0.4);
}

.fast-fuzzy-search__panel-close--minimal-dark:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Trigger buttons (button.php + icon-button.php) ----
 *
 * Both the icon-only button and the full-text "Search" button share the
 * same surface; only the border-radius and padding differ. The lift on
 * hover (deeper shadow) plus the bg shift are unified into a single
 * :hover rule. The focus ring uses the primary accent for both buttons.
 */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-gray-100);
    border: 1px solid var(--ffs-color-gray-700);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark {
    border-radius: var(--ffs-radius-pill);
}

.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark {
    border-radius: 10px;
    padding: 0 var(--ffs-space-4);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark:hover,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark:hover {
    background: var(--ffs-color-gray-800);
    border-color: var(--ffs-color-gray-600);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.35);
}



.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark:focus-visible {
    border-color: var(--ffs-color-primary-500);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.25);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark[disabled],
.fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark[aria-disabled="true"],
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark[disabled],
.fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- CTA button (inverted) ----
 *
 * Mirrors the inverted "Join" / "Convo AI" button pattern in
 * media/minimal-dark.webp: solid near-white surface with dark text,
 * which reads as a primary CTA on a near-black page. The user's
 * primary color is used as a thin border + soft glow to keep the brand
 * present without overpowering the high-contrast surface.
 */
.fast-fuzzy-search__cta--minimal-dark {
    background: var(--ffs-color-white);
    color: var(--ffs-color-black);
    border: 1px solid var(--ffs-color-primary-500);
    border-radius: 10px;
    padding: 0 var(--ffs-space-5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 24px rgba(var(--ffs-color-primary-rgb), 0.18),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__cta--minimal-dark:hover {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-black);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 32px rgba(var(--ffs-color-primary-rgb), 0.28),
        0 8px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-0.5px);
}

.fast-fuzzy-search__cta--minimal-dark:focus-visible {
    outline: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.35);
}

.fast-fuzzy-search__cta--minimal-dark:active {
    transform: translateY(0) scale(var(--ffs-press-scale));
}

.fast-fuzzy-search__cta--minimal-dark[disabled],
.fast-fuzzy-search__cta--minimal-dark[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Highlight (fuzzy match) ----
 *
 * The fuzzy search wraps matched substrings in <mark> or
 * .fast-fuzzy-search__highlight. On dark surfaces we use a dark
 * primary tint with a brighter primary text color so the highlight
 * is visible without flooding the row.
 */
.fast-fuzzy-search--minimal-dark mark,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__highlight {
    background: var(--ffs-highlight-bg);
    color: var(--ffs-highlight-fg);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] mark,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight {
    background: var(--ffs-color-primary-700);
    color: var(--ffs-color-white);
    box-shadow: 0 0 0 1px var(--ffs-color-primary-500);
}

/* ---- Loading skeleton ----
 *
 * Optional class to apply to a result row while content is loading.
 * Uses a subtle gray shimmer that respects reduced motion.
 */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__skeleton {
    background: linear-gradient(
        90deg,
        var(--ffs-color-gray-800) 0%,
        var(--ffs-color-gray-700) 50%,
        var(--ffs-color-gray-800) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    color: transparent;
    animation: ffs-minimal-dark-shimmer 1.4s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes ffs-minimal-dark-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__skeleton {
        animation: none;
        background: var(--ffs-color-gray-800);
    }
}
