/*
 *  features-panel.css
 */
/* Container that appears under the header */
.features-panel {
  position: absolute;
  left: 0;
  right: 0;
  /* Adjust if header height changes; JS can also set this dynamically if desired */
  top: 0;
  z-index: 10;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* When we show the feature panel, set top based on header height in JS */
.features-panel[data-ready="1"] {
  /* no-op */
}
/* Optional: make sure the injected menu doesn’t jam the page edges */
.features-panel .storyboard {
  margin: 0 auto;
}
/* Small open/close animation (CSP-safe since it’s in CSS) */
.features-panel {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.features-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}