.chat-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  .chat-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-block: var(--spacing-4);
    flex: 1;
  }
  .chat-balloon {
    display: inline-flex;
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-5);
  }
  .chat-time {
    font-size: var(--font-size-1);
    color: var(--color-text-base-low);
    padding-inline: var(--spacing-2);
  }
  &.me {
    justify-content: flex-end;
    padding-left: 96px;
    .chat-content {
      align-items: flex-end;
    }
    .chat-balloon {
      background: var(--color-surface-primary);
      color: var(--color-text-inverse-high);
      border-radius: var(--radius-8) 0 var(--radius-8) var(--radius-8);
    }
  }
  &.other {
    justify-content: flex-start;
    padding-right: 96px;
    .chat-content {
      align-items: flex-start;
    }
    .chat-balloon {
      background: var(--color-surface-primary-light);
      color: var(--color-text-base-high);
      border-radius: 0 var(--radius-8) var(--radius-8) var(--radius-8);
    }
  }
}
.message-send-form {
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 0;
  transform: translateX(-50%);
  background: var(--color-surface-base-primary);
  border-radius: var(--rad-card-lg) var(--rad-card-lg) 0 0;
  padding-inline: var(--spacing-6);
  padding-block: var(--spacing-6) var(--spacing-12);
  width: 100vw;
  max-width: var(--layout-page-body);
  textarea {
    flex: 1;
  }
}