html:has(.chat-room) {
  --general-bg-col: var(--col-secondary);
  --header-bg-col: var(--white);
}

/* user-state */
.header__user-state {
  color: #828282;
  font-weight: 500;
  text-transform: capitalize;
}

.header__user-state.online {
  color: #6400D9;
}
/* \user-state */

.chat-room {
  font-size: 1.4rem;
  line-height: 1.2;
}

.chat-room__msg-wrapper {
  padding: 2rem var(--base-p-x) 1.4rem;
  display: flex;
  flex-direction: column;
  gap: calc(var(--base-p-x)*3);
}

.chat-room__msg-group {
  position: relative;
  width: 100%;
  display: inherit;
  flex-direction: inherit;
  gap: var(--base-p-x);
  align-items: center;

}

.chat-room__msg-date {
  z-index: 5;
  position: relative;
  color: #777;
  background: var(--white);
  margin-bottom: calc(var(--base-p-x)*2);
  padding: .8rem;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-room__message {
  width: 60%;
  max-width: 45rem;
  min-width: 228px;
  align-self: flex-start;
  padding: 1rem .8rem;
  border-radius: 1.2rem;
  background-color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1.6rem;
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
        "header header"
        "images images"
        "docs   docs"
        "text   status";
  gap: .4rem;
}

.chat-room__message.your {
  align-self: flex-end;
  color: var(--white);
  background-color: var(--purple);
}

.chat-room__msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-area: header;
}

.chat-room__message:not(.your) .chat-room__msg-title {
  color: var(--purple);
}

.chat-room__msg-title {
  font-weight: 600;
}

.chat-room__msg-time {
  font-size: 1.1rem;
  line-height: 1;
}

.chat-room__msg-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.chat-room__msg-link:hover,
.chat-room__msg-link:active {
  text-decoration: none;
}

.chat-room__message:not(.your) .chat-room__msg-time {
  color: #777;
}

.chat-room__img-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  width: 100%;
  min-width: 0;
  grid-area: images;
}

.chat-room__img-container a {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  display: block;
}

.chat-room__msg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}


/* Адаптивность */
/* Для разного количества картинок */

/* 1 картинка */
.chat-room__img-container:has(a:first-child:nth-last-child(1)) {
  grid-template-columns: 1fr;
}

.chat-room__img-container:has(a:first-child:nth-last-child(1)) img {
  aspect-ratio: 4 / 3;
  max-height: 40rem;
}

/* 2 картинки */
.chat-room__img-container:has(a:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, 1fr);
}

/* 4 картинки */
.chat-room__img-container:has(a:first-child:nth-last-child(4)) {
  grid-template-columns: repeat(2, 1fr);
}

/* 5 картинок - 2 в первой строке, 3 во второй */
.chat-room__img-container:has(a:first-child:nth-last-child(5)) {
  grid-template-columns: repeat(6, 1fr);
}

.chat-room__img-container:has(a:first-child:nth-last-child(5)) a:nth-child(1) img,
.chat-room__img-container:has(a:first-child:nth-last-child(5)) a:nth-child(2) img {
  grid-column: span 3;
}

.chat-room__img-container:has(a:first-child:nth-last-child(5)) a:nth-child(3) img,
.chat-room__img-container:has(a:first-child:nth-last-child(5)) a:nth-child(4) img,
.chat-room__img-container:has(a:first-child:nth-last-child(5)) a:nth-child(5) img {
  grid-column: span 2;
}

/* 7 картинок - 3 в первой строке, 2 во второй, 2 в третьей */
.chat-room__img-container:has(a:first-child:nth-last-child(7)) {
  grid-template-columns: repeat(6, 1fr);
}

.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(1) img,
.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(2) img,
.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(3) img {
  grid-column: span 2;
}

.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(4) img,
.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(5) img {
  grid-column: span 3;
}

.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(6) img,
.chat-room__img-container:has(a:first-child:nth-last-child(7)) a:nth-child(7) img {
  grid-column: span 3;
}

.chat-room__img-container img {
  aspect-ratio: 3 / 4;
  max-width: 100%;
  object-fit: cover;
  border-radius: 4px;
  background-color: #e2d5e2;
}

.chat-room__msg-img {
  content-visibility: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
}

.chat-room__msg-img.is-loaded {
  opacity: 1;
  visibility: visible;
}

.chat-room__img-container a:has(img) {
  display: contents;
}

.chat-room__file-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 300;
  grid-area: docs;
}

