/* ── Fab & Button ── */
#wb-fab { position:fixed; right:44px; bottom:105px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
#wb-btn { width:64px; height:64px; border-radius:50%; background:#06A3DA; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(6,163,218,.45); transition:transform .15s; }
#wb-btn:hover { transform:scale(1.08); }
#wb-btn i { font-size:24px; color:#fff; }
#wb-badge { position:absolute; top:-4px; right:-4px; background:#E24B4A; color:#fff; border-radius:50%; width:18px; height:18px; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#wb-fab #wb-btn span.wb-label { font-size:9px; color:#fff !important; display:block; line-height:1; margin-top:3px; letter-spacing:.03em; font-weight:500; }

/* ── Panel ── */
#wb-panel { display:none; width:95vw; max-width:1200px; background:#fff; border:1px solid #ddd; border-radius:12px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.15); }
#wb-panel.open { display:block; }
#wb-head { background:#06A3DA; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
#wb-head span { color:#fff; font-size:15px; font-weight:500; }
#wb-close { background:none; border:none; cursor:pointer; color:#fff; font-size:22px; line-height:1; padding:0; }
#wb-body { max-height:70vh; overflow-y:auto; }
#wb-foot { padding:10px 16px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
#wb-foot span { font-size:12px; color:#aaa; }
#wb-empty { padding:50px; text-align:center; color:#bbb; font-size:14px; }

/* ── Table (desktop sahaja) ── */
#wb-table { width:100%; border-collapse:collapse; font-size:13px; }
#wb-table thead tr { background:#f5f7fa; }
#wb-table th { padding:10px 12px; text-align:left; font-size:11px; font-weight:600; color:#888; border-bottom:1px solid #eee; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }
#wb-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; color:#333; vertical-align:middle; }
#wb-table tbody tr:last-child td { border-bottom:none; }
#wb-table tbody tr:hover td { background:#f9fbff; }

/* ── Card (mobile sahaja, sorok dulu) ── */
.wb-card { display:none; }

/* ── Desktop ── */
@media (min-width: 769px) {
  .wb-card { display:none !important; }
  #wb-table { display:table; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #wb-fab { right:auto; left:10px; bottom:45px; }
  #wb-panel { width:calc(100vw - 20px); max-width:100%; position:fixed; right:10px; bottom:110px; left:10px; border-radius:12px; }

  /* Sorokkan table, tunjuk card */
  #wb-table { display:none; }
  .wb-card { display:flex; align-items:flex-start; gap:10px; padding:12px; border-bottom:1px solid #eee; }
  .wb-card:last-child { border-bottom:none; }
  .wb-card-no { min-width:28px; height:28px; background:#06A3DA; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; flex-shrink:0; }
  .wb-card-body { flex:1; }
  .wb-card-tajuk { font-weight:600; font-size:14px; color:#222; margin-bottom:6px; }
  .wb-card-info { font-size:12px; color:#555; margin-bottom:3px; }
  .wb-card-info i { width:14px; color:#06A3DA; margin-right:4px; }
  .wb-card-info small { color:#888; }
}