syncable-cli 0.37.1

@import "tailwindcss";

body {
  @apply m-0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* ============================================
   Smart Reply Generator - Animations
   ============================================ */

/* Fade in up animation for cards */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

/* Glass reveal animation */
@keyframes glass-reveal {
  from {
    opacity: 0;
    transform: scale(0.95);
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
    backdrop-filter: blur(24px);
  }
}

.animate-glass-reveal {
  animation: glass-reveal 0.7s ease-out forwards;
}

/* Shimmer animation for skeletons */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.5) 0%,
    rgba(51, 65, 85, 0.5) 50%,
    rgba(30, 41, 59, 0.5) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Glow pulse for generating state */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.4);
  }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Slide in from right for drawer */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

/* Slide out to right for drawer */
@keyframes slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.animate-slide-out-right {
  animation: slide-out-right 0.3s ease-in forwards;
}

/* Backdrop fade */
@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-backdrop-fade-in {
  animation: backdrop-fade-in 0.3s ease-out forwards;
}

/* Slow pulse for ambient orbs */
@keyframes slow-pulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.05);
  }
}

.animate-slow-pulse {
  animation: slow-pulse 8s ease-in-out infinite;
}

/* Typing indicator dots */
@keyframes typing-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.animate-typing-dot {
  animation: typing-dot 1.4s ease-in-out infinite;
}

.animate-typing-dot-delay-1 {
  animation-delay: 0.2s;
}

.animate-typing-dot-delay-2 {
  animation-delay: 0.4s;
}

/* Scale on hover for interactive elements */
.hover-scale {
  transition: transform 0.2s ease-out;
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Stagger delays for sequential animations */
.stagger-delay-1 { animation-delay: 75ms; }
.stagger-delay-2 { animation-delay: 150ms; }
.stagger-delay-3 { animation-delay: 225ms; }
.stagger-delay-4 { animation-delay: 300ms; }

/* Custom scrollbar for dark theme */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   CopilotKit Customizations
   Hide duplicate tool results (we show them in generative UI)
   ============================================ */

/* Hide ALL default tool-related messages from CopilotKit */
/* Our generative UI via useCoAgentStateRender shows these better */

/* Hide action execution messages (tool calls) */
[data-message-type="action-execution"],
[class*="ActionExecution"],
[class*="actionExecution"] {
  display: none !important;
}

/* Hide result messages (tool results) */
[data-message-type="result"],
[class*="ResultMessage"],
[class*="resultMessage"] {
  display: none !important;
}

/* Hide any tool render containers */
[data-copilotkit-tool-render],
.copilotKitToolRender,
[class*="ToolRender"],
[class*="toolRender"] {
  display: none !important;
}

/* Hide agent state render duplication */
.copilotKitAgentStateRender + .copilotKitAgentStateRender {
  display: none !important;
}

/* More specific: hide messages containing tool call info */
[data-role="assistant"] > div:has([data-tool-call]),
[data-role="assistant"] > div:has([data-action-execution]) {
  display: none !important;
}

/* Tool results are now shown in a separate sidebar panel, not inline in the chat */
/* Hide any state renders in the chat since we capture them separately */
.copilotKitMessagesContainer > div[style*="margin-bottom"]:has([data-agent-render]) {
  display: none !important;
}