/* ============================================================
   COLONY CORE "FUSION CORE" — ORB STYLES + ANIMATIONS  v1.0
   ============================================================
   States: idle | processing | speaking | uncertain
   Accent variants: cyan | violet
   ============================================================ */

/* ── BASE ORB CONTAINER ──────────────────────────────────── */

.cc-coreorb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  line-height: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: var(--cc-core-size-desktop);
  height: var(--cc-core-size-desktop);
  transition: filter 0.6s ease;
}

.cc-coreorb svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── CHROMOSPHERE HALO (outer glow) ──────────────────────── */

.cc-coreorb::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 9999px;
  background: radial-gradient(
    circle,
    rgba(255, 181, 71, 0.18) 0%,
    rgba(255, 106, 42, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: -1;
}

/* ── STATE: IDLE ─────────────────────────────────────────── */

.cc-coreorb[data-state="idle"] {
  filter: brightness(var(--cc-core-glow-idle));
  animation: cc-idle-breathe var(--cc-idle-duration) ease-in-out infinite;
}

.cc-coreorb[data-state="idle"]::after {
  animation: cc-idle-halo var(--cc-idle-duration) ease-in-out infinite;
}

@keyframes cc-idle-breathe {
  0%, 100% { filter: brightness(1.00); }
  50%      { filter: brightness(1.05); }
}

@keyframes cc-idle-halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.02); }
}

/* ── STATE: PROCESSING ───────────────────────────────────── */

.cc-coreorb[data-state="processing"] {
  animation: cc-processing-glow var(--cc-processing-duration) ease-in-out infinite;
}

.cc-coreorb[data-state="processing"]::after {
  animation: cc-processing-halo var(--cc-processing-duration) ease-in-out infinite;
}

/* Radiance sweep overlay */
.cc-coreorb[data-state="processing"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 181, 71, 0.07) 30deg,
    transparent 60deg
  );
  animation: cc-processing-sweep var(--cc-processing-duration) linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes cc-processing-glow {
  0%, 100% { filter: brightness(1.02); }
  50%      { filter: brightness(var(--cc-core-glow-processing)); }
}

@keyframes cc-processing-halo {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

@keyframes cc-processing-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── STATE: SPEAKING ─────────────────────────────────────── */

.cc-coreorb[data-state="speaking"] {
  animation: cc-speaking-burst var(--cc-speaking-duration) ease-out 1 forwards;
}

.cc-coreorb[data-state="speaking"]::after {
  animation: cc-speaking-halo var(--cc-speaking-duration) ease-out 1 forwards;
}

@keyframes cc-speaking-burst {
  0%   { filter: brightness(1.00); }
  25%  { filter: brightness(var(--cc-core-glow-speaking)); }
  100% { filter: brightness(1.00); }
}

@keyframes cc-speaking-halo {
  0%   { opacity: 0.7; transform: scale(1); }
  25%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* ── STATE: UNCERTAIN ────────────────────────────────────── */

.cc-coreorb[data-state="uncertain"] {
  filter: brightness(var(--cc-core-glow-uncertain)) saturate(0.6);
  animation: cc-uncertain-dim 4s ease-in-out infinite;
}

.cc-coreorb[data-state="uncertain"]::after {
  opacity: 0.35;
  background: radial-gradient(
    circle,
    rgba(167, 176, 192, 0.12) 0%,
    transparent 60%
  );
  animation: none;
}

@keyframes cc-uncertain-dim {
  0%, 100% { filter: brightness(0.88) saturate(0.55); }
  50%      { filter: brightness(var(--cc-core-glow-uncertain)) saturate(0.65); }
}


/* ================================================================
   CONTAINMENT RING STYLES — CYAN VARIANT
   ================================================================ */

.cc-coreorb--cyan .cc-ring {
  stroke: var(--cc-control-cyan);
  opacity: 0.14;
  transition: opacity 0.6s ease, stroke 0.6s ease;
}

.cc-coreorb--cyan[data-state="processing"] .cc-ring {
  opacity: 0.24;
  animation: cc-ring-lock-cyan var(--cc-processing-duration) ease-in-out infinite;
}

.cc-coreorb--cyan[data-state="speaking"] .cc-ring {
  opacity: 0.28;
  animation: cc-ring-flash-cyan var(--cc-speaking-duration) ease-out 1 forwards;
}

.cc-coreorb--cyan[data-state="uncertain"] .cc-ring {
  stroke: var(--cc-signal-slate);
  opacity: 0.10;
}

@keyframes cc-ring-lock-cyan {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.28; }
}

@keyframes cc-ring-flash-cyan {
  0%   { opacity: 0.14; }
  30%  { opacity: 0.35; }
  100% { opacity: 0.14; }
}


/* ================================================================
   CONTAINMENT RING STYLES — VIOLET VARIANT
   ================================================================ */

.cc-coreorb--violet .cc-ring {
  stroke: var(--cc-control-violet);
  opacity: 0.14;
  transition: opacity 0.6s ease, stroke 0.6s ease;
}

.cc-coreorb--violet[data-state="processing"] .cc-ring {
  opacity: 0.24;
  animation: cc-ring-lock-violet var(--cc-processing-duration) ease-in-out infinite;
}

.cc-coreorb--violet[data-state="speaking"] .cc-ring {
  opacity: 0.28;
  animation: cc-ring-flash-violet var(--cc-speaking-duration) ease-out 1 forwards;
}

.cc-coreorb--violet[data-state="uncertain"] .cc-ring {
  stroke: var(--cc-signal-slate);
  opacity: 0.10;
}

@keyframes cc-ring-lock-violet {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.28; }
}

@keyframes cc-ring-flash-violet {
  0%   { opacity: 0.14; }
  30%  { opacity: 0.35; }
  100% { opacity: 0.14; }
}


/* ── TOOLTIP ─────────────────────────────────────────────── */

.cc-coreorb-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cc-space-850);
  color: var(--cc-signal-slate);
  font-size: 11px;
  font-family: Inter, system-ui, sans-serif;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: 1px solid rgba(167, 176, 192, 0.12);
  z-index: 300;
}

.cc-coreorb:hover .cc-coreorb-tooltip,
.cc-coreorb:focus-visible .cc-coreorb-tooltip {
  opacity: 1;
}


/* ── PANEL (click popover) ───────────────────────────────── */

.cc-core-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: var(--cc-space-850);
  border: 1px solid rgba(167, 176, 192, 0.12);
  border-radius: 12px;
  padding: 1.2rem;
  z-index: 500;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-family: Inter, system-ui, sans-serif;
}

.cc-core-panel.open {
  display: block;
  animation: cc-panel-in 0.2s ease-out;
}

@keyframes cc-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-core-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-core-gold);
  margin-bottom: 0.6rem;
}

.cc-core-panel__status {
  font-size: 12px;
  color: var(--cc-signal-slate);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-core-panel__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-core-ember);
  flex-shrink: 0;
}

.cc-core-panel__status-dot--uncertain {
  background: var(--cc-signal-slate);
}

.cc-core-panel__messages {
  font-size: 12px;
  color: rgba(167, 176, 192, 0.65);
  line-height: 1.5;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .cc-coreorb {
    width: var(--cc-core-size-mobile);
    height: var(--cc-core-size-mobile);
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cc-coreorb,
  .cc-coreorb::after,
  .cc-coreorb::before,
  .cc-coreorb .cc-ring {
    animation: none !important;
    transition: none !important;
  }
}