/*
 * mobile-quick.css — Mobile Quick Analysis + Voice Input Styles
 * Batch 48: Mobile Quick Mode optimizations + Voice Input button
 *
 * All selectors verified from index.html, js/quick-mode.js, js/snapshot.js,
 * js/deal-progress.js, and css/responsive.css.
 *
 * Zero hardcoded colors — CSS vars only.
 * Min tap target: 44px for all interactive elements at mobile breakpoint.
 * Load order: after all other CSS (mobile overrides must win).
 */

/* ============================================================
   VOICE INPUT BUTTON — global (not media-query gated)
   Position is absolute inside .np-address-wrap (relative parent)
   ============================================================ */
.voice-input-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gold-500);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    flex-shrink: 0;
    z-index: 2;
}

.voice-input-btn:hover {
    background: var(--gold-600);
}

.voice-input-btn:focus-visible {
    outline: 2px solid var(--cyan-500);
    outline-offset: 2px;
}

/* Listening state — pulse animation */
.voice-btn--listening {
    animation: voice-pulse 0.8s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--gold-alpha-30);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* ============================================================
   ≤ 768px — ADDRESS INPUT (New Property Modal)
   ============================================================ */
@media (max-width: 768px) {

    /* Address input: prevent iOS zoom (font-size >= 16px or 1rem) */
    #np-address-input {
        font-size: 1rem;
        padding: 14px 52px 14px 36px; /* right padding for mic btn, left for icon */
        min-height: 44px;
    }

    /* Ensure positioning context for the mic button */
    .np-address-wrap {
        position: relative;
    }

    /* Larger mic button on mobile */
    .voice-input-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        right: 6px;
    }
}

/* ============================================================
   ≤ 768px — QUICK MODE PANEL
   Verified IDs: #lf-qm-purchase, #lf-qm-arv, #lf-qm-rehab
   Chip container: #lf-qm-chips / .lf-qm-chip
   Results: .lf-qm-results / .lf-qm-card
   CTA: #lf-qm-cta-btn
   ============================================================ */
@media (max-width: 768px) {

    /* Purchase price and ARV inputs — full width, tall, centered */
    #lf-qm-purchase,
    #lf-qm-arv {
        width: 100%;
        height: 56px;
        font-size: 1.2rem;
        text-align: center;
    }

    /* Rehab custom input — full width as well */
    #lf-qm-rehab {
        width: 100%;
        height: 48px;
        font-size: 1rem;
        text-align: center;
    }

    /* Rehab chips row — equal-width chips filling full row */
    #lf-qm-chips {
        display: flex;
        width: 100%;
        gap: 6px;
    }

    #lf-qm-chips .lf-qm-chip {
        flex: 1;
        height: 48px;
        min-width: 0;
        font-size: var(--text-sm);
        padding: 0 4px;
    }

    /* Rehab custom input wrapper — full width */
    .lf-qm-rehab .lf-qm-field__input-wrap {
        max-width: 100% !important;
        width: 100%;
    }

    /* Result cards — 2×2 grid */
    .lf-qm-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .lf-qm-card {
        height: 72px;
    }

    /* Run Full Analysis CTA — full width, taller tap target */
    #lf-qm-cta-btn {
        width: 100%;
        height: 52px;
        font-size: var(--text-base);
    }

    /* Input field wrappers — full width on mobile */
    .lf-qm-field .lf-qm-field__input-wrap {
        width: 100%;
    }
}

/* ============================================================
   ≤ 768px — LANDING PAGE
   Search input: .lf-landing__search-input / #lf-landing-search-input
   Analyze btn: #lf-landing-search-btn / .lf-landing__search-btn
   Suggestion chips: .lf-landing__chip
   ============================================================ */
@media (max-width: 768px) {

    /* Search input — full width, tall, prevent iOS zoom */
    .lf-landing__search-input {
        width: 100%;
        height: 52px;
        font-size: 1rem;
    }

    /* Analyze button — full width, stacked below input */
    .lf-landing__search-btn {
        width: 100%;
        display: block;
        margin-top: 8px;
        height: 52px;
    }

    /* Search box: stack vertically on mobile */
    .lf-landing__search-box {
        flex-direction: column;
        align-items: stretch;
    }

    /* Suggestion chips — wrap, max 2 per row */
    .lf-landing__suggestions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .lf-landing__chip {
        flex: 0 1 48%;
        min-width: 0;
        height: 44px;
        font-size: var(--text-sm);
    }
}

/* ============================================================
   ≤ 768px — STRATEGY SUBTABS
   Container: #pi-strategy-subtabs
   Tabs: .pi-strategy-tab
   ============================================================ */
@media (max-width: 768px) {

    /* Subtabs row: horizontal scroll, no wrap */
    #pi-strategy-subtabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        display: flex;
    }

    #pi-strategy-subtabs::-webkit-scrollbar {
        display: none;
    }

    .pi-strategy-tab {
        min-width: 100px;
        height: 36px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Active tab: bottom border only indicator */
    .pi-strategy-tab.pi-strategy-tab--active {
        background: transparent;
        border-bottom: 2px solid var(--cyan-500);
    }

    /* Strategy subtabs own scrollable row below main header row */
    .pi-header {
        flex-wrap: wrap;
    }

    .pi-header__center {
        order: 10;
        width: 100%;
        border-top: 1px solid var(--glass-border);
        padding-top: 6px;
        margin-top: 4px;
    }
}

/* ============================================================
   ≤ 768px — DEAL PROGRESS CHECKLIST
   Container: #lf-deal-progress
   Expanded state: .dp-expanded
   Items wrap: #dp-items-wrap
   ============================================================ */
@media (max-width: 768px) {

    /* Force checklist collapsed on mobile — hide items even when dp-expanded */
    #lf-deal-progress.dp-expanded #dp-items-wrap {
        max-height: 0;
        overflow: hidden;
        display: none;
    }

    /* Keep the toggle bar (collapsed header) always visible */
    #dp-toggle-bar {
        cursor: pointer;
    }
}

/* ============================================================
   ≤ 768px — PI HEADER
   Deal Score card: #lf-deal-score-header
   Address: .pi-header__address (#pi-property-address)
   ============================================================ */
@media (max-width: 768px) {

    /* Hide deal score card — too wide for mobile header */
    #lf-deal-score-header {
        display: none;
    }

    /* Truncate address to prevent overflow */
    .pi-header__address {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   ≤ 768px — SNAPSHOT STRIP
   Tiles: .lf-kpi-tile[data-tile-id]
   Show only: arv, rehab, mao, offer (suggestedOffer)
   data-tile-id values from js/snapshot.js TILE_DEFS:
     arv, asIs, rehab, mao, offer, profit, payment, rent, cashflow, ...
   ============================================================ */
@media (max-width: 768px) {

    /* Hide all snapshot tiles except the 4 most important */
    .lf-kpi-tile:not([data-tile-id="arv"]):not([data-tile-id="rehab"]):not([data-tile-id="mao"]):not([data-tile-id="offer"]) {
        display: none;
    }

    /* Ensure remaining 4 tiles have adequate tap target height */
    .lf-kpi-tile[data-tile-id="arv"],
    .lf-kpi-tile[data-tile-id="rehab"],
    .lf-kpi-tile[data-tile-id="mao"],
    .lf-kpi-tile[data-tile-id="offer"] {
        min-height: 44px;
        flex: 1 1 0;
    }
}