/* css/style.css */
:root {
    /* Dark Theme (Default) */
    --background-color: #121212;
    --surface-color: #1e1e1e; /* For cards, modals, etc. */
    --surface-color-darker: #1A1A1A; /* Slightly darker for modal content background */
    --primary-color: #bb86fc; /* Accent color for buttons, interactive elements */
    --secondary-color: #03dac6; /* Another accent, if needed */
    --text-color: #e0e0e0; /* Main text color */
    --text-color-secondary: #a0a0a0; /* For less important text */
    --error-color: #cf6679;
    --header-bg: #1f1f1f;
    --button-bg: var(--primary-color);
    --button-text-color: #000000;
    --input-bg: #2c2c2c;
    --input-border: #555;
    --input-focus-border: #5c5c5c;
    --button-disabled-bg: #555;

    --tiktok-viewport-width: 360px; /* Default width for TikTok-style viewport */
    --tiktok-viewport-height: calc(var(--tiktok-viewport-width) * 16 / 9); /* Maintain 9:16 aspect ratio */

    --skeleton-bg: #2c2c2c;
    --skeleton-item-bg: #3f3f3f;
    --skeleton-item-bg-lighter: #505050;

    --toast-bg: #333;
    --toast-text-color: #fff;
    --toast-success-bg: #4CAF50;
    --toast-error-bg: #f44336;
}

body {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow: hidden; /* Prevent body scroll when feed scrolls */
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    background-color: var(--header-bg);
    color: var(--text-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: fixed; /* Keep header at the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensure header is above other content */
    height: 60px; /* Fixed height for the header */
    box-sizing: border-box;
}

.brand-logo {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items in the middle */
    font-family: 'Nunito Sans', sans-serif; /* Add your chosen font here */
    font-size: 1.5em;
    font-weight: bold; /* Or adjust as needed for the font */
    color: var(--text-color);
    text-decoration: none;
    flex-shrink: 0;
}

.app-logo-img {
    height: 30px; /* Adjust as needed */
    /* width: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between logo and text */
    /* You might want to add a filter for light/dark mode if your logo needs it */
    /* e.g., .light-mode .app-logo-img { filter: invert(1); } */
}

.brand-logo span {
    /* If you need specific styling for the text part */
}

/* Light Theme */
body.light-mode {
    --background-color: #f4f4f8;
    --surface-color: #ffffff;
    --surface-color-darker: #F7F7F7; /* Slightly off-white for modal content background */
    --primary-color: #6200ee;
    --secondary-color: #03dac6;
    --text-color: #1f1f1f;
    --text-color-secondary: #5f5f5f;
    --error-color: #b00020;
    --header-bg: #ffffff;
    --button-bg: var(--primary-color);
    --button-text-color: #ffffff;
    --input-bg: #e0e0e0;
    --input-border: #ccc;
    --input-focus-border: #bbb;
    --button-disabled-bg: #ccc;

    --skeleton-bg: #e0e0e0;
    --skeleton-item-bg: #cccccc;
    --skeleton-item-bg-lighter: #d9d9d9;

    --toast-bg: #f0f0f0;
    --toast-text-color: #333;
    --toast-success-bg: #D4EDDA;
    --toast-error-bg: #F8D7DA;
}

/* Light mode specific toast text colors for better contrast */
body.light-mode .toast.success {
    color: #155724;
}
body.light-mode .toast.error {
    color: #721c24;
}


.search-container {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Center search bar */
    margin: 0 20px; /* Add some margin */
}

#search-input {
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 20px; /* Rounded search bar */
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9em;
    width: 100%; /* Take available space */
    max-width: 400px; /* Max width for the search bar */
    transition: box-shadow 0.2s ease-in-out;
}

#search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color);
    border-color: var(--input-focus-border);
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between auth elements */
    flex-shrink: 0;
}

#auth-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

#theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--input-border);
}

#user-name {
    font-weight: 500;
}

button {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    background-color: var(--button-bg);
    color: var(--button-text-color);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    font-size: 0.9em;
}

button:hover {
    opacity: 0.85;
}
button:disabled {
    background-color: var(--button-disabled-bg);
    color: var(--text-color-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

#sign-in-btn {
    background-color: #4285F4; /* Google Blue */
    color: white;
}
#sign-in-btn:hover {
    background-color: #357ae8;
}

#sign-out-btn {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--input-border);
}
#sign-out-btn:hover {
    background-color: var(--input-bg);
}


/* Toast Notification */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--toast-bg);
    color: var(--toast-text-color);
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 1001; /* Above header */
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 0.9em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: visibility 0s 0.3s, opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
    opacity: 0;
}

.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Slide up */
    transition-delay: 0s;
}
.toast.success {
    background-color: var(--toast-success-bg);
    color: var(--toast-text-color); /* Ensure text color is set for success/error too */
}
.toast.error {
    background-color: var(--toast-error-bg);
    color: var(--toast-text-color);
}


/* Responsive adjustments for viewport variables if needed */
@media (max-width: 400px) { /* Example breakpoint */
    :root {
        --tiktok-viewport-width: 92vw; /* Use viewport width more directly on smaller screens */
    }
    .video-viewport-tiktok { /* Apply to the class directly if needed */
        border-radius: 8px; /* Slightly less or no radius on very small screens */
        max-height: 80vh; /* Ensure it doesn't get too tall */
    }
}

/* Responsive Header Adjustments */
@media (max-width: 600px) {
    .brand-logo span {
        display: none; /* Hide text on small screens */
    }

    .app-header {
        padding: 0 10px; /* Reduce horizontal padding */
        gap: 10px; /* Add some space between header items */
    }

    .search-container {
        margin: 0 5px; /* Reduce margin */
        min-width: 80px; /* Give it a minimum width to prevent it from disappearing */
    }

    .auth-actions {
        gap: 8px; /* Reduce gap on mobile */
    }
}


/* The .feed container's margin-top and height are now handled in feed.css */
/* This ensures the scrollbar is correctly positioned below the fixed header */