/*
 * CP-02 Comment composer — app/components/ui/comment_composer_component.rb
 *
 * FM-03 auto-grow textarea inside an inset panel, right-aligned "Post"
 * button beneath. Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-comment-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-comment-composer__panel {
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.ui-comment-composer__actions {
  display: flex;
  justify-content: flex-end;
}

/*
 * Inline (chat) variant — textarea and send button on one row. The
 * textarea starts a single control-height tall and grows to a short cap
 * (autogrow max 160px, matched here), so the composer stays compact above
 * a phone's on-screen keyboard. The panel's own padding is dropped: the
 * FM-03 control already carries its fill and border.
 */
.ui-comment-composer--inline {
  flex-direction: row;
  align-items: flex-end;
  --textarea-min-h: var(--space-12);
  --textarea-max-h: 160px;
}

.ui-comment-composer--inline .ui-comment-composer__panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.ui-comment-composer--inline .ui-comment-composer__panel textarea {
  width: 100%;
  display: block;
}

.ui-comment-composer--inline .ui-comment-composer__actions {
  flex-shrink: 0;
  padding-bottom: var(--space-1);
}

.ui-comment-composer--inline .ui-comment-composer__panel.surface-inset {
  background: transparent;
}