.admin-notification-mount{
 position:absolute;
 top:28px;
 right:32px;
 z-index:120;
}
body.admin-atendimento-active .admin-notification-mount{
 top:14px;
 right:18px;
}

.notification-center{position:relative}
.notification-bell-btn{
 position:relative;
 width:44px;
 height:44px;
 border:1px solid rgba(124,92,255,.24);
 border-radius:999px;
 background:rgba(124,92,255,.10);
 color:#e9ddff;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.notification-bell-btn:hover{
 transform:translateY(-1px);
 background:rgba(124,92,255,.18);
 border-color:rgba(124,92,255,.36);
}
.notification-bell-icon{font-size:20px;line-height:1}
.notification-badge{
 position:absolute;
 top:-4px;
 right:-4px;
 min-width:18px;
 height:18px;
 padding:0 5px;
 border-radius:999px;
 background:#ef4444;
 color:#fff;
 font-size:10px;
 font-weight:800;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 0 0 2px rgba(10,6,24,.92);
}

.notification-panel{
 position:absolute;
 top:calc(100% + 10px);
 right:0;
 width:min(380px,calc(100vw - 32px));
 max-height:min(70vh,560px);
 overflow:hidden;
 border-radius:16px;
 border:1px solid rgba(124,92,255,.22);
 background:rgba(12,7,28,.98);
 box-shadow:0 18px 48px rgba(0,0,0,.45);
 opacity:0;
 transform:translateY(-6px) scale(.98);
 pointer-events:none;
 transition:opacity .16s ease, transform .16s ease;
}
.notification-panel.is-open{
 opacity:1;
 transform:translateY(0) scale(1);
 pointer-events:auto;
}
.notification-panel-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:14px 16px 10px;
 border-bottom:1px solid rgba(124,92,255,.12);
}
.notification-panel-head h3{
 margin:0;
 font-size:15px;
 font-weight:700;
 color:#f5f0ff;
}
.notification-mark-all{
 border:0;
 background:transparent;
 color:#b8a6ff;
 font-size:12px;
 font-weight:600;
 cursor:pointer;
 padding:4px 0;
}
.notification-panel-body{
 max-height:calc(min(70vh,560px) - 52px);
 overflow:auto;
 overscroll-behavior:contain;
}
.notification-empty{
 padding:28px 18px;
 text-align:center;
 color:#a3adc9;
 font-size:13px;
}

.notification-item{
 display:grid;
 grid-template-columns:auto 1fr;
 gap:12px;
 padding:14px 16px;
 border-bottom:1px solid rgba(124,92,255,.08);
}
.notification-item.is-unread{
 background:rgba(124,92,255,.08);
}
.notification-item-icon{
 width:36px;
 height:36px;
 border-radius:12px;
 display:grid;
 place-items:center;
 background:rgba(124,92,255,.14);
 font-size:18px;
}
.notification-item-head{
 display:flex;
 justify-content:space-between;
 gap:10px;
 align-items:flex-start;
}
.notification-item-head strong{
 font-size:13px;
 color:#f5f0ff;
}
.notification-item-head time{
 flex-shrink:0;
 font-size:11px;
 color:#8f9bb8;
}
.notification-item-customer{
 margin-top:4px;
 font-size:13px;
 font-weight:700;
 color:#d8ccff;
}
.notification-item-preview{
 margin:6px 0 0;
 font-size:12px;
 color:#a3adc9;
 line-height:1.45;
}
.notification-item-foot{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-top:10px;
}
.notification-item-status{
 display:inline-flex;
 padding:2px 8px;
 border-radius:999px;
 background:rgba(124,92,255,.14);
 color:#cdbdff;
 font-size:10px;
 font-weight:700;
}
.notification-open-btn{
 border:0;
 border-radius:999px;
 padding:6px 12px;
 background:#7c5cff;
 color:#fff;
 font-size:11px;
 font-weight:700;
 cursor:pointer;
}

.notification-toast-host{
 position:fixed;
 right:18px;
 bottom:18px;
 z-index:200;
 display:flex;
 flex-direction:column;
 gap:10px;
 pointer-events:none;
}
.notification-toast{
 pointer-events:auto;
 width:min(360px,calc(100vw - 36px));
 display:grid;
 grid-template-columns:auto 1fr auto auto;
 gap:10px;
 align-items:center;
 padding:12px 12px 12px 14px;
 border-radius:14px;
 border:1px solid rgba(124,92,255,.24);
 background:rgba(12,7,28,.96);
 box-shadow:0 14px 40px rgba(0,0,0,.38);
 animation:notificationToastIn .18s ease;
}
.notification-toast.is-leaving{
 animation:notificationToastOut .18s ease forwards;
}
.notification-toast-icon{font-size:22px;line-height:1}
.notification-toast-body{min-width:0}
.notification-toast-body strong{
 display:block;
 font-size:13px;
 color:#f5f0ff;
}
.notification-toast-customer{
 display:block;
 margin-top:2px;
 font-size:12px;
 font-weight:700;
 color:#d8ccff;
}
.notification-toast-preview{
 margin:4px 0 0;
 font-size:12px;
 color:#a3adc9;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.notification-toast-action{
 border:0;
 border-radius:999px;
 padding:7px 12px;
 background:#7c5cff;
 color:#fff;
 font-size:11px;
 font-weight:700;
 cursor:pointer;
}
.notification-toast-close{
 border:0;
 width:28px;
 height:28px;
 border-radius:999px;
 background:transparent;
 color:#a3adc9;
 font-size:18px;
 cursor:pointer;
}

.atendimento-admin-conv-item.is-unread .atendimento-admin-conv-top strong{
 font-weight:800;
 color:#fff;
}
.atendimento-admin-conv-item.is-unread .atendimento-admin-preview{
 color:#d8ccff;
 font-weight:600;
}

@keyframes notificationToastIn{
 from{opacity:0; transform:translateY(8px)}
 to{opacity:1; transform:translateY(0)}
}
@keyframes notificationToastOut{
 from{opacity:1; transform:translateY(0)}
 to{opacity:0; transform:translateY(8px)}
}

@media (max-width:768px){
 .admin-notification-mount{
  top:18px;
  right:18px;
 }
 body.admin-atendimento-active .admin-notification-mount{
  top:10px;
  right:12px;
 }
 .notification-panel{
  right:-8px;
 }
}