feat(private-room): migrate to album APIs

src/app/private-room/private-room-screen.module.css

@@ -121,8 +121,7 @@
   white-space: nowrap;
 }
 
-.primaryCta,
-.loadMoreButton {
+.primaryCta {
   display: inline-flex;
   min-height: 48px;
   align-items: center;
@@ -320,7 +319,7 @@
 
 .lockedPreviewContent {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   max-width: 260px;
   flex-direction: column;
@@ -328,6 +327,19 @@
   gap: 14px;
 }
 
+.lockedCoverImage {
+  object-fit: cover;
+  filter: blur(18px);
+  transform: scale(1.08);
+}
+
+.lockedPreviewScrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(28, 19, 23, 0.46);
+}
+
 .previewIcon {
   display: grid;
   width: 58px;
@@ -374,10 +386,17 @@
 
 .mediaCover {
   position: relative;
+  display: block;
+  width: 100%;
   margin-top: 14px;
+  padding: 0;
+  border: 0;
   overflow: hidden;
   border-radius: clamp(20px, 5.185vw, 28px);
   background: #f3eef0;
+  cursor: pointer;
+  font: inherit;
+  text-align: inherit;
   box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
 }
 
@@ -439,16 +458,87 @@
   margin: 0;
 }
 
-.statusCard button,
-.loadMoreButton {
+.statusCard button {
   padding: 0 18px;
   background: rgba(255, 93, 149, 0.12);
   color: #a94c64;
 }
 
-.loadMoreButton {
-  width: 100%;
-  margin-top: 16px;
+.galleryOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  width: min(100vw, var(--app-max-width, 540px));
+  height: var(--app-viewport-height, 100dvh);
+  margin-inline: auto;
+  overflow: hidden;
+  background: #090909;
+  color: #ffffff;
+  touch-action: pan-y;
+}
+
+.galleryImageFrame {
+  position: absolute;
+  inset: 0;
+}
+
+.galleryImage {
+  object-fit: contain;
+  user-select: none;
+}
+
+.galleryClose,
+.galleryNav {
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(16, 16, 16, 0.58);
+  color: #ffffff;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  transition: background 0.18s ease, transform 0.18s ease;
+}
+
+.galleryClose {
+  top: calc(var(--app-safe-top, 0px) + 14px);
+  right: calc(var(--app-safe-right, 0px) + 14px);
+  width: 44px;
+  height: 44px;
+}
+
+.galleryNav {
+  top: 50%;
+  width: 46px;
+  height: 46px;
+  transform: translateY(-50%);
+}
+
+.galleryPrevious {
+  left: calc(var(--app-safe-left, 0px) + 10px);
+}
+
+.galleryNext {
+  right: calc(var(--app-safe-right, 0px) + 10px);
+}
+
+.galleryCounter {
+  position: absolute;
+  bottom: calc(var(--app-safe-bottom, 0px) + 18px);
+  left: 50%;
+  z-index: 2;
+  min-width: 62px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(16, 16, 16, 0.62);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: center;
+  transform: translateX(-50%);
+  backdrop-filter: blur(12px);
 }
 
 .dialogOverlay {
@@ -535,21 +625,42 @@
 }
 
 .primaryCta:hover,
-.lockedPreview:hover,
-.loadMoreButton:hover {
+.lockedPreview:hover {
   filter: brightness(1.04);
   transform: translateY(-1px);
 }
 
+.mediaCover:hover {
+  filter: brightness(1.02);
+}
+
+.galleryClose:hover,
+.galleryNav:hover {
+  background: rgba(38, 38, 38, 0.82);
+}
+
 .primaryCta:active,
-.lockedPreview:active,
-.loadMoreButton:active {
+.lockedPreview:active {
   transform: translateY(1px) scale(0.99);
 }
 
+.mediaCover:active {
+  transform: scale(0.995);
+}
+
+.galleryClose:active {
+  transform: scale(0.94);
+}
+
+.galleryNav:active {
+  transform: translateY(-50%) scale(0.94);
+}
+
 .primaryCta:focus-visible,
 .lockedPreview:focus-visible,
-.loadMoreButton:focus-visible,
+.mediaCover:focus-visible,
+.galleryClose:focus-visible,
+.galleryNav:focus-visible,
 .dialogPrimary:focus-visible,
 .dialogSecondary:focus-visible {
   outline: 2px solid #ff5d95;