/* Scripted "Create my own" example (assets/creation-demo.js). The Benchy
   floats on the blank canvas itself, never inside a panel; the bottom inset
   keeps it centered above the command bar. */
.creation-demo { position:absolute; inset:0 0 96px; z-index:2; pointer-events:none; transition:opacity .32s ease; }
.creation-demo[data-leaving] { opacity:0; }
/* Escape can close the canvas while the example is still fading out. */
.browse-categories:not([data-creation-canvas]) .creation-demo { display:none; }
.creation-demo > canvas { display:block; width:100%; height:100%; }

/* The panel glides to the middle for the first request, then home again. The
   shadow and width transitions repeat the panel's own. */
#command:is([data-creation-demo],[data-demo-returning]) {
  transition:transform .7s cubic-bezier(.22,.9,.24,1), box-shadow .2s, max-width .28s cubic-bezier(.22,.9,.24,1);
}
#command[data-demo-center] { transform:translate(var(--creation-demo-x,0px),var(--creation-demo-y,0px)); }

/* While the example types, the field shows only its words. */
#command[data-creation-demo] .command__ghost { visibility:hidden; }
#commandAdd[data-demo-press] { animation:creation-demo-press .34s cubic-bezier(.3,.7,.4,1); }
.creation-demo__sent {
  position:absolute; left:0; top:50%; z-index:3; white-space:pre; pointer-events:none;
  transform:translateY(-50%); animation:creation-demo-lift .5s cubic-bezier(.4,0,.2,1) forwards;
}

/* AI gradient border: a turning conic ring masked to the panel's edge, and a
   blurred copy of it outside the edge. Both sit inside #command, so they
   follow its zoom, radius and glide. */
