/* PNW-FILE-GUIDE: css/cf-v116.css — Dual Free Canvas (v116 / v9.16) */

/* Dual lama 50/50 dinetralkan; mode Edit dan Live tetap memakai CSS v100. */
#cfPrevStage[data-preview-mode="dual"] {
  overflow: hidden !important;
  background: #111214 !important;
}
#cfPrevStage[data-preview-mode="dual"] > #projPreview,
#cfPrevStage[data-preview-mode="dual"] > .cfLiveFrame,
#cfPrevStage[data-preview-mode="dual"] > .cfPreviewPaneLabel,
#cfPrevStage[data-preview-mode="dual"] > .cfPrevDrop {
  display: none !important;
}

.cfDualCanvas {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #e9edf5;
  background: #141518;
  font-family: "TikTok Sans", system-ui, sans-serif;
  user-select: none;
  isolation: isolate;
}
.cfDualCanvas[hidden] { display: none !important; }
.cfDcToolbar {
  position: relative;
  z-index: 60;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 7px;
  border-bottom: 1px solid #303238;
  background: rgba(30, 31, 35, 0.96);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cfDcToolbar::-webkit-scrollbar { display: none; }
.cfDcToolbar button,
.cfDcAddMenu button,
.cfDcFrameOps button {
  appearance: none;
  border: 1px solid #3b3e45;
  background: #27292e;
  color: #dfe4ee;
  border-radius: 6px;
  min-height: 26px;
  padding: 4px 8px;
  font: 500 9px/1 "TikTok Sans", system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.cfDcToolbar button:hover,
.cfDcToolbar button.on,
.cfDcAddMenu button:hover,
.cfDcFrameOps button:hover,
.cfDcFrameOps button.on {
  border-color: #149dbc;
  color: #bdefff;
  background: #20363c;
}
.cfDcToolbar .cfDcPrimary {
  border-color: #1282a2;
  background: #1282a2;
  color: #fff;
  font-weight: 700;
}
.cfDcToolbar .cfDcZoom { min-width: 48px; font-variant-numeric: tabular-nums; }
.cfDcSep { flex: 0 0 1px; align-self: stretch; margin: 2px 2px; background: #3a3c42; }
.cfDcHint {
  margin-left: auto;
  padding-right: 3px;
  color: #777e8c;
  font-size: 8px;
  white-space: nowrap;
}
.cfDcViewport {
  --dc-grid-small: 14px;
  --dc-grid-big: 70px;
  --dc-grid-x: 0px;
  --dc-grid-y: 0px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  outline: 0;
  touch-action: none;
  cursor: grab;
  background-color: #151619;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size:
    var(--dc-grid-small) var(--dc-grid-small),
    var(--dc-grid-small) var(--dc-grid-small),
    var(--dc-grid-big) var(--dc-grid-big),
    var(--dc-grid-big) var(--dc-grid-big);
  background-position:
    var(--dc-grid-x) var(--dc-grid-y),
    var(--dc-grid-x) var(--dc-grid-y),
    var(--dc-grid-x) var(--dc-grid-y),
    var(--dc-grid-x) var(--dc-grid-y);
}
.cfDualCanvas.no-grid .cfDcViewport { background-image: none; }
.cfDualCanvas.is-panning .cfDcViewport,
.cfDualCanvas.is-space .cfDcViewport { cursor: grabbing; }
.cfDcWorld {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
}
.cfDcFrame {
  position: absolute;
  display: block;
  min-width: 240px;
  min-height: 165px;
  overflow: hidden;
  border: 1px solid #41444c;
  border-radius: 8px;
  background: #0e0f11;
  box-shadow: 0 8px 28px rgba(0,0,0,.32);
  box-sizing: border-box;
  color: #edf1f8;
  transform: translateZ(0);
}
.cfDcFrame:hover { border-color: #606570; }
.cfDcFrame.is-selected {
  border-color: #1fb5d7;
  box-shadow: 0 0 0 2px rgba(31,181,215,.28), 0 12px 34px rgba(0,0,0,.42);
}
.cfDcFrame.is-locked { border-style: dashed; }
.cfDcFrameHead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 8;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px 0 7px;
  border-bottom: 1px solid #34363d;
  background: linear-gradient(180deg, #292b30, #23252a);
  box-sizing: border-box;
  cursor: move;
}
.cfDcFrame.is-locked .cfDcFrameHead { cursor: default; }
.cfDcTypeChip {
  flex: 0 0 auto;
  min-width: 32px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(18,130,162,.2);
  color: #74d7ed;
  font: 700 7px/1 "TikTok Sans", system-ui, sans-serif;
  letter-spacing: .7px;
  text-align: center;
}
.cfDcType-live .cfDcTypeChip { background: rgba(231,77,77,.18); color: #ff9a9a; }
.cfDcType-stage .cfDcTypeChip { background: rgba(240,181,57,.17); color: #ffd477; }
.cfDcType-remote .cfDcTypeChip { background: rgba(140,104,235,.18); color: #c5afff; }
.cfDcType-browser .cfDcTypeChip { background: rgba(83,184,124,.18); color: #9be7ba; }
.cfDcFrameTitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dce2ec;
  font-size: 9px;
  font-weight: 600;
}
.cfDcFrameOps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: .2;
  transition: opacity .12s ease;
}
.cfDcFrame:hover .cfDcFrameOps,
.cfDcFrame.is-selected .cfDcFrameOps { opacity: 1; }
.cfDcFrameOps button {
  min-width: 23px;
  min-height: 21px;
  height: 21px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 8px;
}
.cfDcFrameOps [data-dc-act="remove"]:hover { border-color: #e46363; color: #ffaaaa; background: #48282b; }
.cfDcFrameBody {
  position: absolute;
  inset: 30px 0 0;
  overflow: hidden;
  background: #101113;
}
.cfDcFrameBody > iframe,
.cfDcFrameBody > .cfDcIframe,
.cfDcFrameBody > .cfLiveFrame {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0c0e;
}
/* Edit Preview asli dipindah ke dalam frame, renderer tetap satu. */
#cfPrevStage[data-preview-mode="dual"] .cfDcFrameBody > #projPreview {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.cfDcUnavailable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #777e8b;
  font-size: 10px;
  text-align: center;
  background: repeating-linear-gradient(135deg,#111216 0 10px,#15161a 10px 20px);
}
.cfDcResize {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
}
.cfDcResize::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b707b;
  border-bottom: 2px solid #6b707b;
}
.cfDcFrame.is-selected .cfDcResize::after { border-color: #35c2e2; }
.cfDcFrame.is-locked .cfDcResize { display: none; }
.cfDualCanvas.is-space .cfDcFrameBody,
.cfDualCanvas.is-panning .cfDcFrameBody,
.cfDualCanvas.is-dragging .cfDcFrameBody,
.cfDualCanvas.is-resizing .cfDcFrameBody {
  pointer-events: none;
}
.cfDcAddMenu,
.cfDcHelp {
  position: absolute;
  z-index: 100;
  top: 39px;
  left: 7px;
  width: 210px;
  padding: 8px;
  border: 1px solid #3d4048;
  border-radius: 8px;
  background: rgba(31,33,38,.98);
  box-shadow: 0 16px 44px rgba(0,0,0,.48);
  box-sizing: border-box;
}
.cfDcAddMenu[hidden], .cfDcHelp[hidden] { display: none !important; }
.cfDcAddMenu > b,
.cfDcHelp > b {
  display: block;
  margin: 2px 2px 7px;
  color: #fff;
  font-size: 10px;
}
.cfDcAddMenu > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 3px 0;
  text-align: left;
}
.cfDcAddMenu > button span { width: 16px; color: #65d2eb; text-align: center; }
.cfDcAddMenu > button:disabled { opacity: .35; cursor: default; }
.cfDcAddMenu > label { display: block; margin: 9px 2px 4px; color: #8d94a1; font-size: 8px; }
.cfDcUrlRow { display: flex; gap: 4px; }
.cfDcUrlRow input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  border: 1px solid #41444b;
  border-radius: 6px;
  background: #17181c;
  color: #edf1f8;
  padding: 5px 7px;
  box-sizing: border-box;
  font: 500 9px/1 "TikTok Sans", system-ui, sans-serif;
}
.cfDcUrlRow input.bad { border-color: #e46060; }
.cfDcUrlRow button { flex: 0 0 auto; }
.cfDcHelp { left: auto; right: 7px; width: 255px; }
.cfDcHelp span { display: block; margin: 5px 2px; color: #b9bfca; font-size: 8.5px; }
.cfDcHelp small { display: block; margin: 8px 2px 2px; color: #777f8e; font-size: 8px; }
.cfDcHelp kbd {
  display: inline-block;
  min-width: 14px;
  padding: 2px 4px;
  border: 1px solid #4b4e56;
  border-radius: 4px;
  background: #15161a;
  color: #e7ebf2;
  font: 600 8px/1 "TikTok Sans", system-ui, sans-serif;
  text-align: center;
}
.cfDcEmpty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
  color: #707783;
}
.cfDcEmpty[hidden] { display: none !important; }
.cfDcEmpty b { color: #9ca3af; font-size: 12px; }
.cfDcEmpty span { font-size: 9px; }
.cfDcMini {
  position: absolute;
  z-index: 45;
  right: 8px;
  bottom: 8px;
  width: 150px;
  height: 92px;
  overflow: hidden;
  border: 1px solid #41444b;
  border-radius: 7px;
  background: rgba(25,26,30,.9);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  cursor: pointer;
}
.cfDcMiniNode,
.cfDcMiniView {
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.cfDcMiniNode { border: 1px solid #66707e; background: rgba(89,101,118,.35); }
.cfDcMiniNode.on { border-color: #24c0e2; background: rgba(36,192,226,.34); }
.cfDcMiniView { border: 1px solid #f4f7fb; background: rgba(255,255,255,.04); }

/* Maximize tanpa browser fullscreen permission; Esc mengembalikan. */
#cfPrevStage.cfDcMax {
  position: fixed !important;
  inset: 46px 6px 6px !important;
  z-index: 5000 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
#cfPrevStage.cfDcMax .cfDualCanvas { position: absolute; }

@media (max-width: 700px) {
  .cfDcHint { display: none; }
  .cfDcToolbar { gap: 3px; padding-inline: 4px; }
  .cfDcToolbar button { padding-inline: 6px; }
  .cfDcMini { width: 105px; height: 64px; }
  #cfPrevStage.cfDcMax { inset: 38px 3px 3px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cfDcFrameOps { transition: none; }
}