/* Layout shell */
.shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--color-bg);
}
.shell-list-col {
  display: flex;
  width: 100%;
  flex-direction: column-reverse;
}
.shell-main-col {
  display: none;
  min-width: 0;
  flex: 1;
}
@media (min-width: 768px) {
  .shell-list-col {
    width: auto;
    flex-direction: row;
  }
  .shell-main-col {
    display: flex;
  }
}
.shell.chat-open .shell-list-col {
  display: none;
}
.shell.chat-open .shell-main-col {
  display: flex;
}
@media (min-width: 768px) {
  .shell.chat-open .shell-list-col {
    display: flex;
  }
}

/* Nav rail — a bottom tab bar on phone widths (thumb reach, native mobile
   pattern), the classic left rail from 768px up where there's room for it. */
.nav-rail {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 6px 4px;
}
.nav-rail-account {
  margin-bottom: 0;
}
.rail-btn {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--color-muted);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.rail-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.rail-btn.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.nav-rail-spacer {
  display: none;
}
@media (min-width: 768px) {
  .nav-rail {
    width: 64px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    border-top: none;
    border-right: 1px solid var(--color-border);
    padding: 16px 0;
  }
  .nav-rail-account {
    margin-bottom: 8px;
  }
  .nav-rail-spacer {
    display: block;
    flex: 1;
  }
}

/* Avatar */
.avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  user-select: none;
  display: block;
}
.avatar-fallback {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 500;
  user-select: none;
}
.avatar-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Chat list pane */
.chat-list-pane {
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .chat-list-pane {
    width: 340px;
    flex-shrink: 0;
  }
}
.chat-list-inner {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

/* Stories */
.stories-bar {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 10px 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}
.stories-bar:empty {
  display: none;
}
.story-item {
  display: flex;
  flex-shrink: 0;
  width: 68px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 2px 0;
}
.story-avatar-ring {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  border: 2px solid transparent;
}
.story-avatar-ring.unseen {
  border-color: var(--color-accent);
}
.story-avatar-ring.seen {
  border-color: var(--color-border);
}
.story-add-badge {
  position: absolute;
  top: 38px;
  left: 38px;
  display: flex;
  height: 18px;
  width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--color-surface);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.story-item-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-muted);
}

/* Story viewer */
.story-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: #000;
}
.story-progress-row {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 8px 8px 0;
}
.story-progress-bar {
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fff;
}
.story-progress-fill.done {
  width: 100%;
}
.story-progress-fill.active {
  width: 100%;
  transition: width 5s linear;
}
.story-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
}
.story-header-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.story-header-btn {
  display: flex;
  padding: 6px;
  border-radius: 999px;
  color: #fff;
}
.story-header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.story-media {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #000;
}
.story-tap-zones {
  position: absolute;
  inset: 0;
  display: flex;
  top: 44px;
}
.story-tap-zone {
  flex: 1;
  height: 100%;
}
.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 8px;
}
.chat-search-input-wrap {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.chat-new-channel-btn {
  display: flex;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 999px;
  color: var(--color-muted);
}
.chat-new-channel-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.chat-search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-muted);
  pointer-events: none;
  display: flex;
}
.chat-search-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 8px 12px 8px 34px;
  font-size: 14px;
  color: var(--color-text);
}
.chat-search-input:focus {
  outline: 2px solid var(--color-accent);
}
.chat-tabs-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 12px 8px;
}
.chat-tab {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface-alt);
  color: var(--color-muted);
}
.chat-tab:hover {
  color: var(--color-text);
}
.chat-tab.active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.chat-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}
.empty-hint {
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
}
.list-section-label {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}
.search-user-row,
.search-message-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-align: left;
}
.search-user-row:hover,
.search-message-row:hover {
  background: var(--color-surface-alt);
}
.search-user-name {
  font-weight: 500;
}
.search-user-username {
  color: var(--color-muted);
  font-size: 14px;
}

/* Chat list item */
.chat-list-item-wrap {
  position: relative;
  padding: 0 8px;
}
.chat-list-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.1s;
}
.chat-list-item:hover {
  background: var(--color-surface-alt);
}
/* Telegram's own selected-row treatment: a solid accent fill rather than a
   soft tint, with every child (title/preview/time/badges) flipped to the
   accent's contrast color so it stays readable on top of it. */
.chat-list-item.active {
  background: var(--color-accent);
}
.chat-list-item.active .chat-list-item-title,
.chat-list-item.active .chat-list-item-preview,
.chat-list-item.active .chat-list-item-time,
.chat-list-item.active .chat-list-item-badges {
  color: var(--color-accent-contrast);
}
.chat-list-item.active .unread-badge {
  background: var(--color-accent-contrast);
  color: var(--color-accent);
}
.chat-list-item-body {
  min-width: 0;
  flex: 1;
}
.chat-list-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-list-item-row + .chat-list-item-row {
  margin-top: 2px;
}
.chat-list-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.chat-list-item-time {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
}
.chat-list-item-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-muted);
  flex: 1;
  min-width: 0;
}
.chat-list-item-preview.draft {
  color: var(--color-danger);
}
.chat-list-item-badges {
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  color: var(--color-muted);
}
.unread-badge {
  display: flex;
  height: 18px;
  min-width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-accent-contrast);
}
/* Someone @mentioned you — shown even when the chat is otherwise quiet
   (e.g. a muted group), same idea as Telegram's own unread-mention pill,
   distinct from the plain numeric .unread-badge above. */
.mention-badge {
  display: flex;
  height: 18px;
  min-width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-danger);
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: white;
}

/* Dropdown menu */
.dropdown-menu {
  position: fixed;
  z-index: 50;
  min-width: 200px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-align: left;
  font-size: 14px;
}
.dropdown-item:hover {
  background: var(--color-surface-alt);
}
.dropdown-item.danger {
  color: var(--color-danger);
}
.dropdown-icon {
  display: flex;
}
.dropdown-heading {
  padding: 4px 14px 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}
.dropdown-separator {
  margin: 4px 0;
  border-top: 1px solid var(--color-border);
}

/* Chat view */
.chat-view {
  display: flex;
  height: 100%;
  min-width: 0;
  flex: 1;
}
.chat-main-col {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 10px 12px;
}
.chat-header-back {
  display: flex;
  padding: 6px;
  border-radius: 999px;
  color: var(--color-muted);
}
@media (min-width: 768px) {
  .chat-header-back {
    display: none;
  }
}
.chat-header-info-btn {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.chat-header-titles {
  min-width: 0;
}
.chat-header-title {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.chat-header-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-muted);
}
.icon-btn {
  display: flex;
  padding: 8px;
  border-radius: 999px;
  color: var(--color-muted);
}
.icon-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.blocked-icon {
  color: var(--color-danger);
}
.info-toggle {
  display: none;
}
@media (min-width: 768px) {
  .info-toggle {
    display: flex;
  }
}
.pinned-bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-accent-soft);
  padding: 6px 16px;
  text-align: left;
}
.pinned-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.pinned-bar-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-muted);
}

/* Message list */
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
/* Chat wallpapers — Settings → Внешний вид → "Фон чата" (see chatView.js's
   applyWallpaper()). "custom" only sets the class for background-size/
   position; the actual image comes from an inline style since it's per-user
   data, not something a static class can express. */
/* Telegram's own chat background is instantly recognizable: a tiled doodle
   pattern (plane, star, gift, heart...) at low opacity over the plain
   surface color, rather than a flat fill. Baked as a static accent-purple
   tint (data URIs can't read CSS custom properties) so it reads as a subtle
   overlay in both themes instead of needing a separate light/dark asset.
   40 distinct hand-drawn icon motifs (star, heart, plane, gift, cloud, bulb,
   balloon, moon, cactus, envelope, camera, music note, umbrella, sun,
   rainbow, key, bell, cup, anchor, feather, glasses, headphones, controller,
   kite, diamond, crown, flower, leaf, paw, clock, snowflake, lightning, pin,
   ribbon, magnet, telescope, satellite, planet, ghost, sparkle) scattered
   across a 640px tile — generated via scripts/gen-doodle.js. */
