.supp-chat__body {
  &#lkChatWindow .chat-content {
    background-color: var(--header-bg-col);
    border-radius: inherit;
  }

  &#lkChatWindow .header__back {
    display: none;
  }

  & .chat-rooms__list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.7rem;
  }

  & .chat-rooms__item {
    position: relative;
    padding: .8rem var(--base-p-x);
    transition: var(--default-transition);
    display: flex;
    flex-direction: column;
    gap: .8rem;
  }

  & .chat-rooms__item::before {
    content: '';
    display: block;
    position: absolute;
    left: var(--base-p-x);
    right: var(--base-p-x);
    bottom: 0;
    height: 1px;
    width: calc(100% - var(--base-p-x) * 2);
    background-color: #E1E1E1;
  }

  & .chat-rooms__item:has(.chat-rooms__message-state.received) {
    background-color: var(--light-pink);
  }

  @media (hover: hover) and (pointer: fine) {
    & .chat-rooms__item:has(.chat-rooms__message-state.received):hover,
    & .chat-rooms__item:hover {
      background-color: #FEFAFE;
    }
  }

  @media (hover: none) and (pointer: coarse) {
    & .chat-rooms__item:has(.chat-rooms__message-state.received):hover,
    & .chat-rooms__item:active {
      background-color: #FEFAFE;
    }
  }

  & .chat-rooms__item > a {
    position: absolute;
    inset: 0;
  }

  & .chat-rooms__topic {
    font-size: 1.2rem;
    color: var(--purple);
  }

  & .chat-rooms__item-row {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
  }

  & .chat-rooms__name {
    font-weight: 600;
  }

  & .chat-rooms__time {
    font-size: 1rem;
    color: var(--purple);
  }

  & .chat-rooms__message {
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: auto;
    max-width: 80%;
  }

  & .chat-rooms__message.your::before {
    content: var(--you-message);
    font-weight: 300;
    color: #818181;
    display: inline-block;
    padding-right: .5em;
  }

  & .chat-rooms__message-state {
    --side-width: 2.2rem;
    box-sizing: border-box;
    border-radius: calc(var(--side-width) / 2);
    padding: .6rem;
    height: var(--side-width);
    min-width: var(--side-width);
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    color: var(--white);
  }

  & .chat-rooms__message-state.received {
    background-color: var(--purple);
  }

  @supports (not (mask-image: url())) and (not (-webkit-mask-image: url())) {
    & .chat-rooms__message-state.read,
    & .chat-rooms__message-state.sent {
      color: transparent !important;
      background-image: var(--mask-icon);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  @supports (mask-image: url()) or (-webkit-mask-image: url()) {
    & .chat-rooms__message-state.read,
    & .chat-rooms__message-state.sent {
      background-image: none;
      background-color: currentColor;

      -webkit-mask-image: var(--mask-icon);
      mask-image: var(--mask-icon);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
  }

  & .chat-rooms__message-state.sent {
    font-size: 0;
    color: #818181;
    --mask-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.13949 11.7068C6.02754 11.7117 5.91719 11.6788 5.82616 11.6135L2.83283 9.14016C2.63997 8.96942 2.61094 8.67905 2.76616 8.47349C2.93661 8.28153 3.22473 8.24984 3.43283 8.40016L6.09949 10.5735L13.0995 4.10016C13.3065 3.94474 13.5979 3.97302 13.7712 4.16534C13.9444 4.35767 13.9423 4.65043 13.7662 4.84016L6.47949 11.5735C6.38667 11.6587 6.26546 11.7062 6.13949 11.7068Z' fill='%23818181'/%3E%3C/svg%3E%0A");
  }

  & .chat-rooms__message-state.read {
    font-size: 0;
    color: var(--purple);
    --mask-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3335 10.75L5.95266 13.75L12.5002 6.25M16.6668 6.3025L9.5235 13.8025L9.16683 13.3333' stroke='%2390278E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
}

/* Dark theme for support chat room list. */
html.theme-dark .supp-chat__body .chat-rooms__list,
body.theme-dark .supp-chat__body .chat-rooms__list,
.supp-chat__body.theme-dark .chat-rooms__list {
  background-color: #0a0c14 !important;
  color: #FFFFFF !important;
}

html.theme-dark .supp-chat__body .chat-rooms__item,
body.theme-dark .supp-chat__body .chat-rooms__item,
.supp-chat__body.theme-dark .chat-rooms__item {
  background-color: #111522 !important;
  color: #FFFFFF !important;
}

html.theme-dark .supp-chat__body .chat-rooms__item::before,
body.theme-dark .supp-chat__body .chat-rooms__item::before,
.supp-chat__body.theme-dark .chat-rooms__item::before {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

html.theme-dark .supp-chat__body .chat-rooms__item:has(.chat-rooms__message-state.received),
body.theme-dark .supp-chat__body .chat-rooms__item:has(.chat-rooms__message-state.received),
.supp-chat__body.theme-dark .chat-rooms__item:has(.chat-rooms__message-state.received) {
  background-color: rgba(144, 39, 142, 0.18) !important;
}

html.theme-dark .supp-chat__body .chat-rooms__item:hover,
html.theme-dark .supp-chat__body .chat-rooms__item:active,
body.theme-dark .supp-chat__body .chat-rooms__item:hover,
body.theme-dark .supp-chat__body .chat-rooms__item:active,
.supp-chat__body.theme-dark .chat-rooms__item:hover,
.supp-chat__body.theme-dark .chat-rooms__item:active {
  background-color: #151a2a !important;
}

html.theme-dark .supp-chat__body .chat-rooms__topic,
html.theme-dark .supp-chat__body .chat-rooms__time,
body.theme-dark .supp-chat__body .chat-rooms__topic,
body.theme-dark .supp-chat__body .chat-rooms__time,
.supp-chat__body.theme-dark .chat-rooms__topic,
.supp-chat__body.theme-dark .chat-rooms__time {
  color: #DFA6DE !important;
}

html.theme-dark .supp-chat__body .chat-rooms__name,
html.theme-dark .supp-chat__body .chat-rooms__message,
body.theme-dark .supp-chat__body .chat-rooms__name,
body.theme-dark .supp-chat__body .chat-rooms__message,
.supp-chat__body.theme-dark .chat-rooms__name,
.supp-chat__body.theme-dark .chat-rooms__message {
  color: #FFFFFF !important;
}

html.theme-dark .supp-chat__body .chat-rooms__message.your::before,
body.theme-dark .supp-chat__body .chat-rooms__message.your::before,
.supp-chat__body.theme-dark .chat-rooms__message.your::before {
  color: rgba(255, 255, 255, 0.58) !important;
}

html.theme-dark .supp-chat__body .chat-rooms__message-state.sent,
body.theme-dark .supp-chat__body .chat-rooms__message-state.sent,
.supp-chat__body.theme-dark .chat-rooms__message-state.sent {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Fallback dark selectors for support chat room list inside new-app wrappers. */
.theme-dark .supp-chat__body .chat-rooms,
.theme-dark .supp-chat__body .chat-rooms__list,
body:has(.theme-dark) .supp-chat__body .chat-rooms,
body:has(.theme-dark) .supp-chat__body .chat-rooms__list {
  background-color: #0a0c14 !important;
  color: #FFFFFF !important;
}

.theme-dark .supp-chat__body .chat-rooms__item,
body:has(.theme-dark) .supp-chat__body .chat-rooms__item {
  background-color: #111522 !important;
  color: #FFFFFF !important;
}