<style>
  /* The notifications menu, this took years off my life and gave me dementia but it is sexy and beautiful and I added arrows so slay */
/* THE MAIN CONTAINER BOX */
[class*="notificationsPopover_"] {
  background: #313338;/* main background colour */
  border: 2px solid #f786f4;/* outer border */
  border-radius: 0;/* 0 = sharp corners, raise for rounded */
  box-shadow: unset;/* removes JanitorAI's drop shadow */
}

/* JanitorAI draws a rounded shape on top of the box this squares the overlay too */
[class*="notificationsPopover_"]::before,
[class*="notificationsPopover_"]::after {
  border-radius: 0 !important;
}

/* this just keeps it from getting that weird overlay where like the top corners are rounded inside the main container */
[class*="notificationsPopover_"] [class*="userAvatar_"] {
  border-radius: 50% !important;
}

[class*="popoverHeader_"] {
  padding: 1rem 1.25rem;          /* space around the header contents */
  background: #292a2e;            /* darker than the box so it reads as a header */
  border-bottom: 2px solid #f786f4;
}

/* the word "Notifications" itself */
[class*="popoverTitle_"] {
  font-family: Montserrat, serif;
  font-size: 1.6rem; /* how big the title is */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;  /* space between letters */
  color: #FFFFFF; /* the letters themselves */
  /*outline around each letter cuz normal shadow would like sit on one side so gotta do allat to make it like- wrap around it. */
  text-shadow:
    -1px  0    0 #f786f4,
     1px  0    0 #f786f4,
     0   -1px  0 #f786f4,
     0    1px  0 #f786f4,
    -1px -1px  0 #f786f4,
     1px -1px  0 #f786f4,
    -1px  1px  0 #f786f4,
     1px  1px  0 #f786f4;
}


/* ============ NOTIF HEADER BUTTONS ========= */

/* the strip the three buttons sit in */
[class*="headerActions_"] {
  background: transparent !important;
  border: none !important;
  padding: 0;
  gap: 0.5rem; /* space between the buttons */
}

/* all three buttons, resting */
[class*="deleteAllButton_"],
[class*="markAllReadButton_"],
[class*="closeButton_"] {
  background: #f786f4;  /* button circle colour */
  color: #FFFFFF;   /* icon colour */
  border-radius: 50%;  /* 50% = circle, 0 = square */
  transition: color 500ms, background 500ms;   
}

/* all three buttons, hovered */
[class*="deleteAllButton_"]:hover,
[class*="markAllReadButton_"]:hover,
[class*="closeButton_"]:hover {
  background: white;
  color: #f786f4;
  box-shadow: none;
}

/* forces the icons to follow the button colour instead of their own */
[class*="deleteAllButton_"] svg,
[class*="markAllReadButton_"] svg,
[class*="closeButton_"] svg {
  color: inherit;
  fill: currentColor;
}


/* Scroll bar stuff */

[class*="notificationsList_"] {
  background: transparent;
  scrollbar-width: thin;                    /* firefox only */
  scrollbar-color: #f786f4 #292a2e;         /* firefox only: bar, then track */
}

[class*="notificationsList_"]::-webkit-scrollbar {
  width: 8px;  /* how thick the whole scrollbar is */
}

/* the draggable bar */
[class*="notificationsList_"]::-webkit-scrollbar-thumb {
  background: #09142f32;
  border-radius: 0;
}
[class*="notificationsList_"]::-webkit-scrollbar-thumb:hover {
  background: #09142f32;
}

/* the groove behind the bar */
[class*="notificationsList_"]::-webkit-scrollbar-track {
  background: #09142f32;
}

/* --- the little arrows at each */

[class*="notificationsList_"]::-webkit-scrollbar-button {
  display: block;
  height: 12px;                   /* how tall the arrow buttons are */
  background-color: #09142f32;      /* the square behind the arrow */
  background-repeat: no-repeat;
}

/* webkit shows two arrows at each end by default, which looks broken.
   this hides the duplicates so there's one arrow top and one bottom */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:start:increment,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:end:decrement,
[class*="notificationsList_"]::-webkit-scrollbar-button:horizontal {
  display: none;
}

