/* AIREST Super Sales phone (F69): same box as before; sxchat.js plays three example conversations inside it (typing, slow scroll, rewind, next).
   Moved here from home.css. Emma (W3-3) points at the phone; mirrored in Arabic by .flipar. */
.sx{position:relative;display:grid;grid-template-columns:minmax(0,310px) auto;column-gap:10px;align-items:end;justify-content:center;padding-top:8px}
.phone{position:relative;z-index:1;width:310px;max-width:100%;border-radius:30px;background:var(--ar-card);border:1px solid var(--ar-border-strong);box-shadow:0 34px 64px -30px rgba(16,24,40,.5);overflow:hidden}
.ph-top{display:flex;align-items:center;gap:10px;padding:13px 14px 13px 16px;padding-inline:16px 14px;background:linear-gradient(135deg,#2F5BFF,#5267FF);color:#fff}
.ph-top .av{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.ph-top .who{flex:1;min-width:0}
.ph-top .who b{display:block;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[lang="ar"] .ph-top .who b{line-height:1.6}
.ph-top small{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.92}
.ph-top small svg{width:15px;height:15px;padding:1px;border-radius:50%;background:#fff}
.ph-dots{flex:none;display:flex;align-items:center;gap:7px}
.ph-dots button{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s,background .25s}
.ph-dots button::before{content:"";position:absolute;inset:-9px -4px}
.ph-dots button.on{width:18px;background:#fff}
.ph-body{display:flex;flex-direction:column;gap:8px;height:330px;padding:14px;overflow-y:auto;overscroll-behavior:contain;background:var(--ar-bg);scrollbar-width:thin;scrollbar-color:var(--ar-border-strong) transparent;transition:opacity .3s}
.ph-body.out{opacity:0}
.ph-body:focus-visible{outline:2px solid var(--ar-brand);outline-offset:-2px}
.ph-body .bub{flex:none;max-width:86%;padding:7px 12px 6px;font-size:14px;line-height:1.5}
html[lang="ar"] .ph-body .bub{line-height:1.7}
.ph-body .bub time{margin-top:1px;font-size:10.5px}
.sxm{animation:sxin .35s ease-out both}
@keyframes sxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bub.ph{padding:5px 5px 6px}
.bub.ph .pic{display:flex;align-items:center;justify-content:center;width:150px;height:104px;border-radius:13px;background:radial-gradient(80% 90% at 30% 20%,#4A4E63,#1E2130);color:rgba(255,255,255,.75)}
.bub.ph .pic .i{width:30px;height:30px}
.bub.ph>span:not(.pic){display:block;padding:4px 7px 0;font-size:12.5px;color:var(--ar-text-2)}
.bub.ph time{padding-inline:7px}
.bub.lk{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;align-items:center;border:1px solid color-mix(in srgb,var(--ar-brand) 35%,transparent);background:var(--ar-card)}
.bub.lk>.i{grid-row:1/3;width:32px;height:32px;padding:7px;border-radius:10px;background:var(--ar-brand);color:#fff}
.bub.lk>span{font-weight:650;color:var(--ar-link)}
.ph-body .typing{flex:none;display:inline-flex;align-items:center;gap:8px;align-self:flex-end;font-size:12.5px;color:var(--ar-text-3);animation:sxin .25s ease-out both}
.typing .dots{display:inline-flex;gap:4px;padding:10px 13px;border-radius:14px;background:var(--ar-brand-faint)}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--ar-brand);animation:td 1.2s infinite}
.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.sx .fig{position:relative;height:300px;width:auto;max-width:none;margin-inline-start:-16px;filter:drop-shadow(0 18px 22px rgba(16,24,40,.2))}
html[lang="ar"] .flipar{transform:scaleX(-1)}
.sx .cap{grid-column:1/-1}
@media (min-width:1800px){.sx{grid-template-columns:minmax(0,340px) auto}.phone{width:340px}.ph-body{height:362px}.sx .fig{height:330px}}
/* F69: on wide screens the phone travels with the reader beside the long text column, so the card never shows a big empty area */
@media (min-width:901px){.ss-card{grid-template-columns:minmax(0,1fr) auto}.ss-card>.sx{position:sticky;top:max(88px,calc(50vh - 230px));align-self:start}}
@media (min-width:901px) and (max-width:1240px){.sx{grid-template-columns:310px auto}.sx .fig{height:220px}}
@media (min-width:901px) and (max-width:1100px){.sx .fig{display:none}}
@media (max-width:900px){.sx{grid-template-columns:minmax(0,290px) auto;column-gap:4px}.sx .fig{height:220px}.ph-body{height:310px;padding:12px}}
@media (max-width:560px){.sx{grid-template-columns:minmax(0,330px)}.sx .fig{display:none}.phone{width:100%}}
@media (prefers-reduced-motion:reduce){.sxm,.ph-body .typing,.typing .dots i{animation:none}.ph-body{transition:none}}