/* Homepage explainer stage: a MacBook playing an animated product story.
   Everything inside #sx-canvas is laid out in LOGICAL 1440x900 px and scaled by --sx-scale. */

.sx-stage { --sx-display: var(--display, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif); --sx-navy: #0B2440; position: relative; width: calc(100% - 2 * clamp(20px, 5vw, 48px)); max-width: 1100px; margin: clamp(56px, 8vw, 96px) auto 0; }
.sx-stage svg, .sx-stage img { max-width: none; }
.sx-stage button { font-family: var(--sans); }

/* ---------- Device ---------- */
.sx-device { position: relative; width: 100%; }
.sx-bezel { position: relative; padding: 1.15% 1.15% 1.35%; background: #0c0e12; border-radius: 22px 22px 6px 6px; box-shadow: 0 0 0 1.5px #2b2f38 inset, 0 0 0 1px rgba(11,36,64,.35), 0 50px 110px rgba(11,36,64,.34), 0 18px 40px rgba(11,36,64,.2); }
.sx-cam-dot { position: absolute; left: 50%; top: .52%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1d2330; box-shadow: 0 0 0 1px #262c3a inset; }
.sx-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #a9cdf0; }
.sx-canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; overflow: hidden; transform: scale(var(--sx-scale, .7)); transform-origin: 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.3; color: #17283d; text-align: left; -webkit-font-smoothing: antialiased; letter-spacing: 0; }
.sx-canvas * { box-sizing: border-box; }
.sx-base { position: relative; height: 15px; margin: 0 -3.2%; border-radius: 0 0 16px 16px / 0 0 14px 14px; background: linear-gradient(180deg, #e9ecf1 0%, #cdd2da 55%, #b4bac4 100%); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 34px rgba(11,36,64,.22); }
.sx-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 17%; height: 6px; margin-left: -8.5%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #aeb4be, #c4c9d1); }
.sx-base::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #9aa1ad; opacity: .6; }

/* ---------- Layers ---------- */
#sx-wallpaper { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; object-fit: cover; object-position: 50% 72%; z-index: 0; }
#sx-menubar { position: absolute; left: 0; top: 0; width: 1440px; height: 30px; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); font-size: 13px; color: #2c3b4f; box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.sx-mb-left, .sx-mb-right { display: flex; align-items: center; gap: 18px; }
.sx-mb-strong { font-weight: 650; color: #17283d; }
.sx-mb-right { gap: 15px; }
#sx-menubar-screencap { width: 16px; height: 16px; border-radius: 4px; display: block; }
.sx-mb-clock { font-variant-numeric: tabular-nums; font-weight: 500; }

#sx-dock { position: absolute; left: 559px; top: 816px; width: 322px; height: 76px; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 26px; background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 10px 30px rgba(11,36,64,.2); }
.sx-dock-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 10px rgba(11,36,64,.25); }
.sx-dock-icon svg, .sx-dock-icon img { display: block; width: 56px; height: 56px; border-radius: 14px; }

.sx-win { position: absolute; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2.5px #0B2440, 0 8px 0 2.5px rgba(11,36,64,.85), 0 34px 80px rgba(11,36,64,.34); }
.sx-titlebar { position: relative; height: 40px; display: flex; align-items: center; background: #F3F5F8; border-bottom: 1px solid #E1E6ED; }
.sx-lights { display: flex; gap: 8px; padding-left: 15px; position: relative; z-index: 2; }
.sx-light { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: 0 0 0 .5px rgba(0,0,0,.15) inset; }
.sx-l-r { background: #FF5F57; } .sx-l-y { background: #FEBC2E; } .sx-l-g { background: #28C840; }
.sx-title { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--sx-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #0B2440; }

/* ---------- Browser + miniature hero (a faithful miniature of the intro hero) ---------- */
#sx-win-browser { left: 170px; top: 70px; width: 1100px; height: 690px; z-index: 10; }
.sx-url { position: absolute; left: 50%; top: 8px; width: 340px; height: 24px; margin-left: -170px; border-radius: 8px; background: #E5EAF1; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: #44566b; }
#sx-browser-content { position: relative; width: 100%; height: 650px; overflow: hidden; background: #a9cdf0 url("/assets/img/peaks-sea-800.jpg") 50% 64% / cover no-repeat; background-image: url("/assets/img/cloud-drift.webp"), image-set(url("/assets/img/peaks-sea-800.webp") type("image/webp"), url("/assets/img/peaks-sea-800.jpg") type("image/jpeg")); background-repeat: repeat-x, no-repeat; background-position: 0 106%, 50% 64%; background-size: 1700px auto, cover; }
.sx-mini-nav { position: absolute; left: 36px; right: 36px; top: 20px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.sx-mini-logo { height: 38px; width: 120px; display: block; overflow: visible; filter: drop-shadow(0 1px 0 rgba(11,36,64,.14)) drop-shadow(0 3px 6px rgba(11,36,64,.2)); }
.sx-mini-links { display: flex; align-items: center; gap: 8px; font-family: var(--sx-display); font-size: 14px; font-weight: 700; color: #0B2440; }
.sx-mini-link { padding: 8px 11px; border-radius: 11px; background: rgba(255,255,255,.7); }
.sx-mini-signup { background: #1E66B8; color: #fff; padding: 8px 14px; border-radius: 12px; border: 2.5px solid #0B2440; box-shadow: 0 3px 0 #0B2440; rotate: 2deg; }
#sx-mini-copy { position: absolute; left: 0; right: 0; top: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--sx-display); color: #0B2440; }
.sx-mini-h1 { font-weight: 800; font-size: 82px; line-height: .95; letter-spacing: -.05em; }
.sx-mini-sticker { margin-top: 11px; display: inline-flex; align-items: center; gap: 14px; background: #fff; border-radius: 20px; padding: 5px 22px 11px 18px; rotate: -3deg; box-shadow: 0 5px 0 rgba(11,36,64,.16), 0 14px 30px rgba(11,36,64,.22); font-weight: 800; font-size: 82px; line-height: 1; letter-spacing: -.05em; }
.sx-mini-dot { width: 43px; height: 43px; border-radius: 50%; background: #FF4A2E; flex: none; box-shadow: inset -5px -6px 0 rgba(0,0,0,.12), inset 6px 6px 0 rgba(255,255,255,.18); }
.sx-mini-sub { margin-top: 20px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.84); padding: 6px 13px; border-radius: 999px; rotate: 1deg; }
.sx-mini-sub span { color: #1E66B8; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- Screencap app window ---------- */
#sx-app-screencap { position: absolute; left: 1060px; top: 38px; width: 332px; height: 398px; z-index: 60; box-sizing: border-box; border-radius: 14px; padding: 10px 12px 0; overflow: hidden; isolation: isolate; background-color: #dcebfa; background-image: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)), url("/assets/img/peaks-sea-800.jpg"); background-image: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)), image-set(url("/assets/img/peaks-sea-800.webp") type("image/webp"), url("/assets/img/peaks-sea-800.jpg") type("image/jpeg")); background-size: auto, cover; background-position: center, center 72%; background-repeat: no-repeat; border: 1px solid rgba(11,36,64,.22); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 24px 60px rgba(11,36,64,.34), 0 6px 16px rgba(11,36,64,.16); }
/* The app's two drifting cloud layers (the same strips the Mac app uses; empty edges, so they tile). */
#sx-app-screencap::before, #sx-app-screencap::after { content: ""; position: absolute; z-index: -1; left: 0; pointer-events: none; background-repeat: repeat-x; }
#sx-app-screencap::before { top: 2%; height: 45%; width: 280%; background-image: url("/assets/img/sc-drift-top.webp"); background-size: 50% auto; background-position: 0 0; opacity: .75; animation: sx-sc-drift 280s linear infinite; }
#sx-app-screencap::after { bottom: -4%; height: 50%; width: 340%; background-image: url("/assets/img/sc-drift-bottom.webp"); background-size: 50% auto; background-position: 0 100%; opacity: .85; animation: sx-sc-drift 180s linear infinite reverse; }
@keyframes sx-sc-drift { to { transform: translate3d(-50%, 0, 0); } }
.sx-sc-top { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 3px; }
.sx-sc-tl, .sx-sc-tr { display: flex; align-items: center; }
.sx-sc-tl { gap: 11px; }
.sx-sc-tr { gap: 4px; }
.sx-sc-close { width: 13px; height: 13px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.sx-sc-logo { margin: 14px 0 16px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 4px; }
.sx-sc-logo-svg { height: 37px; width: 120px; display: block; margin-top: -38px; overflow: visible; filter: drop-shadow(0 1px 0 rgba(11,36,64,.14)) drop-shadow(0 3px 6px rgba(11,36,64,.2)); }
.sx-sc-modes { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset; }
.sx-sc-info { position: absolute; left: -2px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #16191F; color: #fff; font: 700 9px/14px var(--sans); text-align: center; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.sx-mode { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); }
.sx-mode-sel { background: #CFD3D9; box-shadow: 0 0 0 2.5px #3B82F6; }
.sx-sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sx-sc-card { height: 56px; border-radius: 9px; display: flex; overflow: hidden; background: rgba(255,255,255,.93); border: 1px solid rgba(11,36,64,.1); color: #1d2129; }
.sx-sc-soft { background: rgba(255,255,255,.52); border-color: rgba(255,255,255,.7); }
.sx-sc-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 500; }
.sx-sc-chev { width: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(11,36,64,.1); }
.sx-sc-chev-on { background: rgba(11,36,64,.09); }
.sx-sc-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.sx-sc-row { height: 40px; box-sizing: border-box; border-radius: 9px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; font-size: 15.5px; color: #1d2129; }
.sx-sc-label { flex: 1; display: block; }
.sx-pill { min-width: 40px; height: 24px; padding: 0 9px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #7b818b; background: rgba(11,36,64,.07); }
.sx-lab-on { display: none; }
.sx-on-state .sx-lab-off { display: none; }
.sx-on-state .sx-lab-on { display: inline; }
.sx-on-state .sx-pill { background: #3B82F6; color: #fff; }

/* ---------- Countdown ---------- */
#sx-countdown { position: absolute; left: 520px; top: 270px; width: 400px; height: 360px; z-index: 70; pointer-events: none; }
.sx-count { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; background: #fff; border: 5px solid #0B2440; display: flex; align-items: center; justify-content: center; font-family: var(--sx-display); font-weight: 800; font-size: 150px; line-height: 1; letter-spacing: -.04em; color: #0B2440; padding-bottom: 6px; box-shadow: 0 10px 0 #0B2440, 0 26px 50px rgba(11,36,64,.3); }

/* ---------- Recording bar (navy sticker pill) ---------- */
#sx-recbar { position: absolute; left: 560px; top: 728px; width: 320px; height: 56px; z-index: 55; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 20px; border-radius: 18px; background: #0B2440; border: 3px solid #fff; box-shadow: 0 6px 0 rgba(11,36,64,.5), 0 16px 36px rgba(11,36,64,.38); color: #fff; font-family: var(--sx-display); rotate: -1.5deg; }
.sx-rec-dot { position: relative; width: 13px; height: 13px; border-radius: 50%; background: #FF4A2E; flex: none; box-shadow: 0 0 10px #FF4A2E; animation: sx-blink-dot 1.2s steps(2, start) infinite; }
.sx-rec-label { font-weight: 800; font-size: 18px; letter-spacing: .04em; }
#sx-rec-timer { flex: 1; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sx-rec-pause { opacity: .8; margin-right: 4px; }
#sx-rec-stop { width: 38px; height: 38px; border-radius: 12px; background: #FF4A2E; border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; flex: none; }
#sx-rec-stop span { width: 13px; height: 13px; border-radius: 3px; background: #fff; display: block; }

/* ---------- Camera bubble ---------- */
#sx-camera { position: absolute; left: 48px; top: 620px; width: 190px; height: 190px; z-index: 50; }
.sx-cam-disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #F1E4D6; box-shadow: 0 7px 0 rgba(11,36,64,.22), 0 16px 40px rgba(11,36,64,.35); }
/* The webcam: six codex-made frames of one woman in a sprite (closed smile, ah, eh, oo, open smile,
   blink). Idle she blinks now and then; talking steps through mouth shapes with a gentle sway. */
.sx-cam-face { position: absolute; inset: -4px; background: #E9E4DC url("/assets/img/cam-face.webp") 0 0 / 600% 100% no-repeat; animation: sx-face-idle 4.6s step-end infinite; }
.sx-talking .sx-cam-face { animation: sx-face-talk 3.1s step-end infinite, sx-face-sway 3.4s ease-in-out infinite alternate; }
@keyframes sx-face-idle { 0% { background-position-x: 0%; } 92% { background-position-x: 100%; } 95% { background-position-x: 0%; } }
@keyframes sx-face-talk {
  0% { background-position-x: 20%; } 6% { background-position-x: 0%; } 11% { background-position-x: 40%; } 17% { background-position-x: 60%; }
  23% { background-position-x: 20%; } 29% { background-position-x: 0%; } 34% { background-position-x: 80%; } 41% { background-position-x: 40%; }
  47% { background-position-x: 0%; } 52% { background-position-x: 20%; } 58% { background-position-x: 60%; } 64% { background-position-x: 0%; }
  70% { background-position-x: 40%; } 76% { background-position-x: 20%; } 82% { background-position-x: 100%; } 86% { background-position-x: 0%; }
  91% { background-position-x: 80%; } 97% { background-position-x: 40%; }
}
@keyframes sx-face-sway { from { transform: translate(-1px, 0) scale(1.03) rotate(-.7deg); } to { transform: translate(1px, -1px) scale(1.04) rotate(.7deg); } }
#sx-camera-ring { position: absolute; inset: -2px; border-radius: 50%; border: 3px solid rgba(63,143,232,.75); opacity: 0; pointer-events: none; }
.sx-talking #sx-camera-ring, .sx-talking#sx-camera #sx-camera-ring { animation: sx-ring 1.1s ease-out infinite; }

/* ---------- Spreadsheet ---------- */
#sx-win-sheet { left: 150px; top: 60px; width: 1040px; height: 640px; z-index: 20; }
.sx-sheet-tools { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fff; border-bottom: 1px solid #E5E9EE; }
.sx-tb { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; color: #3c4a5c; background: #F3F5F8; }
.sx-tb-sep { width: 1px; height: 18px; background: #DDE2E8; margin: 0 8px; }
.sx-cellref { width: 56px; height: 26px; border: 1px solid #DDE2E8; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #3c4a5c; }
.sx-fx { font-style: italic; font-weight: 500; font-size: 15px; color: #7a8796; padding: 0 4px; }
.sx-formula { flex: 1; height: 26px; border: 1px solid #DDE2E8; border-radius: 6px; }
.sx-sheet-body { display: flex; height: 562px; background: #fff; }
.sx-grid-wrap { width: 718px; flex: none; overflow: hidden; border-right: 1px solid #E5E9EE; }
.sx-grid { border-collapse: collapse; table-layout: fixed; width: 718px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sx-grid th, .sx-grid td { height: 41px; padding: 0 12px; border: 1px solid #E3E8ED; text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden; color: #1d2d40; }
.sx-grid thead th { height: 28px; background: #F3F5F7; color: #6c7a89; font-size: 12.5px; font-weight: 500; text-align: center; border-top: 0; }
.sx-grid tbody th { background: #F3F5F7; color: #6c7a89; font-size: 12.5px; font-weight: 500; text-align: center; padding: 0; border-left: 0; }
.sx-grid td.n { text-align: right; }
.sx-grid tr.sx-hdr td { background: #E7F4EC; font-weight: 600; color: #145c3d; }
.sx-grid td.sx-note { color: #6c7a89; }
.sx-grid tr.sx-total td { font-weight: 650; border-top: 1.5px solid #9fcdb5; background: #F6FBF8; }
.sx-grid td.sx-cell.sx-active { outline: 2px solid #1F8F5F; outline-offset: -2px; background: #fff; }
.sx-chart { flex: 1; margin: 18px 18px 0 18px; height: 400px; border-radius: 14px; border: 1px solid #E3E8ED; background: #fff; box-shadow: 0 6px 18px rgba(11,36,64,.06); padding: 16px 18px 14px; display: flex; flex-direction: column; }
.sx-chart-title { font-family: var(--sx-display); font-size: 17px; font-weight: 700; color: #1d2d40; }
.sx-chart-sub { font-size: 12.5px; color: #7a8796; margin-top: 2px; }
.sx-plot { position: relative; margin-top: 16px; height: 280px; background: repeating-linear-gradient(180deg, #E8EDF2 0 1px, transparent 1px 70px); border-bottom: 1px solid #C9D2DC; }
.sx-bars { position: absolute; inset: 0 6px; display: flex; align-items: flex-end; justify-content: space-between; }
.sx-bar { display: block; width: 34px; height: calc(var(--h, 0) * 1%); border-radius: 6px 6px 0 0; background: #2FA877; }
.sx-bar:nth-child(odd) { background: #1F8F5F; }
.sx-bar-labels { display: flex; justify-content: space-between; padding: 8px 6px 0 6px; font-size: 13px; font-weight: 500; color: #6c7a89; }
.sx-bar-labels span { width: 34px; text-align: center; }

/* ---------- Notifications ---------- */
.sx-notify { position: absolute; left: 1040px; top: 46px; width: 370px; z-index: 80; display: flex; gap: 12px; padding: 13px 16px; border-radius: 18px; background: #fff; box-shadow: 0 6px 0 rgba(11,36,64,.16), 0 18px 40px rgba(11,36,64,.22); rotate: 1.5deg; }
#sx-notify-upload { height: 96px; rotate: -1.5deg; }
#sx-notify-view { height: 84px; }
.sx-notify img { width: 42px; height: 42px; border-radius: 11px; flex: none; margin-top: 2px; }
.sx-n-text { flex: 1; min-width: 0; }
.sx-n-title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: var(--sx-display); font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #0B2440; white-space: nowrap; }
.sx-n-time { font-family: var(--sans); font-size: 12px; font-weight: 400; color: #5d6d80; letter-spacing: 0; }
.sx-n-body { margin-top: 2px; font-size: 13.5px; color: #34475c; }
.sx-n-link { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: #1E66B8; }

/* ---------- Chat ---------- */
#sx-win-chat { left: 290px; top: 70px; width: 860px; height: 700px; z-index: 30; }
.sx-chat-body { display: flex; height: 660px; }
.sx-chat-side { width: 220px; flex: none; background: #F4F6F9; border-right: 1px solid #E3E8EE; padding: 12px 10px; }
.sx-chat-search { height: 32px; border-radius: 9px; background: #E7ECF2; color: #8794a4; font-size: 13.5px; display: flex; align-items: center; padding: 0 12px; margin-bottom: 10px; }
.sx-contact { height: 56px; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 0 9px; }
.sx-contact-sel { background: #DCEBFA; }
.sx-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--sx-display); font-size: 13px; font-weight: 700; }
.sx-av-sm { width: 30px; height: 30px; font-size: 11.5px; }
.sx-ct { min-width: 0; display: flex; flex-direction: column; }
.sx-ct b { font-family: var(--sx-display); font-size: 15px; font-weight: 700; color: #14263b; }
.sx-ct small { font-size: 12px; color: #7a8796; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.sx-chat-head { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #EDF0F4; }
.sx-chat-head b { font-family: var(--sx-display); font-size: 17px; font-weight: 700; color: #14263b; }
.sx-chat-head small { font-size: 12.5px; color: #7a8796; margin-left: -4px; }
.sx-online { width: 8px; height: 8px; border-radius: 50%; background: #2DBE6C; margin-left: -2px; }
#sx-chat-messages { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px 22px; }
.sx-msg { display: flex; }
.sx-msg.sx-out { justify-content: flex-end; }
/* Chat messages take no space until they arrive, so the thread scrolls up like a real chat. */
.sx-playing #sx-chat-messages .sx-dyn:not(.sx-on), #sx-chat-typing:not(.sx-on) { display: none; }
.sx-typing { display: flex; gap: 5px; align-items: center; height: 41px; box-sizing: border-box; padding: 0 16px; }
.sx-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8a97a8; animation: sx-typing 1.1s ease-in-out infinite; }
.sx-typing i:nth-child(2) { animation-delay: .15s; }
.sx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-typing { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -4px; opacity: 1; } }
.sx-bubble { max-width: 400px; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; }
.sx-in .sx-bubble { background: #EDF0F4; color: #17283d; border-bottom-left-radius: 6px; }
.sx-out .sx-bubble { background: #2F7BEA; color: #fff; border-bottom-right-radius: 6px; padding: 8px; }
.sx-sent-text { padding: 4px 8px 0; }
.sx-sent-link { padding: 1px 8px 8px; text-decoration: underline; text-underline-offset: 2px; color: #fff; }
.sx-preview { width: 330px; border-radius: 12px; overflow: hidden; background: #fff; color: #17283d; }
.sx-pv-thumb { position: relative; width: 330px; height: 148px; overflow: hidden; }
.sx-pv-thumb > svg { position: absolute; left: 0; top: 0; width: 330px; height: 148px; }
.sx-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(11,36,64,.3); padding-left: 2px; }
.sx-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(11,36,64,.78); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.sx-pv-meta { padding: 9px 12px 10px; }
.sx-pv-title { font-family: var(--sx-display); font-size: 15.5px; font-weight: 700; color: #14263b; }
.sx-pv-host { font-size: 12.5px; color: #7a8796; margin-top: 1px; }
.sx-composer { height: 72px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-top: 1px solid #EDF0F4; }
#sx-chat-input { position: relative; flex: 1; height: 42px; border-radius: 21px; background: #F1F4F8; border: 1px solid #E3E8EE; display: flex; align-items: center; padding: 0 16px; font-size: 14px; color: #17283d; white-space: nowrap; overflow: hidden; }
#sx-chat-input-text { white-space: pre; }
.sx-caret { width: 1.5px; height: 18px; background: #2F7BEA; margin-left: 1px; animation: sx-caret 1.06s step-end infinite; flex: none; }
.sx-placeholder { position: absolute; left: 20px; color: #8794a4; }
#sx-chat-input-text:not(:empty) ~ .sx-placeholder { display: none; }
#sx-chat-send { width: 42px; height: 42px; border-radius: 50%; background: #2F7BEA; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 12px rgba(47,123,234,.4); }

/* ---------- Cursor ---------- */
#sx-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 200; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(11,36,64,.35)); }
#sx-cursor > svg { position: absolute; left: 0; top: 0; display: block; }
.sx-ripple { position: absolute; left: 4px; top: 3px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(30,102,184,.7); background: rgba(63,143,232,.2); opacity: 0; transform: scale(.4); pointer-events: none; }

/* ---------- States ---------- */
/* Rest state (the final frame): only chat, its messages and the "viewed" notification are shown. */
#sx-stage .sx-pre { opacity: 0; visibility: hidden; pointer-events: none; }
#sx-stage .sx-dyn.sx-on { opacity: 1; visibility: visible; }
.sx-playing .sx-dyn:not(.sx-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.sx-dyn { transition: none; }

/* ---------- Controls ---------- */
.sx-controls { display: flex; justify-content: center; gap: 12px; margin-top: 30px; position: relative; }
.sx-controls button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 2.5px solid #0B2440; border-radius: 14px; background: #fff; color: #0B2440; font: 700 15px/1 var(--sx-display); cursor: pointer; box-shadow: 0 4px 0 #0B2440; transition: transform .12s ease, box-shadow .12s ease; }
.sx-controls button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #0B2440; }
.sx-controls button:active { transform: translateY(2px); box-shadow: 0 2px 0 #0B2440; }
.sx-controls button:focus-visible { outline: 3px solid #1E66B8; outline-offset: 3px; }
.sx-controls button svg { flex: none; }
.sx-playing #sx-replay { display: none; }

/* ---------- Keyframes ---------- */
@keyframes sx-ring { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes sx-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes sx-blink-dot { to { visibility: hidden; } }
@keyframes sx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sx-cam-face, .sx-talking .sx-cam-face, .sx-caret, .sx-rec-dot, .sx-talking #sx-camera-ring { animation: none !important; }
}

/* Takeover (intro layout): the stage is out of flow at the hero's top left (home.css) and hidden; while the
   takeover runs it is shown and the device is positioned inside it, absolutely, in viewport terms. */
html.sx-intro .home-hero .sx-stage.sx-takeover { visibility: visible; }
.sx-takeover .sx-device { will-change: transform; }