/* ═══════════════════════════════════════════════════════════
   Reels (video feed) — shared styles for reels.html and the
   embedded "Видео" view inside index.html's mobile Лента tab.
═══════════════════════════════════════════════════════════ */

.reel-card {
  position: relative; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: #0b0b0f;
}
.reel-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.reel-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 52%, rgba(0,0,0,.8) 100%);
}
.reel-info { position: absolute; left: 16px; right: 84px; bottom: max(22px, env(safe-area-inset-bottom)); color: #fff; }
.reel-organizer { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; text-decoration: none; color: #fff; width: fit-content; }
.reel-organizer img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.reel-organizer .name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.reel-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.reel-desc {
  font-size: 13px; line-height: 1.4; opacity: .9; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.reel-tag { font-size: 12.5px; font-weight: 700; color: #fbbf76; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.reel-loc { display: flex; align-items: center; gap: 4px; font-size: 13px; opacity: .92; margin-bottom: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.reel-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  background: linear-gradient(135deg,#fb923c,#f59e0b); border-radius: 99px;
  color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 3px 14px rgba(249,115,22,.45);
}
.reel-actions { position: absolute; right: 12px; bottom: max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.reel-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: #fff; cursor: pointer; font-family: inherit; padding: 0;
}
.reel-action-btn .ico-circle {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.reel-action-btn:active .ico-circle { transform: scale(.86); }
.reel-action-btn.liked .ico-circle { background: rgba(239,68,68,.32); color: #ef4444; }
.reel-action-btn .cnt { font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.reel-mute-btn {
  position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 44px); right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.reel-empty, .reel-loading {
  color: #fff; text-align: center; padding: 60px 28px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.reel-empty .icon { margin-bottom: 10px; opacity: .8; }
.reel-empty .sub { color: rgba(255,255,255,.6); font-size: 13px; max-width: 280px; }
.reel-empty a { color: #fbbf76; font-weight: 700; }

/* ── Comments bottom sheet ── */
#reelsCommentsOverlay {
  position: fixed; inset: 0; z-index: 9500;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#reelsCommentsOverlay.open { opacity: 1; pointer-events: all; }
#reelsCommentsOverlay .rc-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
#reelsCommentsOverlay .rc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  background: var(--surface,#fff); border-radius: 20px 20px 0 0;
  max-height: 70vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
}
#reelsCommentsOverlay.open .rc-sheet { transform: translateY(0); }
.rc-handle { width: 34px; height: 4px; border-radius: 99px; background: var(--border,#e8e6f0); margin: 0 auto 10px; }
.rc-header { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 15px; color: var(--ink-1,#241a10); margin-bottom: 10px; }
.rc-close { background: var(--bg,#fdf8f2); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2,#6b5645); }
.rc-list { flex: 1; overflow-y: auto; min-height: 120px; }
.rc-loading, .rc-empty { text-align: center; color: var(--ink-3,#a4907c); font-size: 13px; padding: 24px 0; }
.rc-item { position: relative; display: flex; gap: 10px; padding: 9px 0; }
.rc-del-btn {
  margin-left: auto; flex-shrink: 0; align-self: flex-start; width: 22px; height: 22px; border-radius: 50%;
  background: none; border: none; color: var(--ink-3,#a4907c); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rc-del-btn:hover { background: #fee2e2; color: #dc2626; }
.rc-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rc-name { font-size: 13px; font-weight: 700; color: var(--accent,#f97316); text-decoration: none; }
.rc-text { font-size: 14px; color: var(--ink-1,#241a10); line-height: 1.45; margin-top: 2px; }
.rc-input-row { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--border,#f0e2ce); }
.rc-input-row input {
  flex: 1; padding: 10px 14px; border: 1.5px solid var(--border,#e8e6f0); border-radius: 99px;
  font-size: 14px; font-family: inherit; outline: none; background: var(--bg,#fdf8f2);
}
.rc-input-row input:focus { border-color: var(--accent,#f97316); background: #fff; }
.rc-input-row button {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: linear-gradient(135deg,#fb923c,#f59e0b); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── Transparent overlay top bar (video mode): tabs + collapsible search ── */
.rl-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 14px 30px;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
  pointer-events: none;
}
.rl-topbar.rl-topbar-fixed { position: fixed; }
.rl-topbar > * { pointer-events: all; }

/* Light/sticky variant — used above the regular card list, where a dark
   transparent overlay would be unreadable against white cards. Same tabs +
   collapsible-search component and animation, just themed for the surface
   it sits on, and it takes real layout space (sticky) instead of overlaying. */
.rl-topbar.rl-topbar-sticky {
  position: sticky; top: 0; padding: 10px 12px 10px; background: var(--surface,#fff);
  border-bottom: 1px solid var(--border,#e8e6f0);
}
.rl-topbar-light .rl-tab { color: var(--ink-3,#8b88a0); text-shadow: none; }
.rl-topbar-light .rl-tab.active { color: var(--ink-1,#0f0e17); }
.rl-topbar-light .rl-tab.active::after { background: var(--accent,#f97316); }
.rl-topbar-light .rl-search-btn { background: var(--bg,#f5f4fa); color: var(--ink-2,#3d3a52); backdrop-filter: none; }
.rl-topbar-light .rl-search-pop {
  top: 8px; background: var(--surface,#fff); backdrop-filter: none;
  border-color: var(--border,#e8e6f0); box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.rl-topbar-light .rl-search-pop-ico { color: var(--ink-3,#8b88a0); }
.rl-topbar-light .rl-search-pop input { color: var(--ink-1,#0f0e17); }
.rl-topbar-light .rl-search-pop input::placeholder { color: var(--ink-3,#8b88a0); }
.rl-topbar-light .rl-search-close { background: var(--bg,#f5f4fa); color: var(--ink-2,#3d3a52); }

.rl-tabs { display: flex; align-items: center; gap: 20px; }
.rl-tab {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.6);
  padding: 4px 0; position: relative; text-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: color .2s;
}
.rl-tab.active { color: #fff; }
.rl-tab.active::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 99px; background: #fff;
}

.rl-search-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.rl-search-btn:active { transform: scale(.85); }
.rl-search-btn.hidden { opacity: 0; transform: scale(.3) rotate(90deg); pointer-events: none; }

/* Search pop: reveals with a circular "iris" wipe from the search icon's spot,
   rather than a plain fade/slide — the unusual bit that was asked for. */
.rl-search-pop {
  position: absolute; top: max(11px, env(safe-area-inset-top)); right: 14px; left: 14px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(20,18,25,.6); backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 99px;
  padding: 7px 8px 7px 16px;
  clip-path: circle(4% at calc(100% - 17px) 17px);
  opacity: 0; pointer-events: none;
  transition: clip-path .5s cubic-bezier(.16,1,.3,1), opacity .25s ease-out;
}
.rl-search-pop.open {
  clip-path: circle(150% at calc(100% - 17px) 17px);
  opacity: 1; pointer-events: all;
}
.rl-search-pop-ico { display: flex; color: rgba(255,255,255,.6); flex-shrink: 0; }
.rl-search-pop input {
  flex: 1; background: none; border: none; outline: none; color: #fff;
  font-size: 14px; font-family: inherit; min-width: 0;
}
.rl-search-pop input::placeholder { color: rgba(255,255,255,.5); }
.rl-search-close {
  width: 26px; height: 26px; border-radius: 50%; border: none; flex-shrink: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}