/* ── Notifications bell + panel ─────────────── */
.bell{cursor:pointer}
.bell .dot{display:none;top:2px;right:2px;min-width:17px;height:17px;width:auto;padding:0 4px;border-radius:999px;background:#DC2626;
  color:#fff;font-size:10px;font-weight:700;line-height:14px;text-align:center;border:1.5px solid var(--surface)}
.bell .dot.is-on{display:block;animation:ntPop .35s cubic-bezier(.3,.7,.3,1.5)}
.bell.is-ringing svg{animation:ntRing .9s ease-in-out;transform-origin:50% 10%}
@keyframes ntPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ntRing{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}

.nt-panel{position:fixed;z-index:90;width:360px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;transform-origin:calc(100% - 24px) 0}
.nt-panel[hidden]{display:none}
.nt-panel.is-open{animation:ntIn .22s cubic-bezier(.2,.8,.3,1.15)}
@keyframes ntIn{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}
.nt-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.nt-head strong{font-size:14.5px}
.nt-link{background:none;border:0;color:var(--blue);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;padding:2px 4px;border-radius:4px}
.nt-link:hover{background:var(--blue-tint)}
.nt-list{max-height:min(440px,70vh);overflow-y:auto}
.nt-item{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);
  padding:12px 16px;cursor:pointer;font:inherit;color:inherit;position:relative;animation:ntItem .3s ease backwards}
.nt-item:hover{background:var(--surface-soft)}
.nt-item.is-unread{background:#F8FBFF}
.nt-item.is-unread:hover{background:var(--blue-tint)}
@keyframes ntItem{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.nt-ic{flex:0 0 32px;height:32px;border-radius:10px;display:grid;place-items:center}
.nt-ic--red{background:#FEE2E2;color:#B91C1C}
.nt-ic--amber{background:var(--amber-bg);color:var(--amber-fg)}
.nt-ic--blue{background:var(--blue-bg);color:var(--blue-fg)}
.nt-ic--green{background:var(--green-bg);color:var(--green-fg)}
.nt-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.nt-title{font-size:13.5px;font-weight:500;color:var(--ink)}
.nt-item.is-unread .nt-title{font-weight:650}
.nt-text{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-when{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.nt-new{flex:0 0 8px;height:8px;margin-top:6px;border-radius:50%;background:var(--blue)}
.nt-empty{padding:36px 20px;text-align:center;color:var(--green-fg)}
.nt-empty div{margin-top:8px;font-weight:600;color:var(--ink)}
.nt-empty span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-4)}

/* ── Avatar photo + profile card ────────────── */
.avatar{background-size:cover;background-position:center;transition:box-shadow .18s ease,transform .18s ease}
.avatar.has-photo{color:transparent !important;background-color:#CBD5E1}
.topbar .pr-trigger{cursor:pointer}
.topbar .pr-trigger:hover{box-shadow:0 0 0 3px rgba(37,99,235,.25);transform:scale(1.05)}
.topbar .pr-trigger:focus-visible{outline:none;box-shadow:var(--ring)}

.pr-card{position:fixed;z-index:90;width:300px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:18px;transform-origin:calc(100% - 18px) 0}
.pr-card[hidden]{display:none}
.pr-card.is-open{animation:ntIn .22s cubic-bezier(.2,.8,.3,1.15)}
.pr-card.is-drop{outline:2px dashed var(--blue);outline-offset:-6px}
.pr-top{display:flex;gap:14px;align-items:center}
.pr-photo{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;flex:0 0 72px}
.pr-av{width:72px;height:72px;flex:0 0 72px;font-size:24px}
.pr-cam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);box-shadow:var(--shadow-btn);transition:transform .2s ease,color .2s ease}
.pr-photo:hover .pr-cam{transform:scale(1.12) rotate(-8deg);color:var(--blue)}
.pr-photo:hover .pr-av{box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.pr-photo:focus-visible{outline:none;box-shadow:var(--ring)}
.pr-card.is-busy .pr-av{animation:prPulse 1s ease-in-out infinite}
@keyframes prPulse{50%{opacity:.55}}
.pr-who{min-width:0}
.pr-name{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-mail{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-role{font-size:12px;color:var(--ink-4);margin-top:2px}
.pr-actions{display:flex;gap:8px;margin-top:16px}
.pr-actions [hidden]{display:none}
.pr-msg{margin-top:10px;font-size:12px;color:var(--ink-4)}
.pr-msg--ok{color:var(--green-fg)}
.pr-msg--bad{color:#B91C1C}

@media (prefers-reduced-motion:reduce){
  .bell .dot.is-on,.bell.is-ringing svg,.nt-panel.is-open,.nt-item,.pr-card.is-open,.pr-card.is-busy .pr-av{animation:none}
}