/* Maker panel and layer workspace styles. */
.layers-sidebar {
  width: 280px;
  min-width: 240px;
  padding: 16px;
  background: var(--panel);
  border-left: 1px solid var(--border-soft);
  overflow-y: auto;
}
.layers-sidebar[hidden] { display: none; }
.layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.duplicate-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.duplicate-btn:hover { background: #292a32; border-color: #3a3b44; transform: translateY(-1px); }
.layers-list { display: grid; gap: 6px; margin-bottom: 14px; }
.layer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  text-align: left;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.layer-item:hover { background: var(--panel-3); border-color: var(--border); }
.layer-item.active { background: var(--accent-soft); border-color: var(--accent-ring); }
.layer-grip { color: var(--text-faint); font-size: 17px; letter-spacing: -3px; width: 16px; cursor: grab; transition: color .15s var(--ease); }
.layer-item:hover .layer-grip { color: var(--text-dim); }
.layer-visible { width: 13px; height: 13px; margin: 0 8px 0 0; accent-color: var(--accent); cursor: pointer; }
.layer-select {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-delete {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.layer-delete:hover { color: var(--danger); background: rgba(240,96,94,.12); }
.layer-position-controls { margin-top: 14px; }

.maker-preview {
  background: transparent;
  position: relative;
  align-self: center;
  margin: auto;
}

/*
  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;
  z-index: 1;
  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: 5;
  pointer-events: none;
}
.maker-image-handles[hidden] { display: none; }
.maker-image-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--accent);
  border: 2px solid #0a0b0d;
  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;
  z-index: 1;
  /*
    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-top: 14px; 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(--panel-3);
  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;
}