/* Selected-photo sharing: explicit consent, an exact review, and stable controls. */
html body :is(#memoryShareDialog, #receivedMemoryDialog) {
  --sharing-edge-top: max(10px, env(safe-area-inset-top, 0px));
  --sharing-edge-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --sharing-height: calc(var(--memory-sharing-visible-height, 100dvh) - var(--sharing-edge-top) - var(--sharing-edge-bottom));
  position: fixed !important;
  inset: auto !important;
  top: calc(var(--memory-sharing-visible-top, 0px) + var(--sharing-edge-top) + var(--sharing-height) / 2) !important;
  left: 50% !important;
  width: min(600px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
  max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  max-height: var(--sharing-height) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}
html body #memoryShareForm,
html body #receivedMemoryDialog > .received-memory-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  max-height: var(--sharing-height) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d1e4e7 !important;
  border-radius: 28px !important;
  background: #f6fbfc !important;
  color: #00263d !important;
}
html body #memoryShareForm::before,
html body #receivedMemoryDialog .received-memory-panel::before { display: none !important; }
html body :is(#memoryShareDialog, #receivedMemoryDialog) :is(.memory-share-heading, .received-memory-heading) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  padding: 20px 22px 16px !important;
  gap: 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid #dbe9eb !important;
  background: #f6fbfc !important;
  z-index: 2 !important;
}
html body #memoryShareDialog .memory-share-heading h2 {
  margin: 4px 0 0 !important;
  max-width: none !important;
  font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
  line-height: 1.15 !important;
  color: #00263d !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
}
html body :is(#memoryShareDialog, #receivedMemoryDialog) :is(.memory-share-close, .received-memory-close) {
  width: 44px !important; height: 44px !important; min-height: 44px !important;
  border: 1px solid #c8dee3 !important; color: #00263d !important; background: #fff !important;
}
html body #memoryShareDialog .memory-share-body {
  display: grid !important; gap: 20px !important; min-height: 0 !important;
  padding: 18px 22px !important; overflow: auto !important; overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
