/* El diseño 4 conserva el fondo elegido como predeterminado. */
html #messages.messages:not(.has-chat-wallpaper):not([data-chat-wallpaper-preset]) {
  background-color: #0b1020 !important;
  background-image:
    linear-gradient(180deg, #080d1a32, #090c1b42),
    url('/brisa-chat-pattern.svg?wallpaper=travel-doodles-299'),
    radial-gradient(ellipse at 10% 4%, #347bc52c, transparent 45%),
    radial-gradient(ellipse at 92% 96%, #a142bd20, transparent 46%),
    linear-gradient(135deg, #0c1223, #0b0d1b 60%, #111020) !important;
  background-size: auto, 360px 360px, auto, auto, auto !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: center !important;
}

/* Una elección de la cuadrícula tiene prioridad sobre una imagen personal. */
html #messages.messages[data-chat-wallpaper-preset] {
  background-color: #0b1020 !important;
  background-image:
    linear-gradient(180deg, #080d1a32, #090c1b42),
    var(--chat-wallpaper-pattern),
    radial-gradient(ellipse at 10% 4%, #347bc51a, transparent 45%),
    radial-gradient(ellipse at 92% 96%, #a142bd12, transparent 46%),
    linear-gradient(135deg, #0c1223, #0b0d1b 60%, #111020) !important;
  background-size: auto, 360px 360px, auto, auto, auto !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: center !important;
}

.chat-wallpaper-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.chat-wallpaper-choice {
  min-width: 0;
  padding: 6px;
  border: 1px solid #a4caff30;
  border-radius: 13px;
  color: #e8edff;
  background: linear-gradient(140deg, #ffffff0a, #ffffff04);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.chat-wallpaper-choice:hover,
.chat-wallpaper-choice:focus-visible {
  border-color: #83d9ff9c;
  outline: none;
  box-shadow: 0 0 14px #50c7ff20;
}

.chat-wallpaper-choice:active { transform: scale(.985); }

.chat-wallpaper-choice[aria-pressed="true"] {
  border-color: #6edbff;
  background: linear-gradient(135deg, #44b8ff20, #8b64ff1c);
  box-shadow: 0 0 0 1px #6edbff36, 0 0 18px #50c7ff1c, inset 0 1px #ffffff13;
}

.chat-wallpaper-choice-preview {
  display: block;
  height: 58px;
  border: 1px solid #7188b337;
  border-radius: 9px;
  background-color: #0b1020;
  background-image: linear-gradient(#080d1a75, #090c1b75), var(--wallpaper-preview), linear-gradient(135deg, #0c1223, #111020);
  background-size: auto, 130px 130px, auto;
  background-repeat: repeat, repeat, no-repeat;
  background-position: center;
}

.chat-wallpaper-choice-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 3px 1px;
}

.chat-wallpaper-choice-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-wallpaper-choice-copy small { flex: 0 0 auto; color: #91a5c2; font-size: 9px; }
.chat-wallpaper-choice[aria-pressed="true"] .chat-wallpaper-choice-copy small { color: #8de5ff; }

@media (prefers-reduced-motion: reduce) {
  .chat-wallpaper-choice { transition: none; }
}