/* D2 SMARTNOTIFY MESSAGE INBOX V2 */

.snmsg-shell{
  width:min(760px,100%);
  margin:0 auto;
  padding:14px 0 110px;
}

.snmsg-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 16px;
}

.snmsg-title{
  margin:0;
  font-size:27px;
  font-weight:950;
  letter-spacing:-.02em;
  color:#102a2e;
}

.snmsg-sub{
  margin-top:5px;
  font-size:12px;
  color:#718588;
}

.snmsg-actions{
  display:flex;
  gap:8px;
}

.snmsg-btn{
  border:0;
  border-radius:13px;
  padding:9px 12px;
  background:#e9f5f3;
  color:#087b75;
  font-weight:850;
  font-size:11px;
  cursor:pointer;
}

.snmsg-list{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.snmsg-card{
  position:relative;
  display:block;
  padding:16px 16px 14px 18px;
  border:1px solid #e3eceb;
  border-radius:20px;
  background:#fff;
  color:#102a2e;
  text-decoration:none;
  box-shadow:
    0 8px 25px rgba(15,23,42,.055);
  transition:
    transform .12s ease,
    box-shadow .12s ease;
}

.snmsg-card:active{
  transform:scale(.985);
}

.snmsg-card.unread{
  border-color:#a7ddd7;
  background:
    linear-gradient(
      135deg,
      #f6fffd 0%,
      #fff 72%
    );
  box-shadow:
    0 10px 28px rgba(8,123,117,.10);
}

.snmsg-dot{
  position:absolute;
  left:7px;
  top:21px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ef4444;
}

.snmsg-card:not(.unread) .snmsg-dot{
  display:none;
}

.snmsg-top{
  display:flex;
  align-items:flex-start;
  gap:11px;
}

.snmsg-icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  background:#eef8f6;
}

.snmsg-copy{
  min-width:0;
  flex:1;
}

.snmsg-copy h3{
  margin:0;
  font-size:15px;
  line-height:1.4;
  font-weight:900;
  color:#142d31;
}

.snmsg-message{
  margin:6px 0 9px;
  color:#52696d;
  font-size:13px;
  line-height:1.7;
  white-space:pre-line;
  word-break:break-word;
}

.snmsg-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  color:#87999b;
  font-size:10px;
}

.snmsg-sev{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:3px 7px;
  border-radius:999px;
  font-weight:850;
  background:#eef3f3;
  color:#617477;
}

.snmsg-sev.warning{
  background:#fff5dc;
  color:#a16207;
}

.snmsg-sev.high,
.snmsg-sev.danger,
.snmsg-sev.critical,
.snmsg-sev.emergency{
  background:#feecec;
  color:#b91c1c;
}

.snmsg-empty,
.snmsg-error,
.snmsg-loading{
  padding:36px 18px;
  border:1px dashed #d6e2e1;
  border-radius:20px;
  text-align:center;
  color:#789092;
  font-size:13px;
  background:rgba(255,255,255,.7);
}

.snmsg-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  height:27px;
  padding:0 8px;
  border-radius:999px;
  background:#087b75;
  color:#fff;
  font-size:11px;
  font-weight:900;
}

@media(max-width:520px){
  .snmsg-shell{
    padding-left:1px;
    padding-right:1px;
  }

  .snmsg-head{
    align-items:center;
  }

  .snmsg-title{
    font-size:24px;
  }

  .snmsg-card{
    padding:14px 13px 13px 16px;
    border-radius:18px;
  }

  .snmsg-icon{
    width:40px;
    height:40px;
    font-size:21px;
  }

  .snmsg-message{
    font-size:12px;
  }
}

/* ==========================================================
   D2 SMARTNOTIFY LIVE BELL V3
   ========================================================== */

.sn-live-bell{
  position:relative !important;
}

.sn-live-badge{
  position:absolute;
  z-index:20;
  top:-5px;
  right:-6px;

  min-width:19px;
  height:19px;
  padding:0 5px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:2px solid #fff;

  background:#ef4444;
  color:#fff;

  font-size:10px;
  line-height:1;
  font-weight:900;

  box-shadow:
    0 3px 10px rgba(239,68,68,.38);
}

.sn-live-badge[hidden]{
  display:none !important;
}

@keyframes d2BellRing{
  0%   { transform:rotate(0deg) scale(1); }
  15%  { transform:rotate(14deg) scale(1.08); }
  30%  { transform:rotate(-12deg) scale(1.08); }
  45%  { transform:rotate(10deg) scale(1.08); }
  60%  { transform:rotate(-7deg) scale(1.05); }
  75%  { transform:rotate(4deg) scale(1.02); }
  100% { transform:rotate(0deg) scale(1); }
}

.sn-bell-ring{
  animation:d2BellRing .72s ease-in-out;
}

.sn-bell-new{
  box-shadow:
    0 0 0 4px rgba(239,68,68,.10),
    0 8px 24px rgba(239,68,68,.15) !important;
}


/* ==========================================================
   D2 NATIVE SINGLE HEADER V2

   Native screen already has:
   🔔 การแจ้งเตือน
   SmartCity Alert

   Hide the duplicate heading from Inbox V2.
   ========================================================== */

#smartNotifyInboxV2 > .snmsg-head > div:first-child{
  display:none !important;
}

#smartNotifyInboxV2 > .snmsg-head{
  justify-content:flex-end;
  margin-top:0;
}

#smartNotifyInboxV2{
  width:100%;
}