/* chat/06_message_media.css
 * ------------------------------------------------------------
 * Split 6 of 10 from web/account/css/chat.css (CLAUDE.md §8.16 — see
 * 01_tokens_reset.css's header for the split's background; loaded sixth
 * in chat.html, right after the message-actions file).
 *
 * Covers: photo/video attachments inside a sent message (message_media.js,
 * message_image_grid.js, message_video.js) — the grid layout, the
 * single-attachment "shown whole" treatment, the unavailable/deleted
 * placeholder, the play button and duration badge on a video, the "+N"
 * overflow tile, and the upload progress bar for a still-sending message.
 * ------------------------------------------------------------ */

/* ===== Message media (message_media.js, message_image_grid.js, message_video.js) ===== */

.chat-media {
  display: flex;
  flex-wrap: wrap;
  /* 220px wide with 4px gaps fits exactly two 108px thumbnails per row —
     the app's grid (chat_message_media.dart's _ImageBlock), matched so a
     message looks the same in both clients. */
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
  /* A DEFINITE width, not merely a maximum. With only a max, the block's width
     came from its contents — and on the first visit the browser does not yet
     know an image's natural size, so it laid the frames out small and only
     reached the right size on a later pass. Coming back to the thread looked
     like a fix, but all that had changed was that the pictures were now in the
     browser's cache and their size known up front.
     220px is the app's own figure (SizedBox(width: 220) in
     chat_message_media.dart), so both clients frame media identically, and the
     layout no longer depends on what has loaded yet. */
  width: 220px;
  max-width: 100%;
  /* The anchor for the reply overlay below — the arrow belongs to the picture,
     so it is positioned against the picture's own box. */
  position: relative;
}

.chat-media__frame {
  position: relative;
  /* A grid thumbnail is a fixed square; a lone attachment fills the width
     instead (below). The aspect ratio itself is an inline style, set per
     frame by ui/message_media.js, because it differs between the two cases
     and, for a video, comes from the video's own stored dimensions. */
  flex: 0 0 108px;
  background: var(--chat-composer-field); /* the reserved-space colour before any src loads — file header of message_image_grid.js */
  overflow: hidden;
}
.chat-media__image { width: 100%; height: 100%; object-fit: cover; }

/* A LONE attachment fills the bubble's width, and an image in that position is
   shown WHOLE rather than cropped — `contain`, letterboxed on the frame's own
   background. This is what makes a portrait phone photo look like a portrait
   phone photo instead of a horizontal slice through the middle of it; `cover`
   in a 4/3 box was doing exactly that to every one of them.
   Grid thumbnails keep `cover` — see ui/message_media.js on why cropping is
   right there and wrong here. */
.chat-media.is-single .chat-media__frame { flex: 1 1 100%; }
/* …but NOT a video's poster. `:not()` rather than a second rule further down,
   so the exception sits where the rule it excepts is stated.

   A photo is shown whole because the photo IS the message. A poster is a
   PREVIEW of something you press play on, and the app fills its box with it
   (MediaThumbnail over a box sized from the video's own dimensions) rather
   than letterboxing. That difference matters here because a phone records
   portrait video with LANDSCAPE encoded dimensions plus a rotation flag: the
   box comes out landscape, the correctly-rotated poster is portrait, and
   `contain` then draws grey bars down both sides of it. */
.chat-media.is-single .chat-media__image:not(.chat-media__poster) {
  object-fit: contain;
}

/* Once the picture has arrived, the frame stops being a reserved box and
   becomes exactly as tall as its contents. ui/message_media.js adds the class
   on the image's load event; until then the reserved aspect ratio holds the
   space, which is what thread_scroll.js's rule 3 needs.
   `height: auto` on the image is the other half — with `height: 100%` it would
   measure against a parent that no longer has a height of its own, and collapse
   to nothing. */
.chat-media__frame.is-sized-by-content {
  aspect-ratio: auto;
}
.chat-media__frame.is-sized-by-content .chat-media__image {
  height: auto;
}
/* A video's poster (message_video.js) carries BOTH classes at once
   (`chat-media__image chat-media__poster`) rather than duplicating the
   sizing rules above under a second selector — chat-media__poster exists
   as a hook for anyone reading the DOM to tell a poster apart from a real
   image, not as a second set of styles to keep in sync with the first. */
/* The server declined to sign this path (deleted, or not this reader's) —
   a normal state, not a broken image. A plain crossed-circle glyph is
   enough: it is decorative (the img beneath already carries alt=""), so
   it needs no translated string of its own. */
.chat-media__frame.is-unavailable { display: flex; align-items: center; justify-content: center; }
.chat-media__frame.is-unavailable .chat-media__image { display: none; }
.chat-media__frame.is-unavailable::after {
  content: "⚠";
  color: var(--chat-bubble-muted);
  font-size: 20px;
}

.chat-media__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--chat-media-overlay);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  pointer-events: none; /* the frame button itself handles the click */
}
.chat-media__duration {
  position: absolute;
  right: 6px; bottom: 6px;
  background: var(--chat-media-overlay);
  color: var(--chat-bubble-text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
}

/* The "+N" overflow tile sits as its own flex item alongside the shown
   image/video frames (message_media.js), not layered over one of them —
   give it the same tile footprint so the row stays visually even. */
.chat-media__overflow {
  flex: 1 1 110px;
  min-width: 90px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-media-overlay);
  color: var(--chat-bubble-text);
  font-size: 15px;
  font-weight: 700;
}

/* A pending (not-yet-sent) message's upload bar — full width beneath the
   thumbnails, hence flex-basis:100% inside message_media.js's flex-wrap
   row rather than sizing like one more tile. */
.chat-media__progress {
  flex-basis: 100%;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--chat-wash-medium);
  margin-top: 2px;
}
.chat-media__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--chat-read-tick);
  transition: width .2s ease;
}