/* ------------------------------------------------------------------
   Self-playing product demo ("See it in motion")

   A scripted chat vignette that lives inside the browser frame and phone
   shell on the homepage. Progressive enhancement: the static screenshot
   remains the no-JS / reduced-motion / print representation; when the
   demo runs it sits above the screenshot (kept at opacity 0 so its alt
   text stays in the accessibility tree). The whole scene is aria-hidden
   and decorative.
   ------------------------------------------------------------------ */

.browser-frame,
.phone-screen {
  position: relative;
}

.demo-live {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background: var(--tp-canvas);
  text-align: left;
}

.demo-live.is-live {
  display: block;
}

/* When the demo runs, hide the screenshot but keep it in the a11y tree */
.browser-frame.demo-running .product-app-capture,
.phone-screen.demo-running .product-app-capture {
  opacity: 0;
}

/* Every metric that decides whether the scene fits its frame lives here, so
   the compact variant is one block of values rather than a parallel set of
   selectors. Two things need it: the phone scene, and the desktop scene when
   a phone is what is actually rendering it. */
.dl-app {
  --dl-font: 15px;
  --dl-title: 19px;
  --dl-body: 14px;
  --dl-topbar-pad: 14px 24px 11px;
  --dl-thread-pad: 22px 24px 14px;
  --dl-thread-gap: 12px;
  --dl-msg-pad: 11px 15px;
  --dl-note-pad: 12px 16px;
  --dl-composer-margin: 0 24px 20px;
  --dl-composer-pad: 11px 14px;
  --dl-composer-font: 13px;
  --dl-send: 28px;
  --dl-note-lines: 99;
  --dl-reply-lines: 99;

  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  font-size: var(--dl-font);
  line-height: 1.5;
  color: var(--tp-ink);
}

.dl-app-compact {
  --dl-font: 12px;
  --dl-title: 15px;
  --dl-body: 12px;
  --dl-topbar-pad: 10px 14px 8px;
  --dl-thread-pad: 16px 16px 10px;
  --dl-thread-gap: 9px;
  --dl-msg-pad: 9px 12px;
  --dl-note-pad: 10px 12px;
  --dl-composer-margin: 0 14px 10px;
  --dl-composer-pad: 9px 12px;
  --dl-composer-font: 11px;
  --dl-send: 24px;
  --dl-note-lines: 2;
  --dl-reply-lines: 6;
}

/* The scripted answer is written for a wide thread. In a small one it would be
   thirteen lines and push the rest of the conversation out of the frame, so it
   is clamped — the point of the vignette is that an answer arrives with its
   sources attached, not that you read all of it. */
.dl-note p,
.dl-reply-body > p:first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--dl-reply-lines);
  overflow: hidden;
}

.dl-note p {
  -webkit-line-clamp: var(--dl-note-lines);
}

/* Mini navigation rail */
.dl-rail {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  background: var(--tp-charcoal);
}

.dl-rail span {
  border-radius: 5px;
}

.dl-rail .dl-rail-mark {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--tp-brand);
}

.dl-rail .dl-rail-item {
  width: 20px;
  height: 5px;
  background: rgba(245, 241, 234, 0.28);
}

.dl-rail .dl-rail-item.is-chat {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tp-brand);
}

.dl-rail .dl-rail-user {
  width: 20px;
  height: 20px;
  margin-top: auto;
  border-radius: 50%;
  background: rgba(245, 241, 234, 0.22);
}

/* Thread */
.dl-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.dl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--dl-topbar-pad);
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-surface);
}

.dl-topbar > div {
  display: grid;
  gap: 1px;
}

.dl-topbar strong {
  font-family: var(--font-display);
  font-size: var(--dl-title);
  font-weight: 580;
}

.dl-topbar > div > span {
  color: var(--tp-ink-soft);
  font-size: 11.5px;
}

.dl-topbar em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tp-ink-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
  white-space: nowrap;
}

.dl-topbar em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tp-sage);
}

/* Anchored to the bottom, and it clips its own overflow.

   This row is `minmax(0, 1fr)`, so it is allowed to be shorter than the
   conversation inside it. Centring an overflowing column overflows in *both*
   directions at once, which is how the thread ended up painted over the topbar
   above and the composer below on narrow screens. Ending the thread at the
   bottom pushes any excess off the top, where `overflow: hidden` removes it —
   and where a chat log is supposed to lose its oldest lines anyway. */
.dl-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--dl-thread-gap);
  min-height: 0;
  overflow: hidden;
  padding: var(--dl-thread-pad);
  transition: opacity 320ms var(--ease-quiet);
}

.demo-live[data-dl-phase="reset"] .dl-thread {
  opacity: 0;
}

/* The older note the conversation returns to */
.dl-note {
  align-self: stretch;
  padding: var(--dl-note-pad);
  border: 1px solid var(--tp-line);
  border-left: 3px solid var(--tp-brand);
  border-radius: 8px;
  background: var(--tp-surface);
}

.dl-note .dl-note-meta {
  display: block;
  margin-bottom: 4px;
  color: var(--tp-ink-soft);
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.02em;
}

.dl-note p {
  font-size: var(--dl-body);
  color: var(--tp-ink-soft);
}

.dl-note p b {
  color: var(--tp-ink);
  font-weight: 640;
}

