/* styles.css */
.fact-checker-btn {
    margin-left: 8px; /* Add some space if there are other buttons */
    
    background-color: #ffffff; /* Vercel-like: often white or very light grey */
    color: #111827; /* Dark grey text (Tailwind gray-900) */
    font-family: inherit; /* Inherit page font for consistency */
    font-size: 0.75rem; /* 12px if base is 16px, adjust as needed */
    font-weight: 500; /* Medium weight */
    
    padding: 6px 12px; /* Slightly adjusted padding */
    border: 1px solid #e5e7eb; /* Light grey border (Tailwind gray-200) */
    border-radius: 6px; /* Subtle rounding */
    
    cursor: pointer;
    z-index: 10000;
    
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow (Tailwind shadow-sm) */
    
    transition-property: background-color, border-color, color, transform, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
}

.fact-checker-btn:hover {
    background-color: #f9fafb; /* Slightly off-white on hover (Tailwind gray-50) */
    border-color: #d1d5db; /* Slightly darker border (Tailwind gray-300) */
    color: #000000; /* Black text on hover for a bit more emphasis */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.07); /* Slightly more pronounced shadow */
    transform: translateY(-1px); /* Slight lift */
}

.fact-checker-btn:active {
    background-color: #f3f4f6; /* (Tailwind gray-100) */
    transform: translateY(0px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 
  Ensure the parent message container has position: relative 
  This is set in content.js: messageElement.style.position = 'relative';
*/ 