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

  100% {
    background-position: 200% 0;
  }
}

.skeleton-loader {
  background: linear-gradient(
    90deg,
    rgba(var(--text-rgb), 0.08) 0%,
    rgba(var(--text-rgb), 0.14) 20%,
    rgba(var(--text-rgb), 0.08) 40%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: 8px;
  pointer-events: none;
}

.skeleton-tweet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-tweet-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-tweet-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-tweet-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skeleton-tweet-name {
  width: 120px;
  height: 16px;
}

.skeleton-tweet-username {
  width: 80px;
  height: 14px;
}

.skeleton-tweet-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-tweet-text {
  width: 100%;
  height: 16px;
}

.skeleton-tweet-text:nth-child(2) {
  width: 90%;
}

.skeleton-tweet-text:nth-child(3) {
  width: 60%;
}

.skeleton-tweet-interactions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.skeleton-tweet-action {
  width: 40px;
  height: 18px;
  border-radius: 4px;
}

.skeleton-dm-conversation {
  display: flex;
  gap: 12px;
  padding: 17px 12px;
  border-bottom: 1px solid var(--border-primary);
  align-items: center;
}

.skeleton-dm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-dm-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-dm-name {
  width: 140px;
  height: 16px;
}

.skeleton-dm-message {
  width: 80%;
  height: 14px;
}

.skeleton-dm-time {
  width: 50px;
  height: 12px;
  margin-left: auto;
}

.skeleton-dm-msg {
  display: flex;
  gap: 8px;
  padding: 0;
  align-items: flex-end;

  .skeleton-dm-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .skeleton-dm-msg-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .skeleton-dm-msg-bubble {
    width: 180px;
    height: 40px;
  }

  .skeleton-dm-msg-time {
    width: 40px;
    height: 10px;
  }

  &.own {
    justify-content: flex-end;

    .skeleton-dm-msg-wrapper {
      align-items: flex-end;
    }

    .skeleton-dm-msg-bubble {
      border-radius: 18px;
      border-bottom-right-radius: 8px;
    }
  }

  &:not(.own) {
    .skeleton-dm-msg-bubble {
      border-radius: 18px;
      border-bottom-left-radius: 8px;
    }
  }
}

.skeleton-profile-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.skeleton-profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  margin-bottom: 8px;
}

.skeleton-profile-name {
  width: 180px;
  height: 24px;
}

.skeleton-profile-username {
  width: 120px;
  height: 16px;
}

.skeleton-profile-bio {
  width: 100%;
  height: 14px;

  &.short {
    width: 65%;
  }
}

.skeleton-profile-bio:nth-child(2) {
  width: 85%;
}

.skeleton-profile-stats {
  display: flex;
  gap: 20px;
}

.skeleton-profile-stat {
  width: 80px;
  height: 16px;
}

.skeleton-container.skeleton-profile {
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-left: -12px;
  padding-left: 12px;
  margin-right: -12px;
  padding-right: 12px;
  width: calc(100% + 24px);
  max-width: unset;

  .skeleton-profile-banner {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    height: 200px;
    border-radius: 0;
  }

  .skeleton-profile-card {
    padding: 0 0px;
    margin-top: -50px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 10;

    &::after {
      content: "";
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      background-color: var(--bg-primary);
      z-index: 5;
    }

    .skeleton-profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid var(--bg-primary);
      flex-shrink: 0;
      z-index: 10;
    }

    .skeleton-profile-actions {
      position: absolute;
      right: 0px;
      top: 67px;

      .skeleton-profile-action-btn {
        width: 100px;
        height: 36px;
        border-radius: 100px;
      }
    }

    .skeleton-profile-info {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 11px;

      .skeleton-profile-name-row {
        display: flex;
        align-items: center;
        gap: 8px;

        .skeleton-profile-name {
          width: 160px;
          height: 30px;
        }
      }

      .skeleton-profile-username {
        width: 100px;
        height: 16px;
      }

      .skeleton-profile-bio {
        width: 100%;
        height: 14px;
        margin-top: 4px;

        &.short {
          width: 65%;
        }
      }

      .skeleton-profile-meta {
        display: flex;
        gap: 16px;
        margin-top: 4px;

        .skeleton-profile-meta-item {
          width: 90px;
          height: 14px;
        }
      }

      .skeleton-profile-stats {
        display: flex;
        gap: 20px;
        margin-top: 4px;

        .skeleton-profile-stat {
          width: 70px;
          height: 16px;
        }
      }
    }
  }

  .skeleton-profile-tabs {
    display: flex;
    gap: 0;
    margin-top: 16px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 0;

    .skeleton-profile-tab {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;

      .skeleton-profile-tab-text {
        width: 50px;
        height: 16px;
      }
    }
  }

  .skeleton-profile-tweets {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-top: 24px;
  }
}

.skeleton-follower {
  display: flex;
  gap: 12px;
  padding: 8px 4px;
  align-items: center;

  .skeleton-follower-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .skeleton-follower-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .skeleton-follower-name {
    width: 120px;
    height: 16px;
  }

  .skeleton-follower-username {
    width: 80px;
    height: 14px;
  }
}

.skeleton-list {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: center;
  border-bottom: 1px solid var(--border-primary);

  .skeleton-list-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .skeleton-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .skeleton-list-name {
    width: 140px;
    height: 16px;
  }

  .skeleton-list-desc {
    width: 180px;
    height: 14px;
  }
}

.skeleton-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.skeleton-community {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  margin-bottom: 16px;
}

.skeleton-community-banner {
  width: 100%;
  height: 100px;
  border-radius: 0;
}

.skeleton-community-content {
  display: flex;
  gap: 12px;
  padding: 16px;
  align-items: flex-start;
}

.skeleton-community-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.skeleton-community-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-community-name {
  width: 180px;
  height: 18px;
}

.skeleton-community-desc {
  width: 100%;
  height: 14px;
}

.skeleton-community-meta {
  width: 100px;
  height: 12px;
}

.skeleton-notification {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-primary);
}

.skeleton-notification-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.skeleton-notification-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.skeleton-notification-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.skeleton-notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-notification-text {
  width: 100%;
  height: 14px;
}

.skeleton-notification-text-short {
  width: 60%;
  height: 14px;
}

.skeleton-user {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: center;
}

.skeleton-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-user-name {
  width: 140px;
  height: 16px;
}

.skeleton-user-username {
  width: 100px;
  height: 14px;
}

.skeleton-news {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
}

.skeleton-news-title {
  width: 60%;
  height: 18px;
}

.skeleton-news-text {
  width: 100%;
  height: 14px;
}

.skeleton-news-text-short {
  width: 40%;
  height: 14px;
}

.skeleton-article {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.skeleton-article-cover {
  width: 100%;
  height: 180px;
}

.skeleton-article-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.skeleton-article-title {
  width: 80%;
  height: 20px;
}

.skeleton-article-excerpt {
  width: 100%;
  height: 14px;
}

.skeleton-article-excerpt-short {
  width: 60%;
  height: 14px;
}

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

.skeleton-article-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.skeleton-article-author {
  width: 80px;
  height: 14px;
}

.skeleton-article-date {
  width: 60px;
  height: 12px;
}