.message-list.wallpaper-default {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(51,20) rotate(14) scale(1.03)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(131,23) rotate(-9) scale(1.01)'%3E%3Cpath d='M6 0 L7.5 4.5 L12 6 L7.5 7.5 L6 12 L4.5 7.5 L0 6 L4.5 4.5 Z'/%3E%3C/g%3E%3Cg transform='translate(490,21) rotate(-10) scale(1.14)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(582,16) rotate(-12) scale(0.95)'%3E%3Cg%3E%3Cpath d='M0 14 L28 0 L18 28 L14 16 Z'/%3E%3Cpath d='M14 16 L0 14'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(55,90) rotate(-20) scale(0.94)'%3E%3Cg%3E%3Crect x='0' y='8' width='24' height='18' rx='2'/%3E%3Cpath d='M0 14 H24'/%3E%3Cpath d='M12 8 V26'/%3E%3Cpath d='M12 8 C6 8 6 0 12 3 C18 0 18 8 12 8 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(157,72) rotate(4) scale(0.72)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3Cg transform='translate(467,72) rotate(-13) scale(1.09)'%3E%3Cg%3E%3Cpath d='M8 0 C14 4 14 16 8 22 C2 16 2 4 8 0 Z'/%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Cpath d='M8 22 L4 28 M8 22 L12 28'/%3E%3Cpath d='M2 14 L-4 18 M14 14 L20 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(574,71) rotate(-13) scale(1.12)'%3E%3Cg%3E%3Cellipse cx='10' cy='10' rx='9' ry='11'/%3E%3Cpath d='M10 21 L10 34'/%3E%3Cpath d='M10 21 L7 24 L10 27 L13 24 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(47,160) rotate(-7) scale(0.92)'%3E%3Cpath d='M18 10 A10 10 0 1 1 8 0 A8 8 0 0 0 18 10 Z'/%3E%3C/g%3E%3Cg transform='translate(126,136) rotate(2) scale(1.00)'%3E%3Cg%3E%3Cpath d='M6 26 V6 a4 4 0 0 1 8 0 V26'/%3E%3Cpath d='M6 12 h-5 a3 3 0 0 0 0 8 h5'/%3E%3Cpath d='M14 16 h5 a3 3 0 0 1 0 8 h-5'/%3E%3Cpath d='M2 30 H18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(467,155) rotate(-12) scale(0.85)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(582,161) rotate(0) scale(0.80)'%3E%3Cg%3E%3Crect x='0' y='6' width='24' height='16' rx='2'/%3E%3Cpath d='M8 6 L10 2 H16 L18 6'/%3E%3Ccircle cx='12' cy='14' r='5'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(39,207) rotate(-17) scale(1.03)'%3E%3Cg%3E%3Ccircle cx='3' cy='20' r='3'/%3E%3Ccircle cx='16' cy='17' r='3'/%3E%3Cpath d='M6 20 V4 L19 1 V17'/%3E%3Cpath d='M6 6 L19 3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,220) rotate(17) scale(0.74)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(493,212) rotate(18) scale(0.77)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(557,199) rotate(-6) scale(0.94)'%3E%3Cg%3E%3Cpath d='M0 20 A16 16 0 0 1 32 20'/%3E%3Cpath d='M6 20 A10 10 0 0 1 26 20'/%3E%3Cpath d='M12 20 A4 4 0 0 1 20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(52,291) rotate(-17) scale(1.06)'%3E%3Cg%3E%3Ccircle cx='6' cy='6' r='6'/%3E%3Cpath d='M11 10 L24 23'/%3E%3Cpath d='M18 17 L22 13 M21 20 L25 16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(160,271) rotate(8) scale(0.79)'%3E%3Cg%3E%3Cpath d='M2 18 C2 8 4 2 10 2 C16 2 18 8 18 18 H2 Z'/%3E%3Cpath d='M0 18 H20'/%3E%3Cpath d='M8 22 a2 2 0 0 0 4 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(477,288) rotate(-15) scale(1.20)'%3E%3Cg%3E%3Cpath d='M2 4 H18 L16 22 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 6 h4 a3 3 0 0 1 0 8 h-3'/%3E%3Cpath d='M0 4 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(575,291) rotate(-3) scale(0.99)'%3E%3Cg%3E%3Ccircle cx='10' cy='4' r='3'/%3E%3Cpath d='M10 7 V26'/%3E%3Cpath d='M2 16 a8 8 0 0 0 16 0'/%3E%3Cpath d='M2 12 H18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(41,345) rotate(-7) scale(1.06)'%3E%3Cg%3E%3Cpath d='M18 0 C18 12 8 22 0 24 C4 14 8 6 18 0 Z'/%3E%3Cpath d='M14 4 L2 16'/%3E%3Cpath d='M0 24 L4 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(136,340) rotate(14) scale(1.05)'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='5'/%3E%3Ccircle cx='19' cy='10' r='5'/%3E%3Cpath d='M10 10 H14'/%3E%3Cpath d='M0 8 H-3 M24 8 H27'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(495,354) rotate(-3) scale(0.97)'%3E%3Cg%3E%3Cpath d='M0 16 a10 10 0 0 1 20 0'/%3E%3Crect x='-2' y='14' width='6' height='9' rx='2'/%3E%3Crect x='16' y='14' width='6' height='9' rx='2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(565,329) rotate(8) scale(0.86)'%3E%3Cg%3E%3Crect x='0' y='6' width='26' height='14' rx='7'/%3E%3Cpath d='M6 13 H10 M8 11 V15'/%3E%3Ccircle cx='18' cy='11' r='1.6'/%3E%3Ccircle cx='21' cy='14' r='1.6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(59,419) rotate(-16) scale(0.94)'%3E%3Cg%3E%3Cpath d='M10 0 L20 10 L10 26 L0 10 Z'/%3E%3Cpath d='M0 10 H20'/%3E%3Cpath d='M10 0 V26'/%3E%3Cpath d='M10 26 L6 32 M10 26 L14 34'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(156,394) rotate(19) scale(0.79)'%3E%3Cpath d='M0 8 L6 0 H18 L24 8 L12 24 Z M0 8 H24 M6 0 L12 8 L18 0'/%3E%3C/g%3E%3Cg transform='translate(484,412) rotate(-11) scale(0.91)'%3E%3Cpath d='M0 22 L2 6 L8 14 L12 2 L16 14 L22 6 L24 22 Z'/%3E%3C/g%3E%3Cg transform='translate(559,411) rotate(-7) scale(0.80)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='10' cy='2' r='3.5'/%3E%3Ccircle cx='18' cy='10' r='3.5'/%3E%3Ccircle cx='10' cy='18' r='3.5'/%3E%3Ccircle cx='2' cy='10' r='3.5'/%3E%3Cpath d='M10 21 V30'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(53,482) rotate(-7) scale(1.10)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(139,458) rotate(15) scale(0.88)'%3E%3Cg%3E%3Ccircle cx='10' cy='16' r='6'/%3E%3Ccircle cx='1' cy='7' r='2.6'/%3E%3Ccircle cx='8' cy='2' r='2.6'/%3E%3Ccircle cx='15' cy='2' r='2.6'/%3E%3Ccircle cx='20' cy='8' r='2.6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,478) rotate(5) scale(1.14)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 4 V10 L15 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(588,461) rotate(4) scale(0.94)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(35,520) rotate(8) scale(1.05)'%3E%3Cpath d='M12 0 L2 14 H9 L6 24 L18 8 H11 Z'/%3E%3C/g%3E%3Cg transform='translate(136,527) rotate(-7) scale(0.71)'%3E%3Cg%3E%3Cpath d='M10 0 A8 8 0 0 1 18 8 C18 15 10 24 10 24 C10 24 2 15 2 8 A8 8 0 0 1 10 0 Z'/%3E%3Ccircle cx='10' cy='8' r='3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(466,550) rotate(3) scale(1.19)'%3E%3Cg%3E%3Cpath d='M10 0 L18 6 L10 12 L2 6 Z'/%3E%3Cpath d='M6 9 L2 22 L10 18 L18 22 L14 9'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(559,523) rotate(2) scale(0.85)'%3E%3Cg%3E%3Cpath d='M2 0 V12 a8 8 0 0 0 16 0 V0'/%3E%3Cpath d='M2 0 H8 M12 0 H18'/%3E%3Cpath d='M2 5 H8 M12 5 H18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(44,596) rotate(-3) scale(1.04)'%3E%3Cg%3E%3Cpath d='M0 10 L20 2 L23 9 L3 17 Z'/%3E%3Cpath d='M3 17 L0 26 M0 22 L6 24'/%3E%3Ccircle cx='20' cy='20' r='4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(140,593) rotate(16) scale(0.86)'%3E%3Cg%3E%3Crect x='6' y='6' width='8' height='8' rx='1' transform='rotate(45 10 10)'/%3E%3Cpath d='M2 2 L6 6 M18 2 L14 6 M10 14 L4 24 M13 17 L18 22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(476,602) rotate(2) scale(0.99)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cellipse cx='10' cy='10' rx='14' ry='4' transform='rotate(-20 10 10)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(562,592) rotate(-8) scale(0.86)'%3E%3Cg%3E%3Cpath d='M0 24 V10 a10 10 0 0 1 20 0 V24 L16 20 L12 24 L8 20 L4 24 Z'/%3E%3Ccircle cx='6' cy='9' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='14' cy='9' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-dots {
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 18px 18px;
}
.message-list.wallpaper-gradient {
  background: linear-gradient(160deg, var(--color-accent-soft), var(--color-bg) 55%, var(--color-surface-alt));
}
.message-list.wallpaper-custom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Themed doodle wallpapers (see scripts/gen-doodle.js) — same tiled
   line-art idea as .wallpaper-default, just with a curated icon set per
   theme instead of the general mix. */
.message-list.wallpaper-forest {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(34,33) rotate(-3) scale(0.94)'%3E%3Cg%3E%3Cpath d='M10 0 L18 12 H14 L20 22 H0 L6 12 H2 Z'/%3E%3Cpath d='M8 22 V28 H12 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(145,58) rotate(3) scale(0.78)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(469,26) rotate(17) scale(1.00)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M6 10 V22 a4 4 0 0 0 8 0 V10'/%3E%3Ccircle cx='6' cy='5' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='13' cy='4' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(560,27) rotate(9) scale(1.14)'%3E%3Cg%3E%3Cpath d='M4 10 a6 6 0 0 1 12 0 C16 18 12 24 10 24 C8 24 4 18 4 10 Z'/%3E%3Cpath d='M2 10 C2 4 6 2 10 2 C14 2 18 4 18 10 H2 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(58,179) rotate(-1) scale(0.84)'%3E%3Cg%3E%3Cellipse cx='10' cy='14' rx='10' ry='11'/%3E%3Ccircle cx='6' cy='11' r='3.4'/%3E%3Ccircle cx='14' cy='11' r='3.4'/%3E%3Ccircle cx='6' cy='11' r='1.3' fill='%238774e1'/%3E%3Ccircle cx='14' cy='11' r='1.3' fill='%238774e1'/%3E%3Cpath d='M10 14 L8 18 H12 Z'/%3E%3Cpath d='M2 4 L6 7 M18 4 L14 7'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(153,157) rotate(-16) scale(0.96)'%3E%3Cg%3E%3Cpath d='M0 24 H20'/%3E%3Cpath d='M4 24 L8 18 M16 24 L12 18 M2 24 L6 20'/%3E%3Cpath d='M10 4 C6 10 6 14 10 18 C14 14 14 10 10 4 Z'/%3E%3Cpath d='M10 10 C8 13 8 15 10 17 C12 15 12 13 10 10 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(489,178) rotate(18) scale(0.87)'%3E%3Cg%3E%3Cpath d='M10 8 a6 6 0 1 1 0 12 a6 6 0 0 1 0 -12 Z'/%3E%3Cpath d='M6 6 C4 2 0 2 -1 -1 M6 6 C7 1 5 -2 3 -4 M14 6 C16 2 20 2 21 -1 M14 6 C13 1 15 -2 17 -4'/%3E%3Ccircle cx='7' cy='12' r='1' fill='%238774e1'/%3E%3Ccircle cx='13' cy='12' r='1' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(555,155) rotate(-8) scale(1.11)'%3E%3Cg%3E%3Ccircle cx='5' cy='14' r='4.5'/%3E%3Ccircle cx='12' cy='10' r='4.5'/%3E%3Ccircle cx='14' cy='17' r='4.5'/%3E%3Cpath d='M10 4 C10 1 12 0 14 0'/%3E%3Cpath d='M10 4 L8 8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(63,299) rotate(10) scale(1.11)'%3E%3Cg%3E%3Cpath d='M10 22 C2 22 0 14 0 8 L6 12 L10 2 L14 12 L20 8 C20 14 18 22 10 22 Z'/%3E%3Ccircle cx='7' cy='12' r='1.2' fill='%238774e1'/%3E%3Ccircle cx='13' cy='12' r='1.2' fill='%238774e1'/%3E%3Cpath d='M8 17 Q10 19 12 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(128,308) rotate(-3) scale(1.08)'%3E%3Cg%3E%3Cpath d='M2 18 C0 10 6 4 12 4 C18 4 20 12 18 18 Z'/%3E%3Cpath d='M4 4 L6 8 M8 1 L9 6 M12 0 L12 6 M16 1 L15 6 M19 4 L17 8'/%3E%3Ccircle cx='15' cy='10' r='1' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(464,282) rotate(16) scale(1.07)'%3E%3Cpath d='M18 10 A10 10 0 1 1 8 0 A8 8 0 0 0 18 10 Z'/%3E%3C/g%3E%3Cg transform='translate(560,292) rotate(13) scale(1.09)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(56,422) rotate(-14) scale(0.98)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3Cg transform='translate(155,448) rotate(17) scale(0.99)'%3E%3Cg%3E%3Crect x='0' y='6' width='24' height='10' rx='5'/%3E%3Cellipse cx='24' cy='11' rx='4' ry='5'/%3E%3Ccircle cx='24' cy='11' r='2' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(489,413) rotate(20) scale(1.03)'%3E%3Cg%3E%3Cpath d='M18 0 C18 12 8 22 0 24 C4 14 8 6 18 0 Z'/%3E%3Cpath d='M14 4 L2 16'/%3E%3Cpath d='M0 24 L4 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(580,442) rotate(8) scale(0.81)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(50,535) rotate(0) scale(1.04)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(130,588) rotate(4) scale(1.17)'%3E%3Cg%3E%3Cpath d='M10 0 L18 12 H14 L20 22 H0 L6 12 H2 Z'/%3E%3Cpath d='M8 22 V28 H12 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(481,591) rotate(19) scale(0.96)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M6 10 V22 a4 4 0 0 0 8 0 V10'/%3E%3Ccircle cx='6' cy='5' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='13' cy='4' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(582,548) rotate(-15) scale(1.10)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-school {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(54,84) rotate(4) scale(1.17)'%3E%3Cg%3E%3Cpath d='M2 22 L0 28 L6 26 L22 10 L18 6 Z'/%3E%3Cpath d='M15 9 L19 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(156,79) rotate(-17) scale(1.06)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='10' rx='1'/%3E%3Cpath d='M4 0 V4 M8 0 V4 M12 0 V4 M16 0 V4 M20 0 V4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(469,83) rotate(12) scale(0.95)'%3E%3Cg%3E%3Cpath d='M10 4 C7 1 2 1 0 2 V22 C2 21 7 21 10 24 C13 21 18 21 20 22 V2 C18 1 13 1 10 4 Z'/%3E%3Cpath d='M10 4 V24'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(567,80) rotate(-19) scale(0.95)'%3E%3Cg%3E%3Cpath d='M10 6 C4 6 2 12 2 16 a6 6 0 0 0 12 0 C18 20 20 16 20 12 C20 8 16 5 12 8 C11 6 10 6 10 6 Z'/%3E%3Cpath d='M11 6 C11 2 14 1 15 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(58,181) rotate(-7) scale(1.14)'%3E%3Cg%3E%3Crect x='1' y='8' width='18' height='16' rx='4'/%3E%3Cpath d='M5 8 V4 a5 5 0 0 1 10 0 V8'/%3E%3Crect x='6' y='12' width='8' height='5' rx='1'/%3E%3Cpath d='M1 14 H-2 M19 14 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(152,213) rotate(-1) scale(0.85)'%3E%3Cg%3E%3Ccircle cx='10' cy='12' r='9'/%3E%3Cpath d='M10 7 V12 L14 15'/%3E%3Cpath d='M3 3 L6 6 M17 3 L14 6'/%3E%3Cpath d='M2 21 L5 23 M18 21 L15 23'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(461,187) rotate(-11) scale(0.93)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cellipse cx='10' cy='10' rx='4.5' ry='10'/%3E%3Cpath d='M0 10 H20'/%3E%3Cpath d='M2 5 H18 M2 15 H18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(578,171) rotate(10) scale(1.15)'%3E%3Cg%3E%3Crect x='0' y='0' width='18' height='24' rx='2'/%3E%3Cpath d='M4 6 H14 M4 11 H14 M4 16 H10'/%3E%3Cpath d='M0 4 h2 M0 9 h2 M0 14 h2 M0 19 h2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,334) rotate(14) scale(0.77)'%3E%3Cg%3E%3Cpath d='M11 0 C3 0 -1 6 1 12 C2 15 5 15 6 13 C7 11 10 12 10 15 a5 5 0 0 0 5 5 C21 20 22 12 20 8 C18 3 15 0 11 0 Z'/%3E%3Ccircle cx='5' cy='6' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='10' cy='4' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='15' cy='6' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(125,278) rotate(-4) scale(0.89)'%3E%3Cg%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='3' cy='19' r='3'/%3E%3Cpath d='M5 5 L21 19 M5 19 L21 3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(481,337) rotate(0) scale(0.73)'%3E%3Cg%3E%3Crect x='0' y='0' width='16' height='22' rx='2'/%3E%3Crect x='3' y='3' width='10' height='5' rx='1'/%3E%3Ccircle cx='4.5' cy='13' r='1.4'/%3E%3Ccircle cx='8' cy='13' r='1.4'/%3E%3Ccircle cx='11.5' cy='13' r='1.4'/%3E%3Ccircle cx='4.5' cy='18' r='1.4'/%3E%3Ccircle cx='8' cy='18' r='1.4'/%3E%3Ccircle cx='11.5' cy='18' r='1.4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(589,299) rotate(-9) scale(0.97)'%3E%3Cg%3E%3Cpath d='M2 18 C2 8 4 2 10 2 C16 2 18 8 18 18 H2 Z'/%3E%3Cpath d='M0 18 H20'/%3E%3Cpath d='M8 22 a2 2 0 0 0 4 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(29,435) rotate(-11) scale(0.92)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(133,419) rotate(-18) scale(0.87)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 4 V10 L15 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(477,426) rotate(-10) scale(0.92)'%3E%3Cg%3E%3Cpath d='M8 0 C14 4 14 16 8 22 C2 16 2 4 8 0 Z'/%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Cpath d='M8 22 L4 28 M8 22 L12 28'/%3E%3Cpath d='M2 14 L-4 18 M14 14 L20 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(573,431) rotate(11) scale(0.72)'%3E%3Cg%3E%3Cpath d='M2 22 L0 28 L6 26 L22 10 L18 6 Z'/%3E%3Cpath d='M15 9 L19 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(37,536) rotate(-10) scale(1.13)'%3E%3Cg%3E%3Cpath d='M10 4 C7 1 2 1 0 2 V22 C2 21 7 21 10 24 C13 21 18 21 20 22 V2 C18 1 13 1 10 4 Z'/%3E%3Cpath d='M10 4 V24'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,570) rotate(15) scale(0.98)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='10' rx='1'/%3E%3Cpath d='M4 0 V4 M8 0 V4 M12 0 V4 M16 0 V4 M20 0 V4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(487,593) rotate(13) scale(0.87)'%3E%3Cg%3E%3Cpath d='M10 6 C4 6 2 12 2 16 a6 6 0 0 0 12 0 C18 20 20 16 20 12 C20 8 16 5 12 8 C11 6 10 6 10 6 Z'/%3E%3Cpath d='M11 6 C11 2 14 1 15 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(555,548) rotate(6) scale(0.83)'%3E%3Cg%3E%3Crect x='0' y='0' width='18' height='24' rx='2'/%3E%3Cpath d='M4 6 H14 M4 11 H14 M4 16 H10'/%3E%3Cpath d='M0 4 h2 M0 9 h2 M0 14 h2 M0 19 h2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-university {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(45,60) rotate(-17) scale(1.06)'%3E%3Cg%3E%3Cpath d='M0 8 L16 2 L32 8 L16 14 Z'/%3E%3Cpath d='M8 10 V16 C8 19 24 19 24 16 V10'/%3E%3Cpath d='M28 8 V18'/%3E%3Ccircle cx='28' cy='20' r='1.6' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(159,43) rotate(-11) scale(0.91)'%3E%3Cg%3E%3Crect x='2' y='0' width='16' height='20' rx='1'/%3E%3Cpath d='M0 4 a2 2 0 0 1 0 -4 M20 4 a2 2 0 0 0 0 -4 M0 4 V0 M20 4 V0'/%3E%3Cpath d='M6 6 H14 M6 10 H14 M6 14 H10'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(477,38) rotate(-17) scale(1.20)'%3E%3Cg%3E%3Crect x='0' y='16' width='22' height='5' rx='1'/%3E%3Crect x='2' y='9' width='18' height='5' rx='1' transform='rotate(-2 11 11)'/%3E%3Crect x='1' y='2' width='16' height='5' rx='1' transform='rotate(3 9 4)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(555,58) rotate(-7) scale(1.16)'%3E%3Cg%3E%3Crect x='0' y='0' width='22' height='14' rx='1'/%3E%3Cpath d='M-2 14 H24 L21 18 H1 Z'/%3E%3Cpath d='M4 4 H18 V10 H4 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(45,189) rotate(8) scale(0.95)'%3E%3Cg%3E%3Cpath d='M2 4 H18 L16 22 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 6 h4 a3 3 0 0 1 0 8 h-3'/%3E%3Cpath d='M0 4 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(145,169) rotate(10) scale(0.90)'%3E%3Cg%3E%3Cpath d='M8 0 C14 4 14 16 8 22 C2 16 2 4 8 0 Z'/%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Cpath d='M8 22 L4 28 M8 22 L12 28'/%3E%3Cpath d='M2 14 L-4 18 M14 14 L20 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(494,181) rotate(5) scale(1.11)'%3E%3Cg%3E%3Cellipse cx='10' cy='14' rx='10' ry='11'/%3E%3Ccircle cx='6' cy='11' r='3.4'/%3E%3Ccircle cx='14' cy='11' r='3.4'/%3E%3Ccircle cx='6' cy='11' r='1.3' fill='%238774e1'/%3E%3Ccircle cx='14' cy='11' r='1.3' fill='%238774e1'/%3E%3Cpath d='M10 14 L8 18 H12 Z'/%3E%3Cpath d='M2 4 L6 7 M18 4 L14 7'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(586,165) rotate(-9) scale(1.15)'%3E%3Cg%3E%3Cpath d='M2 22 L0 28 L6 26 L22 10 L18 6 Z'/%3E%3Cpath d='M15 9 L19 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(48,326) rotate(-11) scale(0.77)'%3E%3Cg%3E%3Cpath d='M6 24 H18'/%3E%3Cpath d='M9 24 V18'/%3E%3Crect x='4' y='16' width='10' height='3' rx='1'/%3E%3Cpath d='M9 16 V8 L16 2'/%3E%3Ccircle cx='17' cy='1' r='2.4'/%3E%3Cpath d='M6 12 H14'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(127,298) rotate(9) scale(0.88)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 4 V10 L15 13'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(470,298) rotate(7) scale(1.02)'%3E%3Cg%3E%3Crect x='1' y='8' width='18' height='16' rx='4'/%3E%3Cpath d='M5 8 V4 a5 5 0 0 1 10 0 V8'/%3E%3Crect x='6' y='12' width='8' height='5' rx='1'/%3E%3Cpath d='M1 14 H-2 M19 14 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(567,286) rotate(-9) scale(1.08)'%3E%3Cg%3E%3Cpath d='M0 22 H22'/%3E%3Crect x='2' y='14' width='4' height='8'/%3E%3Crect x='9' y='8' width='4' height='14'/%3E%3Crect x='16' y='4' width='4' height='18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(58,431) rotate(-18) scale(0.71)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(137,465) rotate(16) scale(0.72)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M13 6 L8 12 L7 14 L12 8 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(460,432) rotate(9) scale(1.03)'%3E%3Cg%3E%3Cpath d='M0 8 L16 2 L32 8 L16 14 Z'/%3E%3Cpath d='M8 10 V16 C8 19 24 19 24 16 V10'/%3E%3Cpath d='M28 8 V18'/%3E%3Ccircle cx='28' cy='20' r='1.6' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(566,455) rotate(6) scale(0.93)'%3E%3Cg%3E%3Crect x='0' y='16' width='22' height='5' rx='1'/%3E%3Crect x='2' y='9' width='18' height='5' rx='1' transform='rotate(-2 11 11)'/%3E%3Crect x='1' y='2' width='16' height='5' rx='1' transform='rotate(3 9 4)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(62,585) rotate(-16) scale(0.70)'%3E%3Cg%3E%3Crect x='2' y='0' width='16' height='20' rx='1'/%3E%3Cpath d='M0 4 a2 2 0 0 1 0 -4 M20 4 a2 2 0 0 0 0 -4 M0 4 V0 M20 4 V0'/%3E%3Cpath d='M6 6 H14 M6 10 H14 M6 14 H10'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,577) rotate(5) scale(0.83)'%3E%3Cg%3E%3Crect x='0' y='0' width='22' height='14' rx='1'/%3E%3Cpath d='M-2 14 H24 L21 18 H1 Z'/%3E%3Cpath d='M4 4 H18 V10 H4 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(465,582) rotate(14) scale(1.02)'%3E%3Cg%3E%3Cpath d='M2 4 H18 L16 22 a2 2 0 0 1 -2 2 H8 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 6 h4 a3 3 0 0 1 0 8 h-3'/%3E%3Cpath d='M0 4 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(566,558) rotate(11) scale(0.72)'%3E%3Cg%3E%3Cpath d='M8 0 C14 4 14 16 8 22 C2 16 2 4 8 0 Z'/%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Cpath d='M8 22 L4 28 M8 22 L12 28'/%3E%3Cpath d='M2 14 L-4 18 M14 14 L20 18'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-snow-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(46,111) rotate(-19) scale(1.09)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(128,128) rotate(17) scale(0.70)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(477,64) rotate(13) scale(0.74)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(558,81) rotate(-8) scale(0.81)'%3E%3Cg%3E%3Crect x='2' y='8' width='18' height='8' rx='1'/%3E%3Cpath d='M2 8 C0 8 0 4 4 4 H16 C20 4 20 8 18 8'/%3E%3Cpath d='M0 18 H22'/%3E%3Cpath d='M2 18 L4 22 M20 18 L18 22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(48,359) rotate(5) scale(0.77)'%3E%3Cg%3E%3Cpath d='M10 0 C4 0 2 8 2 14 C2 20 6 24 10 24 C14 24 18 20 18 14 C18 8 16 0 10 0 Z'/%3E%3Cpath d='M4 6 H16 M3 11 H17 M3 16 H17 M5 21 H15'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(150,269) rotate(-15) scale(0.77)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3Cg transform='translate(479,299) rotate(-19) scale(1.03)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(567,341) rotate(12) scale(0.95)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(36,539) rotate(3) scale(0.97)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(134,557) rotate(-4) scale(1.20)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-snow-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(59,64) rotate(13) scale(1.05)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(125,142) rotate(10) scale(0.86)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,128) rotate(7) scale(0.76)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(558,46) rotate(-13) scale(0.74)'%3E%3Cg%3E%3Crect x='2' y='8' width='18' height='8' rx='1'/%3E%3Cpath d='M2 8 C0 8 0 4 4 4 H16 C20 4 20 8 18 8'/%3E%3Cpath d='M0 18 H22'/%3E%3Cpath d='M2 18 L4 22 M20 18 L18 22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,337) rotate(-11) scale(1.12)'%3E%3Cg%3E%3Cpath d='M10 0 C4 0 2 8 2 14 C2 20 6 24 10 24 C14 24 18 20 18 14 C18 8 16 0 10 0 Z'/%3E%3Cpath d='M4 6 H16 M3 11 H17 M3 16 H17 M5 21 H15'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,270) rotate(-12) scale(0.86)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3Cg transform='translate(489,284) rotate(-3) scale(0.74)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(559,300) rotate(6) scale(0.74)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(61,531) rotate(-8) scale(0.84)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(129,543) rotate(1) scale(0.91)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-snow-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(56,80) rotate(-18) scale(0.91)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(133,49) rotate(-13) scale(0.75)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(486,43) rotate(-5) scale(0.90)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(581,145) rotate(13) scale(1.00)'%3E%3Cg%3E%3Crect x='2' y='8' width='18' height='8' rx='1'/%3E%3Cpath d='M2 8 C0 8 0 4 4 4 H16 C20 4 20 8 18 8'/%3E%3Cpath d='M0 18 H22'/%3E%3Cpath d='M2 18 L4 22 M20 18 L18 22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(48,286) rotate(-19) scale(0.77)'%3E%3Cg%3E%3Cpath d='M10 0 C4 0 2 8 2 14 C2 20 6 24 10 24 C14 24 18 20 18 14 C18 8 16 0 10 0 Z'/%3E%3Cpath d='M4 6 H16 M3 11 H17 M3 16 H17 M5 21 H15'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(129,357) rotate(2) scale(1.19)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3Cg transform='translate(475,334) rotate(-19) scale(0.78)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(581,336) rotate(12) scale(1.16)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(47,526) rotate(-3) scale(0.85)'%3E%3Cg%3E%3Cpath d='M0 0 V0 H18'/%3E%3Cpath d='M2 0 L2 14 L0 20 L4 16 Z'/%3E%3Cpath d='M9 0 L9 18 L7 26 L11 20 Z'/%3E%3Cpath d='M16 0 L16 12 L14 18 L18 15 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(154,563) rotate(-14) scale(1.14)'%3E%3Cpath d='M4 20 a8 8 0 0 1 0 -16 a10 10 0 0 1 19 -2 a7 7 0 0 1 -2 18 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-winter-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(60,127) rotate(-7) scale(1.08)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(126,144) rotate(-12) scale(0.78)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,66) rotate(15) scale(0.89)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(586,50) rotate(-13) scale(0.87)'%3E%3Cg%3E%3Cpath d='M2 24 L0 22 L2 4 a2 2 0 0 1 4 0 L4 22 L6 24'/%3E%3Cpath d='M14 24 L12 22 L14 4 a2 2 0 0 1 4 0 L16 22 L18 24'/%3E%3Crect x='0' y='10' width='6' height='4' rx='1'/%3E%3Crect x='12' y='10' width='6' height='4' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(55,302) rotate(15) scale(0.92)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(153,299) rotate(-3) scale(1.14)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(485,318) rotate(16) scale(0.83)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(560,349) rotate(6) scale(0.98)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(31,548) rotate(-20) scale(1.12)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(161,525) rotate(8) scale(0.75)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-winter-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(35,145) rotate(-2) scale(1.05)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(125,94) rotate(20) scale(0.97)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,87) rotate(2) scale(1.04)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(566,105) rotate(-3) scale(0.92)'%3E%3Cg%3E%3Cpath d='M2 24 L0 22 L2 4 a2 2 0 0 1 4 0 L4 22 L6 24'/%3E%3Cpath d='M14 24 L12 22 L14 4 a2 2 0 0 1 4 0 L16 22 L18 24'/%3E%3Crect x='0' y='10' width='6' height='4' rx='1'/%3E%3Crect x='12' y='10' width='6' height='4' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,357) rotate(0) scale(0.73)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(137,325) rotate(7) scale(0.75)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(481,298) rotate(-2) scale(0.77)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(585,291) rotate(6) scale(1.17)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(36,488) rotate(-13) scale(1.20)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(152,543) rotate(-13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-winter-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(31,124) rotate(-3) scale(1.00)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(158,99) rotate(13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(489,133) rotate(5) scale(0.93)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(589,138) rotate(17) scale(1.13)'%3E%3Cg%3E%3Cpath d='M2 24 L0 22 L2 4 a2 2 0 0 1 4 0 L4 22 L6 24'/%3E%3Cpath d='M14 24 L12 22 L14 4 a2 2 0 0 1 4 0 L16 22 L18 24'/%3E%3Crect x='0' y='10' width='6' height='4' rx='1'/%3E%3Crect x='12' y='10' width='6' height='4' rx='1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(57,269) rotate(19) scale(0.92)'%3E%3Cg%3E%3Cpath d='M2 20 V8 a6 6 0 0 1 12 0 V20 Z'/%3E%3Cpath d='M2 12 h-4 a3 3 0 0 0 0 8 h4'/%3E%3Cpath d='M0 20 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,330) rotate(2) scale(0.99)'%3E%3Cg%3E%3Cpath d='M10 0 V20 M0 10 H20 M2.5 2.5 L17.5 17.5 M2.5 17.5 L17.5 2.5'/%3E%3Cpath d='M10 0 L7 3 M10 0 L13 3 M10 20 L7 17 M10 20 L13 17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,305) rotate(-19) scale(0.73)'%3E%3Cpath d='M10 0 L12.5 7 L20 7 L14 11.5 L16 19 L10 14.5 L4 19 L6 11.5 L0 7 L7.5 7 Z'/%3E%3C/g%3E%3Cg transform='translate(562,290) rotate(19) scale(1.06)'%3E%3Cg%3E%3Ccircle cx='10' cy='20' r='8'/%3E%3Ccircle cx='10' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='12' cy='7' r='0.8' fill='%238774e1'/%3E%3Cpath d='M10 9 L14 10'/%3E%3Cpath d='M4 20 H-1 M16 20 H21 M3 24 H-2 M17 24 H22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,487) rotate(-3) scale(1.15)'%3E%3Cg%3E%3Cpath d='M0 4 H20'/%3E%3Cpath d='M0 4 C0 10 4 8 4 14 C4 18 0 18 0 22'/%3E%3Cpath d='M20 4 C20 10 16 8 16 14 C16 18 20 18 20 22'/%3E%3Cpath d='M0 18 H4 M16 18 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(154,476) rotate(-5) scale(1.19)'%3E%3Cg%3E%3Cpath d='M2 10 H18 L16 22 a2 2 0 0 1 -2 2 H6 a2 2 0 0 1 -2 -2 Z'/%3E%3Cpath d='M18 12 h3 a3 3 0 0 1 0 7 h-2'/%3E%3Cpath d='M6 6 C6 3 9 3 8 0 M12 6 C12 3 15 3 14 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-spring-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(50,107) rotate(17) scale(0.91)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(132,103) rotate(4) scale(0.86)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(480,116) rotate(8) scale(0.85)'%3E%3Cpath d='M8 0 C8 8 0 12 0 18 a8 8 0 0 0 16 0 C16 12 8 8 8 0 Z'/%3E%3C/g%3E%3Cg transform='translate(589,67) rotate(2) scale(1.19)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(53,326) rotate(17) scale(0.86)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='10' cy='2' r='3.5'/%3E%3Ccircle cx='18' cy='10' r='3.5'/%3E%3Ccircle cx='10' cy='18' r='3.5'/%3E%3Ccircle cx='2' cy='10' r='3.5'/%3E%3Cpath d='M10 21 V30'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(145,260) rotate(16) scale(0.72)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(484,299) rotate(2) scale(1.09)'%3E%3Cg%3E%3Cpath d='M0 20 A16 16 0 0 1 32 20'/%3E%3Cpath d='M6 20 A10 10 0 0 1 26 20'/%3E%3Cpath d='M12 20 A4 4 0 0 1 20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(568,263) rotate(1) scale(1.02)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,505) rotate(9) scale(1.19)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(162,484) rotate(4) scale(0.93)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-spring-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(42,133) rotate(1) scale(0.95)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(137,92) rotate(-20) scale(0.95)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,56) rotate(3) scale(0.90)'%3E%3Cpath d='M8 0 C8 8 0 12 0 18 a8 8 0 0 0 16 0 C16 12 8 8 8 0 Z'/%3E%3C/g%3E%3Cg transform='translate(574,44) rotate(20) scale(0.73)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(38,290) rotate(15) scale(0.93)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='10' cy='2' r='3.5'/%3E%3Ccircle cx='18' cy='10' r='3.5'/%3E%3Ccircle cx='10' cy='18' r='3.5'/%3E%3Ccircle cx='2' cy='10' r='3.5'/%3E%3Cpath d='M10 21 V30'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(153,341) rotate(-17) scale(0.89)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(464,262) rotate(3) scale(0.87)'%3E%3Cg%3E%3Cpath d='M0 20 A16 16 0 0 1 32 20'/%3E%3Cpath d='M6 20 A10 10 0 0 1 26 20'/%3E%3Cpath d='M12 20 A4 4 0 0 1 20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(585,310) rotate(6) scale(0.96)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(49,575) rotate(0) scale(0.96)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(131,510) rotate(10) scale(0.79)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-spring-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(42,113) rotate(9) scale(1.08)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(148,121) rotate(-18) scale(0.84)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(466,90) rotate(15) scale(0.80)'%3E%3Cpath d='M8 0 C8 8 0 12 0 18 a8 8 0 0 0 16 0 C16 12 8 8 8 0 Z'/%3E%3C/g%3E%3Cg transform='translate(586,47) rotate(-5) scale(0.86)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(64,361) rotate(-6) scale(0.98)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='10' cy='2' r='3.5'/%3E%3Ccircle cx='18' cy='10' r='3.5'/%3E%3Ccircle cx='10' cy='18' r='3.5'/%3E%3Ccircle cx='2' cy='10' r='3.5'/%3E%3Cpath d='M10 21 V30'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(160,356) rotate(17) scale(0.93)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(471,288) rotate(8) scale(1.10)'%3E%3Cg%3E%3Cpath d='M0 20 A16 16 0 0 1 32 20'/%3E%3Cpath d='M6 20 A10 10 0 0 1 26 20'/%3E%3Cpath d='M12 20 A4 4 0 0 1 20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(559,342) rotate(-2) scale(0.94)'%3E%3Cg%3E%3Cpath d='M10 20 V10'/%3E%3Cpath d='M10 10 C4 10 4 2 10 4 C16 2 16 10 10 10 Z'/%3E%3Cpath d='M10 14 C6 14 4 18 2 18 M10 14 C14 14 16 18 18 18'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(64,537) rotate(5) scale(0.85)'%3E%3Cg%3E%3Cpath d='M10 4 V20'/%3E%3Cpath d='M10 8 C4 2 -2 6 2 12 C6 16 10 12 10 8 Z'/%3E%3Cpath d='M10 8 C16 2 22 6 18 12 C14 16 10 12 10 8 Z'/%3E%3Cpath d='M10 4 L8 1 M10 4 L12 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(159,485) rotate(14) scale(0.87)'%3E%3Cg%3E%3Cpath d='M10 24 V12'/%3E%3Cpath d='M10 12 C4 12 2 6 2 2 C8 2 10 8 10 12 Z'/%3E%3Cpath d='M10 8 C16 8 18 3 18 0 C13 0 10 4 10 8 Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-summer-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(60,127) rotate(-7) scale(1.08)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(126,144) rotate(-12) scale(0.78)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,66) rotate(15) scale(0.89)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(586,50) rotate(-13) scale(0.87)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M2 10 A8 8 0 0 1 18 10'/%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='13' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='10' cy='4' r='0.8' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(55,302) rotate(15) scale(0.92)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(153,299) rotate(-3) scale(1.14)'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='5'/%3E%3Ccircle cx='19' cy='10' r='5'/%3E%3Cpath d='M10 10 H14'/%3E%3Cpath d='M0 8 H-3 M24 8 H27'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(485,318) rotate(16) scale(0.83)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(560,349) rotate(6) scale(0.98)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(31,548) rotate(-20) scale(1.12)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(161,525) rotate(8) scale(0.75)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-summer-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(35,145) rotate(-2) scale(1.05)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(125,94) rotate(20) scale(0.97)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,87) rotate(2) scale(1.04)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(566,105) rotate(-3) scale(0.92)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M2 10 A8 8 0 0 1 18 10'/%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='13' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='10' cy='4' r='0.8' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,357) rotate(0) scale(0.73)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(137,325) rotate(7) scale(0.75)'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='5'/%3E%3Ccircle cx='19' cy='10' r='5'/%3E%3Cpath d='M10 10 H14'/%3E%3Cpath d='M0 8 H-3 M24 8 H27'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(481,298) rotate(-2) scale(0.77)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(585,291) rotate(6) scale(1.17)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(36,488) rotate(-13) scale(1.20)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(152,543) rotate(-13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-summer-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(31,124) rotate(-3) scale(1.00)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(158,99) rotate(13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(489,133) rotate(5) scale(0.93)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(589,138) rotate(17) scale(1.13)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M2 10 A8 8 0 0 1 18 10'/%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='13' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='10' cy='4' r='0.8' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(57,269) rotate(19) scale(0.92)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,330) rotate(2) scale(0.99)'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='5'/%3E%3Ccircle cx='19' cy='10' r='5'/%3E%3Cpath d='M10 10 H14'/%3E%3Cpath d='M0 8 H-3 M24 8 H27'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,305) rotate(-19) scale(0.73)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(562,290) rotate(19) scale(1.06)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,487) rotate(-3) scale(1.15)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(154,476) rotate(-5) scale(1.19)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-summer-4 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(55,128) rotate(14) scale(1.04)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(159,116) rotate(-5) scale(1.00)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(488,108) rotate(14) scale(0.87)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(569,72) rotate(-17) scale(1.06)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M2 10 A8 8 0 0 1 18 10'/%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='13' cy='7' r='0.8' fill='%238774e1'/%3E%3Ccircle cx='10' cy='4' r='0.8' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,329) rotate(-5) scale(0.94)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(148,333) rotate(-14) scale(0.98)'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='5'/%3E%3Ccircle cx='19' cy='10' r='5'/%3E%3Cpath d='M10 10 H14'/%3E%3Cpath d='M0 8 H-3 M24 8 H27'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(490,316) rotate(15) scale(1.13)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Cpath d='M10 0 V-4 M10 20 V24 M0 10 H-4 M20 10 H24 M3 3 L0 0 M17 3 L20 0 M3 17 L0 20 M17 17 L20 20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(584,292) rotate(7) scale(1.10)'%3E%3Cg%3E%3Cpath d='M4 8 a6 6 0 0 1 12 0 Z'/%3E%3Cpath d='M4 8 L10 24 L16 8'/%3E%3Cpath d='M4 8 H16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,569) rotate(-17) scale(0.88)'%3E%3Cg%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M10 0 C4 4 4 16 10 20 M10 0 C16 4 16 16 10 20 M0 10 H20'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(157,539) rotate(10) scale(0.75)'%3E%3Cg%3E%3Cpath d='M10 0 C2 4 2 16 10 20 C18 16 18 4 10 0 Z'/%3E%3Cpath d='M10 0 V20 M6 3 V17 M14 3 V17'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-autumn-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(35,145) rotate(-2) scale(1.05)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(125,94) rotate(20) scale(0.97)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,87) rotate(2) scale(1.04)'%3E%3Cg%3E%3Cellipse cx='10' cy='12' rx='8' ry='9'/%3E%3Cpath d='M4 8 L16 8 M3 12 L17 12 M4 16 L16 16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(566,105) rotate(-3) scale(0.92)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,357) rotate(0) scale(0.73)'%3E%3Cg%3E%3Cpath d='M4 10 a6 6 0 0 1 12 0 C16 18 12 24 10 24 C8 24 4 18 4 10 Z'/%3E%3Cpath d='M2 10 C2 4 6 2 10 2 C14 2 18 4 18 10 H2 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(137,325) rotate(7) scale(0.75)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(481,298) rotate(-2) scale(0.77)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M6 10 V22 a4 4 0 0 0 8 0 V10'/%3E%3Ccircle cx='6' cy='5' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='13' cy='4' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(585,291) rotate(6) scale(1.17)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(36,488) rotate(-13) scale(1.20)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(152,543) rotate(-13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-autumn-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(31,124) rotate(-3) scale(1.00)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(158,99) rotate(13) scale(0.90)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(489,133) rotate(5) scale(0.93)'%3E%3Cg%3E%3Cellipse cx='10' cy='12' rx='8' ry='9'/%3E%3Cpath d='M4 8 L16 8 M3 12 L17 12 M4 16 L16 16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(589,138) rotate(17) scale(1.13)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(57,269) rotate(19) scale(0.92)'%3E%3Cg%3E%3Cpath d='M4 10 a6 6 0 0 1 12 0 C16 18 12 24 10 24 C8 24 4 18 4 10 Z'/%3E%3Cpath d='M2 10 C2 4 6 2 10 2 C14 2 18 4 18 10 H2 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(151,330) rotate(2) scale(0.99)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,305) rotate(-19) scale(0.73)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M6 10 V22 a4 4 0 0 0 8 0 V10'/%3E%3Ccircle cx='6' cy='5' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='13' cy='4' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(562,290) rotate(19) scale(1.06)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,487) rotate(-3) scale(1.15)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(154,476) rotate(-5) scale(1.19)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-autumn-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(55,128) rotate(14) scale(1.04)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(159,116) rotate(-5) scale(1.00)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(488,108) rotate(14) scale(0.87)'%3E%3Cg%3E%3Cellipse cx='10' cy='12' rx='8' ry='9'/%3E%3Cpath d='M4 8 L16 8 M3 12 L17 12 M4 16 L16 16'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(569,72) rotate(-17) scale(1.06)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,329) rotate(-5) scale(0.94)'%3E%3Cg%3E%3Cpath d='M4 10 a6 6 0 0 1 12 0 C16 18 12 24 10 24 C8 24 4 18 4 10 Z'/%3E%3Cpath d='M2 10 C2 4 6 2 10 2 C14 2 18 4 18 10 H2 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(148,333) rotate(-14) scale(0.98)'%3E%3Cg%3E%3Cpath d='M0 12 A12 12 0 0 1 24 12 C24 8 18 8 12 12 C6 8 0 8 0 12 Z'/%3E%3Cpath d='M12 12 V26 a3 3 0 0 1 -5 2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(490,316) rotate(15) scale(1.13)'%3E%3Cg%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10 Z'/%3E%3Cpath d='M6 10 V22 a4 4 0 0 0 8 0 V10'/%3E%3Ccircle cx='6' cy='5' r='1.4' fill='%238774e1'/%3E%3Ccircle cx='13' cy='4' r='1.4' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(584,292) rotate(7) scale(1.10)'%3E%3Cg%3E%3Cpath d='M10 0 L12 6 L18 4 L14 9 L20 11 L13 12 L15 18 L10 14 L5 18 L7 12 L0 11 L6 9 L2 4 L8 6 Z'/%3E%3Cpath d='M10 14 V22'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66,569) rotate(-17) scale(0.88)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 6 6 10 6 C14 6 18 8 18 14 C18 19 14 22 10 22 C6 22 2 19 2 14 Z'/%3E%3Cpath d='M6 8 V20 M10 6 V22 M14 8 V20'/%3E%3Cpath d='M10 6 C10 2 12 1 13 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(157,539) rotate(10) scale(0.75)'%3E%3Cg%3E%3Cpath d='M0 20 C0 6 14 0 20 0 C20 12 12 20 0 20 Z'/%3E%3Cpath d='M0 20 L20 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-love-1 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(49,104) rotate(-11) scale(0.85)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(143,140) rotate(-16) scale(1.05)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(494,44) rotate(8) scale(0.92)'%3E%3Cg%3E%3Ccircle cx='10' cy='14' r='6'/%3E%3Cpath d='M10 8 L7 2 H13 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(587,111) rotate(14) scale(0.88)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(32,266) rotate(11) scale(1.15)'%3E%3Cg%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Cpath d='M8 8 L22 22'/%3E%3Cpath d='M22 22 L16 22 M22 22 L22 16'/%3E%3Cpath d='M14 14 L18 10 L20 12 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(154,283) rotate(12) scale(0.87)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 8 4 14 6 C12 4 12 1 14 0 C16 3 16 6 14 8 C18 8 20 12 18 16 C14 14 10 14 8 16 C6 18 3 18 2 14 Z'/%3E%3Ccircle cx='15' cy='6' r='0.9' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(458,275) rotate(8) scale(0.75)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(587,312) rotate(9) scale(0.74)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(57,542) rotate(-19) scale(1.12)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(142,569) rotate(13) scale(1.11)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-love-2 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(64,59) rotate(13) scale(0.76)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(140,101) rotate(-9) scale(0.81)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(484,74) rotate(13) scale(1.04)'%3E%3Cg%3E%3Ccircle cx='10' cy='14' r='6'/%3E%3Cpath d='M10 8 L7 2 H13 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(563,77) rotate(-10) scale(0.76)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(56,327) rotate(1) scale(1.00)'%3E%3Cg%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Cpath d='M8 8 L22 22'/%3E%3Cpath d='M22 22 L16 22 M22 22 L22 16'/%3E%3Cpath d='M14 14 L18 10 L20 12 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(144,278) rotate(1) scale(0.77)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 8 4 14 6 C12 4 12 1 14 0 C16 3 16 6 14 8 C18 8 20 12 18 16 C14 14 10 14 8 16 C6 18 3 18 2 14 Z'/%3E%3Ccircle cx='15' cy='6' r='0.9' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(482,313) rotate(3) scale(0.80)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(557,328) rotate(11) scale(1.05)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(45,530) rotate(13) scale(0.81)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(140,479) rotate(7) scale(1.03)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-love-3 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(49,86) rotate(-12) scale(0.83)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(144,74) rotate(3) scale(1.06)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(462,121) rotate(-9) scale(1.03)'%3E%3Cg%3E%3Ccircle cx='10' cy='14' r='6'/%3E%3Cpath d='M10 8 L7 2 H13 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(588,148) rotate(-8) scale(0.72)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(51,315) rotate(3) scale(0.97)'%3E%3Cg%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Cpath d='M8 8 L22 22'/%3E%3Cpath d='M22 22 L16 22 M22 22 L22 16'/%3E%3Cpath d='M14 14 L18 10 L20 12 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(153,346) rotate(-16) scale(1.01)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 8 4 14 6 C12 4 12 1 14 0 C16 3 16 6 14 8 C18 8 20 12 18 16 C14 14 10 14 8 16 C6 18 3 18 2 14 Z'/%3E%3Ccircle cx='15' cy='6' r='0.9' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(468,293) rotate(-4) scale(0.73)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(588,307) rotate(-19) scale(0.94)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(65,562) rotate(-4) scale(0.84)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(158,479) rotate(1) scale(0.70)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.message-list.wallpaper-love-4 {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238774e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(49,119) rotate(18) scale(1.19)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(161,82) rotate(5) scale(1.10)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(491,70) rotate(10) scale(0.84)'%3E%3Cg%3E%3Ccircle cx='10' cy='14' r='6'/%3E%3Cpath d='M10 8 L7 2 H13 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(587,129) rotate(-12) scale(0.95)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(34,290) rotate(11) scale(0.97)'%3E%3Cg%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Cpath d='M8 8 L22 22'/%3E%3Cpath d='M22 22 L16 22 M22 22 L22 16'/%3E%3Cpath d='M14 14 L18 10 L20 12 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(138,317) rotate(0) scale(0.83)'%3E%3Cg%3E%3Cpath d='M2 14 C2 8 8 4 14 6 C12 4 12 1 14 0 C16 3 16 6 14 8 C18 8 20 12 18 16 C14 14 10 14 8 16 C6 18 3 18 2 14 Z'/%3E%3Ccircle cx='15' cy='6' r='0.9' fill='%238774e1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(493,297) rotate(-3) scale(1.14)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3Cg transform='translate(576,310) rotate(6) scale(1.08)'%3E%3Cg%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='M6 6 a4 4 0 0 1 8 0'/%3E%3Cpath d='M10 13 V24'/%3E%3Cpath d='M10 17 C6 17 4 19 2 19 M10 19 C14 19 16 21 18 21'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(53,513) rotate(12) scale(1.06)'%3E%3Cg%3E%3Crect x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath d='M0 2 L13 12 L26 2'/%3E%3Cpath d='M13 5 C11 2 8 3 8 6 C8 8.5 13 11 13 11 C13 11 18 8.5 18 6 C18 3 15 2 13 5 Z' fill='%238774e1' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(158,475) rotate(15) scale(0.86)'%3E%3Cpath d='M10 20 C-6 8 0 -4 10 4 C20 -4 26 8 10 20 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}
/* Per-chat wallpaper picker (components/wallpaperDialog.js) — same
   WALLPAPER_GROUPS catalog as the Settings page, rendered as a scrollable
   grid of small live swatches (each just the real .wallpaper-<id> tile,
   shrunk down) instead of Settings' plain text chips, since picking a
   background is inherently a visual choice. */
.wallpaper-dialog {
  max-width: 420px;
}
.wallpaper-dialog-body {
  flex: 1;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.wallpaper-picker-group-label {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wallpaper-picker-group-label:first-child {
  margin-top: 0;
}
.wallpaper-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.wallpaper-picker-swatch {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-surface-alt);
}
.wallpaper-picker-swatch.active {
  border-color: var(--color-accent);
}
/* Overrides both .message-list's own layout rules (flex/overflow/padding —
   irrelevant clutter on a tiny swatch) and the matched .wallpaper-<id>
   rule's fixed 320px tile size, so the doodle pattern actually shows up
   scaled to fit instead of one mostly-blank 320px-tile corner. Same
   .message-list.<x> specificity (two classes) as the rules it's overriding,
   so it wins purely on being declared later in the stylesheet — swap the
   class combo without moving this block below the wallpaper rules if that
   ever changes. */
.message-list.wallpaper-picker-swatch-fill {
  display: block;
  overflow: visible;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  /* Doodle tiles are 640px square at low (0.15) opacity — shrinking the
     whole tile down with background-size:cover would render every icon at
     under 2px, invisible. Show a top-left crop at a much less aggressive
     scale instead, landing inside the left icon band (see gen-doodle.js's
     banded layout) so at least one motif is legible in the swatch. */
  background-size: 200px 200px !important;
  background-position: top left;
}
/* The one wallpaper that's a real (non-tiled) photo, not a doodle — wants
   an actual cover-fit crop, not the zoomed-corner treatment above. Three
   classes beats the two-class rule above regardless of !important vs
   !important ties, since CSS resolves those by specificity first. */
.message-list.wallpaper-picker-swatch-fill.wallpaper-custom {
  background-size: cover !important;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Shown only until a custom photo is picked (see settings/index.js and
   wallpaperDialog.js) — without it the "Своё фото" tile is just an empty
   grey box, indistinguishable from a rendering bug. */
.wallpaper-picker-swatch-plus {
  color: var(--color-muted);
}
.wallpaper-dialog-footer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.wallpaper-dialog-footer .modal-cancel {
  flex: 1;
}
/* Scheduled-messages list (components/scheduledMessagesDialog.js) — reuses
   .wallpaper-dialog-body for the same scrollable-list-inside-a-capped-modal
   shape as the wallpaper picker. */
.scheduled-msg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
}
.scheduled-msg-row:last-child {
  border-bottom: none;
}
.scheduled-msg-body {
  min-width: 0;
}
.scheduled-msg-text {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.scheduled-msg-time {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}
.scheduled-msg-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.message-row {
  display: flex;
  gap: 8px;
  padding: 2px 16px;
}
.message-row.mine {
  flex-direction: row-reverse;
}
.message-avatar-slot {
  width: 32px;
  flex-shrink: 0;
}
.message-column {
  display: flex;
  min-width: 0;
  max-width: 70%;
  flex-direction: column;
  align-items: flex-start;
}
.message-column.mine {
  align-items: flex-end;
  margin-left: auto;
}
.sender-name {
  margin-bottom: 2px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-accent);
}
.bubble-wrap {
  position: relative;
  max-width: 100%;
}
.bubble {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  background: var(--color-bubble-in);
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.message-column.mine .bubble {
  border-top-right-radius: 4px;
  background: var(--color-bubble-out);
}
.message-column:not(.mine) .bubble {
  border-top-left-radius: 4px;
}
.message-text {
  display: block;
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.5;
}
/* formatText.js renders each line of a message as its own .block span
   (rather than a literal "\n" text node) so markdown-ish inline tokens
   (**bold**, links, mentions...) can be parsed per line — needs display:
   block itself, or every line runs together with no separation at all. */
.message-text .block {
  display: block;
}
.message-text .quote-line {
  display: block;
  border-left: 2px solid var(--color-accent);
  padding-left: 8px;
  color: var(--color-muted);
}
.inline-code {
  border-radius: 4px;
  background: var(--color-surface-alt);
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.mention {
  font-weight: 500;
  color: var(--color-accent);
}
.mention-link {
  /* Resolved mentions render as a <button> (see formatText.js) so they're
     clickable — strip button chrome back down to plain inline text. */
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mention-link:hover {
  text-decoration: underline;
}
.text-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.spoiler {
  border-radius: 4px;
  padding: 0 4px;
  background: var(--color-text);
  color: transparent;
  cursor: pointer;
}
.spoiler.revealed {
  background: transparent;
  color: inherit;
}
.message-translation {
  display: block;
  margin: 4px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-muted);
  white-space: pre-wrap;
}
.message-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 10.5px;
  color: var(--color-muted);
}
.forwarded-banner {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-muted);
}
.forwarded-banner-name-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-preview-card {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  text-align: left;
  max-width: 280px;
}
.link-preview-image {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  display: block;
}
.link-preview-body {
  padding: 8px 10px;
}
.link-preview-site {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.link-preview-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.link-preview-desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--color-warning);
}
.link-preview-warning.danger {
  color: var(--color-danger);
}
.reply-preview {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  border-left: 2px solid var(--color-accent);
  background: rgba(0, 0, 0, 0.03);
  padding: 4px 8px;
  text-align: left;
  font-size: 12.5px;
  color: var(--color-muted);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-fallback {
  margin-bottom: 4px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 10px 12px;
  color: var(--color-muted);
  font-size: 13px;
}
.bubble-actions {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 2px;
  opacity: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: opacity 0.1s;
  pointer-events: none;
}
.bubble-wrap:hover .bubble-actions {
  opacity: 1;
  pointer-events: auto;
}
.message-row.mine .bubble-actions {
  right: 8px;
}
.message-row:not(.mine) .bubble-actions {
  left: 8px;
}
.bubble-action-btn {
  display: flex;
  padding: 6px;
  border-radius: 999px;
  color: var(--color-muted);
}
.bubble-action-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.emoji-picker {
  position: fixed;
  z-index: 55;
  display: flex;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.emoji-picker button {
  padding: 4px;
  border-radius: 999px;
  font-size: 16px;
}
.emoji-picker button:hover {
  background: var(--color-surface-alt);
}
.reactions-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.message-column.mine .reactions-row {
  justify-content: flex-end;
}
.reaction-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 2px 6px;
  font-size: 12px;
}
.reaction-pill.mine {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.keyboard-rows {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.keyboard-row {
  display: flex;
  gap: 6px;
}
.keyboard-btn {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-accent);
}
.keyboard-btn:hover {
  background: var(--color-surface-alt);
}
.post-comments-link {
  display: block;
  margin: -4px 16px 8px 56px;
  font-size: 12.5px;
  color: var(--color-accent);
}
.post-comments-link:hover {
  text-decoration: underline;
}
.channel-readonly-hint {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.system-message {
  margin: 8px 0;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
}
/* A new-report notification (components/messageBubble.js's ReportMessage) —
   lands in the admin's chat with the Shalter service bot (see
   routes/reports.js), same "not a normal chat bubble" centered-card slot as
   .system-message/.gift-message above, but a bordered card since it carries
   real action buttons rather than just a line of text. */
.report-message {
  margin: 10px auto;
  max-width: 320px;
  border: 1px solid var(--color-danger);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
}
.report-message-title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 14px;
}
.report-message-summary {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  white-space: pre-wrap;
}
.report-message-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.report-action-btn {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.report-action-btn.danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.report-action-btn:disabled {
  opacity: 0.5;
}
.report-message-pending,
.report-message-resolved {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
  font-style: italic;
}
/* "Сегодня"/"Вчера"/16 июля" — one per calendar day, above that day's first
   message (see views/chatView.js's dayLabel/renderList). A translucent pill
   over the wallpaper reads clearly in both themes without needing separate
   light/dark colors, same idea as Telegram's own date dividers. */
.date-divider {
  display: flex;
  justify-content: center;
  margin: 12px 0;
  position: sticky;
  top: 8px;
  z-index: 1;
}
.date-divider span {
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  backdrop-filter: blur(4px);
  color: var(--color-muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
}
/* Delivered gift (see components/messageBubble.js's GiftMessage) — a
   standalone animated card, same "centered, not a normal bubble" slot as
   .system-message above, but a lot more festive. */
.gift-message {
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 220px;
  text-align: center;
}
.gift-message-burst {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  width: 96px;
  margin-bottom: 6px;
}
.gift-message-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  animation: gift-glow-pulse 2.2s ease-in-out infinite;
}
.gift-message-emoji {
  position: relative;
  font-size: 52px;
  line-height: 1;
  animation: gift-emoji-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, gift-emoji-float 2.6s 0.6s ease-in-out infinite;
}
.gift-message-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 14px;
  transform: rotate(var(--angle)) translate(46px) rotate(calc(-1 * var(--angle)));
  animation: gift-sparkle-burst 0.9s var(--delay, 0s) ease-out both;
}
.gift-message-name {
  font-weight: 600;
  margin: 4px 0 0;
  animation: gift-text-in 0.4s 0.3s ease both;
}
.gift-message-duration {
  margin: 0;
  font-size: 12.5px;
  color: #d9822e;
  font-weight: 500;
  animation: gift-text-in 0.4s 0.35s ease both;
}
.gift-message-price {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-muted);
  animation: gift-text-in 0.4s 0.4s ease both;
}
/* Same time/views/read-check row a plain text bubble shows (.message-meta) —
   gifts and stickers have no bubble to anchor it to, so it's centered under
   the card/emoji instead of pinned to a bottom corner. */
.entrance-message-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-muted);
}
@keyframes gift-emoji-in {
  from { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes gift-emoji-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gift-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes gift-sparkle-burst {
  0% { opacity: 0; transform: rotate(var(--angle)) translate(10px) rotate(calc(-1 * var(--angle))) scale(0.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translate(52px) rotate(calc(-1 * var(--angle))) scale(1); }
}
@keyframes gift-text-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-message-glow, .gift-message-emoji, .gift-message-sparkle, .gift-message-name, .gift-message-duration, .gift-message-price {
    animation: none;
  }
}
/* Applied once a gift message's one-shot entrance has already played once
   this session (see messageBubble.js's seenEntranceIds) — keeps the glow
   pulse and emoji float looping (those were already infinite) but drops the
   sparkle burst and text fade-ins, which otherwise replay from scratch every
   time chatView.js's poll rebuilds the message list. */
.gift-message.no-entrance .gift-message-emoji {
  animation: gift-emoji-float 2.6s ease-in-out infinite;
}
.gift-message.no-entrance .gift-message-sparkle {
  animation: none;
  opacity: 0;
}
.gift-message.no-entrance .gift-message-name,
.gift-message.no-entrance .gift-message-duration,
.gift-message.no-entrance .gift-message-price {
  animation: none;
}

/* Stickers (public/js/lib/stickers.js) — a big emoji with its own named
   motion, sent via the composer's sticker picker. Each plays a one-shot
   pop-in (shared) then loops its specific .sticker-<anim> continuously,
   same two-layer approach as .gift-message-emoji above, so the chat log
   stays lively without every sticker moving identically. */
.sticker-message {
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sticker-message-emoji {
  font-size: 84px;
  line-height: 1;
  display: inline-block;
  animation: sticker-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sticker-bounce { animation-name: sticker-pop-in, sticker-bounce; animation-duration: 0.45s, 1.1s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-heartbeat { animation-name: sticker-pop-in, sticker-heartbeat; animation-duration: 0.45s, 1.2s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-shake { animation-name: sticker-pop-in, sticker-shake; animation-duration: 0.45s, 0.7s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-shake-soft { animation-name: sticker-pop-in, sticker-shake-soft; animation-duration: 0.45s, 1.6s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-tada { animation-name: sticker-pop-in, sticker-tada; animation-duration: 0.45s, 1.4s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-wobble { animation-name: sticker-pop-in, sticker-wobble; animation-duration: 0.45s, 1.8s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-swing { animation-name: sticker-pop-in, sticker-swing; animation-duration: 0.45s, 1.6s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-float { animation-name: sticker-pop-in, sticker-float; animation-duration: 0.45s, 2.4s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
.sticker-flicker { animation-name: sticker-pop-in, sticker-flicker; animation-duration: 0.45s, 0.9s; animation-delay: 0s, 0.45s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; }
@keyframes sticker-pop-in {
  from { opacity: 0; transform: scale(0.2) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes sticker-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  50% { transform: translateY(0); }
  65% { transform: translateY(-5px); }
}
@keyframes sticker-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(1); }
  45% { transform: scale(1.12); }
  60% { transform: scale(1); }
}
@keyframes sticker-shake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(-8deg) translateX(-4px); }
  40% { transform: rotate(7deg) translateX(4px); }
  60% { transform: rotate(-6deg) translateX(-3px); }
  80% { transform: rotate(5deg) translateX(3px); }
}
@keyframes sticker-shake-soft {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(2px); }
}
@keyframes sticker-tada {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.94) rotate(-4deg); }
  30%, 50%, 70%, 90% { transform: scale(1.08) rotate(4deg); }
  40%, 60%, 80% { transform: scale(1.08) rotate(-4deg); }
}
@keyframes sticker-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}
@keyframes sticker-swing {
  0%, 100% { transform: rotate(0deg); transform-origin: top center; }
  50% { transform: rotate(12deg); transform-origin: top center; }
}
@keyframes sticker-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes sticker-flicker {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.15); }
}
.composer-emoji-picker.sticker-picker {
  width: 280px;
  grid-template-columns: repeat(6, 1fr);
}
.sticker-picker-item {
  font-size: 26px;
  padding: 4px;
  border-radius: 8px;
}
.sticker-picker-item:hover {
  background: var(--color-surface-alt);
}
/* Same "don't replay the one-shot entrance on every poll rebuild" fix as
   .gift-message.no-entrance above, for stickers — the idle loop keeps going
   (same duration/easing as the second layer in the base .sticker-<anim>
   rules), just starting immediately with no pop-in first. */
.sticker-message.no-entrance .sticker-bounce { animation: sticker-bounce 1.1s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-heartbeat { animation: sticker-heartbeat 1.2s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-shake { animation: sticker-shake 0.7s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-shake-soft { animation: sticker-shake-soft 1.6s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-tada { animation: sticker-tada 1.4s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-wobble { animation: sticker-wobble 1.8s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-swing { animation: sticker-swing 1.6s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-float { animation: sticker-float 2.4s ease-in-out infinite; }
.sticker-message.no-entrance .sticker-flicker { animation: sticker-flicker 0.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sticker-message-emoji, [class*="sticker-"] {
    animation: none !important;
  }
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Composer */
.blocked-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px 16px;
}
.btn-accent {
  border-radius: 8px;
  background: var(--color-accent);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--color-accent-contrast);
}
.composer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.composer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 6px 16px;
}
.composer-banner-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.composer-banner-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent);
}
.composer-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-muted);
}
.composer-banner-close {
  display: flex;
  padding: 4px;
  color: var(--color-muted);
}
.composer-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
}
.composer-icon-btn {
  display: flex;
  padding: 8px;
  border-radius: 999px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.composer-icon-btn:hover {
  background: var(--color-surface-alt);
}
.composer-textarea {
  flex: 1;
  resize: none;
  max-height: 240px;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 9px 14px;
  font-size: 14.5px;
  line-height: 1.4;
}
.composer-textarea:focus {
  outline: 2px solid var(--color-accent);
}
.composer-send-btn {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.composer-attach-slot {
  position: relative;
}
.composer-trailing {
  display: flex;
  align-items: center;
  gap: 2px;
}
.composer-attach-menu {
  position: absolute;
  bottom: 44px;
  left: 0;
  z-index: 10;
  width: 176px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.composer-attach-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
}
.composer-attach-item:hover {
  background: var(--color-surface-alt);
}
.composer-emoji-picker {
  position: absolute;
  bottom: 44px;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 224px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.composer-emoji-picker button {
  border-radius: 8px;
  padding: 6px;
  font-size: 18px;
}
.composer-emoji-picker button:hover {
  background: var(--color-surface-alt);
}
.composer-mention-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-bottom: 6px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.composer-mention-menu.hidden {
  display: none;
}
.composer-mention-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  border-radius: 8px;
  padding: 7px 10px;
  text-align: left;
}
.composer-mention-item:hover,
.composer-mention-item.active {
  background: var(--color-surface-alt);
}
.composer-mention-name {
  font-size: 14px;
  font-weight: 500;
}
.composer-mention-username {
  font-size: 12.5px;
  color: var(--color-muted);
}

/* Recording bar */
.composer-recording-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  margin: 8px 10px;
  padding: 8px 16px;
}
.composer-recording-preview {
  height: 36px;
  width: 36px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.composer-recording-dot {
  height: 10px;
  width: 10px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-danger);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.composer-recording-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--color-muted);
}
.composer-recording-send {
  border-radius: 999px;
  background: var(--color-accent);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--color-accent-contrast);
}
.composer-record-error {
  margin: 8px 16px;
  font-size: 13px;
  color: var(--color-danger);
}

/* Voice message player */
.voice-player {
  display: flex;
  width: 224px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 10px 14px;
  margin-bottom: 4px;
}
.hidden-audio {
  display: none;
}
.voice-play-btn {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.voice-pause-icon {
  display: block;
  height: 10px;
  width: 10px;
  background: currentColor;
}
.voice-progress {
  min-width: 0;
  flex: 1;
}
.voice-bar {
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--color-border);
}
.voice-bar-fill {
  height: 4px;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width 0.1s linear;
}
.voice-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-muted);
}
.voice-speed-btn {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-surface);
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--color-muted);
}

