/* === ЧАТ-РЕЖИМ ДЛЯ ПОДФОРУМА id=21 === */
[data-forum-id="21"] .post {
    margin: 50px 0;
    box-shadow: none !important;
    padding: 0px 0px;
    border-radius: 10px !important;
    outline: 1px solid #ced5cc;
    background: url(https://forumstatic.ru/files/001b/ef/4a/34715.jpg);
}

[data-forum-id="21"] .post > .container { display: flex; gap: 12px; padding: 10px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin: 0; width: auto; border-radius: 7px; min-height: 83px;}

/* Аватар */
[data-forum-id="21"] .post-author {
    width: 150px !important;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    margin: -41px 0px 0px 0px !important;
    padding: 0;
}
[data-forum-id="21"] .pa-avatar img {
width: 100px !important;
    height: 100px !important;
    border-radius: 10px !important;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Оригинальный ник скрываем, но оставляем в DOM для JS */
[data-forum-id="21"] .pa-author {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Скрываем всё лишнее в блоке автора */
[data-forum-id="21"] .pa-title,
[data-forum-id="21"] .pa-fld1,
[data-forum-id="21"] .pa-fld2,
[data-forum-id="21"] .pa-fld3,
[data-forum-id="21"] .pa-fld4,
[data-forum-id="21"] .pa-posts,
[data-forum-id="21"] .pa-respect,
[data-forum-id="21"] .pa-online,
[data-forum-id="21"] .pa-last-visit,
[data-forum-id="21"] .pa-ip {
    display: none !important;
}

/* Блок с сообщением — теперь полная ширина */
[data-forum-id="21"] .post-body {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    padding: 0;
    margin: -35px 0px -10px -10px;
}
[data-forum-id="21"] .post-content {
    width: 100% !important;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #14171a;
}

/* Шапка сообщения (ник + дата), добавится через JS */
[data-forum-id="21"] .chat-meta {  display: flex;  align-items: baseline;  flex-wrap: wrap;  gap: 8px;  background: var(--oformcolor);  width: 260px; height: 10px;}
[data-forum-id="21"]  [data-user-id="3"]  .chat-meta {  margin: -3px 1px 12px -32px;  padding: 5px 10px 10px 20px;    border-top-right-radius: 10px;}
[data-forum-id="21"] [data-user-id="8"] .chat-meta {  margin: -3px 1px 12px 430px;  padding: 5px 20px 10px 10px;  border-top-left-radius: 10px;     justify-content: flex-end;}


[data-forum-id="21"] span.chat-username { color: var(--oformcolor2); font: 700 13px 'Helvetica Neue';  text-transform: uppercase;  opacity: 0.7;}
[data-forum-id="21"] .post-date {color: var(--oformcolor2); font: 700 10px 'Calibri'; text-transform: uppercase;  width: 257px; margin: -23px 0px 0px 0px; opacity: 0.5;}
[data-forum-id="21"]  [data-user-id="3"]  .post-date { text-align: end;}


[data-forum-id="21"] blockquote p { font-style: italic; color: var(--oformcolor2); opacity: 0.7;}



/* Ссылки под сообщением (цитировать, править) — маленькие */
[data-forum-id="21"] .post-links {  margin-top: -4px !important;  text-align: right;  background: none !important;   padding: 0px 10px 0px 30px !important;}

[data-forum-id="21"] [data-user-id="8"] .post-links {padding: 0px 10px 0px 20px !important;}

[data-forum-id="21"] .post-links ul {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    list-style: none;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}
[data-forum-id="21"] .post-links a {
    font-size: 0px;
    padding: 4px 4px;
    border-radius: 5px;
    width: 10px;
}

[data-forum-id="21"] .post-links a:before {
   font-family: var(--fa);
    font-size: 10px;
    font-weight: 400;
    display: inline-block;
    line-height: 1;
    color: #657786;
    transition: color 0.2s;
}

/* Профиль */
[data-forum-id="21"] li.pl-email.profile a:before { content: "\f007";}
/* ЛС */
[data-forum-id="21"] li.pl-email.pm a:before { content: "\f0e0";}
/* E-mail */
[data-forum-id="21"] li.pl-email.email a:before { content: "\f1fa";  /* значок @ */}
/* Удалить */
[data-forum-id="21"] li.pl-delete a:before { font-weight: 900; content: "\f1f8";}
/* Редактировать */
[data-forum-id="21"] li.pl-edit a:before { content: "\f044";}
/* Цитировать */
[data-forum-id="21"] li.pl-quote a:before { font-weight: 900; content: "\f10e";}


[data-forum-id="21"] .pagelink {  margin: 60px 0 0 0 !important;}

/* Скрываем рейтинги, подписи, панели модерации и оригинальную ссылку времени */
[data-forum-id="21"] .post-rating,
[data-forum-id="21"] .post-sig,
[data-forum-id="21"] .modmenu,
[data-forum-id="21"] .subscribelink,
[data-forum-id="21"] a.permalink,
[data-forum-id="21"] #pun-viewtopic .postlink,
[data-forum-id="21"] .post h3 strong,
[data-forum-id="21"] .post-header, 
[data-forum-id="21"] #button-font,
[data-forum-id="21"]  #button-size,
[data-forum-id="21"] #button-indent,
[data-forum-id="21"] #button-left,
[data-forum-id="21"] #button-center,
[data-forum-id="21"] #button-justify,
[data-forum-id="21"] #button-right,
[data-forum-id="21"] #floatbut,
[data-forum-id="21"] #button-spoilerams,
[data-forum-id="21"] #button-video,
[data-forum-id="21"] #button-hide,
[data-forum-id="21"] #button-code,
[data-forum-id="21"] #button-table {
    display: none !important;
}

/* Кнопку «Отправить» НЕ скрываем */
[data-forum-id="21"] #post-form .formsubmit {
    display: block !important;
}

/* Для левых и правых сообщений (id=8 — справа, остальные — слева) */
[data-forum-id="21"] .post:not([data-user-id="8"]) > .container {    margin-right: auto;}
[data-forum-id="21"] [data-user-id="8"] > .container {
    margin-left: auto;
    background: #e8f5fe9e;
    flex-direction: row-reverse;
}



[data-forum-id="21"] .linkst {margin: -107px 0 0 -10px;}
[data-forum-id="21"] div#fntSlider { margin: -27px 0px 0px 662px;}

[data-forum-id="21"] li.pa-avatar {
    background: none;
    padding: 0px !important;
    box-shadow: none;
    border: 1px solid #ffffffcc;
    border-radius: 10px;
    margin: 0px 76px 15px 0px;
}

[data-forum-id="21"] .post-box {
    padding: 10px;
    border-radius: 10px;
    margin: 0px 0px 10px 0px;
background: #ffffffcc;
}
[data-forum-id="21"] button.reaction-counter.reaction-chip { border: none !important;}
[data-forum-id="21"] [data-user-id="8"] .post-body {   margin: -35px -10px -10px 10px;}
.reactions-root.reactions-under-avatar { margin: -59px 0px 0px -17px;  width: 20px;}

[data-user-id="8"] .reaction-picker-panel {width: 575px; top: -75px; right: 160px;    height: 250px;    overflow-y: clip;}
[data-user-id="3"] .reaction-picker-panel {width: 575px; top: -75px; right: -710px;    height: 250px;    overflow-y: clip;}
[data-forum-id="21"] section.emoji-mart.emoji-mart-light { width: 575px !important;    height: 250px;}




[data-forum-id="21"] .post-box .quote-box {    background: transparent !important;    box-shadow: none !important;    border: none !important;   margin: 0 !important;    padding: 5px !important;}
:is([data-forum-id="21"]) :is(blockquote) { background: var(--oformcolor); padding: 5px;  border-radius: 5px;}
[data-forum-id="21"] blockquote p {    padding: 0px !important;}
[data-forum-id="21"] cite {  display: none !important;}

[data-forum-id="21"] .post-content > .spoiler-box > div {
  background: url(https://forumstatic.ru/files/001c/b1/53/80629.svg) right no-repeat !important;
  width: 250px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0;
  padding: 0 !important;
  height: 20px;
  border: none;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0;
  text-shadow: none;
  position: relative;
}


[data-forum-id="21"] .post-content > .spoiler-box > div:before { mask-image: url(https://forumstatic.ru/files/001c/86/ed/76752.svg) !important; -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/76752.svg) !important; width: 20px !important; height: 20px !important; background: #b4b4b4 !important; opacity: 1 !important; content: ""; position: relative !important; margin: 0 !important; transform: none !important; top: auto !important; left: auto !important; }

[data-forum-id="21"] .post-content > .spoiler-box > div:after { mask: none; content: "1x"; opacity: 1; left: 25px; width: 20px; height: 20px; top: 0; border-radius: 3px; background: transparent; border: 1px solid #b4b4b4; color: #b4b4b4; font: 700 10px Inter; display: flex; align-items: center; justify-content: center; margin: 0; box-sizing: border-box; transform: none; position: absolute; }

[data-forum-id="21"] blockquote.visible {  padding: 5px !important;  margin: 5px 0px 0px 0px;}

[data-forum-id="21"] #button-snsvoice, [data-forum-id="21"] #button-snsalbum, [data-forum-id="21"] #button-snscall, [data-forum-id="21"] #button-snsgeo,[data-forum-id="21"] #button-snsmissed,  { align-items: center; justify-content: center; width: 26px; margin: 0 2px; cursor: pointer; position: relative; }

[data-forum-id="21"] #button-snsvoice:before, [data-forum-id="21"] #button-snsalbum:before, [data-forum-id="21"] #button-snscall:before, [data-forum-id="21"] #button-snsgeo:before, [data-forum-id="21"] #button-snsmissed:before,  data-forum-id="21"] #button-snstime:before { font-family: var(--fa); font-size: 13px; font-weight: 400; color: #657786; transition: color 0.2s; } 

/* Индивидуальные иконки */
#button-snsvoice:before { content: "\f130"; } #button-snscall:before { content: "\f095"; } #button-snsmissed:before { content: "\e226"; } #button-snsgeo:before { content: "\f041"; } #button-snstime:before { content: "\f017"} 

 

[data-forum-id="21"] .reaction-picker { position: absolute;  margin: -30px 0px 0px 0px;}
[data-user-id="8"] .reactions-root.reactions-under-avatar { margin: -59px 0px 0px 127px;}
[data-forum-id="21"] ul.emoji-mart-category-list {  width: 530px !important;}


.sns_geo {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.sns_geo p {
  font-size: 10px !important;
  font-style: italic !important;
  border-radius: 0 3px 3px 0;
  margin-left: -7px !important;
  height: 16px;
  display: flex;
  align-items: center;
  padding: 0 7px !important;
}
.sns_geo:before {
    content: "";
    mask: url(https://forumstatic.ru/files/001a/e6/32/44230.svg) no-repeat center / contain;
    -webkit-mask-image: url(https://forumstatic.ru/files/001a/e6/32/44230.svg);
    width: 16px;
    height: 16px;
    background: #88a37a;
}





/* Панель реакций – самый верхний слой */
[data-forum-id="21"] .reaction-picker-panel {
    z-index: 100000 !important;
}

/* Убираем у контейнеров спойлеров и цитат создание контекста наложения */
[data-forum-id="21"] .post-content .spoiler-box,
[data-forum-id="21"] .post-content .quote-box {
    overflow: visible !important;
    transform: none !important;
    isolation: auto !important;
}

/* Если у спойлеров есть transform, отключаем только для родителя, чтобы панель не обрезалась */
[data-forum-id="21"] .spoiler-box > div {
    transform: none !important;
}

/* Тело сообщения не должно обрезать абсолютные элементы */
[data-forum-id="21"] .post-body {
    overflow: visible !important;
}

/* Для блока аватарки (родителя реакций) – чтобы панель выезжала правильно */
[data-forum-id="21"] .post-author {
    position: relative;
    z-index: 20;
}

/* Показываем кнопку "Создать новую тему" в списке форумов */
[data-forum-id="21"] .postlink.long,
[data-forum-id="21"] .new-topic {
    display: inline-block !important;
}



[data-forum-id="21"] .post .post-author ul {display: flex;flex-wrap: wrap;text-align: center;justify-content: space-around; width: 114px; margin: 0px 15px 10px 20px;}

[data-forum-id="21"] .pa-avatar::after { content: ''; position: absolute; top: 1px; left: 21px; width: 100px; height: 98px; border: 4px solid var(--oformcolor); border-radius: 10px; box-sizing: border-box; pointer-events: none; }

[data-forum-id="21"]  .pa-avatar { background-size: cover ! IMPORTANT;}

/* === Сам img – скрыт, без рамки === */ [data-forum-id="21"] .pa-avatar img { opacity: 0;                 /* скрываем картинку */ border: none !important;    /* убираем рамку у img */ }





[data-forum-id="21"] .post .post-author ul {display: flex;flex-wrap: wrap;text-align: center;justify-content: space-around; width: 114px; margin: 0px 15px 10px 20px;}

[data-forum-id="21"] .postlink {  margin: 60px 36px 0px 0px;}
[data-forum-id="21"] li.pl-email.pm {  display: none !important;}

:root {--oformcolor: #ffffffcf; 
--oformcolor2: #000000; }
[data-forum-id="21"] .post {border: 3px solid var(--oformcolor) !important;}
[data-forum-id="21"] .pa-avatar img {border: 4px solid var(--oformcolor);}
[data-forum-id="21"] .post-links a::before {color:var(--oformcolor)}
[data-forum-id="21"] .post-links a {border-color: var(--oformcolor)}
[data-forum-id="21"] .post-links a { border-color: var(--oformcolor) !important;}
[data-forum-id="21"] button.reaction-counter.reaction-chip.reaction-chip--clicked {border-color: var(--oformcolor) !important;}
[data-forum-id="21"] button.reaction-picker-button.reaction-chip { border-color: var(--oformcolor) !important;}
[data-forum-id="21"] .reactions-root button.reaction-picker-button.reaction-chip svg {  color: var(--oformcolor) !important;}