/* video-reels-1.css
   Vertical Reels viewer for /video-page (Video Reels plan, docs/plans/video-reels-tiktok-plan-2026-05-30.md, Phase C,
   2026-09-04). Markup is built by js/video-reels-1.js: #vreels.vreels > .vreels-scroller > .vreels-slide >
   [.vreels-card (poster img, lazy <video>, .vreels-tap, .vreels-scrim-*, .vreels-muted-badge, .vreels-playicon,
   .vreels-userinfo, .vreels-progress, .vreels-hint) + .vreels-sidebar (.vreels-nav up/down + .vreels-actions with the
   plugin's global .vid-fb-action buttons)] + .vreels-sentinel/.vreels-spinner/.vreels-end, and a fixed .vreels-close.
   PHONES (max-width 768 or a coarse pointer at any width - the viewer stays open when a phone rotates): the card fills
   the slide, the action column floats bottom-right, the nav arrows are hidden (you swipe).
   DESKTOP (owner 2026-09-04): YouTube Shorts layout - a 9:16 card in the middle, the advertiser + "View profile"
   overlaid inside it, ONE column beside the card holding the up/down arrows and like / save / views / sound.
   Fresh container classes on purpose: the plugin's .vid-fb-sidebar / .vid-fb-userinfo / .vid-fb-close carry desktop
   position:fixed geometry, only its button classes are reused (they are global) and neutralised below. */

/* ==== shell (every width) ==== */
.vreels { position: fixed; inset: 0; z-index: 2147483600; display: none; background: #000; color: #fff; font-family: "National 2", "S\00F6hne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
.vreels.is-open { display: block; }
body.vreels-open { overflow: hidden !important; }
.vreels-scroller { position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; scrollbar-width: none; }
.vreels-scroller::-webkit-scrollbar { display: none; }
.vreels-slide { position: relative; height: 100%; /* of the fixed inset:0 shell = the visible screen; more reliable than 100dvh once a phone rotates */ box-sizing: border-box; padding: 0 !important; margin: 0 !important; min-height: 0; border: 0; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; }
.vreels-card { position: absolute; inset: 0; overflow: hidden; background: #000; }
.vreels-poster, .vreels-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vreels-poster { z-index: 1; transition: opacity 240ms ease; }
.vreels-slide.is-playing .vreels-poster { opacity: 0; }
.vreels-card video { z-index: 0; }
.vreels-tap { position: absolute; inset: 0; z-index: 2; }
/* soft scrims so the white chrome always reads over bright frames (TikTok/Reels do the same) */
.vreels-scrim-top, .vreels-scrim-bottom { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.vreels-scrim-top { top: 0; height: 120px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }
.vreels-scrim-bottom { bottom: 0; height: 260px; background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)); }

/* Instagram-style running bar: thin, at the very bottom of the card, above the home-indicator inset, on top of the scrims */
.vreels-progress { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px)); height: 3px; z-index: 7; background: rgba(255, 255, 255, 0.28); }
.vreels-progress-fill { display: block; width: 0; height: 100%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); transition: width 250ms linear; }

/* close (fixed, top right, safe-area aware) */
.vreels-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2147483601; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; margin: 0; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vreels-close svg { width: 18px; height: 18px; display: block; }
.vreels-close:active { transform: scale(0.94); }
.vreels-close:focus:not(:focus-visible) { outline: none; }
.vreels-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }   /* keyboard users get a white ring instead of the theme's orange one */

/* muted badge (per slide, shown by JS while the active video plays muted - never a global flag) */
.vreels-muted-badge { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 5; display: none; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; transition: padding 200ms ease; }
.vreels-muted-badge svg { width: 16px; height: 16px; display: block; }
.vreels-slide.is-muted-playing .vreels-muted-badge { display: inline-flex; }
.vreels-slide.is-badge-collapsed .vreels-muted-badge { padding: 0 9px; }   /* after 3 s the label folds away, the speaker stays as the reminder */
.vreels-slide.is-badge-collapsed .vreels-muted-badge span { display: none; }

/* pause glyph (only while user-paused) */
.vreels-playicon { position: absolute; left: 50%; top: 50%; z-index: 5; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); display: none; align-items: center; justify-content: center; pointer-events: none; }
.vreels-playicon svg { width: 32px; height: 32px; margin-left: 4px; display: block; }
.vreels-slide.is-paused .vreels-playicon { display: flex; }

