.gp-emoji-collapsible {
    background-color: #CADCEB;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;

    /* belangrijk voor het pijltje */
    position: relative;
    padding-right: 48px;
    /* ruimte rechts voor arrow */
  }

  .gp-emoji-active,
  .gp-emoji-collapsible:hover {
    background-color: #BACCD9;
  }

  .gp-emoji-content {
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
    display: none;
  }

  .gp-emoji-content.gp-emoji-open {
    display: block;
  }

  /* ===== Arrow (chevron) =====
     We maken een klein ">"-achtig haakje met borders en roteren ‘m.
     Gesloten: wijst naar beneden. Open: 180° gedraaid = omhoog.
  */
  .gp-emoji-collapsible::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* ↓ */
    opacity: 0.85;
    transition: transform 160ms cubic-bezier(.4,0,.2,1);

    right: 18px; /* smal scherm */
  }

  .gp-emoji-collapsible.gp-emoji-active::after {
    transform: translateY(-50%) rotate(-135deg); /* ↑ */
  }

  /* breed scherm: pijltjes op vaste “kolom” */
  @media (min-width: 700px) {
    .gp-emoji-collapsible::after {
      left: 300px;
      right: auto;
    }
  }