@layer legacy {
/* Motion for the inline AIOS status shown inside the assistant message itself. */
.aios-brand-state.aios-inline-motion-active .aios-brand-mark {
  overflow: visible !important;
  transform: translateZ(0);
}

.aios-brand-state.aios-inline-motion-active .aios-brand-mark > svg {
  position: relative;
  z-index: calc(var(--z-raised) + 2);
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

.aios-inline-orbit {
  position: absolute;
  z-index: var(--z-raised);
  display: block;
  border-radius: 18px;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.aios-inline-orbit.orbit-one {
  inset: -5px;
  border: 2px solid rgba(47, 115, 246, .18);
  border-top-color: #2f73f6;
  border-right-color: #82afff;
  box-shadow: 0 0 18px rgba(47, 115, 246, .12);
}

.aios-inline-orbit.orbit-two {
  inset: -10px;
  border: 1px solid rgba(47, 115, 246, .28);
  border-right-color: transparent;
  border-bottom-color: #2f73f6;
}

/* Replace the pseudo-element bar with a real element that can be animated through WAAPI. */
.aios-brand-state.aios-inline-motion-active .aios-brand-progress::before {
  display: none !important;
  animation: none !important;
}

.aios-brand-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #246cf4 0%, #4d8fff 52%, #91baff 100%);
  box-shadow: 0 0 12px rgba(47, 115, 246, .42);
  transform: translate3d(-135%, 0, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

/* The screenshot showed completed-message controls below a generation state.
   They must only appear after AIOS has actually finished. */
.chat-message.ai.thinking .message-tools,
.chat-message.ai.streaming .message-tools,
.chat-message.ai.thinking .message-followups,
.chat-message.ai.streaming .message-followups,
.chat-message.ai[data-aios-generating="true"] .message-tools,
.chat-message.ai[data-aios-generating="true"] .message-followups {
  display: none !important;
}

.chat-message.ai.thinking .thinking-indicator.aios-brand-state {
  --aios-status-size: 50px;
  min-width: min(270px, calc(100vw - 104px));
  padding: 10px 8px 10px 6px;
}

.chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-progress {
  width: min(150px, 38vw);
  height: 5px;
  background: rgba(148, 163, 184, .22);
}

.chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-copy > span:first-child {
  font-size: 13px;
  font-weight: 700;
}

.chat-message.ai.streaming [data-aios-writing-indicator] {
  --aios-status-size: 34px;
}

html[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state,
body[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state,
[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state {
  color: #f4f7fb;
}

html[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-progress,
body[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-progress,
[data-theme="dark"] .chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-progress {
  background: rgba(255, 255, 255, .12);
}

/* CSS fallback for browsers where Element.animate is unavailable. */
.aios-inline-motion-fallback .aios-brand-mark > svg {
  animation: aios-inline-logo-fallback 1.25s ease-in-out infinite !important;
}

.aios-inline-motion-fallback .aios-inline-orbit.orbit-one {
  animation: aios-inline-orbit-fallback 1.05s linear infinite !important;
}

.aios-inline-motion-fallback .aios-inline-orbit.orbit-two {
  animation: aios-inline-orbit-reverse-fallback 1.68s linear infinite !important;
}

.aios-inline-motion-fallback .aios-brand-progress-fill {
  animation: aios-inline-progress-fallback 1.12s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

@keyframes aios-inline-logo-fallback {
  0%, 100% { transform: scale(.91) rotate(-1deg); filter: brightness(.96); }
  50% { transform: scale(1.075) rotate(1deg); filter: brightness(1.1); }
}

@keyframes aios-inline-orbit-fallback {
  from { transform: rotate(0deg) scale(.94); opacity: .35; }
  to { transform: rotate(360deg) scale(1.04); opacity: .92; }
}

@keyframes aios-inline-orbit-reverse-fallback {
  from { transform: rotate(360deg) scale(1.05); opacity: .2; }
  to { transform: rotate(0deg) scale(.96); opacity: .72; }
}

@keyframes aios-inline-progress-fallback {
  0% { transform: translate3d(-135%, 0, 0) scaleX(.72); opacity: .35; }
  48% { transform: translate3d(55%, 0, 0) scaleX(1); opacity: 1; }
  100% { transform: translate3d(260%, 0, 0) scaleX(.75); opacity: .45; }
}

@media (max-width: 560px) {
  .chat-message.ai.thinking .thinking-indicator.aios-brand-state {
    --aios-status-size: 46px;
    min-width: min(242px, calc(100vw - 92px));
    gap: 13px;
  }

  .chat-message.ai.thinking .thinking-indicator.aios-brand-state .aios-brand-progress {
    width: min(132px, 38vw);
  }
}

/* Do not freeze this functional status even when the OS requests reduced motion.
   Movement is slower and smoother, but remains visible so the user knows AIOS is active. */
@media (prefers-reduced-motion: reduce) {
  .aios-brand-state.aios-inline-motion-active .aios-inline-orbit,
  .aios-brand-state.aios-inline-motion-active .aios-brand-progress-fill,
  .aios-brand-state.aios-inline-motion-active .aios-brand-mark > svg {
    animation-duration: 2.4s !important;
  }
}
}