.demo-main{max-width:860px;margin:0 auto;padding:1rem 1rem 2.5rem;display:flex;flex-direction:column;gap:.9rem;min-height:calc(100svh - 76px)}.demo-band{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.9rem 1.2rem;border-radius:18px;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.35)}.demo-band p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink)}.demo-band p b{color:var(--grn)}.demo-band .btn{flex:none}.demo-chat{flex:1;display:flex;flex-direction:column;min-height:480px;border-radius:24px;overflow:hidden;border:1px solid var(--card-border);box-shadow:var(--mock-shadow);background:var(--wa-bg)}.demo-wa-header{padding:.9rem 1.2rem;background:var(--wa-head);color:var(--wa-head-txt);display:flex;align-items:center;gap:.8rem}.demo-wa-header .wa-avatar{font-size:1.6rem}.demo-wa-header .wa-title{font-size:.98rem;font-weight:700;line-height:1.2}.demo-wa-header .wa-title i{display:block;font-size:.75rem;font-weight:400;font-style:normal;color:var(--wa-sub)}.demo-body{flex:1;padding:1rem;overflow-y:auto;background:var(--wa-bg);background-image:radial-gradient(var(--wa-dots) 1px,transparent 1px);background-size:16px 16px;display:flex;flex-direction:column;gap:.55rem;scroll-behavior:smooth}.demo-day{text-align:center;font-size:.7rem;color:var(--wa-day);margin-bottom:.3rem}.demo-msg{padding:.65rem .9rem;border-radius:12px;font-size:.92rem;line-height:1.45;max-width:78%;word-break:break-word;white-space:pre-wrap;color:var(--wa-txt);box-shadow:0 1px 1px rgba(0,0,0,.1)}.demo-msg time{display:block;text-align:right;font-size:.65rem;color:var(--wa-time);margin-top:.2rem}.demo-msg.ai{background:var(--wa-in);align-self:flex-start;border-bottom-left-radius:2px}.demo-msg.me{background:var(--wa-out);align-self:flex-end;border-bottom-right-radius:2px}.demo-msg.sys{background:rgba(37,211,102,.15);color:var(--grn);align-self:center;border:1px solid rgba(37,211,102,.3);font-size:.78rem;text-align:center;max-width:92%;box-shadow:none}.demo-typing{display:inline-flex;align-items:center;gap:4px;padding:.8rem 1rem}.demo-typing i{width:7px;height:7px;border-radius:50%;background:var(--wa-time);animation:demoTyping 1.2s infinite}.demo-typing i:nth-child(2){animation-delay:.15s}.demo-typing i:nth-child(3){animation-delay:.3s}@keyframes demoTyping{0%,60%,to{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}.demo-chips{display:flex;gap:.5rem;flex-wrap:wrap;padding:0 1rem .6rem;background:var(--wa-bg)}.demo-chip{padding:.45rem .95rem;border-radius:999px;cursor:pointer;background:var(--chipbg);border:1px solid var(--grn);color:var(--grn);font-size:.84rem;font-weight:600;font-family:var(--font-t);transition:.2s}.demo-chip:hover{background:var(--grn);color:#04100a}.demo-input{display:flex;gap:.6rem;padding:.7rem .9rem;background:var(--wa-input);align-items:center}.demo-input input{flex:1;height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid transparent;background:var(--wa-bg);color:var(--wa-txt);font-size:.95rem;font-family:var(--font-t);outline:none}.demo-input input:focus{border-color:var(--grn)}.demo-input button{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex:none;background:var(--btn-bg);color:var(--btn-fg);display:grid;place-items:center;transition:.2s}.demo-input button:disabled{opacity:.5;cursor:default}.demo-input button svg{width:20px;height:20px}.demo-note{padding:.55rem 1rem;text-align:center;font-size:.8rem;color:var(--red);background:rgba(255,77,94,.08);border-top:1px solid rgba(255,77,94,.25)}@media (max-width:640px){.demo-main{padding:.6rem .6rem 1.4rem;min-height:calc(100svh - 62px)}.demo-band{padding:.7rem .9rem}.demo-band .btn{width:100%}.demo-msg{max-width:88%}}