/* ================================================================
   board-desk.css — the page lies on a themed desk (see js/core/BoardDesk.js)
   modern-themes.css is appended later by the head script, so these rules
   use html[...] body … + !important to win.
   ================================================================ */

/* The board element fills the whole screen: let the desk show through it.
   (The page itself and its shadow are drawn on the board by BoardDesk.js.) */
html[data-theme-family="modern"] body .zen-workspace > .canvas-container-centered {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Desk depth: a soft light pool behind the page and gently darker edges.
   Painted under the board (DOM order), never clickable. */
html[data-theme-family="modern"] body .zen-workspace::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 58% at 50% 46%, color-mix(in srgb, var(--mt-surface) 55%, transparent), transparent 70%),
        radial-gradient(ellipse 120% 95% at 50% 46%, transparent 58%, rgba(40, 36, 60, .07) 100%);
}
html[data-theme-family="modern"][data-theme="dark"] body .zen-workspace::before {
    background:
        radial-gradient(ellipse 62% 58% at 50% 46%, color-mix(in srgb, var(--mt-accent) 9%, transparent), transparent 70%),
        radial-gradient(ellipse 120% 95% at 50% 46%, transparent 52%, rgba(0, 0, 0, .38) 100%);
}
/* Feedback mode paints its own workspace colour — keep it plain there. */
html body.is-feedback-mode .zen-workspace::before { display: none; }

/* ── Opening glide (body.fk-board-intro is set once, for ~1.4 s) ── */
@keyframes fkDeskPageIn {
    from { opacity: 0; translate: 0 18px; scale: .985; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
}
@keyframes fkDeskUp    { from { opacity: 0; translate: 0 28px; }  to { opacity: 1; translate: 0 0; } }
@keyframes fkDeskDown  { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fkDeskLeft  { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fkDeskRight { from { opacity: 0; translate: 24px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes fkDeskFade  { from { opacity: 0; } to { opacity: 1; } }

body.fk-board-intro .zen-workspace::before { animation: fkDeskFade .9s ease-out both; }
body.fk-board-intro .zen-workspace > .canvas-container-centered {
    animation: fkDeskPageIn .75s cubic-bezier(.22, 1, .36, 1) .05s both;
}
body.fk-board-intro #pinnedBottomBar { animation: fkDeskUp .6s cubic-bezier(.22, 1, .36, 1) .25s both; }
body.fk-board-intro .presence-notch { animation: fkDeskDown .55s cubic-bezier(.22, 1, .36, 1) .3s both; }
body.fk-board-intro :is(#main-ui-controls, #main-ui-controls-left) { animation: fkDeskDown .55s cubic-bezier(.22, 1, .36, 1) .35s both; }
body.fk-board-intro .side-tab { animation: fkDeskLeft .5s cubic-bezier(.22, 1, .36, 1) .4s both; }
body.fk-board-intro .nav-tab  { animation: fkDeskRight .5s cubic-bezier(.22, 1, .36, 1) .4s both; }
body.fk-board-intro .side-tab:nth-child(2), body.fk-board-intro .nav-tab:nth-child(2) { animation-delay: .46s; }
body.fk-board-intro .side-tab:nth-child(3), body.fk-board-intro .nav-tab:nth-child(3) { animation-delay: .52s; }
body.fk-board-intro .side-tab:nth-child(4), body.fk-board-intro .nav-tab:nth-child(4) { animation-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
    body.fk-board-intro * { animation: none !important; }
}

/* Closed side panels wait just off-screen; their shadows used to spill a grey
   smudge onto the board edges. Shadow only while open.
   (:not(#…) only raises specificity above the theme's panel rule, which has IDs.) */
html[data-theme-family="modern"] body :is(.side-system.closed .side-panel, .side-panel.collapsed, .nav-system:not(.lib-active) .nav-panel,
    .slide-panel-sidebar:not(.open), .quran-sidebar-container:not(.open) .quran-sidebar, .ai-sidebar-container:not(.open) .ai-sidebar,
    .search-sidebar-container:not(.open) .search-sidebar, .chat-slider:not(.open), .steam-side-container:not(.open) .steam-side):not(#fk-x):not(#fk-y) {
    box-shadow: none !important;
}