ソーシャル・コミュニケーション
チャットUI
メッセンジャー風の吹き出し。相手は左（淡色）、自分は右（藍）に並ぶ。入力欄に打って送るとJSで自分の吹き出しが増え、タイピング中を示す3点アニメの後に返信が届く。
プレビュー
入力
操作実際に入力して試せます。
コード（コピーして使えます）
<div class="chat" id="chat">
<div class="chat-head">
<span class="chat-ava" style="background:linear-gradient(135deg,#2b50c7,#7fa4ff)">み</span>
<div class="chat-meta">
<span class="chat-name">みお</span>
<span class="chat-status"><span class="dot"></span>オンライン</span>
</div>
</div>
<div class="chat-log" id="chatLog" aria-live="polite">
<div class="msg in"><div class="bubble">こんにちは！最近どう？</div></div>
<div class="msg out"><div class="bubble">ばっちりだよ、ありがとう😊</div></div>
<div class="msg in"><div class="bubble">今日の予定はもう決まった？</div></div>
<div class="msg in" id="typingRow">
<div class="bubble typing" aria-label="入力中">
<span></span><span></span><span></span>
</div>
</div>
</div>
<form class="chat-input" id="chatForm">
<input type="text" id="chatText" placeholder="メッセージを入力" aria-label="メッセージ" autocomplete="off"/>
<button type="submit" class="send-btn" id="sendBtn" aria-label="送信">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M2 9l14-6.5L11 16l-2.5-5L2 9z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" fill="none"/>
</svg>
</button>
</form>
</div>