/* Panel Layers (kanan) dan ruang kerja Maker. */
.layers-sidebar {
  width: 288px;
  min-width: 240px;
  padding: 0 0 24px;
  background: var(--panel);
  border-left: 1px solid #141517;
  overflow-y: auto;
}
.layers-sidebar[hidden] { display: none; }
.layers-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 34px;
  padding: 0 10px 0 0;
  background: var(--chrome);
  border-bottom: 1px solid var(--border-soft);
}
.layers-header strong {
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-bottom: -1px;
  border-bottom: 2px solid var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.duplicate-btn {
  align-self: center;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.duplicate-btn:hover { background: var(--panel-3); border-color: #5f636a; color: #fff; }

.layers-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 1px solid var(--border-soft);
}
.layers-list { position: relative; }
.layers-list:empty { display: none; }
.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  transition: background .12s var(--ease);
}
.layer-item:last-child { border-bottom: 0; }
.layer-item:hover { background: rgba(255,255,255,.04); }
.layer-item { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.layer-item.is-drag-source { opacity: .35; }
.layer-item.active { background: var(--row-active); }

/* Checkbox visibilitas ditampilkan sebagai ikon mata */
.layer-visible {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  background-color: var(--text-faint);
  opacity: .35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.5%2012S5.5%205%2012%205s10.5%207%2010.5%207-4%207-10.5%207S1.5%2012%201.5%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.5%2012S5.5%205%2012%205s10.5%207%2010.5%207-4%207-10.5%207S1.5%2012%201.5%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .12s var(--ease), background-color .12s var(--ease);
}
.layer-visible:checked { background-color: var(--text-dim); opacity: 1; }
.layer-item:hover .layer-visible:checked { background-color: var(--text); }
.layer-visible:focus-visible { outline-offset: 3px; }

.layer-select {
  cursor: inherit;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.layer-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #141517;
  background-color: var(--check-b);
  background-image:
    linear-gradient(45deg, var(--check-a) 25%, transparent 25%, transparent 75%, var(--check-a) 75%),
    linear-gradient(45deg, var(--check-a) 25%, transparent 25%, transparent 75%, var(--check-a) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  overflow: hidden;
}
.layer-thumb.is-image { background-size: cover; background-position: center; }
.layer-thumb.is-text {
  background: #d4d6da;
  color: #26282b;
  font: 600 19px/1 Georgia, 'Times New Roman', serif;
}
.layer-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.layer-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-kind { font-size: 11px; color: var(--text-faint); }
.layer-item.active .layer-kind { color: var(--text-dim); }
.layer-delete {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: color .12s var(--ease), background .12s var(--ease), opacity .12s var(--ease);
}
.layer-item:hover .layer-delete,
.layer-item.active .layer-delete,
.layer-delete:focus-visible { opacity: 1; }
.layer-delete:hover { color: var(--danger); background: rgba(240,107,107,.14); }
.layer-position-controls { margin-top: 0; }
.layers-sidebar > .hint-text { margin: 12px 14px 0; }

.maker-preview {
  position: relative;
  align-self: center;
  margin: auto;
  /*
    Konteks tumpukan sendiri: z-index tiap layer (index layer + 1, diisi
    inline oleh maker.js) bersaing di sini, bukan dengan header/panel lain.
  */
  isolation: isolate;
}

/*
  URUTAN TUMPUKAN. Kontainer layer (.maker-image-clip, .maker-output) sengaja
  TIDAK membuat stacking context (tanpa z-index), sehingga layer gambar dan
  layer teks di dalamnya bisa saling berselang-seling sesuai urutan di panel
  Layers. Hanya overflow:hidden yang tersisa di kontainer: untuk memotong
  isi tepat di tepi kanvas.
*/

/*
  Viewport kanvas: membungkus frame + gambar + teks (SEMUA konten yang
  ikut ter-export), dan di sinilah overflow:hidden dipasang -- bukan lagi
  di .maker-preview langsung. download-img.js sudah membungkus node export
  dengan wrapper ber-overflow:hidden sendiri, jadi bagian gambar/teks yang
  keluar batas kanvas tetap otomatis ter-crop saat export; overflow:hidden
  di sini membuat live preview konsisten dengan hasil export (WYSIWYG),
  persis seperti sebelumnya.

  Bedanya: .maker-image-handles TIDAK ikut dibungkus di sini (tetap child
  langsung .maker-preview, lihat markup), sehingga saat gambar diseret
  sampai jauh melewati batas kanvas, handle resize-nya tetap kelihatan dan
  bisa diklik untuk ditarik balik -- tidak lagi ikut terpotong seperti
  ketika overflow:hidden masih menempel di .maker-preview.
*/
.maker-canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
  Kontainer clip khusus gambar. Ukuran & posisinya SELALU persis sama
  dengan .maker-canvas-frame (lihat applyMakerImageSize di maker.js),
  sehingga bagian gambar yang digeser/di-resize melewati batas kanvas
  otomatis terpotong visualnya di sini -- bukan baru terpotong di tepi
  panel preview (.maker-preview) seperti sebelumnya, yang membuat gambar
  tampak "bocor" melewati garis frame.

  Handle resize sengaja TIDAK diletakkan di dalam kontainer ini (tetap
  langsung child .maker-preview), supaya tetap terlihat & bisa diklik
  walau gambar sedang digeser sampai keluar batas kanvas.
*/
.maker-image-clip {
  position: absolute;
  overflow: hidden;
  border-radius: 0 !important;
}

/*
  Layer gambar NON-aktif (semua image layer selain yang sedang dipilih di
  panel Layers) dirender di sini sebagai markup statis oleh renderMakerOutput
  (bukan elemen interaktif ber-handle). Tiap ".maker-image-static" adalah
  jendela crop satu layer (posisi & ukuran = layer.x/y/width/height, sama
  seperti .maker-image-wrap untuk layer aktif), ber-overflow:hidden, dengan
  satu <img> anak yang diposisikan bebas di dalamnya (layer.imgX/Y/W/H)
  sehingga crop yang sudah diatur tetap terlihat walau layer tidak aktif.
*/
.maker-images-static { position: absolute; inset: 0; }
.maker-image-static {
  position: absolute;
  overflow: hidden;
  border-radius: 0 !important;
  /* Klik = pilih layer ini, klik-tahan+geser = pindah posisi (lihat startLayerDrag di maker.js). pointer-events default (auto) sudah cukup, div ini tidak diblok parent manapun. */
  cursor: grab;
  touch-action: none;
}
.maker-image-static.dragging { cursor: grabbing; }
.maker-image-static img {
  position: absolute;
  display: block;
  margin: 0;
  border-radius: 0 !important;
  pointer-events: none;
  -webkit-user-drag: none;
}

/*
  Layer gambar AKTIF: .maker-image-wrap adalah jendela crop yang bisa
  digeser/di-resize (lihat maker.js startImageDrag/startImageResize), sama
  konsepnya dengan .maker-image-static di atas tapi interaktif. overflow:
  hidden di sini membuat bagian <img> yang berada di luar jendela (hasil
  CROP dengan SHIFT) tersembunyi, persis seperti versi statisnya.
*/
.maker-image-wrap {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
}
.maker-image-wrap[hidden] { display: none; }
.maker-image-wrap.dragging { cursor: grabbing; }

.maker-image {
  /*
    Posisi & ukuran TIDAK lagi inset:0/100% (dulu selalu mengisi penuh
    .maker-image-wrap via object-fit:fill). Sekarang <img> punya posisi &
    ukurannya sendiri (di-set inline oleh applyMakerImageTransform() di
    maker.js, lihat layer.imgX/imgY/imgW/imgH) relatif terhadap wrap,
    supaya bisa lebih besar dari / bergeser dari jendela wrap -- itulah
    yang membuat fitur CROP (tahan SHIFT saat resize) bekerja: jendela
    (wrap) mengecil tapi gambar di dalamnya tidak ikut mengecil, hanya
    bagian yang keluar jendela yang disembunyikan overflow:hidden di atas.
  */
  position: absolute;
  z-index: 0;
  display: block;
  margin: 0;
  border-radius: 0 !important;
  /*
    pointer-events:none supaya event mouse selalu ditangkap oleh
    .maker-image-wrap (elemen yang di-drag), bukan oleh <img> itu sendiri,
    dan agar browser tidak memicu drag-ghost bawaan gambar.
  */
  pointer-events: none;
  -webkit-user-drag: none;
}

/*
  Kontainer 8 handle resize (4 sudut + 4 sisi tengah). Sengaja dijadikan
  child langsung .maker-preview (bukan child .maker-image-wrap) dan posisi
  tiap handle dihitung ulang di JS setiap transform berubah (lihat
  applyMakerImageTransform di maker.js). Alasan: .maker-image-wrap ber-
  z-index 0 membentuk stacking context sendiri, sehingga anak dengan
  z-index tinggi di dalamnya tetap tertutup .maker-output (z-index 1) saat
  keduanya bertumpuk. Dengan handle di root .maker-preview, z-index tinggi
  berlaku secara global sehingga handle selalu bisa di-klik.

  Kontainer sendiri pointer-events:none (tidak menutupi area drag gambar),
  tiap handle individual di-override jadi pointer-events:auto sehingga
  hanya kotak kecilnya saja yang bisa menangkap klik.
*/
.maker-image-handles {
  position: absolute;
  inset: 0;
  z-index: 100000; /* selalu di atas semua layer (z-index layer = index + 1) */
  pointer-events: none;
}
.maker-image-handles[hidden] { display: none; }
.maker-image-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--accent);
  border: 2px solid #0b090c;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--accent);
  pointer-events: auto;
  touch-action: none;
  transition: transform .12s var(--ease);
}
.maker-image-handle:hover { transform: scale(1.25); }

/*
  Garis batas kanvas dasar (BUKAN border pada gambar upload). Murni panduan
  visual agar terlihat jelas area yang akan ter-export, tidak ikut mengikuti
  posisi/ukuran gambar. Ditandai data-export-ignore di index.html sehingga
  dibuang sebelum rasterisasi PNG (lihat download-img.js).
*/
.maker-canvas-frame {
  position: absolute;
  z-index: 0;
  border: 1px solid var(--accent-ring);
  box-shadow: 0 0 0 3000px rgba(0, 255, 42, 0.42);
  pointer-events: none;
}
.maker-output {
  zoom: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 600px;
  /*
    Kunci batas visual kanvas. Ukuran elemen ini SELALU persis sama dengan
    WIDTH x HEIGHT yang diatur user (lihat applyMakerImageSize di maker.js),
    jadi overflow:hidden di sini memastikan layer teks apa pun -- termasuk
    kotak height:auto yang tumbuh mengikuti panjang chatlog -- terpotong
    tepat di tepi kanvas pada live preview, konsisten dengan hasil export
    PNG/GIF yang memang sudah otomatis ter-crop di ukuran yang sama.
  */
  overflow: hidden;
  /*
    FIX: sebelumnya elemen ini (dan .maker-layer di dalamnya) memblokir
    pointerdown dari mencapai .maker-image-wrap di bawahnya karena z-index
    lebih tinggi dan bounding box menutupi seluruh area kanvas, meski
    tidak ada baris teks tervisualisasi di titik yang diklik. Ini yang
    menyebabkan drag gambar terasa tidak bekerja/tidak konsisten (termasuk
    ke kiri-kanan). Layer teks di preview Maker murni tampilan, tidak ada
    interaksi klik yang dibutuhkan di atasnya, jadi aman dinonaktifkan.
  */
  pointer-events: none;
}
.maker-layer {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /*
    Defensive reset: pastikan .maker-layer tidak pernah mewarisi/ketiban
    `zoom` dari rule lain (mis. `#output` di ui.css) walau class "output"
    dipakai bersama pada elemen ini. html2canvas tidak akurat merender
    CSS zoom pada teks, sehingga nilai selain 1 di sini akan merusak hasil
    export PNG meski live preview tampak normal. Lihat catatan di ui.css.
  */
  zoom: 1;
  /*
    .maker-output (parent) sengaja pointer-events:none supaya klik di area
    kosongnya tembus ke gambar di belakang (lihat komentar pada rule
    .maker-output). Di-override jadi auto KHUSUS per elemen layer teks ini
    supaya tiap baris chat tetap bisa diklik/di-drag langsung dari live
    preview (lihat startLayerDrag di maker.js) tanpa mengembalikan
    perilaku lama yang bermasalah.
  */
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.maker-layer.dragging { cursor: grabbing; }
.maker-output .maker-layer {
  font-size: inherit;
  letter-spacing: inherit;
  --chatlog-line-height: inherit;
  --chatlog-box-width: inherit;
  --chatlog-box-left: inherit;
  --chatlog-box-height: inherit;
  --chatlog-bg: inherit;
  line-height: var(--chatlog-line-height);
}

@media (max-width: 780px) {
  .layers-sidebar {
    width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border-soft);
    max-height: 45vh;
  }
}

/* Progress bar export GIF (markup di index.html: #exportProgress). */
.export-progress { margin: 14px 14px 0; font-size: 12px; color: var(--text-dim); }
.export-progress[hidden] { display: none; }
.export-progress .progress-bar {
  width: 100%;
  height: 6px;
  margin-bottom: 6px;
  background: var(--input);
  border-radius: 4px;
  overflow: hidden;
}
.export-progress #progressFill {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.15s linear;
}