html body #memoryShareDialog .memory-share-preview {
  grid-template-columns: 58px minmax(0, 1fr) !important; gap: 12px !important;
  min-height: 76px !important; margin: 0 !important; padding: 10px !important;
  border-radius: 18px !important; border: 1px solid #dae8ea !important; box-shadow: none !important;
}
html body #memoryShareDialog .memory-share-preview-media { width: 58px !important; height: 58px !important; border-radius: 12px !important; }
html body #memoryShareDialog .memory-share-preview-copy > span { display: none !important; }
html body #memoryShareDialog .memory-share-preview-copy strong { font-size: 1rem !important; line-height: 1.25 !important; }
html body #memoryShareDialog .memory-share-preview-copy small { font-size: .8rem !important; line-height: 1.35 !important; }
html body #memoryShareDialog .memory-share-section {
  display: grid !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; gap: 12px !important; text-align: left !important;
}
html body #memoryShareDialog :is(.memory-share-section legend, .memory-share-section h3) {
  padding: 0 !important; margin: 0 0 4px !important; font-size: 1rem !important; font-weight: 800 !important; color: #00263d !important;
}
html body #memoryShareDialog .memory-share-section p { margin: 0 !important; font-size: .85rem !important; line-height: 1.5 !important; }
html body #memoryShareDialog .memory-share-photo-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; min-width: 0 !important;
}
html body #memoryShareDialog .memory-share-photo-tile {
  position: relative !important; display: grid !important; min-width: 0 !important; gap: 7px !important;
  padding: 7px !important; border: 1px solid #cadfe3 !important; border-radius: 14px !important;
  background: #fff !important; color: #00263d !important; cursor: pointer !important;
}
html body #memoryShareDialog .memory-share-photo-tile:has(input:checked) { border: 2px solid #208a7c !important; padding: 6px !important; background: #e1f7f0 !important; }
html body #memoryShareDialog .memory-share-photo-tile input {
  position: absolute !important; top: 10px !important; right: 10px !important; width: 22px !important; height: 22px !important;
  accent-color: #087869 !important; margin: 0 !important; z-index: 1 !important;
}
html body #memoryShareDialog .memory-share-photo-image { display: grid !important; place-items: center !important; aspect-ratio: 1 !important; overflow: hidden !important; border-radius: 9px !important; background: #eaf3f5 !important; }
html body #memoryShareDialog .memory-share-photo-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #memoryShareDialog .memory-share-photo-image svg { width: 26px !important; height: 26px !important; }
html body #memoryShareDialog .memory-share-photo-tile strong { display: block !important; font-size: .8rem !important; }
html body #memoryShareDialog .memory-share-photo-label { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; }
html body #memoryShareDialog .memory-share-photo-state { flex: 0 0 auto !important; padding: 3px 6px !important; border-radius: 7px !important; background: #edf2f4 !important; color: #48636d !important; font-size: .7rem !important; font-weight: 800 !important; }
html body #memoryShareDialog .memory-share-photo-state .is-on { display: none !important; }
html body #memoryShareDialog .memory-share-photo-tile:has(input:checked) .memory-share-photo-state { background: #087869 !important; color: #fff !important; }
html body #memoryShareDialog .memory-share-photo-tile:has(input:checked) .memory-share-photo-state .is-off { display: none !important; }
html body #memoryShareDialog .memory-share-photo-tile:has(input:checked) .memory-share-photo-state .is-on { display: inline !important; }
html body #memoryShareDialog .memory-share-photo-tile small { display: block !important; font-size: .7rem !important; line-height: 1.35 !important; color: #496974 !important; }
html body #memoryShareDialog .memory-share-photo-tile.is-unavailable { cursor: default !important; background: #edf3f5 !important; }
html body #memoryShareDialog .memory-share-photo-tile:focus-within { outline: 3px solid #209b8e !important; outline-offset: 2px !important; }
html body #memoryShareDialog .memory-share-detail-option { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px !important; border: 1px solid #d7e7e9 !important; border-radius: 14px !important; background: #fff !important; cursor: pointer !important; }
html body #memoryShareDialog .memory-share-detail-option input { width: 22px !important; height: 22px !important; margin: 0 !important; flex: 0 0 22px !important; accent-color: #087869 !important; }
html body #memoryShareDialog .memory-share-detail-option strong { display: block !important; font-size: .85rem !important; }
html body #memoryShareDialog .memory-share-detail-option small { display: block !important; font-size: .76rem !important; color: #496974 !important; line-height: 1.4 !important; margin-top: 3px !important; }
html body #memoryShareDialog :is(.memory-share-disclosure, .memory-share-note-option, .memory-share-review details) { font-size: .82rem !important; line-height: 1.5 !important; color: #365a68 !important; }
html body #memoryShareDialog summary { min-height: 44px !important; align-content: center !important; cursor: pointer !important; font-weight: 750 !important; }
html body #memoryShareDialog .memory-share-note-option summary small { font-weight: 500 !important; margin-left: 6px !important; }
html body #memoryShareDialog .memory-share-field { margin: 0 !important; gap: 7px !important; }
html body #memoryShareDialog :is(.memory-share-field input, .memory-share-field textarea) { min-height: 48px !important; font-size: max(16px, 1rem) !important; padding: 12px 14px !important; border-radius: 14px !important; background: #fff !important; color: #00263d !important; }
html body #memoryShareDialog .memory-share-field textarea { min-height: 72px !important; }
html body #memoryShareDialog .memory-share-field > small { font-size: .76rem !important; line-height: 1.4 !important; }
html body #memoryShareDialog .memory-share-refresh { justify-self: start !important; min-height: 44px !important; padding: 8px 12px !important; border-radius: 12px !important; border: 1px solid #c8dee3 !important; background: #fff !important; color: #00263d !important; font: inherit !important; font-size: .82rem !important; }
html body #memoryShareDialog .memory-share-review { padding: 0 14px !important; border: 1px solid #c9e5df !important; border-radius: 18px !important; background: #edf9f5 !important; }
html body #memoryShareDialog .memory-share-review > summary { position: relative !important; list-style: none !important; padding: 12px 25px 12px 0 !important; font-size: .9rem !important; color: #00263d !important; }
html body #memoryShareDialog .memory-share-review > summary::-webkit-details-marker { display: none !important; }
html body #memoryShareDialog .memory-share-review > summary::after { content: ""; position: absolute; top: 20px; right: 3px; width: 7px; height: 7px; border-right: 2px solid #287367; border-bottom: 2px solid #287367; transform: rotate(45deg); }
html body #memoryShareDialog .memory-share-review[open] > summary::after { transform: rotate(225deg); top: 24px; }
html body #memoryShareDialog .memory-share-review > summary > span { display: block !important; margin-top: 3px !important; font-size: .75rem !important; font-weight: 500 !important; color: #496974 !important; }
html body #memoryShareDialog .memory-share-review-body { display: grid !important; gap: 12px !important; padding: 2px 0 14px !important; }
html body #memoryShareDialog .memory-share-review p { margin: 0 !important; font-size: .8rem !important; line-height: 1.5 !important; }
html body #memoryShareDialog .memory-share-review-story-group { display: grid !important; gap: 4px !important; font-size: .8rem !important; }
html body #memoryShareDialog .memory-share-send-help { color: #496974 !important; font-size: .72rem !important; line-height: 1.45 !important; }
html body #memoryShareDialog #memoryShareReview { display: grid !important; gap: 10px !important; min-width: 0 !important; overflow-wrap: anywhere !important; }
html body #memoryShareDialog #memoryShareReview > strong { font-size: 1rem !important; }
html body #memoryShareDialog .memory-share-review-thumbnails { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html body #memoryShareDialog .memory-share-review-thumbnails img { width: 56px !important; height: 56px !important; object-fit: cover !important; border-radius: 10px !important; }
html body #memoryShareDialog #memoryShareReview dl { display: grid !important; margin: 0 !important; gap: 8px !important; font-size: .8rem !important; }
html body #memoryShareDialog #memoryShareReview dl > div { display: grid !important; gap: 2px !important; }
html body #memoryShareDialog #memoryShareReview dt { font-weight: 750 !important; }
html body #memoryShareDialog #memoryShareReview dd { margin: 0 !important; color: #496974 !important; }
html body #memoryShareDialog .memory-share-review-story { white-space: pre-wrap !important; }
html body #memoryShareDialog .memory-share-private-note { display: flex !important; align-items: start !important; gap: 7px !important; border-top: 1px solid #cfe4df !important; padding-top: 12px !important; }
html body #memoryShareDialog .memory-share-private-note svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; }
html body #memoryShareDialog :is(.memory-share-muted, .memory-share-unavailable) { color: #496974 !important; }
html body #memoryShareDialog .memory-share-unavailable { padding: 10px 12px !important; background: #e9f1f4 !important; border-radius: 12px !important; }
html body #memoryShareDialog .memory-share-actions {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr) !important;
  margin: 0 !important; padding: 12px 22px 18px !important; gap: 8px 10px !important;
  border-top: 1px solid #dbe9eb !important; background: #f6fbfc !important;
}
html body #memoryShareDialog .memory-share-status { grid-column: 1 / -1 !important; margin: 0 !important; min-height: 0 !important; font-size: .78rem !important; line-height: 1.35 !important; text-align: left !important; }
html body #memoryShareDialog .memory-share-status:empty { display: none !important; }
html body #memoryShareDialog .memory-share-photo-retry { grid-column: 2 !important; }
html body #memoryShareDialog .memory-share-send { background: #00263d !important; color: #fff !important; box-shadow: none !important; }
html body #memoryShareDialog .memory-share-send[data-sending="true"] { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #19455b !important; opacity: 1 !important; }
html body #memoryShareDialog .memory-share-spinner { display: inline-block !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; border: 2px solid #719aa7 !important; border-top-color: #fff !important; border-radius: 50% !important; animation: memory-share-spin .9s linear infinite; }
html body #memoryShareDialog .memory-share-status.is-sending { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes memory-share-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html body #memoryShareDialog .memory-share-spinner { animation: none !important; } }
html body #memoryShareDialog :is(button, input, textarea, summary):focus-visible { outline: 3px solid #219989 !important; outline-offset: 3px !important; }
html body #memoryShareDialog [hidden] { display: none !important; }
html body #receivedMemoryDialog > .received-memory-panel { grid-template-rows: auto minmax(0, 1fr) auto !important; }
html body #receivedMemoryDialog .received-memory-body { min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; scrollbar-gutter: stable !important; }
html body #receivedMemoryDialog .received-memory-content { min-height: 0 !important; overflow: visible !important; padding: 16px 20px !important; }
html body #receivedMemoryDialog .received-memory-card { display: grid !important; min-height: 0 !important; overflow: hidden !important; border-radius: 20px !important; background: #fff !important; }
html body #receivedMemoryDialog .received-memory-card::after { display: none !important; }
html body #receivedMemoryDialog .received-memory-gallery { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; overscroll-behavior-x: contain !important; background: #e9f2f4 !important; }
html body #receivedMemoryDialog .received-memory-media { position: relative !important; flex: 0 0 100% !important; width: 100% !important; height: clamp(130px, 32dvh, 280px) !important; min-height: 0 !important; aspect-ratio: auto !important; scroll-snap-align: start !important; }
html body #receivedMemoryDialog .received-memory-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #receivedMemoryDialog .received-memory-copy { position: static !important; inset: auto !important; padding: 18px !important; background: #fff !important; color: #00263d !important; }
html body #receivedMemoryDialog .received-memory-copy::before { display: none !important; }
html body #receivedMemoryDialog .received-memory-copy :is(h2,p,small) { color: #00263d !important; text-shadow: none !important; }
html body #receivedMemoryDialog .received-memory-copy h2 { max-width: none !important; font-size: clamp(1.25rem, 4vw, 1.8rem) !important; line-height: 1.15 !important; }
html body #receivedMemoryDialog .received-memory-story { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; white-space: pre-wrap !important; }
html body #receivedMemoryDialog .received-memory-from { color: #287367 !important; background: #e2f6ef !important; border: 0 !important; }
html body #receivedMemoryDialog .received-memory-note { margin: 12px 0 0 !important; padding: 12px 14px !important; border-radius: 12px !important; border-left: 3px solid #76d8c1 !important; }
html body #receivedMemoryDialog .received-memory-note small { display: block !important; font-size: .75rem !important; margin-bottom: 5px !important; }
html body #receivedMemoryDialog .received-memory-status { margin: 0 !important; padding: 0 20px 8px !important; min-height: 0 !important; text-align: left !important; font-size: .76rem !important; }
html body #receivedMemoryDialog .received-memory-status:empty { display: none !important; }
html body #receivedMemoryDialog .received-memory-safety { margin: 0 20px 10px !important; padding: 10px 12px !important; gap: 8px !important; border-radius: 16px !important; }
html body #receivedMemoryDialog .received-memory-safety p { font-size: .75rem !important; line-height: 1.35 !important; }
html body #receivedMemoryDialog .received-memory-safety button { min-height: 44px !important; padding: 9px !important; }
html body #receivedMemoryDialog .received-memory-safety button svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
html body #receivedMemoryDialog .received-memory-actions { margin: 0 !important; padding: 10px 20px 18px !important; border-top: 1px solid #dbe9eb !important; }
html body #receivedMemoryDialog .received-memory-photo-caption { margin: 0 !important; padding: 8px 16px !important; color: #496974 !important; font-size: .75rem !important; }
@media (min-width: 520px) and (max-height: 500px) {
  html body #receivedMemoryDialog .received-memory-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; align-items: start !important; }
  html body #receivedMemoryDialog .received-memory-gallery { grid-column: 1 !important; grid-row: 1 / 3 !important; min-width: 0 !important; align-self: start !important; }
  html body #receivedMemoryDialog .received-memory-media { height: clamp(130px, 40dvh, 220px) !important; min-height: 0 !important; max-height: 280px !important; }
  html body #receivedMemoryDialog .received-memory-copy { grid-column: 2 !important; grid-row: 1 !important; padding: 14px !important; }
  html body #receivedMemoryDialog .received-memory-photo-caption { grid-column: 2 !important; grid-row: 2 !important; padding: 0 14px 12px !important; }
}
@media (max-width: 350px) {
  html body #memoryShareDialog .memory-share-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #memoryShareDialog :is(.memory-share-body, .memory-share-heading, .memory-share-actions) { padding-left: 14px !important; padding-right: 14px !important; }
}
html body :is(#memoryShareDialog, #receivedMemoryDialog).is-sharing-compact :is(.memory-share-heading, .received-memory-heading) { padding: 8px 14px !important; }
html body #memoryShareDialog.is-sharing-compact .memory-share-heading > div > span { display: none !important; }
html body #memoryShareDialog.is-sharing-compact .memory-share-heading h2 { margin: 0 !important; font-size: 1.1rem !important; }
html body #memoryShareDialog.is-sharing-compact .memory-share-actions { padding: 7px 14px !important; gap: 4px 8px !important; }
html body #memoryShareDialog.is-sharing-compact .memory-share-actions button { min-height: 44px !important; padding: 8px !important; }
html body #memoryShareDialog.is-sharing-compact .memory-share-status { max-height: 3.9em !important; overflow: auto !important; font-size: .72rem !important; }
