/* Chat backgrounds — separate presets for light and dark themes */

/* Swatches — light */
.bg-tile__swatch--mist.bg-tile__swatch--light { background: linear-gradient(168deg, #f7eee9, #eadde8); }
.bg-tile__swatch--linen.bg-tile__swatch--light { background: linear-gradient(168deg, #f5f0e8, #e8e4dc); }
.bg-tile__swatch--slate.bg-tile__swatch--light { background: linear-gradient(168deg, #e8ecf4, #d4dce8); }
.bg-tile__swatch--sage.bg-tile__swatch--light { background: linear-gradient(168deg, #e8f0e8, #d0e0d4); }
.bg-tile__swatch--pearl.bg-tile__swatch--light { background: linear-gradient(168deg, #f0e8ff, #dce8ff); }
.bg-tile__swatch--paper.bg-tile__swatch--light { background: linear-gradient(168deg, #faf8f4, #efe9df); }

/* Swatches — dark */
.bg-tile__swatch--dusk.bg-tile__swatch--dark { background: linear-gradient(168deg, #2a2438, #1a1418); }
.bg-tile__swatch--coal.bg-tile__swatch--dark { background: linear-gradient(168deg, #1c1c1e, #0f0f10); }
.bg-tile__swatch--ocean.bg-tile__swatch--dark { background: linear-gradient(168deg, #142238, #0a1628); }
.bg-tile__swatch--forest.bg-tile__swatch--dark { background: linear-gradient(168deg, #142418, #0a1810); }
.bg-tile__swatch--wine.bg-tile__swatch--dark { background: linear-gradient(168deg, #2a1420, #180a10); }
.bg-tile__swatch--graphite.bg-tile__swatch--dark { background: linear-gradient(168deg, #242830, #141820); }

/* Light theme chat area */
html[data-vy-chatbg-light="mist"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="mist"] .messages--chatbg {
  background: linear-gradient(168deg, #f7eee9 0%, #f0e4e8 48%, #eadde8 100%);
}
html[data-vy-chatbg-light="linen"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="linen"] .messages--chatbg {
  background: linear-gradient(168deg, #f8f4ee, #ebe6de);
}
html[data-vy-chatbg-light="slate"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="slate"] .messages--chatbg {
  background: linear-gradient(168deg, #eef2f8, #dde4ee);
}
html[data-vy-chatbg-light="sage"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="sage"] .messages--chatbg {
  background: linear-gradient(168deg, #ecf4ec, #d8e8dc);
}
html[data-vy-chatbg-light="pearl"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="pearl"] .messages--chatbg {
  background: linear-gradient(168deg, #f2ecff, #dce8ff);
}
html[data-vy-chatbg-light="paper"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="paper"] .messages--chatbg {
  background: linear-gradient(168deg, #faf8f4, #efe9df);
}

/* Dark theme chat area */
html[data-vy-chatbg-dark="dusk"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="dusk"] .messages--chatbg {
  background: linear-gradient(168deg, #2a2438, #18141c);
}
html[data-vy-chatbg-dark="coal"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="coal"] .messages--chatbg {
  background: linear-gradient(168deg, #1c1c1e, #0f0f10);
}
html[data-vy-chatbg-dark="ocean"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="ocean"] .messages--chatbg {
  background: linear-gradient(168deg, #142238, #0a1628);
}
html[data-vy-chatbg-dark="forest"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="forest"] .messages--chatbg {
  background: linear-gradient(168deg, #142418, #0a1810);
}
html[data-vy-chatbg-dark="wine"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="wine"] .messages--chatbg {
  background: linear-gradient(168deg, #2a1420, #180a10);
}
html[data-vy-chatbg-dark="graphite"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="graphite"] .messages--chatbg {
  background: linear-gradient(168deg, #242830, #141820);
}

html[data-theme="dark"] .bg-tile,
html[data-theme="dark"] .bg-tile--compact {
  background: var(--surface-2);
  border-color: var(--border);
}

html[data-theme="dark"] .bg-tile__swatch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Custom photo: paint on the thread panel (not the scroller) so Safari
 * actually shows cover + overlay, and the photo stays put while messages scroll. */
.panel--thread.has-custom-bg {
  background-color: var(--surface-2);
  background-image: var(--vy-chatbg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.panel--thread.has-custom-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.46) 0%,
    rgba(241, 245, 249, 0.52) 50%,
    rgba(248, 250, 252, 0.5) 100%
  );
}

html[data-theme="dark"] .panel--thread.has-custom-bg::before {
  background: linear-gradient(
    180deg,
    rgba(8, 12, 20, 0.52) 0%,
    rgba(15, 23, 42, 0.6) 50%,
    rgba(8, 12, 20, 0.56) 100%
  );
}

.panel--thread.has-custom-bg > * {
  position: relative;
  z-index: 1;
}

.messages--chatbg.has-custom-bg {
  background-color: transparent;
  background-image: none;
}

.messages--chatbg.has-custom-bg > .msg {
  position: relative;
  z-index: 1;
}

.bg-tile__swatch--custom {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
}

.bg-tile__custom-icon {
  display: grid;
  place-items: center;
  line-height: 0;
  color: var(--accent);
  opacity: 0.9;
}

.bg-tile__custom-icon svg {
  display: block;
}

.bg-tile__swatch--custom-photo {
  background-size: cover;
  background-position: center;
}

.chatbg-preview__scene--custom {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
}

.chatbg-preview__scene--photo {
  background-size: cover;
  background-position: center;
}

.chatbg-preview__plus {
  display: grid;
  place-items: center;
  line-height: 0;
  color: var(--accent);
}

.chatbg-preview__plus svg {
  display: block;
}