/* ============================================================================
   fitVibe · FV Chrome — L1 Brand bar, mobile (Φάση 2)
   ----------------------------------------------------------------------------
   Ένα bar για guest ΚΑΙ member, παρόν σε ΚΑΘΕ σελίδα — και στο /search, όπου
   το legacy header δεν υπήρχε καθόλου.

       [logo] [location (member)] ....... [coins] [search] [bell] [menu]

   Ό,τι διαφέρει ανά auth είναι περιεχόμενο ζώνης, όχι διαφορετικό component.

   Το bottom nav (#fvBottomNav) παραμένει στο css/bottom-menu.css μέχρι τη
   Φάση 4· εδώ ρυθμίζεται μόνο ο χώρος που πρέπει να του αφήνει η σελίδα.
============================================================================ */

.fv-chrome--mobile {
    display: none;
}

@media (max-width: 899px) {

    /* ── Host & bar ─────────────────────────────────────────────────────── */

    .fv-chrome--mobile {
        position: sticky;
        top: 0;
        z-index: var(--fv-chrome-z-l1);
        display: block;
        background: var(--fv-chrome-bg);
        padding-top: var(--fv-chrome-safe-top);
    }

    .fv-chrome-m__bar {
        display: flex;
        align-items: center;
        gap: var(--fv-chrome-gap-sm);
        width: 100%;
        height: var(--fv-chrome-l1-h-mobile);
        padding: 0 var(--fv-chrome-pad-x-mobile);
        background: var(--fv-chrome-bg);
        box-shadow: var(--fv-chrome-shadow-rest);
        transition: box-shadow var(--fv-chrome-dur) var(--fv-chrome-ease);
    }

    html[data-chrome-scroll="scrolled"] .fv-chrome-m__bar {
        box-shadow: var(--fv-chrome-shadow-scrolled);
    }

    /* ── Logo ───────────────────────────────────────────────────────────── */

    .fv-chrome-m__logo {
        display: inline-flex;
        align-items: center;
        flex: none;
    }

    .fv-chrome-m__logo img,
    .fv-chrome-m__logo svg {
        display: block;
        width: var(--fv-chrome-logo-w-mobile);
        height: auto;
    }

    /* ── Location trigger (member) ──────────────────────────────────────────
       Reuses the shared mobile-app-location-trigger partial, so the existing
       global handler in js/header.js keeps driving it unchanged. */

    .fv-chrome-m__location {
        display: flex;
        align-items: center;
        overflow: hidden;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
    }

    .fv-chrome-m__location .fv-app-home__guest-place {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        margin: 0;
        gap: 4px;
    }

    /* The label shrinks; the chevron never wraps to a second line. */
    .fv-chrome-m__location .fv-app-home__guest-place-copy {
        flex: 0 1 auto;
    }

    /* The partial paints its pin as a large filled disc sized for the Home hero.
       In the bar it becomes a plain glyph — the disc alongside the fitVibe logo
       read as two competing marks. `.is-compact` carries the extra specificity
       needed to win against css/app-home.css, which loads after this file. */
    .fv-chrome-m__location .fv-app-home__guest-place.is-compact .fv-app-home__guest-logo {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--fv-chrome-accent);
        font-size: 15px;
    }

    /* The partial stacks three lines — an eyebrow, the label and a hint — which
       is a 3-line block designed for the tall Home hero. Inside a 56px bar only
       the label survives; the eyebrow and hint would overflow the bar. */
    .fv-chrome-m__location .fv-app-home__guest-place-copy {
        display: flex;
        align-items: center;
        overflow: hidden;
        min-width: 0;
        flex-direction: row;
        gap: 0;
        line-height: 1.2;
    }

    .fv-chrome-m__location .fv-app-home__guest-place-copy > small,
    .fv-chrome-m__location .fv-app-home__guest-place-copy > em {
        display: none;
    }

    .fv-chrome-m__location .fv-app-home__guest-place-copy > strong {
        display: block;
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: var(--fv-chrome-font);
        font-size: 14px;
        font-weight: 700;
    }

    /* Unset state also switches the partial back to a column layout. */
    .fv-chrome-m__location .fv-app-home__guest-place.is-location-unset .fv-app-home__guest-place-copy {
        align-items: center;
        flex-direction: row;
        gap: 0;
    }

    .fv-chrome-m__location .fv-app-home__guest-chevron {
        flex: 0 0 16px;
        width: 16px;
    }

    /* Guests have no location control, so the logo must not stretch. */
    .fv-chrome--mobile[data-chrome-auth="guest"] .fv-chrome-m__actions {
        margin-left: auto;
    }

    /* ── Actions ────────────────────────────────────────────────────────── */

    .fv-chrome-m__actions {
        display: flex;
        align-items: center;
        gap: var(--fv-chrome-gap-xs);
        flex: none;
        margin-left: auto;
    }

    .fv-chrome-m__icon-btn {
        position: relative;
        display: grid;
        place-items: center;
        flex: none;
        /* 44px touch target (WCAG / iOS HIG). */
        width: var(--fv-chrome-tap);
        height: var(--fv-chrome-tap);
        padding: 0;
        border: 0;
        border-radius: var(--fv-chrome-radius-pill);
        background: transparent;
        color: var(--fv-chrome-text);
        font-size: 18px;
        cursor: pointer;
    }

    .fv-chrome-m__icon-btn svg {
        width: 21px;
        height: 21px;
    }

    /* The bell reuses .fv-icon-btn from the legacy chrome, which paints a large
       bordered circle sized for the old header. Inside the bar every action is
       a flat 44px touch target instead. */
    .fv-chrome-m__icon-btn.fv-icon-btn {
        width: var(--fv-chrome-tap);
        height: var(--fv-chrome-tap);
        min-width: 0;
        min-height: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .fv-chrome-m__icon-btn .fv-icon-btn__badge {
        top: 6px;
        right: 6px;
    }

    .fv-chrome-m__icon-btn:active {
        background: var(--fv-chrome-accent-soft);
    }

    .fv-chrome-m__icon-btn:focus-visible {
        outline: 2px solid var(--fv-chrome-accent);
        outline-offset: -2px;
    }

    /* The location label is the one thing here that carries meaning rather than
       an icon, so it gets a floor. Measured at 390px with a 3-digit balance the
       zone collapsed to 99px and the label truncated to "Τοποθε…"; the actions
       below are tightened to pay for it. */
    .fv-chrome-m__location {
        min-width: 96px;
    }

    .fv-chrome-m__coins {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: none;
        min-height: 34px;
        padding: 6px 9px 6px 6px;
        border: 1px solid var(--fv-chrome-border);
        border-radius: var(--fv-chrome-radius-pill);
        background: var(--fv-chrome-bg);
        color: var(--fv-chrome-text);
        font-family: var(--fv-chrome-font);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
    }

    .fv-chrome-m__coin,
    .fv-chrome-m__coin svg,
    .fv-chrome-m__coin img {
        display: block;
        width: 17px;
        height: 17px;
    }

    /* Narrow phones: shave the icon boxes rather than the location label — the
       label is the only element here carrying meaning rather than an icon. The
       44px touch target is preserved with a centred hit-area extension. */
    @media (max-width: 400px) {
        .fv-chrome-m__icon-btn,
        .fv-chrome-m__icon-btn.fv-icon-btn {
            width: 38px;
        }

        .fv-chrome-m__icon-btn::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--fv-chrome-tap);
            height: var(--fv-chrome-tap);
            transform: translate(-50%, -50%);
        }
    }

    /* Below ~380px the row cannot hold logo + location + balance + three icons
       without truncating the location. The balance chip is the one item that is
       already duplicated — the bottom nav carries the same figure — so it is
       dropped here rather than clipping the only text in the bar. */
    @media (max-width: 380px) {
        .fv-chrome-m__coins {
            display: none;
        }
    }

    /* ── Legacy suppression ─────────────────────────────────────────────────
       While FV Chrome owns the mobile surface the legacy bars must not paint,
       even if a page still renders them. `body.search-page header` in
       css/header.css hides every <header> on Search — including this one — so
       the bar re-asserts itself there. */

    .fv-chrome--mobile ~ header.mobile-header,
    .fv-chrome--mobile ~ header.desktop-header {
        display: none;
    }

    body.search-page .fv-chrome--mobile {
        display: block;
    }

    body.search-page .fv-chrome-m__bar {
        display: flex;
    }

    /* ── Search page: fixed-layer coexistence ───────────────────────────────
       The Search page is not a normal document flow — the map is a fixed,
       full-viewport layer and its own toolbar (.sab-m-header) is fixed at
       top:0, which worked only because Search previously had NO site header at
       all. Now that the bar exists, both would occupy the same strip.

       The bar becomes fixed here too, and the page's own toolbar starts below
       it. The toolbar stays a page control (it becomes the L2 context bar in
       phase 3); it is not a second site header. */

    body.search-page .fv-chrome--mobile {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    body.search-page .sab-m-header {
        top: calc(var(--fv-chrome-l1-h-mobile) + var(--fv-chrome-safe-top));
    }

    body.search-page .sab-m-header-mask {
        top: calc(var(--fv-chrome-l1-h-mobile) + var(--fv-chrome-safe-top));
    }

    /* ── Studio sheet: the page owns the top strip ──────────────────────────
       On mobile a studio opens as a full-height SPA sheet over Search, and its
       own gallery bar is `position: fixed; inset: 0 0 auto 0; z-index: 90`
       (css/studio/imports/studio-services.css) carrying back, share and
       favourite over the hero image.

       That is the correct sheet pattern — a detail view gets a context header,
       not the site brand bar — but until now it merely won on z-index while the
       brand bar still painted underneath it. Stacking two chrome layers in one
       56px strip is declared here instead of left to chance.

       Phase 3 turns that gallery bar into the real L2 context component; until
       then it keeps ownership as-is. */

    html.fv-public-spa body:not(.fv-native-app).fv-studio-detail-page .fv-chrome--mobile {
        display: none;
    }
}

/* Above the mobile breakpoint the desktop chrome takes over. */
@media (min-width: 900px) {
    .fv-chrome--mobile {
        display: none;
    }
}