/* A fixed 9:16 canvas; media fills it without stretching. */
#modal.story-full{background:#080b12;padding:0;overflow:auto}
#modal.story-full .story-stage{width:min(100vw,56.25dvh);height:auto;aspect-ratio:9/16;max-width:520px;margin:max(0px,calc((100dvh - min(177.7778vw,100dvh,924.444px))/2)) auto;border-radius:20px;overflow:hidden;background:#10131b;box-shadow:0 20px 90px #0009;display:block}
.story-full .story-media{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0}
.story-full .story-media>img,.story-full .story-media>video{width:100%;height:100%;object-fit:cover;object-position:center}
.story-full .story-progress{top:12px;left:14px;right:14px;gap:5px}
.story-full .story-progress>span{height:3px;background:#ffffff55;box-shadow:0 1px 4px #0003}
.story-full .story-header{padding:26px 12px 48px;gap:8px;background:linear-gradient(180deg,#000b,transparent);align-items:center}
.story-full .story-header .avatar{width:34px;height:34px;border:1px solid #ffffff66;flex-shrink:0}
.story-full .story-header .icon-btn{width:32px;height:34px;flex-shrink:0;border-radius:50%;background:#00000020;backdrop-filter:blur(8px)}
.story-full .story-author{font-size:13px;text-shadow:0 1px 5px #0008}.story-full .story-author small{font-size:11px;margin-top:2px}
.story-full .story-interaction{position:absolute;bottom:0;left:0;right:0;padding:45px 14px 16px;background:linear-gradient(transparent,#000a 36%,#000d);z-index:4}
.story-full .story-text{font-size:14px;line-height:1.45;max-height:72px;margin:0 0 10px;padding:0;text-shadow:0 1px 5px #000;overflow-wrap:anywhere}
.story-full .reaction-choices{display:flex;justify-content:space-between;gap:5px;padding:0 0 12px}
.story-full .reaction-choices button{flex:1;min-width:0;min-height:36px;border-radius:14px;background:#ffffff0c;border:1px solid #ffffff12;transition:background .15s,transform .15s}
.story-full .reaction-choices button>span{font-size:24px}.story-full .reaction-choices button:hover,.story-full .reaction-choices button[aria-pressed=true]{background:#ffffff30;border-color:#ffffff66;transform:translateY(-2px)}
.story-full #story-reply{gap:9px}.story-full #story-reply input{min-width:0;flex:1;border:1px solid #ffffff65;background:#ffffff0f;backdrop-filter:blur(12px);color:#fff;min-height:44px;padding:11px 15px;font-size:14px}.story-full #story-reply input::placeholder{color:#ffffffe0}.story-full #story-reply .icon-btn{width:42px;height:42px;flex-shrink:0;border:1px solid #ffffff45;border-radius:50%;background:#ffffff18}
.story-full .story-owner-note{width:100%;color:#fff;border-radius:18px;background:#ffffff18;padding:12px}.story-full .story-tap{top:90px;bottom:0;width:30%}
@media(max-width:600px){#modal.story-full .story-stage{border-radius:0}.story-full .story-progress{top:max(10px,env(safe-area-inset-top))}.story-full .story-header{padding-top:max(26px,calc(env(safe-area-inset-top) + 16px))}.story-full .story-interaction{padding-bottom:max(14px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.story-full .reaction-choices button{transition:none}}
/* Mirror the active story behind the sharp 9:16 frame. */
#modal.story-full{isolation:isolate;overflow:hidden;background:#292731}
.story-ambient{position:absolute;inset:-35px;z-index:0;pointer-events:none;overflow:hidden;filter:blur(24px) brightness(.88);transform:scale(1.06)}
.story-ambient>img,.story-ambient>canvas{display:block;width:100%;height:100%;object-fit:cover}
#modal.story-full .story-stage{z-index:1;box-shadow:0 12px 55px #0003}