問題

メッセージを入力すると、入力したメッセージが、ヘッダーの後ろに隠れてしまっていた。

メッセージが隠れている。

position: fixedの場合
/* position: fixed
要素はビューポート（画面の表示領域）を基準に配置される
headerはbodyのレイアウトに影響を与えず、bodyの高さには含まれなくなる  */

header {
	// 他省略
	position: fixed;
}

原因

position: fixed;を使用しているため、ヘッダーが通常のレイアウトフローから外れ、bodyの高さに含まれなくなっている。
その結果、chat-containerのmargin-topが正しく適用されず、メッセージがヘッダーの後ろに隠れてしまう。

position: sticky;を使う

/* position: sticky;
要素がスクロールに応じて動き、特定の位置で固定される
親要素の範囲内でのみ固定される 
*/

header {
	// 他省略
	position: sticky;
}

メッセージを表示できた。

devツールを使いながら細かい部分まで見ることになり、勉強になりました！