/* ==========================================================================
   Media + responsive layout refinements (loaded after style.css)

   Media rule of thumb: never force one fixed shape on user content. Every
   image and video sits in a frame that takes ITS OWN aspect ratio (--ar),
   capped in height so a tall portrait clip can't swallow the whole screen,
   and letterboxed (never cropped or stretched) when the cap kicks in.
   ========================================================================== */

img, video, audio { max-width: 100%; }

/* ---- Post media ---------------------------------------------------------*/
.post-media {
  --media-max-h: min(72vh, 640px);
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.post-media.count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  --media-max-h: min(56vh, 460px);
}
.post-detail-page .post-media { --media-max-h: 85vh; }

.post-media-frame {
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-0);
  border: 1px solid var(--line);
}
.post-media-frame--audio { background: transparent; border: 0; overflow: visible; }

.media-box { position: relative; width: 100%; background: var(--sf-0); }
.media-box img[data-media-viewer],
.media-box video[data-media-viewer] { cursor: zoom-in; }
.media-box img[data-media-viewer]:focus-visible { outline: 3px solid var(--ac-blue); outline-offset: -3px; }
/* Known ratio: reserve exactly that shape, capped in height. */
.media-box.has-ratio { aspect-ratio: var(--ar, 16 / 9); max-height: var(--media-max-h); }

.media-box img {
  display: block;
  width: 100%;
  height: auto;              /* unknown ratio (older posts): natural proportions */
  max-height: var(--media-max-h);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.media-box.has-ratio img { height: 100%; max-height: none; }

.media-box video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;       /* portrait/square/ultra-wide clips are letterboxed, never cropped */
  background: #000;
}

/* The custom player wraps the <video>; make it fill the ratio frame. */
.media-box .cw-player { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.media-box .cw-player video { position: absolute; inset: 0; max-height: none; }

.post-media-frame audio { display: block; width: 100%; margin: 0; }
.post-media-frame > .cw-player--audio { margin: 0; }

.media-expand-button {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 8px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.media-viewer-trigger-wrap { position: relative; }
.chat-attachment-media-wrap { width: fit-content; max-width: 100%; }
.chat-attachment-media[data-media-viewer],
.chat-gif[data-media-viewer],
.chat-post img[data-media-viewer] { cursor: zoom-in; }
.chat-attachment-media[data-media-viewer]:focus-visible,
.chat-gif[data-media-viewer]:focus-visible,
.chat-post img[data-media-viewer]:focus-visible { outline: 3px solid var(--ac-blue); outline-offset: 2px; }
.media-viewer {
  width: min(96vw, 1440px);
  max-width: none;
  max-height: 96dvh;
  padding: 48px 18px 18px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: #101114;
  color: #fff;
}
.media-viewer::backdrop { background: rgba(0, 0, 0, .88); }
.media-viewer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.media-viewer-content { display: grid; place-items: center; min-height: 120px; }
.media-viewer-content img,
.media-viewer-content video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(96dvh - 86px);
  object-fit: contain;
}
.media-viewer-content video { width: min(100%, 1280px); background: #000; }
body.media-viewer-open { overflow: hidden; }

@media (max-width: 700px) {
  .post-media { --media-max-h: min(65vh, 520px); }
  .post-media.count-2 { grid-template-columns: 1fr; --media-max-h: min(60vh, 480px); }
  .media-viewer { width: 100vw; max-height: 100dvh; padding: 48px 8px 8px; border-radius: 0; }
  .media-viewer-content img,
  .media-viewer-content video { max-height: calc(100dvh - 68px); }
}

/* ---- Sidebar (collapsible icon rail) --------------------------------------*/
.sidebar-toggle { position: absolute; right: -13px; top: 20px; width: 26px; height: 26px; border: 1px solid var(--bd-2); border-radius: 50%; background: var(--sf-2); color: #fff; cursor: pointer; z-index: 2; }
.app-layout { transition: grid-template-columns .2s ease; }
.app-layout.sidebar-collapsed { grid-template-columns: 64px minmax(0, 880px) 330px; }
.app-layout.sidebar-collapsed .app-sidebar { padding-right: 10px; }
.app-layout.sidebar-collapsed .sidebar-profile > div:last-child,
.app-layout.sidebar-collapsed .side-links span,
.app-layout.sidebar-collapsed .sidebar-note { display: none; }
.app-layout.sidebar-collapsed .side-links a { justify-content: center; font-size: 18px; }
.app-layout.sidebar-collapsed .sidebar-profile { justify-content: center; }

.media-picker { white-space: nowrap; }
.upload-help { line-height: 1.5; }

@media (max-width: 1150px) {
  .app-layout.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); justify-content: stretch; }
  .app-layout.sidebar-collapsed .discover-column { display: none; }
}

@media (max-width: 900px) {
  .app-layout.sidebar-collapsed { display: block; }
  .app-layout.sidebar-collapsed .app-sidebar { display: none; }
}

@media (max-width: 700px) {
  .app-layout { padding-top: 20px; }
  /* .app-sidebar is already hidden below 900px (style.css) - the hamburger
     drawer covers the same links, so there's nothing to re-show here. This
     used to re-enable it as a block, which is what produced the overlap. */
  .composer-actions { align-items: stretch; }
  .composer-actions select, .media-picker { max-width: 100%; font-size: 10px; }
  .feed-heading h1 { max-width: 100%; overflow-wrap: anywhere; }
}