/* Constellation 10-state machine. Geometry: assets/brand/kalamos-constellation.svg.
   Do not rotate the whole mark as a rigid body. */

.brand-constellation {
  --kalamos-constellation-idle-duration: 3.2s;
  --kalamos-constellation-working-duration: 1.8s;
  --kalamos-constellation-streaming-duration: 1.2s;
  --kalamos-constellation-done-duration: 280ms;
  --kalamos-constellation-error-duration: 280ms;
  --kalamos-aurora-purple: 124 104 168;
  --kalamos-aurora-gold: 212 176 122;
  --kalamos-aurora-peach: 232 196 176;
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  color: var(--text-primary);
  flex: none;
  container-type: size;
}

.brand-constellation svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.boot-screen .brand-constellation {
  width: 80px;
  height: 80px;
  margin-bottom: 4px;
}

.message--assistant > .brand-constellation {
  margin: 0 0 10px;
}

.brand-constellation-dot {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.brand-constellation-dot--center {
  opacity: 1;
}

.brand-constellation-lines {
  opacity: 0;
}

.brand-constellation-line {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.brand-constellation::after {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--kalamos-aurora-gold) / .22), transparent 68%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

/* idle: large breath, faint halo */
.brand-constellation[data-brand-state="idle"] {
  animation: kalamos-constellation-idle-breathe var(--kalamos-constellation-idle-duration) ease-in-out infinite;
}

.brand-constellation[data-brand-state="idle"]::after {
  opacity: .55;
}

/* boot: sequential ring light-up */
.brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring {
  animation: kalamos-constellation-boot-lit 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms);
}

.brand-constellation[data-brand-state="boot"] .brand-constellation-dot--center {
  opacity: .35;
}

/* connecting: lines grow between neighbors */
.brand-constellation[data-brand-state="connecting"] .brand-constellation-lines {
  opacity: .72;
}

.brand-constellation[data-brand-state="connecting"] .brand-constellation-line {
  animation: kalamos-constellation-connect 1.4s ease-out infinite;
  animation-delay: calc(var(--line) * 40ms);
}

/* working: center stable, large radial phase */
.brand-constellation[data-brand-state="working"] .brand-constellation-dot--center {
  opacity: 1;
  transform: none;
}

.brand-constellation[data-brand-state="working"] .brand-constellation-dot--ring {
  animation: kalamos-constellation-working var(--kalamos-constellation-working-duration) ease-in-out infinite;
  animation-delay: calc(var(--i) * -150ms);
}

.brand-constellation[data-brand-state="working"]::after {
  opacity: .7;
}

/* streaming: same family, faster */
.brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--center {
  opacity: 1;
  transform: none;
}

.brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--ring {
  animation: kalamos-constellation-working var(--kalamos-constellation-streaming-duration) ease-in-out infinite;
  animation-delay: calc(var(--i) * -100ms);
}

.brand-constellation[data-brand-state="streaming"]::after {
  opacity: .85;
  background: radial-gradient(circle, rgb(var(--kalamos-aurora-purple) / .28), rgb(var(--kalamos-aurora-gold) / .16), transparent 70%);
}

/* tool: leftmost / rightmost pulse, rest dim */
.brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring {
  opacity: .16;
}

.brand-constellation[data-brand-state="tool"] .brand-constellation-dot--center {
  opacity: .32;
}

.brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="4"],
.brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="7"] {
  opacity: 1;
  animation: kalamos-constellation-tool-pulse 900ms ease-in-out infinite;
}

/* done: collapse inward 280ms */
.brand-constellation[data-brand-state="done"] .brand-constellation-dot--ring {
  animation: kalamos-constellation-done var(--kalamos-constellation-done-duration) ease-in forwards;
}

.brand-constellation[data-brand-state="done"] .brand-constellation-dot--center {
  animation: kalamos-constellation-done-core var(--kalamos-constellation-done-duration) ease-in forwards;
}

.brand-constellation[data-brand-state="done"]::after {
  opacity: 0;
}

/* abort: same static pose as idle, no fail motion */
.brand-constellation[data-brand-state="abort"] {
  transform: scale(1);
}

.brand-constellation[data-brand-state="abort"]::after {
  opacity: 0;
}

