.rc-acts {
  --rc-wa: #0b7a3b;
  --rc-wa-soft: #e1f7ea;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-acts { --rc-wa: #3fdc84; --rc-wa-soft: color-mix(in srgb, #25d366 15%, var(--surface)); }
}
:root[data-theme="dark"] .rc-acts { --rc-wa: #3fdc84; --rc-wa-soft: color-mix(in srgb, #25d366 15%, var(--surface)); }

.rc-btn {
  --rc-fg: var(--ink);
  --rc-bg: var(--surface-2);
  --btn-fg: var(--rc-fg);
  --btn-bg: var(--rc-bg);
  --btn-bd: color-mix(in srgb, var(--rc-fg) 16%, transparent);
  font-weight: 700;
  transition: background-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out, color 0.18s ease-out;
}
.rc-btn .icon { transition: transform 0.18s ease-out; }
.rc-wa { --rc-fg: var(--rc-wa); --rc-bg: var(--rc-wa-soft); }
.rc-call { --rc-fg: var(--blue-ink); --rc-bg: var(--blue-soft); }
.rc-msg { --rc-fg: var(--violet); --rc-bg: var(--violet-soft); }
.rc-btn:hover { --btn-bd: color-mix(in srgb, var(--rc-fg) 24%, transparent); color: var(--rc-fg); }
.rc-btn:focus-visible { outline: 2px solid var(--rc-fg); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) {
  .rc-btn:hover {
    --btn-bg: color-mix(in srgb, var(--rc-bg) 91%, var(--rc-fg));
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -9px color-mix(in srgb, var(--rc-fg) 60%, transparent);
  }
  .rc-btn:hover .icon { transform: scale(1.12); }
  .rc-wa:hover .icon { transform: scale(1.12) rotate(-8deg); }
  .rc-call:hover .icon { transform: scale(1.12) rotate(12deg); }
  .rc-btn:active { transform: translateY(0); box-shadow: none; }
}
@media (hover: none) {
  .rc-btn:active { --btn-bg: color-mix(in srgb, var(--rc-bg) 86%, var(--rc-fg)); transform: scale(0.96); }
}
.rc-btn:focus-visible { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .rc-btn, .rc-btn .icon { transition: background-color 0.18s ease-out, color 0.18s ease-out; }
  .rc-btn:hover, .rc-btn:active, .rc-btn:focus-visible, .rc-btn:hover .icon { transform: none; }
}

@media (min-width: 1181px) {
  .bp-rep > .rc-acts:has(> a:nth-child(3)) { flex: 1 0 100%; margin-left: 0; padding-left: 62px; }
}
@media (max-width: 720px) {
  .bp-rep > .rc-acts { flex: 1 0 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-left: 0; }
  .bp-rep > .rc-acts .rc-btn { padding: 0 8px; }
}