.chatUnreadCount {
  display: none;
}

@media (max-width: 820px) {
  .dock {
    border-top-color: rgba(var(--accent-contrast-rgb), 0.18);
    background: rgba(var(--accent-rgb), 0.96);
    box-shadow:
      0 -12px 30px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(var(--accent-contrast-rgb), 0.14);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
  }

  .dockTab,
  .dockTab:hover,
  .dockTab:active,
  .dockTab.is-active,
  .currentTrackVote.is-voted,
  .mobileLiveTab.is-current,
  .mobileLiveTab.is-playing {
    border-radius: 0;
    background: transparent;
    color: rgba(var(--accent-contrast-rgb), 0.7);
    box-shadow: none;
  }

  .dockGlyph,
  .dockTab.is-active .dockGlyph,
  .currentTrackVote.is-voted .dockGlyph {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dockIcon {
    filter: var(--mobile-dock-icon-filter, brightness(0) invert(1));
  }

  .dockTab .dockLabel,
  .dockTab:not(.historyTab) .dockLabel,
  .dockTab.is-active .dockLabel,
  .currentTrackVote.is-voted .dockLabel,
  .mobileLiveTab .dockLabel {
    color: rgba(var(--accent-contrast-rgb), 0.7);
  }

  .dockTab:not(.currentTrackVote) .dockGlyph::after {
    background: var(--accent-contrast);
  }

  .currentTrackVoteHeart,
  .currentTrackVote.is-voted .currentTrackVoteHeart {
    color: rgba(var(--accent-contrast-rgb), 0.74);
  }

  .dockTab.is-active .dockLabel,
  .currentTrackVote.is-voted .dockLabel {
    color: var(--accent-contrast);
  }

  .currentTrackVoteCount,
  .reactionLiveCount,
  .chatUnreadCount {
    border-color: var(--accent-contrast);
    background: var(--accent-contrast);
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
  }

  .chatUnreadCount:not([hidden]) {
    position: absolute;
    top: -2px;
    right: -4px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    border-width: 2px;
    border-style: solid;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
}
