/* ==========================================================================
   QuizioMatch Redesign 2026 — Shell layer (app chrome shared by all screens)
   Design: kit.jsx <Dock>, qm.css .dock / .sheetwrap.
   Real DOM: .app-nav > .nav-item (one copy inside each main screen; the
   active item gets .active from script.js), #pageLoadOverlay, showToast()
   toasts, #pwaInstallOverlay.

   The footer is part of the app canvas, not a separate panel: same colour as
   the screen behind it, no top border, no shadow, no floating pill. Content
   scrolling towards it melts in through a soft fade painted ABOVE the bar
   (::after), so there is never a visible edge. Box position/size stay where
   every screen already puts it; display:none rules (quiz-open etc.) untouched.

   Selector weight: legacy layers style the nav with id selectors
   (#revealDecideScreen .app-nav, #profileScreen > .app-nav) and
   [data-theme="dark"] .app-nav, all with !important. ":is(#qmDock, .app-nav)"
   lifts these rules above all of them without touching those files.
   ========================================================================== */

html body .app-nav:is(#qmDock, .app-nav) {
    height: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0;
    align-items: center;
    justify-content: space-between;
    background: var(--qm-bg) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    overflow: visible !important;
    /* chat-rebuild.css sets contain: layout style paint, which clips the
       fade painted above the bar. */
    contain: none !important;
}

/* Soft fade above the bar: scrolled content dissolves into the footer. */
html body .app-nav:is(#qmDock, .app-nav)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 100% !important;
    width: auto !important;
    height: 28px !important;
    z-index: -1;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(13, 10, 15, 0) 0%, rgba(13, 10, 15, .72) 60%, var(--qm-bg) 100%) !important;
    box-shadow: none !important;
    pointer-events: none;
    opacity: 1 !important;
    transform: none !important;
}

/* No floating pill / no separate panel any more. */
html body .app-nav:is(#qmDock, .app-nav)::before {
    content: none !important;
    display: none !important;
}

/* Five equal columns, icon over label, always visible. Selecting a tab only
   recolours it (tinted capsule + brighter colour) - no width change, no label
   appearing/disappearing, so nothing jumps when the user taps. */
