/* Adjust container width when the right panel is active (desktop only) */
@media (min-width: 933px) {
  body.right-panel-active .container {
    width: calc(100vw - var(--right-panel-width));
  }
}

/* NEW: Adjust container padding-top and height when mobile header is active */
/* UPDATED: Increased max-width to 932px to match JS isMobile() definition */
@media (max-width: 932px) {
  :root {
    --mobile-header-height: 70px; /* Define height of the top nav bar */
  }

  html, body {
    overflow-y: auto; /* Allow vertical scrolling on mobile */
  }

  body.mobile-header-active .container {
    /* MODIFIED: Needs padding equal to ONLY the primary fixed bar */
    padding-top: var(--mobile-header-height);
    /* MODIFIED: Height calculation updated to subtract only the primary bar */
    height: 100vh;
  }
  .container {
    min-height: 100vh;
  }

  /* Adjustments for loading screen on mobile */
  .loading-message {
    font-size: .5em; /* Smaller font size on mobile */
    margin-bottom: 20px; /* Reduced margin on mobile */

  }

  /* Adjustments for loading screen on mobile */
  .loading-message-top {
    font-size: 1.5em; /* Smaller font size on mobile */
    margin-bottom: 20px; /* Reduced margin on mobile */
  }

  .loading-logos-container {
    height: 150px; /* Reduced height for logos container */
    margin-bottom: 10px;
  }

  .loading-logo {
    max-width: 80px; /* Smaller logos on mobile */
  }

  @keyframes spin-and-move-logo1 {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(30px) rotate(180deg); } /* Reduced movement */
    100% { transform: translateX(0) rotate(360deg); }
  }

  @keyframes spin-and-move-logo2 {
    0% { transform: translateX(0) rotate(-180deg); } /* Reduced movement */
    100% { transform: translateX(0) rotate(-360deg); }
  }
}

/* --- MOBILE LANDSCAPE OPTIMIZATIONS --- */
/* CRITICAL FIX: These styles must ONLY apply when the header is in 'mobile' mode (top bar). 
   If the screen is wide enough for the side bar (e.g. 800px landscape), we must NOT apply 
   these overrides, or we get a layout conflict. Scoped all selectors to body.mobile-header-active. */
@media (max-width: 932px) and (orientation: landscape) {
    body.mobile-header-active .container {
        /* Reduce padding-top in landscape to maximize video space */
        /* FIX: Set to 0 because header moves to the right side in landscape */
        padding-top: 0 !important; 
        height: auto;
        min-height: 100vh;
        overflow-y: auto !important; /* Ensure scrolling works */
        padding-bottom: 0 !important; /* Remove bottom padding for tight fit */
        
        /* Grid Layout for Landscape: 2 columns */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: min-content !important; /* Allow rows to size to content */
        /* FIX: Remove gap to fix spacing issues */
        gap: 0 !important; 
        padding: 0 !important;
        /* Ensure width accounts for the right panel */
        width: calc(100vw - var(--right-panel-width)) !important;
    }

    /* Override standard mobile header height for landscape context */
    body.mobile-header-active {
        --mobile-header-height: 0px; /* Reset to 0 as it moves to side */
    }

    body.mobile-header-active #main-header {
        /* Reset these to prevent conflict with ui.js overrides */
        min-height: 0;
        padding: 0;
    }

    /* Individual stream containers in landscape */
    body.mobile-header-active .stream-container {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Ensure video wrapper maintains 16:9 when chat is CLOSED */
    body.mobile-header-active .stream-container:not(.with-chat) .video-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9 !important;
    }

    /* When Chat is OPEN in Landscape: Span 2 columns, Side-by-Side layout */
    body.mobile-header-active .stream-container.with-chat {
        grid-column: span 2 !important;
        height: auto !important; /* Remove fixed height to allow scrolling */
        aspect-ratio: unset !important;
        display: flex !important;
        flex-direction: row !important; /* Side-by-side video and chat */
        align-items: flex-start !important; /* Align tops */
        background: #000;
        border: 2px solid #333;
        margin-bottom: 0 !important; /* Remove margin */
    }

    /* Video Side (Left) */
    body.mobile-header-active .stream-container.with-chat .player-container {
        flex: 0 0 60% !important; /* Video takes 60% width */
        width: 60% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Wrapper inside player-container forces 16:9 */
    body.mobile-header-active .stream-container.with-chat .video-wrapper {
        width: 100% !important;
        height: auto !important; 
        aspect-ratio: 16 / 9 !important; /* STRICT 16:9 RATIO */
        flex-grow: 0 !important;
    }

    /* Chat Side (Right) */
    body.mobile-header-active .stream-container.with-chat .chat-panel {
        flex: 0 0 40% !important; /* Chat takes 40% width */
        width: 40% !important;
        display: block !important;
        border-top: none !important;
        border-left: 1px solid #333 !important;
        /* Make chat match the video height (approximate or via flex stretch) */
        aspect-ratio: 16 / 14 !important; /* Rough calculation to match video height + controls */
    }
    
    body.mobile-header-active .stream-container.with-chat .chat-iframe {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

    /* Adjust controls in landscape side-by-side mode */
    body.mobile-header-active .stream-container.with-chat .desktop-controls {
        width: 100% !important;
        height: 35px !important;
    }
}

/* NEW: Stream container when chat is at the bottom (desktop) */
/* This block should only apply on desktop to avoid conflict with mobile's .with-chat */
@media (min-width: 933px) {
    .stream-container.with-chat.chat-bottom {
        flex-direction: column; /* Stack video and chat vertically */
    }

    .stream-container.with-chat.chat-bottom .player-container {
        width: 100%; /* Take full width */
        height: 70%; /* Player takes 70% of height */
    }

    .stream-container.with-chat.chat-bottom .chat-panel {
        width: 100%; /* Take full width */
        height: 30%; /* Chat takes 30% of height */
        border-left: none; /* Remove left border */
        border-right: none; /* Remove right border if any was inherited */
        border-top: 2px solid #333; /* Add top border for separation */
    }

    .stream-container.with-chat.chat-bottom .chat-iframe {
        width: calc(100% / var(--chat-scale));
        height: calc(100% / var(--chat-scale));
        transform: scale(var(--chat-scale));
        transform-origin: top left;
        position: static;
    }
}

/* --- START: UNIFIED NAVIGATION STYLES --- */

/* Default (Desktop) Header styles - Vertical bar on the right */
#main-header {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--right-panel-width);
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
    z-index: 1010;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}

