/* home-chat.css: the app's chat pieces, shared by the hero phone, the comparison (#cura) and the
   goals chat (#goal). Transcribed from the app's chat screen (the reference rebuilt them from it):
   the header line, your bubble, Cura's name line and bubble, typed characters, the word-by-word
   reply and the tool card. No reply waits behind typing dots. Linked in the body just before the hero phone, so it never
   holds up the hero words. Motion runs only under .hp-motion (home-play.js); without it every
   piece is simply there. */
.ah-t { font-size: 18px; line-height: 20px; font-weight: 600; color: var(--ink); }
.ah-r { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--primary); }
.ah-r .cv { color: var(--capApp); }
.pane-h { flex: 0 0 auto; height: 62px; display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.sep { display: flex; align-items: center; gap: 10px; padding: 14px 0 8px; font-size: 11px; font-weight: 500; color: var(--capApp); }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* A message that arrives grows its row open, so what is above it moves up smoothly. */
.grow { display: grid; grid-template-rows: 1fr; }
.grow > .gi { min-height: 0; overflow: hidden; }

.mu { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 0; }
.mu .b { max-width: 78%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--primary); color: var(--text-on-dark); font-size: 15px; line-height: 22px; transform-origin: 100% 100%; }
.mu .t { margin-top: 3px; padding-right: 4px; font-size: 11px; color: var(--capApp); }
.who { display: flex; align-items: center; gap: 4px; height: 28px; margin: 0 0 6px 4px; font-size: 11.5px; }
.who b { font-weight: 700; color: var(--primary); }
.who span { font-size: 11px; font-weight: 500; color: var(--capApp); }
.cb2, .cpb { background: var(--chat); border: 1px solid var(--chatLine); border-radius: 5px 18px 18px 18px; transform-origin: 0 0; }
.cb2 { max-width: 88%; padding: 11px 14px; font-size: 15px; line-height: 22px; color: var(--body); }
.cpb { max-width: 94%; padding: 11px 14px; font-size: 15px; line-height: 22px; color: var(--body); }
.cpb b, .cb2 b, .w.b { font-weight: 700; color: var(--ink); }

/* The composer: a placeholder, or the words being typed with a caret on the last one. */
.ac-ph { color: var(--capApp); }
.ac-tx { color: var(--ink); }

.tool { margin-top: 10px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; transform-origin: 0 0; }
.tool-h { display: flex; align-items: center; gap: 10px; }
.tool-d { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--hydration) 45%, var(--surface)); color: var(--pdark); }
.tool-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.tool-r { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--body); }
.tool-r .ic { color: var(--success); }

/* Motion, under the player's flag only. A word, a typed character or a whole bubble is shown by
   the film adding it; its inline animation-delay staggers words. */
.hp-motion .grow { animation: growIn 440ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.hp-motion .grow.g-rev { animation-duration: 760ms; animation-timing-function: linear; }
.hp-motion .mu .b, .hp-motion .cb2 { animation: popIn 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.hp-motion .tool { animation: popIn 400ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.hp-motion :is(.w, .tch) { animation: chIn 1ms linear both; }
.hp-motion .ac-ph { animation: fadeIn 200ms ease both; }
.tch::after { content: ""; display: inline-block; width: 1.5px; height: 18px; margin-right: -1.5px; vertical-align: -4px; background: var(--primary); opacity: 0; }
.hp-motion .tch::after { animation: caretOn 34ms step-end; animation-delay: inherit; }
.hp-motion .tch.last::after { animation: caretBlink 1s step-end infinite; animation-delay: inherit; }
/* A finished part keeps no blinking caret. */
.hp-done .tch::after { animation: none; }

@keyframes growIn { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
@keyframes chIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes caretOn { from { opacity: 1; } to { opacity: 1; } }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }