/* Geometry study: stable text column, zero-height intrinsic measuring copy, one-line initial box.
   Only the paint layer opens horizontally; glyph coordinates never follow bubble width. */
.geometry-demo .chat-message{inline-size:89%;max-inline-size:89%}
.geometry-demo .chat-message>p{position:relative;isolation:isolate;inline-size:max-content;max-inline-size:100%;min-inline-size:min(100%,calc(20em + 30px));min-height:0;min-block-size:calc(1lh + 24px);background:transparent!important;text-align:start;box-sizing:border-box;white-space:normal;--bubble-fill:#fff}
.geometry-demo .chat-message.customer>p{--bubble-fill:#ffe45c}
html[data-color-mode="dark"] .geometry-demo .chat-message.consultant>p{--bubble-fill:#354750}
.geometry-demo .bubble-measure{display:block;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre-wrap}
.geometry-demo .bubble-ink{display:block;min-block-size:1lh;white-space:pre-wrap;overflow-wrap:anywhere;text-align:start}
.geometry-demo .chat-message>p::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:var(--bubble-fill);border-radius:inherit;z-index:-1}
.geometry-demo .motion-enter>p::before{animation:pnc-surface-open 520ms cubic-bezier(.16,1,.3,1) both}
.geometry-demo p[data-writing]::after{content:none!important}
.geometry-demo p[data-writing] .bubble-ink::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:pnc-caret 650ms steps(1) infinite}
.geometry-demo [data-motion-state="paused"] p[data-writing] .bubble-ink::after{animation-play-state:paused}
.geometry-demo details.chat-motion-settings,.geometry-demo .chat-service-note{display:none!important}
@keyframes pn-message-enter{from{opacity:0;transform:translateY(var(--motion-travel))}to{opacity:1;transform:translateY(0)}}
@keyframes pnc-surface-open{from{inline-size:min(100%,calc(20em + 30px))}to{inline-size:100%}}
@media(max-width:760px){.geometry-demo .chat-message{inline-size:94%;max-inline-size:94%}}
@media(prefers-reduced-motion:reduce){.geometry-demo .motion-enter>p::before,.geometry-demo .bubble-ink::after{animation:none!important}}

.chat-demo.geometry-demo{--motion-enter:460ms;--motion-travel:34px;--motion-ease:cubic-bezier(.16,1,.3,1)}
.geometry-demo [data-motion-next]{display:none}
@keyframes pnc-caret{50%{opacity:0}}