/* ═══════════════════════════════════════════
   NOTIFICATIONS v3 — CSS
═══════════════════════════════════════════ */

/* ── Toast container ─────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
@media(max-width:480px) {
    #toast-container { bottom: 12px; right: 12px; left: 12px; align-items: stretch; }
}

/* ── Toast item ──────────────────────────────── */
.toast-notification {
    pointer-events: auto;
    width: 340px; max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px -8px rgba(15,23,42,.22), 0 0 0 1px rgba(226,232,240,.8);
    display: flex; align-items: flex-start;
    padding: 14px 16px; gap: 12px;
    transform: translateX(110%); opacity: 0;
    transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s;
    cursor: pointer;
}
.toast-notification.show { transform: translateX(0); opacity: 1; }
.toast-notification.hide { transform: translateY(12px); opacity: 0; transition: .25s; }
@media(max-width:480px) {
    .toast-notification { width:100%; max-width:100%; transform:translateY(120%); border-radius:14px; }
    .toast-notification.show  { transform:translateY(0); }
    .toast-notification.hide  { transform:translateY(12px); }
}

.toast-content { flex:1; min-width:0; }
.toast-title   { font-size:13.5px; font-weight:700; color:#1e293b; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast-message { font-size:12.5px; color:#64748b; line-height:1.4; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Notification icon (shared: toast + dropdown) ── */
.noti-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.noti-icon.type-system      { background: linear-gradient(135deg,#fce7f3,#fbcfe8); color: #db2777; }
.noti-icon.type-course      { background: linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-soft)); color: var(--color-primary); }
.noti-icon.type-payment     { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #059669; }
.noti-icon.type-account     { background: linear-gradient(135deg,#f3e8ff,#e9d5ff); color: var(--color-accent); }
.noti-icon.type-security    { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #d97706; }
.noti-icon.type-streak      { background: linear-gradient(135deg,#ffedd5,#fed7aa); color: #ea580c; }
.noti-icon.type-achievement { background: linear-gradient(135deg,#fef9c3,#fef08a); color: #ca8a04; }
.noti-icon.type-default     { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); color: #64748b; }
/* Social events */
.noti-icon.type-social      { background: linear-gradient(135deg,#cffafe,#a5f3fc); color: #0891b2; }
.noti-icon.type-like        { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #dc2626; }
.noti-icon.type-save        { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color: #1d4ed8; }
.noti-icon.type-milestone   { background: linear-gradient(135deg,#fef9c3,#fde68a); color: #ca8a04; }

/* ── Navbar bell ─────────────────────────────── */
.nav-bell-wrapper { position: relative; display: flex; align-items: center; }
.nav-bell {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: #475569; font-size: 18px; cursor: pointer;
    transition: background .2s, color .2s;
}
.nav-bell:hover { background: #f1f5f9; color: #1e293b; }
.nav-bell-badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--color-warning); color: #fff; font-size: 10px; font-weight: 800;
    min-width: 17px; height: 17px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; box-shadow: 0 0 0 2px #fff; z-index: 10;
}

/* ── Dropdown wrap ───────────────────────────── */
.noti-dd-wrap { position: relative; display: inline-flex; }
.noti-dd-wrap::after {
    content:''; position:absolute; top:100%; right:0;
    width:380px; height:16px; background:transparent; z-index:100;
}
.noti-dd-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 380px; background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 64px -12px rgba(15,23,42,.18), 0 0 0 1px rgba(226,232,240,.5);
    opacity: 0; visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transform-origin: top right;
    transition: opacity .2s cubic-bezier(.16,1,.3,1),
                visibility .2s,
                transform .2s cubic-bezier(.16,1,.3,1);
    z-index: 200; pointer-events: none;
}
.noti-dd-panel.active {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Dropdown header ─────────────────────────── */
.noti-dd-header {
    padding: 16px 18px 14px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}
.noti-dd-title { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.noti-dd-readall {
    font-size: 12px; color: var(--hsk-primary, var(--color-warning));
    font-weight: 600; cursor: pointer;
    background: none; border: none; padding: 4px 8px; border-radius: 6px;
    transition: background .15s;
}
.noti-dd-readall:hover { background: var(--color-warning-soft); }

/* ── Notification list ───────────────────────── */
.noti-dd-list {
    max-height: 420px; overflow-y: auto;
    padding: 6px 0; margin: 0; list-style: none;
    scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
.noti-dd-list::-webkit-scrollbar { width: 4px; }
.noti-dd-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* ── Notification item ───────────────────────── */
.noti-item {
    display: flex; align-items: flex-start;
    padding: 12px 18px; gap: 13px;
    text-decoration: none; color: inherit;
    transition: background .15s; cursor: pointer;
    border-left: 3px solid transparent;
    position: relative;
}
.noti-item:hover { background: #f8fafc; }
.noti-item.unread { border-left-color: var(--hsk-primary, var(--color-warning)); background: #fef8f8; }
.noti-item.unread:hover { background: var(--color-warning-soft); }

.noti-item-content { flex: 1; min-width: 0; padding-top: 1px; }
.noti-item-title {
    font-weight: 700; font-size: 13.5px; color: #0f172a;
    margin-bottom: 3px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.noti-item-msg {
    font-size: 12.5px; color: #64748b; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.noti-item-time { font-size: 11.5px; color: #94a3b8; margin-top: 5px; font-weight: 500; }
.noti-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hsk-primary, var(--color-warning));
    position: absolute; top: 16px; right: 14px;
    box-shadow: 0 0 6px rgba(20, 184, 166,.5);
    flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────── */
.noti-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 36px 24px; color: #94a3b8; text-align: center;
}
.noti-empty i { font-size: 36px; margin-bottom: 10px; opacity: .4; }
.noti-empty p { font-size: 13px; margin: 0; font-weight: 500; }

/* ── Dropdown footer ─────────────────────────── */
.noti-dd-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 18px; font-size: 13px; font-weight: 700;
    color: var(--hsk-primary, var(--color-warning)); background: #fafafa;
    border-top: 1px solid #f1f5f9; text-decoration: none;
    transition: background .15s;
}
.noti-dd-footer:hover { background: var(--color-warning-soft); color: var(--hsk-primary, var(--color-warning)); }

/* ── Loading skeleton ────────────────────────── */
.noti-skeleton { padding: 12px 18px; }
.noti-sk-row { display: flex; gap: 12px; align-items: flex-start; }
.noti-sk-icon { width:42px; height:42px; border-radius:50%; background:#f1f5f9; flex-shrink:0; animation: sk-pulse 1.5s infinite; }
.noti-sk-lines { flex:1; }
.noti-sk-line  { height:11px; border-radius:6px; background:#f1f5f9; margin-bottom:7px; animation: sk-pulse 1.5s infinite; }
.noti-sk-line.w70 { width:70%; } .noti-sk-line.w50 { width:50%; } .noti-sk-line.w30 { width:30%; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── Mobile ──────────────────────────────────── */
@media(max-width:991px) {
    .noti-dd-wrap::after { display: none; }
    .noti-dd-panel {
        position: fixed !important;
        top: 76px !important; left: 12px !important; right: 12px !important;
        width: auto !important; max-width: 100%;
        transform: translateY(-8px) scale(.98) !important;
        border-radius: 16px;
    }
    .noti-dd-panel.active {
        transform: translateY(0) scale(1) !important;
    }
}