.responsive-device-status{
  height:24px;
  display:inline-flex;
  align-items:center;
  margin-left:7px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}
body.dark .responsive-device-status{background:var(--surface-2)}
.responsive-regenerate{
  height:24px;
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  color:var(--primary);
  font-size:9px;
  white-space:nowrap;
  cursor:pointer;
}
.responsive-regenerate:hover{background:var(--primary-soft);border-color:var(--primary)}
@media(max-width:1100px){.responsive-device-status,.responsive-regenerate{display:none}}

/* A component hidden for the active responsive device must not remain as a faded editor ghost. */
.editor .canvas-component.responsive-hidden{display:none!important}

/* Standalone preview: reveal generated mobile navigation items when the menu is opened. */
.standalone-preview .canvas-component.hidden-element.vc-preview-menu-item-open{
  display:block!important;
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  height:auto!important;
  margin-top:10px!important;
}