html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* overflow: hidden; */ /* Allow appContainer to manage its own scroll */
    font-family: 'Roboto', sans-serif;
    background-color: #111; /* Dark background for the app */
    color: #fff;
}

#app-container {
    height: 100vh; /* Full viewport height */
    overflow-y: scroll; /* Enable vertical scrolling for the container */
    scroll-snap-type: y mandatory; /* Snap on y-axis, mandatory */
    width: 100%;
    padding: 0;
}

.scroll-section { /* Common class for all snap points, NOW ONLY item cards */
    height: 100vh;
    width: 100%;
    scroll-snap-align: start; /* Each section snaps to the start */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative; /* For content positioning within the viewport */
}

/* Styling for the first section containing search UI - REMOVED as section is gone */
/* #initial-search-section { ... } */
/* #search-content-wrapper { ... } */
/* header { ... } */
/* header h1 { ... } */
/* #search-container { ... } */
/* #search-input { ... } */
/* #search-input::placeholder { ... } */
/* #search-button { ... } */
/* #search-button:hover { ... } */
/* #instruction-text { ... } */

/* This container itself is now just a conceptual wrapper, items are direct children of app-container for snapping */
/* #video-results-container { ... } */ /* Not strictly needed as items append to app-container */

.item-card { /* Each card is a full-screen scroll section and now also a .scroll-section implicitly */
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content for a focused view */
    padding: 20px;
    box-sizing: border-box;
    background-color: #1c1c1c; /* Slightly different from body for card feel */
    text-align: center;
}

.item-card img.thumbnail {
    max-width: 90%;
    max-height: 50vh; /* Allow image to be large but not fill everything */
    object-fit: contain; /* Show full image, letterboxed if necessary */
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.item-card .item-info {
    padding: 0 10px; /* Added some horizontal padding */
    max-width: 85%;
    width: 100%;
}

.item-card .item-title {
    font-size: 1.5em; /* Larger for full screen */
    font-weight: 500;
    color: #eee;
    margin: 0 0 12px 0;
    line-height: 1.3;
    max-height: calc(1.5em * 1.3 * 3); /* Allow up to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    /* -webkit-box for line clamping might not be needed if height is controlled */
}

.item-card .item-source,
.item-card .item-channel-name {
    font-size: 1em;
    color: #bbb;
    margin-bottom: 15px;
}

.item-card .item-source-type {
    font-size: 0.85em;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-card .item-description-snippet { /* For RSS description previews */
    font-size: 0.95em;
    color: #ddd;
    margin-bottom: 20px;
    line-height: 1.5;
    max-height: calc(0.95em * 1.5 * 4); /* Approx 4 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card .item-link {
    display: inline-block;
    padding: 12px 28px;
    background-color: #e74c3c;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.item-card .item-link:hover {
    background-color: #c0392b;
    transform: scale(1.05);
}

#loading-indicator p,
#error-message p {
    font-size: 1em;
    color: #bbb;
    position: fixed; /* Show over content */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8);
    padding: 12px 25px;
    border-radius: 8px;
    z-index: 1000; /* Ensure it's above other content */
}

#error-message p {
    color: #ff8080; /* More visible error color */
}

/* Hide scrollbar across browsers */
#app-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
#app-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    /* #search-container related styles can be removed if not generically used */
    /* #search-input related styles can be removed if not generically used */
    /* ... other responsive styles for item-cards ... */
}

@media (max-width: 480px) {
    /* header h1 responsive styles can be removed */
    /* #search-input responsive styles can be removed if not generically used */
    /* ... other responsive styles for item-cards ... */
}

.item-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 15px;
    background-color: #5D3FD3; /* A more vibrant purple */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.item-link:hover {
    background-color: #4E2DB7; /* Darker purple on hover */
}

/* Styles for CTA container and gem reward */
.cta-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Horizontally center items in the column */
    justify-content: center; 
    gap: 8px; 
    margin-top: 12px; 
}

.cta-container .gem-reward {
    /* The existing .gem-reward styles are good, no change needed here for order */
    /* If specific margin is needed for the text, add it here */
    margin-bottom: 4px; /* Add a small space between text and button */
}

.cta-container .item-link {
    margin-top: 0; /* Reset margin as it's handled by cta-container now */
}

.gem-reward {
    font-size: 0.9em;
    color: #4CAF50; /* Greenish color for reward */
    font-weight: bold;
}

#loading-indicator {
    /* ... existing code ... */
}

/* Keyword Selection UI Styles */
#keyword-selection-container {
    height: 100vh; /* Make it full viewport height initially */
    box-sizing: border-box; /* Ensure padding doesn't make it exceed viewport */
    display: flex; /* Use flex to center content vertically */
    flex-direction: column;
    justify-content: center; /* Center its own content (search, keyword lists) */
    position: relative; /* Added for absolute positioning of children */
    padding: 20px;
    background-color: #222; 
    /* margin-bottom: 30px; */ /* No longer needed if it's hidden after scroll */
    border-radius: 0; /* No radius if it's full screen */
    text-align: center;
    /* Ensure it does not cause appContainer to scroll by itself before user action */
    /* overflow: hidden; */ /* This might prevent seeing all keywords if they overflow the container itself */
}

#keyword-selection-container h2, #keyword-selection-container h3 {
    color: #eee;
    margin-bottom: 15px;
}

/* 
.search-bar-container {
    margin-bottom: 20px;
}

#keyword-search-input {
    width: 80%;
    max-width: 400px;
    padding: 12px 15px;
    border-radius: 25px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    font-size: 1em;
}

#keyword-search-input::placeholder {
    color: #888;
}
*/

.keywords-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.keyword-pill {
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.keyword-pill.suggested {
    background-color: #007bff; /* Blue for suggested (like the plus button) */
    color: white;
    border: 1px solid #0056b3;
}

.keyword-pill.suggested:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.keyword-pill.selected {
    background-color: #ff4757; /* Pink/Red for selected (like the checkmark button) */
    color: white;
    border: 1px solid #d71e30;
}

.keyword-pill.selected:hover {
    background-color: #d71e30;
    transform: scale(1.05);
}

.keyword-pill .action-icon {
    font-weight: bold;
}

.scroll-indicator {
    position: absolute; /* Position relative to #keyword-selection-container */
    bottom: 30px; /* Adjust as needed for spacing from the bottom */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #aaa;
}

.scroll-indicator p {
    margin-bottom: 5px;
    font-size: 0.9em;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #aaa; /* This creates the triangle */
    margin: 0 auto;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}