/*hashtag style by slashine 071320*/
.mention.hashtag{
background-color: #93AEFD36;
padding: 0px 4px;
text-align: center;
text-decoration: none;
display: inline-block;
border-style: dashed;
border-color: #93AEFD;
border-width: 0.5px;
border-radius: 2px;
margin-top: 2px;
margin-bottom: 2px;
}

/* emoji enlarge */
.reply-indicator__content .emojione,
.status__content .emojione,
.announcements__item__content .emojione {
  width: 50px !important;
  height: 50px !important;
  margin: 2px !important;
}

.emoji-mart-category .emoji-mart-emoji:hover span,
.emoji-mart-category .emoji-mart-emoji-custom:hover img {
  width: 40px !important;
  height: 40px !important;
}

.emoji-mart-category .emoji-mart-emoji:hover {
  margin: 0 -12px;
}

/*variable width*/
div.column {
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1
}

/*
 * ============================================================
 * Avatar Cat for Mastodon
 * Mastodon 4.7.1 compatibility edition
 * ============================================================
 *
 * Normal status avatar:    top -6px
 * Detailed status avatar:  top -6px
 * Boost / AvatarOverlay:   top -4px
 * Quoted status:           top -4px
 * Standalone 46px avatar:  top -6px
 * Profile 80px avatar:     top -10px
 *
 * Original Avatar Cat geometry and wiggle animation retained.
 */


/* ============================================================
 * 1. STATUS AVATAR POSITIONING CONTEXT
 * ============================================================ */

.status__avatar,
.detailed-status__display-avatar {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  isolation: isolate;
}


/* ============================================================
 * 2. ALLOW CAT EARS TO EXTEND OUTSIDE DISPLAY NAME AREA
 * ============================================================ */

.status__info .status__display-name,
.detailed-status__display-name {
  overflow: visible !important;
}

.status__info .status__display-name {
  min-width: 0;
}

/*
 * Keep long display names clipped normally.
 * We only want the ears to escape the outer container.
 */
.status__info .status__display-name > .display-name,
.detailed-status__display-name > .display-name {
  min-width: 0;
  overflow: hidden;
}


/* ============================================================
 * 3. NORMAL STATUS / DETAILED STATUS CAT EARS
 * ============================================================ */

.status__avatar::before,
.status__avatar::after,
.detailed-status__display-avatar::before,
.detailed-status__display-avatar::after {
  content: "";
  display: block;

  position: absolute;

  /*
   * Normal timeline + detailed status:
   * lift ears farther above the avatar.
   */
  top: -5px;

  width: 50%;
  height: 50%;

  box-sizing: border-box;

  border: 4px solid;
  border-color: inherit;
  background-color: inherit;

  z-index: 0;
  pointer-events: none;

  transform-origin: 50% 50%;
}


/* Right ear */

.status__avatar::before,
.detailed-status__display-avatar::before {
  right: 0;
  left: auto;

  border-radius: 75% 0 75% 75%;

  transform:
    rotate(-37.6deg)
    skew(-30deg);
}


/* Left ear */

.status__avatar::after,
.detailed-status__display-avatar::after {
  left: 0;
  right: auto;

  border-radius: 0 75% 75%;

  transform:
    rotate(37.6deg)
    skew(30deg);
}


/* ============================================================
 * 4. PUT ACTUAL AVATAR ABOVE THE EARS
 * ============================================================ */

.status__avatar .account__avatar,
.detailed-status__display-avatar .account__avatar {
  position: relative;
  z-index: 1;
}


/* ============================================================
 * 5. BOOST / REBLOG / AVATAR OVERLAY
 * ============================================================
 *
 * Mastodon 4.7.1 uses approximately:
 *
 * .status__avatar wrapper       48 × 48
 * ├── base avatar              36 × 36
 * └── small overlay avatar     24 × 24
 *
 * The ears must follow the 36px BASE avatar rather than the
 * complete 48px AvatarOverlay wrapper.
 * ============================================================ */

.status__avatar:has(> .account__avatar-overlay)::before,
.status__avatar:has(> .account__avatar-overlay)::after {
  width: 18px;
  height: 18px;

  /*
   * User-selected boost/reblog offset.
   */
  top: -4px;

  border-width: 3px;
}


/*
 * Base avatar occupies the left 36px of the 48px wrapper.
 *
 * Therefore:
 * left ear starts at x = 0
 * right ear ends at x = 36
 *
 * 48 - 36 = 12px
 */

.status__avatar:has(> .account__avatar-overlay)::before {
  right: 12px;
  left: auto;
}

.status__avatar:has(> .account__avatar-overlay)::after {
  left: 0;
  right: auto;
}


/* ============================================================
 * 6. QUOTED STATUS
 * ============================================================
 *
 * Quoted-status avatars are smaller than normal timeline avatars.
 * Keep their smaller stroke, but move the ears upward to -4px.
 * ============================================================ */

.status--is-quote .status__avatar::before,
.status--is-quote .status__avatar::after {
  top: -4px;
  border-width: 3px;
}