/* Video-note (round video message) player */
.video-note-player {
  position: relative;
  display: block;
  height: 160px;
  width: 160px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-alt);
  margin-bottom: 4px;
}
.video-note-el {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.video-note-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* Real media/file/location/contact/poll attachments */
.image-attachment {
  display: block;
  max-width: 280px;
  max-height: 320px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 4px;
}
.video-attachment {
  display: block;
  max-width: 280px;
  max-height: 320px;
  border-radius: 12px;
  margin-bottom: 4px;
  background: #000;
}
.tap-to-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 220px;
  height: 140px;
  border-radius: 12px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-alt);
  margin-bottom: 4px;
  color: var(--color-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 0 12px;
}
.tap-to-load:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.file-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 240px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 10px 12px;
  margin-bottom: 4px;
  color: var(--color-accent);
}
.file-attachment-info {
  min-width: 0;
}
.file-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text);
  margin: 0;
}
.file-attachment-size {
  font-size: 11px;
  color: var(--color-muted);
  margin: 0;
}
.location-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 220px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 10px 12px;
  margin-bottom: 4px;
  color: var(--color-accent);
}
.location-coords {
  font-size: 11px;
  color: var(--color-muted);
}
.contact-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 220px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 10px 12px;
  margin-bottom: 4px;
}
.contact-attachment-name {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
.poll-attachment {
  width: 260px;
  margin-bottom: 4px;
}
.poll-question {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
}
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-option {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
}
.poll-option.my-vote {
  border-color: var(--color-accent);
}
.poll-option-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-accent-soft);
}
.poll-option-label {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.poll-option-pct {
  color: var(--color-muted);
}
.poll-total {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--color-muted);
}
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.poll-option-input {
  width: 100%;
}
.poll-create-btn {
  width: 100%;
}
.create-chat-avatar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
}
.create-chat-avatar-preview {
  display: flex;
  height: 64px;
  width: 64px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
}
.create-chat-avatar-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.create-chat-avatar-label {
  font-size: 12px;
  color: var(--color-accent);
}

