@layer components {
  .composer {
    container-type: inline-size;

    .wipe {
      position: absolute;
      inset-inline-end: 0.1em;
      inset-block: 0.1em;
      display: flex;
      align-items: center;
      justify-content: center;
      min-block-size: 2.25rem;
      min-inline-size: 2.25rem;
      margin: 0;
      padding: 0;
      color: var(--muted);
      background: transparent;
      border: 0;
      border-radius: var(--radius-s);
      cursor: pointer;
      touch-action: manipulation;

      .glyph {
        inline-size: 1.1em;
        block-size: 1.1em;
      }
    }

    .photo-btns {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0;
      min-inline-size: 0;
    }

    /* Same muted icon attach as community comments: camera / library
       sit on the name line, not as filled dusk buttons under it. */
    .photo-attach {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      min-inline-size: var(--touch);
      min-block-size: var(--touch);
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: var(--radius-s);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      touch-action: manipulation;

      .glyph {
        inline-size: 1.4em;
        block-size: 1.4em;
      }

      &:has(:focus-visible) {
        outline: var(--stroke) solid var(--paprika);
        outline-offset: 0.15em;
      }

      &.is-busy {
        opacity: 0.65;
        pointer-events: none;
      }
    }

    .photo-btn:has([capture]) { display: none; }

    @media (any-pointer: coarse) {
      .photo-btn:has([capture]) { display: inline-flex; }
    }

    .photo-tip,
    .suggest-note {
      flex: 1 1 100%;
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      color: var(--muted);
      font-size: var(--step-00);
    }

    .suggest {
      display: grid;
      flex: 1 1 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xs);
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      border: 0;

      button,
      .suggest-photo,
      .suggest-look {
        min-inline-size: 0;
        min-block-size: var(--touch);
        padding: var(--space-xs) var(--space-s);
        border: thin solid color-mix(in oklch, var(--ink) 18%, var(--mist));
        border-radius: var(--radius-s);
        background: var(--cream);
        color: inherit;
        text-align: start;
      }

      button {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title title" "brand pack";
        align-items: baseline;
        align-content: start;
        column-gap: var(--space-xs);
        cursor: pointer;
        touch-action: manipulation;

        &:not(:has(.product-brand)) { grid-template-areas: "title pack"; }

        .product-title {
          grid-area: title;
          min-inline-size: 0;
        }

        .product-brand {
          grid-area: brand;
          min-inline-size: 0;
        }

        [data-field="pack"] {
          grid-area: pack;
          font-size: 0.85em;
          line-height: 1.2;
          white-space: nowrap;
          font-variant-numeric: tabular-nums;
        }

        &:hover,
        &:focus-visible {
          background: var(--paper);
          border-color: var(--paprika);
        }
      }
      /* Virtual wait chips: a look's stills sit in one horizontal strip along
         the chip row, the flashing status wrapping below when the strip takes
         the full row; the typed «Поиск вариантов…» chip is the same shell
         without thumbs. */
      .suggest-photo,
      .suggest-look {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs);

        .suggest-photo-thumbs {
          display: flex;
          flex: 0 1 auto;
          flex-wrap: nowrap;
          align-items: center;
          gap: 0.15rem;
          min-inline-size: 0;
        }

        img {
          inline-size: 2.25rem;
          aspect-ratio: 1;
          min-inline-size: 0;
          object-fit: cover;
          border-radius: var(--radius-s);
          background: var(--paper);
        }

        .product-title {
          flex: 1 1 auto;
          min-inline-size: 0;
        }

        .suggest-photo-body {
          display: flex;
          align-items: baseline;
          flex: 1 1 auto;
          min-inline-size: 0;
          gap: var(--space-xs);
        }

        .suggest-wait-bar {
          flex: 1 1 100%;
          block-size: 0.1875rem;
          border-radius: 999rem;
          background: color-mix(in oklch, var(--ink) 12%, var(--mist));
          overflow: hidden;
        }

        .suggest-wait-fill {
          display: block;
          block-size: 100%;
          inline-size: 100%;
          background: var(--paprika);
          transform-origin: 0 50%;
          transform: scaleX(0);
          transition: transform 0.3s linear;
        }
      }

      .suggest-note { grid-column: 1 / -1; }

      .suggest-wait { animation: suggest-wait 1.1s ease-in-out infinite; }
    }

    /* Walk chips and food chips read as one continuous list: the board is
       the single grid; each .suggest dissolves into it (display: contents)
       so items wrap together. Chips keep their own tints. */
    .suggest-board {
      display: grid;
      flex: 1 1 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xs);
      min-inline-size: 0;

      .suggest { display: contents; }
    }

    /* Near or over the calorie norm the «Прогулка» chip leads the row;
       otherwise it trails the food chips. */
    .suggest-board.walk-last .activity-chips button { order: 2; }

    .suggest.activity-chips button {
      border-color: color-mix(in oklch, var(--sage) 55%, var(--paper));
      background: color-mix(in oklch, var(--sage) 24%, var(--paper));

      @supports (color: oklch(from red l c h)) {
        border-color: oklch(from var(--sage) calc(l + 0.2) calc(c * 0.8) h);
        background: oklch(from var(--sage) calc(l + 0.36) calc(c * 0.5) h);
      }

      .product-brand { color: var(--sage); }

      &:hover,
      &:focus-visible {
        border-color: var(--sage);
        background: color-mix(in oklch, var(--sage) 36%, var(--paper));

        @supports (color: oklch(from red l c h)) {
          background: oklch(from var(--sage) calc(l + 0.28) calc(c * 0.75) h);
        }
      }
    }
  }

  @container (min-width: 28rem) {
    .composer .suggest-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @container (min-width: 40rem) {
    .composer .suggest-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .composer .suggest-wait { animation: none; }
    .composer .suggest-wait-fill { transition: none; }
  }

  @keyframes suggest-wait {
    50% { opacity: 0.45; }
  }
}