.process-details-communication-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgb(0 0 0 / 40%);
    padding: 2rem;
    opacity: 0;
    transition: all cubic-bezier(0.4, 0, 0, 1) 1s;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.process-details-communication-wrapper.is-open {
    opacity: 1;
    pointer-events: all;
}

.close-chat {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 30px;
    right: 30px;
    background-image: var(--icon-close-light);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.communications-wrapper {
    max-width: 1000px;
    background-color: #fff;
    border-radius: var(--border-radius-btn);
    box-shadow: 0 15px 30px rgba(0,0,0,.15);
    padding: 2em;
}

.chat {
    height: calc(100vh - var(--top-bar-height) - 1.875rem * 2 - 200px);
}

.chat-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: 100%;
}

.chat-intro h2 {
    margin: 0 0 .25em;
}

.chat-intro p {
    margin: .25em 0 0;
}

.chat-window {
    height: calc(100% - 1rem - 8rem);
    overflow-y: scroll;
}

.chat-window::-webkit-scrollbar {
  width: 4px;
}

.chat-window::-webkit-scrollbar-track {
  background: var(--color-grey-light);
}

.chat-window::-webkit-scrollbar-thumb {
  background: var(--color-grey);
}

.chat-window::-webkit-scrollbar-thumb:hover {
  background: var(--color-red);
}

.chat-message {
    width: 100%;
    border-radius: var(--border-radius-btn);
    position: relative;
    border: 1px solid var(--color-grey);
}

.chat-progress {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 1rem;
}

.chat-message.user-nrwks {
    background-color: #fff;
    align-self: flex-end;
    color: #000;
}

.chat-message:before {
    display: block;
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    background: #000;
    top: .5em;
    left: .75em;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.chat-message.user-applicant:before {
    right: 0rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath id='Pfad_132' data-name='Pfad 132' d='M8,26a1.959,1.959,0,0,1-2-2c0-2,2-8,10-8s10,6,10,8a1.959,1.959,0,0,1-2,2Zm8-12a6,6,0,1,0-6-6A6,6,0,0,0,16,14Z' transform='translate(-6 -2)' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-size: .5rem;
    background-color: var(--color-blue-dark);
}

.chat-message.user-nrwks:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.178' height='38.187' viewBox='0 0 38.178 38.187'%3E%3Cpath id='Fill_1' data-name='Fill 1' d='M0,0,12.619,23.481,27.283,8.814h-12.6V5.878H32.3V23.5H29.367V10.9L2.073,38.187l36.106-6.753V0H0' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-size: .75rem;
    background-color: var(--color-red);
}

.chat-message-datetime {
    display: flex;
    font-size: .75rem;
    font-weight: 700;
    gap: 1rem;
    margin-bottom: .25rem;
    background: var(--color-grey-light);
    border-radius: calc(var(--border-radius-btn) + 2px) calc(var(--border-radius-btn) + 2px) 0 0;
    padding: 1em 4em;
}

.chat-inputs {
    display: flex;
    gap: 1rem;
    min-height: 10rem;
    max-height: 10rem;
    position: relative;
}

.chat-input-text {
    width: 100%;
}

.chat-input-text textarea {
    max-height: 6rem;
    resize: none;
    min-height: 6rem;
}

.chat-input-send button {
    padding: 0;
    max-height: unset;
    border-radius: calc(var(--border-radius-btn) / 3);
    background-color: #00BE75;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118.922' height='81.434' viewBox='0 0 118.922 81.434'%3E%3Cpath id='noun-send-3264456' d='M107.861,86.11a3.676,3.676,0,0,0-3.416,4.615l8.054,30.167,38.758,5.922-38.767,5.943-8.046,30.153a3.676,3.676,0,0,0,5.211,4.235l74.058-37.028h0a3.675,3.675,0,0,0,0-6.6L109.657,86.493a3.676,3.676,0,0,0-1.795-.381ZM75.936,98.125h0a3.678,3.678,0,0,0,0,7.356H95.983a3.678,3.678,0,1,0,0-7.356Zm-5.671,25.014h0a3.68,3.68,0,0,0,.352,7.35h32.715a3.676,3.676,0,1,0,0-7.35H70.618q-.176-.007-.352,0Zm5.671,24.985a3.676,3.676,0,1,0,0,7.35H95.983a3.676,3.676,0,1,0,0-7.35Z' transform='translate(-66.844 -86.108)' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-size: 1.5rem;
    background-position: right .5em center;
    background-repeat: no-repeat;
    color: #fff;
    padding: .5em 3em .5em 1em;
    text-align: left;
    font-size: .875rem;
}

