/**
 * Sticky Search: Compact bottom-sticky search bar
 * Feature: 038-mobile-style-refresh (US1)
 *
 * Appears when hero search scrolls out of view.
 * Positioned above mini-console (60px from viewport bottom).
 * Mobile only (<768px).
 *
 * Z-index: 1020 (--z-index-sticky) - below fixed elements like navbar
 */

/* ==========================================================================
   Sticky Search Container
   ========================================================================== */

.sticky-search {
    position: fixed;
    bottom: 60px; /* Above mini-console (44px content + safe-area) */
    left: 0;
    right: 0;
    z-index: var(--z-index-sticky, 1020);
    padding: 0 16px;
    /* Hidden by default - shown via JS when hero scrolls out */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Visible state - applied by JavaScript */
.sticky-search.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hidden attribute override for initial state */
.sticky-search[hidden] {
    display: block !important; /* Override hidden but keep invisible via opacity */
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.sticky-search-form {
    max-width: 600px;
    margin: 0 auto;
}

.sticky-search-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--bs-border-color, #D2B48C);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.sticky-search-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    outline: none;
    min-width: 0; /* Allow flex shrink */
}

.sticky-search-input::placeholder {
    color: var(--bs-secondary, #6c757d);
}

.sticky-search-input:focus {
    outline: none;
}

/* Focus ring on wrapper instead */
.sticky-search-input-wrapper:focus-within {
    border-color: var(--bs-primary, #8B4513);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(139, 69, 19, 0.2);
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.sticky-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    /* Fill wrapper height - let overflow:hidden clip to shape */
    align-self: stretch;
    background: var(--bs-primary, #8B4513);
    color: white;
    border: none;
    border-radius: 0; /* Let wrapper's overflow:hidden create the rounded edge */
    cursor: pointer;
    transition: background 0.15s ease;
}

.sticky-search-submit:hover {
    background: var(--bs-primary-dark, #704010);
}

.sticky-search-submit:active {
    transform: scale(0.95);
}

.sticky-search-submit .bi {
    font-size: 1.125rem;
    line-height: 1;
}

/* ==========================================================================
   Voice Input Button
   ========================================================================== */

.sticky-search-voice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.sticky-search-voice:hover {
    color: var(--bs-primary, #8B4513);
}

.sticky-search-voice .bi {
    font-size: 1.125rem;
    line-height: 1;
}

/* Listening state */
.sticky-search-voice.voice-input-listening {
    color: var(--bs-danger, #dc3545);
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   Responsive: Hide on desktop (>=768px)
   ========================================================================== */

@media (min-width: 768px) {
    .sticky-search {
        display: none !important;
    }
}

/* ==========================================================================
   Safe Area Adjustment (notched devices)
   ========================================================================== */

@media (max-width: 767.98px) {
    .sticky-search {
        /* Adjust bottom position to account for mini-console + safe area */
        bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.sticky-search-submit:focus-visible {
    outline: 2px solid white;
    outline-offset: -4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sticky-search {
        transition: none;
    }

    .sticky-search-submit:active {
        transform: none;
    }
}

/* ==========================================================================
   No IntersectionObserver Fallback
   ========================================================================== */

/* If IntersectionObserver not supported, never show sticky search */
.no-intersection-observer .sticky-search {
    display: none !important;
}

/* ==========================================================================
   Chat Expanded: Hide sticky search when chat is open
   Chat takes priority for mobile bottom screen real estate.
   ========================================================================== */

body:has(.chat-sidebar.chat-expanded) .sticky-search {
    opacity: 0;
    pointer-events: none;
}