.active-icon {
    width: 8px;
    height: 8px;
    background-color: #28a745;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

.active-icon-md {
    width: 10px;
    height: 10px;
    background-color: #28a745;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}


.active-icon-lg {
    width: 13px;
    height: 13px;
    background-color: #28a745;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

.inactive-icon-md {
    width: 10px;
    height: 10px;
    background-color: #dbd9dc;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

.badge-custom{
    background-color: #e2e6ea;
    color: #6c757d;
}

.profile-active-icon{
    right: 7px;
    bottom: 3px;
}

.unread-icon {
    width: 8px;
    height: 8px;
    background-color: #2b91ff;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

.read-icon {
    width: 8px;
    height: 8px;
    display: inline-flex;
    border-radius: 50%;
    vertical-align: middle;
}

.search-ic {
    top:10px;
    left:10px;
}

.s-field{
    padding-left: 2rem;
}

.btn-custom{
    color: #6c757d;
}

.btn-custom:hover{
    background-color: #e2e6ea;
}

.segmented{
    width:100%;
    background-color: #fafafa;
    border: 1px solid #ced4da;
}

.segment,
.segment-md{
    width: 100%;
    background-color: unset;
}

.segment.active,
.segment-md.active{
    background-color: #ffffff;
    font-weight: bold;
    color: #42464f;
}

.profession-span{
    background-color: #ebf9ff;
    color: #0d6efd;
}

.level-span{
    background-color: #ffffff;
    color: #000000;
}

.text-custom-grey{
    color: #53565d;
}

/* Chat Body */
.chat-body {
    font-size:14px;
    /* max-height: 40vh;  */
}

.conversation-section {
    max-height: 55vh; 
}

/* smooth slide animations */
.chat-panel,
.inbox-panel {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chat-panel.mobile-hidden {
    transform: translateX(100%);
    opacity: 0;
    display: none !important;
}

.chat-panel.mobile-show {
    transform: translateX(0);
    opacity: 1;
    display: block !important;
}

.inbox-panel.mobile-hidden {
    transform: translateX(-100%);
    opacity: 0;
    display: none !important;
}

.inbox-panel.mobile-show {
    transform: translateX(0);
    opacity: 1;
    display: block !important;
}

/* Make dropdown wider */
.custom-dropdown {
    min-width: 240px; /* default is ~160px */
    padding: 0.5rem 0; /* control vertical padding */
}

/* Add spacing between items */
.custom-dropdown .dropdown-item {
    padding: 0.75rem 1rem; /* increase vertical + horizontal spacing */
    font-size: 0.95rem; /* slightly larger text if you like */
}

/* Divider spacing */
.custom-dropdown .dropdown-divider {
    margin: 0.5rem 0;
}


.btn-send {
    background: none; /* Remove background */
    border: none;     /* Remove border */
    color: inherit;   /* Inherit text color from parent */
    text-decoration: none; /* No underline */
    font-weight: 600; /* Add bold if you like */
    cursor: pointer; /* Default pointer cursor */
}

/* Style when the button is disabled */
.btn-send:disabled {
    cursor: not-allowed; /* Show 'not-allowed' cursor */
    opacity: 0.6; /* Make it look faded (optional) */
    pointer-events: none; /* Disable interactions */
}

/* .chat-body{
    min-height:100vh;
} */

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f2f5;
    border-radius: 18px;
    padding: 6px 10px;
    font-size: 0.85rem;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.attachment-chip img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

.attachment-chip .remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 0.7rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.attachment-chip .file-icon {
    font-size: 1.2rem;
    color: #555;
}

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