// components/chat/skeletons/ChatSkeleton.scss
.chat-skeleton-container {
  width: 100%;
  max-width: 610px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-skeleton {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

// Header Skeleton Styles
.chat-header-skeleton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

// Message List Skeleton Styles
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #f5f5f5;
}

.chat-message-list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.thread-skeleton {
  max-width: 550px;
}

.date-separator-skeleton {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.message-skeleton {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 70%;

  &.own-message {
    align-self: flex-end;
    flex-direction: row-reverse;
  }
}

.message-content-skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-meta-skeleton {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

// Footer Skeleton Styles
.chat-footer-skeleton {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
}

.chat-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 4px;
}

// Skeleton specific styles
.avatar-skeleton {
  background-color: #e0e0e0;
}

.title-skeleton {
  background-color: #e0e0e0;
}

.status-skeleton {
  background-color: #e0e0e0;
}

.icon-skeleton {
  background-color: #e0e0e0;
}

.date-skeleton {
  background-color: #e0e0e0;
}

.message-avatar-skeleton {
  background-color: #e0e0e0;
}

.sender-skeleton {
  background-color: #e0e0e0;
}

.text-skeleton {
  background-color: #e0e0e0;
}

.time-skeleton {
  background-color: #e0e0e0;
}

.status-skeleton {
  background-color: #e0e0e0;
}

.attach-skeleton {
  background-color: #e0e0e0;
}

.input-skeleton {
  background-color: #e0e0e0;
}

.emoji-skeleton {
  background-color: #e0e0e0;
}

.send-skeleton {
  background-color: #e0e0e0;
}

.action-skeleton {
  background-color: #e0e0e0;
}