html body .app-nav:is(#qmDock, .app-nav) .nav-item {
    pointer-events: auto;
    position: relative;
    flex: 1 1 0;
    min-width: 44px;
    height: 56px;
    margin: 0 2px;
    padding: 6px 2px 5px;
    gap: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--qm-fg3) !important;
    box-shadow: none;
    isolation: isolate;
    font: 600 11px/1.1 var(--qm-sans);
    letter-spacing: 0;
    transform: none;
    transition: transform .18s var(--qm-ease-spring), background-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item::after {
    content: none;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item svg {
    width: 22px;
    height: 22px;
    flex: none;
    stroke: currentColor;
    color: inherit;
    filter: none;
    transform: none;
    opacity: 1;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item > span[data-i18n] {
    display: block;
    position: static;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 11px/1.1 var(--qm-sans);
    letter-spacing: 0;
    color: inherit !important;
    opacity: 1;
    text-transform: none;
}

/* Active: pink icon + label and a soft capsule behind the icon only, so the
   footer stays one calm surface (no boxed tab). Same size and weight. */
html body .app-nav:is(#qmDock, .app-nav) .nav-item.active {
    padding: 6px 2px 5px;
    background: transparent !important;
    color: var(--qm-pink-soft) !important;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item.active > span[data-i18n] {
    color: var(--qm-pink-soft) !important;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item.active svg {
    color: var(--qm-pink-soft) !important;
    stroke: var(--qm-pink-soft) !important;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item::before {
    content: "" !important;
    position: absolute;
    top: 3px;
    left: 50%;
    width: 52px;
    height: 30px;
    margin-left: -26px;
    border-radius: 15px;
    background: rgba(233, 30, 99, .18);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity .2s ease, transform .25s var(--qm-ease-spring);
    pointer-events: none;
    z-index: -1;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item.active::before {
    opacity: 1;
    transform: none;
}

/* A screen that is not the active one (e.g. #chatScreen, which chat-rebuild.css keeps
   at display:block with opacity 0) must not leave an invisible copy of its footer on
   top of the active screen's footer: it swallowed taps and took keyboard focus. */
html body .screen:not(.active) .app-nav,
html body .screen:not(.active) .app-nav .nav-item {
    visibility: hidden;
    pointer-events: none;
}

html body .app-nav:is(#qmDock, .app-nav) .nav-item:hover:not(.active) {
    color: var(--qm-fg) !important;
    background: transparent;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item:active {
    transform: scale(.94);
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item:focus,
html body .app-nav:is(#qmDock, .app-nav) .nav-item:focus-visible {
    outline: none;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item:focus-visible {
    box-shadow: var(--qm-focus-ring);
}

/* Unread counter (message-notifications.js adds span.unread-badge to the
   Chat item): pinned to the icon's top corner, never treated as a label. */
html body .app-nav:is(#qmDock, .app-nav) .nav-item .unread-badge {
    position: absolute;
    top: 2px;
    left: auto;
    right: calc(50% - 25px);
    margin: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid var(--qm-s2);
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink-l);
    color: #fff;
    font: 800 11px/16px var(--qm-sans);
    box-shadow: none;
    clip: auto;
    clip-path: none;
    overflow: visible;
    width: auto;
}
html body .app-nav:is(#qmDock, .app-nav) .nav-item.active .unread-badge {
    background: #fff;
    color: var(--qm-pink);
    border-color: var(--qm-pink);
}
html body.rtl .app-nav:is(#qmDock, .app-nav) .nav-item .unread-badge,
html[dir="rtl"] body .app-nav:is(#qmDock, .app-nav) .nav-item .unread-badge {
    right: auto;
    left: 2px;
}

/* Small phones: tighten so five icon + label columns always fit. */
@media (max-width: 360px) {
    html body .app-nav:is(#qmDock, .app-nav) .nav-item { min-width: 44px; margin: 0 1px; }
    html body .app-nav:is(#qmDock, .app-nav) .nav-item > span[data-i18n] { font-size: 10px; }
}


/* ── Page-load overlay (#pageLoadOverlay, inline styles in index.html) ─── */
#pageLoadOverlay {
    background:
        radial-gradient(260px 200px at 50% 46%, rgba(233, 30, 99, .14), transparent 70%),
        var(--qm-bg) !important;
}
/* The ghost rides the bar (qm/qm-loader.js moves rider + fill with
   compositor animations; #pageLoadBar is only the hidden real-progress
   value script.js writes). */
#pageLoadOverlay .qm-loader__stage {
    position: relative;
    width: 290px;
    height: 118px;
}
#pageLoadOverlay .qm-loader__track {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 0;
    height: 8px;
    border-radius: var(--qm-r-pill);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
    overflow: hidden;
}
#pageLoadOverlay .qm-loader__fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8F0E3D 0%, var(--qm-pink) 55%, var(--qm-pink-soft) 100%);
    transform: translateX(-100%);
    will-change: transform;
}
#pageLoadOverlay .qm-loader__rider {
    position: absolute;
    left: 0;               /* rider is 70px wide: centre = track start */
    bottom: 4px;
    width: 70px;
    height: 110px;
    will-change: transform;
}
#pageLoadOverlay .qm-loader__ghost {
    position: absolute;
    left: 1px;
    bottom: 14px;
    width: 68px;
    height: 68px;
    transform-origin: 50% 80%;
    animation: qmGhostRide 1.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 14px rgba(233, 30, 99, .35));
}
@keyframes qmGhostRide {
    0%, 100% { transform: translateY(0) rotate(6deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}
/* Glowing head of the bar, travels with the ghost. */
#pageLoadOverlay .qm-loader__spark {
    position: absolute;
    left: 30px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0 30%, #FFCAD9 55%, #FF80AB 100%);
    box-shadow: 0 0 8px 2px rgba(255, 128, 171, .95), 0 0 22px 7px rgba(233, 30, 99, .6);
    animation: qmSparkPulse 1.1s ease-in-out infinite;
}
@keyframes qmSparkPulse {
    0%, 100% { transform: scale(1);    opacity: .95; }
    50%      { transform: scale(1.35); opacity: .7; }
}
/* Sparkle trail behind the ghost: always drifting, so the scene never
   looks frozen even when the bar itself moves slowly. */
#pageLoadOverlay .qm-loader__trail {
    position: absolute;
    left: 10px;
    bottom: 30px;
    width: 0;
    height: 0;
}
#pageLoadOverlay .qm-loader__trail i {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF3F6 0 35%, var(--qm-pink-soft) 100%);
    box-shadow: 0 0 10px 3px rgba(255, 128, 171, .75);
    opacity: 0;
    animation: qmTrail 1.2s ease-out infinite;
}
#pageLoadOverlay .qm-loader__trail i:nth-child(2) { animation-delay: .4s; top: 12px; width: 6px; height: 6px; }
#pageLoadOverlay .qm-loader__trail i:nth-child(3) { animation-delay: .8s; top: 22px; }
@keyframes qmTrail {
    0%   { transform: translate(0, 0) scale(1);       opacity: 0; }
    15%  { opacity: .95; }
    100% { transform: translate(-34px, 8px) scale(.2); opacity: 0; }
}
#pageLoadOverlay.qm-loader--done .qm-loader__spark {
    animation: qmSparkBurst .45s ease-out forwards;
}
/* Finish: the tip flares pink and dissolves (no grey disc). */
@keyframes qmSparkBurst {
    0%   { transform: scale(1);   opacity: 1; box-shadow: 0 0 8px 2px rgba(255, 128, 171, .95), 0 0 22px 7px rgba(233, 30, 99, .6); }
    40%  { transform: scale(1.6); opacity: 1; box-shadow: 0 0 16px 6px rgba(255, 128, 171, 1), 0 0 40px 16px rgba(233, 30, 99, .7); }
    100% { transform: scale(.4);  opacity: 0; box-shadow: 0 0 4px 1px rgba(255, 128, 171, 0), 0 0 10px 3px rgba(233, 30, 99, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #pageLoadOverlay .qm-loader__ghost,
    #pageLoadOverlay .qm-loader__spark,
    #pageLoadOverlay .qm-loader__trail i { animation: none; }
}

/* ── Toasts (script.js showToast → .toast.toast-<type>) ────────────────── */
html body .toast {
    z-index: 13000; /* above the guided tour (12000) and quiz deck (12500) */
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-cream);
    color: var(--qm-ink);
    font: 700 14px/1.35 var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html body .toast.toast-success,
html body .toast.success {
    background: var(--qm-cream);
    color: var(--qm-ink);
}
html body .toast.toast-error,
html body .toast.error {
    background: var(--qm-red);
    color: #fff;
}
html body .toast.toast-warning,
html body .toast.warning {
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
}
html body .toast.toast-info,
html body .toast.info {
    background: var(--qm-s3);
    color: #fff;
}

/* ── PWA install prompt (#pwaInstallOverlay) ───────────────────────────── */
#pwaInstallOverlay {
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#pwaInstallOverlay .pwa-popup {
    border: 0;
    border-radius: var(--qm-r-sheet);
    background: var(--qm-s1);
    color: var(--qm-fg);
    box-shadow: var(--qm-shadow-card-lift);
}
#pwaInstallOverlay .pwa-title {
    font: 800 26px/1.05 var(--qm-disp);
    letter-spacing: -.035em;
}
#pwaInstallOverlay .pwa-desc { color: var(--qm-fg2); }
#pwaInstallOverlay .pwa-app-icon,
#pwaInstallOverlay .pwa-icon-wrap { border-radius: 30%; }
#pwaInstallOverlay .pwa-install-btn {
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#pwaInstallOverlay .pwa-install-btn:hover { transform: translateY(-1px); }
#pwaInstallOverlay .pwa-install-btn:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#pwaInstallOverlay .pwa-later-btn {
    height: 48px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: transparent;
    color: var(--qm-fg);
    font: 600 15px var(--qm-sans);
    transition: opacity .14s;
}
#pwaInstallOverlay .pwa-later-btn:hover { opacity: .8; }
#pwaInstallOverlay .pwa-close {
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
}
#pwaInstallOverlay :is(.pwa-install-btn, .pwa-later-btn, .pwa-close):focus-visible {
    outline: none;
    box-shadow: var(--qm-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    html body .app-nav:is(#qmDock, .app-nav) .nav-item,
    html body .app-nav:is(#qmDock, .app-nav) .nav-item::before { transition: none; }
}

/* No green status dots anywhere in the app (Simon, Oct 2026): online/live
   presence dots, the glowing pulse in the Lounge and the dot chips are gone
   for good. Scripts toggle some of them with inline display, hence
   !important. Text labels next to them stay. */
html body :is(
    .contact-online-dot,
    .chat-hdr-online-dot,
    .online-dot,
    .ul-online-dot,
    .gc-hub-card__live-dot,
    .gc-room-online-dot,
    .gc-live-dot,
    .lng-live i,
    .lng-entry-hint .on i,
    .qm-dot,
    .shrl-loggedin-dot,
    .gh-free-pill
) { display: none !important; }
html body :is(.support-chat-head-status, .auth-email-chip)::before { content: none !important; display: none !important; }

/* App canvas behind every screen = the design canvas, flat. chat-vibe.css
   painted the body burgundy (#190B14) with pink/purple glow orbs. Screens
   fade in from opacity 0 on every tab switch (style.css .screen
   transition), so for a few frames that pink body shone through - the
   "short red flicker" when opening the Chat tab. */
html:root { background: var(--qm-bg); }
html:root body {
    background: var(--qm-bg) !important;
}

/* == B: toast taps == */
/* The idle toast (empty, opacity 0) sits at z-index 13000 above the quiz
   deck and tour; it must never catch a tap meant for what lies below. */
html body .toast { pointer-events: none; }
html body .toast.show { pointer-events: auto; }