* Implement new design for hovered conversation threads

Implement the new design for hovered replies from
https://trello.com/c/aXCXxzx2 .

The most visible effect is that conversation threads have a grey
background when hovered.

In the process of implementing the new styling, there is some cleanup
of the CSS:

 * Use `--reply`/`--top-reply` modifier classes on <annotation> and
   <annotation-thread> elements to style annotations, top-level replies
   and nested replies differently. This makes the CSS simpler and
   reduces the risk of unexpected side effects that come with descendant
   selectors.

 * Rename `thread` CSS classes to match the name of the component
   that they are used in, `annotation-thread`.

* Move 'annotation-unavailable-message' styling to app.scss

This class is used in the root template (viewer.html) not the
<annotation-thread> component.

* Darken expand/collapse toggle arrow only when annotation itself is hovered

Darken the expand/collapse arrow when an annotation is hovered but not
when its replies are hovered.

* Remove no-op CSS class

The `clear: both` styling had no effect because <annotation-thread>
is now using flexbox rather than floats for layout.

* Do not show 'Hide replies' link for replies

For replies there were two different ways to collapse the annotation
card, the expand/collapse toggle arrow and the 'Hide replies' link.

Removing the 'Hide replies' link avoids having two ways to do the same
thing and makes the cards look cleaner.

* Remove the light grey background for hovered replies

Following design review, remove the grey background for hovered replies.

* Make rendering of dashed lines to the left of replies better in Chrome

Previously the dashed line started at the top of the <annotation-thread>
component and the top part was covered up by the thread expand/collapse
toggle.

In Chrome the alignment of dashes within a dashed border varies as the
height of the element changes [1]. Therefore depending on the height of
the reply, this could result in the visible part of the line below the
collapse/expand toggle starting at either a gap or dash in the line.

By instead moving the dashed line to a separate element which is
positioned beneath the expand/collapse toggle, the first visible dash in
the reply line always appears in the same place and is aligned correctly
with the annotation content to its right.

[1] See http://www.impressivewebs.com/comparison-css-border-style/
    for a visual representation of why this is done.