/* ============================================================
 * 7. STANDALONE AVATARS
 * ============================================================
 *
 * Some Mastodon avatars are NOT wrapped by .status__avatar.
 *
 * Examples:
 *
 * Left-side compose/current-account avatar:
 *
 * <span class="account__avatar"
 *       style="width: 46px; height: 46px;">
 *
 * Profile-header avatar:
 *
 * <span class="_comp_account_header__avatar account__avatar"
 *       style="width: 80px; height: 80px;">
 *
 * Do NOT apply ears globally to every .account__avatar because
 * status avatars / AvatarOverlay would then receive duplicate ears.
 * ============================================================ */


/* ------------------------------------------------------------
 * Standalone positioning context
 * ------------------------------------------------------------ */

.navigation-bar .account__avatar,
._comp_account_header__avatar.account__avatar {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}


/* ------------------------------------------------------------
 * Common standalone ear geometry
 * ------------------------------------------------------------ */

.navigation-bar .account__avatar::before,
.navigation-bar .account__avatar::after,
._comp_account_header__avatar.account__avatar::before,
._comp_account_header__avatar.account__avatar::after {
  content: "";
  display: block;

  position: absolute;

  width: 50%;
  height: 50%;

  box-sizing: border-box;

  border-style: solid;
  border-color: inherit;
  background-color: inherit;

  z-index: 0;
  pointer-events: none;

  transform-origin: 50% 50%;
}


/* Standalone right ear */

.navigation-bar .account__avatar::before,
._comp_account_header__avatar.account__avatar::before {
  right: 0;
  left: auto;

  border-radius: 75% 0 75% 75%;

  transform:
    rotate(-37.6deg)
    skew(-30deg);
}


/* Standalone left ear */

.navigation-bar .account__avatar::after,
._comp_account_header__avatar.account__avatar::after {
  left: 0;
  right: auto;

  border-radius: 0 75% 75%;

  transform:
    rotate(37.6deg)
    skew(30deg);
}


/* ============================================================
 * 8. LEFT-SIDE 46px AVATAR
 * ============================================================ */

.navigation-bar .account__avatar::before,
.navigation-bar .account__avatar::after {
  top: -6px;

  border-width: 4px;
}


/* ============================================================
 * 9. PROFILE HEADER 80px AVATAR
 * ============================================================
 *
 * Scale approximately from the normal 46-48px avatar:
 *
 * 48px -> 6px lift / 4px stroke
 * 80px -> 10px lift / 6px stroke
 * ============================================================ */

._comp_account_header__avatar.account__avatar::before,
._comp_account_header__avatar.account__avatar::after {
  top: -10px;

  border-width: 6px;
}


/* ============================================================
 * 10. STANDALONE AVATAR IMAGE ABOVE EARS
 * ============================================================ */

.navigation-bar .account__avatar > img,
._comp_account_header__avatar.account__avatar > img {
  position: relative;
  z-index: 1;
}


/* ============================================================
 * 11. NOTIFICATIONS
 * ============================================================
 *
 * Preserve the behaviour of the original Avatar Cat stylesheet:
 * don't decorate status previews inside notifications.
 * ============================================================ */

.notification .status__avatar::before,
.notification .status__avatar::after,
.notification-group .status__avatar::before,
.notification-group .status__avatar::after,
.notification-ungrouped .status__avatar::before,
.notification-ungrouped .status__avatar::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
 * 12. EAR WIGGLE — STATUS AVATARS
 * ============================================================ */

.status__avatar:hover::before,
.detailed-status__display-avatar:hover::before {
  animation: earwiggleright 1s infinite;
}

.status__avatar:hover::after,
.detailed-status__display-avatar:hover::after {
  animation: earwiggleleft 1s infinite;
}


/* ============================================================
 * 13. EAR WIGGLE — STANDALONE AVATARS
 * ============================================================ */

.navigation-bar .account__avatar:hover::before,
._comp_account_header__avatar.account__avatar:hover::before {
  animation: earwiggleright 1s infinite;
}

.navigation-bar .account__avatar:hover::after,
._comp_account_header__avatar.account__avatar:hover::after {
  animation: earwiggleleft 1s infinite;
}


/* ============================================================
 * 14. ORIGINAL AVATAR CAT ANIMATIONS
 * ============================================================ */

@keyframes earwiggleleft {
  from {
    transform: rotate(37.6deg) skew(30deg);
  }

  25% {
    transform: rotate(10deg) skew(30deg);
  }

  50% {
    transform: rotate(20deg) skew(30deg);
  }

  75% {
    transform: rotate(0deg) skew(30deg);
  }

  to {
    transform: rotate(37.6deg) skew(30deg);
  }
}


@keyframes earwiggleright {
  from {
    transform: rotate(-37.6deg) skew(-30deg);
  }

  30% {
    transform: rotate(-10deg) skew(-30deg);
  }

  55% {
    transform: rotate(-20deg) skew(-30deg);
  }

  75% {
    transform: rotate(0deg) skew(-30deg);
  }

  to {
    transform: rotate(-37.6deg) skew(-30deg);
  }
}


/* ============================================================
 * 15. REDUCED MOTION
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .status__avatar:hover::before,
  .status__avatar:hover::after,

  .detailed-status__display-avatar:hover::before,
  .detailed-status__display-avatar:hover::after,

  .navigation-bar .account__avatar:hover::before,
  .navigation-bar .account__avatar:hover::after,

  ._comp_account_header__avatar.account__avatar:hover::before,
  ._comp_account_header__avatar.account__avatar:hover::after {
    animation: none !important;
  }
}