/* Build 733: Memory Capsule chrome and complete media-preview access. */

/*
 * A Memory Capsule is a modal surface. Remove the app's persistent chrome
 * while it is open so the Capsule's own close and action controls remain the
 * only controls at the safe-area edges.
 */
html body.memory-sheet-open,
html body:has(#memoryBottomSheet.open) {
  overflow: hidden !important;
}

html body.memory-sheet-open .app-shell .topbar,
html body.memory-sheet-open .app-shell .bottom-nav,
html body:has(#memoryBottomSheet.open) .app-shell .topbar,
html body:has(#memoryBottomSheet.open) .app-shell .bottom-nav,
html body.memory-sheet-open main.app-shell .topbar,
html body.memory-sheet-open main.app-shell .bottom-nav,
html body:has(#memoryBottomSheet.open) main.app-shell .topbar,
html body:has(#memoryBottomSheet.open) main.app-shell .bottom-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.memory-sheet-open .app-shell .memory-bottom-sheet.open,
html body:has(#memoryBottomSheet.open) .app-shell .memory-bottom-sheet.open,
html body.memory-sheet-open main.app-shell .memory-bottom-sheet.open,
html body:has(#memoryBottomSheet.open) main.app-shell .memory-bottom-sheet.open {
  z-index: 2147482000 !important;
  isolation: isolate !important;
}

/* The old +N badge was decorative. It is now a real 44px disclosure button. */
html body .app-shell button.memory-media-more,
html body main.app-shell button.memory-media-more {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 6px !important;
  gap: 2px !important;
  cursor: pointer !important;
  color: #0b5363 !important;
  background:
    radial-gradient(circle at 25% 12%, rgba(113, 226, 190, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 252, 0.98), rgba(226, 247, 242, 0.96)) !important;
  box-shadow:
    0 9px 18px rgba(8, 54, 62, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .app-shell button.memory-media-more strong,
html body main.app-shell button.memory-media-more strong {
  font-size: 0.92rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body .app-shell button.memory-media-more small,
html body main.app-shell button.memory-media-more small {
  color: rgba(8, 68, 79, 0.64) !important;
  font-size: 0.55rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body .app-shell button.memory-media-more > svg,
html body .app-shell button.memory-media-more > [data-icon],
html body main.app-shell button.memory-media-more > svg,
html body main.app-shell button.memory-media-more > [data-icon] {
  width: 17px !important;
  height: 17px !important;
}

html body .app-shell button.memory-media-more:hover,
html body main.app-shell button.memory-media-more:hover {
  border-color: rgba(10, 112, 107, 0.22) !important;
  background: linear-gradient(145deg, #ffffff, #daf5ec) !important;
}

html body .app-shell button.memory-media-more:focus-visible,
html body main.app-shell button.memory-media-more:focus-visible {
  outline: 3px solid rgba(10, 111, 139, 0.48) !important;
  outline-offset: 2px !important;
}

html body .app-shell button.memory-media-more:active,
html body main.app-shell button.memory-media-more:active {
  filter: brightness(0.98) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell button.memory-media-more,
  html body main.app-shell button.memory-media-more {
    transition: none !important;
  }
}