/* =============================================================================
   Vidz — TikTok-style full-viewport feed
   ============================================================================= */

/* ── Vidz page sidebar ──────────────────────────────────────────────────────
   The sidebar uses the standard header.css design on all Vidz pages.
   Only difference: expansion overlays content instead of pushing it
   (handled by app.js isOverlaySidebar — vidz-page-body is included there).
   The z-index + shadow below match community-overlay-sidebar behaviour.    */

.vidz-page-body .sidebar.is-expanded {
  z-index: 400;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}


/* ── Page wrapper ────────────────────────────────────────────────────────── */
.vidz-feed-page {
  position: fixed;
  top: var(--header-height, 56px);
  left: var(--sidebar-width-collapsed, 64px);
  right: 0;
  bottom: 0;
  background: #fff;
  overflow: hidden;
  z-index: 201;
}
.vidz-page-body.sidebar-open .vidz-feed-page {
  /* Sidebar overlays on vidz page — content never moves */
  left: var(--sidebar-width-collapsed, 64px);
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.vidz-tab-bar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width-collapsed, 64px);
  right: 0;
  z-index: 50;
  display: flex;
  gap: 0;
  align-items: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 0 var(--space-4, 16px);
}

.vidz-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  color: rgba(255,255,255,.6);
  font-weight: 400;
  font-size: var(--font-size-sm, .875rem);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.vidz-tab-btn svg {
  flex-shrink: 0;
}
.vidz-tab-btn:hover {
  color: rgba(255,255,255,.85);
}
.vidz-tab-btn--active {
  color: #fff;
  font-weight: 700;
  border-bottom-color: #fff;
}

/* ── Scroll container ────────────────────────────────────────────────────── */
.vidz-scroll {
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vidz-scroll::-webkit-scrollbar { display: none; }

/* ── Single item — flex row: [video-card] [action-rail] ──────────────────── */
.vidz-item {
  position: relative;
  height: calc(100vh - var(--header-height, 72px));
  height: calc(100dvh - var(--header-height, 72px));
  scroll-snap-align: start;
  background: #fff;
  display: flex;
  align-items: center;
  /* Center the video like YouTube Shorts — equal whitespace on both sides */
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  gap: 20px;
}

/* ── Video card — taller/wider like TikTok desktop ───────────────────────── */
.vidz-item__card {
  position: relative;
  /* 16px top + bottom gap — much tighter like TikTok */
  height: calc(100dvh - var(--header-height, 72px) - 16px);
  /* 9:16 ratio, wider */
  width: min(calc((100dvh - var(--header-height, 72px) - 16px) * 9 / 16), 480px);
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.vidz-item__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
  border-radius: 0;
}

/* ── Tap overlay — stretched over the video element ─────────────────────── */
.vidz-item__tap-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: unset;
  min-width: unset;
  border-radius: 0;
}

/* ── Play / Pause ring — hidden visually, tap area still works ───────────── */
.vidz-pp-ring {
  display: none;
}

.vidz-item__play-icon,
.vidz-item__pause-flash {
  display: none !important;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.vidz-item__progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255,255,255,.12);
  z-index: 9;
  cursor: pointer;
  transition: height .15s;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}
/* Expand track on hover for easier scrubbing */
.vidz-item__card:hover .vidz-item__progress-wrap {
  height: 6px;
}
.vidz-item__progress-bar {
  height: 100%;
  width: 0%;
  background: #e94560;
  border-radius: 0;
  transition: width .1s linear;
  pointer-events: none;
}
.vidz-item__seek {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 20px;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 16;
}
.vidz-item__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.vidz-item__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.vidz-item__seek::-moz-range-track {
  background: transparent;
  border: none;
}
.vidz-item__seek::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
}

/* ── Custom controls bar — CAYA pill style ───────────────────────────────── */
.vidz-item__controls {
  display: none !important;
}
/* Show on hover (desktop) and always when paused */
.vidz-item__card:hover .vidz-item__controls,
.vidz-item__card.is-paused .vidz-item__controls {
  opacity: 1;
  pointer-events: auto;
}

/* ── Individual control button ───────────────────────────────────────────── */
.vidz-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-base);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  min-height: unset; min-width: unset;
  padding: 0;
}
.vidz-ctrl:hover {
  background: color-mix(in srgb, var(--color-highlight) 25%, transparent);
  transform: scale(1.12);
}
.vidz-ctrl__icon { display: block; flex-shrink: 0; }

/* Play/pause button — slightly larger, CAYA red accent on hover */
.vidz-ctrl--playpause {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.12);
}
.vidz-ctrl--playpause:hover {
  background: var(--color-highlight);
  transform: scale(1.1);
}

/* Time readout */
.vidz-ctrl__time {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
  white-space: nowrap;
  padding-left: 2px;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* Push sound to the right */
.vidz-ctrl__spacer { flex: 1; }

/* ── Action rail — vertically centred, TikTok-style dark circle buttons ─── */
.vidz-item__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 72px;
  align-self: center;
  /* padding-top ensures the avatar clears the fixed vidz-tab-bar (~44px) at 100% zoom.
     Previously this used margin-top: -40px which caused the avatar to protrude above
     the feed page boundary and get clipped by the tab bar / header at 100% zoom. */
  margin-top: 0;
  padding-top: 52px;
  padding-bottom: 52px;
  z-index: 10;
}

/* Each icon + count pair */
.vidz-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}

