:root {
    /* LIGHT MODE (Default) */
    --primary: #0ea5e9;
    --primary-hover: #0284c7;
    --accent: #38bdf8;
    --bg-main: #f8fafc;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --border-glass: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --transition: all 0.3s ease;
}

/* Hide Leaflet Branding */
.leaflet-control-attribution {
    display: none !important;
}

/* Prevent iOS/Android auto-zoom when focusing form fields.
   Mobile browsers zoom when an input's font-size is < 16px. */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

[data-theme="dark"] {
    --bg-main: #0f172a;
    --bg-panel: #1e293b;
    --bg-card: #1e293b;
    --border-glass: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
.logo {
    font-family: 'Outfit', sans-serif;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Mobile — thin blue scrollbar */
@media (max-width: 992px) {
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #0ea5e9;
        border-radius: 99px;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 transparent;
    }
}

/* Global Hide for Mobile-Only Components on Desktop */
/* Desktop hides mobile-only components. Filters use .filter-bar-desktop instead. */
.mode-overlay,
.mobile-view-toggle,
.mobile-only-flex {
    display: none;
}

/* ============================================
   HEADER & FILTERS
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

.logo i {
    color: var(--primary);
    font-size: 1.8rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-links a.active {
    color: var(--primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background: var(--primary);
    color: white !important;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
}

.btn-secondary {
    background: var(--bg-main);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--border-glass);
}

@media (hover: hover) {

    .btn-primary:hover,
    .btn-secondary:hover,
    .overlay-mode-btn:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    }
}

/* --- Fluid Theme Toggle --- */
.theme-toggle {
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.1rem;
    overflow: hidden;
    position: relative;
}

.theme-toggle i {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
}

[data-theme="dark"] .theme-toggle i.fa-moon {
    display: none;
}

html:not([data-theme="dark"]) .theme-toggle i.fa-sun {
    display: none;
}

/* ============================================
   FILTERS
   ============================================ */

/* ── Desktop Filter Bar ── */
.filter-bar-desktop {
    padding: 0.6rem 2rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-glass);
}

.filter-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-glass);
    flex-shrink: 0;
    margin: 0 0.3rem;
}

.filter-bar-inner .search-input {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
}

.search-input {
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.5rem 0.85rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-input:focus {
    border-color: var(--primary);
}

.filter-bar-inner .filter-select {
    min-width: 0;
    width: auto;
    flex-shrink: 1;
}

.filter-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.filter-search-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.filter-clear-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-glass);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.filter-clear-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Mobile bars hidden on desktop */
.filter-bar-mobile {
    display: none;
}

.filters-modal {
    display: none;
}

/* Buy/Rent Toggle */
.mode-toggle {
    display: flex;
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    padding: 3px;
    flex-shrink: 0;
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.45rem 1rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mode-btn:hover {
    color: var(--primary);
}

.mode-btn.mode-active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.filter-group.align-end {
    justify-content: flex-end;
}

/* Filter Inputs */
.filter-select {
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.5rem 0.85rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    outline: none;
    min-width: 0;
    transition: border-color 0.2s ease;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px;
    padding-right: 1.8rem;
}

.filter-select:hover,
.filter-select:focus {
    border-color: var(--primary);
}

.clear-btn {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-glass) !important;
    cursor: pointer;
    font-weight: 600;
    background-image: none !important;
    padding-right: 1rem !important;
}

.clear-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* noUiSlider Overrides (mobile only) */
.price-group {
    min-width: 250px;
}

.price-slider-container {
    padding: 0 10px;
    margin-top: 8px;
    margin-bottom: 5px;
    position: relative;
}

/* Airbnb-style price frequency histogram */
.price-histogram {
    display: block;
    width: 100%;
    height: 56px;
    margin-bottom: -4px;
    pointer-events: none;
}

.price-display {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    text-align: center;
    margin-top: 0.8rem;
}

.noUi-target {
    background: var(--border-glass);
    border: none;
    box-shadow: none;
    height: 6px;
}

.noUi-connect {
    background: var(--primary);
}

