/* ============================================================
   Facade live tier - guided flow, THREE-ZONE layout (sandbox).
   Owner's layout (2026-06-20): LEFT = control panel (realtime ControlNet
   settings) · CENTER = live preview parked over the rotatable clay model ·
   RIGHT = info hub. On entry we strip the viewer chrome that doesn't serve
   this workflow. Lives alongside the cloned viewer, kept separable for the
   condense step. Theme: dark teal, #27c6ff accent, coral #ff6f8d.
   ============================================================ */

/* ---- entry pill ---- */
#fl-entry{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
  z-index:100001; display:none; align-items:center; gap:9px;
  padding:11px 20px; border:none; border-radius:24px; cursor:pointer;
  font:600 14px system-ui,sans-serif; color:#031018;
  background:linear-gradient(90deg,#27c6ff,#5fe0c0);
  box-shadow:0 6px 26px rgba(39,198,255,.45);
}
#fl-entry.show{ display:inline-flex; }
#fl-entry:hover{ filter:brightness(1.06); }

/* ---- strip the viewer chrome that doesn't serve this workflow ---- */
body.fl-active #ifcv-panel,
body.fl-active #ifcv-dropsite,
body.fl-active #ifcv-browsershot,
body.fl-active #ifcv-persp,
body.fl-active #ifcv-shot,
body.fl-active #ifcv-actions,
body.fl-active #ifcv-exit{ display:none !important; }

/* ---- side panels (LEFT controls / RIGHT info) ---- */
#fl-left,#fl-right{
  position:fixed; top:0; bottom:0; width:340px; z-index:100002; display:none;
  flex-direction:column; background:rgba(6,18,26,.97); color:#cfe;
  font:14px system-ui,sans-serif; backdrop-filter:blur(3px);
}
#fl-left{ left:0; border-right:1px solid #1d3f48; }
#fl-right{ right:0; border-left:1px solid #1d3f48; }
body.fl-active #fl-left,body.fl-active #fl-right{ display:flex; }

.fl-hd{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #143038; }
.fl-hd .t{ font-weight:700; color:#27c6ff; letter-spacing:.02em; font-size:15px; }
.fl-hd .sub{ color:#6b8a96; font-size:11px; }
#fl-x{ background:#0c1c24; border:1px solid #1d3f48; color:#cfe; border-radius:7px;
  width:28px; height:28px; cursor:pointer; font-size:15px; line-height:1; }
.fl-bd{ flex:1; overflow:auto; padding:16px; }
.fl-ft{ padding:14px 16px; border-top:1px solid #143038; }

.fl-sec{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#7fb0bf; margin:0 0 8px; }
.fl-sec:not(:first-child){ margin-top:20px; }
.fl-sub{ color:#6b8a96; font-size:12.5px; line-height:1.5; margin:0 0 12px; }
.fl-hint{ color:#5fe0c0; font-size:12px; line-height:1.5; background:#0c1c24;
  border:1px dashed #2a5a66; border-radius:8px; padding:9px 11px; margin:0 0 14px; }

/* ---- material family selector (compact) ---- */
.fl-fam{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
.fl-fam button{ display:flex; align-items:center; gap:8px; border:1.5px solid #1d3f48;
  border-radius:10px; padding:8px 10px; cursor:pointer; background:#08151d; color:#cfe;
  font-size:12.5px; text-align:left; }
.fl-fam button:hover{ border-color:#27c6ff; }
.fl-fam button.sel{ border-color:#ff6f8d; box-shadow:0 0 0 1px #ff6f8d; }
.fl-fam .sw{ width:22px; height:22px; border-radius:6px; flex:0 0 22px; }

/* ---- refinement controls ---- */
.fl-ctl{ margin-bottom:16px; }
.fl-ctl .lab{ display:flex; justify-content:space-between; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:#7fb0bf; margin-bottom:6px; }
.fl-ctl .geo{ color:#5fe0c0; font-size:9px; border:1px solid #2a5; border-radius:8px;
  padding:0 5px; text-transform:none; letter-spacing:0; }
.fl-ctl input[type=range]{ width:100%; }
.fl-ends{ display:flex; justify-content:space-between; color:#6b8a96; font-size:11px; margin-top:2px; }
.fl-seg{ display:flex; gap:6px; }
.fl-seg button{ flex:1; background:#08151d; border:1px solid #1d3f48; color:#cfe;
  border-radius:7px; padding:7px 4px; cursor:pointer; font-size:12px; text-transform:capitalize; }
.fl-seg button.on{ border-color:#27c6ff; background:#0c1c24; color:#27c6ff; }

/* ---- buttons ---- */
.fl-btn{ width:100%; border:none; border-radius:8px; padding:11px; font-weight:600;
  cursor:pointer; font-size:13.5px; }
.fl-btn.primary{ background:#27c6ff; color:#031018; }
.fl-btn.primary.dirty{ animation:flpulse 1.1s ease-in-out infinite; }
.fl-btn.ghost{ background:#0c1c24; color:#cfe; border:1px solid #1d3f48; margin-top:8px; }
@keyframes flpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(39,198,255,.0);} 50%{ box-shadow:0 0 0 4px rgba(39,198,255,.35);} }

/* ---- RIGHT info hub bits ---- */
.fl-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.fl-chip{ width:20px; height:20px; border-radius:5px; flex:0 0 20px; border:1px solid #2a4a55; }
.fl-slots{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.fl-slot{ aspect-ratio:1; border:1.5px dashed #25404a; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:#3d5a64; font-size:10px; text-align:center; }
.fl-stub{ padding:9px 11px; border-radius:8px; font-size:12px; line-height:1.5;
  background:#0c1c24; border:1px dashed #2a5a66; color:#8fd; margin-bottom:12px; }
.fl-stub b{ color:#5fe0c0; }
.fl-payload summary{ cursor:pointer; color:#7fb0bf; font-size:12px; }
.fl-payload pre{ font:11px ui-monospace,monospace; color:#9fc; white-space:pre-wrap;
  word-break:break-all; background:#06121a; border:1px solid #143038; border-radius:7px;
  padding:9px; margin-top:7px; max-height:220px; overflow:auto; }

/* ---- CENTER: live preview parked over the model ---- */
#fl-center{ position:fixed; inset:0; z-index:100001; display:none; pointer-events:none; }
body.fl-active #fl-center{ display:block; }
#fl-badge{ position:fixed; left:50%; top:74px; transform:translateX(-50%); z-index:100001;
  pointer-events:none; background:rgba(8,18,26,.82); border:1px solid #2a5a66;
  color:#8fd; font-size:11.5px; padding:5px 12px; border-radius:14px; }
#fl-badge b{ color:#5fe0c0; }
#fl-prevwrap{ position:fixed; left:340px; right:340px; top:96px; bottom:24px; z-index:100001;
  display:none; align-items:center; justify-content:center; pointer-events:none; }
#fl-prevwrap.show{ display:flex; }
#fl-prevcard{ position:relative; max-width:92%; max-height:92%; pointer-events:auto;
  border:1px solid #27c6ff; border-radius:12px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.6); }
#fl-prevcard img{ display:block; max-width:100%; max-height:78vh; }
#fl-prevtag{ position:absolute; left:0; right:0; bottom:0; background:rgba(6,18,26,.92);
  color:#8fd; font-size:11.5px; padding:7px 10px; }
#fl-prevtag b{ color:#5fe0c0; }
#fl-prevx{ position:absolute; top:7px; right:7px; width:26px; height:26px; border:none;
  border-radius:6px; background:rgba(6,18,26,.9); color:#cfe; cursor:pointer; font-size:14px; }