/* Siri border animation applied to loading bubbles */

.bubble.siri-loading {
  position: relative;
  border-radius: 14px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  color: #000000;
  /* box-shadow:
    0 0 10px rgba(255, 60, 172, 0.25),
    0 0 18px rgba(43, 134, 197, 0.18); */
}

.bubble.siri-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  background:
    linear-gradient(#ffffff, #ffffff) content-box,
    linear-gradient(120deg,
      #ff3cac,
      #562b7c,
      #2b86c5,
      #2bd9c5,
      #2bc562,
      #c5b12b,
      #ff3cac) border-box;
  background-size: 280% 280%;
  background-position: 0% 50%;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: siriBorder 2.8s ease-in-out infinite;
  z-index: 0;
}

.bubble.siri-loading .siri-loading-text {
  position: relative;
  z-index: 1;
  color: #000000;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.message.assistant.pending .bubble.siri-loading {
  padding: 12px 18px;
  text-align: center;
  background-clip: padding-box;
}

@keyframes siriBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@-webkit-keyframes siriBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}