.wnx-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; width: 100%; margin-top: 8px; }
.wnx-media, .wnx-media * { box-sizing: border-box; }
.wnx-media [hidden] { display: none !important; }

.wnx-media__card {
  --mg-ar: 1; --mg-w: 360px; --mg-frame-bg: #e9edf3;
  container-type: inline-size; container-name: mgcard;
  position: relative; flex: 0 0 auto; width: var(--mg-w); max-width: 100%; min-width: 0;
  background: #fff; border: 1px solid rgba(148,163,184,.40); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.wnx-media[data-kind="image"] .wnx-media__card { --mg-frame-bg: #e7ecf3; }
.wnx-media[data-kind="video"] .wnx-media__card { --mg-frame-bg: #0b1220; }

/* Owner (case 029, 2026-11-09): a delivered picture must stay readable but not
   dominate the answer. Owner (2026-11-11): the 80vh ceiling made a 1024x1024
   picture ~700px tall — half of the viewport — so the frame is now capped at
   40vh (half the former size in both dimensions) with a 280px floor so a narrow
   portrait card keeps its controls usable. A wide answer column still lets the
   picture grow up to that ceiling; the aspect term keeps 16:9 wide and 9:16
   tall instead of forcing one silhouette. */
.wnx-media[data-kind="image"] .wnx-media__card {
  width: min(100%, max(280px, calc(40vh * var(--mg-ar, 1))));
  width: min(100%, max(280px, calc(40dvh * var(--mg-ar, 1))));
  /* Owner (2026-11-11): a small delivered file must not float inside a wide empty
     card — the card never grows past the picture's own width (--mg-natw comes
     from naturalWidth), with the same 280px floor for the controls. */
  max-width: min(100%, max(280px, var(--mg-natw, 100vw)));
}
.wnx-media__frame {
  position: relative; width: 100%; aspect-ratio: var(--mg-ar, 1);
  overflow: hidden; background: var(--mg-frame-bg);
}
.wnx-media__frame > img, .wnx-media__frame > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wnx-media__frame > img { object-fit: cover; }
.wnx-media__frame > video { object-fit: contain; background: #0b1220; }

/* Owner (case 029, 2026-11-11): the frame took the requested aspect (1:1), so a
   delivered portrait file (1280×1699) was painted into a square box with
   object-fit: cover — cropped top and bottom, its proportions lost. Once the
   delivered picture is in the frame, the frame follows the picture: the image
   sits in flow at its own ratio and nothing is cropped. The 40vh bound (half
   the former ceiling) keeps the card from eating the viewport, and the 240px
   floor upscales a small delivered file instead of leaving a thumbnail in a
   full-width row. A card without a picture yet (empty/pending) keeps the
   requested frame, and video keeps its own template. */
.wnx-media[data-kind="image"] .wnx-media__frame:has(> img:not([hidden])) {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: auto;
  background: transparent;
}
.wnx-media[data-kind="image"] .wnx-media__frame > img:not([hidden]) {
  position: static;
  display: block;
  width: auto;
  height: auto;
  min-width: 240px;
  max-width: 100%;
  max-height: 40vh;
  max-height: 40dvh;
  margin-inline: auto;
  object-fit: contain;
}
/* Fullscreen must not inherit the compact inline-card height ceiling. */
.wnx-media[data-kind="image"] .wnx-media__frame:fullscreen > img:not([hidden]) {
  min-width: 0;
  max-height: 96vh;
  max-height: 96dvh;
}
.wnx-media__empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: #94a3b8; font-size: 11.5px;
  background: linear-gradient(135deg, #eef2f7, #e3e9f1);
}
.wnx-media[data-kind="video"] .wnx-media__empty { background: linear-gradient(135deg, #101a2e, #0b1220); color: #64748b; }
.wnx-media__empty svg { width: 34px; height: 34px; opacity: .55; }

/* Owner (2026-11-11): the hover affordances are two small icon buttons — download
   on the left edge, fullscreen on the right — and the picture itself is never
   dimmed: the layer is transparent and only the buttons catch the pointer. */
.wnx-media__overlay {
  position: absolute; inset: 0; z-index: 5;
  background: transparent; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s, visibility .16s;
}
.wnx-media__frame:hover .wnx-media__overlay,
.wnx-media__frame:focus-within .wnx-media__overlay { opacity: 1; visibility: visible; }
.wnx-media__overlay-actions { position: absolute; inset: 0; pointer-events: none; }
.wnx-media__overlay-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  pointer-events: auto; cursor: pointer; color: #fff; text-decoration: none;
  background: rgba(15,23,42,.55); box-shadow: 0 2px 8px rgba(15,23,42,.28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.wnx-media__overlay-btn--left { left: 8px; }
.wnx-media__overlay-btn--right { right: 8px; }
.wnx-media__overlay-btn svg { width: 14px; height: 14px; }
.wnx-media__overlay-btn:hover { background: rgba(15,23,42,.78); }
.wnx-media__overlay-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Touch screens have no hover: keep both affordances visible instead of hiding them. */
@media (hover: none) {
  .wnx-media__overlay { opacity: 1; visibility: visible; }
}

.wnx-media__player {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 7px; padding: 16px 9px 8px; color: #fff;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.66) 62%);
}
.wnx-media__player-btn {
  appearance: none; display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
}
.wnx-media__player-btn svg { width: 11px; height: 11px; }
.wnx-media__player-btn:hover { background: rgba(255,255,255,.30); }
.wnx-media__player-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wnx-media__seek { flex: 1 1 auto; min-width: 40px; height: 14px; margin: 0; accent-color: #fff; cursor: pointer; }
.wnx-media__time { flex: 0 0 auto; font: 600 10px/1 inherit; font-variant-numeric: tabular-nums; opacity: .88; }

.wnx-media__composer { min-width: 0; padding: 9px 10px 10px; border-bottom: 1px solid rgba(148,163,184,.22); }
.wnx-media__field {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 8px 9px 7px; background: #fff;
  border: 1px solid rgba(148,163,184,.42); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.wnx-media__field:focus-within { border-color: rgba(31,95,208,.55); box-shadow: 0 0 0 3px rgba(31,95,208,.10); }
.wnx-media__prompt {
  display: block; width: 100%; min-height: 40px; max-height: 170px; overflow-y: auto;
  resize: none; border: 0; background: transparent; color: #111827;
  padding: 0; font: 13px/1.45 inherit; font-family: inherit;
}
.wnx-media__prompt:focus { outline: none; }
.wnx-media__refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wnx-media__ref { position: relative; width: 36px; height: 36px; flex: 0 0 36px; }
.wnx-media__ref img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }
.wnx-media__ref-remove {
  position: absolute; right: -3px; top: -3px; display: grid; place-items: center;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #475569; font: 12px/1 system-ui; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(148,163,184,.45);
}
.wnx-media__ref-add {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  padding: 0; background: #e8edf4; border: 0; border-radius: 7px; color: #64748b;
  font: 19px/1 system-ui; cursor: pointer;
}
.wnx-media__ref-add:hover { background: rgba(31,95,208,.10); color: #1f5fd0; }
.wnx-media__ref-add:disabled { opacity: .38; cursor: not-allowed; background: #eef2f7; color: #94a3b8; }
.wnx-media__ref-add:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }

.wnx-media__chips { display: inline-flex; gap: 2px; padding: 2px; background: #eef2f7; border-radius: 8px; }
.wnx-media__chip {
  appearance: none; border: 0; background: transparent; color: #64748b;
  font: 600 10px/1 inherit; font-family: inherit; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.wnx-media__chip.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.wnx-media__chip:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 1px; }

.wnx-media__formats { display: inline-flex; align-items: center; gap: 2px; }
.wnx-media__format { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 28px; cursor: pointer; }
.wnx-media__format input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wnx-media__format-box {
  display: block; width: 24px; height: 16px; border-radius: 3px;
  border: 1px solid rgba(100,116,139,.55); background: rgba(148,163,184,.20);
  transition: border-color .14s, background .14s;
}
.wnx-media__format-box[data-ar="1:1"] { width: 19px; height: 19px; }
.wnx-media__format-box[data-ar="9:16"] { width: 13px; height: 23px; }
.wnx-media__format-box[data-ar="16:9"] { width: 26px; height: 15px; }
.wnx-media__format input:checked + .wnx-media__format-box {
  border-color: #1f5fd0; background: rgba(31,95,208,.10); box-shadow: inset 0 0 0 1px #1f5fd0;
}
.wnx-media__format input:focus-visible + .wnx-media__format-box { outline: 2px solid #1f5fd0; outline-offset: 2px; }
.wnx-media__format-tip {
  position: absolute; z-index: 5; right: 0; bottom: calc(100% + 5px);
  padding: 3px 7px; border-radius: 6px; background: #0f172a; color: #fff;
  font-size: 10px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s;
}
.wnx-media__format:hover .wnx-media__format-tip,
.wnx-media__format:focus-within .wnx-media__format-tip { opacity: 1; visibility: visible; }

.wnx-media__pro {
  appearance: none; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 6px 9px; border: 0; border-radius: 8px; background: #eef2f7; color: #64748b;
  font: 600 10.5px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background .16s, color .16s;
}
.wnx-media__pro svg { width: 11px; height: 11px; }
.wnx-media__pro:hover { background: #e2e8f0; color: #334155; }
.wnx-media__pro.is-on { background: #1f5fd0; color: #fff; }
.wnx-media__pro.is-on:hover { background: #1b53b8; }
.wnx-media__pro:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }

.wnx-media__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0; padding: 10px 13px 13px;
}
.wnx-media__settings { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.wnx-media__actions { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: 0 0 auto; }
.wnx-media__duration { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 auto; }
.wnx-media__duration input[type=range] { flex: 0 1 60px; width: 60px; min-width: 34px; max-width: 74px; margin: 0; accent-color: #1f5fd0; }
.wnx-media__duration-value { font: 650 11px/1 inherit; color: #0f172a; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wnx-media__price { font-size: 17px; font-weight: 650; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wnx-media__generate {
  appearance: none; border: 0; border-radius: 9px; background: #1f5fd0; color: #fff;
  font: 600 12.5px/1 inherit; font-family: inherit; padding: 11px 14px; cursor: pointer;
  white-space: nowrap; transition: filter .15s, opacity .15s;
}
.wnx-media__generate:hover { filter: brightness(1.07); }
.wnx-media__generate:disabled { opacity: .6; cursor: default; filter: none; }
.wnx-media__generate:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }
.wnx-media__status { padding: 0 13px 12px; font-size: 11.5px; color: #64748b; }
.wnx-media__status.is-error { color: #b42318; }

.wnx-media__history {
  flex: 1 1 300px; min-width: 250px; max-width: 340px; align-self: flex-start;
  background: #fff; border: 1px solid rgba(148,163,184,.40); border-radius: 14px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.wnx-media__history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.wnx-media__history-item {
  position: relative; appearance: none; border: 1px solid rgba(148,163,184,.30);
  background: #fff; border-radius: 10px; padding: 0; overflow: hidden;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.wnx-media__history-item:hover { border-color: rgba(31,95,208,.55); box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.wnx-media__history-item:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }
.wnx-media__history-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #e9edf3; }
.wnx-media__history-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wnx-media__history-thumb.is-video { display: grid; place-items: center; background: linear-gradient(135deg, #101a2e, #0b1220); color: #94a3b8; font-size: 20px; }
.wnx-media__history-meta { display: block; padding: 6px 7px 7px; }
.wnx-media__history-prompt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 10.5px; line-height: 1.3; color: #334155; min-height: 27px;
}
.wnx-media__history-price { display: block; margin-top: 3px; font-size: 10px; color: #64748b; font-variant-numeric: tabular-nums; }
.wnx-media__history-empty { margin: 8px 4px; font-size: 11px; color: #64748b; }
.wnx-media__history-btn {
  appearance: none; width: 100%; border: 1px solid rgba(148,163,184,.40); background: #fff;
  color: #334155; font: 600 11.5px/1 inherit; font-family: inherit;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.wnx-media__history-btn:hover { border-color: #1f5fd0; color: #1f5fd0; }

@media (max-width: 1000px) {
  .wnx-media { flex-direction: column; align-items: stretch; }
  .wnx-media__card { width: 100%; max-width: 100%; }
  .wnx-media__history { max-width: none; width: 100%; }
}

/* Narrow card (9:16, phone): compact the control row instead of letting it break
   into a second control line. The row then never exceeds two visual rows total —
   settings plus price/CTA. */
@container mgcard (max-width: 390px) {
  .wnx-media__bottom { gap: 7px; padding: 9px 11px 11px; }
  .wnx-media__settings { flex-wrap: nowrap; gap: 5px 6px; }
  .wnx-media__pro { padding: 5px 7px; font-size: 10px; }
  .wnx-media__formats { gap: 0; }
  .wnx-media__format { width: 23px; }
  .wnx-media__chip { padding: 4px 4px; font-size: 9.5px; }
  .wnx-media__duration { gap: 4px; }
  .wnx-media__duration input[type=range] { flex: 0 1 44px; width: 44px; min-width: 24px; max-width: 56px; }
  .wnx-media__duration-value { font-size: 10px; }
  .wnx-media__price { font-size: 15px; }
  .wnx-media__actions { gap: 7px; }
  .wnx-media__generate { font-size: 12px; padding: 10px 11px; }
}