/* Notification bell & dropdown */
.notif-wrap{
  position:relative;
  display:flex;align-items:center;
  flex-shrink:0;
  margin-right:8px;
}

.notif-trigger{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;
  background:rgba(140,106,62,.15);
  border:1px solid rgba(140,106,62,.35);
  color:var(--bronze);
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
  text-decoration:none;
  padding:0;
}
.notif-trigger:hover{
  background:rgba(140,106,62,.25);
  border-color:rgba(140,106,62,.55);
  color:#fff;
}
.notif-trigger svg{width:20px;height:20px}

/* Unread indicator (red dot) */
.notif-dot{
  position:absolute;top:6px;right:6px;
  width:9px;height:9px;
  border-radius:50%;
  background:#d94040;
  border:2px solid var(--charcoal);
  pointer-events:none;
  display:none;
}
.notif-dot.visible{display:block}

/* Dropdown panel — positioned at body level via JS */
.notif-dropdown{
  position:fixed;
  width:min(380px, calc(100vw - 24px));
  background:var(--graphite);
  border:1px solid rgba(140,106,62,.30);
  border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:200;
  overflow:hidden;
  pointer-events:none;
}
.notif-dropdown.open{
  opacity:1;visibility:visible;transform:translateY(0);
  pointer-events:auto;
}

/* Dropdown header */
.notif-dropdown-header{
  padding:14px 18px;
  border-bottom:1px solid rgba(181,183,185,.10);
  display:flex;align-items:center;justify-content:space-between;
}
.notif-dropdown-title{
  font-weight:700;font-size:14px;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.notif-header-actions{
  display:flex;align-items:center;gap:4px;
}
.notif-view-all{
  font-size:12px;color:var(--bronze);
  text-decoration:none;padding:4px 8px;
  border-radius:6px;
  transition:background .15s,color .15s;
}
.notif-view-all:hover{
  background:rgba(140,106,62,.15);color:#fff;text-decoration:none;
}
.notif-count-badge{
  font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:10px;
  background:rgba(217,64,64,.18);
  color:#d94040;
  line-height:1.3;
}
.notif-mark-read{
  font-size:12px;color:var(--bronze);
  background:none;border:none;
  cursor:pointer;padding:4px 8px;
  border-radius:6px;
  transition:background .15s,color .15s;
}
.notif-mark-read:hover{
  background:rgba(140,106,62,.15);color:#fff;
}

/* Filter row */
.notif-filter-row{
  display:flex;gap:0;padding:0 14px;
  border-bottom:1px solid rgba(181,183,185,.08);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.notif-filter-btn{
  padding:8px 12px;
  font-size:11px;font-weight:650;
  color:var(--muted);
  background:none;border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.notif-filter-btn:hover{color:#fff}
.notif-filter-btn.active{
  color:var(--bronze);
  border-bottom-color:var(--bronze);
}

/* Notification list */
.notif-list{
  max-height:360px;
  overflow-y:auto;
  padding:6px 0;
}
.notif-list::-webkit-scrollbar{width:4px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{background:rgba(140,106,62,.3);border-radius:4px}

/* Individual notification item */
.notif-item{
  display:flex;gap:12px;
  padding:12px 18px;
  cursor:pointer;
  transition:background .15s;
  text-decoration:none;
  color:inherit;
  position:relative;
}
.notif-item:hover{background:rgba(140,106,62,.10);text-decoration:none}
.notif-item.unread{background:rgba(140,106,62,.06)}
.notif-item.unread::before{
  content:"";
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--bronze);
}

.notif-item-icon{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.notif-item-icon svg{width:16px;height:16px}
.notif-item-icon.icon-action{background:rgba(217,64,64,.15);color:#d94040}
.notif-item-icon.icon-project{background:rgba(90,160,90,.15);color:#7cb57c}
.notif-item-icon.icon-assigned{background:rgba(140,106,62,.18);color:var(--bronze)}
.notif-item-icon.icon-mention{background:rgba(90,130,180,.15);color:#7caed4}
.notif-item-icon.icon-system{background:rgba(181,183,185,.12);color:var(--ash)}

.notif-item-body{flex:1;min-width:0}
.notif-item-text{
  font-size:13px;color:var(--text);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notif-item-text strong{color:#fff;font-weight:650}
.notif-item-source{
  font-size:11px;color:var(--bronze);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notif-item-time{
  font-size:11px;color:var(--muted);margin-top:3px;
}

/* Dropdown footer */
.notif-dropdown-footer{
  padding:10px 18px;
  border-top:1px solid rgba(181,183,185,.10);
  text-align:center;
}
.notif-dropdown-footer a{
  font-size:13px;font-weight:600;
  color:var(--bronze);text-decoration:none;
  transition:color .15s;
}
.notif-dropdown-footer a:hover{color:#fff;text-decoration:none}

/* Empty state */
.notif-empty{
  padding:30px 18px;text-align:center;
  color:var(--muted);font-size:13px;
  line-height:1.55;
}
.notif-empty svg{
  width:28px;height:28px;margin:0 auto 8px;display:block;opacity:.4;
}

/* Notification overlay for mobile — at body level */
.notif-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:190;
}
.notif-overlay.open{display:block}

/* Mobile: keep bell visible */
@media(max-width:900px){
  .notif-wrap{margin-right:6px}
  .notif-trigger{width:44px;height:36px}
  .notif-trigger svg{width:18px;height:18px}
}

/* Mobile: bottom sheet */
@media(max-width:520px){
  .notif-dropdown{
    width:100%;
    border-radius:var(--r) var(--r) 0 0;
    transform:translateY(10px);
    max-height:80vh;
    overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .notif-dropdown.open{transform:translateY(0)}
  .notif-list{max-height:50vh}
}

/* Mobile field optimization */
@media(max-width:900px){
  .notif-trigger{width:44px;height:44px}
  .notif-item{padding:14px 18px;min-height:48px}
  .notif-mark-read{min-height:44px;padding:8px 14px;font-size:13px}
  .notif-dropdown-footer a{min-height:44px;display:inline-flex;align-items:center;padding:10px 14px;font-size:14px}
  .notif-item-text{font-size:14px;line-height:1.5;-webkit-line-clamp:3}
  .notif-item-time{font-size:12px}
  .notif-dropdown-title{font-size:15px}
  .notif-item-icon{width:40px;height:40px}
  .notif-item-icon svg{width:20px;height:20px}
  .notif-filter-btn{padding:10px 12px;font-size:12px}
}