/* The media gets the viewport: a Back button above, quiet navigation below. */
.feed-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper, #f7f2e6);
  color: var(--ink, #2b114b);
  overflow: hidden;
  overscroll-behavior: contain;
  font: inherit;
}
.feed-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.feed-viewer::backdrop { background: #2b114be6; }
.feed-viewer-header {
  display: flex;
  align-items: center;
  padding: max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line, #d9cfde);
  background: var(--paper, #f7f2e6);
}
.feed-viewer-close, .feed-viewer-navigation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.feed-viewer-close > span[aria-hidden], .feed-viewer-navigation > span { font-size: 23px; line-height: 1; font-weight: 400; }
.feed-viewer-close:hover, .feed-viewer-navigation:hover:not(:disabled) { background: var(--lilac, #e9dff4); }
.feed-viewer [data-feed-viewer-chrome] button:focus-visible { outline: 3px solid var(--purple, #6439a7); outline-offset: 2px; }
.feed-viewer-navigation { border: 1px solid var(--line, #d9cfde); }
.feed-viewer-navigation:disabled { opacity: .35; cursor: not-allowed; }
.feed-viewer-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 4px max(12px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid var(--line, #d9cfde);
  background: var(--paper, #f7f2e6);
}
.feed-viewer-progress { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.feed-viewer-position { min-width: 46px; text-align: center; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.feed-viewer-hint { color: var(--muted, #5a4d65); font-size: 10px; }
.feed-viewer-scroll {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 10px max(4px, env(safe-area-inset-right)) 12px max(4px, env(safe-area-inset-left));
  scroll-behavior: auto;
  overflow-anchor: none;
  touch-action: pan-y pinch-zoom;
}
/* These visible card edges occupy real layout space; nothing covers the iframe. */
.feed-viewer-publication {
  position: relative;
  width: 100%;
  max-width: 636px;
  margin: 0 auto;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--lilac, #e9dff4);
  box-shadow: 0 2px 8px #2b114b12;
  transform-origin: 50% min(35dvh, 300px);
  cursor: grab;
}
.feed-viewer-publication.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; will-change: transform; }
.feed-viewer-publication :is(a,button,input,select,textarea,summary,iframe,video,audio) { cursor: auto; }
.feed-viewer-publication .feed-viewer-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: grab;
  /* This narrow, uncovered handle owns its gesture. Browser pan arbitration
     must not cancel it when capture crosses an out-of-process provider frame.
     The rest of the card and reader retain native pan-y and pinch zoom. */
  touch-action: none;
}
.feed-viewer-grip::before { content: ''; position: absolute; top: min(30dvh, 220px); left: calc(50% - 1.5px); width: 3px; height: 38px; border-radius: 3px; background: #9273b0; }
.feed-viewer-grip-left { left: 0; }
.feed-viewer-grip-right { right: 0; }
.feed-viewer-publication.is-dragging .feed-viewer-grip { cursor: grabbing; }
.feed-viewer-intro { padding: 16px 12px; }
.feed-viewer-intro p { margin: 0 0 6px; color: var(--purple, #6439a7); font-size: 11px; font-weight: 700; }
.feed-viewer-intro h3 { margin: 0; font: normal clamp(22px, 3.5vw, 28px)/1.2 Georgia, serif; letter-spacing: -.4px; overflow-wrap: anywhere; }
.feed-viewer-content { min-width: 0; }
.feed-viewer-content .feed-card { margin: 0; }
.feed-viewer-content .feed-native-card { border: 1px solid var(--line, #d9cfde); border-radius: 4px; }
.feed-viewer-content .feed-native-meta { padding: 4px 8px; font-size: 10px; }
.feed-viewer-content .feed-native-platforms button { font-size: 10px; padding: 6px; }
.feed-viewer-content .feed-native-placeholder { height: min(65dvh, 560px); min-height: 280px; }
/* Provider SDKs retain their own media heights and controls. */
.feed-viewer-content .feed-native-stage,
.feed-viewer-content .feed-native-host { max-height: none; overflow: visible; }
.feed-viewer-content .feed-native-host iframe { max-width: 100%; }
@media (max-width: 760px) {
  .feed-viewer-scroll { scrollbar-gutter: auto; }
}
@media (max-width: 359px) {
  .feed-viewer-scroll { padding-left: 0; padding-right: 0; }
  .feed-viewer-publication { padding-left: 12px; padding-right: 12px; }
  .feed-viewer-publication .feed-viewer-grip { width: 12px; }
  .feed-viewer-content .feed-native-meta { gap: 4px; padding-left: 6px; padding-right: 6px; font-size: 9px; }
  .feed-viewer-content .feed-native-platforms { gap: 0; }
  .feed-viewer-content .feed-native-platforms button { font-size: 9px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-viewer-publication { scroll-behavior: auto; }
}