/*
 * Styling that belongs to the installed app only.
 *
 * This file once replaced the panel's header and sidebar with a five-tab bar. That was
 * wrong: hiding #header took the hamburger with it, and with the hamburger went the
 * sidebar — so the whole panel collapsed to the seven links the المزيد sheet happened to
 * list. The navigation the owner already knows is the navigation he keeps.
 *
 * What is left is the notification ask card, which adds nothing to the page's chrome and
 * removes nothing from it.
 *
 * The rules stay scoped to html.jibly-app (set by a synchronous script in _pwa_head)
 * because the card is only ever shown inside the installed app.
 */

html.jibly-app .jpa {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1040;
    background: #fff;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .18);
    padding: 14px;
    max-width: 560px;
    margin-inline: auto;
}

/* The panel reserves 3.5rem at the bottom for its footer; sit clear of it. */
html.jibly-app body.footer-offset .jpa {
    bottom: calc(3.5rem + 12px + env(safe-area-inset-bottom));
}

html.jibly-app .jpa__body { display: flex; gap: 12px; align-items: flex-start; }
html.jibly-app .jpa__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    background: #eaf1ff; color: #006ae3; display: grid; place-items: center; font-size: 20px;
}
html.jibly-app .jpa__text { display: flex; flex-direction: column; gap: 2px; }
html.jibly-app .jpa__title { font-size: 15px; }
html.jibly-app .jpa__sub { font-size: 12.5px; color: #5F6B7A; line-height: 1.5; }
html.jibly-app .jpa__actions { display: flex; gap: 8px; margin-top: 12px; }
html.jibly-app .jpa__btn {
    flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid #e7eaf3;
    background: #fff; color: #5F6B7A; font-size: 14px; font-weight: 600;
}
html.jibly-app .jpa__btn--primary { background: #006ae3; border-color: #006ae3; color: #fff; }

/* Nothing shows this card outside the installed app, at any width. */
.jpa { display: none; }
html.jibly-app .jpa:not([hidden]) { display: block; }

/* ---------------------------------------------------------------------------
 * Shortcuts.
 *
 * A row of chips above the page content, in the installed app, on a phone. It is
 * NOT fixed: it scrolls away with the page, so it costs no permanent screen space,
 * and it hides nothing — the header, the module switcher and the sidebar are all
 * exactly where they were.
 * ------------------------------------------------------------------------ */

/* Nothing shows these outside the installed app, at any width. */
.jsc { display: none; }

@media (max-width: 991.98px) {
    html.jibly-app .jsc {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        /* The gutter lives on the SCROLLER, not on a negative margin. .main itself has
           no padding — the page's 16px comes from .content.container-fluid, which this
           row is a sibling of — so without this the first chip sat flush against the
           screen edge while the page title did not. Padding the scroller aligns the
           first chip with the title AND still lets the rest scroll out to the edge,
           which is what a scroller should do. An earlier bleed with margin: 0 -15px
           widened the document to 390 against a 375 viewport and put the whole page,
           header included, into a sideways scroll. */
        margin: 10px 0 2px;
        padding: 0 16px 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Fade the overflowing edge so a half-cut chip reads as "there is more" rather
           than as a word sliced in half. RTL overflows to the left; English to the
           right. */
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
    }
    html[dir="ltr"].jibly-app .jsc {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    }
    html.jibly-app .jsc::-webkit-scrollbar { display: none; }

    html.jibly-app .jsc__chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        /* 32px, not the 46px bordered pill this started as: that one read as a second
           toolbar welded under the header and fitted three and a half chips. */
        min-height: 32px;
        padding: 0 11px;
        border: 0;
        border-radius: 8px;
        background: #F1F3F8;
        color: #55637A;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .12s ease;
    }
    html.jibly-app .jsc__chip i { font-size: 14px; opacity: .72; }
    html.jibly-app .jsc__chip:hover { color: #55637A; background: #E8ECF4; }
    html.jibly-app .jsc__chip:active { background: #DFE4EE; }

    /* A tint, not a solid fill. The page it points at is already on screen; the chip
       only has to say which one. */
    html.jibly-app .jsc__chip.is-active {
        background: #E6EFFE;
        color: #0059c1;
        font-weight: 700;
    }
    html.jibly-app .jsc__chip.is-active i { opacity: 1; }
    html.jibly-app .jsc__chip.is-active:hover { background: #DCE8FD; color: #0059c1; }
}