@import url("modules/_variables.css");
@import url("modules/_inputContainer.css");
@import url("modules/_labelTabs.css");
@import url("modules/_fontAwesome.css");

.DirectoryBody {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: white;
    min-height: 100dvh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.directoryHeader {
    height: 180px; /* collapsed height */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    flex: 0 0 auto; /* explicit: header height is fixed */
    position: relative;
    z-index: 2;
    transition: height 300ms ease;
    will-change: height;
    overflow: visible; /* hide overflow during animation */
}
    /* Fixed overlay behavior */
    .directoryHeader.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background-color: white;
    }
    /* When expanded, header should size to content naturally */
    .directoryHeader.is-expanded {
        height: auto; /* keep content-height when open */
        overflow: visible; /* allow content to show fully when open */
    }
/*body:has(#UsernameInput, #Passcode) .directoryHeader {
    box-shadow: none !important;
}
body:has(#UsernameInput, #Passcode) .directoryHeader__items,
body:has(#UsernameInput, #Passcode) .directoryHeader__items__profile,
body:has(#UsernameInput, #Passcode) .BurgerMenu__items {
    display: none;
}*/
.EmployeesContainer .name {
    position: relative;
    display: inline-block;
    overflow: visible;
    max-width: 190px;
}

.profileThumbnail {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    & img

{
    width: 100%;
}

}

.profileThumbnail {
    /*left:-33px;
        top:-3px;*/
    vertical-align: middle;
}
/**/
.detailsThumbnail {
    width: 60px;
    height: 60px;
    left: -66px;
    top: 0px;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    overflow: hidden;
    bottom: calc(100% - 55px);
    transition: all .3s ease-in-out;
    z-index: 2;
    & img

{
    width: 100%;
}

& #detailsThumbnail_checkbox {
    display: none;
}

}

.detailsThumbnail:has(#detailsThumbnail_checkbox:checked) {
    width: 300px;
    height: 300px;
    left: 50%;
    bottom: 10px;
    transform: translatex(-50%);
    box-shadow: rgba(0, 0, 0, 0.5) 4px 5px 8px;
}
/* Spacer preserves layout when header is fixed */
.directoryHeader__spacer {
    display: none;
    height: 180px;
    flex: 0 0 auto;
}

    .directoryHeader__spacer.is-active {
        display: block;
    }

@media (prefers-reduced-motion: reduce) {
    .directoryHeader {
        transition: none;
    }
}

.logo-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0;
    background: var(--darkBlue);
    overflow: visible;
    user-select: none;
    pointer-events: none;
}

.waveGraphic {
    position: absolute;
    display: block;
    width: 100%;
    height: calc(100% - 20px);
    top: 35px;
    z-index: 2;
    user-select: none;
    pointer-events: none;
}

.logo {
    position: relative;
    width: 180px;
    margin-top: 5px;
    z-index: 2;
    height: auto;
}

.header_wave {
    position: absolute;
    bottom: -174px;
    left: 50%;
    transform: translateX(-50%);
    width: 106vw;
    height: auto;
    display: block;
    z-index: 1;
    pointer-events: none;
}

.directoryHeader__items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 24px 12px 24px;
    width: 100%;
    max-width: 500px;
    margin-top: auto;
}

/* Burger menu items: hidden by default, show only when header is expanded */
.BurgerMenu__items {
    display: none; /* closed */
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px 24px 24px;
    position: relative;
    z-index: 2; /* above decorative wave */
    visibility: hidden; /* default hidden; actual control occurs under .is-expanded */
    transition: opacity 300ms ease;
}

.directoryHeader.is-expanded .BurgerMenu__items {
    display: flex; /* laid out for measuring scrollHeight */
    visibility: hidden; /* keep hidden until JS toggles .is-visible after 300ms */
    opacity: 0;
}

    .directoryHeader.is-expanded .BurgerMenu__items.is-visible {
        visibility: visible; /* appear at 300ms (no fade) */
        opacity: 1;
    }

.BurgerMenu__items a {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #0a477b !important;
    text-decoration: none;
    padding: 8px 0;
    cursor: pointer;
    /*border-bottom: 1px solid #0a477b;*/
}

.BurgerMenu__items > a:not(:last-of-type) {
    border-bottom: 1px solid #0a477b;
}

