// Bottom panel sheet styles
.bottom-panel-sheet {
  .mat-bottom-sheet-container {
    padding: 0;
    height: 60vh; // Default to 3/5 of viewport height
    max-height: 98vh;
    min-height: 20vh;
    // Fix to bottom of viewport
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    // Smooth height transitions for non-drag changes (set-initial / keyboard).
    // The release-time animations (close, expand) set transitions inline.
    transition: height 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    resize: vertical;
    overflow: hidden;
    background: var(--bottom-panel-bg);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    // While dragging: kill the height transition so the panel tracks the
    // finger 1:1. Only the parent rule — no descendant selectors — so we
    // don't trigger a style recalc on every child on dragstart.
    // Lift min-height so JS can drag the panel below the 20vh floor — the
    // close decision relies on the inline height matching the rendered one.
    &.dragging {
      transition: none !important;
      min-height: 0 !important;
    }

    // Same min-height override for the close animation: the slide-off uses
    // translateY(currentHeight); if min-height re-clamps to 20vh between
    // dragend and the transition, the panel jumps to 20vh tall.
    &.closing {
      min-height: 0 !important;
    }
  }

  .bottom-panel-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .bottom-panel-content {
    // Minimal padding for bottom sheet
    padding: 0 4px;
    flex: 1;
    overflow: hidden;
    position: relative;

    // Ensure components fill the available space
    > * {
      height: 100%;
    }
  }

  // Improve dragging experience on mobile
  .bottom-panel-header {
    // Increase touch target
    min-height: 36px;
    // Tell the browser this region is a custom gesture: it suppresses native
    // scroll/zoom on touches that start here and lets us register pointermove
    // as passive (no main-thread arbitration on every event).
    touch-action: none;
    // Better visual feedback
    &:active {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
}
