:root {
  --adsense-footer-height: 60px;
}

.fixed-adsense-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  /* Match app-frame's own width constraint and centering, rather
     than spanning the full device viewport. Deliberately NOT nested
     inside a stacking-context ancestor (e.g. via transform/contain
     on .app-frame) — that would make .app-frame the containing block
     for this element, and since .app-frame's own height equals its
     full content height (which scrolls), "fixed" would then mean
     pinned to the bottom of the page rather than the viewport,
     breaking the "always visible while scrolling" requirement.
     Matching the width/centering independently keeps this element
     genuinely viewport-fixed while still looking like part of the
     same tablet-simulated frame. */
  max-width: min(var(--frame-width, 1024px), 92dvw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;

  z-index: 1000;
  min-height: var(--adsense-footer-height, 60px);

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  /* iOS safe-area support */
  padding-bottom: env(safe-area-inset-bottom);

  /* Prevent accidental overlap with content */
  background: transparent;
  pointer-events: auto;
}

.adsense-placeholder {
  width: 100%;
  max-width: 100%;
  min-height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f2f3f5;
  color: #666;
  font-size: 13px;
  border-top: 1px solid #ddd;
}