.messages-view .thread-item {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.messages-view .message-form .composer-selection {
  display: none;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.messages-view .message-form.has-long-draft .composer-selection { display: flex; }
.messages-view .chat-panel.is-conversation .message-form .composer-selection button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  color: #246bd0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.messages-view .message-form textarea[name="message"],
.messages-view .message-copy {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.messages-view .thread-item.has-unread {
  grid-template-columns: 48px minmax(0, 1fr) 30px;
}

.messages-view .thread-item > .thread-unread {
  grid-column: 3;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: 50%;
  color: #fff;
  background: #246bd0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.messages-view .thread-item:hover { transform: translateX(3px); }
.messages-view .thread-item:active { transform: translateX(3px) scale(.985); }
.messages-view .thread-item:focus-visible,
.messages-view .chat-person:focus-visible,
.messages-view .partner-profile .back-button:focus-visible {
  outline: 2px solid #3483df;
  outline-offset: 2px;
}

.messages-view .chat-person .chat-avatar,
.messages-view .partner-profile .partner-avatar {
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
}

.messages-view .chat-person:hover .chat-avatar { transform: scale(1.06); }
.messages-view .partner-profile .profile-photo-open:hover .partner-avatar { transform: scale(1.04); }

.chat-transition-avatar {
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(24, 62, 125, .18);
  transform-origin: top left;
  will-change: transform;
}

.chat-transition-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .messages-view .thread-item,
  .messages-view .chat-person .chat-avatar,
  .messages-view .partner-profile .partner-avatar { transition: none; }
  .messages-view .thread-item:hover,
  .messages-view .thread-item:active,
  .messages-view .chat-person:hover .chat-avatar,
  .messages-view .partner-profile .profile-photo-open:hover .partner-avatar { transform: none; }
}