.story-view .story-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;margin:20px 0}
.story-view .story-actions button,.story-view .story-exit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0!important;padding:11px 18px;border:1px solid #111;border-radius:999px;background:#111;color:#fff;font:600 14px/1.3 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.story-view .story-exit{background:#fff;color:#111;border-color:#ddd}
.story-view .story-actions :focus-visible{outline:3px solid #3678d4;outline-offset:3px}
.story-view .story-media{display:block;max-width:100%;max-height:70vh;max-height:70dvh;margin:auto;object-fit:contain}
.story-video-dialog{width:min(960px,94vw);max-height:94vh;max-height:94dvh;padding:14px;border:0;border-radius:18px;background:#111;color:#fff}
.story-video-dialog::backdrop{background:#000b}
.story-video-dialog video{display:block;width:100%;max-height:75vh;max-height:75dvh;object-fit:contain}
.story-video-dialog button{display:block;min-height:44px;margin:12px 0 0 auto;padding:10px 18px;border:1px solid #ddd;border-radius:999px;background:white;color:#111;font:600 14px system-ui;cursor:pointer}
@media(max-width:420px){.story-view .story-actions{gap:8px}.story-view .story-actions button,.story-view .story-exit{padding:10px 12px;font-size:13px;white-space:nowrap}}
/* ARTSPYRO FLOATING STORIES */
.stories .avatar{overflow:hidden}.stories .avatar img,.stories .avatar video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.story-window{position:fixed;z-index:1100;width:min(380px,calc(100vw - 24px));max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;background:#111;color:#fff;border:1px solid #444;border-radius:20px;box-shadow:0 16px 60px #0006;overflow:hidden}
.story-window-bar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:10px 12px;background:#202020}
.story-window .story-window-handle{display:block;flex:1;min-width:0;margin:0;padding:8px;border:0;background:transparent;color:white;text-align:left;font:600 14px/1.4 system-ui;cursor:grab;touch-action:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-window .story-window-handle:active{cursor:grabbing}
.story-window .story-window-close{width:40px;min-height:40px;margin:0;padding:0;border:1px solid #555;border-radius:50%;background:#333;color:white;font-size:24px;cursor:pointer}
.story-window-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px}
.story-window .story-view{margin:0;padding:0!important;border:0;border-radius:0;background:transparent;color:white}
.story-window .story-view h1{display:none}
.story-window .story-actions{margin:0 0 14px;gap:8px}
.story-window .story-actions button,.story-window .story-exit{flex:1;min-width:0;padding:10px 8px;font-size:13px}
.story-window .story-media{width:100%;max-height:48vh;max-height:48dvh;object-fit:contain}
.story-window .story-view p{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.story-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0}
.story-navigation a,.story-navigation button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 10px;margin:0;border:1px solid #555;border-radius:999px;background:#252525;color:white;text-decoration:none;font:600 12px system-ui;cursor:pointer}
.story-navigation button:disabled{opacity:.4;cursor:default}.story-position{font:500 12px system-ui;white-space:nowrap}
.story-window :focus-visible{outline:3px solid #87b7ff;outline-offset:2px}.story-window-loading,.story-window-error{font:14px/1.5 system-ui}
.story-window-error a{color:white;text-decoration:underline}

/* ARTSPYRO STORY OPAQUE */
.story-window,
.story-window-bar,
.story-window-body,
.story-window .story-view,
.story-window .story-media {
    background: #111 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* ARTSPYRO STORY REFINED */
.story-window {
    box-sizing:border-box!important;
    width:min(360px,calc(100vw - 24px))!important;
    max-height:85vh!important;
    max-height:85dvh!important;
    padding:0!important;
    border:1px solid #343434!important;
    border-radius:20px!important;
    background:#111!important;
    box-shadow:0 18px 60px #0007!important;
    overflow:hidden!important;
}
.story-window .story-window-bar {
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    align-items:center;
    min-height:56px;
    padding:8px 12px!important;
    gap:8px;
    border-bottom:1px solid #292929;
    background:#111!important;
}
.story-window .story-window-handle {
    font:600 14px/1.4 system-ui!important;
    min-height:40px;
    padding:6px!important;
}
.story-window .story-window-close {
    flex:0 0 36px!important;
    width:36px!important;
    min-height:36px!important;
    height:36px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #3a3a3a!important;
    background:#232323!important;
    border-radius:50%!important;
    font:400 23px/1 system-ui!important;
    box-shadow:none!important;
}
.story-window .story-window-body {
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    flex:1 1 auto!important;
    min-height:0;
    overflow:auto!important;
    padding:14px!important;
    scrollbar-width:thin;
    scrollbar-color:#555 #111;
    background:#111!important;
}
.story-window .story-view {
    box-sizing:border-box!important;
    position:static!important;
    inset:auto!important;
    float:none!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    transform:none!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#111!important;
    color:#f5f5f5!important;
}
.story-window .story-actions {
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:0!important;
}
.story-window .story-actions button,
.story-window .story-exit {
    box-sizing:border-box!important;
    display:inline-flex!important;
    flex:1 1 0!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:44px!important;
    padding:9px 8px!important;
    margin:0!important;
    border:1px solid #424242!important;
    border-radius:12px!important;
    background:#222!important;
    color:#fff!important;
    font:600 12px/1.3 system-ui!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}
.story-window .story-exit {
    background:#f5f5f5!important;
    color:#111!important;
    border-color:#f5f5f5!important;
}
.story-window .story-media {
    box-sizing:border-box!important;
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:46vh!important;
    max-height:46dvh!important;
    object-fit:contain!important;
    margin:0 auto!important;
    border-radius:12px!important;
    background:#080808!important;
}
.story-window .story-navigation {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:14px 0 12px!important;
    padding:0!important;
}
.story-window .story-navigation a,
.story-window .story-navigation button {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:40px!important;
    margin:0!important;
    padding:8px 10px!important;
    border:1px solid #333!important;
    border-radius:10px!important;
    background:#1d1d1d!important;
    color:#eee!important;
    font:500 11px/1.3 system-ui!important;
    text-decoration:none!important;
    box-shadow:none!important;
}
.story-window .story-navigation button:disabled {
    opacity:.3!important;
}
.story-window .story-position {
    font:600 12px system-ui!important;
    color:#ddd!important;
    white-space:nowrap;
}
.story-window .story-view p {
    margin:10px 0!important;
    color:#aaa!important;
    font:400 12px/1.5 system-ui!important;
    overflow-wrap:anywhere;
}
.story-window .story-view p:empty {
    display:none!important;
}
.story-window .story-view form {
    display:flex!important;
    justify-content:flex-end!important;
    margin:12px 0 0!important;
    padding:12px 0 0!important;
    border:0!important;
    border-top:1px solid #292929!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.story-window .story-view form button {
    min-height:40px!important;
    margin:0!important;
    padding:8px 12px!important;
    border:1px solid #563535!important;
    border-radius:10px!important;
    background:#241919!important;
    color:#f0a8a8!important;
    font:500 12px/1.3 system-ui!important;
    box-shadow:none!important;
}
@media(max-width:420px) {
    .story-window {
        width:calc(100vw - 24px)!important;
    }
    .story-window .story-window-body {
        padding:12px!important;
    }
    .story-window .story-window-handle {
        font-size:13px!important;
    }
}

/* ARTSPYRO STORY CENTERED FOOTER */
.story-window .story-navigation {
    justify-content:center!important;
    gap:10px!important;
}
.story-window .story-position {
    min-width:32px;
    text-align:center;
}
.story-window .story-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #292929;
}
.story-window .story-meta .story-expiry {
    flex:1;
    min-width:0;
    margin:0!important;
    font:400 11px/1.4 system-ui!important;
    color:#aaa!important;
}
.story-window .story-meta form {
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}
.story-window .story-meta form button {
    min-height:40px!important;
    padding:8px 10px!important;
    font-size:11px!important;
}
