/* OLONE — фоны диалога + модальное окно выбора */

:root {
  --olone-z-modal-base: 1200;
  --olone-z-modal-settings-nested: 1255;
  --olone-z-modal-stack-top: 1300;
  --olone-z-modal-guest: 5100;
  --olone-z-modal-mobile-all: 30000;
  --olone-z-modal-chat-bg-picker: 40000;
}

/* Top-level layer: выше hub, nested, stack-top, mobile modals (30000), header menus (25000) */
.modal-backdrop--top-layer.modal-backdrop--chat-bg-picker,
.modal-backdrop--chat-bg-picker {
  z-index: var(--olone-z-modal-chat-bg-picker) !important;
  isolation: isolate;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: hidden;
}

.modal-backdrop--top-layer.modal-backdrop--chat-bg-picker.hidden,
.modal-backdrop--chat-bg-picker.hidden {
  display: none !important;
}

.modal-backdrop--chat-bg-picker .modal--chat-bg-picker {
  margin: auto;
  width: min(1120px, calc(100vw - 24px));
  max-height: min(88vh, 760px);
  min-height: 0;
  overflow: hidden;
}

.modal.modal--chat-bg-picker {
  width: min(1120px, calc(100vw - 24px));
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 14px 16px 12px;
}

.modal--chat-bg-picker .modal-header-row {
  flex-shrink: 0;
  margin-bottom: 10px;
}

.chat-bg-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-bg-picker-aside {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 48%, var(--panel));
}

.chat-bg-picker-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 40%, var(--panel));
}

.chat-bg-picker-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--accent, #b968ff) 55%, #8a8a9a) color-mix(in srgb, var(--scrollbar-track, #2a2a34) 85%, transparent);
}

.chat-bg-picker-scroll::-webkit-scrollbar {
  width: 10px;
}

.chat-bg-picker-scroll::-webkit-scrollbar-track {
  margin: 4px 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--scrollbar-track, #2a2a34) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.chat-bg-picker-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--scrollbar-track, #2a2a34) 90%, transparent);
  background: color-mix(in srgb, var(--accent, #b968ff) 65%, #8a8a9a);
}

.chat-bg-picker-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent, #b968ff) 80%, #a0a0b0);
}

.chat-bg-picker-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bg-picker-section__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text) 55%, transparent));
  padding: 2px 4px 6px;
}

