.chat-flow {
  --cf-scene-height:calc(100svh - var(--header-height,85px));
  position:relative;
  height:auto;
  margin:0;
  padding:0;
  background:#e4e8d6;
  color:var(--ink);
  font-family:var(--body);
  line-height:normal;
}
.chat-flow .cf-stage {
  position:relative;
  height:auto;
  overflow:visible;
}
.chat-flow .cf-track {
  display:block;
  width:100%;
  height:auto;
}
.chat-flow:not(.chat-flow-enabled) .cf-track { transform:none!important; }
.chat-flow .cf-screen {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  align-items:center;
  gap:clamp(32px,6vw,96px);
  width:100%;
  height:auto;
  min-height:var(--cf-scene-height);
  padding:clamp(56px,8vh,96px) 8vw;
  box-sizing:border-box;
}
.chat-flow .cf-screen > div { min-width:0; }
.chat-flow .cf-screen h2 {
  font-family:var(--body);
  letter-spacing:0;
}
.chat-flow .cf-intro,
.chat-flow .cf-outro {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding-inline:6vw;
  text-align:center;
}
.chat-flow .cf-intro h2,
.chat-flow .cf-outro h2 { font-family:var(--display); }
.chat-flow .cf-outro { background:var(--ink); color:var(--cream); }
.chat-flow .cf-progress {
  display:none;
  position:absolute;
  left:8vw;
  right:8vw;
  bottom:32px;
  height:3px;
  background:#cdd3ba;
  border-radius:2px;
  overflow:hidden;
  pointer-events:none;
}
.chat-flow .cf-bar {
  height:100%;
  width:100%;
  background:#f07a3a;
  transform-origin:left;
  transform:scaleX(0);
}

/* Only a successfully initialized desktop controller creates the pinned track. */
@media (min-width:1280px) and (min-height:680px) and (prefers-reduced-motion:no-preference) {
  .chat-flow.chat-flow-enabled { height:calc(var(--cf-scene-height) + 350vw); }
  .chat-flow-enabled .cf-stage {
    position:sticky;
    top:var(--header-height,85px);
    height:var(--cf-scene-height);
    overflow:hidden;
  }
  .chat-flow-enabled .cf-track {
    display:flex;
    width:600%;
    height:100%;
    will-change:transform;
  }
  .chat-flow-enabled .cf-screen {
    flex:none;
    width:calc(100% / 6);
    height:100%;
    min-height:0;
    gap:5vw;
    padding:24px 5vw 56px;
  }
  .chat-flow-enabled .cf-intro,
  .chat-flow-enabled .cf-outro { gap:24px; padding-inline:6vw; }
  .chat-flow-enabled .cf-progress { display:block; }
}

/* Enlarge the whole message composition, keeping its internal proportions. */
@media (min-width:1280px) and (min-height:800px) {
  .chat-flow .cf-copy h2 { font-size:clamp(52px,4.1vw,74px)!important; }
  .chat-flow .cf-copy > div { font-size:clamp(120px,9vw,164px)!important; }
  .chat-flow .cf-copy > p { max-width:580px!important; font-size:clamp(21px,1.45vw,26px)!important; }
  .chat-flow .cf-art { zoom:1.15; }
  .chat-flow .cf-intro h2 { max-width:1400px!important; font-size:clamp(110px,9vw,162px)!important; }
  .chat-flow .cf-outro h2 { max-width:1400px!important; font-size:clamp(96px,8vw,144px)!important; }
  .chat-flow .cf-intro p,.chat-flow .cf-outro p { max-width:760px!important; font-size:clamp(22px,1.5vw,27px)!important; }
}
@media (min-width:1600px) and (min-height:900px) {
  .chat-flow .cf-art { zoom:1.35; }
}

/* Keep every screen readable even while a stale desktop transform is being reset. */
@media (max-width:1279px), (max-height:679px), (prefers-reduced-motion:reduce) {
  .chat-flow .cf-track { transform:none!important; will-change:auto; }
}
@media (max-width:720px) {
  .chat-flow { --cf-scene-height:calc(100svh - var(--header-height,72px)); }
  .chat-flow .cf-screen { padding-inline:22px; }
}