/* Owned studio presentation. Captured editor DOM contract: captured-editor-adapter.mjs. */
[data-local-models]  {
  font:inherit;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:inherit;
  padding:8px 12px;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px
}

[data-local-models]:hover,[data-local-models][aria-expanded=true]  {
  background:#8882
}

[data-radix-popper-content-wrapper]:has(.cp-device-menu)  {
  position:fixed!important;
  inset:74px auto auto 50%!important;
  transform:translateX(-50%)!important;
  z-index:10000!important;
  width:min(760px,calc(100vw - 32px))!important
}

.cp-device-menu  {
  width:100%!important;
  max-height:calc(100dvh - 100px)!important;
  overflow-y:auto!important;
  padding:20px!important;
  box-shadow:0 24px 90px #0004!important;
  border:1px solid #8884!important;
  border-radius:22px!important;
  box-sizing:border-box
}

.cp-device-menu [hidden]  {
  display:none!important
}

.cp-device-menu>[role=group],.cp-device-menu .cp-device-group  {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px!important
}

.cp-device-menu .cp-device-group  {
  grid-column:1/-1
}

.cp-device-menu .cp-device-group[hidden]  {
  display:none!important
}

.cp-device-menu .cp-device-menu-heading  {
  grid-column:1/-1;
  font-size:10px!important;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:16px 0 2px!important;
  color:inherit;
  opacity:.65
}

.cp-device-menu .cp-device-menu-separator  {
  display:none!important
}

.cp-device-menu .cp-device-row  {
  position:relative;
  min-width:0!important;
  min-height:122px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:12px 5px!important;
  border:1px solid #8883;
  border-radius:12px;
  background:#88808;
  cursor:pointer;
  box-sizing:border-box
}

.cp-device-menu .cp-device-row[hidden]  {
  display:none!important
}

.cp-device-menu .cp-device-row[data-active=true]  {
  border-color:#e7814b;
  background:#e7814b12
}

.cp-device-menu .cp-device-row[data-highlighted]  {
  background:#8882;
  outline:2px solid #e7814b;
  outline-offset:1px
}

.cp-device-menu .cp-device-thumb  {
  width:90px!important;
  height:67px!important;
  background:transparent!important;
  flex:none!important
}

.cp-device-menu .cp-device-thumb img  {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important
}

.cp-device-menu .cp-device-meta  {
  flex:none!important;
  text-align:center
}

.cp-device-menu .cp-mockup-name  {
  font-size:11px!important;
  white-space:normal;
  text-align:center
}

.cp-device-menu .cp-device-row>span:not(.cp-device-thumb):not(.cp-device-meta):not(.cp-device-check)  {
  display:none!important
}

.cp-device-menu .cp-device-check  {
  position:absolute;
  right:8px;
  top:8px
}

[data-studio-library-heading]  {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:0 40px 20px 0;
  border-bottom:1px solid #8883;
  margin-bottom:14px
}

[data-studio-library-heading] strong  {
  font-family:system-ui,sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.7px
}

[data-studio-library-heading] span  {
  font-family:system-ui,sans-serif;
  font-size:12px;
  opacity:.65
}

[data-studio-library-heading] button  {
  position:absolute;
  right:0;
  top:0;
  width:30px;
  height:30px;
  border:1px solid #8884;
  border-radius:50%;
  background:transparent;
  color:inherit;
  font-size:22px;
  cursor:pointer
}

@media(max-width:580px)  {
  .cp-device-menu>[role=group],.cp-device-menu .cp-device-group  {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.cp-device-menu  {
  padding:15px!important
}

}

.cp-device-menu .cp-device-group  {
  display:contents!important
}

.cp-device-menu .cp-device-menu-heading  {
  display:none!important
}


[data-studio-agents] {
  appearance: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 500 10px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .72;
}
[data-studio-agents]:hover { background: rgb(128 128 128 / .09); opacity: 1; }
[data-studio-agents][aria-pressed="false"] { opacity: .4; }
[data-studio-agents][data-agent-status="working"] { color: #dd6b2b; opacity: 1; }
