/* Chat Modal Sidebar */
 #chatModal {
     position: fixed;
     bottom: 0;
     right: 20px;
     width: 300px;
     height: 60px;
     background: white;
     border: 1px solid #ccc;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
     transition: height 0.3s ease;
     overflow: hidden;
     z-index: 999;
     transition: height 0.3s ease, width 0.3s ease, right 0.3s ease;
 }

 /* Responsive: full width on small screens */
 @media (max-width: 576px) {
     #chatModal {
         width: 100%;
         left: 50%;
         right: auto;
         align-items: center;
         right: 0;
         border-radius: 0;
         transform: translateX(-50%);
     }
 }

 #chatModal.expanded {
     height: 400px;
 }

 .chatModalHeader {
     background: #0073b1;
     color: white;
     padding: 8px 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
 }

 .chatModalHeader img {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     margin-right: 10px;
 }

 .chatModalTitle {
     display: flex;
     align-items: center;
     font-weight: bold;
     font-size: 15px;
 }

 .chatModalControls span {
     cursor: pointer;
     margin-left: 10px;
     font-size: 18px;
 }

 #connectionList {
     list-style: none;
     padding: 0;
     margin: 0;
     max-height: 340px;
     background: #fff;
 }

 #connectionList li {
     padding: 10px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
 }

 #connectionList li:hover {
     background-color: #f1f1f1;
 }

 /* Chat Popup */
 .chatPopup {
     position: fixed;
     bottom: 0;
     right: 330px;
     width: 320px;
     height: 420px;
     background: #fff;
     border: 1px solid #ccc;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
     z-index: 1050;
 }

 .chatPopupHeader {
     background: #0073b1;
     color: white;
     padding: 10px;
     font-weight: bold;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     /* prevent collapse */
     z-index: 1060;
 }

 .chatMessages {
     flex-grow: 1;
     padding: 10px;
     overflow-y: auto;
     background: #f9f9f9;
     font-size: 14px;
 }

 /* Responsive for small screens */
 @media (max-width: 576px) {
     .chatPopup {
         width: 100vw;
         max-width: 100vw;
         height: 90vh;
         max-height: 100vh;
         margin: 0 auto;
         overflow: hidden;
         right: auto !important;
         bottom: 0;
         border-radius: 0;
         display: flex;
         flex-direction: column;
     }

     .chatPopupHeader {
         position: fixed;
         top: 56px;
         /* Adjust this based on your navbar height */
         width: 100%;
         background: #0073b1;
         z-index: 1060;
         /* Ensure above navbar */
     }

     .chatMessages {
         margin-top: 56px;
         overflow-y: auto;
         flex-grow: 1;
     }

     .chatInputContainer {
         position: relative;
         width: 100%;
         flex-shrink: 0;
     }
 }

 .chatInput {
     flex-grow: 1;
     padding: 8px;
     font-size: 14px;
 }

 .chatInput::placeholder {
     font-size: 0.85rem;
     /* Or use 12px, etc. */
     color: #999;
     /* Optional: change placeholder color */
 }

 .newChatInput {
     flex-grow: 1;
     padding: 8px;
     font-size: 14px;
 }

 .newChatInput::placeholder {
     font-size: 0.85rem;
     /* Or use 12px, etc. */
     color: #999;
     /* Optional: change placeholder color */
 }


 .chatSendBtn {
     background: #0073b1;
     color: white;
     border: none;
     padding: 8px 12px;
     margin-left: 8px;
     border-radius: 4px;
     cursor: pointer;
 }

 .chat-modal-container {
     width: 400px;
     max-height: 90vh;
     z-index: 1050;
 }

 @media (max-width: 768px) {
     .chat-modal-container {
         width: 100%;
         height: 100%;
         border-radius: 0;
         bottom: 0;
         right: 0;
     }

     #connectionList {
         max-height: calc(100vh - 150px);
     }
 }

 .message-bubble {
     word-wrap: break-word;
     width: 100%;
     max-width: 100%;
     background-color: #f8f9fa;
     border: none;
     transition: background-color 0.2s ease;
     box-sizing: border-box;
 }

 .message-bubble:hover {
     background-color: #f4f8fd;
     cursor: pointer;
 }

 .chatPopupBack {
     font-size: 20px;
     color: white;
 }

 /*Stylesheet for Messaging page*/
 /* Container holding sidebar and chat */
 .messaging-container {
     height: 80vh;
     min-height: 400px;
     display: flex;
     flex-direction: column;
     border: 1px solid #ddd;
     border-radius: 6px;
     overflow: hidden;
     background: white;
 }

 /* Header for sidebar */
 .messaging-header {
     background-color: #0073b1;
     color: white;
     padding: 16px;
     font-size: 15px;
     font-weight: 600;
     user-select: none;
     border-bottom: 1px solid #005582;
 }

 /* Search input container */
 .messaging-search {
     padding: 10px 16px;
     border-bottom: 1px solid #ddd;
 }

 /* Search input */
 .messaging-search input {
     width: 100%;
     padding: 8px 12px;
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }

 /* Sidebar (connections list) */
 .messaging-sidebar {
     width: 100%;
     max-height: 250px;
     overflow-y: auto;
     background-color: #f8f9fa;
     /* light background */
     border-bottom: 1px solid #ddd;
 }

 /* Responsive for medium+ screens */
 @media (min-width: 768px) {
     .messaging-container {
         flex-direction: row;
     }

     .messaging-sidebar {
         width: 300px;
         max-height: none;
         border-right: 1px solid #ddd;
         border-bottom: none;
     }

     .connection-list {
         max-height: calc(80vh - 112px);
     }
 }

 /* List inside sidebar */
 .connection-list {
     list-style: none;
     margin: 0;
     padding: 0 0 10px 0;
     max-height: calc(80vh - 120px);
     /* leave space for header + search */
     overflow-y: auto;
 }

 /* Each connection item */
 .connection-list li {
     padding: 12px 16px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     transition: background-color 0.15s ease-in-out;
 }

 /* Hover effect */
 .connection-list li:hover {
     background-color: #e6e6e6;
 }

 /* Chat section */
 .messaging-chat {
     height: 100%;
     flex-grow: 1;
     min-width: 0;
     /* Fix flex overflow issues */
     display: flex;
     flex-direction: column;
     background-color: white;
 }

 /* Chat header */
 .chat-header {
     background-color: #f1f3f5;
     border-bottom: 1px solid #ddd;
     padding: 16px;
     font-weight: 600;
     font-size: 16px;
     user-select: none;
 }

 /* Chat messages container */
 .chat-messages {
     flex-grow: 1;
     padding: 16px;
     overflow-y: auto;
     background-color: #fafafa;
     font-size: 14px;
     line-height: 1.4;
     white-space: pre-wrap;
     /* keep line breaks */
 }

 /* Chat input area */
 .chat-input-container {
     display: flex;
     padding: 12px 16px;
     border-top: 1px solid #ccc;
     align-items: flex-end;
     gap: 10px;
     background-color: #fff;
 }

 /* Textarea for input */
 #chatInput {
     flex: 1;
     padding: 8px 12px;
     font-size: 14px;
     resize: vertical;
     min-height: 40px;
     max-height: 120px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-family: inherit;
     line-height: 1.3;
 }

 /* Send button */
 #sendMessageBtn {
     background-color: #0073b1;
     color: white;
     border: none;
     padding: 8px 14px;
     cursor: pointer;
     border-radius: 4px;
     height: fit-content;
     transition: background-color 0.2s ease;
 }

 #sendMessageBtn:hover {
     background-color: #005582;
 }

 /* File upload label styling */
 .file-upload-label {
     font-size: 18px;
     cursor: pointer;
     user-select: none;
     padding: 6px 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #f8f9fa;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.2s ease;
 }

 .file-upload-label:hover {
     background-color: #e6e6e6;
 }

 /* Hide default file input */
 #fileUpload {
     display: none;
 }

 .fixed-recipient-box {
     width: 250px;
     padding-right: 30px;
     /* space for the X */
 }

 .recipient-group {
     display: inline-block;
     margin-top: 0.25rem;
 }

 .recipient-group.position-relative {
     position: relative;
 }

 .remove-icon {
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 2rem;
     color: #888;
     cursor: pointer;
     z-index: 1;
 }

 .is-invalid {
     border-color: #dc3545;
     box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
 }

 .user-suggestions {
     max-height: 250px;
     overflow-y: auto;
     z-index: 1050;
 }

 .user-suggestions .dropdown-item:hover {
     background-color: #f8f9fa;
 }

 .message-bubble {
     border-radius: 16px;
     word-wrap: break-word;
 }

 #chatModal.collapsed #connectionListContainer {
     display: none;
 }

 #chatModal.collapsed {
     height: auto !important;
     width: auto;
     max-height: none;
 }

 .newChatPopup {
     width: 320px;
     height: 400px;
     position: fixed;
     bottom: 10px;
     /* enough space so bottom isn't cut */
     right: 350px;
     z-index: 1051;
     border-radius: 0.5rem;
     /* match main chat rounded corners */
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
     background-color: #fff;
     color: #000;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     max-height: 80vh;
     /* responsive max height */
 }

 .newChatPopup .messaging-chat {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
 }

 /* Make sure position is fixed */
 .newChatPopup.position-fixed {
     position: fixed;
 }

 /* Cursor pointer for close icon */
 .closeNewChat {
     cursor: pointer;
 }

 /* User avatar size */
 .user-avatar {
     width: 32px;
     height: 32px;
 }

 /* Recipient group flex-grow and min-width */
 .flex-grow-min {
     flex-grow: 1;
     min-width: 150px;
 }

 /* Remove icon positioning and cursor */
 .remove-icon {
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
     cursor: pointer;
 }

 /* Add recipient button size */
 .add-recipient-btn {
     width: 38px;
     height: 38px;
 }

 /* Background for chat messages */
 .chatMessages {
     background-color: #f9f9f9;
 }

 /* Attach file icon size and cursor */
 .attach-file-label {
     cursor: pointer;
 }

 .attach-file-label i {
     font-size: 1.25rem;
 }

 @media (max-width: 576px) {
     .newChatPopup {
         right: 10px !important;
         left: 10px !important;
         width: auto !important;
         max-width: 100% !important;
         bottom: 10px !important;
         height: 90vh !important;
         max-height: 90vh;
         border-radius: 10px;
     }
 }

 .recipient-group {
     position: relative;
 }

 .selected-user-avatar {
     width: 24px;
     height: 24px;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     border-radius: 50%;
     pointer-events: none;
 }

 .recipient-group .user-search-input {
     padding-left: 40px !important;
 }