.bbz-wrap{margin:20px 0}.bbz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bbz-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;margin:12px 0}
.bbz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bbz-table{width:100%;border-collapse:collapse}
.bbz-table th,.bbz-table td{border-bottom:1px solid #eee;padding:8px;text-align:left;font-size:14px;vertical-align:top}
.bbz-filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.bbz-filters input,.bbz-filters select{padding:6px 8px;border:1px solid #ddd;border-radius:8px}
.bbz-muted{color:#6b7280;font-size:13px}
.bbz-box{padding:14px;border:1px solid #eee;border-radius:12px;background:#fff}
.bbz-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999}
.bbz-modal-inner{max-width:900px;margin:60px auto;background:#fff;border-radius:14px;overflow:hidden;position:relative}
.bbz-modal-close{position:absolute;right:10px;top:6px;border:0;background:transparent;font-size:26px;cursor:pointer}
.bbz-modal-body{padding:16px}
.bbz-notice{padding:10px 12px;border-radius:10px;margin:8px 0}
.bbz-success{background:#ecfdf5;border:1px solid #a7f3d0}
.bbz-error{background:#fef2f2;border:1px solid #fecaca}
.bbz-list{margin:0;padding-left:18px}

.bbz-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.4;
  margin-left:6px;
  vertical-align:middle;
}
.bbz-badge-leader{
  background:#e6f4ea;
  border:1px solid #b7e1c1;
  color:#137333;
}

.bbz-table-wrap{ width:100%; overflow-x:auto; }

@media (max-width: 768px){
  .bbz-wrap{ padding: 8px; }
  .bbz-card{ padding: 12px; }
  .bbz-modal{ width: 96% !important; max-width: 96% !important; }
  .bbz-modal-body{ max-height: 70vh; overflow-y:auto; }
  .bbz-table{ min-width: 720px; }
  input[type="text"], select, textarea{ width: 100% !important; max-width: 100% !important; }
  #bbz_user_search{ width: 100% !important; margin-bottom: 8px; }
}

/* Instructions panel */
.bbz-instructions-list{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.bbz-instruction-item{ border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff; }
.bbz-instruction-item.is-read{ opacity:0.75; }
.bbz-instruction-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bbz-pill{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; border:1px solid #d1d5db; background:#f9fafb; }
.bbz-instruction-body{ margin-top:8px; }
.bbz-instruction-actions{ margin-top:10px; }

@media (max-width: 768px){
  .bbz-instruction-head{ flex-direction:column; align-items:flex-start; }
}


/* bbz-portrait-admin: improve admin dashboard layout on mobile portrait */
@media (max-width: 768px){
  /* ensure dashboard cards stack with comfortable spacing */
  .bbz-grid{ display:flex; flex-direction:column; gap:14px; }
  .bbz-card{ padding:14px; }
  /* keep both leaderboards and instructions readable */
  .bbz-card h3{ margin-top:0; margin-bottom:10px; }
  .bbz-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .bbz-table{ min-width: 680px; }
  /* reduce crowding inside filters/actions */
  .bbz-filters{ display:flex; flex-direction:column; gap:8px; }
  .bbz-actions{ display:flex; flex-wrap:wrap; gap:8px; }
  .bbz-actions .button{ margin:0; }
  input[type="text"], select, textarea{ width:100% !important; max-width:100% !important; }
}

@media (max-width: 420px){
  .bbz-card{ padding:12px; }
  .bbz-table{ min-width: 640px; }
}


/* My Instructions UI (bright) */
.bbz-instr-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bbz-instr-head .bbz-refresh{ white-space:nowrap; }
.bbz-instruction-item{ background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,0.06); border:1px solid #dbeafe; }
.bbz-instruction-item.is-unread{ border-left:6px solid #38bdf8; background:linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%); }
.bbz-instruction-item .bbz-pill{ border-color:#bae6fd; background:#e0f2fe; }
.bbz-btn-read{ background:#38bdf8 !important; border-color:#38bdf8 !important; color:#ffffff !important; }
.bbz-btn-read:hover{ filter:brightness(0.95); }
.bbz-btn-read .dashicons{ vertical-align:middle; margin-right:4px; }
.bbz-refresh .dashicons{ vertical-align:middle; margin-right:4px; }

@media (max-width: 768px){
  .bbz-instr-head{ flex-direction:column; align-items:flex-start; }
  .bbz-instr-head .bbz-refresh{ width:100%; text-align:center; }
}


/* bbz-app-instructions: App-like My Instructions */
.bbz-instruction-item{ border-radius:16px; }
.bbz-instruction-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bbz-dot{ width:10px; height:10px; border-radius:999px; background:#38bdf8; display:inline-block; }
.bbz-date{ font-size:12px; opacity:0.75; }
.bbz-instruction-details{ margin-top:10px; border-top:1px dashed #bae6fd; padding-top:10px; }
.bbz-summary{ cursor:pointer; font-weight:600; color:#0369a1; list-style:none; }
.bbz-summary::-webkit-details-marker{ display:none; }
.bbz-summary:before{ content:'▸'; display:inline-block; margin-right:8px; transform:translateY(-1px); }
details[open] .bbz-summary:before{ content:'▾'; }
.bbz-instruction-body{ margin-top:8px; font-size:14px; line-height:1.55; }
.bbz-card{ border-radius:18px; }


/* My Instructions - Messenger/WhatsApp-like UI */
.bbz-instr-head{ position:sticky; top:0; background:#ffffff; padding:10px 0; z-index:5; }
.bbz-instructions-list{ display:flex; flex-direction:column; gap:12px; }
.bbz-chat-row{ display:flex; gap:10px; align-items:flex-end; }
.bbz-chat-avatar{
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#e0f2fe; border:1px solid #bae6fd;
  flex:0 0 34px;
}
.bbz-chat-avatar .dashicons{ color:#0284c7; }

.bbz-chat-bubble{
  width:100%;
  border-radius:16px;
  padding:12px 12px 10px;
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#ffffff 0%, #f0f9ff 100%);
  box-shadow:0 6px 18px rgba(2,132,199,0.08);
  position:relative;
}
.bbz-chat-bubble:before{
  content:"";
  position:absolute;
  left:-6px; bottom:14px;
  width:12px; height:12px;
  background:inherit;
  border-left:1px solid #dbeafe;
  border-bottom:1px solid #dbeafe;
  transform:rotate(45deg);
}

.bbz-chat-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.bbz-chat-title{ display:flex; gap:8px; align-items:center; }
.bbz-unread-dot{
  width:10px; height:10px; border-radius:999px; background:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,0.18);
}
.bbz-chat-body{ margin-top:8px; }
.bbz-chat-body p{ margin:0 0 8px; }
.bbz-chat-body p:last-child{ margin-bottom:0; }

.bbz-chat-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:10px; padding-top:8px;
  border-top:1px dashed #bae6fd;
}
.bbz-chat-time{ font-size:12px; color:#64748b; }

.bbz-read-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#38bdf8; color:#ffffff !important;
  text-decoration:none;
}
.bbz-read-btn:hover{ filter:brightness(0.95); }
.bbz-read-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#dcfce7; border:1px solid #bbf7d0; color:#166534;
}
.bbz-read-chip .dashicons{ color:#16a34a; }

.bbz-chat-row.is-read .bbz-chat-bubble{
  background:#ffffff;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  border-color:#e5e7eb;
}
.bbz-chat-row.is-read .bbz-chat-bubble:before{
  border-left-color:#e5e7eb; border-bottom-color:#e5e7eb;
}

@media (max-width: 768px){
  .bbz-chat-avatar{ width:30px; height:30px; flex-basis:30px; }
  .bbz-chat-bubble{ padding:11px; }
  .bbz-chat-bottom{ flex-direction:column; align-items:flex-start; }
  .bbz-read-btn{ width:100%; justify-content:center; }
}


/* Premium polish */
.bbz-wrap{ max-width: 860px; margin: 0 auto; }
.bbz-card{ border-radius:18px; }
.bbz-instr-head{ padding:14px 0; }
.bbz-instr-head h3{ font-size:22px; letter-spacing:0.2px; }
.bbz-refresh{ border-radius:999px !important; padding:10px 14px !important; }
.bbz-chat-bubble{ border-radius:18px; }
.bbz-chat-title strong{ font-size:16px; }
.bbz-pill{ font-weight:700; }
.bbz-read-btn{ border-radius:999px; padding:10px 14px; font-weight:700; }
.bbz-read-btn.is-loading{ opacity:0.7; pointer-events:none; }

button.bbz-read-btn{ cursor:pointer; border:none; }