#main-header .header-left {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

#main-header .header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Hide mobile logo link and title on desktop */
.header-logo-link,
#main-header h1 {
    display: none;
}

/* Desktop-only logo styles */
.desktop-only-logo {
    display: none; /* Hidden by default */
}


/* Default Nav panel styles (for mobile slide-out) */
.mobile-nav {
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    height: 100%;
    padding: 2rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    width: 80%;
    max-width: 300px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.7);
    overflow-y: auto;
}
.mobile-nav.open {
    transform: translateX(0);
}

/* Mobile Overrides - Top horizontal bar */
@media (max-width: 932px) {
    #main-header {
        width: 100%;
        height: auto;
        min-height: 70px;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }
    
    #main-header .header-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        width: auto;
        margin-bottom: 0;
    }

    #main-header .header-right {
        flex-direction: row;
        gap: 8px; /* Reduced gap for mobile */
        width: auto;
        justify-content: flex-end;
    }

    #main-header h1 {
        display: block;
        margin: 0;
        font-size: 1.2rem;
    }

    .header-logo-link {
        display: flex;
    }
    .header-logo {
        height: 40px;
        width: auto;
        display: block;
    }

    .mobile-nav {
        left: 0;
        right: auto;
        transform: translateX(-100%);
        box-shadow: 2px 0 5px rgba(0,0,0,0.7);
    }
    .hamburger-menu {
        margin: 0; /* Reset for mobile */
    }
}

/* Desktop override for nav panel */
@media (min-width: 933px) {
    .mobile-nav {
        left: auto;
        right: 0;
        transform: translateX(100%); /* Slide from the right on desktop */
        box-shadow: -2px 0 5px rgba(0,0,0,0.7);
    }

    /* Show the desktop-only logo and style it */
    .desktop-only-logo {
        display: block;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        margin-bottom: 20px;
    }
}


/* Hamburger Menu Icon */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    margin: 0; /* Let flexbox handle alignment */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Nav Content Styles */
.nav-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}
.nav-logo {
    max-width: 150px;
    height: auto;
    border-radius: 50%;
}
.mobile-user-info {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1rem;
}
.user-email-mobile {
    display: block;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #fff;
    word-wrap: break-word;
    font-size: 0.9rem;
}
.mobile-nav-link, .mobile-nav-button {
    font-size: 1.1rem;
    padding: 0.75rem 0.5rem;
    font-weight: 500;
    color: #FFF;
    text-decoration: none;
    transition: background-color 0.2s linear;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-nav-link:hover, .mobile-nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.mobile-nav-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 10px 0;
}
.close-nav-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

/* --- END: UNIFIED NAVIGATION STYLES --- */