.BurgerMenu__items a:hover,
.BurgerMenu__items a:focus {
    text-decoration: underline;
}


.directoryHeader__items__profile__imageContainer {
    width: 52px;
    height: 52px;
    border: 4px solid #6cb9e6;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background-color: #e6e6e6;
}

.directoryHeader__items__profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 3;
}

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

.directoryHeader__items__profile__name {
    color: #6cb9e6;
    font-weight: bold;
    padding-top: 18px;
}
/* From Uiverse.io by Cevorob */
.burger {
    position: relative;
    width: 36px;
    height: 22px;
    background: transparent;
    cursor: pointer;
    display: block;
}

    .burger input {
        display: none;
    }

    .burger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #6cb9e6;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

        .burger span:nth-of-type(1) {
            top: 0px;
            transform-origin: left center;
        }

        .burger span:nth-of-type(2) {
            top: 50%;
            transform: translateY(-50%);
            transform-origin: left center;
        }

        .burger span:nth-of-type(3) {
            top: 100%;
            transform-origin: left center;
            transform: translateY(-100%);
        }

    .burger input:checked ~ span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0px;
        left: 5px;
    }

    .burger input:checked ~ span:nth-of-type(2) {
        width: 0%;
        opacity: 0;
    }

    .burger input:checked ~ span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 25px;
        left: 5px;
    }

.directorySearch__Container {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    padding-top: 24px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1200px;
}

.Directory_ResultsAndDetails {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: 30px;
    gap: 30px;
}

.directorySearch__toggleContainer {
    /*display: grid;
    grid-template-columns: 1fr auto 1fr;*/ /* equal left/right, auto-sized center */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 32px 24px 32px;
    gap: 12px;
}
    /* position each slot */
    .directorySearch__toggleContainer > :first-child {
        justify-self: start; /* left aligns to the left edge */
    }

    .directorySearch__toggleContainer > :nth-child(2) {
        justify-self: center; /* center item stays at true center */
    }

    .directorySearch__toggleContainer > :last-child {
        justify-self: end; /* right aligns to the right edge */
        text-align: right; /* if the right item is text */
    }

.directorySearch__emp, .directorySearch__dept {
    font-size: 18px;
}

.directorySearch__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

#Details {
    width: 100%;
    margin-top: auto;
    transition: max-height .5s ease-in-out;
    &:empty

{
    max-height: 0px;
}

&:not(:empty) {
    max-height: 400px;
    background: #fff;
}

}

.detailsThumbnail_label {
    width: 100%;
}

.DetailsContainer {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    /*max-width: calc(100% - 40px);*/
    margin: 0 auto;
    border-top: 1px solid var(--lightGreen);
    padding-top: 30px;
    padding-bottom: 30px;
    &.fadeout

{
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

& h2 {
    margin-bottom: 0;
    color: var(--darkBlue);
    font-weight: bold;
}

& .title {
    color: var(--darkBlue);
}

& p:not(.title) {
    margin-bottom: 0;
}

i.fa-regular {
    color: var(--darkGray);
}

.prevItem, .nextItem {
    align-self: center;
    justify-self: center;
    i

{
    font-size: 3.5rem;
}

}

.prevItem:active, .nextItem:active {
    color: var(--lightGreen);
}

.typeLabel {
    font-size: .5rem;
}

}

#ticker {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: var(--lightGreen);
    padding: 0px;
    padding-bottom: env(safe-area-insert-bottom);
    color: black;
    z-index: 10;
    /*margin-top: auto;*/
    &:has(.message:empty), & .details:empty

{
    display: none;
}

&:has(#tickerMessage_checkbox:checked) .details {
    display: block;
    text-align: center;
}

& .details {
    display: none;
    position: relative;
    padding: 10px;
    width: 100%;
    background: var(--lighterGreen);
}

}

#ticker label[for="tickerMessage_checkbox"] {
    display: block;
    position: relative;
    width: 100%;
}

#tickerMessage_checkbox {
    display: none;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 5px 0;
    text-align: center;
}

    /*.marquee span {
        display: inline-block;*/
    /* Ensure it starts fully outside the right edge */
    /*animation: marquee 10s linear infinite;
    }

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }*/
    /* all the way off the right */
    /*100% {
        transform: translateX(-100%);
    }*/
    /* all the way off the left */
    /*}*/
    .marquee span {
        display: inline-block;
        padding-left: 100%; /* push the text fully off to the right first */
        animation: marquee 10s linear infinite;
    }

