/* The quick chat + the cry button. Everything inside a phone is sized in
   iPhone points (--pt), so it scales with the phone. */

/* ---------------------------------------------------------- layout */
[data-scene="quick"] .quick-intro { display: none; }
.quick-track { height: 320vh; }
.quick-stage { padding-top: 52px; }
.quick-grid {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(40px, 7vw, 110px);
}
.quick-copy .lede { max-width: 30ch; }
[data-scene="quick"] .copy .h2 { margin-bottom: 22px; }
.quick-kicker { display: flex; align-items: center; gap: 6px; }
.quick-kicker svg { width: 0.82em; height: 0.82em; }
[data-scene="quick"] .quick-phone { --phone-w: min(340px, max(250px, 27vw), calc((100svh - 52px - 72px) / 2.054)); }

/* the day, outside the phone */
.quick-clock { display: flex; align-items: center; gap: 18px; margin-top: 44px; }
.quick-ring { width: 56px; height: 56px; flex: none; }
.quick-clock-time {
  font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 4ch;
  contain: layout paint;
}
.quick-clock-day { font-size: 17px; color: var(--muted); margin-top: 4px; font-weight: 500; }

/* beat 2 */
.quick-cry .copy .lede { max-width: 26ch; }
[data-scene="quick"] .quick-phone-b { --phone-w: clamp(250px, 27vw, 340px); }

