/* Comentários, @menções e central de notificações (notificacoes.js) */

/* menção destacada dentro de textos */
.mn{color:hsl(var(--primary));font-weight:700;background:hsl(var(--primary)/.12);border-radius:4px;padding:0 3px}

/* lista de pessoas do autocomplete */
.mn-pop{position:fixed;z-index:92;min-width:230px;max-width:min(320px,calc(100vw - 16px));padding:6px;border-radius:12px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.mn-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mn-opt[aria-selected=true],.mn-opt:hover{background:hsl(var(--primary)/.16)}
.mn-opt .avatar{width:28px;height:28px;font-size:11px;flex-shrink:0}
.mn-n{display:flex;flex-direction:column;min-width:0}
.mn-n strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* comentários */
.cm-list{display:flex;flex-direction:column;gap:12px}
.cm-item{display:flex;gap:10px;align-items:flex-start}
.cm-item .avatar{width:32px;height:32px;font-size:12px;flex-shrink:0}
.cm-body{min-width:0;flex:1}
.cm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-head strong{font-size:14px}
.cm-del{margin-left:auto;width:28px;height:28px}
.cm-text{margin-top:2px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.cm-new{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.cm-new .btn{align-self:flex-end}

/* sino: toque rápido ao chegar notificação nova */
.bell-wrap.is-ring .icon-btn{animation:ntRing .7s ease}
.bell-wrap.is-ring .bell-badge{animation:ntPop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes ntRing{0%,100%{transform:none}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}
@keyframes ntPop{from{transform:scale(.4)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bell-wrap.is-ring .icon-btn,.bell-wrap.is-ring .bell-badge{animation:none}}

/* gaveta */
.nt-tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:hsl(var(--fg)/.07);margin-bottom:10px}
.nt-tab{flex:1;min-height:36px;border:0;border-radius:8px;background:none;color:hsl(var(--muted-fg));font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.nt-tab[aria-selected=true]{background:hsl(var(--card));color:hsl(var(--fg));box-shadow:0 1px 4px rgb(0 0 0/.25)}
.nt-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:2px;border-radius:9px;background:hsl(var(--primary)/.2);color:hsl(var(--fg));font-size:11px;line-height:18px}
.nt-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px}
.nt-bar .link-btn[disabled]{opacity:.4;cursor:default}
.nt-list{display:flex;flex-direction:column;gap:6px}
.nt-item{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;border-radius:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:hsl(var(--fg)/.04);border:1px solid hsl(var(--fg)/.1)}
.nt-item:hover,.nt-item:focus-visible{background:hsl(var(--fg)/.09);outline:0}
.nt-item.is-new{background:hsl(var(--primary)/.1);border-color:hsl(var(--primary)/.4)}
.nt-ic{flex-shrink:0;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:hsl(var(--fg)/.08);color:hsl(var(--primary))}
.t-DEADLINE .nt-ic,.t-PEND .nt-ic{color:hsl(var(--amber))}
.nt-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nt-top{display:flex;justify-content:space-between;gap:8px}
.nt-type{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--muted-fg))}
.nt-main strong{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.nt-text{font-size:13px;color:hsl(var(--muted-fg));overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.25)}
.nt-item.is-new .nt-top .xs{margin-right:16px}
@media(max-width:639px){.nt-item{min-height:64px}.nt-tab{min-height:44px}}