/* Asset-safe media frames — geometry only; no commercial filenames. */

:root {
  --friends-frame-radius: 14px;
  --friends-frame-bg: rgba(8, 10, 16, 0.72);
  --friends-frame-border: rgba(212, 160, 23, 0.22);
  --friends-frame-skeleton: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.04) 60%
  );
}

.friends-media-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--friends-frame-radius);
  background: var(--friends-frame-bg);
  border: 1px solid var(--friends-frame-border);
  isolation: isolate;
}

.friends-media-frame__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.friends-media-frame--contain .friends-media-frame__media {
  object-fit: contain;
}

.friends-media-frame--portal,
.friends-media-frame--game {
  aspect-ratio: 16 / 10;
}

.friends-media-frame--portrait,
.friends-media-frame--avatar {
  aspect-ratio: 1 / 1;
}

.friends-media-frame--companion-card {
  aspect-ratio: 3 / 4;
}

.friends-media-frame--room {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(20, 28, 44, 0.35), rgba(8, 10, 16, 0.8)),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.03) 0% 25%, transparent 0% 50%)
      0 0 / 16px 16px;
}

.friends-media-frame--furniture,
.friends-media-frame--icon {
  aspect-ratio: 1 / 1;
}

.friends-media-frame--vfx {
  aspect-ratio: 16 / 9;
  background:
    repeating-conic-gradient(#1a1f2b 0% 25%, #12151c 0% 50%) 0 0 / 18px 18px;
}

.friends-media-frame.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--friends-frame-skeleton);
  background-size: 200% 100%;
  animation: friends-media-shimmer 1.2s linear infinite;
}

.friends-media-frame.is-broken .friends-media-frame__media {
  opacity: 0;
}

.friends-media-frame.is-broken::before {
  content: 'Нет изображения';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(243, 239, 230, 0.55);
  font: 600 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
}

@keyframes friends-media-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .friends-media-frame.is-loading::after {
    animation: none;
  }
}

/* Global overlay host: large dialogs cover shell chrome and stay viewport-centered. */
html.friends-ui-v2 [data-overlay-host] .farm-hub-modal:not([hidden]),
html.friends-ui-v2 [data-overlay-host] .beta-auth-modal:not([hidden]),
html.friends-ui-v2 [data-overlay-host] .friends-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(4, 6, 12, 0.72);
}

html.friends-ui-v2 [data-overlay-host] .farm-hub-modal-card,
html.friends-ui-v2 [data-overlay-host] .beta-auth-modal-card {
  width: min(720px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  html.friends-ui-v2 [data-overlay-host] .farm-hub-modal-card,
  html.friends-ui-v2 [data-overlay-host] .beta-auth-modal-card {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    align-self: end;
  }
}

/* Adapt existing portal/catalog media into stable ratio boxes without new markup owners. */
html.friends-ui-v2 .friends-portal-card-media,
html.friends-ui-v2 .friends-catalog-card-media,
html.friends-ui-v2 .game-lobby-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--friends-frame-bg);
}

html.friends-ui-v2 .friends-portal-card-media img,
html.friends-ui-v2 .friends-catalog-card-media img,
html.friends-ui-v2 .game-lobby-card-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}