#id_comment{
    width: 100%;
    height: 50px;
    background-color: #1e2a36;
    color: floralwhite;
    border-radius: 10px;

}
.comment{
    margin-left: 10px;
    background-color: #69007833;
    border-radius: 10px;
    padding-left: 1px;
    padding-bottom: 1px;
}
.comment-username{
    color: #e9657b;
}
.comment-username-link:hover .comment-username{
    text-decoration: underline;
}
.uploader-link .model-tag i{
    font-size: 11px;
}
.video-models-section {
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.video-models-section > p {
    bottom: auto;
    margin: 0 2px 0 0;
}
.video-data-item.video-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 3px 13px 3px 3px;
    border: 1px solid rgba(217, 45, 53, 0.42);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: floralwhite;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.video-model-pill-avatar {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: var(--panel);
}
.video-model-pill .model-tag {
    margin: 0;
    white-space: nowrap;
}
.video-model-pill:hover {
    border-color: var(--brand-red);
    background: rgba(217, 45, 53, 0.14);
    transform: translateY(-1px);
}
.video-model-pill:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}
#comment-btn{
    display: inline-block;
    object-fit: contain;
    padding: 2px;
    border-radius: 2px;
    background-color: floralwhite;
    color: black;
}
#comment-btn:hover{
    cursor: pointer;
}
#sign-in-btn{
    background-color: floralwhite;
    height: fit-content;
    width: fit-content;
    font-size: 12px;
    border-radius: 10px;
}
/* Sign-in / register modal styles now live inline in
   templates/includes/signin_modal.html so the popup works on every page. */

/* "Most replayed" curve overlaid on the FluidPlayer seek bar (YouTube-style).
   Baseline sits on the timeline; the curve peaks at the most-rewatched segments
   and grows taller when the user hovers the scrub bar. */
.fluid_controls_progress_container {
  overflow: visible; /* let the curve extend above the thin track */
}
.heatmap-curve {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 14px;
  pointer-events: none; /* never block seeking/dragging */
  z-index: 2;
  transition: height 0.15s ease;
}
.heatmap-curve-fill {
  fill: rgba(255, 255, 255, 0.20);
}
/* Pointer devices: compact at rest, expand when hovering the scrub bar. */
@media (hover: hover) {
  .fluid_controls_progress_container:hover .heatmap-curve {
    height: 46px;
  }
  .fluid_controls_progress_container:hover .heatmap-curve-fill {
    fill: rgba(255, 255, 255, 0.30);
  }
}
/* Touch devices have no hover, so show a taller curve whenever controls are up. */
@media (hover: none) {
  .heatmap-curve {
    height: 30px;
  }
  .heatmap-curve-fill {
    fill: rgba(255, 255, 255, 0.28);
  }
}
.heatmap-curve-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke; /* constant line width despite viewBox stretch */
}

/* Mobile-only "fake fullscreen" button, injected by video_page.js to the left
   of FluidPlayer's Mini Player control. Hidden on pointer devices (desktop has
   working native fullscreen that keeps the heatmap). */
.fluid_controls_right .fake-fs-btn {
  display: none;           /* shown on touch devices only */
  width: 24px;            /* match FluidPlayer's 24x24 control buttons */
  height: 24px;
  float: right;           /* sit in the same floated row as the other controls */
  position: relative;
  padding-right: 5px;     /* same spacing the Mini Player button uses */
  margin-right: 12px;     /* breathing room from the native fullscreen button */
  text-align: center;
  cursor: pointer;
  background: none;       /* no inherited sprite behind the icon */
}
.fluid_controls_right .fake-fs-btn i {
  line-height: 24px;      /* vertically centre the icon in the 24px button */
  font-size: 16px;
  color: #fff;
}
@media (hover: none) {
  .fluid_controls_right .fake-fs-btn { display: inline-block; }
}

/* Fake-fullscreen state: expand the player to fill the viewport while the
   <video> stays inline (playsinline), so the controls + heatmap remain visible
   and larger. !important overrides the inline sizing FluidPlayer applies. */
.fluid_video_wrapper.fake-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* exclude the iOS Safari toolbars where supported */
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483647;
  background: #000;
  touch-action: none;       /* swipes drive seek/volume, not page scroll/zoom.
                               JS-driven native scrubber still works (uses touch
                               events, not browser panning). */
}
/* Holding a finger to seek/volume must not trigger text selection, the iOS
   long-press callout menu, or the grey tap-highlight flash. */
.fluid_video_wrapper.fake-fs,
.fluid_video_wrapper.fake-fs * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#video-box .fluid_video_wrapper.fake-fs video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important; /* letterbox rather than crop on odd ratios */
}
body.fake-fs-lock { overflow: hidden !important; }

/* Centred feedback HUD shown by video_page.js while a seek/volume swipe is in
   progress. pointer-events:none so it never intercepts taps on the controls. */
