/* UPDATE 02 — fix Shorts viewport so the complete original video is visible.
   Only the feed viewport/layout is changed. No backend, Firebase, R2, auth,
   profile, notification or upload logic is changed. */
#feed {
  margin-top: 56px !important;
  height: calc(100dvh - 122px) !important;
  width: 100vw !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
}
#feed .card {
  height: calc(100dvh - 122px) !important;
  min-height: calc(100dvh - 122px) !important;
  width: 100vw !important;
  flex: 0 0 calc(100dvh - 122px) !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}
#feed .card video,
#feed .card.landscape video,
#feed .card.portrait video,
#feed .card img.postImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}
/* Progress line belongs to the bottom edge of the visible video area,
   immediately above the bottom navigation. */
#feed .progress {
  bottom: 0 !important;
  height: 2px !important;
  z-index: 18 !important;
}
/* Keep creator information and actions inside the visible video frame. */
#feed .info { bottom: 28px !important; }
#feed .act { bottom: 30px !important; }
/* 10-second controls remain inside the video and do not cover the bottom. */
#feed .skipBtns { bottom: 150px !important; }

@media (max-width:600px) {
  #feed { height: calc(100dvh - 122px) !important; }
  #feed .card {
    height: calc(100dvh - 122px) !important;
    min-height: calc(100dvh - 122px) !important;
    flex-basis: calc(100dvh - 122px) !important;
  }
  #feed .info { bottom: 24px !important; max-width: 68% !important; }
  #feed .act { bottom: 24px !important; }
  #feed .skipBtns { bottom: 145px !important; }
}