/* Info panel — only ever mounted into the DOM while open (see chatView.js's
   renderInfoPanel), so on phone widths it can just take over the screen as a
   full-screen overlay instead of the fixed 300px side panel desktop has room
   for. Without this it rendered display:none and tapping the chat header
   did nothing visible. */
.info-panel {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  flex-direction: column;
  background: var(--color-surface);
}
@media (min-width: 768px) {
  .info-panel {
    position: static;
    inset: auto;
    z-index: auto;
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
  }
}
.info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
}
.info-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.info-panel-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}
.info-panel-avatar-row.clickable {
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
}
.info-panel-avatar-row.clickable:hover {
  background: var(--color-surface-alt);
}
.info-panel-title {
  font-weight: 500;
  font-size: 16px;
}
.info-panel-row {
  display: block;
  width: 100%;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
.info-panel-row:hover {
  background: var(--color-surface-alt);
}
.info-panel-row.danger {
  color: var(--color-danger);
}
.info-panel-members {
  margin-top: 12px;
}
.info-panel-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
.info-panel-members-header .list-section-label {
  padding-right: 0;
}
.info-panel-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.info-panel-member-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-align: left;
  border-radius: 6px;
}
.info-panel-member-profile-btn:hover {
  background: var(--color-surface-alt);
}
.info-panel-member-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.info-panel-role-tag {
  font-size: 11px;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.info-panel-role-tag.owner {
  color: #d9822e;
}
.info-panel-role-tag.admin {
  color: #1c9bd9;
}
.info-panel-role-tag.restricted {
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.group-level-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #d9822e, #f0b74a);
  color: #fff;
  vertical-align: middle;
}
.group-vote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px;
  margin: 10px 0;
}
.member-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.member-picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-picker-admin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 26px;
  border-radius: 8px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.member-picker-admin-toggle:hover {
  background: var(--color-surface-alt);
}
.member-picker-admin-toggle.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Modal / dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
/* Local passcode lock (lib/passcodeLock.js, components/passcodeLockScreen.js)
   — highest z-index in the app, since it must sit above absolutely
   everything else (including the in-app browser) whenever it's shown. */
