/* 
 * Chat Messages - Stili specifici per i messaggi della chat
 * @copyright [2024] [chat-ida/saintchannel]
 * @author [Dario Santocanale]
 * @version 1.0.1
 *
 * Questo file contiene tutti gli stili relativi ai messaggi della chat,
 * inclusi i tipi di messaggio, animazioni e indicatori di digitazione.
 * Updated: 2026-01-18 - Fixed gallery navigation with pixel-based scrolling
 */

/* ======================================
   1. STRUTTURA BASE DEI MESSAGGI
   ====================================== */

/* Container principale dei messaggi */
.chat-container .chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--chat-message-spacing);
  display: flex;
  flex-direction: column;
  gap: var(--chat-message-gap);
  scroll-behavior: smooth;
}

/* Stile base per tutti i messaggi */
.chat-container .message {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  max-width: 80%;
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: var(--chat-border-radius);
  animation: messageFadeIn 0.3s ease forwards;
}

/* Contenuto del messaggio */
.chat-container .message-content {
  word-break: break-word;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Timestamp del messaggio */
.chat-container .message-timestamp {
  font-size: var(--chat-font-size-xs);
  color: var(--chat-text-muted);
  margin-bottom: 0.25rem;
  text-align: right;
}

/* ======================================
   2. TIPI DI MESSAGGIO
   ====================================== */

/* Messaggio dell'utente */
.chat-container .message.user {
  background-color: var(--chat-message-user-bg);
  color: var(--chat-message-user-text);
  border: 1px solid var(--chat-message-user-border);
  border-radius: var(--chat-border-radius) 0 var(--chat-border-radius) var(--chat-border-radius);
  align-self: flex-end;
  margin-left: auto;
}

.chat-container .message.user p {
  /* Questa regola contrasta eventuali stili ereditati sul sito */
  color: var(--chat-message-user-text);
}

/* Messaggio dell'assistente */
.chat-container .message.assistant {
  background-color: var(--chat-message-assistant-bg);
  color: var(--chat-message-assistant-text);
  border: 1px solid var(--chat-message-assistant-border);
  border-radius: 0 var(--chat-border-radius) var(--chat-border-radius) var(--chat-border-radius);
  align-self: flex-start;
  margin-right: auto;
  box-shadow: var(--chat-box-shadow-input);
}

.chat-container .message.assistant p {
  /* Questa regola contrasta eventuali stili ereditati sul sito */
  color: var(--chat-message-assistant-text);
}

.chat-container .message.assistant .message-timestamp {
  text-align: left;
}

/* Messaggio di sistema */
.chat-container .message.system {
  background-color: var(--chat-message-system-bg);
  color: var(--chat-message-system-text);
  border: 1px solid var(--chat-message-system-border);
  max-width: 90%;
  align-self: center;
  text-align: center;
  border-radius: var(--chat-border-radius);
}

/* Notifiche in chat */
.chat-container .message.notification {
  max-width: 90%;
  align-self: center;
  border-radius: var(--chat-border-radius);
  padding: 1rem 1.25rem;
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: notificationSlideIn 0.4s ease-out forwards;
}

.chat-container .message.notification .notification-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.chat-container .message.notification .notification-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.chat-container .message.notification .notification-body {
  line-height: 1.6;
  text-align: left;
}

.chat-container .message.notification .notification-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.chat-container .message.notification .notification-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.chat-container .message.notification .notification-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Tipi di notifica */
.chat-container .message.notification.error {
  background-color: #fee;
  border: 2px solid #fcc;
  color: #c33;
}

.chat-container .message.notification.error .notification-btn {
  background-color: #c33;
  color: white;
}

.chat-container .message.notification.error .notification-btn:hover {
  background-color: #a22;
}

.chat-container .message.notification.warning {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  color: #856404;
}

.chat-container .message.notification.warning .notification-btn {
  background-color: #ffc107;
  color: #212529;
}

.chat-container .message.notification.warning .notification-btn:hover {
  background-color: #e0a800;
}

.chat-container .message.notification.info {
  background-color: #d1ecf1;
  border: 2px solid #17a2b8;
  color: #0c5460;
}

.chat-container .message.notification.info .notification-btn {
  background-color: #17a2b8;
  color: white;
}

.chat-container .message.notification.info .notification-btn:hover {
  background-color: #138496;
}

.chat-container .message.notification.success {
  background-color: #d4edda;
  border: 2px solid #28a745;
  color: #155724;
}

.chat-container .message.notification.success .notification-btn {
  background-color: #28a745;
  color: white;
}

.chat-container .message.notification.success .notification-btn:hover {
  background-color: #218838;
}

/* Animazione notifica */
@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================
   3. MESSAGGIO DI BENVENUTO
   ====================================== */

.chat-container .chat-welcome {
  text-align: center;
  padding: 1.5rem;
  color: var(--chat-text);
  max-width: 90%;
  width: 500px;
  margin: auto;
  background-color: var(--chat-bg-light);
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-border-radius);
  box-shadow: var(--chat-box-shadow-light);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chat-container .chat-welcome h2 {
  font-size: var(--chat-font-size-xl);
  margin-bottom: var(--chat-spacing-md);
  color: var(--chat-primary);
}

.chat-container .chat-welcome p {
  margin-bottom: var(--chat-spacing-md);
  line-height: 1.5;
}

.chat-container .chat-provider-info {
  font-size: var(--chat-font-size-sm);
  opacity: 0.7;
  margin-top: var(--chat-spacing-md);
  padding-top: 0.5rem;
  border-top: 1px solid var(--chat-border);
}

/* ======================================
   4. INDICATORE DI DIGITAZIONE
   ====================================== */

.chat-container .typing-message {
  padding-top: var(--chat-spacing-md) !important;
  padding-bottom: var(--chat-spacing-md) !important;
}

.chat-container .typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--chat-spacing-xs);
}

