/* My PHWO — user notifications (bell, dropdown, popup, toasts). Teal #0D5C63, gold #E8A33D. */
.phwo-un { position: relative; display: inline-flex; align-items: center; --unp: #0D5C63; --ung: #E8A33D; --unink: #14262B; --unmute: #5f6f74; --unline: #e1e9ea; }
.phwo-un [lang="ur"], .phwo-un-modal [lang="ur"], .phwo-un-toast [lang="ur"], .phwo-un-page [lang="ur"], .phwo-un-ur { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; line-height: 1.9; }
.phwo-un-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.phwo-un.is-top .phwo-un-bell { color: #fff; width: 30px; height: 30px; min-width: 30px; }
.phwo-un.is-top { margin-right: .15rem; }
.phwo-un-bell:hover { background: rgba(255, 255, 255, .14); }
.phwo-un-bell:focus-visible { outline: 2px solid var(--ung); outline-offset: 2px; }
.phwo-un-bell.has-unread svg { animation: phwo-un-ring 1.2s ease-in-out 1; transform-origin: 50% 10%; }
.phwo-un-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ung); color: #14262B; font: 700 11px/18px Inter, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #14262B; }
.phwo-un.is-dash { margin-inline-start: auto; }
.phwo-un.is-dash .phwo-un-bell { color: var(--unp); background: #eef6f6; }
.phwo-un.is-dash .phwo-un-badge { box-shadow: 0 0 0 2px #fff; }
.phwo-un.is-float { position: fixed; left: 14px; bottom: 14px; z-index: 9990; }
.phwo-un.is-float .phwo-un-bell { width: 48px; height: 48px; background: var(--unp); color: #fff; box-shadow: 0 8px 24px rgba(13, 92, 99, .35); }
.phwo-acct-me { display: flex; align-items: center; }

/* dropdown */
.phwo-un-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 9995; width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); display: flex; flex-direction: column; background: #fff; color: var(--unink); border-radius: 16px; box-shadow: 0 22px 60px rgba(20, 38, 43, .25); border: 1px solid var(--unline); text-align: start; font-size: .92rem; overflow: hidden; }
.phwo-un-panel[hidden] { display: none; }
.phwo-un.is-dash .phwo-un-panel { left: auto; right: 0; transform: none; }
.phwo-un.is-float .phwo-un-panel { top: auto; bottom: calc(100% + 8px); left: 0; transform: none; }
.phwo-un-panel-head, .phwo-un-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; background: #f3f7f7; }
.phwo-un-panel-foot { border-top: 1px solid var(--unline); font-size: .85rem; }
.phwo-un-panel a, .phwo-un-page a { color: var(--unp) !important; text-decoration: none; }
.phwo-un-panel-foot a { font-weight: 600; }
.phwo-un-link { border: 0; background: none; color: var(--unp); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .3rem; min-height: 32px; }
.phwo-un-sub { color: var(--unmute); font-size: .85em; font-weight: 400; }
.phwo-un-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.phwo-un-item { position: relative; border-bottom: 1px solid var(--unline); }
.phwo-un-item > a { display: flex; gap: .65rem; padding: .75rem 2.2rem .75rem .9rem; color: var(--unink) !important; }
.phwo-un-item > a:hover, .phwo-un-item > a:focus-visible { background: #f6fafa; }
.phwo-un-item.is-unread { background: #fffaf0; }
.phwo-un-item.is-unread.is-high { box-shadow: inset 3px 0 0 var(--ung); }
.phwo-un-ico { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef6f6; font-size: 16px; }
.phwo-un-text { display: grid; gap: .1rem; min-width: 0; color: inherit; text-decoration: none; }
.phwo-un-text strong { font-weight: 600; line-height: 1.5; }
.phwo-un-body { color: #33474c; font-size: .9em; }
.phwo-un-alt { color: var(--unmute); font-size: .8em; }
.phwo-un-text time { color: var(--unmute); font-size: .76rem; }
.phwo-un-dot { position: absolute; top: 50%; right: .8rem; width: 12px; height: 12px; margin-top: -6px; padding: 0; border: 0; border-radius: 50%; background: var(--ung); cursor: pointer; }
.phwo-un-dot::after { content: ""; position: absolute; inset: -12px; }
.phwo-un-empty { padding: 1.2rem .9rem; color: var(--unmute); text-align: center; }
.phwo-un-switch { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; min-height: 32px; }
.phwo-un-switch input { width: 18px; height: 18px; accent-color: var(--unp); }

/* all-notifications tab */
.phwo-un-page-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.phwo-un-list.is-page { border: 1px solid var(--unline, #e1e9ea); border-radius: 14px; overflow: hidden; }
.phwo-un-page { --unp: #0D5C63; --ung: #E8A33D; --unink: #14262B; --unmute: #5f6f74; --unline: #e1e9ea; }

/* popup */
.phwo-un-modal-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 38, 43, .55); animation: phwo-un-fade .2s ease-out; }
.phwo-un-modal { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #14262B; border-radius: 20px; padding: 1.4rem 1.3rem 1.2rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border-top: 5px solid #E8A33D; animation: phwo-un-pop .25s cubic-bezier(.2, .9, .3, 1.2); }
.phwo-un-kicker { margin: 0 2rem .6rem 0; font-weight: 700; color: #0D5C63; }
.phwo-un-modal-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.phwo-un-modal-list li { display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: 12px; background: #f3f7f7; }
.phwo-un-modal-list strong { font-size: 1.05rem; }
.phwo-un-modal-act { display: flex; gap: .6rem; flex-wrap: wrap; }
.phwo-un-modal-act .phwo-btn { flex: 1 1 140px; min-height: 46px; justify-content: center; text-align: center; }
.phwo-un-modal .phwo-btn-primary { background: #0D5C63; color: #fff !important; border-radius: 12px; display: inline-flex; align-items: center; text-decoration: none; }
.phwo-un-x { position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; color: #5f6f74; cursor: pointer; }
.phwo-un-x:hover { background: #f1f4f4; }

/* toasts */
.phwo-un-toasts { position: fixed; right: 14px; bottom: 14px; z-index: 99990; display: grid; gap: .6rem; width: min(360px, calc(100vw - 28px)); }
.phwo-un-toast { position: relative; display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 2.4rem .8rem .8rem; background: #fff; color: #14262B; border-radius: 14px; border-left: 4px solid #0D5C63; box-shadow: 0 14px 40px rgba(20, 38, 43, .22); font-size: .9rem; animation: phwo-un-slide .3s ease-out; transition: opacity .35s, transform .35s; }
.phwo-un-toast .phwo-un-text { color: #14262B !important; text-decoration: none; }
.phwo-un-toast .phwo-un-x { width: 32px; height: 32px; font-size: 1.3rem; top: .3rem; right: .3rem; }
.phwo-un-toast.is-out { opacity: 0; transform: translateY(8px); }

.phwo-un-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
	.phwo-un.is-top .phwo-un-panel { position: fixed; top: 46px; left: 12px; right: 12px; width: auto; transform: none; }
	.phwo-un-toasts { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@keyframes phwo-un-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes phwo-un-fade { from { opacity: 0; } }
@keyframes phwo-un-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes phwo-un-slide { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .phwo-un-bell.has-unread svg, .phwo-un-modal, .phwo-un-toast, .phwo-un-modal-wrap { animation: none; } }

/* [d3-records 8 Oct 2026] All notifications page — ds.css tokens, mobile first, server-rendered list. */
.phwo-un-page { --unp: var(--ds-teal, #0D5C63); --ung: var(--ds-gold, #E8A33D); --unink: var(--ds-ink, #13262b); --unmute: var(--ds-mute, #5b6c70); --unline: var(--ds-line, #e3e8e9); }
.phwo-acct .phwo-un-page.phwo-acct-card { padding: 0; overflow: hidden; border-radius: var(--ds-r-lg, 16px); border: 1px solid var(--unline); box-shadow: var(--ds-sh-1, none); background: #fff; }
.phwo-un-page .phwo-un-page-bar { margin: 0; padding: 8px 12px; gap: 8px; border-bottom: 1px solid var(--unline); background: var(--ds-bg, #f5f7f7); }
.phwo-un-page .phwo-un-page-bar .phwo-btn { min-height: 48px; padding: 0 12px; }
.phwo-un-page .phwo-un-switch { min-height: 48px; font-size: var(--ds-fs-sm, .875rem); color: var(--unink); }
.phwo-un-page .phwo-un-switch input { width: 20px; height: 20px; }
.phwo-un-page .phwo-un-list.is-page { border: 0; border-radius: 0; }
.phwo-un-page .phwo-un-item { border-bottom: 1px solid var(--unline); }
.phwo-un-page .phwo-un-item:last-child { border-bottom: 0; }
.phwo-un-page .phwo-un-item > a { min-height: 64px; padding: 14px 16px; padding-inline-end: 40px; align-items: flex-start; }
.phwo-un-page .phwo-un-item.is-unread { background: var(--ds-gold-50, #fdf5e7); }
.phwo-un-page .phwo-un-item.is-unread > a::after { content: ""; position: absolute; inset-inline-end: 16px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--ung); }
.phwo-un-page .phwo-un-item.is-unread.is-high { box-shadow: inset 3px 0 0 var(--ung); }
[dir=rtl] .phwo-un-page .phwo-un-item.is-unread.is-high { box-shadow: inset -3px 0 0 var(--ung); }
.phwo-un-page .phwo-un-text { gap: 2px; }
.phwo-un-page .phwo-un-text strong { font-size: var(--ds-fs-sm, .875rem); color: var(--unink); }
.phwo-un-page .phwo-un-text > span { color: var(--ds-ink-2, #3a4b50); font-size: var(--ds-fs-sm, .875rem); line-height: 1.5; overflow-wrap: anywhere; }
.phwo-un-page .phwo-un-text time { font-size: var(--ds-fs-xs, .75rem); font-variant-numeric: tabular-nums; }
.phwo-un-page .phwo-un-empty { padding: 32px 16px; font-size: var(--ds-fs-sm, .875rem); }
.phwo-un-page .phwo-un-empty::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; background: var(--ds-teal-50, #eef5f5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D5C63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 20px no-repeat; }
.phwo-un-page [data-un-more] { margin: 8px 12px 12px; min-height: 48px; }
.phwo-un-page + p, .phwo-un-page p:last-child { margin: 0; }
body.phwo-rec-tab-notifications .phwo-acct-head .phwo-un-ur { display: none; }
html[lang^="ur"] .phwo-un-page .phwo-un-text time { font-family: var(--ds-font, inherit); }
/* [dash-v4] day groups */
.phwo-un-day { position: sticky; top: 0; z-index: 1; padding: 6px 16px; background: var(--ds-bg, #f5f7f7); border-bottom: 1px solid var(--unline, #e3e8e9); font-size: var(--ds-fs-xs, .75rem); font-weight: 700; letter-spacing: .02em; color: var(--ds-ink-2, #3a4b50); text-transform: uppercase; }
html[lang^="ur"] .phwo-un-day { text-transform: none; letter-spacing: 0; font-size: var(--ds-fs-sm, .875rem); }
body.phwo-app-preview [data-un-markall], body.phwo-app-preview [data-un-sound] { pointer-events: none; opacity: .5; }