/* Donexa Stories: /stories page + the full-screen story viewer used on the feed too.
   The one bold idea: each avatar ring shows how much of the story's 24 hours is left. */
.dxs,.dxs-modal,.dxs-strip{--dxs-a:#8b5cf6;--dxs-b:#06b6d4;--dxs-text:var(--donexa-text,#e8e8f5);--dxs-muted:var(--donexa-muted,#8f8fb0);
  --dxs-card:var(--donexa-card,#151530);--dxs-line:var(--donexa-border,rgba(255,255,255,.08));--dxs-bg:var(--donexa-bg,#0a0a1a)}
.dxs, .dxs *, .dxs *::before, .dxs *::after, .dxs-modal *, .dxs-strip *{box-sizing:border-box}

.dxs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.dxs-head h1{margin:0;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;letter-spacing:-.02em;color:var(--dxs-text)}
.dxs-head p{margin:4px 0 0;color:var(--dxs-muted);max-width:52ch}
.dxs-add-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:.6rem 1.15rem;font-weight:700;font-size:.92rem;color:#fff;
  background:linear-gradient(135deg,var(--dxs-a),var(--dxs-b));box-shadow:0 8px 22px -10px rgba(124,58,237,.8);cursor:pointer}
.dxs-add-btn:hover{filter:brightness(1.08)}
.dxs-add-btn:focus-visible,.dxs-new:focus-visible,.dxs .story-tile:focus-visible,.dxs-del:focus-visible{outline:2px solid var(--dxs-b);outline-offset:3px}

/* Your stories strip */
.dxs-mine{margin-bottom:26px}
.dxs-mine h2,.dxs-h{font-size:1rem;font-weight:700;color:var(--dxs-text);margin:0 0 12px}
.dxs-mine h2 span{font-weight:500;color:var(--dxs-muted);font-size:.85rem;margin-left:6px}
.dxs-mine-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
.dxs-new,.dxs-own{flex:0 0 132px;scroll-snap-align:start}
.dxs-new{aspect-ratio:9/16;max-height:236px;border-radius:18px;border:2px dashed color-mix(in srgb,var(--dxs-a) 55%,transparent);background:color-mix(in srgb,var(--dxs-a) 8%,transparent);
  color:var(--dxs-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:10px}
.dxs-new:hover{background:color-mix(in srgb,var(--dxs-a) 15%,transparent)}
.dxs-new-plus{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;color:#fff;margin-bottom:6px;background:linear-gradient(135deg,var(--dxs-a),var(--dxs-b))}
.dxs-new strong{font-size:.9rem}.dxs-new small{color:var(--dxs-muted);font-size:.76rem}
.dxs-own-thumb{position:relative;aspect-ratio:9/16;max-height:236px;border-radius:18px;overflow:hidden;background:#111;cursor:pointer}
.dxs-own-thumb img,.dxs-own-thumb video,.dxs-thumb img,.dxs-thumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.dxs-own-thumb:hover img,.dxs-own-thumb:hover video,.dxs-thumb:hover img,.dxs-thumb:hover video{transform:scale(1.04)}
.dxs-left{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;font-size:.72rem;font-weight:600;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.dxs-left::before{content:"";width:14px;height:14px;border-radius:50%;
  background:conic-gradient(#fff calc(var(--life,1)*360deg), rgba(255,255,255,.25) 0)}
.dxs-own-stats{display:flex;justify-content:space-between;gap:4px;margin:8px 2px 4px;font-size:.78rem;color:var(--dxs-muted)}
.dxs-own-stats i{margin-right:2px}
.dxs-del{width:100%;border:1px solid var(--dxs-line);background:transparent;color:var(--dxs-muted);border-radius:10px;padding:.28rem .5rem;font-size:.76rem;cursor:pointer}
.dxs-del:hover{color:#ef4444;border-color:rgba(239,68,68,.5)}

/* People grid */
.dxs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px;margin-bottom:28px}
.dxs-card{min-width:0}
.dxs-thumb{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0d0d1d;cursor:pointer;isolation:isolate}
.dxs-card.is-new .dxs-thumb{box-shadow:0 0 0 2px var(--dxs-bg),0 0 0 4px var(--dxs-a),0 14px 30px -18px rgba(124,58,237,.9)}
.dxs-grid.is-seen .dxs-thumb{filter:saturate(.75)}
.dxs-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.82) 100%);pointer-events:none}
.dxs-segs{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:3px;z-index:2}
.dxs-segs i{flex:1;height:3px;border-radius:2px;background:#fff}
.dxs-segs i.is-seen{background:rgba(255,255,255,.4)}
.dxs-who{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:9px;z-index:2;color:#fff}
.dxs-cap{position:absolute;left:12px;right:12px;bottom:62px;margin:0;color:#fff;font-size:.8rem;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.7);z-index:2}
.dxs-name{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.dxs-name strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dxs-name small{font-size:.72rem;color:rgba(255,255,255,.75)}

/* The life ring: a conic arc for the share of 24 hours left on the newest story */
.dxs-ring{flex:0 0 auto;position:relative;padding:3px;border-radius:50%;
  background:conic-gradient(var(--dxs-a) 0deg, var(--dxs-b) calc(var(--life,1)*360deg), rgba(255,255,255,.28) calc(var(--life,1)*360deg))}
.dxs-grid.is-seen .dxs-ring{background:conic-gradient(rgba(255,255,255,.85) calc(var(--life,1)*360deg), rgba(255,255,255,.22) 0)}
.dxs-ring img,.dxs-ring .dxs-letter{display:block;border-radius:50%;object-fit:cover;border:2px solid #000}
.dxs-letter{display:grid!important;place-items:center;background:linear-gradient(135deg,var(--dxs-a),var(--dxs-b));color:#fff;font-weight:700}

.dxs-empty{text-align:center;padding:48px 20px;border:1px dashed var(--dxs-line);border-radius:20px;color:var(--dxs-muted)}
.dxs-empty i{font-size:2rem;display:block;margin-bottom:8px;color:var(--dxs-a)}
.dxs-empty strong{display:block;color:var(--dxs-text);margin-bottom:4px}
.dxs-empty p{margin:0}

@media (max-width:575px){
  .dxs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dxs-new,.dxs-own{flex-basis:112px}
  .dxs-thumb{border-radius:16px}
  .dxs-cap{display:none}
  .dxs-own-stats{font-size:.7rem;margin-inline:0}
  .dxs-own-stats i{margin-right:1px}
}

/* Composer */
.dxs-modal .modal-content{background:var(--donexa-card,#151530);color:var(--donexa-text,#e8e8f5);border:1px solid var(--donexa-border,rgba(255,255,255,.08));border-radius:22px;overflow:hidden}
.dxs-compose-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 10px}
.dxs-compose-head h5{margin:0;font-weight:800;font-size:1.1rem}
html[data-bs-theme="dark"] .dxs-modal .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.dxs-drop{position:relative;display:block;margin:0 18px;border-radius:18px;min-height:260px;cursor:pointer;overflow:hidden;
  border:2px dashed color-mix(in srgb,#8b5cf6 50%,transparent);background:color-mix(in srgb,#8b5cf6 7%,transparent)}
.dxs-drop.is-over{background:color-mix(in srgb,#8b5cf6 18%,transparent);border-color:#8b5cf6}
.dxs-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:3}
.dxs-drop-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:var(--donexa-muted,#8f8fb0)}
.dxs-drop-empty i{font-size:2.2rem;color:#8b5cf6}
.dxs-drop-empty strong{color:var(--donexa-text,#e8e8f5)}
.dxs-drop.has-file{border-style:solid;border-color:transparent;background:#000;min-height:0;aspect-ratio:9/16;max-height:52vh;margin:0 auto;width:calc(100% - 36px);max-width:300px}
.dxs-drop.has-file .dxs-drop-empty{display:none}
.dxs-drop-preview{position:absolute;inset:0}
.dxs-drop-preview img,.dxs-drop-preview video{width:100%;height:100%;object-fit:cover}
.dxs-change{position:absolute;right:10px;top:10px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;font-weight:600}
.dxs-compose-body{padding:14px 18px 4px}
.dxs-caption-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--donexa-border,rgba(255,255,255,.12));border-radius:14px;padding:4px 12px;background:var(--donexa-bg-soft,rgba(255,255,255,.03))}
.dxs-caption-wrap input{flex:1;border:0;background:transparent;color:inherit;padding:.55rem 0;outline:none;min-width:0}
.dxs-caption-wrap:focus-within{border-color:#8b5cf6}
.dxs-caption-wrap span{font-size:.74rem;color:var(--donexa-muted,#8f8fb0)}
.dxs-compose-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px 18px}
.dxs-compose-foot small{color:var(--donexa-muted,#8f8fb0)}

/* ---------- Full-screen viewer (feed + stories) ---------- */
.story-reels{--stage-w:min(100vw, calc(100dvh * 9 / 16));--edge:max(0px, calc((100vw - var(--stage-w)) / 2));
  background:radial-gradient(120% 90% at 50% 40%, #1b1433 0%, #07060f 70%)!important}
.story-reels .story-media{left:var(--edge)!important;right:var(--edge)!important;background:#000!important}
@media (min-width:600px){
  .story-reels .story-media{top:12px!important;bottom:12px!important;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
  .story-reels .story-media img,.story-reels .story-media video{object-fit:cover!important}
}
.story-reels .story-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 62%,rgba(0,0,0,.75) 100%)}
.story-reels .story-progress{left:calc(var(--edge) + 14px)!important;right:calc(var(--edge) + 14px)!important;top:24px!important;height:3px!important}
.story-reels .story-author-slot{top:38px!important;bottom:auto!important;left:calc(var(--edge) + 14px)!important;right:auto!important;text-align:left!important}
.story-reels .story-author-link,.story-reels .story-author{font-size:.95rem!important}
.story-reels .story-avatar-img{width:36px!important;height:36px!important}
.story-reels .story-close{top:36px!important;right:calc(var(--edge) + 12px)!important;width:38px!important;height:38px!important}
.story-reels .story-mute{top:36px!important;right:calc(var(--edge) + 56px)!important}
.story-reels .story-nav{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(8px)}
.story-reels .story-prev{left:max(8px, calc(var(--edge) - 58px))!important}
.story-reels .story-next{right:max(8px, calc(var(--edge) - 58px))!important}
.story-reels .story-meta{bottom:84px!important;left:calc(var(--edge) + 16px)!important;right:calc(var(--edge) + 16px)!important;align-items:flex-start!important;text-align:left!important;padding:0!important}
.story-reels .story-time{order:-1;font-size:.76rem!important}
.story-reels .story-caption{max-width:100%!important;font-size:1rem!important;line-height:1.4}
.story-reels .story-interactions{position:absolute;z-index:7;left:calc(var(--edge) + 14px);right:calc(var(--edge) + 14px);bottom:26px;display:flex;gap:8px}
.story-reels .story-interactions button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.5rem .95rem;font-size:.88rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);cursor:pointer}
.story-reels .story-interactions button:hover{background:rgba(255,255,255,.22)}
.story-reels .story-interactions .story-comments-btn{margin-left:auto}
.story-reels .story-like-btn.liked{color:#ff4d7d;border-color:rgba(255,77,125,.6);background:rgba(255,77,125,.16)}
.story-reels .story-like-btn.liked i{animation:dxsPop .3s ease}
@keyframes dxsPop{50%{transform:scale(1.35)}}
.story-reels .story-comments-panel{position:absolute;z-index:8;left:calc(var(--edge) + 10px);right:calc(var(--edge) + 10px);bottom:78px;max-height:46vh;display:flex;flex-direction:column;
  border-radius:18px;background:rgba(14,12,28,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);color:#fff;overflow:hidden}
.story-reels .story-comments-panel.d-none{display:none!important}
.story-reels .story-comments-list{overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.story-reels .story-comment-row{display:flex;flex-direction:column;font-size:.88rem}
.story-reels .story-comment-row strong{font-size:.8rem;color:#c4b5fd}
.story-reels .story-viewer-row{display:flex;align-items:center;gap:10px;font-size:.88rem}
.story-reels .story-viewer-row span{display:flex;flex-direction:column;line-height:1.2}
.story-reels .story-viewer-row small{color:rgba(255,255,255,.6)}
.story-reels .story-viewer-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.story-reels .story-viewer-letter{display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#06b6d4);font-weight:700}
.story-reels .story-comment-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.1)}
.story-reels .story-comment-form.d-none{display:none!important}
.story-reels .story-comment-input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:.5rem .9rem;outline:none}
.story-reels .story-comment-input:focus{border-color:#8b5cf6}
.story-reels .story-comment-form button{border:0;border-radius:50%;width:38px;height:38px;color:#fff;background:linear-gradient(135deg,#8b5cf6,#06b6d4);cursor:pointer}
.story-reels .text-muted{color:rgba(255,255,255,.6)!important}
@media (prefers-reduced-motion:reduce){ .dxs *, .story-reels *{transition:none!important;animation:none!important} }

/* ---------- Feed strip (same cards as /stories, smaller) ---------- */
.dxs-strip{margin:0 0 14px}
.dxs-strip-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.dxs-mini{position:relative;flex:0 0 108px;scroll-snap-align:start;text-decoration:none}
.dxs-mini-card,.dxs-mini-create,.dxs-mini-all{position:relative;display:block;width:108px;height:180px;border-radius:16px;overflow:hidden;background:#0d0d1d;cursor:pointer;isolation:isolate}
.dxs-mini-card img,.dxs-mini-card video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.dxs-mini-card:hover img,.dxs-mini-card:hover video{transform:scale(1.05)}
.dxs-mini.is-new .dxs-mini-card{box-shadow:0 0 0 2px var(--dxs-bg),0 0 0 4px var(--dxs-a)}
.dxs-mini.is-seen .dxs-mini-card{filter:saturate(.75)}
.dxs-mini .dxs-segs{left:8px;right:8px;top:8px;gap:2px}
.dxs-mini .dxs-segs i{height:2.5px}
.dxs-mini-ring{position:absolute;left:8px;top:16px;z-index:2;padding:2.5px}
.dxs-mini.is-seen .dxs-mini-ring{background:conic-gradient(rgba(255,255,255,.85) calc(var(--life,1)*360deg), rgba(255,255,255,.22) 0)}
.dxs-mini-name{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;color:#fff;font-size:.78rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dxs-mini-add{position:absolute;right:6px;bottom:30px;z-index:3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.9rem;
  background:linear-gradient(135deg,var(--dxs-a),var(--dxs-b));box-shadow:0 0 0 3px var(--dxs-bg)}
.dxs-mini-create{background:var(--dxs-card);border:1px solid var(--dxs-line);color:var(--dxs-text)}
.dxs-mini-me{position:absolute;left:0;right:0;top:0;height:122px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--dxs-a) 40%,transparent),color-mix(in srgb,var(--dxs-b) 40%,transparent))}
.dxs-mini-me img{width:100%;height:100%;object-fit:cover}
.dxs-mini-me > span{font-size:2.2rem;font-weight:800;color:#fff}
.dxs-mini-create-foot{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9px;font-size:.76rem;font-weight:700}
.dxs-mini-plus{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--dxs-a),var(--dxs-b));box-shadow:0 0 0 3px var(--dxs-card)}
.dxs-mini-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:1.5px dashed var(--dxs-line);color:var(--dxs-muted);font-size:.8rem;font-weight:600}
.dxs-mini-all i{font-size:1.3rem;color:var(--dxs-a)}
.dxs-mini-all:hover{color:var(--dxs-text);border-color:var(--dxs-a)}
.dxs-mini-card:focus-visible,.dxs-mini-create:focus-visible,.dxs-mini-all:focus-visible,.dxs-mini-add:focus-visible{outline:2px solid var(--dxs-b);outline-offset:3px}
@media (max-width:575px){
  .dxs-mini{flex-basis:96px}
  .dxs-mini-card,.dxs-mini-create,.dxs-mini-all{width:96px;height:160px;border-radius:14px}
  .dxs-mini-me{height:104px}
  .dxs-strip{padding:0 12px}
}