/* Phone-shaped, fixed app viewport. Conversation alone scrolls. */
.demo.mode-app{width:100%;max-width:408px;height:790px;max-height:none;margin-inline:auto;display:flex;flex-direction:column;border:7px solid #343438;border-radius:52px;background:#151515;box-shadow:0 0 0 1px #767679,0 30px 65px #0004;transform:none;isolation:isolate;padding:0 0 16px;position:relative}
.demo.mode-app:after{content:"";position:absolute;bottom:7px;left:35%;width:30%;height:4px;border-radius:10px;background:#a6a4a1;pointer-events:none}
.phone-status{height:47px;padding:15px 23px 0;display:flex;align-items:flex-start;justify-content:space-between;font-size:12px;font-weight:700;position:relative;flex-shrink:0;color:#efefeb}
.phone-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:100px;height:26px;background:#050505;border-radius:30px}.phone-signal{display:flex;align-items:center;gap:6px;font-size:10px}.phone-battery{width:20px;height:10px;border:1px solid currentColor;border-radius:3px;display:inline-block;position:relative}.phone-battery:after{content:"";position:absolute;inset:2px;background:currentColor;border-radius:1px}
.demo.mode-app .demohead{display:flex;align-items:center;justify-content:center;padding:21px 12px 24px;border:0;flex-shrink:0}.demohead>img{display:block;width:112px;height:auto;filter:brightness(0) saturate(100%) invert(55%) sepia(94%) saturate(2857%) hue-rotate(359deg) brightness(102%) contrast(105%)}
.demo.mode-app .demobody{flex:1 1 0;height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:17px;padding:12px 17px 24px;background:none;scrollbar-gutter:auto;overscroll-behavior:contain}
.demo.mode-app .demobody>*{flex-shrink:0;min-width:0;max-width:100%;overflow-wrap:anywhere}.demo.mode-app .bubble{font-size:14px;line-height:1.65;max-width:91%;padding:12px 15px;margin:0;border-radius:20px}.demo.mode-app .bubble.assistant{background:transparent;color:#dfdfdc;padding-left:2px;max-width:100%}.demo.mode-app .bubble.user{background:#38322d;color:#f7e8dc;border-bottom-right-radius:6px}.demo.mode-app .conversation-label{font-size:10px;letter-spacing:.12em;color:#96938e;margin-bottom:2px}
.phone-examples{display:flex;justify-content:center;gap:6px;padding:9px 12px 3px;flex-shrink:0}.phone-examples button{background:transparent;border:1px solid #55514a;border-radius:30px;padding:8px 12px;color:#bbb6af;font-size:11px;min-height:34px}.phone-examples button[aria-pressed=true]{background:#f6a07118;border-color:#e79764;color:#f8b58d}
.demo.mode-app .demofeet{padding:12px 14px 17px;border:0;gap:7px;flex-shrink:0;align-items:center}.demo.mode-app .fakeinput{min-width:0;padding:15px 12px;border:1px solid #68635c;background:#ffffff05;color:#bdb7b0;font-size:12px;white-space:nowrap}.demo.mode-app .send{width:38px;min-width:38px;height:38px;min-height:38px;font-size:16px}.demo.mode-app .quick-access{flex-shrink:0;padding:7px 14px;background:transparent;border:0}.quick-access[hidden]{display:none!important}.quick-access .quick-title{display:none}
.trade-proposal{width:100%;overflow:visible}.trade-card{width:100%;border:1px solid #625246;border-radius:20px;padding:17px;background:#ffac7610}.trade-card>strong{font-size:14px}.trade-lines{gap:10px;margin:15px 0}.trade-lines div{font-size:13px;padding:12px}.trade-lines small{font-size:11px}.trade-card .demo-action{font-size:12px;min-height:40px;width:100%;margin:0}.demo.mode-app .listing-copy{padding:16px}.demo.mode-app .listing-copy p{font-size:13px}.demo.mode-app .listing-copy b{font-size:16px}.demo.mode-app .product-photo img{height:180px}.demo.mode-app .carousel-wrap{width:100%;overflow:hidden}.demo.mode-app .opportunity{flex-basis:91%;padding:14px}.demo.mode-app .opportunity-image{height:160px}.demo.mode-app .opportunity.more-card{min-height:310px}.demo.mode-app .opportunity strong{font-size:14px}.demo.mode-app .opportunity small{font-size:11px}.demo.mode-app .listing-date{font-size:11px}.demo.mode-app .carousel-top b{font-size:12px}.demo.mode-app .state-note{font-size:12px}.demo.mode-app .photo-controls{font-size:10px}.demo.mode-app .photo-controls button{font-size:11px}.demo.mode-app .action-row button{font-size:12px}.demoLabel{max-width:408px;margin:18px auto 0;line-height:1.6}
:root[data-theme=light] .demo.mode-app{background:#fbf8f2;border-color:#363532;box-shadow:0 0 0 1px #89847e,0 30px 65px #51402c22}:root[data-theme=light] .phone-status{color:#191917}:root[data-theme=light] .demo.mode-app .demobody{background:transparent}:root[data-theme=light] .demo.mode-app .bubble.assistant{background:transparent;color:#34332f}:root[data-theme=light] .demo.mode-app .bubble.user{background:#f1e7d9;color:#342e26}:root[data-theme=light] .demo.mode-app .fakeinput{background:#fff;color:#777269;border-color:#c7c0b5}:root[data-theme=light] .phone-examples button{color:#726b61;border-color:#d9d2c6}:root[data-theme=light] .phone-examples button[aria-pressed=true]{color:#a04715;border-color:#de986e;background:#f5e7d8}:root[data-theme=light] .trade-card{color:#34332f;background:#fff;border-color:#ded5c8}:root[data-theme=light] .trade-lines div{border-color:#dfd8cd}:root[data-theme=light] .demo.mode-app .conversation-label{color:#8a7965}
@media(max-width:520px){.demo.mode-app{max-width:390px;height:750px;border-width:5px;border-radius:44px}.demo.mode-app .demobody{padding-inline:14px}.demo.mode-app .demohead{padding:19px 12px}.hero{gap:40px}.demo.mode-app .bubble{font-size:13px}.demoLabel{font-size:11px}.phone-island{width:90px}.demo.mode-app .fakeinput{font-size:11px}}
@media(prefers-reduced-motion:reduce){.demo *{animation:none!important;scroll-behavior:auto!important}}
