<div class="row g-3 align-items-stretch">

  <!-- Card 1 -->
  <div class="col-xxl-4 col-lg-6">
    <div class="card h-100">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title mb-0">Bot Interaction Volume by Channel</h4>
        <a href="javascript:void(0);" class="btn btn-sm btn-success">Export <i class="ri-download-line ms-1"></i></a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-centered table-hover table-borderless mb-0">
            <thead class="border-top border-bottom bg-light-subtle border-light">
              <tr><th>Channel</th><th>Messages</th><th style="width:40%;">Load</th></tr>
            </thead>
            <tbody>
              <tr><td>WhatsApp</td><td>2,050</td><td><div class="progress" style="height:3px;"><div class="progress-bar bg-success" style="width:65%"></div></div></td></tr>
              <tr><td>Telegram</td><td>1,405</td><td><div class="progress" style="height:3px;"><div class="progress-bar bg-info" style="width:45%"></div></div></td></tr>
              <tr><td>Facebook Messenger</td><td>750</td><td><div class="progress" style="height:3px;"><div class="progress-bar bg-warning" style="width:30%"></div></div></td></tr>
              <tr><td>AR Interface</td><td>540</td><td><div class="progress" style="height:3px;"><div class="progress-bar bg-danger" style="width:25%"></div></div></td></tr>
              <tr><td>Other</td><td>8,965</td><td><div class="progress" style="height:3px;"><div class="progress-bar bg-dark" style="width:30%"></div></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="col-xxl-4 col-lg-6">
    <div class="card h-100">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title mb-0">Bot Response Engagement by Network</h4>
        <a href="javascript:void(0);" class="btn btn-sm btn-success">Export <i class="ri-download-line ms-1"></i></a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-centered table-hover table-borderless mb-0">
            <thead class="border-top border-bottom bg-light-subtle border-light">
              <tr><th>Network</th><th>Response Rate</th><th style="width:40%;">Completion</th></tr>
            </thead>
            <tbody>
              <tr><td>Facebook</td><td>2,250</td><td><div class="progress" style="height:3px;"><div class="progress-bar" style="width:65%"></div></div></td></tr>
              <tr><td>Instagram</td><td>1,501</td><td><div class="progress" style="height:3px;"><div class="progress-bar" style="width:45%"></div></div></td></tr>
              <tr><td>Twitter</td><td>750</td><td><div class="progress" style="height:3px;"><div class="progress-bar" style="width:30%"></div></div></td></tr>
              <tr><td>LinkedIn</td><td>540</td><td><div class="progress" style="height:3px;"><div class="progress-bar" style="width:25%"></div></div></td></tr>
              <tr><td>Other</td><td>13,851</td><td><div class="progress" style="height:3px;"><div class="progress-bar" style="width:52%"></div></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="col-xxl-4 col-lg-12">
    <div class="card h-100">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title mb-0">Bot Interaction Duration</h4>
        <a href="javascript:void(0);" class="btn btn-sm btn-success">Export <i class="ri-download-line ms-1"></i></a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-centered table-hover table-borderless mb-0">
            <thead class="border-top border-bottom bg-light-subtle border-light">
              <tr><th>Duration (Sec)</th><th style="width:30%;">Sessions</th><th style="width:30%;">User Prompts</th></tr>
            </thead>
            <tbody>
              <tr><td>0–30</td><td>2,250</td><td>4,250</td></tr>
              <tr><td>31–60</td><td>1,501</td><td>2,050</td></tr>
              <tr><td>61–120</td><td>750</td><td>1,600</td></tr>
              <tr><td>121–240</td><td>540</td><td>1,040</td></tr>
              <tr><td>241–420</td><td>56</td><td>886</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>
