.chat-messages-container {
  @apply relative bg-[#e5ddd5] dark:bg-[#111827] overflow-y-auto z-0;
}

.chat-messages-container:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/assets/whatsapp-wallpaper-3a8cd6cc.png");
  background-size: fixed;
  background-position: center;
  background-repeat: repeat;
  opacity: 0.07;
  z-index: -1;
}

[data-colour-scheme="dark"] .chat-messages-container:before {
  filter: invert(1);
}


.thread-item {
  @apply p-4 block hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200 max-w-md;
}

.thread-item--active {
  @apply bg-primary-50 dark:bg-gray-700;
}

.chat-message-item-content {
  @apply text-gray-800 dark:text-white overflow-hidden;
  line-break: anywhere;
}

.chat-message-item-content .chat-message-link {
  @apply text-blue-500 dark:text-blue-400;
}

.chat-message-media img {
  @apply h-auto w-full rounded-md;
}

.chat-message-item-message {
  @apply rounded-lg px-3 py-3 lg:max-w-[50%] max-w-[90%] shadow-sm relative;
}

.chat-message-item-direction--inbound {
  @apply justify-start;
}

.chat-message-item-direction--outbound {
  @apply justify-end;

  .chat-message-item-message {
    @apply !bg-lime-100 dark:!text-gray-800;

    .chat-message-item-content {
      @apply dark:!text-gray-800;
    }
  }
}

.drop-preview-nav {
  color: #ffffff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.drop-preview-nav::after {
  font-size: 1.25rem;
}

.drop-preview-thumb {
  @apply w-20 h-20 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden bg-gray-50 dark:bg-gray-800 flex-shrink-0 transition ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

.drop-preview-thumb img {
  @apply w-full h-full object-cover;
}

.drop-preview-thumb--active {
  @apply ring-2 ring-emerald-500;
}

.drop-preview-swiper .swiper-slide {
  display: none;
}

.drop-preview-swiper .swiper-slide.swiper-slide-active {
  display: flex;
}

.drop-preview-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-preview-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.drop-preview-slide--file {
  padding: 1.5rem;
}

.swiper-slide {
  max-height: 500px;
  width: 100%;
}

.thread-icon {
  @apply absolute -bottom-0 -left-2 size-6 rounded-full flex items-center justify-center shadow-sm;
}

.thread-icon--whatsapp {
  @apply bg-whatsapp-green;
}

.thread-icon--sms {
  @apply bg-orange-400;
}