/*
 * Burofolk document-viewer host chrome.
 *
 * Layout only. The vendored runtime (lmkit-doc-viewer-wasm.css) owns every
 * pixel of the rendering surface and the floating toolbar; this file just
 * makes the host element a sized, positioned stage the viewer fills. Consumers
 * size their own container (lightbox body, preview panel); the host stretches
 * to it.
 */
.bf-document-viewer-host {
    position: relative;
    width: 100%;
    height: 100%;
    /* A flex/grid child must be allowed to shrink below its content, or the
       virtualized page list can't establish its own scroll height. */
    min-height: 0;
    overflow: hidden;
    background: var(--surface, #fff);
    /* The viewer's layers (its docked toolbar, z-index 10 inside the shadow root; the loading cover,
       z-index 5) stack INSIDE the host, never against the page: without this they joined the page's
       root stacking context and painted over the popovers of the bar above (My Work's Filters sheet
       under the reading pane's toolbar). Native full screen is the top layer and is unaffected. */
    isolation: isolate;
}

/* The viewer's own stage. The shadow root attaches HERE (not the host), so the host can hold the
   loading cover beside it - a shadow host stops rendering its light-DOM children the moment a shadow
   attaches, so a cover parented on the host directly would vanish before anything loaded. Fills the
   definite-height host so the docked toolbar + scroll viewport size correctly. */
.bf-document-viewer-stage {
    position: absolute;
    inset: 0;
}

/* Loading cover (light DOM, sibling of the stage). Held over the ENTIRE cold start - SDK + WASM
   download, document fetch/parse, first page paint - then cross-faded out, so the panel never shows a
   blank surface, bare unstyled chrome, an empty "0 / 0", or a layout shift (CLS). Styled here in the
   light DOM, so it does not depend on the viewer's in-shadow stylesheet. A calm surface + spinner
   (no fake page rectangle), cross-fading straight into the rendered document. */
.bf-document-viewer-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    opacity: 1;
    transition: opacity 0.32s ease;
}
.bf-document-viewer-loading.is-done {
    opacity: 0;
    pointer-events: none;
}
/* A soft accent halo behind the spinner - matches the viewer's own in-shadow loading overlay, so the
   cold cover, the SDK overlay, and the rendered document form one seamless sequence. Deliberately NO
   page-shaped rectangle: a blank sheet drawn in the middle read as an "invalid page" flashing before
   the real document, which looked broken. */
.bf-document-viewer-loading::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(10, 132, 255, 0.09), transparent);
    /* Nothing is drawn for the first 600ms: a mount that finishes in under a second
       used to flash a halo and a spinning ring in the middle of the pane and take
       them away again, which reads as a glitch rather than as progress. A wait long
       enough to notice still explains itself. */
    opacity: 0;
    animation: bf-document-viewer-wait-in 0.24s ease 0.6s forwards;
}
.bf-document-viewer-loading::after {
    content: "";
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 0, 0, 0.08);
    border-top-color: #0a84ff;
    opacity: 0;
    animation: bf-document-viewer-spin 0.7s linear infinite,
               bf-document-viewer-wait-in 0.24s ease 0.6s forwards;
}
@keyframes bf-document-viewer-spin { to { transform: rotate(360deg); } }
/* What the wait is, under the ring (the PDF view of an office document may be rendered on this open).
   Out of the flex flow so the ring stays centred; it appears with the ring, never before. */
.bf-document-viewer-loading-caption {
    position: absolute;
    top: calc(50% + 34px);
    left: 16px;
    right: 16px;
    z-index: 1;
    text-align: center;
    font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: rgba(0, 0, 0, 0.56);
    opacity: 0;
    animation: bf-document-viewer-wait-in 0.24s ease 0.6s forwards;
}
:root[data-theme="dark"] .bf-document-viewer-loading-caption { color: rgba(255, 255, 255, 0.62); }
@keyframes bf-document-viewer-wait-in { to { opacity: 1; } }
/* Dark is the APP's setting, never the operating system's: this cover lives in the
   light DOM of a page whose theme is [data-theme] on <html>. Read from the OS, it
   painted a black panel with a grey ring inside a light app for the length of a cold
   start (owner, 2026-08-17: "une bulle ovale grise en plein milieu ... c'est tres
   laid") - the same lesson as the reading surface's own theme, one layer out. */