/* Slider handles = G2 squircle rounded-rectangles (Apple-style) */
.noUi-target .noUi-handle,
.noUi-handle.noUi-handle-lower,
.noUi-handle.noUi-handle-upper {
    border: none !important;
    background-color: var(--primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    cursor: ew-resize !important;
    /* True G2 squircle via SVG mask (Figma-style 60% corner smoothing) */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22' preserveAspectRatio='none'><path d='M0,4 C0,1.2 1.2,0 3,0 C4.8,0 6,1.2 6,4 L6,18 C6,20.8 4.8,22 3,22 C1.2,22 0,20.8 0,18 Z' fill='black'/></svg>") !important;
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 22' preserveAspectRatio='none'><path d='M0,4 C0,1.2 1.2,0 3,0 C4.8,0 6,1.2 6,4 L6,18 C6,20.8 4.8,22 3,22 C1.2,22 0,20.8 0,18 Z' fill='black'/></svg>") !important;
    -webkit-mask-size: 100% 100% !important;
            mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    border-radius: 0 !important;
}

.noUi-horizontal .noUi-handle {
    width: 6px !important;
    height: 22px !important;
    right: -3px !important;
    top: -8px !important;
}

.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ============================================
   PROFESSIONAL FOOTER
   ============================================ */
.site-footer {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: auto;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.footer-brand {
    flex-shrink: 0;
    max-width: 260px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.footer-logo i {
    color: var(--primary);
    font-size: 1.4rem;
}

.footer-logo small {
    font-weight: 500;
    opacity: 0.6;
    font-size: 0.85em;
}

.footer-tagline {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
}

.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.footer-social a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.footer-links-grid {
    flex: 1;
    display: flex;
    gap: 3rem;
    justify-content: flex-end;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.footer-col a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 2rem;
    border-top: 1px solid var(--border-glass);
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.footer-bottom p {
    margin: 0;
}

/* ============================================
   MOBILE VIEW TOGGLE PILL (Hidden on desktop)
   ============================================ */

.mobile-view-toggle {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: var(--bg-panel);
    border: 2px solid var(--border-glass);
    border-radius: 50px;
    padding: 5px;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mvt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mvt-btn:hover {
    color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
}

.mvt-btn.mvt-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

.mvt-btn i {
    font-size: 0.9rem;
}

/* ============================================
   SPLIT SCREEN CLASSES (applied by JS on mobile)
   ============================================ */
.main-container.split-mode {
    flex-direction: column !important;
    height: calc(100dvh - var(--header-h, 130px)) !important;
    overflow: hidden !important;
}

.split-mode .listings-section {
    display: flex !important;
    flex: 0 0 50% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 50% !important;
    overflow-y: auto !important;
    border-bottom: 2px solid var(--primary) !important;
}

.split-mode .map-section {
    display: block !important;
    flex: 0 0 50% !important;
    width: 100% !important;
    height: 50% !important;
    border-left: none !important;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
.main-container {
    display: flex;
    height: calc(100vh - 145px);
    overflow: hidden;
}

/* --- Left Section (Listings) --- */
.listings-section {
    flex: 1;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

/* ============================================
   HOMEPAGE FLY-IN INTRO (desktop only)
   The map opens full-bleed, dives into the visitor's city, then the
   listings slide in from the left to form the split view. Gated on
   html.js so the listings are never hidden when JS isn't running;
   scoped to desktop — mobile runs its own map→split mode flow.
   ============================================ */
@media (min-width: 993px) {
    .js .listings-section {
        transition: max-width 0.76s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.76s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.5s ease;
    }

    .js .main-container.map-intro .listings-section {
        max-width: 0 !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    /* Reduced motion: the JS skips the dive, so reveal the listings
       instantly to match (no slide-in). */
    @media (prefers-reduced-motion: reduce) {
        .js .listings-section { transition: none; }
    }
}

/* ============================================
   RESPONSIVE: TABLET (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
    .navbar {
        padding: 0.6rem 1rem;
    }

    /* ── Swap filter bars ── */
    .filter-bar-desktop {
        display: none !important;
    }

    .filter-bar-mobile {
        display: block;
        padding: 0.5rem 1rem;
        background: var(--bg-card);
        border-top: 1px solid var(--border-glass);
    }

    .filter-bar-mobile-inner {
        display: flex;
        gap: 0.4rem;
        align-items: center;
    }

    .filter-bar-mobile .search-input {
        flex: 1;
        height: 38px;
        font-size: 0.85rem;
    }

    .filter-bar-mobile .btn-primary,
    .filter-bar-mobile .btn-secondary {
        height: 38px;
        padding: 0 0.8rem;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .main-container {
        display: flex !important;
        flex-direction: column;
        height: calc(100vh - 120px);
        overflow: hidden;
        position: relative;
    }

    .listings-section {
        max-width: 100%;
        width: 100%;
        height: 100%;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

    .listings-scroll-container {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* --- INITIAL OVERLAY --- */
    .mode-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 2000;
        display: none;
        justify-content: center;
        align-items: center;
        pointer-events: all;
    }

    .mode-overlay-content {
        background: transparent !important;
        padding: 0;
        border: none !important;
        box-shadow: none !important;
        text-align: center;
        width: 100%;
    }

    @keyframes pulse-subtle {
        0% {
            transform: scale(1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
    }

    .mode-overlay-btns {
        display: flex;
        gap: 2.5rem;
        justify-content: center;
        width: 100%;
    }

    .overlay-mode-btn {
        padding: 1rem 0 !important;
        width: 140px;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
        animation: pulse-subtle 2s infinite ease-in-out;
    }

    .overlay-mode-btn:active {
        transform: scale(0.96) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* Map hidden by default on mobile */
    .map-section {
        display: none;
        width: 100%;
        border-left: none;
    }

    .map-section.mobile-map-active {
        display: block !important;
        height: 100% !important;
        flex: 1 !important;
    }

    .listings-section.mobile-hidden {
        display: none !important;
    }

    /* ───────── Split view: map stays fixed, listings slide up as overlay sheet ─────────
       The map-section is pinned to fill the container, the listings-section
       floats over the bottom half and animates in. The map never resizes,
       so no visual "push up" when the sheet appears. */
    .main-container.split-mode {
        position: relative;
    }

    .main-container.split-mode .map-section {
        display: block !important;
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        flex: none !important;
        order: 0 !important;
        border-bottom: none;
    }

    .main-container.split-mode {
        --split-pct: 30;
    }

    .main-container.split-mode .listings-section {
        display: block !important;
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: calc(var(--split-pct, 30) * 1vh) !important;
        flex: none !important;
        z-index: 20;
        background: var(--bg-main);
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        /* Drag bar lives above the sheet now — no internal reservation; bar provides the rounded fold. */
        padding-top: 0;
        animation: split-sheet-slide-up 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
    }
    .main-container.split-mode .listings-scroll-container {
        height: 100% !important;
        overflow-y: auto !important;
        /* The floating .mobile-view-toggle pill (position: fixed;
           bottom: 20px; height ~46px) overlays the bottom ~70px of
           the viewport. Without this padding the LAST cards in the
           list end up sitting behind the pill and can't be scrolled
           into view. 90px = pill bottom-gap (20) + pill height (~46)
           + extra breathing room. */
        padding-bottom: 90px !important;
    }

    @keyframes split-sheet-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    /* Bar travels the full sheet distance so the fold rises together with the sheet. */
    @keyframes split-grabber-slide-up {
        /* 32px = current grabber height (bumped to fit the Rent/Buy pill). */
        from { transform: translateY(calc(var(--split-pct, 30) * 1vh + 32px)); }
        to   { transform: translateY(0); }
    }

    /* ── LIST MODE: re-purpose the split-grabber as a FIXED top
       toolbar with the same Rent/Buy + Filters/Sort, but drag arrows
       and handle hidden (no resize affordance, since there's no map
       to resize against). ── */
    body.list-mode #split-grabber {
        display: flex !important;
        position: fixed;
        top: var(--header-h, 60px);     /* sits just below the navbar */
        left: 0;
        right: 0;
        bottom: auto;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: .9rem;
        padding: 0 .9rem;
        background: var(--bg-main);
        border-bottom: 1px solid var(--border-glass);
        border-radius: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 30;
        animation: none;        /* override the split-mode slide-up */
        cursor: default;
        touch-action: auto;
    }
    [data-theme="dark"] body.list-mode #split-grabber {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }
    /* Hide the middle drag chrome in list mode — no resize there. */
    body.list-mode #split-grabber .split-arrow,
    body.list-mode #split-grabber .split-grabber-handle {
        display: none !important;
    }
    /* Push the listings content down so it isn't hidden under the
       fixed top bar in list mode (single-row 40px bar). */
    body.list-mode .listings-section {
        padding-top: 48px !important;
    }

    /* ── List-mode-only extras: TWO dropdowns side-by-side in the
       middle of the bar (Location + Type). Hidden in split mode by
       default CSS. Subtle blended chrome — no primary blue. */
    .lme-middle { display: none; }

    /* Centred middle slot containing the two dropdowns. */
    body.list-mode #split-grabber .lme-middle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    /* Each dropdown is its OWN positioning context so its menu can
       absolute-anchor under its own button. */
    body.list-mode #split-grabber .lme-dd {
        position: relative;
    }
    body.list-mode #split-grabber .lme-dd-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        font-family: 'Inter', sans-serif;
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        white-space: nowrap;
        padding: 4px 8px;
        border-radius: 6px;
        line-height: 1;
        transition: background 0.15s ease;
    }
    body.list-mode #split-grabber .lme-dd-btn:hover,
    body.list-mode #split-grabber .lme-dd-btn[aria-expanded="true"] {
        background: rgba(0, 0, 0, 0.06);
    }
    [data-theme="dark"] body.list-mode #split-grabber .lme-dd-btn:hover,
    [data-theme="dark"] body.list-mode #split-grabber .lme-dd-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.08);
    }
    body.list-mode #split-grabber .lme-chevron {
        font-size: 0.55rem;
        opacity: 0.6;
        transition: transform 0.15s ease;
    }
    body.list-mode #split-grabber .lme-dd-btn[aria-expanded="true"] .lme-chevron {
        transform: rotate(180deg);
    }

    /* Dropdown menu — anchored under its parent .lme-dd. */
    body.list-mode #split-grabber .lme-dd-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 140px;
        background: var(--bg-main);
        border: 1px solid var(--border-glass);
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18),
                    0 2px 6px rgba(0, 0, 0, 0.08);
        padding: 4px;
        z-index: 6;
        animation: sgt-menu-pop 0.16s cubic-bezier(0.2, 0.85, 0.25, 1);
    }
    body.list-mode #split-grabber .lme-dd-menu[hidden] {
        display: none;
    }
    body.list-mode #split-grabber .lme-dd-menu button {
        background: transparent;
        border: none;
        text-align: left;
        padding: 0.5rem 0.7rem;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-primary);
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
    }
    body.list-mode #split-grabber .lme-dd-menu button:hover,
    body.list-mode #split-grabber .lme-dd-menu button:focus-visible {
        background: rgba(0, 0, 0, 0.06);
        outline: none;
    }
    [data-theme="dark"] body.list-mode #split-grabber .lme-dd-menu button:hover,
    [data-theme="dark"] body.list-mode #split-grabber .lme-dd-menu button:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }

    /* ── Hierarchical LOCATION menu ──
       The location dropdown carries 27 main Sri Lankan cities, each
       with several sub-areas indented under it. Capped to 60vh tall
       with native-momentum vertical scroll. */
    body.list-mode #split-grabber .lme-loc-menu {
        min-width: 220px;
        max-width: 260px;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* "All Areas" reset item — sticky to the top while scrolling. */
    body.list-mode #split-grabber .lme-loc-menu .lme-loc-all {
        position: sticky;
        top: 0;
        background: var(--bg-main);
        font-weight: 700;
        color: var(--primary);
        border-bottom: 1px solid var(--border-glass);
        border-radius: 6px 6px 0 0;
        margin: -4px -4px 4px;        /* extend to menu's padding edge */
        padding: 0.55rem 0.7rem;
        z-index: 2;
    }
    /* City header — clickable, selects the whole city. */
    body.list-mode #split-grabber .lme-loc-menu .lme-loc-city {
        font-weight: 700;
        font-size: 0.78rem;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 0.5rem 0.7rem 0.3rem;
        margin-top: 4px;
    }
    /* First city header doesn't need the top margin (sits right after
       the sticky "All Areas" item). */
    body.list-mode #split-grabber .lme-loc-menu .lme-loc-all + .lme-loc-city {
        margin-top: 0;
    }
    /* Sub-area — indented, lighter, secondary colour. */
    body.list-mode #split-grabber .lme-loc-menu .lme-loc-sub {
        padding-left: 1.6rem;
        font-size: 0.76rem;
        font-weight: 400;
        color: var(--text-secondary);
    }
    body.list-mode #split-grabber .lme-loc-menu .lme-loc-sub:hover {
        color: var(--text-primary);
    }

    /* Full-width drag bar that blends into the top of the listings sheet:
       [ ↑ ]    ───── grabber ─────    [ ↓ ] */
    #split-grabber { display: none; }
    .main-container.split-mode #split-grabber {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .9rem;
        position: absolute;
        left: 0;
        right: 0;
        /* Slim bar floating just ABOVE the listings sheet so it never overlaps cards. */
        /* Sit ABOVE the listings sheet — its bottom edge touches the sheet's top edge,
           so the bar reads as the rounded "fold" of the sheet rather than overlapping cards. */
        bottom: calc(var(--split-pct, 30) * 1vh);
        left: 0;
        right: 0;
        height: 26px;
        /* Slide in WITH the sheet so the fold animates as one unit (travels the sheet's full height). */
        animation: split-grabber-slide-up 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
        will-change: transform;
        padding: 0 .9rem;
        z-index: 25;
        cursor: ns-resize;
        touch-action: none;
        background: var(--bg-main);   /* exact same color as the listings sheet below */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Pronounced rounded top corners so the bar reads as the "fold" of the sheet. */
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow: hidden;            /* clip backdrop-filter blur to the rounded shape */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    }
    [data-theme="dark"] .main-container.split-mode #split-grabber {
        background: var(--bg-main);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .35);
    }
    .split-grabber-handle {
        flex: 0 0 auto;
        width: 48px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .3);
        transition: width .15s ease, background .15s ease;
        pointer-events: none;
    }
    [data-theme="dark"] .split-grabber-handle {
        background: rgba(255, 255, 255, .4);
    }
    .split-arrow {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        opacity: .75;
        font-size: .65rem;
        cursor: pointer;
        padding: 0;
        border-radius: 50%;
        transition: opacity .15s ease, background .15s ease, transform .1s ease;
    }
    .split-arrow:hover  { opacity: 1; background: rgba(0, 0, 0, .06); }
    .split-arrow:active { transform: scale(.9); }
    #split-grabber.is-dragging .split-grabber-handle {
        width: 60px;
        background: rgba(0, 0, 0, .55);
    }

    body.mobile-map-only .site-footer {
        display: none !important;
    }

    .mobile-view-toggle {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--bg-card);
        padding: 6px;
        border-radius: 40px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        border: 1px solid var(--border-glass);
        z-index: 2500;
        gap: 5px;
    }

    /* Hide the Map button visually but keep it in the DOM so the
       existing JS (applyMobileMode, mvt-active toggling, default
       boot mode, etc.) keeps working. */
    #mvt-map {
        display: none !important;
    }

    .mvt-btn {
        background: transparent;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 30px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: 0.2s;
    }

    .mvt-btn.mvt-active {
        background: var(--primary);
        color: white;
    }

    .listings-section {
        padding-bottom: 5rem;
        max-width: 100% !important;
        width: 100% !important;
    }

    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    /* --- Mobile Filters Modal --- */
    .filters-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        background: var(--bg-card);
        z-index: 3000;
        padding: 1.5rem;
        flex-direction: column;
        display: none;
        overflow-y: auto;
    }

    .filters-modal.active {
        display: flex;
        animation: slideUp 0.3s ease forwards;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .filters-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-glass);
    }

    .filters-modal-header h3 {
        font-size: 1.2rem;
        margin: 0;
    }

    .close-filters-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-primary);
        cursor: pointer;
    }

    .filters-grid {
        flex-direction: column;
        gap: 1.2rem;
        align-items: stretch;
    }

    .filter-select {
        width: 100%;
        padding: 0.8rem 1.2rem;
        font-size: 1rem;
        border-radius: var(--radius-md);
        background-position: right 1.2rem center;
    }

    .price-group {
        min-width: auto;
    }

    .price-slider-container {
        padding: 0.5rem 10px;
        margin-top: 15px;
    }

    .clear-btn {
        margin-top: 1rem;
        padding: 1rem !important;
        text-align: center;
        border-radius: var(--radius-md) !important;
    }

    /* ── Footer stacked on mobile ── */
    .footer-inner {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-links-grid {
        justify-content: flex-start;
        gap: 2rem;
        flex-wrap: wrap;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .navbar {
        padding: 0.6rem 0.8rem;
        gap: 0.4rem;
    }

    .logo {
        font-size: 1.15rem;
    }

    .nav-links {
        width: 100%;
        gap: 0.6rem;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.45rem 0.9rem;
        font-size: 0.82rem;
    }

    /* Mobile filter bar compact */
    .filter-bar-mobile {
        padding: 0.4rem 0.6rem;
    }

    .filter-bar-mobile .search-input {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
        height: 34px;
    }

    .filter-bar-mobile .btn-primary,
    .filter-bar-mobile .btn-secondary {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        height: 34px;
    }

    .listings-section {
        padding: 0.6rem;
    }

    .listings-header {
        margin-bottom: 0.5rem;
    }

    .listings-header h1 {
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 0.6rem;
    }

    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .property-img {
        height: 120px;
    }

    .property-info {
        /* Mobile: ZERO padding around the address block. The card's
           own border + the grid gap between cards act as the only
           separators. Address text sits edge-to-edge inside the card. */
        padding: 0 !important;
    }

    .property-title {
        font-size: 0.75rem;
    }

    .property-location {
        font-size: 0.65rem;
        margin-bottom: 0;
        gap: 0.3rem;
        /* line-height: 1 collapses the intrinsic ~5px gap that default
           browser line-height (~1.5) leaves above and below the glyph.
           Combined with padding: 0 on the parent, the address text is
           now truly flush against the image bottom and the card edge. */
        line-height: 1;
    }
    .property-location > i { font-size: 0.7rem; line-height: 1; }
    .property-address-line,
    .property-address-line .address-text { line-height: 1; }
    /* .property-address-line inherits font/colour from parent. The
       marquee animation rules live further down in the file. */

    .property-metrics {
        font-size: 0.65rem;
        padding-top: 0.4rem;
    }

    .property-metrics i {
        font-size: 0.65rem;
    }

    .price-tag {
        font-size: 0.70rem;
        padding: 0.15rem 0.35rem;
    }

    .type-tag {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    .mode-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.35rem;
        top: 0.4rem;
        left: 0.4rem;
    }

    .page-container {
        padding: 1.5rem 0.8rem;
    }

    .form-page .form-wrapper {
        padding: 1.2rem;
    }

    .input-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .dashboard-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-table th,
    .dashboard-table td {
        padding: 8px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .navbar {
        padding: 0.5rem 0.6rem;
    }

    .logo {
        font-size: 1rem;
    }

    .nav-links a {
        font-size: 0.78rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }

    .theme-toggle {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .listings-header h1 {
        font-size: 1rem;
    }

    .filter-select {
        font-size: 0.78rem;
        padding: 0.4rem 0.6rem;
        padding-right: 1.2rem;
    }

    .listings-grid {
        gap: 0.5rem;
    }

    .property-img {
        height: 100px;
    }

    .property-title {
        font-size: 0.78rem;
    }

    .property-info {
        /* Mobile (smaller breakpoint): ZERO padding around the
           address block — see note in the first mobile @media block. */
        padding: 0 !important;
    }

    .property-metrics {
        font-size: 0.68rem;
    }

    .price-tag {
        font-size: 0.68rem;
        padding: 0.12rem 0.3rem;
    }

    .mobile-view-toggle {
        bottom: 0.8rem;
    }

    .mvt-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 4px;
    }

    .mvt-btn span {
        display: none;
    }

    .mvt-btn i {
        font-size: 1rem;
    }

    .form-page .form-wrapper {
        padding: 1rem;
    }

    input,
    select,
    textarea {
        padding: 0.6rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   PROPERTY CARD
   ============================================ */
.property-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-card);
    /* `position: relative` so the ::before tap-shimmer overlay can
       be absolutely-positioned over the card without affecting layout. */
    position: relative;
}

.property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .property-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

/* ── Tap-and-hold shiny effect ───────────────────────────────────────
   When the user presses and holds a card on touch (or mouse-down on
   desktop), the outline pulses with the primary colour AND a
   diagonal shimmer sweeps across the card surface. Subtle, polished. */
.property-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255, 255, 255, 0.22) 48%,
        rgba(255, 255, 255, 0.40) 50%,
        rgba(255, 255, 255, 0.22) 52%,
        transparent 62%
    );
    background-size: 250% 100%;
    background-position: -100% 0;
    transition: opacity 0.18s ease;
}
.property-card:active {
    /* Glowing outline that breathes while held. */
    animation: card-tap-glow 1.6s ease-in-out infinite;
}
.property-card:active::before {
    opacity: 1;
    animation: card-tap-shimmer 1.4s ease-in-out infinite;
}
@keyframes card-tap-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1.5px rgba(79, 70, 229, 0.40),
            0 6px 18px rgba(79, 70, 229, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 1.5px rgba(79, 70, 229, 0.75),
            0 10px 28px rgba(79, 70, 229, 0.30);
    }
}
@keyframes card-tap-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  200% 0; }
}
[data-theme="dark"] .property-card:active::before {
    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255, 255, 255, 0.10) 48%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.10) 52%,
        transparent 62%
    );
}

