@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif;
}
body{
  display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f7f7f7; padding: 0 10px;
}
.wrapper{
  background: #fff; max-width: 450px; width: 100%; border-radius: 16px; box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), 0 32px 64px -48px rgba(0,0,0,0.5);
}
/* Forms CSS */
.form{ padding: 25px 30px; }
.form header{ font-size: 25px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; }
.form form{ margin: 20px 0; }
.form form .error-text{
  color: #721c24; background: #f8d7da; padding: 8px 10px; text-align: center; border-radius: 5px; margin-bottom: 10px; border: 1px solid #f5c6cb; display: none;
}
.form form .field{ display: flex; margin-bottom: 10px; flex-direction: column; position: relative; }
.form form .field label{ margin-bottom: 2px; }
.form form .input input{
  height: 40px; width: 100%; font-size: 16px; padding: 0 10px; border-radius: 5px; border: 1px solid #ccc;
}
.form form .image input{ font-size: 14px; }
.form form .button input{
  height: 45px; border: none; color: #fff; font-size: 17px; background: #333; border-radius: 5px; cursor: pointer; margin-top: 13px;
}
.form .link{ text-align: center; margin: 10px 0; font-size: 16px; }
.form .link a{ color: #333; }
.form .link a:hover{ text-decoration: underline; }

/* OTP Specific Styles */
.otp-input {
    letter-spacing: 12px; font-size: 24px; font-weight: bold; text-align: center;
	
	
}



.file-label {
    font-size: 20px;
    color: #555;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
.chat-media-content {
    max-width: 100%;
    max-height: 250px;
    border-radius: 10px;
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}
.outgoing .details p {
    background: #333;
    color: #fff;
    border-radius: 18px 18px 0 18px;
}
.incoming .details p {
    background: #fff;
    color: #333;
    border-radius: 18px 18px 18px 0;
}
/* Ensure the chat-box can fit images */
.chat-box .details {
    max-width: 70%;
}






/* Users List CSS */
.users{ padding: 25px 30px; }
.users header, .users-list a{
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #e6e6e6; padding-bottom: 20px;
}
.wrapper img{ object-fit: cover; border-radius: 50%; }
.users header .content{ display: flex; align-items: center; }
.users header .content img{ height: 50px; width: 50px; }
.users header .details{ margin-left: 15px; }
.users header .details span{ font-size: 18px; font-weight: 500; }
.users header .logout{
  background: #333; color: #fff; padding: 7px 15px; border-radius: 5px; font-size: 17px;
}
.users .search{ margin: 20px 0; display: flex; position: relative; align-items: center; justify-content: space-between; }
.users .search .text{ font-size: 18px; }
.users .search input{
  position: absolute; height: 42px; width: calc(100% - 50px); border: 1px solid #ccc;
  padding: 0 13px; font-size: 16px; border-radius: 5px 0 0 5px; opacity: 0; pointer-events: none; transition: all 0.2s ease;
}
.users .search input.show{ opacity: 1; pointer-events: auto; }
.users .search button{
  width: 47px; height: 42px; border: none; outline: none; color: #333;
  background: #fff; cursor: pointer; font-size: 17px; border-radius: 0 5px 5px 0; transition: all 0.2s ease;
}
.users .search button.active{ background: #333; color: #fff; }
.users-list{ max-height: 350px; overflow-y: auto; }
.users-list a{ margin-bottom: 15px; padding-right: 15px; border-bottom: none; }
.users-list a .content img{ height: 40px; width: 40px; }
.users-list a .details p{ color: #67676a; }
.users-list a .status-dot{ font-size: 12px; color: #468669; }
.users-list a .status-dot.offline{ color: #ccc; }





/* Chat Area CSS */
.chat-area header{ display: flex; align-items: center; padding: 18px 30px; }
.chat-area header .back-icon{ color: #333; font-size: 18px; }
.chat-area header img{ height: 45px; width: 45px; margin: 0 15px; }
.chat-area header span{ font-size: 17px; font-weight: 500; }
.chat-box{
  position: relative; height: 500px; overflow-y: auto; padding: 10px 30px 20px 30px;
  background: #f7f7f7; box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .chat{ margin: 15px 0; }
.chat-box .chat p{ word-wrap: break-word; padding: 8px 16px; box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%); }
.chat-box .outgoing{ display: flex; }
.chat-box .outgoing .details{ margin-left: auto; max-width: calc(100% - 130px); }
.outgoing .details p{ background: #333; color: #fff; border-radius: 18px 18px 0 18px; }
.chat-box .incoming{ display: flex; align-items: flex-end; }
.chat-box .incoming img{ height: 35px; width: 35px; }
.chat-box .incoming .details{ margin-left: 10px; margin-right: auto; max-width: calc(100% - 130px); }
.incoming .details p{ background: #fff; color: #333; border-radius: 18px 18px 18px 0; }
.typing-area{ padding: 18px 30px; display: flex; justify-content: space-between; }
.typing-area input{ height: 45px; width: calc(100% - 58px); font-size: 16px; padding: 0 13px; border: 1px solid #e6e6e6; outline: none; border-radius: 5px 0 0 5px; }
.typing-area button{
  color: #fff; width: 55px; border: none; outline: none; background: #333; font-size: 19px;
  cursor: pointer; opacity: 0.7; pointer-events: none; border-radius: 0 5px 5px 0; transition: all 0.3s ease;
}
.typing-area button.active{ opacity: 1; pointer-events: auto; }







.typing-area .file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
    cursor: pointer;
    margin-right: 5px;
}

.typing-area .file-label i {
    font-size: 20px;
    color: #707070;
    transition: all 0.3s ease;
}

.typing-area .file-label i:hover {
    color: #333;
}


.typing-area button {
    opacity: 0.5; /* Look disabled by default */
    pointer-events: none; /* Actually disable click */
}

.typing-area button.active {
    opacity: 1;
    pointer-events: auto; /* Enable click when active class is added */
}


/* This makes the images look like real chat bubbles */
.chat-media-content {
    width: 100%;
    max-width: 230px; 
    min-width: 160px;
    border-radius: 10px;
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

/* Styles for the Zoom View */
.modal {
    display: none; 
    position: fixed; 
    z-index: 999; 
    left: 0; top: 0;
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.9);
    align-items: center; 
    justify-content: center;
}
.modal-content { 
    max-width: 90%; 
    max-height: 80%; 
    border-radius: 10px; 
}
.close-modal { 
    position: absolute; 
    top: 20px; right: 35px; 
    color: #fff; font-size: 40px; 
    cursor: pointer; 
}


.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.8);
    justify-content: center; align-items: center;
}
.modal-content {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
}
.close-modal {
    position: absolute; top: 30px; right: 40px;
    color: white; font-size: 40px; cursor: pointer;
}


/* Hide trash icon by default */
.chat.outgoing .details p .delete-msg {
    display: none;
    transition: 0.2s;
}

/* Show trash icon when hovering over the message bubble */
.chat.outgoing .details:hover .delete-msg {
    display: inline-block;
}





.unread-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}




.chat-time {
    display: block;
    font-size: 8px;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
}

.incoming .chat-time {
    color: #555;
}

.outgoing .chat-time {
    color: #fff;
    text-align: right;
}

/* Adjust the paragraph to fit time and icons */
.chat p {
    word-wrap: break-word;
    position: relative;
    padding-bottom: 15px; /* Space for the time at the bottom */
}




.chat-day-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    position: relative;
}

.chat-day-separator span {
    background: #f1f1f1; /* Light grey background */
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    color: #777;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Optional: Add a subtle line behind the date */
.chat-day-separator::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #eee;
    z-index: 0;
}

.chat-day-separator span {
    z-index: 1; /* Keep text above the line */
}