/* Hide on mobile displays */
@media (max-width: 932px) {
  .scrolling-wait-times {
    display: none !important; /* Use !important to ensure it overrides other display properties */
  }

  /* MODIFIED: Grouping all modal overrides */
  .policy-modal, .settings-modal, .info-modal, .link-modal, .max-videos-modal, .donate-modal, .about-modal, .contact-report-modal, .custom-message-modal {
    padding: 0;
    /* MODIFIED: Fix modal positioning and size on mobile. They must start below the header. */
    top: var(--mobile-header-height); /* Start below the new fixed header */
    height: calc(100% - var(--mobile-header-height)); /* Use remaining screen space */
    align-items: flex-start; /* Align contents to the top of the modal viewport */
  }

  /* This more specific selector ensures mobile styles for modal content are not overridden by desktop styles. */
  .policy-modal .modal-content,
  .settings-modal .modal-content,
  .info-modal .modal-content,
  .link-modal .modal-content,
  .max-videos-modal .modal-content,
  .donate-modal .modal-content,
  .about-modal .modal-content,
  .contact-report-modal .modal-content,
  .custom-message-modal .modal-content {
    background-color: #1e1e1e; /* Add solid background color */
    width: 100%; /* Full width */
    height: 100%; /* Fill the entire modal overlay space */
    max-width: 100%; /* Override desktop max-width */
    max-height: 100%; /* Override desktop max-height */
    margin: 0; /* Remove margin for full screen */
    border-radius: 0; /* Remove border-radius for full screen */
    padding: 15px; /* Keep padding for content inside */
    overflow-y: auto; /* Ensure content scrolls within the modal */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start content from the top */
    box-sizing: border-box; /* Include padding in height/width */
  }

  /* MODIFIED: Explicitly target link-modal content and iframe for correct sizing */
  .link-modal .modal-content {
      /* Need to override default max-height of 80vh set in global modal-content */
      max-height: 100%;
  }

  /* The actual iframe needs to fill all available space within its container */
  #link-modal-iframe {
      flex-grow: 1; /* Allow iframe to take up remaining space */
      width: 100%;
      height: 100%;
      border: none;
      min-height: 200px; /* Ensure a minimum height */
  }

  /* MODIFIED: The main content (container) must start below the single fixed bar */
  .container {
      padding-top: var(--mobile-header-height); /* Add space for the single header */
  }

  /* START: Fullscreen Policy Modal on Mobile */
  /* This modal should still fill the whole screen behind the content, so we keep its layout simple */
  .policy-modal {
      top: 0;
      height: 100%;
  }
  .policy-modal .modal-content {
    background-color: #1e1e1e; /* Also add solid background here */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* NEW: Mobile-specific styles for Policy Modal content */
  .policy-modal .modal-content h2 {
    font-size: 1.2em; /* Reduce font size of the title */
    margin-bottom: 10px; /* Reduce space below title */
  }

  .policy-modal .modal-content p {
    font-size: 0.8em; /* Reduce paragraph font size */
    margin-bottom: 8px; /* Reduce space between paragraphs */
    line-height: 1.4; /* Adjust line height for readability */
  }
  /* END: Fullscreen Policy Modal on Mobile */

  .desktop-only-button {
    display: none !important;
  }

  /* NEW: Hide desktop-only settings on mobile */
  .desktop-only-setting {
    display: none !important;
  }
}

/* Adjust the container to make space for the right panel on desktop */
@media (min-width: 933px) {
  .container {
    width: calc(100vw - var(--right-panel-width)); /* Subtract panel width */
  }
  .desktop-only-button {
    display: flex;
  }
}

.donate-button img {
  height: 20px; /* Adjust as needed */
  margin-right: 10px;
}

/* NEW: Styles for Embedding Disabled Placeholder */
.embedding-disabled-placeholder {
  display: none; /* Hidden by default, shown by JS when embeddable=false */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #282828; /* Slightly darker than default background */
  text-align: center;
  padding: 20px;
  gap: 15px; /* Space between elements */
  color: #ccc;
  font-size: 16px;
}

.embedding-disabled-placeholder .disabled-thumbnail {
  max-width: 90%;
  max-height: 60%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 44px 10px rgba(0, 0, 0, 0.3);
}

.embedding-disabled-placeholder .disabled-text {
  margin: 0;
  padding: 0 10px;
  line-height: 1.4;
}

.embedding-disabled-placeholder .view-on-youtube-btn {
  background-color: #ff0000; /* YouTube red */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.embedding-disabled-placeholder .view-on-youtube-btn:hover {
  background-color: #cc0000;
  transform: translateY(-2px);
}

