/* Frontend UI */
.wtb-bell-wrap{position:relative;display:inline-block;z-index:10}
.wtb-bell{width:var(--wtb-bell-size,46px);height:var(--wtb-bell-size,46px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--wtb-bell-bg,#fff);box-shadow:0 8px 22px rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.06);cursor:pointer;position:relative}
.wtb-bell svg{width:calc(var(--wtb-bell-size,46px)*.48);height:calc(var(--wtb-bell-size,46px)*.48)}
.wtb-badge{position:absolute;top:-4px;right:-4px;background:var(--wtb-badge-bg,#ef4444);color:#fff;border-radius:999px;padding:2px 6px;font-size:12px;line-height:1;border:2px solid #fff}
.wtb-panel{position:absolute;top:calc(var(--wtb-bell-size,46px) + 10px);right:0;width:var(--wtb-panel-width,420px);max-width:92vw;background:var(--wtb-panel-bg,#fff);border:1px solid #e5e7eb;border-radius:var(--wtb-radius,14px);box-shadow:0 20px calc(40px*var(--wtb-shadow,.6)) rgba(0,0,0,.15);display:none;overflow:hidden;z-index:9999}
.wtb-panel.left{right:auto;left:0}
.wtb-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
.wtb-panel-header h4{margin:0;font-size:16px}
.wtb-panel-list{max-height:70vh;overflow:auto;padding:8px}
.wtb-item{display:flex;gap:12px;padding:14px;border-radius:calc(var(--wtb-radius,14px) - 2px);border:1px solid #eef2f7;background:#fff;margin:var(--wtb-gap,10px) 6px;align-items:flex-start;transition:opacity .2s ease}
.wtb-item:hover{background:#f8fafc}
.wtb-item.read{opacity:.6}
.wtb-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;opacity:var(--wtb-ic-opacity,1)}
.wtb-ic.survey{background:var(--wtb-col-survey,#f59e0b)}
.wtb-ic.update{background:var(--wtb-col-update,#6366f1)}
.wtb-ic.review{background:var(--wtb-col-review,#22c55e)}
.wtb-ic.published{background:var(--wtb-col-published,#f59e0b)}
.wtb-ic.replied{background:var(--wtb-col-replied,#8b5cf6)}
.wtb-ic.star{background:var(--wtb-col-star,#10b981)}
.wtb-body{flex:1}
.wtb-title{font-weight:700;margin:0 0 4px 0}
.wtb-msg{margin:0;font-size:14px;color:#374151}
.wtb-meta{font-size:12px;color:#6b7280;margin-top:6px}
.wtb-empty{padding:24px;text-align:center;color:#6b7280}
.wtb-more{padding:10px 12px;border-top:1px solid #eef2f7;background:#fafafa;text-align:center}
.wtb-more a{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;text-decoration:none;font-weight:600}
.wtb-list{max-width:var(--wtb-panel-width,640px)}
.wtb-list .wtb-item{cursor:pointer}


/* Full-width list layout & no overflow */
.wtb-list{width:100%;max-width:100%}
.wtb-list .wtb-item{display:block;width:100%;box-sizing:border-box}
.wtb-list .wtb-body{max-width:100%}
.wtb-list .wtb-msg{white-space:normal;word-break:break-word;overflow-wrap:anywhere}

/* Toolbar */
.wtb-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 14px}
.wtb-toolbar label{display:flex;align-items:center;gap:6px}
.wtb-toolbar .btn{padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;cursor:pointer}
.wtb-toolbar input[type="search"]{padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px}


/* Refined full-width card list */
.wtb-list[data-mode="list"] .wtb-item{display:flex;gap:12px;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin:10px 0;text-decoration:none;color:inherit}
.wtb-list[data-mode="list"] .wtb-item:hover{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.wtb-list .wtb-ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid #eef0f2}
.wtb-list .wtb-title{font-weight:700;margin:0 0 6px}
.wtb-list .wtb-msg{font-size:14px;opacity:.9}
.wtb-list .wtb-meta{font-size:12px;color:#6b7280;margin-top:8px}
/* Toolbar v2 */
.wtb-toolbar{position:sticky;top:0;z-index:1;background:linear-gradient(#fff,#fff);padding:8px 0;margin:0 0 8px;border-bottom:1px solid #f1f5f9}
.wtb-toolbar label>span{font-size:12px;color:#6b7280}
.wtb-toolbar select{padding:6px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.wtb-toolbar .wtb-srch input{min-width:220px}
.wtb-toolbar .btn{padding:8px 14px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;cursor:pointer}
.wtb-toolbar .btn:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}


/* =====================
   Mobile responsiveness
   ===================== */
:root{
  --wtb-touch: 44px;
}
/* Ensure tap targets are large enough */
.wtb-list .wtb-item,
.wtb-toolbar .btn{
  min-height: var(--wtb-touch);
}

@media (max-width: 640px){
  /* Toolbar stacks neatly */
  .wtb-toolbar{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px 12px;
    padding:10px 0;
    position:sticky; top:0;
  }
  .wtb-toolbar .wtb-srch{ grid-column: 1 / -1; }
  .wtb-toolbar .wtb-srch input{ width:100%; min-width: 0; }
  .wtb-toolbar label{ gap:8px; }
  .wtb-toolbar select{ width:100%; }
  .wtb-toolbar .btn{ grid-column: 1 / -1; width:100%; text-align:center; padding:12px 14px; border-radius:12px; }

  /* Card layout: bigger icon, comfy spacing */
  .wtb-list[data-mode="list"] .wtb-item{ padding:14px; gap:12px; }
  .wtb-list .wtb-ic{ width:44px; height:44px; border-radius:12px; }
  .wtb-list .wtb-title{ font-size: clamp(16px, 3.8vw, 18px); }
  .wtb-list .wtb-msg{ font-size: clamp(14px, 3.4vw, 16px); }
  .wtb-list .wtb-meta{ font-size: 12px; }
}

/* Very small phones */
@media (max-width: 380px){
  .wtb-toolbar{ grid-template-columns: 1fr; }
  .wtb-toolbar .wtb-unread{ order: 3; }
  .wtb-toolbar .wtb-sort{ width:100%; }
}

/* WebTibo Notifications v2.5.3 mobile enhancements */


/* Error block with code */
.wtb-error{padding:16px;border:1px solid #fee2e2;background:#fff1f2;color:#991b1b;border-radius:12px;margin:8px 0}
.wtb-error b{font-weight:700}
.wtb-error .wtb-ems{font-size:12px;color:#7f1d1d;margin-top:6px}


/* v2.7.0 small polish */
.wtb-toolbar select[multiple]{min-height:38px}


/* Bell badge */
.wtb-bell{ position: relative; }
.wtb-bell .wtb-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  background:#ef4444; color:#fff; font-weight:700;
  font-size:12px; line-height:18px; text-align:center;
  border-radius:999px;
}


#wtb-overlay{cursor:default}