/* Depends on: tokens.css -- linked as separate <link>
   tags by every template that uses this file, NOT @import-ed here.
   @import is a serialized waterfall: the browser cannot discover an
   imported file until it has downloaded and parsed the one importing
   it, so this site's deepest chain (tokens -> nav -> calendar ->
   event_detail) cost four sequential round trips before first paint.
   Separate links are all visible in the initial HTML and download in
   parallel. Templates list dependencies first, so the cascade is
   unchanged -- see core/tests/test_template_lint.py, which fails if
   an @import is reintroduced here. */
html, body { height: 100%; overflow: hidden; margin: 0; background: #000; }
body { color: var(--text-primary); font-family: var(--font-display); -webkit-font-smoothing: antialiased; font-size: 15px; }

/* Starts right of (or, on a phone, above) the global nav rail, which is drawn over it otherwise and
   used to hide the logo. contain: layout makes this box the containing block
   for the fixed-position header, tabs, FAB and overlay inside it, so their
   left: 0 / 50% are measured from here rather than from the viewport. */
.reels-shell { position: fixed; inset: 0; left: var(--rail-w, 0px); bottom: var(--rail-h, 0px); background: #000; contain: layout; }

/* ---------- Recientes / Tendencia tabs (overlaid, doesn't affect feed layout) ---------- */
.reels-tabs {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 39;
  display: flex; justify-content: center; gap: 8px; padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
  pointer-events: none;
}
.reels-tabs > * { pointer-events: auto; }
.reels-tab {
  padding: 6px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.1);
}
.reels-tab.active { background: #fff; color: #000; }

/* ---------- Flash messages (e.g. the pin cap) -- overlaid like the tabs,
   the page has no normal document flow to insert a block into. ---------- */
.reels-messages {
  position: fixed; top: 64px; left: 16px; right: 16px; z-index: 41;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.reels-msg {
  padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
}
.reels-msg.success { background: rgba(20, 20, 20, 0.85); border-color: var(--accent-line); color: var(--accent); }
.reels-msg.error { background: rgba(20, 20, 20, 0.85); border-color: rgba(255,84,112,0.35); color: var(--critical); }

/* ---------- Top bar ---------- */
.reels-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), transparent);
  pointer-events: none;
}
.reels-top > * { pointer-events: auto; }
.reels-brand img { height: 26px; width: auto; display: block; }
.reels-top-title {
  font-size: 15px; font-weight: 800; color: #fff;
  display: flex; align-items: center; gap: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reels-filter-back {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; font-size: 15px;
}
.reels-filter-back:hover { background: rgba(255,255,255,0.24); }
.reels-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.reels-login-btn {
  padding: 8px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
  background: var(--accent); color: #04150c;
}
.reels-login-btn:hover { background: var(--accent-strong); }

/* ---------- Feed: one full-viewport video at a time, snap-scrolled ---------- */
.reels-feed {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reels-feed::-webkit-scrollbar { display: none; }

.reel {
  position: relative; height: 100%; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.reel-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
  z-index: 1;
}
/* Sits behind .reel-video (z-index 1) and .reel-progress-track (z-index 11)
   but does not need its own stacking beyond that -- see the template for
   why this exists (letterboxing landscape footage without plain black
   bars, on every upload path, not just ones with a poster). object-fit:
   cover here (not .reel-video's contain) is intentional -- this layer is
   blurred past recognition either way, so cropping it to fill costs
   nothing, and filling completely is the point. scale(1.15) pushes the
   blur's own soft edge past the visible frame, since a blur radius this
   large would otherwise leave a faint unblurred ring right at the
   boundary. */
.reel-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(30px) brightness(0.45) saturate(1.15);
  transform: scale(1.15);
  pointer-events: none;
}

/* Desktop: center a phone-proportioned column so it reads as "vertical video",
   not a stretched full-bleed background -- same visual convention as TikTok/IG web.
   Only .reel itself and .reel-video are overridden here, not .reel-overlay-bottom/
   .reel-actions -- see the second @media block, further down, for why: those two
   have to come *after* their own base rules in the file (equal-specificity cascade
   is decided by source order, and a media query doesn't get any extra precedence
   just for being conditional), and their base rules live much further down this
   file than this one does. */
@media (min-width: 720px) {
  .reel { background: #050505; }
  /* object-fit: contain, not cover -- cover was cropping to fill this
     phone-shaped column, which for genuinely vertical phone footage is
     harmless but for landscape onboard/broadcast footage (this app's
     other real source of clips) crops real racing action off the top and
     bottom to force-fill a portrait box. Matches mobile's own contain,
     and matches how TikTok's own desktop web player actually handles
     non-vertical content -- letterboxed with a blurred fill (see
     .reel-backdrop), never hard-cropped. */
  .reel-video { width: min(100%, 460px); left: 50%; transform: translateX(-50%); object-fit: contain; border-radius: 14px; }
  .reel-backdrop { width: min(100%, 460px); left: 50%; right: auto; transform: translateX(-50%) scale(1.15); border-radius: 14px; }
}

/* A Reel with text in its letterbox (TL-006; the template adds .reel-framed): the clip's box is never
   wider than 9:16 of the feed's height, so its whole 9:16 frame -- the bars and the text in them -- stays
   on screen on a short phone or a short desktop window instead of being cut off at the top and bottom.
   The feed is the viewport minus the bottom rail (.reels-shell); vh first for browsers without dvh. */
.reel-framed .reel-video {
  left: 50%; transform: translateX(-50%);
  width: min(100%, calc((100vh - var(--rail-h, 0px)) * 9 / 16));
  width: min(100%, calc((100dvh - var(--rail-h, 0px)) * 9 / 16));
}
@media (min-width: 720px) {
  /* The caption overlay narrows with the clip, so it starts at the clip's left edge. */
  .reel-framed .reel-video, .reel-framed .reel-backdrop, .reel-framed .reel-overlay-bottom {
    width: min(100%, 460px, calc((100vh - var(--rail-h, 0px)) * 9 / 16));
    width: min(100%, 460px, calc((100dvh - var(--rail-h, 0px)) * 9 / 16));
  }
}

/* ---------- Playback progress bar (IG-Stories style) ---------- */
.reel-progress-track {
  position: absolute; top: 0; left: 0; right: 0; z-index: 11;
  height: 2.5px; background: rgba(255,255,255,0.25);
}
.reel-progress-fill { height: 100%; width: 0%; background: #fff; }
/* A finger-sized grab area around the thin line, so the bar can be dragged to seek. */
.reel-progress-track { touch-action: none; cursor: pointer; transition: height 0.12s; }
.reel-progress-track::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -8px; }
.reel-progress-track.scrubbing { height: 6px !important; }

/* ---------- Sound toggle ---------- */
.reel-sound-btn {
  position: absolute; top: 66px; right: 16px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.4); color: #fff; backdrop-filter: blur(4px);
}
.reel-sound-btn svg { width: 18px; height: 18px; }
.reel-sound-btn .icon-unmuted { display: none; }
.reel.unmuted .reel-sound-btn .icon-muted { display: none; }
.reel.unmuted .reel-sound-btn .icon-unmuted { display: block; }

/* ---------- Bottom overlay: author, caption, tags ---------- */
.reel-overlay-bottom {
  position: absolute; left: 0; right: 76px; bottom: 0; z-index: 8;
  padding: 60px 14px 22px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78) 60%);
}
.reel-author { display: inline-flex; align-items: center; gap: 9px; }
.reel-av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid #fff;
  font-weight: 800; font-size: 14px; color: #fff;
}
.reel-av img { width: 100%; height: 100%; object-fit: cover; }
.reel-author-name { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.reel-check { width: 13px; height: 13px; color: var(--accent); }
.reel-follow-form { display: inline-block; margin-left: 10px; vertical-align: middle; }
.reel-follow-btn {
  padding: 5px 12px; border-radius: 100px; font-size: 11.5px; font-weight: 800;
  background: var(--accent); color: #04150c;
}
.reel-follow-btn:hover { background: var(--accent-strong); }
.reel-caption { font-size: 13.5px; line-height: 1.5; margin: 10px 0 0; max-width: 88%; }

/* ---------- Double-tap-to-nitro flame burst ---------- */
.reel-like-burst {
  position: absolute; top: 50%; left: 50%; z-index: 12;
  width: 110px; height: 110px; margin: -55px 0 0 -55px;
  color: #fff; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
  opacity: 0; pointer-events: none;
}
.reel-like-burst.burst { animation: reel-nitro-burst 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes reel-nitro-burst {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; transform: scale(1.15); }
  55% { transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1); }
}
.reel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* The author's "who sees it" picker, drawn as one more tag (reel visibility spec RV-004). */
.reel-visibility-form { margin: 0; }
.reel-tag.reel-visibility-select { appearance: none; -webkit-appearance: none; border: 0; font-family: inherit; cursor: pointer; padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.reel-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 100px; background: rgba(255,255,255,0.14); color: #fff;
  backdrop-filter: blur(3px);
}
.reel-tag:hover { background: rgba(255,255,255,0.24); }
.reel-tag svg { width: 12px; height: 12px; }
.reel-tag.telemetry { background: var(--accent-soft); color: var(--accent-strong); }
.reel-tag.telemetry b { color: #fff; }
.reel-tag.pinned-tag { background: var(--accent); color: #04150c; }

/* ---------- Right action rail ---------- */
.reel-actions {
  position: absolute; right: 10px; bottom: 28px; z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.reel-kudos-form, .reel-delete-form { margin: 0; }
.reel-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; background: none; border: none; cursor: pointer;
}
.reel-action-btn svg {
  width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.reel-count { font-size: 11.5px; font-weight: 700; }
.kudos-btn.on svg { fill: var(--amber); stroke: var(--amber); }
.kudos-btn.pop svg { animation: reel-pop 0.32s ease; }
@keyframes reel-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.reel-views { cursor: default; }
.delete-btn:hover svg { color: var(--critical); }
.pin-btn.on svg { color: var(--accent); }
.pin-btn:hover svg { color: var(--accent); }
.save-btn.on svg { color: var(--accent); }

/* Desktop override for the bottom overlay and action rail, positioned here
   (after both of their base rules above) on purpose -- equal-specificity
   CSS cascades by source order, and a @media block earlier in the file
   loses to a later, unconditional rule for whichever properties both
   declare. Placing it up near .reel-video's own desktop override (which
   comes right after ITS base rule and correctly wins) silently broke
   left/right positioning here: the base rule's `left: 0; right: 76px`
   (sized to leave room for a full-bleed phone's action rail) kept
   winning, and the overlay rendered off in the page's left margin,
   nowhere near the centered video column. */
@media (min-width: 720px) {
  .reel-overlay-bottom {
    left: 50%; right: auto; width: min(100%, 460px); max-width: 460px;
    transform: translateX(-50%);
  }
  .reel-actions { max-width: 460px; left: 50%; right: auto; transform: translate(calc(-50% + 460px - 64px), 0); }
}

/* ---------- Comments slide-up panel ---------- */
.reel-comments-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 62%; display: flex; flex-direction: column;
  background: var(--surface-raised); border-radius: 18px 18px 0 0;
  transform: translateY(100%); transition: transform 0.25s ease;
  box-shadow: 0 -18px 44px -12px rgba(0,0,0,0.6);
}
.reel-comments-panel.open { transform: translateY(0); }
.rc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 13.5px; font-weight: 800; color: var(--text-primary);
  border-bottom: 1px solid var(--line-soft); flex-shrink: 0;
}
.rc-close { font-size: 22px; color: var(--text-tertiary); line-height: 1; background: none; border: none; cursor: pointer; }
.rc-list { overflow-y: auto; padding: 10px 16px; flex: 1; min-height: 60px; }
.rc-item { display: flex; gap: 9px; padding: 8px 0; }
.rc-av {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
}
.rc-av img { width: 100%; height: 100%; object-fit: cover; }
.rc-body { font-size: 13px; color: var(--text-secondary); }
.rc-name { font-weight: 700; color: var(--text-primary); margin-right: 6px; }
.rc-empty { padding: 20px 4px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); }
.rc-form { display: flex; gap: 9px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.rc-input {
  flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 14px; color: var(--text-primary); font-family: inherit; font-size: 13px;
}
.rc-input:focus { outline: none; border-color: var(--accent-line); }
.rc-send { font-size: 12.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.rc-send:hover { color: var(--accent-strong); }
.rc-login-hint { display: block; padding: 14px 16px; text-align: center; font-size: 12.5px; color: var(--accent); flex-shrink: 0; }
.rc-report-form { display: flex; gap: 7px; align-items: center; margin-top: 6px; }
/* Same bug as .fp-comment-report-form in dashboard.css: author CSS beats
   the UA stylesheet's [hidden] { display: none } regardless of
   specificity, so this rule alone left the form permanently visible. */
.rc-report-form[hidden] { display: none; }
.rc-report-form select { flex: 1; max-width: 200px; padding: 5px 26px 5px 8px; font-size: 11.5px; background-position: right 8px center; background-size: 11px; }
.fp-report-btn { background: none; color: var(--text-tertiary); font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.fp-report-btn:hover { color: var(--critical); }
.fp-comment-report-send { font-size: 11.5px; font-weight: 700; color: var(--critical); flex-shrink: 0; }

/* ---------- Report video panel ---------- */
.reel-report-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21;
  display: flex; flex-direction: column;
  background: var(--surface-raised); border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 44px -12px rgba(0,0,0,0.6);
}
/* Same bug as .rc-report-form/.reel-upload-overlay below: display:flex
   above beats the UA stylesheet's [hidden] { display: none } regardless
   of specificity. Unlike .reel-comments-panel (hidden by an .open-class
   transform, not this attribute), nothing else in this rule moves the
   panel off-screen, so it was genuinely, permanently visible. */
.reel-report-panel[hidden] { display: none; }
.reel-report-panel .fp-report-form { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px 16px; }
.reel-report-panel select { width: 100%; padding: 8px 30px 8px 10px; font-size: 12.5px; }
.reel-report-panel textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; color: var(--text-primary); font-family: inherit; font-size: 12.5px;
}
.reel-report-panel textarea { resize: none; }
.reel-report-panel .fp-report-actions { display: flex; justify-content: flex-end; }
.report-btn:hover svg { color: var(--critical); }

/* ---------- Empty state ---------- */
.reel-empty-inner { text-align: center; color: #fff; padding: 0 30px; }
.reel-empty-inner svg { width: 40px; height: 40px; color: var(--text-tertiary); }
.reel-empty-inner h2 { font-size: 18px; margin-top: 14px; }
.reel-empty-inner p { font-size: 13px; color: var(--text-secondary); margin-top: 8px; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ---------- Floating upload button ---------- */
.reel-fab {
  position: fixed; right: 20px; bottom: 28px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #04150c;
  box-shadow: 0 10px 30px -8px rgba(0,230,118,0.6);
  transition: transform 0.15s ease;
}
.reel-fab:hover { transform: scale(1.06); background: var(--accent-strong); }
.reel-fab svg { width: 24px; height: 24px; }
@media (min-width: 720px) { .reel-fab { right: calc(50% - 460px/2 - 74px); } }
/* On a phone the guest's sign-in button sits on top of the reel, so it only shows on wider screens. */
@media (max-width: 719px) { .reel-fab--guest { display: none; } }

/* The upload modal's styles live in reel_compose.css, shared with the lap player's "Publicar en Reels". */

@media (max-width: 480px) {
  .reel-caption { max-width: 100%; }
}

.mention-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mention-link:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------- Kudos-back prompt ---------- */
.kudos-follow-chip {
  position: absolute; left: 14px; right: 76px; bottom: 96px; z-index: 12;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); color: #fff;
  font-size: 13px; animation: kfc-in 0.18s ease-out;
}
.kudos-follow-chip span { flex: 1; }
.kudos-follow-chip .kfc-follow {
  background: var(--accent); color: #04150c; border: none; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.kudos-follow-chip .kfc-follow:hover { background: var(--accent-strong); }
.kudos-follow-chip .kfc-dismiss {
  background: none; border: none; color: #fff; opacity: 0.7; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; flex-shrink: 0;
}
.kudos-follow-chip .kfc-dismiss:hover { opacity: 1; }
@keyframes kfc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- @mention typeahead (comment box) ---------- */
.mention-drop {
  position: absolute; z-index: 300; max-height: 260px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55);
}
.mention-drop[hidden] { display: none; }
.mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.mention-item:hover, .mention-item.active { background: var(--surface-hover); }
.mention-av {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line);
  font-weight: 700; font-size: 11px; color: var(--text-secondary);
}
.mention-av img { width: 100%; height: 100%; object-fit: cover; }
.mention-main { display: flex; flex-direction: column; min-width: 0; }
.mention-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-username { font-size: 11px; color: var(--text-tertiary); }

/* Nitro on a single comment. */
.rc-kudos-form { display: inline; margin-left: 8px; }
.rc-kudos-btn {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0;
  font-size: 12px; color: var(--text-tertiary); cursor: pointer; vertical-align: middle;
}
.rc-kudos-btn svg { width: 14px; height: 14px; }
.rc-kudos-btn:hover { color: var(--text-primary); }
.rc-kudos-btn.on { color: var(--amber); }
.rc-kudos-btn.on svg { fill: var(--amber); stroke: var(--amber); }
.rc-kudos-btn.static { cursor: default; margin-left: 8px; }
.reel-share-btn.copied { color: var(--accent); }

/* The upload button floats above the feed (position: fixed, z-index 50), so it
   sat on top of the comments and report panels. Hide it while one is open. */
body:has(.reel-comments-panel.open) .reel-fab,
body:has(.reel-report-panel:not([hidden])) .reel-fab { display: none; }

/* Car tags (car_tags): chip on tagged content, picker in the composer. */
.car-chip { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.car-tag-picker { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.car-tag-picker legend { float: left; padding: 0; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }


/* ============================================================
   Phone: the feed is the whole screen. The video runs edge to edge, the bars are glass over it:
   one slim row on top (logo, Recientes | Tendencia, account) and the global nav as a translucent
   strip below, with the caption and the action rail lifted clear of it.
   ============================================================ */
@media (max-width: 719px) {
  /* The bottom block: the glass nav (signed-in) under a slim Recientes | Tendencia strip. */
  body:has(.reels-shell) { --reel-nav-h: env(safe-area-inset-bottom, 0px); --reel-tabs-h: 38px; --reel-nav: calc(var(--reel-nav-h) + var(--reel-tabs-h)); }
  body:has(.reels-shell):has(.navrail) { --reel-nav-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
  /* The bars live under the picture, not over it: the whole frame stays on screen, so a multi-camera
     Reel's small cameras keep their height. */
  .reels-shell { bottom: var(--reel-nav); }

  /* Every clip is shown whole (a blurred copy fills what is left at the sides), never cropped. */
  .reel-framed .reel-video {
    width: min(100%, calc((100dvh - var(--reel-nav)) * 9 / 16));
  }

  /* One slim top row: logo left, tabs centred, account right -- no bar, no title. */
  .reels-top {
    height: calc(48px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
  }
  .reels-brand img { height: 22px; opacity: 0.95; }
  .reels-top-title { display: none; }
  /* A signed-out visitor gets the clips alone; signing in is offered where it matters (comments). */
  .reels-login-btn { display: none; }
  /* Nothing but the picture up top: no logo. */
  .reels-brand { display: none; }
  .reels-top-title:has(.reels-filter-back) { display: flex; position: absolute; left: 50%; transform: translateX(-50%); max-width: 55%; font-size: 14px; }
  .reels-tabs {
    /* Fixed inside .reels-shell (contain: layout), so 100% is the shell's bottom edge: the strip sits right under the picture. */
    position: fixed; top: 100%; bottom: auto; height: var(--reel-tabs-h); padding: 0 16px; gap: 28px;
    align-items: center; z-index: 45; pointer-events: auto;
    background: #000; border-top: 1px solid rgba(255,255,255,0.08);
  }
  .reels-tab {
    padding: 4px 0; border-radius: 0; background: none; font-size: 13.5px; font-weight: 700;
    color: rgba(255,255,255,0.6); border-bottom: 2px solid transparent;
  }
  .reels-tab.active { background: none; color: #fff; border-bottom-color: #fff; }
  .reels-messages { top: calc(56px + env(safe-area-inset-top, 0px)); }

  /* The progress line sits under the notch, the sound button right below the top row. */
  .reel-progress-track { top: env(safe-area-inset-top, 0px); height: 2px; }
  .reel-sound-btn { top: calc(56px + env(safe-area-inset-top, 0px)); right: 12px; width: 36px; height: 36px; background: rgba(0,0,0,0.32); }

  /* Clear of the glass nav. */
  /* Profile and caption sit top-left, clear of the account and sound buttons on the right, so the small
     cameras along the bottom of a multi-camera Reel stay uncovered. Full width so the fade has no edge. */
  .reel-overlay-bottom {
    top: 0; bottom: auto; left: 0; right: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 112px 28px 12px;
    background: linear-gradient(0deg, transparent, rgba(0,0,0,0.24) 55%);
    pointer-events: none;
  }
  .reel-overlay-bottom a, .reel-overlay-bottom button, .reel-overlay-bottom select, .reel-overlay-bottom form, .reel-caption { pointer-events: auto; }
  /* A slim footprint: the picture matters more than the credits. One line of caption (tap it to read
     all of it), a small avatar, a small tag -- so a multi-camera Reel's small cameras stay visible. */
  .reel-av { width: 28px; height: 28px; font-size: 12px; }
  .reel-author { gap: 7px; }
  /* Just the photo: the name stays for screen readers, off screen. */
  .reel-author-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .reel-follow-btn { padding: 3px 10px; font-size: 11px; }
  .reel-caption {
    display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 5px; font-size: 12.5px; line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  .reel-caption.open { -webkit-line-clamp: unset; line-clamp: unset; }
  .reel-tag { font-size: 10.5px; padding: 3px 9px; }
  .reel-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 6px; }
  .reel-tags::-webkit-scrollbar { display: none; }
  .reel-tag { flex: none; background: rgba(255,255,255,0.16); }
  .reel-actions { right: 8px; bottom: 14px; gap: 16px; }
  .reel-action-btn { min-width: 44px; min-height: 44px; justify-content: center; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
  .kudos-follow-chip { bottom: 70px; right: 68px; }

  /* Comments / report sheets rise from the screen's bottom edge, over the nav. */
  .reel-comments-panel, .reel-report-panel { z-index: 70; padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* The global bottom nav, as glass over the video. */
  body:has(.reels-shell) .navrail {
    height: var(--reel-nav-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(8,8,8,0.55); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  body:has(.reels-shell) { padding-bottom: 0; }
  body:has(.reel-comments-panel.open) .navrail,
  body:has(.reel-report-panel:not([hidden])) .navrail,
  body:has(.reel-comments-panel.open) .reels-tabs,
  body:has(.reel-report-panel:not([hidden])) .reels-tabs { visibility: hidden; }

  /* Upload: a small round button under the sound button, out of the way of the caption and the actions. */
  .reel-fab { top: calc(100px + env(safe-area-inset-top, 0px)); right: 12px; left: auto; bottom: auto; width: 36px; height: 36px; box-shadow: none; z-index: 41; }
  .reel-fab svg { width: 18px; height: 18px; }
}