@layer components {

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    margin-top: var(--space-3);
  }

  .timeline__list .comment-form { border-top: 0; margin-top: 0; padding-top: 0; }

  .timeline__list:not(:has(*)) ~ .comment-form { border-top: 0; margin-top: 0; padding-top: 0; }

  .comment-form__field { position: relative; }

  
  .textarea.comment-form__body {
    line-height: var(--leading-body);
    display: block;
    border-radius: var(--radius-lg);
    min-height: calc(var(--control-h) + var(--control-h-sm));
    
    padding: var(--space-2);
    padding-bottom: calc(var(--control-h-sm) + var(--space-2));
    
    overflow: visible;
    
    transition: background var(--transition), border-color var(--transition),
                height var(--transition), var(--responds);
  }

  
  .textarea.comment-form__body:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .comment-form__body [contenteditable]:focus-visible { outline: none; }

  .comment-form__actions {
    position: absolute;
    right: var(--space);
    bottom: var(--space);
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  
  .comment-form__post {
    width: var(--control-h-sm);
    min-height: var(--control-h-sm);
    padding: 0;
  }

  
  .comment-form lexxy-editor {
    --lexxy-editor-padding: var(--space);
    --lexxy-editor-rows: 1lh;
  }
}