/**
 * @name Chat Related Alerts at Top
 * @author NSPG911
 * @version 1.0.0
 * @description Seamlessly blends both the `New Messages` and `Viewing Old Messages` at the top of the chat panel
 * @source https://nspc911.github.io/themes/vencord/ChatRelatedAlertsAtTop.theme.css
*/

:root {
  /* Set to 1 if you want them to float  *\
  |*      Recommended while using        *|
  \*      Midnight/Rounded Themes        */
  --craat-popout: 0; /* Default = 0 */
  /* Change the border radius *\
  \*      for the alerts      */
  --craat-border-radius: 16px; /* default: 16px */
}

.visual-refresh #app-mount .jumpToPresentBar__0f481 > button {
  height: 32px;
}

.visual-refresh #app-mount .chatHeaderBar_dc83f5 {
  width: calc(100% - 45px) !important;
  border-bottom: none !important;
  min-width: unset !important;
  top: calc(8px * var(--craat-popout)) !important;
  border-radius: calc(var(--craat-border-radius) * var(--craat-popout))
    calc(var(--craat-border-radius) * var(--craat-popout))
    var(--craat-border-radius) var(--craat-border-radius);
  left: 8.5px !important;
  right: 8px !important;
  z-index: 5 !important;
  padding: 7.5px 12px 7.5px 16px !important;
  position: absolute;
  > button {
    padding: 0;
    > div {
      padding: calc(var(--space-4) - 1px) calc(var(--space-12) - 1px);
      min-height: unset !important;
      max-height: unset !important;
    }
  }
  &::after {
    display: none !important;
  }
  &:has(
    ~ .messagesWrapper__36d07
      > :is(
        .jumpToPresentBar__0f481,
        .newMessagesBar__0f481,
        .topicsPillContainer__0f481,
        .newTopicsBarContainer__0f481
      )
  ) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
  }
  & ~ .messagesWrapper__36d07 {
    margin-top: -1px;
    > :is(
      .jumpToPresentBar__0f481,
      .newMessagesBar__0f481,
      .topicsPillContainer__0f481,
      .newTopicsBarContainer__0f481
    ) {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-top: none !important;
    }
  }
}
.visual-refresh #app-mount .chatContent_f75fb0 .messagesWrapper__36d07 {
  .jumpToPresentBar__0f481 {
    width: calc(100% - 16px) !important;
    min-width: unset !important;
    left: 0px !important;
    top: calc(8px * var(--craat-popout)) !important;
    bottom: unset !important;
    border-radius: calc(var(--craat-border-radius) * var(--craat-popout))
      calc(var(--craat-border-radius) * var(--craat-popout))
      var(--craat-border-radius) var(--craat-border-radius);
    z-index: 5 !important;
    > button > .buttonChildrenWrapper_a22cb0 {
      min-height: unset !important;
      height: 20px !important;
    }
  }

  .newMessagesBar__0f481,
  .topicsPillContainer__0f481 {
    border: 1px solid var(--border-normal);
    background-color: var(--background-surface-highest) !important;
    padding: 4px 8px 4px 12px !important;
    padding-bottom: 4px;
    border-radius: calc(var(--craat-border-radius) * var(--craat-popout))
      calc(var(--craat-border-radius) * var(--craat-popout))
      var(--craat-border-radius) var(--craat-border-radius);
    top: calc(8px * var(--craat-popout)) !important;
    left: 8px !important;
    right: 8px !important;
    box-shadow: unset !important;
    > button:not([aria-label*="message"]) {
      background-color: var(--control-primary-background-default);
      height: 22px;
      padding: 0 11px;
      font-weight: 500 !important;
      font-size: small;
      transform: translateX(2px);
      text-align: center;
      border: 1px solid var(--control-primary-border-default);
      color: var(--control-primary-text-default);
      margin-right: 2px;
      &:hover {
        background-color: var(--control-primary-background-hover);
        border: 1px solid transparent;
      }
    }
    > button[aria-label*="message"] > span {
      color: white;
    }
    ~ .jumpToPresentBar__0f481 {
      transform: translateY(calc(100% - 3px));
      border-top: none !important;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &:has(~ .jumpToPresentBar__0f481) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none !important;
    }
  }
  .newTopicsBarContainer__0f481 {
    border: 1px solid var(--border-normal);
    background-color: var(--background-surface-highest) !important;
    color: var(--text-default);
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: calc(var(--craat-border-radius) * var(--craat-popout))
      calc(var(--craat-border-radius) * var(--craat-popout))
      var(--craat-border-radius) var(--craat-border-radius);
    top: calc(8px * var(--craat-popout)) !important;
    left: 8px !important;
    right: 8px !important;
    .newTopicsBarText__0f481 {
      color: var(--text-default);
    }
    .barButtonAlt__0f481 {
      padding: 0 16px;
      margin-right: 8px;
      border-radius: 8px /* taken from newMessagesBar */;
      color: var(--control-primary-text-default);
      background-color: var(--control-primary-background-default);
      border: 1px solid var(--control-primary-border-default);
      font-weight: 500;
      font-size: 14px;
      &:hover {
        background-color: var(--control-primary-border-hover);
        border: 1px solid transparent;
      }
      .barButtonIcon__0f481 {
        margin-inline-start: 0;
        -webkit-margin-inline-start: 0;
      }
    }
    &:has(~ .jumpToPresentBar__0f481) {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      border-bottom: none !important;
      > .topicsDropdown__0f481 {
        top: 83px;
      }
    }
    ~ .jumpToPresentBar__0f481 {
      transform: translateY(calc(100% - 3px));
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-top-color: transparent !important;
      padding-top: 0 !important;
    }
  }
  /* Fix misalignment */
  .topicsPillCarets__0f481 {
    padding-inline-end: 0;
    -webkit-padding-inline-end: 0;
  }
  .topicsPillContainer__0f481 {
    padding-left: 3px !important;
  }
}