/* Real-photo chat background patterns
   Each rule sets .messages background to a real photo (from /assets/bg/) with a darkening overlay
   so message bubbles stay readable. */
.messages {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* Cars — sleek car at night, dark scene */
html[data-bg="cars"]      .messages { background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)), url("/static/assets/bg/cars.jpg") center/cover no-repeat fixed; }
html[data-bg="city"]      .messages { background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.50)), url("/static/assets/bg/city.jpg") center/cover no-repeat fixed; }
html[data-bg="forest"]    .messages { background: linear-gradient(rgba(20,40,20,0.25), rgba(20,40,20,0.45)), url("/static/assets/bg/forest.jpg") center/cover no-repeat fixed; }
html[data-bg="mountains"] .messages { background: linear-gradient(rgba(20,30,50,0.20), rgba(20,30,50,0.45)), url("/static/assets/bg/mountains.jpg") center/cover no-repeat fixed; }
html[data-bg="ocean"]     .messages { background: linear-gradient(rgba(10,30,60,0.20), rgba(10,30,60,0.40)), url("/static/assets/bg/ocean.jpg") center/cover no-repeat fixed; }
html[data-bg="sunset"]    .messages { background: linear-gradient(rgba(40,20,40,0.20), rgba(40,20,40,0.40)), url("/static/assets/bg/sunset.jpg") center/cover no-repeat fixed; }
html[data-bg="flowers"]   .messages { background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.40)), url("/static/assets/bg/flowers.jpg") center/cover no-repeat fixed; }
html[data-bg="night"]     .messages { background: linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.70)), url("/static/assets/bg/night.jpg") center/cover no-repeat fixed; }
html[data-bg="aurora"]    .messages { background: linear-gradient(rgba(0,10,30,0.30), rgba(0,10,30,0.50)), url("/static/assets/bg/aurora.jpg") center/cover no-repeat fixed; }