.img-container {
    position: relative;
    overflow: hidden;
    height: 180px;
}

/* Inline Card Slider (Modern Scroll-Snap + Drag Support) */
.card-slider-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y; /* pan-x scrolls images, pan-y lets vertical scroll pass to parent */
    cursor: grab;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card-slider-wrapper:active {
    cursor: grabbing;
}

.card-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.card-slider-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card-slider-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    flex: 0 0 100%;
    /* Ensure each image takes full width */
    scroll-snap-align: start;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Slider Nav Arrows */
.card-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s;
    z-index: 10;
}

.img-container:hover .card-slider-nav,
.card-slider-nav:focus {
    opacity: 1;
}

.card-slider-nav:hover {
    transform: translateY(-50%) scale(1.1);
}

.card-slider-prev {
    left: 8px;
}

.card-slider-next {
    right: 8px;
}

/* Dot Indicators */
.card-slider-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 10;
}

.card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.3s;
}

.card-dot.active {
    background: white;
    transform: scale(1.2);
}

.price-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--primary);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.type-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(15, 23, 42, 0.8);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.mode-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.property-info {
    /* Address-only block now (title h3 commented out, stats row hidden).
       Tight padding on top and bottom — the address row sits just below
       the image and just above the card edge. Side padding preserved
       so the text doesn't touch the card edges horizontally. */
    padding: 0.35rem 1rem 0.35rem;
}

.property-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-location {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: flex;
    /* Single-line address now — align icon to text vertically center. */
    align-items: center;
    gap: 0.4rem;
    /* No gap under the address — card ends right below this row. */
    margin-bottom: 0;
}
.property-location > i {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1;
}

/* Single-line address row (title + address joined). On mobile, if the
   text is too wide for the card it gets a horizontal marquee animation
   triggered by setupAddressMarquee() in script.js. */
.property-address-line {
    color: inherit;
    font: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
}
.property-address-line .address-text {
    display: inline-block;
    will-change: transform;
}

/* Marquee animation — only active when .is-marquee is on. CSS custom
   property --marquee-duration (seconds) is set inline by
   setupAddressMarquee() based on the width of ONE text copy and a
   constant px/sec speed, so every card scrolls at the same rate.

   The .address-text span contains TWO copies of the text side-by-side.
   We animate translateX from 0 to -50% of the .address-text width —
   which equals one copy's width — so when the loop restarts, the
   second copy is exactly where the first copy started. Seamless. */
.address-text-copy {
    display: inline-block;
    padding-right: 2.4rem;    /* visual gap between the two copies */
}

@media (max-width: 992px) {
    .property-address-line.is-marquee .address-text {
        animation: prop-marquee var(--marquee-duration, 6s) linear infinite;
    }
    @keyframes prop-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
}

.property-metrics {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-glass);
    padding-top: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.property-metrics span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ============================================
   MAP
   ============================================ */
.map-section {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--border-glass);
}

#map {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    z-index: 1;
}

/* Draw toolbar */
#draw-toolbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    gap: 6px;
    align-items: center;
    pointer-events: all;
}

#draw-toolbar button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#draw-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-glass) !important;
    /* Skinny enough that the idle Draw Area pill + the radius pill on
       its left both clear Leaflet's zoom controls (~38px) even on a
       320px phone. Longer drawing-state labels (e.g. "Undo Last Point")
       still stretch the button past this min-width when needed — the
       radius pill is hidden while drawing (see the :has() rule in the
       mobile @media block below) so they can't collide. */
    min-width: 100px;
    padding: 0 0.7rem;
    /* Same explicit box as .radius-fab so the two buttons line up
       perfectly at the same top edge AND bottom edge. */
    box-sizing: border-box;
    height: 32px;
    line-height: 1;
    justify-content: center;
}

#draw-btn:hover, #draw-btn.draw-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* Delete-last-point state — red (matches Clear button) */
#draw-btn.draw-delete-mode {
    background: rgba(239,68,68,0.12) !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.3) !important;
}
#draw-btn.draw-delete-mode:hover {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}

/* Close shape button — primary blue (matches Click to draw / draw-active) */
#draw-close-btn {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary) !important;
    animation: draw-btn-pop 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
#draw-close-btn:hover {
    background: var(--primary-dark, var(--primary)) !important;
    opacity: 0.88;
}

/* Custom PNG icon for the "Complete Shape" button.
   Same mask-image trick as .radius-fab-icon — the silhouette PNG is
   painted in currentColor so it inherits the button's white text
   colour automatically. Sized to match the original 0.8rem FA
   "check" glyph it replaces. */
.draw-close-icon {
    -webkit-mask: url('assets/compeleteshape.png') center / contain no-repeat;
            mask: url('assets/compeleteshape.png') center / contain no-repeat;
    background: currentColor;
    width: 1.9em;
    height: 1.1em;
    display: inline-block;
    vertical-align: -1px;     /* slight optical alignment with text baseline */
    line-height: 1;
}
.draw-close-icon::before { content: none; }

@keyframes draw-btn-pop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

#draw-clear-btn {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3) !important;
}

#draw-clear-btn:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

/* ═══ Draw Onboarding Overlay ═══ */
#draw-onboard {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 25, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: drawOnboardFade 0.25s ease;
}
#draw-onboard.show { display: flex; }

@keyframes drawOnboardFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.draw-onboard-card {
    position: relative;
    width: min(92%, 400px);
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 1.5rem 1.4rem 1.3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    animation: drawOnboardPop 0.3s cubic-bezier(.2,1.2,.4,1);
}

@keyframes drawOnboardPop {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.draw-onboard-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
}
.draw-onboard-close:hover { background: var(--bg-main); color: var(--text-primary); }

.draw-onboard-card h3 {
    margin: 0 0 0.3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}
