.chat-container {
   position: relative;
}

.chat-label {
   position: fixed;
   bottom: 30px;
   right: 30px;
   background: var(--color-primary);
   cursor: pointer;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 18px;
   box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
   padding: var(--space-2);
   transition: all 1s ease;
   z-index: 999;
}

.chat-box {
   display: block;
   background-color: rgba(255, 255, 255, .9);
   border-radius: 2rem 2rem 0 0;
   box-shadow: 10px 10px 15px rgba(73, 78, 92, 0.1);
   width: min( 90vw, 375px);
   height: 540px;
   overflow: hidden;
   position: fixed;
   bottom: -400px;
   right: -100%;
   z-index: 998;
   opacity: 0;
   transition: all 1s ease;
}

.chat-header {
   display: flex;
   padding: 20px 15px;
   align-items: center;
   justify-content: space-between;
   color: var(--color-background);
   background-color: rgba(0, 76, 115, 1);
}

.chat-header h5 {
   margin: 0;
}

.close-label {
   cursor: pointer;
   margin: 0;
}

#chat-icon {
   display: none;
}

#chat-icon:checked ~ .chat-box {
   right: 20px;
   bottom: 70px;
   z-index: 999;
   opacity: 1;
}

#chat-icon:checked ~ .chat-label {
   opacity: 0;
}

@media (max-width: 768px) {
   .chat-label {
      width: 56px;
      height: 56px;
   }
}