/* Custom styles for collapsible functionality */
.mobile-instructions.collapsed .mobile-content {
  display: none;
}

.mobile-instructions.collapsed .itsy\:transition-transform.itsy\:duration-200 {
  transform: rotate(-90deg);
}

/* Bookmarklet agent animations */
@keyframes thinking {
  0%, 80%, 100% {
    transform: scale(0.8) !important;
    opacity: 0.5 !important;
  }
  40% {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
}

#bookmarklet-agent .thinking-dots span {
  animation: thinking 1.4s ease-in-out infinite both !important;
}

#bookmarklet-agent .thinking-dots span:nth-child(1) { animation-delay: -0.32s !important; }
#bookmarklet-agent .thinking-dots span:nth-child(2) { animation-delay: -0.16s !important; }
#bookmarklet-agent .thinking-dots span:nth-child(3) { animation-delay: 0s !important; }

/* Assistant message markdown styling that can't be easily represented in Tailwind */
#bookmarklet-agent .message.assistant h1,
#bookmarklet-agent .message.assistant h2,
#bookmarklet-agent .message.assistant h3,
#bookmarklet-agent .message.assistant h4,
#bookmarklet-agent .message.assistant h5,
#bookmarklet-agent .message.assistant h6 {
  margin: 8px 0 4px 0 !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  color: #000 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#bookmarklet-agent .message.assistant p {
  margin: 4px 0 !important;
  color: #000 !important;
}

#bookmarklet-agent .message.assistant ul,
#bookmarklet-agent .message.assistant ol {
  margin: 4px 0 !important;
  padding-left: 16px !important;
}

#bookmarklet-agent .message.assistant li {
  margin: 2px 0 !important;
  color: #000 !important;
}

#bookmarklet-agent .message.assistant code {
  background: rgba(0,0,0,0.1) !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
  font-family: 'Monaco', 'Consolas', monospace !important;
  font-size: 12px !important;
}

#bookmarklet-agent .message.assistant pre {
  background: rgba(0,0,0,0.05) !important;
  padding: 8px !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
  margin: 4px 0 !important;
}

#bookmarklet-agent .message.assistant pre code {
  background: none !important;
  padding: 0 !important;
}

#bookmarklet-agent .message.assistant blockquote {
  border-left: 3px solid #ddd !important;
  margin: 4px 0 !important;
  padding-left: 12px !important;
  color: #666 !important;
}