/* Sidebar UX preview: tabs, quieter guidance, contextual layer controls. */
.control-pane.sidebar-ux-preview{
  padding-top:0;
}
.sidebar-ux-tabs{
  position:sticky;
  top:0;
  z-index:12;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:10px 0;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #ececec;
  backdrop-filter:blur(8px);
}
.sidebar-ux-tab{
  min-height:36px;
  border:1px solid #dddddd;
  border-radius:9px;
  background:#ffffff;
  color:#555555;
  font:750 11px/1 Inter,Arial,sans-serif;
  cursor:pointer;
}
.sidebar-ux-tab:hover{
  background:#f7f7f7;
  color:#222222;
}
.sidebar-ux-tab.active{
  background:#171717;
  border-color:#171717;
  color:#ffffff;
}
.sidebar-ux-panels{
  padding-top:10px;
}
.sidebar-ux-panel{
  display:none;
}
.sidebar-ux-panel.active{
  display:block;
}
.sidebar-ux-panel > .section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.sidebar-ux-panel[data-sidebar-panel="design"] .add-grid{
  margin-bottom:10px;
}
.sidebar-ux-panel[data-sidebar-panel="order"] .section{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* Put the ChatGPT background handoff inside Background and make it secondary. */
.sidebar-ux-panel #chatBackgroundPanel{
  margin-bottom:4px;
}
.sidebar-ux-panel .section .ai-designer-launch{
  margin:10px 0 0;
}
.control-pane.sidebar-ux-preview .ai-designer-launch .ai-toggle{
  width:100%;
  border:1px solid #d9d9d9;
  background:#f7f7f7;
  color:#333333;
  border-radius:9px;
  padding:9px 10px;
  font:750 11px/1.25 Inter,Arial,sans-serif;
  box-shadow:none;
}
.control-pane.sidebar-ux-preview .ai-designer-launch .ai-toggle:hover{
  background:#f1f1f1;
  border-color:#cfcfcf;
}
.control-pane.sidebar-ux-preview .ai-designer-launch .ai-toggle .spark{
  width:21px;
  height:21px;
  border-radius:6px;
  font-size:11px;
}

/* Sizing guidance should read as helpful information, not an error. */
.control-pane.sidebar-ux-preview .order-options-note.fit-warning{
  margin-top:7px;
  padding:7px 8px;
  border:1px solid #e3e3e3;
  border-left:3px solid #c9c9c9;
  border-radius:7px;
  background:#f8f8f8;
  color:#6f6f6f;
  font-size:9px;
  font-weight:600;
  line-height:1.4;
}

/* Keep selected-object controls attached directly to the selected layer card. */
.control-pane.sidebar-ux-preview .layer.active{
  border-color:#bdbdbd;
  background:#fcfcfc;
}
.control-pane.sidebar-ux-preview .layer.active > .layer-controls{
  margin:9px -1px -1px;
  padding:10px;
  border:1px solid #dddddd;
  border-radius:8px;
  background:#f7f7f7;
  cursor:default;
}
.control-pane.sidebar-ux-preview .layer.active > .layer-controls .layer-name{
  padding-bottom:3px;
}
.control-pane.sidebar-ux-preview .layer.active > .layer-controls .range-line{
  grid-template-columns:62px minmax(0,1fr) 38px;
}

/* Make each tab feel compact on smaller screens too. */
@media(max-width:850px){
  .control-pane.sidebar-ux-preview{
    padding-top:0;
  }
  .sidebar-ux-tabs{
    top:0;
    padding-top:10px;
  }
  .sidebar-ux-tab{
    min-height:40px;
    font-size:12px;
  }
}


/* Background and Layers now live together as compact accordion rows. */
.control-pane.sidebar-ux-preview .sidebar-collapsible-section{
  margin:0;
  padding:0;
  border-top:1px solid #dedede;
}
.control-pane.sidebar-ux-preview .sidebar-collapsible-section:last-of-type{
  border-bottom:1px solid #dedede;
}
.control-pane.sidebar-ux-preview .sidebar-section-toggle{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:54px;
  margin:0;
  padding:0 12px;
  cursor:pointer;
  user-select:none;
  font-size:15px;
  font-weight:650;
  color:#222;
  background:#fafafa;
}
.control-pane.sidebar-ux-preview .sidebar-section-toggle:hover{
  background:#f4f4f4;
}
.control-pane.sidebar-ux-preview .sidebar-section-toggle .caret{
  display:inline-flex;
  width:18px;
  justify-content:center;
  font-size:29px;
  line-height:1;
  font-weight:400;
  transform:rotate(0deg);
  transition:transform .16s ease;
}
.control-pane.sidebar-ux-preview .sidebar-collapsible-section.open > .sidebar-section-toggle .caret{
  transform:rotate(90deg);
}
.control-pane.sidebar-ux-preview .sidebar-section-body{
  padding:12px;
  background:#fff;
}
.control-pane.sidebar-ux-preview .sidebar-section-body[hidden]{
  display:none!important;
}
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] .sidebar-section-body{
  padding:0;
}
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] .layers{
  margin:0;
}
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] .layer{
  border-left:0;
  border-right:0;
  border-radius:0;
  margin:0;
  padding:12px;
}
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] .layer + .layer{
  border-top:1px solid #e2e2e2;
}
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] .empty,
.control-pane.sidebar-ux-preview [data-sidebar-section="layers"] > .sidebar-section-body > .quality-card{
  margin:10px 12px;
}


/* Compact layer-row controls: keep common actions on the row itself. */
.control-pane.sidebar-ux-preview .layer{
  position:relative;
}
.control-pane.sidebar-ux-preview .layer-head{
  align-items:center;
}
.control-pane.sidebar-ux-preview .layer-inline-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
.control-pane.sidebar-ux-preview .layer-inline-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border:1px solid #d9d9d9;
  border-radius:7px;
  background:#fff;
  color:#555;
  cursor:pointer;
  font:750 10px/1 Inter,Arial,sans-serif;
}
.control-pane.sidebar-ux-preview .layer-inline-action.icon-only{
  width:30px;
  padding:0;
}
.control-pane.sidebar-ux-preview .layer-inline-action svg{
  width:16px;
  height:16px;
  stroke:currentColor;
}
.control-pane.sidebar-ux-preview .layer-inline-action:hover{
  background:#f5f5f5;
  color:#222;
}
.control-pane.sidebar-ux-preview .layer-inline-action.danger{
  color:#b42318;
}
.control-pane.sidebar-ux-preview .layer-inline-action:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.control-pane.sidebar-ux-preview .layer-order-actions{
  justify-content:flex-start;
  gap:5px;
  margin-top:6px;
}
.control-pane.sidebar-ux-preview .layer-order-actions button{
  flex:0 0 auto;
  width:28px;
  height:26px;
  padding:0;
  font-size:13px;
}
.control-pane.sidebar-ux-preview .layer-controls > .action-row{
  display:none!important;
}