/* Bis AI Custom Styles */

/* EAI Logo Component - 統一フォント・統一色 */
.eai-logo {
  display: inline-flex;
  align-items: center;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  color: #2E86AB;
  letter-spacing: -0.02em;
}

.eai-logo .eai-e {
  color: #2E86AB;
  font-size: 1em;
  margin-right: 0;
}

.eai-logo .eai-ai {
  color: #2E86AB;
  font-size: 1em;
}

/* Animated EAI Logo - 統一カラーでのグロー効果 */
.eai-logo-animated {
  animation: eai-glow 3s ease-in-out infinite alternate;
}

@keyframes eai-glow {
  0% { text-shadow: 0 0 5px rgba(46, 134, 171, 0.3); }
  100% { text-shadow: 0 0 15px rgba(46, 134, 171, 0.8), 0 0 25px rgba(46, 134, 171, 0.6); }
}

/* Compact EAI Logo for headers */
.eai-logo-compact {
  font-size: 1.2rem;
}

.eai-logo-compact .eai-e {
  font-size: 1em;
}

.eai-logo-compact .eai-ai {
  font-size: 1em;
}

/* White theme EAI Logo for dark backgrounds */
.eai-logo-white {
  color: white;
}

.eai-logo-white .eai-e {
  color: white;
}

.eai-logo-white .eai-ai {
  color: white;
}

/* Comparison Mode Styles - Genspark-like UI */
.comparison-mode-container {
  max-width: 100%;
  width: 100%;
}

.bis-ai-final-answer {
  margin-bottom: 16px;
}

.individual-ai-responses {
  margin-top: 12px;
}

.ai-individual-response {
  transition: all 0.3s ease;
  border-left: 3px solid rgba(59, 130, 246, 0.3);
}

.ai-individual-response:hover {
  border-left-color: rgba(59, 130, 246, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
}

.individual-responses-container {
  transition: all 0.3s ease;
}

/* Fade in animation for individual responses */
.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Toggle button styles */
.comparison-mode-container button {
  transition: all 0.2s ease;
}

.comparison-mode-container button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bis AI final answer special styling */
.bis-ai-final-answer .bg-gradient-to-r {
  position: relative;
}

.bis-ai-final-answer .bg-gradient-to-r::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.1));
  border-radius: 8px;
  pointer-events: none;
}

/* Individual response truncation */
.truncated-response {
  position: relative;
}

.truncated-response::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.1));
}

