/* =============================================================================
 * Grafo — Glass Spotlight: premium 3D hover for the workspace header
 * (the row with the workspace name + collapse «) and the page cover.
 *
 * Strict scope: only two surfaces.
 *   - .workspace-switcher          (sidebar top)  → .gs-tilt + .gs-spot
 *   - .page-cover.has-cover        (page header)  → .gs-tilt + .gs-spot
 *
 * Visual recipe:
 *   1. Real frosted glass background (var(--glass-bg/blur))
 *   2. Top-edge highlight via ::before
 *   3. Pointer-tracked specular ::after (radial centred on --gs-mx/--gs-my)
 *   4. Soft 3D tilt driven by --gs-rx / --gs-ry
 *   5. Lift shadow on hover, calm spring transition
 *
 * Reduced motion → the spotlight stays put, no tilt, just a soft glow.
 * Mobile        → only background + shadow polish, no tilt.
 * ============================================================================= */

:root {
  --gs-radius:        14px;
  --gs-blur:          22px;
  --gs-saturate:      1.55;
  --gs-tilt:          5deg;
  --gs-lift:          3px;
  --gs-glow:          rgba(255, 255, 255, 0.18);
  --gs-glow-strong:   rgba(255, 255, 255, 0.28);
  --gs-bg:            rgba(255, 255, 255, 0.05);
  --gs-bg-hover:      rgba(255, 255, 255, 0.10);
  --gs-border:        rgba(255, 255, 255, 0.10);
  --gs-border-hover:  rgba(255, 255, 255, 0.24);
  --gs-shadow:        0 8px 22px rgba(0, 0, 0, 0.30),
                      inset 0 1px 0 rgba(255, 255, 255, 0.10),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  --gs-shadow-hover:  0 22px 60px rgba(0, 0, 0, 0.55),
                      0 6px 18px rgba(0, 0, 0, 0.40),
                      inset 0 1px 0 rgba(255, 255, 255, 0.18),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  --gs-spring:        cubic-bezier(0.22, 1, 0.36, 1);

  /* Per-element values driven by glass-spotlight.js */
  --gs-mx: 50%;
  --gs-my: 50%;
  --gs-rx: 0deg;
  --gs-ry: 0deg;
}

:root[data-theme="light"] {
  --gs-glow:          rgba(15, 18, 28, 0.10);
  --gs-glow-strong:   rgba(15, 18, 28, 0.16);
  --gs-bg:            rgba(255, 255, 255, 0.65);
  --gs-bg-hover:      rgba(255, 255, 255, 0.85);
  --gs-border:        rgba(15, 18, 28, 0.08);
  --gs-border-hover:  rgba(15, 18, 28, 0.18);
  --gs-shadow:        0 8px 22px rgba(15, 18, 28, 0.10),
                      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --gs-shadow-hover:  0 18px 42px rgba(15, 18, 28, 0.16),
                      0 6px 14px rgba(15, 18, 28, 0.10),
                      inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ── Workspace switcher (sidebar top) ──────────────────────────────────── */
/* High-specificity selector to override sidebar-solid-final.css and other
 * legacy rules that force `background: transparent !important` on the
 * workspace switcher. */
.workspace-switcher,
html[data-visual] #sidebar .workspace-switcher,
html[data-visual="liquid-glass"] #sidebar .workspace-switcher,
html[data-safe-glass="true"] .workspace-switcher {
  position: relative;
  border-radius: var(--gs-radius) !important;
  border: 1px solid var(--gs-border) !important;
  background: var(--gs-bg) !important;
  box-shadow: var(--gs-shadow) !important;
  backdrop-filter: blur(var(--gs-blur)) saturate(var(--gs-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--gs-blur)) saturate(var(--gs-saturate)) !important;
  transform-style: preserve-3d;
  transition:
    background 180ms var(--gs-spring),
    border-color 180ms var(--gs-spring),
    box-shadow 260ms var(--gs-spring),
    transform 220ms var(--gs-spring) !important;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  margin: 8px !important;
}
.workspace-switcher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.18) 0%,
                rgba(255, 255, 255, 0)    32%);
  opacity: 0.85;
  z-index: 0;
}
.workspace-switcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(180px 130px at var(--gs-mx) var(--gs-my),
                              var(--gs-glow-strong) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 240ms var(--gs-spring);
  z-index: 0;
  mix-blend-mode: overlay;
}
.workspace-switcher > * { position: relative; z-index: 1; }
.workspace-switcher:hover,
html[data-visual] #sidebar .workspace-switcher:hover,
html[data-visual="liquid-glass"] #sidebar .workspace-switcher:hover {
  background: var(--gs-bg-hover) !important;
  border-color: var(--gs-border-hover) !important;
  box-shadow: var(--gs-shadow-hover) !important;
  transform: translateZ(0)
             rotateX(var(--gs-rx))
             rotateY(var(--gs-ry))
             translateY(calc(var(--gs-lift) * -1));
}
.workspace-switcher:hover::after { opacity: 1; }

