/* Bottom sheet styles for mobile search results */
.xyz-bottom-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  top: auto;
  bottom: auto;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255,255,255,0.98);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  /* use height/opacity transitions so the sheet can be fully hidden under the search box */
  transform: none;
  transition: height 220ms cubic-bezier(.22,.9,.3,1), opacity 180ms ease;
  will-change: height, opacity;
  z-index: 9999;
  display: none !important; /* hide bottom-sheet entirely; mobile will use inline desktop-style list */
  overflow: hidden; /* hide header/content when collapsed */
  height: 0; /* collapsed by default */
  opacity: 0;
}
/* .open state is controlled by JS; default positioning uses bottom and JS will
  set bottom so sheet is either visible or mostly hidden (leaving header). */

.xyz-bottom-sheet .bs-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.98);
}
.xyz-bottom-sheet .bs-handle {
  width: 28px; height: 28px; border-radius: 6px; margin-right:8px; display:inline-block; position:relative; flex:0 0 auto;
  /* keep an accessible hit target */
}
.xyz-bottom-sheet .bs-handle::before{
  content: '';
  position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(0deg);
  width: 10px; height: 10px; border-right:2px solid rgba(0,0,0,0.6); border-bottom:2px solid rgba(0,0,0,0.6);
  transition: transform 180ms ease;
  box-sizing: border-box;
}
/* default: closed -> arrow pointing up */
.xyz-bottom-sheet .bs-handle::before { transform: translate(-50%,-50%) rotate(-135deg); }
/* when open: arrow points down */
.xyz-bottom-sheet.open .bs-handle::before { transform: translate(-50%,-50%) rotate(45deg); }
.xyz-bottom-sheet .bs-title { font-weight:600; font-size:14px; }
.xyz-bottom-sheet .bs-close { background:none;border:0;padding:6px; font-size:18px; cursor:pointer; }
.xyz-bottom-sheet .bs-body { overflow:auto; -webkit-overflow-scrolling: touch; padding:8px 12px; background:transparent; }
.xyz-bottom-sheet .bs-list { list-style:none;margin:0;padding:0; }
.xyz-bottom-sheet .bs-list li { padding:10px 6px; border-bottom:1px solid rgba(0,0,0,0.04); }
.xyz-bottom-sheet .bs-list li.active { background: rgba(0,0,0,0.03); }

/* desktop: keep previous layout, don't show bottom sheet unless forced */
@media (min-width: 769px) {
  .xyz-bottom-sheet { display: none; }
}