/* Stable text layout for posts, actions, comments and chats. */
.post-card,
.channel-post,
.composer,
.comments-block,
.comment-form,
.post-actions,
.reaction-panel,
.reaction-summary,
.reaction-picker {
  min-width: 0;
}

.post-card .post-head,
.channel-post .post-head {
  align-items: flex-start;
  min-width: 0;
}

.post-card .post-head > div:nth-child(2),
.channel-post .post-head > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.post-card .user-name,
.channel-post .post-head strong {
  display: block;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.post-card .handle,
.channel-post .handle {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.post-card .post-head .more {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-left: auto;
}

.post-card > .post-content,
.channel-post > .post-content {
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.6;
}

.post-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
}

.post-actions .action-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.comments-block.open {
  min-width: 0;
  overflow: hidden;
}

.comment-row {
  min-width: 0;
  align-items: flex-start;
}

.comment-row > div {
  min-width: 0;
  overflow: hidden;
}

.comment-row strong,
.comment-row p {
  display: block;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

.comment-form {
  min-width: 0;
  align-items: stretch;
}

.comment-form input {
  min-width: 0;
  width: 100%;
  line-height: 1.3;
}

.comment-form .secondary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.reaction-summary,
.reaction-picker {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.reaction-chip,
.reaction-option {
  min-width: 0;
  overflow-wrap: anywhere;
}

.channel-post-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.channel-post-actions button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.bubble {
  max-width: min(76%, 100%);
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .post-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-actions .action-btn {
    font-size: 12px;
  }

  .comment-form .secondary-btn {
    padding-inline: 12px;
  }
}