/* --- Tweet feed media --- */

/* --- Tweet container --- */
#tweet-container {
  width: min(860px, calc(100% - 2rem));
  margin: 0 auto;
  flex: 1;
  padding: 1rem 0 3rem;
  overflow-y: auto;           /* allow scrolling for the feed */
  background-color: #121212;
}

/* Hide scroll bar but keep scrolling */
#tweet-container {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

#tweet-container::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}


#tweet-feed {
  display: flex;
  flex-direction: column;
  align-items: center; /* center tweet cards */
}

/* Each tweet card */
.tweet {
  width: 100%;
  max-width: 860px;
  margin: 1.25rem 0 3rem;
}

.tweet p {
  margin: 0 0 .5rem;
  white-space: pre-wrap;   /* preserve line breaks/spaces */
  word-break: break-word;  /* avoid layout breaks on long strings */
}

.tweet .timestamp {
  display: block;
  opacity: 0.8;
  margin-top: .35rem;
  font-size: 0.9rem;
  visibility: hidden;
}

/* Media block (img / video / audio) */
.tweet-media {
  display: block;
  max-width: 100%;
  /* no height here — avoids collapsing audio */
  margin: .5rem auto 0;   /* centered */
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* PDF embed sizing */
.tweet-media.pdf {
  width: 100%;
  height: 75vh;        /* good balance on phones/desktops */
  border: none;
  display: block;
}
@media (min-width: 900px) {
  .tweet-media.pdf { height: 80vh; }
}

/* Element-specific sizing */
img.tweet-media,
video.tweet-media {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(90vh - var(--header-height) - 2rem); /* 2rem buffer */
  object-fit: contain;
  border-radius: 12px;
}

audio.tweet-media {
  display: block;
  width: 100%;
  min-height: 44px; /* keeps controls visible across browsers */
  border-radius: 12px;
}

/* YouTube embed (16:9 responsive) */
.yt-embed {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: .5rem auto 0;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  overflow: hidden;               /* rounds iframe corners */
  aspect-ratio: 16 / 9;           /* modern browsers */
}

/* Fallback if you want to support older browsers without aspect-ratio:
.yt-embed { padding-top: 56.25%; height: 0; }
.yt-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
*/

.yt-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* --- PDF preview --- */
.pdf-frame {
  width: 75%;
  height: clamp(420px, 75vh, 900px); /* readable on desktop, not absurd on laptops */
  border: 0;
  border-radius: 12px;               /* matches your media rounding */
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  display: block;
  margin: .5rem auto 0;
  background: rgba(0,0,0,.4);        /* subtle backdrop while loading */
}

.pdf-download {
  display: inline-block;
  padding: 10px 12px;
  margin-top: .5rem;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  color: inherit;
  text-decoration: none;
}

@media (max-width: 420px) {
  .pdf-frame { height: 70vh; }       /* a bit shorter on tiny phones */
}

#lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; z-index:9999;
}
#lightbox[hidden]{ display:none; }
#lightbox img{ max-width:95vw; max-height:95vh; border-radius:12px; }

/* Desktop: keep very tall visual media from eating the page */
@media (min-width: 900px) {
  img.tweet-media,
  video.tweet-media {
    max-height: 80vh;
    object-fit: contain;
  }
}

/* Very small phones: be a bit shorter for visual media */
@media (max-width: 420px) {
  img.tweet-media,
  video.tweet-media {
    max-height: 70vh;
  }
}