html {
  scroll-behavior: smooth;
}

.core-toggle {
  font-size: 11px;
  border-radius: 9999px;
  border-width: 1px;
  padding: 0.4rem 0.85rem;
  border-color: rgb(226 232 240); /* slate-200 */
  background-color: white;
  color: rgb(71 85 105); /* slate-600 */
  font-weight: 500;
}
.core-toggle.active {
  border-color: rgb(96 165 250); /* blue-400 */
  background: linear-gradient(
    to right,
    rgb(239 246 255),
    /* blue-50 */ rgb(219 234 254) /* blue-100 */
  );
  color: rgb(29 78 216); /* blue-700 */
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25); /* blue-500 */
}

.module-badge {
  font-size: 11px;
  border-radius: 9999px;
  border-width: 1px;
  padding: 0.35rem 0.75rem;
  border-color: rgb(226 232 240);
  background-color: white;
  color: rgb(71 85 105);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease, transform 0.08s ease;
}
.module-badge:hover {
  background-color: rgb(248 250 252); /* slate-50 */
  box-shadow: 0 3px 8px rgba(148, 163, 184, 0.25);
}
.module-badge.active {
  background: linear-gradient(to right, rgb(239 246 255), rgb(219 234 254));
  border-color: rgb(96 165 250); /* blue-400 */
  color: rgb(29 78 216); /* blue-700 */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); /* blue-500 */
}

.agent-card {
  transition: opacity 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.agent-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.agent-card.inactive {
  opacity: 0.55;
}

.agent-toggle {
  font-size: 10px;
  border-radius: 9999px;
  border-width: 1px;
  padding: 0.15rem 0.6rem;
  font-weight: 600;
}
.agent-toggle.active {
  background-color: rgb(240 253 250); /* emerald-50 */
  border-color: rgb(52 211 153); /* emerald-400 */
  color: rgb(4 120 87); /* emerald-700 */
}
.agent-toggle.inactive {
  background-color: rgb(248 250 252); /* slate-50 */
  border-color: rgb(209 213 219); /* slate-300 */
  color: rgb(100 116 139); /* slate-500 */
}

/* Tooltip base */
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.25rem;
  z-index: 20;
  width: 11rem;
  border-radius: 0.5rem;
  background-color: rgb(15 23 42); /* slate-900 */
  color: white;
  font-size: 10px;
  padding: 0.4rem 0.5rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.6);
  display: none;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent rgb(15 23 42) transparent;
}
.tooltip-wrapper:hover .tooltip {
  display: block;
}