.comment-wall {
  display: grid;
  gap: var(--sp-4);
  color: var(--ink);
}

.comment-wall__head {
  display: grid;
  gap: var(--sp-1);
}

.comment-wall__composer,
.comment-wall__gate,
.comment-wall__empty {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--sp-4);
}

.comment-wall__textarea {
  min-height: 112px;
  background: var(--surface-warm);
}

.comment-wall__textarea--reply {
  min-height: 88px;
}

.comment-wall__composer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.comment-wall__post,
.comment-wall__reply-post {
  min-width: 104px;
}

.comment-wall__counter {
  min-width: 72px;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  text-align: right;
}

.comment-wall__counter.is-over {
  color: var(--danger);
}

.comment-wall__error {
  margin: 0;
}

.comment-wall__gate,
.comment-wall__empty {
  display: grid;
  gap: var(--sp-1);
}

.comment-wall__gate strong,
.comment-wall__empty strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.comment-wall__loading {
  display: grid;
  gap: var(--sp-3);
}

.comment-wall__loading .skeleton {
  display: block;
  height: 88px;
  border-radius: var(--r-card);
}

.comment-wall__list,
.comment-wall__replies {
  list-style: none;
  padding: 0;
}

.comment-wall__list {
  display: grid;
  gap: var(--sp-5, 20px);
}

.comment-wall__item {
  display: grid;
  gap: var(--sp-3);
}

.comment-wall__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.comment-wall__avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  border: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}

.comment-wall__content {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}

.comment-wall__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.comment-wall__meta strong {
  color: var(--ink-strong);
  font-size: var(--fs-body);
  font-weight: 600;
}

.comment-wall__meta time {
  font-size: var(--fs-sm);
}

.comment-wall__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.comment-wall__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.comment-wall__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.comment-wall__reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.comment-wall__reaction:hover {
  background: var(--surface-warm);
}

.comment-wall__reaction:active {
  transform: translateY(1px);
}

.comment-wall__reaction:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.comment-wall__reaction.is-on {
  background: var(--plum-tint);
  border-color: color-mix(in oklch, var(--plum) 35%, var(--line));
  color: var(--plum);
}

.comment-wall__reaction-count {
  min-width: 1ch;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.comment-wall__reply-button {
  min-height: 44px;
  padding: 0 var(--sp-2);
  color: var(--plum);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
}

.comment-wall__reply-button:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.comment-wall__reply-form {
  margin-left: 52px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}

.comment-wall__replies {
  display: grid;
  gap: var(--sp-3);
  margin-left: 52px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}

@media (max-width: 640px) {
  .comment-wall__composer,
  .comment-wall__gate,
  .comment-wall__empty {
    padding: var(--sp-4);
  }

  .comment-wall__composer-foot {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .comment-wall__counter {
    order: -1;
    flex: 1 1 100%;
    text-align: left;
  }

  .comment-wall__post,
  .comment-wall__reply-post {
    flex: 1 1 auto;
  }

  .comment-wall__reply-form,
  .comment-wall__replies {
    margin-left: var(--sp-4);
  }
}