:root[data-theme="dark"] .bf-document-viewer-loading { background: #1c1c1e; }
/* The toolbar's band while the runtime boots (the docked toolbar: 44px + its 0.8px hairline, --lmktb-material over the
   reading ground): the frame's chrome stands from the first frame, the controls appear inside it. */
.bf-document-viewer-loading.has-toolbar-top {
    background: linear-gradient(to bottom, #fbfbfc 0, #fbfbfc 44px, rgba(0, 0, 0, 0.08) 44px, rgba(0, 0, 0, 0.08) 45px, #f5f5f7 45px);
}
:root[data-theme="dark"] .bf-document-viewer-loading.has-toolbar-top {
    background: linear-gradient(to bottom, #2c2c2e 0, #2c2c2e 44px, rgba(255, 255, 255, 0.08) 44px, rgba(255, 255, 255, 0.08) 45px, #1c1c1e 45px);
}
:root[data-theme="dark"] .bf-document-viewer-loading::after { border-color: rgba(255, 255, 255, 0.14); border-top-color: #4f8cff; }
@media (prefers-reduced-motion: reduce) {
    /* No spin - but the ring still appears after the same wait, so only the
       rotation goes, never the honesty. */
    .bf-document-viewer-loading::after { animation: bf-document-viewer-wait-in 0.24s ease 0.6s forwards; }
}

/* Text-selection readiness pill (light DOM, floats over the bottom of the page area). The native text
   layer is extracted lazily after a document opens, so for a beat a drag-select does nothing; this
   explains the wait instead of leaving it looking broken, and disappears the instant the page is
   selectable. A frosted neutral surface with the accent carried ONLY on the spinner - never a filled
   tint - so it reads as a quiet status, not an alert. */
.bf-document-viewer-textstatus {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 7px 14px 7px 11px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text, #1c1c1e);
    background: color-mix(in srgb, #f5f5f7 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    animation: bf-document-viewer-textstatus-in 0.18s ease both;
}
.bf-document-viewer-textstatus[hidden] { display: none; }
.bf-document-viewer-textstatus-spin {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.14);
    border-top-color: #0a84ff;
    animation: bf-document-viewer-spin 0.7s linear infinite;
}
@keyframes bf-document-viewer-textstatus-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
:root[data-theme="dark"] .bf-document-viewer-textstatus {
    color: #f5f5f7;
    background: color-mix(in srgb, #2c2c2e 84%, transparent);
    border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .bf-document-viewer-textstatus-spin { border-color: rgba(255, 255, 255, 0.18); border-top-color: #4f8cff; }
@media (prefers-reduced-motion: reduce) {
    .bf-document-viewer-textstatus { animation: none; }
    .bf-document-viewer-textstatus-spin { animation: none; }
}

/* Text-layer-FAILURE alert: a required piece (the text engine / a wasm assembly) did not load, so
   text selection + search are off. The document still renders, but this is a hard failure, so it reads
   RED and unmissable - a frosted surface with a clear red wash, border, glyph and text. */
.bf-document-viewer-banner {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 32px);
    padding: 8px 15px 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #b42318;
    background: color-mix(in srgb, #fff1f0 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, #d92d20 45%, transparent);
    border-radius: 12px;
    box-shadow: 0 6px 22px -10px rgba(180, 35, 24, 0.4);
    animation: bf-document-viewer-textstatus-in 0.18s ease both;
}
/* Under a toolbar docked on top (45px band, stacked above the banner inside the shadow root) the banner
   stands below the band, never under it: the band hid its first line. */
.bf-document-viewer-host.has-toolbar-top > .bf-document-viewer-banner { top: 57px; }
.bf-document-viewer-banner-glyph {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d92d20;   /* solid red warning glyph */
    -webkit-mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2zm0 6c.55 0 1 .45 1 1v5a1 1 0 0 1-2 0V9c0-.55.45-1 1-1zm0 9.25a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2z'/%3E%3C/svg%3E");
    mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2zm0 6c.55 0 1 .45 1 1v5a1 1 0 0 1-2 0V9c0-.55.45-1 1-1zm0 9.25a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .bf-document-viewer-banner {
    color: #ffb4ab;
    background: color-mix(in srgb, #3b1614 86%, transparent);
    border-color: color-mix(in srgb, #f97066 40%, transparent);
}
:root[data-theme="dark"] .bf-document-viewer-banner-glyph { background: #f97066; }
@media (prefers-reduced-motion: reduce) {
    .bf-document-viewer-banner { animation: none; }
}