:root {
  --orbita-conversation-accent: #8ee8ff;
}

#agentPanel.orbita-conversation-enhanced {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
}

#agentPanel.orbita-conversation-enhanced > .orbita-state-strip {
  align-self: stretch;
  min-height: 48px;
  height: auto;
}

.orbita-state-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 4px 14px 10px;
  padding: 10px 11px;
  border: 1px solid rgba(158, 226, 255, 0.18);
  border-radius: 16px;
  background: rgba(8, 19, 34, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 32px rgba(0, 8, 20, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
}

.orbita-state-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.09), transparent 28%),
    radial-gradient(
      circle at 10% 50%,
      color-mix(in srgb, var(--orbita-conversation-accent) 18%, transparent),
      transparent 46%
    );
}

@supports not (background: color-mix(in srgb, white 20%, transparent)) {
  .orbita-state-strip::before {
    background:
      linear-gradient(105deg, rgba(255, 255, 255, 0.09), transparent 28%),
      radial-gradient(circle at 10% 50%, rgba(100, 224, 255, 0.14), transparent 46%);
  }
}

.orbita-state-beacon {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--orbita-conversation-accent);
  box-shadow:
    0 0 0 5px rgba(114, 222, 255, 0.08),
    0 0 18px var(--orbita-conversation-accent);
}

.orbita-state-beacon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--orbita-conversation-accent);
  border-radius: inherit;
  opacity: 0;
}

body[data-conversation-state="listening"] .orbita-state-beacon::after,
body[data-conversation-state="hearing"] .orbita-state-beacon::after,
body[data-conversation-state="thinking"] .orbita-state-beacon::after,
body[data-conversation-state="speaking"] .orbita-state-beacon::after {
  animation: orbita-beacon-pulse 1.35s ease-out infinite;
}

.orbita-state-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.orbita-state-copy strong {
  color: #f5fbff;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.orbita-state-copy small {
  overflow: hidden;
  color: rgba(205, 222, 236, 0.62);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbita-live-meter {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 38px;
  height: 22px;
}

.orbita-live-meter i,
.orbita-aura-wave i,
.orbita-face-wave i {
  display: block;
  width: 2px;
  height: var(--voice-bar-height, 3px);
  min-height: 3px;
  border-radius: 999px;
  background: var(--orbita-conversation-accent);
  box-shadow: 0 0 8px var(--orbita-conversation-accent);
  transform-origin: center;
  transition: height 80ms linear, opacity 180ms ease;
}

.orbita-live-meter i:nth-child(2n),
.orbita-face-wave i:nth-child(2n) {
  transform: scaleY(0.65);
}

.orbita-live-meter i:nth-child(3n),
.orbita-aura-wave i:nth-child(3n) {
  transform: scaleY(1.25);
}

body[data-conversation-state="thinking"] .orbita-live-meter i,
body[data-conversation-state="composing"] .orbita-live-meter i {
  animation: orbita-meter-think 1.1s ease-in-out infinite;
  animation-delay: var(--meter-delay, 0ms);
}

.orbita-stop-response {
  position: relative;
  z-index: 2;
  min-width: 42px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #e9f7ff;
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.orbita-stop-response:hover,
.orbita-stop-response:focus-visible {
  border-color: var(--orbita-conversation-accent);
  background: rgba(255, 255, 255, 0.13);
  outline: none;
}

.orbita-conversation-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(145deg, rgba(8, 22, 38, 0.1), rgba(3, 12, 25, 0.48));
}

.orbita-conversation-eyes {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.orbita-conversation-eye {
  position: relative;
  display: block;
  width: 13px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 58% 42%, #08101a 0 22%, transparent 24%),
    radial-gradient(circle at 48% 43%, #ffffff 0 38%, #9bf1ff 42% 64%, #2aa0b9 70%);
  box-shadow:
    0 0 12px var(--orbita-conversation-accent),
    inset 0 -3px 5px rgba(0, 68, 88, 0.45);
  transform-origin: center;
  animation: orbita-eye-blink 6.8s ease-in-out infinite;
}

body[data-conversation-state="listening"] .orbita-conversation-eye,
body[data-conversation-state="hearing"] .orbita-conversation-eye {
  height: 20px;
  transform: scaleX(1.08);
}

body[data-conversation-state="thinking"] .orbita-conversation-eye:first-child {
  transform: translateY(2px) rotate(4deg);
}

body[data-conversation-state="thinking"] .orbita-conversation-eye:last-child {
  transform: translateY(-1px) rotate(-4deg);
}

body[data-conversation-state="success"] .orbita-conversation-eye {
  height: 9px;
  border-radius: 50% 50% 65% 65%;
}

body[data-conversation-state="error"] .orbita-conversation-eye {
  height: 12px;
  transform: rotate(5deg);
}

.orbita-face-wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 11px;
}

.orbita-face-wave i {
  width: 2px;
  max-height: 10px;
}

.orbita-conversation-aura {
  --robot-x: calc(100vw - 120px);
  --robot-y: calc(100vh - 150px);
  --robot-size: 220px;
  --particle-distance: 95px;
  --particle-celebration-distance: 128px;
  --voice-level: 0;
  --voice-bar-height: 3px;
  --voice-core-scale: 0.86;
  --voice-blur: 8px;
  --voice-aura-opacity: 0.64;
  --voice-saturation: 1.05;
  position: fixed;
  z-index: 21;
  left: var(--robot-x);
  top: var(--robot-y);
  width: var(--robot-size);
  height: var(--robot-size);
  border-radius: 50%;
  opacity: 0.48;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    width 260ms ease,
    height 260ms ease;
  mix-blend-mode: screen;
}

.orbita-aura-core {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--orbita-conversation-accent) 38%, transparent),
    transparent 68%
  );
  filter: blur(var(--voice-blur));
  transform: scale(var(--voice-core-scale));
  transition: transform 80ms linear;
}

