/* ============= BOT CARDS ============= */

/* Space between the bot cards */
.pp-cc-list-container{
gap: 1.3rem;
}

/* Removes the box shadow on hover */
.profile-character-card-wrapper,
.css-1ifqy49 {
  box-shadow: none;
}

/* Makes every background layer of the card black */
.pp-cc-wrapper,.pp-cc-gradient-1,.pp-cc-gradient-2,.pp-cc-gradient-3,.pp-cc-wrapper>*:not(.css-1s5evre){
    background: black !important;
}

/* Smooth transition for the hover effect */
.profile-character-card-wrapper {
    transition: transform 0.3s ease;
}

/* Enlarges and slides the card up on hover */
.profile-character-card-wrapper:hover {
    transform: scale(1.02) translateY(-9px);
    box-shadow: none;
}

/* Chat ribbon positioning, removes absolute positioning to prevent overlap */
.profile-character-card-stats-box {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    display: flex;
    right: -60px;
    margin: 5px 0;
}

/* Strips the ribbon's background, shape, and shadow */
.pp-cc-ribbon,
.pp-cc-ribbon-wrap {
  background-color: transparent;
  clip-path: none;
  box-shadow: none;
  position: static;
  padding: 0;
}

/* Essentials */
/* Negates the ribbon's inset, hidden overflow, and drop shadow */
.pp-cc-ribbon {
  inset: unset;
  overflow: visible;
  filter: none;
  padding: 0;
}
/* Removes the ribbon's weird shape, weird shadow, and hidden overflow */
.pp-cc-ribbon-wrap {
  clip-path: unset;
  padding: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
/* Chat count text, background, and icon */
.pp-cc-chats {
    font-weight: 200;
    font-size: 13px;
    font-family: 'cardo';
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* needed for positioning the line below */
}

/* The little line under the chat count */
.pp-cc-chats::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    transform: translateX(-50%);
    width: 35%;
    height: 1px;
    background: #ffffff7d;
}

/* Adds "Chats" after the number */
.profile-character-card-chats-count::after {
    content: " Chats •";
}
/* Hides the chat icon */
.pp-cc-chats svg {
  display: none;
}
/* New dot icon in place of the chat icon */
.pp-cc-chats::before {
  content: "•";
}
/* Makes everything inside the ribbon full width */
.profile-character-card-stats-box * {
  width: 100%;
}

/* The main card box */
.profile-character-card-stack {
  background: black;
  border: 1px solid white;
  outline: 1px solid white;
  outline-offset: 2px;
  border-radius: 1px;
}

/* Lets the bot name, image, and ribbon be reordered */
.profile-character-card-stack-link-component {
  display: flex;
  flex-direction: column;
}

/* Moves the bot name to the middle */
.profile-character-card-stack-link-component-box {
  order: 2;
}

/* Keeps the image at the top */
.profile-character-card-avatar-aspect-ratio {
  order: 1;
}

/* Moves the chat ribbon below the bot name */
.profile-character-card-stats-box {
  order: 3;
}

/* Hides the username on the bot card */
.profile-character-card-creator-name-box {
  display: none;
}

/* Makes the bot image taller */
.profile-character-card-avatar-aspect-ratio {
  height: auto;
  padding-bottom: 50%; /* If you wanna make it bigger just increase this number */
}

/* The bot image fills its box without squishing */
.profile-character-card-avatar-image {
  height: 100%;
  object-fit: cover;
  border-radius: 1px
}

/* Shrinks the tags container and adds a scroll when needed */
.profile-character-card-tags {
  max-height: 80px; /* Adjust this value to your preferred height */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Token count container */
.profile-character-card-box {
  background-color: white;
}

/* Flower at the end of the token count */
.profile-character-card-tokens-count::after {
    content: " ✿";
    color: black;
}

/* Flower at the start of the token count */
.profile-character-card-tokens-count::before {
    content: "✿ ";
    color: black;
}

/* Token count text */
.profile-character-card-tokens-count {
  color: black;
  text-shadow: none;
  font-family: Courier Prime;
  font-size: 12px;
  text-align: center;
  position: relative;
  top: 3px
}

/* Bot name container, centers the text */
.profile-character-card-stack-link-component-box {
  background-color: white;
  text-align: center;
}

/* Description box: same size on every card, sits closer to the chat count
   if you want a scroll bar on this replace overflow: hidden; with overflow-y: auto; */
.profile-character-card-description-box {
  min-height: 130px;
  max-height: 130px;
  overflow: hidden;
  margin-top: 8px !important;
  padding-top: 0;
}

/* Bot name text */
.profile-character-card-name-box {
  color: black;
  text-align: center;
  font-family: cardo;
  font-size: 15px;
  text-shadow: none;
}

/* The font/colour of the text in the bot description */
.pp-cc-description p {
  margin: 0;
  font-family: cardo;
  font-size: 13px;
  line-height: 1.4;
  color: white;
}
/* Hides the public chat count */
.css-y395z1 {
  display: none;
}

/* Greyscale bot images by default */
.profile-character-card-avatar-image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/* Removes the greyscale on hover */
.profile-character-card-stack:hover .profile-character-card-avatar-image {
  filter: grayscale(0%);
}

/* Hides the original star image */
.profile-character-card-star {
  display: none;
}

/* The divider line, full width */
.profile-character-card-star-line {
  width: 100%;
  position: relative;
  margin: 10px 0;
  border: 1px solid white;
}

/* The flower centered on the divider line */
.profile-character-card-star-line::before {
  content: "✿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 0 8px;
  font-size: 16px;
  color: white;
  border: 1px solid white;
  line-height: 1;
  z-index: 2;
}

/* Moves the description down so it doesn't hit the divider line */
.profile-character-card-description-box {
  margin-top: 15px;
}


/* ===== TAG GRID ===== */

/* The tags list, turned into a two column grid */
.css-k1urot {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(90px, 130px)); /* 2 columns, each 90px to 130px wide */
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-height: inherit; /* keeps the tag scroll working */
}

