/* <nestly-quick-search> — Quick Search panel over a soft desktop */

nestly-quick-search {
  --nqs-ivory: #FFFCF8; --nqs-peach: #FFB79A; --nqs-coral: #EE8A74; --nqs-lavender: #C7B8FF; --nqs-violet: #6F57E8; --nqs-sky: #A9D4FF;
  --nqs-panel: rgba(255,252,248,.86); --nqs-panel-edge: rgba(80,50,30,.10); --nqs-row-sel: rgba(111,87,232,.12); --nqs-sel-edge: rgba(111,87,232,.35);
  --nqs-win: rgba(255,255,255,.45);
  display: block; min-height: 360px; position: relative;
}
@media (prefers-color-scheme: dark) {
  nestly-quick-search {
    --nqs-panel: rgba(32,27,24,.86); --nqs-panel-edge: rgba(255,240,225,.10); --nqs-row-sel: rgba(164,147,255,.16); --nqs-sel-edge: rgba(164,147,255,.45);
    --nqs-win: rgba(255,255,255,.07);
  }
}

.nqs-desk {
  position: relative; min-height: 360px; border-radius: 22px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px 28px;
  background:
    radial-gradient(55% 60% at 12% 85%, color-mix(in srgb, var(--nqs-peach) 75%, transparent), transparent 70%),
    radial-gradient(55% 60% at 88% 80%, color-mix(in srgb, var(--nqs-lavender) 85%, transparent), transparent 70%),
    radial-gradient(50% 55% at 80% 8%, color-mix(in srgb, var(--nqs-sky) 80%, transparent), transparent 70%),
    linear-gradient(160deg, #FFF3EA, #F6EEFA 55%, #E9EEFF);
}
@media (prefers-color-scheme: dark) {
  .nqs-desk {
    background:
      radial-gradient(55% 60% at 12% 85%, rgba(238,138,116,.32), transparent 70%),
      radial-gradient(55% 60% at 88% 80%, rgba(143,123,255,.34), transparent 70%),
      radial-gradient(50% 55% at 80% 8%, rgba(169,212,255,.18), transparent 70%),
      linear-gradient(160deg, #221B18, #1C1820 55%, #171A24);
  }
}

/* faint, static window silhouettes */
.nqs-win { position: absolute; border-radius: 14px; background: var(--nqs-win); filter: blur(3px); }
.nqs-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 14px 14px 0 0; background: var(--nqs-win); }
.nqs-win-a { left: 6%; top: 10%; width: 42%; height: 58%; }
.nqs-win-b { right: 5%; bottom: 8%; width: 38%; height: 48%; }

/* panel */
.nqs-panel {
  position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 10px;
  border-radius: 18px; background: var(--nqs-panel); color: var(--text, #221E1C);
  border: 1px solid var(--nqs-panel-edge);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 60px -24px rgba(70,45,150,.40), 0 2px 6px rgba(40,25,10,.06);
  will-change: transform, opacity;
}
nestly-quick-search.nqs-pre .nqs-panel { opacity: 0; }

.nqs-bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line, rgba(60,40,20,.09)); }
.nqs-ic { width: 20px; height: 20px; flex: none; color: var(--nqs-violet); }
@media (prefers-color-scheme: dark) { .nqs-ic { color: #A493FF; } }
.nqs-q { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 18px; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; }
.nqs-text { overflow: hidden; text-overflow: ellipsis; }
.nqs-caret { width: 2px; height: 20px; margin-left: 1px; flex: none; border-radius: 1px; background: var(--nqs-violet); animation: nqsBlink 1.1s steps(1) infinite; }
@keyframes nqsBlink { 50% { opacity: 0; } }
.nqs-key {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-2, #6A625C);
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line, rgba(60,40,20,.09)); background: color-mix(in srgb, var(--nqs-ivory) 40%, transparent);
}
@media (prefers-color-scheme: dark) { .nqs-key { background: rgba(255,255,255,.05); } }

.nqs-h { margin: 12px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #9A918A); }

.nqs-list { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nqs-sel {
  position: absolute; left: 0; right: 0; top: 0; height: 52px; border-radius: 11px;
  background: var(--nqs-row-sel); box-shadow: inset 0 0 0 1px var(--nqs-sel-edge);
  opacity: 0; transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .25s;
}
.nqs-sel.on { opacity: 1; }
.nqs-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px;
  opacity: 0; transform: translateY(6px); transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.nqs-row.on { opacity: 1; transform: none; }
.nqs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nqs-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nqs-tx em { font-style: normal; font-size: 12px; color: var(--text-3, #9A918A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nqs-ret { flex: none; font-size: 12px; font-weight: 600; color: var(--text-3, #9A918A); opacity: 0; transition: opacity .2s; }
.nqs-row.sel .nqs-ret { opacity: 1; }

/* tiny file glyphs */
.nqs-fi { position: relative; flex: none; width: 24px; height: 30px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(40,25,10,.22); }
.nqs-fi::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 5px; height: 9px; border-radius: 2px; }
.nqs-fi-pdf::after { background: #9C86F2; }
.nqs-fi-zip::after { background: var(--nqs-coral); }

.nqs-foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; margin-top: 8px; padding: 9px 8px 2px;
  border-top: 1px solid var(--line, rgba(60,40,20,.09)); font-size: 11.5px; color: var(--text-3, #9A918A);
}

/* reduced motion / static */
nestly-quick-search.nqs-static .nqs-caret { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nqs-row, .nqs-sel { transition: none; }
  .nqs-caret { animation: none; }
}

/* responsive */
@media (max-width: 640px) {
  nestly-quick-search, .nqs-desk { min-height: 300px; }
  .nqs-desk { padding: 28px 8px; border-radius: 18px; }
  .nqs-win-a { width: 60%; } .nqs-win-b { width: 55%; }
  .nqs-q { font-size: 16px; }
  .nqs-panel { padding: 8px; border-radius: 16px; }
  .nqs-foot span:nth-child(2) { display: none; }
}
@media (max-width: 360px) {
  .nqs-key { display: none; }
  .nqs-tx b { font-size: 13px; }
}