/*
 * K Rhythm Archive Compact Search
 * Shared by Lyrics, Media Archive and Video / Performance Archive
 * Build: 2026-08-30.20
 */

/* Media / Video full controls remain in their normal document position. */
.archive-controls{
  position:relative!important;
  top:auto!important;
  z-index:1!important;
}

.archive-compact-search{
  position:fixed;
  z-index:900;
  top:0;
  left:0;
  width:320px;
  color:#f7f1f7;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Noto Sans Malay",Arial,sans-serif;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.archive-compact-search.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.archive-compact-search__surface{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:rgba(13,7,17,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.archive-compact-search__row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
}
.archive-compact-search__input{
  flex:1 1 auto;
  min-width:0;
  height:42px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  outline:0;
  background:rgba(255,255,255,.055);
  color:#f7f1f7;
  padding:0 13px;
  font:inherit;
  font-size:16px;
}
.archive-compact-search__input::placeholder{color:#948795;opacity:1}
.archive-compact-search__input:focus{
  border-color:rgba(255,114,189,.72);
  box-shadow:0 0 0 2px rgba(245,9,138,.14);
}
.archive-compact-search__count{
  flex:0 0 auto;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a99daa;
  font-size:.79rem;
}
.archive-compact-search__toggle,
.archive-compact-search__reset,
.archive-compact-search__mode,
.archive-compact-search__chip{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  color:#f7f1f7;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
.archive-compact-search__toggle{
  flex:0 0 auto;
  min-height:42px;
  padding:0 13px;
  border-radius:11px;
}
.archive-compact-search__toggle:hover,
.archive-compact-search__toggle:focus-visible,
.archive-compact-search__reset:hover,
.archive-compact-search__reset:focus-visible,
.archive-compact-search__mode:hover,
.archive-compact-search__mode:focus-visible,
.archive-compact-search__chip:hover,
.archive-compact-search__chip:focus-visible{
  border-color:rgba(255,114,189,.72);
  background:rgba(245,9,138,.10);
}
.archive-compact-search__toggle[aria-expanded="true"]{
  border-color:rgba(255,114,189,.72);
  background:rgba(245,9,138,.14);
}
.archive-compact-search__panel{
  display:none;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:8px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.11);
  max-height:min(58vh,430px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.archive-compact-search.is-open .archive-compact-search__panel{display:grid}
.archive-compact-search__panel select{
  width:100%;
  min-width:0;
  height:42px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:#18101b;
  color:#f7f1f7;
  padding:0 32px 0 11px;
  font:inherit;
  font-size:15px;
}
.archive-compact-search__modes,
.archive-compact-search__group{
  grid-column:1/-1;
}
.archive-compact-search__modes,
.archive-compact-search__chips{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.archive-compact-search__group-label{
  margin:1px 0 7px;
  color:#a99daa;
  font-size:.70rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.archive-compact-search__mode,
.archive-compact-search__chip{
  min-height:34px;
  padding:5px 11px;
  border-radius:999px;
  color:#c7bac8;
  line-height:1.15;
}
.archive-compact-search__mode.is-active,
.archive-compact-search__chip.is-active{
  border-color:#f5098a;
  background:#f5098a;
  color:#fff;
}
.archive-compact-search__reset{
  min-height:42px;
  padding:0 13px;
  border-radius:11px;
}


/* Lyrics uses the real #lyrics-search input in compact mode.
   Moving the existing .search-box preserves native iOS IME composition state. */
.archive-compact-search__lyrics-home[hidden]{display:none!important}
.archive-compact-search__lyrics-box{
  flex:1 1 auto;
  min-width:0;
  max-width:none!important;
  margin:0!important;
}
.archive-compact-search__lyrics-box input{
  min-height:42px!important;
  height:42px;
  border-radius:11px!important;
  font-size:16px!important;
}
.archive-compact-search__lyrics-box svg{left:13px;width:18px;height:18px}
.archive-compact-search__lyrics-box .search-clear{right:6px}

@media(max-width:760px){
  .archive-compact-search__surface{margin-top:6px;border-radius:13px}
  .archive-compact-search__row{padding:7px;gap:7px}
  .archive-compact-search__input,
  .archive-compact-search__toggle{height:40px;min-height:40px}
  .archive-compact-search__lyrics-box input{height:40px;min-height:40px!important}
  .archive-compact-search__toggle{padding:0 11px}
  .archive-compact-search__count{display:none}
  .archive-compact-search__panel{
    grid-template-columns:1fr;
    max-height:min(55vh,420px);
    padding:7px;
  }
  .archive-compact-search__chip{font-size:.78rem}
}

@media(prefers-reduced-motion:reduce){
  .archive-compact-search{transition:none}
}