#livia-notification-center {
  position: fixed;
  z-index: 146;
  top: calc(var(--global-header-height, 48px) - 1px);
  right: 42px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 62px));
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 0 0 14px 14px;
  background: #fff;
  box-shadow: 0 14px 32px rgb(0 0 0 / 8%);
  color: #161616;
  font-family: "Inter", Arial, sans-serif;
}

.notification-center-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; }
.notification-center-head strong { font-size: 15px; font-weight: 600; }
.notification-center-close { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #737373; font-size: 18px; cursor: pointer; }
.notification-center-close:hover, .notification-center-close:focus-visible { background: #f4f4f4; color: #111; outline: 0; }
.notification-center-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 14px; padding: 3px; border-radius: 9px; background: #f6f6f6; }
.notification-center-tab { min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #777; font-size: 12px; font-weight: 500; cursor: pointer; }
.notification-center-tab:hover, .notification-center-tab:focus-visible { color: #222; outline: 0; }
.notification-center-tab[aria-selected="true"] { background: #fff; color: #222; box-shadow: 0 1px 4px rgb(0 0 0 / 6%); }
.notification-center-body { max-height: min(474px, calc(100vh - 145px)); padding: 8px 0 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7d7d7 transparent; }
.notification-group { padding: 0 10px; }
.notification-group + .notification-group { margin-top: 5px; padding-top: 7px; border-top: 1px solid #f0f0f0; }
.notification-group-title { margin: 0; padding: 5px 8px 4px; color: #929292; font-size: 11px; font-weight: 500; line-height: 15px; }
.notification-item { position: relative; width: 100%; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 9px 8px; border: 0; border-radius: 9px; background: #fff; color: #242424; text-align: left; cursor: pointer; }
.notification-item:hover, .notification-item:focus-visible { background: #f7f7f7; outline: 0; }
.notification-item.is-unread { background: #fbfaff; }
.notification-item.is-unread:hover, .notification-item.is-unread:focus-visible { background: #f6f4fb; }
.notification-avatar { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #f0f0f0; border-radius: 50%; background: #eeeaf8; color: #745776; font-size: 10px; font-weight: 600; }
.notification-copy { min-width: 0; }
.notification-summary { display: block; color: #3a3a3a; font-size: 13px; font-weight: 400; line-height: 18px; }
.notification-summary strong { color: #6f356d; font-weight: 500; }
.notification-message { display: -webkit-box; margin-top: 2px; overflow: hidden; color: #727272; font-size: 12px; font-weight: 400; line-height: 17px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-meta { display: block; margin-top: 4px; color: #9a9a9a; font-size: 11px; line-height: 14px; }
.notification-unread-dot { width: 6px; height: 6px; margin: 7px 2px 0 0; border-radius: 50%; background: #b316ab; }
.notification-item:not(.is-unread) .notification-unread-dot { visibility: hidden; }
.notification-item.is-removed { cursor: default; }
.notification-item.is-removed .notification-avatar, .notification-item.is-removed .notification-copy { opacity: .58; }
.notification-item.is-removed .notification-meta { color: #777; }
.notification-center-empty { min-height: 154px; display: grid; align-content: center; justify-items: center; gap: 5px; margin: 0; padding: 22px; color: #888; text-align: center; }
.notification-center-empty strong { color: #555; font-size: 13px; font-weight: 500; }
.notification-center-empty span { font-size: 12px; }
.notification-destination-feedback { position: fixed; z-index: 190; left: 50%; bottom: 22px; padding: 8px 12px; border-radius: 7px; background: #222; color: #fff; font: 500 12px/16px "Inter", Arial, sans-serif; transform: translateX(-50%); }

@media (max-width: 600px) {
  #livia-notification-center { top: var(--global-header-height, 48px); right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - var(--global-header-height, 48px) - 8px); border-radius: 0 0 14px 14px; }
  .notification-center-body { max-height: calc(100vh - 139px); }
}