.chat-bg-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bg-picker-cell {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.chat-bg-picker-cell:hover {
  background: color-mix(in srgb, var(--accent, #b968ff) 8%, var(--panel));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow) 55%, transparent);
}

.chat-bg-picker-cell:focus-visible {
  outline: 2px solid color-mix(in srgb, #b968ff 65%, transparent);
  outline-offset: 2px;
}

.chat-bg-picker-cell.is-selected {
  border-color: color-mix(in srgb, #b968ff 78%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #b968ff 22%, transparent);
}

.chat-bg-picker-cell.is-previewing {
  border-color: color-mix(in srgb, #4deeea 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #4deeea 20%, transparent);
}

.chat-bg-picker-mobile-bar {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  margin-top: 10px;
}

.chat-bg-picker-mobile-bar.is-visible {
  display: flex;
}

.chat-bg-picker-mobile-bar__hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, color-mix(in srgb, var(--text) 62%, transparent));
  min-width: 0;
}

.chat-bg-picker-preview-wrap {
  position: relative;
  display: block;
  width: 72px;
  flex-shrink: 0;
}

.chat-bg-picker-preview {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.chat-bg-picker-cell__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-bg-picker-cell__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.chat-bg-picker-cell__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  width: 100%;
}

.chat-bg-picker-cell__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

.chat-bg-picker-cell--premium {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ffd56a 7%, var(--panel)) 0%,
    color-mix(in srgb, var(--panel) 72%, transparent) 55%
  );
  border-color: color-mix(in srgb, #ffd56a 28%, var(--border));
}

.chat-bg-picker-cell--seasonal {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #7ee8d8 8%, var(--panel)) 0%,
    color-mix(in srgb, var(--panel) 72%, transparent) 55%
  );
  border-color: color-mix(in srgb, #7ee8d8 26%, var(--border));
}

.chat-bg-picker-cell--limited {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ff9a5c 9%, var(--panel)) 0%,
    color-mix(in srgb, #c878ff 5%, var(--panel)) 40%,
    color-mix(in srgb, var(--panel) 72%, transparent) 70%
  );
  border-color: color-mix(in srgb, #ff9a5c 30%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, #c878ff 14%, transparent);
}

.chat-bg-picker-cell__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, color-mix(in srgb, var(--text) 58%, transparent));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-bg-picker-cell__badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
}

.chat-bg-picker-cell__badge--premium {
  color: color-mix(in srgb, #ffd56a 90%, #fff);
  background: color-mix(in srgb, #ffd56a 18%, transparent);
  border: 1px solid color-mix(in srgb, #ffd56a 35%, transparent);
}

.chat-bg-picker-cell__badge--seasonal {
  color: color-mix(in srgb, #7ee8d8 90%, #fff);
  background: color-mix(in srgb, #7ee8d8 16%, transparent);
  border: 1px solid color-mix(in srgb, #7ee8d8 32%, transparent);
}

.chat-bg-picker-cell__badge--limited {
  color: color-mix(in srgb, #ff9a5c 90%, #fff);
  background: color-mix(in srgb, #ff9a5c 16%, transparent);
  border: 1px solid color-mix(in srgb, #ff9a5c 32%, transparent);
}

.chat-bg-picker-cell__check {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #b968ff 88%, #000);
  color: #fff;
  border: 2px solid color-mix(in srgb, #fff 85%, transparent);
  pointer-events: none;
}

.chat-bg-picker-cell__lock {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel) 88%, #000);
  color: color-mix(in srgb, #ffd56a 75%, var(--text));
  border: 1px solid color-mix(in srgb, #ffd56a 35%, transparent);
  pointer-events: none;
}

.chat-bg-picker-cell.is-premium-locked .chat-bg-picker-preview {
  opacity: 0.82;
}

/* в”Ђв”Ђ Live preview mock chat в”Ђв”Ђ */

.chat-bg-live-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
}

.chat-bg-live-preview__label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text) 55%, transparent));
  margin-bottom: 8px;
}

.chat-bg-live-preview__frame {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent),
    0 10px 28px color-mix(in srgb, var(--shadow) 45%, transparent);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}

.chat-bg-live-preview__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.chat-bg-live-preview__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7ea2ff, #b968ff);
  flex-shrink: 0;
}

.chat-bg-live-preview__peer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-bg-live-preview__peer strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.chat-bg-live-preview__peer span {
  font-size: 11px;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
}

.chat-bg-live-preview__messages {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.chat-bg-live-preview__messages .bubble {
  pointer-events: none;
  max-width: min(92%, 320px);
  font-size: 14px;
}

.chat-bg-live-preview__messages .bubble.out {
  align-self: flex-end;
}

.chat-bg-live-preview__messages .bubble.in {
  align-self: flex-start;
}

.chat-bg-live-preview__messages .bubble-voice {
  min-width: 0;
  width: 100%;
  max-width: 240px;
}

.chat-bg-live-preview__messages .bubble-voice__bar {
  max-width: 3px;
}

.chat-bg-live-preview__messages .reaction-row {
  margin-top: 4px;
}

.chat-bg-live-preview__composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.chat-bg-live-preview__composer-field {
  flex: 1;
  min-height: 34px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
}

.chat-bg-live-preview__caption {
  flex-shrink: 0;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.chat-bg-live-preview__caption-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, color-mix(in srgb, var(--text) 58%, transparent));
  line-height: 1.35;
}

@media (max-width: 920px) {
  .modal-backdrop--chat-bg-picker .modal--chat-bg-picker {
    width: min(100%, calc(100vw - 16px));
    max-height: min(92vh, 900px);
  }

  .modal--chat-bg-picker {
    width: min(100%, calc(100vw - 16px));
    max-height: min(92vh, 900px);
    padding: 12px 12px 10px;
  }

  .chat-bg-picker-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }

  .chat-bg-picker-stage {
    order: -1;
    min-height: 240px;
    max-height: 260px;
  }

  .chat-bg-picker-aside {
    order: 0;
    min-height: 0;
  }

  .chat-bg-picker-cell {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .chat-bg-picker-preview-wrap,
  .chat-bg-picker-preview {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 1366px) and (min-width: 921px) {
  .modal-backdrop--chat-bg-picker .modal--chat-bg-picker,
  .modal--chat-bg-picker {
    width: min(960px, calc(100vw - 24px));
    max-height: min(86vh, 700px);
  }
}

/* ── Pattern surfaces (v3 — tier-balanced, no-repeat compositions) ── */

.messages.olone-chat-bg-surface,
.chat-bg-picker-preview.olone-chat-bg-surface,
.chat-bg-live-preview__messages.olone-chat-bg-surface {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.messages.olone-chat-bg-surface {
  background-attachment: local;
}

.messages.olone-chat-bg-surface[data-chat-bg-type="image"] {
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.messages.olone-chat-bg--system,
.chat-bg-picker-preview.olone-chat-bg--system,
.chat-bg-live-preview__messages.olone-chat-bg--system {
  background-color: var(--bg);
  background-image: none;
}

/* ═══ FREE — мягкие, простые, не отвлекают ═══ */

.messages.olone-chat-bg--minimal_silk,
.chat-bg-picker-preview.olone-chat-bg--minimal_silk,
.chat-bg-live-preview__messages.olone-chat-bg--minimal_silk {
  background-color: #1e1e26;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M900-40c0 120-80 200-200 200s-200-80-200-200' fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='90'/%3E%3Cpath d='M980 40l120 80-120 80' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #2a2a34 0%, #181820 48%, #121218 100%);
  background-size: 100% 100%, cover;
  background-position: 100% 0%, center;
}

.messages.olone-chat-bg--minimal_stardust,
.chat-bg-picker-preview.olone-chat-bg--minimal_stardust,
.chat-bg-live-preview__messages.olone-chat-bg--minimal_stardust {
  background-color: #10141e;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Ccircle cx='980' cy='120' r='2' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='1040' cy='200' r='1.5' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='920' cy='260' r='1.8' fill='%23c8d0ff' fill-opacity='0.3'/%3E%3Ccircle cx='1100' cy='80' r='1.2' fill='%23fff' fill-opacity='0.2'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 85% 12%, rgba(160, 175, 230, 0.12), transparent 42%),
    linear-gradient(180deg, #1a2030 0%, #0a0c14 100%);
  background-size: 100% 100%, cover, cover;
}

.messages.olone-chat-bg--neon_pulse,
.chat-bg-picker-preview.olone-chat-bg--neon_pulse,
.chat-bg-live-preview__messages.olone-chat-bg--neon_pulse {
  background-color: #070a12;
  background-image:
    radial-gradient(ellipse at 88% 78%, rgba(77, 238, 234, 0.16), transparent 46%),
    radial-gradient(ellipse at 92% 82%, rgba(255, 79, 216, 0.1), transparent 38%),
    linear-gradient(165deg, #0e1424 0%, #05070e 100%);
  background-size: cover, cover, cover;
}

.messages.olone-chat-bg--fantasy_glyph,
.chat-bg-picker-preview.olone-chat-bg--fantasy_glyph,
.chat-bg-live-preview__messages.olone-chat-bg--fantasy_glyph {
  background-color: #140f1c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23b090d8' stroke-width='1.6' opacity='0.16' stroke-linecap='round'%3E%3Cpath d='M40 620v90M5 665h70M22 638l36 54M22 692l36-54'/%3E%3Ccircle cx='40' cy='665' r='48' stroke-opacity='0.1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 0% 100%, rgba(140, 90, 200, 0.12), transparent 50%),
    linear-gradient(155deg, #241838 0%, #0c0812 100%);
  background-size: 100% 100%, cover, cover;
  background-position: 0% 100%, center, center;
}

.messages.olone-chat-bg--abstract_flow,
.chat-bg-picker-preview.olone-chat-bg--abstract_flow,
.chat-bg-live-preview__messages.olone-chat-bg--abstract_flow {
  background-color: #0c141c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M0 620 C280 520 520 700 800 600 S1200 640 1200 560 L1200 820 L0 820Z' fill='%2348a0c0' fill-opacity='0.09'/%3E%3Cpath d='M0 680 C300 600 500 740 820 660' fill='none' stroke='%2368b8d8' stroke-opacity='0.12' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #162430 0%, #081018 100%);
  background-size: 100% 100%, cover;
  background-position: center bottom, center;
}

.messages.olone-chat-bg--abstract_dusk,
.chat-bg-picker-preview.olone-chat-bg--abstract_dusk,
.chat-bg-live-preview__messages.olone-chat-bg--abstract_dusk {
  background-color: #1a1020;
  background-image:
    radial-gradient(ellipse at 82% 8%, rgba(255, 170, 100, 0.22), transparent 42%),
    linear-gradient(180deg, #3a2040 0%, #2a1830 22%, #1a1020 48%, #100818 100%);
  background-size: cover, cover;
}

/* ═══ PREMIUM — богаче, детальнее, заметный характер ═══ */

.messages.olone-chat-bg--premium_minimal_luxe,
.chat-bg-picker-preview.olone-chat-bg--premium_minimal_luxe,
.chat-bg-live-preview__messages.olone-chat-bg--premium_minimal_luxe {
  background-color: #120c14;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23e8c878' stroke-width='1.1' opacity='0.32'%3E%3Cpath d='M40 40h140v140H40z'/%3E%3Cpath d='M110 40v140M40 110h140'/%3E%3Cpath d='M1020 60c40 0 72 32 72 72s-32 72-72 72'/%3E%3Cpath d='M80 640l70-70 70 70-70 70z'/%3E%3C/g%3E%3Ccircle cx='180' cy='120' r='3' fill='%23e8c878' fill-opacity='0.5'/%3E%3Ccircle cx='1040' cy='180' r='2.5' fill='%23e8c878' fill-opacity='0.4'/%3E%3Ccircle cx='960' cy='640' r='2' fill='%23e8c878' fill-opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 18% 12%, rgba(232, 200, 120, 0.22), transparent 46%),
    radial-gradient(ellipse at 88% 78%, rgba(200, 120, 160, 0.12), transparent 40%),
    linear-gradient(155deg, #2a1420 0%, #140c14 45%, #08060a 100%);
  background-size: 100% 100%, cover, cover, cover;
}

.messages.olone-chat-bg--premium_neon_storm,
.chat-bg-picker-preview.olone-chat-bg--premium_neon_storm,
.chat-bg-live-preview__messages.olone-chat-bg--premium_neon_storm {
  background-color: #03030c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M520 20 L460 240 h100 L500 420 L720 120 H580 L640 20Z' fill='none' stroke='%23ffe566' stroke-width='4' opacity='0.42'/%3E%3Cg stroke='%2388c8ff' stroke-width='1' opacity='0.14'%3E%3Cpath d='M100 0v800M220 0v800M340 0v800M460 0v800M580 0v800M700 0v800M820 0v800M940 0v800M1060 0v800'/%3E%3C/g%3E%3Ccircle cx='280' cy='620' r='120' fill='%23ff4fd8' fill-opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 48% 18%, rgba(255, 230, 100, 0.2), transparent 44%),
    radial-gradient(ellipse at 20% 80%, rgba(120, 80, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #18102a 0%, #04020a 100%);
  background-size: 100% 100%, cover, cover, cover;
}

.messages.olone-chat-bg--premium_fantasy_dragon,
.chat-bg-picker-preview.olone-chat-bg--premium_fantasy_dragon,
.chat-bg-live-preview__messages.olone-chat-bg--premium_fantasy_dragon {
  background-color: #08040c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M60 420c60-120 200-150 300-60 30-90 150-120 230-45 60 55 75 150 35 225 75 40 105 140 60 235-60 135-225 165-345 90C130 700 20 540 60 420z' fill='none' stroke='%23d070ff' stroke-width='2.2' opacity='0.28'/%3E%3Cpath d='M720 180c45-65 125-80 180-25 40 38 48 100 22 150 48 28 62 95 35 155-42 85-140 105-210 65' fill='none' stroke='%23a050d0' stroke-width='1.8' opacity='0.22'/%3E%3Cpath d='M500 600c20-15 40-15 60 0 20 15 20 40 0 55-20 15-40 15-60 0-20-15-20-40 0-55z' fill='%23ff8040' fill-opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 95%, rgba(200, 60, 255, 0.24), transparent 52%),
    radial-gradient(ellipse at 70% 20%, rgba(255, 120, 60, 0.1), transparent 38%),
    linear-gradient(175deg, #300840 0%, #100418 55%, #06020a 100%);
  background-size: 100% 100%, cover, cover, cover;
}

.messages.olone-chat-bg--premium_abstract_orbit,
.chat-bg-picker-preview.olone-chat-bg--premium_abstract_orbit,
.chat-bg-live-preview__messages.olone-chat-bg--premium_abstract_orbit {
  background-color: #060a12;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%2390b8ff' stroke-width='1.8' opacity='0.26'%3E%3Cellipse cx='780' cy='320' rx='260' ry='72' transform='rotate(-18 780 320)'/%3E%3Cellipse cx='780' cy='320' rx='320' ry='96' transform='rotate(-18 780 320)' stroke-opacity='0.14'/%3E%3Ccircle cx='780' cy='320' r='36' fill='%2390b8ff' fill-opacity='0.16'/%3E%3C/g%3E%3Ccircle cx='200' cy='140' r='2' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='340' cy='90' r='1.5' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='1020' cy='180' r='2' fill='%23fff' fill-opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 65% 35%, rgba(100, 150, 255, 0.2), transparent 48%),
    radial-gradient(ellipse at 15% 70%, rgba(80, 40, 160, 0.14), transparent 42%),
    linear-gradient(180deg, #141c30 0%, #050810 100%);
  background-size: 100% 100%, cover, cover, cover;
}

/* ═══ SEASONAL — тематические иллюстрации ═══ */

.messages.olone-chat-bg--seasonal_frost,
.chat-bg-picker-preview.olone-chat-bg--seasonal_frost,
.chat-bg-live-preview__messages.olone-chat-bg--seasonal_frost {
  background-color: #d0e4f4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%234a7aa8' stroke-width='2' opacity='0.28' stroke-linecap='round'%3E%3Cpath d='M900 200v160M820 280h160M845 225l110 110M845 335l110-110'/%3E%3Cpath d='M900 200l55 95-110 0z' fill='%2388c0e8' fill-opacity='0.12'/%3E%3Ccircle cx='900' cy='280' r='90' stroke-opacity='0.14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 75% 25%, rgba(180, 220, 255, 0.45), transparent 50%),
    linear-gradient(180deg, #f4f8fc 0%, #b8d0e8 100%);
  background-size: 100% 100%, cover, cover;
}

.messages.olone-chat-bg--seasonal_bloom,
.chat-bg-picker-preview.olone-chat-bg--seasonal_bloom,
.chat-bg-live-preview__messages.olone-chat-bg--seasonal_bloom {
  background-color: #f0e0ea;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M0 120 Q200 80 360 140 T720 100' fill='none' stroke='%23885868' stroke-width='3' opacity='0.2'/%3E%3Cpath d='M180 100c0-28 22-50 50-50 14 0 26 6 34 16 8-22 34-34 50-18 16 16 16 38 8 52 18 8 30 28 24 48-8 30-38 42-66 26' fill='%23f0a0c0' fill-opacity='0.22' stroke='%23d07090' stroke-width='1.2'/%3E%3Cpath d='M420 80c0-22 18-40 40-40 11 0 21 5 27 13 6-18 27-27 40-14 13 13 13 31 7 43 14 6 24 22 19 38-6 24-28 34-48 20' fill='%23f8b0c8' fill-opacity='0.18'/%3E%3Ccircle cx='300' cy='220' r='6' fill='%23f0a0c0' fill-opacity='0.35'/%3E%3Ccircle cx='520' cy='160' r='5' fill='%23f8b8d0' fill-opacity='0.3'/%3E%3Ccircle cx='640' cy='280' r='4' fill='%23e890b0' fill-opacity='0.28'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 10%, rgba(255, 180, 200, 0.28), transparent 48%),
    linear-gradient(165deg, #faf0f6 0%, #e8c8d8 100%);
  background-size: 100% 100%, cover, cover;
}

/* ═══ LIMITED — кинематографичные, самые эффектные ═══ */

.messages.olone-chat-bg--limited_aurora,
.chat-bg-picker-preview.olone-chat-bg--limited_aurora,
.chat-bg-live-preview__messages.olone-chat-bg--limited_aurora {
  background-color: #020408;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M0 220 C200 80 400 280 600 140 S1000 200 1200 80 L1200 380 C900 480 650 340 400 460 S0 380 0 500Z' fill='%234deeea' fill-opacity='0.14'/%3E%3Cpath d='M0 320 C240 180 440 380 660 240 S1000 300 1200 180 L1200 480 C880 580 620 440 340 560 S0 480 0 600Z' fill='%2378ffa8' fill-opacity='0.11'/%3E%3Cpath d='M0 420 C220 280 420 480 640 340 S1020 400 1200 280 L1200 580 C860 680 600 540 300 660 S0 580 0 700Z' fill='%23ff6bff' fill-opacity='0.09'/%3E%3Ccircle cx='180' cy='100' r='1.5' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='420' cy='60' r='1.2' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='880' cy='120' r='1.8' fill='%23fff' fill-opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, rgba(77, 238, 234, 0.28), transparent 58%),
    radial-gradient(ellipse at 30% 40%, rgba(120, 255, 168, 0.12), transparent 45%),
    linear-gradient(180deg, #0c1830 0%, #020408 100%);
  background-size: 100% 100%, cover, cover, cover;
}

.messages.olone-chat-bg--limited_eclipse,
.chat-bg-picker-preview.olone-chat-bg--limited_eclipse,
.chat-bg-live-preview__messages.olone-chat-bg--limited_eclipse {
  background-color: #04020a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='cor' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='70%25' stop-color='%23ffe8a0' stop-opacity='0.55'/%3E%3Cstop offset='100%25' stop-color='%23ff9040' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='600' cy='360' r='130' fill='%2304020a'/%3E%3Ccircle cx='630' cy='340' r='105' fill='%2304020a'/%3E%3Ccircle cx='600' cy='360' r='170' fill='none' stroke='url(%23cor)' stroke-width='18'/%3E%3Cg stroke='%23c8a0ff' stroke-opacity='0.16'%3E%3Cpath d='M600 120v60M600 540v60M420 360h60M720 360h60M470 230l42 42M688 488l42 42M470 490l42-42M688 232l42-42'/%3E%3C/g%3E%3Ccircle cx='200' cy='120' r='1.5' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='980' cy='200' r='1.2' fill='%23fff' fill-opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 45%, rgba(255, 200, 120, 0.16), transparent 52%),
    radial-gradient(ellipse at 50% 100%, rgba(140, 80, 220, 0.18), transparent 55%),
    linear-gradient(180deg, #1a1030 0%, #04020a 100%);
  background-size: 100% 100%, cover, cover, cover;
}

[data-theme="light"] .messages.olone-chat-bg--minimal_silk,
[data-theme="light"] .chat-bg-picker-preview.olone-chat-bg--minimal_silk,
[data-theme="light"] .chat-bg-live-preview__messages.olone-chat-bg--minimal_silk {
  background-color: #ececf4;
}

[data-theme="light"] .messages.olone-chat-bg--minimal_stardust,
[data-theme="light"] .chat-bg-picker-preview.olone-chat-bg--minimal_stardust,
[data-theme="light"] .chat-bg-live-preview__messages.olone-chat-bg--minimal_stardust {
  background-color: #e4e6f0;
}

[data-theme="light"] .messages.olone-chat-bg--abstract_dusk,
[data-theme="light"] .chat-bg-picker-preview.olone-chat-bg--abstract_dusk,
[data-theme="light"] .chat-bg-live-preview__messages.olone-chat-bg--abstract_dusk {
  background-color: #f0e0e8;
}

[data-theme="light"] .messages.olone-chat-bg--seasonal_frost,
[data-theme="light"] .chat-bg-picker-preview.olone-chat-bg--seasonal_frost,
[data-theme="light"] .chat-bg-live-preview__messages.olone-chat-bg--seasonal_frost {
  background-color: #f4f8fc;
}

[data-theme="light"] .messages.olone-chat-bg--seasonal_bloom,
[data-theme="light"] .chat-bg-picker-preview.olone-chat-bg--seasonal_bloom,
[data-theme="light"] .chat-bg-live-preview__messages.olone-chat-bg--seasonal_bloom {
  background-color: #faf4f8;
}