.fluid_video_wrapper.fake-fs .fake-fs-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 12px;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 2147483647;
}
.fluid_video_wrapper.fake-fs .fake-fs-hud.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.fake-fs-hud-icon { font-size: 26px; line-height: 1; }
.fake-fs-hud-text { font-size: 20px; font-weight: 600; letter-spacing: .5px; }
.fake-fs-hud-sub { font-size: 12px; opacity: .8; }
.fake-fs-hud-bar {
  width: 120px;
  height: 4px;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  overflow: hidden;
}
.fake-fs-hud-fill { height: 100%; width: 0; background: #fff; border-radius: 2px; }

/* Heart that floats up from the touch point when a swipe-up registers a like.
   position:fixed because the fake-fs wrapper is fixed full-viewport, so the
   touch's clientX/clientY map straight to screen coordinates. */
.fake-fs-heart {
  position: fixed;
  z-index: 2147483647;
  margin: 0;
  color: #d53030;
  font-size: 46px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  animation: fake-fs-heart-rise 900ms ease-out forwards;
}
@keyframes fake-fs-heart-rise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  40%  { opacity: 1; transform: translate(-50%, -90px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -180px) scale(0.9); }
}

/* Overlay system: feature panels shown inside fake fullscreen (gesture
   coaching, the swipe-like note, the model-videos picker...). video_page.js
   adds .fake-fs-overlay to every registered panel; -card is the shared
   centered dark-box skin. Hidden panels are pointer-events:none so a
   dismissed card can't keep eating center-screen taps at opacity 0. */
.fluid_video_wrapper.fake-fs .fake-fs-overlay {
  position: absolute;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fluid_video_wrapper.fake-fs .fake-fs-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fluid_video_wrapper.fake-fs .fake-fs-overlay-card {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  max-width: 86%;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.fluid_video_wrapper.fake-fs .fake-fs-overlay-card.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

/* Tools layer: the top-right toggle reveals extra fake-fs controls; feature
   buttons sit at the screen edges above the video but below panels. */
.fake-fs-tools-toggle,
.fake-fs-tools {
  display: none;
}
.fluid_video_wrapper.fake-fs .fake-fs-tools-toggle {
  display: flex;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  z-index: 2147483646;
  opacity: .85;
  transition: opacity .3s ease;
}
.fluid_video_wrapper.fake-fs.tools-on .fake-fs-tools-toggle {
  color: rgba(255, 107, 107, 1);
  opacity: 1;
}
.fluid_video_wrapper.fake-fs.tools-on .fake-fs-tools {
  display: block;
  transition: opacity .3s ease;
}
/* The tools chrome follows FluidPlayer's control-bar auto-hide: the bar's
   container carries fade_out once controls hide (initial_controls_show keeps
   them up before first play), and the toggle/tools are later siblings of it
   inside the wrapper — so the same tap that brings back the seek bar brings
   these back, with no JS observer. Panels (.fake-fs-overlay) deliberately
   stay up; only the chrome hides. */
.fluid_video_wrapper.fake-fs .fluid_controls_container.fade_out:not(.initial_controls_show) ~ .fake-fs-tools-toggle,
.fluid_video_wrapper.fake-fs .fluid_controls_container.fade_out:not(.initial_controls_show) ~ .fake-fs-tools {
  opacity: 0;
  pointer-events: none;
}
.fake-fs-tool-btn {
  display: flex;
  position: absolute;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  z-index: 2147483646;
}
.fake-fs-tool-videos {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Model-videos picker: centered sheet with 2x2 thumbnail pages. */
.fluid_video_wrapper.fake-fs .fake-fs-videos {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(92%, 560px);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.fluid_video_wrapper.fake-fs .fake-fs-videos.is-visible {
  transform: translate(-50%, -50%) scale(1);
}
.fake-fs-videos-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fake-fs-videos-title { font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.fake-fs-videos-close { background: none; border: none; color: #fff; font-size: 18px; width: 36px; height: 36px; }
.fake-fs-videos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fake-fs-videos-note { grid-column: 1 / -1; text-align: center; font-size: 13px; opacity: .75; padding: 18px 0; }
.fake-fs-videos-item { position: relative; display: block; color: #fff; text-decoration: none; }
.fake-fs-videos-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: #111; }
.fake-fs-videos-len { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, 0.75); font-size: 11px; padding: 1px 5px; border-radius: 4px; }
.fake-fs-videos-name { display: block; font-size: 12px; line-height: 1.3; margin-top: 4px; max-height: 2.6em; overflow: hidden; }
.fake-fs-videos-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.fake-fs-videos-nav button { background: rgba(255, 255, 255, 0.12); border: none; color: #fff; width: 40px; height: 32px; border-radius: 8px; font-size: 14px; }
.fake-fs-videos-nav button:disabled { opacity: .35; }
.fake-fs-videos-page { font-size: 12px; opacity: .8; min-width: 42px; text-align: center; }
.fake-fs-hint-title { font-size: 15px; font-weight: 700; letter-spacing: .3px; margin-bottom: 10px; text-align: center; }
.fake-fs-hint ul { list-style: none; margin: 0; padding: 0; }
.fake-fs-hint li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; padding: 3px 0; }
.fake-fs-hint li i { width: 20px; text-align: center; color: #ff6b6b; flex: none; }
.fake-fs-hint-dismiss { margin-top: 10px; text-align: center; font-size: 11px; opacity: .6; }
.fake-fs-like-info-body { font-size: 14px; line-height: 1.5; text-align: center; }
.fake-fs-like-info .fake-fs-hint-title i { color: #ff6b6b; margin-right: 6px; }