@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: var(--block-space-half) var(--inline-space-half);
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-size: var(--text-small);
    min-inline-size: 0;
  }

  /* 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__generating {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    color: var(--color-ink-muted);
  }

  .idea-review__spinner {
    display: inline-block;
    flex-shrink: 0;
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid var(--color-ink-muted);
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: idea-review-spin 1s linear infinite;
  }

  @keyframes idea-review-spin {
    to { transform: rotate(360deg); }
  }

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

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

  .idea-review__items {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    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: var(--block-space-half) var(--inline-space-half);
    border: var(--border);
    border-inline-start: 4px solid var(--color-ink-muted);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    touch-action: pan-y;
    translate: var(--idea-review-swipe-x, 0) 0;
    transition: translate var(--transition-fast), border-color var(--transition-fast);
  }

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

  .idea-review__item--accepted {
    border-inline-start-color: var(--color-positive);
  }

  /* Dashed as well as coloured, so the edge tells Pass from Keep without hue. */
  .idea-review__item--rejected {
    border-inline-start-color: var(--color-negative);
    border-inline-start-style: dashed;
  }

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

  .idea-review__item-summary {
    margin-block: var(--block-space-quarter) 0;
    color: var(--color-ink-secondary);
    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: 600;
    color: var(--color-ink-muted);
  }

  .idea-review__item--accepted .idea-review__decision {
    color: var(--color-positive);
  }

  .idea-review__item--rejected .idea-review__decision {
    color: var(--color-negative);
  }

  .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;
  }

  .idea-review__decision-button[aria-pressed="true"] {
    border-width: 2px;
    font-weight: 700;
  }

  .idea-review__item--accepted .idea-review__decision-button[aria-pressed="true"] {
    border-color: var(--color-positive);
    color: var(--color-positive);
  }

  .idea-review__item--rejected .idea-review__decision-button[aria-pressed="true"] {
    border-color: var(--color-negative);
    color: var(--color-negative);
  }

  .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;
  }

  @media (prefers-reduced-motion: reduce) {
    .idea-review__item {
      transition: none;
      translate: none;
    }

    .idea-review__spinner {
      animation: none;
    }
  }
}