/* PulsarERP — the product window in the opening: a drawn screen of the app, fictional data.
   Software is set in the text face only (Plex Sans, Plex Mono for chart figures); the serif stays in the headline. */

.product-stage { margin-block-start: var(--space-8); max-width: 74rem; position: relative; isolation: isolate; }

.app {
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--paper-line), var(--paper-shadow);
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ---- Window bar ---- */

.app-bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--paper-line);
  color: var(--paper-muted);
}
.app-dots { order: 3; display: flex; gap: 6px; margin-inline-start: auto; }
.app-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-line); }
.app-title { font-weight: 500; color: var(--paper-ink); }
.app-badge { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--paper-chip); font-size: var(--fs-label); }

.app-body { display: grid; grid-template-columns: 15rem 1fr; min-height: 34rem; }

/* ---- Side menu ---- */

.app-side {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4);
  background: var(--paper-2);
  border-inline-end: 1px solid var(--paper-line);
  color: var(--paper-muted);
}
.app-side svg { font-size: 1.05em; flex: none; }
.side-brand { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; color: var(--paper-ink); font-size: var(--fs-body); margin-block-end: var(--space-4); }
.side-brand svg { color: var(--paper-accent); font-size: 1.25em; stroke-width: 1.4; }
.side-new {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-block-end: var(--space-3);
  border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--paper-ink);
}
.side-item { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-sm); }
.side-item.is-active { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 1px var(--paper-line); }
.side-label { margin-block: var(--space-4) var(--space-1); padding-inline: var(--space-3); font-size: var(--fs-label); letter-spacing: 0.04em; }
.side-sources { margin-block-start: auto; }
.source { display: flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); color: var(--paper-ink); }
.source span:not([dir]) { margin-inline-start: auto; font-size: var(--fs-label); color: var(--paper-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

/* ---- Conversation ---- */

.app-main { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-8)); min-width: 0; }

.bubble {
  align-self: flex-end; max-width: 34rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
  background: var(--paper-bubble); color: var(--paper-ink);
  font-size: var(--fs-body);
}

.steps { list-style: none; padding: 0; display: grid; gap: var(--space-1); color: var(--paper-muted); }
.steps li { display: flex; align-items: center; gap: var(--space-2); }
.steps svg { color: var(--ok); font-size: 1.1em; stroke-width: 2.2; }

.reply { display: grid; gap: var(--space-4); }
.reply-text { font-size: var(--fs-body); line-height: 1.75; max-width: 44rem; }
.reply-text strong { font-weight: 600; color: var(--paper-accent); }

/* ---- Chart: four months, sales bar and target tick ---- */

.chart { max-width: 30rem; padding: var(--space-4); border: 1px solid var(--paper-line); border-radius: var(--radius-md); }
.chart-head { display: flex; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); font-weight: 500; }
.chart-legend { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--fs-label); color: var(--paper-muted); }
.lg-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--paper-accent); }
.lg-target { width: 14px; border-top: 2px dashed var(--paper-ink); margin-inline-start: var(--space-2); }

.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); height: 10.5rem; align-items: end; padding-block-end: 2.75rem; position: relative; }
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bar-fill {
  display: block; height: var(--v); border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--paper-accent) 30%, var(--paper));
  transform-origin: bottom; animation: grow var(--dur-slow) var(--ease-out) both;
}
.bar.is-now .bar-fill { background: var(--paper-accent); }
.bar-target { position: absolute; inset-inline: -4px; bottom: var(--t); border-top: 2px dashed var(--paper-ink); opacity: 0.55; }
/* Month name, then the figure under it — clear of the target ticks above the bars. */
.bar small { position: absolute; inset-inline: 0; bottom: -1.4rem; text-align: center; font-size: var(--fs-label); color: var(--paper-muted); }
.bar b { position: absolute; inset-inline: 0; bottom: -2.6rem; text-align: center; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); color: var(--paper-ink); }
@keyframes grow { from { transform: scaleY(0); } }

.reply-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reply-sources span { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--paper-chip); font-size: var(--fs-label); color: var(--paper-muted); }

/* ---- Composer ---- */

.composer {
  margin-block-start: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  color: var(--paper-muted); font-size: var(--fs-body);
  box-shadow: 0 6px 20px -14px rgb(0 0 0 / 0.3);
}
.composer i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper-ink); color: var(--paper); font-size: 1rem; }

/* ---- Playback (demo.js) ---- */

.app-pause {
  order: 4; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid var(--paper-line); border-radius: 50%;
  background: var(--paper); color: var(--paper-muted); cursor: pointer; font-size: 0.8rem;
}
.app-pause:hover { color: var(--paper-ink); }
.app-pause .icon-play, .app-pause[aria-pressed="true"] .icon-pause { display: none; }
.app-pause[aria-pressed="true"] .icon-play { display: block; }

.bubble.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: var(--paper-ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.steps li { animation: rise-in var(--dur-fast) var(--ease-out) both; }
.spinner { display: none; width: 0.85em; height: 0.85em; border: 1.5px solid var(--paper-line); border-top-color: var(--paper-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.steps li.is-pending .spinner { display: inline-block; }
.steps li.is-pending svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(4px); } }

/* The answer keeps its space while hidden, so the window does not jump between examples. */
.reply { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reply.is-hidden { opacity: 0; transform: translateY(6px); }

/* ---- Floating cards over the window's edges ---- */

.float {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--paper-line), 0 18px 40px -22px rgb(0 0 0 / 0.35);
  font-size: var(--fs-small); line-height: 1.35;
  transition: opacity 260ms linear;
  animation: bob 7s ease-in-out infinite;
}
.float b { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.float small { color: var(--paper-muted); font-size: var(--fs-label); }
.float.is-changing { opacity: 0; }
.float-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, var(--paper)); color: var(--ok); }
.float-icon svg { stroke-width: 2.2; }
/* Over the empty lower part of the side menu, half outside the window — never over content. */
.float-1 { top: 67%; inset-inline-start: -2.75rem; }
.float-2 { bottom: 7rem; inset-inline-end: -2.5rem; animation-delay: -3.5s; }
.float-2 b { color: var(--paper-accent); }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* ---- Depth: the window leans back slightly and straightens as it scrolls into view ---- */

@supports (animation-timeline: view()) {
  .app { transform-origin: 50% 100%; animation: straighten linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  @keyframes straighten { from { transform: perspective(1800px) rotateX(7deg) scale(0.975); } to { transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .app { animation: none; }
  .float { animation: none; }
}

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .float { display: none; }
}
@media (max-width: 52rem) {
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { display: none; }
  .app-title { display: none; }
  .app-main { padding: var(--space-5); }
  .bubble { max-width: 92%; }
  .bars { gap: var(--space-3); }
}