/* ORB LOADER — the activity chip: one pill that says what Ares is doing right
   now (LISTENING / TRANSCRIBING / THINKING). The dotted-sphere canvas inside it
   is drawn by orbLoader.js; everything here is the pill around it, plus the
   show/hide states that activityChip.js drives.

   Kept in its own file (rather than inlined, as the rest of index.html's styling
   is) because the cockpit and orb-loader-preview.html both use it. NOT part of
   triad.css — that is the judge/winners stylesheet and carries its own global
   body/background rules that would collide with the cockpit's.

   Self-contained on purpose: literal colours, no var() tokens, so a page can
   link it without having to define the cockpit's palette first. Where the chip
   MOUNTS is the host page's business — index.html styles the HUD-frame case
   next to its .hl-status rule. */

/* Reserves the chip's height whether or not it is up, so appearing never
   reflows the page. */
.orb-chip-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
}

.orb-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  background: rgba(8, 20, 26, 0.72);
  border: 1px solid rgba(34, 211, 238, 0.18);
  backdrop-filter: blur(8px);
  /* Enter: 200ms ease-out. Exit is the 130ms in activityChip.js, so dismissal
     feels quicker than arrival. */
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.orb-chip.is-on { opacity: 1; transform: none; }
.orb-chip[hidden] { display: none; }

/* Swapping one state for another while the pill is already up — it should read
   as a change, not a snap. Not applied under reduced motion (activityChip.js
   never adds the class there), so it cannot fight the breathe animation. */
.orb-chip.is-swap { animation: orbChipSwap 0.26s ease-out; }
@keyframes orbChipSwap {
  0%   { opacity: 0.35; transform: scale(0.97); }
  100% { opacity: 1; transform: none; }
}

.orb-chip-orb { display: block; flex: none; }

/* Deliberately NOT the state colour: the orb carries the hue, the label stays at
   a contrast that passes AA on this near-black pill. */
.orb-chip-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #CFE8E5;
  white-space: nowrap;
}

/* The trailing "...." of the reference, as elements rather than text — fixed
   width, so the pill never resizes as they cycle. */
.orb-chip-dots { display: inline-flex; gap: 3px; margin-left: -4px; }
.orb-chip-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #CFE8E5;
  opacity: 0.2;
  animation: orbChipDot 1.3s ease-in-out infinite;
}
.orb-chip-dots i:nth-child(2) { animation-delay: 0.13s; }
.orb-chip-dots i:nth-child(3) { animation-delay: 0.26s; }
.orb-chip-dots i:nth-child(4) { animation-delay: 0.39s; }
@keyframes orbChipDot { 0%, 55%, 100% { opacity: 0.2; } 25% { opacity: 1; } }

/* Each state tints its own pill edge and glow, echoing the orb's colour. */
.orb-chip[data-activity="listening"]    { border-color: rgba(53, 217, 206, 0.3);
  box-shadow: 0 0 18px rgba(53, 217, 206, 0.1); }
.orb-chip[data-activity="transcribing"] { border-color: rgba(34, 211, 238, 0.32);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.1); }
.orb-chip[data-activity="thinking"]     { border-color: rgba(244, 114, 208, 0.32);
  box-shadow: 0 0 18px rgba(244, 114, 208, 0.12); }

/* Reduced motion: the orb stops spinning (orbLoader.js freezes it) and the dot
   cycle stops, so the pill breathes slowly instead of nothing at all —
   "in progress" still reads, without any travelling motion. */
@media (prefers-reduced-motion: reduce) {
  .orb-chip { transition: opacity 0.2s ease-out; transform: none; }
  .orb-chip-dots i { animation: none; opacity: 0.55; }
  .orb-chip.is-on { animation: orbChipBreathe 2.4s ease-in-out infinite; }
  @keyframes orbChipBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
}