ステータス表示付きチャットヘッダー(オンライン等)

<div class="panel">
          <div class="head">
            <span class="av">R</span>
            <div class="info">
              <span class="name">リサ</span>
              <span class="state"><i class="dot"></i>オンライン</span>
            </div>
          </div>
          <div class="chat">
            <p class="bub">ただいま対応可能です。</p>
          </div>
        </div>

.d10-10-09 .panel{ width:100%; background:#f8f9fb; border-radius:10px; overflow:hidden; border:1px solid #eceef2; }
        .d10-10-09 .head{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#fff; border-bottom:1px solid #eceef2; }
        .d10-10-09 .av{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#10b981,#06b6d4); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-09 .info{ display:flex; flex-direction:column; gap:2px; }
        .d10-10-09 .name{ font-size:12px; font-weight:700; color:#333; }
        .d10-10-09 .state{ display:flex; align-items:center; gap:4px; font-size:10px; color:#10b981; }
        .d10-10-09 .dot{ width:6px; height:6px; border-radius:50%; background:#10b981; display:inline-block; }
        .d10-10-09 .chat{ padding:12px; }
        .d10-10-09 .bub{ margin:0; font-size:12px; background:#fff; border:1px solid #eceef2; padding:8px 12px; border-radius:10px; display:inline-block; }