.comments-root {
  width: 100%;
  margin-top: calc(var(--spacing) * 10);
  padding-top: calc(var(--spacing) * 6);
  border-top: 1px solid var(--color-zinc-200);
}

.cs-shell {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.cs-heading {
  font-family: var(--font-geist);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  color: var(--color-zinc-900);
}

.cs-subtle {
  color: var(--color-zinc-700);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.cs-error {
  color: var(--color-red-600);
}

.cs-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  justify-content: center;
}

.cs-reaction {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-height: calc(var(--spacing) * 7);
  padding-inline: calc(var(--spacing) * 2.5);
  border: 1px solid var(--color-zinc-200);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-zinc-700);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-reaction:hover,
.cs-reaction:focus-visible {
  border-color: var(--color-zinc-300);
  background: var(--color-zinc-50);
  color: var(--color-zinc-900);
  outline: none;
}

.cs-reaction[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.cs-reaction[data-active="true"] {
  background: var(--color-indigo-100);
  border-color: #c7d2fe;
  color: var(--color-indigo-800);
}

.cs-form {
  display: grid;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-zinc-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.cs-form-grid {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.cs-label {
  display: grid;
  gap: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  color: var(--color-zinc-800);
}

.cs-input,
.cs-textarea {
  width: 100%;
  border: 1px solid var(--color-zinc-300);
  border-radius: var(--radius-sm);
  padding: calc(var(--spacing) * 2);
  font: inherit;
  color: var(--color-zinc-900);
  background: var(--color-white);
}

.cs-input:focus,
.cs-textarea:focus {
  outline: 2px solid var(--color-zinc-200);
  outline-offset: 1px;
  border-color: var(--color-zinc-400);
}

.cs-textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.cs-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.cs-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: calc(var(--spacing) * 33);
  height: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 4);
  border: 1px solid var(--color-zinc-900);
  border-radius: 999px;
  background: var(--color-zinc-900);
  color: var(--color-white);
  font-family: var(--font-geist);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-button:hover,
.cs-button:focus-visible {
  background: var(--color-zinc-700);
  border-color: var(--color-zinc-700);
  outline: none;
}

.cs-button[disabled] {
  cursor: wait;
  opacity: 0.7;
}

.cs-list {
  display: grid;
  gap: calc(var(--spacing) * 2.5);
}

.cs-item {
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-zinc-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  display: grid;
  gap: calc(var(--spacing) * 1.5);
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  align-items: baseline;
}

.cs-name {
  font-family: var(--font-geist);
  font-weight: 500;
  color: var(--color-zinc-900);
}

.cs-date {
  color: var(--color-zinc-600);
  font-size: var(--text-xs);
}

.cs-message {
  color: var(--color-zinc-800);
  white-space: pre-wrap;
  word-break: break-word;
}

.cs-empty {
  padding: calc(var(--spacing) * 3);
  border: 1px dashed var(--color-zinc-300);
  border-radius: var(--radius-lg);
  color: var(--color-zinc-700);
}