/* TikTok style: dark circle background, white icon */
.vidz-item__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 24, 35, 0.08);
  border: none;
  color: #161823;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: background .15s, transform .15s;
  min-height: unset;
  min-width: unset;
  border-radius: 50%;
  width: 52px;
  height: 52px;
}
.vidz-item__action-btn:hover {
  background: rgba(22, 24, 35, 0.15);
  transform: scale(1.08);
}
.vidz-item__action-btn--stat { cursor: default; }
.vidz-item__action-btn--stat:hover { transform: none; }

.vidz-item__action-btn svg {
  width: 26px;
  height: 26px;
  display: block;
  color: #161823;
  stroke: #161823;
  flex-shrink: 0;
}

/* Count sits BELOW the button */
.vidz-item__action-count {
  font-size: 11px;
  font-weight: 700;
  color: #161823;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}

/* Like active */
.vidz-like-btn.is-liked { color: #ff4d6d; }
.vidz-like-btn.is-liked svg { stroke: #ff4d6d; fill: #ff4d6d; color: #ff4d6d; }
.vidz-like-btn.is-liked ~ .vidz-item__action-count { color: #ff4d6d; }
/* Mobile right-rail like button — same rules via is-liked class set by like-button.js */
#rr-like-btn.is-liked { color: #ff4d6d; }
#rr-like-btn.is-liked svg { stroke: #ff4d6d; fill: #ff4d6d; }
/* Community feed vidz card like button */
.social-vidz-card__rail-btn.is-liked { color: #ff4d6d; background: rgba(255,77,109,.2); }
.social-vidz-card__rail-btn.is-liked svg { stroke: #ff4d6d; fill: #ff4d6d; }

/* Save / Bookmark active state */
.vidz-save-btn--saved { color: var(--color-highlight); }
.vidz-save-btn--saved svg { stroke: var(--color-highlight); fill: var(--color-highlight); }
.vidz-save-btn--saved ~ .vidz-item__action-count { color: var(--color-highlight); }

/* Mobile right rail save active state */
.vidz-mob-right-rail .vidz-save-btn--saved { background: color-mix(in srgb, var(--color-highlight) 12%, transparent); }
.vidz-mob-right-rail .vidz-save-btn--saved svg { stroke: var(--color-highlight); fill: var(--color-highlight); }

@keyframes vidzPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.vidz-like-btn--pop { animation: vidzPop .35s ease; }
.like-pop           { animation: vidzPop .35s ease; } /* Fix: like-button.js class name */

/* ── Artist avatar ───────────────────────────────────────────────────────── */
.vidz-item__action-btn--avatar {
  background: transparent;
  border-radius: 50%;
  padding: 0;
  width: 56px;
  height: 56px;
  position: relative;
}
.vidz-item__action-btn--avatar:hover { transform: scale(1.05); background: transparent; }

.vidz-artist-avatar {
  display: flex;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: #1a1a2e;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}
.vidz-artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vidz-artist-avatar span { color: #fff; font-size: .85rem; font-weight: 800; }

.vidz-follow-fab {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-highlight);
  border: 2px solid #000;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  min-height: unset; min-width: unset;
  padding: 0;
  transition: background .15s;
  color: var(--color-base);
  /* needed so ::after positions relative to the button itself */
  isolation: isolate;
}
.vidz-follow-fab:hover { background: color-mix(in srgb, var(--color-highlight) 80%, #000); }
.vidz-follow-fab svg { color: var(--color-base); }

/* ── Follow fab — followed state: green tick ─────────────────────────────── */
.vidz-follow-fab--following {
  background: #22c55e !important;
  border-color: #fff !important;
}
.vidz-follow-fab--following svg {
  opacity: 0; /* hide the + icon */
}
.vidz-follow-fab--following::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* Nav arrows */
.vidz-nav {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vidz-nav__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(22,24,35,.06);
  border: 1px solid rgba(22,24,35,.12);
  color: #1a1a2e;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  min-height: unset; min-width: unset;
}
.vidz-nav__btn:hover { background: rgba(22,24,35,.14); }
.vidz-nav__btn svg { width: 16px; height: 16px; }

/* ── Bottom info overlay — TikTok CLEAN style ────────────────────────────── */
.vidz-item__info {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  z-index: 8;
  padding: 12px 16px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 50%, transparent 100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}
.vidz-item__info a,
.vidz-item__info button { 
  pointer-events: auto; 
}

/* ── Title — HIDDEN (not needed for clean TikTok style) ─────────────────── */
.vidz-item__title {
  display: none !important;
}

/* ── Source badge — HIDDEN (clean minimal design) ──────────────────────── */
.vidz-source-badge {
  display: none !important;
}

/* Hide uploader badge wrapper */
.vidz-item__info > div {
  display: none !important;
}

/* ── Creator name — SIMPLE ───────────────────────────────────────────────── */
.vidz-item__artist {
  font-size: 15px; 
  font-weight: 700; 
  color: #fff;
  text-decoration: none; 
  display: inline;
  margin: 0;
  padding: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.vidz-item__artist:hover { 
  text-decoration: underline; 
}

.vidz-item__desc { 
  font-size: 12px; 
  color: rgba(255,255,255,.8); 
  margin: 0;
  line-height: 1.3;
}
.vidz-item__desc-text {
  display: -webkit-box; 
  -webkit-line-clamp: 1; 
  line-clamp: 1;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}
.vidz-item__desc-text.is-expanded {
  display: block; 
  -webkit-line-clamp: unset; 
  line-clamp: unset; 
  overflow: visible;
}
.vidz-item__desc-more {
  background: none; 
  border: none; 
  color: rgba(255,255,255,.6);
  font-size: 11px; 
  cursor: pointer; 
  padding: 0; 
  margin-left: 2px;
  text-decoration: underline; 
  pointer-events: auto;
  min-height: unset; 
  min-width: unset;
}

/* View count — hidden from bottom info (belongs on action rail) */
.vidz-item__view-count {
  display: none !important;
}

/* Clean up conflicting background rules */
.vidz-item__info > .vidz-item__artist,
.vidz-item__info > .vidz-item__desc,
.vidz-item__info > .vidz-item__view-count {
  padding: 0;
  background: none;
  margin: 0;
}

.vidz-item__info > .vidz-item__artist {
  padding: 0;
}

.vidz-item__info > .vidz-item__view-count {
  padding: 0;
}

/* ── Source badge colors ────────────────────────────────────────────────── */

/* Official Vidz — CAYA red/dark pill */
.vidz-source-badge--vidz {
  background: #e94560;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Fan Clip — muted teal/slate pill */
.vidz-source-badge--clip {
  background: rgba(30, 120, 180, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Mute badge ──────────────────────────────────────────────────────────── */
.vidz-item__mute-badge {
  position: absolute;
  top: 16px;
  left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: .7rem; font-weight: 600;
  padding: 4px 10px; border-radius: 99px;
  pointer-events: none; z-index: 5;
}

/* ── Mobile top bar ──────────────────────────────────────────────────────── */
.vidz-topbar { display: none; }

/* ── Mobile left rail — hidden on desktop ───────────────────────────────── */
.vidz-mob-rail        { display: none; }
.vidz-mob-right-rail  { display: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.vidz-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #888; text-align: center; padding: 2rem; background: #fff;
}
.vidz-empty__icon  { font-size: 4rem; margin-bottom: 1rem; color: #ccc; }
.vidz-empty__title { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; margin: 0 0 .5rem; }
.vidz-empty__sub   { font-size: .95rem; color: #888; }
.vidz-feed-page:has(.vidz-empty) { background: #fff; }

/* ── Upload FAB ──────────────────────────────────────────────────────────── */
.vidz-upload-fab {
  position: fixed;
  bottom: 24px;
  left: calc(var(--sidebar-width-collapsed, 64px) + 24px);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-highlight, #e94560); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(233,69,96,.45);
  z-index: 20; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.vidz-upload-fab:hover { transform: scale(1.08); color: #fff; }
.vidz-page-body .vidz-upload-fab {
  left: calc(72px + 24px) !important;
}
.vidz-upload-fab svg { width: 24px; height: 24px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.vidz-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(255,255,255,.95); color: #111;
  font-size: 13px; font-weight: 600; padding: 8px 20px;
  border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 500;
}
.vidz-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENTS PANEL — single global panel, slides in from the RIGHT (desktop)
   and from the BOTTOM (mobile ≤ 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

.vidz-comments-panel {
  position: fixed;
  top: var(--header-height, 56px);
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 42vw;
  background: #fff;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  z-index: 260;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Default: slid out to the right (hidden) */
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
/* Open: slide in from right */
.vidz-comments-panel:not([hidden]) {
  transform: translateX(0);
  pointer-events: auto;
}
/* Keep display:flex while hidden so the transition plays on both open and close */
.vidz-comments-panel[hidden] {
  display: flex !important;
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
}

.vidz-comments-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.vidz-comments-panel__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}
.vidz-comments-panel__count {
  font-size: .875rem;
  color: #999;
  font-weight: 500;
}
.vidz-comments-panel__close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background .15s, color .15s;
  min-height: unset;
  min-width: unset;
  padding: 0;
}
.vidz-comments-panel__close:hover { background: #f4f5f7; color: #1a1a2e; }
.vidz-comments-panel__close svg   { width: 18px; height: 18px; }

.vidz-comments-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.vidz-comments-loading,
.vidz-comments-empty {
  font-size: .875rem;
  color: #999;
  text-align: center;
  padding: 28px 0;
}

/* Individual comment */
.vidz-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vidz-comment-item__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-highlight));
  color: var(--color-base);
  font-weight: 800;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vidz-comment-item__body  { flex: 1; min-width: 0; }
.vidz-comment-item__author {
  font-size: .8125rem;
  font-weight: 700;
  color: #1a1a2e;
}
.vidz-comment-item__time {
  font-size: .72rem;
  color: #bbb;
}
.vidz-comment-item__text {
  font-size: .875rem;
  color: #333;
  line-height: 1.5;
  margin: 3px 0 0;
  word-break: break-word;
}
.vidz-comment-item__delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  min-height: unset;
  min-width: unset;
  display: flex;
  align-items: center;
}
.vidz-comment-item__delete:hover { color: var(--color-highlight); background: #fff0f2; }

/* ── Comment actions row (reply + emoji + delete) ───────────────────────── */
.vidz-comment-item__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Reply button */
.vidz-comment-reply-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  min-height: unset;
  min-width: unset;
  line-height: 1.4;
}
.vidz-comment-reply-btn:hover {
  color: var(--color-highlight, #e94560);
  background: rgba(233,69,96,.06);
}

/* Reply indented comment */
.vidz-comment-item--reply {
  margin-left: 36px;
  opacity: .92;
}
.vidz-comment-item--reply .vidz-comment-item__avatar {
  width: 26px;
  height: 26px;
  font-size: .72rem;
}

/* Reply form */
.vidz-reply-form {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: nowrap;
}
.vidz-reply-input {
  flex: 1;
  border: 1.5px solid #e8e8ec;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: .8125rem;
  font-family: inherit;
  outline: none;
  background: #f8f9fb;
  transition: border-color .15s;
  min-width: 0;
}
.vidz-reply-input:focus { border-color: #1a1a2e; background: #fff; }
.vidz-reply-submit {
  flex-shrink: 0;
  background: var(--color-highlight, #e94560);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  min-height: unset;
  min-width: unset;
  white-space: nowrap;
}
.vidz-reply-submit:hover { background: color-mix(in srgb, var(--color-highlight, #e94560) 80%, #000); }
.vidz-reply-submit:disabled { opacity: .55; cursor: not-allowed; }

/* ── Emoji reaction picker ───────────────────────────────────────────────── */
.vidz-comment-emoji-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.vidz-comment-react-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  min-height: unset;
  min-width: unset;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.vidz-comment-react-btn:hover,
.vidz-comment-react-btn.is-reacted {
  color: var(--color-highlight, #e94560);
  background: rgba(233,69,96,.06);
}
.vidz-comment-react-emoji { font-size: 13px; line-height: 1; }

.vidz-comment-emoji-picker {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  z-index: 600;
  white-space: nowrap;
}
.vidz-comment-emoji-picker[hidden] { display: none; }
.vidz-comment-emoji-opt {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: transform .15s, background .15s;
  min-height: unset;
  min-width: unset;
  line-height: 1;
}
.vidz-comment-emoji-opt:hover {
  transform: scale(1.3);
  background: rgba(0,0,0,.05);
}

.vidz-comments-panel__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  background: #fff;
}
.vidz-comments-panel__input {
  flex: 1;
  border: 1.5px solid #e8e8ec;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  background: #f8f9fb;
}
.vidz-comments-panel__input:focus { border-color: #1a1a2e; background: #fff; }
.vidz-comments-panel__send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-highlight);
  color: var(--color-base);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
  min-height: unset;
  min-width: unset;
  padding: 0;
}
.vidz-comments-panel__send:hover    { background: color-mix(in srgb, var(--color-highlight) 80%, #000); transform: scale(1.08); }
.vidz-comments-panel__send:disabled { opacity: .55; transform: none; cursor: not-allowed; }
.vidz-comments-panel__login {
  padding: 14px 16px;
  font-size: .875rem;
  color: #666;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  flex-shrink: 0;
}
.vidz-comments-panel__login a { color: var(--color-highlight); font-weight: 600; }

.vidz-load-more {
  display: block;
  width: 100%;
  padding: 10px;
  background: #f4f5f7;
  border: none;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  transition: background .15s;
  min-height: unset;
}
.vidz-load-more:hover    { background: #e8e8e8; }
.vidz-load-more:disabled { opacity: .6; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE MODAL — CAYA branded bottom-sheet style
   ═══════════════════════════════════════════════════════════════════════════ */
.vidz-share-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;   /* bottom-sheet on mobile */
  justify-content: center;
}
.vidz-share-modal[hidden] { display: none; }

.vidz-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.vidz-share-modal__box {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 24px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 -4px 40px rgba(0,0,0,.25);
  z-index: 1;
  animation: svzSheetUp .22s cubic-bezier(.4,0,.2,1);
}
@keyframes svzSheetUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Drag handle pill */
.vidz-share-modal__box::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 10px auto 0;
}
.vidz-share-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.vidz-share-modal__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #1a1a2e;
}
.vidz-share-modal__close {
  background: #f4f5f7;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background .15s, color .15s;
  min-height: unset;
  min-width: unset;
  padding: 0;
}
.vidz-share-modal__close:hover { background: #e8e8e8; color: #1a1a2e; }

.vidz-share-modal__options {
  display: flex;
  gap: 6px;
  padding: 16px 20px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vidz-share-modal__options::-webkit-scrollbar { display: none; }

.vidz-share-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  min-width: 64px;
  min-height: unset;
  transition: background .15s, transform .12s;
  flex-shrink: 0;
}
.vidz-share-opt:hover { background: #f4f5f7; transform: scale(1.04); }
.vidz-share-opt:active { transform: scale(0.96); }
.vidz-share-opt__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.vidz-share-opt__label {
  font-size: .7rem;
  font-weight: 600;
  color: #444;
  text-align: center;
  white-space: nowrap;
}

.vidz-share-modal__url-row {
  display: flex;
  gap: 8px;
  margin: 12px 20px 0;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}
.vidz-share-modal__url-input {
  flex: 1;
  border: 1.5px solid #e8e8ec;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .8125rem;
  color: #666;
  background: #f8f9fb;
  outline: none;
  cursor: text;
  min-width: 0;
}

/* On wider screens — centered modal instead of bottom sheet */
@media (min-width: 600px) {
  .vidz-share-modal {
    align-items: center;
  }
  .vidz-share-modal__box {
    border-radius: 20px;
    max-width: 480px;
  }
  .vidz-share-modal__box::before { display: none; }
}

/* ── Ad item ─────────────────────────────────────────────────────────────── */
.vidz-item--ad { background: #0a0a12; }
.vidz-item--ad .ad-slot--video-preroll,
.vidz-item--ad .ad-slot--feed_native {
  width: calc(100dvh * 9 / 16); height: 100%; max-width: 100%;
  position: relative; border-radius: 0; overflow: hidden;
}
.vidz-item--ad .ad-slot--video-preroll .ad-slot__video { width: 100%; height: 100%; object-fit: cover; }
.vidz-item--ad .ad-skip-btn { position: absolute; bottom: 80px; right: 16px; z-index: 20; }
.vidz-item--ad .ad-slot--banner { width: 90%; }

/* ── Hide page chrome ────────────────────────────────────────────────────── */
body:has(.vidz-feed-page):not(:has(.vidz-empty)),
body.vidz-page-body:not(:has(.vidz-empty)) { background: #fff; overflow: hidden; }
body:has(.vidz-feed-page):has(.vidz-empty),
body.vidz-page-body:has(.vidz-empty) { background: #fff; overflow: auto; }
body:has(.vidz-feed-page) .page-content-wrap,
body.vidz-page-body .page-content-wrap { overflow: hidden; }
.vidz-feed-page { visibility: visible !important; }
.page-content-wrap--vidz-stub { display: none !important; }

@media (max-width: 768px) {
  body:has(.vidz-feed-page) .header,
  body.vidz-page-body .header { opacity: 0; pointer-events: none; }
}
body:has(.vidz-feed-page) footer, body:has(.vidz-feed-page) .footer,
body.vidz-page-body footer, body.vidz-page-body .footer { display: none !important; }
body:has(.vidz-feed-page) .mini-player, body.vidz-page-body .mini-player { display: none !important; }
body:has(.vidz-feed-page) .bottom-nav, body.vidz-page-body .bottom-nav { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px) — TikTok-style: white left rail | video card | white right rail
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hide site header ── */
  body:has(.vidz-feed-page) .header,
  body.vidz-page-body .header { opacity: 0; pointer-events: none; height: 0; overflow: hidden; }

  /* ── Feed page: full viewport, white background ── */
  .vidz-feed-page,
  .page-body.sidebar-open .vidz-feed-page {
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 350;
    background: #fff;
  }

  /* ── Scroll container — inset between both fixed rails ── */
  .vidz-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--sidebar-width-collapsed, 64px);   /* left rail width */
    right: 72px;  /* right rail width */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
  }
  .vidz-scroll::-webkit-scrollbar { display: none; }

  /* ── Each item: full viewport height, centres the video card ── */
  .vidz-item {
    height: 100dvh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    gap: 0;
    background: #fff;
    scroll-snap-align: start;
    position: relative;
  }

  /* ── Video card — tall rounded card floating in the white space ── */
  .vidz-item__card {
    position: relative;
    /* height fills viewport minus top/bottom padding */
    height: calc(100dvh - 16px);
    /* width fills the scroll area (between the two rails) */
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    flex-shrink: 0;
  }
  .vidz-item__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  /* Tap area covers the whole card */
  .vidz-item__tap-area {
    position: absolute;
    inset: 0;
    border-radius: 0;
    z-index: 2;
  }

  /* ── Info overlay — bottom-left of card ── */
  .vidz-item__info {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    padding: 12px 14px 8px;
    background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 50%, transparent 100%);
    z-index: 8;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 60px;
  }
  .vidz-item__artist {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    display: inline;
  }
  .vidz-item__title {
    display: none !important;
  }
  .vidz-item__desc { 
    font-size: 12px; 
    color: rgba(255,255,255,.8); 
    margin: 0;
  }

  /* Progress bar — sits at very bottom of info section */
  .vidz-item__progress-wrap { bottom: 0; left: 0; right: 0; height: 4px; }

  /* Mute badge */
  .vidz-item__mute-badge { top: 12px; left: 12px; }

  /* ── Desktop action rail — HIDDEN on mobile (right rail is fixed) ── */
  .vidz-item__actions { display: none !important; }

  /* ── Mobile left icon rail — white background, TikTok exact layout ── */
  .vidz-mob-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 72px;
    z-index: 360;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 16px;
    gap: 0;
    background: #fff;
    border-right: 1px solid rgba(0,0,0,.07);
    box-shadow: 2px 0 12px rgba(0,0,0,.08);
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* CAYA logo — bold red wordmark */
  .vidz-mob-rail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 44px;
    margin-bottom: 4px;
    flex-shrink: 0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
    color: var(--color-highlight);
    letter-spacing: -1px;
    line-height: 1;
  }
  .vidz-mob-rail__logo img { max-height: 30px; width: auto; object-fit: contain; }

  /* Flex spacer pushes profile to bottom */
  .vidz-mob-rail__spacer { flex: 1; min-height: 8px; }

  /* Every nav button — 60px tall, full rail width, icon centred */
  .vidz-mob-rail__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 60px;
    border-radius: 0;
    color: #161823;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: color .12s, background .12s;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
  }
  .vidz-mob-rail__btn svg {
    width: 28px; height: 28px;
    stroke-width: 1.8;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
  }
  .vidz-mob-rail__btn:hover  { color: var(--color-highlight); background: color-mix(in srgb, var(--color-highlight) 5%, transparent); }
  .vidz-mob-rail__btn:active { color: color-mix(in srgb, var(--color-highlight) 80%, #000); }

  /* Active state — filled red icon */
  .vidz-mob-rail__btn--active       { color: var(--color-highlight); }
  .vidz-mob-rail__btn--active svg   { stroke-width: 2.5; }

  /* Search — TikTok grey circle pill */
  .vidz-mob-rail__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f0f1f2;
    color: #161823;
    transition: background .12s, color .12s;
    flex-shrink: 0;
  }
  .vidz-mob-rail__icon-wrap svg { width: 24px; height: 24px; display: block; }
  .vidz-mob-rail__btn:hover .vidz-mob-rail__icon-wrap {
    background: #e3e4e6;
    color: var(--color-highlight);
  }

  /* Upload button — red rounded rect (TikTok's [+] style), role-gated */
  .vidz-mob-rail__btn--upload {
    width: 72px; height: 64px;
    background: transparent;
    border-radius: 0;
    margin: 4px 0;
  }
  .vidz-mob-rail__upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-highlight);
    color: var(--color-base);
    transition: background .15s, transform .12s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-highlight) 40%, transparent);
  }
  .vidz-mob-rail__upload-box svg {
    width: 26px; height: 26px;
    stroke-width: 2.4;
    color: var(--color-base);
    display: block;
  }
  .vidz-mob-rail__btn--upload:hover  .vidz-mob-rail__upload-box { background: color-mix(in srgb, var(--color-highlight) 80%, #000); transform: scale(1.07); }
  .vidz-mob-rail__btn--upload:active .vidz-mob-rail__upload-box { transform: scale(.93); }

  /* Upload locked state — grey when user hasn't earned upload rights */
  .vidz-mob-rail__btn--upload-locked .vidz-mob-rail__upload-box {
    background: #c8c9cc;
    box-shadow: none;
  }
  .vidz-mob-rail__btn--upload-locked:hover .vidz-mob-rail__upload-box {
    background: #b0b2b5;
    transform: scale(1.03);
  }

  /* Admin button — amber accent */
  .vidz-mob-rail__btn--admin { color: #b86e00; }
  .vidz-mob-rail__btn--admin:hover { color: #8f5300; background: rgba(184,110,0,.05); }

  /* Login button — muted grey */
  .vidz-mob-rail__btn--login { color: #aaa; }
  .vidz-mob-rail__btn--login:hover { color: var(--color-highlight); background: color-mix(in srgb, var(--color-highlight) 5%, transparent); }

  /* Profile — circle avatar TikTok style (letter 'K', 'U' etc.) */
  .vidz-mob-rail__profile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    background: var(--color-highlight);
    border: 2px solid var(--color-highlight);
    transition: transform .12s, box-shadow .12s;
    overflow: visible;
    margin-top: 4px;
  }
  .vidz-mob-rail__profile:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-highlight) 45%, transparent);
  }
  .vidz-mob-rail__avatar-img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .vidz-mob-rail__avatar-initial {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
  }
  /* Brand red verified dot — anchored to bottom-right of avatar */
  .vidz-mob-rail__verified-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #e94560;
    border: 2px solid #fff;
    z-index: 2;
    display: block;
    flex-shrink: 0;
  }

  /* ── Desktop nav arrows: hidden on mobile ── */
  .vidz-nav { display: none; }

  /* ── Comments panel — slides up from bottom ── */
  .vidz-comments-panel {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 72%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    transform: translateY(100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
    z-index: 400 !important;
  }
  .vidz-comments-panel:not([hidden]) { transform: translateY(0) !important; }
  .vidz-comments-panel[hidden] {
    display: flex !important;
    transform: translateY(100%) !important;
    visibility: hidden;
    pointer-events: none;
  }
  .vidz-comments-panel__input { font-size: 1rem; }

  /* ── Upload FAB — hidden on mobile (rail has upload) ── */
  .vidz-upload-fab { display: none !important; }

  /* ── Desktop nav arrows: hidden on mobile ── */
  .vidz-nav { display: none; }

  /* ═══════════════════════════════════════════
     RIGHT RAIL — fixed white bar, action icons
     ═══════════════════════════════════════════ */
  .vidz-mob-right-rail {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 72px;
    z-index: 360;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    gap: 0;
    background: #fff;
    border-left: 1px solid rgba(0,0,0,.07);
    box-shadow: -2px 0 12px rgba(0,0,0,.08);
    pointer-events: auto;
  }

  /* Each action group: button + count label */
  .vidz-mob-right-rail .vidz-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
    gap: 0;
  }
  .vidz-mob-right-rail .vidz-action-wrap:last-child { margin-bottom: 0; }

  /* Artist avatar slot — slightly larger */
  .vidz-mob-right-rail .vidz-item__action-btn--avatar {
    background: transparent !important; /* no grey circle behind avatar */
    border: none;
    width: 52px; height: 52px;
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0; min-height: unset; min-width: unset;
    overflow: visible !important; /* allow follow fab to extend below */
    isolation: isolate; /* own stacking context — prevent photo bleed */
  }
  .vidz-mob-right-rail .vidz-artist-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    overflow: hidden; /* clips photo to circle */
    border: 2px solid var(--color-highlight);
    background: #1a1a2e;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  .vidz-mob-right-rail .vidz-artist-avatar img  { width: 100%; height: 100%; object-fit: cover; }
  .vidz-mob-right-rail .vidz-artist-avatar span { color: #fff; font-size: .85rem; font-weight: 800; }

  /* Red + follow fab below avatar */
  .vidz-mob-right-rail .vidz-follow-fab {
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    background: var(--color-highlight);
    border: 2.5px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    cursor: pointer;
    padding: 0; min-height: unset; min-width: unset;
    transition: background .12s;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    isolation: isolate;
  }
  .vidz-mob-right-rail .vidz-follow-fab svg {
    width: 10px; height: 10px;
    stroke: #fff;
    fill: none;
    pointer-events: none;
  }
  .vidz-mob-right-rail .vidz-follow-fab--following {
    background: #22c55e !important;
    border-color: #fff !important;
  }
  .vidz-mob-right-rail .vidz-follow-fab--following svg {
    opacity: 0;
  }
  .vidz-mob-right-rail .vidz-follow-fab--following::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
  }

  /* Action buttons — dark circle on white bg, TikTok-style */
  .vidz-mob-right-rail .vidz-item__action-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(22,24,35,.07);
    border: none;
    color: #161823;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .12s;
    padding: 0; min-height: unset; min-width: unset;
  }
  .vidz-mob-right-rail .vidz-item__action-btn:active {
    transform: scale(0.9);
    background: rgba(22,24,35,.14);
  }
  .vidz-mob-right-rail .vidz-item__action-btn svg {
    width: 24px; height: 24px;
    stroke: #161823; fill: none;
    stroke-width: 1.75;
    display: block;
  }

  /* Count labels — dark text on white rail */
  .vidz-mob-right-rail .vidz-item__action-count {
    font-size: 11px; font-weight: 700;
    color: #161823;
    margin-top: 4px;
    text-align: center;
    display: block;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* Like active */
  .vidz-mob-right-rail .vidz-like-btn.is-liked { background: rgba(255,77,109,.12); }
  .vidz-mob-right-rail .vidz-like-btn.is-liked svg { stroke: #ff4d6d; fill: #ff4d6d; }
  .vidz-mob-right-rail .vidz-like-btn.is-liked + .vidz-item__action-count { color: #ff4d6d; }

  /* Hide the desktop per-item action rail entirely on mobile */
  .vidz-item__actions { display: none !important; }

  /* ── Comments panel — slides up from bottom ── */
  .vidz-comments-panel {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 72%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    transform: translateY(100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
    z-index: 400 !important;
  }
  .vidz-comments-panel:not([hidden]) { transform: translateY(0) !important; }
  .vidz-comments-panel[hidden] {
    display: flex !important;
    transform: translateY(100%) !important;
    visibility: hidden;
    pointer-events: none;
  }
  .vidz-comments-panel__input { font-size: 1rem; }

}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDZ SEARCH PANEL — slides in from left over the video (mobile only)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.vidz-search-panel__backdrop {
  position: fixed;
  inset: 0;
  z-index: 370;
  background: rgba(0,0,0,.45);
}
.vidz-search-panel__backdrop[hidden] { display: none; }

/* Panel — sits to the right of the left rail */
.vidz-search-panel {
  position: fixed;
  top: 0;
  left: var(--sidebar-width-collapsed, 64px);
  bottom: 0;
  width: calc(100vw - var(--sidebar-width-collapsed, 64px));
  max-width: 420px;
  z-index: 371;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.vidz-search-panel:not([hidden]) {
  transform: translateX(0);
  pointer-events: auto;
}
.vidz-search-panel[hidden] {
  display: flex !important;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
}

/* Header row */
.vidz-search-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.vidz-search-panel__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
}
.vidz-search-panel__close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #f0f1f2;
  border: none;
  color: #555;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  min-height: unset; min-width: unset; padding: 0;
}
.vidz-search-panel__close:hover { background: #e3e4e6; color: #1a1a2e; }

/* Search input */
.vidz-search-panel__input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 18px;
  background: #f0f1f2;
  border-radius: 12px;
  padding: 11px 14px;
  flex-shrink: 0;
}
.vidz-search-panel__icon {
  color: #888;
  flex-shrink: 0;
}
.vidz-search-panel__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .9375rem;
  font-family: inherit;
  color: #1a1a2e;
  outline: none;
  min-width: 0;
}
.vidz-search-panel__input::placeholder { color: #aaa; }
.vidz-search-panel__input::-webkit-search-cancel-button { display: none; }

/* Section label */
.vidz-search-panel__section { flex: 1; overflow-y: auto; padding: 0 18px 16px; }
.vidz-search-panel__section-label {
  font-size: .75rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 12px;
}

/* Suggestions list */
.vidz-search-panel__suggestions {
  list-style: none;
  padding: 0; margin: 0;
}
.vidz-search-panel__suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #f4f5f7;
  cursor: pointer;
  transition: background .12s;
  font-size: .9375rem;
  font-weight: 600;
  color: #1a1a2e;
  border-radius: 0;
}
.vidz-search-panel__suggestion-item:last-child { border-bottom: none; }
.vidz-search-panel__suggestion-item:hover { color: #e94560; }
.vidz-search-panel__suggestion-item::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d0d2d6;
  flex-shrink: 0;
}
.vidz-search-panel__suggestion-item--trending::before {
  background: none;
  content: '↗';
  color: var(--color-highlight);
  font-size: .8rem;
  width: auto; height: auto;
}
.vidz-search-panel__suggestion-item--loading {
  color: #aaa; font-size: .875rem; font-weight: 400; cursor: default;
}
.vidz-search-panel__suggestion-item--loading::before { display: none; }

/* Live results area */
.vidz-search-panel__results {
  flex: 1;
  overflow-y: auto;
  padding: 0 18px 16px;
}
.vidz-search-panel__results[hidden] { display: none; }

.vidz-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f4f5f7;
  cursor: pointer;
  text-decoration: none;
  color: #1a1a2e;
  transition: color .12s;
}
.vidz-search-result-item:last-child { border-bottom: none; }
.vidz-search-result-item:hover { color: #e94560; }
.vidz-search-result-item__thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f1f2;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vidz-search-result-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vidz-search-result-item__info { flex: 1; min-width: 0; }
.vidz-search-result-item__name {
  font-size: .875rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vidz-search-result-item__type {
  font-size: .72rem; color: #aaa; font-weight: 500; margin-top: 2px;
}
.vidz-search-result-item__empty {
  font-size: .875rem; color: #aaa;
  padding: 20px 0; text-align: center;
}

/* Desktop — hide entirely (panel is mobile-only, desktop has nav search) */
@media (min-width: 769px) {
  .vidz-search-panel,
  .vidz-search-panel__backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDZ MORE PANEL — slides in from left when ··· is tapped (mobile only)
   ═══════════════════════════════════════════════════════════════════════════ */

.vidz-more-panel__backdrop {
  position: fixed;
  inset: 0;
  z-index: 370;
  background: rgba(0,0,0,.45);
}
.vidz-more-panel__backdrop[hidden] { display: none; }

.vidz-more-panel {
  position: fixed;
  top: 0;
  left: var(--sidebar-width-collapsed, 64px);
  bottom: 0;
  width: calc(100vw - var(--sidebar-width-collapsed, 64px));
  max-width: 420px;
  z-index: 371;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.vidz-more-panel:not([hidden]) {
  transform: translateX(0);
  pointer-events: auto;
}
.vidz-more-panel[hidden] {
  display: flex !important;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
}

/* Header */
.vidz-more-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.vidz-more-panel__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
}
.vidz-more-panel__close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #f0f1f2;
  border: none;
  color: #555;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  min-height: unset; min-width: unset; padding: 0;
}
.vidz-more-panel__close:hover { background: #e3e4e6; color: #1a1a2e; }

/* Scrollable body */
.vidz-more-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
}

/* Section label */
.vidz-more-panel__section-label {
  font-size: .7rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 14px 18px 6px;
  margin: 0;
}

/* Menu items */
.vidz-more-panel__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  color: #1a1a2e;
  font-size: .9375rem;
  font-weight: 600;
  transition: background .12s, color .12s;
  cursor: pointer;
}
.vidz-more-panel__item:hover { background: #f4f5f7; color: #e94560; }
.vidz-more-panel__item:hover .vidz-more-panel__item-icon { color: #e94560; }

.vidz-more-panel__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #f0f1f2;
  color: #1a1a2e;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}

.vidz-more-panel__item-label { flex: 1; }

.vidz-more-panel__item-arrow {
  color: #bbb;
  flex-shrink: 0;
}

/* Danger (log out) */
.vidz-more-panel__item--danger { color: var(--color-highlight); }
.vidz-more-panel__item--danger .vidz-more-panel__item-icon {
  background: #fff0f2;
  color: var(--color-highlight);
}
.vidz-more-panel__item--danger:hover { background: #fff0f2; color: color-mix(in srgb, var(--color-highlight) 80%, #000); }

/* Accent (sign in) */
.vidz-more-panel__item--accent { color: var(--color-highlight); }
.vidz-more-panel__item--accent .vidz-more-panel__item-icon {
  background: #fff0f2;
  color: var(--color-highlight);
}

/* Divider */
.vidz-more-panel__divider {
  height: 1px;
  background: #f0f0f0;
  margin: 8px 18px;
}

/* Desktop — hidden */
@media (min-width: 769px) {
  .vidz-more-panel,
  .vidz-more-panel__backdrop { display: none !important; }
}

/* ── Mobile: controls always visible, pill style stays compact ── */
@media (max-width: 768px) {
  .vidz-item__controls {
    opacity: 1 !important;
    pointer-events: auto !important;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 40px;
    padding: 0 10px;
    gap: 5px;
  }
  .vidz-item__progress-wrap {
    bottom: 60px;
    left: 10px;
    right: 10px;
    height: 2px;
  }
  /* No seeker drag on mobile — just a visual indicator */
  .vidz-item__seek { display: none; }
}

/* ── Source badge — 🎬 Vidz / ✂️ Clip ────────────────────────────────────── */
.vidz-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vidz-source-badge span {
  vertical-align: middle;
}
/* Official Vidz — CAYA red pill */
.vidz-source-badge--vidz {
  background: #e94560;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
/* Fan Clip — purple pill */
.vidz-source-badge--clip {
  background: rgba(124, 58, 237, .75);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

/* ── Vidz thumbnail placeholder — replaces featureless black divs ── */
.vidz-thumb-placeholder {
  background: linear-gradient(135deg, #3a3a5c 0%, #5a3a6e 100%);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  gap: 4px;
  min-width: 60px;
  min-height: 80px;
}
.vidz-thumb-placeholder svg {
  opacity: 0.8;
}
.vidz-thumb-placeholder__initial {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vidz-thumb-placeholder--feed {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 0;
}
.vidz-item__thumb--no-poster {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3a3a5c 0%, #5a3a6e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 1;
}

/* ── Uploader role badge ── */
.vidz-role-badge {
  display: none;  /* Hidden from bottom info section */
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.vidz-role-badge--fan    { background: #fff3cd; color: #856404; }
.vidz-role-badge--artist { background: #d4edda; color: #155724; }
.vidz-role-badge--admin  { background: #cfe2ff; color: #084298; }

.vidz-uploader-identity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  flex-wrap: wrap;
}

/* ── Search panel shortcut links (req 1.7 – anchor navigation) ── */
.vidz-search-panel__shortcut-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1a1a2e;
    font-size: .9375rem;
    font-weight: 500;
    transition: background .12s;
    border-radius: 8px;
    width: 100%;
}
.vidz-search-panel__shortcut-link:hover { background: #f4f5f7; color: #e94560; }
.vidz-search-panel__shortcut-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }


/* ── Shoppable Merch Overlay Card ────────────────────────────────────────────
   Appears at the bottom of a vidz card when a seller has linked a merch item.
   Slides up from the bottom of the video frame.
   ─────────────────────────────────────────────────────────────────────────── */
.vidz-merch-card {
  position: absolute;
  bottom: 60px; /* above the controls bar */
  left: 10px;
  right: 10px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 10px;
  animation: vidz-merch-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: auto;
}

@keyframes vidz-merch-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vidz-merch-card__img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1a2e;
}

.vidz-merch-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vidz-merch-card__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.vidz-merch-card__price {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e94560;
  display: block;
}

.vidz-merch-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e94560;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.vidz-merch-card__btn:hover { background: #c73652; color: #fff; }

.vidz-merch-card__ad-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  background: rgba(30, 30, 50, 0.9);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}