/* assets/css/mockup-custom-html.css
   UI + iframe layer for Mockup #5 HTML/CSS mode (MVP)
*/

/* segmented mode toggle */
#custom .uc-modeToggle{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
#custom .uc-modeToggle .uc-seg{ appearance:none; border:0; background:transparent; padding:9px 12px; font:inherit; font-weight:700; color:#111; cursor:pointer; line-height:1; }
#custom .uc-modeToggle .uc-seg + .uc-seg{ border-left:1px solid var(--line); }
#custom .uc-modeToggle .uc-seg:hover{ background:#f8fafc; }
#custom .uc-modeToggle .uc-seg.is-active{ background:#111; color:#fff; }

/* toolbar rows + alignment */
#custom .uc-toolbar{ margin-top:0 !important; flex-direction:column; align-items:stretch; }
#custom .uc-toolbar__row{ width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#custom .uc-toolbar__row--bottom{ align-items:flex-start; }
#custom .uc-toolbar__row--bottom .uc-toolbar__hint{ padding-top:2px; }

/* html tools group */
#custom .uc-htmlTools{ position:relative; display:none; }
#custom.is-html .uc-htmlTools{ display:flex; }

/* hide canvas-only buttons in HTML/CSS mode (keep obj popover anchor) */
#custom.is-html #customClearAll,
#custom.is-html #customCanvasBtn,
#custom.is-html #customCanvasPop{ display:none !important; }


/* wider popover for html import */
#custom .uc-htmlPop{ right:auto; left:0; width:min(760px, 94vw); }
#custom .uc-htmlGrid{ grid-template-columns: 1fr 1fr; }
#custom .uc-htmlField textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.35;
}

@media (max-width: 740px){
  #custom .uc-htmlGrid{ grid-template-columns: 1fr; }
  #custom .uc-htmlField textarea{ min-height:180px; }
}

/* HTML layer under images/texts but above canvas bg */
#customHtmlLayer{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#customHtmlFrame{ width:100%; height:100%; border:0; background:#fff; border-radius:14px; pointer-events:auto; }

/* Shield: blocks iframe when panning/dragging */
#customHtmlShield{ position:absolute; inset:0; background:transparent; pointer-events:auto; z-index:2; }

/* Mode visibility helpers */
#custom:not(.is-html) #customHtmlLayer{ display:none; }

/* Placeholder text differs per mode */
#custom:not(.is-html) #customPlaceholderHtmlText{ display:none; }
#custom.is-html #customPlaceholderCanvasText{ display:none; }

/* Remove underlines/borders from links in mockup #5 (both canvas text blocks and html layer) */
#custom .editable[data-scope="custom"] a{ text-decoration:none !important; border-bottom:0 !important; }
#custom.is-html #customHtmlLayer a{ text-decoration:none !important; border-bottom:0 !important; }

/* Shield is enabled by JS via .is-shielded, but also when viewport indicates interaction */
#custom.is-html #customHtmlShield{ display:none; }
#custom.is-html.is-shielded #customHtmlShield{ display:block; }
#custom.is-html #customViewport.uc-spacepan #customHtmlShield{ display:block; }
#custom.is-html #customViewport.is-dropping #customHtmlShield{ display:block; }
#custom.is-html #customViewport.is-panning #customHtmlShield{ display:block; }

/* HTML-mode hint should wrap (no ellipsis) */
#custom.is-html .uc-toolbar__hint{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  min-width: 0;
}