/* Notification bell + dropdown */
[data-notif-toggle] { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:transparent; border:none; cursor:pointer; color:var(--ink); text-decoration:none; transition:background .15s }
[data-notif-toggle]:hover { background:rgba(45,45,45,0.06) }
[data-notif-toggle] svg { width:20px; height:20px; stroke-width:1.6 }
.notif-badge{ position:absolute; top:3px; right:3px; min-width:17px; height:17px; background:#B0503F; color:#fff; border-radius:99px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; border:1.5px solid #fff; }
.notif-badge.hidden{ display:none }

/* Dropdown */
.notif-dropdown{ position:fixed; top:64px; right:20px; width:360px; max-width:calc(100vw - 24px); background:#fff; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,0.14); z-index:500; overflow:hidden; display:none; flex-direction:column; max-height:480px }
.notif-dropdown.open{ display:flex }
.notif-header{ padding:14px 16px 10px; border-bottom:1px solid rgba(45,45,45,0.1); display:flex; align-items:center; justify-content:space-between; }
.notif-header-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; }
.notif-list{ overflow-y:auto; max-height:380px; }
.notif-item{ display:flex; gap:10px; padding:12px 16px; cursor:pointer; border-bottom:1px solid rgba(45,45,45,0.06); transition:background .12s; position:relative; }
.notif-item:last-child{ border-bottom:none }
.notif-item:hover{ background:rgba(45,45,45,0.03) }
.notif-item.unread{ background:rgba(178,110,90,0.04) }
.notif-item.unread::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--terracotta); }
.notif-icon{ width:36px; height:36px; background:#faf7f2; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; flex:0 0 36px; }
.notif-body{ flex:1; min-width:0; }
.notif-title{ font-weight:700; font-size:13px; color:var(--ink); line-height:1.3; margin-bottom:2px; }
.notif-text{ font-size:12px; color:var(--ink-soft); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.notif-time{ font-size:11px; color:var(--ink-faint); margin-top:3px; }
.notif-empty{ padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:13px; }
.notif-all{ display:block; text-align:center; padding:12px; font-size:13px; font-weight:600; color:var(--terracotta); border-top:1px solid rgba(45,45,45,0.08); text-decoration:none; }
.notif-all:hover{ background:rgba(178,110,90,0.04) }

/* Responsive */
@media(max-width:640px){
  .notif-dropdown{ top:56px; right:8px; width:calc(100vw - 16px); max-width:360px; }
}
@media(max-width:480px){
  .notif-badge{ min-width:15px; height:15px; font-size:9px; }
}

/* Mobile: align bell size with other header icons */
@media(max-width:860px){
  [data-notif-toggle]{ width:28px !important; height:28px !important; border-radius:50%; }
  .notif-dropdown{ right:8px; left:8px; width:auto; max-width:none; }
}
@media(max-width:480px){
  [data-notif-toggle]{ width:26px !important; height:26px !important; }
}
@media(max-width:360px){
  [data-notif-toggle]{ width:24px !important; height:24px !important; }
}