/* src/styles/frames.css */

/* Status Message */
.status {
    /* Using Tailwind classes in FramesTab.js for positioning and basic style */
    /* Add any additional custom styles here if needed */
    animation: fadeInOut 3s ease-in-out forwards; /* Simple fade in/out */
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; display: none; }
}


/* Frames Container */
.frames-container {
    /* Using Tailwind grid classes in FramesTab.js */
    padding-bottom: 6rem; /* Add padding at the bottom for scroll */
}

/* Individual Frame Card */
.frame-card {
    @apply bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-700 transition-shadow duration-300 hover:shadow-blue-500/30;
    min-height: 300px; /* Ensure cards have a minimum height */
    display: flex; /* Use flexbox for content alignment */
    flex-direction: column; /* Stack content vertically */
}

.frame-content {
    @apply flex-grow; /* Allow content to fill available space */
    position: relative; /* Needed for iframe absolute positioning if required */
}

.frame-content iframe {
    @apply w-full h-full border-0; /* Make iframe fill the content area */
    min-height: 300px; /* Match card min-height */
}

.frame-inactive {
    @apply flex items-center justify-center h-full bg-gray-700 text-gray-400 rounded-lg;
    min-height: 300px;
}


/* Login Popup Styles */
.popup-overlay {
    /* Using Tailwind classes in FramesTab.js */
    backdrop-filter: blur(5px);
}

.popup-container {
    /* Using Tailwind classes in FramesTab.js */
    animation: slideIn 0.3s ease-out forwards;
}

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

.popup-tab.active {
    @apply bg-gray-700 text-white;
}

.welcome-button {
    /* Using Tailwind classes in FramesTab.js */
}

.welcome-button.secondary {
     /* Using Tailwind classes in FramesTab.js */
}

/* Ensure iframe content fits well */
.popup-iframe {
    /* Using Tailwind classes in FramesTab.js */
}

/* Add specific styles for elements *inside* the iframes if needed, */
/* but it's generally better to style them within their own HTML/CSS */

/* Fullscreen button styling (if using the new one, otherwise handled by main.css/main.js) */
/* Example if needed: */
/*
#framesFullScreenButton {
    @apply fixed bottom-6 right-6 z-50 p-3 rounded-full bg-blue-600 text-white shadow-lg hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
#framesFullScreenButton i {
    width: 20px;
    height: 20px;
}
*/