/* error: one-shot shrink to muted */
.brand-constellation[data-brand-state="error"] .brand-constellation-dot {
  animation: kalamos-constellation-error var(--kalamos-constellation-error-duration) ease-out forwards;
}

.brand-constellation[data-brand-state="error"]::after {
  opacity: 0;
}

/* offline: 40% contrast, still, no halo */
.brand-constellation[data-brand-state="offline"] {
  opacity: .4;
}

.brand-constellation[data-brand-state="offline"]::after {
  opacity: 0;
}

@keyframes kalamos-constellation-idle-breathe {
  0%,
  100% { transform: scale(.86); }
  50% { transform: scale(1.04); }
}

@keyframes kalamos-constellation-boot-lit {
  0%,
  30% { opacity: .12; }
  45%,
  62% { opacity: 1; }
  100% { opacity: .18; }
}

@keyframes kalamos-constellation-connect {
  0% { stroke-dashoffset: 420; opacity: .15; }
  55%,
  100% { stroke-dashoffset: 0; opacity: .85; }
}

@keyframes kalamos-constellation-working {
  0%,
  100% {
    opacity: .15;
    transform: translate(calc(var(--nx) * -7px), calc(var(--ny) * -7px)) scale(.82);
  }
  50% {
    opacity: 1;
    transform: translate(calc(var(--nx) * 7px), calc(var(--ny) * 7px)) scale(1.1);
  }
}

@keyframes kalamos-constellation-tool-pulse {
  0%,
  100% { transform: scale(.78); opacity: .55; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes kalamos-constellation-done {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: .2; transform: translate(calc(var(--nx) * -28px), calc(var(--ny) * -28px)) scale(.2); }
}

@keyframes kalamos-constellation-done-core {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(.72); opacity: .55; }
}

@keyframes kalamos-constellation-error {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(.7); opacity: .32; }
  100% { transform: scale(.84); opacity: .42; }
}

@keyframes kalamos-composer-pulse {
  0%,
  100% { box-shadow: var(--shadow-composer), 0 0 0 1px rgb(124 104 168 / 0); }
  50% { box-shadow: var(--shadow-composer), 0 0 0 2px rgb(124 104 168 / .32), 0 0 26px rgb(212 176 122 / .24); }
}

.composer[data-brand-companion="working"] {
  animation: kalamos-composer-pulse 2.2s ease-in-out infinite;
}

.brand-tool-bar {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 10px;
  padding: 2px 8px;
  border: .5px solid rgb(124 104 168 / .28);
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, rgb(124 104 168 / .12) 70%, var(--surface-1));
  font-size: 11px;
  line-height: 18px;
}

.brand-tool-bar[hidden] {
  display: none;
}

.brand-constellation-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  justify-items: stretch;
  gap: 18px 16px;
  box-sizing: border-box;
  min-height: 100%;
  padding: 28px 24px 36px;
}

.brand-constellation-table--kept {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
}

.brand-constellation-table-cell {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
}

.brand-constellation-table-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 168px;
  padding: 18px 10px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.brand-constellation-table .brand-constellation {
  width: 96px;
  height: 96px;
}

.brand-companion-layer {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}

.brand-constellation-table-stage[data-brand-companion="working"] {
  animation: kalamos-composer-pulse 2.2s ease-in-out infinite;
  border-radius: 20px;
  box-shadow: var(--shadow-composer);
}

.brand-constellation-table-cell figcaption {
  max-width: 100%;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.brand-constellation-table-cell code {
  margin-right: 6px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.brand-constellation-morphs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
  box-sizing: border-box;
  min-height: 100%;
  padding: 28px 28px 36px;
}

.brand-constellation-morphs .brand-constellation {
  width: 120px;
  height: 120px;
}

.brand-constellation-morphs .brand-constellation-table-stage {
  min-height: 200px;
}

.brand-constellation-morphs--kept {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
  align-content: center;
}

.brand-constellation-morphs--kept .brand-constellation {
  width: 168px;
  height: 168px;
}

.brand-constellation-morphs--kept .brand-constellation-table-stage {
  min-height: 280px;
}

.brand-constellation[data-brand-morph] .brand-constellation-lines {
  opacity: 0;
}

.brand-constellation[data-brand-state="idle"][data-brand-morph] {
  animation: none;
  transform: none;
}

.brand-constellation[data-brand-morph="scatter"] .brand-constellation-dot--ring {
  animation: kalamos-morph-scatter 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -80ms);
}