.dl-msg {
  max-width: 78%;
  padding: var(--dl-msg-pad);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-quiet), transform 300ms var(--ease-quiet);
}

.dl-msg.is-on {
  opacity: 1;
  transform: none;
}

/* Older exchange, dimmed so the live one pops */
.dl-history {
  opacity: 0.62;
  transform: none;
}

.dl-user {
  align-self: flex-end;
  min-height: 38px;
  color: var(--tp-ink);
  background: var(--tp-brand-soft);
}

.dl-user .dl-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--tp-action);
  animation: dl-caret 0.9s steps(2, start) infinite;
}

.demo-live[data-dl-phase="thinking"] .dl-user .dl-caret,
.demo-live[data-dl-phase="answering"] .dl-user .dl-caret,
.demo-live[data-dl-phase="holding"] .dl-user .dl-caret {
  display: none;
}

.dl-thinking {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--tp-line);
  background: var(--tp-surface);
}

.dl-thinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tp-ink-faint);
  animation: dl-dot 1s ease-in-out infinite;
}

.dl-thinking i:nth-child(2) {
  animation-delay: 140ms;
}

.dl-thinking i:nth-child(3) {
  animation-delay: 280ms;
}

/* Assistant reply: plain text with the brand glyph, like the real app */
.dl-reply {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 88%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-quiet), transform 300ms var(--ease-quiet);
}

.dl-reply.is-on {
  opacity: 1;
  transform: none;
}

.dl-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--tp-brand);
  position: relative;
}

.dl-avatar::after {
  content: "";
  position: absolute;
  inset: 6px 9px 7px;
  border-radius: 50% 50% 50% 4px;
  background: #fff;
}

.dl-reply-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dl-reply-body p {
  font-size: var(--dl-body);
}

.dl-reply-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dl-reply-body small {
  color: var(--tp-ink-soft);
  font-size: 11px;
}

.dl-link {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--tp-chip-orange-ink);
  background: var(--tp-chip-orange-bg);
  font-size: 12px;
  font-weight: 640;
  box-shadow: 0 0 0 0 rgba(232, 97, 43, 0);
  transition: box-shadow 500ms var(--ease-quiet);
}

.demo-live[data-dl-phase="holding"] .dl-link {
  box-shadow: 0 0 0 3px rgba(232, 97, 43, 0.22);
}

/* Composer */
.dl-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--dl-composer-margin);
  padding: var(--dl-composer-pad);
  border: 1px solid var(--tp-line);
  border-radius: 9px;
  background: var(--tp-surface);
}

.dl-composer-hint {
  flex: 1;
  color: var(--tp-ink-soft);
  font-size: var(--dl-composer-font);
}

.dl-cicon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.6px solid var(--tp-line-strong);
  border-radius: 50%;
}

.dl-send {
  width: var(--dl-send);
  height: var(--dl-send);
  border-radius: 50%;
  background: var(--tp-action);
  transition: transform 220ms var(--ease-settle), box-shadow 220ms var(--ease-quiet);
}

.demo-live[data-dl-phase="thinking"] .dl-send {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(179, 62, 22, 0.18);
}

/* Mobile scene: no rail, no topbar, bottom tab bar. Its type and spacing come
   from .dl-app-compact, which the markup applies alongside this class. */
.dl-app-mobile {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.dl-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 18px calc(8px + 2px);
  border-top: 1px solid var(--tp-line);
  background: var(--tp-surface);
}

.dl-tabs i {
  width: 16px;
  height: 4px;
  border-radius: 4px;
  background: var(--tp-line-strong);
}

.dl-tabs i.dl-tabs-chat {
  width: 26px;
  height: 26px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--tp-brand);
  box-shadow: 0 4px 10px rgba(34, 29, 22, 0.18);
}

/* Keyframes */
@keyframes dl-caret {
  50% {
    opacity: 0;
  }
}

@keyframes dl-dot {
  0%,
  100% {
    opacity: 0.3;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* A narrow window rendering the *desktop* scene.

   The browser frame keeps its wide aspect ratio, so below laptop widths the
   scene gets a fraction of the height it was drawn for while its text wraps to
   many more lines. Scaling the whole scene down would make it unreadable — the
   Mobile tab exists for legibility — so it reflows instead: phone metrics, no
   nav rail, and a bounded conversation. 900px is where the untouched scene
   stops fitting its own frame. */
@media (max-width: 900px) {
  .dl-app:not(.dl-app-mobile) {
    --dl-font: 12px;
    --dl-title: 15px;
    --dl-body: 12px;
    --dl-topbar-pad: 10px 14px 8px;
    --dl-thread-pad: 16px 16px 10px;
    --dl-thread-gap: 9px;
    --dl-msg-pad: 9px 12px;
    --dl-note-pad: 10px 12px;
    --dl-composer-margin: 0 14px 10px;
    --dl-composer-pad: 9px 12px;
    --dl-composer-font: 11px;
    --dl-send: 24px;
    --dl-note-lines: 2;
    --dl-reply-lines: 6;

    grid-template-columns: minmax(0, 1fr);
  }

  .dl-app:not(.dl-app-mobile) .dl-rail {
    display: none;
  }
}

@media print {
  .demo-live {
    display: none !important;
  }

  .browser-frame.demo-running .product-app-capture,
  .phone-screen.demo-running .product-app-capture {
    opacity: 1;
  }
}