html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.mobile_footer_fixed_menu_container {
  display: none !important;
}

.reels-page-body {
  --reels-bg: linear-gradient(135deg, #f5f7fb 0%, #edf2f8 48%, #f8fafc 100%);
  --reels-stage-glow: radial-gradient(
    circle at 50% 42%,
    rgba(246, 81, 105, 0.16),
    rgba(246, 81, 105, 0)
  );
  --reels-sidebar-bg: rgba(255, 255, 255, 0.92);
  --reels-sidebar-border: rgba(218, 226, 237, 0.88);
  --reels-surface: rgba(255, 255, 255, 0.88);
  --reels-surface-strong: #ffffff;
  --reels-surface-soft: rgba(240, 245, 251, 0.92);
  --reels-surface-inverse: rgba(15, 23, 42, 0.72);
  --reels-surface-inverse-hover: rgba(15, 23, 42, 0.86);
  --reels-text: #152033;
  --reels-text-soft: #5f6d84;
  --reels-text-muted: #7b879a;
  --reels-text-on-media: #ffffff;
  --reels-line: rgba(214, 223, 236, 0.94);
  --reels-line-strong: rgba(255, 255, 255, 0.16);
  --reels-shadow: 0 26px 80px rgba(15, 23, 42, 0.12);
  --reels-card-shadow: 0 28px 72px rgba(15, 23, 42, 0.24);
  --reels-button-shadow: 0 16px 38px rgba(15, 23, 42, 0.22);
  --reels-accent: #f65169;
  --reels-accent-alt: #ff9662;
  --reels-progress-bg: rgba(255, 255, 255, 0.22);
  --reels-progress-fill: linear-gradient(90deg, #f65169 0%, #ff9662 100%);
  --reels-overlay: linear-gradient(
    180deg,
    rgba(7, 10, 18, 0.06) 0%,
    rgba(7, 10, 18, 0.14) 36%,
    rgba(7, 10, 18, 0.84) 100%
  );
  --reels-menu-bg: rgba(255, 255, 255, 0.96);
  --reels-menu-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
  --reels-backdrop: rgba(8, 13, 24, 0.44);
  --reels-panel-backdrop: rgba(10, 15, 28, 0.3);
  --reels-empty-bg: rgba(255, 255, 255, 0.9);
  --reels-empty-text: #22314a;
  --reels-empty-soft: #60708a;
  --reels-video-bg: #070b14;
  background: var(--reels-bg);
  color: var(--reels-text);
}

.reels-page-body.night-mode {
  --reels-bg: linear-gradient(135deg, #090d16 0%, #0d1320 52%, #070b14 100%);
  --reels-stage-glow: radial-gradient(
    circle at 50% 42%,
    rgba(246, 81, 105, 0.18),
    rgba(246, 81, 105, 0)
  );
  --reels-sidebar-bg: rgba(11, 17, 28, 0.92);
  --reels-sidebar-border: rgba(39, 51, 74, 0.9);
  --reels-surface: rgba(17, 24, 39, 0.82);
  --reels-surface-strong: #121b2a;
  --reels-surface-soft: rgba(21, 30, 46, 0.9);
  --reels-surface-inverse: rgba(8, 13, 24, 0.74);
  --reels-surface-inverse-hover: rgba(8, 13, 24, 0.9);
  --reels-text: #eff4ff;
  --reels-text-soft: #c1ccdf;
  --reels-text-muted: #91a0b8;
  --reels-text-on-media: #ffffff;
  --reels-line: rgba(42, 55, 79, 0.96);
  --reels-line-strong: rgba(255, 255, 255, 0.14);
  --reels-shadow: 0 30px 90px rgba(2, 6, 23, 0.46);
  --reels-card-shadow: 0 30px 84px rgba(2, 6, 23, 0.52);
  --reels-button-shadow: 0 18px 40px rgba(2, 6, 23, 0.44);
  --reels-menu-bg: rgba(12, 19, 31, 0.96);
  --reels-menu-shadow: 0 28px 70px rgba(2, 6, 23, 0.5);
  --reels-backdrop: rgba(2, 6, 23, 0.58);
  --reels-panel-backdrop: rgba(4, 9, 18, 0.42);
  --reels-empty-bg: rgba(12, 19, 31, 0.9);
  --reels-empty-text: #edf3ff;
  --reels-empty-soft: #afbdd6;
  --reels-video-bg: #04070f;
}

.reels-page-body *,
.reels-page-body *::before,
.reels-page-body *::after {
  box-sizing: border-box;
}

.reels-page-body a {
  color: inherit;
}

.reels-page-body .g_feed[data-get="trendposts"],
.reels-page-body .g_feed[data-get="purchasedpremiums"],
.reels-page-body .g_feed[data-get="friends"],
.reels-page-body .g_feed[data-get="allPosts"],
.reels-page-body .g_feed[data-get="premiums"],
.reels-page-body .live_item_cont {
  display: none !important;
}

.reels-shell {
  display: flex;
  min-height: 100vh;
  background: transparent;
}

.reels-left-rail {
  position: sticky;
  top: 0;
  width: 318px;
  min-width: 318px;
  height: 100vh;
  overflow-y: auto;
  padding: 0;
  background: transparent;
  border-right: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.reels-left-rail .leftSticky {
  position: sticky;
  top: 0;
}

.reels-left-rail .i_left_container {
  padding: 0;
}

.reels-left-rail .leftSidebarWrapper {
  padding: 10px 14px 20px 24px;
}

.reels-left-rail .i_left_menu_box svg [stroke] {
  stroke: #a9b5c8;
}

.reels-left-rail .i_left_menu_box:hover svg [stroke] {
  stroke: var(--reels-accent);
}

.reels-logo-bar {
  padding: 10px 14px 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.reels-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.reels-logo-img {
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}

.reels-main-rail {
  position: relative;
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px clamp(28px, 4vw, 56px);
}

.reels-stage {
  position: relative;
  width: min(1280px, 100%);
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(52px, 7vw, 112px);
}

.reels-stage::before {
  content: "";
  position: absolute;
  inset: 7% 18%;
  background: var(--reels-stage-glow);
  filter: blur(96px);
  pointer-events: none;
}

.reels-container {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  max-width: 470px;
  min-width: 470px;
  height: min(86vh, 940px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.reel.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.reel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 30px;
  background: var(--reels-video-bg);
  border: 0;
  box-shadow: var(--reels-card-shadow);
  isolation: isolate;
}

.reel video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--reels-video-bg);
}

.no_content {
  width: min(460px, calc(100vw - 48px));
  min-height: 280px;
  padding: 32px 28px;
  border-radius: 28px;
  background: var(--reels-empty-bg);
  color: var(--reels-empty-text);
  border: 1px solid var(--reels-line);
  box-shadow: var(--reels-shadow);
  text-align: center;
}

.reel-missing,
.onlySubs,
.onlyPremium {
  position: absolute;
  inset: 0;
}

.reel-missing,
.onlySubs,
.onlyPremium,
.no_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-missing,
.onlySubs,
.onlyPremium {
  padding: 24px;
  background: linear-gradient(
    180deg,
    rgba(7, 10, 18, 0.36) 0%,
    rgba(7, 10, 18, 0.82) 100%
  );
}

.reel-missing {
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
}

.onlySubsWrapper {
  width: 100%;
  padding: 26px 24px;
  border-radius: 24px;
  background: var(--reels-empty-bg);
  color: var(--reels-empty-text);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  text-align: center;
  backdrop-filter: blur(18px);
}

.onlySubs_icon,
.premium_locked {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 81, 105, 0.12);
  color: var(--reels-accent);
}

.onlySubs_icon svg,
.premium_locked svg {
  width: 24px;
  height: 24px;
}

.onlySubs_note,
.buythistext,
.buyThisPost {
  color: var(--reels-empty-text);
}

.onlySubs_note {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.buyThisPost {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.buythistext {
  font-size: 14px;
  color: var(--reels-empty-soft);
}

.onlySubs .free_follow,
.onlySubs .fr_subs,
.onlyPremium .fr_subs {
  min-height: 46px;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(
    135deg,
    var(--reels-accent) 0%,
    var(--reels-accent-alt) 100%
  );
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 16px 32px rgba(246, 81, 105, 0.24);
}

.custom-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1001;
}

.volume-control {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(9, 14, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.volume-control svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

.video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: none;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.26);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: reelsSpinner 0.85s linear infinite;
}

@keyframes reelsSpinner {
  to {
    transform: rotate(360deg);
  }
}

.reel-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: var(--reels-text-on-media);
  pointer-events: none;
  background: var(--reels-overlay);
}

.reel-ui * {
  pointer-events: auto;
}

.left-ui {
  position: absolute;
  left: 20px;
  right: 102px;
  bottom: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.user {
  display: flex;
  align-items: center;
  max-width: 100%;
  width: min(100%, 340px);
}

.reels-author-card {
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.reels-author-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.reels-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reels-author-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.reels-author-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.reels-author-name {
  min-width: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reels-author-verified {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reels-author-verified svg,
.reels-author-verified svg * {
  width: 18px;
  height: 18px;
  fill: #ffffff !important;
}

.reels-author-handle {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reels-author-follow {
  min-width: 78px;
  min-height: 32px;
  margin-right: 0;
  padding: 0 12px !important;
  border-radius: 12px !important;
  flex: 0 0 auto;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.reels-author-follow.i_btn_like_item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.reels-author-follow.i_btn_like_item:hover {
  background: rgba(255, 255, 255, 0.16);
}

.reels-author-follow.i_btn_like_item_flw {
  background: linear-gradient(
    135deg,
    rgba(246, 81, 105, 0.92) 0%,
    rgba(255, 150, 98, 0.92) 100%
  );
  border: 1px solid transparent;
  color: #ffffff;
}

.reels-author-follow.i_btn_like_item_flw:hover {
  background: linear-gradient(
    135deg,
    rgba(245, 72, 98, 0.98) 0%,
    rgba(255, 140, 87, 0.98) 100%
  );
  color: #ffffff;
}

.reels-author-follow svg {
  width: 12px !important;
  height: 12px !important;
  margin-right: 5px !important;
  fill: currentColor !important;
}

.reels-author-follow:hover svg {
  fill: currentColor !important;
}

.description-wrapper {
  width: min(100%, 340px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.description {
  max-height: calc(1.55em * 3);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}

.description a {
  color: #ffffff;
  font-weight: 700;
}

.description.expanded {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 6px;
}

.read-more {
  display: none;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.description-wrapper.truncated .read-more {
  display: inline-flex;
}

.description-wrapper.expanded .read-more::after {
  content: " (Kapat)";
}

.right-ui {
  position: absolute;
  right: 16px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 10px;
  border-radius: 26px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.reels-page-body .reel-ui .action {
  width: 50px;
  height: 50px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none !important;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.reels-page-body .reel-ui .action:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.2);
}

.reels-page-body .reel-ui .action > svg,
.reels-page-body .reel-ui .action > svg *,
.reels-page-body .reel-ui .lp_sum {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.reels-page-body .reel-ui .action > svg {
  width: 20px;
  height: 20px;
}

.reels-page-body .reel-ui .action.in_save:hover > svg,
.reels-page-body .reel-ui .action.in_save:hover > svg *,
.reels-page-body .reel-ui .action.in_saved > svg,
.reels-page-body .reel-ui .action.in_saved > svg * {
  fill: #4fd1c5 !important;
  color: #4fd1c5 !important;
}

.reels-page-body .reel-ui .openPostMenu_reel {
  position: relative;
}

.reels-page-body .reel-ui .lp_sum {
  min-height: 16px;
  margin: 0;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
}

.video-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 13px;
  border-radius: 18px;
  background: rgba(7, 10, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
}

.progress-bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--reels-progress-bg);
  cursor: pointer;
}

.progress-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--reels-progress-fill);
}

.progress-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.time-display {
  min-width: 72px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 88px;
  height: 88px;
  opacity: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(7, 10, 18, 0.54);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.video-overlay.show {
  opacity: 1;
  animation: reelOverlayFade 0.7s ease;
}

.video-overlay.playing {
  background-image: url("https://img.icons8.com/ios-filled/100/ffffff/play.png");
}

.video-overlay.paused {
  background-image: url("https://img.icons8.com/ios-filled/100/ffffff/pause.png");
}

@keyframes reelOverlayFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.seek-feedback {
  position: fixed;
  top: 45%;
  left: 50%;
  z-index: 999;
  display: none;
  min-width: 124px;
  padding: 14px 20px;
  border-radius: 18px;
  transform: translate(-50%, -50%);
  background: rgba(9, 14, 24, 0.82);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

.seek-feedback.show {
  display: block;
  animation: reelSeekFade 0.7s ease-in-out;
}

@keyframes reelSeekFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.scroll-buttons {
  position: fixed;
  top: 50%;
  right: clamp(20px, 4vw, 48px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(-50%);
}

.scroll-btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 18px;
  background: var(--reels-surface-inverse);
  box-shadow: var(--reels-button-shadow);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
  backdrop-filter: blur(16px);
}

.scroll-btn:hover {
  transform: translateY(-1px);
  background: var(--reels-surface-inverse-hover);
}

.scroll-btn svg {
  width: 22px;
  height: 22px;
}

.scroll-btn svg path {
  fill: #ffffff;
}

.hidden-scroll-buttons {
  display: none !important;
}

.noMoreContentMessage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(7, 10, 18, 0.18),
    rgba(7, 10, 18, 0.58)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.noMoreContentMessage.show {
  display: flex;
  opacity: 1;
}

.noMoreReels {
  width: min(360px, 100%);
  padding: 20px 18px;
  border-radius: 20px;
  background: var(--reels-menu-bg);
  color: var(--reels-text);
  border: 1px solid var(--reels-line);
  box-shadow: var(--reels-menu-shadow);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.reels-page-body .exit_reels_and_site_logo {
  display: none;
}

.reels_comments_wrapper {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  align-items: stretch;
  padding: 0;
  background: var(--reels-menu-bg);
}

.reels_comments_wrapper.animateIn {
  display: flex;
  animation: reelsCommentsIn 0.28s ease-out forwards;
}

.reels_comments_wrapper.animateOut {
  display: flex;
  animation: reelsCommentsOut 0.24s ease-in forwards;
}

@keyframes reelsCommentsIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reelsCommentsOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.reels_comments_cont {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  background: var(--reels-menu-bg);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.reels_comments_title {
  position: relative;
  flex-shrink: 0;
  padding: 18px 56px 16px 20px;
  border-bottom: 1px solid var(--reels-line);
  color: var(--reels-text);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.close_reels_comment {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--reels-surface-soft);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}

.close_reels_comment:hover {
  background: var(--reels-surface);
}

.close_reels_comment svg {
  width: 14px;
  height: 14px;
  fill: var(--reels-text);
}

.reels_comments_container {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 10px;
  overflow-y: auto;
}

.lc_sum_container {
  padding: 0 16px 14px;
}

.reels_make_comment_wrapper {
  position: relative;
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--reels-line);
  background: var(--reels-menu-bg);
}

.reels-page-body .reels_comments_wrapper .i_comment_form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reels-page-body .reels_comments_wrapper .i_post_user_comment_avatar {
  flex: 0 0 auto;
}

.reels-page-body .reels_comments_wrapper .i_post_user_comment_avatar img {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  object-fit: cover;
}

.reels-page-body .reels_comments_wrapper .i_comment_form_textarea {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 104px;
  height: auto;
  padding: 14px 16px 52px;
  border-radius: 24px;
  border: 1px solid var(--reels-line);
  background: var(--reels-surface-soft);
  box-shadow: none;
}

.reels-page-body .reels_comments_wrapper .i_comment_reply_context {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--reels-surface-soft);
  color: var(--reels-text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.reels-page-body .reels_comments_wrapper .cancel_reply {
  color: var(--reels-text-muted);
}

.reels-page-body .reels_comments_wrapper .i_comment_t_body {
  padding-right: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.reels-page-body .reels_comments_wrapper textarea.comment {
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--reels-text);
  font-size: 14px;
  line-height: 1.5;
}

.reels-page-body .reels_comments_wrapper textarea.comment::placeholder {
  color: var(--reels-text-muted);
}

.reels-page-body .reels_comments_wrapper .i_comment_footer {
  position: absolute;
  top: auto;
  right: 14px;
  bottom: 12px;
  left: 14px;
  padding: 0;
  margin-top: 0;
  transform: none;
}

.reels-page-body .reels_comments_wrapper .i_comment_fast_answers {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.reels-page-body .reels_comments_wrapper .i_fa_body {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--reels-surface-soft);
  border: 1px solid var(--reels-line);
}

.reels-page-body .reels_comments_wrapper .i_fa_body:not(.sndcom) {
  display: inline-flex;
}

.reels-page-body .reels_comments_wrapper .i_fa_body.sndcom {
  margin-left: auto;
}

.reels-page-body .reels_comments_wrapper .i_fa_body svg,
.reels-page-body .reels_comments_wrapper .i_fa_body svg * {
  fill: var(--reels-text);
}

.reels-page-body .reels_comments_wrapper .emojiBoxC,
.reels-page-body .reels_comments_wrapper .stickersContainer {
  max-width: min(360px, calc(100vw - 48px));
  max-height: min(420px, 48vh);
  overflow-y: auto;
  border-radius: 18px;
  background: var(--reels-menu-bg);
  border: 1px solid var(--reels-line);
  box-shadow: var(--reels-menu-shadow);
}

.reels-page-body .reels_comments_wrapper .emptyGifArea {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
}

.reels-page-body .reels_comments_wrapper .removeGif {
  color: var(--reels-text);
}

.reels-page-body .i_post_menu_container {
  min-width: 248px;
  right: calc(100% + 12px) !important;
  bottom: 0 !important;
  top: auto !important;
  padding: 10px;
  border-radius: 20px;
  background: var(--reels-menu-bg);
  border: 1px solid var(--reels-line);
  color: var(--reels-text) !important;
  box-shadow: var(--reels-menu-shadow);
}

.reels-page-body .i_post_menu_container svg,
.reels-page-body .i_post_menu_container svg * {
  fill: var(--reels-text) !important;
}

.reels-page-body .i_post_menu_item_wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reels-page-body .i_post_menu_item_out {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--reels-text);
  font-size: 13px;
  font-weight: 600;
}

.reels-page-body .i_post_menu_item_out svg,
.reels-page-body .i_post_menu_item_out svg *,
.reels-page-body .i_post_menu_item_out span svg,
.reels-page-body .i_post_menu_item_out span svg * {
  fill: var(--reels-text) !important;
  stroke: var(--reels-text) !important;
}

.reels-page-body .i_post_menu_item_out > svg,
.reels-page-body .i_post_menu_item_out > span > svg {
  width: 17px !important;
  height: 17px !important;
}

.reels-page-body .i_post_menu_item_out:hover {
  background: var(--reels-surface-soft);
}

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 20px;
  background: var(--reels-backdrop);
}

.share-modal .modal-content {
  width: min(420px, 100%);
  margin: 10vh auto 0;
  padding: 22px;
  border-radius: 24px;
  background: var(--reels-menu-bg);
  border: 1px solid var(--reels-line);
  box-shadow: var(--reels-menu-shadow);
}

.share-modal p {
  margin: 0 0 12px;
  color: var(--reels-text);
  font-size: 14px;
  font-weight: 700;
}

.share-modal input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--reels-line);
  border-radius: 14px;
  outline: 0;
  background: var(--reels-surface-soft);
  color: var(--reels-text);
}

.share-modal .modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.share-modal .modal-buttons button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--reels-surface-soft);
  color: var(--reels-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.share-modal .modal-buttons button:first-child {
  background: linear-gradient(
    135deg,
    var(--reels-accent) 0%,
    var(--reels-accent-alt) 100%
  );
  color: #ffffff;
}

.fadeOutUp {
  animation: fadeOutUp 0.4s forwards;
}

.fadeInUp {
  animation: fadeInUp 0.4s forwards;
}

.fadeOutDown {
  animation: fadeOutDown 0.4s forwards;
}

.fadeInDown {
  animation: fadeInDown 0.4s forwards;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (padding: max(0px)) {
  .reels-page-body .reel-ui {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
}

@media (max-width: 1220px) {
  .reels-left-rail {
    width: 292px;
    min-width: 292px;
  }

  .reels-stage {
    padding-inline: clamp(26px, 4vw, 56px);
  }
}

@media (max-width: 991px) {
  .reels-shell {
    display: block;
  }

  .reels-left-rail {
    display: none;
  }

  .reels-main-rail {
    padding: 0;
  }

  .reels-stage {
    width: 100%;
    min-height: 100vh;
    padding: 0;
  }

  .reels-stage::before {
    inset: 16% 6%;
    filter: blur(84px);
  }

  .reels-container {
    width: 100vw;
    max-width: none;
    min-width: 0;
    height: 100vh;
  }

  .reel-inner {
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .reel video {
    object-fit: contain;
  }

  .reels-page-body .exit_reels_and_site_logo {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: block;
  }

  .exit_reels_wraper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(9, 14, 24, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px);
  }

  .exit_reels {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
  }

  .exit_reels svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
  }

  .i_logo {
    width: 26px;
    height: 26px;
  }

  .i_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .reels_title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
  }

  .left-ui {
    left: 16px;
    right: 88px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .reels-author-card,
  .description-wrapper {
    width: min(100%, 300px);
  }

  .right-ui {
    right: 12px;
    bottom: calc(90px + env(safe-area-inset-bottom));
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .reels-page-body .reel-ui .action {
    width: 46px;
    height: 46px;
    border-radius: 16px !important;
    background: rgba(7, 10, 18, 0.42);
  }

  @media (max-height: 780px) {
    .right-ui {
      bottom: calc(78px + env(safe-area-inset-bottom));
      gap: 8px;
    }

    .reels-page-body .reel-ui .action {
      width: 42px;
      height: 42px;
    }
  }

  .video-progress {
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .scroll-buttons {
    right: 12px;
    top: 44%;
    gap: 10px;
  }

  .scroll-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .reels_comments_wrapper {
    padding: 0;
  }

  .reels_comments_cont {
    max-height: 100%;
    min-height: 100%;
    border-radius: 0;
    border: 0;
  }

  .reels_comments_title {
    padding-top: calc(18px + env(safe-area-inset-top));
  }

  .reels-page-body .reels_comments_wrapper .i_comment_form_textarea {
    min-height: 96px;
    padding: 12px 14px 48px;
    border-radius: 22px;
  }

  .reels-page-body .reels_comments_wrapper .i_comment_footer {
    right: 12px;
    bottom: 10px;
    left: 12px;
  }
}

@media (max-width: 640px) {
  .custom-controls {
    top: calc(18px + env(safe-area-inset-top));
    right: 16px;
  }

  .volume-control {
    width: 44px;
    height: 44px;
  }

  .left-ui {
    left: 14px;
    right: 78px;
    gap: 10px;
  }

  .reels-author-card {
    gap: 10px;
    padding: 0;
  }

  .reels-author-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .reels-author-name {
    font-size: 14px;
  }

  .reels-author-follow {
    min-width: 72px;
    min-height: 30px;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .reels-author-follow svg {
    width: 12px !important;
    height: 12px !important;
  }

  .description-wrapper {
    width: min(100%, 300px);
  }

  .description {
    font-size: 13px;
  }

  .right-ui {
    right: 10px;
  }

  .reels-page-body .reel-ui .action {
    width: 42px;
    height: 42px;
  }

  .video-progress {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .time-display {
    min-width: 66px;
    font-size: 11px;
  }

  .seek-feedback {
    min-width: 112px;
    font-size: 22px;
  }

  .scroll-buttons {
    top: 41%;
  }
}