@keyframes marquee {
    0% {
        transform: translateX(0); /* starts just off the right edge */
    }

    100% {
        transform: translateX(-100%); /* scroll completely off the left */
    }
}

.Directory_EmployeeResultsContainer {
    position: relative;
    /*    border:3px solid pink;
*/
}

.animateUp {
    #departmentResults

{
    overflow: hidden;
    animation: collapse var(--animationDurationDefault) linear forwards;
}

#employeeResults {
    position: absolute;
    top: 100%;
    width: 100%; /*calc(100% - 40px);*/
    animation: animateUp var(--animationDurationDefault) linear forwards;
}

}

@keyframes collapse {
    0% {
        max-height: 100%;
    }

    100% {
        max-height: 0%;
    }
}

@keyframes animateUp {
    0% {
        top: 100%;
    }

    100% {
        top: 0%;
    }
}

.animateDown {
    #departmentResults

{
    overflow: hidden;
    animation: expand var(--animationDurationDefault) linear forwards;
}

#employeeResults {
    position: absolute;
    top: 100%;
    width: calc(100% - 40px);
    animation: animateDown var(--animationDurationDefault) linear forwards;
}

}

@keyframes expand {
    0% {
        max-height: 0%;
    }

    100% {
        max-height: 100%;
    }
}

@keyframes animateDown {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}
/* The switch - the box around the slider */
/*.Toggleswitch {
    --a: 0.5s ease-out;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    height: 16px;
    border-radius: 16px;
    box-shadow: 0 0 0 0.33em #0a477b;
    aspect-ratio: 212.4992/84.4688;
    background-color: #0a477b;
}*/

/* Hide default HTML checkbox */
/*#directoryToggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.Toggleswitch svg {
    height: 100%;
}

    .Toggleswitch svg path {
        color: #fff;
        stroke-width: 16;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 136 224;
        transition: all var(--a), 0s transform;
        transform-origin: center;
    }

#directoryToggle:checked ~ .Toggleswitch svg path {
    stroke-dashoffset: 180;
    transform: scaleY(-1);
}*/
/* From Uiverse.io by arghyaBiswasDev */
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 5px solid #0a477b;
    transition: .4s;
    border-radius: 30px;
}

    .slider:before {
        position: absolute;
        content: "";
        /*        height: 1.4em;
        width: 1.4em;*/
        height: 1.1em;
        width: 1.1em;
        border-radius: 20px;
        /*        left: 0.27em;
        bottom: 0.25em;*/
        left: 0.23em;
        bottom: 0.14em;
        background-color: #0a477b;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #0a477b;
    border: 5px solid #0a477b;
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    transform: translateX(1.4em);
    background-color: #fff;
}

.directorySearch__searchBarContainer {
    width: 100%;
    max-width: 80%;
    .form-group

{
    margin-bottom: 0;
}

}

.form-group {
    position: relative;
}

    .form-group.pin {
        margin-bottom: 12px;
    }

.selected {
    /*    font-weight: bold;
*/ color: var(--darkBlue);
}

.directorySearch__searchBarInput.form-control {
    padding-right: 44px;
}

/* Submit button placed inside the input on the right with the provided icon */
.directorySearch__searchBarIconSubmit {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%230a477b' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/></svg>");
    outline: none;
}

    .directorySearch__searchBarIconSubmit:hover {
        background-color: rgba(10, 71, 123, 0.08);
    }

    .directorySearch__searchBarIconSubmit:focus-visible {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--darkBlue); /* accessible focus ring */
    }

.directorySearch__searchBarInput.form-control:focus {
    border-color: var(--darkBlue);
    box-shadow: 0 0 0 3px rgba(10, 71, 123, 0.15);
    outline: none;
}

