/* Storie (blocco D): barra in cima all'elenco, pubblicazione, visore a tutto schermo, archivio. */
.story-strip { display: flex; gap: .7rem; overflow-x: auto; padding: .55rem .9rem .35rem; scrollbar-width: none; }
.story-strip::-webkit-scrollbar { display: none; }
.story-item { flex: 0 0 auto; width: 4rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; color: var(--wc-text); }
.story-ring { position: relative; padding: 2px; border-radius: 50%; background: var(--wc-border); }
.story-ring.unseen { background: conic-gradient(var(--wc-accent), #f0a35e, var(--wc-accent)); }
.story-ring .avatar { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; border: 2px solid var(--wc-surface); }
.story-name { max-width: 100%; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-add { position: absolute; right: -2px; bottom: -2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--wc-accent); color: var(--wc-accent-contrast); border: 2px solid var(--wc-surface); display: grid; place-items: center; font-size: .85rem; font-weight: 800; line-height: 1; }
.archive-warn { margin: 0 .9rem .4rem; padding: .45rem .65rem; border-radius: .6rem; font-size: .76rem; background: #fdecc8; color: #6b4a00; border: 0; text-align: left; width: calc(100% - 1.8rem); }
[data-bs-theme="dark"] .archive-warn { background: #4a3a12; color: #ffe2a3; }

/* sfondi delle storie di testo (P1) */
.sbg-indaco { background: linear-gradient(140deg, #4f46e5, #7c3aed); }
.sbg-salvia { background: linear-gradient(140deg, #2f7d5b, #8bbf9f); }
.sbg-tramonto { background: linear-gradient(140deg, #f97316, #db2777); }
.sbg-notte { background: linear-gradient(140deg, #0f172a, #334155); }
.sbg-corallo { background: linear-gradient(140deg, #fb7185, #f59e0b); }
.sbg-oceano { background: linear-gradient(140deg, #0284c7, #14b8a6); }
.story-text { color: #fff; display: grid; place-items: center; text-align: center; padding: 1.5rem; font-weight: 700; font-size: 1.35rem; line-height: 1.35; word-break: break-word; white-space: pre-wrap; }

/* pubblicazione */
.st-preview { position: relative; height: min(20rem, 42vh); aspect-ratio: 9 / 16; flex-shrink: 0; margin: 0 auto; border-radius: .9rem; overflow: hidden; background: var(--wc-surface-2); display: grid; place-items: center; }
.st-preview img, .st-preview video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.st-preview .story-text { width: 100%; height: 100%; font-size: 1.1rem; }
.st-bgs { display: flex; gap: .45rem; justify-content: center; }
.st-bg { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid transparent; }
.st-bg.active { border-color: var(--wc-text); }
.st-progress { height: .3rem; border-radius: 1rem; background: var(--wc-surface-2); overflow: hidden; }
.st-progress > span { display: block; height: 100%; width: 0; background: var(--wc-accent); transition: width .2s; }

/* visore (P4) */
.story-viewer { position: fixed; inset: 0; z-index: 1085; background: #000; color: #fff; display: flex; justify-content: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.story-viewer[hidden] { display: none; }
.sv-stage { position: relative; width: 100%; max-width: 30rem; height: 100%; display: flex; flex-direction: column; }
.sv-bars { display: flex; gap: 3px; padding: .6rem .6rem 0; position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.sv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv-bar > span { display: block; height: 100%; width: 0; background: #fff; }
.sv-head { position: absolute; top: 1.1rem; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: .55rem; padding: 0 .7rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.sv-head .avatar { width: 2.1rem; height: 2.1rem; }
.sv-who { min-width: 0; flex: 1; font-size: .85rem; line-height: 1.2; }
.sv-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-btn { border: 0; background: transparent; color: #fff; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; }
.sv-btn:hover { background: rgba(255, 255, 255, .12); }
.sv-media { flex: 1; display: grid; place-items: center; overflow: hidden; }
.sv-media img, .sv-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-media .story-text { width: 100%; height: 100%; font-size: 1.6rem; }
.sv-tap { position: absolute; top: 4rem; bottom: 5rem; z-index: 2; border: 0; background: transparent; }
.sv-tap.prev { left: 0; width: 33%; }
.sv-tap.next { right: 0; width: 67%; }
.sv-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: .7rem .9rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); text-align: center; }
.sv-caption { font-size: .95rem; margin-bottom: .45rem; white-space: pre-wrap; word-break: break-word; }
.sv-note { font-size: .7rem; opacity: .75; }
.sv-views { border: 0; border-radius: 2rem; background: rgba(255, 255, 255, .16); color: #fff; padding: .35rem .9rem; font-size: .82rem; }
.sv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 60%; overflow-y: auto; background: var(--wc-surface); color: var(--wc-text); border-radius: 1rem 1rem 0 0; padding: .9rem; }
.sv-sheet h6 { font-weight: 800; }
.sv-viewer-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.sv-viewer-row span:last-child { margin-left: auto; color: var(--wc-muted); font-size: .78rem; }

/* archivio */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.archive-cell { position: relative; aspect-ratio: 9 / 16; border-radius: .6rem; overflow: hidden; border: 0; padding: 0; background: var(--wc-surface-2); color: #fff; }
.archive-cell img { width: 100%; height: 100%; object-fit: cover; }
.archive-cell .story-text { width: 100%; height: 100%; font-size: .72rem; padding: .4rem; }
.archive-cell .ac-date { position: absolute; left: 0; right: 0; bottom: 0; font-size: .66rem; padding: .25rem .35rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); text-align: left; }
.archive-cell .ac-live { position: absolute; top: .3rem; left: .3rem; font-size: .6rem; font-weight: 800; background: var(--wc-accent); color: var(--wc-accent-contrast); border-radius: 1rem; padding: .05rem .4rem; }
.archive-cell.locked { background: var(--wc-surface-2); color: var(--wc-muted); display: grid; place-items: center; text-align: center; font-size: .7rem; padding: .4rem; }
.archive-cell.locked .wc-icon { width: 1.6rem; height: 1.6rem; display: block; margin: 0 auto .3rem; }
.sv-btn .wc-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2.6; }