.chat-view {
  display: none;
  height: 100%;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;

  &.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  .messages-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;

      &:hover {
        background: #94a3b8;
      }
    }

    .messages-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;

      .message {
        display: flex;
        flex-direction: column;
        animation: messageSlideIn 0.3s ease;

        &.user-message {
          align-items: flex-end;

          .message-content {
            align-items: flex-end;
          }
        }

        &.agent-message {
          align-items: flex-start;

          .message-content {
            align-items: flex-start;
          }
        }

        .message-content {
          display: flex;
          flex-direction: column;
          gap: 8px;
          max-width: 85%;

          @media (min-width: 768px) {
            max-width: 75%;
          }

          .message-bubble {
            padding: 16px 20px;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;

            .message-files {
              display: flex;
              flex-direction: column;
              gap: 8px;
              margin-bottom: 12px;

              .file-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px;
                background: rgba(0, 0, 0, 0.03);
                border-radius: 8px;
                transition: all 0.2s ease;

                &:hover {
                  background: rgba(0, 0, 0, 0.05);
                }

                .file-preview {
                  flex-shrink: 0;
                  width: 50px;
                  height: 50px;
                  border-radius: 6px;
                  overflow: hidden;
                  background: #ffffff;

                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }

                .file-icon {
                  flex-shrink: 0;
                  width: 50px;
                  height: 50px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 24px;
                  background: #ffffff;
                  border-radius: 6px;
                }

                .file-details {
                  flex: 1;
                  min-width: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 2px;

                  .file-name {
                    font-size: 13px;
                    font-weight: 500;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  .file-size {
                    font-size: 11px;
                    opacity: 0.7;
                  }
                }

                .file-download {
                  flex-shrink: 0;
                  width: 32px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: rgba(0, 0, 0, 0.05);
                  border-radius: 6px;
                  color: inherit;
                  text-decoration: none;
                  transition: all 0.2s ease;

                  &:hover {
                    background: rgba(0, 0, 0, 0.1);
                  }

                  svg {
                    width: 16px;
                    height: 16px;
                  }
                }
              }
            }

            // Message utilisateur avec fichiers
            &.user-bubble {
              .message-files .file-item {
                background: rgba(255, 255, 255, 0.2);

                &:hover {
                  background: rgba(255, 255, 255, 0.3);
                }

                .file-download {
                  background: rgba(255, 255, 255, 0.2);

                  &:hover {
                    background: rgba(255, 255, 255, 0.3);
                  }
                }
              }
            }

            &:hover {
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            p {
              margin: 0;
              line-height: 1.6;
              font-size: 15px;
              word-wrap: break-word;
              white-space: pre-wrap;
              color: #1f2937;
            }

            &.user-bubble {
              background: white;
              border-bottom-right-radius: 4px;


            }

            &.agent-bubble {
              box-shadow: none;
              //background: #ffffff;
              //border: 1px solid #e5e7eb;
              //border-bottom-left-radius: 4px;
            }

            &.typing-indicator {
              display: flex;
              gap: 6px;
              padding: 20px 24px;
              justify-content: center;
              min-width: 80px;

              span {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #94a3b8;
                animation: typingDot 1.4s infinite;

                &:nth-child(2) {
                  animation-delay: 0.2s;
                }

                &:nth-child(3) {
                  animation-delay: 0.4s;
                }
              }
            }
          }

          .message-actions {
            display: flex;
            gap: 4px;
            transform: translateY(-4px);
            transition: all 0.2s ease;
            padding-left: 4px;


            .action-button {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 32px;
              height: 32px;
              background: transparent;
              border: 1px solid transparent;
              border-radius: 8px;
              color: #6b7280;
              cursor: pointer;
              transition: all 0.2s ease;
              font-size: 14px;

              &:hover {
                background: #f3f4f6;
                border-color: #e5e7eb;
                color: #374151;
              }

              &:active {
                transform: scale(0.95);
              }

              fa-icon {
                font-size: 14px;
              }
            }
          }
        }

        &:hover .message-actions {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }

  .chat-input-container {
    padding: 16px 24px 24px;

    app-chat-input {
      max-width: 800px;
      margin: 0 auto;
      display: block;
    }
  }
}

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

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

// Responsive
@media (max-width: 768px) {
  .chat-view {
    .messages-wrapper {
      .messages-container {
        padding: 24px 16px;
        gap: 20px;

        .message {
          .message-content {
            max-width: 90%;

            .message-bubble {
              padding: 14px 16px;
              font-size: 14px;
            }

            .message-actions {
              .action-button {
                width: 28px;
                height: 28px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .chat-input-container {
      padding: 12px 16px 16px;
    }
  }
}
