/* SOP placeholder controls (example workspace and static export). Neutral and small. On phones/tablets it sits at the END of the page (static), so it
   never covers content; from 992px it floats bottom-left over the sidebar column. Escape closes it (sop-placeholder.js). */
.sopui-preview-bar { position: static; margin: 16px 16px 24px; max-width: 360px;
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: .875rem; }
.sopui-preview-bar > summary { cursor: pointer; padding: 10px 14px; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 600; list-style: none; }
.sopui-preview-bar > summary::-webkit-details-marker { display: none; }
.sopui-preview-bar > summary:focus-visible { outline: 3px solid var(--sop-focus, #6B3F8C); outline-offset: 2px; border-radius: 10px; }
.sopui-preview-body { padding: 0 14px 12px; }
.sopui-preview-body a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.sopui-preview-hdr { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: 6px 0 2px; }
.sopui-persona { min-height: 44px; }
.sopui-persona[aria-pressed="true"] { background: var(--bs-secondary-bg); font-weight: 600; }
[data-sopui-hidden="1"] { display: none !important; }
@media (min-width: 992px) {
  .sopui-preview-bar { position: fixed; left: 12px; bottom: 12px; margin: 0; z-index: 1040; max-width: min(320px, calc(100vw - 24px)); }
  .sopui-preview-bar[open] { max-height: calc(100vh - 24px); overflow: auto; }
  /* Leave room so page content can always scroll clear of the collapsed floating control. */
  body { padding-bottom: 72px; }
}
[data-merp-theme="dark"] .sopui-preview-bar { background: #1f2229; color: #e4e6ea; border-color: #3a3f4b; }
@media print { .sopui-preview-bar { display: none !important; } }