.draw-onboard-sub {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.draw-onboard-demo {
    background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(14,165,233,0.02));
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 0.6rem;
    margin-bottom: 0.9rem;
}
.draw-onboard-demo svg,
.draw-onboard-demo img,
.draw-onboard-demo video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.do-dots circle { fill: var(--text-secondary); opacity: 0.5; }
.do-dots circle:nth-child(1),
.do-dots circle:nth-child(2),
.do-dots circle:nth-child(3),
.do-dots circle:nth-child(5),
.do-dots circle:nth-child(6) {
    animation: doHighlight 4s ease-in-out infinite;
    animation-delay: 2.8s;
}
@keyframes doHighlight {
    0%, 50% { fill: var(--text-secondary); opacity: 0.5; r: 4; }
    60%, 100% { fill: #0ea5e9; opacity: 1; }
}

.do-poly {
    fill: rgba(14,165,233,0.12);
    stroke: #0ea5e9;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    stroke-dashoffset: 600;
    animation: doDraw 4s ease-in-out infinite;
}
@keyframes doDraw {
    0% { stroke-dashoffset: 600; fill-opacity: 0; }
    50% { stroke-dashoffset: 0; fill-opacity: 0; }
    60%, 100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

.do-cursor-dot {
    fill: #fff;
    stroke: #0ea5e9;
    stroke-width: 2;
    animation: doCursor 4s ease-in-out infinite;
}
@keyframes doCursor {
    0%   { transform: translate(70px, 55px); }
    20%  { transform: translate(155px, 45px); }
    35%  { transform: translate(190px, 100px); }
    50%  { transform: translate(110px, 115px); }
    60%  { transform: translate(70px, 55px); }
    100% { transform: translate(70px, 55px); }
}

.draw-onboard-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.draw-onboard-steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.draw-onboard-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(14,165,233,0.15);
    color: #0ea5e9;
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.draw-onboard-steps li b { color: #0ea5e9; font-weight: 600; }

.draw-onboard-got {
    width: 100%;
    padding: 0.7rem;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.draw-onboard-got:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Strip Leaflet's default white square from divIcon wrapper */
.custom-price-marker-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Permanent Price Markers */
.price-marker-label {
    background: var(--bg-card);
    border: 2px solid var(--primary);
    color: var(--text-primary);
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    text-align: center;
    white-space: nowrap;
    opacity: 0.65;
    /* Added transparency */
    transition: opacity 0.2s ease;
}

.price-marker-label:hover {
    opacity: 1;
}

.price-marker-label::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
}

/* Leaflet Popups */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-card) !important;
}
.leaflet-popup-content {
    overflow: visible !important;
    max-height: none !important;
}
.leaflet-popup-content img {
    display: block !important;
    width: 100% !important;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════
   MAP MARKER POPUP — multi-image slider with arrow nav + dots
   Used by the property-pin popups (see script.js fetchListings).
   Works identically on desktop and mobile; mobile also supports
   horizontal swipe via touchstart/touchend handlers in the JS.
   ════════════════════════════════════════════════════════════════ */
.map-popup { width: 100%; }

.map-popup-imgs {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: var(--bg-main);
    user-select: none;
    -webkit-user-select: none;
}
.map-popup-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
.map-popup-img.show { opacity: 1; pointer-events: auto; }

/* Left / right arrow buttons — fade in on hover (desktop) and are
   always visible on touch devices (where there's no hover). */
.map-popup-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 3;
    opacity: 0;                                /* fade-in on parent hover */
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.1s ease;
    padding: 0;
}
.map-popup-imgs:hover .map-popup-nav { opacity: 1; }
.map-popup-nav:hover { background: rgba(0, 0, 0, 0.78); }
.map-popup-nav:active { transform: translateY(-50%) scale(0.92); }
.map-popup-prev { left: 6px; }
.map-popup-next { right: 6px; }

/* On touch devices (no hover), always show the arrows. */
@media (hover: none), (pointer: coarse) {
    .map-popup-nav { opacity: 0.85; }
    .map-popup-nav:active { opacity: 1; }
}

/* Dot indicators along the bottom of the image */
.map-popup-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 3;
    pointer-events: auto;
}
.map-popup-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.map-popup-dot.active {
    background: #fff;
    transform: scale(1.25);
}

/* Counter chip "1/5" at top-right */
.map-popup-counter {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
    letter-spacing: 0.02em;
}

/* Body (clickable area that navigates to the property page) */
.map-popup-body {
    cursor: pointer;
}
.map-popup-body h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}
.map-popup-body p {
    margin: 0.15rem 0 0;
    color: var(--primary);
    font-weight: 700;
}
.map-popup-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.map-popup-cta {
    margin-top: 0.5rem;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================
   HELPER / FORM PAGES
   ============================================ */
.page-container {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex: 1;
    width: 100%;
}

.form-page .form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 2rem;
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    box-shadow: var(--shadow-card);
}

.listing-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

input,
select,
textarea {
    background: var(--bg-main);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: var(--transition);
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Dashboard Table */
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    color: var(--text-primary);
}

.dashboard-table th,
.dashboard-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-glass);
    font-size: 0.9rem;
}

.dashboard-table th {
    background: var(--bg-main);
}
/* ============================================
   REELS — TikTok-style swipeable video viewer (MOBILE ONLY)
   ============================================ */
.reels-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 4000;
}
.reels-overlay.is-open { display: block; }
.reels-overlay[aria-hidden="false"] { display: block; }

.reels-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: env(safe-area-inset-top, 0) .85rem 0;
    height: calc(64px + env(safe-area-inset-top, 0));
    background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
    color: #fff;
    pointer-events: none;
}
.reels-topbar .reels-logo,
.reels-topbar .reels-logo .t-logo-top,
.reels-topbar .reels-logo .t-logo-bot {
    color: #fff !important;
}
.reels-topbar .reels-logo .t-logo-icon {
    color: var(--primary, #0ea5e9) !important;
}
.reels-topbar > * { pointer-events: auto; }
.reels-topbar .reels-logo {
    flex: 0 0 auto;
    order: 0 !important;           /* override terminal.css mobile rule that forces order:1 */
    margin-right: auto;            /* keep logo hard-left, pushes the rest right */
}
.reels-topbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    order: 2;
    pointer-events: auto;
}
.reels-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .9;
}
.reels-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: .9rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reels-feed {
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}
.reels-feed::-webkit-scrollbar { display: none; }

.reels-loading {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}

.reel-slide {
    position: relative;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    overflow: hidden;
}
.reel-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.reel-slide .reel-tap {
    position: absolute;
    inset: 0;
    z-index: 5;
}
.reel-slide .reel-play-icon {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    font-size: 4rem;
    z-index: 6;
    pointer-events: none;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.reel-slide.is-paused .reel-play-icon { display: flex; }

.reel-info {
    position: absolute;
    left: 1rem;
    right: 4.5rem;
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0));
    color: #fff;
    z-index: 7;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.reel-info h3 {
    margin: 0 0 .3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}
