:root {

    --whatsapp-green: #25D366;

    --whatsapp-dark-green: #128C7E;

    --whatsapp-chat-bg: #000;
    --teal-light:#20c997;
}
.avatar-container{
    margin: 2vh;
    
}
body{
    background-color: var(--whatsapp-chat-bg);
    
}

*{
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
}
.avatar-container{
    margin: 0;padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* Ensure proper box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

.threeContainer{
     height: 55%;
     padding: 0px;
/*     width: 30vh;*/
}
#videoStreaming{
    width:100%;
    margin-left:10px;
    object-fit: contain; /* Ensure video shows completely without cropping */
    background: black;
}
.threeContainer canvas{
    width: 100%;
}
.whatsapp-container{
    padding: 0px;
}
.whatsapp-chat-container {

    width: 100%;
    height: 100vh;

    background-color: var(--whatsapp-chat-bg);

    display: flex;

    flex-direction: column;

}



/* Chat Header */

.chat-header {

/*    background-color: var(--whatsapp-dark-green);*/
     background: linear-gradient(180deg, rgba(251, 63, 207, 0.6320728975183824) 1%, rgba(251, 63, 207, 0.6992997882746849) 6%, rgba(114, 70, 252, 0.9878151944371498) 79%);

    color: white;
    margin-top:10px;
    padding: 10px 15px;
    display: flex;

    justify-content: space-between;

    align-items: center;

}


.user-info {

    display: flex;
    align-items: center;
    gap: 15px;

}


.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #fff;

}


.user-details h2 {

    margin: 0;
  color:#fff;
    font-size: 16px;

}


.online-status {

    font-size: 12px;

    opacity: 0.8;

}


.header-icon {

    color: white;

    background: none;

    border: none;

    padding: 8px;

    font-size: 18px;

}


/* Chat Messages */

.chat-messages {

    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    height: 70vh;

}


.message {

    max-width: 70%;

    padding: 8px;

    border-radius: 7.5px;

    position: relative;

}


.message.received {

    background-color: white;

    align-self: flex-start;

    border-bottom-left-radius: 2px;

}


.message.sent {

    background-color: #DCF8C6;

    align-self: flex-end;

    border-bottom-right-radius: 2px;

}


.message-content p {

    margin: 0;

    font-size: 14px;

    color: #111;

}


.timestamp {

    font-size: 10px;

    color: #667781;

    float: right;

    margin-left: 10px;

    margin-top: 2px;

}


.status-indicator {

    position: absolute;

    bottom: 4px;

    right: 8px;

    font-size: 12px;

    color: #4fc3f7;

}


/* Chat Input */

.chat-input {

    background-color: #f0f0f0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;

}


.input-icon {

    background: none;

    border: none;

    color: #667781;

    font-size: 20px;

    padding: 5px;

}


#userAnswerInput {

    flex: 1;

    padding: 10px 15px;

    border: none;

    border-radius: 5px;

    background-color: white;

    font-size: 14px;
 resize: none;
}

#SubmitAnswerButton{
    font-size: 20px;
    padding: 1px 5px;
}
#SubmitAnswerButton:hover{
    background-color: var(--teal-light);

}



.send-button {

    background-color: var(--whatsapp-green);

    border: none;

    color: white;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}
#startBtn,#stopRecording{
/*    color: black;*/
   
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 8px;
    font-weight: bold;
    margin: 4px;
}
/*.pink-back{
     background-color: #e83e8c;
}*/

.mic-icon {
/*  font-size: 40px;*/
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}


.mic-icon.recording {
  animation: pulse 1s infinite;
  color: #e83e8c;
}
.edit-box i{
    font-size: 10px;
    transition: transform  ease-in-out;
}
.edit-box i:hover{
font-size: 13px;
}
.buttonload {
/*  background-color: #04AA6D; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 8px 12px; /* Some padding */
  font-size: 16px /* Set a font size */
}
.displayNone{
    display: none;
}

#viewResume{
padding: 20px 7px !important;
font-size: 10px;
margin:auto;

}
#viewResumeDiv{
    display: flex;
    font-size: 10px !important;
    padding: 2px !important;


}
#viewResumeDiv label{
    font-size: 10px !important;

}
#viewResumeDiv input{
    font-size: 10px !important;
    padding:1px !important;
    
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}



/* Responsive Design */

@media (max-width: 768px) {
    .avatar-container {
        flex-direction: column !important;
        height: 100vh;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Top section for camera and interviewer (25% height for better visibility) */
    .col-md-4 {
        height: 25% !important;
        max-height: 25vh;
        flex: none !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .threeContainer {
        height: 100% !important;
        width: 50% !important;
        padding: 2px !important;
    }
    
    .threeContainer canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Changed from cover to contain to show full video */
    }
    
    /* Video streaming container - Fixed to show complete video */
    div[style*="background: black"] {
        height: 100% !important;
        width: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #videoStreaming {
        width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        object-fit: contain !important; /* Changed from cover to contain to show complete video */
        background: black;
    }
    
    /* Chat container (75% height) */
    .col-md-8 {
        height: 75% !important;
        max-height: 75vh;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .whatsapp-chat-container {
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }
    
    .chat-messages {
        height: calc(100% - 100px) !important; /* Increased space for input area */
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        margin-bottom: 0 !important;
    }
    
    .chat-input {
        height: 100px !important; /* Increased height to ensure send button is visible */
        flex-shrink: 0;
        padding: 15px 10px !important; /* Increased padding */
        background-color: #f0f0f0;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        position: relative;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .message {
        max-width: 85%;
        font-size: 13px;
    }
    
    #userAnswerInput {
        font-size: 14px;
        padding: 12px 15px !important; /* Increased padding for better touch targets */
        min-height: 45px !important;
        flex: 1;
    }
    
    /* Ensure all buttons are visible and properly sized */
    #generateQts, #SubmitAnswerButton, #startBtn {
        min-height: 45px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }
    
    /* Stop button positioning for mobile */
    #stopInterviewBtn {
        top: 10px !important;
        right: 10px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        z-index: 9999 !important;
    }
    
    /* Mic popup positioning */
    #micPopup {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 15px 20px;
        border-radius: 10px;
        font-size: 16px;
        max-width: 90%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .avatar-container {
        height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .col-md-4 {
        height: 25% !important;
        padding: 3px !important;
        margin: 0 !important;
    }
    
    .col-md-8 {
        height: 75% !important;
        margin: 0 !important;
    }
    
    .message {
        max-width: 90%;
        font-size: 12px;
    }
    
    .chat-input {
        height: 90px !important; /* Even more height for very small screens */
        padding: 12px 8px !important;
        flex-wrap: nowrap !important;
    }
    
    #userAnswerInput {
        font-size: 14px;
        padding: 10px 12px !important;
        min-height: 40px !important;
    }
    
    .chat-messages {
        padding: 8px;
        height: calc(100% - 90px) !important;
    }
    
    /* Ensure buttons are properly sized for small screens */
    #generateQts, #SubmitAnswerButton, #startBtn {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* Additional fix for landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .col-md-4 {
        height: 35% !important;
        max-height: 35vh;
    }
    
    .col-md-8 {
        height: 65% !important;
        max-height: 65vh;
    }
    
    .chat-input {
        height: 80px !important;
        padding: 10px !important;
    }
    
    .chat-messages {
        height: calc(100% - 80px) !important;
    }
}