.passcode-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}
.passcode-lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, 88vw);
  text-align: center;
}
.passcode-lock-icon {
  font-size: 40px;
  margin-bottom: 4px;
}
.passcode-lock-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.passcode-lock-input {
  text-align: center;
  letter-spacing: 4px;
}

/* In-app browser (components/inAppBrowser.js) — full-screen, above regular
   modals, since it hosts a whole embedded page rather than a small dialog. */
.inapp-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.inapp-browser-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.inapp-browser-host {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.inapp-browser-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  background: var(--color-surface-alt);
  color: var(--color-warning);
  flex-shrink: 0;
}
.inapp-browser-warning.danger {
  color: var(--color-danger);
}
.inapp-browser-frame {
  flex: 1;
  width: 100%;
  border: none;
}
.modal-dialog {
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--color-surface);
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.modal-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

/* Profile panel (components/profileDialog.js) — a right-docked slide-in
   view, same silhouette as Telegram's own profile/channel-info panel,
   rather than a centered modal. Reuses .info-panel-header/.info-panel-body
   for the header/scroll-body treatment so it matches the chat's InfoPanel. */
.profile-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.25);
}
.profile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
  animation: profile-panel-in 0.22s ease both;
}
@keyframes profile-panel-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.profile-panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
/* Thread panel (components/threadPanel.js) — same profile-panel/info-panel
   shell as ProfileDialog/InfoPanel above, just with its own row styling for
   the root message + flat reply list, and a live Composer docked under
   .thread-panel-body (that's why .thread-panel itself needs no extra flex
   rules beyond what .profile-panel already sets — header/body/composer
   stack the same way chatView.js's own header/list/composer do). */
