/* General styling */
* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1E1E2E; /* Dark background for the theme */
    color: #D9E0EE; /* Primary text color for readability */
}

#login-container {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    padding: 20px;
    gap: 10px;
}

/* Container styling */
#appContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
#username-input {
    display: flex;
    text-align: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    color: #D9E0EE;
    border: 3px solid #4C4B62;
    border-radius: 8px;
    background-color: #2A2A37; /* Consistent dark background */
}

#login-btn {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #F5E3B5; /* Light yellow for buttons */
}
#login-btn:hover{
    background-color: #E0CDA2; 
}

h1 {
    text-align: center;
    color: #F5E3B5; /* Light yellow for headings */
    background-color: #2A2A37;
    border: 3px solid #4C4B62;
    border-radius: 8px;
}

.title {
    display: flex;
    align-items: flex-start;
    color: #F5E3B5; /* Light yellow for headings */
    background-color: #2A2A37;
    border: 3px solid #4C4B62;
    border-radius: 8px;
    min-height: 70px;
    max-height: 80px;
    margin: 0;
    padding: 0;
    position: relative;
}


.title-text {
    display: flex; /* Use flexbox for the title text */
    flex-direction: column; /* Stack title and small text vertically */
    margin-left: 60px;
    margin-top: 5px;
    padding:0;
}

.loginTitle {
    display: flex; /* Use flexbox for the title text */
    flex-direction: column; /* Stack title and small text vertically */
    padding:10px;
}

.title img {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;  /* Set your desired width */
    height: 50px; /* Set your desired height */
    margin-right: 10px;
}

h2 {
    text-align: center;
    color: #F5E3B5; /* Light yellow for headings */
    margin: 0;
    padding-bottom: 3px;
}

h3 {
    color: #F5E3B5; /* Light yellow for headings */
    margin: 0;
    padding: 3px;
}

.small-text {
    font-size: 0.45em; /* Adjust this value for smaller text */
    color: #4C4B62; /* Optional: Change the color if needed */
    margin-bottom: 20px;
}

#colorPicker {
    display: flex;
    background-color: #F5E3B5;
    border:none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
}

/* Main content area */
#mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin:0;
    padding:0;
    gap: 5px;
}

#mainContent > .columns-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 5px;
    min-height: 0; /* Important for proper flex behavior */
}

/* Control bar at bottom */
.control-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    background-color: #2A2A37;
    border: 3px solid #4C4B62;
    border-radius: 8px;
    min-height: 50px;
    margin-bottom: 5px;
}

/* Control bar elements styling */
.control-bar input,
.control-bar button {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #4C4B62;
    color: #D9E0EE;
}

.control-bar button {
    background-color: #F5E3B5;
    color: #3C2A2A;
    cursor: pointer;
}

.control-bar button:hover {
    background-color: #E0CDA2;
}

.playlist-controls button {
    background-color: #f5e3B5;
    color: #3C2A2A;
    cursor: pointer;
    padding: 5px;
    border: none;
    border-radius: 4px;
}

.playlist-controls button:hover {
    background-color: #E0CDA2;
}

#resize-bar {
    cursor: ew-resize;
    background-color: #E0CDA2;;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 65%;
    z-index: 10;
}

/* Chat container layout */
#chatContainer {
    float: left;
    flex: 0.8;
    display: flex;
    flex-direction: column;
    min-width: 275px;
    max-width: 440px;
    border: 3px solid #4C4B62;
    background-color: #2A2A37;
    border-radius: 8px;
    padding: 5px;
    height: auto;
}

#messageContainer {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: hidden ;
   /* color: #D9E0EE;*/
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  
  #messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
  }
  
  #messages li {
    display: block;
    /*background-color: #4C4B62;*/
    color: #D9E0EE;
    /* Text wrapping properties */
    word-wrap: break-word;      /* Allows breaking of long words */
    overflow-wrap: break-word;  /* Modern version of word-wrap */
    word-break: break-word;     /* Prevents overflow by breaking words when necessary */
    /* Width constraints */
    width: calc(100% );  /* Full width minus padding */
    max-width: 100%;
    min-width: 0;              /* Allows flex items to shrink below content size */
    position: relative;
  }

  .message-content:hover {
    background-color: #4c4b628e;
  }
  

/* Create a header line for username and timestamp */
/*#messages li > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Changed to flex-start */
/*    align-items: center;
    width: 100%;
    margin-top: 5px;
}*/

  /* If you have message content in a separate element inside the li */
  .message-content {
    display: flex;
    padding-left: 10px;
    padding-right: 2px;
    min-width: 0;  /* Allows text to wrap within flex container */
    border-left: 3px solid rgb(129, 129, 129);
    font-size: 0.85em;
  }

  .timestamp {
    display: inline-block;
    font-size: 0.7em;
    color: #B0BEC5;
    background-color: #4c4b62c3;
    padding: 0 10px;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 5px; /* Align with the top margin of the first div */
}

