/* ══════════════════════════════ PWA surfaces + safe areas (EO-4a) ══════════════════════════════
 *
 * A SEPARATE stylesheet on purpose. Everything here is additive — install banner, update toast, and
 * safe-area insets for the authenticated shell. No existing desktop rule in admin.css is touched, so
 * the desktop layout cannot regress from this file.
 *
 * Safe areas use env(safe-area-inset-*) throughout rather than hard-coded pixels, so one rule covers
 * the notch, the Dynamic Island, the home indicator, and landscape (where the insets move to the left
 * and right edges). The insets are 0 in every non-notched context, including desktop, which is why
 * these can be unconditional.
 *
 * Requires <meta name="viewport" content="... viewport-fit=cover"> or the insets are always 0.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── safe areas: authenticated shell ───────────────────────────── */

/* The SHELL owns the top inset, not the topbar. The previous design hung the whole guard on
 * .topbar's padding — and focus mode hides the topbar, which put the week controls under the
 * Dynamic Island with nothing reserving the space (the bug photographed on an iPhone 15).
 * Now .content reserves the inset unconditionally; the topbar pulls itself up over that band
 * with a negative margin and re-pads, so its background still bleeds under the system chrome
 * exactly as before. Hide the topbar and the reservation simply remains. Every value is 0 on
 * an un-notched device, so desktop is byte-identical. */
.content {
    padding-top: env(safe-area-inset-top);
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
    padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
    margin-top: calc(-1 * env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
}

/* The off-canvas drawer slides from the left edge, so it must clear the left inset in landscape and
 * the top/bottom insets when it is full height. */
.side {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(env(safe-area-inset-left), 0px);
}

/* Anything pinned to the bottom of the viewport (chat composer, dock, sticky action bars) must sit
 * above the home indicator rather than under it. */
.sr-dock,
.chat-composer,
.sticky-actions {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* The floating action buttons (.chat-fab, #srAiRoot) get their bottom insets in chat.css and
 * ai-assistant.css directly — this file loads BEFORE them (_PwaHead is the first stylesheet),
 * so an equal-specificity override here would silently lose the cascade. */

/* In standalone mode there is no browser chrome to absorb an over-scroll, so a rubber-band bounce
 * exposes the page background behind the shell. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
}

/* ───────────────────────────── PWA surfaces (install banner, update toast) ───────────────────────────── */

.sr-pwa-surface {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--line, #e6e2f2);
    background: var(--panel, #fff);
    color: var(--ink, #191627);
    box-shadow: 0 1px 2px rgba(25, 22, 39, .05), 0 12px 30px rgba(25, 22, 39, .18);

    font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif);
    font-size: 14px;
    line-height: 1.45;

    animation: sr-pwa-in .22s ease-out;
}

@keyframes sr-pwa-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pwa-surface { animation: none; }
}

/* Centred and width-capped on larger screens. The install banner never renders on desktop, but the
 * update toast does. */
@media (min-width: 640px) {
    .sr-pwa-surface {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 560px;
        animation: none;   /* the translateX would fight the slide-in keyframes */
    }
}

.sr-pwa-copy { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sr-pwa-copy strong { font-size: 15px; }
.sr-pwa-copy span { color: var(--muted, #6b6784); }
.sr-pwa-text { flex: 1 1 200px; }

.sr-pwa-steps {
    margin: 6px 0 0;
    padding-left: 20px;
    color: var(--muted, #6b6784);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-pwa-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.sr-pwa-btn {
    font: inherit;
    font-weight: 600;
    /* ≥44px: these are the touch targets on the device least able to hit a small one. */
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid var(--line, #e6e2f2);
    background: var(--panel-2, #f1eff9);
    color: var(--ink, #191627);
    cursor: pointer;
}

.sr-pwa-btn:hover { filter: brightness(.98); }
.sr-pwa-btn:focus-visible { outline: 3px solid var(--brand, #6366f1); outline-offset: 2px; }
.sr-pwa-btn[disabled] { opacity: .6; cursor: default; }

.sr-pwa-btn-primary {
    background: var(--brand, #6366f1);
    border-color: transparent;
    color: #fff;
}

.sr-pwa-btn-primary:hover { filter: brightness(1.06); }

/* Windows high-contrast: never rely on our colours alone. */
@media (forced-colors: active) {
    .sr-pwa-surface { border: 1px solid CanvasText; }
    .sr-pwa-btn { border: 1px solid ButtonText; }
}