/* ============================================================
   qe-snippet-menu.css — Tombol "Sisipkan Shortcut" + dropdown-nya
   di toolbar Prompt Template (Tahap 1).
   Dipasangkan dengan js/qe-snippet-menu.js.

   [REVISI 2026-08-09 v2] Dirapikan ulang — sebelumnya tiap item
   memakan ~50-60px tinggi (ikon 28px + desc 2 baris + subtitle
   header 2 baris), jadi popovernya kepanjangan & beda "rasa" tiap
   baris. Sekarang:
   - Baris item dipadatkan (ikon 20px, desc 1 baris + ellipsis,
     padding lebih tipis) — konsisten tinggi antar-item.
   - Ditambah kotak cari di header (filter live by title/desc/kode)
     supaya tidak perlu scroll panjang cari 1 elemen spesifik.
   - Mode HP: bukan lagi popover mengambang yang gampang mepet tepi
     layar, tapi bottom-sheet nempel di bawah (lebar penuh, sudut
     atas rounded, slide-up), lebih natural buat jari & tidak
     "makan tempat" di tengah layar.
   ============================================================ */

.qe-snip-btn.active {
  background: var(--tint-3b);
  border-color: transparent;
  color: var(--txt);
}

.qe-snip-pop {
  position: absolute;
  z-index: 60;
  width: 272px;
  max-width: calc(100vw - 20px);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r16);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: qeSnipPopIn .14s cubic-bezier(.2,.8,.3,1);
}

@keyframes qeSnipPopIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header (judul + kotak cari, dipadatkan jadi 1 blok kecil) ── */
.qe-snip-pop-header {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}

.qe-snip-pop-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 2px 4px 6px;
}

.qe-snip-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12.5px;
  color: var(--txt);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 9px;
  padding: 6px 9px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.qe-snip-search::placeholder { color: var(--txt3); }
.qe-snip-search:focus { border-color: var(--line-2b, #0A84FF); }

/* ── Body & sections ────────────────────────────────────────── */
.qe-snip-pop-body {
  max-height: min(64vh, 420px);
  overflow-y: auto;
  padding: 4px 5px 6px;
}

.qe-snip-section { margin-top: 2px; }
.qe-snip-section + .qe-snip-section {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.qe-snip-section-hidden { display: none; }

.qe-snip-section-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 5px 7px 3px;
}

.qe-snip-empty {
  display: none;
  padding: 18px 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--txt3);
}
.qe-snip-empty-show { display: block; }

/* ── Item — dipadatkan jadi 1 baris judul+kode & 1 baris deskripsi
   (dipotong ellipsis kalau kepanjangan), tinggi konsisten antar-item. ── */
.qe-snip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 5px 7px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast);
}
.qe-snip-item:hover,
.qe-snip-item:focus-visible {
  background: var(--tint-3);
  outline: none;
}
.qe-snip-item-hidden { display: none; }

.qe-snip-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
}
.qe-snip-item:hover .qe-snip-item-icon,
.qe-snip-item:focus-visible .qe-snip-item-icon {
  color: var(--txt);
  background: var(--tint-3b);
}
.qe-snip-item-icon svg { width: 13px; height: 13px; }

.qe-snip-item-text { min-width: 0; flex: 1; }

.qe-snip-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.qe-snip-item-title {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qe-snip-item-code {
  flex-shrink: 0;
  max-width: 42%;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--txt3);
  background: var(--bg3);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qe-snip-item-desc {
  display: block;
  font-size: 9.5px;
  color: var(--txt3);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toast kecil "disisipkan!" — dipakai sesaat setelah klik item */
.qe-snip-inserted-flash {
  outline: 2px solid rgba(90,170,255,.55) !important;
  outline-offset: -1px;
  transition: outline-color .5s ease;
}

/* ── Dark mode ──────────────────────────────────────────────── */
html.dark .qe-snip-pop { background: var(--bg2); border-color: rgba(255,255,255,.12); }
html.dark .qe-snip-pop-header { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
html.dark .qe-snip-search { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html.dark .qe-snip-section + .qe-snip-section { border-color: rgba(255,255,255,.08); }
html.dark .qe-snip-item:hover, html.dark .qe-snip-item:focus-visible { background: rgba(255,255,255,.07); }
html.dark .qe-snip-item-code { background: rgba(255,255,255,.06); }
html.dark .qe-snip-item:hover .qe-snip-item-icon { background: rgba(255,255,255,.1); }

/* ── Mode HP: bottom-sheet, bukan popover mengambang ───────────
   Nempel di bawah layar penuh lebar, sudut atas rounded, slide-up.
   Dipicu murni CSS by breakpoint — posisi absolute top/left yang
   dihitung JS untuk desktop otomatis diabaikan (di-override fixed). */
.qe-snip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(0,0,0,.32);
  opacity: 0;
  animation: qeSnipBackdropIn .16s ease forwards;
}
@keyframes qeSnipBackdropIn { to { opacity: 1; } }

@media (max-width: 640px) {
  .qe-snip-pop {
    position: fixed;
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
    animation: none;
  }
  .qe-snip-pop.qe-snip-pop-open { transform: translateY(0); }

  .qe-snip-pop::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 3px;
    background: var(--border2);
    margin: 8px auto 0;
  }

  .qe-snip-pop-body { max-height: min(70vh, 520px); padding: 4px 8px 10px; }
  .qe-snip-item { padding: 8px 8px; }
  .qe-snip-item-title { font-size: 13px; }
  .qe-snip-item-desc { font-size: 11px; white-space: normal; }
  .qe-snip-item-icon { width: 24px; height: 24px; }
  .qe-snip-item-icon svg { width: 15px; height: 15px; }
}