/* Snappy simulator: the layout around the phone, the phone itself, and the
   sample app screens drawn inside it (also used still, in the feature sections). */

/* Layout */
.sim-stories{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}
.story-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#ECE7FB;font:600 14.5px/1.2 var(--body);cursor:pointer;transition:background .15s ease}
.story-b:hover{background:rgba(255,255,255,.14)}
.story-b[aria-pressed=true]{background:#fff;color:#2A1A5C;box-shadow:none}
.story-b .i{color:var(--pink-l)}
.story-b[aria-pressed=true] .i{color:var(--violet)}
.sim-body{display:grid;grid-template-columns:200px minmax(0,380px) minmax(0,330px);gap:clamp(20px,3.2vw,48px);align-items:start;justify-content:center}
.sim-rail{display:grid;gap:3px;position:sticky;top:92px}
.sim-rail button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 10px;border:0;border-radius:12px;background:none;color:var(--on-d-2);font:500 14.5px/1.2 var(--body);text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}
.sim-rail button:hover{background:rgba(255,255,255,.06);color:#fff}
.sim-rail .n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);font:700 12px/1 var(--body)}
.sim-rail .i{opacity:.65}
.sim-rail .now{background:rgba(255,255,255,.11);color:#fff}
.sim-rail .now .n{background:var(--grad);color:#fff}
.sim-rail .now .i{opacity:1;color:var(--pink-l)}
.sim-rail .done .n{background:rgba(167,139,250,.3);color:#EDE9FE}
.sim-stage{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.sim-ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sim-play.on{background:#fff;color:#4C1D95;box-shadow:none}
.sim-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:380px;font-size:13px;color:var(--on-d-2)}
.sim-progress>i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.sim-progress b{display:block;height:100%;width:12.5%;background:var(--grad);transition:width .4s ease}
.sim-restart{display:inline-flex;align-items:center;gap:5px;padding:6px 4px;border:0;background:none;color:var(--on-d-2);font:500 13px var(--body);cursor:pointer}
.sim-restart:hover{color:#fff}
.sim-note{position:sticky;top:92px}
.sim-kicker{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--pink-l)}
.sim-note h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.sim-note>p:not(.sim-kicker):not(.sim-try){font-size:15.5px;line-height:1.55;color:#D8D1EC}
.sim-try{margin-top:14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14px;line-height:1.5;color:#E7E1F7}
.sim-try b{color:#fff}
.sim-phase{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;color:var(--on-d-2)}
.sim-noscript{padding:24px 20px;font-size:14px;line-height:1.55;color:var(--ink)}

/* The phone */
.device{--app:#FBF9FF;position:relative;display:flex;flex-direction:column;width:100%;max-width:380px;height:clamp(620px,calc(100svh - 168px),760px);padding:10px;border-radius:50px;background:#0B0718;box-shadow:0 0 0 1.5px #3E2C78,0 0 0 8px #160F30,0 50px 100px -34px rgba(124,58,237,.75);color:var(--ink);font-family:var(--body);text-align:left;overflow:hidden}
.device[data-theme=dark]{--app:#0E0920}
.device-bar{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;height:36px;padding:2px 26px 0;border-radius:40px 40px 0 0;background:var(--app);font:600 13.5px/1 var(--body);color:var(--ink)}
.device[data-theme=dark] .device-bar{color:#fff}
.db-island{position:absolute;left:50%;top:9px;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#000}
.db-icons{display:flex;align-items:center;gap:4px}
.db-icons i{display:block;background:currentColor;border-radius:2px}
.db-icons i:nth-child(1){width:16px;height:9px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.db-icons i:nth-child(2){width:14px;height:10px;border-radius:10px 10px 2px 2px;clip-path:polygon(50% 100%,0 20%,0 0,100% 0,100% 20%)}
.db-icons i:nth-child(3){width:22px;height:11px;border-radius:3px;opacity:.9}
.device-app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:0 0 40px 40px;overflow:hidden;background:var(--app);font-size:14px;line-height:1.4}
.device-home{position:absolute;left:50%;bottom:16px;z-index:10;width:118px;height:4.5px;margin-left:-59px;border-radius:4px;background:rgba(28,18,56,.85);pointer-events:none}
.device[data-theme=dark] .device-home{background:rgba(255,255,255,.85)}
.device-toast{position:absolute;left:24px;right:24px;bottom:92px;z-index:12;padding:9px 12px;border-radius:12px;background:rgba(14,9,32,.94);color:#fff;font-size:12.5px;line-height:1.35;text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.device-toast.show{opacity:1;transform:none}

/* Still phones in the feature sections */
.feat-phone{position:relative;z-index:1;width:304px;height:624px;pointer-events:none}
.feat-phone .device{position:absolute;left:0;top:0;width:380px;max-width:none;height:780px;transform:scale(.8);transform-origin:0 0}
.feat-phone.small{width:266px;height:546px;margin-top:6px}
.feat-phone.small .device{transform:scale(.7)}

/* App basics */
.device .i{width:1.05em;height:1.05em}
.ah{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 12px;background:#fff;border-bottom:1px solid #EEE7F8}
.ah-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.1)}
.ah-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ah-t strong{font:700 15px/1.2 var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-t span{font-size:11.5px;color:#7A7190;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-dark .ah-t span{color:rgba(255,255,255,.65)}
.ah-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#F2EDFC;color:#3B1F80;cursor:pointer}
.ah-dark .ah-ic,.vf-top .ah-ic{background:rgba(255,255,255,.16);color:#fff}
.ah-sample{flex:none;padding:2px 8px;border-radius:999px;background:#FEF3C7;color:#8A4B00;font-size:10.5px;font-weight:700}
.ah-pill{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:600}
.scroll{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#D5C8F3 transparent}
.scroll>*{flex:none}
.dock{flex:none;display:grid;gap:8px;padding:10px 12px 10px;background:#fff;border-top:1px solid #EEE7F8}
.atabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);padding:6px 6px 26px;background:#fff;border-top:1px solid #EEE7F8}
.atabs span{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6E6589}
.atabs .i{width:19px;height:19px}
.atabs .on{color:#5B21B6}
.atabs em{position:absolute;top:-4px;left:calc(50% + 6px);padding:0 4px;border-radius:999px;background:#FEF3C7;color:#8A4B00;font-size:8px;font-style:normal;letter-spacing:0;text-transform:none}
.device[data-theme=dark] .atabs{background:#140E1F;border-top-color:#2A2238}
.device[data-theme=dark] .atabs span{color:#9C93B5}
.device[data-theme=dark] .atabs .on{color:#D8B4FE}
.dock-2{grid-template-columns:1fr 1fr}
.dock-hint{font-size:11.5px;color:#7A7190}
.dock-wait{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;font-size:12.5px;font-weight:600;color:#5B5275}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 0 -4px;font:700 13px/1.3 var(--head);color:#2A1A5C}
.lbl span{font:500 11px/1.3 var(--body);color:#7A7190}
.note{display:flex;gap:7px;padding:8px 10px;border-radius:12px;background:#F5F1FD;font-size:11.5px;line-height:1.4;color:#5B5275}
.note .i{flex:none;width:14px;height:14px;margin-top:1px;color:var(--violet)}
.is-new{animation:simrise .32s ease both}
@keyframes simrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tapped{animation:simtap .45s ease}
@keyframes simtap{0%{box-shadow:0 0 0 0 rgba(167,139,250,.9)}100%{box-shadow:0 0 0 14px rgba(167,139,250,0)}}

/* Buttons inside the app */
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 14px;border:0;border-radius:14px;font:600 14px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:filter .15s ease}
.abtn:hover{filter:brightness(1.05)}
.abtn-pri{background:var(--grad);color:#fff}
.abtn-soft{background:#F1EBFD;color:#4C1D95}
.abtn-glass{background:rgba(255,255,255,.14);color:#fff}
.abtn-ok{background:#DCFCE7;color:#166534}
.abtn-sm{min-height:36px;padding:7px 11px;font-size:12.5px;border-radius:12px}
.abtn-xs{min-height:30px;padding:5px 10px;font-size:11.5px;border-radius:10px}
.mini{flex:none;min-height:28px;padding:3px 10px;border:0;border-radius:8px;background:rgba(255,255,255,.18);color:#fff;font:600 11.5px var(--body);cursor:pointer}
.x-btn{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#F1EBFD;color:#4C1D95;cursor:pointer}

/* Avatars */
.av{position:relative;display:inline-block;flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#EDE7FF;box-shadow:0 0 0 2px #fff}
.av img{width:100%;height:100%;object-fit:cover}
.av-xs{width:22px;height:22px;box-shadow:none}
.av-sm{width:30px;height:30px}
.av-md{width:46px;height:46px}
.av-lg{width:76px;height:76px}
.av-sn{background:radial-gradient(circle at 40% 35%,#E9D5FF,#7C3AED)}
.av.spin{animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}

/* Chat */
.chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;background:linear-gradient(#FBF9FF,#F4EEFF);scrollbar-width:thin}
.chat-log>*{flex:none}
.mrow{display:flex;align-items:flex-end;gap:6px;max-width:92%}
.msg{padding:9px 12px;border-radius:16px;font-size:13.5px;line-height:1.42}
.msg.bot{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(40,20,90,.12);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;max-width:84%;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.msg.typing{display:flex;gap:4px;padding:12px 13px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#A79BC7;animation:dots 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.sugg{display:flex;align-items:flex-start;gap:8px;width:100%;padding:10px 12px;border:1.5px dashed #CDBDF5;border-radius:14px;background:#FAF7FF;color:#3B1F80;font:500 13px/1.42 var(--body);text-align:left;cursor:pointer}
.sugg .i{flex:none;margin-top:2px;color:var(--violet)}
.composer{display:flex;gap:6px}
.composer input{flex:1;min-width:0;height:42px;padding:0 14px;border:1.5px solid #DDD3F3;border-radius:999px;background:#fff;font-size:16px}
.composer input:focus{outline:0;border-color:var(--violet)}
.send{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--grad);color:#fff;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.col{flex-direction:column;align-items:stretch}
.reply{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border:1.5px solid #D9CCF7;border-radius:999px;background:#fff;color:#3B1F80;font:500 13px/1.3 var(--body);text-align:left;cursor:pointer}
.reply:hover{background:#F5F0FF}
.reply.on{background:#3B1F80;border-color:#3B1F80;color:#fff}
.reply.sm{min-height:28px;padding:3px 10px;font-size:11.5px}
.chips.col .reply{border-radius:14px}
.chips.col .reply .i{flex:none;color:var(--violet)}

/* Event summary */
.sumcard{overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 3px 14px -6px rgba(40,20,90,.3);border:1px solid #EEE7FA}
.sum-cover{position:relative;height:84px}
.sum-cover img{width:100%;height:100%;object-fit:cover}
.pill-mini{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:rgba(20,11,46,.75);color:#fff;font-size:11px;font-weight:600}
.sum-body{padding:4px 12px 10px}
.sum-row{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #F3EEFA;font-size:12.5px}
.sum-row span{color:#7A7190}
.sum-edit input{width:100%;min-width:0;padding:4px 8px;border:1.5px solid #DDD3F3;border-radius:8px;font:600 16px/1.3 var(--body);background:#FBF9FF}
.sum-edit input:focus{outline:0;border-color:var(--violet)}
.sum-outs{display:grid;gap:6px;padding:8px 0 2px;font-size:12px;color:#7A7190}
.sum-note{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:#5B5275}
.sum-note .i{color:var(--violet)}

/* Invite */
.evcard{display:flex;gap:10px;padding:8px;border-radius:14px;background:#fff;border:1px solid #EEE7FA}
.evcard img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.evcard div{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;color:#5B5275}
.evcard strong{font:700 14.5px/1.2 var(--head);color:var(--ink)}
.lock{display:flex;align-items:center;gap:4px;color:#6D28D9;font-weight:600}
.inv-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1.5px solid #E7DEF8;border-radius:14px;background:#fff;color:#3B1F80;font:600 12px var(--body);cursor:pointer}
.tile-btn .i{width:20px;height:20px;color:var(--violet)}
.tile-btn.on{border-color:var(--violet);background:#F5F0FF}
.linkbox{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:#F5F0FF}
.linkbox code{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#4C1D95;overflow-wrap:anywhere}
.linkbox span,.qrbox span{font-size:11.5px;color:#5B5275;line-height:1.35}
.qrbox{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:#fff;border:1px solid #EEE7FA}
.qr{flex:none;width:88px;height:88px;fill:#1C1238;background:#fff}
.perm{display:flex;flex-wrap:wrap;gap:6px}
.perm-i{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:0;border-radius:999px;background:#F1EEF6;color:#6B6480;font:600 12px var(--body);cursor:pointer}
.perm-i.on{background:#EDE4FF;color:#4C1D95}
.perm-i .i{width:13px;height:13px}
.people{display:grid;gap:4px}
.people li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;background:#fff}
.people li>div{flex:1;min-width:0;line-height:1.25}
.people b{font-size:13.5px}
.people span{display:block;font-size:11.5px;color:#7A7190}
.tick{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid #D4C6F3;border-radius:9px;background:#fff;color:transparent;cursor:pointer}
.tick.on{background:var(--violet);border-color:var(--violet);color:#fff}
.role{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:#EDE4FF;color:#4C1D95;font:600 11px/1.6 var(--body);font-style:normal;white-space:nowrap}
.role.ghost{background:#F3F1F7;color:#6B6480}
.role.ok{background:#DCFCE7;color:#166534}
.role.samp{background:#FEF3C7;color:#8A4B00}
.role .i{width:12px;height:12px}

/* Event Room */
.room-cover{position:relative;height:150px;border-radius:16px;overflow:hidden}
.room-cover>img{width:100%;height:100%;object-fit:cover}
.room-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,11,46,.05) 20%,rgba(20,11,46,.85))}
.room-cover-in{position:absolute;inset:auto 0 0;z-index:1;display:flex;flex-direction:column;gap:2px;padding:10px 12px;color:#fff;font-size:11.5px}
.room-cover-in strong{font:700 17px/1.2 var(--head)}
.live{align-self:flex-start;padding:2px 7px;border-radius:6px;background:#E11D48;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.stack{display:flex;align-items:center;margin-top:4px}
.stack .av{width:24px;height:24px;margin-right:-7px;box-shadow:0 0 0 2px #1D1142}
.stack em{font-style:normal;font-size:11.5px;margin-left:12px}
.stack.big .av{width:36px;height:36px;margin-right:-9px;box-shadow:0 0 0 2px #fff}
.room-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
.tabs{display:flex;border-bottom:1px solid #ECE6F7}
.tab{flex:1;padding:9px 2px;border:0;border-bottom:2px solid transparent;background:none;color:#7A7190;font:600 12.5px var(--body);cursor:pointer}
.tab.on{color:#4C1D95;border-color:var(--violet)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mtile{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#E9E2F7}
.mtile>img{width:100%;height:100%;object-fit:cover}
.mtile figcaption{position:absolute;left:4px;bottom:4px;display:flex;align-items:center;gap:4px;padding:2px 7px 2px 2px;border-radius:999px;background:rgba(20,11,46,.68);color:#fff;font-size:9.5px;font-weight:600}
.vbadge{position:absolute;right:4px;top:4px;display:flex;align-items:center;gap:2px;padding:1px 6px;border-radius:999px;background:rgba(20,11,46,.7);color:#fff;font-size:9.5px;font-weight:600}
.vbadge .i{width:9px;height:9px}
.alist{display:grid;gap:6px}
.alist li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;background:#fff;color:#A79BC7}
.alist img{width:50px;height:50px;border-radius:10px;object-fit:cover}
.alist div{flex:1;line-height:1.3;color:var(--ink)}
.alist b{display:block;font-size:13.5px}
.alist span{font-size:11.5px;color:#7A7190}
.feed li{display:flex;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid #F1ECF8;font-size:12.5px;line-height:1.35}
.feed p{flex:1}
.feed time{font-size:11px;color:#8A8199;white-space:nowrap}

/* Celebrate Together (dark) */
.call{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 10px 34px;color:#fff;overflow-y:auto;scrollbar-width:none}
.sess{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-radius:12px;background:rgba(225,29,72,.18);box-shadow:inset 0 0 0 1px rgba(251,113,133,.45);color:#fff;font-size:11px;line-height:1.25}
.sess>i{flex:none;width:9px;height:9px;border-radius:50%;background:#FB7185;animation:pulse 1.2s infinite}
.sess>span{flex:1;display:flex;flex-direction:column;opacity:.92}
.sess b{font-size:12.5px;opacity:1}
.sess.paused{background:rgba(251,191,36,.18);box-shadow:inset 0 0 0 1px rgba(251,191,36,.5)}
.sess.paused>i{background:#FBBF24;animation:none}
.cgrid{position:relative;flex:1;min-height:210px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.ctile{position:relative;overflow:hidden;border-radius:14px;background:#221840}
.ctile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctile figcaption{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.55);font-size:11px;font-weight:600}
.ctile figcaption .i{width:11px;height:11px}
.ctile.talking{box-shadow:0 0 0 2.5px #A78BFA}
.camoff{position:absolute;inset:0;display:grid;place-items:center;background:#221840;font-size:12px;color:rgba(255,255,255,.7)}
.sbar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:12.5px;line-height:1.4}
.sbar>p,.sbar>div:not(.sbar-btns){flex:1;min-width:65%}
.sbar>.abtn{width:100%}
.sbar-btns{display:grid;grid-template-columns:1.3fr 1fr;gap:6px;width:100%}
.thumbs{display:flex;gap:4px;margin-top:6px}
.thumbs img{width:46px;height:46px;border-radius:8px;object-fit:cover}
.cctl{display:flex;justify-content:space-around;padding-top:2px}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:#fff;font:500 10.5px var(--body);cursor:pointer}
.cbtn .i{width:44px;height:44px;padding:11px;border-radius:50%;background:rgba(255,255,255,.15)}
.cbtn.off .i{background:#fff;color:#0E0920}
.cbtn.leave .i{background:#E11D48}
.call-note,.call-fine{font-size:10.5px;line-height:1.35;text-align:center;color:rgba(255,255,255,.58)}
.vf-flash{position:absolute;inset:0;z-index:6;border-radius:inherit;background:#fff;opacity:0;pointer-events:none}
.vf-flash.go{animation:flash .38s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* Snappy Camera (dark) */
.cam{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;color:#fff}
.vf{position:relative;flex:1;min-height:240px;overflow:hidden;background:#000}
.vf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cn{position:absolute;z-index:1;width:26px;height:26px;border:3px solid rgba(255,255,255,.85)}
.cn.tl{left:12%;top:26%;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.cn.tr{right:12%;top:26%;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.cn.bl{left:12%;bottom:30%;border-right:0;border-top:0;border-radius:0 0 0 6px}
.cn.br{right:12%;bottom:30%;border-left:0;border-top:0;border-radius:0 0 6px 0}
.vf-top{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 10px 14px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.vf-top strong{flex:1;text-align:center;font:700 14.5px var(--head)}
.vf .sess{position:absolute;top:50px;left:10px;right:10px;z-index:3;background:rgba(14,9,32,.68);backdrop-filter:blur(6px)}
.vf .tags{position:absolute;top:100px;left:10px;right:10px;z-index:2;display:flex;flex-wrap:wrap;gap:4px;margin:0}
.vf .tags span{padding:2px 8px;border-radius:6px;background:rgba(124,58,237,.82);font-size:10.5px;font-weight:600}
.guide{position:absolute;left:50%;top:48%;z-index:3;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#3B1F80;font:600 12.5px var(--body);transform:translate(-50%,-50%);animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(calc(-50% - 8px),-50%)}}
.solo-badge{position:absolute;top:100px;left:50%;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(14,9,32,.72);font-size:11px;font-weight:600;white-space:nowrap;transform:translateX(-50%)}
.vf-talk{position:absolute;inset:auto 10px 10px;z-index:3;display:flex;flex-direction:column;gap:6px}
.you-said{align-self:flex-end;max-width:86%;display:flex;align-items:flex-start;gap:5px;padding:6px 10px;border-radius:12px 12px 4px 12px;background:var(--grad);font-size:12px;line-height:1.35}
.you-said .i{flex:none;width:13px;height:13px;margin-top:2px}
.sbub{display:flex;align-items:flex-start;gap:6px;max-width:94%;padding:8px 10px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.96);color:var(--ink);font-size:12px;line-height:1.4}
.cam-panel{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 10px 30px;background:#0E0920}
.modes{display:flex;justify-content:center;gap:4px}
.mode-t{padding:5px 12px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.72);font:600 12px var(--body);cursor:pointer}
.mode-t.on{background:#fff;color:#0E0920}
.lbl-sm{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.says{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.says::-webkit-scrollbar,.pstrip::-webkit-scrollbar,.call::-webkit-scrollbar{display:none}
.say{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:500 12px var(--body);white-space:nowrap;cursor:pointer}
.say .i{width:13px;height:13px;color:#C4B5FD}
.say.used{opacity:.5}
.picks{display:flex;flex-direction:column;gap:5px}
.picks-l{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.78)}
.picks-l em{font-style:normal;color:#86EFAC;font-weight:600}
.pstrip{display:flex;gap:5px;min-height:58px;overflow-x:auto;scrollbar-width:none}
.pk{position:relative;flex:none;width:58px;height:58px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(167,139,250,.7)}
.pk img{width:100%;height:100%;object-fit:cover}
.pk figcaption{position:absolute;inset:auto 0 0;padding:1px 3px;background:rgba(0,0,0,.62);font-size:8.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-empty{align-self:center;font-size:11.5px;color:rgba(255,255,255,.45)}

/* Sheets */
.overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:flex-end;background:rgba(14,9,32,.55);backdrop-filter:blur(2px)}
.sheet{width:100%;display:flex;flex-direction:column;gap:8px;padding:18px 16px 34px;border-radius:24px 24px 0 0;background:#fff;color:var(--ink);animation:sheetup .3s ease}
@keyframes sheetup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h4{font:700 18px/1.2 var(--head)}
.sheet>p{font-size:13px;line-height:1.45;color:#5B5275}
.ticks-sm{display:grid;gap:4px;margin:2px 0 4px}
.ticks-sm li{display:flex;gap:7px;font-size:12.5px;line-height:1.4}
.ticks-sm .i{flex:none;width:14px;height:14px;margin-top:2px;color:#16A34A}
.sheet-note{padding:8px 10px;border-radius:10px;background:#FFF7E6;color:#7A4A00!important}
.sheet-fine{font-size:11px!important;text-align:center;color:#8A8199!important}
.device .mono{width:34px;height:34px;font-size:15px;border-radius:10px}
.device .mono-lg{width:52px;height:52px;font-size:22px;border-radius:14px}

/* AI Memories */
.mem-start{overflow:hidden;border-radius:16px;background:#fff;border:1px solid #EEE7FA}
.mem-start>img{width:100%;height:150px;object-fit:cover}
.mem-start-in{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 14px 14px;text-align:center}
.mem-start-in .av-md{margin-top:-23px;box-shadow:0 0 0 3px #fff}
.mem-start-in h4{font:700 17px var(--head)}
.mem-start-in p{font-size:13px;color:#5B5275}
.mem-start-in .abtn{width:100%}
.making{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:420px;padding:20px 8px;text-align:center}
.making h4{font:700 17px var(--head)}
.steps3{display:grid;gap:4px;align-self:stretch}
.steps3 li{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13px;color:#8A8199;text-align:left}
.steps3 li.now{color:var(--ink);font-weight:600}
.steps3 li.done{color:#166534}
.steps3 li>i{flex:none;width:15px;height:15px;border:2px solid #D4C6F3;border-radius:50%}
.steps3 li.now>i{border-color:var(--violet);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{align-self:stretch;height:6px;border-radius:6px;background:#EDE7FA;overflow:hidden}
.bar b{display:block;height:100%;background:var(--grad);transition:width .6s ease}
.hl{position:relative;height:150px;border-radius:16px;overflow:hidden}
.hl>img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:42%;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);color:#4C1D95;transform:translate(-50%,-50%)}
.play .i{width:18px;height:18px;margin-left:2px}
.hl-t{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:11px}
.hl-t b{font:700 15px/1.2 var(--head)}
.detail{position:relative;display:flex;gap:10px;padding:10px;border-radius:14px;background:#fff;border:1px solid #EDE6FA;box-shadow:0 6px 20px -10px rgba(40,20,90,.4)}
.detail-media{position:relative;flex:none;width:96px;height:96px;border-radius:10px;overflow:hidden}
.detail-media.tall{width:84px;height:150px}
.detail-media>img{width:100%;height:100%;object-fit:cover}
.detail-media .play{width:32px;height:32px;top:50%}
.detail-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:22px;font-size:12px;color:#5B5275}
.detail-t b{font:700 14px/1.25 var(--head);color:var(--ink)}
.kind{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.detail-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ogrid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:108px;grid-auto-flow:dense;gap:6px}
.otile{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;background:#DDD4F0;text-align:left;cursor:pointer;isolation:isolate}
.otile.tall{grid-row:span 2}
.otile>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.otile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,rgba(20,11,46,.82))}
.otile-t{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:1px;padding:8px;color:#fff}
.otile-t em{display:flex;align-items:center;gap:4px;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.otile-t em .i{width:11px;height:11px}
.otile-t b{font:700 13px/1.2 var(--head)}
.otile.on{box-shadow:0 0 0 3px var(--violet)}
.okmark{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#16A34A;color:#fff}
.okmark .i{width:13px;height:13px}
.capcard{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,#F5EEFF,#FDF0F6)}
.capcard-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px}
.capcard-h b{display:flex;align-items:center;gap:5px;font-size:12.5px}
.capcard p{font:600 14px/1.4 var(--head);color:#2A1A5C}
.capcard p[lang=hi]{font-family:var(--body)}
.seg{display:inline-flex;padding:2px;border-radius:10px;background:#EAE2FA}
.seg button{padding:4px 8px;border:0;border-radius:8px;background:none;color:#5B5275;font:600 11px var(--body);cursor:pointer}
.seg button.on{background:#fff;color:#4C1D95;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.seg-wide{display:flex;width:100%}
.seg-wide button{flex:1;padding:6px 4px}
.mlog{display:flex;flex-direction:column;gap:6px}
.mlog:empty{display:none}

/* Share */
.plats{display:grid;gap:4px}
.plats li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;background:#fff}
.plats li>div{flex:1;min-width:0;line-height:1.25}
.plats b{font-size:13.5px}
.plats span:not(.mono){display:block;font-size:11px;color:#7A7190}
.prev{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:#fff;border:1px solid #EDE6FA}
.vprev{position:relative;width:150px;aspect-ratio:9/16;margin:0 auto;border-radius:14px;overflow:hidden}
.vprev>img{width:100%;height:100%;object-fit:cover}
.vprev-bar{position:absolute;inset:6px 6px auto;display:flex;gap:3px}
.vprev-bar i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.6)}
.vprev-bar i:first-child{background:#fff}
.vprev p{position:absolute;inset:auto 8px 10px;color:#fff;font-size:10px;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.lipost{padding:10px;border-radius:10px;border:1px solid #E5E7EB;background:#fff;font-size:12px;line-height:1.45}
.lipost-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;line-height:1.25}
.lipost-h b{display:block;font-size:12.5px}
.lipost-h span{font-size:10.5px;color:#7A7190}
.lipost-g{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:8px}
.lipost-g img{width:100%;aspect-ratio:1.3;object-fit:cover;border-radius:4px}
.prev-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#7A7190}
.result{display:flex;gap:8px;padding:8px 10px;border-radius:12px;background:#ECFDF5;color:#14532D;font-size:12px;line-height:1.45}
.result .i{flex:none;width:16px;height:16px;margin-top:1px;color:#16A34A}

/* Dashboard */
.hi{display:flex;justify-content:space-between;align-items:center}
.hi span{font-size:11.5px;color:#7A7190}
.hi b{display:block;font:700 21px/1.2 var(--head)}
.askbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#F3EDFF;color:#4C1D95;font-size:12px;line-height:1.35}
.up{display:grid;gap:6px}
.upc{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#fff;border:1px solid #EFE9FA;line-height:1.3}
.upc b{display:block;font-size:13px}
.upc span{font-size:11.5px;color:#7A7190}
.past{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pastc{overflow:hidden;border-radius:12px;background:#fff;border:1px solid #EFE9FA}
.pastc img{width:100%;height:74px;object-fit:cover}
.pastc div{padding:6px 8px;font-size:11px;line-height:1.3;color:#7A7190}
.pastc b{display:block;font-size:12px;color:var(--ink)}
.made{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.made figure{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden}
.made img{width:100%;height:100%;object-fit:cover}
.made figcaption{position:absolute;left:5px;bottom:5px;padding:1px 7px;border-radius:999px;background:rgba(20,11,46,.72);color:#fff;font-size:10px;font-weight:600}
.acc{display:flex;flex-wrap:wrap;gap:6px}
.pref{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#F1EBFD;color:#4C1D95;font-size:12px;font-weight:600}
.pref .i{width:12px;height:12px;color:var(--violet)}

/* Responsive */
@media (max-width:1180px){
  .sim-body{grid-template-columns:minmax(0,380px) minmax(0,360px)}
  .sim-rail{grid-column:1 / -1;display:flex;gap:6px;overflow-x:auto;position:static;padding-bottom:4px;scrollbar-width:none}
  .sim-rail::-webkit-scrollbar{display:none}
  .sim-rail li{flex:none}
  .sim-rail button{width:auto;padding:7px 12px 7px 8px;background:rgba(255,255,255,.05)}
}
@media (max-width:820px){
  .sim-body{grid-template-columns:minmax(0,1fr)}
  .sim-stage{order:2}
  .sim-note{order:3;position:static;max-width:440px;margin-inline:auto;width:100%}
  .sim-rail .i{display:none}
}
@media (max-width:720px){
  .sim-stories{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}
  .story-b{flex:none}
  .device{height:clamp(600px,calc(100svh - 120px),720px)}
  .sim-ctrl .btn{flex:1;padding-inline:10px}
  .feat-phone{width:266px;height:546px}
  .feat-phone .device{transform:scale(.7)}
  .feat-phone.small{width:228px;height:468px}
  .feat-phone.small .device{transform:scale(.6)}
}
@media (max-width:400px){
  .device{padding:8px;border-radius:44px}
  .device-bar{border-radius:36px 36px 0 0}
  .device-app{border-radius:0 0 36px 36px}
}