/* Public character interaction. Core production poses own the face and screen;
 * the retained DOM overlays remain available to characters using fallback art. */
.public-chat { border-top: 1px solid #d5dfcf; background: #f8f9f2; padding: 18px; text-align: left; }
.public-chat [hidden] { display: none !important; }
.public-chat-intro { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 10px; }
.public-chat-intro label { color: #2d4335; font-size: 12px; font-weight: 650; }
.public-chat-intro [role=status] { font-size: 10px; color: #5a705d; }
.public-ask-field { display: flex; align-items: stretch; gap: 8px; background: #fffef9; border: 1px solid #bacdb9; border-radius: 11px; padding: 4px; transition: border-color 180ms; }
.public-ask-field:focus-within { border-color: #39775f; outline: 2px solid #d6e8d7; outline-offset: 2px; }
.public-ask-field textarea { width: 100%; min-width: 0; min-height: 62px; max-height: 160px; resize: vertical; padding: 10px; line-height: 1.55; font-size: 13px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
.public-ask-field textarea:focus { border: 0; background: transparent; box-shadow: none; outline: none; }
.public-ask-field textarea:disabled { opacity: 1; color: #6b756a; cursor: default; }
.public-ask-field textarea::placeholder { color: #6f7c6d; opacity: 1; }
.public-ask-field button { min-width: 56px; border: 0; border-radius: 8px; padding: 8px 12px; background: #243c2e; color: #f7faf1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; font-size: 10px; }
.public-ask-field button .icon { width: 18px; height: 18px; }
.public-ask-field button:disabled { opacity: .55; cursor: default; }
.public-examples { display: flex; gap: 5px 8px; flex-wrap: wrap; margin-top: 10px; }
.public-examples button { background: transparent; border: 1px solid #d7e0d0; border-radius: 6px; padding: 7px 9px; color: #536b55; text-align: left; font-size: 10px; line-height: 1.4; min-height: 32px; }
.public-examples button:hover:not(:disabled) { background: #eef4e7; border-color: #b9cdb2; }
.public-chat-note { font-size: 9px; line-height: 1.6; color: #647260; margin: 10px 1px 0; max-width: 48em; }
.public-chat-error { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #53674f; }
.public-answer-panel { margin-top: 18px; border-top: 1px solid #d6dfcf; padding-top: 15px; }
.public-answer-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.public-answer-heading > span { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: #466947; margin-right: auto; }
.public-answer-heading button { min-height: 30px; border: 0; padding: 4px 0; background: transparent; color: #647260; text-decoration: underline; text-underline-offset: 3px; font-size: 10px; }
.public-answer-heading button:disabled { opacity: .6; }
.public-question { color: #647260; font-size: 11px; margin: 10px 0 12px; overflow-wrap: anywhere; }
.public-answer { white-space: pre-wrap; overflow-wrap: anywhere; color: #243c2e; font-size: 14px; line-height: 1.75; min-height: 1.75em; }
.public-answer:empty::before { content: 'The answer will appear here.'; color: #768470; font-size: 12px; }
.public-answer:focus-visible { outline: 2px solid #39775f; outline-offset: 6px; border-radius: 3px; }
.public-complete-cta { display: flex; flex-wrap: wrap; gap: 12px 20px; border-top: 1px solid #e0e6d9; padding-top: 14px; margin-top: 18px; }
.public-complete-cta a { color: #385e3e; font-size: 11px; font-weight: 600; text-decoration: none; }
.public-complete-cta a:first-child { color: #203d2b; }
.public-complete-cta a:hover { text-decoration: underline; text-underline-offset: 4px; }

.product-demo[data-public-interactive=true] .demo-scene { height: 285px; }
.product-demo[data-public-interactive=true] .demo-phase,
.product-demo[data-public-interactive=true] .demo-paper,
.product-demo[data-public-interactive=true] .demo-workflow { display: none; }
.product-demo[data-public-interactive=true] .demo-backdrop { inset: 24px 18% 23px; border-radius: 50% 50% 8% 8%; }
.product-demo[data-public-interactive=true] .demo-shelf { top: 64px; }
.product-demo[data-public-interactive=true] .demo-character { max-width: 230px; width: 63%; bottom: 28px; animation: public-oddo-breathe 6s ease-in-out infinite; }
.product-demo[data-public-interactive=true] .demo-desk { bottom: 18px; }
.product-demo[data-public-interactive=true] .oddo-character { transform-origin: 50% 80%; transition: transform 220ms ease-out; }
.product-demo[data-public-interactive=true] .oddo-character-display { opacity: 1; display: flex; align-items: center; justify-content: space-between; gap: 6%; padding: 0 1%; background: #35444d; border-radius: 15%; animation: none; transform: skewX(-7deg); }
.product-demo[data-public-interactive=true] .oddo-character-display::before,
.product-demo[data-public-interactive=true] .oddo-character-display::after { content: ''; display: block; width: 46%; height: 96%; background: #bdebdc; border-radius: 20%; animation: public-oddo-blink 8s ease-in-out infinite; transform-origin: center; }
.product-demo[data-public-interactive=true] .oddo-character-screen { display: block; position: absolute; left: 51%; top: 65%; width: 33%; line-height: 1.2; text-align: center; font-size: 7px; font-weight: 500; letter-spacing: .15px; color: #d4f5e8; pointer-events: none; }
.product-demo[data-public-interactive=true] .oddo-character-module { opacity: .08; background: #bcf1df; animation: none; transition: opacity 250ms; }
.product-demo[data-public-interactive=true] [data-character-state=listening] { transform: rotate(-2deg) translateX(-3px); }
.product-demo[data-public-interactive=true] [data-character-expression=curious] .oddo-character-display::after { height: 74%; align-self: flex-start; }
.product-demo[data-public-interactive=true] [data-character-expression=focused] .oddo-character-display::before,
.product-demo[data-public-interactive=true] [data-character-expression=focused] .oddo-character-display::after { height: 67%; animation: none; }
.product-demo[data-public-interactive=true] [data-character-expression=happy] .oddo-character-display::before,
.product-demo[data-public-interactive=true] [data-character-expression=happy] .oddo-character-display::after { height: 62%; border-radius: 45% 45% 18% 18%; animation: none; }
.product-demo[data-public-interactive=true] [data-character-state=listening] .oddo-character-module { opacity: .3; }
.product-demo[data-public-interactive=true] [data-character-state=thinking] { animation: public-oddo-focus 4s ease-in-out infinite; }
.product-demo[data-public-interactive=true] [data-character-state=thinking] .oddo-character-module,
.product-demo[data-public-interactive=true] [data-character-state=answering] .oddo-character-module { animation: public-oddo-module 2.8s ease-in-out infinite; }
.product-demo[data-public-interactive=true] [data-character-state=answering] { animation: public-oddo-focus 3s ease-in-out infinite; }
.product-demo[data-public-interactive=true] [data-character-state=ready] { transform: translateY(-2px) rotate(1deg); }
.product-demo[data-public-interactive=true] [data-character-state=error] .oddo-character-module { opacity: .08; }
.product-demo[data-public-interactive=true] .demo-character-core { max-width: 250px; width: 70%; animation: public-core-breathe 6s ease-in-out infinite; }
.product-demo[data-public-interactive=true] .oddo-character[data-character-art=core] { transform: none; animation: none; transition: none; }
.product-demo[data-motion=paused] *::before, .product-demo[data-motion=paused] *::after,
[data-demo-suspended] .product-demo *::before, [data-demo-suspended] .product-demo *::after { animation-play-state: paused !important; }
@keyframes public-oddo-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes public-core-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.006); } }
@keyframes public-oddo-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(.08); } }
@keyframes public-oddo-focus { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1deg); } }
@keyframes public-oddo-module { 0%, 100% { opacity: .15; } 50% { opacity: .4; } }
@media (max-width: 480px) {
  .public-chat { padding: 14px; }
  .product-demo[data-public-interactive=true] .demo-scene { height: 260px; }
  .product-demo[data-public-interactive=true] .demo-character { max-width: 208px; }
  .product-demo[data-public-interactive=true] .demo-character-core { max-width: 228px; }
  .public-chat-intro { gap: 6px; }
  .public-chat-intro label { font-size: 12px; }
  .public-ask-field textarea { font-size: 16px; }
  .public-answer { font-size: 13px; }
  .public-examples button { min-height: 38px; }
  .public-chat-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-chat *, .product-demo[data-public-interactive=true] *,
  .product-demo[data-public-interactive=true] *::before,
  .product-demo[data-public-interactive=true] *::after { animation: none !important; transition: none !important; }
  .product-demo[data-public-interactive=true] .oddo-character,
  .product-demo[data-public-interactive=true] .demo-character { transform: none !important; }
}