/* =========================================================
   MIRAI | SITE SEARCH PALETTE — V1.1
   - Full-screen command palette (Spotlight-like)
   - Trigger can live in sidebar/header/footer (readonly input)
   File: /assets/css/mirai-site-search.v1.1.css
   ========================================================= */

.mirai-site-search{ position:relative; }
.mirai-site-search__box{ position:relative; }

.mirai-site-search__icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  opacity:.55; font-size:14px;
}

.mirai-site-search .form-control{
  padding-left:42px;
  border-radius:14px;
  height:44px;
}

.mirai-site-search__clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  line-height:26px;
  font-size:20px;
  cursor:pointer;
}
.mirai-site-search__clear:hover{ background:#fff; }

/* Trigger affordance */
.mirai-site-search__trigger .form-control{ cursor:pointer; }
.mirai-site-search__trigger .form-control:focus{
  box-shadow: 0 0 0 .22rem rgba(13,110,253,.12);
}

/* =========================================================
   PALETTE OVERLAY
   ========================================================= */

.mirai-search-palette{ position:fixed; inset:0; z-index:9999; }
.mirai-search-palette[hidden]{ display:none; }

.mirai-search-palette__backdrop{
  position:absolute; inset:0;
  background: rgba(10, 12, 18, .56);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.mirai-search-palette__panel{
  position:relative;
  width: min(920px, calc(100% - 28px));
  margin: 9vh auto 0;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
  overflow:hidden;
  transform-origin: top;
  animation: miraiPaletteIn .16s ease-out;
}

@keyframes miraiPaletteIn{
  from{ opacity:0; transform: translateY(-12px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Top bar */
.mirai-search-palette__top{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(250,250,250,.88);
}

.mirai-search-palette .mirai-site-search__box{ margin:0; }
.mirai-search-palette .mirai-site-search__icon{ left:18px; font-size:15px; }
.mirai-search-palette .form-control{
  height: 54px;
  border-radius: 18px;
  padding-left: 48px;
  font-size: 15px;
}
.mirai-search-palette .mirai-site-search__clear{
  right: 14px;
  width: 34px;
  height: 34px;
  font-size: 22px;
}

/* Meta + list */
.mirai-search-palette__meta{
  padding: 10px 16px;
  font-size: 12px;
  opacity: .78;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.mirai-search-palette__list{
  max-height: min(52vh, 520px);
  overflow:auto;
}

.mirai-search-palette__item{
  display:flex; gap:12px;
  padding: 12px 16px;
  text-decoration:none;
  color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.mirai-search-palette__item:last-child{ border-bottom:0; }
.mirai-search-palette__item:hover,
.mirai-search-palette__item[aria-selected="true"]{
  background: rgba(17,24,39,.06);
}

.mirai-search-palette__badge{
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  opacity:.75;
  white-space:nowrap;
  align-self:flex-start;
}

.mirai-search-palette__txt{ min-width:0; }
.mirai-search-palette__title{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.mirai-search-palette__excerpt{
  margin: 5px 0 0;
  font-size: 12px;
  opacity: .78;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Footer */
.mirai-search-palette__footer{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
  opacity: .75;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(250,250,250,.88);
}
.mirai-search-palette__kbd kbd{
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  font-size: 11px;
}

/* Highlight */
.mirai-search-palette mark{
  background: rgba(255, 229, 100, .55);
  padding: 0 .15em;
  border-radius: .25em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mirai-search-palette__panel{ animation:none; }
}

/* Small screens: lift panel */
@media (max-width: 575.98px){
  .mirai-search-palette__panel{ margin-top: 6vh; }
  .mirai-search-palette .form-control{ height: 52px; }
}