チャットの入力欄Chat composer

「チャットの入力欄（Chat composer）」を実装してください。

## これは何か
チャット画面の下にある、角の丸い入力の箱。書くほど縦に伸び、左に添付のクリップ、右に送信の矢印ボタンがある。Enter で送信する。

## 使いどころ
- チャット・問い合わせ窓口・AIへの指示など、短い文を何度も送る画面
- 送った文が、上の会話の一覧に積み上がっていく形のとき

## 実装の要件
- form > label + textarea[rows=1] + 添付ボタン + button[type=submit]。枠は入力欄ではなく箱全体に引き、:focus-within で強調する
- textarea に field-sizing: content と max-height を付けて、書いた行数に合わせて伸び縮みさせる（Chrome・Edge は 123 から、Safari は 26.2 から、Firefox は 152 から）
- 未対応のブラウザ向けの代替は CSS.supports("field-sizing", "content") が false のときだけ動かす。常に動かすと height の指定が field-sizing を打ち消す
- 代替では、input イベントのときと送信で空にしたあとに、height をいったん auto に戻してから scrollHeight を height に入れる（auto に戻さないと行を消しても縮まない）
- keydown で Enter（Shift なし・変換中でない）なら preventDefault して requestSubmit()。Shift+Enter はそのまま改行させる
- 日本語の変換を確定する Enter で送信しない。keydown で event.isComposing が true か event.keyCode が 229 のときは何もしない
- Safari 26 以前は確定の Enter で isComposing が false になるので、keyCode 229 の確認を外さない
- Enter で送信するなら、改行の方法（Shift+Enter）を入力欄の近くに書く。長文を書く用途なら Ctrl+Enter で送信にするほうが誤送信が減る
- 伸びる高さに上限を付ける。超えたら入力欄の中でスクロールさせ、上の会話を押し出さない
- 送信が終わるまで次の送信を受け付けない。二重に送られる

## アクセシビリティの要件
- 入力欄に label で名前を付ける。見た目に出さないなら視覚的に隠した label にし、プレースホルダーだけに頼らない
- アイコンだけの送信・添付ボタンに aria-label で名前を付ける
- Enter と Shift+Enter の説明を aria-describedby で入力欄に結ぶ
- 空のときに送信ボタンを disabled にすると、Tab で届かず押せない理由も伝わらない。押せるまま「メッセージを入力してください」と知らせる形もある
- 送信したあとも入力欄にフォーカスを残し、続けて書けるようにする

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-chat-input">
  <!-- 実際は form で包み、送信ボタンを type="submit" にする。Enter で送信し、Shift+Enter と日本語の変換中の Enter では送信しない -->
  <label class="x-chat-input__sr" for="x-chat-input-t">メッセージ</label>
  <div class="x-chat-input__box">
    <textarea class="x-chat-input__t" id="x-chat-input-t" name="message" rows="1"
              placeholder="メッセージを入力" aria-describedby="x-chat-input-h">週末の天気を教えて</textarea>
    <div class="x-chat-input__bar">
      <button class="x-chat-input__attach" type="button" aria-label="ファイルを添付">
        <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
      </button>
      <button class="x-chat-input__send" type="button" aria-label="送信">
        <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <p class="x-chat-input__h" id="x-chat-input-h"><kbd>Enter</kbd> で送信、<kbd>Shift</kbd>+<kbd>Enter</kbd> で改行</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-chat-input,
.x-chat-input *:not([class*="fa-"]),
.x-chat-input *:not([class*="fa-"])::before,
.x-chat-input *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-chat-input {
  position: relative;
  width: 320px;
  max-width: 100%;  /* 狭い画面では親の幅に合わせて縮む */
}
/* 画面には出さず、読み上げにだけ渡す */
.x-chat-input__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 枠は入力欄ではなく箱全体に引く。ボタンまで含めて1つの入力欄に見せる */
.x-chat-input__box {
  padding: 10px 10px 8px 14px;
  border: 1px solid #7f8a99;
  border-radius: 14px;
  background: #fff;
}
.x-chat-input__box:focus-within {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px #1d4ed8;
}
/* field-sizing: content で、書いた行数に合わせて伸びる。上限は max-height で決め、超えたら中でスクロール。
   未対応のブラウザでは、JavaScript の代替が height をいったん auto に戻してから scrollHeight を入れて伸ばすので、
   テキストエリアの部品と違い resize: none は @supports の外に置いてよい */
.x-chat-input__t {
  display: block;
  width: 100%;
  min-height: 24px;
  max-height: 120px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
/* 枠の強調は箱の :focus-within が持つので、入力欄そのものの枠は消す */
.x-chat-input__t:focus {
  outline: none;
}
.x-chat-input__t::placeholder {
  color: #6b7280;
}
.x-chat-input__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.x-chat-input__attach,
.x-chat-input__send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}
.x-chat-input__attach {
  border: 1px solid #7f8a99;
  background: #fff;
  color: #4b5563;
}
.x-chat-input__attach:hover {
  background: #f3f4f6;
}
.x-chat-input__send {
  border: 0;
  background: #1d4ed8;
  color: #fff;
}
.x-chat-input__send:hover {
  background: #1e40af;
}
.x-chat-input__attach:focus-visible,
.x-chat-input__send:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.x-chat-input__h {
  margin: 6px 0 0 4px;
  color: #5b6472;
  font-size: 11px;
}
.x-chat-input__h kbd {
  padding: 0 4px;
  border: 1px solid #cfd4dc;
  border-radius: 4px;
  background: #f9fafb;
  color: #1b2028;
  font-family: inherit;
  font-size: 10.5px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。