@supports not (background: color-mix(in srgb, white 20%, transparent)) {
  .orbita-aura-core {
    background: radial-gradient(circle, rgba(82, 225, 255, 0.32), transparent 68%);
  }
}

.orbita-aura-rings,
.orbita-aura-rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.orbita-aura-rings i {
  border: 1px solid var(--orbita-conversation-accent);
  opacity: 0.16;
}

.orbita-aura-rings i:nth-child(2) {
  inset: 12%;
  border-style: dashed;
  animation: orbita-ring-spin 12s linear infinite;
}

.orbita-aura-rings i:nth-child(3) {
  inset: 23%;
  border-width: 2px;
}

.orbita-aura-wave {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
}

.orbita-aura-wave i {
  width: 3px;
  max-height: 25px;
  opacity: 0.72;
}

.orbita-aura-particles i {
  --angle: var(--particle-angle, 0deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--orbita-conversation-accent);
  box-shadow: 0 0 8px var(--orbita-conversation-accent);
  transform:
    rotate(var(--angle))
    translateX(var(--particle-distance))
    rotate(var(--particle-angle-negative, 0deg));
}

body[data-conversation-state="idle"] .orbita-conversation-aura {
  opacity: 0.24;
}

body[data-conversation-state="listening"] .orbita-conversation-aura,
body[data-conversation-state="hearing"] .orbita-conversation-aura {
  opacity: 0.72;
}

body[data-conversation-state="listening"] .orbita-aura-rings i,
body[data-conversation-state="hearing"] .orbita-aura-rings i {
  animation: orbita-listening-ring 1.8s ease-out infinite;
}

body[data-conversation-state="hearing"] .orbita-aura-wave i,
body[data-conversation-state="speaking"] .orbita-aura-wave i {
  animation: orbita-meter-speak 520ms ease-in-out infinite alternate;
  animation-delay: var(--wave-delay, 0ms);
}

body[data-conversation-state="thinking"] .orbita-conversation-aura,
body[data-conversation-state="composing"] .orbita-conversation-aura {
  opacity: 0.62;
  animation: orbita-aura-breathe 2.4s ease-in-out infinite;
}

body[data-conversation-state="tool"] .orbita-aura-rings i:nth-child(2) {
  border-style: solid;
  animation-duration: 2.2s;
}

body[data-conversation-state="speaking"] .orbita-conversation-aura {
  opacity: var(--voice-aura-opacity);
  filter: saturate(var(--voice-saturation));
}

body[data-conversation-state="success"] .orbita-aura-particles i {
  animation: orbita-particle-celebrate 1.2s ease-out both;
}

body[data-conversation-state="error"] .orbita-conversation-aura {
  opacity: 0.58;
}

.orbita-message-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-message.assistant[data-orbita-stream="true"] .orbita-message-content::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 14px;
  margin-left: 4px;
  border-radius: 2px;
  vertical-align: -2px;
  background: var(--orbita-conversation-accent);
  animation: orbita-cursor-blink 900ms steps(1) infinite;
}

body[data-conversation-state="success"]
  .agent-message.assistant[data-orbita-stream="true"]
  .orbita-message-content::after,
body[data-conversation-state="idle"]
  .agent-message.assistant[data-orbita-stream="true"]
  .orbita-message-content::after {
  display: none;
}

.orbita-tool-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.orbita-tool-chip {
  padding: 6px 9px;
  border: 1px solid rgba(255, 199, 112, 0.32);
  border-radius: 999px;
  color: #ffdfa9;
  background: rgba(255, 173, 67, 0.1);
  font: inherit;
  font-size: 10px;
}

.orbita-tool-focus {
  outline: 2px solid var(--orbita-conversation-accent);
  outline-offset: 6px;
  box-shadow: 0 0 42px rgba(88, 221, 255, 0.28) !important;
}

#voiceButton.is-listening {
  color: #05251d !important;
  background: #80f0cb !important;
  box-shadow: 0 0 0 6px rgba(128, 240, 203, 0.12);
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .orbita-state-strip {
    background: #0c1b2c;
  }
}

@keyframes orbita-beacon-pulse {
  0% { opacity: 0.75; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.1); }
}

@keyframes orbita-meter-think {
  0%, 100% { height: 4px; opacity: 0.36; }
  50% { height: 15px; opacity: 1; }
}

@keyframes orbita-meter-speak {
  from { height: 5px; }
  to { height: var(--voice-bar-height, 16px); }
}

@keyframes orbita-eye-blink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(0.08); }
}

@keyframes orbita-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbita-listening-ring {
  0% { opacity: 0.32; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes orbita-aura-breathe {
  0%, 100% { filter: brightness(0.9); transform: translate(-50%, -50%) scale(0.96); }
  50% { filter: brightness(1.2); transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes orbita-particle-celebrate {
  0% { opacity: 0.2; }
  45% { opacity: 1; transform: rotate(var(--angle)) translateX(var(--particle-celebration-distance)); }
  100% { opacity: 0.2; }
}

@keyframes orbita-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 720px) {
  .orbita-state-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-inline: 10px;
    padding: 9px 10px;
  }

  .orbita-live-meter {
    display: none;
  }

  .orbita-state-copy small {
    max-width: 46vw;
  }

  .orbita-conversation-aura {
    --robot-size: 170px;
    z-index: 18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbita-conversation-aura *,
  .orbita-state-strip *,
  .orbita-conversation-face * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}