/* ============================================================
   Demo-only chrome. Everything that looks like the product
   comes from app-base.css / hybrid.css / preview.css /
   app-clerk.css (copied verbatim from the app). This file only
   adds the tour apparatus: gate, coach bubbles, receipts.
   ============================================================ */

[hidden] { display: none !important; }

/* The app hides #app under 900px (its real mobile guard). The demo
   keeps that stance but shows its own friendly card instead. */
.demo-mobile-guard { display: none; }
@media (max-width: 899px) {
  .demo-mobile-guard {
    display: flex; position: fixed; inset: 0; z-index: 10400;
    background: #f7f7f8; align-items: center; justify-content: center;
    padding: 24px; text-align: left;
  }
  .demo-gate { display: none !important; }
  .coach { display: none !important; }
}

#app { display: block; }

/* Brand pill logo — BladeStack mark ships white-on-transparent,
   so it sits in a dark chip like the app's recolored host. */
#brand-logo-host {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: #0a0a0a; overflow: hidden; flex-shrink: 0;
}
#brand-logo-host img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }

/* Separator line between design config groups (Look/Layout/Theme,
   Type/Quality/Overlays/Size) — matches the app's pv-ai-editor-row rule. */
.controls-group--design .control-block-collapse > .pv-ai-config-group + .pv-ai-config-group {
  border-top: 1px solid var(--border, #eeeef0);
  padding-top: 18px;
  margin-top: 22px;
}
.controls-group--design .control-block-collapse > .pv-ai-config-group {
  margin-bottom: 4px;
}

/* Subject reference photo — a touch bigger so the shot is legible. */
.controls-group--design .pv-ai-subject-thumb { width: 60px !important; height: 60px !important; }
/* Full width, matching the uploading state, so there's no size jump when it lands. */
.controls-group--design .pv-ai-subject-filled {
  display: flex !important; width: 100%; box-sizing: border-box;
  align-items: center; gap: 12px; padding: 8px;
}
.controls-group--design .pv-ai-subject-filled .pv-ai-subject-meta { flex: 1; min-width: 0; }
/* Give the uploading row the same frame so the transition is seamless. */
.demo-subject-uploading {
  width: 100%; box-sizing: border-box; padding: 8px;
  border: 1px solid var(--border, #eeeef0); border-radius: 10px;
  background: var(--bg-elev-2, #fff);
}

/* Calendar day highlights as a drop target while dragging the card. */
.cal-day.is-drop-target::after { opacity: 1 !important; }
.cal-day.is-drop-target { cursor: copy; }

/* Subject reference photo uploading animation. */
.demo-subject-uploading { display: flex; align-items: center; gap: 12px; }
.demo-upload-thumb { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.demo-upload-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.35) brightness(0.92); animation: demo-upload-clear 1.6s ease forwards;
}
@keyframes demo-upload-clear { to { filter: none; } }
.demo-upload-meta { flex: 1; min-width: 0; }
.demo-upload-name { font-size: 12.5px; font-weight: 600; color: var(--text, #131316); margin-bottom: 7px; }
.demo-upload-bar { height: 5px; border-radius: 999px; background: var(--border, #eeeef0); overflow: hidden; }
.demo-upload-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--brand-accent, #ff3d00);
  transition: width 1.45s cubic-bezier(.3,.7,.4,1);
}

/* Subject description field — always two lines tall, even when short. */
.controls-group--design .qr-subject-context-input {
  min-height: 2.9em; line-height: 1.45;
}

/* ---------- brand menu popover (anchored under the gear) ---------- */
#brand-switcher {
  position: fixed !important;
  right: auto !important; bottom: auto !important;
  z-index: 120;
}

/* ---------- corner controls: back-to-website + Sidekick FAB ---------- */
.demo-corner {
  position: fixed; right: 32px; bottom: 32px; z-index: 9000;
  display: inline-flex; align-items: center; gap: 12px;
}
.demo-back-site {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 15px/1 'Figtree', system-ui, sans-serif;
  color: #1a1a1a; text-decoration: none;
  background: #f0d7ff;
  border: 2px solid #1a1a1a !important;
  border-radius: 14px;
  padding: 15px 24px;
  box-shadow: 0 6px 18px -8px rgba(26, 26, 26, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.demo-back-site:hover { background: #e7c6ff; transform: translateY(-2px); }

/* Sidekick chat launcher — the app's real FAB look, on the site's ink */
.demo-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 999px;
  color: #ffffeb;
  background: #1a1a1a;
  border: 2px solid #1a1a1a;
  box-shadow: 0 6px 18px -8px rgba(26, 26, 26, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.demo-fab:hover { background: #000; transform: translateY(-2px); }
.demo-corner.is-hidden { display: none; }

/* ---------- honesty badge ---------- */
.honesty {
  position: fixed; top: 12px; right: 14px; z-index: 11000;
  font: 500 11px/1 'Manrope', system-ui, sans-serif; color: #5e5f6e;
  background: #fff; border: 1px solid #eeeef0;
  border-radius: 999px; padding: 6px 11px;
  box-shadow: 0 1px 3px rgba(19,19,22,0.06);
  display: inline-flex; align-items: center; gap: 6px;
}
.honesty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b7b8c2; }

/* ---------- gate (close card) — the website's Flow skin ---------- */
.demo-gate {
  position: fixed; inset: 0; z-index: 10500;
  background: #ffffeb; /* website cream */
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  transition: opacity 320ms ease;
}
.demo-gate.is-leaving { opacity: 0; pointer-events: none; }
.demo-gate-card {
  width: min(560px, 100%);
  background: #ffffff; border: 2px solid #1a1a1a; border-radius: 20px;
  box-shadow: 0 34px 90px -26px rgba(26,26,26,0.22);
  padding: 44px 44px 36px;
  font-family: 'Figtree', system-ui, sans-serif; color: #1a1a1a;
}
.demo-gate-logo { height: 21px; width: auto; margin-bottom: 22px; display: block; }
.demo-gate-title {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 2.7rem); letter-spacing: -0.045em;
  line-height: 1.0; margin-bottom: 16px; color: #1a1a1a;
}
.demo-gate-body {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; color: rgba(26,26,26,0.66); margin-bottom: 28px;
}
.demo-gate-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo-gate-actions .btn-primary,
.demo-gate-actions .btn-secondary {
  font: 600 15px/1 'Figtree', system-ui, sans-serif !important;
  border-radius: 14px !important; padding: 13px 22px !important; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.demo-gate-actions .btn-primary { background: #f0d7ff !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; }
.demo-gate-actions .btn-primary:hover { background: #e7c6ff !important; transform: translateY(-1px); }
.demo-gate-actions .btn-secondary { background: transparent !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; }
.demo-gate-actions .btn-secondary:hover { background: rgba(26,26,26,0.05) !important; }
.demo-gate-replay {
  display: block; margin-top: 18px;
  background: none; border: 0; cursor: pointer;
  font: 500 14px 'Figtree', system-ui, sans-serif; color: rgba(26,26,26,0.55);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.demo-gate-replay:hover { color: #1a1a1a; }

/* ---------- coach bubbles ---------- */
.coach {
  position: absolute; z-index: 12000;
  max-width: 320px; min-width: 220px;
  background: #131316; color: #f7f7f8;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(19,19,22,0.35);
  padding: 13px 16px;
  font: 500 13px/1.55 'Manrope', system-ui, sans-serif;
  animation: coach-in 260ms cubic-bezier(.3,.7,.4,1) both;
}
.coach strong { color: #fff; font-weight: 700; }
.coach-title { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.coach-body { color: #d5d5da; }
.coach::before {
  content: ""; position: absolute;
  width: 12px; height: 12px; background: #131316;
  transform: rotate(45deg);
}
.coach[data-arrow="top"]::before    { top: -5px; left: var(--arrow-x, 24px); }
.coach[data-arrow="bottom"]::before { bottom: -5px; left: var(--arrow-x, 24px); }
.coach[data-arrow="left"]::before   { left: -5px; top: var(--arrow-y, 18px); }
.coach[data-arrow="right"]::before  { right: -5px; top: var(--arrow-y, 18px); }
.coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.coach-step { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(247,247,248,0.55); text-transform: uppercase; }
.coach-next {
  background: #f7f7f8; color: #131316; border: 0; cursor: pointer;
  font: 700 12px 'Manrope', system-ui, sans-serif;
  border-radius: 7px; padding: 7px 13px;
}
.coach-next:hover { background: #fff; }
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* orange beacon dot on the exact element to click */
.demo-beacon {
  position: absolute; z-index: 12100;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-accent, #FF3D00);
  pointer-events: none;
}
.demo-beacon::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--brand-accent, #FF3D00);
  animation: beacon-ring 1.5s ease-out infinite;
}
@keyframes beacon-ring {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(2.2);  opacity: 0; }
}

/* pulse on the element the coach points at */
@keyframes nf-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, #ff3d00) 38%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.demo-pulse { animation: nf-pulse 1.8s ease-out infinite; border-radius: 8px; }

/* ---------- studio receipt panel (sits under the preview) ---------- */
.demo-receipt {
  margin-top: 16px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #eeeef0);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.demo-receipt-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim, #6e7080); margin-bottom: 10px;
}
.demo-receipt-row { display: flex; align-items: center; gap: 12px; }
.demo-receipt-thumb { width: 76px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.demo-receipt-thumb img { width: 100%; display: block; }
.demo-receipt-arrow { color: var(--text-dim, #6e7080); flex-shrink: 0; }
.demo-receipt-label { font-size: 12.5px; line-height: 1.5; color: var(--text-2, #42434d); }
.demo-receipt-line { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text, #131316); }
.demo-receipt-swatches { display: flex; gap: 8px; flex-shrink: 0; }
.demo-receipt-swatch {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.demo-receipt-swatch img { max-width: 76%; max-height: 76%; }

/* image "rendering" shimmer inside the post preview */
.demo-rendering {
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(100deg, #f0f0f2 40%, #fafafb 50%, #f0f0f2 60%);
  background-size: 200% 100%;
  animation: demo-shimmer 1.2s linear infinite;
  color: #5e5f6e; font: 500 12.5px 'Manrope', system-ui, sans-serif;
}
.demo-rendering .demo-rendering-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-accent, #ff3d00);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes demo-shimmer { to { background-position: -200% 0; } }

/* highlighted anchors + changed lines in captions */
.demo-noted {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 14%, transparent);
  border-radius: 3px; padding: 0 2px;
}
.demo-changed {
  display: block;
  background: var(--success-soft, #f0fdf2);
  box-shadow: inset 2px 0 0 var(--success, #15802a);
  padding-left: 9px; border-radius: 2px;
}

/* demo suggestion chips under the required-feedback textarea */
.demo-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.demo-chip {
  font: 500 12px 'Manrope', system-ui, sans-serif; color: var(--text-2, #42434d);
  border: 1px solid var(--border-strong, #d9d9de); border-radius: 999px;
  padding: 5px 12px; background: var(--bg-elev, #fff); cursor: pointer;
}
.demo-chip:hover { border-color: var(--brand-accent, #ff3d00); }