/* =========================
   Search UI (IDs match your JS)
   ========================= */

#search-toggle{
  position: fixed;
  top: calc(16px * var(--fixed-scale));
  right: calc(16px * var(--fixed-scale));
  z-index: 9999;

  width: calc(54px * var(--fixed-scale));
  height: calc(54px * var(--fixed-scale));

  border-radius: calc(14px * var(--fixed-scale));
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.ui-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;

  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

#search-toggle:hover{
  transform: scale(1.05);
  background: rgba(0,0,0,.45);
}

#search-panel{
  position: fixed;
  top: calc(74px * var(--fixed-scale));
  right: calc(16px * var(--fixed-scale));
  z-index: 9999;

  width: min(
    calc(360px * var(--fixed-scale)),
    calc(100vw - (36px * var(--fixed-scale)))
  );

  max-width: calc(100vw - (36px * var(--fixed-scale)));
  border-radius: calc(18px * var(--fixed-scale));
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: calc(12px * var(--fixed-scale));
}

.hidden{ display:none !important; }

.search-panel-top{
  display:flex;
  gap: 10px;
  align-items:center;
}

#search-input{
  flex:1;
  padding: calc(10px * var(--fixed-scale)) calc(12px * var(--fixed-scale));
  border-radius: calc(14px * var(--fixed-scale));
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  outline: none;
  font-size: calc(14px * var(--fixed-scale));
}

#search-close{
  width: calc(40px * var(--fixed-scale));
  height: calc(40px * var(--fixed-scale));
  border-radius: calc(14px * var(--fixed-scale));
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
}

.search-results{
  margin-top: 12px;
  max-height: 360px;
  overflow:auto;
  padding-right: 6px;
}

.search-group{ margin-bottom: 12px; }
.search-group-title{
  font-weight: 800;
  opacity: .85;
  margin: 6px 4px;
}

.search-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.search-item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.search-item:hover{ transform: scale(1.02); background: rgba(0,0,0,.35); }

.search-item-title{ font-weight: 800; }
.search-item-sub{ opacity: .75; font-size: .92rem; margin-top: 2px; }
.search-item-snippet{ opacity: .8; font-size: .9rem; margin-top: 6px; line-height: 1.2rem; }

.search-hl{
  font-weight: 900;
  text-decoration: underline;
}

.bg-tint{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================= */
/* Search panel scrollbar style */
/* ============================= */

/* make sure something can actually overflow */
#search-panel .search-list,
#search-panel .search-results,
#search-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}

/* Chrome/Edge/Safari */
#search-panel .search-list::-webkit-scrollbar,
#search-panel .search-results::-webkit-scrollbar,
#search-panel::-webkit-scrollbar{
  width: 8px;
}

#search-panel .search-list::-webkit-scrollbar-track,
#search-panel .search-results::-webkit-scrollbar-track,
#search-panel::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

#search-panel .search-list::-webkit-scrollbar-thumb,
#search-panel .search-results::-webkit-scrollbar-thumb,
#search-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(120,200,255,.39), rgba(80,140,220,.39));
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.15);
}

#search-panel .search-list::-webkit-scrollbar-thumb:hover,
#search-panel .search-results::-webkit-scrollbar-thumb:hover,
#search-panel::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(150,220,255,1), rgba(100,170,255,1));
}