/* Status Manager Styles for Meta Agent Interface */

/* Base status indicator */
.agent-of-agents-page .status-bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  background-color: transparent !important;
  color: #333;
}

.dark-mode .agent-of-agents-page .status-bubble {
  color: rgba(255, 255, 255, 0.8);
  margin: 5px 0 5px 50px; /* Left margin to align with agent messages */
  max-width: 80% !important; /* Changed from 90% to 80% as requested */
  animation: fadeIn 0.3s ease-in-out;
  position: relative;
  box-shadow: none !important;
  border: none !important;
}

/* Hide tool call messages in meta agent */
.agent-of-agents-page .message-text[data-message-type="tool-call"],
.agent-of-agents-page .message-text[data-message-type="tool-result"] {
  display: none !important;
}

/* Hide legacy typing indicators but allow status bubbles */
.agent-of-agents-page .typing-indicator:not(.status-bubble):not(#status-inline):not(#status-typing-indicator) {
  display: none !important;
}

/* Status spinner animation - now smaller and more subtle */
.agent-of-agents-page .spinner {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  animation: rotate 2s linear infinite;
  vertical-align: middle;
  display: inline-block;
}

.agent-of-agents-page .spinner .track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 2;
}

.dark-mode .agent-of-agents-page .spinner .track {
  stroke: rgba(255, 255, 255, 0.1);
}

.agent-of-agents-page .spinner .indicator {
  fill: none;
  stroke: #d946ef;
  stroke-width: 2;
  stroke-dasharray: 60, 100;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

/* Typing dots animation */
.agent-of-agents-page .dots {
  display: inline-block;
  margin-left: 4px;
}

.agent-of-agents-page .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 0 1px;
  background-color: #d946ef;
  animation: pulse 1.5s infinite;
}

.dark-mode .agent-of-agents-page .dot {
  background-color: #d946ef;
}

.agent-of-agents-page .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.agent-of-agents-page .dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Status-specific styles */
.agent-of-agents-page .status-bubble.loading .spinner .indicator,
.agent-of-agents-page .status-bubble.processing .spinner .indicator {
  stroke: #d946ef; /* Magenta */
}

.agent-of-agents-page .status-bubble.complete .spinner .indicator {
  stroke: #10b981; /* Green */
}

.agent-of-agents-page .status-bubble.error .spinner .indicator {
  stroke: #ef4444; /* Red */
}

/* Custom styles for inline-status element */
.agent-of-agents-page #status-inline {
  position: relative;
  width: auto;
  margin: 8px 0 8px 50px; /* Left-aligned with agent messages */
  max-width: 80% !important; /* Changed from 90% to 80% as requested */
  background-color: transparent !important;
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
}

.agent-of-agents-page #status-inline .message-content {
  background-color: transparent !important;
  padding: 6px 6px 6px 0;
}

.agent-of-agents-page #status-inline .message-text {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  font-size: 14px;
  color: #4b5563;
  flex-direction: row !important;
  overflow: visible !important; /* Changed from hidden to visible */
  white-space: normal;
  text-overflow: none; /* Removed ellipsis to allow full text */
  min-width: 0;
  word-wrap: break-word;
  width: fit-content !important; /* Changed from 100% to fit-content so it only takes needed space */
}

.dark-mode .agent-of-agents-page #status-inline .message-text {
  color: rgba(255, 255, 255, 0.7);
}

.agent-of-agents-page #status-inline .message-footer {
  display: none; /* Hide the footer in status messages */
}

/* Hide any element that contains TOOL CALL or TOOL RESULT */
.agent-of-agents-page .message-text:has(.msg:contains("[TOOL CALL]")),
.agent-of-agents-page .message-text:has(.msg:contains("[TOOL RESULT]")) {
  display: none !important;
}

/* Animations */
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 120;
  }
  50% {
    stroke-dashoffset: 30;
  }
  100% {
    stroke-dashoffset: 120;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback for browsers that don't support :has() */
[data-contains-tool-call="true"],
[data-contains-tool-result="true"] {
  display: none !important;
}