/* Vertical Video Scroll - TikTok/Reels-style vertical scrolling video feed
 * Implements snap-scrolling, full-screen video containers, smooth scrolling,
 * touch gestures, video positioning, and mobile-optimized scroll behavior
 *END_DESCRIPTION
 */

/* TikTok/Reels-style Vertical Video Scrolling */

.mobile-video-app {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height excludes browser UI */
  overflow: hidden;
  position: relative;
  background: #000;
}

.video-scroll-container {
  height: calc(100vh - var(--mobile-header-height, var(--header-height)));
  margin-top: var(--mobile-header-height, var(--header-height));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* Allow video elements to be touchable */
  touch-action: pan-y;
  position: relative; /* Required for virtual scrolling absolute positioning */
  /* Performance optimizations for smoother scrolling */
  will-change: scroll-position;
  transform: translateZ(0); /* Force hardware acceleration */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.video-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.video-slide {
  min-height: calc(100vh - var(--mobile-header-height, var(--header-height)));
  min-height: calc(100dvh - var(--mobile-header-height, var(--header-height)));
  max-height: calc(100vh - var(--mobile-header-height, var(--header-height)));
  max-height: calc(100dvh - var(--mobile-header-height, var(--header-height)));
  width: 100vw;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  background: var(--mobile-bg);
  overflow: hidden;
  /* Performance optimizations */
  contain: layout style paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.video-player {
  position: relative;
  width: 100%;
  height: 60vh; /* Fixed height for video */
  height: 60dvh; /* Use dynamic viewport height to exclude browser UI */
  z-index: 1;
  flex-shrink: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 60vh;
  background: #000;
  /* Ensure video is clickable on mobile */
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 10;
  position: relative;
}

.video-element iframe {
  width: 100%;
  height: 100%;
  border: none;
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 10;
}

/* Mobile Header */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(180deg, rgba(11, 21, 31, 0.95) 0%, rgba(11, 21, 31, 0.7) 40%, rgba(11, 21, 31, 0.3) 70%, rgba(0,0,0,0) 100%);
  padding: env(safe-area-inset-top, 20px) 16px 16px 16px;
  box-sizing: border-box;
}

/* ⚠️ DO NOT PUT `backdrop-filter` BACK ON `.mobile-header` ITSELF.
   ------------------------------------------------------------------
   The blur lives on this pseudo-element instead, and that is load-bearing.

   A `backdrop-filter` value other than `none` makes an element a **containing
   block for its `position: fixed` descendants** (Filter Effects spec). WebKit implements that;
   Chromium, measured on this exact page, does not — a fixed dropdown inside the
   header still resolves against the viewport there. So this is invisible in every
   browser available on this machine and bites only on iOS Safari.

   The social feed's filter dropdowns (`.social-filter-dropdown`, ERB-rendered in
   `app/views/social_feed/index.html.erb`) are `position: fixed` DESCENDANTS of
   this header:

     header.mobile-header            fixed, z-index 100, backdrop-filter  <-- here
      div.horizontal-settings-bar    sticky, z-index 200
       div.settings-scroll-container overflow-x: auto                    <-- clipper
        div.social-filter-wrapper    relative
         div.dropdown-menu           position: fixed, z-index 20000

   With the header as their containing block they stop being viewport-fixed, so
   (a) the viewport coordinates `toggleSocialDropdown` writes are off by the
   header's padding origin — 16px across and, on iOS only, ≥20px down from
   `max(env(safe-area-inset-top), 20px)` — and, far worse, (b) they become
   clippable by an intervening `overflow` ancestor. `.settings-scroll-container`
   is exactly that, and it is ~36px tall, while the dropdown is positioned at
   `buttonRect.bottom + 4` — i.e. entirely below it. The dropdown is clipped away
   and the video is what you see in its place. That is the reported "dropdown
   opens behind the video on iPhone".

   A pseudo-element carries the same blur, has no descendants to trap, and
   samples the same backdrop (the page content plus this header's own gradient,
   which is a smooth ramp and so survives being blurred with it).

   REASONED FROM THE CSS, NOT OBSERVED: there is no iOS device here and
   Playwright's WebKit will not launch on this host (needs libicudata.so.74,
   host has ICU 78). See docs/pages/mobile-feed.md for what to check on a phone. */
.mobile-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.nav-tab {
  padding: 8px 16px;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.nav-tab.active {
  color: #000;
}

.nav-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Override any conflicting search-btn styles - use header-item styling instead */
.search-btn {
  /* Reset any absolute positioning */
  position: static !important;
  /* Remove any circular background styling */
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  /* Remove any transform positioning */
  transform: none !important;
  top: auto !important;
  right: auto !important;
  /* Remove backdrop filters */
  backdrop-filter: none !important;
}

.search-btn:hover {
  background: none !important;
  transform: scale(1.05) !important;
}

.video-actions-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.video-actions-overlay > * {
  pointer-events: auto;
}

/* Right Side Actions */
.actions-right {
  position: absolute;
  right: 12px;
  bottom: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.action-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  position: relative;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn.clicked {
  animation: actionBtnClick 0.3s ease;
}

@keyframes actionBtnClick {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.action-btn svg {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.action-count {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  min-height: 14px;
}

.like-action-btn.active {
  color: white;
}

.like-action-btn.active svg {
  fill: currentColor;
}

.dislike-action-btn.active {
  background: rgba(128, 128, 128, 0.8);
  color: white;
}

.dislike-action-btn.active svg {
  fill: currentColor;
}

.action-btn.hovered {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Bottom Info */
.video-info-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 80px;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
  color: white;
  pointer-events: none;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-description {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-tag {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.video-trend-score {
  margin: 8px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.trend-label {
  color: rgba(255, 255, 255, 0.6);
}

.trend-value {
  color: #4dabf7;
  font-weight: 600;
}

.video-additional-info {
  margin-top: 8px;
}

.info-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-right: 8px;
  margin-bottom: 4px;
  display: inline-block;
}

.info-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-1px);
}

/* Loading States */
.video-slide.loading {
  background: #000;
}

.video-slide.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 20;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* No Videos State */
.no-videos {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: white;
  background: #000;
}

.no-videos h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

.no-videos p {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 24px;
  line-height: 1.5;
  max-width: 300px;
}

.clear-filters-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.clear-filters-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* TRW Auth Required */
.trw-auth-required {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #000;
}

.auth-message-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  max-width: 400px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-message-card h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-message-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.connect-trw-btn {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 14px 28px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.connect-trw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  text-decoration: none;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .actions-right {
    right: 8px;
    bottom: 120px;
  }
  
  .action-btn {
    width: 48px;
    height: 48px;
  }
  
  .action-btn svg {
    width: 24px;
    height: 24px;
  }
  
  .video-info-bottom {
    right: 64px;
    padding: 16px;
  }
  
  .video-title {
    font-size: 14px;
  }
  
  .video-description {
    font-size: 13px;
  }
}

/* Transcript Panel - same height as video content wrapper (remaining space in video-slide) */
.transcript-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
  contain: layout;
}

.transcript-panel.open {
  transform: translateY(0);
}

.transcript-panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.transcript-panel-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.transcript-panel-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.transcript-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.transcript-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.transcript-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  color: white;
  line-height: 1.6;
  font-size: 16px;
}

.transcript-text {
  white-space: pre-wrap;
  transition: opacity 0.15s ease;
}

/* Categories Dropdown */
.categories-dropdown {
  position: fixed;
  z-index: 1000;
  background: rgba(18, 18, 28, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.categories-dropdown-list {
  max-height: 240px;
  overflow-y: auto;
}

.categories-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.categories-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.categories-dropdown-item .cat-check {
  width: 16px;
  flex-shrink: 0;
  color: #ecc879;
  font-size: 12px;
  opacity: 0;
}

.categories-dropdown-item.assigned .cat-check {
  opacity: 1;
}

.categories-dropdown-item.assigned {
  color: white;
}

.categories-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0;
}

.categories-dropdown-new {
  padding: 4px 0;
}

.categories-new-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.categories-new-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
}

.categories-new-toggle i {
  font-size: 11px;
}

.categories-new-form-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 10px;
}

.categories-new-form-inline input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 7px 10px;
  color: white;
  font-size: 13px;
  outline: none;
}

.categories-new-form-inline input:focus {
  border-color: rgba(236, 200, 121, 0.5);
}

.categories-new-form-inline input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.categories-confirm-btn {
  background: #ecc879;
  border: none;
  border-radius: 6px;
  color: #0d1824;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.categories-confirm-btn:hover {
  opacity: 0.85;
}


/* Settings Panel */
.settings-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 85vh;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.settings-panel.open {
  transform: translateY(0);
}

.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.settings-panel-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.settings-panel-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.settings-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.settings-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.settings-section {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.settings-section h4 {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-group label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.tag-selector {
  position: relative;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.tag-display {
  flex: 1;
  padding: 12px 16px;
  color: white;
  cursor: pointer;
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag-display .placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.tag-selector-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-selector-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tag-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.tag-search {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: white;
  font-size: 14px;
}

.tag-search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.tag-option {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.tag-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.selected-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.remove-tag {
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.apply-filters-btn,
.clear-filters-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.apply-filters-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.apply-filters-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.clear-filters-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.clear-filters-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.setting-item {
  margin-bottom: 16px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #667eea;
}

/* Tag Filter Specific Styles */
.filter-tags-display {
  min-height: 40px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.filter-tags-display:empty::before {
  content: 'No tags selected';
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.tag-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  margin-bottom: 16px;
}

.tag-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 8px 0;
}

.tag-filter-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tag-filter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.tag-filter-btn.include {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  border-color: #4caf50;
  color: white;
}

.tag-filter-btn.exclude {
  background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
  border-color: #f44336;
  color: white;
}

.filter-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-tag.include-tag {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}

.filter-tag.exclude-tag {
  background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
}

/* Category Tag Styles for Mini Display */
.category-tag-mini {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px;
}

.remove-category-mini-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-category-mini-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.no-categories-mini {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 14px;
}

/* Blackout mode */
video.blacked-out {
  filter: blur(20px);
}

.video-blur-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
}

.video-blur-overlay.active {
  display: flex;
}

.blackout-controls {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 90%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 32px;
  padding: 10px 16px;
}

.blackout-ctrl-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.9;
}

.blackout-ctrl-btn:active {
  opacity: 0.6;
}

/* The bar is 4px of visible track, but the input itself is 24px tall so a click
   anywhere near it seeks instead of missing a hairline target. The track is drawn
   by the ::-*-track pseudo-elements rather than the input's own background. */
.blackout-seekbar {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  background: transparent;
  outline: none;
  cursor: pointer;
  margin: 0;
}

.blackout-seekbar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.blackout-seekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  margin-top: -5px; /* centres the 14px thumb on the 4px track */
}

.blackout-seekbar::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.blackout-seekbar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
}

.content-action-btn.blackout-btn.active i {
  color: #ecc879;
}

.desktop-action-btn.blackout-btn.active i {
  color: #ecc879;
}

.desktop-video-container .blackout-controls {
  width: 92%;
  max-width: 560px;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .video-scroll-container {
    -webkit-overflow-scrolling: touch;
  }

  .mobile-header {
    padding-top: max(env(safe-area-inset-top), 20px);
  }

  .transcript-content {
    -webkit-overflow-scrolling: touch;
  }

}

/* Viral Video Button Styles */
.viral-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  border: none;
  color: white;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  animation: pulse-glow 2s ease-in-out infinite;
}

.viral-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s linear infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 107, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.8), 0 0 30px rgba(255, 142, 83, 0.5); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.viral-btn:hover {
  background: linear-gradient(135deg, #ff8e53 0%, #ff6b6b 100%);
  transform: scale(1.05);
}

/* Desktop event row - sits below the two action groups */
.desktop-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
  flex-wrap: wrap;
}

/* Event Used Label */
.event-used-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(180, 0, 0, 0.15);
  border: 1px solid rgba(180, 0, 0, 0.35);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #ff6b6b;
  white-space: nowrap;
}

.event-used-label.mobile {
  font-size: 11px;
  padding: 3px 8px;
  margin-top: 4px;
}

/* Admin-only date shown after the event-used label */
.event-used-date {
  font-weight: 500;
  opacity: 0.75;
}

/* Training Sample Label (admin-only) */
.training-sample-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 120, 180, 0.15);
  border: 1px solid rgba(0, 120, 180, 0.35);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #60b8ff;
  white-space: nowrap;
}