.thread-panel-body {
  align-items: stretch;
  text-align: left;
  gap: 0;
}
.thread-root {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.thread-replies-label {
  margin-bottom: 8px;
}
.thread-reply-row {
  padding: 8px 0;
}
.thread-reply-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.thread-reply-name {
  font-size: 13.5px;
  font-weight: 500;
}
.thread-reply-time {
  font-size: 11.5px;
  color: var(--color-muted);
}
.thread-reply-text {
  margin-left: 34px;
  font-size: 14px;
}
.profile-tabs {
  margin: 20px -16px 0;
  display: flex;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.profile-tab {
  flex: 1;
  padding: 10px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}
.profile-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.profile-tab-content {
  width: 100%;
  padding-top: 12px;
}
.profile-empty-tab {
  padding: 24px 0;
  font-size: 13px;
  color: var(--color-muted);
}
.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.profile-media-grid .image-attachment,
.profile-media-grid .video-attachment {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  max-width: none;
  max-height: none;
  border-radius: 0;
  margin-bottom: 0;
}
.profile-files-list,
.profile-links-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
}
.profile-files-list .file-attachment {
  width: 100%;
}
.profile-link-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-accent);
  word-break: break-all;
}
.profile-link-item:hover {
  background: var(--color-surface-alt);
}
.profile-loading-spinner {
  height: 88px;
  width: 88px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}
