@layer components {

  /* The note slot (under the line items) and the sidebar action are always in
     the DOM so Turbo can target them, but they hold only whitespace when there
     is nothing to show. Collapse them then, so no empty gap is left behind. */
  .inv-note-slot:not(:has(*)) {
    display: none;
  }

  /* No dashed border on the add-note button (the shared line-item button keeps it). */
  .inv-note-add .inv-add-btn,
  .inv-note-add .inv-add-btn:hover {
    border-color: transparent;
  }

  /* ─── Note card ───────────────────────────── */

  .inv-note {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .inv-note__input {
    border-radius: var(--radius-md);
    line-height: 1.5;
    padding: 0.75rem 0.875rem;
    resize: vertical;
  }

  .inv-note__actions {
    display: flex;
    justify-content: flex-end;
  }

  .inv-note__remove {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-negative-strong);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.375rem 0.5rem;
  }

  .inv-note__author {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 400;
    margin-inline-start: 0.375rem;
  }
}