@property --creation-demo-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.creation-demo-border,
.creation-demo-aura {
  position:absolute; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:conic-gradient(from var(--creation-demo-angle),#7c5cff,#2f8bff,#22d3ee,#ffb938,#ff5fa2,#7c5cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:creation-demo-spin 3.2s linear infinite;
}
.creation-demo-border { inset:-1px; padding:2px; border-radius:15px; z-index:5; }
.creation-demo-aura { inset:-14px; padding:12px; border-radius:28px; z-index:-1; filter:blur(12px); }
#command:is([data-demo-typing],[data-demo-invite]) .creation-demo-border { opacity:1; }
#command:is([data-demo-typing],[data-demo-invite]) .creation-demo-aura { opacity:.6; }

/* Loading status just above the panel once a request is sent. */
.creation-demo-status {
  position:absolute; left:50%; bottom:calc(100% + 12px); z-index:6;
  display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px); box-sizing:border-box;
  padding:7px 14px 7px 9px; overflow:hidden; pointer-events:none;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); box-shadow:var(--shadow-sm);
  color:var(--ink); font:600 12px/1.3 var(--font); white-space:nowrap;
  opacity:0; transform:translate(-50%,6px); transition:opacity .22s ease, transform .22s ease;
}
.creation-demo-status[data-show] { opacity:1; transform:translate(-50%,0); }
.creation-demo-status__label { overflow:hidden; text-overflow:ellipsis; }
.creation-demo-status__icon { display:grid; place-items:center; flex:none; width:15px; height:15px; border-radius:50%; }
.creation-demo-status__icon svg { width:11px; height:11px; fill:none; stroke:var(--on-accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.creation-demo-status[data-state="loading"] .creation-demo-status__icon {
  background:conic-gradient(from var(--creation-demo-angle),transparent 0 22%,#7c5cff 45%,#2f8bff 72%,#22d3ee);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  animation:creation-demo-spin .9s linear infinite;
}
.creation-demo-status[data-state="loading"] .creation-demo-status__label {
  background:linear-gradient(100deg,var(--dim) 35%,var(--ink) 50%,var(--dim) 65%) 0 0/250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:creation-demo-shimmer 1.6s linear infinite;
}
.creation-demo-status[data-state="done"] .creation-demo-status__icon { background:var(--accent); }
.creation-demo-status[data-state="done"] .creation-demo-status__icon svg { opacity:1; }
.creation-demo-status__bar {
  position:absolute; left:0; right:0; bottom:0; height:2px; transform-origin:left;
  transform:scaleX(var(--progress,0)); background:linear-gradient(90deg,#7c5cff,#2f8bff,#22d3ee);
}
.creation-demo-status[data-state="done"] .creation-demo-status__bar { opacity:0; transition:opacity .4s ease .25s; }

/* The hand-over: "Your turn" in the middle of the canvas, its arrow running
   down to the panel. It lives inside #command so it always points at it; the
   script sizes its height to reach from the canvas middle to the panel. */
.creation-demo-turn {
  position:absolute; left:50%; bottom:calc(100% + 10px); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:max-content; max-width:calc(100vw - 32px); height:var(--creation-demo-turn-height,160px);
  text-align:center; pointer-events:none;
  opacity:0; transform:translate(-50%,10px); transition:opacity .45s ease, transform .6s cubic-bezier(.22,.9,.24,1);
}
.creation-demo-turn[data-show] { opacity:1; transform:translate(-50%,0); }
.creation-demo-turn > strong {
  font:750 34px/1.1 var(--font); letter-spacing:-.03em;
  background:linear-gradient(90deg,#7c5cff,#2f8bff,#22d3ee,#ff5fa2,#7c5cff) 0 0/200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:creation-demo-flow 6s linear infinite;
}
.creation-demo-turn > span { max-width:360px; color:var(--dim); font:500 14px/1.45 var(--font); text-wrap:balance; }
.creation-demo-turn > i {
  position:relative; flex:1 1 auto; width:2px; min-height:24px; margin-top:8px; border-radius:2px;
  background:linear-gradient(to bottom,transparent,#2f8bff);
  transform-origin:top; animation:creation-demo-draw .7s cubic-bezier(.22,.9,.24,1) .25s both;
}
.creation-demo-turn > i::after {
  content:""; position:absolute; left:50%; bottom:1px; width:9px; height:9px;
  border-right:2px solid #2f8bff; border-bottom:2px solid #2f8bff;
  transform:translateX(-50%) rotate(45deg);
}
/* A pulse keeps travelling down the arrow toward the panel. */
.creation-demo-turn > i::before {
  content:""; position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:#2f8bff; box-shadow:0 0 10px 2px color-mix(in srgb,#2f8bff 55%,transparent);
  animation:creation-demo-travel 1.8s cubic-bezier(.5,0,.5,1) 1s infinite both;
}

/* The image route. The caption and drop zone sit in the canvas; the pointer
   and the dragged file are fixed to the page so they can cross from the
   panel's upload button to the canvas. */
.creation-demo-caption {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max-content; max-width:calc(100% - 32px); text-align:center; pointer-events:none;
}
.creation-demo-caption > strong {
  display:block; font:750 30px/1.15 var(--font); letter-spacing:-.03em; text-wrap:balance;
  background:linear-gradient(90deg,#7c5cff,#2f8bff,#22d3ee,#ff5fa2,#7c5cff) 0 0/200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:creation-demo-flow 6s linear infinite;
}
#command:is([data-demo-caption],[data-demo-invite]) .command-caption { opacity:1; }
#command:is([data-demo-caption],[data-demo-invite]) .command-caption > * { pointer-events:auto; }
#command:is([data-demo-caption],[data-demo-invite]) #commandReferenceImages {
  margin:-2px -8px; padding:2px 8px; border-radius:999px;
  transition:color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
#commandReferenceImages[data-demo-press],
#command[data-demo-invite] #commandReferenceImages {
  color:var(--ink); background:color-mix(in srgb,#2f8bff 12%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,#2f8bff 45%,transparent), 0 0 14px color-mix(in srgb,#2f8bff 28%,transparent);
}
#commandReferenceImages[data-demo-press] { transform:scale(.95); }

.creation-demo-cursor {
  position:fixed; left:0; top:0; z-index:400; width:28px; height:28px;
  pointer-events:none; opacity:0; transition:opacity .18s ease; will-change:transform;
}
.creation-demo-cursor[data-show] { opacity:1; }
.creation-demo-cursor svg {
  display:block; width:28px; height:28px; fill:#111; stroke:#fff; stroke-width:1.5; stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); transform:scale(var(--press,1)); transform-origin:6px 3px;
}
.creation-demo-cursor i {
  position:absolute; left:6px; top:3px; width:40px; height:40px; box-sizing:border-box;
  border:2px solid #2f8bff; border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.3);
}
.creation-demo-file { position:fixed; left:0; top:0; z-index:390; width:96px; margin:0; pointer-events:none; will-change:transform; }
.creation-demo-file img {
  display:block; width:100%; box-sizing:border-box; object-fit:cover; background:#fff;
  border:3px solid #fff; border-radius:10px; box-shadow:0 16px 32px -10px rgba(15,23,42,.5);
}
.creation-demo-file figcaption {
  width:max-content; max-width:150px; margin:6px auto 0; padding:2px 8px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font:600 10px/1.5 var(--font);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.creation-demo-drop {
  position:absolute; left:50%; top:50%; box-sizing:border-box; display:grid; place-items:center;
  border:2px dashed color-mix(in srgb,var(--accent) 50%,transparent); border-radius:22px;
  background:color-mix(in srgb,var(--surface) 72%,transparent); transform:translate(-50%,-50%);
  pointer-events:none; transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.creation-demo-drop[data-over] {
  border-color:#2f8bff; background:color-mix(in srgb,#2f8bff 8%,var(--surface));
  box-shadow:0 0 0 6px color-mix(in srgb,#2f8bff 14%,transparent);
}
.creation-demo-drop[data-dropped] { border-color:transparent; background:transparent; }
.creation-demo-drop__hint {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--dim); font:600 13px/1.3 var(--font); transition:opacity .15s;
}
.creation-demo-drop__hint svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.creation-demo-drop:is([data-over],[data-dropped]) .creation-demo-drop__hint { opacity:0; }
.creation-demo-drop__photo {
  position:absolute; inset:12px; margin:0; overflow:hidden; opacity:0;
  border-radius:12px; box-shadow:0 18px 40px -18px rgba(15,23,42,.5);
}
.creation-demo-drop__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.creation-demo-drop__mask { opacity:0; }
/* The segmentation pass: a bright line sweeping down the photo. */
.creation-demo-drop__photo i {
  position:absolute; left:0; right:0; top:0; height:2px; opacity:0;
  background:linear-gradient(90deg,transparent,#22d3ee,#2f8bff,#22d3ee,transparent);
  box-shadow:0 0 14px 3px color-mix(in srgb,#22d3ee 60%,transparent);
}
.creation-demo-drop[data-scanning] .creation-demo-drop__photo i { opacity:1; }

@keyframes creation-demo-press {
  0% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent); }
  35% { transform:scale(.86); }
  100% { transform:scale(1); box-shadow:0 0 0 12px transparent; }
}
@keyframes creation-demo-lift { to { transform:translateY(-190%); opacity:0; } }
@keyframes creation-demo-spin { to { --creation-demo-angle:360deg; } }
@keyframes creation-demo-shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
@keyframes creation-demo-flow { to { background-position:-200% 0; } }
@keyframes creation-demo-draw { from { transform:scaleY(0); } }
@keyframes creation-demo-travel {
  0% { top:0; opacity:0; }
  15%, 80% { opacity:1; }
  100% { top:calc(100% - 12px); opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  .creation-demo, .creation-demo-border, .creation-demo-aura, .creation-demo-status, .creation-demo-turn,
  #command:is([data-creation-demo],[data-demo-returning]) { transition:none; }
  #commandAdd[data-demo-press], .creation-demo__sent, .creation-demo-border, .creation-demo-aura,
  .creation-demo-status__icon, .creation-demo-status__label, .creation-demo-turn > strong,
  .creation-demo-turn > i, .creation-demo-caption > strong { animation:none!important; }
  .creation-demo-turn > i::before { display:none; }
  .creation-demo-cursor, .creation-demo-drop, .creation-demo-drop__hint { transition:none; }
}
:root[data-reduce-motion="true"] :is(.creation-demo, .creation-demo-border, .creation-demo-aura, .creation-demo-status, .creation-demo-turn,
  .creation-demo-cursor, .creation-demo-drop, .creation-demo-drop__hint),
:root[data-reduce-motion="true"] #command:is([data-creation-demo],[data-demo-returning]) { transition:none; }
:root[data-reduce-motion="true"] :is(#commandAdd[data-demo-press], .creation-demo__sent, .creation-demo-border,
  .creation-demo-aura, .creation-demo-status__icon, .creation-demo-status__label, .creation-demo-turn > strong,
  .creation-demo-turn > i, .creation-demo-caption > strong) { animation:none!important; }
:root[data-reduce-motion="true"] .creation-demo-turn > i::before { display:none; }

/* Header over the example: a note, a countdown and a way to skip it. */
.creation-demo-header {
  position:absolute; top:14px; left:50%; z-index:7; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px); box-sizing:border-box;
  padding:6px 6px 6px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink); font:600 12px/1.3 var(--font);
}
.creation-demo-header__text { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.creation-demo-header__count { flex:none; color:var(--dim); font-variant-numeric:tabular-nums; }
.creation-demo-header__skip {
  flex:none; pointer-events:auto; cursor:pointer; padding:5px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--ink); color:var(--surface); font:inherit;
}
.creation-demo-header__skip:hover { opacity:.88; }
.creation-demo-header__skip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:560px) { .creation-demo-header { top:56px; } }