.album-photo-viewer {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--call-video-surface); box-shadow: none; overflow: hidden; outline: none;
  touch-action: none; overscroll-behavior: none;
}
.album-photo-viewer[open] { display: block; }
.album-photo-viewer::backdrop { background: var(--call-video-surface); backdrop-filter: none; }
.photo-surface { position: absolute; inset: env(safe-area-inset-top) env(safe-area-inset-right) var(--safe-bottom) env(safe-area-inset-left); will-change: transform; }
.photo-track { display: flex; width: 100%; height: 100%; will-change: transform; }
.photo-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; display: grid; place-items: center; overflow: hidden; }
.album-photo-viewer .photo-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; -webkit-touch-callout: none; }
.album-photo-viewer .photo-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--call-video-surface);
}
.album-video-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--card-preview);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  color: var(--ink-on-accent);
  background: var(--glass-dark);
}
.album-video-thumbnail > img { width: 100%; height: 100%; object-fit: cover; }
.album-video-thumbnail > img.preview-unavailable { display: none; }
.album-video-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--ink-on-accent);
  background: var(--glass-dark);
}
.album-video-badge .ui-icon { width: var(--space-10); height: var(--space-10); }
.album-video-badge span { font-size: var(--text-small); font-weight: 700; letter-spacing: .08em; }
.photo-full { z-index: 1; }
.photo-card { touch-action: pan-y; }
.photo-card img { -webkit-touch-callout: none; }
#albumPhotoDelete [data-delete-error] { color: #ba4536; }

img.preview-retrying { visibility: hidden; }
.photo-card:has(img.preview-retrying)::after { content: '照片載入中…'; color: var(--ink-secondary); font-size: var(--text-caption); }
.photo-card:has(img.preview-unavailable)::after { content: '輕點重新載入'; }
.photo-card:has(img.preview-blank)::after { content: '原圖是空白的，請重新上傳這張照片'; color: var(--ink-secondary); font-size: var(--text-caption); padding: var(--space-3); text-align: center; }

.photo-slide[data-loading="true"]::after {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  border: .125rem solid rgba(255,255,255,.28);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%;
  animation: photo-loading-spin .75s linear infinite;
}
@keyframes photo-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .photo-slide[data-loading="true"]::after { animation: none; border-top-color: rgba(255,255,255,.28); }
}
.album-photo-viewer[data-zoomed="true"] { cursor: grab; }
/* Apple Maps link for photos with a location; small and quiet over the pure black viewer. */
.photo-map-button {
  position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 12px); right: calc(env(safe-area-inset-right) + 12px);
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 11px;
  border-radius: 999px; background: #ffffff26; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-tap-highlight-color: transparent;
}
.photo-map-button svg { width: 18px; height: 18px; }
.album-photo-viewer[data-zoomed="true"] .photo-map-button { opacity: 0; pointer-events: none; }