/* Inline label dentro l'indicatore (usato durante streaming SSE).
   Manteniamo i 3 span dot come primi in DOM per non rompere :nth-child(1..3),
   ma spostiamo visivamente la label all'inizio così i puntini restano alla fine. */
.chat-container .typing-indicator .typing-indicator-label {
  order: -1;
  margin-right: 6px;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  opacity: 1;
  animation: none;
  color: var(--chat-text-muted);
  font-size: var(--chat-font-size-sm);
  line-height: 1.3;
  white-space: normal;
  flex: 1 1 auto;
  min-width: 0;
}

.chat-container .typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--chat-primary);
  border-radius: 50%;
  opacity: 0.7;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.chat-container .typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.chat-container .typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-container .typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

.chat-container .typing-label {
  margin-top: 0.35rem;
  font-size: var(--chat-font-size-sm);
  color: var(--chat-text-muted);
  line-height: 1.3;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}

/* ======================================
   4b. STREAMING UX - PUNTINI INLINE E BLOCCO INTERAZIONI
   ====================================== */

/* Puntini animati mostrati alla fine del testo durante streaming */
.streaming-dots-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.streaming-dots-inline .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--chat-primary, #007bff);
  border-radius: 50%;
  opacity: 0.7;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.streaming-dots-inline .dot:nth-child(1) {
  animation-delay: 0s;
}

.streaming-dots-inline .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.streaming-dots-inline .dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Classe per bloccare le interazioni sul messaggio durante streaming */
.streaming-blocked {
  pointer-events: none;
  user-select: none;
}

.streaming-blocked a,
.streaming-blocked button,
.streaming-blocked [role="button"],
.streaming-blocked .action-button {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ======================================
   5. ALLEGATI NEI MESSAGGI
   ====================================== */

.chat-container .sct-chat-attachment.in-message {
  max-width: 320px;
  margin-top: 5px;
  margin-bottom: 5px;
  align-self: flex-start;
}

.chat-container .message.user .sct-chat-attachment.in-message {
  align-self: flex-end;
  margin-left: auto;
}

/* ======================================
   6. ANIMAZIONI
   ====================================== */

@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================
   7. LAYOUT SPECIFICO PER FULLSCREEN
   ====================================== */

.chat-container .chat-fullscreen #chat-messages {
  height: calc(100% - var(--chat-header-height) - var(--chat-height-component)) !important;
  margin-bottom: var(--chat-height-component) !important;
  padding-bottom: calc(var(--chat-height-component) + 20px) !important;
}

/* ======================================
   8. SCROLLBAR PERSONALIZZATA
   ====================================== */

.chat-container .chat-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-container .chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-container .chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--chat-primary);
  border-radius: 20px;
  border: 2px solid var(--chat-bg);
}

/* ======================================
   9. RESPONSIVE
   ====================================== */

