/**
 * Glynac Multi-Agent System - Styles
 */

/* ============================================================
   Animations
   ============================================================ */

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes typing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.slide-in { 
  animation: slideIn 0.3s ease-out; 
}

.pulse { 
  animation: pulse 1.5s infinite; 
}

.typing-indicator { 
  animation: typing 1s infinite; 
}

/* ============================================================
   Scrollbar Styling
   ============================================================ */

.custom-scrollbar::-webkit-scrollbar { 
  width: 6px; 
  height: 6px; 
}

.custom-scrollbar::-webkit-scrollbar-thumb { 
  background: #cbd5e1; 
  border-radius: 3px; 
}

.custom-scrollbar::-webkit-scrollbar-track { 
  background: transparent; 
}

/* ============================================================
   Markdown Content Styling
   ============================================================ */

.markdown-content h1 { 
  font-size: 1.875rem; 
  font-weight: bold; 
  margin: 1rem 0; 
}

.markdown-content h2 { 
  font-size: 1.5rem; 
  font-weight: bold; 
  margin: 0.875rem 0; 
}

.markdown-content h3 { 
  font-size: 1.25rem; 
  font-weight: bold; 
  margin: 0.75rem 0; 
}

.markdown-content p { 
  margin: 0.75rem 0; 
  line-height: 1.6; 
}

.markdown-content ul { 
  list-style: disc; 
  margin-left: 1.5rem; 
  margin: 0.5rem 0 0.5rem 1.5rem; 
}

.markdown-content ol { 
  list-style: decimal; 
  margin-left: 1.5rem; 
  margin: 0.5rem 0 0.5rem 1.5rem; 
}

.markdown-content li { 
  margin: 0.25rem 0; 
}

.markdown-content code { 
  background: #f1f5f9; 
  padding: 0.125rem 0.375rem; 
  border-radius: 0.25rem; 
  font-family: monospace;
  font-size: 0.875rem;
}

.markdown-content pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.markdown-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.markdown-content blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #64748b;
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.markdown-content th {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.5rem;
  text-align: left;
  font-weight: 600;
}

.markdown-content td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem;
}

.markdown-content strong { 
  font-weight: 600; 
}

.markdown-content em { 
  font-style: italic; 
}

.markdown-content a { 
  color: #3b82f6; 
  text-decoration: underline; 
}

.markdown-content a:hover { 
  color: #2563eb; 
}

.markdown-content hr { 
  border-top: 1px solid #e2e8f0; 
  margin: 1.5rem 0; 
}

/* ============================================================
   Task & Agent Styling
   ============================================================ */

.task-step {
  transition: all 0.2s ease;
}

.task-step:hover {
  transform: translateX(2px);
}

.agent-badge {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* ============================================================
   Log Level Colors
   ============================================================ */

.level-info { 
  color: #0ea5e9; 
}

.level-warning { 
  color: #f59e0b; 
}

.level-error { 
  color: #ef4444; 
}

.level-debug { 
  color: #8b5cf6; 
}

/* ============================================================
   Session & Message Interactions
   ============================================================ */

.session-item {
  transition: all 0.15s ease;
}

.session-item:hover {
  transform: translateX(4px);
}

.message-container {
  position: relative;
}

.message-delete-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message-container:hover .message-delete-btn {
  opacity: 1;
}