/* ============================================
   Luca – Message Notification Toast (Chat)
   Eigenständiges CSS, unabhängig von Reward-Box
   ============================================ */

#luca-msgnotify-stack{
  position:fixed;
  top:30px;
  right:16px;
  z-index:999999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none; /* Klick nur auf Cards */
}

/* Haupt-Card */
.luca-msgnotify{
  position:relative;
  display:flex;
  align-items:center;
  padding:12px 18px;
  border-radius:16px; /* wie Reward Box */
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  color:#fff;
  font-family:inherit;
  min-width:min(86vw, 420px);
  max-width:min(86vw, 420px); /* gleiche 86vw-Logik wie Reward Box */
  pointer-events:auto;
  cursor:pointer;
  overflow:hidden;
  transform:translateX(120%);
  opacity:0;
  background:linear-gradient(90deg, rgba(28, 179, 255, 1) 0%, rgba(74, 80, 255, 1) 100%);
  animation:lucaMsgNotifySlideIn .45s ease-out forwards;
}

/* Geopattern-Layer */
.luca-msgnotify::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  pointer-events:none;
  background-image:url('https://app.luca1998s.com/wp-content/plugins/youzify/includes/public/assets/images/geopattern.png');
  background-size:240px auto;
  background-position:center;
  background-repeat:repeat;
}

/* Avatar links (20% größer) */
.luca-msgnotify__avatar{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border-radius:50%;
  background-color:rgba(255,255,255,.2);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  margin-right:14px;
}

/* Text-Spalte */
.luca-msgnotify__text{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  position:relative;
  z-index:1;
}

.luca-msgnotify__title{
  font-size:16.5px;  /* ~10% größer */
  font-weight:600;
  letter-spacing:.01em;
}

.luca-msgnotify__subtitle{
  font-size:14px;    /* ~10% größer */
  opacity:.95;
}

/* GIF rechts – neue URL, mit Abstand rechts */
.luca-msgnotify__gif{
  flex:0 0 auto;
  width:64px;
  height:64px;
  margin-left:16px;
  margin-right:30px; /* schiebt das GIF von der rechten Kante weg */
  background:url('https://app.luca1998s.com/wp-content/uploads/2025/11/message-notification-letter2.gif') center/contain no-repeat;
  pointer-events:none;
  position:relative;
  z-index:1;
}

/* Close-Button (X) */
.luca-msgnotify__close{
  position:absolute;
  top:8px;
  right:12px;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:14px;
  line-height:1;
  padding:0;
  cursor:pointer;
  opacity:.85;
  z-index:2;
}

.luca-msgnotify__close:hover{
  opacity:1;
}

/* Slide-Out */
.luca-msgnotify.is-hiding{
  animation:lucaMsgNotifySlideOut .35s ease-in forwards;
}

/* Keyframes */
@keyframes lucaMsgNotifySlideIn{
  from{
    transform:translateX(120%);
    opacity:0;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}

@keyframes lucaMsgNotifySlideOut{
  from{
    transform:translateX(0);
    opacity:1;
  }
  to{
    transform:translateX(120%);
    opacity:0;
  }
}

/* Mobile-Feinschliff – gleiche Margins wie Reward Box, nur Größen etwas runter */
@media (max-width:480px){
  .luca-msgnotify{
    padding:10px 14px;
  }
  .luca-msgnotify__avatar{
    width:48px;
    height:48px;
    margin-right:10px;
  }
  .luca-msgnotify__gif{
    width:56px;
    height:56px;
    margin-left:10px;
    margin-right:18px;
  }
}