/* Fixes from the first multi-user/mobile test. */

#toggle-private {
  display: none !important;
}

@media (min-width: 769px) {
  .conversation-stack.layout-mode-general .chat-section--general,
  .conversation-stack.layout-mode-private .chat-section--private {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto !important;
  }

  .conversation-stack.layout-mode-general .chat-section--private,
  .conversation-stack.layout-mode-general .chat-resizer,
  .conversation-stack.layout-mode-private .chat-section--general,
  .conversation-stack.layout-mode-private .chat-resizer {
    display: none !important;
  }

  .conversation-stack.layout-mode-balanced .chat-section--general,
  .conversation-stack.layout-mode-balanced .chat-section--private {
    display: flex;
  }

  .conversation-stack.layout-mode-balanced .chat-resizer {
    display: block;
  }
}

/* Private messages stay compact; only direct mentions in the general chat get a frame. */
.msg-item.is-private-message,
.msg-item[data-message-type="private"].is-for-me {
  margin: 0;
  padding: 7px 13px;
  border: 0;
  border-bottom: 1px solid #171717;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.msg-item.is-private-message .msg-time,
.msg-item[data-message-type="private"].is-for-me .msg-time {
  color: #9b9b9b;
}

.layout-unread-badge {
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 17px;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .mobile-nav {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .mobile-nav .chat-color-picker {
    position: relative;
    min-width: 0;
    margin: 0;
  }

  .mobile-nav .chat-color-button {
    width: 100%;
    height: 38px;
    min-height: 38px;
    justify-content: center;
    padding: 0 6px;
    border: 0;
    border-right: 1px solid #242424;
    border-radius: 0;
    background: transparent;
    color: #777;
  }

  .mobile-nav .chat-color-menu {
    top: calc(100% + 4px);
    right: 4px;
    left: auto;
    width: min(200px, calc(100vw - 16px));
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    z-index: 1000;
  }

  .msg-item.is-private-message,
  .msg-item[data-message-type="private"].is-for-me {
    padding: 7px 9px;
  }
}

  .msg-item.is-private-message,
  .msg-item[data-message-type="private"].is-for-me {
    padding: 7px 9px;
  }