/* 
 * Chat Messages - Stili specifici per i messaggi della chat
 * @copyright [2024] [chat-ida/saintchannel]
 * @author [Dario Santocanale]
 * @version 1.0.0
 *
 * Questo file contiene tutti gli stili relativi ai messaggi della chat,
 * inclusi i tipi di messaggio, animazioni e indicatori di digitazione.
 */

/* ======================================
   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);
}

/* ======================================
   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);
}

.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;
}

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

/* ======================================
   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;
  }
}