/* Production Hybrid styles: SSR first, JS optional */
.cb-widget {
  --cb-bg: #10b981;
  --cb-fg: #ffffff;
  --cb-offset-x: 20px;
  --cb-offset-y: 20px;

  --cb-radius-trigger: 999px;
  --cb-radius-panel: 16px;
  --cb-radius-item: 12px;

  --cb-shadow-panel: 0 16px 40px rgba(0,0,0,.18);

  --cb-trigger-s: 44px;
  --cb-trigger-m: 56px;
  --cb-trigger-l: 64px;
  --cb-icon: 20px;

  position: fixed;
  z-index: 2147483000;
  font-family: var(--cb-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

.cb-widget.pos-bottom-right { right: var(--cb-offset-x); bottom: var(--cb-offset-y); }
.cb-widget.pos-bottom-left  { left: var(--cb-offset-x);  bottom: var(--cb-offset-y); }
.cb-widget.pos-top-right    { right: var(--cb-offset-x); top: var(--cb-offset-y); }
.cb-widget.pos-top-left     { left: var(--cb-offset-x);  top: var(--cb-offset-y); }

/* Trigger */
.cb-trigger {
  width: var(--cb-trigger-m);
  height: var(--cb-trigger-m);
  border-radius: var(--cb-radius-trigger);
  border: 0; cursor: pointer;
  background: var(--cb-bg);
  color: var(--cb-fg);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: inline-block; position: relative;
}
.cb-widget.size-s .cb-trigger { width: var(--cb-trigger-s); height: var(--cb-trigger-s); }
.cb-widget.size-l .cb-trigger { width: var(--cb-trigger-l); height: var(--cb-trigger-l); }

.cb-trigger::before {
  content: "✉"; /* placeholder icon */
  font-size: 20px; line-height: 1;
  position: absolute; inset: 0; display: grid; place-items: center;
}

/* Panel */
.cb-panel {
  position: absolute; bottom: calc(var(--cb-trigger-m) + 14px); right: 0;
  background: #fff; color: #111;
  border-radius: var(--cb-radius-panel);
  box-shadow: var(--cb-shadow-panel);
  padding: 10px; min-width: 220px;
  transform: translateY(10px); opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.cb-widget.pos-bottom-left .cb-panel { right: auto; left: 0; }
.cb-widget.pos-top-right .cb-panel { bottom: auto; top: calc(var(--cb-trigger-m) + 14px); }
.cb-widget.pos-top-left  .cb-panel { bottom: auto; top: calc(var(--cb-trigger-m) + 14px); left: 0; right: auto; }

/* List */
.cb-list { list-style: none; margin: 0; padding: 0; }
.cb-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--cb-radius-item);
  text-decoration: none; color: inherit; transition: background .12s ease;
}
.cb-item:hover { background: rgba(0,0,0,.05); }
.cb-ico { width: var(--cb-icon); height: var(--cb-icon); display: grid; place-items: center; font-weight: 700; }
.cb-ico-img { width: var(--cb-icon); height: var(--cb-icon); display: block; }
.cb-label { font-size: 14px; }
.cb-empty { padding: 12px 10px; color:#666; font-size:13px; }

/* CSS-only toggle via checkbox (SSR) */
.cb-toggle { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px; }
.cb-toggle:checked ~ .cb-panel { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Mobile bottom-sheet example */
@media (max-width: 767px) {
  .cb-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 16px 16px 0 0;
    min-width: auto; transform: translateY(12px);
  }
}