@media (max-width: 768px) {
  .chat-container .message {
    max-width: 90%;
  }
  
  .chat-container .chat-welcome {
    width: 90%;
    padding: var(--chat-spacing-md);
  }
  
  /* Fix per l'ultimo messaggio che viene nascosto dall'area input in modalità fullscreen */

  
  /* Assicura che ci sia spazio sufficiente per vedere l'ultimo messaggio */
  .chat-container.chat-fullscreen #chat-messages {
    padding-bottom: calc(var(--chat-input-wrapper-height, 80px) + 60px) !important;
  }
}

/* ======================================
   8. MESSAGE GALLERY (IMAGES-TOP)
   ====================================== */

/* Container gallery - ZERO margini/padding per evitare spazi extra */
.chat-container .message-gallery {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--chat-border-radius);
  overflow: hidden;
  position: relative;
  display: block;
  white-space: normal; /* Reset pre-wrap ereditato da message-content */
}

/* Assicura che la gallery non erediti spazi da elementi parent */
.chat-container .message-content > .message-gallery {
  margin-top: 20px !important;
  margin-bottom: 0.5rem !important;
}

/* Su mobile riduci lo spazio sopra e sotto */
@media (max-width: 480px) {
  .chat-container .message-content > .message-gallery {
    margin-top: 8px !important;
    margin-bottom: 0.25rem !important;
  }
}

/* Rimuovi margini da p vuoti o contenenti solo gallery */
.chat-container .message-content > p:empty,
.chat-container .message-content > p:has(> .message-gallery:only-child) {
  display: contents; /* Rende il p trasparente al layout */
  margin: 0;
  padding: 0;
}

/* Gallery container con navigazione */
.chat-container .gallery-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--chat-border-radius);
  background-color: transparent;
  /* Altezza minima proporzionale: slide quadrate max 250px */
  min-height: min(250px, 70vw);
}

/* Single image: aspect ratio 16:9, centrata */
.chat-container .gallery-container.gallery-single {
  aspect-ratio: 16 / 9;
  min-height: auto;
  max-width: 520px;
  margin: 0 auto;
}

/* Track scorrevole che contiene le immagini */
.chat-container .gallery-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
  gap: 8px;
  padding: 0;
  white-space: normal; /* Reset pre-wrap ereditato da message-content */
}

/* Multi-image mode: immagini QUADRATE max 250x250 */
.chat-container .gallery-container:not(.gallery-single) .gallery-slide {
  flex: 0 0 auto;
  width: min(250px, 70vw);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

/* Single image mode: 16:9, con max-width (centrata) */
.chat-container .gallery-container.gallery-single .gallery-track {
  justify-content: center;
}

.chat-container .gallery-container.gallery-single .gallery-slide {
  flex: 0 0 auto;
  width: min(100%, 520px);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.chat-container .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene aspect ratio e riempie il container quadrato */
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 6px;
}

.chat-container .gallery-single .gallery-image {
  border-radius: 0;
}

.chat-container .gallery-image:hover {
  opacity: 0.95;
}

/* Placeholder durante caricamento */
.chat-container .gallery-image-placeholder {
  width: 100%;
  height: 150px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: galleryShimmer 1.5s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-text-muted);
  font-size: 0.85rem;
}

@keyframes galleryShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Navigazione frecce - Design moderno */
.chat-container .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 1;
  pointer-events: auto;
}

/* SVG arrow icons dentro le frecce */
.chat-container .gallery-nav::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #333;
  border-bottom: 2.5px solid #333;
  display: block;
}

.chat-container .gallery-prev::before {
  transform: rotate(135deg);
  margin-left: 3px;
}

.chat-container .gallery-next::before {
  transform: rotate(-45deg);
  margin-right: 3px;
}

.chat-container .gallery-nav:hover {
  background-color: var(--chat-primary, #007bff);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.chat-container .gallery-nav:hover::before {
  border-color: white;
}

.chat-container .gallery-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.chat-container .gallery-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background-color: rgba(200, 200, 200, 0.7);
}

.chat-container .gallery-prev {
  left: 6px;
}

.chat-container .gallery-next {
  right: 6px;
}

/* Indicatori (dots) */
.chat-container .gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 3px 8px;
}

.chat-container .gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.chat-container .gallery-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.chat-container .gallery-dot.active {
  background-color: white;
  transform: scale(1.2);
}

