@scope (.comments-section) {
  :scope {
    margin-top: var(--space-2xl);
  }

  .record-page__section-header .icon {
    width: 1em;
    height: 1em;
    color: var(--color-text-secondary);
    fill: currentcolor;
    flex-shrink: 0;
  }

  .comments-tabs {
    gap: var(--space-md);
  }

  .tabs__panel--active {
    min-height: calc(var(--spacing-80) + var(--spacing-24));
  }

  .comments-tabs turbo-frame {
    display: block;
    min-height: calc(var(--spacing-80) + var(--spacing-24));
  }

  .tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .comments-tabs__dot {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
  }

  .tabs__tab[data-subject="captacao"] .comments-tabs__dot {
    background: var(--color-info);
  }

  .tabs__tab[data-subject="vendas"] .comments-tabs__dot {
    background: var(--color-primary);
  }

  .tabs__tab[data-subject="financeiro"] .comments-tabs__dot {
    background: var(--color-warning);
  }

  .tabs__tab[data-subject="captacao"].tabs__tab--active {
    background: var(--color-info-muted);
    color: var(--color-info-text);
  }

  .tabs__tab[data-subject="vendas"].tabs__tab--active {
    background: var(--color-primary-muted);
    color: var(--color-primary);
  }

  .tabs__tab[data-subject="financeiro"].tabs__tab--active {
    background: var(--color-warning-muted);
    color: var(--color-warning-text);
  }
}

@scope (.comments) {
  :scope {
    --_ink: var(--color-primary);
    --_ink-text: var(--color-primary);
    --_ink-muted: var(--color-primary-muted);
    --_bg: var(--color-surface);
    --_border: var(--color-border-muted);
    --_radius: var(--radius-lg);
    --_avatar: var(--space-2xl);
    --_list-min-height: var(--spacing-80);
    --_list-max-height: var(--spacing-96);
    --_thread-min-height: var(--spacing-80);

    container-type: inline-size;
    container-name: comments;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: var(--_thread-min-height);
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    box-shadow: var(--shadow-sm), inset 0 var(--space-2xs) 0 var(--_ink);
    overflow: clip;

    &[data-subject="captacao"] {
      --_ink: var(--color-info);
      --_ink-text: var(--color-info-text);
      --_ink-muted: var(--color-info-muted);
    }

    &[data-subject="vendas"] {
      --_ink: var(--color-primary);
      --_ink-text: var(--color-primary);
      --_ink-muted: var(--color-primary-muted);
    }

    &[data-subject="financeiro"] {
      --_ink: var(--color-warning);
      --_ink-text: var(--color-warning-text);
      --_ink-muted: var(--color-warning-muted);
    }
  }

  .comments__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: var(--_list-min-height);
    max-height: var(--_list-max-height);
    overflow-y: auto;
    padding: var(--space-xl);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    background: radial-gradient(
      ellipse 70% 80% at 50% 42%,
      var(--_ink-muted),
      transparent 72%
    );

    &:has(.comments__empty),
    &:has(.comments__pending-mark) {
      justify-content: center;
      align-items: center;
      overflow: clip;
    }
  }

  .comments__empty {
    display: grid;
    justify-items: center;
    gap: var(--space-lg);
    width: 100%;
    text-align: center;

    @media (prefers-reduced-motion: no-preference) {
      animation: comments-slip-in 0.4s ease-out;
    }
  }

  .comments__empty-figure {
    display: grid;
    place-items: center;
  }

  .comments__empty-ring,
  .comments__empty-mark {
    grid-area: 1 / 1;
  }

  .comments__empty-ring {
    width: var(--space-4xl);
    height: var(--space-4xl);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in oklab, var(--_ink) 30%, transparent);
  }

  .comments__empty-mark {
    display: grid;
    place-items: center;
    width: var(--space-3xl);
    height: var(--space-3xl);
    border-radius: var(--radius-full);
    background: var(--_ink-muted);
    color: var(--_ink-text);
    box-shadow: var(--shadow-xs);

    .icon {
      width: var(--space-xl);
      height: var(--space-xl);
      fill: currentcolor;
    }
  }

  .comments__empty-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: var(--spacing-72);
  }

  .comments__empty-title {
    margin: 0;
    font-size: var(--text-heading-6);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
    text-wrap: balance;
  }

  .comments__empty-hint {
    margin: 0;
    font-size: var(--text-body-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .comments__empty-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    color: var(--_ink-text);
  }

  .comments__empty-stem {
    width: var(--space-2xs);
    height: var(--space-xl);
    flex-shrink: 0;
    background: color-mix(in oklab, var(--_ink) 45%, transparent);
  }

  .comments__empty-caret {
    width: var(--space-md);
    height: var(--space-sm);
    flex-shrink: 0;
    background: color-mix(in oklab, var(--_ink) 45%, transparent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .comments__pending-mark {
    width: var(--space-3xl);
    height: var(--space-3xl);
    border-radius: var(--radius-full);
    background: var(--_ink-muted);

    @media (prefers-reduced-motion: no-preference) {
      animation: comments-pending-breathe 1.6s ease-in-out infinite;
    }
  }

  .comments__form--pending {
    min-height: calc(var(--space-lg) * 2 + 3lh);
    pointer-events: none;
  }

  .comments__item {
    display: grid;
    grid-template-columns: var(--_avatar) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;

    @media (prefers-reduced-motion: no-preference) {
      animation: comments-slip-in 0.28s ease-out;
    }
  }

  .comments__avatar {
    display: grid;
    place-items: center;
    width: var(--_avatar);
    height: var(--_avatar);
    border-radius: var(--radius-full);
    color: var(--color-text-on-primary);
    font-family: var(--font-heading);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    text-transform: uppercase;
    flex-shrink: 0;

    &.avatar-color-0 { background: var(--blue-600); }
    &.avatar-color-1 { background: var(--emerald-600); }
    &.avatar-color-2 { background: var(--amber-600); }
    &.avatar-color-3 { background: var(--rose-600); }
    &.avatar-color-4 { background: var(--violet-600); }
    &.avatar-color-5 { background: var(--teal-600); }
    &.avatar-color-6 { background: var(--orange-600); }
    &.avatar-color-7 { background: var(--pink-600); }
  }

  .comments__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
  }

  .comments__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .comments__author {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .comments__time {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
  }

  .comments__text {
    font-size: var(--text-body);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;

    p {
      margin: 0;

      + p {
        margin-top: var(--space-xs);
      }
    }
  }

  .comments__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: end;
    padding: var(--space-lg);
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border-muted);

    @container comments (width < 40rem) {
      grid-template-columns: 1fr;

      .button {
        justify-self: end;
      }
    }
  }

  .comments__field {
    min-width: 0;
  }

  .comments__input.form-field__input {
    background: var(--color-surface);
    min-block-size: 3lh;
    max-block-size: 8lh;
    field-sizing: content;
    resize: none;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-color: var(--_ink);
      outline-offset: 0;
    }
  }

  .comments__form .button .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentcolor;
  }
}

@keyframes comments-slip-in {
  from {
    opacity: 0;
    translate: 0 var(--space-sm);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes comments-pending-breathe {
  50% {
    opacity: 0.55;
  }
}