/* Ad landing /try/<character> (web/ad-landing.js): one full-height portrait stage, the
   character's reaction clips on top, a chat-style composer below. Mobile first. */
body.landing-open{overflow:hidden;background:#07080e}
body.landing-open #lobby,body.landing-open .main-nav,body.landing-open #install-ribbon{visibility:hidden}
/* Same keyboard handling as the call screen (app.js viewport()): the stage keeps its height while
   the keyboard is up and only the bottom block rises by --keyboard-inset. */
.ad-landing{position:fixed;inset:0 0 auto;z-index:60;height:var(--call-height,100dvh);color:#fff;background:#07080e;overflow:hidden;isolation:isolate}
.lp-stage{position:absolute;inset:0;display:flex;justify-content:center;background:#130d1b}
.lp-video{position:absolute;top:0;height:100%;width:100%;max-width:calc(var(--call-height,100dvh)*9/16);object-fit:cover;object-position:center 22%;opacity:0;transition:opacity .18s linear}
.lp-video.on{opacity:1}
.lp-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0a0611b0,transparent 18%,transparent 48%,#0a061199 70%,#0a0611f0)}
.lp-top{position:absolute;top:max(14px,env(safe-area-inset-top));left:18px;right:18px;display:flex;align-items:center;justify-content:space-between}
.lp-brand{font:900 24px/1 Arial,sans-serif;letter-spacing:-1px}
.lp-ai{font-size:10px;color:#eadfff;border:1px solid #e6d4ff55;padding:3px 7px;border-radius:5px;background:#1d122a66}
.lp-intro{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 40px);left:18px;right:18px;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 8px #0008}
.lp-intro strong{font-size:26px;font-weight:800;letter-spacing:-.8px}
.lp-intro span{font-size:13px;color:#f1e8ffd9}
.lp-sound{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:12px 18px;border-radius:24px;background:#6b46ffe6;color:#fff;font-size:14px;font-weight:700}
.lp-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 16px calc(max(12px,var(--safe-bottom)) + var(--keyboard-inset,0px));display:flex;flex-direction:column;gap:9px;width:min(480px,100%);margin:0 auto}
.lp-chat{display:flex;flex-direction:column;gap:6px;max-height:24dvh;overflow:hidden;justify-content:flex-end}
.lp-bubble{max-width:82%;width:fit-content;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.55;overflow-wrap:anywhere;animation:lp-in .2s ease-out}
.lp-bubble.me{align-self:flex-end;background:#7250dbe6;border-bottom-right-radius:5px}
.lp-bubble.her{align-self:flex-start;background:#22152fcc;border:1px solid #ffffff1f;border-bottom-left-radius:5px}
.lp-hint{font-size:12px;color:#e8dcffcc;text-align:center}
.lp-chips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.lp-chip{padding:10px 14px;border-radius:20px;background:#ffffff1f;border:1px solid #ffffff40;color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(6px)}
.lp-chip:active{background:#7250db}
.lp-composer{display:flex;align-items:center;gap:8px;border:1px solid #ffffff55;border-radius:28px;padding:6px 6px 6px 16px;background:#22152fb8;backdrop-filter:blur(8px)}
.lp-composer:focus-within{border-color:#c3a4ff}
.lp-input{flex:1;min-width:0;height:38px;background:transparent;border:0;outline:0;color:#fff;font-size:16px}
.lp-input::placeholder{color:#ffffffb3;font-size:14px}
.lp-send{width:42px;height:42px;border-radius:50%;background:#865aff;flex-shrink:0;position:relative}
.lp-send::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-left:2.5px solid #fff;border-top:2.5px solid #fff;transform:translate(-50%,-30%) rotate(45deg)}
.ad-landing.armed .lp-send{animation:lp-pulse 1.1s ease-in-out infinite}
.lp-legal{font-size:10px;color:#ffffff80;text-align:center}
@keyframes lp-in{from{opacity:0;transform:translateY(6px)}}
@keyframes lp-pulse{50%{box-shadow:0 0 0 8px #865aff40}}
@media(min-width:700px){.lp-top,.lp-intro{left:calc(50% - 240px);right:calc(50% - 240px)}}