/* Palet pencarian gaya Claude (Ctrl+K). */
/* Lapisan overlay tidak memakai tata letak sendiri (scrim = fixed, z 80), jadi palet juga fixed di atasnya. */
.overlay-layer > .cmdk {
  position: fixed; z-index: 81; top: 9vh; left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 18vh));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop);
  animation: sp2-in 160ms var(--ease-out);
}
.overlay-layer:has(> .cmdk) > .scrim { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.overlay-layer.is-closing > .cmdk { opacity: 0; transition: opacity 120ms; }
@keyframes sp2-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
[data-motion="reduce"] .overlay-layer > .cmdk { animation: none; }
.sp2 { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sp2-top { display: flex; align-items: center; gap: 10px; padding: 16px 16px 6px 22px; }
.sp2-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; padding: 6px 0; }
.sp2-input::placeholder { color: var(--ink-3); }
.sp2-input::-webkit-search-cancel-button { display: none; }
.sp2-x { border: 0; background: transparent; color: var(--ink-2); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sp2-x:hover { background: var(--surface-2); color: var(--ink); }
.sp2-tabs { display: flex; gap: 4px; padding: 6px 18px 12px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.sp2-tabs button { flex: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.sp2-tabs button:hover { color: var(--ink); background: var(--surface-2); }
.sp2-tabs button.on { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.sp2-list { flex: 1; min-height: 120px; overflow-y: auto; padding: 8px 10px 10px; }
.sp2-sec { padding: 4px 0 6px; }
.sp2-sec-title { padding: 8px 12px 6px; font-size: 12px; color: var(--ink-3); }
.sp2-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.sp2-row > svg { flex: none; color: var(--ink-3); }
.sp2-row.on { background: var(--surface-2); color: var(--ink); }
.sp2-row.on > svg { color: var(--ink-2); }
.sp2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp2-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp2-snip { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp2-snip mark { background: var(--accent-soft); color: var(--ink); border-radius: 3px; }
.sp2-meta { flex: none; font-size: 12px; color: var(--ink-3); }
.sp2-enter { flex: none; width: 18px; text-align: center; color: var(--ink-3); visibility: hidden; }
.sp2-row.on .sp2-enter { visibility: visible; }
.sp2-empty { margin: 0; padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.sp2-foot { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.sp2-foot kbd { display: inline-block; min-width: 18px; margin-left: 5px; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 11px var(--mono); color: var(--ink-2); text-align: center; background: var(--bg); }
.sp2-foot kbd + kbd { margin-left: 3px; }
.sp2-push { margin-left: auto; }
@media (max-width: 640px) {
  .overlay-layer > .cmdk { top: 12px; max-height: calc(100dvh - 24px); border-radius: 14px; }
  .sp2-foot { display: none; }
}
