@layer components {
  /* A space's home: the welcome and its composer, centered in the main pane. */
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    align-content: center;
    justify-items: stretch;
    gap: 1.5rem;
    inline-size: 100%;
    max-inline-size: 40rem;
    margin-inline: auto;
    padding: 1.5rem 1rem 12svh;
  }

  .home__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .home__intro {
    view-transition-name: home-intro;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    .momntum-mark {
      inline-size: 2.25rem;
      block-size: 2.25rem;
    }

    .momntum-mark * {
      animation-name: none;
    }
  }

  .home__welcome {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .home__missing {
    margin: 0;
    color: var(--muted-foreground);
    text-align: center;
  }

  .home-composer {
    view-transition-name: home-composer;
    display: grid;
    gap: 0.75rem;
  }

  /* The card is the control: the textarea inside it has no frame of its own. */
  .message-composer,
  .home--conversation .transcript__composer .composer:not(form) {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: 0 1px 2px oklch(0 0 0 / 4%), 0 4px 16px oklch(0 0 0 / 4%);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;

    &:hover {
      border-color: color-mix(in oklch, var(--input), var(--foreground) 25%);
    }

    &:has(textarea:focus-visible) {
      border-color: var(--ring);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 75%), 0 4px 16px oklch(0 0 0 / 4%);
    }

    &:has(textarea[aria-invalid="true"]) {
      border-color: var(--destructive);
    }
  }

  .message-composer textarea.input {
    grid-column: 1 / -1;
    min-block-size: 4.5rem;
    max-block-size: 40dvh;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    font-size: var(--text-base);
    resize: none;
    field-sizing: content;

    &:hover {
      border-color: transparent;
    }

    &:focus-visible {
      outline: none;
    }

    &:read-only {
      color: var(--muted-foreground);
    }
  }

  /* The conversation continues on the home: the welcome becomes its title row and the composer sits at the bottom. */
  .home.home--conversation {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-inline-size: none;
    min-block-size: 0;
    padding: 0;

    .home__head {
      justify-content: space-between;
      inline-size: 100%;
      max-inline-size: 48rem;
      margin-inline: auto;
      padding: 0.75rem 1rem 0;
    }

    .home__intro {
      gap: 0.5rem;

      .momntum-mark {
        inline-size: 1.5rem;
        block-size: 1.5rem;
      }
    }

    .home__welcome {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
    }

    /* The card floats above the conversation rather than sitting in a bar. */
    .transcript__composer {
      border-block-start: 0;
      background: transparent;
    }

    /* Every composer state is a card; an ended or read-only one holds only its notice. */
    .transcript__composer .composer {
      view-transition-name: home-composer;
      inline-size: min(100% - 2rem, 46rem);
      margin: 0.25rem auto 1rem;
    }

    .transcript__composer form.composer {
      padding: 0;
    }
  }

  :is(.home, .transcript__composer) {
    /*
     * The message form as a toolbar card: the message on top, then a row with
     * Dictate, one line of help, and a round Send. The field and dictation
     * keep their markup; display: contents lets their parts sit in the card's grid.
     */
    .message-composer {
      container: home-composer / inline-size;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0 0.5rem;
      padding: 0.625rem 0.625rem 0.5rem;

      .field:has(textarea),
      .dictation,
      .dictation__toolbar,
      .dictation__send {
        display: contents;
      }

      /* The placeholder names the field, as on the welcome. */
      .field > .label,
      .field > [data-herb-debug-outline-type] > .label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      textarea.input {
        grid-row: 2;
        min-block-size: 3rem;
        margin-block-end: 0.25rem;
        padding-inline: 0.375rem;
      }

      [data-dictation-target="start"],
      .dictation__session {
        grid-column: 1;
        grid-row: 3;
      }

      [data-dictation-target="send"] {
        grid-column: 3;
        grid-row: 3;
      }

      .field__hint,
      .dictation__status {
        grid-column: 2;
        grid-row: 3;
        min-block-size: 0;
        margin: 0;
        padding-inline: 0.25rem;
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        text-align: end;
        transition: opacity 150ms ease-out;
      }

      .field__error {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-inline: 0.375rem;
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
      }

      .composer-attachment {
        grid-column: 1 / -1;
        grid-row: 6;
        margin-block-start: 0.5rem;
      }

      [name="turn[requests_contact]"] {
        grid-column: 1 / -1;
        grid-row: 7;
        margin-block-start: 0.5rem;
      }

      .field__hint {
        opacity: 0;
      }

      &:has(textarea:focus):has(.dictation[data-state="idle"]) {
        .field__hint {
          opacity: 1;
        }

        .dictation__status {
          opacity: 0;
        }
      }

      [data-dictation-target="start"],
      [data-dictation-target="send"] {
        min-inline-size: 2.25rem;
        min-block-size: 2.25rem;
        padding: 0;

        .button__icon {
          display: inline-flex;
        }

        .button__label {
          position: absolute;
          inline-size: 1px;
          block-size: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
      }

      [data-dictation-target="start"] {
        border-color: transparent;
        color: var(--muted-foreground);

        &:hover {
          color: var(--foreground);
        }
      }

      [data-dictation-target="send"] {
        border-radius: 999px;
      }

      /* Send waits for text; it stays focusable. */
      &:has(textarea:placeholder-shown) [data-dictation-target="send"] {
        opacity: 0.35;
      }

      .dictation__session:not([hidden]) {
        border: 0;
        background: transparent;
        padding-inline: 0.25rem 0;

        /* Its column is only as wide as its contents, so the wave keeps a width of its own. */
        .dictation__wave {
          flex: none;
          inline-size: 7rem;
          block-size: 2.25rem;
        }

        .button {
          min-block-size: 2rem;
          padding-inline: 0.75rem;
          font-size: var(--text-sm);
        }
      }

      /* Too narrow to share the row with dictation's controls, the progress takes its own line,
         below a send error's row 4 so the two never overlap. */
      /* Named, because .dictation is a container of its own. */
      @container home-composer (width < 34rem) {
        .dictation:not([data-state="idle"]) .dictation__status {
          grid-column: 1 / -1;
          grid-row: 5;
          text-align: start;
        }

        .dictation__session:not([hidden]) .dictation__wave {
          inline-size: 3rem;
        }
      }
    }
  }

  .home.home--conversation {
    /* A chat with Momntum, as in the compact conversation panel: people send as themselves. */
    .composer .field:has(select[name="turn[participant]"]) {
      display: none;
    }

    @media (width >= 48rem) {
      .home__head {
        padding-inline: 1.5rem 1rem;
      }
    }
  }

  .home__conversation {
    flex: 1;
    min-block-size: 0;
  }

  /* Starting a conversation and New chat move the welcome and the composer between the two layouts. */
  ::view-transition-group(home-intro),
  ::view-transition-group(home-composer) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
}