.chat-drawer {
  width: 400px;
  max-width: 100vw;
}

.user-card,
.group-card {
  z-index: z("usercard") + 1; // bump up user card
}

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

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

  .chat-full-page-header {
    padding: 1rem;
    flex-shrink: 0;
  }

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

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

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

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

    &:hover {
      cursor: pointer;
      border-radius: 5px;
      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.user-info-hidden {
  padding: 0.15em 1em;

  .chat-msgactions-hover {
    top: -2em;
  }
}

.chat-msgactions[data-popper-reference-hidden],
.chat-msgactions[data-popper-escaped] {
  visibility: hidden;
  pointer-events: none;
}

// 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);

    .channels-list {
      background: var(--primary-very-low);

      .chat-channel-divider {
        padding: 0.5rem 0.5rem 0 1rem;
      }

      .loading-container {
        padding-bottom: 1em;
      }
    }

    .chat-live-pane {
      border-radius: unset;
    }

    .chat-live-pane,
    .chat-messages-scroll,
    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
      background-color: transparent;
    }

    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked):hover {
      background-color: var(--primary-very-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-live-pane {
      border-radius: 0;
    }

    .chat-live-pane,
    .chat-messages-scroll,
    .chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
      background: transparent;
    }

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

      &:hover {
        background-color: var(--primary-very-low);
      }
    }

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

.chat-browse .chat-channel-settings-row {
  .edit-btn,
  .btn-container {
    opacity: 0;
    transition: opacity 0.1s;
  }

  &:hover {
    .edit-btn,
    .btn-container {
      opacity: 1;
    }
  }
}