.conversation-demo{font-family:Inter,Arial,sans-serif;margin:0 auto 64px;max-width:1120px;color:#354238}.conversation-window{background:#fff;border:1px solid #dfe6df;border-radius:26px;box-shadow:0 20px 45px -30px #2a473a66;overflow:hidden}.conversation-top{display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,#fff,#f8faf6);padding:20px 28px;border-bottom:1px solid #eaf0e9}.conversation-top img{width:140px;height:auto}.conversation-top>span{font-size:13px;color:#7d8c80}.conversation-top small{margin-left:auto;color:#c07b54;background:#fff0e7;border-radius:20px;padding:6px 10px;font-size:9px;letter-spacing:.6px}
.conversation-scenario{padding:24px 28px 18px;display:flex;align-items:center;gap:20px;justify-content:space-between}.conversation-scenario small{font-size:9px;letter-spacing:2px;color:#ed7241}.conversation-scenario h3{font-family:Inter,Arial,sans-serif;font-size:20px;line-height:1.35;margin:7px 0 0;font-weight:600}.conversation-scenario>span{font-size:11px;padding:8px 12px;background:#f2f6ef;border-radius:8px;white-space:nowrap;color:#6f826e}
.conversation-layout{display:grid;grid-template-columns:42% 58%;padding:0 28px 24px}.conversation-character{position:relative;padding-right:24px}.conversation-avatar{width:100%;display:block;border-radius:20px;max-height:385px;background:#dfebe1}.conversation-avatar-tag{position:absolute;left:12px;top:12px;z-index:1;background:#fffE;border:1px solid #fff;border-radius:20px;padding:6px 10px;font-size:10px;display:flex;align-items:center;gap:6px}.conversation-avatar-tag i{height:6px;width:6px;border-radius:50%;background:#70a98e}.conversation-character-info{padding:14px 0 8px;display:grid;gap:5px}.conversation-character-info strong{font-size:13px;font-weight:600}.conversation-character-info>span{font-size:11px;color:#89968a}.conversation-wave{display:flex;align-items:center;justify-content:center;height:40px;gap:4px;margin:5px auto}.conversation-wave i{display:block;width:4px;border-radius:6px;height:var(--wave-height);background:#ef8455;animation:conversationWave 1.1s ease-in-out infinite;animation-delay:var(--wave-delay)}.conversation-voice-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#859581}.conversation-voice-label svg{height:13px;width:13px}
.conversation-dialogue{border:1px solid #e8eee5;border-radius:18px;background:#fafcf8;padding:20px;display:flex;flex-direction:column;gap:13px;min-width:0}.conversation-dialogue-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}.conversation-dialogue-heading strong{font-size:13px}.conversation-dialogue-heading>span{font-size:9px;color:#8a988b}.conversation-message{padding:14px 16px;border-radius:14px;max-width:92%;box-shadow:0 2px 5px #1c412903}.conversation-message small{font-size:8px;letter-spacing:1px;color:#9c7d63;font-weight:600}.conversation-message p{font-size:12px;line-height:1.65;margin:6px 0 0}.message-ai{background:#fff;border:1px solid #e6ece2;align-self:flex-start}.message-user{background:#fff0e6;border:1px solid #ffdfcc;align-self:flex-end}.message-one{animation:conversationFirst 18s ease-in-out infinite}.message-two{animation:conversationSecond 18s ease-in-out infinite}.message-three{animation:conversationThird 18s ease-in-out infinite}.conversation-typing{display:flex;gap:4px;padding:3px 12px;height:14px;align-items:center}.conversation-typing i{width:5px;height:5px;border-radius:50%;background:#b3c1b2;animation:conversationTyping 1.3s infinite}.conversation-typing i:nth-child(2){animation-delay:.2s}.conversation-typing i:nth-child(3){animation-delay:.4s}.conversation-input{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px;background:white;border:1px solid #e6ece2;border-radius:10px;font-size:10px;color:#9aa698}.conversation-input svg{height:16px;width:16px;color:#ed7948;flex-shrink:0}.conversation-input span{flex:1}
.conversation-criteria{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:#f7faf4;border-top:1px solid #eaf0e4;padding:15px 20px;font-size:10px}.conversation-criteria>span{color:#919d8c}.conversation-criteria b{display:flex;align-items:center;gap:5px;font-weight:500}.conversation-criteria svg{height:14px;width:14px;color:#76a18a}.conversation-demo figcaption{display:grid;text-align:center;gap:8px;padding:26px 12px 0}.conversation-demo figcaption strong{font-size:22px;font-weight:600}.conversation-demo figcaption>span{font-size:16px;line-height:1.6;color:#666}.conversation-toggle{justify-self:center;background:transparent;border:1px solid #bdcabb;border-radius:20px;padding:7px 15px;font:inherit;font-size:11px;color:#788973;margin-top:4px;cursor:pointer}.conversation-toggle:focus-visible{outline:2px solid #f2673a;outline-offset:4px}
.conversation-person{transform-origin:200px 420px;animation:conversationBreathe 5s ease-in-out infinite}.conversation-eyes{transform-origin:200px 176px;animation:conversationBlink 6s infinite}
@keyframes conversationFirst{0%,3%,97%,100%{opacity:.15;transform:translateY(5px)}8%,93%{opacity:1;transform:translateY(0)}}@keyframes conversationSecond{0%,24%,97%,100%{opacity:.12;transform:translateY(5px)}32%,93%{opacity:1;transform:translateY(0)}}@keyframes conversationThird{0%,50%,97%,100%{opacity:.12;transform:translateY(5px)}60%,93%{opacity:1;transform:translateY(0)}}@keyframes conversationWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes conversationTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}@keyframes conversationBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}@keyframes conversationBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}
.conversation-demo:not(.is-visible) *,.conversation-demo.is-paused *,.conversation-demo.is-document-hidden *{animation-play-state:paused!important}
@media(max-width:767px){.conversation-top{padding:16px;gap:12px}.conversation-top img{width:110px}.conversation-top small{font-size:7px;padding:5px 7px;max-width:110px;text-align:center}.conversation-top>span{font-size:10px}.conversation-scenario{padding:18px 16px;align-items:flex-start;flex-direction:column;gap:10px}.conversation-scenario h3{font-size:18px}.conversation-scenario>span{font-size:10px}.conversation-layout{grid-template-columns:1fr;padding:0 16px 18px;gap:20px}.conversation-character{padding:0;display:grid;grid-template-columns:140px 1fr;gap:0 16px;align-items:center}.conversation-avatar{grid-row:span 4;width:140px;height:165px;object-fit:cover}.conversation-avatar-tag{left:7px;top:7px;font-size:8px;padding:4px 7px}.conversation-character-info{padding:0;align-self:end}.conversation-character-info strong{font-size:12px}.conversation-character-info>span{font-size:10px;line-height:1.5}.conversation-wave{height:30px;margin:0;gap:3px}.conversation-wave i{width:3px;max-height:28px}.conversation-voice-label{font-size:9px;align-self:start}.conversation-dialogue{padding:16px;gap:12px;min-height:410px}.conversation-message{padding:12px 14px}.conversation-message p{font-size:12px}.conversation-criteria{gap:10px 14px;font-size:9px}.conversation-demo figcaption strong{font-size:19px}.conversation-demo figcaption>span{font-size:14px}.conversation-window{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.conversation-demo *{animation:none!important;transition:none!important}.conversation-message{opacity:1!important;transform:none!important}.conversation-toggle{display:none}}

.conversation-character-video{aspect-ratio:4/5;object-fit:cover;object-position:center;max-height:none;width:100%;display:block;background:#dce5dd}
@media(max-width:767px){.conversation-character-video{width:140px;height:175px;aspect-ratio:4/5;object-fit:cover;object-position:center}}

.conversation-video-crop{aspect-ratio:4/5;overflow:hidden;max-height:none;isolation:isolate}.conversation-video-crop .conversation-character-video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;transform:scale(1.32);transform-origin:center top;border-radius:0}@media(max-width:767px){.conversation-video-crop{width:140px;height:175px;grid-row:span 4}.conversation-video-crop .conversation-character-video{width:100%;height:100%}}