.training-sample-label.mobile {
  font-size: 11px;
  padding: 3px 8px;
  margin-top: 4px;
}

/* Weekly Clips note badge — shown wherever the clip appears once a note is saved */
.clip-note-badge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(236, 200, 121, 0.15);
  border: 1px solid rgba(236, 200, 121, 0.35);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #ecc879;
  max-width: 100%;
  /* Without this the badge's min-content width (the whole note on one line)
     becomes the row's minimum, pushing the action buttons out of the layout. */
  min-width: 0;
}

.clip-note-badge-icon {
  flex-shrink: 0;
}

/* Long notes wrap onto the next line instead of widening their container */
.clip-note-badge-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.clip-note-badge.mobile {
  font-size: 11px;
  padding: 3px 8px;
  margin-top: 4px;
  max-width: 100%;
}

/* "Add a note?" popup — opens next to the Weekly Clips button */
.clip-note-popup {
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(30, 30, 40, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  animation: clipNotePopupFadeIn 0.15s ease-out;
}

@keyframes clipNotePopupFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.clip-note-popup-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.clip-note-popup-input {
  width: 160px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: #fff;
}

.clip-note-popup-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.clip-note-popup-input:focus {
  outline: none;
  border-color: #ecc879;
}

.clip-note-popup-save {
  flex-shrink: 0;
  background: rgba(236, 200, 121, 0.2);
  border: 1px solid rgba(236, 200, 121, 0.5);
  color: #ecc879;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.clip-note-popup-save:hover {
  background: rgba(236, 200, 121, 0.35);
}

@media (max-width: 480px) {
  .clip-note-popup-input {
    width: 120px;
  }
}

/* Admin flag-event button */
.event-flag-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-secondary, #aaa);
}

