/* form */
.new-message-input-field textarea {
  min-height: 50px;
  border-bottom: none;
}

.new-message-input-field textarea:focus {
  border-bottom: none;
}

.new-message-input-field .fake-field-for-attachments {
  background-color: #F9F9F9;
  width: 100%;
  margin-top: -8px;
  transition: 0.2s ease all;
  border-bottom: 1px var(--gray3) solid;
}

.new-message-input-field trix-editor:hover~.fake-field-for-attachments {
  /* background-color: #F2F6F7; */
  border-bottom: 1px solid var(--blue);
}

.new-message-input-field trix-editor:focus~.fake-field-for-attachments {
  /* background-color: #E5E9EA; */
  border-bottom: 1px solid var(--blue);
}

/* index */
.message {
  border-left: 4px solid transparent;
}

.message.highlighted,
.message:target {
  background-color: var(--gray0);
  border-left: 4px solid var(--blue);
}

.message.highlighted .initials,
.message:target .initials {
  border: var(--blue) 1px solid;
  color: white;
  background-color: var(--blue);
}

.message.highlighted .initials.grayed,
.message:target .initials.grayed {
  border: var(--gray0) 1px solid;
  color: white;
  background-color: var(--gray3);
}

.initials {
  width: 32px;
  height: 32px;
  font-weight: 600;
  border-radius: 100%;
  padding-top: 5px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  background-color: var(--blue);
  color: white;
  flex-shrink: 0;
}

.initials.grayed {
  background-color: var(--gray3);
}

#message_body:placeholder-shown~.message_form-actions {
  display: none;
}

@media (min-width: 320px) and (max-width: 767px) {
  .initials {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
}