@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 
 * Adding styles here to keep the tailwind static analysis happy and find the classes.
 * These classes are added dynamically in MessageEntry.tsx so the static analysis doesn't find them.
 * Any changes also need to be made in tailwind.config.ts
 */

.bb-code-truncated {
	@apply relative overflow-hidden;
}

.bb-code-expanded {
	@apply relative;
}

.bb-code-fade-overlay {
	@apply absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent dark:from-gray-900
		pointer-events-none;
}

.bb-thinking-container {
	@apply mb-6 w-full max-w-full;
}

.bb-thinking-header {
	@apply flex items-center justify-between cursor-pointer p-2 max-w-full overflow-hidden bg-green-50
		dark:bg-green-900/30 border-l-4 border-green-300 dark:border-green-700 rounded-tr;
}

.bb-thinking-icon {
	@apply w-4 h-4 mr-2 transform transition-transform duration-200;
}

.bb-thinking-label {
	@apply text-sm font-medium text-green-700 dark:text-green-300;
}

.bb-thinking-metadata {
	@apply text-xs text-green-600 dark:text-green-400 hover:underline;
}

.bb-thinking-content {
	@apply border-l-4 border-green-300 dark:border-green-700 rounded-br pt-1 pb-2 px-4 prose dark:prose-invert
		max-w-full w-full overflow-x-auto break-words;
}

/* File attachment specific styles (backup for edge cases) */
.bb-file-attachment {
	@apply inline-block;
}

.bb-image-attachment {
	@apply my-2;
}

.bb-download-attachment {
	@apply inline-flex items-center gap-2 p-2 border rounded;
}

.bb-image-thumbnail {
	@apply cursor-pointer max-w-xs max-h-48 rounded border shadow-sm hover:shadow-md transition-shadow;
}

.bb-file-info {
	@apply text-xs text-gray-500 dark:text-gray-400 mt-1 truncate;
}

.bb-file-icon {
	@apply text-lg;
}

.bb-file-link {
	@apply text-blue-600 dark:text-blue-400 hover:underline;
}

.bb-download-icon {
	@apply text-gray-500 hover:text-gray-700 cursor-pointer;
}

/* 
 * These are custom styles; not extending classes.
 * Need to figure out how to add them to tailwind.config.ts
 */

/* Agent Task Group Styling */
.bb-custom-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

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

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

.bb-custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: rgba(156, 163, 175, 0.5);
	border-radius: 6px;
}

.bb-custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: rgba(156, 163, 175, 0.8);
}

.bb-agent-task-group {
	border-left: 4px solid #f97316; /* Orange border to match task styling */
	transition: all 0.2s ease;
}

.bb-agent-task-group:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
	.bb-agent-task-group {
		border-left: 4px solid #ea580c; /* Darker orange for dark mode */
	}

	.bb-custom-scrollbar {
		scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
	}

	.bb-custom-scrollbar::-webkit-scrollbar-thumb {
		background-color: rgba(107, 114, 128, 0.5);
	}

	.bb-custom-scrollbar::-webkit-scrollbar-thumb:hover {
		background-color: rgba(107, 114, 128, 0.8);
	}
}

/* Data Source Component Styles */
/* 
.bb-datasource-container {
	@apply w-full p-4 space-y-4;
}

.bb-datasource-list {
	@apply space-y-4;
}

.bb-no-datasources {
	@apply text-gray-500 dark:text-gray-400 text-center py-4;
}

.bb-datasource-item {
	@apply border rounded-lg p-4 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-sm;
}

.bb-datasource-item.primary {
	@apply border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20;
}

.bb-datasource-item.disabled {
	@apply opacity-60;
}

.bb-datasource-header {
	@apply flex justify-between items-center mb-2;
}

.bb-datasource-actions {
	@apply flex gap-2;
}

.bb-datasource-details {
	@apply space-y-2;
}

.badge-container {
	@apply flex flex-wrap gap-2;
}

.badge {
	@apply px-2 py-1 text-xs rounded-full;
}

.badge-type {
	@apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300;
}

.badge-primary {
	@apply bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300;
}

.badge-enabled {
	@apply bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300;
}

.badge-disabled {
	@apply bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300;
}

.capabilities {
	@apply flex flex-wrap gap-1.5;
}

.capability-badge {
	@apply px-2 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300;
}

.path-display {
	@apply text-sm text-gray-600 dark:text-gray-400 truncate border-t border-gray-100 dark:border-gray-700 mt-2 pt-2;
}

.loading-indicator {
	@apply text-center py-2 text-gray-500 dark:text-gray-400;
}

.error-message {
	@apply text-red-500 dark:text-red-400 p-2 border border-red-200 dark:border-red-800 rounded bg-red-50 dark:bg-red-900/20;
}

.button {
	@apply px-3 py-1.5 rounded bg-blue-500 hover:bg-blue-600 text-white disabled:bg-gray-300 disabled:text-gray-500 dark:disabled:bg-gray-700 dark:disabled:text-gray-400 transition-colors;
}

.button-small {
	@apply px-2 py-1 text-xs;
}

.button-danger {
	@apply bg-red-500 hover:bg-red-600 disabled:bg-gray-300;
}
 */