.reel-info .reel-meta {
    font-size: .82rem;
    opacity: .92;
    margin-bottom: .35rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.reel-info .reel-price {
    background: var(--primary, #0ea5e9);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}
.reel-info .reel-caption {
    font-size: .85rem;
    line-height: 1.35;
    opacity: .95;
    max-height: 4.5em;
    overflow: hidden;
}

.reel-actions {
    position: absolute;
    right: .7rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.reel-actions button {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.reel-actions button.liked { color: #ff3b6e; }

.reel-progress {
    position: absolute;
    top: calc(56px + env(safe-area-inset-top, 0) + 2px);
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: rgba(255,255,255,.25);
    border-radius: 2px;
    z-index: 8;
    overflow: hidden;
}
.reel-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    transition: width .15s linear;
}

/* Hide reels button on desktop (toggle pill itself is hidden >992px) */
@media (min-width: 993px) {
    .mvt-reels { display: none !important; }
}
.mvt-reels { display: inline-flex; align-items: center; }
body.reels-open { overflow: hidden; }
body.reels-open .mobile-view-toggle { display: none !important; }

/* ----- Reels: listing card (left) + mini map (right) panel ----- */
.reel-listing-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 9;            /* above .reel-tap (z 5) so taps land on the cards */
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    height: 30vh;
    max-height: 240px;
    min-height: 150px;
    pointer-events: auto;
}
.reel-listing-panel .reel-mini-card,
.reel-listing-panel .reel-mini-map {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    background: rgba(20,20,20,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
.reel-listing-panel .reel-mini-map {
    border-left: 1px solid rgba(255,255,255,.15);
}
.reel-mini-card-img {
    position: relative;
    background: #222 center/cover no-repeat;
    flex: 1 1 auto;
    min-height: 100px;
}
.reel-mini-mode {
    position: absolute;
    top: .4rem; left: .4rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.55);
}
.reel-mini-mode.pc-mode-rent { background: #16a34a; }
.reel-mini-mode.pc-mode-buy  { background: #2563eb; }
.reel-mini-price {
    position: absolute;
    bottom: .4rem; left: .4rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 800;
    color: #fff;
    background: rgba(14,165,233,.95);
}
.reel-mini-price small { font-size: .65rem; font-weight: 600; opacity: .9; }
.reel-mini-body {
    padding: .35rem .55rem .4rem;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .12rem;
    justify-content: center;
    background: rgba(0,0,0,.78);
}
.reel-mini-body h4 {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reel-mini-addr-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.reel-mini-addr {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .68rem;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reel-mini-addr i { margin-right: 3px; }
.reel-mini-stats {
    flex: 0 0 auto;
    display: flex;
    gap: .5rem;
    font-size: .7rem;
    opacity: .92;
    white-space: nowrap;
}
.reel-mini-map {
    position: relative;
}
.reel-mini-map-canvas {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background: #1f2937;
}
.reel-mini-map-canvas .leaflet-control-attribution,
.reel-mini-map-canvas .leaflet-control-container { display: none !important; }
.reel-mini-map-cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem .4rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}
.reel-mini-map-cta i { margin-right: 4px; }

/* When a listing panel is present, push the right-side action rail above it */
.reel-slide:has(.reel-listing-panel) .reel-actions {
    bottom: calc(30vh + .8rem + env(safe-area-inset-bottom, 0));
}
.reel-slide:has(.reel-listing-panel) .reel-info { display: none; }

/* ═══════════════════════════════════════════════════════════════
   RADIUS SEARCH — Floating FAB + Pin Picker + Panel
   ═══════════════════════════════════════════════════════════════ */

/* Floating Action Button (bottom-right of map) */
.radius-fab {
    position: absolute;
    right: 16px;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    height: 54px;
    min-width: 54px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.25s ease,
                padding 0.25s ease,
                min-width 0.25s ease;
    overflow: visible;
    padding-left: 18px;
    padding-right: 20px;
    will-change: transform;
}
.radius-fab-icon {
    font-size: 1.15rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Custom PNG icon for the IDLE radius state (no Font Awesome class).
   The icon is a black-silhouette PNG; mask-image lets us paint it in
   currentColor so it picks up white inside the desktop blue FAB and
   var(--primary) inside the subtle mobile pill — both without
   shipping two versions of the file. When the state flips to "Clear"
   the icon gets FA classes added (fa-solid fa-xmark) and this rule
   no longer matches, so the FA glyph renders normally. */
.radius-fab-icon:not([class*="fa-"]) {
    -webkit-mask: url('assets/radius.png') center / contain no-repeat;
            mask: url('assets/radius.png') center / contain no-repeat;
    background: currentColor;
    width: 1.55em;
    height: 2.15em;
    display: inline-block;
    /* Empty pseudo-element protection — FA uses ::before for glyphs,
       but our PNG renders via background, so suppress any inherited
       ::before content. */
    line-height: 1;
}
.radius-fab-icon:not([class*="fa-"])::before { content: none; }
.radius-fab-label {
    position: relative;
    z-index: 2;
    letter-spacing: 0.3px;
}
.radius-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 36px rgba(14, 165, 233, 0.55), 0 4px 10px rgba(0,0,0,0.18);
    background: #FFF;
}
.radius-fab:hover .radius-fab-icon { transform: rotate(-12deg) scale(1.1); }
.radius-fab:active { transform: translateY(0) scale(0.97); }

.radius-fab-active {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.7), 0 0 0 4px rgba(14, 165, 233, 0.22);
}
/* "Applied" state — same brand blue (no green), with a small floating
   checkmark badge in the corner instead of replacing the bullseye icon. */
.radius-fab-applied {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.55), 0 2px 6px rgba(0,0,0,0.15);
}
.radius-fab-applied::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: #0284c7;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    animation: radius-fab-applied-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes radius-fab-applied-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Pulse rings (continuous, attention-grabbing but subtle) */
.radius-fab-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.55);
    z-index: 1;
    pointer-events: none;
    animation: radiusFabPulse 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.radius-fab-pulse-2 { animation-delay: 1.2s; }
.radius-fab-active .radius-fab-pulse,
.radius-fab-applied .radius-fab-pulse { animation: none; opacity: 0; }

@keyframes radiusFabPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* When picking, map gets a soft tinted overlay + crosshair cursor */
#map.radius-picking { cursor: crosshair !important; }
#map.radius-picking .leaflet-interactive { cursor: crosshair !important; }

/* ── Radius Panel ── */
.radius-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 260px;
    max-width: calc(100vw - 24px);
    z-index: 1150;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 10px 12px 11px;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-theme="dark"] .radius-panel {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.radius-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.radius-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.radius-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.radius-panel-title h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
}
.radius-panel-sub {
    margin: 1px 0 0;
    font-size: 0.68rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.2;
}
.radius-panel-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(14,165,233,0.22), rgba(14,165,233,0.08));
    color: #0ea5e9;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.radius-panel-close {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
[data-theme="dark"] .radius-panel-close { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.radius-panel-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* ── Input row ── */
.radius-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 9px;
    padding: 2px 2px 2px 9px;
    margin-bottom: 8px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
[data-theme="dark"] .radius-input-wrap { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.radius-input-wrap:focus-within {
    border-color: rgba(14,165,233,0.6);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
    background: rgba(255, 255, 255, 0.7);
}
.radius-input-icon { color: var(--text-secondary, #64748b); font-size: 0.78rem; margin-right: 6px; }
.radius-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--text-primary);
    padding: 6px 0;
    min-width: 0;
}
.radius-input::placeholder { color: var(--text-secondary, #94a3b8); }

.radius-locate-btn {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.72rem;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 6px rgba(14,165,233,0.35);
}
.radius-locate-btn:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(14,165,233,0.5); }
.radius-locate-btn.radius-locate-loading i { animation: radiusSpin 0.8s linear infinite; }
@keyframes radiusSpin { to { transform: rotate(360deg); } }

/* Suggestions dropdown */
.radius-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
    overflow: hidden;
    z-index: 5;
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.radius-suggest.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.radius-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.radius-suggest-item:last-child { border-bottom: none; }
.radius-suggest-item:hover { background: rgba(14,165,233,0.08); }
.radius-suggest-item i { color: #0ea5e9; flex-shrink: 0; }
.radius-suggest-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radius-suggest-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
}

/* Hint chip */
.radius-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(14,165,233,0.10);
    border: 1px dashed rgba(14,165,233,0.30);
    color: #0369a1;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 0.68rem;
    margin-bottom: 9px;
    line-height: 1.25;
}
[data-theme="dark"] .radius-hint { color: #7dd3fc; }
.radius-hint i { font-size: 0.7rem; }
.radius-hint-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ea5e9;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(14,165,233,0.6);
    animation: radiusHintBlink 1.6s ease-in-out infinite;
}
.radius-hint-ok {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.35);
    color: #047857;
}
[data-theme="dark"] .radius-hint-ok { color: #6ee7b7; }
.radius-hint-ok .radius-hint-dot { background: #10b981; animation: none; }
@keyframes radiusHintBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(14,165,233,0); }
}

/* Slider */
.radius-slider-wrap { margin-bottom: 9px; }
.radius-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.radius-slider-row label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}
.radius-value-chip {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(14,165,233,0.35);
}

.radius-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #0ea5e9 var(--rs-pct, 8%), rgba(148, 163, 184, 0.35) var(--rs-pct, 8%));
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    padding: 8px 0;            /* invisible vertical hit area */
    background-clip: content-box;
    margin: 0;
}
.radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0ea5e9;
    cursor: grab;
    box-shadow: 0 2px 7px rgba(14,165,233,0.45);
    transition: transform 0.15s ease;
}
.radius-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.radius-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.radius-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0ea5e9;
    cursor: grab;
    box-shadow: 0 2px 7px rgba(14,165,233,0.45);
}
.radius-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.6rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}

/* Result count */
.radius-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,165,233,0.07);
    border: 1px solid rgba(14,165,233,0.15);
    border-radius: 7px;
    padding: 5px 9px;
    margin-bottom: 9px;
}
.radius-result-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-primary);
}
.radius-result-count i { color: #0ea5e9; font-size: 0.72rem; }
#radius-count-num {
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: #0ea5e9;
    font-size: 0.85rem;
    min-width: 16px;
    display: inline-block;
    text-align: right;
}

/* Action buttons */
.radius-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 6px;
}
.radius-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s, background 0.18s;
}
.radius-btn i { font-size: 0.72rem; }
.radius-btn-clear {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.25);
}
.radius-btn-clear:hover {
    background: #ef4444;
    color: #fff;
    transform: translateY(-1px);
}
.radius-btn-apply {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    box-shadow: 0 4px 14px rgba(14,165,233,0.4);
}
.radius-btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(14,165,233,0.55);
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

/* ─── Custom Center Pin (Leaflet DivIcon) ─── */
.radius-pin-wrapper {
    background: transparent !important;
    border: none !important;
    cursor: grab !important;
    /* Critical for mobile touch dragging via Leaflet */
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
    /* Layout the inner pin at the bottom-center of the larger hit-area */
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
}
.radius-pin-wrapper:active,
.leaflet-marker-draggable.leaflet-drag-target { cursor: grabbing !important; }

/* Inner hit-area wrapper does NOT consume pointer events */
.radius-pin-hit {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;          /* let mousedown reach the marker wrapper */
}

/* Smaller pin: 26×34 (was 40×50). Head 22×22 with crisp border, tip at pin (13, 22).

   ╔══════════════════════════════════════════════════════════════════╗
   ║  PULSE POSITION KNOBS — edit these ONCE to shift ALL 3 rings:    ║
   ║    --pulse-x  →  horizontal shift (negative = left, positive = right) ║
   ║    --pulse-y  →  vertical shift   (negative = up,   positive = down)  ║
   ║  In DevTools: click .radius-pin → Styles panel → arrow-up/down on ║
   ║  the value next to --pulse-x. All three rings move together.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.radius-pin {
    --pulse-x: 0px;
    --pulse-y: 0px;
    position: relative;
    width: 26px;
    height: 34px;
    animation: radiusPinDrop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    pointer-events: none;          /* delegate to .radius-pin-wrapper */
}
.radius-pin-dropping { animation: radiusPinDrop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.radius-pin-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    rotate: -45deg;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 10px rgba(14,165,233,0.55),
        0 0 0 0 rgba(14,165,233,0.45);
    border: 2px solid #fff;
    animation: radiusPinGlow 2.4s ease-in-out infinite;
    z-index: 2;
}
.radius-pin-head i {
    rotate: 45deg;
    color: #fff;
    font-size: 0.7rem;
}

/* Sonar pulse — three INDEPENDENT concentric rings emanating from the pin's tip.
   Each ring (.radius-pin-ring-1/-2/-3) has its own top/left so you can nudge
   them separately in DevTools without one move affecting the others.
   Shared block below = look + animation; per-ring blocks = position + delay. */
.radius-pin-ring {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 22px;
    /* centring + global shift via --pulse-x / --pulse-y on the parent .radius-pin */
    margin-left: calc(-11px + var(--pulse-x, 0px));
    margin-top:  calc(-11px + var(--pulse-y, 0px));
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid rgba(14,165,233,0.75);
    background: radial-gradient(circle, rgba(14,165,233,0.22) 0%, rgba(14,165,233,0) 70%);
    transform-origin: 50% 50%;
    transform: scale(1);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: radiusPinRing 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}

/* === Per-ring vertical anchor + stagger.
   `top` here is just each ring's individual baseline. The single horizontal
   knob lives on .radius-pin as --pulse-x, so moving the whole pulse left or
   right is a one-value edit in DevTools (no need to touch all three). === */
.radius-pin-ring-1 { top: 14px; animation-delay: 0s;   }
.radius-pin-ring-2 { top: 21px; animation-delay: 0.8s; }
.radius-pin-ring-3 { top: 24px; animation-delay: 1.6s; }