/* NEW: Styles for No Streams Display */
.no-streams-display {
  display: none; /* Hidden by default */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #121212; /* Match body background */
  color: white;
  text-align: center;
  padding-top: var(--mobile-header-height); /* Space for mobile header */
  padding-bottom: var(--wait-times-bar-height); /* Space for wait times bar */
  box-sizing: border-box; /* Include padding in height calculation */
}

@media (min-width: 933px) {
  .no-streams-display {
    width: calc(100vw - var(--right-panel-width)); /* Adjust for right panel */
    padding-top: 0; /* No mobile header on desktop */
  }
}

.no-streams-message-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
  max-width: 90%;
}

.no-streams-logo {
  max-width: 150px;
  height: auto;
  margin-bottom: 15px;
  border-radius: 50%;
}

.no-streams-text {
  font-size: 1.2em;
  margin: 0;
  line-height: 1.5;
}

.no-streams-hub-section {
  width: 90%;
  max-width: 1200px; /* Limit max width of iframe for better readability */
  height: 60vh; /* Adjust height as needed for the iframe */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex; /* To center the iframe if it doesn't fill the section */
  justify-content: center;
  align-items: center;
}

.no-streams-hub-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* NEW: Loading graphic styles */
.loading-graphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent; /* Changed to transparent */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center;
  align-items: center;
  z-index: 5; /* Below player, above container background */
  transition: opacity 0.3s ease;
}

.loading-graphic.hidden {
  opacity: 0;
  pointer-events: none;
}

/* NEW: Style for the group containing spinner and logo */
.loading-spinner-logo-group {
    display: flex;
    align-items: center; /* Vertically align spinner and logo */
    justify-content: center; /* Horizontally center the group */
    margin-bottom: 15px; /* Space between logo/spinner and text */
    margin-top: -20px; /* Move the group up a little */
}

.loading-graphic img.channel-img {
  width: 100px; /* Set a fixed size for the logo */
  height: 100px; /* Set a fixed size for the logo */
  border-radius: 50%;
  object-fit: contain;
  margin-left: 15px; /* Space between spinner and logo */
}

.loading-graphic .loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ffffff; /* White spinner */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spinlogo 2s linear infinite;
}

@keyframes spinlogo {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}

/* NEW: Styles for the per-video like reminder banner */
.like-reminder-banner {
  position: absolute;
  bottom: -100%; /* Start hidden below the container */
  left: 0;
  width: 100%;
  height: 10%;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 25;
  transition: bottom 0.5s ease-in-out;
  font-size: 14px;
}

.like-reminder-banner.show {
  bottom: 0; /* Slide in from the bottom */
}

.like-reminder-text {
  flex-grow: 1;
  text-align: center;
  margin: 0 15px;
}

.like-reminder-banner .like-reminder-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.like-reminder-banner .like-reminder-button:hover {
  background-color: #0056b3;
}

.like-reminder-banner .like-reminder-close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}

.like-reminder-banner .like-reminder-close-btn:hover {
  color: white;
}


/* NEW: Contact/Report Modal Styles */
.contact-report-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Sit on top */
  z-index: 1001; /* Higher z-index than other modals */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.85); /* Slightly darker overlay */
  animation: fadeIn 0.3s forwards;
}

.contact-report-modal.show {
  display: flex;
}

@media (min-width: 933px) {
  .contact-report-modal {
    justify-content: center;
    align-items: center;
  }
  .contact-report-modal .modal-content {
    background-color: #1e1e1e;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.7);
    position: relative;
    animation: slideIn 0.3s forwards;
    text-align: center;
  }
}

.contact-report-modal .modal-content h2 {
  margin-top: 0;
  color: #fff;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.contact-report-modal .modal-content p {
  margin-bottom: 10px;
  line-height: 1.5;
}

.contact-report-modal .contact-link {
  color: #ADD8E6; /* Light blue for links */
  text-decoration: underline;
  font-weight: bold;
}

.contact-report-modal .close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.contact-report-modal .close-button:hover,
.contact-report-modal .close-button:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* Styles for the new "Contact Me/Report a Problem" button */
.contact-report-btn {
  background-color: #fc5050; /* Darker grey */
  color: rgb(255, 255, 255);
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  width: calc(100% - 30px); /* Adjust width to account for padding of modal-content */
  margin-top: 5px; /* Space above the button */
  margin-left: 15px; /* Align with modal content padding */
  margin-right: 15px; /* Align with modal content padding */
}

.contact-report-btn:hover {
  background-color: #862727; /* Lighter grey on hover */
}

/* Styles for the bug/feature request buttons */
.bug-feature-buttons {
  display: flex;
  flex-direction: column; /* Stack buttons by default on small screens */
  gap: 10px; /* Space between buttons */
  margin-top: 15px;
}