/* ================================================================
   ASPAN Market — Global Stylesheet
   ================================================================ */

/* ── Custom select arrow ── */
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* ── PWA: safe-area bottom inset (iPhone notch / home bar) ── */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── PWA: body padding so content isn't hidden under bottom nav ── */
@media (max-width: 767px) {
    body:not(.active-chat-open) {
        padding-bottom: 4.5rem;
    }
}

/* ── Header: compact on mobile ── */
@media (max-width: 767px) {
    header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    /* Hide search bar on mobile — saves horizontal space */
    header .search-area {
        display: none !important;
    }
}

/* ================================================================
   Chat Workspace
   ================================================================ */

/* Desktop: show chat-pane by default (replaces the removed md:flex) */
@media (min-width: 768px) {
    .chat-pane-el {
        display: flex !important;
    }
}

/* Desktop height */
.chat-workspace {
    height: calc(100vh - 160px);
    height: calc(100dvh - 160px);
}

/* Mobile: full-bleed, no padding, precise height */
@media (max-width: 767px) {
    main.chat-workspace {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        /* header ≈ 60px + bottom-nav ≈ 56px = 116px */
        height: calc(100dvh - 116px);
        height: calc(100vh - 116px);
        overflow: hidden;
    }

    main.chat-workspace > div {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        height: 100% !important;
        margin: 0 !important;
    }

    #sidebar-pane {
        width: 100% !important;
        max-width: 100% !important;
    }

    #chat-pane {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
}

/* ── Immersive mode when a chat is open on mobile ── */
body.active-chat-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    body.active-chat-open {
        padding-bottom: 0 !important;
    }

    body.active-chat-open main.chat-workspace {
        position: fixed;
        inset: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        z-index: 100;
        background: #fff;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.active-chat-open main.chat-workspace > div {
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Hide bottom nav and header while chat is open */
    body.active-chat-open .bottom-nav-pwa,
    body.active-chat-open header {
        display: none !important;
    }
}

/* ── Messages stream: no horizontal overflow ── */
#messages-stream {
    overflow-x: hidden;
}

#messages-stream > div {
    max-width: 100%;
    box-sizing: border-box;
}