/* Clickable notification rows keep their destination visible and easy to tap. */
.wet-notification-bell { display: grid; place-items: center; }
.wet-notification-bell svg { width: 21px; height: 21px; }
#notifBtn #wetNotifBadge { display: none; right: 2px; top: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; line-height: 16px; }
#notifBtn #wetNotifBadge.on { display: block; }
.wet-notification-panel { display: grid; gap: 15px; width: min(620px, 100%); }
.wet-notification-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wet-notification-panel h2 { margin: 0; }
.wet-notification-panel header p { margin: 4px 0 0; color: #668095; font-size: 13px; }
.wet-notification-list { display: grid; gap: 8px; max-height: min(65vh, 620px); overflow: auto; padding: 2px; }
.wet-notification-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; align-items: center; gap: 11px; width: 100%; min-height: 68px; padding: 10px; border: 1px solid rgba(31, 136, 183, .15); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,248,255,.82)); color: #173d56; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.wet-notification-card:hover { transform: translateY(-1px); border-color: rgba(22, 157, 218, .55); box-shadow: 0 10px 22px rgba(37, 128, 169, .13); }
.wet-notification-card.is-unread { border-color: rgba(44, 173, 217, .42); background: linear-gradient(145deg, #effdff, #ddf9e3); }
.wet-notification-avatar { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg, #71d8ff, #65df94); color: #fff; font-weight: 850; }
.wet-notification-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wet-notification-copy { display: grid; min-width: 0; gap: 3px; }
.wet-notification-copy b, .wet-notification-copy > span, .wet-notification-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wet-notification-copy b { color: #123f5a; font-size: 14px; }
.wet-notification-copy > span { color: #477187; font-size: 13px; }
.wet-notification-copy small { color: #7892a2; font-size: 11px; }
.wet-notification-arrow { color: #168fe8; font-size: 24px; font-weight: 750; }
.wet-notification-empty { padding: 28px 16px; border: 1px dashed rgba(22, 143, 232, .26); border-radius: 19px; color: #668095; text-align: center; }
/* Crop the empty black edge around the application mark without distorting it. */
.auth-floating-logo { overflow: hidden !important; background: #05050d !important; }
.auth-floating-logo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
[data-theme="dark"] .wet-notification-panel header p { color: #aad9e8; }
[data-theme="dark"] .wet-notification-card { border-color: rgba(116, 221, 245, .23); background: linear-gradient(145deg, rgba(10, 71, 101, .96), rgba(8, 103, 100, .85)); color: #effdff; }
[data-theme="dark"] .wet-notification-card.is-unread { border-color: rgba(132, 238, 246, .55); background: linear-gradient(145deg, rgba(13, 113, 147, .96), rgba(10, 125, 100, .9)); }
[data-theme="dark"] .wet-notification-copy b { color: #f2feff; }
[data-theme="dark"] .wet-notification-copy > span { color: #d0f7ff; }
[data-theme="dark"] .wet-notification-copy small { color: #a9d5e2; }
@media (max-width: 600px) {
  .wet-notification-panel { width: 100%; }
  .wet-notification-card { min-height: 64px; border-radius: 16px; }
  .wet-notification-avatar { width: 42px; height: 42px; border-radius: 14px; }
}