/* PNCollective conversation motion system — shared scene, timing and semantic tokens. */
.chat-demo[data-motion-player]{--motion-enter:220ms;--motion-travel:9px;--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-focus:#04794d;--motion-surface:#ffffff;--motion-text:#213b32;--motion-muted:#4c655b;--motion-line:#cad9d1}
html[data-color-mode="dark"] .chat-demo[data-motion-player]{--motion-focus:#8ce2b8;--motion-surface:#172c23;--motion-text:#e6f2e9;--motion-muted:#b1c8bb;--motion-line:#3b5a4c}
.chat-motion-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}.chat-motion-actions button{background:var(--motion-surface);color:var(--motion-text);border:1px solid var(--motion-line);border-radius:99px;min-height:42px;padding:9px 14px;font:inherit;font-size:12px;cursor:pointer}.chat-motion-actions [data-motion-play]{background:var(--ed-ink);color:var(--ed-paper);border-color:var(--ed-ink);min-width:90px;font-weight:650}.chat-motion-actions button:disabled{opacity:.55;cursor:default}
.chat-motion-settings{font-size:12px;margin-top:12px;color:var(--motion-muted)}.chat-motion-settings summary{cursor:pointer;min-height:36px;display:inline-flex;align-items:center}.chat-motion-settings>div{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0}.chat-motion-settings label{display:flex;gap:8px;align-items:center}.chat-motion-settings select{font:inherit;color:var(--motion-text);background:var(--motion-surface);border:1px solid var(--motion-line);border-radius:8px;padding:7px}
.motion-status{font-size:11px;min-height:20px;color:var(--motion-muted);margin:10px 0!important}.chat-demo [hidden]{display:none!important}.chat-motion-runtime{display:none}.motion-enhanced .chat-motion-runtime{display:flex}.motion-enhanced details.chat-motion-runtime{display:block}
.motion-enhanced .chat-viewport{height:560px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;position:relative;scroll-behavior:smooth;isolation:isolate}.motion-enhanced .chat-slide{min-height:0;padding-bottom:24px}.motion-enhanced .chat-window{overflow:hidden}.motion-enhanced .chat-message{max-width:88%}.motion-enhanced .chat-message p{white-space:normal;line-height:1.85}.motion-enhanced .motion-enter{animation:pn-message-enter var(--motion-enter) var(--motion-ease) both;transform-origin:bottom left}.motion-enhanced .customer.motion-enter{transform-origin:bottom right}
.motion-enhanced .motion-accent>p{box-shadow:inset 3px 0 0 var(--motion-focus)}.motion-enhanced .motion-resolution>p{box-shadow:0 0 0 2px var(--motion-focus)}
.motion-typing{display:flex;gap:5px;width:max-content;align-items:center;padding:14px 18px;margin:0 18px 20px;border-radius:0 12px 12px;background:white;color:#587180}.motion-typing[data-role="customer"]{margin-left:auto;background:#ffe45c;color:#5c5226;border-radius:12px 0 12px 12px}.motion-typing i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pn-typing 1100ms ease-in-out infinite}.motion-typing i:nth-child(2){animation-delay:120ms}.motion-typing i:nth-child(3){animation-delay:240ms}html[data-color-mode="dark"] .motion-typing:not([data-role="customer"]){background:#354750;color:#c4d6df}
[data-motion-state="paused"] .motion-typing i{animation-play-state:paused}.chat-demo [data-motion-viewport]:focus-visible{outline:3px solid var(--motion-focus);outline-offset:-4px}
@keyframes pn-message-enter{from{opacity:0;transform:translateY(var(--motion-travel)) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pn-typing{0%,70%,100%{opacity:.4;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(max-width:760px){.motion-enhanced .chat-viewport{height:min(570px,68svh);min-height:360px}.chat-motion-actions{gap:6px}.chat-motion-actions button{padding:9px 12px;font-size:11px;min-height:44px}.motion-enhanced .chat-message{max-width:94%}}
@media(prefers-reduced-motion:reduce){.motion-enhanced .chat-viewport{scroll-behavior:auto}.motion-enhanced *{animation:none!important;transition:none!important}}
.chat-demo .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}