/* Homepage recaps section: the recap arriving in a team group chat, inside the same phone frame as the
 * "Try it" demo (try/try-demo.css draws the bezel). recap-chat.js plays the messages in on scroll. */
.rc{margin:0;display:grid;gap:12px;justify-items:center}
.rc .td-device{width:min(100%,310px)}
.rc-screen{aspect-ratio:390/780;background:#eef1f7;display:flex;flex-direction:column;font-family:Inter,-apple-system,'Segoe UI',Arial,sans-serif}
.rc-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;background:#fff;border-bottom:1px solid #e3e7ee}
.rc-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ff6a00;color:#fff;font-size:16px;flex:none}
.rc-head b{display:block;font-size:14px;color:#0b1020;line-height:1.2}
.rc-head span{font-size:11.5px;color:#6e7686}
.rc-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 10px 14px;overflow:hidden}
.rc-msg{max-width:84%;display:grid;gap:3px}
.rc-msg .who{font-size:10.5px;font-weight:700;color:#6e7686;padding-left:10px}
.rc-bubble{padding:8px 11px;border-radius:16px 16px 16px 5px;background:#fff;color:#0b1020;font-size:13.5px;line-height:1.35;box-shadow:0 1px 1px rgba(11,16,32,.06)}
.rc-me{align-self:flex-end}
.rc-me .rc-bubble{background:#2f5fe0;color:#fff;border-radius:16px 16px 5px 16px}
.rc-link{padding:0;overflow:hidden;position:relative;text-decoration:none;display:block}
.rc-link img{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:#0a0a0f}
.rc-link .rc-meta{display:grid;gap:1px;padding:8px 11px 9px}
.rc-link .rc-meta b{font-size:12.5px;color:#0b1020;line-height:1.3}
.rc-link .rc-meta span{font-size:11px;color:#6e7686}
.rc-react{position:absolute;right:8px;bottom:-11px;padding:2px 7px;border-radius:999px;background:#fff;border:1px solid #e3e7ee;font-size:11.5px;font-weight:700;color:#0b1020;box-shadow:0 1px 3px rgba(11,16,32,.12)}
.rc-msg.has-react{margin-bottom:10px;position:relative}
.rc-typing{align-self:flex-start;display:none;gap:4px;padding:10px 12px;border-radius:16px;background:#fff}
.rc-typing i{width:6px;height:6px;border-radius:50%;background:#aab2c2;animation:rc-dot 1s infinite ease-in-out}
.rc-typing i:nth-child(2){animation-delay:.15s}.rc-typing i:nth-child(3){animation-delay:.3s}
/* Motion only once recap-chat.js has armed it (no JS = the whole chat, still). */
/* A message takes no room until it arrives, so the thread builds up from the bottom like a real chat. */
.rc.is-armed .rc-msg:not(.is-in){display:none}
.rc.is-armed .rc-msg.is-in{animation:rc-in .35s ease-out}
@keyframes rc-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.rc.is-armed .rc-react{transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.rc.is-armed .rc-msg.is-in .rc-react.is-in{transform:none}
.rc-typing.is-on{display:flex}
@keyframes rc-dot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.rc-typing i{animation:none}}