.Directory_EmployeeResultsContainer {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.EmployeesContainer {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

    .EmployeesContainer li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 8px 12px;
    }

        .EmployeesContainer li:hover,
        .EmployeesContainer li[aria-selected="true"],
        .EmployeesContainer li.selected,
        .EmployeesContainer li:focus-visible {
            background-color: var(--darkBlue);
            border-radius: 30px;
            color: white;
            cursor: pointer;
        }

            .EmployeesContainer li:hover .tag-svg,
            .EmployeesContainer li[aria-selected="true"] .tag-svg,
            .EmployeesContainer li.selected .tag-svg,
            .EmployeesContainer li:focus-visible .tag-svg {
                background-color: white;
                border-radius: 4px;
            }


em.title {
    font-size: 12px;
    white-space: nowrap;
    display: block;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 35px;
}

#employeeResults li.back-button {
    /* Sticky at the top of the scroll container */
    position: sticky;
    top: 0;
    z-index: 10;
    /* Center the circle horizontally within the list area */
    display: flex;
    justify-content: center;
    /* Space around the circle; also ensures the sticky row has its own background */
    padding: 10px 0;
    /* Background to prevent underlying items from showing through when stuck */
    background-color: #fff; /* match your panel background */
    cursor: pointer;
}

/* Circular icon container */
.back-button__circle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 2px solid #001f3f; /* navy border */
    border-radius: 50%;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#employeeResults li.back-button:focus .back-button__circle,
#employeeResults li.back-button:hover .back-button__circle {
    background-color: #f0f5ff;
    border-color: #001f3f;
    box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.12);
}

/* Icon size/color */
.back-button__circle i {
    font-size: 18px;
    color: #001f3f; /* navy */
}

.emp-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

    .emp-spinner.active {
        display: flex;
    }

.details-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

    .details-spinner.active {
        display: flex;
    }

.DetailsContainer.loading > .detailsContent,
.DetailsContainer.loading > .input-container {
    display: none !important;
}
/* prevItem and nextItem remain visible naturally; ensure spinner shows */
.DetailsContainer.loading > #details-spinner {
    display: flex;
}

.emp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.EmployeesContainer li.select-all {
    background-color: #095329;
    border-radius: 30px;
    color: white;
    justify-content: center;
    width: 40%;
    &:hover

{
    background-color: var(--lightGreen);
}

}

.SelectedUsersList .selected-user.no-phone {
    border-left: 4px solid #d9534f; /* red */
    background-color: #fff6f6;
}

.SelectedUsersList .selected-user .badge-no-phone {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 12px;
    color: #8a2d2d;
    background: #fce2e2;
    border: 1px solid #f3b5b5;
    border-radius: 3px;
}

.Directory_EmployeeResultsContainer .emp-row .tag-no-phone {
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #8a2d2d;
    background: #fce2e2;
    border: 1px solid #f3b5b5;
    border-radius: 3px;
}

.inputIcon.is-sending {
    opacity: 0.6;
    pointer-events: none;
    transform: none;
    top: 35%;
}
.inputIcon:focus,
.inputIcon:active,
.inputIcon:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}
/* --- Send SMS loading spinner (reuses #SendSMS svg) --- */
#SendSMS.is-sending {
    /*transform-origin: 50% 50%;*/
    animation: sms-rotate 1s linear infinite;
}

#SendSMS .sms-spinner-circle {
    fill: none;
    stroke: #0a477b;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 90, 200;
    stroke-dashoffset: 0;
    animation: sms-dash 1.4s ease-in-out infinite;
}

@keyframes sms-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sms-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -125;
    }
}
.labelTabsContainer {
    position: relative;
}

#message {
    /* ensure text doesn't sit under the counter */
    padding-right: 56px;
}

.textarea-counter {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 12px;
    color: #6b7280; /* neutral gray */
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
    pointer-events: none; /* allow clicking through to textarea */
    user-select: none;
}

.su-mobile-handle {
    display: none;
}

button.su-mobile-chevron {
    display: none;
}

@media (min-width: 500px) {
    .waveGraphic {
        top: 20px;
    }
}

@media (min-width: 780px) {
}