.chat-input-send button:hover {
    background-color: #005735;
}

.process-details-communication-wrapper :is(.communications-wrapper, .box-view, .chat, .chat-wrapper) {
    height: 100%;
}

.chat-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='525.477' height='524.999' viewBox='0 0 525.477 524.999'%3E%3Cg id='Gruppe_216' data-name='Gruppe 216' transform='translate(-8419.999 11740)'%3E%3Cpath id='Pfad_134' data-name='Pfad 134' d='M590.1,418.6a165.721,165.721,0,0,0-12.6-185.5C574,365.57,457.8,472.5,315,472.5a130.465,130.465,0,0,1-18.551-.875A201.243,201.243,0,0,0,420,513.273a207.53,207.53,0,0,0,87.5-19.25l79.1,46.023v0A15.746,15.746,0,0,0,595,542.5a17.43,17.43,0,0,0,17.148-20.824Z' transform='translate(8332.831 -11757.5)' fill='%23fff'/%3E%3Cpath id='Differenzmenge_9' data-name='Differenzmenge 9' d='M18.146,455.006h0q-.158,0-.315,0a17.495,17.495,0,0,1-10.676-3.677,17.508,17.508,0,0,1-6.824-17.5l27.125-124.6a195.183,195.183,0,0,1-9.224-180.915,205.716,205.716,0,0,1,21-35.669,216.63,216.63,0,0,1,27.8-31.088A226.678,226.678,0,0,1,100.706,35.9a234.318,234.318,0,0,1,38.641-19.378A240.2,240.2,0,0,1,182.029,4.272a247.683,247.683,0,0,1,91.6,0,240.2,240.2,0,0,1,42.682,12.249A234.325,234.325,0,0,1,354.956,35.9a226.683,226.683,0,0,1,33.68,25.657,216.639,216.639,0,0,1,27.8,31.088,205.729,205.729,0,0,1,21,35.669,195.288,195.288,0,0,1,0,163.377,205.726,205.726,0,0,1-21,35.669,216.638,216.638,0,0,1-27.8,31.088,226.687,226.687,0,0,1-33.68,25.657,234.322,234.322,0,0,1-38.641,19.378,240.2,240.2,0,0,1-42.682,12.249,246.92,246.92,0,0,1-45.8,4.272h-.024a245.019,245.019,0,0,1-104.976-23.625l-96.25,56.175A15.733,15.733,0,0,1,18.146,455.006ZM290,165.9,124.467,331.391,343.431,290.44V99.807H111.9l76.53,142.4,88.93-88.947H200.947V135.454H307.8V242.326H290V165.9Z' transform='translate(8420 -11740)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-color: var(--color-blue-medium);
    background-size: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
}

.chat-toggle.is-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='291.121' height='291.121' viewBox='0 0 291.121 291.121'%3E%3Cg id='Gruppe_217' data-name='Gruppe 217' transform='translate(-9270.439 11627.561)'%3E%3Cline id='Linie_101' data-name='Linie 101' x2='289' y2='289' transform='translate(9271.5 -11626.5)' fill='none' stroke='%23fff' stroke-width='6'/%3E%3Cline id='Linie_102' data-name='Linie 102' x2='289' y2='289' transform='translate(9560.5 -11626.5) rotate(90)' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E%0A");
}

span.chat-toggle-label {
    display: none;
}

.notification-indicator {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    height: 1rem;
    width: 1rem;
    background-color: var(--color-red);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--color-red);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 var(--color-red);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }

.chat-message-text {
    padding: 0 1em;
    font-size: .875em;
}

.chat-input-send {
    position: absolute;
    right: 4px;
    top: 4px;
}

.process-details-communication-wrapper .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
    height: 6rem;
    max-height: 6rem;
}