/*
 * Chatrionix responsive conversation wallpapers.
 * Desktop/mobile and light/dark variants mirror a WhatsApp-style chat canvas.
 */

:root {
  --cf-chat-wallpaper-default: url("../images/chat-bg-light-desktop-hd.webp");
  --cf-chat-wallpaper: var(--cf-chat-wallpaper-user, var(--cf-chat-wallpaper-default));
  --cf-chat-wallpaper-veil: linear-gradient(rgba(239, 255, 249, .24), rgba(232, 250, 244, .32));
  --cf-chat-wallpaper-color: #d5f0e5;
}

html[data-cf-theme="dark"] {
  --cf-chat-wallpaper-default: url("../images/chat-bg-dark-desktop-hd.webp");
  --cf-chat-wallpaper-veil: linear-gradient(rgba(3, 22, 17, .68), rgba(3, 17, 14, .76));
  --cf-chat-wallpaper-color: #071b16;
}

.cf-ui-v2 .cf-message-scroller {
  isolation: isolate;
  background-color: var(--cf-chat-wallpaper-color);
  background-image: var(--cf-chat-wallpaper-veil), var(--cf-chat-wallpaper);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  image-rendering: auto;
}

.cf-ui-v2 .cf-message-list {
  position: relative;
  z-index: 1;
}

/* Keep text and reactions crisp over detailed wallpaper areas. */
.cf-ui-v2 .cf-message__content,
.cf-ui-v2 .cf-date-separator,
.cf-ui-v2 .cf-message__reaction,
.cf-ui-v2 .cf-load-older,
.cf-ui-v2 .cf-scroll-bottom {
  backdrop-filter: blur(9px) saturate(1.04);
  -webkit-backdrop-filter: blur(9px) saturate(1.04);
}

.cf-ui-v2 .cf-message__content {
  background: color-mix(in srgb, var(--cf-surface) 95%, transparent);
  box-shadow: 0 5px 18px rgba(14, 48, 42, .12);
}

.cf-ui-v2 .cf-message.is-mine .cf-message__content {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cf-accent-soft) 94%, var(--cf-surface)),
    color-mix(in srgb, var(--cf-accent-soft) 97%, transparent)
  );
  box-shadow: 0 6px 19px color-mix(in srgb, var(--cf-accent) 13%, transparent);
}

html[data-cf-theme="dark"] .cf-ui-v2 .cf-message__content {
  border-color: color-mix(in srgb, var(--cf-border) 86%, transparent);
  background: color-mix(in srgb, var(--cf-surface) 94%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .24);
}

html[data-cf-theme="dark"] .cf-ui-v2 .cf-message.is-mine .cf-message__content {
  border-color: color-mix(in srgb, var(--cf-accent) 35%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cf-accent-soft) 91%, var(--cf-surface)),
    color-mix(in srgb, var(--cf-accent-soft) 96%, transparent)
  );
}

@media (max-width: 767px) {
  :root {
    --cf-chat-wallpaper-default: url("../images/chat-bg-light-mobile-hd.webp");
    --cf-chat-wallpaper-veil: linear-gradient(rgba(241, 255, 247, .22), rgba(233, 252, 242, .3));
    --cf-chat-wallpaper-color: #ccefd5;
  }

  html[data-cf-theme="dark"] {
    --cf-chat-wallpaper-default: url("../images/chat-bg-dark-mobile-hd.webp");
    --cf-chat-wallpaper-veil: linear-gradient(rgba(2, 18, 14, .44), rgba(2, 15, 12, .57));
    --cf-chat-wallpaper-color: #061a14;
  }

  .cf-ui-v2 .cf-message-scroller {
    background-position: center top;
  }

  .cf-ui-v2 .cf-message__content,
  .cf-ui-v2 .cf-date-separator,
  .cf-ui-v2 .cf-message__reaction {
    backdrop-filter: blur(7px) saturate(1.03);
    -webkit-backdrop-filter: blur(7px) saturate(1.03);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cf-ui-v2 .cf-message__content,
  .cf-ui-v2 .cf-date-separator,
  .cf-ui-v2 .cf-message__reaction,
  .cf-ui-v2 .cf-load-older,
  .cf-ui-v2 .cf-scroll-bottom {
    background-color: var(--cf-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}