/* Each tag's cell in the grid */
.pp-cc-tags-wrap-regular,
.pp-cc-tags-wrap-custom,
.css-1yp4ln {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}

/* Every tag is the exact same box, long names get "..." */
.pp-cc-tags-item,
.pp-cc-tags-regular,
.pp-cc-tags-custom {
  display: block;
  width: 100%;
  min-width: 90px;
  max-width: 130px;
  height: 24px;
  line-height: 22px; /* keep this 2px less than the height */
  padding: 0 6px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tag styling bc yeah */
.pp-cc-tags-regular,
.pp-cc-tags-custom {
  border: 1px solid white;
  color: white;
  background: black;
  border-radius: 1px;
}

/* Tags when hovered or clicked */
:is(.pp-cc-tags-regular, .pp-cc-tags-custom):is(:hover, :focus) {
  border: white;
  background: white;
  color: black;
}

/* REMOVING THE FIRST EMOJI ON TAGS (Creds to tigerdropped ily) */
/* regular tags */
.pp-cc-tags-regular::first-letter {
  font-size: 0;
}

/* @Procrastination was the pioneer, now it was made easier through labels 🩵 */
/* Removes the original text for the "dead dove" tag */
.pp-tag-deaddove { font-size: 0; }

/* Replaces the text for the "dead dove" tag */
.pp-tag-deaddove::after {
    content: "Dead Dove";
    font-size: 0.75rem;
}


/* ===== LIMITLESS / EXCLUSIVE TAG ===== */

/* Stays on top of the tag grid, spanning both columns */
.pp-cc-tags-wrap:has(.pp-tag-limitless) {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
}

/* The Exclusive bar */
.pp-cc-tags-wrap .pp-tag-limitless {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 20px; /* how tall the bar is */
  line-height: normal;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: Cardo;
  font-weight: 1000;
  background: white !important; /* also wipes out the purple gradient */
  box-shadow: none !important;
  border: 2px solid white;
  border-radius: 1px;
}

/* Hides the original "Limitless" text */
.pp-cc-tags-wrap .pp-tag-limitless,
.pp-cc-tags-wrap .pp-tag-limitless * {
  font-size: 0 !important;
  color: transparent !important;
}

/* "Exclusive" text - visible by default */
.pp-cc-tags-wrap .pp-tag-limitless::before {
  content: "・ Exclusive ・";
  font-size: 14px !important;
  color: black !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* "Choose me?" text - hidden by default, sits on top of "Exclusive" */
.pp-cc-tags-wrap .pp-tag-limitless::after {
  content: "‪‪❤︎‬ Choose me? ‪‪❤︎‬";
  font-size: 14px !important;
  color: black !important;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* On hover - "Exclusive" fades out... */
.profile-character-card-stack:hover .pp-cc-tags-wrap .pp-tag-limitless::before {
  opacity: 0;
}

/* ...and "Choose me?" fades in */
.profile-character-card-stack:hover .pp-cc-tags-wrap .pp-tag-limitless::after {
  opacity: 1;
}


/* ===== EVENT DECORATIONS ===== */

/* Getting rid of decorations from events (stamp on 2025 bot card) */
.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us   {
  display: none;
}

/* Hides the creator name plus extra event decorations and icons */
.pp-cc-creator-name,.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us,.css-5v5qgx img,.css-itvw0n,.css-1henxb,.css-8828od svg {
    display: none;
}

/* =======  ✿ END OF BOT CARD SECTION  ✿ ======= */