/* Interactive product preview. Solid surfaces, contained scrolling, real controls. */
.native-preview .phone-screen{display:flex;flex-direction:column}
.native-preview .system-bar{flex:none}
.native-preview .native-content{height:auto;flex:1;min-height:0;padding-bottom:7px}
.native-preview .native-header{margin-bottom:15px}
.native-preview .native-tabs{position:relative;inset:auto;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 7px 5px;gap:2px;min-height:61px}
.native-preview .native-tabs>button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:48px;padding:7px 3px;border-radius:17px;background:#0d0d0d;font:600 10px/1.3 var(--font);color:var(--surface-muted)}
.native-preview .native-tabs>button.selected,.native-preview[data-platform=android] .native-tabs>button.selected{background:#292929 var(--surface-selected);color:var(--surface-text);padding:7px 3px;margin:0;border-radius:17px}
.native-preview .native-tabs>button .icon{width:19px;height:19px}
.native-preview .home-indicator{position:relative;inset:auto;height:22px;flex:none;background:#0d0d0d}
.native-preview [hidden]{display:none!important}
.native-preview button,.native-preview textarea,.native-preview select{touch-action:manipulation}
.native-preview button:focus-visible,.native-preview textarea:focus-visible,.native-preview select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.native-preview h3:focus,.native-preview [tabindex="-1"]:focus{outline:none}
.native-preview .native-status{width:100%;text-align:left;min-height:44px}
.native-preview #preview-spark,.native-preview #preview-back,.native-preview .timer-toggle{min-height:44px}
.native-preview #preview-back{min-width:44px}
.phone-page{flex:1;min-height:0;min-width:0;background:#000;color:var(--surface-text);padding:0 1px 10px}
.phone-scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#555555 #111111;-webkit-overflow-scrolling:touch;scroll-padding-block:10px}
.phone-page-heading{margin:0 0 19px}
.phone-kicker{display:block;font-size:8px;line-height:1.7;letter-spacing:.09em;color:var(--surface-muted);font-weight:650;margin-bottom:7px}
.phone-page-heading h3{font-size:29px;line-height:1.15;letter-spacing:-1.15px;color:var(--surface-text);overflow-wrap:anywhere}
.phone-page-heading p{font-size:11px;line-height:1.75;color:var(--surface-muted);margin-top:9px;max-width:34ch}
.phone-primary,.phone-secondary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;padding:11px 13px;border-radius:999px;font:650 11px/1.45 var(--font);text-align:center}
.phone-primary{background:var(--red);color:#080808;border:1px solid var(--red)}
.phone-secondary{background:#1b1b1b var(--surface-raised);color:var(--surface-text);border:1px solid var(--surface-border)}
.phone-primary .icon,.phone-secondary .icon{width:15px;height:15px}
.phone-primary:disabled{background:#141414 var(--surface-card);color:var(--surface-muted);border-color:var(--surface-border)}
.phone-text-button{display:flex;align-items:center;justify-content:center;min-height:44px;background:#000;color:var(--surface-muted);font-size:11px;width:100%;padding:10px;text-decoration:underline;text-underline-offset:4px}
.phone-local-note{font-size:9px;line-height:1.7;color:var(--surface-muted);margin:16px 2px 5px;text-align:center}
.phone-ping{padding:15px;border:1px solid var(--surface-border);border-radius:24px;background:#141414 var(--surface-card);margin-bottom:13px}
.phone-ping-filter{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--surface-border);padding:4px;border-radius:999px;background:#141414 var(--surface-card);margin-bottom:15px;gap:4px}
.phone-ping-filter button{min-height:44px;border-radius:999px;background:#181818;color:var(--surface-text);font-size:11px;font-weight:600}
.phone-ping-filter button[aria-pressed="true"]{background:#292929 var(--surface-selected);color:var(--surface-text)}
.phone-sent-photo{width:60px;height:60px;border-radius:19px;object-fit:cover;object-position:50% 28%}
.phone-ping-label{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:.06em;font-weight:650;color:var(--surface-muted);margin-bottom:9px}
.phone-ping-label .icon{width:12px;height:12px}
.phone-ping-opener{font-size:13px;line-height:1.65;color:var(--surface-text);font-weight:550;overflow-wrap:anywhere}
.phone-ping-person{display:flex;align-items:center;gap:12px;margin:15px 0 13px}
.phone-ping-reveal{position:relative;overflow:hidden;display:block;flex:none;width:61px;height:61px;border:1px solid var(--surface-border);border-radius:19px;padding:0;background:#1b1b1b var(--surface-raised)}
.phone-ping-reveal img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:blur(8px);transform:scale(1.18)}
.phone-ping-reveal[aria-expanded="true"] img{filter:none;transform:none}
.phone-ping-reveal>span{position:absolute;inset:19px 12px;display:grid;place-items:center;border-radius:999px;background:#1b1b1b var(--surface-raised);color:var(--surface-text);font-size:9px;font-weight:650}
.phone-ping-reveal[aria-expanded="true"]>span{display:none}
.phone-ping-person h4{margin:0;font-size:14px;line-height:1.5;font-weight:650}
.phone-ping-person p{font-size:10px;color:var(--surface-muted);line-height:1.55;margin-top:3px}
.phone-ping-actions{display:grid;grid-template-columns:.7fr 1.3fr;gap:9px}
.phone-ping-actions .phone-secondary{background:#1b1b1b var(--surface-raised)}
.phone-ping-details{font-size:10px;line-height:1.75;color:var(--surface-text);margin-top:13px;padding-top:12px;border-top:1px solid var(--surface-border)}
.phone-quick-reply{margin-top:14px;padding-top:13px;border-top:1px solid var(--surface-border)}
.phone-quick-reply label,.phone-field-label{display:block;font-size:11px;font-weight:650;color:var(--surface-text);margin-bottom:8px}
.phone-quick-reply textarea,.phone-page textarea,.phone-page select{width:100%;min-width:0;box-sizing:border-box;background:#0d0d0d;border:1px solid var(--surface-border-strong);border-radius:16px;color:var(--surface-text);padding:12px;font:500 16px/1.5 var(--font);resize:vertical;max-height:160px;scroll-margin-block:15px}
.phone-page textarea::placeholder{color:var(--surface-muted)}
.phone-page select{min-height:49px;padding-right:20px}
.phone-quick-reply .phone-primary{margin-top:10px}
.phone-quick-reply .phone-text-button{background:transparent}
.phone-quick-reply .phone-reply-chips{margin:10px 0}
.phone-empty{border:1px solid var(--surface-border);background:#141414 var(--surface-card);border-radius:25px;padding:24px 19px;text-align:center}
.phone-empty>.icon{width:30px;height:30px;color:var(--surface-muted);margin:0 auto 14px}
.phone-empty h4{font-size:17px;line-height:1.35;margin:0 0 9px;letter-spacing:-.4px}
.phone-empty p{font-size:11px;line-height:1.8;color:var(--surface-muted);margin-bottom:18px}
.phone-accepted{display:grid;gap:9px}
.phone-accepted:empty{display:none}
.phone-resume-spark{display:flex;align-items:center;gap:11px;min-height:60px;padding:12px;background:#1b1b1b var(--surface-raised);color:var(--surface-text);border:1px solid var(--surface-border);border-radius:20px;text-align:left;width:100%}
.phone-resume-spark>.icon{width:20px;height:20px;color:var(--surface-muted)}
.phone-resume-spark strong,.phone-resume-spark small{display:block}.phone-resume-spark strong{font-size:12px}.phone-resume-spark small{font-size:10px;color:var(--surface-muted);margin-top:3px}
.phone-afterglow-note{display:flex;gap:12px;align-items:center;padding:15px;background:#1b1b1b var(--surface-raised);border:1px solid var(--surface-border);border-radius:22px;margin-bottom:20px;color:var(--surface-muted);font-size:10px;line-height:1.8}
.phone-afterglow-note>.icon{width:23px;height:23px;color:var(--surface-muted)}.phone-afterglow-note strong{font-weight:600;color:var(--surface-text)}
#phone-thread-list{display:grid;gap:11px}
.phone-thread{display:grid;grid-template-columns:51px minmax(0,1fr) 14px;align-items:center;gap:11px;border:1px solid var(--surface-border);background:#141414 var(--surface-card);border-radius:23px;padding:13px 12px;width:100%;min-height:87px;text-align:left}
.phone-thread img{width:51px;height:58px;object-fit:cover;object-position:50% 28%;border-radius:16px}
.phone-thread strong{display:block;color:var(--surface-text);font-size:14px;font-weight:650}
.phone-thread small{display:block;font-size:10px;line-height:1.65;color:var(--surface-muted);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.phone-thread>.icon{width:14px;height:14px;color:var(--surface-muted)}
.phone-chat-page{display:flex;flex-direction:column;padding-bottom:0}
.phone-chat-heading{display:flex;align-items:center;gap:9px;flex:none;border-bottom:1px solid var(--surface-border);padding:0 0 12px}
.phone-icon-button{display:grid;place-items:center;background:#1b1b1b var(--surface-raised);border:1px solid var(--surface-border);border-radius:50%;width:44px;height:44px;min-width:44px;padding:0}
.phone-icon-button .icon{width:18px;height:18px}
#phone-chat-back .icon{transform:rotate(180deg)}
.phone-chat-heading img{width:41px;height:44px;border-radius:15px;object-fit:cover;object-position:50% 28%}
.phone-chat-heading h3{font-size:16px;letter-spacing:-.4px;color:var(--surface-text)}
.phone-chat-heading p{font-size:9px;line-height:1.5;margin-top:3px;color:var(--surface-muted)}
.phone-message-list{flex:1;min-height:95px;padding:15px 1px 10px;display:flex;flex-direction:column;gap:11px}
.phone-message-list .native-message{font-size:12px;line-height:1.65;max-width:89%;padding:11px 13px;flex:none;overflow-wrap:anywhere;white-space:pre-wrap}
.phone-chat-day{font-size:9px;color:var(--surface-muted);text-align:center;margin:0 0 4px}
.phone-reply-chips{display:flex;gap:7px;overflow-x:auto;flex:none;padding:4px 1px 6px;scrollbar-width:thin;scrollbar-color:#555555 #111111}
.phone-reply-chips button{background:#1b1b1b var(--surface-raised);border:1px solid var(--surface-border);color:var(--surface-text);border-radius:999px;min-height:44px;padding:8px 11px;white-space:nowrap;font:550 10px/1.5 var(--font);flex:none}
.phone-message-form{display:flex;align-items:flex-end;gap:7px;padding-top:7px;flex:none}
.phone-message-form textarea{flex:1;min-height:47px;max-height:93px;resize:none;padding:10px 12px;border-radius:21px}
#phone-message-send{background:var(--red);color:#101010;border-color:var(--red);margin-bottom:2px}
#phone-message-send:disabled{background:#141414 var(--surface-card);color:var(--surface-muted);border-color:var(--surface-border)}
.phone-chat-page>.phone-local-note{flex:none;font-size:8px;margin:7px 0 2px}
.phone-profile-card{background:#141414 var(--surface-card);border:1px solid var(--surface-border);padding:21px 15px 16px;border-radius:27px;text-align:center}
.phone-profile-portrait{position:relative;padding-bottom:13px;margin-bottom:10px}
.phone-profile-portrait img{width:93px;height:93px;object-fit:cover;object-position:50% 28%;border-radius:32px;border:2px solid var(--surface-border-strong);margin:auto}
.phone-profile-portrait>span{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid var(--surface-border);background:#1b1b1b var(--surface-raised);color:var(--surface-text);font-size:8px;border-radius:999px;padding:5px 9px}
.phone-profile-card h4{font-size:23px;letter-spacing:-.7px;line-height:1.3;margin:0 0 7px}
.phone-profile-city{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:var(--surface-muted)}.phone-profile-city .icon{width:11px;height:11px}
#phone-profile-status{font-size:13px;line-height:1.65;color:var(--surface-text);margin:18px 0 12px;overflow-wrap:anywhere}
.phone-intention{display:inline-block;font-size:9px;line-height:1.5;color:var(--surface-text);padding:6px 10px;background:#1b1b1b var(--surface-raised);border:1px solid var(--surface-border);border-radius:999px;margin-bottom:18px}
.phone-setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 4px 8px}.phone-setting strong{font-size:12px;color:var(--surface-text)}.phone-setting p{font-size:10px;line-height:1.65;color:var(--surface-muted);margin-top:4px}
#phone-visible{display:grid;place-items:center;flex:none;width:54px;min-height:44px;background:#000;padding:0}
#phone-visible>span{width:47px;height:28px;border-radius:999px;background:#292929 var(--surface-selected);border:1px solid var(--surface-border);position:relative}
#phone-visible>span::after{content:"";position:absolute;width:20px;height:20px;top:3px;left:22px;border-radius:50%;background:#f3f3f3;transition:left .25s cubic-bezier(.22,1,.36,1)}
#phone-visible[aria-checked="false"]>span{background:#101010;border-color:var(--surface-border)}
#phone-visible[aria-checked="false"]>span::after{left:3px}
.phone-profile-feedback{font-size:11px;color:var(--surface-text);line-height:1.6;text-align:center;margin-top:8px;min-height:0}
.phone-profile-feedback:empty{display:none}
.phone-field-help{display:flex;justify-content:space-between;gap:10px;font-size:9px;line-height:1.7;color:var(--surface-muted);margin:7px 0 9px}
.phone-field-label:not(:first-child){margin-top:20px}
#phone-profile-form .phone-primary{margin-top:18px}
.phone-inline-error{font-size:11px;line-height:1.65;color:var(--surface-text);background:#1b1b1b var(--surface-raised);border:1px solid var(--surface-border);border-radius:14px;padding:11px;margin-top:12px}
#phone-keep-talking{margin:12px 0 5px}
@media(max-width:360px){.phone-page-heading h3{font-size:26px}.phone-ping{padding:13px}.phone-ping-opener{font-size:12px}.phone-ping-person{gap:10px}.phone-page-heading p{font-size:10px}.phone-chat-heading{gap:7px}.phone-chat-heading img{width:35px;height:40px}.phone-chat-heading p{font-size:8px}.phone-thread{gap:9px;padding:11px}.phone-primary,.phone-secondary{font-size:10px}.native-preview .native-tabs>button{font-size:9px}}
@media(prefers-reduced-motion:reduce){#phone-visible>span::after{transition:none}}
.motion-paused #phone-visible>span::after{transition:none}