/* ==== action column (reuses the plugin's global button classes, neutralised) ==== */
.vreels-sidebar { position: absolute; right: 10px; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vreels-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vreels-nav { display: none; flex-direction: column; align-items: center; gap: 8px; }
.vreels .vid-fb-action { position: static !important; background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; width: auto !important; height: auto !important; right: auto !important; left: auto !important; bottom: auto !important; top: auto !important; padding: 4px 0 !important; min-width: 44px !important; margin: 0 !important; gap: 4px !important; display: flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; cursor: pointer; font-family: inherit; }   /* 44px tap target; every geometry property carries !important because the plugin's >=769px rules do (Codex) */
.vreels .vid-fb-action { border-radius: 999px !important; }   /* the plugin's desktop block has 14px !important; the focus ring follows the radius */
.vreels .vid-fb-action i { font-size: 28px !important; line-height: 1 !important; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.vreels .vid-fb-action .vreels-ico { width: 30px; height: 30px; display: block; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)); transition: transform 160ms ease; }
.vreels .vid-fb-action:active .vreels-ico { transform: scale(0.88); }
.vreels .vid-fb-action span { font-size: 12px !important; line-height: 14px !important; font-weight: 600 !important; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.vreels .vid-fancybox-like.liked .vreels-ico { color: #ff2d55; fill: #ff2d55; animation: vreels-pop 320ms ease; }   /* outline heart, filled red once liked */
.vreels .vid-fancybox-save.saved i { color: #f59e0b; }
.vreels .vid-fb-views-action { cursor: default; }
/* sound toggle: one glyph at a time */
.vreels .vreels-sound { cursor: pointer; }
.vreels .vreels-sound .vreels-ico + .vreels-ico { display: none; }
.vreels-slide.is-sound-on .vreels-sound .vreels-ico { display: none; }
.vreels-slide.is-sound-on .vreels-sound .vreels-ico + .vreels-ico { display: block; }
.vreels-navbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; margin: 0; background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 120ms ease, opacity 120ms ease; }
.vreels-navbtn .vreels-ico { width: 22px; height: 22px; display: block; }
.vreels-navbtn:hover { background: rgba(255, 255, 255, 0.22); }
.vreels-navbtn:disabled { opacity: 0.3; cursor: default; }
.vreels-navbtn:focus:not(:focus-visible) { outline: none; }
/* keyboard focus: one white ring for every control inside the viewer */
.vreels button:focus:not(:focus-visible), .vreels a:focus:not(:focus-visible) { outline: none; }
.vreels button:focus-visible, .vreels a:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; border-radius: 999px; }
@keyframes vreels-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ==== bottom-left: advertiser + caption (overlaid inside the card on every width) ==== */
.vreels-userinfo { position: absolute; left: 14px; right: 76px; bottom: calc(48px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.vreels-user-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; max-width: 100%; }
.vreels-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.92); background: #222; flex: none; }
.vreels-username { font-size: 15px; line-height: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vreels-caption { font-size: 14px; line-height: 19px; font-weight: 400; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vreels-caption:empty { display: none; }
.vreels-visit { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font-size: 13px; line-height: 16px; font-weight: 500; text-decoration: none; background: rgba(0, 0, 0, 0.18); }
.vreels-visit:hover { background: rgba(255, 255, 255, 0.16); }
.vreels-visit svg { width: 14px; height: 14px; display: block; }

/* ==== swipe hint (phones, every open, gone on the first scroll) ==== */
.vreels-hint { position: absolute; left: 50%; top: 56%; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 13px; line-height: 16px; font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; transition: opacity 400ms ease; }
.vreels-hint-hand { display: block; width: 34px; height: 34px; animation: vreels-swipe 1.5s ease-in-out infinite; }
.vreels-hint-hand svg, .vreels-hint > svg { width: 100%; height: 100%; display: block; }
.vreels-hint > svg { width: 22px; height: 22px; opacity: 0.9; animation: vreels-swipe-chev 1.5s ease-in-out infinite; }
.vreels-hint.is-out { opacity: 0; }
@keyframes vreels-swipe { 0% { transform: translateY(18px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(-14px); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes vreels-swipe-chev { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ==== feed tail ==== */
.vreels-sentinel { height: 1px; }
.vreels-spinner { display: none; width: 28px; height: 28px; margin: 24px auto; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: vreels-spin 0.8s linear infinite; }
.vreels.is-loading .vreels-spinner { display: block; }
.vreels-end { display: none; height: 100%; align-items: center; justify-content: center; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 20px; padding: 0 32px; scroll-snap-align: start; }
.vreels.is-ended .vreels-end { display: flex; }
.vreels.is-single-source .vreels-end, .vreels.is-single-source .vreels-spinner { display: none !important; }   /* a profile's own videos: no feed, no end card */
@keyframes vreels-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .vreels-poster { transition: none; } .vreels-progress-fill { transition: none; } .vreels-hint-hand, .vreels-hint > svg { animation: none; } }

/* ==== rotated phone (short viewport): tighten the chrome so nothing collides ==== */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
.vreels-sidebar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); gap: 8px; }
.vreels-actions { gap: 8px; }
.vreels .vid-fb-action .vreels-ico { width: 24px; height: 24px; }
.vreels .vid-fb-action i { font-size: 24px !important; }
.vreels-userinfo { left: calc(14px + env(safe-area-inset-left, 0px)); right: 90px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
.vreels-caption { -webkit-line-clamp: 1; }
.vreels-scrim-bottom { height: 150px; }
.vreels-muted-badge { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); }
.vreels-close { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
}

/* ==== DESKTOP: YouTube Shorts layout (fine pointer, wide) ==== */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
.vreels { background: #0f0f0f; }
.vreels-slide { display: flex; align-items: center; justify-content: center; gap: 20px; background: transparent; }
.vreels-card { position: relative; inset: auto; flex: none; height: calc(100vh - 48px); width: calc((100vh - 48px) * 9 / 16); max-width: calc(100vw - 220px); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.vreels-sidebar { position: static; right: auto; bottom: auto; flex: none; height: calc(100vh - 48px); width: 56px; gap: 0; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; }   /* arrows in the vertical middle (owner), actions at the bottom */
.vreels-nav { display: flex; grid-row: 2; }
.vreels-actions { grid-row: 3; align-self: end; }
.vreels-actions { gap: 14px; }
/* YouTube-style round chips: the glyph sits in a 48px disc, the label under it */
.vreels .vid-fb-action { padding: 0 !important; min-width: 56px !important; gap: 6px !important; }
.vreels .vid-fb-action .vreels-ico, .vreels .vid-fb-action i { box-sizing: border-box; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); filter: none; text-shadow: none; transition: background-color 120ms ease, transform 160ms ease; }
.vreels .vid-fb-action i { display: flex; align-items: center; justify-content: center; font-size: 20px !important; line-height: 1 !important; }
.vreels .vid-fb-action:hover .vreels-ico, .vreels .vid-fb-action:hover i { background: rgba(255, 255, 255, 0.22); }
.vreels .vid-fb-action span { font-size: 12px !important; line-height: 14px !important; font-weight: 500 !important; text-shadow: none; }
.vreels .vid-fancybox-like.liked .vreels-ico { background: rgba(255, 45, 85, 0.18); }
.vreels-navbtn { width: 48px; height: 48px; }
.vreels-userinfo { right: 20px; left: 16px; bottom: 20px; }
.vreels-scrim-bottom { height: 220px; }
.vreels-muted-badge { top: 14px; left: 14px; }
.vreels-progress { bottom: 0; }
/* owner 2026-09-04: the close button sits at the TOP of the icon column (same vertical line as like / save / views / sound), not in the
   viewport's far top-right corner. The column is centred with the card by the slide's flex (card + 20px gap + 56px column), so its centre
   is 50vw + card width / 2 + 10px; the card width is the same min() the card rule uses. A fixed element, so it never scrolls with the slides. */
.vreels-close { top: 24px; right: auto; left: calc(50% + min((100vh - 48px) * 9 / 16, 100vw - 220px) / 2 - 14px); width: 48px; height: 48px; background: rgba(255, 255, 255, 0.12); }
.vreels-close:hover { background: rgba(255, 255, 255, 0.22); }
.vreels-hint { display: none; }
.vreels-end { height: 100%; }
}