:root{--messes-wallpaper:url('/assets/wallpapers/messes-luxury-silk-network.png?v=20260912-289')}
.app-shell{position:relative;isolation:isolate;overflow:hidden;background:transparent!important}
.app-shell::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background-color:#06100b;background-image:var(--messes-wallpaper);background-position:center;background-size:cover;background-repeat:no-repeat}
.app-shell::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,#cfff5718 0,transparent 34%),#03100955}
html[data-theme="light"] .app-shell::before{background-color:#f5faf7}
html[data-theme="light"] .app-shell::after{background:radial-gradient(circle at 50% 42%,#245f4330 0,transparent 35%),#f8fcfa22}
.chat-list,.conversation{background:color-mix(in srgb,var(--lux-panel) 87%,transparent)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.messages{background-color:color-mix(in srgb,var(--lux-bg) 78%,transparent)!important}
/* The light appearance uses the wallpaper itself as the surface.  Keep the
   list, rows and conversation free from the dark-theme glass panels. */
html[data-theme="light"] .chat-list,
html[data-theme="light"] .conversation,
html[data-theme="light"] .messages{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
html[data-theme="light"] .chat-list .chat,
html[data-theme="light"] .chat-list .chat:hover,
html[data-theme="light"] .chat-list .chat.active{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important
}
html[data-theme="light"] .message-line .bubble,
html[data-theme="light"] .message-line.mine .bubble{
  width:fit-content!important;
  min-width:0!important;
  max-width:min(720px,84%)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important
}
@media(max-width:700px){
  html[data-theme="light"] .message-line .bubble,
  html[data-theme="light"] .message-line.mine .bubble{
    max-width:88%!important
  }
}
@media(prefers-reduced-motion:reduce){.app-shell::before{transform:none!important;transition:none!important}}
.wallpaper-options{display:grid;grid-template-columns:repeat(4,minmax(68px,1fr));gap:10px;margin-top:12px}
.wallpaper-option{position:relative;overflow:hidden;aspect-ratio:9/15;border:1px solid #ffffff24;border-radius:16px;background-position:center;background-size:cover;box-shadow:0 10px 24px #0006;cursor:pointer}
.wallpaper-option::after{content:"";position:absolute;inset:0;border:3px solid transparent;border-radius:inherit;transition:border-color .18s ease,background .18s ease}
.wallpaper-option[aria-pressed="true"]::after{border-color:#b7ff28;background:#b7ff2812}
.wallpaper-option span{position:absolute;z-index:1;right:5px;bottom:5px;left:5px;padding:4px 5px;border-radius:8px;background:#020907b8;color:#fff;font-size:9px;line-height:1.15;text-align:center;backdrop-filter:blur(5px)}
@media(max-width:620px){.wallpaper-options{grid-template-columns:repeat(4,minmax(54px,1fr));gap:7px}.wallpaper-option span{font-size:8px}}