/* ==========================================================================
   Landino Demo Mode — restriction layer styles
   Scoped strictly under body.demo-mode so the real editor UI is untouched.
   ========================================================================== */

/* --- Topbar demo pill ---------------------------------------------------- */
body.demo-mode .demo-pill{
  display:inline-flex;align-items:center;gap:6px;
  margin-inline-start:10px;padding:4px 11px;
  border:1px solid rgba(255,178,36,.5);border-radius:999px;
  background:linear-gradient(135deg,rgba(255,178,36,.18),rgba(255,178,36,.08));
  color:#f5b02e;font-size:10px;font-weight:800;letter-spacing:.4px;
  white-space:nowrap;user-select:none;
}
body.demo-mode .demo-pill::before{content:"●";font-size:8px;color:#f5b02e;animation:demoPulse 2.2s ease infinite}
@keyframes demoPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --- Bottom ribbon -------------------------------------------------------- */
body.demo-mode .app-shell{height:calc(100vh - 36px)}
body.demo-mode .demo-ribbon{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  height:36px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,rgba(13,16,24,.98),rgba(23,27,39,.98));
  border-top:1px solid rgba(245,176,46,.35);
  color:#e9edf5;font-size:11.5px;
  direction:rtl;
}
body.demo-mode .demo-ribbon-dot{width:8px;height:8px;border-radius:50%;background:#f5b02e;flex:none;animation:demoPulse 2.2s ease infinite}
body.demo-mode .demo-ribbon-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.demo-mode .demo-ribbon-link{
  flex:none;padding:4px 14px;border-radius:8px;
  background:var(--accent,#7559ff);color:#fff;font-weight:700;font-size:11px;
  text-decoration:none;transition:filter .2s ease;
}
body.demo-mode .demo-ribbon-link:hover{filter:brightness(1.12);color:#fff}
body.ui-light.demo-mode .demo-ribbon{background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(250,246,238,.98));color:#3c4657}

/* Preview mode height corrections */
body.demo-mode.preview-mode .stage-area,
body.demo-mode.preview-mode .stage-scroller{height:calc(100vh - 36px - var(--topbar-h))}

/* --- Restriction: hide server-side-only surfaces -------------------------- */
/* Media upload card, storage quota card and the trusted-integration builder
   only work against real server endpoints; in the demo they are removed
   from the UI while everything else stays interactive. */
body.demo-mode #assetUploadDrop,
body.demo-mode .media-storage-card,
body.demo-mode #trustedIntegrationCreate,
body.demo-mode .media-toolbar-btn.trash{display:none!important}
/* The integrations tab has no demo-capable content: hide the tab itself. */
body.demo-mode #libraryTabs [data-tab="integrations"]{display:none!important}

/* Upload buttons inside the inspector remain visible but the demo JS layer
   intercepts them with a friendly notice; dim them slightly as a hint. */
body.demo-mode .upload-action,
body.demo-mode [data-action="media-replace"]{opacity:.55}

/* --- Demo notice modal ----------------------------------------------------- */
body.demo-mode .demo-notice-modal .demo-notice-text{
  margin:0 0 12px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,#f5b02e 12%,transparent);
  border:1px solid rgba(245,176,46,.35);
  color:inherit;font-size:12.5px;line-height:2;font-weight:600;
}
body.demo-mode .demo-notice-modal .demo-notice-list{
  margin:0;padding-inline-start:18px;color:var(--muted,#8b94a6);
  font-size:11.5px;line-height:2;
}

/* --- Mobile: ribbon makes no room (dock already occupies bottom) ---------- */
@media(max-width:980px){
  body.demo-mode .app-shell{height:100vh}
  body.demo-mode .demo-ribbon{display:none}
  body.demo-mode .demo-pill{margin-inline-start:6px}
  body.demo-mode .brand-text strong{font-size:10px}
}