.profile-loading-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: qr-login-shimmer 1.3s ease-in-out infinite;
}
.profile-avatar-row {
  margin-bottom: 10px;
}
.profile-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.profile-username {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-accent);
}
.profile-status {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}
.profile-bio {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.profile-field-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
}
.profile-contact-tag {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}
.profile-ad-banner {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.profile-ad-label {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.profile-ad-text {
  margin: 0;
  font-size: 13.5px;
}
.profile-ad-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.profile-ad-gallery .image-attachment,
.profile-ad-gallery .video-attachment {
  display: block;
  width: 120px;
  height: 120px;
  margin-bottom: 0;
  object-fit: cover;
}
.profile-ad-gallery .file-attachment {
  width: 100%;
  margin-bottom: 0;
}
.profile-ad-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
}
.profile-gifts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.profile-gift-chip {
  display: flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-surface-alt);
  font-size: 18px;
}
.profile-actions {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-actions .btn-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.profile-action-btn {
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}
.profile-action-btn:hover {
  background: var(--color-surface-alt);
}
.profile-action-btn.danger {
  color: var(--color-danger);
}

/* Bot code editor */
.bot-code-dialog {
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
}
.bot-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bot-code-editor-slot {
  height: 320px;
  margin: 10px 0;
}
.bot-code-editor-slot .cm-editor {
  height: 100%;
}
.bot-code-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.bot-code-actions .btn-accent {
  width: auto;
  padding: 8px 20px;
}
.bot-code-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.bot-code-test-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.bot-code-test-row .login-input {
  flex: 1;
}
/* .settings-add-account-btn's own width:100% (meant for a full-width button
   standing alone) fights flex:1 on the input next to it in this row — with
   no basis of its own to shrink from, the button's 100% wins the space and
   squeezes the input down to nothing. Give it back an intrinsic width here. */
.bot-code-test-row .settings-add-account-btn {
  width: auto;
  flex: none;
  padding-left: 18px;
  padding-right: 18px;
  white-space: nowrap;
}
.bot-code-output,
.bot-code-logs {
  max-height: 140px;
  overflow-y: auto;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 8px 10px;
}
.bot-code-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bot-log-line {
  margin: 0 0 4px;
  font-size: 13px;
  word-break: break-word;
}
.bot-log-line.danger {
  color: var(--color-danger);
}
.bot-log-time {
  color: var(--color-muted);
  margin-right: 6px;
}
.bot-assist-log {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  padding: 8px 10px;
  margin: 8px 0;
}
.bot-assist-msg {
  max-width: 90%;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.bot-assist-msg p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.bot-assist-msg.user {
  align-self: flex-end;
  background: var(--color-accent-soft);
}
.bot-assist-msg.ai {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.bot-assist-code-actions {
  margin-top: 6px;
}
.bot-code-test-row .bot-assist-input {
  flex: 1;
  min-width: 0;
  resize: none;
}

.forward-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
}
.forward-row:hover {
  background: var(--color-surface-alt);
}
.modal-cancel {
  margin-top: 12px;
  width: 100%;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  color: var(--color-muted);
}
.modal-cancel:hover {
  background: var(--color-surface-alt);
}
.modal-cancel.danger {
  color: var(--color-danger);
}
.choice-dialog-btn {
  display: block;
  width: 100%;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
.choice-dialog-btn:hover {
  background: var(--color-surface-alt);
}
.choice-dialog-btn.danger {
  color: var(--color-danger);
}

/* Login */
.login-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
  background: var(--color-bg);
}
.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: login-orb-float 16s ease-in-out infinite;
}
.login-orb-1 {
  top: -10%;
  left: -8%;
  width: 340px;
  height: 340px;
  background: var(--color-accent);
  animation-delay: 0s;
}
.login-orb-2 {
  bottom: -15%;
  right: -10%;
  width: 380px;
  height: 380px;
  background: #6e56c6;
  animation-delay: -5s;
}
.login-orb-3 {
  top: 40%;
  left: 60%;
  width: 260px;
  height: 260px;
  background: #1c9bd9;
  animation-delay: -10s;
}
@keyframes login-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.08); }
  66% { transform: translate(-20px, 25px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .login-orb { animation: none; }
}
.login-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  animation: login-box-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes login-box-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-header {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo {
  margin: 0 auto 16px;
  display: flex;
  height: 64px;
  width: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-accent), #6e56c6);
  color: var(--color-accent-contrast);
  box-shadow: 0 8px 24px rgba(46, 86, 217, 0.35);
  animation: login-logo-in 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.login-logo .icon {
  transform: rotate(-8deg);
}
@keyframes login-logo-in {
  from { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.login-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.login-brand {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--color-accent), #6e56c6 45%, #1c9bd9 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: login-brand-sheen 5s ease-in-out infinite, login-title-in 0.5s 0.15s ease both;
}
@keyframes login-brand-sheen {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@keyframes login-title-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-subtitle {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-muted);
  animation: login-title-in 0.5s 0.22s ease both;
}
.login-method-switch {
  margin-bottom: 16px;
  display: flex;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 4px;
}
.login-method-btn {
  flex: 1;
  border-radius: 6px;
  padding: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
}
.login-method-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.login-card {
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  animation: login-title-in 0.5s 0.28s ease both;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 12px 16px;
  font-variant-numeric: tabular-nums;
}
.login-input:focus {
  outline: 2px solid var(--color-accent);
}
.login-code-input {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.5em;
}
.login-error {
  font-size: 14px;
  color: var(--color-danger);
  margin: 0;
}
.login-error.center {
  text-align: center;
}
.login-submit {
  width: 100%;
  border-radius: 8px;
  background: var(--color-accent);
  padding: 12px;
  font-weight: 500;
  color: var(--color-accent-contrast);
}
.login-submit:disabled {
  opacity: 0.6;
}
.login-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin: -8px 0 0;
}
.login-link {
  font-size: 14px;
  color: var(--color-accent);
  text-align: center;
}
.login-link.muted {
  color: var(--color-muted);
}
.login-link:disabled {
  color: var(--color-muted);
}
.login-code-field {
  letter-spacing: 0.08em;
}
.login-alt-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.qr-login-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* QR login */
.qr-login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.qr-login-title {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}
.qr-login-code {
  width: 220px;
  height: 220px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.qr-login-code svg {
  width: 100%;
  height: 100%;
  display: block;
}
.qr-login-instructions {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}
.qr-login-instructions.center {
  text-align: center;
}
.qr-profile-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  max-width: 300px;
}
.qr-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qr-profile-header .modal-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
}
.qr-profile-header-spacer {
  width: 36px;
}
.qr-profile-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.qr-profile-avatar {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.qr-profile-dialog .qr-login-code {
  width: 200px;
  height: 200px;
  border: none;
  box-shadow: none;
  padding: 4px;
}
.qr-profile-username {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 0;
  color: #5b4bc4;
}
.qr-profile-dialog .settings-toggle-hint {
  text-align: center;
}
.qr-profile-dialog .btn-accent {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.donation-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0;
}
.donation-code-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.donation-link-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.qr-login-spinner {
  width: 220px;
  height: 220px;
  border-radius: 16px;
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}
.qr-login-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: qr-login-shimmer 1.3s ease-in-out infinite;
}
@keyframes qr-login-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}
.qr-confirm-account {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px 16px;
  text-align: left;
}
.qr-confirm-name {
  font-weight: 600;
  margin: 0;
}
.qr-confirm-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}
.referral-hint {
  color: var(--color-accent);
  font-weight: 500;
}

/* Premium & referrals */
.premium-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 16px;
  margin-bottom: 16px;
}
.premium-status-card.active {
  border-color: #d9822e;
  background: linear-gradient(135deg, rgba(217, 130, 46, 0.12), rgba(110, 86, 198, 0.08));
}
.premium-status-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d9822e, #f0b74a);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  animation: premium-icon-glow 2.6s ease-in-out infinite;
}
.premium-status-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  background-size: 220% 100%;
  animation: premium-icon-shine 3.2s ease-in-out infinite;
}
.premium-status-title {
  font-weight: 600;
  margin: 0;
}
.premium-status-hint {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}
.premium-mini-badge {
  display: inline-flex;
  color: #d9822e;
  filter: drop-shadow(0 0 0 rgba(217, 130, 46, 0));
  animation: premium-badge-pulse 2.4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.developer-mini-badge {
  display: inline-flex;
  color: #1c9bd9;
  filter: drop-shadow(0 0 0 rgba(28, 155, 217, 0));
  animation: developer-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes premium-icon-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 183, 74, 0.5); }
  50% { box-shadow: 0 0 16px rgba(240, 183, 74, 0.65); }
}
@keyframes premium-icon-shine {
  0% { background-position: 140% 0; }
  55%, 100% { background-position: -60% 0; }
}
@keyframes premium-badge-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(217, 130, 46, 0)); }
  50% { transform: scale(1.14) rotate(-4deg); filter: drop-shadow(0 0 4px rgba(240, 183, 74, 0.85)); }
}
@keyframes developer-badge-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(28, 155, 217, 0)); }
  50% { opacity: 0.75; filter: drop-shadow(0 0 5px rgba(28, 155, 217, 0.9)); }
}

/* Decorative orbiting-perks hero on the Premium settings page — a центральная
   corona icon with perk icons circling it, each counter-rotated so the icon
   glyphs themselves stay upright while the ring carrying them spins. */
