/* /Pages/Components/CustomerCommunications.razor.rz.scp.css */
#msg-list-box-with-tb-shadow[b-mv4j34tu37],
#comms-attachments-content[b-mv4j34tu37] {
    --comms-media-max-w: 210px;
    --comms-media-max-h: 300px;
}

/* bubble styles */
.msg-bubble[b-mv4j34tu37] {
    max-width: 65%;
    padding: .5rem .75rem;
    border-radius: .75rem;
    position: relative;
    box-shadow: -2px 2px 4px rgba(0,0,0,.15);
    text-wrap: wrap;
}

    .msg-bubble.incoming[b-mv4j34tu37] {
        background: #f1f3f5;
        border: 1px solid #e1e4e8;
    }

    .msg-bubble.outgoing[b-mv4j34tu37] {
        background: #e6f4ff;
        border: 1px solid #cfe6ff;
    }

.comms-msg-text[b-mv4j34tu37] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.dialog-pre-wrap div.e-dlg-content[b-mv4j34tu37] {
    white-space: pre-wrap !important;
}

.msg-time[b-mv4j34tu37] {
    font-size: .7rem;
    color: #6c757d;
    margin-top: .25rem;
    text-align: right;
}

/* Accent bar on the side of the SelectEmail button */
.email-accent-toggle[b-mv4j34tu37] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 5px;
    cursor: pointer;
    z-index: 2;
    /* Start slightly “shrunk” for animation room */
    transform-origin: left center;
    transform: scaleX(1);
    opacity: 1;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

/* READ state: subtle gray bar */
.email-accent-read[b-mv4j34tu37] {
    background-color: #BABABA; /* slightly darker than read bg */
}

/* UNREAD state: current blue accent */
.email-accent-unread[b-mv4j34tu37] {
    background-color: #4E8AF5;
}

/* Hover while READ → preview UNREAD (wider + lighter blue, slightly faded) */
.email-accent-read:hover[b-mv4j34tu37] {
    transform: scaleX(2); /* "wider" without changing layout */
    background-color: #7BA6F7; /* lighter blue */
    opacity: 0.7;
}

/* Hover while UNREAD → preview READ (wider + lighter gray) */
.email-accent-unread:hover[b-mv4j34tu37] {
    transform: scaleX(2);
    background-color: #969696; /* lighter gray than base read color */
    opacity: 0.7;
}

/* Error sending email retry button left border */
.email-accent-error:hover[b-mv4j34tu37] {
    transform: scaleX(2);
    background-color: #990613; /* Darker red then initial color */
    opacity: 0.7;
}

/* fade-in/out scroll button */
.scroll-btn[b-mv4j34tu37] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s linear, transform .25s ease;
    transform: translateY(6px); /* slight lift on show */
}

    .scroll-btn.is-visible[b-mv4j34tu37] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .scroll-btn.is-hidden[b-mv4j34tu37] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

/* Base button */
.comms-btn-black[b-mv4j34tu37] {
    color: #000;
    background-color: #f8f9fa; /* light neutral when not selected */
    border-color: #000;
    box-shadow: -2px 2px 4px rgba(0,0,0,.15);
    transition: background-color .2s ease, box-shadow .25s ease, color .2s ease, border-color .2s ease;
    cursor: pointer;
}

    /* Hover for non-selected */
    .comms-btn-black:hover[b-mv4j34tu37] {
        background-color: #e9ecef; /* a touch darker neutral */
        border-color: #0d6efd;
        box-shadow: -4px 4px 6px rgba(0,0,0,.25);
    }

    /* Selected state (very light blue) */
    .comms-btn-black.lightblue[b-mv4j34tu37] {
        background-color: #B8D4FE; /* very light blue */
        border-color: #5D9DFD; /* match the blue family */
        color: #000;
    }

        /* Selected + hover (darker blue) */
        .comms-btn-black.lightblue:hover[b-mv4j34tu37] {
            background-color: #5D9DFD; /* darker blue on hover */
            color: #fff; /* optional better contrast */
            border-color: #0d6efd;
            box-shadow: -4px 4px 6px rgba(0,0,0,.25);
        }

.frost-strip-bottom[b-mv4j34tu37] {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 15px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,.15) 100%);
    opacity: 1;
    transition: opacity .25s ease;
    z-index: 2;
}

    .frost-strip-bottom.is-hidden[b-mv4j34tu37] {
        opacity: 0;
    }