.chat-room__file-link {
  color: inherit;
  padding: .4rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-room__msg-file-icon {
  width: 4rem;
  aspect-ratio: 1;
  background-color: var(--white);
  border-radius: 1.2rem;
  flex: none;
  padding: .8rem;
  box-sizing: border-box;
}

.chat-room__msg-file-icon i {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: inherit;
  color: var(--black);
  --mask-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.53 9.44016L12.53 2.44016C12.3827 2.31389 12.194 2.24625 12 2.25016H9C6.37665 2.25016 4.25 4.37681 4.25 7.00016V17.0002C4.25 19.6235 6.37665 21.7502 9 21.7502H15C17.6234 21.7502 19.75 19.6235 19.75 17.0002V10.0002C19.7534 9.79178 19.6743 9.5905 19.53 9.44016ZM12.75 4.79016L17.21 9.25016H14C13.3096 9.25016 12.75 8.69052 12.75 8.00016V4.79016ZM5.75 17.0002C5.75549 18.7928 7.20735 20.2447 9 20.2502H15C16.7926 20.2447 18.2445 18.7928 18.25 17.0002V10.7502H14C12.4812 10.7502 11.25 9.51894 11.25 8.00016V3.75016H9C7.20735 3.75565 5.75549 5.20751 5.75 7.00016V17.0002Z' fill='black'/%3E%3C/svg%3E%0A");
}

.chat-room__msg-file-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-room__msg-file-text .title {
  font-weight: 400;
}

.chat-room__msg-text-wrapper {
  grid-area: text;
  letter-spacing: 0;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-width: 0;
}

.chat-room__message-state {
  font-size: 1.1rem;
  line-height: 1;
  align-self: flex-end;
  color: var(--white);
  display: flex;
  align-items: center;
  grid-area: status;
  /*width: 1.6rem;*/
  width: 100%;
  aspect-ratio: 1;
  opacity: .5;
}

.chat-room__message-state.sent {
  --mask-icon: url(/assets/site/pz_img/new-chat/msg-states/sent.svg);
}

.chat-room__message-state.read {
  /*color: var(--purple);*/
  --mask-icon: url(/assets/site/pz_img/new-chat/msg-states/read.svg);
}

.chat-room__message-state.pending {
  --mask-icon: url(/assets/site/pz_img/new-chat/msg-states/pending.svg);
}

.chat-room__message-state.error {
  color: red;
  opacity: 1;
  --mask-icon: url(/assets/site/pz_img/new-chat/msg-states/error.svg);
}

/* msg-input */

.chat-room__footer {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem 1rem;
  transition: var(--default-transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-room__footer:focus-within,
.chat-room__footer:focus {
  background-color: #d9dce3;
}

.chat-room__msg-form {
  display: contents;
}
.chat-room__form-fieldset {
  background-color: var(--white);
  border: 1px solid #707991;
  border-radius: 12px;
  display: flex;
  align-items: center;
  /*gap: 1.6rem;*/
  padding: 0 1.6rem;
}

.chat-room__attach {
  flex: none;
}

.chat-room__attach input {
  display: none;
}

.chat-room__attach i {
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  color: #292D32;
  --mask-icon: url(/assets/site/pz_img/new-chat/file-input.svg);
}

.chat-room__msg-input_wrapper {
  --p-y: 18px;
  --p-x: 16px;
  position: relative;
  flex: 1;
  box-sizing: border-box;
  padding: 0 var(--p-x);
  background-color: inherit;
}

.chat-room__msg-input_wrapper::before,
.chat-room__msg-input_wrapper::after {
  content: '';
  display: block;
  width: 100%;
  height: var(--p-y);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

.chat-room__msg-input_wrapper::before {
  top: 0;
  background: linear-gradient(
    to top,
    transparent 0%,
    rgba(var(--white-rgb-part), .8) 60%,
    var(--white) 100%
  );
}

.chat-room__msg-input_wrapper::after {
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--white-rgb-part), .8) 60%,
    var(--white) 100%
  );
}

.chat-room__msg-input {
  /*flex: 1;*/
  font-size: 1.6rem;
  line-height: 1.25;
  /*padding: 18px 16px;*/
  padding: var(--p-y) 0;
  height: auto;
  width: 100%;
  overflow-y: auto;
  max-height: 96px;
  position: relative;
  box-sizing: inherit;
}

.chat-room__send {
  flex: none;
  --btn-size: 2.8rem;
  transition: var(--default-transition);
  width: var(--btn-size);
  height: auto;
  aspect-ratio: 1;
  background-color: var(--purple);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .8rem;
}

.chat-room__send input {
  display: none;
}

.chat-room__send i {
  display: block;
  width: 57%;
  aspect-ratio: inherit;
  --mask-icon: url(/assets/site/pz_img/new-chat/send-arrow.svg);
}


.chat-room__send.pending {
  transform: scale(1.5);
}

.chat-room__send.pending i {
  --mask-icon: url(/assets/site/pz_img/new-chat/pending-message.svg);
  /*animation: spin 1.3s infinite ease;*/
  animation: spin .8s infinite linear;
}

@keyframes spin {
  to { transform: rotate(-360deg); }
}

.chat-room__send:has(input:disabled),
.chat-room__form-fieldset:not(:has(.chat-room__msg-input.filled, #msgFiles.filled)) .chat-room__send {
  --btn-size: 2rem;
  pointer-events: none;
  background-color: #FFFFFF;
  color: var(--purple);
  opacity: .6;
}

.chat-room__send:has(input:disabled) i,
.chat-room__form-fieldset:not(:has(.chat-room__msg-input.filled, #msgFiles.filled)) .chat-room__send i {
  width: 100%;
}

.chat-room__msg-form:has(input[type="file"]:disabled) + .chat-room__attachments {
  pointer-events: none;
  content-visibility: hidden;
}

.chat-room__attachments {
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-room__attachment-list {
  padding: .4rem 0 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.chat-room__attachment {
  box-sizing: border-box;
  border: 1px solid var(--purple);
  background-color: var(--white);
  color: var(--black);
  padding: .8rem;
  border-radius: 1.2rem;
  position: relative;
  display: flex;
  gap: 1rem;
  font-size: 1.2rem;
  line-height: 2rem;
  flex: none;
}

.chat-room__attachment:has(img) {
  padding: 0;
  width: 40px;
  aspect-ratio: 1;
}

.chat-room__attachment .preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-position: center;
  object-fit: cover;
  border-radius: inherit;
}

.chat-room__attachment span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18vw;
}

.chat-room__attachment:not(:has(img))::before {
  content: '';
  width: 2rem;
  height: auto;
  aspect-ratio: 1;
  --mask-icon: url(/assets/site/pz_img/new-chat/file-attach.svg);
}

.chat-room__attachment .remove {
  cursor: pointer;
  border: none;
  border-radius: 50%;
  transform: translate(25%, -25%);
  width: 1.6rem;
  aspect-ratio: 1;
  background-color: #dbdbdb;
  color: #8c8c8c;
  position: absolute;
  top: 0;
  right: 0;
  padding: .35rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-room__attachment .remove::before {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  --mask-icon: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.08323 4.50402L8.881 0.71911C9.03967 0.558953 9.03967 0.299498 8.881 0.13934C8.72515 -0.0236797 8.46775 -0.0285757 8.30591 0.128401L4.50814 3.91332L0.759196 0.128401C0.682336 0.0464405 0.575392 0 0.463512 0C0.351633 0 0.244689 0.0464405 0.167829 0.128401C0.0271503 0.283138 0.0271503 0.520617 0.167829 0.675354L3.91677 4.4548L0.119 8.23424C-0.0396668 8.3944 -0.0396668 8.65386 0.119 8.81401C0.194537 8.89201 0.298423 8.93549 0.406546 8.93434C0.516753 8.94335 0.626008 8.90795 0.710368 8.83589L4.50814 5.05098L8.30591 8.87965C8.38144 8.95765 8.48533 9.00112 8.59345 8.99998C8.70146 9.00049 8.80511 8.95712 8.881 8.87965C9.03967 8.71949 9.03967 8.46004 8.881 8.29988L5.08323 4.50402Z' fill='%238C8C8C'/%3E%3C/svg%3E%0A");
}

/* \msg-input */

/* chat popup */
.chat-popup__overlay {
  --p-y: 1.6rem;
  --p-x: 1rem;
  --close-btn-size: 2.4rem;
  background-color: transparent;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.chat-popup__overlay:has(.chat-popup.active) {
  pointer-events: all;
}

.chat-popup {
  position: absolute;
  top: 100%;
  pointer-events: all;
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--p-x) var(--p-y);
  background-color: var(--white);
  overflow: hidden;
  border-radius: 2.4rem 2.4rem 0 0;
  line-height: 1.7rem;
  font-weight: 500;
  transition: .3s ease;
  box-shadow: 0px -1px 4px 0px #0000001A;
}

.chat-popup.active {
  transform: translateY(-100%);
}

.chat-popup__drag-handle {
  --handle-height: .5rem;
  padding-top: var(--p-y);
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(var(--p-y) + var(--handle-height) + var(--p-x)*2 + var(--close-btn-size));
}

.chat-popup__drag-handle::before {
  content: '';
  display: block;
  width: auto;
  min-width: 13.4rem;
  border-radius: calc(var(--handle-height) / 2);
  height: var(--handle-height);
  background-color: #d9d9d9;
}

.chat-popup__close {
  --mask-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 0.75L0.75 8.75' stroke='%23130F26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.75 8.75L0.75 0.75' stroke='%23130F26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: var(--p-x);
  top: calc(var(--p-y) + var(--p-x));
  width: var(--close-btn-size);
  aspect-ratio: 1;
  padding: .6rem;
  box-sizing: border-box;
  cursor: pointer;
}

.chat-popup__close::before {
  width: 100%;
  aspect-ratio: inherit;
  box-sizing: border-box;
  сursor: drag;
}

.chat-popup__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.chat-popup__title {
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  -webkit-text-size-adjust: auto;
}
.chat-popup__field-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.chat-popup__field {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.chat-popup__label {
  color: #828282;
  font-size: 1.2rem;
  user-select: none;
  -webkit-text-size-adjust: none;
}
.chat-popup__value {
  margin: 0;
  font-size: 1.4rem;
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  -webkit-text-size-adjust: auto;
}
.chat-popup__btn {
  cursor: pointer;
  border: none;
  background-color: var(--purple);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 600;
  border-radius: 1.2rem;
  padding: 1.6rem;
}

/* \chat popup */