/* Customer support buttons + the floating support button (public/js/support-buttons.js) */
.sb-btn {
  --sb-bg: #1d4ed8;
  --sb-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  border-radius: 12px; text-decoration: none; font-family: inherit; line-height: 1.25;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.sb-btn:hover { transform: translateY(-1px); text-decoration: none; filter: brightness(1.05); }
.sb-btn .sb-icon { display: grid; place-items: center; flex-shrink: 0; }
.sb-btn .sb-text { display: flex; flex-direction: column; min-width: 0; text-align: start; }
.sb-btn .sb-text b { font-size: 14px; font-weight: 650; }
.sb-btn .sb-text small { font-size: 12px; opacity: .8; }

/* styles */
.sb-filled { background: var(--sb-bg); color: var(--sb-fg); box-shadow: 0 6px 16px -8px var(--sb-bg); }
.sb-filled:hover { color: var(--sb-fg); }
.sb-soft { background: color-mix(in srgb, var(--sb-bg) 14%, #fff); color: color-mix(in srgb, var(--sb-bg) 80%, #000); }
.sb-soft:hover { color: color-mix(in srgb, var(--sb-bg) 80%, #000); }
.sb-outline { background: transparent; color: var(--sb-bg); box-shadow: inset 0 0 0 2px var(--sb-bg); }
.sb-outline:hover { color: var(--sb-bg); background: color-mix(in srgb, var(--sb-bg) 8%, transparent); }
.sb-gradient { background: linear-gradient(135deg, var(--sb-bg), color-mix(in srgb, var(--sb-bg) 55%, #000)); color: var(--sb-fg); box-shadow: 0 8px 18px -8px var(--sb-bg); }
.sb-gradient:hover { color: var(--sb-fg); }
[data-theme="dark"] .sb-soft { background: color-mix(in srgb, var(--sb-bg) 22%, #111); color: color-mix(in srgb, var(--sb-bg) 70%, #fff); }

/* shapes */
.sb-shape-pill { border-radius: 999px; padding-inline: 18px; }
.sb-shape-square { border-radius: 4px; }
.sb-shape-icon { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }

/* a row of buttons inside a page */
.sb-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* floating support button */
.sb-float { --sb-main: #1d4ed8; position: fixed; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: inherit; }
.sb-float.sb-right { right: 20px; }
.sb-float.sb-left { left: 20px; align-items: flex-start; }
.sb-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 54px; min-width: 54px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--sb-main); color: #fff; font: inherit; font-weight: 650; cursor: pointer;
  box-shadow: 0 10px 24px -8px var(--sb-main), 0 2px 6px rgba(0, 0, 0, .15);
  animation: sb-pulse 2.4s ease-in-out infinite;
}
.sb-float.open .sb-toggle { animation: none; }
@keyframes sb-pulse { 0%, 100% { box-shadow: 0 10px 24px -8px var(--sb-main), 0 0 0 0 color-mix(in srgb, var(--sb-main) 45%, transparent); } 50% { box-shadow: 0 10px 24px -8px var(--sb-main), 0 0 0 10px transparent; } }
.sb-panel {
  width: min(320px, calc(100vw - 40px)); max-height: min(70vh, 520px); overflow: auto; border-radius: 16px;
  background: #fff; color: #1a1a1a; box-shadow: 0 20px 50px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06);
  animation: sb-in .15s ease-out;
}
@keyframes sb-in { from { opacity: 0; transform: translateY(8px); } }
.sb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; color: #fff; font-weight: 650; background: var(--sb-main); }
.sb-close { border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.sb-panel-list { display: grid; gap: 8px; padding: 12px; }
.sb-panel-list .sb-btn { width: 100%; }
[data-theme="dark"] .sb-panel { background: #1c1c1f; color: #eee; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .sb-panel { background: #1c1c1f; color: #eee; } }
@media (max-width: 640px) {
  .sb-float { bottom: 14px; }
  .sb-float.sb-right { right: 14px; }
  .sb-float.sb-left { left: 14px; }
  .sb-toggle span { display: none; }
  .sb-toggle { padding: 0; width: 54px; justify-content: center; }
}
.sb-btn b, .sb-btn small { color: inherit; }