/* v654 - notifications panel: compact rows, expand, swipe, select mode. Remove this file's <link> to roll back the look. */
.notif-panel.np{width:min(420px,calc(100vw - 20px));max-height:min(78vh,680px)}
.np .notif-panel-head{padding:8px 10px 8px 14px;gap:8px;min-height:52px}
.np .notif-panel-head b{white-space:nowrap}
.np .notif-panel-actions,.np .np-hsa{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.np .notif-panel-head button.np-ib{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:38px;height:38px;padding:0 9px;border-radius:10px;background:transparent;border:0;color:var(--navy-700);font-size:15px;text-decoration:none;cursor:pointer}
.np .np-ib span{font-size:12px;font-weight:700}
.np .notif-panel-head button.np-ib:active,.np .notif-panel-head button.np-ib.on{background:var(--gold-100)}
.np-hs{display:flex;align-items:center;gap:4px}
.np .np-hs b{font-size:14px}
.np.np-selmode .notif-panel-head{background:var(--navy-700);color:#fff;border-bottom-color:transparent}
.np.np-selmode .notif-panel-head button.np-ib{color:#fff}
.np.np-selmode .notif-panel-head button.np-ib.on{background:rgba(255,255,255,.18)}
.np .notif-panel-list{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.np-sw{position:relative;overflow:hidden;border-bottom:1px solid var(--paper-dim)}
.np-ul,.np-ur{position:absolute;top:0;bottom:0;display:flex}
.np-ul{left:0;right:0;align-items:center;padding-left:22px;background:#D64545;color:#fff;font-size:17px}
.np-ur{right:0;align-items:stretch}
.np-ur button{width:58px;border:0;color:#fff;background:var(--navy-700);font-size:15px;cursor:pointer}
.np-ur button[data-a=read]{background:#2EA05A}
.np-ur button[data-a=copy]{background:#8A94A3}
.np .notif-item.np-row{position:relative;z-index:1;display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:10px 12px;border:0;background:var(--card,#fff);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.np .notif-item.np-row.unread{background:var(--gold-100)}
.np .notif-item.np-row.is-sel{background:#E6ECF5}
.np .np-row.drag{cursor:grabbing}
.np .np-row i{margin:0;font-size:inherit;color:inherit}
.np-ic{position:relative;width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--navy-700);display:grid;place-items:center;font-size:13px}
.np-row.unread .np-ic{background:#fff;color:var(--gold-500)}
.np-ic .np-ck{position:absolute;inset:0;display:none;place-items:center;border-radius:50%;font-size:12px}
.np-selmode .np-ic>i:first-child{visibility:hidden}
.np-selmode .np-ic .np-ck{display:grid;border:2px solid #B9C2CF;color:transparent;background:#fff}
.np-selmode .np-row.is-sel .np-ic .np-ck{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.np-tx{min-width:0}
.np-t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-row.unread .np-t{font-weight:800}
.np-t.c2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.np-s{font-size:12px;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-tm{font-size:11px;color:var(--muted);padding-top:2px;white-space:nowrap}
.np-more{display:none;grid-column:2/4;padding-top:8px}
.np-row.is-open .np-more{display:block}
.np-row.is-open .np-s{display:none}
.np-row.is-open .np-t{white-space:normal}
.np-full{font-size:12.5px;color:var(--ink);line-height:1.5;white-space:pre-line;word-break:break-word}
.np-meta{font-size:11px;color:var(--muted);margin-top:6px}
.np .np-row.bk-go .np-s{padding-right:30px}
.np .np-go{position:absolute;right:11px;bottom:9px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--paper-dim,#E3E8EF);background:#fff;color:var(--navy-700);display:inline-grid;place-items:center;font-size:9.5px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(15,35,70,.08);transition:background .15s,color .15s,transform .15s}
.np .np-go:active{background:var(--navy-700);color:#fff;transform:scale(.92)}
.np .np-row.unread .np-go{border-color:var(--gold-500,#C9A24B);color:var(--gold-500,#B8892B)}
@media (hover:hover){.np .np-go:hover{background:var(--navy-700);color:#fff}}
.np .np-hint{margin-top:8px;font-size:12px;font-weight:800;color:var(--navy-700);display:flex;align-items:center;gap:6px}.np .np-hint i{font-size:10px}
.np-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.np-acts button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--paper-dim);background:#fff;color:var(--navy-700);font-size:12px;font-weight:700;cursor:pointer}
.np-acts button[data-a=open]{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.np-acts .dg{color:#D64545;margin-left:auto}
.np-bar{display:none}
.np-selmode .np-bar:not(:empty){display:flex;border-top:1px solid var(--paper-dim);background:#fff}
.np-bar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border:0;background:none;color:var(--navy-700);font-size:16px;cursor:pointer}
.np-bar button span{font-size:10.5px;font-weight:700}
.np-bar .dg{color:#D64545}
.np-undo{display:none;position:absolute;left:10px;right:10px;bottom:10px;z-index:3;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:#101A26;color:#fff;font-size:12.5px}
.np-undo.on{display:flex}
.np-undo button{background:none;border:0;color:var(--gold-500);font-weight:800;font-size:12.5px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.np .np-row{transition:none!important}}
/* v655 search bar */
.np-sbar{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;border-radius:12px;background:var(--paper);color:var(--muted)}
.np .np-q{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px;-webkit-appearance:none;appearance:none}
.np .np-q::-webkit-search-cancel-button{display:none}
.np .notif-panel-head button.np-qx{display:grid;place-items:center;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:15px;text-decoration:none;cursor:pointer}
.np .np-qx[hidden]{display:none}
/* v658 */
.np-t.bad{color:#C0392B}
.np-s.hot{color:#C2410C;font-weight:700}
/* v660 colours */
.np-s.hot{color:inherit;font-weight:inherit}
.np .c-blue{color:#1F5FBF}.np .c-red{color:#C0392B}.np .c-org{color:#C2410C}.np .c-vio{color:#6D3FC4}.np .c-teal{color:#0F8A7E}.np .c-gold{color:#A8741A}.np .c-grn{color:#1E8E4E}.np .mu.c-mu{color:var(--muted)}
.np .np-row .np-ic.c-blue{background:#E4EEFB}.np .np-row .np-ic.c-red{background:#FBE6E3}.np .np-row .np-ic.c-org{background:#FFEBDD}.np .np-row .np-ic.c-vio{background:#EFE8FB}.np .np-row .np-ic.c-teal{background:#DDF3F0}.np .np-row .np-ic.c-gold{background:#FBF0D6}.np .np-row .np-ic.c-grn{background:#E0F4E8}
.np .g{color:#1E8E4E;font-weight:800}.np .r{color:#C0392B;font-weight:800}.np .a{color:#B7791F;font-weight:800}
.np .b{color:#1F5FBF;font-weight:700}.np .o{color:#C2410C;font-weight:800}.np .u{color:var(--navy-700);font-weight:800}.np .u2{color:var(--navy-700);font-weight:700}
.np .nmx{color:var(--ink);font-weight:600}.np .cox{color:var(--muted)}.np .mu{color:var(--muted)}.np .bd{font-weight:800}
.np .pu{background:#EFE8FB;color:#6D3FC4;border-radius:6px;padding:0 5px;font-weight:800;font-size:11px}
.np .tm2{background:#E8EFFA;color:#1F5FBF;border-radius:6px;padding:0 5px;font-weight:700}
.np .tm2.hot{background:#FFEBDD;color:#C2410C;font-weight:800}
.np .sp{font-style:normal;color:#B9C2CF;margin:0 4px}
.np .np-t b{font-weight:800}
/* v661 glance view: unit list, Client/Solo chip, urgency colours, left bar, legend */
.np .np-s{display:flex;align-items:center;flex-wrap:nowrap;gap:0;white-space:nowrap;overflow:hidden;font-size:12px;line-height:1.5}
.np .np-s>*{flex:none}
.np .np-s>.mu:last-child,.np .np-s>.sp+.mu:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.np .np-s .sp{margin:0 3px}
.np .u{font-weight:800;letter-spacing:.01em}
.np .ux{color:#3B4A63;font-weight:700}
.np .vt{border-radius:6px;padding:0 5px;font-weight:800;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;line-height:1.55}
.np .vt.client{background:#13294B;color:#fff}
.np .vt.solo{background:#EFE8FB;color:#6D3FC4}
.np .dt{font-weight:700}
.np .dt.tl-crit{color:#C0392B}.np .dt.tl-soon{color:#C2410C}.np .dt.tl-mid{color:#92400E}.np .dt.tl-ok{color:#166534}
.np .dt.tl-past,.np .dt.tl-na{color:var(--muted);font-weight:600}
.np .cd{border-radius:6px;padding:0 5px;font-weight:800;line-height:1.55}
.np .cd.tl-crit{background:#FBE0DC;color:#B42318}
.np .cd.tl-soon{background:#FFEAD6;color:#C2410C}
.np .cd.tl-mid{background:#FEF0C3;color:#92400E}
.np .cd.tl-ok{background:#DDF3E5;color:#166534}
.np .cd.tl-past,.np .cd.tl-na{background:#EEF0F3;color:#6B7280;font-weight:700}
.np .cd.g{background:#DDF3E5;color:#166534}
.np .cd.r{background:#FBE0DC;color:#B42318}
.np .cd.a{background:#FEF0C3;color:#92400E}
.np .notif-item.np-row.lv-crit{box-shadow:inset 4px 0 0 #D64545}
.np .notif-item.np-row.lv-soon{box-shadow:inset 4px 0 0 #F08A2B}
.np .notif-item.np-row.lv-mid{box-shadow:inset 4px 0 0 #E5B21A}
.np .notif-item.np-row.lv-ok{box-shadow:inset 4px 0 0 #2EA05A}
.np .notif-item.np-row.lv-done{box-shadow:inset 4px 0 0 #7CC79A}
.np .notif-item.np-row.lv-past,.np .notif-item.np-row.lv-off{box-shadow:inset 4px 0 0 #CBD2DB}
.np .notif-item.np-row.lv-crit:not(.is-sel){background:#FFF3F1}
.np .notif-item.np-row.lv-soon:not(.is-sel):not(.unread){background:#FFF9F3}
.np .np-row.lv-past .np-t,.np .np-row.lv-off .np-t{opacity:.78}
.np .np-row.lv-off .dt{text-decoration:line-through}
.np .np-leg{display:none;flex:none;align-items:center;justify-content:space-between;gap:6px;padding:6px 12px;border-top:1px solid var(--paper-dim);background:var(--card,#fff);font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden}
.np .np-leg span{display:inline-flex;align-items:center;gap:4px}
.np .np-leg .k{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0}
.np .np-leg .k.crit{background:#D64545}.np .np-leg .k.soon{background:#F08A2B}.np .np-leg .k.mid{background:#E5B21A}.np .np-leg .k.ok{background:#2EA05A}.np .np-leg .k.past{background:#CBD2DB}.np .np-leg .k.done{background:#7CC79A}
.np:not(.np-selmode) .np-leg{display:flex}
.np.np-selmode .np-leg{display:none}

/* v674: open notice - the Open icon shares the sender / time line (no separate hint line) */
.np .np-row.is-open .np-meta{min-height:22px;line-height:22px;margin-top:4px;padding-right:32px;box-sizing:border-box}
.np .np-row.is-open .np-go{bottom:10px}

/* v683 - the round icon opens the notice (js/326 click): on desktop it "calls" for the tap when the row or the icon is hovered.
   Row hover = soft attention (pulse ring + glyph ring/turn); icon hover = stronger (lift, bigger, deeper ring). Not in select mode, not for reduced-motion. */
@media (hover:hover) and (pointer:fine){
  #notifPanel:not(.np-selmode) .np-row .np-ic{ cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease; }
  #notifPanel:not(.np-selmode) .np-row .np-ic::after{
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0; border:2px solid currentColor;
  }
  #notifPanel:not(.np-selmode) .np-row:hover .np-ic::after{ animation:npRing 1.5s ease-out infinite; }
  #notifPanel:not(.np-selmode) .np-row:hover .np-ic{ transform:scale(1.08); }
  #notifPanel:not(.np-selmode) .np-row:hover .np-ic>i:first-child{ animation:npBell 1.5s ease-in-out infinite; transform-origin:50% 12%; }
  #notifPanel:not(.np-selmode) .np-row:hover .np-ic>i.fa-key:first-child{ animation:npKey 1.5s ease-in-out infinite; transform-origin:50% 50%; }
  #notifPanel:not(.np-selmode) .np-row .np-ic:hover{ transform:scale(1.2); box-shadow:0 4px 12px rgba(22,45,76,.22); }
  #notifPanel:not(.np-selmode) .np-row .np-ic:hover::after{ animation-duration:1s; }
  #notifPanel:not(.np-selmode) .np-row .np-ic:active{ transform:scale(.94); }
}
@keyframes npRing{ 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(1.65); opacity:0; } }
@keyframes npBell{ 0%,55%,100%{ transform:rotate(0); } 10%{ transform:rotate(16deg); } 20%{ transform:rotate(-14deg); } 30%{ transform:rotate(10deg); } 40%{ transform:rotate(-7deg); } 48%{ transform:rotate(3deg); } }
@keyframes npKey{ 0%,55%,100%{ transform:rotate(0) scale(1); } 15%{ transform:rotate(-28deg) scale(1.12); } 35%{ transform:rotate(22deg) scale(1.12); } 48%{ transform:rotate(0) scale(1); } }
@media (prefers-reduced-motion:reduce){
  #notifPanel .np-row .np-ic::after, #notifPanel .np-row .np-ic>i:first-child{ animation:none!important; }
}