.fk-d-menu[data-identifier="usercard"] {
  z-index: z("usercard");
}

.full-page-chat {
  &.teams-sidebar-on {
    grid-template-columns: 1fr;

    .chat-channel {
      border-radius: var(--full-page-border-radius);
    }
  }

  .chat-channel {
    .chat-messages-container {
      &.has-reply {
        grid-template-columns: var(--message-left-width) 1fr;
      }

      .chat-user {
        width: var(--message-left-width);
      }
    }
  }
}

.chat-message-text {
  img:not(.emoji):not(.avatar, .onebox-avatar-inline) {
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

    &:hover {
      cursor: pointer;
      border-radius: var(--d-border-radius);
      box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
        0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
    }
  }
}

.chat-message-container:not(.-user-info-hidden) {
  .chat-message {
    padding: 0.65rem 1rem 0.15rem;
  }
}

.chat-message-container.-user-info-hidden {
  .chat-message {
    padding: 0.15rem 1rem;
  }

  .chat-time {
    color: var(--secondary-medium);
    flex-shrink: 0;
    font-size: var(--font-down-2);
    margin-top: 0.4em;
    display: none;
    width: var(--message-left-width);
  }

  &:hover {
    .chat-message-left-gutter__bookmark {
      display: none;
    }

    .chat-time {
      display: block;
    }
  }
}

// Full Page Styling in Core
.has-full-page-chat:not(.discourse-sidebar) {
  --max-chat-width: 1200px;

  #main-outlet {
    max-width: var(--max-chat-width);
    padding: 0;
  }

  .full-page-chat {
    border-right: 1px solid var(--primary-low);
    border-left: 1px solid var(--primary-low);
  }

  @media screen and (max-width: var(--max-chat-width)) {
    #main-outlet {
      max-width: 100%;
      padding: 0;
    }

    .full-page-chat {
      border: none;
      grid-template-columns: 250px 1fr;
    }
  }
}

// Full page styling with sidebar enabled
.discourse-sidebar.has-full-page-chat {
  #main-outlet {
    padding: 2em 0 0 0;
  }

  .full-page-chat.teams-sidebar-on {
    .chat-channel {
      border-radius: 0;
    }

    .chat-message {
      padding-left: 1em;
    }

    .chat-messages-container .chat-message-deleted {
      padding: 0.25em 1em;
    }
  }
}

.chat-form {
  &__description.-autojoin,
  &__description.-channel-wide-mentions {
    max-width: 50%;
  }
}