/* =============================================
   LandLens Spotlight Search
   macOS Spotlight-inspired global search
   with GSAP animations and glassmorphism
   ============================================= */

:root {
    --spotlight-glass-bg: rgba(255, 255, 255, 0.88);
    --spotlight-glass-border: rgba(255, 255, 255, 0.4);
    --spotlight-backdrop-blur: 25px;
    --spotlight-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --spotlight-radius: 16px;
    --spotlight-primary: #ff6725;
    --spotlight-primary-light: rgba(255, 103, 37, 0.1);
    --spotlight-primary-glow: rgba(255, 103, 37, 0.25);
}

/* =============================================
   Topbar Search Trigger (Spotlight)
   ============================================= */

.ll-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 44px;
    padding: 0 14px 0 44px;
    border-radius: 9999px;
    border: 1px solid var(--color-stroke-3, #e5e7eb);
    background-color: var(--color-background-1, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ll-topbar-search:hover {
    border-color: var(--color-primary-500, #ff6725);
    box-shadow: 0 0 0 3px rgba(255, 103, 37, 0.1);
}

.ll-topbar-search:focus {
    outline: none;
    border-color: var(--color-primary-500, #ff6725);
    box-shadow: 0 0 0 3px rgba(255, 103, 37, 0.15);
}

.ll-topbar-search .ll-topbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(26, 26, 28, 0.4);
    pointer-events: none;
}

.ll-topbar-search .ll-topbar-search-input {
    flex: 1;
    font-size: 0.9375rem;
    color: rgba(26, 26, 28, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: none;
    padding: 0;
    height: auto;
    line-height: 1;
}

.ll-topbar-search-kbd {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 12px;
    flex-shrink: 0;
}

.ll-topbar-search-kbd kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(26, 26, 28, 0.5);
    line-height: 1;
}

.ll-topbar-search:hover .ll-topbar-search-kbd kbd {
    background: #e5e7eb;
    border-color: #d1d5db;
}

/* Hide topbar search on mobile - use floating button instead */
@media (max-width: 768px) {
    .ll-topbar-search {
        display: none !important;
    }
}

/* =============================================
   Mobile Floating Search Button
   ============================================= */

.ll-spotlight-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .ll-spotlight-fab {
        display: flex;
    }
}

/* The button only earns its space while the page is moving: it fades in on scroll and
   settles back out once things are still. Idle screens stay uncluttered, and on the chat
   page it stops competing with the composer. Opacity and transform only, so it never
   reflows anything, and pointer-events follow so a faded button is not a tap trap. */
.ll-spotlight-fab {
    opacity: 0;
    transform: translateY(10px) scale(.94);
    pointer-events: none;
    transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
.ll-spotlight-fab.is-scrolling,
.ll-spotlight-fab:focus-within,
.ll-spotlight-fab:hover {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* A pointer user who never scrolls still needs it, and reduced-motion users should not get
   a moving target. Desktop keeps it permanently visible; only the touch FAB behaves. */
@media (hover: hover) and (pointer: fine) {
    .ll-spotlight-fab { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ll-spotlight-fab { transition: opacity .01s linear; transform: none; }
    .ll-spotlight-fab.is-scrolling { transform: none; }
}

/* On the LandLens One chat page the composer owns the bottom-right corner, and this
   floating button was landing exactly on top of the send arrow, so on a phone the send
   button could not be tapped at all. Search is the secondary action here, so it moves to
   the opposite corner rather than the send button moving out of the thumb zone. */
@media (max-width: 768px) {
    body.sv-page .ll-spotlight-fab {
        right: auto;
        left: 20px;
    }
}

.ll-spotlight-fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.ll-spotlight-fab-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ll-spotlight-fab-btn:active {
    transform: translateY(0) scale(0.96);
}

.ll-spotlight-fab-btn svg {
    width: 24px;
    height: 24px;
    color: var(--spotlight-primary, #ff6725);
    transition: transform 0.2s ease;
}

.ll-spotlight-fab-btn:hover svg {
    transform: scale(1.1);
}

/* Hide FAB when spotlight is open */
body.spotlight-active .ll-spotlight-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Hide search results dropdown when spotlight is active */
body.spotlight-active .ll-search-results {
    display: none !important;
}

/* =============================================
   Backdrop Overlay
   ============================================= */

.ll-spotlight-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ll-spotlight-backdrop.active {
    pointer-events: auto;
}

/* =============================================
   Spotlight Modal Container
   ============================================= */

.ll-spotlight {
    position: fixed;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.ll-spotlight.active {
    pointer-events: auto;
}

/* Glassmorphism content wrapper */
.ll-spotlight-content {
    width: 100%;
    height: 100%;
    background: var(--spotlight-glass-bg);
    backdrop-filter: blur(var(--spotlight-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--spotlight-backdrop-blur));
    border: 1px solid var(--spotlight-glass-border);
    border-radius: inherit;
    box-shadow: var(--spotlight-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =============================================
   Search Input Area
   ============================================= */

.ll-spotlight-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.ll-spotlight-search-icon {
    width: 22px;
    height: 22px;
    color: var(--spotlight-primary);
    flex-shrink: 0;
}

.ll-spotlight-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    font-weight: 400;
    color: #1a1a2e;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}

.ll-spotlight-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.ll-spotlight-input::placeholder {
    color: rgba(26, 26, 28, 0.4);
    font-weight: 400;
}

/* Loading spinner */
.ll-spotlight-loading {
    display: none;
    align-items: center;
    justify-content: center;
}

.ll-spotlight-loading.active {
    display: flex;
}

.ll-spotlight-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 103, 37, 0.2);
    border-top-color: var(--spotlight-primary);
    border-radius: 50%;
    animation: spotlight-spin 0.7s linear infinite;
}

@keyframes spotlight-spin {
    to { transform: rotate(360deg); }
}

/* Close/ESC button */
.ll-spotlight-close {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ll-spotlight-close:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.ll-spotlight-close kbd {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(26, 26, 28, 0.6);
}

/* =============================================
   Results Area
   ============================================= */

.ll-spotlight-results {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 400px;
}

/* Custom scrollbar */
.ll-spotlight-results::-webkit-scrollbar {
    width: 6px;
}

.ll-spotlight-results::-webkit-scrollbar-track {
    background: transparent;
}

.ll-spotlight-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.ll-spotlight-results::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* =============================================
   Category Sections
   ============================================= */

.ll-spotlight-category {
    display: none;
}

.ll-spotlight-category.has-results {
    display: block;
}

.ll-spotlight-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.ll-spotlight-category-header svg {
    width: 14px;
    height: 14px;
    color: rgba(26, 26, 28, 0.4);
}

.ll-spotlight-category-header span {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(26, 26, 28, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =============================================
   Result Items
   ============================================= */

.ll-spotlight-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.12s ease;
    text-decoration: none;
    color: inherit;
}

.ll-spotlight-item:hover,
.ll-spotlight-item.selected {
    background: var(--spotlight-primary-light);
}

.ll-spotlight-item.selected {
    background: rgba(255, 103, 37, 0.12);
}

/* Item icon */
.ll-spotlight-item-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--spotlight-primary-light);
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ll-spotlight-item:hover .ll-spotlight-item-icon,
.ll-spotlight-item.selected .ll-spotlight-item-icon {
    background: rgba(255, 103, 37, 0.18);
}

.ll-spotlight-item-icon svg {
    width: 18px;
    height: 18px;
    color: var(--spotlight-primary);
}

/* Item info */
.ll-spotlight-item-info {
    flex: 1;
    min-width: 0;
}

.ll-spotlight-item-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ll-spotlight-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.8rem;
    color: rgba(26, 26, 28, 0.5);
    flex-wrap: wrap;
}

.ll-spotlight-item-meta span {
    white-space: nowrap;
}

/* Status badges */
.ll-spotlight-item-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
}

.ll-spotlight-item-badge.completed {
    background: #dcfce7;
    color: #166534;
}

.ll-spotlight-item-badge.processing,
.ll-spotlight-item-badge.step1,
.ll-spotlight-item-badge.step2 {
    background: #dbeafe;
    color: #1e40af;
}

.ll-spotlight-item-badge.draft,
.ll-spotlight-item-badge.pending {
    background: #f3f4f6;
    color: #4b5563;
}

.ll-spotlight-item-badge.action_required,
.ll-spotlight-item-badge.failed,
.ll-spotlight-item-badge.partial {
    background: #fef3c7;
    color: #92400e;
}

.ll-spotlight-item-badge.active {
    background: #dcfce7;
    color: #166534;
}

.ll-spotlight-item-badge.paused {
    background: #f3f4f6;
    color: #6b7280;
}

/* Arrow */
.ll-spotlight-item-arrow {
    width: 14px;
    height: 14px;
    color: rgba(26, 26, 28, 0.25);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ll-spotlight-item:hover .ll-spotlight-item-arrow,
.ll-spotlight-item.selected .ll-spotlight-item-arrow {
    color: var(--spotlight-primary);
    transform: translateX(2px);
}

/* =============================================
   Empty State
   ============================================= */

.ll-spotlight-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}

.ll-spotlight-empty.active {
    display: flex;
}

.ll-spotlight-empty svg {
    width: 48px;
    height: 48px;
    color: rgba(26, 26, 28, 0.15);
    margin-bottom: 12px;
}

.ll-spotlight-empty p {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1a1a2e;
    margin: 0;
}

.ll-spotlight-empty span {
    font-size: 0.8125rem;
    color: rgba(26, 26, 28, 0.45);
    margin-top: 4px;
}

/* =============================================
   Initial Hint State
   ============================================= */

.ll-spotlight-hint {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    text-align: center;
}

.ll-spotlight-hint.active {
    display: flex;
}

.ll-spotlight-hint p {
    font-size: 0.875rem;
    color: rgba(26, 26, 28, 0.45);
    margin: 0 0 16px 0;
}

.ll-spotlight-hint-shortcuts {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.ll-spotlight-hint-shortcuts span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(26, 26, 28, 0.4);
}

.ll-spotlight-hint-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(26, 26, 28, 0.5);
}

/* =============================================
   Responsive Styles
   ============================================= */

@media (max-width: 768px) {
    .ll-topbar-search-kbd {
        display: none;
    }

    .ll-spotlight-input-wrapper {
        padding: 14px 16px;
    }

    .ll-spotlight-input {
        font-size: 1rem;
    }

    .ll-spotlight-category-header {
        padding: 8px 16px;
    }

    .ll-spotlight-item {
        padding: 10px 16px;
        gap: 12px;
    }

    .ll-spotlight-item-icon {
        width: 34px;
        height: 34px;
    }

    .ll-spotlight-item-icon svg {
        width: 16px;
        height: 16px;
    }

    .ll-spotlight-item-name {
        font-size: 0.875rem;
    }

    .ll-spotlight-item-meta {
        font-size: 0.75rem;
    }

    .ll-spotlight-hint-shortcuts {
        gap: 12px;
    }
}

/* =============================================
   Animation Utility Classes
   ============================================= */

.ll-spotlight-fade-in {
    animation: spotlightFadeIn 0.2s ease forwards;
}

@keyframes spotlightFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}