/* Global styles */
* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  line-height: 1.6;\n  color: #1f2937;\n  background-color: #f9fafb;\n}\n\n/* Custom button styles */\n.btn-primary {\n  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;\n}\n\n.btn-secondary {\n  @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;\n}\n\n.btn-success {\n  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;\n}\n\n.btn-danger {\n  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;\n}\n\n.btn-outline {\n  @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-medium py-2 px-4 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;\n}\n\n/* Form styles */\n.form-input {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;\n}\n\n.form-input:focus {\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.form-label {\n  @apply block text-sm font-medium text-gray-700 mb-1;\n}\n\n.form-error {\n  @apply text-red-600 text-sm mt-1;\n}\n\n.form-success {\n  @apply text-green-600 text-sm mt-1;\n}\n\n/* Card styles */\n.card {\n  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;\n}\n\n.card-header {\n  @apply border-b border-gray-200 pb-4 mb-4;\n}\n\n.card-title {\n  @apply text-lg font-semibold text-gray-900;\n}\n\n.card-subtitle {\n  @apply text-sm text-gray-600 mt-1;\n}\n\n/* Alert styles */\n.alert {\n  @apply p-4 rounded-md mb-4;\n}\n\n.alert-info {\n  @apply bg-blue-50 text-blue-800 border border-blue-200;\n}\n\n.alert-success {\n  @apply bg-green-50 text-green-800 border border-green-200;\n}\n\n.alert-warning {\n  @apply bg-yellow-50 text-yellow-800 border border-yellow-200;\n}\n\n.alert-error {\n  @apply bg-red-50 text-red-800 border border-red-200;\n}\n\n/* Badge styles */\n.badge {\n  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;\n}\n\n.badge-primary {\n  @apply bg-blue-100 text-blue-800;\n}\n\n.badge-success {\n  @apply bg-green-100 text-green-800;\n}\n\n.badge-warning {\n  @apply bg-yellow-100 text-yellow-800;\n}\n\n.badge-danger {\n  @apply bg-red-100 text-red-800;\n}\n\n.badge-gray {\n  @apply bg-gray-100 text-gray-800;\n}\n\n/* Loading spinner */\n.spinner {\n  @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;\n}\n\n.spinner-lg {\n  @apply w-8 h-8;\n}\n\n/* Hover effects */\n.hover-lift {\n  @apply transition-transform duration-200 hover:-translate-y-1;\n}\n\n.hover-shadow {\n  @apply transition-shadow duration-200 hover:shadow-lg;\n}\n\n/* Gradient backgrounds */\n.gradient-primary {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.gradient-success {\n  background: linear-gradient(135deg, #4ade80 0%, #059669 100%);\n}\n\n.gradient-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);\n}\n\n/* Animation classes */\n.fade-in {\n  animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.slide-up {\n  animation: slideUp 0.3s ease-out;\n}\n\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* File upload styles */\n.file-upload {\n  @apply relative cursor-pointer;\n}\n\n.file-upload input[type=\"file\"] {\n  @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;\n}\n\n.file-upload-area {\n  @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-500 transition-colors duration-200;\n}\n\n.file-upload-area.dragover {\n  @apply border-blue-500 bg-blue-50;\n}\n\n/* Toast notifications */\n.toast {\n  @apply fixed top-4 right-4 max-w-sm bg-white rounded-lg shadow-lg border border-gray-200 z-50 transform transition-all duration-300;\n}\n\n.toast.show {\n  @apply translate-x-0 opacity-100;\n}\n\n.toast.hide {\n  @apply translate-x-full opacity-0;\n}\n\n/* Progress bar */\n.progress {\n  @apply w-full bg-gray-200 rounded-full overflow-hidden;\n}\n\n.progress-bar {\n  @apply h-2 bg-blue-600 transition-all duration-300 ease-out;\n}\n\n/* Modal overlay */\n.modal-overlay {\n  @apply fixed inset-0 bg-black bg-opacity-50 z-40;\n}\n\n.modal {\n  @apply fixed inset-0 z-50 flex items-center justify-center p-4;\n}\n\n.modal-content {\n  @apply bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto;\n}\n\n/* Chat interface */\n.chat-container {\n  @apply flex flex-col h-full;\n}\n\n.chat-messages {\n  @apply flex-1 overflow-y-auto p-4 space-y-4;\n}\n\n.chat-message {\n  @apply flex items-start space-x-3;\n}\n\n.chat-message.user {\n  @apply flex-row-reverse space-x-reverse;\n}\n\n.chat-message-content {\n  @apply max-w-xs lg:max-w-md px-4 py-2 rounded-lg;\n}\n\n.chat-message.user .chat-message-content {\n  @apply bg-blue-600 text-white;\n}\n\n.chat-message.assistant .chat-message-content {\n  @apply bg-gray-200 text-gray-900;\n}\n\n.chat-input {\n  @apply border-t border-gray-200 p-4;\n}\n\n/* Responsive utilities */\n@media (max-width: 640px) {\n  .mobile-hidden {\n    display: none;\n  }\n}\n\n@media (min-width: 641px) {\n  .desktop-hidden {\n    display: none;\n  }\n}\n\n/* Print styles */\n@media print {\n  .no-print {\n    display: none;\n  }\n  \n  * {\n    -webkit-print-color-adjust: exact;\n    color-adjust: exact;\n  }\n}\n\n/* Dark mode support (if needed) */\n@media (prefers-color-scheme: dark) {\n  .dark-mode {\n    @apply bg-gray-900 text-gray-100;\n  }\n  \n  .dark-mode .card {\n    @apply bg-gray-800 border-gray-700;\n  }\n  \n  .dark-mode .form-input {\n    @apply bg-gray-800 border-gray-600 text-gray-100;\n  }\n}\n\n/* Security indicator */\n.security-indicator {\n  @apply inline-flex items-center space-x-1 text-sm font-medium;\n}\n\n.security-indicator.secure {\n  @apply text-green-600;\n}\n\n.security-indicator.warning {\n  @apply text-yellow-600;\n}\n\n.security-indicator.danger {\n  @apply text-red-600;\n}
/* Blend Mode Helper Styles - Makes composition modes more intuitive */
.blend-mode-description {
  animation: fadeIn 0.3s ease-in-out;
}

.blend-mode-description .recommendation-item:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.blend-mode-select-enhanced {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.blend-mode-select-enhanced:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  outline: none;
}

.blend-mode-select-enhanced optgroup {
  font-weight: bold;
  color: #4a5568;
  background: #f7fafc;
}

.blend-mode-select-enhanced option {
  padding: 8px 12px;
  color: #2d3748;
  background: white;
}

.recommendation-item {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.recommendation-item:hover {
  border-color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

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