/* Visual UI Studio — direct manipulation chrome. No sidebar/property panel. */
.ui-studio-dock[hidden],.ui-studio-toolbar[hidden],.ui-studio-resize-handle[hidden]{display:none!important}
.ui-studio-dock,.ui-studio-toolbar,.ui-studio-resize-handle{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Fixed editor controls inside the modal use viewport coordinates. */
body.ui-studio-inspecting #modal[open]{transform:none!important}

/* --- Bottom Dock --- */
.ui-studio-dock{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:2147483000;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:calc(100vw - 24px);
  padding:7px 12px;
  border:1px solid #334155;
  border-radius:9999px;
  background:rgba(15,23,42,0.94);
  box-shadow:0 12px 36px rgba(0,0,0,0.38),0 0 0 1px rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  color:#f8fafc;
  font-size:13px;
}
.ui-studio-dock-info{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:8px;
  border-right:1px solid #334155;
}
.ui-studio-dock-title{
  font-weight:700;
  color:#60a5fa;
  white-space:nowrap;
  font-size:12.5px;
}
.ui-studio-dock-status{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#94a3b8;
  font-size:12px;
}
.ui-studio-dock-global,.ui-studio-dock-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.ui-studio-dock-global{
  padding-right:8px;
  border-right:1px solid #334155;
}
.ui-studio-scale-value{
  min-width:42px;
  text-align:center;
  color:#bfdbfe;
  font-weight:700;
  font-size:12px;
}
.ui-studio-dock .ui-studio-density{
  min-width:96px;
}
.ui-studio-dock button{
  min-height:30px;
  padding:4px 11px;
  border:1px solid #334155;
  border-radius:9999px;
  background:#1e293b;
  color:#f1f5f9;
  font:600 12.5px/1 system-ui;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.ui-studio-dock button:hover{
  background:#334155;
  border-color:#475569;
  color:#fff;
}
.ui-studio-dock button:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.ui-studio-dock .ui-studio-primary{
  background:#2563eb;
  border-color:#3b82f6;
  color:#fff;
}
.ui-studio-dock .ui-studio-primary:hover{
  background:#1d4ed8;
  border-color:#2563eb;
}
.ui-studio-dock-hidden{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}
.ui-studio-dock-hidden button{
  background:#374151;
  border-color:#4b5563;
  color:#cbd5e1;
  font-size:11.5px;
}

/* --- Floating Contextual Toolbar --- */
.ui-studio-toolbar{
  position:fixed;
  z-index:2147483001;
  display:flex;
  align-items:center;
  gap:4px;
  max-width:calc(100vw - 16px);
  padding:5px 8px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 26px rgba(15,23,42,0.18),0 0 0 1px rgba(0,0,0,0.05);
  backdrop-filter:blur(8px);
  color:#0f172a;
  font-size:12px;
}
.ui-studio-toolbar-title{
  max-width:130px;
  padding:0 6px 0 2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  color:#1e293b;
  border-right:1px solid #e2e8f0;
}
.ui-studio-toolbar-group{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0 4px;
  border-right:1px solid #e2e8f0;
}
.ui-studio-toolbar-group:last-child{
  border-right:none;
  padding-right:0;
}
.ui-studio-tool-btn{
  min-width:28px;
  height:28px;
  padding:2px 7px;
  border:1px solid #cbd5e1;
  border-radius:5px;
  background:#f8fafc;
  color:#1e293b;
  font:600 12px/1 system-ui;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.ui-studio-tool-btn:hover{
  background:#e2e8f0;
  border-color:#94a3b8;
}
.ui-studio-tool-btn[aria-pressed="true"],.ui-studio-tool-btn.is-active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.ui-studio-color-label{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid #cbd5e1;
  border-radius:5px;
  background:#f8fafc;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .15s;
}
.ui-studio-color-label:hover{
  border-color:#94a3b8;
}
.ui-studio-color-icon{
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}
.ui-studio-color-label input[type=color]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

/* --- Direct Resize Handle --- */
.ui-studio-resize-handle{
  position:fixed;
  z-index:2147483002;
  width:14px;
  height:14px;
  border:2px solid #ffffff;
  border-radius:3px;
  background:#2563eb;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  cursor:nwse-resize;
  touch-action:none;
}
body.ui-studio-resizing{
  cursor:nwse-resize!important;
  user-select:none!important;
}

/* --- Selection, Hover & Inline Edit Outlines --- */
body.ui-studio-inspecting .pos-selling-shell [data-ui-edit],
body.ui-studio-active .pos-selling-shell [data-ui-edit]{
  outline:1px dashed rgba(59,130,246,0.45);
  outline-offset:-2px;
}
body.ui-studio-inspecting .pos-selling-shell [data-ui-edit].ui-studio-hover,
body.ui-studio-active .pos-selling-shell [data-ui-edit].ui-studio-hover{
  outline:2px solid #3b82f6;
  outline-offset:-2px;
}
body.ui-studio-inspecting .pos-selling-shell [data-ui-edit].ui-studio-selected,
body.ui-studio-active .pos-selling-shell [data-ui-edit].ui-studio-selected{
  outline:2.5px solid #2563eb!important;
  outline-offset:-2px!important;
}
body.ui-studio-inspecting .pos-selling-shell [data-ui-edit-text],
body.ui-studio-active .pos-selling-shell [data-ui-edit-text]{
  cursor:text;
}
.ui-studio-editing-inline,
.ui-studio-inline-edit{
  outline:2px solid #10b981!important;
  outline-offset:2px!important;
  border-radius:3px;
  background:rgba(16,185,129,0.12)!important;
  color:inherit!important;
  caret-color:#10b981;
  min-width:16px;
}

/* Native POS handles stay above selection outlines */
body.ui-studio-inspecting .pos-selling-shell .pos-window-editor,
body.ui-studio-inspecting .pos-selling-shell .pos-window-resize,
body.ui-studio-inspecting .pos-selling-shell .pos-card-resizer,
body.ui-studio-inspecting .pos-selling-shell .pos-action-resizer,
body.ui-studio-inspecting .pos-selling-shell .pos-rail-resizer,
body.ui-studio-inspecting .pos-selling-shell .pos-actions-resizer,
body.ui-studio-inspecting .pos-selling-shell .pos-cart-resizer,
body.ui-studio-active .pos-selling-shell .pos-window-editor,
body.ui-studio-active .pos-selling-shell .pos-window-resize,
body.ui-studio-active .pos-selling-shell .pos-card-resizer,
body.ui-studio-active .pos-selling-shell .pos-action-resizer,
body.ui-studio-active .pos-selling-shell .pos-rail-resizer,
body.ui-studio-active .pos-selling-shell .pos-actions-resizer,
body.ui-studio-active .pos-selling-shell .pos-cart-resizer{
  z-index:12;
}

/* Density overrides */
html[data-ui-studio-density=dense] .pos-selling-shell .product-card{padding:6px}
html[data-ui-studio-density=touch] .pos-selling-shell .product-card{min-height:140px}
html[data-ui-studio-density=touch] .pos-selling-shell [data-pos-action-key]{min-height:56px}

/* Responsive flow <901px: preserve normal mobile flow, no free-window desktop geometry */
@media(max-width:900px){
  .ui-studio-dock{
    left:8px;
    right:8px;
    bottom:8px;
    transform:none;
    max-width:calc(100vw - 16px);
    overflow-x:auto;
    justify-content:space-between;
    border-radius:12px;
    padding:6px 8px;
  }
  .ui-studio-dock-info{display:none}
  .ui-studio-toolbar{gap:3px;padding:4px 6px}
  .ui-studio-toolbar-title{max-width:80px}
  .ui-studio-tool-btn{min-width:24px;height:24px;padding:2px 5px;font-size:11px}
  .ui-studio-color-label{width:24px;height:24px}
  body.ui-studio-inspecting .pos-selling-shell .pos-window-editor,
  body.ui-studio-inspecting .pos-selling-shell .pos-window-resize,
  body.ui-studio-active .pos-selling-shell .pos-window-editor,
  body.ui-studio-active .pos-selling-shell .pos-window-resize{
    display:none!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .ui-studio-dock,.ui-studio-toolbar,.ui-studio-resize-handle{
    transition:none!important;
    animation:none!important;
  }
}