/* ------------------------------- */
/* Reels viewer (__ng_reels.tpl, __feeds_reel.tpl; niguro-reels.js): /reels, /reels/{id} and a reel's own post
   page. Instagram's desktop Reels structure, Niguro's colours (tokens only; the video's own black is the
   letterbox, and phones get the viewers' dark stage #0b0c0e, as the photo lightbox).
   Desktop (1024px up): the site's header and rail stay; on the plain page the 9:16 video fills the height
   (24px under the header's cloud, 16px above the bottom, rounded), its actions in a column beside it aligned
   to its bottom, up / down at the far right, and the comments panel (380px, the card colour) beside the actions;
   the video shrinks rather than overlap anything.
   Phones and tablets: full screen; the actions over the video's right, author and caption at the bottom left
   over a dark fade, the mute toggle top right, comments as a bottom sheet (the theme's sheets: handle, 24px
   corners, drag down to close). Safe areas respected. Moved here from niguro.css (2026-10-17). */
/* ------------------------------- */

html:has(.ng-reels), body:has(.ng-reels) { overflow: hidden; overscroll-behavior: none; }
body:has(.ng-reels) :is(.chat-widget, .chat-sidebar, .footer, .ng-footer, .ng-totop) { display: none !important; }
/* swipes belong to the reels (no pull-to-refresh); an open caption still scrolls */
.ng-reels .reel-video-wrapper { touch-action: none; }
.ng-reels .ng-reel__caption.is-open .post-text { touch-action: pan-y; }

.ng-reels {
  --ng-rv-acts: 64px;      /* the actions column and its gap */
  --ng-rv-side: 96px;      /* room at each side (the up / down buttons on the right) */
  --ng-rv-panel: 380px;    /* the comments panel */
  --ng-rv-gap: 16px;
  --ng-rv-r: var(--ng-r-md, 14px);
  position: fixed; z-index: 10; top: 56px; left: 84px; right: 0; bottom: 0;
  background: var(--ng-canvas); color: var(--ng-ink);
}
body.n_activated .ng-reels, body.n_live .ng-reels { top: 106px; }

/* the bar (phones): close and "Reels" */
.ng-reels__bar { display: none; }
.ng-reels__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ng-sub); }
.ng-reels__empty .ng-ico { width: 48px; height: 48px; }
.ng-reels__empty b { font-size: 17px; color: var(--ng-ink); }

/* Sngine's wrappers: the viewer's area, no black, no transform (the reactions tray and the comments sheet are
   position: fixed, so no ancestor may transform) */
.ng-reels .reels-wrapper { position: absolute; inset: 0; z-index: 1; background: transparent; }
.ng-reels .reels-loader {
  top: auto; bottom: 24px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; z-index: 5;
  background: var(--ng-card); color: var(--ng-ink); box-shadow: var(--ng-shadow-lg); font-size: 13px; font-weight: 600;
}
.ng-reels .reel-container { position: absolute; inset: 0; width: auto; height: auto; padding: 0; background: transparent; transform: none; transition: none; }
.ng-reels .reel-container.swipe-up, .ng-reels .reel-container.swipe-down { transform: none; }
.ng-reels .reel-container.swipe-up .ng-reel__stage { opacity: 0; translate: 0 -32px; transition: opacity .1s linear, translate .1s ease-in; }
.ng-reels .reel-container.swipe-down .ng-reel__stage { opacity: 0; translate: 0 32px; transition: opacity .1s linear, translate .1s ease-in; }
.ng-reels .reel-container:not(.hidden) .ng-reel__stage { animation: ng-reel-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes ng-reel-in { from { opacity: 0; } to { opacity: 1; } }
.ng-reels .reel-container.hidden { pointer-events: none; }

/* the stage: [video | actions | comments] centred, up / down at the far right */
.ng-reel__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px var(--ng-rv-side) 16px; transition: padding .32s cubic-bezier(.2, .8, .2, 1); }
.ng-reel__group { position: relative; display: flex; align-items: flex-end; gap: var(--ng-rv-gap); max-width: 100%; }

