.qmsg.qmsg-wrapper{
  position:fixed;
  top:0;
  right:0; 
  bottom:0;
  width:auto; 
  z-index:1010;
  pointer-events:none;
  color:#6b7280; 
  font-size:14px;
  font-family:'Comic Sans MS', 'Bubblegum Sans', cursive; 
}

.qmsg .qmsg-item{
  padding:12px;
  text-align:right; 
  animation-duration:.4s; 
}

.qmsg .qmsg-item .qmsg-content{
  text-align:left;
  position:relative;
  display:inline-block;
  padding:14px 18px;
  background:#fefeff; 
  border-radius:12px; 
  box-shadow:0 6px 20px rgba(100, 180, 255, 0.18); 
  pointer-events:all;
  max-width:320px; 
  min-width:120px;
  border:1px solid #e0f0ff; 
  transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-]{
  display:flex;
  align-items:center;
  white-space:normal; 
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.6; 
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon{
  display:inline-block;
  height:20px; 
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}


.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close{
  cursor:pointer;
  color:#a0c4ff;
  transition:all .3s;
  margin-left:10px;
  border-radius:50%;
  padding:2px;
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover{
  background:#f0f7ff;
  color:#6aa8ff;
}


.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-count{
  display:inline-block;
  position:absolute;
  right:-6px; 
  top:-6px;
  color:#fff;
  font-size:12px;
  text-align:center;
  height:20px;
  line-height:20px;
  border-radius:50%; 
  min-width:20px;
  animation:MessageBounce 0.6s ease infinite alternate; 
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}


.qmsg .qmsg-item .qmsg-content-info{color:#60a5fa}
.qmsg .qmsg-item .qmsg-content-info .qmsg-count{background-color:#60a5fa}

.qmsg .qmsg-item .qmsg-content-warning{color:#fbbf24}
.qmsg .qmsg-item .qmsg-content-warning .qmsg-count{background-color:#fbbf24}

.qmsg .qmsg-item .qmsg-content-error{color:#f87171}
.qmsg .qmsg-item .qmsg-content-error .qmsg-count{background-color:#f87171}

.qmsg .qmsg-item .qmsg-content-success{color:#4ade80}
.qmsg .qmsg-item .qmsg-content-success .qmsg-count{background-color:#4ade80}

.qmsg .qmsg-item .qmsg-content-loading{color:#818cf8}
.qmsg .qmsg-item .qmsg-content-loading .qmsg-count{background-color:#818cf8}


.qmsg .animate-turn{
  animation:MessageTurn 1.2s linear infinite;
  transform-origin:center;
}


@keyframes MessageMoveIn{
  0%{
    transform:translateX(100%); 
    opacity:0;
  }
  80%{
    transform:translateX(-10px); 
  }
  100%{
    transform:translateX(0);
    opacity:1;
  }
}

@keyframes MessageMoveOut{
  0%{
    transform:translateX(0);
    max-height:200px;
    padding:12px;
    opacity:1;
  }
  100%{
    transform:translateX(100%); 
    max-height:0;
    padding:0;
    opacity:0;
  }
}


@keyframes MessageShake{
  0%,100%{transform:translateX(0);opacity:1}
  25%{transform:translateX(-5px);opacity:.8}
  50%{transform:translateX(5px);opacity:.6}
  75%{transform:translateX(-3px);opacity:.8}
}


@keyframes MessageBounce{
  from{transform:translateY(0)}
  to{transform:translateY(-3px)}
}

.qmsg.qmsg-wrapper{
  font-size:18px; 
}

.qmsg .qmsg-item .qmsg-content{
  padding:18px 24px; 
  max-width:380px; 
  box-shadow:0 8px 30px rgba(100, 180, 255, 0.25); 
  border-width:2px; 
}


.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon{
  height:28px; 
  margin-right:10px; 
}


.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-count{
  height:26px;
  line-height:26px;
  min-width:26px;
  font-size:14px;
  right:-8px;
  top:-8px;
  animation:MessageBounce 0.4s ease infinite alternate; 
}


.qmsg .qmsg-item .qmsg-content-info{color:#3b82f6}
.qmsg .qmsg-item .qmsg-content-info .qmsg-count{background-color:#3b82f6}

.qmsg .qmsg-item .qmsg-content-warning{color:#f59e0b}
.qmsg .qmsg-item .qmsg-content-warning .qmsg-count{background-color:#f59e0b}

.qmsg .qmsg-item .qmsg-content-error{color:#ef4444}
.qmsg .qmsg-item .qmsg-content-error .qmsg-count{background-color:#ef4444}

.qmsg .qmsg-item .qmsg-content-success{color:#10b981}
.qmsg .qmsg-item .qmsg-content-success .qmsg-count{background-color:#10b981}


@keyframes MessageMoveIn{
  0%{
    transform:translateX(100%) scale(0.8); 
    opacity:0;
  }
  80%{
    transform:translateX(-15px) scale(1.05); 
  }
  100%{
    transform:translateX(0) scale(1);
    opacity:1;
  }
}


.qmsg .qmsg-item{
  animation-duration:0.6s;
}

.qmsg .qmsg-item .qmsg-content::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg, 
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%);
  animation:ShineEffect 1.2s ease-out;
}

@keyframes ShineEffect{
  100%{
    left:150%;
  }
}