@media (min-width:900px) {
    .Directory_ResultsAndDetails {
        flex-direction: row;
    }

    #Details {
        margin-top: 0;
        margin-bottom: auto;
        min-height: 315px;
    }

    .DetailsContainer {
        border-top: 0;
        border-left: 1px solid var(--lightGreen);
        padding: 20px 10px;
    }

    .detailsThumbnail:has(#detailsThumbnail_checkbox:checked) {
        width: 300px;
        height: 300px;
        left: 50%;
        bottom: -110px;
        transform: translatex(-50%);
        box-shadow: rgba(0, 0, 0, 0.5) 4px 5px 8px;
    }

    .EmployeesContainer .name {
        max-width: none;
    }

    em.title {
        display: inline;
        width: auto;
        overflow: auto;
        text-overflow: unset;
        margin-left: 5px;
    }

    .marquee span {
        animation: marquee 13s linear infinite;
    }
}

@media (min-width: 1200px) {
    .waveGraphic {
        height: 200px;
        top: 5px;
    }

    .marquee span {
        animation: marquee 15s linear infinite;
    }
}

@media (min-width: 1800px) {
    .waveGraphic {
        height: 250px;
    }

    .marquee span {
        animation: marquee 18s linear infinite;
    }
}

@media (max-width: 780px) {
    .waveGraphic {
        max-height: 115px;
    }

    :root {
        --su-mobile-collapsed-h: 56px;
        --su-mobile-top: 180px; /* fallback */
        --su-mobile-input-h: 160px; /* fallback */
    }

    /* Keep the message input always visible at the bottom on mobile */
    .directorySearch__Container .input-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        background: #fff;
        padding-bottom: env(safe-area-inset-bottom);
        margin: 0 !important;
    }

    .su-mobile-handle {
        display: block;
    }

    button.su-mobile-chevron {
        display: block;
    }

    /* Ensure the scrolling results area doesn't hide behind the fixed input */
    .Directory_ResultsAndDetails {
        padding-bottom: calc(var(--su-mobile-input-h) + 12px) !important;
        margin-bottom: 0 !important;
    }

    /* Make Selected Users a bottom drawer above the input */
    #SelectedUsersContainer.Directory_SelectedUsersContainer {
        position: fixed;
        left: 0;
        right: 0;
        /* sit right above the fixed message input */
        bottom: calc(var(--su-mobile-input-h) + env(safe-area-inset-bottom));
        z-index: 65;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.12);
        box-shadow: 0 -8px 20px rgba(0,0,0,0.12);
        display: flex;
        flex-direction: column;
        /* collapsed state: only show header height */
        height: var(--su-mobile-collapsed-h);
        overflow: hidden;
        /* nice rounded top like a drawer */
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        transition: height 220ms ease;
        will-change: height;
    }

    /* Header is the "handle" */
    #SelectedUsersContainer .SelectedUsersHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        cursor: pointer;
        user-select: none;
    }

    /* Optional: reduce clutter on mobile */
    #toggleSelectedView {
        display: none !important; /* keep if you want; remove if you need it on mobile */
    }

    /* Hide the list when collapsed (header only) */
    #SelectedUsersContainer .SelectedUsersList {
        display: none;
        margin: 0;
    }

    /* Expanded/open state */
    #SelectedUsersContainer.su-mobile-open {
        /* fill space between top menu and message input */
        height: calc(100dvh - var(--su-mobile-top) - var(--su-mobile-input-h) - env(safe-area-inset-bottom));
    }

        #SelectedUsersContainer.su-mobile-open .SelectedUsersList {
            display: block;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 8px 12px 12px;
        }

    /* Small chevron button we’ll inject (mobile only) */
    #SelectedUsersContainer .su-mobile-chevron {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        padding: 6px 8px;
        border-radius: 10px;
        cursor: pointer;
    }

        #SelectedUsersContainer .su-mobile-chevron:focus-visible {
            outline: 2px solid rgba(10,71,123,0.35);
            outline-offset: 2px;
        }

    /* Make the header look like a draggable handle */
    #SelectedUsersContainer .su-mobile-handle {
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0,0,0,0.25);
        margin: 0 auto 6px;
    }

    em.title {
        /*display: block;
        visibility: hidden;
        height: 0;
        margin: 2px;
        padding: 0;
        line-height: 0;*/
        display: none;
    }

    .EmployeesContainer .name {
        max-width:100%;
    }
}

@media (max-width: 500px) {
    .waveGraphic {
        max-height: 80px;
    }
}

@media (max-width: 400px) {
    .detailsThumbnail {
        width: 45px;
        height: 45px;
        left: -50px;
    }
}