/* Stories (assets/stories.js) */
.xs-bar {
    display: flex;
    gap: 14px;
    padding: 14px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.xs-bar::-webkit-scrollbar { display: none; }
.xs-item {
    flex: none;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text-main);
    font: inherit;
}
.xs-ring {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 3px;
    background: conic-gradient(from 210deg, #f472b6, #a78bfa, #60a5fa, #f472b6);
    transition: transform .15s ease;
}
.xs-item:active .xs-ring { transform: scale(.95); }
.xs-ring::before {
    content: '';
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: var(--bg-color);
}
.xs-ring > :not(.xs-plus) { position: relative; border-radius: 50%; overflow: hidden; width: 58px !important; height: 58px !important; }
.xs-ring.is-seen { background: rgba(255, 255, 255, .14); }
body.light-theme .xs-ring.is-seen { background: rgba(0, 0, 0, .14); }
.xs-ring.is-none { background: transparent; border: 1.5px dashed var(--border-color); }
.xs-plus {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--xn-accent, #8b7bff);
    color: #0b0918;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    border: 2.5px solid var(--bg-color);
    z-index: 1;
}
.xs-name { width: 100%; font-size: 11.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.xs-letter { display: grid; place-items: center; border-radius: 50%; background: var(--xn-accent-soft, rgba(139,123,255,.2)); color: var(--text-main); font-weight: 800; }

/* Backgrounds for text stories */
.xs-bg-violet { background: radial-gradient(120% 90% at 20% 0%, #a78bfa, #5b21b6 60%, #1e1b4b) !important; }
.xs-bg-sunset { background: linear-gradient(160deg, #fb7185, #f59e0b) !important; }
.xs-bg-ocean { background: linear-gradient(160deg, #22d3ee, #2563eb 70%, #1e3a8a) !important; }
.xs-bg-forest { background: linear-gradient(160deg, #34d399, #065f46) !important; }
.xs-bg-night { background: radial-gradient(120% 90% at 50% 0%, #1f2937, #030712) !important; }
.xs-bg-rose { background: linear-gradient(160deg, #f9a8d4, #be185d) !important; }

/* Overlays */
.xs-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .86);
    opacity: 0;
    transition: opacity .18s ease;
}
.xs-overlay.is-open { opacity: 1; }
body.xs-locked { overflow: hidden; }
.xs-x {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}

/* Editor */
.xs-sheet {
    width: min(440px, 100%);
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xs-sheet-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-main); font-size: 17px; }
.xs-stage {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 52dvh;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    display: grid;
    place-items: center;
}
.xs-stage img, .xs-stage video { width: 100%; height: 100%; object-fit: cover; }
.xs-tools { display: flex; gap: 8px; }
.xs-tool {
    flex: 1;
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.xs-bgs { display: flex; gap: 10px; justify-content: center; }
.xs-bg { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.xs-bg.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--xn-accent, #8b7bff); }
.xs-caption { resize: none; font-size: 16px !important; }
.xs-publish { width: 100%; margin: 0 !important; }

/* Caption over a story */
.xs-cap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 76px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}
.xs-cap:empty { display: none; }
.xs-cap.is-big {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 26px;
    font-weight: 800;
    padding: 0 28px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

/* Viewer */
.xs-viewer { background: #000; }
.xs-frame {
    position: relative;
    width: min(440px, 100%);
    height: min(100dvh, 860px);
    border-radius: 0;
    overflow: hidden;
    background: #000;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
@media (min-width: 600px) { .xs-frame { border-radius: 22px; height: min(92dvh, 860px); } }
.xs-bars { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; }
.xs-bar-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.xs-bar-track i { display: block; height: 100%; width: 0; background: #fff; }
.xs-head {
    position: absolute;
    z-index: 3;
    top: calc(22px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.xs-head > span:first-child { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; }
.xs-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xs-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs-who small { font-size: 12px; opacity: .7; }
.xs-body { position: absolute; inset: 0; display: grid; place-items: center; }
.xs-body img, .xs-body video { width: 100%; height: 100%; object-fit: contain; }
.xs-nav { position: absolute; z-index: 2; top: 80px; bottom: 80px; width: 38%; background: none; border: 0; cursor: pointer; }
.xs-nav.is-prev { left: 0; }
.xs-nav.is-next { right: 0; width: 62%; }
.xs-foot {
    position: absolute;
    z-index: 3;
    left: 12px;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    justify-content: space-between;
}
.xs-views, .xs-del {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.xs-del { color: #fff; background: rgba(220, 38, 38, .55); }
.xs-viewers {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #0b0b10);
    border-radius: 20px 20px 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    color: var(--text-main);
}
.xs-viewers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xs-viewers-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.xs-viewer-row { display: flex; align-items: center; gap: 10px; }
.xs-viewer-row > :first-child { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; }
.xs-viewer-row span { display: flex; flex-direction: column; min-width: 0; }
.xs-viewer-row small { color: var(--text-muted); font-size: 12px; }
.xs-empty { color: var(--text-muted); text-align: center; padding: 14px 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    .xs-overlay, .xs-ring { transition: none; }
}