@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* For custom scrollbar in dark mode */
#transcript-container::-webkit-scrollbar,
#ai-suggestions::-webkit-scrollbar,
#summary-content::-webkit-scrollbar,
#ai-latest-suggestion::-webkit-scrollbar {
  width: 8px;
}

#transcript-container::-webkit-scrollbar-track,
#ai-suggestions::-webkit-scrollbar-track,
#summary-content::-webkit-scrollbar-track,
#ai-latest-suggestion::-webkit-scrollbar-track {
  background: #1A1C24;
}

#transcript-container::-webkit-scrollbar-thumb,
#ai-suggestions::-webkit-scrollbar-thumb,
#summary-content::-webkit-scrollbar-thumb,
#ai-latest-suggestion::-webkit-scrollbar-thumb {
  background-color: #373A4D;
  border-radius: 4px;
}

#transcript-container::-webkit-scrollbar-thumb:hover,
#ai-suggestions::-webkit-scrollbar-thumb:hover,
#summary-content::-webkit-scrollbar-thumb:hover,
#ai-latest-suggestion::-webkit-scrollbar-thumb:hover {
  background-color: #4A4E69;
}

/* Animation for suggestions and other elements to fade in */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.tab-btn {
    padding: 0.75rem 0.5rem;
    border-bottom: 3px solid transparent;
    color: #9CA3AF; /* text-gray-400 */
    white-space: nowrap;
}

.tab-btn:hover {
    border-bottom-color: #4B5563; /* border-gray-600 */
    color: #D1D5DB; /* text-gray-300 */
}

.tab-btn.active {
    border-bottom-color: #3B82F6; /* border-blue-500 */
    color: #FFFFFF; /* text-white */
    font-weight: 600;
}

.tab-content { display: none; }

.tab-content.active { display: block; }