/* UCMU_NOTIFICATIONS_OWNER | features/notifications */
.ucmu-notifications-toggle{
  position:relative;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border:0;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--ucmu-card,#fff);
  color:var(--ucmu-graphite,#2e3338);
  box-shadow:0 12px 26px rgba(31,38,50,.10);
  cursor:pointer;
  transition:transform .16s ease,color .16s ease,box-shadow .16s ease;
}
.ucmu-notifications-toggle:hover,.ucmu-notifications-toggle.is-open{color:var(--ucmu-red,#d72631);box-shadow:0 16px 34px rgba(31,38,50,.14)}
.ucmu-notifications-toggle:active{transform:scale(.96)}
.ucmu-bell-icon{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ucmu-notifications-toggle>em{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--ucmu-card,#fff);border-radius:999px;display:grid;place-items:center;box-sizing:border-box;background:var(--ucmu-red,#d72631);color:#fff;font-size:9px;font-style:normal;font-weight:950;line-height:1}
.ucmu-notifications-toggle>em[hidden]{display:none}

.ucmu-notifications-panel{position:absolute;top:72px;right:18px;z-index:900;width:min(410px,calc(100% - 36px));max-height:min(690px,calc(100dvh - 90px));grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(31,38,50,.09);border-radius:22px;background:var(--ucmu-card,#fff);box-shadow:0 30px 90px rgba(12,18,24,.28);color:var(--ucmu-text,#22272c)}
.ucmu-notifications-panel:not([hidden]){display:grid;animation:ucmu-notification-panel-in .18s cubic-bezier(.22,1,.36,1)}
.ucmu-notifications-panel[hidden]{display:none}
@keyframes ucmu-notification-panel-in{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.ucmu-notifications-panel>header{min-height:64px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(31,38,50,.08);box-sizing:border-box}
.ucmu-notifications-panel>header>span{min-width:0;display:grid;gap:2px}
.ucmu-notifications-panel>header b{font-size:16px;font-weight:950;letter-spacing:-.02em}
.ucmu-notifications-panel>header small{color:var(--ucmu-muted,#77808a);font-size:10px;font-weight:750}
.ucmu-notifications-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ucmu-notifications-panel>header button{width:auto;height:32px;border:0;border-radius:999px;padding:0 10px;background:rgba(31,38,50,.06);color:var(--ucmu-muted,#77808a);font-size:9px;font-weight:900;white-space:nowrap;cursor:pointer}
.ucmu-notifications-panel>header [data-notifications-clear]{background:rgba(215,38,49,.09);color:var(--ucmu-red,#d72631)}
.ucmu-notifications-panel>header button:hover{color:var(--ucmu-red,#d72631)}
.ucmu-notifications-panel>header button[aria-busy="true"]{opacity:.5;cursor:default}

.ucmu-notifications-list{min-height:0;overflow:auto;display:grid;align-content:start;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(47,54,62,.45) transparent}
.ucmu-notifications-list::-webkit-scrollbar{width:6px}
.ucmu-notifications-list::-webkit-scrollbar-track{background:transparent}
.ucmu-notifications-list::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(47,54,62,.45)}
.ucmu-notification-item{position:relative;border-radius:17px;overflow:hidden;background:transparent;transition:background .15s ease}
.ucmu-notification-item:hover{background:rgba(31,38,50,.045)}
.ucmu-notification-item.is-unread{background:rgba(215,38,49,.055)}
.ucmu-notification-open{width:100%;min-height:74px;border:0;padding:9px 42px 9px 9px;display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;gap:9px;align-items:center;background:transparent;color:inherit;text-align:left;cursor:pointer}
.ucmu-notification-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(31,38,50,.07);color:var(--ucmu-red,#d72631);font-size:14px;font-weight:950}
.ucmu-notification-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--ucmu-graphite,#2e3338);color:#fff;font-size:11px;font-style:normal;font-weight:950}
.ucmu-notification-avatar img{width:100%;height:100%;object-fit:cover}
.ucmu-notification-copy{min-width:0;display:grid;gap:3px}
.ucmu-notification-copy b,.ucmu-notification-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucmu-notification-copy b{font-size:12px;font-weight:900}
.ucmu-notification-copy small{color:var(--ucmu-muted,#77808a);font-size:11px}
.ucmu-notification-copy time{color:var(--ucmu-muted,#77808a);font-size:9px;font-weight:750}
.ucmu-notification-open>em{min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--ucmu-red,#d72631);color:#fff;font-size:9px;font-style:normal;font-weight:950}
.ucmu-notification-read{position:absolute;right:9px;top:50%;width:28px;height:28px;border:0;border-radius:50%;background:rgba(31,38,50,.07);color:var(--ucmu-muted,#77808a);font-size:12px;font-weight:950;transform:translateY(-50%);cursor:pointer}
.ucmu-notification-read:hover{background:rgba(215,38,49,.12);color:var(--ucmu-red,#d72631)}
.ucmu-notifications-empty{min-height:130px;padding:30px;display:grid;place-items:center;color:var(--ucmu-muted,#77808a);font-size:12px;font-weight:800;text-align:center}
.ucmu-notifications-empty[hidden]{display:none}

.ucmu-notification-settings{display:grid;gap:8px}
.ucmu-notification-settings>header{display:grid;gap:2px}
.ucmu-notification-settings>header b{color:var(--ucmu-text);font-size:12px;font-weight:950}
.ucmu-notification-settings>header small{color:var(--ucmu-muted);font-size:9px;font-weight:750}
.ucmu-notification-settings>div{display:grid;gap:2px}
.ucmu-notification-settings label{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ucmu-text);font-size:11px;font-weight:850;cursor:pointer}
.ucmu-notification-settings input{width:34px;height:20px;margin:0;accent-color:var(--ucmu-red,#d72631);cursor:pointer}
.ucmu-notification-settings>[data-notification-settings-status]{min-height:12px;color:var(--ucmu-muted);font-size:9px;font-weight:750}

[data-post-id].is-notification-target{animation:ucmu-notification-target 2.4s ease}
@keyframes ucmu-notification-target{0%,100%{box-shadow:var(--ucmu-card-shadow,0 12px 32px rgba(31,38,50,.09))}18%,70%{box-shadow:0 0 0 3px rgba(215,38,49,.34),0 18px 44px rgba(31,38,50,.16)}}


@media(max-width:760px){
  .ucmu-notifications-toggle{width:40px;height:40px;min-width:40px;border-radius:15px}
  .ucmu-notifications-panel{position:fixed;top:56px;left:8px;right:8px;width:auto;max-height:calc(100dvh - var(--ucmu-mobile-nav-h,76px) - 68px);border-radius:20px}
  .ucmu-notifications-panel>header{align-items:flex-start}
  .ucmu-notifications-actions{gap:4px}
  .ucmu-notifications-panel>header button{height:30px;padding:0 8px}
  .ucmu-notification-open{grid-template-columns:28px 38px minmax(0,1fr) auto;padding-left:8px}
  .ucmu-notification-avatar{width:38px;height:38px}
}