/* Guck demo shell — the geometry the Electron main process normally
   provides (window sizes per mode, bottom anchoring, drag offsets), plus a
   fake desktop for the app to sit on. The app's own style.css is untouched;
   everything here keys off the same body.mode-* / body.dark classes. */

:root {
  --demo-bar-w: 710px;
  --demo-panel-h: 252px;
  --duck-tx: 0px; --duck-ty: 0px;
  --bar-tx: 0px;  --bar-ty: 0px;
}

/* a quiet desktop backdrop; tokens come from style.css so dark mode just works */
body {
  background:
    radial-gradient(1100px 500px at 72% -8%, rgba(245, 200, 76, 0.14), transparent),
    linear-gradient(180deg, var(--color-bg-hover), var(--color-bg-active));
}

/* ---------- the two "windows" ---------- */
/* collapsed duck: a 48×110 window at the lower right, draggable */
#idle-strip {
  position: fixed;
  right: 34px;
  bottom: 52px;
  width: 48px;
  height: 110px;
  transform: translate(var(--duck-tx), var(--duck-ty));
}

/* bar / panel / menu: a bottom-centered window that grows upward, like the
   real thing (the mock feeds the renderer-measured width/height back in) */
#app {
  position: fixed;
  left: 50%;
  bottom: 52px;
  width: var(--demo-bar-w);
  height: 52px;
  transform: translate(calc(-50% + var(--bar-tx)), var(--bar-ty));
}
body.mode-panel #app { height: calc(52px + var(--demo-panel-h)); }
body.mode-menu #app { height: calc(52px + 230px); }

/* ---------- demo chrome (not part of the app) ---------- */
.demo-intro {
  position: fixed;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  max-width: 640px;
  padding: 0 24px;
  color: var(--color-text);
}
.demo-title { font-size: 44px; font-weight: 700; letter-spacing: -1px; }
.demo-tag { font-size: 15px; color: var(--color-text-muted); }
.demo-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: 10px 16px;
}
.demo-note b { color: var(--color-text); }
.demo-link { font-size: 12.5px; color: var(--color-push); text-decoration: none; }
.demo-link:hover { text-decoration: underline; }

/* nudge toward the duck while it's collapsed */
.demo-hint {
  position: fixed;
  right: 96px;
  bottom: 92px;
  font-size: 13px;
  color: var(--color-text-muted);
  animation: hint-bob 2.2s ease-in-out infinite;
  white-space: nowrap;
}
.demo-hint::after { content: ' →'; }
body:not(.mode-idle) .demo-hint { display: none; }

@keyframes hint-bob {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}