@layer components {
  /* Every finalized reply carries a slot; one showing nothing takes no room. */
  .idea-review:not(:has(> *)) {
    display: none;
  }

  .idea-review {
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
    color: var(--color-ink);
    font-size: var(--text-small);
    min-inline-size: 0;
  }

  /* Send is the chat's one filled button, so the review's primaries are outlined. */
  .idea-review .btn--primary {
    --btn-bg: var(--color-canvas);
    --btn-border-color: oklch(var(--lch-ink-light));
    --btn-color: var(--color-ink);
  }

  .idea-review .btn--primary:hover {
    --btn-border-color: oklch(var(--lch-ink-medium));
  }

  /* Wraps to a second row on a narrow phone rather than shrinking the targets. */
  .idea-review__launcher,
  .idea-review__failed,
  .idea-review__no-ideas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-half);
  }

  .idea-review__bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }

  .idea-review__bulk-button {
    min-inline-size: 44px;
  }

  .idea-review__failed-message {
    color: var(--color-negative);
  }

  .idea-review__ready,
  .idea-review__submitted {
    color: var(--color-ink-secondary);
  }

  .idea-review__items {
    border-block-end: var(--border);
    display: flex;
    flex-direction: column;
    margin-block: var(--block-space-half);
  }

  /* Cards stay full-width and in place: a swipe paints the choice and snaps
     back. touch-action leaves vertical conversation scrolling to the browser. */
  .idea-review__item {
    padding-block: calc(var(--block-space) * 0.75);
    border-block-start: var(--border);
    background-color: var(--color-canvas);
    touch-action: pan-y;
    translate: var(--idea-review-swipe-x, 0) 0;
    transition: translate var(--transition-fast);
  }

  .idea-review__item[data-idea-review-swiping="true"] {
    transition: none;
    user-select: none;
  }

  .idea-review__item-title {
    margin: 0;
    font-family: var(--font-prose);
    font-size: var(--text-small);
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .idea-review__item-summary {
    margin-block: var(--block-space-quarter) 0;
    color: var(--color-ink-secondary);
    font-family: var(--font-prose);
    overflow-wrap: anywhere;
  }

  /* Text state, so the border colour is never the only signal. */
  .idea-review__decision {
    display: inline-block;
    margin-block-start: var(--block-space-quarter);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-ink-muted);
  }

  /* A kept idea reads in ink; a passed one recedes. */
  .idea-review__item--accepted .idea-review__decision {
    color: var(--color-ink);
  }

  .idea-review__item--rejected :is(.idea-review__item-title, .idea-review__item-summary) {
    color: var(--color-ink-muted);
  }

  .idea-review__item-actions {
    display: flex;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
  }

  .idea-review__decision-button {
    flex: 1;
    justify-content: center;
    min-block-size: 44px;
  }

  /* A chosen option is drawn in ink: the accent stays for the one primary action. */
  .idea-review__decision-button[aria-pressed="true"] {
    --btn-border-color: var(--color-ink);
    --btn-color: var(--color-ink);
    border-width: 2px;
    font-weight: 600;
  }

  .idea-review__progress {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  .idea-review__send {
    margin-block-start: var(--block-space-half);
  }

  .idea-review__send-button {
    inline-size: 100%;
    justify-content: center;
  }

  .idea-review__send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .idea-review__hint {
    margin-block: var(--block-space-quarter) 0;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  /* Sits inside the author's bubble, on its link-coloured background. */
  .idea-review__choice-turn-label {
    display: block;
    margin-block-end: var(--block-space-quarter);
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0.8;
  }

  /* The reset layer turns the motion off; the card also stays put under a swipe. */
  @media (prefers-reduced-motion: reduce) {
    .idea-review__item {
      translate: none;
    }
  }
}