.radius-pin-shadow {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 14px;
    height: 4px;
    background: rgba(0,0,0,0.28);
    border-radius: 50%;
    filter: blur(2px);
    transform: translateX(-50%);
    animation: radiusPinShadow 2.4s ease-in-out infinite;
}
@keyframes radiusPinDrop {
    0%   { transform: translateY(-40px) scale(0.6); opacity: 0; }
    60%  { transform: translateY(4px)   scale(1.05); opacity: 1; }
    80%  { transform: translateY(-2px)  scale(1);    }
    100% { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes radiusPinRing {
    0%   { transform: scale(0.85); opacity: 0;    border-width: 2.5px; }
    15%  {                          opacity: 0.85;                     }
    100% { transform: scale(3.2);  opacity: 0;    border-width: 0.5px; }
}
@keyframes radiusPinShadow {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.32; filter: blur(2.5px); }
    50%      { transform: translateX(-50%) scale(0.78); opacity: 0.55; filter: blur(1.5px); }
}
/* Subtle steady glow on the pin head, in sync with the ring cadence */
@keyframes radiusPinGlow {
    0%, 100% { box-shadow: 0 6px 14px rgba(14,165,233,0.55), 0 0 0 0 rgba(14,165,233,0.45); }
    50%      { box-shadow: 0 8px 20px rgba(14,165,233,0.70), 0 0 0 6px rgba(14,165,233,0.0);  }
}

/* Pause the pulse while the user is actively dragging the pin */
.leaflet-drag-target .radius-pin-ring,
.leaflet-drag-target .radius-pin-shadow,
.leaflet-drag-target .radius-pin-head { animation-play-state: paused; }

/* Radius circle SVG anim */
.radius-circle-anim {
    animation: radiusCircleReveal 0.55s ease-out both;
}
@keyframes radiusCircleReveal {
    0%   { stroke-dashoffset: 600; opacity: 0; }
    100% { stroke-dashoffset: 0;   opacity: 1; }
}

/* ─── Mobile: panel becomes a compact bottom sheet ─── */
@media (max-width: 992px) {
    /* The radius button is a STATIC small pill, styled to MATCH the
       Draw Area button exactly (same font, gap, line-height, glass
       background, border, border-radius, shadow) — just shorter in
       width because its text is "Radius" instead of "Draw Area".
       Absolute-positioned at top: 12px (same as #draw-toolbar) and
       left: 42px (~4px clear of Leaflet's zoom controls which end at
       ~38px). Both buttons span identical vertical extents (12..44). */
    .radius-fab {
        position: absolute;
        top: 12px;
        left: 55px;
        right: auto;
        bottom: auto;
        box-sizing: border-box;
        height: 32px;
        width: auto;
        /* min-width 80px keeps the pill the same width when the label
           swaps between "Radius" (idle) and "Clear" (active), so the
           JS-calculated midpoint stays accurate. */
        min-width: 80px;
        /* Match Draw's font + gap + line-height for visual consistency. */
        padding: 0 0.6rem;
        font-size: 0.8rem;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        line-height: 1;
        gap: 1px;
        /* Match Draw's surface treatment. */
        background: var(--bg-card);
        color: var(--text-primary);
        border: 1px solid var(--border-glass);
        border-radius: 40px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        z-index: 1100;
        transition: background 0.18s ease, color 0.18s ease,
                    border-color 0.18s ease, transform 0.1s ease;
    }

    /* Show both icon and label. Icon inherits parent font-size (0.8rem
       on mobile to match #draw-btn). JS (setFabState) swaps the icon
       class between fa-bullseye (idle) and fa-xmark (active/Clear). */
    .radius-fab-label {
        display: inline !important;
        font-weight: 600;
        letter-spacing: 0;
    }
    .radius-fab-icon {
        display: inline-flex !important;
        font-size: inherit;            /* same as the label text */
        opacity: 0.92;
    }
    .radius-fab-pulse { display: none !important; }

    /* Active / applied state — primary blue fill, matching Draw Area
       button's :hover/.draw-active treatment. */
    .radius-fab.radius-fab-active,
    .radius-fab.radius-fab-applied {
        background: var(--primary) !important;
        color: #fff !important;
        border-color: var(--primary) !important;
    }
    .radius-fab:active { transform: scale(0.96); }
    /* Suppress the applied checkmark badge (was sized for the round
       desktop FAB; looks misplaced on the small pill). */
    .radius-fab-applied::after { display: none !important; }

    /* Hide the radius pill in two states:
       1) Actively drawing — Draw Area can grow to "Undo Last Point"
          (~121px) and would overlap the radius pill.
       2) Polygon drawn (body.has-polygon set in script.js CREATED
          handler) — the toolbar now also shows the red Clear button,
          and the polygon filter is in effect; hiding radius keeps
          the toolbar uncluttered and avoids two competing filter UIs.
       The pill reappears once the polygon is cleared. */
    #map-section:has(#draw-btn.draw-active) .radius-fab,
    body.has-polygon .radius-fab {
        display: none !important;
    }

    /* Popup search panel is DISABLED on mobile for now — the FAB acts purely
       as a toggle for the ruler + pin. To re-enable: remove this rule. */
    .radius-panel,
    .radius-panel.open { display: none !important; }

    /* (Below styles kept for when the panel is re-enabled — they're inert
       while the rule above hides the panel.) */
    .radius-panel {
        position: fixed;
        top: calc(var(--header-h, 60px) + 6px);
        left: 12px;
        right: 12px;
        bottom: auto;
        width: auto;
        max-width: none;
        border-radius: 14px;
        padding: 6px 8px;
        transform: translateY(-14px) scale(0.86);
        transform-origin: 50% -10px;       /* origin sits above the panel — feels like it grows from header */
        opacity: 0;
        pointer-events: none;
        transition:
            transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.26s ease;
        /* HIGHLY transparent — barely-there frosted glass, map still readable through it */
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    [data-theme="dark"] .radius-panel {
        background: rgba(15, 23, 42, 0.18) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .radius-panel.open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
        z-index: 1600;
    }
    /* Subtle bounce on the FAB icon when the panel opens — small flourish */
    .radius-fab-active .radius-fab-icon {
        animation: radius-fab-active-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes radius-fab-active-pop {
        0%   { transform: scale(1) rotate(0); }
        45%  { transform: scale(1.18) rotate(-12deg); }
        100% { transform: scale(1) rotate(0); }
    }
    .radius-panel::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(148,163,184,0.45);
        border-radius: 999px;
        margin: -2px auto 8px;
    }
    .radius-suggest { max-height: 170px; }

    /* Hide the panel sub-text on mobile to save space */
    .radius-panel-sub { display: none; }

    /* ─── Mobile: SEARCH-ONLY mini panel ─────────────────────────────
       The radius ruler already lives outside the panel, so on mobile the
       panel only needs to be a tiny search box. Hide everything else
       (slider / hint / count / actions / header text) and shrink the
       panel to wrap the input tightly. The hidden elements still exist
       so the JS that reads .value / .checked etc. keeps working. */
    .radius-panel {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0));
        max-height: none;
        overflow: visible;
    }
    .radius-panel::before { display: none; }              /* drag handle */
    .radius-panel-head,                                    /* "Search by radius" header */
    .radius-hint,                                          /* "Click map / drag pin" hint */
    .radius-slider-wrap,                                   /* in-panel range slider */
    .radius-result-row,                                    /* "0 properties within range" */
    .radius-actions { display: none !important; }          /* Clear / Show results buttons */

    /* Highly transparent search input. Input itself has no fill — only the
       parent panel's blur shows through. Focus ring appears on the input. */
    .radius-input-wrap {
        margin: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        position: relative;
        display: block !important;   /* override desktop flex; we use absolute kids */
    }
    .radius-input {
        display: block;
        width: 100%;
        height: 38px;
        padding: 0 76px 0 36px;       /* left icon + right (clear ×) + locate */
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        border-radius: 10px;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        color: var(--text-primary, #0f172a);
        box-shadow: none !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .radius-input::placeholder {
        color: rgba(15, 23, 42, 0.55);
        font-weight: 400;
    }
    .radius-input:focus {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(14, 165, 233, 0.55) !important;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
        outline: none;
    }
    [data-theme="dark"] .radius-input {
        color: var(--text-primary, #f1f5f9);
        border-color: rgba(255, 255, 255, 0.18) !important;
    }
    [data-theme="dark"] .radius-input::placeholder { color: rgba(241, 245, 249, 0.5); }
    [data-theme="dark"] .radius-input:focus { background: rgba(15, 23, 42, 0.25) !important; }

    .radius-input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        font-size: 0.9rem;
        color: rgba(15, 23, 42, 0.7);
        pointer-events: none;
        z-index: 2;
    }
    [data-theme="dark"] .radius-input-icon { color: rgba(241, 245, 249, 0.75); }

    /* Clear (×) button — same brand blue, appears only when input has text */
    .radius-input-clear {
        position: absolute;
        right: 40px;                   /* sits left of the locate button */
        top: 50%;
        transform: translateY(-50%) scale(0);
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #0ea5e9, #0284c7);
        color: #fff;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 2px 6px rgba(14,165,233,0.4);
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
    }
    .radius-input-clear.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }
    .radius-input-clear:hover {
        transform: translateY(-50%) scale(1.12);
        box-shadow: 0 3px 10px rgba(14,165,233,0.55);
    }
    .radius-input-clear:active { transform: translateY(-50%) scale(0.92); }

    /* Locate button — blue, absolute positioned on the right edge */
    .radius-locate-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 0.78rem;
        background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
        box-shadow: 0 2px 6px rgba(14,165,233,0.4) !important;
        z-index: 2;
    }
    .radius-locate-btn:hover {
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 4px 12px rgba(14,165,233,0.55) !important;
    }
    .radius-locate-btn:active {
        transform: translateY(-50%) scale(0.92);
    }

    /* ─── While the radius search is active, hide the zoom +/- only.
       The draw toolbar stays put so the radius pill can sit (squished)
       on the LEFT of the Draw Area button. ─── */
    body.radius-search-active .leaflet-control-zoom {
        opacity: 0;
        transform: translateX(-12px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* Default state (panel closed): smooth fade-back-in */
    .leaflet-control-zoom {
        transition: opacity 0.28s ease 0.05s, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) 0.05s;
    }

    /* Pulse hint on the header search pill to make it feel like the source */
    body.radius-search-active #t-nav-pill {
        animation: header-pill-source-pulse 0.6s ease;
    }
    @keyframes header-pill-source-pulse {
        0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14,165,233,0.45); }
        50%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(14,165,233,0); }
        100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14,165,233,0); }
    }
}