/* ── Page cover ─────────────────────────────────────────────────────────── */
.page-cover.has-cover {
  position: relative;
  border-radius: 18px;
  margin: 12px 14px 22px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  box-shadow: var(--gs-shadow);
  transform-style: preserve-3d;
  transition:
    box-shadow 360ms var(--gs-spring),
    transform 360ms var(--gs-spring),
    border-color 200ms var(--gs-spring);
}

/* Top-edge highlight strip on the cover. */
.page-cover.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0)    18%,
                rgba(255, 255, 255, 0)    78%,
                rgba(0, 0, 0, 0.18)       100%);
  z-index: 2;
}

/* Pointer-tracked specular highlight on the cover. */
.page-cover.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(280px 200px at var(--gs-mx) var(--gs-my),
                              rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms var(--gs-spring);
  z-index: 2;
  mix-blend-mode: overlay;
}

/* Cover image keeps its own size; we just gently scale it during hover so
 * the parallax feels alive without changing layout. */
.page-cover.has-cover img {
  transition: transform 600ms var(--gs-spring);
  will-change: transform;
}

.page-cover.has-cover:hover {
  border-color: var(--gs-border-hover);
  box-shadow: var(--gs-shadow-hover);
  transform: rotateX(var(--gs-rx)) rotateY(var(--gs-ry)) translateZ(0);
}
.page-cover.has-cover:hover::after { opacity: 1; }
.page-cover.has-cover:hover img {
  transform: scale(1.025)
             translate3d(calc(var(--gs-ry) * 1.2px), calc(var(--gs-rx) * -1.2px), 0);
}

/* The 3D scene needs perspective on the parent. We attach it on the
 * scroll container so child rotations look natural. */
.editor-scroll,
.sidebar-inner {
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .workspace-switcher,
  .page-cover.has-cover,
  .page-cover.has-cover img {
    transition: none !important;
    transform: none !important;
  }
  .workspace-switcher:hover,
  .page-cover.has-cover:hover {
    transform: none !important;
  }
  .workspace-switcher:hover img,
  .page-cover.has-cover:hover img { transform: none !important; }
}

/* ── Mobile: keep the look, drop the tilt + parallax ──────────────────── */
@media (max-width: 720px) {
  .workspace-switcher,
  .page-cover.has-cover { transform: none !important; }
  .workspace-switcher:hover,
  .page-cover.has-cover:hover { transform: none !important; }
  .page-cover.has-cover:hover img { transform: scale(1.01); }
}

/* ── Backdrop-filter fallback ─────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workspace-switcher { background: rgba(20, 22, 28, 0.92); }
  :root[data-theme="light"] .workspace-switcher { background: rgba(255, 255, 255, 0.96); }
}


/* =============================================================================
 * Sidebar container — single glass panel covering the whole sidebar.
 * The items inside are NOT modified; the visible glass effect is on the
 * container itself.
 * ============================================================================= */

