.chat-theme-bg-wrapper { 
  position: absolute;
  width: 100%; 
  height: 100%; 
}
.chat-theme-bg-wrapper::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--chat-bg-image, none);
  background-size: cover; background-position: center;
  opacity: var(--chat-bg-opacity, 1);
  z-index: 0;
  pointer-events: none;
  backdrop-filter: var(--chat-bg-blur, none);
}
@media (width >= 64rem) {
    .chat-theme-bg-wrapper {
      border-top-left-radius: var(--radius-xl);
      border-top-right-radius: var(--radius-xl);
    }
    .chat-theme-bg-wrapper::before {
      border-top-left-radius: var(--radius-xl);
      border-top-right-radius: var(--radius-xl);
    }
}

.msg-content {
  --chat-admin-text-color: #000000;

  --chat-composer-button-color: rgba(61, 97, 255, 0.6);
  --chat-composer-caret-color: #3d61ff;
  --chat-composer-input-background-color: #303030;
  --mwp-header-button-color: rgba(18, 109, 255, 0.6);
  --mwp-message-list-actions-gap: 4px;
  --mwp-message-list-actions-width: calc(84px + 2 * 4px);
  --mwp-message-row-background: transparent;
  --mwp-primary-theme-color: #5271ff;
  --reaction-pill-multireact-selected-color: #d9e0ff;
  --mwp-reply-background-color: #4E4F50;
  --mwp-message-list-profile-start-padding: 8px;
  --chat-composer-background-color: #000000;
  --chat-replied-message-background-color: #1d1d1d;
  --chat-scrollbar-thumb-color: rgba(124, 137, 194, 0.7);
  --chat-scrollbar-track-color: transparent;
  --mwp-header-background-color: #000000;
  --text-highlight: rgba(61, 97, 255, 0.5);
}

.msg-bg-custom {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-color: transparent;

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #a79bffc9;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
}
.msg-bg-custom .msg-chat-header, .msg-bg-custom .msg-chat-footer {
  background: #a6a6a652;
  backdrop-filter: blur(8px);
}

.msg-bg-default {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: url('/socical/bg_chat.webp');
  --chat-bg-color: transparent;

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #a79bffc9;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
}

.msg-bg-cosmic-space {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: url('/socical/bg_chat_1.webp');
  --chat-bg-color: transparent;

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #363536;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
  
  --chat-admin-text-color: #ffffff;
}

.msg-bg-love {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: linear-gradient(160deg, #ffc3d1 0%, #ff6f91 45%, #c81d5b 100%);
  --chat-bg-color: linear-gradient(160deg, #ffc3d1 0%, #ff6f91 45%, #c81d5b 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #fe64a8;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
}

.msg-bg-leaf {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: linear-gradient(160deg, #bdf3e6 0%, #59c9b3 45%, #1f8f82 100%);
  --chat-bg-color: linear-gradient(160deg, #bdf3e6 0%, #59c9b3 45%, #1f8f82 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #006528;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
}

.msg-bg-sky {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: linear-gradient(180deg, #8ec9f0 0%, #cfeaff 60%, #8ec9f0 100%);
  --chat-bg-color: linear-gradient(180deg, #8ec9f0 0%, #cfeaff 60%, #8ec9f0 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #002f58;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
}

.msg-bg-blue {
  --chat-accent: #0866FF;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: radial-gradient(circle at 35% 30%, rgb(107, 168, 255), rgb(8, 102, 255) 60%, rgb(10, 75, 184) 100%);
  --chat-bg-color: radial-gradient(circle at 35% 30%, rgb(107, 168, 255), rgb(8, 102, 255) 60%, rgb(10, 75, 184) 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #3d61ff;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
  
  --chat-admin-text-color: #ffffff;
}

.msg-bg-candy {
  --chat-accent: #8b7cf6;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: radial-gradient(circle at 35% 30%, #fbc2eb 0%, #c9b6f0 55%, #8e7cc3 100%);
  --chat-bg-color: radial-gradient(circle at 35% 30%, #fbc2eb 0%, #c9b6f0 55%, #8e7cc3 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #8b7cf6;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
  
  --chat-admin-text-color: #ffffff;
}

.msg-bg-honey {
  --chat-accent: #c47f0a;
  --chat-accent-soft: rgba(8, 102, 255, 0.85);
  --chat-bg-image: radial-gradient(circle at 35% 30%, #ffe6a7, #f5a623 55%, #b45f06 100%);
  --chat-bg-color: radial-gradient(circle at 35% 30%, #ffe6a7, #f5a623 55%, #b45f06 100%);

  --chat-incoming-message-bubble-background-color: rgba(255,255,255,0.85);
  --chat-incoming-message-text-color: #050505;
  --chat-message-text-color: #ffffff;
  --chat-outgoing-message-background-gradient: initial;
  --chat-outgoing-message-bubble-background-color: #c47f0a;
  --mwp-header-text-color: #ffffff;
  --mwp-subheader-text-color: #ffffff;
  --reaction-pill-background-color: rgba(255, 255, 255, 0.6);
  --chat-edit-message-overlay-color: #444;
  
  --chat-admin-text-color: #ffffff;
}

.msg-opacity-bg-dark {
  --mwp-header-text-color: #080809;
  --mwp-subheader-text-color: #080809;
}


.msg-content .chat-text-input-placeholder {
  color: var(--mwp-subheader-text-color);
}
.msg-content .chat-text-input {
  color: var(--mwp-header-text-color);
}

.msg-content .msg-bg {
  backdrop-filter: var(--chat-bg-blur);
}
.msg-content .msg-chat-header {
  --shadow-1: rgba(0, 0, 0, .1);
  --shadow-inset: rgba(255, 255, 255, .5);
  --media-inner-border: rgba(0, 0, 0, .1);
  box-shadow: 0 1px 2px var(--shadow-1), 0 -1px var(--media-inner-border) inset, 0 2px 1px -1px var(--shadow-inset) inset;
}
.msg-content .text-chat-title {
  color: var(--mwp-header-text-color);
}
.msg-content .text-chat-subtitle {
  color: var(--mwp-subheader-text-color);
}
.msg-content .text-chat-icon {
  color: var(--mwp-header-text-color);
}
.msg-content .text-chat-pill {
  background-color: var(--reaction-pill-background-color);
  color: var(--chat-edit-message-overlay-color);
}

.msg-content .chat-outgoing-message-bubble {
  color: var(--chat-message-text-color);
}
.msg-content .chat-outgoing-message-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--chat-outgoing-message-bubble-background-color, #f0f2f5);
    z-index: -1;
    pointer-events: none;
    border-radius: 24px 24px 0.25rem 24px;
    /*backdrop-filter: var(--chat-bg-blur, none);*/
    /*opacity: var(--chat-bg-opacity, 1);*/
}
.msg-content .chat-incoming-message-bubble {
  color: var(--chat-incoming-message-text-color);
}
.msg-content .chat-incoming-message-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--chat-incoming-message-bubble-background-color, rgba(255,255,255,0.85));
    z-index: -1;
    pointer-events: none;
    border-radius: 24px 24px 0.25rem 24px;
}
.msg-content .chat-admin-text {
  color: var(--chat-admin-text-color);
}