.frost-strip-top[b-mv4j34tu37] {
    position: sticky;
    top: 0;
    width: 100%;
    height: 15px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(0,0,0,.15) 100%);
    opacity: 1;
    transition: opacity .25s ease;
    z-index: 2;
}

    .frost-strip-top.is-hidden[b-mv4j34tu37] {
        opacity: 0;
    }

.comms-contact-card[b-mv4j34tu37] {
    box-shadow: -2px 2px 4px rgba(0,0,0,.15);
    transition: box-shadow .25s ease;
}

    .comms-contact-card:hover[b-mv4j34tu37] {
        box-shadow: -4px 4px 6px rgba(0,0,0,.25);
        transition: box-shadow .25s ease;
    }

.comms-border-left[b-mv4j34tu37] {
    border-left: 4px solid;
}

.date-divider[b-mv4j34tu37] {
    width: 90%;
    position: sticky;
    top: 10px;
    z-index: 3;
}

.date-line[b-mv4j34tu37] {
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    opacity: .6;
}

.date-label[b-mv4j34tu37] {
    font-size: .8rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.media-slot[b-mv4j34tu37] {
    position: relative;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* per-file wrapper; hide only this file's skeleton when ready */
.media-item[b-mv4j34tu37] {
    position: relative;
    display: inline-block;
}

    .media-item.is-ready .media-skeleton[b-mv4j34tu37] {
        display: none;
    }

/* loading skeletons */
.media-skeleton[b-mv4j34tu37] {
    width: var(--comms-media-max-w);
    height: var(--comms-media-max-h);
    border-radius: .5rem;
    background: linear-gradient(90deg, #e4e7ec 25%, #d8e6ff 37%, #e4e7ec 63%);
    background-size: 400% 100%;
    animation: skeleton-b-mv4j34tu37 1.2s ease infinite;
}
.media-skeleton-pdf[b-mv4j34tu37] {
    width: var(--comms-media-max-w);
    height: 24px;
    border-radius: .5rem;
    background: linear-gradient(90deg, #e4e7ec 25%, #d8e6ff 37%, #e4e7ec 63%);
    background-size: 400% 100%;
    animation: skeleton-b-mv4j34tu37 1.2s ease infinite;
}

/* images */
.media-thumb[b-mv4j34tu37] {
    width: auto;
    height: auto;
    max-height: var(--comms-media-max-h);
    object-fit: cover;
    border-radius: .5rem;
    opacity: 0;
    transition: opacity .2s;
}

    .media-thumb.loaded[b-mv4j34tu37] {
        opacity: 1
    }

/* videos */
.media-video[b-mv4j34tu37] {
    width: auto;
    height: auto;
    max-height: var(--comms-media-max-h);
    border-radius: .5rem;
}

/* shimmer */
@keyframes skeleton-b-mv4j34tu37 {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

/* attachments strip */
.att-strip[b-mv4j34tu37] {
    display: flex;
    gap: .5rem;
    overflow-x: auto; /* horizontal scroll */
    width: 100%; /* full width */
    max-height: 150px; /* cap height */
    padding: .25rem 0;
}

/* card tiles */
.att-card[b-mv4j34tu37] {
    flex: 0 0 auto;
    width: 200px;
    height: 140px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* previews */
.att-thumb[b-mv4j34tu37] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.att-pdf[b-mv4j34tu37] {
    width: 100%;
    height: 100%;
    border: 0;
}

.att-audio[b-mv4j34tu37] {
    width: 90%;
    height: 32px;
}

/* overlay meta */
.att-meta[b-mv4j34tu37] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .8rem;
    padding: .2rem .45rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* click affordance + skeleton */
.att-click[b-mv4j34tu37] {
    cursor: pointer;
}

.att-skel[b-mv4j34tu37] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,#e9ecef 25%,#f8f9fa 37%,#e9ecef 63%);
    background-size: 400% 100%;
    animation: attShimmer-b-mv4j34tu37 1.2s infinite;
}

@keyframes attShimmer-b-mv4j34tu37 {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}


/* wrapper + rotor */
.hourglass-anim[b-mv4j34tu37] {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.hg-rotor[b-mv4j34tu37] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    animation: hg-rotate-b-mv4j34tu37 3.6s ease-in-out infinite; /* full cycle */
}

/* icons */
.hourglass-anim .hg[b-mv4j34tu37] {
    position: absolute;
    inset: 0;
    font-size: 18px;
    line-height: 1;
    color: #6c757d;
    opacity: 0;
    will-change: opacity;
}

/* fade timelines (sync with 3.6s cycle) */
.hourglass-anim .top[b-mv4j34tu37] {
    animation: hg-fade-top-b-mv4j34tu37 3.6s linear infinite;
}

.hourglass-anim .split[b-mv4j34tu37] {
    animation: hg-fade-split-b-mv4j34tu37 3.6s linear infinite;
}

.hourglass-anim .bottom[b-mv4j34tu37] {
    animation: hg-fade-bot-b-mv4j34tu37 3.6s linear infinite;
}

/* Rotate: pour(0–35) → flip(35–40) → reverse pour(40–75) → flip-back(75–80) → settle(80–100) */
@keyframes hg-rotate-b-mv4j34tu37 {
    0%,35% {
        transform: rotate(0deg);
    }

    40%,95% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* TOP:
   - show early (forward pour)
   - show late after first flip (reverse pour)
   - stay visible across second flip → seamless restart */
@keyframes hg-fade-top-b-mv4j34tu37 {
    0% {
        opacity: 1
    }
    /* start visible */
    12% {
        opacity: 1
    }

    18% {
        opacity: .5
    }

    25% {
        opacity: 0
    }
    /* hand off to split */
    40% {
        opacity: 0
    }
    /* during flip window */
    58% {
        opacity: .6
    }

    65% {
        opacity: 1
    }
    /* late in reverse pour */
    80% {
        opacity: 1
    }
    /* hold through second flip */
    100% {
        opacity: 1
    }
    /* seamless wrap to next cycle */
}

/* SPLIT:
   - mid in forward pour
   - mid in reverse pour after flip */
@keyframes hg-fade-split-b-mv4j34tu37 {
    8% {
        opacity: 0
    }

    12% {
        opacity: .6
    }

    20% {
        opacity: 1
    }

    28% {
        opacity: .5
    }

    31% {
        opacity: 0
    }

    40% {
        opacity: 0
    }
    /* flip gap */
    50% {
        opacity: .6
    }

    58% {
        opacity: 1
    }

    66% {
        opacity: .5
    }

    70% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

/* BOTTOM:
   - late in forward pour
   - HOLD across flip (looks like top)
   - fade out as reverse pour starts */
@keyframes hg-fade-bot-b-mv4j34tu37 {
    20% {
        opacity: 0
    }

    24% {
        opacity: .6
    }

    30% {
        opacity: 1
    }
    /* sand reached bottom */
    35% {
        opacity: 1
    }
    /* start flip */
    40% {
        opacity: 1
    }
    /* end flip (now "top") */
    48% {
        opacity: .6
    }

    52% {
        opacity: 0
    }
    /* hand off to split */
    100% {
        opacity: 0
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hg-rotor[b-mv4j34tu37] {
        animation: none
    }

    .hourglass-anim .hg[b-mv4j34tu37] {
        animation: none
    }

    .hourglass-anim .split[b-mv4j34tu37] {
        opacity: 1
    }
}


/* envelope sequence: paper -> open -> closed + fly left/fade */
.env-anim-box[b-mv4j34tu37] {
    position: relative;
    width: 100%;
}

    .env-anim-box .msg-time[b-mv4j34tu37] {
        opacity: 0;
        animation: show-time-b-mv4j34tu37 1.5s ease-in forwards;
    }

.env-seq[b-mv4j34tu37] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 20px;
    display: inline-block;
    animation: flyleft-b-mv4j34tu37 1s ease-in forwards;
}

    .env-seq .f[b-mv4j34tu37] {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        line-height: 1;
        opacity: 0;
    }

.f1[b-mv4j34tu37] {
    animation: show1-b-mv4j34tu37 .8s steps(1) forwards;
}
/* 0–35% */
.f2[b-mv4j34tu37] {
    animation: show2-b-mv4j34tu37 .8s steps(1) forwards;
}
/* 35–70% */
.f3[b-mv4j34tu37] {
    animation: show3-b-mv4j34tu37 .8s steps(1) forwards;
}
/* 70–100% */

@keyframes show1-b-mv4j34tu37 {
    0%,27% {
        opacity: 1
    }

    35.001%,100% {
        opacity: 0
    }
}

@keyframes show2-b-mv4j34tu37 {
    0%,27% {
        opacity: 0
    }

    27.001%,60% {
        opacity: 1
    }

    60.001%,100% {
        opacity: 0
    }
}

@keyframes show3-b-mv4j34tu37 {
    0%,60% {
        opacity: 0
    }

    60.001%,100% {
        opacity: 1
    }
}

@keyframes flyleft-b-mv4j34tu37 {
    0%,70% {
        transform: translateX(0);
        opacity: 1
    }

    100% {
        transform: translateX(-100%);
        opacity: 0
    }
}

@keyframes show-time-b-mv4j34tu37 {
    0%,70% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* meta row */
.msg-meta[b-mv4j34tu37] {
    align-items: center;
    min-height: 1.25rem;
}

/* helper since Bootstrap doesn't ship min-h-0 */
.min-h-0[b-mv4j34tu37] {
    min-height: 0 !important;
}

/* Make Syncfusion Tab content participate in flex sizing */
.tab-flex.e-control[b-mv4j34tu37]{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* critical so children can scroll */
    overflow: auto;
}

.tab-flex .e-item.e-active[b-mv4j34tu37] {
    display: flex; /* ensure the active panel is flex */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* allow inner overflow */
    overflow: hidden; /* scrolling handled by inner div */
}

/* index pill + trash overlay for visuals */
.comms-overlay-actions[b-mv4j34tu37] {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
}

.comms-badge-index[b-mv4j34tu37] {
    backdrop-filter: saturate(140%) blur(1px);
    opacity: .95;
}

/* Search result highlight */
.search-highlight-msg[b-mv4j34tu37] {
    background: rgba(184, 212, 254, 0.3);
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
}

.search-highlight-pulse[b-mv4j34tu37] {
    animation: highlight-pulse-b-mv4j34tu37 2s ease-out;
}

@keyframes highlight-pulse-b-mv4j34tu37 {
    0% {
        background-color: rgba(78, 138, 245, 0.4);
    }

    100% {
        background-color: transparent;
    }
}
/* /Pages/CustomerCommunicationsPage.razor.rz.scp.css */
/* SMS Panel Layout */
.comm-sms-panel[b-6tkattck8a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#sms-msg-list-box[b-6tkattck8a],
#sms-attachments-content[b-6tkattck8a] {
    --comms-media-max-w: 210px;
    --comms-media-max-h: 300px;
}

/* Message bubble styles */
.msg-bubble[b-6tkattck8a] {
    max-width: 65%;
    padding: .5rem .75rem;
    border-radius: .75rem;
    position: relative;
    box-shadow: -2px 2px 4px rgba(0,0,0,.15);
    text-wrap: wrap;
}

    .msg-bubble.incoming[b-6tkattck8a] {
        background: #f1f3f5;
        border: 1px solid #e1e4e8;
    }

    .msg-bubble.outgoing[b-6tkattck8a] {
        background: #e6f4ff;
        border: 1px solid #cfe6ff;
    }

.comms-msg-text[b-6tkattck8a] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.msg-time[b-6tkattck8a] {
    font-size: .7rem;
    color: #6c757d;
    margin-top: .25rem;
    text-align: right;
}

.msg-meta[b-6tkattck8a] {
    align-items: center;
    min-height: 1.25rem;
}

/* Date dividers */
.date-divider[b-6tkattck8a] {
    width: 90%;
    position: sticky;
    top: 10px;
    z-index: 3;
}

.date-line[b-6tkattck8a] {
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    opacity: .6;
}

.date-label[b-6tkattck8a] {
    font-size: .8rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Frost strips for scroll indication */
.frost-strip-bottom[b-6tkattck8a] {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 15px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,.15) 100%);
    opacity: 1;
    transition: opacity .25s ease;
    z-index: 2;
}

    .frost-strip-bottom.is-hidden[b-6tkattck8a] {
        opacity: 0;
    }

.frost-strip-top[b-6tkattck8a] {
    position: sticky;
    top: 0;
    width: 100%;
    height: 15px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(0,0,0,.15) 100%);
    opacity: 1;
    transition: opacity .25s ease;
    z-index: 2;
}

    .frost-strip-top.is-hidden[b-6tkattck8a] {
        opacity: 0;
    }

/* Scroll button */
.scroll-btn[b-6tkattck8a] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s linear;
}

    .scroll-btn.is-visible[b-6tkattck8a] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* Media items */
.media-item[b-6tkattck8a] {
    position: relative;
    display: inline-block;
}

    .media-item.is-ready .media-skeleton[b-6tkattck8a] {
        display: none;
    }

.media-skeleton[b-6tkattck8a] {
    width: var(--comms-media-max-w);
    height: var(--comms-media-max-h);
    border-radius: .5rem;
    background: linear-gradient(90deg, #e4e7ec 25%, #d8e6ff 37%, #e4e7ec 63%);
    background-size: 400% 100%;
    animation: skeleton-b-6tkattck8a 1.2s ease infinite;
}

.media-skeleton-pdf[b-6tkattck8a] {
    width: var(--comms-media-max-w);
    height: 24px;
    border-radius: .5rem;
    background: linear-gradient(90deg, #e4e7ec 25%, #d8e6ff 37%, #e4e7ec 63%);
    background-size: 400% 100%;
    animation: skeleton-b-6tkattck8a 1.2s ease infinite;
}

@keyframes skeleton-b-6tkattck8a {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.media-thumb[b-6tkattck8a] {
    width: auto;
    height: auto;
    max-width: var(--comms-media-max-w);
    max-height: var(--comms-media-max-h);
    object-fit: cover;
    border-radius: .5rem;
    opacity: 0;
    transition: opacity .2s;
}

    .media-thumb.loaded[b-6tkattck8a] {
        opacity: 1;
    }

.media-video[b-6tkattck8a] {
    width: auto;
    height: auto;
    max-height: var(--comms-media-max-h);
    border-radius: .5rem;
}

/* Hourglass animation */
.hourglass-anim[b-6tkattck8a] {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.hg-rotor[b-6tkattck8a] {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    animation: hg-rotate-b-6tkattck8a 3.6s ease-in-out infinite;
}

.hourglass-anim .hg[b-6tkattck8a] {
    position: absolute;
    inset: 0;
    font-size: 18px;
    line-height: 1;
    color: #6c757d;
    opacity: 0;
}

.hourglass-anim .top[b-6tkattck8a] {
    animation: hg-fade-top-b-6tkattck8a 3.6s linear infinite;
}

.hourglass-anim .split[b-6tkattck8a] {
    animation: hg-fade-split-b-6tkattck8a 3.6s linear infinite;
}

.hourglass-anim .bottom[b-6tkattck8a] {
    animation: hg-fade-bot-b-6tkattck8a 3.6s linear infinite;
}

@keyframes hg-rotate-b-6tkattck8a {
    0%,35% {
        transform: rotate(0deg);
    }

    40%,95% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes hg-fade-top-b-6tkattck8a {
    0%,12% {
        opacity: 1;
    }

    18% {
        opacity: .5;
    }

    25%,40% {
        opacity: 0;
    }

    58% {
        opacity: .6;
    }

    65%,100% {
        opacity: 1;
    }
}

@keyframes hg-fade-split-b-6tkattck8a {
    8% {
        opacity: 0;
    }

    12% {
        opacity: .6;
    }

    20% {
        opacity: 1;
    }

    28% {
        opacity: .5;
    }

    31%,40% {
        opacity: 0;
    }

    50% {
        opacity: .6;
    }

    58% {
        opacity: 1;
    }

    66% {
        opacity: .5;
    }

    70%,100% {
        opacity: 0;
    }
}

@keyframes hg-fade-bot-b-6tkattck8a {
    20% {
        opacity: 0;
    }

    24% {
        opacity: .6;
    }

    30%,40% {
        opacity: 1;
    }

    48% {
        opacity: .6;
    }

    52%,100% {
        opacity: 0;
    }
}

/* Envelope animation */
.env-anim-box[b-6tkattck8a] {
    position: relative;
    width: 100%;
}

    .env-anim-box .msg-time[b-6tkattck8a] {
        opacity: 0;
        animation: show-time-b-6tkattck8a 1.5s ease-in forwards;
    }

.env-seq[b-6tkattck8a] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 20px;
    display: inline-block;
    animation: flyleft-b-6tkattck8a 1s ease-in forwards;
}

    .env-seq .f[b-6tkattck8a] {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        line-height: 1;
        opacity: 0;
    }

.f1[b-6tkattck8a] {
    animation: show1-b-6tkattck8a .8s steps(1) forwards;
}

.f2[b-6tkattck8a] {
    animation: show2-b-6tkattck8a .8s steps(1) forwards;
}

.f3[b-6tkattck8a] {
    animation: show3-b-6tkattck8a .8s steps(1) forwards;
}

@keyframes show1-b-6tkattck8a {
    0%,27% {
        opacity: 1;
    }

    35.001%,100% {
        opacity: 0;
    }
}

@keyframes show2-b-6tkattck8a {
    0%,27% {
        opacity: 0;
    }

    27.001%,60% {
        opacity: 1;
    }

    60.001%,100% {
        opacity: 0;
    }
}

@keyframes show3-b-6tkattck8a {
    0%,60% {
        opacity: 0;
    }

    60.001%,100% {
        opacity: 1;
    }
}

@keyframes flyleft-b-6tkattck8a {
    0%,70% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes show-time-b-6tkattck8a {
    0%,70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Overlay actions for attachments */
.comms-overlay-actions[b-6tkattck8a] {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
}

/* SMS Composer */
.sms-composer[b-6tkattck8a] {
    flex-shrink: 0;
}

/* File drop hint */
.msg-list-box-file-hint[b-6tkattck8a] {
    opacity: 0.5;
    transition: opacity 0.2s;
}

    .msg-list-box-file-hint:hover[b-6tkattck8a] {
        opacity: 0.8;
    }


/*  New CSS  */
/* Main container */
.comm-page-container[b-6tkattck8a] {
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    max-width: 100vw;
}

    .comm-page-container.isDialogContainer[b-6tkattck8a] {
        height: calc(90vh - 80px) !important;
    }

/* Pane containers */
.comm-left-pane[b-6tkattck8a],
.comm-right-pane[b-6tkattck8a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    background: white;
    overflow: hidden;
}

/* Tab content wrapper */
.comm-tab-content[b-6tkattck8a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Scrollable area within tabs */
.comm-scroll-area[b-6tkattck8a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
}

/* Right pane content panels */
.comm-content-panel[b-6tkattck8a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.comm-panel-header[b-6tkattck8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #fafbfc;
    flex-shrink: 0;
}

.comm-panel-body[b-6tkattck8a] {
    padding: 1rem;
}

.comm-panel-footer[b-6tkattck8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #fafbfc;
    flex-shrink: 0;
}

/* Email display sections */
.comm-email-meta[b-6tkattck8a] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.comm-email-body[b-6tkattck8a] {
    flex: 1;
    min-height: 0;
    max-width: 100%;
}

.comm-email-iframe[b-6tkattck8a] {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: none;
}

/* Empty state */
.comm-empty-state[b-6tkattck8a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
}

/* Email/SMS item styles */
.comm-email-item[b-6tkattck8a],
.comm-sms-item[b-6tkattck8a] {
    position: relative;
    padding-left: 17px !important;
    cursor: pointer;
    text-align: left;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    overflow: hidden;
}

    .comm-email-item.unread[b-6tkattck8a],
    .comm-sms-item.unread[b-6tkattck8a] {
        background: #f8f9fa;
    }

    .comm-email-item.read[b-6tkattck8a] {
        background: white;
    }

    .comm-email-item:hover[b-6tkattck8a],
    .comm-sms-item:hover[b-6tkattck8a] {
        background: #e7f1ff !important;
        border-color: #6ea8fe !important;
        box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .comm-email-item.selected[b-6tkattck8a],
    .comm-sms-item.selected[b-6tkattck8a] {
        background: #B8D4FE !important;
        border-color: #5D9DFD !important;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.15);
    }

/* Accent bar - read/unread toggle */
.email-accent-toggle[b-6tkattck8a] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 7px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.email-accent-read[b-6tkattck8a] {
    background-color: #BABABA;
}

.email-accent-unread[b-6tkattck8a] {
    background-color: #4E8AF5;
}

.email-accent-read:hover[b-6tkattck8a] {
    transform: scaleX(2);
    background-color: #7BA6F7;
}

.email-accent-unread:hover[b-6tkattck8a] {
    transform: scaleX(2);
    background-color: #969696;
}

/* Unread indicator */
.unread-indicator[b-6tkattck8a] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 7px;
    background-color: #BABABA;
    border-radius: 6px 0 0 6px;
}

    .unread-indicator.active[b-6tkattck8a] {
        background-color: #4E8AF5;
    }

/* Action buttons */
.comm-action-btn[b-6tkattck8a] {
    padding: 6px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .comm-action-btn:hover[b-6tkattck8a] {
        background: #e9ecef;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .comm-action-btn.active-flag[b-6tkattck8a] {
        color: #dc3545;
    }

/* Priority dropdown */
.comm-priority-selector[b-6tkattck8a] {
    position: relative;
}

    .comm-priority-selector:hover .comm-priority-dropdown[b-6tkattck8a] {
        display: block;
    }

.comm-priority-dropdown[b-6tkattck8a] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 140px;
}

    .comm-priority-dropdown button[b-6tkattck8a] {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 8px 12px;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
    }

        .comm-priority-dropdown button:hover[b-6tkattck8a] {
            background: #f8f9fa;
        }

/* Close button */
.btn-close-compose[b-6tkattck8a] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

    .btn-close-compose:hover[b-6tkattck8a] {
        background: #e9ecef;
    }

/* Message bubbles */
.comm-msg-bubble[b-6tkattck8a] {
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}

    .comm-msg-bubble.incoming[b-6tkattck8a] {
        background: #f1f3f5;
        border: 1px solid #e1e4e8;
    }

    .comm-msg-bubble.outgoing[b-6tkattck8a] {
        background: #e6f4ff;
        border: 1px solid #cfe6ff;
    }

/* Compose stack */
.comm-compose-stack[b-6tkattck8a] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comm-compose-body[b-6tkattck8a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Dropzone wrapper */
.comm-compose-dropzone[b-6tkattck8a] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Drop overlay */
.comm-drop-overlay[b-6tkattck8a] {
    display: none;
    backdrop-filter: blur(2px);
    z-index: 100;
}

.comm-rte-drop-card[b-6tkattck8a] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dee2e6;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.12);
}

.comm-drop-dismiss[b-6tkattck8a] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    font-size: 0.75rem;
    transition: background 0.2s, color 0.2s;
}

    .comm-drop-dismiss:hover[b-6tkattck8a] {
        background: rgba(220, 53, 69, 0.9);
        color: #fff;
    }

/* RTE host sizing */
.comm-rte-row[b-6tkattck8a] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.comm-rte-host[b-6tkattck8a] {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* Attachments drawer */
.comm-attachments-strip[b-6tkattck8a] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

.comm-attachments-drawer[b-6tkattck8a] {
    border-top: 1px solid #dee2e6;
    background: #fafbfc;
    flex-shrink: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

    .comm-attachments-drawer.collapsed[b-6tkattck8a] {
        max-height: 52px;
    }

    .comm-attachments-drawer.expanded[b-6tkattck8a] {
        max-height: 240px;
    }

.comm-drawer-toggle[b-6tkattck8a] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

    .comm-drawer-toggle:hover[b-6tkattck8a] {
        background: #f0f0f0;
    }

.comm-drawer-body[b-6tkattck8a] {
    padding: 0 1rem 0.75rem 1rem;
}

/* Attachment strip */
.att-strip[b-6tkattck8a] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.att-card[b-6tkattck8a] {
    width: 140px;
    min-width: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: #1f2937;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
}

.att-media[b-6tkattck8a] {
    height: 90px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.att-thumb[b-6tkattck8a] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.att-file-icon[b-6tkattck8a] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.att-meta[b-6tkattck8a] {
    padding: 6px 8px;
    font-size: 0.75rem;
    color: #fff;
}

/* Warning icon color */
.comms-icon-warning[b-6tkattck8a] {
    color: #F5BC45;
}

/* Chevron toggle for collapse menus */
.chevron-wrap .chevron-up[b-6tkattck8a] {
    display: none;
}

.chevron-wrap .chevron-down[b-6tkattck8a] {
    display: inline;
}

[aria-expanded="true"] .chevron-wrap .chevron-up[b-6tkattck8a] {
    display: inline;
}

[aria-expanded="true"] .chevron-wrap .chevron-down[b-6tkattck8a] {
    display: none;
}

/* SMS contact multi-contact styling */
.sms-contact-multi .collapse .border-start[b-6tkattck8a] {
    border-color: #dee2e6 !important;
    margin-left: 0.25rem;
}

.sms-contact-multi .btn-link:focus[b-6tkattck8a] {
    box-shadow: none;
}

.sms-contact-multi .chevron-wrap i[b-6tkattck8a] {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 0px #fff;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

    .sms-contact-multi .chevron-wrap i:hover[b-6tkattck8a] {
        color: rgba(255, 255, 255, 1);
        text-shadow: 2px 2px 4px #000;
    }

/* SMS contact card */
.sms-contact-card[b-6tkattck8a] {
    transition: box-shadow 0.15s ease;
}

    .sms-contact-card:hover[b-6tkattck8a] {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
    }

.sms-contact-eye[b-6tkattck8a] {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 0px #fff;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

    .sms-contact-eye:hover[b-6tkattck8a] {
        color: rgba(255, 255, 255, 1);
        text-shadow: 2px 2px 4px #000;
    }

/* Light shadow utility */
.comms-light-shadow[b-6tkattck8a] {
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
}

/* PDF preview */
.pdf-preview-embed[b-6tkattck8a] {
    position: absolute;
    top: 0;
    left: -3px;
    width: 110%;
    height: 110%;
    border: 0;
}

.pdf-click-wrapper[b-6tkattck8a] {
    z-index: 1;
}

/* Send error styling */
.comms-send-error[b-6tkattck8a] {
    border-left: 3px solid #dc3545 !important;
}

.email-accent-error[b-6tkattck8a] {
    width: 7px;
    background: #dc3545;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .email-accent-error:hover[b-6tkattck8a] {
        transform: scaleX(2);
        background: #b02a37;
    }

/* Search result highlight */
.search-highlight-msg[b-6tkattck8a] {
    background: rgba(184, 212, 254, 0.3);
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
}

.search-highlight-pulse[b-6tkattck8a] {
    animation: highlight-pulse-b-6tkattck8a 2s ease-out;
}

@keyframes highlight-pulse-b-6tkattck8a {
    0% {
        background-color: rgba(78, 138, 245, 0.4);
    }

    100% {
        background-color: transparent;
    }
}
/* /Pages/CustomerLookupPage.razor.rz.scp.css */
.page[b-vr94sr4voa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-vr94sr4voa] {
    flex: 1;
}

.sidebar[b-vr94sr4voa] {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: lightgray;
}

.top-row[b-vr94sr4voa] {
    background-color: lightgray;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-vr94sr4voa]  a, .top-row .btn-link[b-vr94sr4voa] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-vr94sr4voa] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-vr94sr4voa] {
        display: none;
    }

    .top-row.auth[b-vr94sr4voa] {
        justify-content: space-between;
    }

    .top-row a[b-vr94sr4voa], .top-row .btn-link[b-vr94sr4voa] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-vr94sr4voa] {
        flex-direction: row;
    }

    .sidebar[b-vr94sr4voa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-vr94sr4voa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-vr94sr4voa], article[b-vr94sr4voa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-zuufoz1zbo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zuufoz1zbo] {
    flex: 1;
}

.sidebar[b-zuufoz1zbo] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-zuufoz1zbo] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zuufoz1zbo]  a, .top-row .btn-link[b-zuufoz1zbo] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-zuufoz1zbo] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-zuufoz1zbo] {
        display: none;
    }

    .top-row.auth[b-zuufoz1zbo] {
        justify-content: space-between;
    }

    .top-row a[b-zuufoz1zbo], .top-row .btn-link[b-zuufoz1zbo] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-zuufoz1zbo] {
        flex-direction: row;
    }

    .sidebar[b-zuufoz1zbo] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zuufoz1zbo] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-zuufoz1zbo], article[b-zuufoz1zbo] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hbkdu8i3m1] {
   /* background-color: rgba(255, 255, 255, 0.1);*/
}

.top-row[b-hbkdu8i3m1] {
    height: 3.5rem;
    /*background-color: rgba(0,0,0,0.4);*/
}

.navbar-brand[b-hbkdu8i3m1] {
    font-size: 1.1rem;
}

.oi[b-hbkdu8i3m1] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-hbkdu8i3m1] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-hbkdu8i3m1] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-hbkdu8i3m1] {
        padding-bottom: 1rem;
    }

    .nav-item[b-hbkdu8i3m1]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-hbkdu8i3m1]  a.active {
    /*background-color: rgba(255,255,255,0.25);*/
    color: white;
}

.nav-item[b-hbkdu8i3m1]  a:hover {
    /*background-color: rgba(255,255,255,0.1);*/
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-hbkdu8i3m1] {
        display: none;
    }

    .collapse[b-hbkdu8i3m1] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}