@keyframes kalamos-morph-scatter {
  0%,
  100% { transform: translate(0, 0) scale(1); }
  45% {
    transform: translate(
      calc(var(--dx-scatter) / 1254 * 100cqw),
      calc(var(--dy-scatter) / 1254 * 100cqh)
    ) scale(.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-constellation[data-brand-state="idle"],
  .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring,
  .brand-constellation[data-brand-state="connecting"] .brand-constellation-line,
  .brand-constellation[data-brand-state="working"] .brand-constellation-dot--ring,
  .brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--ring,
  .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="4"],
  .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="7"],
  .brand-constellation[data-brand-state="done"] .brand-constellation-dot--ring,
  .brand-constellation[data-brand-state="done"] .brand-constellation-dot--center,
  .brand-constellation[data-brand-state="error"] .brand-constellation-dot,
  .brand-constellation[data-brand-morph="scatter"] .brand-constellation-dot--ring,
  .composer[data-brand-companion="working"],
  .brand-constellation-table-stage[data-brand-companion="working"] {
    animation: none;
  }

  .brand-constellation[data-brand-state="idle"] {
    transform: scale(1);
  }

  .brand-constellation[data-brand-state="idle"]::after {
    opacity: .4;
  }

  .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring {
    opacity: .22;
  }

  .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring[data-star="0"],
  .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring[data-star="2"],
  .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring[data-star="5"] {
    opacity: 1;
  }

  .brand-constellation[data-brand-state="connecting"] .brand-constellation-lines {
    opacity: .7;
  }

  .brand-constellation[data-brand-state="connecting"] .brand-constellation-line {
    stroke-dashoffset: 0;
  }

  .brand-constellation[data-brand-state="working"] .brand-constellation-dot--ring,
  .brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--ring {
    opacity: .85;
    transform: translate(calc(var(--nx) * 7px), calc(var(--ny) * 7px));
  }

  .brand-constellation[data-brand-morph="scatter"] .brand-constellation-dot--ring {
    transform: translate(
      calc(var(--dx-scatter) / 1254 * 70cqw),
      calc(var(--dy-scatter) / 1254 * 70cqh)
    );
  }

  .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="4"],
  .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="7"] {
    transform: scale(1.12);
    opacity: 1;
  }

  .brand-constellation[data-brand-state="error"] .brand-constellation-dot {
    transform: scale(.84);
    opacity: .42;
  }
}

html[data-reduce-motion="true"] .brand-constellation[data-brand-state="idle"],
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="boot"] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="connecting"] .brand-constellation-line,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="working"] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="4"],
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="tool"] .brand-constellation-dot--ring[data-star="7"],
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="done"] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="done"] .brand-constellation-dot--center,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="error"] .brand-constellation-dot,
html[data-reduce-motion="true"] .brand-constellation[data-brand-morph] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-morph] .brand-constellation-dot--center,
html[data-reduce-motion="true"] .composer[data-brand-companion="working"],
html[data-reduce-motion="true"] .brand-constellation-table-stage[data-brand-companion="working"] {
  animation: none;
}

html[data-reduce-motion="true"] .brand-constellation[data-brand-state="idle"] {
  transform: scale(1);
}

html[data-reduce-motion="true"] .brand-constellation[data-brand-state="working"] .brand-constellation-dot--ring,
html[data-reduce-motion="true"] .brand-constellation[data-brand-state="streaming"] .brand-constellation-dot--ring {
  opacity: .85;
  transform: translate(calc(var(--nx) * 7px), calc(var(--ny) * 7px));
}

html[data-reduce-motion="true"] .brand-constellation[data-brand-state="connecting"] .brand-constellation-line {
  stroke-dashoffset: 0;
}

html[data-reduce-motion="true"] .brand-constellation[data-brand-state="error"] .brand-constellation-dot {
  transform: scale(.84);
  opacity: .42;
}