html,body{height:100%}body.bvc{background:var(--bg-900);overflow:hidden}.demo-app{height:100vh;display:flex;flex-direction:column;background:radial-gradient(60% 50% at 50% -8%,rgba(168,85,247,.16),transparent 60%),radial-gradient(50% 45% at 90% 4%,rgba(34,211,238,.12),transparent 60%),var(--bg-900)}.demo-head{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,4vw,32px);border-bottom:1px solid var(--border-subtle);background:var(--surface-glass-strong);backdrop-filter:blur(20px);z-index:10}.demo-back{width:38px;height:38px;flex-shrink:0;border-radius:999px;display:grid;place-items:center;background:var(--bg-700);border:1px solid var(--border-subtle);color:var(--text-hi);text-decoration:none}.demo-live{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--success-soft);border-radius:999px;font-size:12px;font-weight:600;color:var(--success)}.demo-live .d{width:7px;height:7px;border-radius:999px;background:var(--success);animation:bvLiveDot 1.8s var(--ease-inout) infinite}.demo-planes{margin-left:auto}.demo-main{flex:1;overflow-y:auto;padding:28px clamp(12px,4vw,32px) 16px}.demo-inner{max-width:760px;margin:0 auto;width:100%}.demo-intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 0 22px}.demo-intro-ic{width:80px;height:80px;border-radius:24px;display:grid;place-items:center;background:var(--bv-gradient-soft);border:1px solid var(--cyan-line);box-shadow:var(--glow-cyan);font-size:40px;color:var(--bv-cyan)}.demo-intro h1{font-size:clamp(28px,4vw,40px);color:var(--text-hi);max-width:520px;line-height:1.1}.demo-intro p{color:var(--text-mid);font-size:15px;line-height:1.6;margin:0;max-width:460px}.demo-msgs{display:flex;flex-direction:column;gap:16px}.demo-msg{display:flex;gap:10px;align-items:flex-end}.demo-msg.me{justify-content:flex-end}.demo-av{width:34px;height:34px;flex-shrink:0;border-radius:999px;display:grid;place-items:center;background:var(--bv-gradient-soft);border:1px solid var(--cyan-line);color:var(--bv-cyan);font-size:17px}.demo-bub{max-width:82%;padding:13px 16px;font-size:14.5px;line-height:1.6;white-space:pre-wrap}.demo-bub.a{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:16px 16px 16px 4px;color:var(--text-hi)}.demo-bub.me{background:var(--bv-gradient-soft);border:1px solid var(--cyan-line);border-radius:16px 16px 4px;color:var(--text-hi)}.demo-bub .att{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.att-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;background:var(--bg-700);border:1px solid var(--border-default);font-size:12px;color:var(--text-hi)}.demo-typing{display:flex;gap:5px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:16px 16px 16px 4px}.demo-typing span{width:7px;height:7px;border-radius:999px;background:var(--text-low);animation:bvWave 1s var(--ease-inout) infinite}.demo-typing span:nth-child(2){animation-delay:.15s}.demo-typing span:nth-child(3){animation-delay:.3s}.demo-result{flex:1;max-width:480px;border-radius:var(--radius-md);background:var(--bg-800);border:1px solid var(--cyan-line);box-shadow:var(--glow-cyan);padding:20px;display:flex;flex-direction:column;gap:14px}.demo-result-h{display:flex;align-items:center;gap:10px;font:800 15px/1.2 var(--font-display);color:var(--text-hi)}.demo-result-h i{font-size:24px;color:var(--bv-cyan)}.demo-foot{flex-shrink:0;padding:10px clamp(12px,4vw,32px) 18px}.demo-chips{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.demo-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-default);color:var(--text-mid);font-size:13px;cursor:pointer;white-space:nowrap}.demo-chip i{font-size:16px;color:var(--bv-cyan)}.demo-chip:hover{border-color:var(--cyan-line);background:var(--cyan-soft);color:var(--text-hi)}.demo-pending{display:flex;flex-wrap:wrap;gap:8px;padding:0 6px 8px}.demo-pending .att-chip{border-color:var(--cyan-line);background:var(--surface-2)}.demo-pending .rm{width:18px;height:18px;border-radius:999px;display:grid;place-items:center;background:var(--bg-600);border:none;color:var(--text-mid);cursor:pointer;font-size:10px}.att-chip.demo-rec{border-color:var(--accent-magenta);background:#e879f91f;color:var(--text-hi)}.att-chip.demo-rec b{font-variant-numeric:tabular-nums}.demo-recdot{width:9px;height:9px;border-radius:999px;background:var(--accent-magenta);animation:bvLiveDot 1.2s var(--ease-inout) infinite}.demo-bar{position:relative;display:flex;align-items:flex-end;gap:8px;background:var(--surface-2);border:1px solid var(--border-default);border-radius:22px;padding:10px 12px;box-shadow:var(--shadow-lg)}.demo-icon-btn{width:38px;height:38px;flex-shrink:0;border-radius:999px;display:grid;place-items:center;background:var(--bg-700);border:1px solid var(--border-subtle);color:var(--text-mid);cursor:pointer}.demo-send{background:var(--bv-gradient);border:none;color:#05070e;box-shadow:var(--glow-cyan)}.demo-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-hi);font:inherit;font-size:14.5px;resize:none;max-height:120px;padding:8px 2px;line-height:1.4}.demo-input::placeholder{color:var(--text-low)}.demo-attach-menu{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--surface-glass-strong);backdrop-filter:blur(24px);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:230px;animation:bvDrop var(--motion-base) var(--ease-out) both;z-index:20}.demo-attach-menu[hidden]{display:none}.demo-attach-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-hi);font:600 13.5px/1 var(--font-body)}.demo-attach-opt i{font-size:20px}.demo-attach-opt span{margin-left:auto;font-size:11px;color:var(--text-low);font-weight:400}.demo-attach-opt:hover{background:var(--bg-700)}.demo-note{text-align:center;font-size:11px;color:var(--text-low);margin-top:8px}@media(max-width:640px){.demo-chips{flex-wrap:nowrap;overflow-x:auto}.demo-chips::-webkit-scrollbar{display:none}.demo-planes{padding:8px 12px;font-size:12px}.demo-intro h1{font-size:24px}}