/* Broken legacy photos stay attached to their memory and can be reconnected in place. */
html body .app-shell .memory-lane-cover {
  position: relative;
}

html body .app-shell .memory-lane-cover.has-fallback-art::after {
  content: "Photo link needs reconnecting";
  position: absolute;
  right: 10px;
  bottom: 48px;
  left: 10px;
  z-index: 3;
  padding: 7px 9px;
  border-radius: 10px;
  color: #315862;
  background: rgba(248, 252, 249, 0.9);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body .app-shell .memory-photo-reconnect {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #07556a, #138f7b);
  box-shadow: 0 9px 18px rgba(5, 63, 72, 0.2);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 820;
  cursor: pointer;
}

html body .app-shell .memory-lane-restore-button {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: linear-gradient(135deg, #07556a, #138f7b) !important;
  box-shadow: 0 9px 20px rgba(5, 63, 72, 0.18) !important;
}

@media (max-width: 720px) {
  html body .app-shell .memory-lane-cover.has-fallback-art::after {
    right: 7px;
    bottom: 43px;
    left: 7px;
    font-size: 0.61rem;
  }

  html body .app-shell .memory-photo-reconnect {
    right: 7px;
    bottom: 7px;
    left: 7px;
    min-height: 32px;
  }
}