/* Extracted from assistant_widget.php on 2026-09-10 — see the note there for why. * Byte-for-byte the CSS that used to be inlined into EVERY page of this site. * Do not re-inline it: /assets/** is served immutable, max-age=31536000, so this file is * fetched once per visitor and then never again, while an inline block is re-sent with every * single page view because HTML is not cacheable. */ /* ⚠️ --aria-grad lives on :root, not on #ariaWidget, because #ariaFab is reparented out of the widget into the drawer — a variable scoped to the old parent simply stopped resolving there and the button silently lost its gradient (it rendered as a bare dark pill). Same root cause as the click gate below: an element that can be moved must not depend on where it used to live. #ariaFab restates the font for the same reason. */ :root{--aria-grad:linear-gradient(135deg,#7c5cff,#00d4ff)} #ariaWidget{font-family:'Vazirmatn',system-ui,-apple-system,sans-serif} /* ── THE FLOATING RAIL ──────────────────────────────────────────────────── One right-aligned column for every floating widget, defined once here and consumed by tanin_fab.php + fab_hub.php too. Owner request, 2026-08-06: the icons were "پخش و پلا" — scattered — because #ariaFab was anchored to the logical START and the (now-retired) hub to the logical END, so they sat on OPPOSITE sides and swapped physical corners with direction. In Persian that put Aria bottom-RIGHT, exactly where a browser-extension button lives. Three independent stacked buttons, bottom to top (2026-08-08 redesign — the hub's expand/collapse menu and its Live-radio item were retired; Tanin and Report-a-bug became standalone rail occupants instead of hidden-until- tapped menu items): slot 0 (bottom) → #bugFab (fab_hub.php) slot 1 → #taninFab (tanin_fab.php) slot 2 (top) → #ariaFab (here) PHYSICAL right, deliberately, not inset-inline-end: the column must not move when the reader switches language. This is the one place in the codebase where a logical inset is the wrong tool. --mibl-rail-clear reserves room UNDER the column for browser-extension buttons (Adobe Acrobat, password managers), which cluster in the bottom-right on desktop. Those live in the browser's own layer, NOT in our DOM, so no amount of JS can measure them — this is a reservation, not a detection, and it is a variable so it can be tuned without hunting through rules. Applied only under pointer:fine, because phones have no extension buttons. */ :root{ --mibl-rail-right:16px; --mibl-rail-bottom:18px; --mibl-rail-gap:12px; --mibl-rail-slot0:50px; /* height of #bugFab (fab_hub.php), the bottom occupant */ --mibl-rail-slot1:50px; /* height of #taninFab (tanin_fab.php), the middle occupant */ --mibl-rail-clear:0px; --rail-tuck-peek:44px; /* resting-state visible width (fab_hub.php's tuck rule) — full icon + padding, wide enough that the label is entirely clipped */ } @media(pointer:fine){ :root{ --mibl-rail-clear:64px; } } /* Phones: clear the 59px .mnav bottom bar as before; the icon-only button is narrower there (no label to clip away), so a smaller peek still reads as "about half tucked". */ @media(max-width:560px){ :root{ --mibl-rail-bottom:74px; --rail-tuck-peek:24px; } } /* Slot 2 — top of the column, above Tanin (slot 1) and the bug button (slot 0). */ #ariaFab{position:fixed;z-index:8999;inset-inline-start:auto;right:var(--mibl-rail-right,16px); bottom:calc(var(--mibl-rail-bottom,18px) + var(--mibl-rail-clear,0px) + var(--mibl-rail-slot0,50px) + var(--mibl-rail-gap,12px) + var(--mibl-rail-slot1,50px) + var(--mibl-rail-gap,12px) + env(safe-area-inset-bottom,0px)); display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:999px;cursor:pointer; background:var(--aria-grad);color:#fff;font-weight:800;font-size:14px; font-family:'Vazirmatn',system-ui,-apple-system,sans-serif; box-shadow:0 8px 26px rgba(124,92,255,.45);animation:ariaPulse 3s infinite} #ariaFab .aria-orb{width:24px;height:24px;border-radius:50%;display:block;flex:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.5))} /* Draggable to move it off any button. Resting visibility (permanently tucked to the edge, revealed on hover, via clip-path rather than transform — see the shared rule below for why) is the shared rail rule below, which is why clip-path is listed in the transition here even though the rule that animates it is separate: transition-property only takes effect once BOTH the property and a value change are present on the same element, from any source. */ #ariaFab{touch-action:none;transition:left .18s ease,top .18s ease,opacity .22s ease,transform .2s ease,clip-path .25s cubic-bezier(.2,1,.3,1)} /* ── Shared resting state for the whole rail (#ariaFab here + #taninFab/#bugFab defined elsewhere) ───────────────────────────────────────────────────────────────────────────────── Owner request, 2026-08-08: instead of fully visible by default, all three buttons now rest permanently tucked to the edge, dimmed, revealed only on hover (a tap/click still fires from the tucked state directly — click listeners don't care about clip-path — so mobile, which has no real hover, needs no separate reveal step: one tap opens/navigates immediately). row-reverse puts each button's ICON nearest the true screen edge and its LABEL innermost, so clipping away the inner side hides only the label, leaving a clean icon-only "nub" at rest — and because clip-path leaves the box's own position:fixed geometry completely untouched (only the visible/interactive WINDOW grows on reveal, nothing moves), a cursor already hovering the visible nub stays inside the box through the whole reveal transition. transform:translateX was tried first and rejected: shifting the box itself moves its hit-region out from under a stationary cursor mid-transition, so hover would immediately re-trigger the tucked state and the button could never actually stay open (verified live with Playwright). Lives HERE, not fab_hub.php: that file has its own early return for NOVA_Player.php (unrelated to this rule — it's about not stacking a 2nd super-fab-hub-style menu onto NOVA's own dense UI), which used to silently drop this shared rule too since it was defined there, leaving Aria/Tanin fully visible instead of tucked on that one page (reported live by the owner, 2026-08-08). assistant_widget.php has no such exclusion, so the rule now reaches #ariaFab and #taninFab wherever they render, including NOVA. ⚠️ SINCE 2026-08-13 this is the FALLBACK, not the live design: the drawer further down docks all three on every surface and overrides each of these with !important. What is left here is what paints in the moment before the script runs, and what remains if it never does. Do not "tidy" it away — and do not tune it either, because on a working page nobody ever sees it. */ #ariaFab,#taninFab,#bugFab{flex-direction:row-reverse;touch-action:none; clip-path:inset(0 0 0 calc(100% - var(--rail-tuck-peek,44px)) round 999px);opacity:.4} /* row-reverse is direction-relative (its main-start is the writing mode's inline-end), but the clip-path above is physical — it always keeps the rightmost sliver visible. In LTR, inline-end IS physical right, so row-reverse correctly puts the icon (1st DOM child) in that visible sliver. But these buttons sit inside on Persian pages (they set no dir of their own), and under RTL, row-reverse's main-start flips to physical LEFT — so the icon gets shoved into the clipped-away side and the LABEL (truncated) shows in the sliver instead: exactly the "no icon, truncated text" bug reported 2026-08-08. Undoing the reversal in RTL restores the same physical result: plain row's inline-start is physical right under RTL, so the icon (1st child) lands in the visible sliver again, matching LTR. */ html[dir="rtl"] #ariaFab,html[dir="rtl"] #taninFab,html[dir="rtl"] #bugFab{flex-direction:row} #ariaFab:hover,#taninFab:hover,#bugFab:hover{clip-path:none;opacity:1} #taninFab,#bugFab{transition:clip-path .25s cubic-bezier(.2,1,.3,1),opacity .25s ease} @media(prefers-reduced-motion:reduce){#ariaFab,#taninFab,#bugFab{transition:none}} /* ══ THE DRAWER — every surface ═════════════════════════════════════════════════════════════ Owner request 2026-08-13, from a phone screenshot: make these three "slide out from the edge, somewhere sensible, without getting in the way". Then, seeing it: do the same on desktop. WHY THE OLD DESIGN COULD NOT WORK ON A PHONE, measured on a 390x844 phone before changing anything: the tuck above is a two-state design — a dim sliver at rest, full reveal on :hover — and A TOUCH SCREEN HAS NO HOVER, so the second state was unreachable. All three buttons sat permanently at opacity .4, clipped to a 24px sliver, forever. The comment above reasons that mobile "needs no separate reveal step" because a tap fires from the tucked state; true for the CLICK, but it left the visual half of the design with no way to ever complete. Add the three 20x20 grips (below the 44px touch minimum) and a 390px-wide screen was carrying SIX permanent floating objects over the content. ONE MECHANISM, TWO TRIGGERS. The drawer is the same everywhere; only what opens it differs: a tap on touch, and simply arriving with the pointer on a mouse — so desktop pays no extra click for the tidier resting state, and the site looks like itself on every surface. Six resting objects become one on desktop too. ⚠️ WHAT THIS GIVES UP, deliberately and worth knowing: the per-button drag grips, an owner request from 2026-08-08, are gone. They existed because the rail lived in the bottom-right corner, where browser extensions inject their own floating buttons (that is what --mibl-rail-clear reserves room for) and something had to be movable out of the way. The drawer sits at the vertical middle of the edge instead, where nothing else is, so the problem the grips solved no longer occurs. If it ever does, the tab is the thing to make draggable — one grip, not three. The rail rules ABOVE are not dead: they are what paints before this script runs and the fallback if it never does. Everything the dock needs is !important precisely because those rules are ID-level and would otherwise win. ═════════════════════════════════════════════════════════════════════════════════════════ */ /* `@media all` is a deliberate no-op wrapper, kept only so this 60-line drawer stays one visually grouped block after its guard was widened from (hover:none) to every surface. */ @media all { /* ⚠️ PHYSICAL right and physical padding, and the RTL override below is not optional. For a COLUMN flex container the cross axis is horizontal, so align-items follows the INLINE direction: `flex-end` is physical right in LTR but physical LEFT under . Persian pages therefore right-pinned the dock and then left-aligned the buttons inside it, parking them across the middle of the screen (measured: lefts 117/154 on a 390px phone). Flipping the alignment in RTL restores the same PHYSICAL result — which is what the rest of the rail already does deliberately, so the column does not move when the reader switches language. Right padding clears the tab, which stays put as the explicit way to close. */ .mibl-dock{ position:fixed;z-index:8999;inset-inline-end:auto;right:0;top:50%; transform:translateY(-50%); display:flex;flex-direction:column;align-items:flex-end;gap:10px; padding-right:36px;pointer-events:none} html[dir="rtl"] .mibl-dock{align-items:flex-start} /* A soft scrim while open. There is no permanently empty band on a phone — the first build centred the drawer and it landed across the track title and the LIVE badge, reading as buttons colliding with text rather than as a panel. The scrim settles that: the drawer is plainly ON TOP of the page for the second it is open, the page behind stays legible enough to keep your place, and it makes "tap anywhere to dismiss" look like what it is. Lighter than the site's modal scrim (.72 + 6px blur) on purpose — this is a two-second detour, not a dialog. */ body.mibl-dock-open::after{ content:'';position:fixed;inset:0;z-index:8998;pointer-events:none; background:rgba(4,4,12,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); animation:miblDockScrim .28s ease both} @keyframes miblDockScrim{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){body.mibl-dock-open::after{animation:none}} /* ⚠️ `> *`, NOT `> button`. #taninFab is an , not a