/* ═══════════════════════════════════════
   QUILL CHAT — Chat Wallpapers
   Every background here is a plain CSS
   gradient plus a tiny repeating dot
   pattern — no photos, no downloaded
   images, nothing borrowed from anywhere.
   Applied to .messages-area.
═══════════════════════════════════════ */

.wallpaper-default {
  background-color: #F5F3FF;
  background-image:
    radial-gradient(circle, rgba(139,92,246,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

.wallpaper-ocean {
  background: linear-gradient(160deg, #E0F2FE 0%, #BAE6FD 55%, #7DD3FC 100%);
  background-image:
    linear-gradient(160deg, #E0F2FE 0%, #BAE6FD 55%, #7DD3FC 100%),
    radial-gradient(circle, rgba(255,255,255,0.35) 1.5px, transparent 1.5px);
  background-size: cover, 26px 26px;
}

.wallpaper-forest {
  background: linear-gradient(160deg, #ECFDF5 0%, #A7F3D0 100%);
  background-image:
    linear-gradient(160deg, #ECFDF5 0%, #A7F3D0 100%),
    radial-gradient(circle, rgba(6,95,70,0.10) 1.5px, transparent 1.5px);
  background-size: cover, 24px 24px;
}

.wallpaper-midnight {
  background: linear-gradient(160deg, #1A1040 0%, #0F0A28 100%);
  background-image:
    linear-gradient(160deg, #1A1040 0%, #0F0A28 100%),
    radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: cover, 30px 30px;
}

.wallpaper-sunset {
  background: linear-gradient(160deg, #FFF7ED 0%, #FED7AA 55%, #FCA5A5 100%);
  background-image:
    linear-gradient(160deg, #FFF7ED 0%, #FED7AA 55%, #FCA5A5 100%),
    radial-gradient(circle, rgba(194,65,12,0.08) 1.5px, transparent 1.5px);
  background-size: cover, 24px 24px;
}

.wallpaper-ice {
  background: linear-gradient(160deg, #FFFFFF 0%, #ECFEFF 60%, #CFFAFE 100%);
  background-image:
    linear-gradient(160deg, #FFFFFF 0%, #ECFEFF 60%, #CFFAFE 100%),
    radial-gradient(circle, rgba(14,165,233,0.10) 1.5px, transparent 1.5px);
  background-size: cover, 22px 22px;
}

.wallpaper-coffee {
  background: linear-gradient(160deg, #FFFBEB 0%, #FDE68A 45%, #D6B88A 100%);
  background-image:
    linear-gradient(160deg, #FFFBEB 0%, #FDE68A 45%, #D6B88A 100%),
    radial-gradient(circle, rgba(120,53,15,0.08) 1.5px, transparent 1.5px);
  background-size: cover, 24px 24px;
}

.wallpaper-blossom {
  background: linear-gradient(160deg, #FFF1F2 0%, #FBCFE8 100%);
  background-image:
    linear-gradient(160deg, #FFF1F2 0%, #FBCFE8 100%),
    radial-gradient(circle, rgba(190,24,93,0.10) 1.5px, transparent 1.5px);
  background-size: cover, 24px 24px;
}

.wallpaper-galaxy {
  background: linear-gradient(160deg, #0C0A1F 0%, #1E1040 60%, #2D1B69 100%);
  background-image:
    linear-gradient(160deg, #0C0A1F 0%, #1E1040 60%, #2D1B69 100%),
    radial-gradient(circle, rgba(196,181,253,0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: cover, 34px 34px, 18px 18px;
  background-position: 0 0, 0 0, 10px 12px;
}

.wallpaper-plain {
  background: #FAFAFA;
}

/* Dark wallpapers need light bubble text override for the incoming
   bubble so it stays readable */
.wallpaper-midnight .msg-row.in .msg-bubble,
.wallpaper-galaxy .msg-row.in .msg-bubble {
  background: rgba(255,255,255,0.92);
}