/* ═══════════════════════════════════════════════════════════════════════════
   docview.css — the document overlay (Run 29, plan §4.7 + amendment A4).

   Loaded by the admin panel, the teacher portal and the manager console. All
   three ship the SAME token names (--bg-*, --text-*, --border-default) and the
   same single dark design — the panel has no light theme — so the overlay reads
   the host's tokens and carries a literal fallback for each in case it is ever
   loaded somewhere that has none.

   The document inside the iframe is LIGHT (view.css paints its own #f4f6f8):
   that is deliberate. A page of a PDF is white paper; a dark frame around it is
   the chrome, not the document.
   ═══════════════════════════════════════════════════════════════════════════ */

.docview {
    position: fixed;
    inset: 0;
    /* Above .modal-overlay (100) so a file opened from inside a modal is
       readable; below the toast host (3000) so "the server refused that" is
       never hidden behind a document. */
    z-index: 2900;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #0A0D1A);
}

.docview-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    /* The portal and the console are installable PWAs — on a notched iPhone the
       bar must not sit under the rounded corner. */
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    padding-top: max(6px, env(safe-area-inset-top));
    background: var(--bg-secondary, #101428);
    border-bottom: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
}

.docview-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #F1F3F9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The element carries dir="ltr" (docview.js): a file name's structure is
       left-to-right whatever script it is written in, so "ورقة 2026.pdf" keeps
       its extension on the end. That makes text-align:start mean "left", which
       on an RTL page parks the name against the DOWNLOAD icon with a gap after
       the back control — cold-read on the Arabic portal at 390px. Aligning it
       to the page's own start edge fixes the placement without touching the
       direction of the text itself. */
    text-align: start;
}

html[dir="rtl"] .docview-name {
    text-align: right;
}

.docview-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px — the reachable-tap floor this project has used since Run 19. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-primary, #F1F3F9);
    cursor: pointer;
    text-decoration: none;
}

.docview-btn:hover,
.docview-btn:focus-visible {
    background: var(--bg-input, rgba(16, 20, 40, 0.6));
}

.docview-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* RTL: the back chevron points the other way, like the portal's own header and
   the student app's ScreenHeader. */
html[dir="rtl"] .docview-back svg {
    transform: scaleX(-1);
}

/* ── Run 43 B1: the ⬇ inside the STAFF NATIVE APP is a share <button> ────────
   Every rule below is scoped to `button.docview-dl` or to classes only that
   button carries, so the anchor every other surface still gets renders exactly
   as before. The button holds BOTH glyphs; the state picks one:
     idle  — the download arrow (the same glyph the anchor shows);
     busy  — a ring, while the original file is fetched;
     ready — the iOS share glyph: the share sheet was refused because the
             fetch outlived the tap's ~5 s activation window, so the NEXT tap
             opens it. Same accessible name throughout (the file's name). */
button.docview-dl .docview-ic-share {
    display: none;
}

button.docview-dl.is-ready .docview-ic-dl {
    display: none;
}

button.docview-dl.is-ready .docview-ic-share {
    display: block;
}

button.docview-dl[data-state="busy"] {
    cursor: progress;
}

button.docview-dl[data-state="busy"] svg {
    display: none;
}

/* The ring is a flex child of the inline-flex button, so it centres exactly
   where the glyph was; the 44px tap target does not move or resize. */
button.docview-dl[data-state="busy"]::after {
    content: '';
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: docview-spin 0.8s linear infinite;
}

@keyframes docview-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    button.docview-dl[data-state="busy"]::after {
        animation-duration: 2.4s;
    }
}

/* The fetch's answer when it fails (no network, a refused request), under the
   header. Empty is the normal state and takes no space; the element exists from
   the moment the overlay opens so a screen reader hears what lands in it. */
.docview-msg {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary, #F1F3F9);
    background: var(--bg-secondary, #101428);
    border-bottom: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
    border-inline-start: 3px solid var(--error-color, #EF4136);
}

.docview-msg:empty {
    display: none;
}

.docview-frame {
    flex: 1 1 auto;
    min-height: 0;
    background: #f4f6f8;
}

.docview-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The 👁 affordance beside a request material's ⬇ download chip (amendment A8).
   The chip itself keeps its `download` attribute — and the overlay never
   intercepts one — so without this control that allow-list entry is dead code,
   on the one file the plan singles out as "the exact thing you want to LOOK at".
   Icon only, per A4; the padding is what makes an emoji a real tap target. */
.docview-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    /* An emoji on its own reads as decoration in a row of metadata (cold-read at
       390px). The border is what makes it read as a control — the word that
       would otherwise do that job is exactly what A4 keeps off this surface. */
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
    border-radius: var(--radius-sm, 8px);
    line-height: 1;
    text-decoration: none;
}

.docview-open:hover,
.docview-open:focus-visible {
    background: var(--bg-input, rgba(16, 20, 40, 0.6));
}

/* ── A LINK INSIDE A MESSAGE ──────────────────────────────────────────────────
   Run 29 made the three chat surfaces render links, and NONE of the three
   stylesheets has ever styled an anchor inside a bubble — there were none to
   style. Measured on the running panel, portal and console: the anchors came out
   at the user agent's own rgb(0,0,238) over the dark bubbles, i.e. **1.56 : 1**
   on an outgoing bubble and 1.95 : 1 on an incoming one. Shipping the fix for
   "I can't click links" with links nobody can read is not a fix.

   This colour measures 7.16 : 1 on the outgoing bubble (rgb(29,32,85)) and
   8.72 : 1 on the incoming one (rgb(15,19,38)) — AA with real headroom, so a
   later palette nudge cannot silently break it. It is a lighter tint of the
   shipped --accent-light (#7B80D4), which itself measures 4.23 : 1 there and
   would have failed AA for 0.9rem text.

   ⚠ `:not([class])` is the whole scope, and it is exact: every pre-existing
   anchor inside a bubble carries a class (.chat-file-link, .chat-file,
   .chat-att, .chat-file-plain), while links.js emits a bare <a href target rel>.
   So this rule can only ever reach a linkified URL, and the HEIC chip, the file
   chips and the manager's attachment keep the styling they shipped with. */
.chat-bubble a[href]:not([class]) {
    color: #A5AEF2;
    text-decoration: underline;
    /* A URL is left-to-right whatever the sentence around it is; `plaintext`
       takes the direction from the run's own first strong character, exactly as
       .chat-bubble itself already does. */
    unicode-bidi: plaintext;
}