.event-flag-btn.active {
  background: rgba(180, 0, 0, 0.2);
  border-color: rgba(180, 0, 0, 0.5);
  color: #ff6b6b;
}

.event-flag-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Viral Video Modal */
.viral-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.viral-modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  margin: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.viral-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #ff6b6b;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 142, 83, 0.1) 100%);
}

.viral-modal-header h3 {
  margin: 0;
  font-size: 24px;
  color: white;
}

.viral-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s ease;
}

.viral-close-btn:hover {
  transform: scale(1.2);
  color: #ff6b6b;
}

.viral-stats {
  padding: 15px 20px;
  text-align: center;
  font-size: 18px;
  color: #ff8e53;
  font-weight: bold;
}

.viral-date {
  padding: 5px 20px 15px;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  font-style: italic;
}

/* The song under the viral clip (MusicInfoService). Absent on ~80% of clips by
   design — there is deliberately no empty/unknown state to style. */
.viral-music {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px 15px;
  text-align: center;
  font-size: 14px;
  color: #ddd;
}

.viral-music-glyph { color: #ecc879; }
.viral-music-song  { font-weight: 600; }
.viral-music-artist { color: #aaa; font-style: italic; }

/* Admin-only: a candidate that did NOT clear the display rule. Muted and
   explicitly labelled, because the point of showing it is to be graded, not to
   be believed. */
.viral-music--unconfirmed {
  color: #8d8d8d;
  font-size: 12px;
  font-style: italic;
}

.viral-music-label { font-weight: 600; }
.viral-music-evidence { opacity: 0.75; }

.viral-counter {
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  color: #aaa;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.viral-video-container {
  padding: 0 20px 20px;
  position: relative;
}

.viral-instagram-video {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: min(100%, 320px);
  max-height: min(60vh, 520px);
  border-radius: 8px;
  background: black;
}

.viral-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 107, 107, 0.8);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  font-size: 20px;
}

