/* Web wrappers for the exported uni-app styles; APP colors and measurements come from app-demo.css. */
.demo-screen { container-type: inline-size; }
.demo-app { --app-rpx: calc(100cqw / 750); display: flex; flex-direction: column; flex: 1; height: 0; min-height: 0; width: 100%; letter-spacing: normal; }
.demo-app .chat-page { width: 100%; flex: 1; height: 0; min-height: 0; }
.demo-app .app-icon { display: block; width: calc(var(--icon-rpx) * var(--app-rpx)); height: calc(var(--icon-rpx) * var(--app-rpx)); flex-shrink: 0; }
.demo-app .agent-avatar,.demo-app .user-avatar { width: calc(var(--avatar-rpx, 64) * var(--app-rpx)); height: calc(var(--avatar-rpx, 64) * var(--app-rpx)); }
.demo-app .agent-avatar { border-radius: 28%; }
.demo-app .agent-avatar-image { object-fit: contain; }
.demo-app .user-avatar-image { object-fit: cover; }
.demo-app .home-agent .agent-avatar { border-radius: 50%; --avatar-rpx: 56; }
.demo-app .welcome-companion img { object-fit: contain; }
.demo-app .home-agents-scroll { overflow-x: auto; scrollbar-width: none; }
.demo-app .home-agents-scroll::-webkit-scrollbar,.demo-app .chat-scroll::-webkit-scrollbar { display: none; }
.demo-app .chat-scroll { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.demo-app .chat-input { resize: none; background: transparent; border: 0; outline: 0; height: var(--composer-line); }
.demo-app .chat-input::placeholder { color: var(--composer-muted); }
.demo-app .send img { filter: brightness(0) invert(1); }
.demo-app .answer { min-height: var(--ref-body-font); }
.demo-app [hidden] { display: none !important; }
.demo-app .demo-follow-ups button { cursor: default; }
.is-paused .demo-app .thinking-dot { animation-play-state: paused; }