.realtime_viewer_container {
   position: fixed;
   bottom: -350px;
   left: 50%;
   transform: translateX(-50%) translateY(0);
   z-index: 1000;
   background-color: #ffffff;
   border-radius: 16px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
   overflow: hidden;

   transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
   opacity: 0;
}

.realtime_viewer_container.active {
   transform: translateX(-50%) translateY(-380px);
   opacity: 1;
}

@media screen and (max-width: 768px) {
   .realtime_viewer_container {
      width: 340px;
   }

   .realtime_viewer_container.active {
      transform: translateX(-50%) translateY(-360px);
   }
}

@media screen and (max-width: 480px) {
   .realtime_viewer_container {
      width: 90%;
      max-width: 320px;
   }
}

.realtime_viewer_close_button {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 32px;
   height: 32px;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color 0.2s ease;
   z-index: 10;
}

.realtime_viewer_close_button:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.realtime_viewer_close_icon {
   width: 16px;
   height: 16px;
   position: relative;
}

.realtime_viewer_close_icon::before,
.realtime_viewer_close_icon::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 14px;
   height: 2px;
   background-color: #ffffff;
   border-radius: 1px;
}

.realtime_viewer_close_icon::before {
   transform: translate(-50%, -50%) rotate(45deg);
}

.realtime_viewer_close_icon::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}

.realtime_viewer_thumbnail {
   width: 100%;
   height: 400px;
   overflow: hidden;
   background-color: #f8f9fa;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
}

.realtime_viewer_thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.realtime_viewer_thumbnail:hover img {
   transform: scale(1.05);
}

.realtime_viewer_info {
   padding: 24px;
   text-align: center;
}

.realtime_viewer_text {
   font-size: 16px;
   font-weight: 600;
   color: #191f28;
   line-height: 1.5;
   word-break: keep-all;
   margin: 0;
}