/* Right panel and the coin details drawer's own scrolling.
 *
 * Layer 07 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

/* ===== FINAL RIGHT PANEL STYLE ===== */

.right-panel {
  min-width: 340px;

  padding: 26px !important;

  background:
    radial-gradient(circle at top left,
    rgba(0,255,153,.10),
    transparent 30%),

    linear-gradient(
      180deg,
      #0e161d,
      #070b10
    ) !important;

  border: 1px solid rgba(255,255,255,.07) !important;

  border-radius: 22px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);

  backdrop-filter: blur(18px);
}

/* Coin details ride down the page the way the sidebar does (Ryan, 23 July).
   Same conflict the sidebar had: the panel is position:sticky AND was
   min-height:100vh, so a long details drawer (chart + drivers + What Changed +
   Ask AI) overflowed past the viewport with nowhere to scroll — you had to
   scroll the whole page, which unpinned it. Fixing min and max to the same
   height makes it a viewport-tall pane that scrolls its own contents, so it
   stays visible on every scroll. Bottom stop clears the disclaimer bar. */
.right-panel {
  min-height: calc(100vh - 88px);
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.right-panel::-webkit-scrollbar { width: 8px; }
.right-panel::-webkit-scrollbar-track { background: transparent; }
.right-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.right-panel:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); }