/* Avatar-only rules for the original GameCMS components.
   Keep profile portraits, upload previews and message attachments independent. */
.cpa-site .small-friend > img,
.cpa-site #online_users > a > img,
.cpa-site #top_users > a > img,
.cpa-site #companions > div > img,
.cpa-site .comment > a > img,
.cpa-site .im_message > img,
.cpa-site .dialog > div:first-child > img {
  display: block;
  width: 40px;
  height: 40px;
  max-width: 40px;
  min-width: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 40px;
}

/* Mini friends keep their own grid, separate from full-size friend cards. */
.cpa-site .profile-page .col-lg-4 #friends {
  grid-template-columns: minmax(0, 1fr);
}
.cpa-site .small-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  text-align: left;
}
.cpa-site .small-friend > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* The CMS uses online_users for online, birthday and donor widgets. */
.cpa-site #online_users > a,
.cpa-site #companions > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  text-align: left;
}
.cpa-site #online_users > a > img,
.cpa-site #companions > div > img {
  grid-column: 1;
  grid-row: 1 / 3;
}
.cpa-site #online_users > a > span,
.cpa-site #companions > div > a,
.cpa-site #companions > div > span {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.cpa-site #online_users > a > span:nth-child(3),
.cpa-site #companions > div > span {
  font-size: 12px;
  color: var(--cpa-muted);
}
.cpa-site #top_users > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
}
.cpa-site #top_users > a > div { min-width: 0; overflow-wrap: anywhere; }
.cpa-site #top_users > a p { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; font-size: 12px; color: var(--cpa-muted); }

/* Avatars in comments and messages must not size the text column. */
.cpa-site .comment,
.cpa-site .im_message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
}
.cpa-site .comment > a { flex: 0 0 40px; }
.cpa-site .comment > div,
.cpa-site .im_message > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cpa-site .comment .info,
.cpa-site .im_message .info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.cpa-site .comment .info .date,
.cpa-site .im_message .info .date { color: var(--cpa-muted); font-size: 12px; }
.cpa-site .dialog { display: flex; gap: 12px; margin-bottom: 12px; min-width: 0; }
.cpa-site .dialog > div:first-child { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.cpa-site .dialog > div:first-child > div { min-width: 0; overflow-wrap: anywhere; }
.cpa-site .dialog p { margin: 0 0 4px; }
.cpa-site .dialog > div:nth-child(2) { flex: 0 0 44px; display: grid; place-items: center; cursor: pointer; }

/* Profile links in service/complaint tables, including the empty avatar. */
.cpa-site table td > a[href*="profile?id="] > img,
.cpa-site table td > a > img[src*="files/avatars/no_avatar"],
.cpa-site #vk_user > img,
.cpa-site #steam_user > img,
.cpa-site #fb_user > img {
  display: inline-block;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  object-fit: cover;
  border-radius: 7px;
  vertical-align: middle;
  flex: 0 0 32px;
  margin-right: 6px;
}
.cpa-site #vk_user,
.cpa-site #steam_user,
.cpa-site #fb_user { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.cpa-site #vk_user > span,
.cpa-site #steam_user > span,
.cpa-site #fb_user > span { min-width: 0; overflow-wrap: anywhere; }
.cpa-site #vk_user > img,
.cpa-site #steam_user > img,
.cpa-site #fb_user > img { margin-right: 0; }
.cpa-site .vk-widgets a[id^="admin_widget"] { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.cpa-site .vk-widgets a[id^="admin_widget"] > img { width: 40px; height: 40px; min-width: 40px; max-width: 40px; object-fit: cover; border-radius: 8px; flex: 0 0 40px; }

/* Author portraits are larger than list avatars, but never native image size. */
.cpa-site .topic-answers > div[id^="answer_"] > .center-area > .left-side > img {
  display: block;
  width: 80px;
  height: 80px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}
.cpa-site .popover_avatar { display: block; width: 64px; height: 64px; max-width: 64px; object-fit: cover; border-radius: 8px; }
.cpa-site .friend > a:first-child { flex: 0 0 52px; }

@media (max-width: 767px) {
  .cpa-site .friend > a:first-child { flex-basis: 44px; }
  .cpa-site .topic-answers > div[id^="answer_"] > .center-area > .left-side > img { width: 48px; height: 48px; }
  .cpa-site .comment, .cpa-site .im_message { gap: 10px; }
}