/* Single image mode (no navigation) */
.chat-container .gallery-single .gallery-nav,
.chat-container .gallery-single .gallery-dots {
  display: none;
}

/* Counter badge */
.chat-container .gallery-counter {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 5;
}

/* ======================================
   GALLERY SKELETON LOADER (STREAMING)
   ====================================== */

/* Skeleton con GIF animata durante caricamento streaming */
.chat-container .gallery-skeleton {
  margin: 12px 0;
}

.chat-container .gallery-skeleton .gallery-container {
  position: relative;
  width: min(250px, 70vw);
  min-height: 250px;
  background: #f5f5f5;
  border-radius: var(--chat-border-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container .gallery-skeleton .gallery-container.gallery-single {
  width: min(100%, 520px);
  min-height: auto;
  aspect-ratio: 16 / 9;
}

.chat-container .gallery-skeleton-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--chat-border-radius);
}

.chat-container .gallery-skeleton-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--chat-border-radius);
  color: #999;
  font-size: 0.9rem;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ====================================== */

/* Lightbox overlay */
.chat-gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chat-gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.chat-gallery-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.chat-gallery-lightbox .lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.chat-gallery-lightbox .lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Skeleton GIF singola (non dentro carosello) */
.chat-container .gallery-skeleton-single {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--chat-border-radius);
  background-color: transparent;
}

.chat-container .gallery-skeleton-single .gallery-skeleton-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive gallery */
@media (max-width: 480px) {
  /* Su mobile ridimensiona ma mantieni quadrato, max 180x180 */
  .chat-container .gallery-container:not(.gallery-single) .gallery-slide {
    flex: 0 0 auto;
    width: min(180px, 70vw);
    aspect-ratio: 1 / 1;
  }
  
  /* Container mobile: adatta altezza a 70vw per quadrato */
  .chat-container .gallery-container:not(.gallery-single) {
    min-height: min(180px, 70vw);
  }
  
  /* Skeleton GIF singola su mobile */
  .chat-container .gallery-skeleton-single {
    max-width: 100%;
  }
  
  .chat-container .gallery-nav {
    width: 30px;
    height: 30px;
  }
  
  .chat-container .gallery-nav::before {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
  
  .chat-container .gallery-dots {
    padding: 3px 8px;
  }
  
  .chat-container .gallery-dot {
    width: 6px;
    height: 6px;
  }
}

/* ======================================
   GALLERY - FIX FLICKERING SU SCHERMI PICCOLI
   ====================================== */

/* Stabilizza la gallery container per prevenire flickering */
.chat-container .gallery-container {
  /* GPU layer stabile per evitare repaint */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Contenimento solo paint per evitare overlap sul layout */
  contain: paint;
}

/* Ottimizzazioni per chat floating/embedded piccola */
.chat-container:not(.chat-fullscreen) .gallery-container {
  /* Forza GPU compositing stabile */
  isolation: isolate;
}

.chat-container:not(.chat-fullscreen) .gallery-track {
  /* Rimuovi will-change dinamico su viewports piccoli - causa flickering */
  will-change: auto;
  /* Transizione più fluida con meno repaint */
  transform: translateZ(0);
}

/* Quando la chat è stretta (floating mode tipico) */
@media (max-width: 400px), (max-height: 500px) {
  .chat-container .gallery-container {
    /* Layout più stabile senza collassare l'altezza */
    contain: paint;
  }
  
  .chat-container .gallery-track {
    /* Transizione più corta per evitare frame drops */
    transition: transform 0.25s ease-out;
    /* Rimuovi will-change che può causare flickering */
    will-change: auto;
  }
  
  .chat-container .gallery-slide {
    /* Riduci complessità rendering */
    transform: translateZ(0);
  }
  
  .chat-container .gallery-image {
    /* Evita animazioni che causano reflow */
    transition: none;
  }
  
  .chat-container .gallery-nav {
    /* Rendering più leggero */
    transition: opacity 0.15s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .chat-container .gallery-nav:hover {
    /* Disabilita scale su mobile per evitare reflow */
    transform: translateY(-50%);
  }
}

/* Fix specifico per chat embedded con dimensioni fisse piccole */
.chat-container[style*="width"][style*="height"] .gallery-container,
.chat-container.embedded .gallery-container {
  contain: strict;
}

.chat-container[style*="width"][style*="height"] .gallery-track,
.chat-container.embedded .gallery-track {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}