/* Figma 636:175: preserve localized dialogue and use exported artwork. */
body[data-page="ai-voice-agent"] #product-examples .voice-message-wave{display:flex;align-items:center;justify-content:flex-end;gap:3px;height:18px;margin-top:7px;color:#6882f1}
body[data-page="ai-voice-agent"] #product-examples .ps-turn-ai .voice-message-wave{justify-content:flex-start;color:#8993a5}
body[data-page="ai-voice-agent"] #product-examples .voice-message-wave i{display:block;width:3px;height:var(--wave-height);border-radius:3px;background:currentColor;transform-origin:center;animation:voice-message-level .8s ease-in-out var(--wave-delay) infinite alternate}
@keyframes voice-message-level{from{transform:scaleY(.3);opacity:.55}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){body[data-page="ai-voice-agent"] #product-examples .voice-message-wave i{animation:none}}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-context{font-size:14px;line-height:1.45;color:#000000d9;margin-bottom:24px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-dialogue{gap:24px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn{position:relative;max-width:100%;box-sizing:border-box;padding:0 62px 0 0;border-radius:0;background:none}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{padding:0 0 0 62px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-role{display:block;font-size:13px;line-height:17px;letter-spacing:-.4674px;font-weight:400;margin-bottom:2px;text-align:right}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai .ps-role{text-align:left}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn p{position:relative;isolation:isolate;padding:14px 16px;margin:0;min-height:48px;box-sizing:border-box;font-size:16px;line-height:1.25;color:white;text-align:right;background:none}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn p:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/voice-dialogue/customer-bubble.svg') center/100% 100% no-repeat;transform:scaleX(-1)}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-customer:first-child p:before{background-image:url('../img/voice-dialogue/customer-short.svg')}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai p{color:#16171c;font-size:14px;text-align:left}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai p:before{background-image:url('../img/voice-dialogue/agent-bubble.svg');transform:none}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn:before{content:"";position:absolute;right:0;top:3px;width:52px;height:52px;background:url('../img/voice-dialogue/customer-icon.svg') center/24px 24px no-repeat,url('../img/voice-dialogue/customer-avatar.svg') center/52px 52px no-repeat}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai:before{left:0;right:auto;background-image:url('../img/voice-dialogue/agent-icon.svg'),url('../img/voice-dialogue/agent-avatar.svg');background-size:28px 28px,52px 52px}
@media(max-width:1100px){body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .voice-dialogue-paper{padding:20px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn{padding-right:48px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{padding-left:48px;padding-right:0}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn:before{width:40px;height:40px;background-size:22px 22px,40px 40px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn p{font-size:14px;padding:12px}}

/* Figma 634:137: offset backing sheet and a -3deg foreground paper. */
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-exchange{padding:54px 44px 60px;min-height:500px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-exchange:before{z-index:-2}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-exchange:after{content:"";position:absolute;z-index:-1;left:calc(50% + 16px);top:calc(50% + 12px);width:calc(100% - 91px);height:calc(100% - 115px);border-radius:16px;background:rgba(215,215,217,.6);transform:translate(-50%,-50%) rotate(2.24deg);pointer-events:none}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .voice-dialogue-paper{transform:rotate(-3deg);min-height:385px;box-sizing:border-box;padding:22px 24px 24px;box-shadow:0 1px 1px #3b3b3b0a,0 3px 3px #3b3b3b08,0 6px 4px #3b3b3b05,0 11px 4px #3b3b3b03,0 32px 24px -12px #3b3b3b0f,0 0 0 1px #3b3b3b0a}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-context{color:#000000a6;margin-bottom:14px}
@media(max-width:1100px){body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-exchange{padding:40px 26px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-exchange:after{width:calc(100% - 55px);height:calc(100% - 80px);left:calc(50% + 10px)}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .voice-dialogue-paper{padding:22px 20px}}

/* Latest 634:137: 34px inner gutters, measured bubble widths and avatar alignment. */
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .voice-dialogue-paper{padding:22px 34px 34px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-customer{width:366px;max-width:100%}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-customer:first-child{width:265px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{width:315px;max-width:100%}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-customer p{padding-inline:8px}
body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-context{line-height:20px}
@media(max-width:1100px){body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .voice-dialogue-paper{padding:22px 24px 30px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-customer:first-child{width:251px}body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{width:301px}}

/* Contact Center excerpts contain fewer turns: size both sheets to their content. */
html body[data-page="aicc"] #product-examples .voice-dialogue-paper{min-height:0;height:auto}
html body[data-page="aicc"] #product-examples .ps-exchange:after{content:none}
html body[data-page="aicc"] #product-examples .contact-dialogue-stack{position:relative;isolation:isolate;width:100%}
html body[data-page="aicc"] #product-examples .contact-dialogue-stack:before{content:"";position:absolute;inset:10px -12px -10px 12px;z-index:-1;background:rgba(215,215,217,.6);border-radius:16px;transform:rotate(2.24deg);pointer-events:none}

/* All dialogue examples size bubbles to localized copy, including every tab. */
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-dialogue .ps-turn{width:fit-content;max-width:100%;min-width:0}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-dialogue .ps-turn p{overflow-wrap:anywhere;white-space:normal}

/* Compact dialogue avatars shared by all product examples and locales. */
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn{padding-right:46px}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{padding-left:46px;padding-right:0}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn:before{width:36px;height:36px;background-size:18px 18px,36px 36px}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai:before{background-size:20px 20px,36px 36px}
@media(max-width:1100px){
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn{padding-right:40px}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai{padding-left:40px;padding-right:0}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn:before{width:32px;height:32px;background-size:16px 16px,32px 32px}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-turn-ai:before{background-size:18px 18px,32px 32px}
}

/* Draw bubbles without scaling SVG artwork: corners stay circular at every text length. */
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-dialogue .ps-turn p:before{background:#6882f1;border-radius:12px;transform:none}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"]) #product-examples .ps-dialogue .ps-turn-ai p:before{background:#e7eaef}

/* Dialogue paper behind the foreground line texture; overlay never intercepts input. */
html body #product-examples .ps-exchange:before{z-index:3;pointer-events:none;opacity:.16}
html body #product-examples .voice-dialogue-paper{position:relative;z-index:1}
html body #product-examples .contact-dialogue-stack{z-index:1}
#product-examples .ps-turn.dialogue-pending{opacity:0}
html body #product-examples .ps-dialogue .ps-turn.dialogue-typing p{color:transparent}
#product-examples .dialogue-typing p:after{content:"";position:absolute;width:5px;height:5px;left:18px;top:calc(50% - 2.5px);border-radius:50%;background:#fff;box-shadow:9px 0 #fff,18px 0 #fff;animation:dialogue-typing-pulse .65s ease-in-out infinite alternate}
#product-examples .ps-turn-ai.dialogue-typing p:after{background:#687182;box-shadow:9px 0 #687182,18px 0 #687182}
@keyframes dialogue-typing-pulse{from{opacity:.35;transform:translateY(1px)}to{opacity:1;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){#product-examples .ps-turn.dialogue-pending{opacity:1}#product-examples .dialogue-typing p:after{animation:none}}

/* Preserve the full localized bubble dimensions while typing its visible copy. */
#product-examples .dialogue-typed{display:none}
/* Figma customer bubble includes a curved tail and a receipt row. */
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn.ps-turn-customer p{padding:9px 16px 25px;min-height:49px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-customer p:before{background: url('../img/voice-dialogue/chat-customer-bubble-833.svg') center/100% 100% no-repeat!important;border-radius:0!important;transform:scaleX(-1)!important}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .chat-receipt{position:absolute;right:78px;bottom:5px;display:flex;align-items:center;gap:5px;font:400 12px/14px Arial,sans-serif;color:rgba(22,23,28,.45);pointer-events:none}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .chat-receipt img{display:block;width:13px;height:8px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn.ps-turn-ai p{padding:9px 16px 25px;min-height:49px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-turn-ai .chat-agent-time{right:16px}
@media(max-width:1100px){html body[data-page="ai-chat-agent"] #voice-example-panel-0 .chat-receipt{right:64px}html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-customer p{padding-bottom:25px}}
/* Chat dialogue, Figma 833:10909; preserve the existing localized messages. */
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue{gap:24px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-role{color:#949494;font-size:13px;line-height:17px;margin-bottom:4px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn{padding-right:62px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-ai{padding-left:62px;padding-right:0}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn:before{width:52px;height:52px;background-image:url('../img/voice-dialogue/chat-customer-icon.svg'),url('../img/voice-dialogue/chat-customer-avatar.svg');background-size:24px 24px,52px 52px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-ai:before{background-image:url('../img/voice-dialogue/chat-agent-icon-833.svg'),url('../img/voice-dialogue/agent-avatar.svg');background-size:28px 28px,52px 52px;background-position:center;background-repeat:no-repeat}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn p{color:#16171c;font-size:16px;line-height:1.2;padding:12px 16px;min-height:48px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn p:before{background:#d9fdd3;border-radius:12px 0 12px 12px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-ai p{font-size:14px}
html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-ai p:before{background:#e7eaef;border-radius:0 12px 12px 12px}
@media(max-width:1100px){html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn{padding-right:48px}html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn-ai{padding-left:48px;padding-right:0}html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn:before{width:40px;height:40px;background-size:22px 22px,40px 40px}html body[data-page="ai-chat-agent"] #voice-example-panel-0 .ps-dialogue .ps-turn p{font-size:14px}}
#product-examples .dialogue-writing .dialogue-copy{opacity:0}
#product-examples .dialogue-writing .dialogue-typed{display:block;position:absolute;inset:0;padding:inherit;box-sizing:border-box;color:inherit;text-align:left;white-space:normal;overflow-wrap:anywhere;pointer-events:none}