/** CHAT LOGIN / OUT
--------------------------------------------------------- */

.chat:not(.logged-in) .user {
  display: none;
}

.chat.logged-in .login {
  display: none;
}

.chat .login a {
  color: #e53232;
  color: var(--accent-color);
}



/** CHAT MESSAGES
--------------------------------------------------------- */

.chat {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.chat nav {
  flex: none;
}

body > section.chat {
  padding: 0 15px;
}

.chat .messages {
  margin: 1rem 0;
  flex: auto;
  height: 0; /* EDGE & FF FIX */
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat .messages article header {
  display: flex;
  align-items: baseline;
  margin: 0 -.25em;
}

.chat .messages article header > * {
  margin: 0 .25em;
}

.chat .messages article header svg {
  align-self: center;
}

.chat .messages article header .rank {
  font-family: 'Source Code Pro', monospace;
  font-weight: 500;
  font-size: .75em;
  color: #e53232;
  color: var(--accent-color);
}

.chat .messages article header .dono-badge {
  font-family: 'Source Code Pro', monospace;
  font-weight: 500;
  font-size: .75em;
  padding: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .5);
}

.chat .messages p a {
    display: block;
    padding: .5em;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: .5em 0;
}

.chat .system-message {
  font-style: italic;
  display: flex;
  justify-content: center;
}



/** CHAT UNREAD
--------------------------------------------------------- */

.chat .unread {
  margin: 0 -16px;
  padding: 8px 16px;
  background: #e53232;
  background: var(--accent-color);
  cursor: pointer;
}

.chat .unread::before {
  content: attr(data-unread) ' ';
}

.chat .unread[data-unread="0"] {
  display: none;
}