/* Land/Reels overlay must outrank the panel on mobile when active */
.reels-overlay.show ~ .radius-panel,
body.reels-active .radius-panel { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE RADIUS RULER — horizontal ruler / tick-mark slider.
   Mobile only. Floats over the map. In split mode it sits ABOVE
   the split grabber and rides up/down with the sheet.
   ════════════════════════════════════════════════════════════════ */
.mobile-ruler { display: none; }

@media (max-width: 992px) {
    /* Ruler + radius pin + circle are GATED behind the radius FAB:
       they only appear after tapping the bullseye FAB, and disappear when
       it's tapped again. Outside that state the map stays uncluttered. */
    .mobile-ruler { display: none !important; }
    body.radius-search-active.mobile-map-only .mobile-ruler,
    body.radius-search-active .main-container.split-mode .mobile-ruler {
        display: flex !important;
    }
    /* In list-view (no map visible) keep the ruler hidden regardless */
    body.radius-search-active:not(.mobile-map-only) .main-container:not(.split-mode) .mobile-ruler {
        display: none !important;
    }
    /* Hide on land/reels overlay */
    body.reels-active .mobile-ruler { display: none !important; }

    /* Pin marker + radius circle on the map — only visible when active */
    body:not(.radius-search-active) .radius-pin-wrapper,
    body:not(.radius-search-active) path.radius-circle-svg,
    body:not(.radius-search-active) .leaflet-overlay-pane path.radius-circle-svg {
        display: none !important;
    }
    /* Fade-in when the FAB activates → the pin/ruler don't pop in jarringly */
    body.radius-search-active .radius-pin-wrapper,
    body.radius-search-active path.radius-circle-svg {
        animation: radius-things-fade-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }
    body.radius-search-active .mobile-ruler {
        animation: radius-ruler-fade-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes radius-things-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes radius-ruler-fade-in {
        0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
        100% { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);    }
    }

    /* While the user is typing in the radius search, hide the bottom 4-button
       view pill so the keyboard + suggestions get the screen. */
    body.is-searching .mobile-view-toggle { display: none !important; }

    .mobile-ruler {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        /* Default: full-map view → float well above the bottom view-toggle pill
           (pill bottom: 1.2rem, height ~46px). Pushed higher so the ruler sits
           comfortably away from the bottom UI cluster. */
        bottom: calc(1.2rem + 88px);
        flex-direction: column;
        align-items: center;
        gap: 1px;
        z-index: 1050;     /* above map controls, below toggle pill (1100) */
        padding: 2px 6px 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        pointer-events: auto;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
        animation: mobile-ruler-pop 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
    }

    /* In split mode → sit RIGHT ABOVE the 32px split-grabber so the ruler
       reads as "stuck to" the drag handle. Tiny ~4px gap above the grabber
       (32 + 4 = 36) keeps them visually attached as the user drags. */
    .main-container.split-mode .mobile-ruler {
        position: fixed;
        bottom: calc(var(--split-pct, 30) * 1vh + 36px);
        animation: none; /* avoid double-animation when split bar already slides */
        transition: bottom 0.04s linear; /* smooth follow while dragging the split */
    }

    [data-theme="dark"] .mobile-ruler {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    @keyframes mobile-ruler-pop {
        from { opacity: 0; transform: translate(-50%, 6px) scale(0.96); }
        to   { opacity: 1; transform: translate(-50%, 0)   scale(1); }
    }

    /* Readout removed from the visible UI — element kept as a screen-reader
       live region so the existing JS that sets textContent still has a target. */
    .mobile-ruler .sr-only {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0);
        white-space: nowrap; border: 0;
    }

    /* Ruler track — fixed window with the strip sliding inside */
    .mobile-ruler-track {
        position: relative;
        width: 240px;
        height: 34px;
        overflow: hidden;
        cursor: grab;
    }
    .mobile-ruler-track:active { cursor: grabbing; }

    /* The ▼ indicator — sits at the BOTTOM of the track pointing UP at the central tick */
    .mobile-ruler-indicator {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 5px solid var(--text-primary, #111);
        pointer-events: none;
        z-index: 3;
        filter: drop-shadow(0 -1px 1px rgba(255,255,255,0.6));
    }
    [data-theme="dark"] .mobile-ruler-indicator {
        border-bottom-color: var(--text-primary, #fff);
        filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.6));
    }

    /* The sliding strip — labels at the TOP, ticks anchored to the BOTTOM growing UP. */
    .mobile-ruler-strip {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        will-change: transform;
        transform: translateX(0);
    }
    .mobile-ruler.is-dragging .mobile-ruler-strip { transition: none; }

    /* Ticks anchored at the BOTTOM, growing UPWARD — thicker, more visible */
    .mr-tick {
        position: absolute;
        bottom: 0;
        width: 2px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 1px;
    }
    .mr-tick.mr-tick-minor { height: 7px;  background: rgba(0,0,0,0.50); }
    .mr-tick.mr-tick-mid   { height: 11px; background: rgba(0,0,0,0.70); }
    .mr-tick.mr-tick-major { height: 16px; width: 2.5px; background: rgba(0,0,0,0.92); }
    [data-theme="dark"] .mr-tick.mr-tick-minor { background: rgba(255,255,255,0.50); }
    [data-theme="dark"] .mr-tick.mr-tick-mid   { background: rgba(255,255,255,0.70); }
    [data-theme="dark"] .mr-tick.mr-tick-major { background: rgba(255,255,255,0.96); }

    /* Numbers sit ABOVE the ticks (at the top of the strip) */
    .mr-label {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-primary, #111);
        letter-spacing: 0.01em;
        white-space: nowrap;
        pointer-events: none;
        opacity: 1;
        text-shadow:
            0 0 3px rgba(255,255,255,0.9),
            0 1px 1px rgba(255,255,255,0.75);
    }
    [data-theme="dark"] .mr-label {
        color: var(--text-primary, #fff);
        text-shadow:
            0 0 3px rgba(0,0,0,0.85),
            0 1px 1px rgba(0,0,0,0.7);
    }

    /* Soft edge fades so ticks dissolve at the ends — transparent-friendly mask */
    .mobile-ruler-fade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        z-index: 2;
    }
    .mobile-ruler-track {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    }
    /* Fade overlays no longer needed because of the mask — hide them */
    .mobile-ruler-fade { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   SPLIT-GRABBER RENT/BUY TOGGLE
   Lives inside #split-grabber. Uses the EXACT same classes as the
   search-overlay pill (.mode-toggle .t-mode-pill .mode-btn) so it
   inherits identical colours, sizing and active-state shadow. The
   .split-grabber-mode class adds ONLY positioning — no visual
   overrides — so any future restyle of the search pill carries
   through here automatically.
   Visible only on mobile in split mode.
   ════════════════════════════════════════════════════════════════ */
.split-grabber-mode { display: none; }

@media (max-width: 992px) {
    /* Grabber bar gets a touch taller so the search-style pill fits
       comfortably without clipping, and overflow is relaxed so the
       active button's indigo glow shadow isn't cut off. */
    .main-container.split-mode #split-grabber {
        height: 32px;
        overflow: visible;
    }

    /* Inner-element rules below use just `#split-grabber .X` (no
       parent qualifier) so they apply whenever the grabber is shown —
       both in split mode AND in list mode (where the grabber is
       repurposed as a fixed top toolbar). The grabber's visibility
       gating (default display:none, overridden in split-mode +
       body.list-mode) handles when these are seen at all. */
    #split-grabber .split-grabber-mode {
        position: absolute;
        /* Flush against the left edge of the bar — the centred cluster
           (↑ handle ↓) is absolutely independent of this pill, so it
           keeps its original centered position. */
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        /* Keep taps from starting a drag (JS also stops propagation). */
        touch-action: manipulation;
    }

    /* ── More-obvious Rent/Buy toggle (full-list + split views) ──
       Restyled to match the property-card mode badge (.pc-mode-badge):
       Outfit, uppercase, bold, brand-blue #0ea5e9 with white text on the
       active segment — wrapped in a clear blue outline so it stands out
       on the grabber bar. Overrides the inherited grey search pill. */
    #split-grabber .split-grabber-mode.t-mode-pill {
        background: var(--bg-card, #fff) !important;
        /* Subtle, very thin outline — barely there */
        border: 1px solid rgba(14, 165, 233, 0.22) !important;
        border-radius: 50px !important;
        padding: 2.5px !important;
        gap: 2px !important;
        box-shadow: none !important;
    }
    #split-grabber .split-grabber-mode .mode-btn {
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        padding: 0.3rem 0.82rem !important;
        border-radius: 50px !important;
        color: #0ea5e9 !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
    }
    #split-grabber .split-grabber-mode .mode-btn.mode-active {
        background: #0ea5e9 !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.45) !important;
    }

    /* ── Right-side tools (Filters + Sort) ──
       Mirror of the Rent/Buy pill on the left edge, but VERY subtle —
       plain secondary-coloured text, no pill background, no primary
       blue. Just sits there quietly until you tap it. */
    #split-grabber .split-grabber-tools {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        touch-action: manipulation;
    }
    #split-grabber .sgt-btn {
        background: transparent;
        border: none;
        padding: 0 2px;
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--text-secondary);
        opacity: 0.72;
        cursor: pointer;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
        transition: opacity 0.15s ease, color 0.15s ease;
    }
    #split-grabber .sgt-btn:hover,
    #split-grabber .sgt-btn:active,
    #split-grabber .sgt-btn[aria-expanded="true"] {
        opacity: 1;
        color: var(--text-primary);
    }
    #split-grabber .sgt-sort-caret {
        font-size: 0.55rem;
        opacity: 0.7;
        transition: transform 0.15s ease;
    }
    #split-grabber .sgt-sort-btn[aria-expanded="true"] .sgt-sort-caret {
        transform: rotate(180deg);
    }
    /* Thin vertical separator between Filters and Sort. */
    #split-grabber .sgt-sep {
        display: inline-block;
        width: 1px;
        height: 12px;
        background: rgba(0, 0, 0, 0.18);
    }
    [data-theme="dark"] #split-grabber .sgt-sep {
        background: rgba(255, 255, 255, 0.22);
    }

    /* Sort dropdown menu — anchored under the Sort button. */
    #split-grabber .sgt-sort-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        min-width: 160px;
        background: var(--bg-main);
        border: 1px solid var(--border-glass);
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18),
                    0 2px 6px rgba(0, 0, 0, 0.08);
        padding: 4px;
        display: flex;
        flex-direction: column;
        z-index: 5;
        animation: sgt-menu-pop 0.16s cubic-bezier(0.2, 0.85, 0.25, 1);
    }
    @keyframes sgt-menu-pop {
        from { opacity: 0; transform: translateY(-4px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    #split-grabber .sgt-sort-menu[hidden] {
        display: none;
    }
    #split-grabber .sgt-sort-menu button {
        background: transparent;
        border: none;
        text-align: left;
        padding: 0.5rem 0.7rem;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-primary);
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.12s ease;
    }
    #split-grabber .sgt-sort-menu button:hover,
    #split-grabber .sgt-sort-menu button:focus-visible {
        background: rgba(0, 0, 0, 0.06);
        outline: none;
    }
    [data-theme="dark"] #split-grabber .sgt-sort-menu button:hover,
    [data-theme="dark"] #split-grabber .sgt-sort-menu button:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ════════════════════════════════════════════════════════════════
   AI CHAT PILL  +  POPUP
   In list mode, a single subtle pill sits centred in the grabber bar.
   Tapping it opens a compact translucent chat modal — all blue using
   the brand --primary (#0ea5e9). Hard-coded responses for now (UI).
   ════════════════════════════════════════════════════════════════ */

/* ── Shared animations (used by pill + popup) ─────────────────── */
@keyframes ai-icon-tick {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(8deg); }
}
@keyframes ai-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes ai-typing {
    0%, 60%, 100% { transform: scale(0.7); opacity: 0.35; }
    30%           { transform: scale(1.1); opacity: 1;    }
}
@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes ai-welcome-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes ai-suggestion-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ── The trigger pill (list mode only) — very subtle ───────── */
.lme-ai-pill { display: none; }

body.list-mode #split-grabber .lme-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: transparent;
    border: 1px solid rgba(14, 165, 233, 0.30);    /* hint of --primary */
    border-radius: 999px;
    padding: 4px 11px 4px 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    touch-action: manipulation;
    transition: background 0.18s ease,
                border-color 0.18s ease,
                transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.list-mode #split-grabber .lme-ai-pill:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.5);
    transform: translate(-50%, -50%) scale(1.04);
}
body.list-mode #split-grabber .lme-ai-pill:active {
    transform: translate(-50%, -50%) scale(0.96);
}