@media (max-width: 860px) {
  [data-scene="quick"] .quick-intro { display: block; text-align: center; padding-top: clamp(96px, 14vh, 140px); }
  .quick-intro .kicker { justify-content: center; }
  .quick-intro .lede { margin: 0 auto; }
  .quick-intro .h2 { margin-bottom: 18px; }
  .quick-grid { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .quick-copy { order: 2; }
  .quick-copy-text { display: none; }
  .quick-clock { margin-top: 0; gap: 12px; }
  .quick-ring { width: 38px; height: 38px; }
  .quick-clock-time { font-size: 30px; }
  .quick-clock-day { font-size: 14px; margin-top: 2px; }
  [data-scene="quick"] .quick-phone { --phone-w: min(300px, calc((100svh - 52px - 96px) / 2.054)); }
  [data-scene="quick"] .quick-phone-b { --phone-w: min(300px, 76vw); }
  .quick-cry .row { gap: 44px; }
}

/* ---------------------------------------------------------- the phone */
.quick-screen { background: #fff; }
.quick-screen .status { z-index: 6; }
.quick-edge {
  position: absolute; left: 0; right: 0; top: 0; height: calc(176 * var(--pt));
  background: linear-gradient(#fff 0, #fff 52%, rgba(255, 255, 255, 0.86) 70%, rgba(255, 255, 255, 0));
  z-index: 4; pointer-events: none;
}
.quick-bar {
  position: absolute; top: calc(60 * var(--pt)); left: calc(12 * var(--pt)); right: calc(12 * var(--pt));
  display: flex; justify-content: space-between; align-items: flex-start; z-index: 5;
}
.quick-cbtn {
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
}
.quick-cbtn svg { width: 45%; height: 45%; }
.quick-head {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.quick-av {
  position: relative; z-index: 1;
  width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); border-radius: 50%;
  border: calc(3 * var(--pt)) solid #fff;
  background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 72%, #fff));
  color: #fff; font-weight: 600; font-size: calc(21 * var(--pt));
  display: grid; place-items: center;
  box-shadow: 0 calc(2 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.14);
}
.quick-title {
  margin-top: calc(-11 * var(--pt));
  height: calc(40 * var(--pt)); padding: calc(9 * var(--pt)) calc(16 * var(--pt)) 0;
  border-radius: 999px; display: flex; align-items: center; gap: calc(4 * var(--pt));
  font-weight: 600; font-size: calc(17 * var(--pt)); letter-spacing: -0.02em; line-height: 1;
}
.quick-title i { display: flex; color: var(--coral); padding-right: calc(2 * var(--pt)); }
.quick-title svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }

/* the transcript */
.quick-room { position: absolute; inset: 0; overflow: hidden; }
.quick-scroll { position: absolute; inset: 0 0 auto; height: 100%; transition: transform 0.32s var(--out); will-change: transform; }
.quick-pill {
  position: absolute; top: calc(152 * var(--pt)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(5 * var(--pt));
  padding: calc(8 * var(--pt)) calc(14 * var(--pt));
  border-radius: 999px; white-space: nowrap;
  font-size: calc(13 * var(--pt)); font-weight: 600; line-height: calc(16 * var(--pt));
  color: rgba(60, 60, 67, 0.6); letter-spacing: -0.005em;
}
.quick-pill svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.quick-msgs {
  position: absolute; top: calc(195 * var(--pt)); left: calc(12 * var(--pt)); right: calc(12 * var(--pt));
}
.quick-row { will-change: transform, opacity; transform-origin: 50% 60%; }
.quick-row + .quick-row { margin-top: calc(8 * var(--pt)); }
.quick-row-emoji { display: flex; flex-direction: column; align-items: flex-end; padding-right: calc(4 * var(--pt)); transform-origin: 85% 50%; }
.quick-jumbo { font-size: calc(48 * var(--pt)); line-height: calc(56 * var(--pt)); }
.quick-receipt { font-size: calc(11 * var(--pt)); line-height: calc(13 * var(--pt)); color: rgba(60, 60, 67, 0.6); margin-top: calc(2 * var(--pt)); letter-spacing: 0.01em; font-weight: 500; }

/* reduced motion: before / after as a crossfade */
@media (prefers-reduced-motion: reduce) {
  .quick-row { transition: opacity 0.6s ease; }
  .quick-after .quick-row { opacity: 0; }
}

/* the cry column — no bubble, no glass, jumbomoji size */
.quick-faces { position: absolute; inset: 0; }
.quick-face {
  position: absolute; top: 0; right: calc(14 * var(--pt));
  visibility: hidden; will-change: transform;
}
.quick-face span {
  display: block;
  font-size: calc(44 * var(--pt)); line-height: calc(52 * var(--pt));
  transform-origin: 100% 100%;
}

/* ---------------------------------------------------------- the composer */
.quick-composer {
  position: absolute; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(34 * var(--pt));
  display: flex; align-items: flex-end; gap: calc(10 * var(--pt)); z-index: 5;
}
.quick-plus {
  width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.quick-plus svg { width: 42%; height: 42%; }
.quick-field {
  flex: 1; height: calc(50 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center;
  padding: 0 calc(8 * var(--pt)) 0 calc(18 * var(--pt));
}
.quick-input { flex: 1; position: relative; display: flex; align-items: center; height: calc(22 * var(--pt)); font-size: calc(17 * var(--pt)); }
.quick-typed { color: #000; }
.quick-caret {
  width: calc(2 * var(--pt)); height: calc(21 * var(--pt)); background: var(--coral); border-radius: 1px;
  margin-left: calc(1 * var(--pt)); animation: quick-blink 1.06s steps(1) infinite;
}
.quick-ph { position: absolute; left: calc(3 * var(--pt)); color: rgba(60, 60, 67, 0.3); }
.has-text .quick-ph { opacity: 0; }
@keyframes quick-blink { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } }
@keyframes quick-blink-b { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } }
.quick-caret.alt { animation-name: quick-blink-b; }

/* one control, two faces: the arrow turns over into the 😭 (GlyphTurn) */
.quick-send {
  position: relative; flex: none;
  width: calc(34 * var(--pt)); height: calc(34 * var(--pt));
  display: grid; place-items: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  border-radius: 50%;
}
button.quick-send::before { content: ""; position: absolute; inset: min(calc(-14 * var(--pt)), -12px); border-radius: 50%; }
button.quick-send:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.quick-face-arrow, .quick-face-cry {
  grid-area: 1 / 1; display: grid; place-items: center;
  width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.33, 0, 0.15, 1), opacity 0.3s cubic-bezier(0.33, 0, 0.15, 1);
}
.quick-face-arrow svg { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.quick-face-arrow { transform: perspective(calc(90 * var(--pt))) rotateY(0deg); }
.quick-face-cry { transform: perspective(calc(90 * var(--pt))) rotateY(-180deg) scale(0.88); opacity: 0; }
.is-cry .quick-face-arrow { transform: perspective(calc(90 * var(--pt))) rotateY(180deg) scale(0.88); opacity: 0; }
.is-cry .quick-face-cry { transform: perspective(calc(90 * var(--pt))) rotateY(0deg); opacity: 1; }
.quick-cry-glyph {
  display: block; font-size: calc(27 * var(--pt)); line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.quick-cry-glyph.swell { transform: scale(1.16); transition: transform 0.16s cubic-bezier(0.34, 1.9, 0.64, 1); }

@media (prefers-reduced-motion: reduce) {
  .quick-face-arrow, .quick-face-cry { transition: opacity 0.2s linear; }
  .quick-face-cry, .is-cry .quick-face-arrow { transform: none; }
  .quick-caret { animation: none; }
  .quick-scroll { transition: none; }
}

/* beat 1's composer is not focused: no caret */
.quick-phone-a .quick-caret { display: none; }
button.quick-send { cursor: pointer; }