/* Chat unread/new message states polish. Keeps message-window search/filter UI out of the chat thread. */

.bk-chat-thread {
  scroll-padding-top: 54px;
  scroll-padding-bottom: 92px;
}

.bk-chat-message-card {
  overflow-wrap: anywhere;
}

.bk-chat-message-card .bk-card-body,
.bk-chat-message-card .bk-card-body p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bk-chat-first-unread,
.bk-chat-pinned-jump-highlight {
  scroll-margin-top: 54px;
}

.bk-chat-first-unread {
  border-color: rgba(56, 189, 248, .44);
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, .68), 0 0 0 1px rgba(56, 189, 248, .1), 0 18px 44px rgba(14, 165, 233, .08);
}

.bk-chat-unread-divider {
  margin: 12px 0 14px;
  color: rgb(125, 211, 252);
}

.bk-chat-unread-divider::before {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, .36));
}

.bk-chat-unread-divider::after {
  background: linear-gradient(90deg, rgba(56, 189, 248, .36), rgba(56, 189, 248, 0));
}

.bk-chat-thread:not(:has(.bk-chat-pinned-strip)) {
  scroll-padding-top: 28px;
}

.bk-chat-thread:not(:has(.bk-chat-pinned-strip)) > .bk-chat-load-older:first-child {
  margin-top: 0;
  margin-bottom: 7px;
}

.bk-chat-thread:not(:has(.bk-chat-pinned-strip)) > .bk-chat-date-divider:nth-child(2) {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .bk-chat-thread {
    scroll-padding-top: 42px;
    scroll-padding-bottom: 88px;
  }

  .bk-chat-first-unread,
  .bk-chat-pinned-jump-highlight {
    scroll-margin-top: 42px;
  }

  .bk-chat-unread-divider {
    margin: 10px 0 12px;
    font-size: .68rem;
  }

  .bk-chat-thread:not(:has(.bk-chat-pinned-strip)) {
    scroll-padding-top: 18px;
  }

  .bk-chat-thread:not(:has(.bk-chat-pinned-strip)) > .bk-chat-load-older:first-child {
    margin-bottom: 6px;
  }
}