.notification-dropdown-container{display:inline-block;position:relative}.notification-btn{border-radius:var(--radius-sm);cursor:pointer;color:var(--calico-slate-500);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex;position:relative}.notification-btn:hover{background:var(--calico-slate-100);color:var(--calico-slate-700);transform:translateY(-1px)}.notification-badge{background:var(--calico-danger);pointer-events:none;border:1.5px solid #fff;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;position:absolute;top:0;right:0}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.notification-dropdown{border-radius:var(--radius-sm);width:400px;max-height:min(520px,85vh);box-shadow:var(--elev-3);z-index:1000;background:#fff;border:1px solid #28965624;margin-top:8px;animation:.2s ease-out slideDown;position:absolute;top:100%;right:0;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-header{border-bottom:1px solid var(--calico-slate-200);background:var(--calico-slate-50);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.notification-dropdown--tutor .notification-header{background:linear-gradient(180deg, var(--calico-blue-tutor-soft) 0%, #eaf6fdb3 100%)}.notification-dropdown--student .notification-header{background:linear-gradient(180deg, var(--calico-orange-soft) 0%, #fffdf8b3 100%)}.notification-title{font-size:var(--type-body);color:var(--calico-ink);align-items:center;gap:8px;margin:0;font-weight:600;display:flex}.notification-actions{align-items:center;gap:8px;display:flex}.mark-all-read-btn,.close-dropdown-btn{border-radius:var(--radius-xs);cursor:pointer;color:var(--calico-slate-500);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.mark-all-read-btn:hover{background:var(--calico-green-muted);color:var(--calico-green-success-dark)}.close-dropdown-btn:hover{background:var(--calico-danger-soft);color:var(--calico-danger)}.notification-loading{color:var(--calico-slate-500);flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;display:flex}.loading-spinner{border:2px solid var(--calico-slate-100);border-top:2px solid var(--calico-orange);border-radius:50%;width:24px;height:24px;margin-bottom:12px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.notification-list{max-height:350px;overflow-y:auto}.notification-item{border-bottom:1px solid var(--calico-slate-50);cursor:pointer;align-items:flex-start;gap:12px;padding:16px 20px;transition:all .2s;display:flex;position:relative}.notification-item:hover{background:var(--calico-slate-50)}.notification-item.unread{background:linear-gradient(90deg, var(--calico-orange-soft) 0%, #fffdf8 12%);border-left:3px solid var(--calico-orange)}.notification-item:last-child{border-bottom:none}.notification-icon-container{border-radius:var(--radius-sm);background:var(--calico-slate-100);flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.notification-icon{width:18px;height:18px}.notification-icon.pending{color:var(--calico-warning-text)}.notification-icon.accepted{color:var(--calico-green-success)}.notification-icon.rejected{color:var(--calico-danger)}.notification-icon.reminder{color:var(--calico-blue-tutor)}.notification-icon.message{color:#8b5cf6}.notification-icon.default{color:var(--calico-slate-500)}.notification-content{flex:1;min-width:0}.notification-header-item{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.notification-type{font-size:var(--type-caption);color:var(--calico-slate-700);font-weight:600}.notification-time{font-size:var(--type-xs);color:var(--calico-slate-400);font-weight:500}.notification-message{font-size:var(--type-label);color:var(--calico-slate-700);margin:0 0 8px;line-height:1.4}.notification-student{font-size:var(--type-xs);color:var(--calico-body-muted);align-items:center;gap:6px;font-weight:500;display:flex}.notification-unread-indicator{background:var(--calico-orange);border-radius:50%;flex-shrink:0;width:8px;height:8px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.notification-empty,.notification-error{color:var(--calico-slate-400);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:48px 24px;display:flex}.notification-empty svg,.notification-error svg{color:var(--calico-slate-300);opacity:.7;margin-bottom:16px}.notification-empty p,.notification-error p{font-size:var(--type-body-sm);color:var(--calico-body-muted);margin:0 0 6px;font-weight:600}.notification-empty span{font-size:var(--type-caption);color:var(--calico-slate-400);max-width:240px;line-height:1.5}.notification-footer{border-top:1px solid var(--calico-slate-100);background:var(--calico-slate-50);padding:16px 20px}.view-all-btn{background:var(--calico-green);color:#fff;border-radius:var(--radius-sm);width:100%;font-size:var(--type-label);cursor:pointer;border:none;padding:10px 16px;font-weight:600;transition:all .2s}.view-all-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}@media (max-width:480px){.notification-dropdown-container{position:static}.notification-dropdown{width:auto;max-width:none;position:absolute;top:100%;left:12px;right:12px}.notification-item,.notification-header,.notification-footer{padding:12px 16px}}.notification-list::-webkit-scrollbar{width:4px}.notification-list::-webkit-scrollbar-track{background:var(--calico-slate-100)}.notification-list::-webkit-scrollbar-thumb{background:var(--calico-slate-300);border-radius:2px}.notification-list::-webkit-scrollbar-thumb:hover{background:var(--calico-slate-400)}