/* the video: 9:16, the full height; narrower screens (or the comments open) shrink it */
.ng-reels .reel-video-wrapper.ng-reel__media {
  --ng-rv-w: calc(100vw - 84px - 2 * var(--ng-rv-side) - var(--ng-rv-acts));
  position: relative; flex: none; display: block; width: auto !important;
  height: min(calc(100dvh - 56px - 40px), calc(var(--ng-rv-w) * 16 / 9));
  aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--ng-rv-r); background: #000; color: #fff;
  transition: height .32s cubic-bezier(.2, .8, .2, 1);
}
body.n_activated .ng-reels .reel-video-wrapper.ng-reel__media, body.n_live .ng-reels .reel-video-wrapper.ng-reel__media { height: min(calc(100dvh - 106px - 40px), calc(var(--ng-rv-w) * 16 / 9)); }
/* comments open: the left side narrows to 24px before the video shrinks */
.ng-reels .reel-container.comments-shown .ng-reel__stage { padding-left: 24px; }
.ng-reels .reel-container.comments-shown .reel-video-wrapper.ng-reel__media { --ng-rv-w: calc(100vw - 84px - var(--ng-rv-side) - 24px - var(--ng-rv-acts) - var(--ng-rv-panel) - var(--ng-rv-gap)); width: auto; }
.ng-reels .reel-video-wrapper .reel-video-container { position: absolute; inset: 0; max-width: none; width: 100%; height: 100%; margin: 0; }
.ng-reels .reel-video-container .plyr { height: 100%; background: #000; }
.ng-reels .reel-video-container .plyr__video-wrapper { height: 100%; padding-bottom: 0 !important; aspect-ratio: auto !important; background: #000; }
.ng-reels .reel-video-container video { width: 100%; height: 100%; object-fit: contain; }
.ng-reels .reel-video-container .plyr__poster { background-size: contain; }

/* Plyr: the play button in the middle while paused, the mute toggle at the bottom right */
.ng-reels .reel-video-container .plyr__control--overlaid {
  width: 72px; height: 72px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: hsl(0 0% 0% / .42); color: #fff; box-shadow: none;
}
.ng-reels .reel-video-container .plyr__control--overlaid svg { width: 26px; height: 26px; left: 2px; }
.ng-reels .reel-video-container .plyr__control--overlaid:hover, .ng-reels .reel-video-container .plyr__control--overlaid:focus-visible { background: hsl(0 0% 0% / .58); }
.ng-reels .reel-video-container .plyr__controls {
  position: absolute; z-index: 3; top: auto; left: auto; right: 12px; bottom: 22px; /* [Reel progress]: clear of the line */ width: auto; padding: 0; background: transparent; opacity: 1; transform: none;
}
.ng-reels .reel-video-container .plyr__controls .plyr__control {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: hsl(0 0% 0% / .45); color: #fff;
}
.ng-reels .reel-video-container .plyr__controls .plyr__control:hover { background: hsl(0 0% 0% / .62); }
.ng-reels .reel-video-container .plyr__controls .plyr__control svg { width: 16px; height: 16px; }
.ng-reels .reel-video-container .plyr__control:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- niguro [Reel progress] (begin) — (owner, 2026-10-19) one thin line across the video's foot, under the author,
   caption and actions (never over them): a 2px translucent white track with the brand fill, 4px while seeking
   (or hovered / focused; no knob: the line sits on the video's clipped foot). The hit area is 14px tall (the line
   at its foot); a tap jumps, a drag scrubs (niguro-reels.js "[Reel progress]"; the fill follows currentTime every
   frame while playing). Plyr's own
   progress and time are never shown on reels. Phones: above the home bar (safe area). ---- */
.ng-reels .reel-video-container :is(.plyr__progress__container, .plyr__progress, .plyr__time) { display: none !important; }
.ng-reel__prog {
  --ng-rp: 0; --ng-rp-h: 2px;
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 14px; display: flex; align-items: flex-end;
  direction: ltr; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: 0;
}
.ng-reel__track { position: relative; flex: 1; height: var(--ng-rp-h); background: hsl(0 0% 100% / .3); transition: height .15s ease; }
.ng-reel__fill { position: absolute; inset: 0; background: var(--ng-brand); transform-origin: 0 50%; transform: scaleX(var(--ng-rp)); will-change: transform; }
.ng-reel__prog:is(.is-seeking, :focus-visible) { --ng-rp-h: 4px; }
.ng-reel__prog:focus-visible .ng-reel__track { box-shadow: 0 0 0 2px hsl(0 0% 100% / .9); }
@media (hover: hover) { .ng-reel__prog:hover { --ng-rp-h: 4px; } }
/* ---- niguro [Reel progress] (end) ---- */

/* author, follow, time / group and caption over the video's bottom left */
.ng-reel__info {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 64px 60px 20px 14px; /* [Reel progress]: 20px under, clear of the line */
  background: linear-gradient(180deg, transparent, hsl(0 0% 0% / .62)); pointer-events: none; color: #fff;
}
.ng-reel__info > * { pointer-events: auto; }
.ng-reel__by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ng-reel__ava {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: hsl(0 0% 100% / .2); box-shadow: 0 0 0 1.5px hsl(0 0% 100% / .9); color: #fff;
}
.ng-reel__ava img { width: 100%; height: 100%; object-fit: cover; }
.ng-reel__ava .ng-ico { width: 18px; height: 18px; }
.ng-reel__who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ng-reel__line { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; line-height: 1.3; }
.ng-reel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #fff !important; text-decoration: none; }
.ng-reel__name:hover { text-decoration: underline; }
.ng-reel__line .verified-badge { flex: none; display: inline-flex; }
.ng-reel__line .ng-follow { flex: none; color: hsl(0 0% 100% / .85); }
.ng-reel__line .ng-follow__btn { color: #fff; }
.ng-reel__line .ng-follow__btn.is-done { color: hsl(0 0% 100% / .75); }
.ng-reel__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.35; color: hsl(0 0% 100% / .82); }
.ng-reel__sub a { color: inherit !important; text-decoration: none; }
.ng-reel__sub a:hover { color: #fff !important; text-decoration: underline; }
.ng-reel__info :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
/* the caption: two lines, "See more" when there is more; a tap opens it (Sngine's read-more is off here) */
.ng-reel__caption { margin-top: 8px; font-size: 14px; line-height: 1.4; color: #fff; cursor: pointer; }
.ng-reel__caption .post-text {
  height: auto !important; max-height: none !important; margin: 0; padding: 0; color: #fff; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ng-reel__caption.is-open .post-text { display: block; -webkit-line-clamp: unset; max-height: 38vh !important; overflow-y: auto; overscroll-behavior: contain; }
.ng-reel__caption [data-readmore-toggle], .ng-reel__caption .post-text-translation:empty { display: none !important; }
.ng-reel__caption :is(a, .post-text a) { color: #fff; font-weight: 700; }
.ng-reel__more { display: none; margin: 2px 0 0; padding: 0; border: 0; background: none; color: #fff; font-size: 13.5px; font-weight: 700; opacity: .9; }
.ng-reel__caption.has-more .ng-reel__more, .ng-reel__caption.is-open .ng-reel__more { display: inline-block; }

/* the actions column, beside the video, aligned to its bottom: plain icons in the ink colour, counts under */
.ng-reels .ng-reel__acts { flex: none; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ng-reels .ng-reel__act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ng-reels .ng-reel__acts .action-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ng-ink); cursor: pointer; text-decoration: none; transition: background-color .15s, scale .15s;
}
.ng-reels .ng-reel__acts .action-btn:hover { background: var(--ng-fill); }
.ng-reels .ng-reel__acts .action-btn:not(.reactions-wrapper):active { scale: .92; }
/* [reactions fix] the react button shrinks its icon only: a scale on the wrapper itself would make it the fixed tray's
   containing block, so pressing a reaction moved the tray from under the pointer and only Like (the button) worked */
.ng-reels .ng-reel__acts .reactions-wrapper > .reaction-btn { transition: scale .15s; }
.ng-reels .ng-reel__acts .reactions-wrapper:active:not(:has(.reactions-container:active)) > .reaction-btn { scale: .92; }
.ng-reels .ng-reel__acts .action-btn.is-static { cursor: default; }
.ng-reels .ng-reel__acts .action-btn.is-static:hover { background: transparent; }
.ng-reels .ng-reel__acts .action-btn:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 0; }
/* [Action icons: one size] (niguro.css): the reels column's tokens, its icons 26px */
.ng-reels .ng-reel__acts { --ng-pbar-ico: 26px; }
.ng-reels .ng-reel__acts .action-btn .ng-ico, .ng-reels .ng-reel__acts .action-btn i { width: var(--ng-pbar-ico); height: var(--ng-pbar-ico); font-size: 24px; color: inherit; }
/* Sngine's action icon colour (palette.css, !important) gives way to the button's: ink on the page, white over the video */
.ng-reels .ng-reel__acts .action-btn .action-icon { color: inherit !important; }
.ng-reels .ng-reel__acts .reaction-btn, .ng-reels .ng-reel__acts .reaction-btn-icon { display: grid; place-items: center; }
.ng-reels .ng-reel__acts .reaction-btn-icon .fa-smile::before { content: "\f164"; }
.ng-reels .ng-reel__acts .action-btn .inline-emoji { display: grid; place-items: center; width: var(--ng-pbar-ico); height: var(--ng-pbar-ico); background: none; }
.ng-reels .ng-reel__acts .action-btn .inline-emoji .emoji { position: static; width: calc(var(--ng-pbar-ico) * .875); height: calc(var(--ng-pbar-ico) * .875); transform: none; top: auto; right: auto; display: block; }
.ng-reels .ng-reel__acts .action-btn .inline-emoji .emoji img { display: block; width: 100%; height: 100%; }
.ng-reels .ng-reel__n { display: block; margin: 0; min-height: 15px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ng-ink); cursor: pointer; }
.ng-reels .ng-reel__n.x-hidden { display: block !important; visibility: hidden; }
/* save: the bookmark fills when saved */
.ng-reels .ng-reel__save.js_unsave-post .ng-ico path { fill: currentColor; }
/* the save and ⋯ wrappers are .post for post.js: none of a post card's look */
.ng-reels .ng-reel__post.post { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ng-reels .ng-reel__post .dropdown-menu { min-width: 240px; color: var(--ng-ink); text-align: start; }
/* the author, last */
.ng-reel__me { display: block; width: 30px; height: 30px; margin-top: 4px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px var(--ng-line); }
.ng-reel__me img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ng-reel__me:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
/* the reactions tray (niguro.js places it, fixed, over the button) */
.ng-reels .ng-reel__acts .reactions-container { z-index: 20; }
.ng-reels .ng-reel__acts .reactions_item:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; border-radius: 50%; }

/* up / down: round buttons at the far right, vertically centred */
.ng-reel__nav { position: absolute; z-index: 3; top: 50%; right: 24px; translate: 0 -50%; display: flex; flex-direction: column; gap: 12px; }
.ng-reel__nav button {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--ng-card); color: var(--ng-ink); box-shadow: 0 1px 2px hsl(0 0% 0% / .06), 0 4px 14px hsl(0 0% 0% / .1);
  transition: background-color .15s, opacity .15s;
}
.ng-reel__nav button:hover { background: var(--ng-fill); }
.ng-reel__nav button:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-reel__nav button:disabled { opacity: .4; cursor: default; }
.ng-reel__nav button:disabled:hover { background: var(--ng-card); }
.ng-reel__nav .ng-ico { width: 22px; height: 22px; }
body.night-mode .ng-reel__nav button { box-shadow: 0 1px 2px hsl(0 0% 0% / .3), 0 4px 14px hsl(0 0% 0% / .3); }

/* the comments panel, beside the actions: the card colour, rounded, as tall as the video; the title and close,
   Sngine's comments scrolling (their look is the theme's comment threads), the comment box pinned at the foot.
   Closed it is 0 wide but laid out at its full width inside, so Sngine's comment box measures the real width. */
.ng-reels .reel-comments-wrapper.ng-reel__comments {
  position: relative; inset: auto; flex: none; align-self: stretch; display: flex; flex-direction: column;
  width: 0; min-width: 0; margin-inline-start: calc(-1 * var(--ng-rv-gap)); overflow: hidden; contain: size;
  border-radius: var(--ng-r, 18px); background: var(--ng-card); color: var(--ng-ink);
  visibility: hidden; opacity: 0;
  transition: width .32s cubic-bezier(.2, .8, .2, 1), margin .32s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility .32s;
}
.ng-reels .reel-comments-wrapper.ng-reel__comments > * { width: var(--ng-rv-panel); }
.ng-reels .reel-container.comments-shown .reel-comments-wrapper.ng-reel__comments { width: var(--ng-rv-panel); margin-inline-start: 0; visibility: visible; opacity: 1; }
body.night-mode .ng-reels .reel-comments-wrapper.ng-reel__comments { background: var(--ng-card); }
.ng-reel__chead { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--ng-line); }
.ng-reel__ctitle { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--ng-ink-strong); outline: 0; }
.ng-reel__ctitle span { font-weight: 600; color: var(--ng-sub); }
.ng-reel__cx .ng-ico { width: 18px; height: 18px; }
.ng-reel__cbody { --ng-pg: 16px; flex: 1 1 auto; min-height: 0; height: auto; padding: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* the reel itself is on the stage: only its comments here (the same arrangement as the photo viewer's panel and the
   comments sheet: the two wrappers step aside, the comment box is the scroller's last, sticky child) */
.ng-reel__cbody > .post-body { display: none !important; }
.ng-reel__cbody .post-footer, .ng-reel__cbody .post-comments { display: contents !important; }
.ng-reel__cbody .post-comments > .comments-filter { flex: none; order: 1; margin: 0; padding: 10px var(--ng-pg) 0; }
.ng-reel__cbody .post-comments > .js_comments-filter-loader { flex: none; order: 2; }
.ng-reel__cbody .post-comments > .js_comments { flex: none; order: 3; margin: 0; padding: 4px var(--ng-pg) 12px !important; }
.ng-reel__cbody .post-comments > .js_comments:empty { padding: 0 !important; }
.ng-reel__cbody .post-comments > .js_see-more { flex: none; order: 4; padding: 0 var(--ng-pg) 12px; }
.ng-reel__cbody .post-comments > :is(.js_comment-form, .js_comment-disabled-msg) {
  order: 9; position: sticky; z-index: 2; bottom: 0; flex: none; margin-top: auto !important;
  padding: 10px var(--ng-pg) 12px; border-top: 1px solid var(--ng-line); background: var(--ng-card);
}
.ng-reel__cbody .post-comments > .js_comment-form.x-hidden { display: none; }
.ng-reel__cbody .post-comments > .js_comment-disabled-msg { color: var(--ng-sub); font-size: 14px; }
.ng-reel__cbody .post-comments > .js_comment-form .emoji-menu { top: auto; bottom: calc(100% + 6px); }
/* no comments yet */
.ng-reel__cempty { display: none; order: 5; margin: 0; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--ng-sub); }
.ng-reel__cbody:not(:has(.js_comments > li)):not(:has(.js_comments-filter-loader[style*="block"])) > .ng-reel__cempty { display: block; }
.ng-reel__scrim { display: none; }
/* ---- niguro [Reel comments type] (begin) — (owner, 2026-10-19) the reel's comments read a step larger than the
   feed's, like the big apps' reel sheets: the theme's comment tokens ([Comment type], niguro.css) set here, names
   14px/600 with a muted "· 1d" after them (niguro-reels.js; the actions row then drops its time), text 15px, the
   actions 13px; 40px avatars (28px on replies; the thread lines follow the tokens); the sort ("Most Recent ⌄") at
   the top left in 14px. ---- */
.ng-reel__cbody { --ng-cmt-name: 14px; --ng-cmt-text: 15px; --ng-cmt-meta: 13px; --ng-cmt-more: 13px; }
.ng-reel__cbody .comment { --ng-rav: 28px; --ng-rind: 36px; }
.ng-reel__cbody .comment:not(.reply) { --ng-cav: 40px; --ng-cind: 50px; }
.ng-reel__cbody .comment-author { line-height: 19px; }
.ng-reel__cbody .comment-text { line-height: 1.4; }
.ng-reel__cbody .comment-actions { line-height: 20px; }
.ng-reel__cbody .comment-actions > li:has(> .js_moment) { display: none; }
.ng-reel__cbody .ng-cmt__ago { margin-inline-start: 2px; font-size: 13px; font-weight: 400; color: var(--ng-sub); white-space: nowrap; }
.ng-reel__cbody .post-comments > .comments-filter .btn-group > .btn { font-size: 14px !important; }
/* ---- niguro [Reel comments type] (end) ---- */

/* a screen not tall enough for the whole column: smaller actions */
@media (min-width: 1024px) and (max-height: 700px) {
  .ng-reels .ng-reel__acts { gap: 4px; --ng-pbar-ico: 23px; } /* [Action icons: one size] */
  .ng-reels .ng-reel__acts .action-btn { width: 40px; height: 40px; }
  .ng-reels .ng-reel__acts .action-btn .ng-ico, .ng-reels .ng-reel__acts .action-btn i { width: 23px; height: 23px; font-size: 21px; }
}

/* ------------------------------- */
/* Phones and tablets: full screen */
/* ------------------------------- */
@media (max-width: 1023.98px) {
  body:has(.ng-reels) :is(.main-header, .ng-pillnav, .ng-fab, .ng-rail) { display: none !important; }
  body:has(.ng-reels) { padding: 0 !important; }
  .ng-reels { inset: 0; z-index: 1035; background: #0b0c0e; color: #fff; }
  body.n_activated .ng-reels, body.n_live .ng-reels { top: 0; }
  .ng-reels__empty { color: hsl(0 0% 100% / .8); }
  .ng-reels__empty b { color: #fff; }
  /* the bar: close and "Reels" */
  .ng-reels__bar {
    position: absolute; z-index: 6; top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px));
    display: flex; align-items: center; gap: 8px; pointer-events: none;
  }
  .ng-reels__bar > * { pointer-events: auto; }
  .ng-reels__close {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    background: hsl(0 0% 0% / .3); color: #fff; transition: background-color .15s;
  }
  .ng-reels__close:hover { background: hsl(0 0% 0% / .45); color: #fff; }
  .ng-reels__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .ng-reels__close .ng-ico { width: 20px; height: 20px; }
  .ng-reels__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 3px hsl(0 0% 0% / .5); }

  .ng-reels .reel-container .ng-reel__stage, .ng-reels .reel-container.comments-shown .ng-reel__stage { padding: 0; transition: none; }
  .ng-reel__group { position: absolute; inset: 0; display: block; }
  .ng-reels .reel-video-wrapper.ng-reel__media,
  body.n_activated .ng-reels .reel-video-wrapper.ng-reel__media, body.n_live .ng-reels .reel-video-wrapper.ng-reel__media,
  .ng-reels .reel-container.comments-shown .reel-video-wrapper.ng-reel__media { position: absolute; inset: 0; width: 100% !important; height: 100%; aspect-ratio: auto; border-radius: 0; transition: none; }
  /* a tall video fills the screen; a wide one stays whole */
  .ng-reels .ng-reel__media[data-ng-shape="tall"] video { object-fit: cover; }
  .ng-reels .ng-reel__media[data-ng-shape="tall"] .plyr__poster { background-size: cover; }
  .ng-reels .reel-video-container .plyr__controls { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; right: calc(12px + env(safe-area-inset-right, 0px)); }
  .ng-reel__info { padding: 80px 76px calc(18px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); }
  /* [Reel progress] above the home bar; the caption (18px up) and the actions (14px up) stay clear of its 14px */
  .ng-reel__prog { bottom: env(safe-area-inset-bottom, 0px); }

  /* the actions over the video's right: white icons with a soft shadow */
  .ng-reels .ng-reel__acts {
    position: absolute; z-index: 3; right: calc(6px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 6px; width: 56px;
  }
  .ng-reels .ng-reel__acts .action-btn { color: #fff; }
  /* [reactions fix] the shadow goes on the icons, not on the react button: a filter there made the button the fixed
     tray's containing block, which pushed the tray off the screen */
  .ng-reels .ng-reel__acts .action-btn:not(.reactions-wrapper), .ng-reels .ng-reel__acts .reactions-wrapper > .reaction-btn { filter: drop-shadow(0 1px 2px hsl(0 0% 0% / .45)); }
  .ng-reels .ng-reel__acts .action-btn:hover { background: hsl(0 0% 100% / .12); }
  .ng-reels .ng-reel__acts .action-btn:focus-visible { outline-color: #fff; }
  .ng-reels .ng-reel__n { color: #fff; text-shadow: 0 1px 2px hsl(0 0% 0% / .5); }
  .ng-reel__me { box-shadow: 0 0 0 1.5px #fff; }
  .ng-reel__nav { display: none; }

  /* comments: a bottom sheet ([Niguro sheets]: the 40×5 handle, 24px corners, drag down to close) */
  .ng-reels .reel-comments-wrapper.ng-reel__comments,
  .ng-reels .reel-container.comments-shown .reel-comments-wrapper.ng-reel__comments {
    position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 74vh; height: 74dvh; margin: 0; contain: none;
    padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: 24px 24px 0 0; opacity: 1;
    padding-left: max(0px, calc(50% - 320px)); padding-right: max(0px, calc(50% - 320px));
    translate: 0 105%; transition: translate .26s cubic-bezier(.4, 0, .6, 1), visibility .26s;
  }
  .ng-reels .reel-container.comments-shown .reel-comments-wrapper.ng-reel__comments { translate: 0 0; transition: translate .32s cubic-bezier(.2, .8, .2, 1), visibility .32s; }
  .ng-reels .reel-comments-wrapper.ng-reel__comments > * { width: auto; }
  .ng-reels .reel-comments-wrapper.ng-reel__comments::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--ng-line); }
  .ng-reel__chead { padding: 6px 12px 10px 18px; }
  .ng-reel__ctitle { font-size: 19px; }
  .ng-reel__cbody .post-comments > :is(.js_comment-form, .js_comment-disabled-msg) { padding-bottom: 10px; }
  .ng-reel__scrim { display: block; position: fixed; z-index: 7; inset: 0; background: hsl(0 0% 0% / .5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; touch-action: none; }
  .ng-reels .reel-container.comments-shown .ng-reel__scrim { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-reels .reel-container:not(.hidden) .ng-reel__stage { animation: none; }
  .ng-reels .reel-container.swipe-up .ng-reel__stage, .ng-reels .reel-container.swipe-down .ng-reel__stage { translate: none; transition: opacity .01s; }
  .ng-reel__stage, .ng-reels .reel-video-wrapper.ng-reel__media, .ng-reels .reel-comments-wrapper.ng-reel__comments,
  .ng-reels .reel-container.comments-shown .reel-comments-wrapper.ng-reel__comments, .ng-reel__scrim { transition-duration: .01s; }
  .ng-reels .ng-reel__acts .action-btn:active, .ng-reels .ng-reel__acts .reactions-wrapper:active > .reaction-btn { scale: none; }
  .ng-reel__track { transition: none; } /* [Reel progress] */
}