#select_section h2{
    font-size: 20px;
    font-weight: 700;
    margin-top: 40px;
}

#select_gender_container{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    gap: 50px;
}
#select_gender_screen{
    display: none;
}
.gender_btn{
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-direction: column;
    border: none;
    border-radius: 10px;
    padding: 10px;
}

.gender_btn img{
    width: 100px;
    border: none;
}
.gender_btn:hover{
    cursor: pointer;
    background-color: lightblue;
}

.active_gender{
    background-color: lightblue;
    box-shadow: 0px 0pc 5px blue;
}

#start_chat_container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

#start_chat_btn{
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: lightblue;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#start_chat_btn:hover{
    color: blue;
    border: 1px solid blue;
}

#home_section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

#video_sections{
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: row;
}

#video_sections section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50vw;
    height: 78vh;
    border: 1px solid black;
    position: relative;
    overflow: hidden;

}


#camera_notification{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}

#camera_notification button{
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: lightblue;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#camera_notification button:hover{
    color: blue;
    border: 1px solid blue;
}

#identify_gender_screen{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

#identify_gender_screen p{
    width: 80%;
    font-size: 12px;
}

#identify_gender_screen p span{
    font-size: 12px;
    font-weight: 700;
    color: red;
}

#identify_gender_screen img{
    width: 200px;
    border: none;
}

#loading_next_screen{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

#loading_next_screen img{
    width: 50px;
    border: none;
}

#video_random{
    display: none;
}

#video, #video_random {
    width: 100%;
    object-fit: contain;
    transform: scaleX(-1);
}



/* Chat Section */
#chat_section {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Chat Container */
#chat_container {
    width: 90%;
    max-width: 400px;
    height: 100%;
    border: 1px solid lightgray;
    border-radius: 10px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Header */
#chat_header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* Chat Messages */
#chat_messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Message Styles */

.chat_message {
    max-width: 70%;
    padding: 8px;
    border-radius: 10px;
    font-size: 14px;
}

.user_message {
    background: #007bff;
    color: white;
    align-self: flex-end;
}

.stranger_message {
    background: #e0e0e0;
    align-self: flex-start;
}


#chat_and_btns_section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 45vh;
}

#btns_section{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    width: 50vw;
    height: 100%;
    gap: 20px;
}

#btns_section button{
    width: 150px;
    height: 100px;
    border: none;
    border-radius: 20px;
    background: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 3px solid black;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;

}
#btns_section i{
    font-size: 40px;
    color: aqua;
    text-shadow: 1px 1px 1px black;
}
#btns_section button:hover{
    border: 3px solid orange;

}


#chat_section {
    width: 50vw;
    height: 22vh;
    background: white;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    border-left: 1px solid lightgray;
}

#chat_messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

#chat_messages::-webkit-scrollbar {
    width: 5px;
}

#chat_messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

/* Chat bubble styling */
.message {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    word-wrap: break-word;
}

/* Your messages (left-aligned, blue) */
.your-message {
    align-self: flex-end;
    background: #007bff;
    color: white;
    border-top-right-radius: 2px;
}

/* Stranger messages (right-aligned, gray) */
.stranger-message {
    align-self: flex-start;
    background: #e0e0e0;
    color: black;
    border-top-left-radius: 2px;
}

#chat_input_container {
    display: flex;
    align-items: center;
    padding: 10px;
    background: white;
}

#chat_input {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}

#send_btn {
    padding: 10px 15px;
    margin-left: 10px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
}

#send_btn:hover {
    background: #0056b3;
}


@media (max-width: 768px) {



    #video_sections {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 130px;
    }
  
    #video_sections section {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1; /* Makes each section a square */
      border: none;
    }

    #select_gender_screen{
        width: 80vw;
        height: 10vh;
        margin-top: -160px;
    }


    #select_gender_container button{
        margin-top: -2px;
        width: 40vw;
        height: 15vh;
        min-width: 20vw;
    }
    

    #start_chat_btn {
      font-size: 14px;
      padding: 8px 16px;
      margin-top: -25px;
    }

    
  
    #video, #video_random {
      width: 99vw;
      height: 40vh;
      aspect-ratio: 1 / 1; /* Force video to be square */
      object-fit: cover;
    }
    #random_video_section{
        margin-top: -60px;
    }
  
    #select_section h2 {
      font-size: 16px;
      margin-top: 10px;
    }
  
    .gender_btn img {
      width: 80px;
    }
  
  
    #identify_gender_screen img {
      width: 100px;
    }
  
    #loading_next_screen img {
      width: 40px;
    }
  
    #chat_and_btns_section {
      flex-direction: column;
      height: auto;
    }
  
    #btns_section {
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      height: auto;
      margin-top: -20px;
    }
  
    #btns_section {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    #btns_section button {
        position: relative;
        z-index: 11;
    }
    
    #btns_section button {
      width: 80px;
      height: 60px;
      font-size: 14px;
      margin-top: -40px;
      gap: 0px;
      -webkit-tap-highlight-color: transparent;
    }
    #btns_section button i {
      font-size: 20px;
    }
    #btns_section button span {
        font-size: 12px;
    }

    #btns_section button:hover {
      border: 3px solid black;
    }
  
    #chat_section {
      width: 100%;
      height: 20vh;
      margin-top: 10px;
    }
  
    #chat_container {
      width: 100%;
      height: 100%;
    }
  
    .message {
      font-size: 12px;
      max-width: 90%;
    }
  
    #chat_input {
      font-size: 12px;
    }
  
    #send_btn {
      font-size: 12px;
      padding: 8px 12px;
    }
  }
  
/* gpt generated */
#btns_section {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#btns_section button {
    position: relative;
    z-index: 11;
    font-size: 14px;
    font-weight: 600; /* Bold text for a more modern feel */
    background-color: #3498db; /* Modern blue */
    color: #fff;
    border: none;
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#btns_section button i {
    font-size: 20px;
    margin-right: 10px; /* Spacing between icon and text */
}

#btns_section button span {
    font-size: 12px;
    font-weight: 500; /* Slightly lighter text */
}

#btns_section button:hover {
    background-color: #34495e; /* Slightly lighter gray on hover */
    transform: translateY(-4px); /* Lifting effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
}

#btns_section button:active {
    transform: translateY(2px); /* Button presses down when clicked */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Reduced shadow when active */
}

#btns_section button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.6); /* Outline on focus */
}