ナビ・リスト操作
アプリバー
モバイル画面上部のアプリバー。左に戻る（またはメニュー）、中央にタイトル、右にアクションアイコンを置く。スクロールしても追従する想定のヘッダー。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューでは枠内に画面を再現するため .ab-bar を通常フローに置いています。実ページで常に上部へ固定するなら .ab-bar を position:sticky; top:0（または fixed）にし、safe-area-inset-top でノッチぶんの余白を確保してください。タイトルは flex:1＋text-align:center で中央寄せ、左右のアイコン領域が非対称でも見た目が中央に来るようにしています。
コード（コピーして使えます）
<div class="ab-screen">
<header class="ab-bar">
<button class="ab-icon" id="ab-back" aria-label="戻る">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15,5 8,12 15,19"/></svg>
</button>
<h1 class="ab-title">受信トレイ</h1>
<div class="ab-actions">
<button class="ab-icon" aria-label="検索">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
</button>
<button class="ab-icon" id="ab-more" aria-label="その他">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></svg>
</button>
</div>
</header>
<div class="ab-body">
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
</div>
</div>