@layer legacy {
/* AIOS canonical thinking, writing and Canvas activity indicator. */
.aios-brand-state {
  --aios-status-size: 42px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--cg-text, var(--ink, #111827));
}

.aios-brand-mark {
  position: relative;
  width: var(--aios-status-size);
  height: var(--aios-status-size);
  flex: 0 0 var(--aios-status-size);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.aios-brand-mark::before,
.aios-brand-mark::after {
  content: "";
  position: absolute;
  z-index: var(--z-behind);
  inset: 5px;
  border: 1px solid rgba(47, 115, 246, .34);
  border: 1px solid color-mix(in srgb, var(--cg-accent, #2f73f6) 42%, transparent);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}

.aios-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 18px rgba(29, 78, 216, .14));
}

/* "Tracé": in the thinking state the AIOS "A" draws itself with a gradient
   stroke (like a pen writing), instead of the former breathe + expanding rings. */
.aios-brand-draw {
  opacity: 0;
}

.aios-brand-state.is-thinking .aios-brand-mark::before,
.aios-brand-state.is-thinking .aios-brand-mark::after {
  animation: none;
  opacity: 0;
}

.aios-brand-state.is-thinking .aios-brand-draw {
  opacity: 1;
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  animation: aios-brand-draw 2.4s ease-in-out infinite;
}

.aios-brand-state.is-writing .aios-brand-mark svg {
  animation: aios-brand-write 1.35s ease-in-out infinite;
}

.aios-brand-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.aios-brand-copy > span:first-child {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A soft blue light sweeps across the label while the "A" is drawing. */
.aios-brand-state.is-thinking .aios-brand-copy > span:first-child {
  background: linear-gradient(90deg, currentColor 32%, #2e79ff 50%, currentColor 68%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aios-brand-label-shimmer 2.4s linear infinite;
}

.aios-brand-progress {
  position: relative;
  width: 94px;
  height: 3px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, .1);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.aios-brand-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e79ff, #76aaff);
  animation: aios-brand-progress 1.25s cubic-bezier(.4, 0, .2, 1) infinite;
}

.aios-brand-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aios-brand-dots i {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 999px;
  background: var(--cg-accent, #3478f6);
  animation: aios-brand-dot 1.05s ease-in-out infinite;
}

.aios-brand-dots i:nth-child(2) { animation-delay: .14s; }
.aios-brand-dots i:nth-child(3) { animation-delay: .28s; }

/* Replace the former generic three-dot loader without changing app logic. */
.thinking-indicator.aios-brand-state {
  min-height: 42px;
  gap: 11px;
}

.thinking-indicator.aios-brand-state > .thinking-mark,
.thinking-indicator.aios-brand-state > em {
  display: none !important;
}

.chat-message.thinking .message-body {
  width: max-content;
  max-width: min(360px, 100%);
  padding: 11px 13px !important;
  background: rgba(255, 255, 255, .96) !important;
  background: color-mix(in srgb, var(--cg-elevated, #fff) 94%, var(--cg-accent, #3478f6) 6%) !important;
  background-size: auto !important;
  animation: none !important;
}

.chat-message.ai > .message-body > [data-aios-writing-indicator] {
  --aios-status-size: 30px;
  margin: 1px 0 8px;
  color: var(--cg-muted, #667085);
}

/* A thinking bubble has no separate avatar node. When its first streamed text
   arrives, keep that existing body across the complete message grid instead
   of letting CSS place it in the narrow avatar column. */
.chat-message.ai.streaming > .message-body {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

.chat-message.ai.streaming > .message-body > .message-text {
  width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

.chat-message.ai > .message-body > [data-aios-writing-indicator] .aios-brand-copy {
  display: flex;
  align-items: center;
  gap: 7px;
}

.chat-message.ai > .message-body > [data-aios-writing-indicator] .aios-brand-copy > span:first-child {
  font-size: 11px;
}

/* A guaranteed, non-blocking animation driven by the real streaming request. */
/* Removed on request: the in-message "AIOS is thinking" indicator already
   covers this state, so the duplicate floating card is hidden. */
.aios-network-activity {
  display: none !important;
  position: fixed !important;
  z-index: calc(var(--z-top) + 5) !important;
  left: 50% !important;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  width: max-content;
  max-width: calc(100vw - 28px);
  pointer-events: none !important;
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .85, .25, 1), visibility 180ms ease;
  will-change: opacity, transform;
}

.aios-network-activity[hidden] {
  display: none !important;
}

.aios-network-activity.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 12px, 0) scale(.96);
}

.aios-network-activity-card {
  --aios-status-size: 52px;
  min-width: 216px;
  max-width: calc(100vw - 28px);
  padding: 11px 17px 11px 13px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 24px;
  color: #111827;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .2), 0 4px 16px rgba(47, 115, 246, .12);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  animation: aios-network-enter 260ms cubic-bezier(.2, .85, .25, 1) both;
}

.aios-network-activity-card .aios-brand-copy > span:first-child {
  max-width: min(58vw, 270px);
  font-size: 13px;
  font-weight: 720;
}

.aios-network-activity-card .aios-brand-progress {
  width: 118px;
  height: 4px;
}

.aios-network-activity-card .aios-brand-mark {
  margin: 7px;
}

.aios-network-activity-card .aios-brand-mark svg {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
  filter: drop-shadow(0 10px 22px rgba(29, 78, 216, .22));
}

.aios-network-activity-card .aios-brand-mark::before,
.aios-network-activity-card .aios-brand-mark::after {
  z-index: var(--z-raised);
  opacity: 1;
  border-radius: 21px;
}

.aios-network-activity-card .aios-brand-mark::before {
  inset: -5px;
  border: 2px solid rgba(47, 115, 246, .22);
  border-top-color: #2f73f6;
  border-right-color: #82afff;
  animation: aios-network-orbit 1.05s linear infinite !important;
}

.aios-network-activity-card .aios-brand-mark::after {
  inset: -10px;
  border: 1px solid rgba(47, 115, 246, .32);
  border-right-color: transparent;
  border-bottom-color: #2f73f6;
  animation: aios-network-orbit-reverse 1.75s linear infinite !important;
}

.aios-network-activity.is-writing .aios-network-activity-card .aios-brand-mark::before {
  animation-duration: .78s !important;
}

.aios-network-activity.is-writing .aios-network-activity-card .aios-brand-mark::after {
  animation-duration: 1.22s !important;
}

.aios-network-activity.is-canvas .aios-network-activity-card {
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22), 0 4px 20px rgba(47, 115, 246, .18);
}

html[data-theme="dark"] .aios-network-activity-card,
body[data-theme="dark"] .aios-network-activity-card,
[data-theme="dark"] .aios-network-activity-card {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(17, 24, 39, .94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 4px 20px rgba(47, 115, 246, .16);
}

@keyframes aios-brand-breathe {
  0%, 100% { transform: scale(.94); filter: brightness(.96); }
  50% { transform: scale(1.055); filter: brightness(1.08); }
}

@keyframes aios-brand-ring {
  0% { opacity: 0; transform: scale(.76); }
  18% { opacity: .62; }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes aios-brand-draw {
  0% { stroke-dashoffset: 82; }
  46% { stroke-dashoffset: 0; }
  78% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -82; }
}

@keyframes aios-brand-label-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes aios-brand-write {
  0%, 100% { transform: translateY(0) scale(.96) rotate(-1deg); }
  50% { transform: translateY(-2px) scale(1.045) rotate(1deg); }
}

@keyframes aios-brand-progress {
  0% { transform: translateX(-120%); }
  52% { transform: translateX(105%); }
  100% { transform: translateX(245%); }
}

@keyframes aios-brand-dot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0) scale(.85); }
  40% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@keyframes aios-network-enter {
  0% { opacity: 0; transform: translateY(14px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes aios-network-orbit {
  to { transform: rotate(360deg); }
}

@keyframes aios-network-orbit-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes aios-brand-reduced-pulse {
  0%, 100% { opacity: .72; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes aios-brand-reduced-dot {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@media (max-width: 560px) {
  .thinking-indicator.aios-brand-state {
    --aios-status-size: 38px;
  }

  .thinking-indicator.aios-brand-state .aios-brand-copy > span:first-child {
    max-width: min(52vw, 220px);
  }

  .aios-network-activity {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .aios-network-activity-card {
    --aios-status-size: 46px;
    min-width: min(218px, calc(100vw - 28px));
    padding: 10px 14px 10px 11px;
    border-radius: 22px;
  }

  .aios-network-activity-card .aios-brand-copy > span:first-child {
    max-width: min(56vw, 225px);
    font-size: 12px;
  }
}

/* Reduced Motion still keeps an unmistakable status pulse instead of becoming static. */
@media (prefers-reduced-motion: reduce) {
  .aios-brand-state .aios-brand-mark svg {
    animation: aios-brand-reduced-pulse 1.8s ease-in-out infinite !important;
  }

  /* Keep the drawn "A" fully rendered and the label steady when motion is reduced. */
  .aios-brand-state.is-thinking .aios-brand-draw {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .aios-brand-state.is-thinking .aios-brand-copy > span:first-child {
    animation: none !important;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }

  .aios-network-activity-card .aios-brand-mark::before {
    animation: aios-network-orbit 2.4s linear infinite !important;
  }

  .aios-network-activity-card .aios-brand-mark::after {
    animation: aios-network-orbit-reverse 3.2s linear infinite !important;
  }

  .aios-brand-progress::before {
    animation: aios-brand-progress 2s linear infinite !important;
  }

  .aios-brand-dots i {
    animation: aios-brand-reduced-dot 1.4s ease-in-out infinite !important;
  }
}
}