/* dg-stories.css — the stories (phase 5): the tray above the home feed, the rings (tray, profile avatar), the viewer.
   The ring: a coloured gradient (Duegho's red -> orange) = something unseen, grey = all seen (as Instagram). */
/* the tray */
.dg-stray { background: #fff; border: 1px solid var(--dg-line, #EFF3F4); border-radius: 16px; padding: 12px 10px 8px; margin-bottom: 14px; }
.dg-stray[hidden] { display: none; }
.dg-stray-in { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; }
.dg-stray-in::-webkit-scrollbar { display: none; }
.dg-st { position: relative; flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dg-st-av { width: 66px; height: 66px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer; color: #fff; font: 700 18px Inter, system-ui, sans-serif; background: #E9EDF1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #CFD9DE; }
.dg-st-av img { width: 100%; height: 100%; object-fit: cover; }
.dg-st.dg-ring.unseen .dg-st-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px #E21B2D, 0 0 0 5px #FF8A3D; background-clip: padding-box; }
.dg-st-new { background: #1DA1F2 !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #CFD9DE; }
.dg-st-new img { width: 30px; height: 30px; object-fit: contain; }
.dg-st-plus { position: absolute; top: 48px; left: 48px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #E21B2D; display: grid; place-items: center; padding: 0; cursor: pointer; }
.dg-st-plus img { width: 12px; height: 12px; }
.dg-st-name { max-width: 72px; font: 400 12px Inter, system-ui, sans-serif; color: var(--dg-ink, #0F1419); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the profile's avatar ring */
.dg-ptop .secprofileimg.dg-ring { cursor: pointer; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #CFD9DE; }
.dg-ptop .secprofileimg.dg-ring.unseen { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #E21B2D, 0 0 0 7px #FF8A3D; }

/* the viewer */
body.dg-sv-open { overflow: hidden; }
.dg-sv { position: fixed; inset: 0; z-index: 300; background: rgba(10, 12, 14, .96); display: flex; align-items: center; justify-content: center; gap: 24px; }
.dg-sv[hidden] { display: none; }
.dg-sv-stage { position: relative; height: min(92vh, 860px); aspect-ratio: 9 / 16; max-width: 100vw; border-radius: 12px; overflow: hidden; background: #000; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.dg-sv-media { position: absolute; inset: 0; display: grid; place-items: center; }
.dg-sv-media img, .dg-sv-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.dg-sv-bars { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 4; display: flex; gap: 4px; }
.dg-sv-bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.dg-sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.dg-sv-head { position: absolute; top: 18px; left: 10px; right: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dg-sv-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.dg-sv-av { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.dg-sv-av img { width: 100%; height: 100%; object-fit: cover; }
.dg-sv-av b { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 700 13px Inter, system-ui, sans-serif; }
.dg-sv-who b { font: 600 14px Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sv-who small { font-size: 13px; opacity: .8; white-space: nowrap; }
.dg-sv-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.dg-sv-tools button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dg-sv-tools svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.dg-sv-mute .on, .dg-sv.sound .dg-sv-mute .off { display: none; }
.dg-sv.sound .dg-sv-mute .on { display: block; }
.dg-sv:not(.video) .dg-sv-mute { display: none; }
.dg-sv-pause i { width: 12px; height: 14px; background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px); }
.dg-sv.paused .dg-sv-pause i { width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.dg-sv-del img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.dg-sv-tap { position: absolute; top: 70px; bottom: 76px; z-index: 2; border: 0; background: transparent; cursor: pointer; padding: 0; }
.dg-sv-tap.prev { left: 0; width: 34%; } .dg-sv-tap.next { right: 0; width: 66%; }
.dg-sv-text { position: absolute; left: 16px; right: 16px; z-index: 3; text-align: center; color: #fff; font: 700 22px/1.3 Inter, system-ui, sans-serif; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); pointer-events: none; overflow-wrap: anywhere; }
.dg-sv-text.top { top: 76px; } .dg-sv-text.center { top: 50%; transform: translateY(-50%); } .dg-sv-text.bottom { bottom: 96px; }
.dg-sv-text[hidden] { display: none; }
.dg-sv-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 14px 12px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.dg-sv-reply { flex: 1; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 0 6px 0 14px; min-width: 0; }
.dg-sv-reply[hidden] { display: none; }
.dg-sv-reply input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: 15px Inter, system-ui, sans-serif; height: 40px; }
.dg-sv-reply input::placeholder { color: rgba(255, 255, 255, .8); }
.dg-sv-reply button { width: 32px; height: 32px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dg-sv-reply button img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.dg-sv-like { width: 40px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dg-sv-like[hidden] { display: none; }
.dg-sv-like img { width: 28px; height: 28px; }
.dg-sv-like .off { filter: brightness(0) invert(1); }
.dg-sv-like .on, .dg-sv-like.active .off { display: none; }
.dg-sv-like.active .on { display: block; }
.dg-sv-seen { display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(0, 0, 0, .35); color: #fff; border-radius: 999px; padding: 8px 14px; font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; }
.dg-sv-seen[hidden] { display: none; }
.dg-sv-seen img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.dg-sv-x { position: absolute; top: 14px; right: 18px; z-index: 5; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.dg-sv-user { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); display: grid; place-items: center; cursor: pointer; flex: none; }
.dg-sv-user img { width: 9px; height: 15px; filter: brightness(0); }
.dg-sv-user[hidden] { visibility: hidden; display: grid; }
/* the author's "Seen by" sheet */
.dg-sv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 70%; background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
.dg-sv-sheet[hidden] { display: none; }
.dg-sv-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #EFF3F4; font: 700 16px Inter, system-ui, sans-serif; }
.dg-sv-sheet-h button { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }
.dg-sv-sheet-b { overflow-y: auto; padding: 6px 12px 14px; }
.dg-sv-sheet-b h4 { font: 700 14px Inter, system-ui, sans-serif; margin: 12px 4px 4px; color: #536471; }
.dg-sv-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; text-decoration: none; color: #0F1419; }
.dg-sv-rw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg-sv-rw b { font: 550 15px Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sv-rw small { color: #536471; font-size: 14px; }
.dg-sv-rw em { font-style: normal; font-size: 14px; color: #0F1419; margin-top: 2px; }
.dg-sv-heart { width: 20px; height: 20px; }
.dg-sv-none { color: #536471; text-align: center; margin: 18px 0; }
.dg-sv-wait { height: 46px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F4, #F7F9FA, #EEF1F4); background-size: 200% 100%; animation: dgsvw 1.2s infinite linear; margin: 8px 0; }
@keyframes dgsvw { to { background-position: -200% 0; } }

@media (max-width: 767px) {
  .dg-stray { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 8px; }
  .dg-sv { background: #000; gap: 0; }
  .dg-sv-stage { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .dg-sv-user { display: none !important; }
  .dg-sv-x { top: 22px; right: 4px; z-index: 7; }
  .dg-sv-head { right: 48px; }
}
.dg-sv-tools button[hidden] { display: none; }
.dg-sv-del svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* the highlights (profile circles row) and New highlight */
.dg-ptop .otherprofileslider .dg-hl button { display: flex; flex-direction: column; align-items: center; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.dg-ptop .otherprofileslider .dg-hl img, .dg-ptop .otherprofileslider .dg-hl .dg-pinit { border-color: #CFD9DE !important; box-shadow: 0 0 0 2px #fff inset; }
.dg-ptop .otherprofileslider .dg-hl-new .dg-pinit { background: #F2F4F6 !important; display: grid; place-items: center; border-style: dashed !important; }
.dg-ptop .otherprofileslider .dg-hl-new .dg-pinit img { width: 26px !important; height: 26px !important; border: 0 !important; filter: brightness(0) opacity(.55); box-shadow: none; }
.dg-hlform-h { font: 700 18px Inter, system-ui, sans-serif; }
.dg-hlform label { display: block; font-weight: 600; font-size: 14px; margin-top: 10px; }
.dg-hlform input[type=text] { display: block; width: 100%; margin-top: 4px; }
.dg-hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.dg-hl-pick { position: relative; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; margin: 0 !important; }
.dg-hl-pick img, .dg-hl-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-hl-pick input { position: absolute; opacity: 0; }
.dg-hl-pick i { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); }
.dg-hl-pick input:checked ~ i { background: #E21B2D; }
.dg-hl-pick input:checked ~ i::after { content: '✓'; color: #fff; font-size: 12px; display: grid; place-items: center; height: 100%; }

.dg-sv-flag svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.dg-sv-reason { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #EFF3F4; background: none; padding: 12px 6px; font: 15px Inter, system-ui, sans-serif; color: #0F1419; cursor: pointer; }
.dg-sv-reason:hover { background: #F7F9FA; }