/* A quiet repeat of the little marks already used inside the product. */
body:before{content:'';position:fixed;inset:0;background:url('assets/page-pattern.svg') 18px 12px/192px 192px;opacity:.045;pointer-events:none;z-index:-1}
body{isolation:isolate}

/* Only the conversation scrolls. The outer frame never depends on its contents. */
.demo-stack{height:min(100%,790px);display:flex;flex-direction:column}
.chat-card{height:100%;min-height:0;flex:1;display:flex;flex-direction:column}
.channel-header,.message-composer,.discord-typing{flex-shrink:0}
.chat-viewport{position:relative;flex:1;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-width:none}
.chat-viewport::-webkit-scrollbar{display:none}
.chat-viewport:focus-visible{outline:2px solid #a3a596;outline-offset:-3px}
.chat-card .discord-messages{flex:none;min-height:0;overflow:visible;padding-bottom:12px}
.chat-card .d-message{flex:none}
.chat-card .d-message[hidden],.chat-card .video-tile[hidden],.video-reactions[hidden]{display:none!important}
.chat-card .d-bot-intro{height:auto;min-height:0}
.video-tile,[data-surface=telegram] .video-tile{width:100%;height:auto;aspect-ratio:7/4}
.video-tile video,.video-poster{object-fit:contain;object-position:center}
[data-surface=telegram] #demo-done{display:block}
[data-surface=telegram] .chat-viewport .d-bot-intro{min-height:0}

/* This aside is part of the bot's sentence. Its reveal cannot reflow the message. */
.speed-note{display:inline-block;position:relative;white-space:nowrap;vertical-align:bottom;clip-path:inset(-2px calc((1 - var(--note-reveal,0))*100%) -8px 0)}
.speed-note[hidden]{display:inline-block!important;visibility:hidden}
.d-message #demo-done{padding-bottom:4px}
.speed-emphasis{position:relative}
.speed-emphasis:after{content:'';position:absolute;left:-1px;right:-1px;bottom:-4px;height:3px;background:var(--lime);transform-origin:left;transform:rotate(-2deg) scaleX(var(--underline,0));pointer-events:none}

.video-reactions{display:flex;gap:6px;align-items:center;min-height:31px;padding-top:5px}
.reaction{display:inline-flex;align-items:center;gap:5px;height:25px;padding:2px 7px;background:#292a30;border:1px solid #45464e;border-radius:7px;font-size:12px;line-height:1;color:#dedfe5;animation:reaction-arrive .22s ease-out both}
.reaction-emoji{font-size:15px}
.reaction-person{width:15px;height:15px;margin-left:1px}
[data-surface=slack] .reaction{background:#edf5fb;border-color:#b9d8ed;color:#1d638f;border-radius:12px}
[data-bubbles=true] .reaction{background:#fff9;border-color:#00000012;color:#596b60;border-radius:14px}
[data-surface=wechat] .reaction{border-radius:5px;background:#f7f7f7}
[data-surface=imessage] .reaction{background:#e9e9ed;color:#696972;border:0}
[data-surface=telegram] .reaction{background:#e8f5df;border-color:transparent;color:#5c8d40}

/* Selected option 08: two toe-tap poses, held for 280ms each. */
.corner-mascot{display:block;aspect-ratio:1;height:auto;background:url('assets/mascot-toe-tap-v1.png') 0 0/200% 100% no-repeat;animation:mascot-toe-tap .56s steps(1,end) infinite}
@keyframes mascot-toe-tap{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes reaction-arrive{from{opacity:0;transform:translateY(3px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:1100px){.reaction{height:23px;font-size:10px}.reaction-emoji{font-size:13px}.video-reactions{min-height:29px}}
@media(max-width:760px){.demo-stack{height:min(100%,620px)}.reaction-person{width:13px;height:13px}.video-reactions{min-height:27px}}
@media(min-width:761px) and (max-height:700px){.video-reactions{min-height:27px}.reaction{height:22px}}
@media(max-width:760px) and (max-height:700px){.video-reactions{min-height:24px}.reaction{height:21px;padding:2px 5px}.reaction-person{display:none}}
@media(prefers-reduced-motion:reduce){.corner-mascot,.reaction,.chat-followup{animation:none}.speed-note{clip-path:none}}