/**
 * DPXLW-320: first-paint docking reservation.
 * Search: qualified-dock-reserve, getStyles(), --q-scrollbar-width, q-dock-collapsed,
 * --q-docked-width, React #418, INIT partition.
 * Must match qualified-head viewport-lock + docked-width getStyles() so a late
 * docking.init() (Remix after hydration) does not rewrite html/body again.
 * Collapse with html.q-dock-collapsed.
 *
 * Gutter width uses --q-scrollbar-width (set by the sync cookie script, same
 * dummy-div measure as the bundle) so html[q-docked-target] is a layout no-op.
 * Do not set q-docked / q-docked-target here: that mutates html before Remix
 * hydrateRoot(document) and reopens React #418.
 *
 * DPXLW-402: the reservation holds until docking starts (the bundle sets
 * html[q-docked-target]), then only while docked (html[q-docked]). When the
 * bundle starts undocked (pilled __q_state_, defaultDocked off) or undocks
 * later (abort timeout, legacy messenger, disable()), the space is released
 * and the bundle's own undock styles apply. Regular docking only: under-header
 * docking puts q-docked-target on the header, not html.
 *
 * --q-docked-width and the offsets are set only until docking starts. After
 * that, the bundle's own html[q-docked] rules own --q-docked-width (400px, 0px
 * on a mobile viewport). Nunjucks lets docking rewrite cross-origin sheets, so
 * it rewrites this file's width @media rules too, and an html-subject rule
 * becomes a data-q-bp-* attribute toggled by its matchMedia proxy, which reads
 * the docked content width. A mobile override on html[q-docked] then switched
 * itself on and off: content <= 767px → width 0 → content > 767px → width 400,
 * every frame, at viewports 768-1167px. The bundle exempts its own copy of
 * that rule (#q-docked-base-styles) from rewriting; this file can't be exempt,
 * so its overrides stay off html[q-docked] / html[q-docked-target].
 */
html:not(.q-dock-collapsed):not([q-docked-target]) {
    --q-docked-width: 400px;
    --q-docked-viewport-offset: calc(
        var(--q-docked-width) + var(--q-scrollbar-width, 0px)
    );
    --qdvw: calc(100dvw - var(--q-docked-viewport-offset));
}

html:not(.q-dock-collapsed):not([q-docked-target]),
html:not(.q-dock-collapsed)[q-docked] {
    display: block !important;
    position: relative !important;
    contain: layout inline-size !important;
    height: 100dvh !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    container-type: inline-size !important;
    container-name: q-docked-container !important;
    transition: none !important;
}

html:not(.q-dock-collapsed):not([q-docked-target]) {
    min-width: var(--qdvw) !important;
    max-width: var(--qdvw) !important;
    width: var(--qdvw) !important;
    margin-right: var(--q-docked-viewport-offset) !important;
}

html:not(.q-dock-collapsed):not([q-docked-target]) body,
html:not(.q-dock-collapsed)[q-docked] body {
    display: block !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 100% !important;
    width: calc(100% + var(--q-scrollbar-width, 0px)) !important;
    max-width: calc(100% + var(--q-scrollbar-width, 0px)) !important;
    scroll-behavior: inherit !important;
}

/*
 * First-paint white backing in the reserved margin. html has contain:layout,
 * so position:fixed is relative to html. Same offset as #q-docked-skeleton:
 * right: calc(-1 * var(--q-docked-viewport-offset)).
 * qualified-dock-skeleton.js paints the light shimmer on top (defer).
 * Hidden once docking starts: docked shows #q-docked-skeleton instead,
 * undocked releases the space.
 */
html:not(.q-dock-collapsed):not([q-docked-target]):not([q-docked])::after {
    content: "";
    position: fixed;
    top: 0;
    right: calc(-1 * var(--q-docked-viewport-offset));
    width: var(--q-docked-width);
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 2147483000;
    box-sizing: border-box;
}

#q-dock-reserve-skeleton {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: calc(-1 * var(--q-docked-viewport-offset));
    width: var(--q-docked-width);
    height: 100%;
    padding: 16px;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    pointer-events: none;
    z-index: 2147483001;
}

html.q-dock-collapsed #q-dock-reserve-skeleton,
html[q-docked-target] #q-dock-reserve-skeleton,
html[q-docked] #q-dock-reserve-skeleton {
    display: none !important;
}

@keyframes q-reserve-shimmer {
    0% {
        background-position: -200% 0;
    }
    to {
        background-position: 200% 0;
    }
}

#q-dock-reserve-skeleton .q-sk {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: q-reserve-shimmer 1.5s infinite;
    border-radius: 4px;
}
#q-dock-reserve-skeleton .q-sk-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
#q-dock-reserve-skeleton .q-sk-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
#q-dock-reserve-skeleton .q-sk-t {
    width: 100px;
    height: 16px;
}
#q-dock-reserve-skeleton .q-sk-x {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}
#q-dock-reserve-skeleton .q-sk-v {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 16px;
}
#q-dock-reserve-skeleton .q-sk-p {
    height: 14px;
    margin-bottom: 8px;
}
#q-dock-reserve-skeleton .q-sk-p:nth-child(2) {
    width: 90%;
}
#q-dock-reserve-skeleton .q-sk-p:nth-child(3) {
    width: 75%;
}
#q-dock-reserve-skeleton .q-sk-sp {
    flex: 1;
}
#q-dock-reserve-skeleton .q-sk-sg {
    margin-bottom: 16px;
}
#q-dock-reserve-skeleton .q-sk-l {
    width: 120px;
    height: 12px;
    margin-bottom: 8px;
}
#q-dock-reserve-skeleton .q-sk-ch {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#q-dock-reserve-skeleton .q-sk-c {
    height: 20px;
    border-radius: 10px;
}
#q-dock-reserve-skeleton .q-sk-c:nth-child(1) {
    width: 80px;
}
#q-dock-reserve-skeleton .q-sk-c:nth-child(2) {
    width: 100px;
}
#q-dock-reserve-skeleton .q-sk-c:nth-child(3) {
    width: 120px;
}
#q-dock-reserve-skeleton .q-sk-cp {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
}
#q-dock-reserve-skeleton .q-sk-in {
    width: 60%;
    height: 16px;
    margin-bottom: 12px;
}
#q-dock-reserve-skeleton .q-sk-ac {
    display: flex;
    align-items: center;
    gap: 8px;
}
#q-dock-reserve-skeleton .q-sk-bt {
    width: 100px;
    height: 32px;
    border-radius: 16px;
}
#q-dock-reserve-skeleton .q-sk-ic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}
#q-dock-reserve-skeleton .q-sk-pr {
    width: 200px;
    height: 10px;
    margin: 12px auto 0;
}

@media (max-width: 767px) {
    /* Pre-docking only (see the header): once docked, the bundle's own
       html[q-docked] mobile rule applies. */
    html:not(.q-dock-collapsed):not([q-docked-target]) {
        --q-docked-width: 0px;
        --q-docked-viewport-offset: 0px;
    }

    html:not(.q-dock-collapsed)::after,
    #q-dock-reserve-skeleton {
        display: none;
    }
}