.user-timestamp {
    display: none;
    position: absolute;
    font-size: 0.5em;
    color: #B0BEC5; /* Muted grey for timestamps */
    background-color:  #4c4b62c3;
    padding: 0 10px;
    right: 0;
    top: 5px;
}

/* Show timestamp on hover */
li:hover .user-timestamp {
    display: inline-block;
    position: absolute;
}

.chat-user {
    font-weight: bold;
    color: #F5E3B5;
    display: inline-block; /* Changed to inline-block */
}

/* Username text styling */
.user-color {
    color: inherit;
    margin-right: 10px;  /* Add space between username and timestamp */
}

/* Form styling */
#form {
    display: flex;
    padding: 10px;
    border-top: 3px solid #4C4B62; /* Muted purple for top border */
    background-color: #2A2A37; /* Consistent dark background */
}

#videoForm {
    display: flex;
    padding: 10px;
    border-top: 3px solid #4C4B62; /* Muted purple for top border */
    background-color: #2A2A37; /* Consistent dark background */
    max-height: 53px;
}

#videoForm input {
    flex: 1;
    padding: 10px;
    border: none;
    min-width: 50px;
    border-radius: 4px;
    background-color: #4C4B62; /* Muted purple for input background */
    color: #D9E0EE; /* Primary text color */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

#videoForm button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #F5E3B5; /* Light yellow for buttons */
    color: #3C2A2A; /* Dark brown for button text */
    cursor: pointer;
    margin-left: 5px;
    max-width: 45px;
}

.video-container.speaking {
    border-color: #4CAF50;
    box-shadow: 0 0 10px #4CAF50;
  }

#form input {
    flex: 1;
    padding: 10px;
    min-width: 80px;
    border: none;
    border-radius: 4px;
    background-color: #4C4B62; /* Muted purple for input background */
    color: #D9E0EE; /* Primary text color */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

#form button {
    border: none;
    border-radius: 4px;
    background-color: #F5E3B5; /* Light yellow for buttons */
    color: #3C2A2A; /* Dark brown for button text */
    cursor: pointer;
    padding: 10px;
    margin-left: 8px;
}

#form button:hover {
    background-color: #E0CDA2; /* Slightly darker yellow on hover */
}

/* Video container */
#videoPlaylistContainer {
    flex: 3;
    display: flex;
    border: 3px solid #4C4B62;
    background-color: #2A2A37;
    border-radius: 8px;
    padding: 10px;
    min-width: 400px;
    height: auto;
    overflow: hidden;
}

#playerContainer {
    position: relative;
    max-width: 638px;
    max-height: 359px;
    /*border: 3px solid #4C4B62; 
    border-radius:  8px; */
}

#player {
    position: relative;
    height: 100%;
    width: 100%; /* Make the player fill the container */
    aspect-ratio: 16/9;
    border: 3px solid #4C4B62; /* Muted purple for borders */
    border-radius:  8px;
}

#loadVideo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:  #F5E3B5;
}

#loadVideo:hover {
    background-color: #E0CDA2;
}

#playlistContainer {
    flex: 0.5;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 275px;;
    background-color: #2A2A37;
    border: 3px solid #4C4B62;
    border-radius: 8px;
    padding: 5px;
    height: auto;
}

#playlist {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    background-color: #2A2A37; /* Consistent dark background */
    border: 2px solid #4C4B62; /* Muted purple for borders */
    border-radius: 8px;
    min-height: 300px;
    max-height:  100%;
    overflow-y: auto;
    color: #D9E0EE; /* Primary text color */
}

#playlist li {
    padding: 5px 10px;
    border-bottom: 1px solid #4C4B62; /* Muted purple for item separators */
    color: #D9E0EE; /* Primary text color */
}

#playlist li:last-child {
    border-bottom: none;
}

/* User list styling */
#userListContainer {
    flex: 0.3;
    display: flex;
    flex-direction: column;
    background-color: #2A2A37;
    border: 2px solid #4C4B62;
    border-radius: 8px;
    padding: 10px;
    min-width: 150px;
    max-width: 200px;
    height: auto;
}

#userListHeader {
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
    padding:5px;
    color: #F5E3B5; /* Light yellow for headers */
    border-bottom: 2px solid #F5E3B5; /* Muted purple for item separators */
}

#userList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 100%;
}

#userList li {
    padding: 5px;
    border-bottom: 1px solid #4C4B62; /* Muted purple for item separators */
    color: #D9E0EE; /* Primary text color */
}

#userList li:last-child {
    border-bottom: none;
}