.viral-nav-btn:hover:not(.disabled) {
  background: rgba(255, 107, 107, 0.9);
  border-color: #ff6b6b;
  transform: translateY(-50%) scale(1.1);
}

.viral-nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.2);
}

.viral-nav-prev {
  left: 10px;
}

.viral-nav-next {
  right: 10px;
}

.viral-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff6b6b;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 2px solid #1a1a1a;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.viral-caption {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin: 15px 20px 0;
}

.viral-caption-label {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.viral-caption-text {
  color: #ddd;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.viral-comments {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin: 15px 20px 0;
  max-height: 200px;
  overflow-y: auto;
}

.viral-comments-label {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.viral-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.viral-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.viral-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.viral-comment-content {
  flex: 1;
  min-width: 0;
}

.viral-comment-username {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  margin-right: 8px;
}

.viral-comment-text {
  color: #ddd;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
}

.viral-comment-likes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #999;
  font-size: 14px;
  margin-left: 10px;
}

.viral-comment-likes i {
  color: #e74c3c;
  font-size: 12px;
}

.viral-actions {
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.view-on-instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.view-on-instagram-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(240, 148, 51, 0.4);
}

/* Mobile specific viral button */
@media (max-width: 768px) {
  .content-action-btn.viral-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content-action-btn.viral-btn i {
    font-size: 20px;
  }

  .viral-modal-content {
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
  }

  .viral-modal-header {
    padding: 15px;
  }

  .viral-modal-header h3 {
    font-size: 18px;
  }

  .viral-stats {
    padding: 10px 15px;
    font-size: 16px;
  }

  .viral-date {
    padding: 5px 15px 10px;
    font-size: 12px;
  }

  .viral-music {
    padding: 0 15px 10px;
    font-size: 12px;
  }

  .viral-counter {
    padding: 8px 15px;
    font-size: 12px;
  }

  .viral-video-container {
    padding: 0 15px 15px;
  }

  .viral-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .viral-nav-prev {
    left: 5px;
  }

  .viral-nav-next {
    right: 5px;
  }

  .viral-count {
    font-size: 9px;
    min-width: 16px;
    height: 16px;
  }

  .viral-instagram-video {
    max-height: 45vh;
    max-width: 100%;
    object-fit: contain;
  }

  .viral-caption {
    padding: 12px 15px;
    margin: 10px 15px 0;
  }

  .viral-caption-label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .viral-caption-text {
    font-size: 14px;
  }

  .viral-actions {
    padding: 15px;
  }

  .view-on-instagram-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Scale down for short devices (small height) */
@media (max-height: 700px) {
  /* Reduce video player height significantly */
  .video-player {
    height: 45vh;
  }

  .video-element {
    max-height: 45vh;
  }

  /* Smaller buttons */
  .action-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Smaller fonts */
  .video-title {
    font-size: 13px;
  }

  .video-description {
    font-size: 11px;
  }

  /* Minimal padding */
  .video-actions-overlay {
    padding: 8px;
    gap: 8px;
  }

  .action-btn-label {
    font-size: 10px;
  }

  /* Very compact mobile header */
  .mobile-header {
    padding: 8px 10px;
  }

  .header-top-row {
    gap: 6px;
  }

  .app-title {
    font-size: 14px;
  }

  .header-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* Minimal feed tabs */
  .header-feed-nav {
    gap: 4px;
    padding: 4px 10px;
  }

  .feed-tab {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Even more compact for very short devices */
@media (max-height: 600px) {
  .video-player {
    height: 40vh;
  }

  .video-element {
    max-height: 40vh;
  }

  .action-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .video-actions-overlay {
    padding: 6px;
    gap: 6px;
  }

  .mobile-header {
    padding: 6px 8px;
  }

  .header-icon-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .feed-tab {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* Ultra compact for iPhone SE and similar (375x667) */
@media (max-height: 670px) {
  .video-player {
    height: 35vh;
  }

  .video-element {
    max-height: 35vh;
  }

  .action-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .action-btn-label {
    font-size: 9px;
  }

  .video-actions-overlay {
    padding: 4px;
    gap: 4px;
  }

  .mobile-header {
    padding: 4px 6px;
  }

  .header-top-row {
    gap: 4px;
  }

  .app-title {
    font-size: 12px;
  }

  .header-icon-btn {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .header-feed-nav {
    gap: 3px;
    padding: 3px 6px;
  }

  .feed-tab {
    padding: 3px 6px;
    font-size: 9px;
  }

  .video-title {
    font-size: 12px;
  }

  .video-description {
    font-size: 10px;
  }
}