/* UP arrow */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement {
  background-image:
    linear-gradient(to bottom right, transparent 49%, #09142f32 50%),
    linear-gradient(to bottom left,  transparent 49%, #09142f32 50%);
  background-size: 4px 5px, 4px 5px;        /* half-width, then height */
  background-position: 0 center, 4px center;
}

/* DOWN arrow */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment {
  background-image:
    linear-gradient(to top right, transparent 49%, #09142f32 50%),
    linear-gradient(to top left,  transparent 49%, #09142f32 50%);
  background-size: 4px 5px, 4px 5px;
  background-position: 0 center, 4px center;
}

/* arrows on hover */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image:
    linear-gradient(to bottom right, transparent 49%, #f786f4 50%),
    linear-gradient(to bottom left,  transparent 49%, #f786f4 50%);
}
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment:hover {
  background-image:
    linear-gradient(to top right, transparent 49%, #f786f4 50%),
    linear-gradient(to top left,  transparent 49%, #f786f4 50%);
}

[class*="notificationItem_"] {
  height: 125px;
  min-height: 125px;
  max-height: 125px;
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid #f786f4;   /* the line between notifications */
  width: 100%;
  overflow: hidden;/* clips anything taller than the row */
  padding: 0; /* must stay 0 or the image can't reach the edges */
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative; 
  transition: background 300ms;   /* how slowly the row fades on hover */
}

/* the row you're hovering over */
[class*="notificationItem_"]:hover {
  background: #09142f32;
}

[class*="notificationItem_"] > *:not([class*="unreadIndicator_"]) {
  background: transparent;
}

/* the vertical bar marking an unread notification */
[class*="unreadIndicator_"] {
  background: #f786f4;
  align-self: stretch; /* makes it run the full row height */
}

/* the column the image sits in */
[class*="avatarSection_"] {
  flex: 0 0 150px;  /* how WIDE the image column is */
  width: 150px; /* dont touch this */
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the frame that crops the image */
[class*="avatarContainer_"] {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  overflow: hidden;/* this is what does the cropping */
}

/* the bot's picture */
[class*="characterAvatar_"] {
  position: absolute;
  top: 0;
  left: -25px;  /* CROPPING THE LEFT EDGE */
  width: calc(100% + 25px);
  height: 100%;
  object-fit: cover; /* fills the frame instead of squashing */
  object-position: 58% 42%;
  border-radius: 0;

  /* THE LOW TAPER FADE ON THE BOT IMAGE*/
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);

  /* hover zoom, see below */
  transform-origin: right center;
  transition: transform 600ms ease !important;   /* how slow the zoom is */
  will-change: transform;
}

/* HOVER ZOOM —  the image raise if u want it more dramatic but probably dont bc its dramatic enuff idk */
[class*="notificationItem_"]:hover [class*="characterAvatar_"] {
  transform: scale(1.12) !important;
}

/* the little profile picture, tucked in the bottom-left corner on comment notifs */
[class*="userAvatar_"] {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 36px; /* size of the badge */
  height: 36px; /* keep the same as width to stay circular if u raise it this thang will be oval af. if u want a square see border-radius*/
  object-fit: cover;
  border: 2px solid #f786f4; /* ring around the badge */
  border-radius: 50%;
}


/* the block all the text sits in */
[class*="contentWrapper_"],
[class*="contentWrapperUnread_"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0.6rem 2.4rem 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-left: -45px;/* Pulls the text leftwards so it sits on top of the faded part of the image, Raise for more room. */
  position: relative;
  z-index: 1;
}

/* THE NOTIFICATION TITLE (first line, e.g. "New comment on...") */
[class*="subject_"],
[class*="subjectUnread_"] {
  font-family: Montserrat, serif;
  font-size: 1.12em; /* relative to the site's size, not fixed */
  color: #f786f4; 
  line-height: 1.3;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;     /* gap between text and the underline */
  text-decoration-color: #f786f488;  /* last two digits = opacity higher number more visible or something*/

  background: unset;
  -webkit-text-fill-color: unset;
  overflow-wrap: anywhere; /* stops long words breaking the layout */

  /* clips the title to 2 lines. change the 2 to allow more or fewer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE BODY TEXT (second line) */
[class*="notificationItem_"] [class*="body_"] {
  color: #DCDCDC;
  line-height: 1.35;
  overflow-wrap: anywhere;

  /* clips the message to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE DATE (third line) */
[class*="notificationItem_"] [class*="timestamp_"] {
  color: white;
  font-family: Montserrat, serif;
  opacity: 0.75;/* 1 = solid, lower = more faded */
}

/* BOT NAMES — */
[class*="highlightCharacter_"],
[class*="highlightCharacterBody_"] {
  color: white;
  font-family: Cardo, serif;
  font-size: 1.05em;
}

/* USERNAMES — dark pink */
[class*="highlightUsername_"] {
  color: #f786f4;
}

  /* Styling for the archive button, (The little trashcan that appears when u hover) */
.pp-top-bar-notifications-item-archive{
  box-shadow: none;
  border: 1px solid #f786f4;
}

.pp-top-bar-notifications-item-archive:hover{
background: #f786f4;
color: white; 
transform:unset;
box-shadow:none;/* Fuck this stupid thing Janitorai and their stupid box shadows jesus christ.*/
}


/* stops the little user badge growing on hover. as well as the stupoid ass shadow on hover*/
[class*="userAvatar_"],
[class*="userAvatar_"]:hover {
  transform: none !important;
  scale: none !important;
  transition: none !important;
    box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}
</style>