html[data-visual] #sidebar,
html[data-visual="liquid-glass"] #sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(20, 22, 28, 0.55) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    8px 0 32px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  position: relative;
  isolation: isolate;
}

/* Top sheen + corner light highlight, like the reference glass card. */
html[data-visual] #sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* very soft top sheen */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0)    14%,
      rgba(255, 255, 255, 0)    86%,
      rgba(0, 0, 0, 0.18)       100%),
    /* diagonal corner reflection */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 28%);
  z-index: 0;
}

/* Light theme variant for the sidebar panel */
html[data-theme="light"][data-visual] #sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
  border-right: 1px solid rgba(15, 18, 28, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    8px 0 28px rgba(15, 18, 28, 0.10) !important;
}

/* The inner scroll container should not paint over the sheen. It MUST keep
   its absolute inset:0 layout (from notion.css) so overflow-y scrolling
   works when the page list overflows — `position: relative` here would let
   the inner grow to full content height and kill the scroll. */
html[data-visual] #sidebar .sidebar-inner {
  background: transparent !important;
  z-index: 1;
}

/* =============================================================================
 * Immersive ambient background behind the editor (right pane).
 * Adds a soft gradient + faint orb so the empty area to the right of a page
 * feels alive, like the glass reference. The editor stays fully readable.
 * ============================================================================= */

html[data-visual] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(120, 140, 200, 0.14), transparent 60%),
    radial-gradient(900px 600px at 92% 110%, rgba(180, 130, 220, 0.10), transparent 60%),
    radial-gradient(700px 460px at 50% 50%, rgba(120, 160, 220, 0.05), transparent 70%),
    linear-gradient(180deg, #0d0e12 0%, #0a0b0f 100%);
}
html[data-theme="light"][data-visual] body::before {
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(120, 140, 200, 0.10), transparent 60%),
    radial-gradient(900px 600px at 92% 110%, rgba(180, 130, 220, 0.08), transparent 60%),
    linear-gradient(180deg, #f6f7fb 0%, #eef0f6 100%);
}

@media (prefers-reduced-motion: reduce) {
  html[data-visual] body::before { transition: none !important; }
}
@media (max-width: 720px) {
  html[data-visual] #sidebar { backdrop-filter: blur(18px) saturate(1.4) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; }
}


/* ── Cover actions: don't disappear before user can click them ────────────
 *   - Keep visible while either the cover OR the actions are hovered.
 *   - Add a 280ms delay on hide so the cursor can travel from the cover
 *     to the buttons without losing them.
 *   - Boost their z-index and pointer area.
 */
.page-cover-actions {
  z-index: 6 !important;
  pointer-events: auto !important;
  /* small invisible padding so the hit-area is more forgiving */
  padding: 6px !important;
  margin: -6px !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
}
.page-cover-actions {
  transition-delay: 280ms; /* delay on hide */
}
.page-cover:hover .page-cover-actions,
.page-cover .page-cover-actions:hover,
.page-cover:focus-within .page-cover-actions {
  opacity: 1 !important;
  transition-delay: 0ms !important; /* show immediately */
  transform: translateY(0) !important;
}
/* Modern browsers: keep actions visible if the cover OR any of its
 * descendants are hovered. */
@supports selector(:has(*)) {
  .page-cover:has(.page-cover-actions:hover) .page-cover-actions {
    opacity: 1 !important;
    transition-delay: 0ms !important;
  }
}
.cover-action-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 7 !important;
}

/* Cover spotlight follows pointer through CSS variable --gs-mx/--gs-my,
 * already wired by glass-spotlight.js. Make the radial highlight visible
 * even before hover so the surface always feels alive. */
.page-cover.has-cover::after {
  background: radial-gradient(
    320px 220px at var(--gs-mx, 50%) var(--gs-my, 50%),
    rgba(255, 255, 255, 0.30) 0%,
    transparent 70%
  ) !important;
  /* default opacity 0; brighter on hover */
}