.zp-demo { width:290px; max-width:100%; color:var(--text); }
.zp-demo * { box-sizing:border-box; }
.zp-demo button { cursor:pointer; font:inherit; color:inherit; }
.zp-demo button:focus-visible { outline:2px solid #a996d0; outline-offset:3px; }
.zp-phone { --zp-bg:#101013; --zp-fg:#f4f4f5; --zp-muted:#929299; --zp-line:#ffffff16; --zp-surface:#242427; position:relative; width:100%; height:563px; border:6px solid #39393b; border-radius:42px; background:var(--zp-bg); color:var(--zp-fg); overflow:hidden; box-shadow:0 28px 45px #18181b20,0 2px 0 1px #959497, inset 0 0 0 1px #ffffff10; isolation:isolate; font-family:var(--font-sans,sans-serif); }
.zp-phone[data-theme=light] { --zp-bg:#f7f7f8; --zp-fg:#19191c; --zp-muted:#74747a; --zp-line:#11111116; --zp-surface:#e6e6e9; }
.zp-phone::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 90% 110%,#7b8564 0,transparent 60%),linear-gradient(145deg,transparent 35%,#46685d70); opacity:0; transition:opacity .25s; }
.zp-phone.has-paper::before { opacity:1; }
.zp-status { height:42px; padding:11px 21px 0; display:flex; justify-content:space-between; font-size:10px; font-weight:600; }
.zp-status>i { position:absolute; top:9px; left:calc(50% - 38px); width:76px; height:19px; border-radius:20px; background:#000; }
.zp-list { position:absolute; inset:42px 0 23px; padding:20px 18px; touch-action:pan-y; }
.zp-list>header { display:flex; flex-direction:column; gap:12px; }
.zp-list>header>span { font-size:10px; letter-spacing:-.1px; color:var(--zp-muted); }
.zp-list>header>b { font-weight:500; font-size:31px; margin-top:12px; }
.zp-list>header>small { font-size:10px; color:var(--zp-muted); }
.zp-rows { margin-top:35px; }
.zp-row { position:relative; display:flex; flex-direction:column; gap:10px; border:0; border-top:1px solid var(--zp-line); padding:21px 0; background:transparent; text-align:left; width:100%; transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .28s; }
.zp-row-title { font-size:12px; white-space:nowrap; letter-spacing:-.2px; }
.zp-row small { color:var(--zp-muted); font-size:9px; }
.zp-row i { position:absolute; right:0; bottom:19px; font-style:normal; color:var(--zp-muted); font-size:13px; }
.zp-list-note { position:absolute; bottom:22px; left:18px; right:18px; font-size:9px; color:var(--zp-muted); }
.zp-list>header,.zp-list-note { transition:opacity .2s,transform .4s cubic-bezier(.22,1,.36,1); }
.zp-phone.is-chat .zp-list>header,.zp-phone.is-chat .zp-list-note { opacity:0; transform:translateY(-16px); }
.zp-phone.is-chat .zp-row { opacity:0; transform:translateY(40px); }
.zp-phone.is-chat .zp-row.is-above { transform:translateY(-55px); }
.zp-phone.is-chat .zp-row.is-selected { transform:translate(24px,var(--zp-row-y, -148px)); }
.zp-chat { position:absolute; inset:42px 0 23px; opacity:0; transform:translateY(12px); pointer-events:none; transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .25s; }
.zp-phone.is-chat .zp-chat { opacity:1; transform:translateY(0); pointer-events:auto; }
.zp-chat-head { display:flex; align-items:center; gap:6px; padding:10px 10px 12px; user-select:none; touch-action:pan-y; }
.zp-chat-head b { flex:1; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zp-chat-head button,.zp-settings header button { background:transparent; border:0; width:34px; min-height:36px; flex-shrink:0; font-size:23px; }
.zp-messages { height:calc(100% - 120px); padding:8px 18px 22px; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; font-size:12px; line-height:1.8; }
.zp-user { margin:15px 0 25px 25px; padding:10px 13px; border-radius:16px 16px 4px 16px; background:var(--zp-surface); font-size:11px; }
.zp-answer small { color:var(--zp-muted); font-size:8px; }
.zp-answer h4 { font-size:15px; font-weight:500; margin:13px 0; }
.zp-answer p { margin:0 0 18px; }
.zp-answer blockquote { padding:0 0 0 12px; margin:0; border-left:2px solid var(--zp-muted); font-size:11px; color:var(--zp-muted); }
.zp-sent>p>small { display:block; font-size:8px; color:var(--zp-muted); }
.zp-composer { display:flex; gap:7px; position:absolute; bottom:9px; left:11px; right:11px; }
.zp-composer>button { border:1px solid var(--zp-line); height:43px; background:var(--zp-surface); border-radius:24px; }
.zp-composer>button:first-of-type { width:43px; flex-shrink:0; font-size:25px; }
.zp-send { display:flex; flex:1; min-width:0; justify-content:space-between; align-items:center; padding:6px 7px 6px 14px; }
.zp-send>span { font-size:10px; color:var(--zp-muted); }
.zp-send i { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--zp-fg); color:var(--zp-bg); font-size:19px; font-style:normal; }
.zp-menu { position:absolute; bottom:53px; left:0; width:180px; background:var(--zp-surface); border:1px solid var(--zp-line); padding:6px; border-radius:15px; box-shadow:0 15px 25px #0002; transform-origin:20px bottom; }
.zp-menu button { background:transparent; border:0; text-align:left; padding:13px 10px; display:block; width:100%; font-size:11px; }
.zp-settings { position:absolute; inset:42px 0 23px; padding:8px 16px; background:var(--zp-bg); transform:translateX(100%); visibility:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1),visibility .35s; }
.zp-phone.is-settings .zp-settings { transform:translateX(0); visibility:visible; }
.zp-phone.is-settings .zp-chat { transform:translateX(-26%); opacity:.3; }
.zp-settings header { display:flex; align-items:center; gap:10px; }
.zp-settings header b { font-size:13px; font-weight:500; }
.zp-setting-art { display:flex; flex-direction:column; gap:12px; font:70px var(--font-book,serif); padding:35px 10px; }
.zp-setting-art span { font:10px var(--font-sans,sans-serif); color:var(--zp-muted); }
.zp-settings>button { display:flex; justify-content:space-between; width:100%; padding:18px 8px; background:transparent; border:0; border-top:1px solid var(--zp-line); font-size:12px; }
.zp-settings>p { color:var(--zp-muted); font-size:11px; padding:17px 8px; line-height:1.9; }
.zp-home { position:absolute; width:90px; height:4px; border-radius:5px; background:var(--zp-fg); bottom:7px; left:calc(50% - 45px); opacity:.65; }
.zp-controls { display:flex; align-items:center; justify-content:space-between; margin-top:23px; gap:8px; }
.zp-controls button { border:1px solid var(--border); border-radius:30px; background:transparent; padding:8px 12px; font-size:10px; min-height:38px; }
.zp-controls>span,.zp-disclosure { font-size:9px; color:var(--text-secondary); }
.zp-disclosure { text-align:center; margin:10px 0 0; }
.zp-demo [hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { .zp-demo *,.zp-demo *::before { transition:none; animation:none; } }
.zp-title-flight { position:absolute; left:0; top:0; z-index:5; max-width:210px; font-size:12px; line-height:1.5; font-weight:500; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.zp-answer p { white-space:pre-line; }