.lme-ai-icon-wrap {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lme-ai-icon {
    font-size: 0.78rem;
    color: var(--primary);
    animation: ai-icon-tick 3s ease-in-out infinite;
}
/* Glow + shimmer overlays removed for the subtle pill — keep only
   the tiny icon tilt. */
.lme-ai-glow,
.lme-ai-shimmer { display: none; }
.lme-ai-text {
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   AI CHAT POPUP — advanced animated edition (primary blue, glass)
   ═══════════════════════════════════════════════════════════════ */

.ai-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}
.ai-chat-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.18) 0%, rgba(2, 8, 23, 0.55) 60%);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.ai-chat-overlay.is-open { pointer-events: auto; }
.ai-chat-overlay.is-open .ai-chat-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease;
}

/* Roomier panel — bottom-sheet feel on mobile, floating card on desktop */
.ai-chat-panel {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin: 0 auto;
    max-height: 82vh;
    max-height: 82dvh;
    min-height: 0;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 24px;
    box-shadow:
        0 30px 60px -12px rgba(14, 165, 233, 0.18),
        0 18px 48px rgba(2, 8, 23, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    display: flex;
    flex-direction: column;
    transform: translateY(40px) scale(0.92);
    opacity: 0;
    transform-origin: bottom center;
    transition: transform 0.42s cubic-bezier(0.32, 1.4, 0.55, 1),
                opacity 0.28s ease;
    overflow: hidden;
}
[data-theme="dark"] .ai-chat-panel {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(14, 165, 233, 0.28);
    box-shadow:
        0 30px 60px -12px rgba(14, 165, 233, 0.25),
        0 18px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.ai-chat-overlay.is-open .ai-chat-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ai-chat-overlay.is-closing .ai-chat-panel {
    transform: translateY(30px) scale(0.96);
    opacity: 0;
    transition: transform 0.24s ease, opacity 0.2s ease;
}

/* ── Header — gradient blue with animated blobs ─────────────── */
.ai-chat-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 14px 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-bottom: 1px solid rgba(14, 165, 233, 0.18);
    flex-shrink: 0;
    overflow: hidden;
}
.ai-chat-header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ai-chat-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: ai-blob-drift 14s ease-in-out infinite;
}
.ai-chat-blob-1 {
    width: 120px; height: 120px;
    background: radial-gradient(circle, #7dd3fc, transparent 70%);
    top: -30px; left: -20px;
    animation-delay: 0s;
}
.ai-chat-blob-2 {
    width: 100px; height: 100px;
    background: radial-gradient(circle, #38bdf8, transparent 70%);
    bottom: -40px; right: 30%;
    animation-delay: -4s;
}
.ai-chat-blob-3 {
    width: 90px; height: 90px;
    background: radial-gradient(circle, #bae6fd, transparent 70%);
    top: 10px; right: -10px;
    animation-delay: -8s;
}
@keyframes ai-blob-drift {
    0%, 100% { transform: translate(0, 0)   scale(1); }
    33%      { transform: translate(20px, 15px) scale(1.08); }
    66%      { transform: translate(-15px, -8px) scale(0.95); }
}

.ai-chat-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.92rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 1;
}
.ai-chat-avatar i { animation: ai-icon-tick 3s ease-in-out infinite; }
.ai-chat-avatar-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    animation: ai-pulse-ring 2.2s ease-out infinite;
}
.ai-chat-avatar-pulse-2 { animation-delay: 1.1s; }
@keyframes ai-pulse-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(1.8); opacity: 0;   }
    100% { transform: scale(1.8); opacity: 0;   }
}
/* Legacy orbit class is gone in the new design */
.ai-chat-avatar-orbit { display: none; }

.ai-chat-titles { flex: 1; min-width: 0; z-index: 1; }
.ai-chat-titles h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-chat-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    line-height: 1;
}
.ai-chat-status {
    margin: 2px 0 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.ai-chat-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
    animation: ai-status-pulse 1.8s ease-in-out infinite;
}

.ai-chat-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    z-index: 1;
}
.ai-chat-icon-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.78rem;
    transition: background 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-chat-icon-btn:hover { background: rgba(255, 255, 255, 0.32); }
.ai-chat-icon-btn:active { transform: scale(0.9); }
.ai-chat-close:hover { transform: rotate(90deg); }
.ai-chat-close:active { transform: rotate(90deg) scale(0.9); }
#ai-chat-new:hover i { transform: rotate(-60deg); transition: transform 0.4s ease; }

/* ── Tip strip — subtle blue chip with rotating hint ─────────── */
.ai-chat-tips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(14, 165, 233, 0.07);
    border-bottom: 1px solid rgba(14, 165, 233, 0.12);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 500;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
[data-theme="dark"] .ai-chat-tips { background: rgba(14, 165, 233, 0.12); }
.ai-chat-tip-icon {
    color: var(--primary);
    font-size: 0.8rem;
    flex-shrink: 0;
    animation: ai-bulb-blink 4s ease-in-out infinite;
}
@keyframes ai-bulb-blink {
    0%, 92%, 100% { opacity: 1; transform: scale(1); }
    95%           { opacity: 0.4; transform: scale(0.85); }
}
.ai-chat-tip-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-chat-tip-text.is-swapping { opacity: 0; transform: translateY(-6px); }

/* ── Messages area ─────────────────────────────────────────── */
.ai-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 165, 233, 0.3) transparent;
}
.ai-chat-messages::-webkit-scrollbar { width: 6px; }
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, 0.3);
    border-radius: 3px;
}

/* Welcome — bigger animated icon */
.ai-chat-welcome {
    text-align: center;
    padding: 10px 0 4px;
    animation: ai-welcome-in 0.5s cubic-bezier(0.32, 1.4, 0.55, 1) 0.18s both;
}
.ai-chat-welcome-icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
}
.ai-chat-welcome-icon i {
    animation: ai-icon-tick 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}
.ai-chat-orbit-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(14, 165, 233, 0.35);
    animation: ai-orbit-pulse 2.4s ease-out infinite;
}
.ai-chat-orbit-ring-2 { animation-delay: 0.8s; inset: -12px; }
.ai-chat-orbit-ring-3 { animation-delay: 1.6s; inset: -16px; }
@keyframes ai-orbit-pulse {
    0%   { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.3);  opacity: 0;   }
}
/* Legacy welcome-ring class (kept hidden) */
.ai-chat-welcome-ring { display: none; }

.ai-chat-welcome h4 {
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.ai-chat-welcome p {
    margin: 0 auto;
    max-width: 280px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Category chip filter */
.ai-chat-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 8px;
    animation: ai-welcome-in 0.45s ease 0.32s both;
}
.ai-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 999px;
    padding: 6px 11px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
[data-theme="dark"] .ai-cat { background: rgba(30, 41, 59, 0.5); }
.ai-cat i { font-size: 0.7rem; }
.ai-cat:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}
.ai-cat.ai-cat-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

/* Suggestion bubbles */
.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 4px;
}
.ai-suggestion {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 14px;
    padding: 11px 13px;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.22s cubic-bezier(0.32, 1.4, 0.55, 1);
    opacity: 0;
    animation: ai-suggestion-in 0.4s cubic-bezier(0.32, 1.4, 0.55, 1) both;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .ai-suggestion { background: rgba(30, 41, 59, 0.6); }
.ai-suggestion::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(14, 165, 233, 0.16) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.ai-suggestion:hover::before { transform: translateX(100%); }
.ai-suggestion:nth-child(1) { animation-delay: 0.05s; }
.ai-suggestion:nth-child(2) { animation-delay: 0.13s; }
.ai-suggestion:nth-child(3) { animation-delay: 0.21s; }
.ai-suggestion:nth-child(4) { animation-delay: 0.29s; }
.ai-suggestion:nth-child(5) { animation-delay: 0.37s; }
.ai-suggestion:nth-child(6) { animation-delay: 0.45s; }
.ai-suggestion:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.18);
}
.ai-suggestion:active { transform: translateY(0) scale(0.97); }
.ai-suggestion-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: background 0.22s ease, transform 0.22s ease;
}
.ai-suggestion:hover .ai-suggestion-icon {
    background: var(--primary);
    color: #fff;
    transform: rotate(-4deg) scale(1.05);
}
.ai-suggestion-body { flex: 1; min-width: 0; line-height: 1.25; }
.ai-suggestion-body strong {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.ai-suggestion-body small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin-top: 1px;
    font-weight: 400;
}
.ai-suggestion-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.ai-suggestion:hover .ai-suggestion-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Chat bubbles ───────────────────────────────────────────── */
.ai-msg {
    display: flex;
    max-width: 86%;
    animation: ai-msg-in 0.34s cubic-bezier(0.32, 1.4, 0.55, 1) both;
}
.ai-msg-bot  { align-self: flex-start; }
.ai-msg-user { align-self: flex-end;   }
.ai-msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.86rem;
    line-height: 1.42;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ai-msg-bot .ai-msg-bubble {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(14, 165, 233, 0.18);
    color: var(--text-primary);
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
}
[data-theme="dark"] .ai-msg-bot .ai-msg-bubble {
    background: rgba(30, 41, 59, 0.7);
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

/* Typing indicator */
.ai-msg-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
}
.ai-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: ai-typing 1.4s ease-in-out infinite;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.36s; }

/* ── Input row ──────────────────────────────────────────────── */
.ai-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(14, 165, 233, 0.15);
    background: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
[data-theme="dark"] .ai-chat-input-row { background: rgba(15, 23, 42, 0.5); }
.ai-chat-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}
.ai-chat-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(14, 165, 233, 0.22);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
[data-theme="dark"] .ai-chat-input { background: rgba(30, 41, 59, 0.7); }
.ai-chat-input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}
[data-theme="dark"] .ai-chat-input:focus { background: rgba(30, 41, 59, 0.95); }
.ai-chat-input::placeholder { color: var(--text-secondary); opacity: 0.75; }

.ai-chat-send {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                opacity 0.22s ease;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}
.ai-chat-send::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.5), transparent 70%);
    opacity: 0;
    transition: opacity 0.22s ease;
    z-index: -1;
}
.ai-chat-send:hover:not(:disabled) {
    transform: scale(1.1) rotate(-8deg);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.55);
}
.ai-chat-send:hover:not(:disabled)::before { opacity: 1; }
.ai-chat-send:active:not(:disabled) { transform: scale(0.92); }
.ai-chat-send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Lock body scroll while the chat is open */
body.ai-chat-open { overflow: hidden; }

/* Desktop: float as a corner card instead of bottom sheet */
@media (min-width: 768px) {
    .ai-chat-panel {
        bottom: 24px;
        right: 24px;
        left: auto;
        max-width: 420px;
        max-height: 78vh;
        max-height: 78dvh;
        margin: 0;
        transform-origin: bottom right;
    }
}