/* Footer styling */
#footer {
    text-align: center;
    padding: 5px;
    background-color: #1E1E2E; /* Dark background for footer */
    color: #B0BEC5; /* Muted grey for footer text */
    font-size: 0.75em;
    border-top: 1px solid #4C4B62; /* Muted purple for footer border */
}

#videoGridContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2px;
    min-height: 0; /* Important for proper flex behavior */
}

#togglePlaylist {
    display: flex;
    padding: 9px;
    justify-content: center;
    align-items: center;
}

#togglePlaylist  img{
    width: 18px;
}

/* Video grid layout */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 0.34fr));
    gap: 0.2rem;
    padding: 1rem;
    background: #1a1a1a00;
    border-radius: 8px;
}

/* Video container styling */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 638px;
    max-height: 359px;
    aspect-ratio: 16/9;
    background: #000;
    border: 2px solid #4C4B62;
    border-radius: 8px;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

.video-container.speaking {
    border: 2px solid #4CAF50;
    border-color: #4CAF50;
    box-shadow: 0 0 10px #4CAF50;
}

/* Video label styling */
.video-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.37);
    color: white;
    font-size: 0.875rem;
}

/* Video controls styling */
.video-controls {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #2a2a2a;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.video-control-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background: #4a4a4a;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.video-control-btn:hover:not(:disabled) {
    background: #5a5a5a;
}

.video-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.control-button:hover:not(:disabled) {
    background: #5a5a5a;
}

.control-buttton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-message {
    padding: 5px 5px;
    margin: 0;
    background-color: #373746b2;
    border-radius: 4px;
    font-style: italic;
    font-size: 0.8em;
    color: #666666c7;
    position: relative;      /* Required for positioning the timestamp */
    text-align: center;
}

.system-message .system-text {
    display: inline-block;
    text-align: center;       /* Ensure text is left-aligned inside the block */
    margin: 0 auto;         /* Center the text inside the container */
    color: #666666c7;
}

.system-message .timestamp {
    display: none;
    font-size: 0.5em;
    color: #aaa;
    position: absolute;      /* Position timestamp absolutely within parent */
    right: 10px;             /* Align it to the far right */
    bottom: 5px;             /* Align it to the bottom of the message */
}

/* Show timestamp on hover */
li:hover .system-message .timestamp {
    display: list-item;
}

#player iframe {
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disable pointer events on iframe */
    z-index: 1;
  }

#custom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:flex-end;
    text-align: center;
    padding:0;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    color: rgb(145, 255, 2);
    opacity: 0; /* Hidden initially */
    transition: opacity 0.3s ease; /* Smooth fade-in on hover */
    pointer-events: none; /* Prevent overlay from blocking iframe */
    z-index: 50; /* Ensure overlay appears above iframe */
    border:none;
    border-radius: 8px;
  }

  #playerContainer:hover .overlay {
    opacity: 1; /* Show overlay on hover */
    pointer-events: auto; /* Enable interactions when overlay is visible */
  }

  .video-js {
    /* Reset the video player to default styles */
    all: unset; /* Removes all styles, including margin, padding, etc. */
    position: relative; /* Ensure positioning is maintained */
    display: block; /* Use block display */
    width: 100%; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
}

/* Remove specific styles */
.video-js .vjs-controls {
    display: none !important; /* Hides the default controls */
}

.video-js .vjs-tech {
    width: 100% !important; /* Forces video tech width */
    height: auto !important; /* Forces video tech height */
}

/* Custom player styling */
.video-js {
    background-color: #000;
}

.video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Ensure iframe doesn't show YouTube UI */
.video-js iframe {
    border: none;
}

.volume-control {
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 4px;
    color: rgb(145, 255, 2);
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 0;
}

#videoFrame {
    display: flex;
    min-width: 0;
    width: 250px;
    height: 357px;
}

#discordIframe {
    border: 2px solid #4C4B62;
    border-radius: 8px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: 3px;
}

.input-wrapper {
    display: flex;
    position: relative;
    width: 100%;  /* Adjust the width as needed */
  }
  
#emoji-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background:none !important;
    background-color: #4c4b6200 !important;
    border: none;
    border-radius: 4px;
    padding: 5px 5px;
}

#emojiPicker {
    position: absolute;
    bottom: 140px;
    right: 240px;
    display: flex;
    flex-wrap: wrap;
    min-width: 150px;
    min-height: 55px;
    max-width: 250px;
    max-height: 200px;
    overflow-y: auto;
    background: #2a2a37b1;
    border: 2px solid #4C4B62;
    border-radius: 8px;
    padding: 8px;
    gap: 5px;
    z-index: 1000;
}

.emoji-picker img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

#emojiContainer {
    display: grid;
    grid-template-columns: repeat(5, 30px);
    gap: 10px;
  }
  
  .emoji {
    cursor: pointer;
    font-size: 20px;
  }

.hidden {
    display: none;
}