/*
  Font non-Google. Dipakai bila terpasang di sistem (local) atau bila file
  font ditaruh di folder fonts/ di samping index.html dengan nama di bawah.
  Tanpa keduanya, layer jatuh ke font cadangan (Consolas / Arial).
*/
@font-face {
  font-family: 'Console Mono';
  src: local('Console Mono'), local('ConsoleMono'), url('fonts/ConsoleMono.woff2') format('woff2'), url('fonts/ConsoleMono.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Versus Ultra';
  src: local('Versus Ultra'), local('VersusUltra'), url('fonts/VersusUltra.woff2') format('woff2'), url('fonts/VersusUltra.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}

/* Drag-and-drop urutan layer (lihat initLayerReorder di maker.js). */
.layer-ghost {
  position: fixed;
  z-index: 10000;
  margin: 0;
  pointer-events: none;
  background: var(--row-active);
  border: 1px solid var(--accent-ring);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  opacity: .8; /* agak transparan supaya garis penanda di bawahnya tetap terlihat */
  cursor: grabbing;
}
.layer-ghost .layer-delete { opacity: 0; }
.layer-drop-indicator {
  position: absolute;
  z-index: 2;
  left: 6px;
  right: 6px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--accent-hi);
  box-shadow: 0 0 0 1px rgba(255, 135, 56,.45), 0 0 10px var(--accent);
  pointer-events: none;
}
.layer-drop-indicator::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-hi);
}
.layer-drop-indicator[hidden] { display: none; }
body.reordering-layers,
body.reordering-layers * { cursor: grabbing !important; user-select: none !important; }