/* UAT v8.0.77: compact albums listing + hidden visual scrollbars. */
html,
body,
#root {
  height: 100%;
  overflow: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  overflow-x: hidden !important;
}

#r2n-uat-albums-overlay,
#r2n-uat-albums-overlay * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#r2n-uat-albums-overlay ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.r2n-albums-feed,
.r2n-albums-accordion-list.card,
.r2n-albums-mode-picker.card {
  -webkit-overflow-scrolling: touch;
}

.r2n-albums-acc-count[data-count]::after {
  content: " photos";
}

@media (max-width: 640px) {
  .r2n-albums-shell-card {
    margin-top: 12px !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 22px !important;
  }

  .r2n-albums-topbar.card {
    min-height: 72px !important;
    padding: 12px 12px 10px !important;
  }

  .r2n-albums-accordion-list.card {
    gap: 8px !important;
    padding: 10px 10px 14px !important;
  }

  .r2n-albums-acc {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 32px !important;
    grid-template-rows: minmax(18px, auto) minmax(20px, auto) !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    min-height: 74px !important;
    padding: 8px 9px !important;
    border-radius: 16px !important;
  }

  .r2n-albums-acc-cover {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 13px !important;
  }

  .r2n-albums-acc-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .r2n-albums-acc-body {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  .r2n-albums-acc-title {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
  }

  .r2n-albums-acc-date {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .r2n-albums-acc-side {
    display: contents !important;
  }

  .r2n-albums-acc-count {
    position: absolute !important;
    left: 13px !important;
    bottom: 12px !important;
    z-index: 2 !important;
    min-width: 24px !important;
    height: 19px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(0, 0, 0, 0.64) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }

  .r2n-albums-acc-count[data-count]::after {
    content: "";
  }

  .r2n-albums-acc-tail {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 999px !important;
  }

  .r2n-albums-acc-tail svg {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 380px) {
  .r2n-albums-acc {
    grid-template-columns: 54px minmax(0, 1fr) 30px !important;
    min-height: 68px !important;
    padding: 7px 8px !important;
    column-gap: 8px !important;
  }

  .r2n-albums-acc-cover {
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
  }

  .r2n-albums-acc-count {
    left: 12px !important;
    bottom: 10px !important;
  }
}