.sheet-grabber { display: none; }

@keyframes sheet-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* Narrow screens: every panel is a bottom sheet of at most half the screen that rests on the dock, so the model stays visible above it. */
@media (max-width: 740px) {
  #sidebar, #cameraPanel, #graphicsPanel, #fixtureLightPanel, #fixturePane, #doorPanel { --sheet-height: 50dvh; }
  #app .control-panel {
    position: absolute; inset: auto 0 var(--dock-clear, 96px) 0; z-index: 9;
    width: auto; min-width: 0; height: auto; max-height: min(var(--sheet-height), calc(100dvh - var(--dock-clear, 96px) - 16px));
    margin: 0 8px;
    padding: 0 16px 16px;
    border-radius: 26px;
    transition: max-height .36s var(--fp-ease);
  }
  #app .control-panel:not(.fixture-pane) { animation: sheet-in .36s var(--fp-ease) both; }
  #app .control-panel.is-expanded { max-height: calc(100dvh - var(--dock-clear, 96px) - 16px); }
  #app .control-panel .sheet-grabber {
    position: sticky; top: 0; z-index: 3; display: grid; place-items: center;
    width: calc(100% + 32px); height: 28px; margin: 0 -16px; padding: 0; border: 0; touch-action: none;
    background: linear-gradient(rgb(250 252 251 / .92) 55%, rgb(250 252 251 / 0));
  }
  .sheet-grabber::before { content: ""; width: 40px; height: 5px; border-radius: 99px; background: rgb(38 60 50 / .28); transition: background-color .2s ease, width .3s var(--fp-ease); }
  .sheet-grabber:hover::before, .sheet-grabber:active::before { width: 52px; background: rgb(38 60 50 / .45); }
  .control-panel .fp-head { padding-top: 0; }

  /* Only one sheet at a time: the light detail replaces the light list. */
  body.fixture-pane-open #fixtureLightPanel { display: none; }
}
@media (max-width: 740px) and (prefers-reduced-motion: reduce) {
  #app .control-panel:not(.fixture-pane) { animation-duration: .01s; }
  #app .control-panel { transition-duration: .01s; }
}