/* demo.css — /demo/-only chrome, loaded AFTER ../playground/playground.css
   (shared by reference). Everything generic about the split layout, the editor
   and the device preview lives there; this file adds only what makes /demo/
   the demo:
     - the "AI edited" presence toast + spatial-attribution flash (carried
       over from the previous demo shell — they are not playground features),
     - the hidden single-template select (bridge.js DOM contract),
     - the narrow-screen layout: preview first, source collapsible. */

/* topbar: link over to the full playground (all templates, add/remove files) */
.demo-pglink {
  color: var(--pg-text-2);
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.demo-pglink:hover { color: var(--pg-text); border-color: #454552; }
.demo-pglink:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 1px; }
/* .pg-status already pushes right with margin-left:auto; keep the link snug after it */
.pg-topbar .pg-status { margin-left: auto; }

/* the bridge.js contract needs #template-select; the demo pins it to counter */
.demo-hidden { display: none !important; }

/* "Simulate AI edit" sits at the far right of the preview toolbar */
#ai-edit-btn { margin-left: auto; }

/* narrow-screen source toggle — hidden on wide screens */
.demo-srctoggle { display: none; }

/* collaborator presence: "AI edited" toast (same look/timing as the shipped
   demo shell; driven by demo.js — a live qorm-run session or the simulate
   button). */
#qorm-presence {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 20px;
  background: var(--pg-accent, #0a84ff);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .2s ease, transform .2s ease;
}
#qorm-presence.show { opacity: 1; transform: translate(-50%, 0); }

/* spatial attribution: a node the AI just changed pulses a blue outline */
.qorm-ai-touch { animation: qorm-ai-flash 1.3s ease-out; border-radius: inherit; }
@keyframes qorm-ai-flash {
  0%   { box-shadow: 0 0 0 2px rgba(10, 132, 255, .9); }
  60%  { box-shadow: 0 0 0 2px rgba(10, 132, 255, .45); }
  100% { box-shadow: 0 0 0 2px rgba(10, 132, 255, 0); }
}

/* ---- narrow screens: preview first, source collapsed behind a toggle ----
   playground.css stacks editor-over-preview at this width; the demo wants the
   running app up top and the source one tap away. display:flex neutralizes
   the inherited grid-template-* rows. */
@media (max-width: 880px) {
  .pg-split { display: flex; flex-direction: column; }
  .pg-right {
    order: 0;
    flex: none;
    height: 62vh;
    min-height: 420px;
    border-bottom: 1px solid var(--pg-border);
  }
  .pg-left { order: 1; flex: none; border-bottom: 0; }

  .demo-srctoggle { display: inline-flex; align-items: center; gap: 6px; }
  .demo-srctoggle svg { transition: transform .15s ease; }
  body.demo-src-open .demo-srctoggle svg { transform: rotate(180deg); }

  /* collapsed by default: just the source bar under the preview */
  .pg-left .pg-editor,
  .pg-left .pg-diagnostics { display: none; }
  body.demo-src-open .pg-left .pg-editor { display: flex; height: 52vh; }
  body.demo-src-open .pg-left .pg-diagnostics { display: block; }

  /* keep the toolbars inside the viewport on phones */
  .pg-toolbar { flex-wrap: wrap; }
  #vp-label, .demo-srclabel, .demo-pglink { display: none; }
}