.premium-orbit {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 4px auto 20px;
}
.premium-orbit-core {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d9822e, #f0b74a);
  color: #fff;
  box-shadow: 0 0 0 6px var(--color-bg, transparent), 0 0 24px rgba(240, 183, 74, 0.55);
  animation: premium-orbit-core-pulse 2.6s ease-in-out infinite;
  z-index: 1;
}
.premium-orbit-ring {
  position: absolute;
  inset: 0;
  animation: premium-orbit-spin 16s linear infinite;
}
.premium-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  transform: rotate(var(--angle)) translate(66px);
}
.premium-orbit-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--orbit-color, #d9822e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: premium-orbit-counter-spin 16s linear infinite;
}
@keyframes premium-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes premium-orbit-counter-spin {
  to { transform: rotate(-360deg); }
}
@keyframes premium-orbit-core-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .premium-status-icon,
  .premium-status-icon::after,
  .premium-mini-badge,
  .developer-mini-badge,
  .premium-orbit-core,
  .premium-orbit-ring,
  .premium-orbit-item-icon,
  .avatar-orbit-ring,
  .avatar-orbit-item-icon {
    animation: none;
  }
}

/* Same orbiting-satellite technique as .premium-orbit, but wrapped directly
   around a Premium/Developer account's avatar (see components/avatar.js) —
   --radius/size come from inline styles so it scales with whatever avatar
   size the call site uses. */
.avatar-orbit-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-orbit-ring {
  position: absolute;
  inset: 0;
  animation: premium-orbit-spin 14s linear infinite;
}
.avatar-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--angle)) translate(var(--radius));
}
.avatar-orbit-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--orbit-color, #d9822e);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: premium-orbit-counter-spin 14s linear infinite;
}
.gifts-section {
  margin-top: 24px;
}
.gifts-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 14px 8px 10px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gift-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.gift-card-emoji {
  font-size: 30px;
  line-height: 1.2;
  display: inline-block;
  animation: gift-card-idle 3.2s ease-in-out infinite;
  animation-delay: var(--gift-delay, 0s);
}
.gift-card:hover .gift-card-emoji {
  animation: gift-card-hover-spin 0.5s ease-in-out;
}
@keyframes gift-card-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-6deg); }
}
@keyframes gift-card-hover-spin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-card-emoji { animation: none; }
}
.gift-card-name {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 500;
}
.gift-card-price {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}
.gift-card-btn {
  margin-top: 6px;
  width: 100%;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 0;
}
.gift-card-btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.gift-card-btn:disabled {
  opacity: 0.6;
}
.referral-card {
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 16px;
  margin: 16px 0;
}
.referral-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.referral-card-header .settings-toggle-title {
  color: var(--color-text);
}
.referral-code-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px 16px;
}
.referral-code-value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.bot-token-value {
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

/* Contacts */
.contacts-view {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.contacts-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 12px 16px;
}
.view-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.btn-accent-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: var(--color-accent);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--color-accent-contrast);
}
.contacts-add-panel {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 12px 16px;
}
.contacts-candidates {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-candidate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 6px 8px;
  text-align: left;
}
.contact-candidate-row:hover {
  background: var(--color-surface);
}
.contact-candidate-name {
  font-size: 14px;
  font-weight: 500;
}
.contact-candidate-username {
  font-size: 14px;
  color: var(--color-muted);
}
.contacts-list {
  flex: 1;
  overflow-y: auto;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.contact-row:hover {
  background: var(--color-surface-alt);
}
.contact-row-profile-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.contact-row-body {
  min-width: 0;
  flex: 1;
}
.contact-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  margin: 0;
}
.contact-row-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}
.contact-row-status.online {
  color: var(--color-accent);
}

/* Misc views */
.missed-call {
  color: var(--color-danger);
}
.hidden-input {
  display: none;
}

/* Settings */
.settings-view {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.settings-nav {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.settings-nav-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px;
}
.settings-nav-topbar-title {
  font-size: 17px;
  font-weight: 600;
}
.settings-nav-topbar-qr {
  margin-left: auto;
}
.settings-nav-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 8px 8px;
  padding: 8px;
  border-radius: 10px;
  color: var(--color-text);
  text-decoration: none;
}
.settings-nav-profile:hover,
.settings-nav-profile.active {
  background: var(--color-surface-alt);
}
.settings-nav-profile-info {
  min-width: 0;
}
.settings-nav-profile-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-nav-profile-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-accent);
}
.settings-nav-list {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 8px 8px;
  overflow-x: auto;
}
.settings-nav-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  border-radius: 8px;
  padding: 9px 12px;
  text-align: left;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}
.settings-nav-icon {
  display: flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
}
@media (min-width: 768px) {
  .settings-view {
    flex-direction: row;
  }
  .settings-nav {
    width: 260px;
    border-right: 1px solid var(--color-border);
    border-bottom: none;
  }
  .settings-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    overflow-x: visible;
    overflow-y: auto;
    padding: 0 8px 12px;
  }
  .settings-nav-item {
    white-space: normal;
  }
}
.settings-nav-item:hover {
  background: var(--color-surface-alt);
}
.settings-nav-item.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 500;
}
.settings-nav-item.active .settings-nav-icon {
  color: var(--color-accent);
}
.settings-content {
  flex: 1;
  overflow-y: auto;
}
.settings-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 24px;
}
.settings-page-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
}
.settings-page-subtitle {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.settings-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.settings-avatar-btn {
  position: relative;
}
.settings-avatar-edit {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.settings-profile-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.settings-profile-sub {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}
.settings-section-group {
  margin-bottom: 20px;
}
.settings-section-title {
  margin: 0 0 6px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}
.settings-section {
  border-radius: 10px;
  background: var(--color-surface);
  padding: 0 12px;
}
.settings-section > .settings-toggle-row:last-child,
.settings-toggle-row.no-divider {
  border-bottom: none;
}
.settings-section .settings-field {
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-section .settings-field:last-child {
  border-bottom: none;
}
.settings-section .settings-chip-row,
.settings-section .settings-swatch-row {
  margin: 0;
  padding: 12px 0;
}
.settings-section .settings-range {
  margin: 0 0 4px;
}
.settings-section .settings-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.settings-section .settings-shortcut-row:last-child {
  border-bottom: none;
}
.settings-shortcut-keys {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-family: inherit;
  color: var(--color-muted);
}
.settings-field {
  display: block;
  margin-bottom: 16px;
}
.settings-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}
.settings-input {
  width: 100%;
  resize: none;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 8px 12px;
  font-size: 14px;
}
.settings-input:focus {
  outline: 2px solid var(--color-accent);
}
.settings-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.settings-chip {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  font-size: 14px;
}
.settings-chip.active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.settings-swatch-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.settings-swatch {
  height: 34px;
  width: 44px;
  border-radius: 10px;
}
.settings-swatch.active {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}
.settings-range {
  width: 100%;
  margin-bottom: 20px;
  accent-color: var(--color-accent);
}
.settings-toggle {
  position: relative;
  height: 24px;
  width: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-border);
  transition: background-color 0.15s;
}
.settings-toggle.on {
  background: var(--color-accent);
}
.settings-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 20px;
  width: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.settings-toggle.on .settings-toggle-knob {
  transform: translateX(20px);
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  gap: 12px;
}
.settings-toggle-title {
  font-size: 14px;
  margin: 0;
}
.settings-toggle-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin: 2px 0 0;
}
.settings-notice-box {
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: 14px;
}
.ad-attachments-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ad-attachment-preview {
  position: relative;
  display: inline-block;
}
.ad-attachment-preview .image-attachment,
.ad-attachment-preview .video-attachment {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.ad-attachment-preview .file-attachment {
  width: 200px;
}
.ad-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.ad-attach-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ad-attach-row .profile-action-btn {
  width: auto;
  flex: none;
  border: 1px solid var(--color-border);
}
.settings-select {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 6px 10px;
  font-size: 14px;
}
.settings-devices-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.settings-danger-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-danger);
}
.settings-danger-link:disabled {
  color: var(--color-muted);
}
.settings-danger-link.with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 11px 0;
}
.settings-passcode-actions {
  display: flex;
  gap: 12px;
}
.settings-devices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}
.settings-device-row:last-child {
  border-bottom: none;
}
.settings-device-row.current {
  border-bottom: none;
  padding-bottom: 4px;
}
.settings-device-body {
  min-width: 0;
  flex: 1;
  color: var(--color-text);
}
.settings-device-body p {
  margin: 0;
}
.settings-device-name {
  font-weight: 500;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.settings-device-time {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
  flex-shrink: 0;
}
.device-list-hint {
  margin: -8px 0 16px 4px;
}
.icon-btn.danger {
  color: var(--color-danger);
  opacity: 0.75;
}
.icon-btn.danger:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.settings-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.settings-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 8px 10px;
}
.settings-account-row.current {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.settings-account-main {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.settings-account-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.settings-account-current-tag {
  font-weight: 400;
  color: var(--color-muted);
}
.settings-account-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-muted);
}
.settings-add-account-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px dashed var(--color-border);
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.settings-add-account-btn:hover {
  background: var(--color-surface-alt);
}
.settings-logout-block {
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.settings-logout-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-danger);
}
.settings-logout-all {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
}
.settings-folders-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.settings-folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 8px 12px;
}
.settings-folder-name-btn {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
.settings-folder-create-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.settings-folder-editor {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 12px;
}
.settings-folder-chat-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}
.settings-cache-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-cache-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 8px 12px;
}

/* Waving-bear mascot (components/mascot.js) on the "Выберите чат" empty
   state — jumps in with a squash/stretch landing, then waves a paw a few
   times and settles. All one-shot: this mounts once per real navigation to
   "/", not inside a re-render loop, so unlike the sticker/gift entrance
   animations there's nothing here that needs a "don't replay" guard. */
.mascot-bear-wrap {
  margin-bottom: 4px;
}
.mascot-bear .bear-jump {
  transform-origin: 60px 109px;
  animation: bear-jump 1.1s cubic-bezier(0.34, 1.2, 0.4, 1) both;
}
.mascot-bear .bear-shadow {
  transform-origin: 60px 116px;
  animation: bear-shadow 1.1s ease-in-out both;
}
.mascot-bear .bear-arm-wave {
  animation: bear-wave 0.45s ease-in-out 4;
  animation-delay: 1.05s;
}
@keyframes bear-jump {
  0% { transform: translateY(30px) scaleY(0.9); opacity: 0; }
  15% { transform: translateY(8px) scaleY(0.85); opacity: 1; }
  45% { transform: translateY(-22px) scaleY(1.05); }
  70% { transform: translateY(0) scaleY(0.9); }
  85% { transform: translateY(0) scaleY(1.04); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes bear-shadow {
  0% { transform: scale(0.7); opacity: 0; }
  15% { opacity: 0.12; }
  45% { transform: scale(0.55); opacity: 0.06; }
  100% { transform: scale(1); opacity: 0.12; }
}
@keyframes bear-wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-32deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-bear .bear-jump, .mascot-bear .bear-shadow, .mascot-bear .bear-arm-wave {
    animation: none;
  }
}

.placeholder-view,
.empty-chat {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}
.empty-chat-title {
  font-family: var(--font-serif);
  font-size: 18px;
  margin: 0;
}
.icon {
  display: block;
}
.rotate-135 {
  transform: rotate(135deg);
}

/* Incoming call banner */
.incoming-call-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: var(--color-surface);
  padding: 10px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  border: 1px solid var(--color-border);
}
.incoming-call-info {
  min-width: 120px;
}
.incoming-call-title {
  font-weight: 500;
  margin: 0;
}
.incoming-call-subtitle {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}
.incoming-call-btn {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
}
.incoming-call-btn.decline {
  background: var(--color-danger);
}
.incoming-call-btn.accept {
  background: var(--color-success);
}

/* Call PiP bubble (persistent, shown across navigation while minimized) */
.call-bubble-slot {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 55;
}
.call-pip-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--color-surface);
  padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
}
.call-pip-title {
  font-size: 13px;
  font-weight: 500;
}
.call-pip-timer {
  font-size: 12px;
  color: var(--color-muted);
}

/* Full-screen call view */
.call-screen {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  background: #14161f;
  color: #fff;
}
.call-screen.ended {
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
.call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.call-header-btn {
  display: flex;
  padding: 8px;
  border-radius: 999px;
  color: #fff;
}
.call-header-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.call-header-center {
  text-align: center;
}
.call-header-title {
  font-family: var(--font-serif);
  font-size: 18px;
  margin: 0;
}
.call-header-timer {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.call-header-spacer {
  width: 36px;
}
.call-media-error {
  margin: 0 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}
.call-media-error.link {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.call-tiles-grid {
  display: grid;
  flex: 1;
  place-items: center;
  gap: 16px;
  padding: 24px;
}
.call-empty-hint {
  color: rgba(255, 255, 255, 0.6);
}
.call-tile {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
.call-tile-video {
  height: 100%;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}
.call-tile-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.call-tile-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.call-tile-status {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.call-local-pip {
  position: absolute;
  bottom: 112px;
  right: 24px;
  z-index: 20;
  height: 112px;
  width: 112px;
}
.call-local-video {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  object-fit: cover;
}
/* Mirroring only makes sense for the front camera (matches what you'd see
   in a real mirror) — flipCamera() in callController.js switches the actual
   video track correctly either way, but this class used to be applied
   unconditionally, so the back camera's preview looked mirrored/backwards
   too. */
.call-local-video.mirrored {
  transform: scaleX(-1);
}
.call-local-avatar {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.call-flip-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  height: 28px;
  width: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 40px;
}
.call-control-btn {
  display: flex;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.call-control-btn.active {
  background: #fff;
  color: #000;
}
.call-control-btn.accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.call-hangup-btn {
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
}