:root { --tzsp: #f97316; --tzsp-b: 90px; --tzsp-bm: 84px; }

#tz-bk-fab, #tz-bk-card { position: fixed !important; z-index: 2147483000 !important; right: 16px; }

#tz-bk-fab {
  bottom: var(--tzsp-b); width: 56px; height: 56px;
  margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important;
  background: var(--tzsp) !important; color: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.6);
  transition: opacity .3s, transform .3s, visibility .3s;
}
#tz-bk-fab.tz-show { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
#tz-bk-fab:hover { filter: brightness(.92); }
#tz-bk-fab svg { width: 26px; height: 26px; }
#tz-bk-fab.tz-show::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--tzsp); animation: tzPulse 2s infinite; pointer-events: none;
}
@keyframes tzPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tz-bk-fab.tz-show::after { animation: none; } }

#tz-bk-card {
  bottom: calc(var(--tzsp-b) + 68px); width: 300px; max-width: calc(100vw - 32px);
  padding: 18px 16px 12px; background: #fff; color: #1f2937;
  border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.28);
  font-family: inherit;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: bottom right;
  transform: translateY(14px) scale(.85);
  transition: opacity .25s, transform .25s, visibility .25s;
}
#tz-bk-card.tz-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#tz-bk-card::after {
  content: ""; position: absolute; right: 22px; bottom: -8px;
  width: 16px; height: 16px; background: #fff; transform: rotate(45deg);
}
#tz-bk-card .tz-bk-title { margin: 0 24px 4px 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #111827; }
#tz-bk-card .tz-bk-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: #6b7280; }
#tz-bk-card .tz-bk-actions { display: flex; gap: 8px; }
#tz-bk-card button { font-family: inherit; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
#tz-bk-yes, #tz-bk-more {
  flex: 1; margin: 0 !important; padding: 11px 8px !important;
  border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important;
  border: none !important;
}
#tz-bk-yes { background: var(--tzsp) !important; color: #fff !important; }
#tz-bk-yes:hover { filter: brightness(.92); }
#tz-bk-more { background: #f3f4f6 !important; color: #374151 !important; }
#tz-bk-more:hover { background: #e5e7eb !important; }

#tz-bk-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: none !important; color: #9ca3af !important;
  font-size: 20px !important; line-height: 1 !important;
}
#tz-bk-x:hover { color: #374151 !important; }

#tz-bk-card .tz-bk-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#tz-bk-card a.tz-bk-item {
  display: flex; align-items: center; gap: 10px; padding: 6px;
  border-radius: 10px; background: #f9fafb;
  text-decoration: none !important; color: #111827 !important;
  transition: background .15s;
}
#tz-bk-card a.tz-bk-item:hover { background: #f3f4f6; }
#tz-bk-card a.tz-bk-item img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; margin: 0; }
#tz-bk-card a.tz-bk-item span { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }
#tz-bk-card a.tz-bk-item i { font-style: normal; font-size: 20px; color: var(--tzsp); padding-right: 4px; }
#tz-bk-card a.tz-bk-all {
  display: block; text-align: center; padding: 11px 10px; border-radius: 10px;
  background: var(--tzsp); color: #fff !important; font-size: 14px; font-weight: 700;
  text-decoration: none !important;
}
#tz-bk-card a.tz-bk-all:hover { filter: brightness(.92); }
#tz-bk-card .tz-bk-back {
  display: block; margin: 8px auto 0; padding: 4px !important;
  background: none !important; border: none !important; color: #6b7280 !important; font-size: 12px !important;
}
#tz-bk-card .tz-bk-hide {
  display: block; margin: 6px auto 0; padding: 4px !important;
  background: none !important; border: none !important; color: #9ca3af !important;
  font-size: 11px !important; text-decoration: underline;
}

@media (max-width: 767px) {
  #tz-bk-fab { right: 12px; bottom: var(--tzsp-bm); width: 52px; height: 52px; }
  #tz-bk-card { right: 12px; bottom: calc(var(--tzsp-bm) + 64px); }
}