/**
  Блок сообщения (viewtopic.php) — раскладка «как на xenforo/phpbb»:
  слева колонка автора (аватар, ник, звание, статистика), справа шапка
  с информацией о посте и кнопками модерации, под ней — текст сообщения.

  Подключается из viewtopic.php через addStyle(), поэтому грузится только
  на странице темы. Цвета берутся из токенов активной темы
  (--theme-color / --theme-accent-color), чтобы блок одинаково выглядел
  во всех темах — светлых и тёмных.

  Брейкпоинты те же, что у сборки bootstrap-compat (BS4-alpha):
  544 / 768 / 992 / 1200.
 */

/* ------------------------------------------------------------------ */
/* Метаданные темы: префиксы, теги, затем статистика                  */
/* ------------------------------------------------------------------ */

.topic-prefixes + .topic-tags {
  margin-top: 6px;
}

.topic-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px 7px;
  line-height: 1.4;
}

.topic-tags-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--theme-accent-color, #777) 70%, currentColor);
  font-weight: 600;
}

.topic-tags-label .fa {
  margin-right: 2px;
}

.topic-tags-list {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px;
}

.topic-tags-list > a,
.topic-tags-list > a:visited {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--theme-accent-color, #999) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-accent-color, #999) 7%, var(--theme-color, #f6f6f6));
  color: var(--theme-accent-color, #55728b) !important;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.topic-tags-list > a:hover,
.topic-tags-list > a:focus {
  border-color: color-mix(in srgb, var(--theme-accent-color, #999) 38%, transparent);
  background: color-mix(in srgb, var(--theme-accent-color, #999) 15%, var(--theme-color, #f6f6f6));
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Общий каркас: две колонки                                          */
/* ------------------------------------------------------------------ */

.post-block .post-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

/* Колонка автора */
.post-block .post-side {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 180px;
  flex: 0 0 180px;
  width: 180px;
  min-width: 0;
  padding: 12px 10px;
  text-align: center;
  /* Фон общий с колонкой сообщения — колонки разделяет только линия */
  border-right: 1px solid color-mix(in srgb, var(--theme-accent-color, #999) 20%, transparent);
}

/* Колонка содержимого поста */
.post-block .post-main {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Колонка автора                                                      */
/* ------------------------------------------------------------------ */

.post-author-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  margin-bottom: 8px;
}

.post-author-name a {
  text-decoration: none;
}

.post-author-avatar {
  display: block;
  margin: 0 auto 8px;
}

.post-author-avatar img,
.post-author-avatar .userAvatarImg {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  border-radius: 8px;
}

.post-author-rank {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--text-muted, #777);
}

.post-author-rank-img {
  margin-bottom: 6px;
}

.post-author-rank-img img {
  max-width: 100%;
  height: auto;
}

.post-author-badges {
  margin-bottom: 6px;
}

.post-author-badges img {
  vertical-align: middle;
}

/* Список «Статус / Стаж / Сообщений / Откуда» */
.post-author-stats {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--theme-accent-color, #999) 12%, transparent);
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
  color: var(--text-muted, #777);
}

.post-author-stats li + li {
  margin-top: 2px;
}

.post-author-stats .post-author-stat-label {
  color: var(--text-muted, #777);
}

.post-author-stats .post-author-stat-value {
  font-weight: 600;
}

/* Кнопки «Профиль» и «ЛС» под статистикой */
.post-author-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.post-author-actions .btn {
  font-size: 11px;
  padding: 2px 8px;
}

.post-author-banned {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #d9534f;
}

/* ------------------------------------------------------------------ */
/* Шапка поста: информация слева, кнопки справа                        */
/* ------------------------------------------------------------------ */

.post-topbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-accent-color, #999) 12%, transparent);
}

.post-topbar-meta {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted, #777);
}

.post-topbar-meta a {
  color: inherit;
}

.post-topbar-actions {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/* Кнопки в шапке приглушены, пока на них не наведёшь — как было
   в старой шапке первого поста (.box-cell .btn.btn-outline) */
.post-topbar-actions .btn.btn-outline {
  opacity: .5;
}

.post-topbar-actions .btn.btn-outline:hover,
.post-topbar-actions .btn.btn-outline:focus,
.post-topbar-actions .btn.btn-outline:active,
.post-topbar-actions .btn.btn-outline.active {
  opacity: 1;
}

/* Чекбокс выделения поста (разделение темы) не должен ломать ряд кнопок */
.post-topbar-actions .custom-control {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Тело поста                                                          */
/* ------------------------------------------------------------------ */

.post-block .post-content {
  padding: 10px 12px;
}

/* ------------------------------------------------------------------ */
/* Планшет и мобильный: колонка автора превращается в полосу сверху     */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .post-block .post-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .post-block .post-side {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-accent-color, #999) 20%, transparent);
  }

  /* Аватар в полосе идёт первым, хотя в разметке он после ника */
  .post-block .post-side .post-author-avatar {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 36px;
    margin: 0;
  }

  .post-block .post-side .post-author-avatar img,
  .post-block .post-side .post-author-avatar .userAvatarImg {
    display: block;
    width: 36px;
    height: 36px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
  }

  .post-block .post-side .post-author-main {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .post-block .post-side .post-author-name {
    margin-bottom: 0;
  }

  /* В полосе остаются только аватар, ник и звание: остальное — в профиле,
     куда ведёт аватар */
  .post-block .post-side .post-author-rank-img,
  .post-block .post-side .post-author-badges,
  .post-block .post-side .post-author-stats,
  .post-block .post-side .post-author-actions {
    display: none;
  }

  .post-block .post-side .post-author-rank {
    margin-bottom: 0;
  }

  .post-topbar {
    padding: 6px 8px;
  }

  .post-block .post-content {
    padding: 10px 8px;
  }
}