/* ============================================================
   [FEATURE 2026-07-23 v59, REVISI TAHAP 2] Saran Referensi +
   1 Dadu Acak Global (header kartu) + Tombol "+" per Field
   ------------------------------------------------------------
   Styling untuk wrapper baru ".qe-field-suggest-wrap" yang kini
   membungkus input teks biasa & textarea di Tahap 2 (dirender
   oleh qeRenderFields, js/qe-engine.js) — berisi 2 hal:
     1) tombol "+" (".qe-field-add-btn"), melayang polos (tanpa
        kotak/border/background) di pojok kanan field, ikon SVG plus
        murni (bukan emoji) — klik = inject isi field ke Bank
        Referensi (bukan dadu lagi, dadu sekarang cuma 1 & global,
        dibungkus pill ".qe-card-head-actions" di header kartu,
        lihat di bawah);
     2) panel saran (".qe-field-suggest-panel"), muncul di bawah
        field saat fokus/diketik (logika tampil/isi di
        js/qe-field-suggest.js, TIDAK ada di sini).
   File ini murni ADDITIVE — tidak mengubah selector field lama
   apa pun (.qe-field-input, .qe-field-textarea, dst di
   components.css tetap utuh), cuma menambah wrapper & elemen
   baru di dalamnya.
   ============================================================ */

.qe-field-suggest-wrap {
  position: relative;
}

/* Kasih ruang di kanan field biar teks tidak ketiban tombol "+". */
.qe-field-suggest-wrap > .qe-field-input {
  padding-right: 28px;
}
.qe-field-suggest-wrap--area > .qe-field-textarea {
  padding-right: 28px;
}

/* Tombol "+" per field — SENGAJA POLOS, tanpa kotak/border/background
   sama sekali (cuma glyph "+" mengambang di pojok field), sesuai
   revisi eksplisit: dadu global sudah cukup "berat" secara visual,
   tombol "+" per field harus seringan mungkin biar tidak menumpuk
   kesan "banyak tombol kotak" di tiap baris field. */
.qe-field-add-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--txt3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-base), transform var(--dur-fast);
  flex-shrink: 0;
}
.qe-field-add-btn svg { display: block; flex-shrink: 0; }
.qe-field-add-btn:hover { color: var(--txt); }
.qe-field-add-btn:active { transform: translateY(-50%) scale(.85); }

/* Textarea = multi-baris, tombol "+" didok di pojok kanan-ATAS
   (bukan vertically-centered spt input 1-baris) supaya tidak
   menutupi teks begitu isinya sudah beberapa baris. */
.qe-field-suggest-wrap--area .qe-field-add-btn {
  top: 7px;
  transform: none;
}
.qe-field-suggest-wrap--area .qe-field-add-btn:active { transform: scale(.85); }

/* Umpan balik "berhasil ditambahkan ke Bank Referensi" — flash
   HIJAU singkat di TOMBOL "+" itu sendiri (bukan di field, field-nya
   tidak berubah sama sekali karena arah datanya field → bank). Tetap
   tanpa border permanen — flash cuma numpuk background sesaat lalu
   balik transparan total. */
