/* Agent notification inbox + topbar bell */

.notif-wrap{position:relative;display:inline-flex}
.topbar .icon-btn.notif-bell.has-unread{color:#6b4f8a}
.topbar .icon-btn.notif-bell.has-unread::after{
  content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:#c45c26;box-shadow:0 0 0 2px #fff;animation:an-pulse 1.6s ease-out infinite}
@keyframes an-pulse{
  0%{transform:scale(.85);opacity:1}
  70%{transform:scale(1.7);opacity:0}
  100%{opacity:0}
}

/* Keep the bell visible on phone (other topbar icons hide). */
@media(max-width:900px){
  .topbar .icon-btn.notif-bell{display:inline-flex!important}
  .topbar .notif-wrap{display:inline-flex;margin-left:auto;order:2}
  .topbar .burger{order:0}
  .topbar .logo-link{order:1}
}

.an-pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:90;width:min(360px,calc(100vw - 24px));
  background:#fff;border:1px solid rgba(25,22,18,.12);border-radius:14px;
  box-shadow:0 18px 50px rgba(25,22,18,.16);overflow:hidden}
.an-pop-inner{max-height:min(70vh,420px);overflow:auto}
.an-pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid rgba(25,22,18,.08);position:sticky;top:0;background:#fff}
.an-pop-head a{font-size:12px;font-weight:700;color:#6b4f8a;text-decoration:none}
.an-pop-loading,.an-pop-empty{padding:28px 16px;text-align:center;color:#6b6560;font-size:13px}
.an-pop-list{list-style:none;margin:0;padding:6px 0}
.an-pop-list li a,
.an-pop-list li button{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;background:none;
  padding:10px 14px;cursor:pointer;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}
.an-pop-list li.unread a,.an-pop-list li.unread button{background:rgba(143,109,179,.08)}
.an-pop-list li a:hover,.an-pop-list li button:hover{background:rgba(25,22,18,.05)}
.an-pop-list .t{font-size:13px;font-weight:700;line-height:1.3}
.an-pop-list .b{font-size:12px;color:#6b6560;line-height:1.35}
.an-pop-list time{font-size:11px;color:#9a948c;margin-top:2px}

.an-page{max-width:720px;margin:0 auto;padding:8px 0 48px}
.an-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.an-sub{margin:6px 0 0;color:#6b6560;font-size:13.5px}
.an-head-actions{display:flex;gap:8px;flex-wrap:wrap}

.an-card{background:#fff;border:1px solid rgba(25,22,18,.1);border-radius:16px;padding:16px 18px;margin-bottom:18px}
.an-push-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.an-push-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.an-push-copy{margin:6px 0 0;font-size:13px;color:#6b6560;line-height:1.45;max-width:46ch}
.an-prefs{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(25,22,18,.08)}
.an-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.an-toggle input{width:16px;height:16px;accent-color:#6b4f8a}
.an-soft{margin-top:14px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#f7f1ea,#efe8f7);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}

.an-empty{text-align:center;padding:48px 20px;color:#6b6560}
.an-empty-ic{opacity:.45;margin-bottom:10px}
.an-empty h2{margin:0 0 8px;font-size:18px;color:#191612}
.an-empty p{margin:0 auto;max-width:38ch;line-height:1.5;font-size:14px}

.an-day{margin-bottom:22px}
.an-day-h{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9a948c}
.an-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.an-item{border:1px solid rgba(25,22,18,.1);border-radius:14px;background:#fff;overflow:hidden;
  transition:border-color .15s, box-shadow .15s}
.an-item.unread{border-color:rgba(143,109,179,.35);box-shadow:inset 3px 0 0 #8f6db3}
.an-item.read{opacity:.88}
.an-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;width:100%;
  border:0;background:none;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  text-decoration:none;box-sizing:border-box}
.an-row:hover{background:rgba(25,22,18,.03)}
.an-row:focus-visible{outline:2px solid #8f6db3;outline-offset:-2px}
.an-kind{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px;background:#f1eee8;color:#5c574f;align-self:start}
.an-kind.signup{background:#e8f3ec;color:#2f6b45}
.an-kind.order{background:#ece7f5;color:#5a3d7a}
.an-kind.backorder{background:#f8ebe3;color:#8a4b28}
.an-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.an-title{font-size:14px;font-weight:700;line-height:1.3}
.an-body{font-size:12.5px;color:#6b6560;line-height:1.4}
.an-time{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;color:#9a948c;white-space:nowrap}
.an-time .rel{font-weight:700;color:#6b6560}
.an-time .abs{font-variant-numeric:tabular-nums}

@media(max-width:560px){
  .an-row{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .an-time{grid-column:2;align-items:flex-start;flex-direction:row;gap:8px}
}