/* Precise avatar-edge placement for the story creation control. */
.story-avatar-wrap .add-story-button {
  position: absolute;
  right: -2px;
  top: 82px;
  bottom: auto;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font: 700 19px/1 Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(14,48,38,.24);
}

.story-avatar-wrap .add-story-button:hover {
  background: var(--green2);
  transform: translateY(-50%) scale(1.06);
}

@media (max-width: 540px) {
  .story-avatar-wrap .add-story-button {
    right: -3px;
    top: 56px;
    width: 29px;
    height: 29px;
    border-width: 3px;
    font-size: 16px;
  }
}