.chat-mockup{max-width:420px;overflow:hidden;margin:0 auto}.chat-mockup__header{border-radius:1rem 1rem 0 0}.chat-mockup__body{display:flex;flex-direction:column;gap:.75rem;min-height:280px}.chat-mockup__footer{border-radius:0 0 1rem 1rem}.chat-mockup__input-wrap{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--outline-variant);border-radius:1.5rem;padding:.25rem .25rem .25rem 1rem}.chat-mockup__input-wrap:focus-within{border-color:var(--primary)}.chat-mockup__input{all:unset;flex:1 1;font:inherit;font-size:.875rem;color:var(--on-surface);min-width:0}.chat-mockup__input::placeholder{color:var(--on-surface-variant);opacity:.6}.chat-mockup__send-btn{flex-shrink:0;background:var(--primary)!important;color:var(--on-primary)!important;width:2rem!important;height:2rem!important}.chat-mockup__bubble{max-width:85%;font-size:.875rem;line-height:1.5}.chat-mockup__bubble--user{align-self:flex-end;border-radius:1rem 1rem .25rem 1rem}.chat-mockup__bubble--bot{align-self:flex-start;border-radius:.25rem 1rem 1rem 1rem}.chat-mockup__typing{display:flex;gap:4px;padding:4px 2px}.chat-mockup__typing span{width:8px;height:8px;border-radius:50%;background:var(--on-surface-variant);animation:chat-typing-pulse 1.4s infinite both}.chat-mockup__typing span:nth-child(2){animation-delay:.2s}.chat-mockup__typing span:nth-child(3){animation-delay:.4s}@keyframes chat-typing-pulse{0%,80%,to{transform:translateY(0);opacity:.3}40%{transform:translateY(-6px);opacity:1}}