@keyframes qeFieldAddFlash {
  0%   { background-color: rgba(52,199,89,.35); color: #1f8a3d; }
  100% { background-color: transparent; }
}
html.dark .qe-field-add-btn.qe-field-add-flash { animation-name: qeFieldAddFlashDark; }
@keyframes qeFieldAddFlashDark {
  0%   { background-color: rgba(52,199,89,.40); color: #34d058; }
  100% { background-color: transparent; }
}
.qe-field-add-btn.qe-field-add-flash {
  animation: qeFieldAddFlash .6s ease;
}

/* Umpan balik "field baru saja diisi dadu/acak" — SATU flash warna
   singkat di field itu sendiri, dipakai baik oleh dadu global maupun
   klik item saran. */
@keyframes qeDiceFlash {
  0%   { background-color: rgba(10,132,255,.16); }
  100% { background-color: transparent; }
}
.qe-field-input.qe-dice-flash,
.qe-field-textarea.qe-dice-flash {
  animation: qeDiceFlash .5s ease;
}

/* ---------------- Aksi Header Kartu "Edit Fields" (Undo + Dadu) ---------------- */
/* [REVISI] Dibungkus pill yang PERSIS meniru box-model ".qe-result-tabs"
   / ".qe-result-tab-btn" (css/ai-byok.css) di header kartu Tahap 3
   ("Prompt Ready") — supaya baris label+ikon di kedua kartu
   (Tahap 2 & Tahap 3) sejajar tingginya, bukan cuma "mirip-mirip".
   Dipasang sejajar label step lewat margin-left:auto di dalam
   .qe-card-head (flex row). Isinya 2 tombol:
     1) Undo (kiri)  — qeFieldsUndo(), balikin field yg baru diacak
        dadu ke nilai sebelumnya. Nonaktif sampai ada 1x acakan.
     2) Dadu (kanan) — qeShuffleAllFields(), acak SEMUA field aktif
        yang kategorinya cocok di Bank Referensi sekaligus. */
.qe-card-head-actions {
  margin-left: auto;
  display: flex; gap: 2px; padding: 2px; flex-shrink: 0;
  background: var(--bg3); border-radius: 9px; border: 1px solid var(--border);
}
.qe-card-head-icon-btn {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 7px; border: none; background: transparent;
  color: var(--txt3); cursor: pointer;
  font-family: inherit; transition: all var(--dur-base);
}
.qe-card-head-icon-btn svg { display: block; flex-shrink: 0; }
.qe-card-head-icon-btn:hover { color: var(--txt); background: var(--bg2); }
.qe-card-head-icon-btn:active { transform: scale(.90); }
.qe-card-head-icon-btn:disabled { cursor: default; opacity: .35; }
.qe-card-head-icon-btn:disabled:hover { background: transparent; color: var(--txt3); }

/* Muter pelan selama dadu global lagi memproses shuffle-nya — gimmick
   ringan juga, cuma umpan balik "lagi jalan", bukan animasi berat. */
@keyframes qeShuffleSpin {
  to { transform: rotate(360deg); }
}
.qe-card-head-icon-btn.qe-shuffle-spinning svg {
  animation: qeShuffleSpin .5s linear infinite;
}

/* Gimmick shuffle per field: dipasang SEMENTARA (beberapa tick, lihat
   SHUFFLE_TICKS di js/qe-field-suggest.js) ke tiap field yang lagi
   diacak dadu global — kedip halus opacity + sedikit tint biru
   supaya "kerasa" lagi diacak walau isinya cuma diganti-ganti string
   biasa (bukan reel/canvas animasi berat). Dilepas otomatis begitu
   field itu berhenti di nilai final. */
@keyframes qeShuffleCycle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.qe-field-input.qe-shuffle-cycle,
.qe-field-textarea.qe-shuffle-cycle {
  animation: qeShuffleCycle .13s ease-in-out infinite;
  background-color: rgba(10,132,255,.07);
}
html.dark .qe-field-input.qe-shuffle-cycle,
html.dark .qe-field-textarea.qe-shuffle-cycle {
  background-color: rgba(10,132,255,.14);
}

/* Panel saran (autocomplete) — melayang tepat di bawah field. */
.qe-field-suggest-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r8);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.08);
  max-height: 178px;
  overflow-y: auto;
  padding: 4px;
  display: none;
}
.qe-field-suggest-panel.show { display: block; }

.qe-field-suggest-item {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--txt2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qe-field-suggest-item:hover {
  background: rgba(10,132,255,.10);
  color: var(--txt);
}
html.dark .qe-field-suggest-item:hover { background: rgba(10,132,255,.18); }

.qe-field-suggest-empty {
  padding: 8px 6px;
  font-size: 11.5px;
  color: var(--txt3);
  text-align: center;
}

html.dark .qe-field-suggest-panel {
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.28);
}

@media (max-width: 560px) {
  .qe-field-suggest-panel { max-height: 150px; }
}